feat(VsProgress) add vs-progress component

pubg · Dec 27, 2023 · d1fd249 · d1fd249
1 parent cbd34eb
commit d1fd249
Show file tree

Hide file tree

Showing 9 changed files with 223 additions and 1 deletion.
diff --git a/packages/vlossom/.storybook/examples/style-set.ts b/packages/vlossom/.storybook/examples/style-set.ts
@@ -7,6 +7,7 @@ import type {
     VsPageStyleSet,
     VsValueTagStyleSet,
     VsNoticeStyleSet,
+    VsProgressStyleSet,
 } from '@/components/types';
 
 const vsButton: VsButtonStyleSet = {
@@ -52,12 +53,19 @@ const vsValueTag: VsValueTagStyleSet = {
     width: '50%',
 };
 
+const vsProgress: VsProgressStyleSet = {
+    borderRadius: '0.4rem',
+    height: '0.7rem',
+    width: '100%',
+};
+
 export const styleSet: StyleSet = {
     VsButton: { myStyleSet: vsButton },
     VsDivider: { myStyleSet: vsDivider },
     VsInput: { myStyleSet: vsInput },
     VsNotice: { myStyleSet: vsNotice },
     VsSection: { myStyleSet: vsSection },
     VsPage: { myStyleSet: vsPage },
+    VsProgress: { myStyleSet: vsProgress },
     VsValueTag: { myStyleSet: vsValueTag },
 };
diff --git a/packages/vlossom/src/components/types.ts b/packages/vlossom/src/components/types.ts
@@ -5,8 +5,9 @@ export type * from './vs-form';
 export type * from './vs-input';
 export type * from './vs-input-wrapper';
 export type * from './vs-message';
-export type * from './vs-page';
 export type * from './vs-notice';
+export type * from './vs-page';
+export type * from './vs-progress';
 export type * from './vs-section';
 export type * from './vs-value-tag';
 export type * from './vs-wrapper';
diff --git a/packages/vlossom/src/components/vs-progress/VsProgress.scss b/packages/vlossom/src/components/vs-progress/VsProgress.scss
@@ -0,0 +1,23 @@
+progress {
+    -webkit-appearance: none;
+    appearance: none;
+    width: var(--vs-progress-width, 100%);
+    height: var(--vs-progress-height, 0.7rem);
+}
+
+progress[value] {
+    &::-webkit-progress-bar {
+        overflow: hidden;
+        background-color: var(--vs-light-backgroundColor);
+        border-radius: var(--vs-progress-borderRadius, 0.4rem);
+    }
+
+    &::-webkit-progress-value {
+        position: relative;
+        background-color: var(--vs-progress-backgroundColor, var(--vs-comp-backgroundColor));
+    }
+
+    &.primary::-webkit-progress-value {
+        background-color: var(--vs-progress-backgroundColor, var(--vs-comp-backgroundColor-primary));
+    }
+}
diff --git a/packages/vlossom/src/components/vs-progress/VsProgress.vue b/packages/vlossom/src/components/vs-progress/VsProgress.vue
@@ -0,0 +1,54 @@
+<template>
+    <progress
+        :value="value"
+        :max="max"
+        :class="['vs-progress', `vs-${computedColorScheme}`, { ...classObj }]"
+        :style="customProperties"
+    />
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, toRefs, computed } from 'vue';
+import { useColorScheme, useCustomStyle } from '@/composables';
+import { ColorScheme, VsComponent } from '@/declaration/types';
+
+interface ProgressStyleSet {
+    borderRadius: string;
+    height: string;
+    width: string;
+}
+
+export type VsProgressStyleSet = Partial<ProgressStyleSet>;
+
+const name = VsComponent.VsProgress;
+
+export default defineComponent({
+    name: name,
+    props: {
+        colorScheme: { type: String as PropType<ColorScheme> },
+        styleSet: { type: [String, Object] as PropType<string | VsProgressStyleSet>, default: '' },
+        max: { type: Number, default: 100 },
+        value: { type: Number, default: 0 },
+        primary: { type: Boolean, default: false },
+    },
+    setup(props) {
+        const { colorScheme, styleSet, primary } = toRefs(props);
+
+        const { computedColorScheme } = useColorScheme(name, colorScheme);
+
+        const { customProperties } = useCustomStyle<VsProgressStyleSet>(name, styleSet);
+
+        const classObj = computed(() => ({
+            primary: primary.value,
+        }));
+
+        return {
+            computedColorScheme,
+            customProperties,
+            classObj,
+        };
+    },
+});
+</script>
+
+<style src="./VsProgress.scss" scoped />
diff --git a/packages/vlossom/src/components/vs-progress/__tests__/vs-progress.test.ts b/packages/vlossom/src/components/vs-progress/__tests__/vs-progress.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import VsProgress from './../VsProgress.vue';
+
+describe('VsProgress', () => {
+    it('value 를 지정할 수 있다', () => {
+        // given
+        const wrapper = mount(VsProgress, {
+            props: {
+                value: 50,
+            },
+        });
+
+        // then
+        expect(wrapper.props('value')).toBe(50);
+        expect(wrapper.find('.vs-progress').element.getAttribute('value')).toBe('50');
+    });
+
+    it('max 를 지정할 수 있다', () => {
+        // given
+        const wrapper = mount(VsProgress, {
+            props: {
+                max: 200,
+            },
+        });
+
+        // then
+        expect(wrapper.props('max')).toBe(200);
+        expect(wrapper.find('.vs-progress').element.getAttribute('max')).toBe('200');
+    });
+});
diff --git a/packages/vlossom/src/components/vs-progress/index.ts b/packages/vlossom/src/components/vs-progress/index.ts
@@ -0,0 +1,12 @@
+import { VsComponent } from '@/declaration/types';
+import VsProgress from './VsProgress.vue';
+import type { VsProgressStyleSet } from './VsProgress.vue';
+
+type VsProgressInstance = InstanceType<typeof VsProgress>;
+
+export type { VsProgressInstance, VsProgressStyleSet };
+
+export default {
+    name: VsComponent.VsProgress,
+    component: VsProgress,
+};
diff --git a/packages/vlossom/src/components/vs-progress/stories/VsProgress.stories.ts b/packages/vlossom/src/components/vs-progress/stories/VsProgress.stories.ts
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { colorScheme } from '@/storybook/args';
+import VsProgress from './../VsProgress.vue';
+
+const meta: Meta<typeof VsProgress> = {
+    title: 'Components/Base Components/VsProgress',
+    component: VsProgress,
+    render: (args: any) => ({
+        components: { VsProgress },
+        setup() {
+            return { args };
+        },
+        template: '<vs-progress v-bind="args" />',
+    }),
+    tags: ['autodocs'],
+    argTypes: {
+        colorScheme,
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof VsProgress>;
+
+export const Default: Story = {};
+
+export const ColorScheme: Story = {
+    render: (args: any) => ({
+        components: { VsProgress },
+        setup() {
+            return { args };
+        },
+        template: `
+			<div>
+				<vs-progress color-scheme="red" :value="10"/>
+				<vs-progress color-scheme="amber" :value="20"/>
+				<vs-progress color-scheme="green" :value="30"/>
+				<vs-progress color-scheme="teal" :value="40"/>
+				<vs-progress color-scheme="blue" :value="50"/>
+				<vs-progress color-scheme="indigo" :value="60"/>
+				<vs-progress color-scheme="purple" :value="70"/>
+				<vs-progress color-scheme="pink" :value="80"/>
+			</div>
+		`,
+    }),
+};
+
+export const Primary: Story = {
+    render: (args: any) => ({
+        components: { VsProgress },
+        setup() {
+            return { args };
+        },
+        template: `
+			<div>
+				<vs-progress color-scheme="red" primary :value="20" :max="200"/>
+				<vs-progress color-scheme="amber" primary :value="40" :max="200"/>
+				<vs-progress color-scheme="green" primary :value="60" :max="200"/>
+				<vs-progress color-scheme="teal" primary :value="80" :max="200"/>
+				<vs-progress color-scheme="blue" primary :value="100" :max="200"/>
+				<vs-progress color-scheme="indigo" primary :value="120" :max="200"/>
+				<vs-progress color-scheme="purple" primary :value="140" :max="200"/>
+				<vs-progress color-scheme="pink" primary :value="160" :max="200"/>
+			</div>
+		`,
+    }),
+};
+
+export const StyleSet: Story = {
+    args: {
+        styleSet: { width: '50%', height: '2rem', borderRadius: '0.1rem' },
+    },
+};
+
+export const PreDefinedStyleSet: Story = {
+    args: {
+        styleSet: 'myStyleSet',
+    },
+};
diff --git a/packages/vlossom/src/declaration/types.ts b/packages/vlossom/src/declaration/types.ts
@@ -6,6 +6,7 @@ import type {
     VsSectionStyleSet,
     VsValueTagStyleSet,
     VsNoticeStyleSet,
+    VsProgressStyleSet,
 } from '@/components/types';
 import type { Ref } from 'vue';
 
@@ -19,6 +20,7 @@ export enum VsComponent {
     VsMessage = 'VsMessage',
     VsNotice = 'VsNotice',
     VsPage = 'VsPage',
+    VsProgress = 'VsProgress',
     VsSection = 'VsSection',
     VsValueTag = 'VsValueTag',
     VsWrapper = 'VsWrapper',
@@ -35,6 +37,7 @@ export interface StyleSet {
     VsSection?: { [key: string]: VsSectionStyleSet };
     VsNotice?: { [key: string]: VsNoticeStyleSet };
     VsPage?: { [key: string]: VsPageStyleSet };
+    VsProgress?: { [key: string]: VsProgressStyleSet };
     VsValueTag?: { [key: string]: VsValueTagStyleSet };
 }
 

diff --git a/packages/vlossom/src/styles/color-scheme.scss b/packages/vlossom/src/styles/color-scheme.scss
@@ -9,6 +9,7 @@ $colorScheme-light: (
         comp-backgroundColor-primary: #{$indigo-600},
         comp-color-primary: #{$grey-50},
         line-color: #{$grey-700},
+        light-backgroundColor: transparentize($grey-200, 0.2),
     ),
     'red': (
         area-backgroundColor: transparentize($red-50, 0.5),
@@ -18,6 +19,7 @@ $colorScheme-light: (
         comp-backgroundColor-primary: #{$red-500},
         comp-color-primary: #{$grey-50},
         line-color: #{$red-500},
+        light-backgroundColor: transparentize($red-200, 0.8),
     ),
     'amber': (
         area-backgroundColor: transparentize($amber-50, 0.45),
@@ -27,6 +29,7 @@ $colorScheme-light: (
         comp-backgroundColor-primary: #{$amber-600},
         comp-color-primary: #{$grey-50},
         line-color: #{$amber-500},
+        light-backgroundColor: transparentize($amber-200, 0.8),
     ),
     'green': (
         area-backgroundColor: transparentize($green-50, 0.45),
@@ -36,6 +39,7 @@ $colorScheme-light: (
         comp-backgroundColor-primary: #{$green-600},
         comp-color-primary: #{$grey-50},
         line-color: #{$green-600},
+        light-backgroundColor: transparentize($green-200, 0.8),
     ),
     'blue': (
         area-backgroundColor: transparentize($blue-50, 0.45),
@@ -45,6 +49,7 @@ $colorScheme-light: (
         comp-backgroundColor-primary: #{$blue-500},
         comp-color-primary: #{$grey-50},
         line-color: #{$blue-500},
+        light-backgroundColor: transparentize($blue-200, 0.8),
     ),
     'indigo': (
         area-backgroundColor: transparentize($indigo-100, 0.45),
@@ -54,6 +59,7 @@ $colorScheme-light: (
         comp-backgroundColor-primary: #{$indigo-600},
         comp-color-primary: #{$grey-50},
         line-color: #{$indigo-600},
+        light-backgroundColor: transparentize($indigo-200, 0.8),
     ),
 );
 
@@ -62,31 +68,37 @@ $colorScheme-dark: (
         area-backgroundColor: #14151f,
         comp-border-color: #{$indigo-400},
         line-color: #{$grey-300},
+        light-backgroundColor: transparentize($grey-300, 0.8),
     ),
     'red': (
         area-backgroundColor: transparentize($red-400, 0.9),
         comp-border-color: #{$red-300},
         line-color: #{$red-300},
+        light-backgroundColor: transparentize($red-300, 0.8),
     ),
     'amber': (
         area-backgroundColor: transparentize($amber-400, 0.9),
         comp-border-color: #{$amber-300},
         line-color: #{$amber-300},
+        light-backgroundColor: transparentize($amber-300, 0.5),
     ),
     'green': (
         area-backgroundColor: transparentize($green-400, 0.9),
         comp-border-color: #{$green-400},
         line-color: #{$green-400},
+        light-backgroundColor: transparentize($green-300, 0.8),
     ),
     'blue': (
         area-backgroundColor: transparentize($blue-400, 0.9),
         comp-border-color: #{$blue-400},
         line-color: #{$blue-400},
+        light-backgroundColor: transparentize($blue-300, 0.8),
     ),
     'indigo': (
         area-backgroundColor: transparentize($indigo-400, 0.8),
         comp-border-color: #{$indigo-400},
         line-color: #{$indigo-400},
+        light-backgroundColor: transparentize($indigo-300, 0.8),
     ),
 );