feat(VsValueTag): add vs-value-tag component (#37)

packages/vlossom/.storybook/examples/style-set.ts

@@ -5,6 +5,7 @@ import type {
     VsInputStyleSet,
     VsSectionStyleSet,
     VsPageStyleSet,
+    VsValueTagStyleSet,
 } from '@/components/types';
 
 const vsButton: VsButtonStyleSet = {
@@ -33,10 +34,19 @@ const vsPage: VsPageStyleSet = {
     padding: '0.8rem 1.5rem',
 };
 
+const vsValueTag: VsValueTagStyleSet = {
+    backgroundColor: '#b6c4b6',
+    color: '#304d30',
+    fontSize: '1rem',
+    fontWeight: '480',
+    width: '50%',
+};
+
 export const styleSet: StyleSet = {
     VsButton: { myStyleSet: vsButton },
     VsDivider: { myStyleSet: vsDivider },
     VsInput: { myStyleSet: vsInput },
     VsSection: { myStyleSet: vsSection },
     VsPage: { myStyleSet: vsPage },
+    VsValueTag: { myStyleSet: vsValueTag },
 };

packages/vlossom/src/components/types.ts

@@ -7,4 +7,5 @@ export type * from './vs-input-wrapper';
 export type * from './vs-message';
 export type * from './vs-page';
 export type * from './vs-section';
+export type * from './vs-value-tag';
 export type * from './vs-wrapper';

packages/vlossom/src/components/vs-value-tag/VsValueTag.scss

@@ -0,0 +1,34 @@
+.vs-value-tag {
+    display: flex;
+    align-items: center;
+    padding: var(--vs-value-tag-padding, 0.12rem);
+    border-radius: var(--vs-value-tag-borderRadius, 0.2rem);
+    font-size: var(--vs-value-tag-fontSize, 1.2rem);
+    font-weight: var(--vs-value-tag-fontWeight, 400);
+    width: var(--vs-value-tag-width, 100%);
+    line-height: var(--vs-value-tag-lineHeight, 2.2rem);
+    background-color: var(--vs-value-tag-backgroundColor, var(--vs-comp-backgroundColor));
+
+    .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;
+        padding: 0 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));
+        }
+    }
+}

packages/vlossom/src/components/vs-value-tag/VsValueTag.vue

@@ -0,0 +1,62 @@
+<template>
+    <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, computed, defineComponent, toRefs } from 'vue';
+import { useColorScheme, useCustomStyle } from '@/composables';
+import { ColorScheme, VsComponent } from '@/declaration/types';
+
+interface ValueTagStyleSet {
+    backgroundColor: string;
+    borderRadius: string;
+    color: string;
+    fontSize: string;
+    fontWeight: string;
+    labelWidth: string;
+    lineHeight: string;
+    padding: string;
+    width: string;
+}
+
+export type VsValueTagStyleSet = Partial<ValueTagStyleSet>;
+
+const name = VsComponent.VsValueTag;
+
+export default defineComponent({
+    name,
+    props: {
+        colorScheme: { type: String as PropType<ColorScheme> },
+        styleSet: { type: [String, Object] as PropType<string | VsValueTagStyleSet>, default: '' },
+        primary: { type: Boolean, default: false },
+    },
+    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,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped src="./VsValueTag.scss" />

packages/vlossom/src/components/vs-value-tag/__test__/vs-value-tag.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');
+    });
+});

packages/vlossom/src/components/vs-value-tag/index.ts

@@ -0,0 +1,12 @@
+import { VsComponent } from '@/declaration/types';
+import VsValueTag from './VsValueTag.vue';
+import type { VsValueTagStyleSet } from './VsValueTag.vue';
+
+type VsValueTagInstance = InstanceType<typeof VsValueTag>;
+
+export type { VsValueTagInstance, VsValueTagStyleSet };
+
+export default {
+    name: VsComponent.VsValueTag,
+    component: VsValueTag,
+};

packages/vlossom/src/components/vs-value-tag/stories/VsValueTag.stories.ts

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import VsValueTag from '../VsValueTag.vue';
+import { colorScheme } from '@/storybook/args';
+
+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 color-scheme="red"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="amber"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="green"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="teal"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="blue"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="indigo"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="purple"><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="pink"><template #label>label</template><template #value>value</template></vs-value-tag>
+            </div>
+        `,
+    }),
+};
+
+export const Primary: Story = {
+    render: (args: any) => ({
+        components: { VsValueTag },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div>
+                <vs-value-tag color-scheme="red" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="amber" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="green" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="teal" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="blue" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="indigo" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="purple" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+                <vs-value-tag color-scheme="pink" primary><template #label>label</template><template #value>value</template></vs-value-tag>
+            </div>
+        `,
+    }),
+};
+
+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 PreDefinedStyleSet: Story = {
+    args: {
+        styleSet: 'myStyleSet',
+    },
+};

packages/vlossom/src/declaration/types.ts

@@ -4,6 +4,7 @@ import type {
     VsInputStyleSet,
     VsPageStyleSet,
     VsSectionStyleSet,
+    VsValueTagStyleSet,
 } from '@/components/types';
 import type { Ref } from 'vue';
 
@@ -17,6 +18,7 @@ export enum VsComponent {
     VsMessage = 'VsMessage',
     VsPage = 'VsPage',
     VsSection = 'VsSection',
+    VsValueTag = 'VsValueTag',
     VsWrapper = 'VsWrapper',
 }
 
@@ -30,6 +32,7 @@ export interface StyleSet {
     VsInput?: { [key: string]: VsInputStyleSet };
     VsSection?: { [key: string]: VsSectionStyleSet };
     VsPage?: { [key: string]: VsPageStyleSet };
+    VsValueTag?: { [key: string]: VsValueTagStyleSet };
 }
 
 export interface VlossomStore {