vs-label-value

pubg · Dec 28, 2023 · b1dba7c · b1dba7c
1 parent caf2ff8
commit b1dba7c
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 47 deletions.
diff --git a/packages/vlossom/.storybook/examples/style-set.ts b/packages/vlossom/.storybook/examples/style-set.ts
@@ -3,11 +3,12 @@ import type {
     VsButtonStyleSet,
     VsDividerStyleSet,
     VsInputStyleSet,
-    VsSectionStyleSet,
-    VsPageStyleSet,
-    VsValueTagStyleSet,
+    VsLabelValueStyleSet,
     VsNoticeStyleSet,
+    VsPageStyleSet,
     VsProgressStyleSet,
+    VsSectionStyleSet,
+    VsValueTagStyleSet,
 } from '@/components/types';
 
 const vsButton: VsButtonStyleSet = {
@@ -26,6 +27,16 @@ const vsInput: VsInputStyleSet = {
     fontColor: '#1e88e5',
 };
 
+const vsLabelValue: VsLabelValueStyleSet = {
+    backgroundColor: '#f5f5f5',
+    fontSize: '0.95rem',
+    labelBackgroundColor: '#18122b',
+    labelColor: '#ffffff',
+    labelFontWeight: '550',
+    labelWidth: '10%',
+    padding: '2rem',
+};
+
 const vsNotice: VsNoticeStyleSet = {
     backgroundColor: '#1e88e5',
     color: 'white',
@@ -45,6 +56,12 @@ const vsPage: VsPageStyleSet = {
     padding: '0.8rem 1.5rem',
 };
 
+const vsProgress: VsProgressStyleSet = {
+    borderRadius: '0.2rem',
+    height: '0.5rem',
+    width: '100%',
+};
+
 const vsValueTag: VsValueTagStyleSet = {
     backgroundColor: '#b6c4b6',
     color: '#304d30',
@@ -53,19 +70,15 @@ const vsValueTag: VsValueTagStyleSet = {
     width: '50%',
 };
 
-const vsProgress: VsProgressStyleSet = {
-    borderRadius: '0.2rem',
-    height: '0.5rem',
-    width: '100%',
-};
 
 export const styleSet: StyleSet = {
     VsButton: { myStyleSet: vsButton },
     VsDivider: { myStyleSet: vsDivider },
     VsInput: { myStyleSet: vsInput },
+    VsLabelValue: { myStyleSet: vsLabelValue },
     VsNotice: { myStyleSet: vsNotice },
-    VsSection: { myStyleSet: vsSection },
     VsPage: { myStyleSet: vsPage },
     VsProgress: { myStyleSet: vsProgress },
+    VsSection: { myStyleSet: vsSection },
     VsValueTag: { myStyleSet: vsValueTag },
 };
diff --git a/packages/vlossom/src/components/vs-label-value/VsLabelValue.scss b/packages/vlossom/src/components/vs-label-value/VsLabelValue.scss
@@ -1,27 +1,28 @@
 .vs-label-value {
     width: 100%;
     height: 100%;
-    background-color: var(--vs-light-backgroundColor);
+    background-color: var(--vs-label-value-backgroundColor, var(--vs-light-backgroundColor));
     display: flex;
     justify-content: between;
+    font-size: var(--vs-label-value-fontSize, 1.2rem);
 
     > .cell {
         display: flex;
         align-items: center;
-        padding: 1.2rem 1.6rem;
+        padding: var(--vs-label-value-padding, 1.2rem 1.6rem);
     }
 
     .label {
-        flex: 0 0 10rem;
-        padding: 1.2rem 1.4rem;
-        font-weight: 500;
-        background-color: var(--vs-label-value-backgroundColor, var(--vs-comp-backgroundColor));
-        color: var(--vs-label-value-color, var(--vs-comp-color));
+        flex-basis: var(--vs-label-value-labelWidth, 15%);
+        padding: var(--vs-label-value-labelPadding, 1.2rem 1.4rem);
+        font-weight: var(--vs-label-value-labelFontWeight, 500);
+        background-color: var(--vs-label-value-labelBackgroundColor, var(--vs-comp-backgroundColor));
+        color: var(--vs-label-value-labelColor, var(--vs-comp-color));
         word-break: break-word;
     }
 
     .value {
-        flex: 1 !important;
+        flex: 1;
         overflow-x: auto;
     }
 
@@ -39,3 +40,25 @@
         }
     }
 }
+
+@media screen and (max-width: 768px) {
+    .vs-label-value {
+        flex-direction: column;
+        width: 100%;
+
+        > .cell {
+            flex: 0;
+            justify-content: flex-start;
+            padding: 0.8rem 1.2rem;
+        }
+
+        .label {
+            line-height: 1.4;
+            flex: 0;
+        }
+
+        .actions {
+            justify-content: flex-end;
+        }
+    }
+}
diff --git a/packages/vlossom/src/components/vs-label-value/VsLabelValue.vue b/packages/vlossom/src/components/vs-label-value/VsLabelValue.vue
@@ -1,12 +1,12 @@
 <template>
     <div :class="['vs-label-value', `vs-${computedColorScheme}`, { ...classObj }]" :style="customProperties">
-        <div v-if="hasLabel" class="cell label">
+        <div v-if="hasLabel" class="cell label" :style="align">
             <slot name="label" />
         </div>
-        <div v-if="hasValue" class="cell value">
+        <div v-if="hasValue" class="cell value" :style="align">
             <slot name="value" />
         </div>
-        <div v-if="hasActions" class="cell actions">
+        <div v-if="hasActions" class="cell actions" :style="align">
             <slot name="actions" />
         </div>
     </div>
@@ -18,14 +18,13 @@ import { ColorScheme, VsComponent } from '@/declaration/types';
 
 interface LabelValueStyleSet {
     backgroundColor: string;
-    borderRadius: string;
-    color: string;
     fontSize: string;
-    fontWeight: string;
+    labelBackgroundColor: string;
+    labelColor: string;
+    labelFontWeight: string;
+    labelPadding: string;
     labelWidth: string;
-    lineHeight: string;
     padding: string;
-    width: string;
 }
 
 export type VsLabelValueStyleSet = Partial<LabelValueStyleSet>;
@@ -38,9 +37,10 @@ export default defineComponent({
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsLabelValueStyleSet>, default: '' },
         primary: { type: Boolean, default: false },
+        verticalAlign: { type: String, default: '' },
     },
     setup(props, { slots }) {
-        const { colorScheme, styleSet, primary } = toRefs(props);
+        const { colorScheme, styleSet, primary, verticalAlign } = toRefs(props);
 
         const { computedColorScheme } = useColorScheme(name, colorScheme);
 
@@ -50,11 +50,21 @@ export default defineComponent({
         const hasValue = computed((): boolean => !!slots['value']);
         const hasActions = computed((): boolean => !!slots['actions']);
 
+        const align = computed(() => {
+            if (verticalAlign.value === 'top') {
+                return { alignItems: 'flex-start' };
+            } else if (verticalAlign.value === 'bottom') {
+                return { alignItems: 'flex-end' };
+            }
+            return {};
+        });
+
         const classObj = computed(() => ({
             primary: primary.value,
         }));
 
         return {
+            align,
             computedColorScheme,
             classObj,
             customProperties,

diff --git a/packages/vlossom/src/components/vs-label-value/__tests__/vs-label-value.test.ts b/packages/vlossom/src/components/vs-label-value/__tests__/vs-label-value.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import VsLabelValue from '../VsLabelValue.vue';
+
+describe('vs-label-value', () => {
+    it('slot으로 label, value를 설정할 수 있다', () => {
+        //given
+        const wrapper = mount(VsLabelValue, {
+            slots: {
+                label: 'MyLabel',
+                value: 'MyValue',
+            },
+        });
+
+        //then
+        expect(wrapper.find('.label').exists()).toBe(true);
+        expect(wrapper.find('.value').exists()).toBe(true);
+        expect(wrapper.html()).toContain('MyLabel');
+        expect(wrapper.html()).toContain('MyValue');
+    });
+
+    it('slot으로 actions를 설정할 수 있다', () => {
+        //given
+        const wrapper = mount(VsLabelValue, {
+            slots: {
+                actions: '<div>action</div>',
+            },
+        });
+
+        //then
+        expect(wrapper.find('.actions').exists()).toBe(true);
+        expect(wrapper.html()).toContain('<div>action</div>');
+    });
+
+    it('props verticalAlgin:top일 때, label, value, actions의 스타일에 align-items: flex-start;가 적용된다 ', () => {
+        //given
+        const wrapper = mount(VsLabelValue, {
+            slots: {
+                label: 'MyLabel',
+                value: 'MyValue',
+                actions: '<div>action</div>',
+            },
+            props: {
+                verticalAlign: 'top',
+            },
+        });
+
+        //then
+        expect(wrapper.find('.label').attributes().style.includes('align-items: flex-start;')).toBe(true);
+        expect(wrapper.find('.value').attributes().style.includes('align-items: flex-start;')).toBe(true);
+        expect(wrapper.find('.actions').attributes().style.includes('align-items: flex-start;')).toBe(true);
+    });
+
+    it('props verticalAlgin:bottom일 때, label, value, actions의 스타일에 align-items: flex-end;가 적용된다 ', () => {
+        //given
+        const wrapper = mount(VsLabelValue, {
+            slots: {
+                label: 'MyLabel',
+                value: 'MyValue',
+                actions: '<div>action</div>',
+            },
+            props: {
+                verticalAlign: 'bottom',
+            },
+        });
+
+        //then
+        expect(wrapper.find('.label').attributes().style.includes('align-items: flex-end;')).toBe(true);
+        expect(wrapper.find('.value').attributes().style.includes('align-items: flex-end;')).toBe(true);
+        expect(wrapper.find('.actions').attributes().style.includes('align-items: flex-end;')).toBe(true);
+    });
+});
diff --git a/packages/vlossom/src/components/vs-label-value/stories/VsLabelValue.stories.ts b/packages/vlossom/src/components/vs-label-value/stories/VsLabelValue.stories.ts
@@ -9,7 +9,7 @@ perferendis sed voluptates omnis sit maxime ad! Porro incidunt
 voluptatem quaerat sint itaque, blanditiis excepturi!`;
 
 const meta: Meta<typeof VsLabelValue> = {
-    title: 'Components/Base Components/VsLabelValue',
+    title: 'Components/Layout Components/VsLabelValue',
     component: VsLabelValue,
     render: (args: any) => ({
         components: { VsLabelValue },
@@ -71,24 +71,76 @@ export const Primary: Story = {
     }),
 };
 
-// export const StyleSet: Story = {
-//     args: {
-//         styleSet: {
-//             backgroundColor: '#99b1ff',
-//             borderRadius: '0.3rem',
-//             color: '#392467',
-//             fontSize: '1.5rem',
-//             fontWeight: '550',
-//             padding: '0.18rem',
-//             labelWidth: '4rem',
-//             lineHeight: '3rem',
-//             width: '20rem',
-//         },
-//     },
-// };
+export const HasActions: Story = {
+    render: (args: any) => ({
+        components: { VsLabelValue },
+        setup() {
+            return { args };
+        },
+        template: `
+        <vs-label-value v-bind="args">
+            <template #label>label</template>
+            <template #value>${value}</template>
+            <template #actions><vs-button dense primary>action</vs-button></template>
+        </vs-label-value>
+        `,
+    }),
+};
 
-// export const PreDefinedStyleSet: Story = {
-//     args: {
-//         styleSet: 'myStyleSet',
-//     },
-// };
+export const VerticalAlignTop: Story = {
+    render: (args: any) => ({
+        components: { VsLabelValue },
+        setup() {
+            return { args };
+        },
+        template: `
+        <vs-label-value v-bind="args">
+            <template #label>label</template>
+            <template #value>${value}</template>
+            <template #actions><vs-button dense primary>action</vs-button></template>
+        </vs-label-value>
+        `,
+    }),
+    args: {
+        verticalAlign: 'top',
+    },
+};
+
+export const VerticalAlignBottom: Story = {
+    render: (args: any) => ({
+        components: { VsLabelValue },
+        setup() {
+            return { args };
+        },
+        template: `
+        <vs-label-value v-bind="args">
+            <template #label>label</template>
+            <template #value>${value}</template>
+            <template #actions><vs-button dense primary>action</vs-button></template>
+        </vs-label-value>
+        `,
+    }),
+    args: {
+        verticalAlign: 'bottom',
+    },
+};
+
+export const StyleSet: Story = {
+    args: {
+        styleSet: {
+            backgroundColor: '#f8e8ee',
+            fontSize: '1.3rem',
+            labelBackgroundColor: '#fdcedf',
+            labelColor: '#a7727d',
+            labelFontWeight: '550',
+            labelWidth: '15rem',
+            padding: '2rem 2rem',
+        },
+    },
+};
+
+export const PreDefinedStyleSet: Story = {
+    args: {
+        styleSet: 'myStyleSet',
+    },
+};