feat(VsProgress) add vs-progress component

pubg · Dec 22, 2023 · 3b9e89e · 3b9e89e
1 parent f33895b
commit 3b9e89e
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 7 deletions.
diff --git a/packages/vlossom/src/components/types.ts b/packages/vlossom/src/components/types.ts
@@ -6,5 +6,6 @@ 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-progress';
 export type * from './vs-section';
 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: 100%;
+    height: 0.7rem;
+}
+
+progress[value] {
+    &::-webkit-progress-bar {
+        overflow: hidden;
+        background-color: var(--vs-light-bg);
+        border-radius: 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,37 @@
+<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 } from '@/composables';
+import { ColorScheme, VsComponent } from '@/declaration/types';
+
+const name = VsComponent.VsProgress;
+
+export default defineComponent({
+    name: name,
+    props: {
+        colorScheme: { type: String as PropType<ColorScheme> },
+        max: { type: Number, default: 100 },
+        value: { type: Number, default: 0 },
+        primary: { type: Boolean, default: false },
+    },
+    setup(props) {
+        const { colorScheme, primary } = toRefs(props);
+
+        const { computedColorScheme } = useColorScheme(name, colorScheme);
+
+        const classObj = computed(() => ({
+            primary: primary.value,
+        }));
+
+        return {
+            computedColorScheme,
+            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,29 @@
+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);
+    });
+
+    it('max 를 지정할 수 있다', () => {
+        // given
+        const wrapper = mount(VsProgress, {
+            props: {
+                max: 200,
+            },
+        });
+
+        // then
+        expect(wrapper.props('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,11 @@
+import { VsComponent } from '@/declaration/types';
+import VsProgress from './VsProgress.vue';
+
+type VsProgressInstance = InstanceType<typeof VsProgress>;
+
+export type { VsProgressInstance };
+
+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,66 @@
+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>
+		`,
+    }),
+};
diff --git a/packages/vlossom/src/declaration/types.ts b/packages/vlossom/src/declaration/types.ts
@@ -1,10 +1,4 @@
-import type {
-    VsButtonStyleSet,
-    VsDividerStyleSet,
-    VsInputStyleSet,
-    VsPageStyleSet,
-    VsSectionStyleSet,
-} from '@/components/types';
+import type { VsButtonStyleSet, VsDividerStyleSet, VsInputStyleSet, VsPageStyleSet, VsSectionStyleSet } from '@/components/types';
 import type { Ref } from 'vue';
 
 export enum VsComponent {
@@ -16,6 +10,7 @@ export enum VsComponent {
     VsInputWrapper = 'VsInputWrapper',
     VsMessage = 'VsMessage',
     VsPage = 'VsPage',
+    VsProgress = 'VsProgress',
     VsSection = 'VsSection',
     VsWrapper = 'VsWrapper',
 }

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-bg: transparentize($grey-200, 0.5),
     ),
     '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-bg: 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-bg: 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-bg: 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-bg: 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-bg: transparentize($indigo-200, 0.8),
     ),
 );
 
@@ -62,31 +68,37 @@ $colorScheme-dark: (
         area-backgroundColor: #14151f,
         comp-border-color: #{$indigo-400},
         line-color: #{$grey-300},
+        light-bg: transparentize($grey-300, 0.8),
     ),
     'red': (
         area-backgroundColor: transparentize($red-400, 0.9),
         comp-border-color: #{$red-300},
         line-color: #{$red-300},
+        light-bg: transparentize($red-300, 0.8),
     ),
     'amber': (
         area-backgroundColor: transparentize($amber-400, 0.9),
         comp-border-color: #{$amber-300},
         line-color: #{$amber-300},
+        light-bg: transparentize($amber-200, 0.5),
     ),
     'green': (
         area-backgroundColor: transparentize($green-400, 0.9),
         comp-border-color: #{$green-400},
         line-color: #{$green-400},
+        light-bg: transparentize($green-300, 0.8),
     ),
     'blue': (
         area-backgroundColor: transparentize($blue-400, 0.9),
         comp-border-color: #{$blue-400},
         line-color: #{$blue-400},
+        light-bg: transparentize($blue-300, 0.8),
     ),
     'indigo': (
         area-backgroundColor: transparentize($indigo-400, 0.8),
         comp-border-color: #{$indigo-400},
         line-color: #{$indigo-400},
+        light-bg: transparentize($indigo-300, 0.8),
     ),
 );