feat(VsInput): apply code review

pubg · Jan 3, 2024 · da5765f · da5765f
1 parent 169877c
commit da5765f
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 27 deletions.
diff --git a/packages/vlossom/src/components/vs-input/VsInput.vue b/packages/vlossom/src/components/vs-input/VsInput.vue
@@ -1,5 +1,5 @@
 <template>
-    <vs-wrapper :width="width" :grid="grid">
+    <vs-wrapper :width="width" :grid="grid" v-show="visible">
         <vs-input-wrapper
             :label="label"
             :messages="computedMessages"
@@ -24,6 +24,7 @@
                     @focus="onFocus"
                     @blur="onBlur"
                     @keyup.enter="onEnter"
+                    @change.stop
                 />
 
                 <button class="action-button append" v-if="hasAppend" @click="$emit('append')">
@@ -36,7 +37,7 @@
                     :class="{ number: type === InputType.NUMBER }"
                     @click.stop="clearWithFocus()"
                 >
-                    <close class="clear-icon" />
+                    <close-icon class="clear-icon" />
                 </button>
             </div>
         </vs-input-wrapper>
@@ -50,7 +51,7 @@ import { ColorScheme, VsComponent } from '@/declaration/types';
 import { useVsInputRules } from './vs-input-rules';
 import VsInputWrapper from '@/components/vs-input-wrapper/VsInputWrapper.vue';
 import VsWrapper from '@/components/vs-wrapper/VsWrapper.vue';
-import Close from '@/assets/icons/close';
+import CloseIcon from '@/assets/icons/close';
 
 interface InputStyleSet {
     appendBackgroundColor: string;
@@ -79,17 +80,16 @@ const name = VsComponent.VsInput;
 
 export default defineComponent({
     name,
-    components: { VsInputWrapper, VsWrapper, Close },
+    components: { VsInputWrapper, VsWrapper, CloseIcon },
     props: {
         ...getInputProps<string | number>(),
         ...getResponsiveProps(),
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsInputStyleSet>, default: '' },
         dense: { type: Boolean, default: false },
-        noClear: { type: Boolean, default: false },
         type: { type: String as PropType<InputType | string>, default: InputType.TEXT },
-        max: { type: [Number, Object] as PropType<number | null>, default: null },
-        min: { type: [Number, Object] as PropType<number | null>, default: null },
+        max: { type: [Number, String], default: Number.MAX_SAFE_INTEGER },
+        min: { type: [Number, String], default: Number.MIN_SAFE_INTEGER },
         // v-model
         modelValue: { type: [String, Number], default: '' },
         modelModifiers: {

diff --git a/packages/vlossom/src/components/vs-input/stories/VsInput.stories.ts b/packages/vlossom/src/components/vs-input/stories/VsInput.stories.ts
@@ -3,8 +3,9 @@ import { userEvent, within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 import { colorScheme, getMetaArguments } from '@/storybook/args';
 import VsInput, { InputType } from '../VsInput.vue';
+import VsContainer from '@/components/vs-container/VsContainer.vue';
+import SearchIcon from '@/assets/icons/search';
 import { UIState } from '@/declaration/types';
-import Search from '@/assets/icons/search';
 
 const meta: Meta<typeof VsInput> = {
     title: 'Components/Input Components/VsInput',
@@ -98,6 +99,12 @@ export const NoClear: Story = {
     },
 };
 
+export const NumberType: Story = {
+    args: {
+        type: 'number',
+    },
+};
+
 export const Placeholder: Story = {
     args: {
         placeholder: 'enter name',
@@ -110,6 +117,13 @@ export const Readonly: Story = {
     },
 };
 
+export const Required: Story = {
+    args: {
+        label: 'Label',
+        required: true,
+    },
+};
+
 export const Prepend: Story = {
     render: (args: any) => ({
         components: { VsInput },
@@ -133,14 +147,14 @@ export const Prepend: Story = {
 
 export const Append: Story = {
     render: (args: any) => ({
-        components: { VsInput, Search },
+        components: { VsInput, SearchIcon },
         setup() {
             return { args };
         },
         template: `
             <vs-input v-bind="args">
                 <template #append-icon>
-                    <search aria-label="search" />
+                    <search-icon aria-label="search" />
                 </template>
             </vs-input>
         `,
@@ -149,9 +163,38 @@ export const Append: Story = {
         placeholder: 'email',
     },
 };
-export const NumberType: Story = {
+
+export const Width: Story = {
+    render: (args: any) => ({
+        components: { VsInput, VsContainer },
+        setup() {
+            return { args };
+        },
+        template: `
+            <vs-container>
+                <vs-input v-bind="args" />
+            </vs-container>
+        `,
+    }),
     args: {
-        type: 'number',
+        width: { xs: '100px', sm: '200px', md: '300px', lg: '400px', xl: '500px' },
+    },
+};
+
+export const Grid: Story = {
+    render: (args: any) => ({
+        components: { VsInput, VsContainer },
+        setup() {
+            return { args };
+        },
+        template: `
+            <vs-container>
+                <vs-input v-bind="args" />
+            </vs-container>
+        `,
+    }),
+    args: {
+        grid: { sm: 6, md: 4, lg: 3 },
     },
 };
 

diff --git a/packages/vlossom/src/components/vs-input/vs-input-rules.ts b/packages/vlossom/src/components/vs-input/vs-input-rules.ts
@@ -3,8 +3,8 @@ import { InputType, InputValue } from './VsInput.vue';
 
 export function useVsInputRules(
     required: Ref<boolean>,
-    max: Ref<number | null>,
-    min: Ref<number | null>,
+    max: Ref<number | string>,
+    min: Ref<number | string>,
     type: Ref<string>,
 ) {
     function requiredCheck(v: InputValue) {
@@ -16,31 +16,35 @@ export function useVsInputRules(
     }
 
     function maxCheck(v: InputValue) {
-        if (max.value === null) {
+        const limit = Number(max.value);
+
+        if (isNaN(limit) || limit > Number.MAX_SAFE_INTEGER) {
             return '';
         }
 
-        if (type.value === InputType.TEXT && typeof v === 'string' && v.length > max.value) {
+        if (type.value === InputType.TEXT && typeof v === 'string' && v.length > limit) {
             return 'max length: ' + max.value;
         }
 
-        if (type.value === InputType.NUMBER && typeof v === 'number' && v > max.value) {
+        if (type.value === InputType.NUMBER && typeof v === 'number' && v > limit) {
             return 'max value: ' + max.value;
         }
 
         return '';
     }
 
     function minCheck(v: InputValue) {
-        if (min.value === null) {
+        const limit = Number(min.value);
+
+        if (isNaN(limit) || limit < Number.MIN_SAFE_INTEGER) {
             return '';
         }
 
-        if (type.value === InputType.TEXT && typeof v === 'string' && v.length < min.value) {
+        if (type.value === InputType.TEXT && typeof v === 'string' && v.length < limit) {
             return 'min length: ' + min.value;
         }
 
-        if (type.value === InputType.NUMBER && typeof v === 'number' && v < min.value) {
+        if (type.value === InputType.NUMBER && typeof v === 'number' && v < limit) {
             return 'min value: ' + min.value;
         }
 

diff --git a/packages/vlossom/src/components/vs-notice/VsNotice.vue b/packages/vlossom/src/components/vs-notice/VsNotice.vue
@@ -9,7 +9,7 @@
             <slot />
         </p>
         <button type="button" class="vs-notice-close" @click.stop="closeNotice()">
-            <close aria-label="close" class="close-icon" />
+            <close-icon aria-label="close" class="close-icon" />
         </button>
     </div>
 </template>
@@ -18,7 +18,7 @@
 import { PropType, defineComponent, ref, toRefs, watch, computed } from 'vue';
 import { useColorScheme, useCustomStyle } from '@/composables';
 import { ColorScheme, VsComponent } from '@/declaration/types';
-import Close from '@/assets/icons/close';
+import CloseIcon from '@/assets/icons/close';
 
 interface NoticeStyleSet {
     backgroundColor: string;
@@ -35,7 +35,7 @@ const name = VsComponent.VsNotice;
 
 export default defineComponent({
     name,
-    components: { Close },
+    components: { CloseIcon },
     props: {
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsNoticeStyleSet>, default: '' },

diff --git a/packages/vlossom/src/composables/responsive-composable.ts b/packages/vlossom/src/composables/responsive-composable.ts
@@ -4,13 +4,13 @@ import type { Breakpoints } from '@/declaration/types';
 export function getResponsiveProps() {
     return {
         grid: { type: Object as PropType<Breakpoints>, default: () => ({}) },
-        width: { type: [String, Object] as PropType<string | Breakpoints>, default: '100%' },
+        width: { type: [String, Object] as PropType<string | Breakpoints>, default: '' },
     };
 }
 
 export function useResponsiveWidth(width: Ref<string | Breakpoints>, grid: Ref<Breakpoints>) {
     const responsiveWidth = computed(() => {
-        if (typeof width.value === 'string') {
+        if (width.value && typeof width.value === 'string') {
             return {};
         }
 
@@ -22,8 +22,11 @@ export function useResponsiveWidth(width: Ref<string | Breakpoints>, grid: Ref<B
                 };
             }, {} as Breakpoints);
         }
+        if (width.value && typeof width.value === 'object') {
+            return width.value;
+        }
 
-        return width.value;
+        return {};
     });
 
     const widthVariables = computed(() => {
@@ -51,7 +54,7 @@ export function useResponsiveWidth(width: Ref<string | Breakpoints>, grid: Ref<B
     });
 
     const widthProperties = computed(() => {
-        if (typeof width.value === 'string') {
+        if (width.value && typeof width.value === 'string') {
             return {
                 width: width.value,
             };