add vs-value-tag

pubg · Dec 21, 2023 · 3e77a1f · 3e77a1f
1 parent f3aea25
commit 3e77a1f
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 5 deletions.
diff --git a/packages/vlossom/.storybook/examples/style-set.ts b/packages/vlossom/.storybook/examples/style-set.ts
@@ -33,10 +33,16 @@ const vsPage: VsPageStyleSet = {
     padding: '0.8rem 1.5rem',
 };
 
+const vsValueTag: VsValueTagStyleSet = {
+    backgroundColor: '#b6c4b6',
+    color: '#304d30',
+};
+
 export const styleSet: StyleSet = {
     VsButton: { myStyleSet: vsButton },
     VsDivider: { myStyleSet: vsDivider },
     VsInput: { myStyleSet: vsInput },
     VsSection: { myStyleSet: vsSection },
     VsPage: { myStyleSet: vsPage },
+    VsValueTag: { myStyleSet: vsValueTag },
 };
diff --git a/packages/vlossom/src/components/vs-value-tag/VsValueTag/VsValueTag.scss b/packages/vlossom/src/components/vs-value-tag/VsValueTag/VsValueTag.scss
@@ -0,0 +1,36 @@
+// @use '@/styles/abstracts' as *;
+
+.vs-value-tag {
+    display: flex;
+    align-items: center;
+    padding: 2px 2px;
+    border-radius: 3px;
+    font-size: 1.2rem;
+    background-color: var(--vs-value-tag-backgroundColor, var(--vs-comp-backgroundColor));
+    width: 100%;
+
+    .label {
+        padding: 0 1.2rem 0 0.8rem;
+        color: var(--vs-value-tag-color, var(--vs-comp-color));
+        width: var(--vs-value-tag-labelWidth, '100%');
+    }
+
+    .value {
+        flex: 1;
+        line-height: 2.2rem;
+        padding-left: 0.8rem;
+        padding-right: 0.8rem;
+        background-color: var(--vs-plain-backgroundColor);
+    }
+}
+
+// Primary {
+.vs-value-tag {
+    &.primary {
+        background-color: var(--vs-value-tag-backgroundColor, var(--vs-comp-backgroundColor-primary));
+
+        .label {
+            color: var(--vs-value-tag-color, var(--vs-comp-color-primary));
+        }
+    }
+}
diff --git a/packages/vlossom/src/components/vs-value-tag/VsValueTag/VsValueTag.vue b/packages/vlossom/src/components/vs-value-tag/VsValueTag/VsValueTag.vue
@@ -1,12 +1,23 @@
 <template>
-    <div> </div>
+    <div :class="['vs-value-tag', `vs-${computedColorScheme}`, { ...classObj }]" :style="customProperties">
+        <div v-if="hasLabel" class="label">
+            <slot name="label" />
+        </div>
+        <div class="value">
+            <slot name="value" />
+        </div>
+    </div>
 </template>
 <script lang="ts">
-import { PropType, defineComponent, toRefs } from 'vue';
+import { PropType, computed, defineComponent, toRefs } from 'vue';
 import { useColorScheme, useCustomStyle } from '@/composables';
 import { ColorScheme, VsComponent } from '@/declaration/types';
 
-interface ValueTagStyleSet {}
+interface ValueTagStyleSet {
+    backgroundColor: string;
+    color: string;
+    labelWidth: string;
+}
 
 export type VsValueTagStyleSet = Partial<ValueTagStyleSet>;
 
@@ -17,17 +28,26 @@ const VsValueTag = defineComponent({
     props: {
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsValueTagStyleSet>, default: '' },
+        primary: { type: Boolean, default: false },
     },
-    setup(props) {
-        const { colorScheme, styleSet } = toRefs(props);
+    setup(props, { slots }) {
+        const { colorScheme, styleSet, primary } = toRefs(props);
 
         const { computedColorScheme } = useColorScheme(name, colorScheme);
 
         const { customProperties } = useCustomStyle<VsValueTagStyleSet>(name, styleSet);
 
+        const hasLabel = computed((): boolean => !!slots['label']);
+
+        const classObj = computed(() => ({
+            primary: primary.value,
+        }));
+
         return {
             computedColorScheme,
             customProperties,
+            hasLabel,
+            classObj,
         };
     },
 });

diff --git a/packages/vlossom/src/components/vs-value-tag/VsValueTag/__test__/vs.page.test.ts b/packages/vlossom/src/components/vs-value-tag/VsValueTag/__test__/vs.page.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import VsValueTag from '../VsValueTag.vue';
+
+describe('vs-value-tag', () => {
+    it('slot으로 label, value를 설정할 수 있다', () => {
+        //given
+        const wrapper = mount(VsValueTag, {
+            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');
+    });
+});
diff --git a/packages/vlossom/src/components/vs-value-tag/VsValueTag/stories/VsValueTag.stories.ts b/packages/vlossom/src/components/vs-value-tag/VsValueTag/stories/VsValueTag.stories.ts
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import VsValueTag from '../VsValueTag.vue';
+import { colorScheme } from '@/declaration/storybook/arg-types';
+
+const meta: Meta<typeof VsValueTag> = {
+    title: 'Components/Base Components/VsValueTag',
+    component: VsValueTag,
+    render: (args: any) => ({
+        components: { VsValueTag },
+        setup() {
+            return { args };
+        },
+        template:
+            '<vs-value-tag v-bind="args"><template #label>label</template><template #value>value</template></vs-value-tag>',
+    }),
+    tags: ['autodocs'],
+    argTypes: {
+        colorScheme,
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof VsValueTag>;
+
+export const Default: Story = {};
+
+export const ColorScheme: Story = {
+    render: (args: any) => ({
+        components: { VsValueTag },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div>
+                <vs-value-tag v-bind="args" color-scheme="red"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="amber"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="green"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="teal"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="blue"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="indigo"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="purple"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="pink"></vs-value-tag>
+            </div>
+        `,
+    }),
+};
+
+export const Primary: Story = {
+    render: (args: any) => ({
+        components: { VsValueTag },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div>
+                <vs-value-tag v-bind="args" color-scheme="red" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="amber" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="green" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="teal" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="blue" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="indigo" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="purple" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag v-bind="args" color-scheme="pink" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+            </div>
+        `,
+    }),
+};
+
+export const StyleSet: Story = {
+    args: {
+        styleSet: { backgroundColor: '#99b1ff', color: '#392467', labelWidth: '120px' },
+    },
+};
+
+export const PreDefinedStyleSet: Story = {
+    args: {
+        styleSet: 'myStyleSet',
+    },
+};