From 91fe0b3760502fab3359ee4a093e92f663ef229b Mon Sep 17 00:00:00 2001
From: smithoo <smithoo@pubg.com>
Date: Tue, 28 May 2024 16:12:44 +0900
Subject: [PATCH] feat(VsInput): remove prepend / append buttons (#185)

---
 .../src/components/vs-input/VsInput.vue       |  44 ++-----
 .../vs-input/__tests__/vs-input.test.ts       |  78 +------------
 .../vs-input/stories/VsInput.stories.ts       | 107 +++---------------
 3 files changed, 23 insertions(+), 206 deletions(-)

diff --git a/packages/vlossom/src/components/vs-input/VsInput.vue b/packages/vlossom/src/components/vs-input/VsInput.vue
index eceaf25b4..e25b11fdd 100644
--- a/packages/vlossom/src/components/vs-input/VsInput.vue
+++ b/packages/vlossom/src/components/vs-input/VsInput.vue
@@ -19,18 +19,8 @@
                 :class="['vs-input', `vs-${computedColorScheme}`, { ...classObj }, boxGlowByState]"
                 :style="computedStyleSet"
             >
-                <button
-                    v-if="hasPrependButton"
-                    type="button"
-                    class="prepend"
-                    aria-label="prepend-action"
-                    @click.stop="$emit('prepend')"
-                >
-                    <slot name="prepend-button" />
-                </button>
-
-                <div v-if="hasPrependContent" class="prepend">
-                    <slot name="prepend-content" />
+                <div v-if="$slots['prepend']" class="prepend">
+                    <slot name="prepend" />
                 </div>
 
                 <input
@@ -38,6 +28,7 @@
                     :id="id"
                     :type="type"
                     :value="inputValue"
+                    :autocomplete="autocomplete ? 'on' : 'off'"
                     :name="name"
                     :disabled="disabled"
                     :readonly="readonly"
@@ -63,13 +54,9 @@
                     <vs-icon icon="close" :size="dense ? 16 : 20" />
                 </button>
 
-                <div v-if="hasAppendContent" class="append">
-                    <slot name="append-content" />
+                <div v-if="$slots['append']" class="append">
+                    <slot name="append" />
                 </div>
-
-                <button v-if="hasAppendButton" class="append" aria-label="append-action" @click.stop="$emit('append')">
-                    <slot name="append-button" />
-                </button>
             </div>
 
             <template #messages v-if="!noMessage">
@@ -106,6 +93,7 @@ export default defineComponent({
     props: {
         ...getInputProps<InputValueType, []>(),
         ...getResponsiveProps(),
+        autocomplete: { type: Boolean, default: false },
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsInputStyleSet> },
         dense: { type: Boolean, default: false },
@@ -152,7 +140,7 @@ export default defineComponent({
             state,
         } = toRefs(props);
 
-        const { slots, emit } = context;
+        const { emit } = context;
 
         const inputValue: Ref<InputValueType> = ref(modelValue.value);
 
@@ -210,12 +198,6 @@ export default defineComponent({
             inputValue.value = target.value || '';
         }
 
-        const hasPrependButton = computed(() => !!slots['prepend-button']);
-        const hasAppendButton = computed(() => !!slots['append-button']);
-
-        const hasPrependContent = computed(() => !!slots['prepend-content']);
-        const hasAppendContent = computed(() => !!slots['append-content']);
-
         const inputRef: Ref<HTMLInputElement | null> = ref(null);
 
         function focus() {
@@ -240,14 +222,6 @@ export default defineComponent({
 
         function onEnter() {
             emit('enter');
-
-            if (hasPrependButton.value) {
-                emit('prepend');
-            }
-
-            if (hasAppendButton.value) {
-                emit('append');
-            }
         }
 
         function clearWithFocus() {
@@ -264,10 +238,6 @@ export default defineComponent({
             inputValue,
             updateValue,
             inputRef,
-            hasPrependButton,
-            hasAppendButton,
-            hasPrependContent,
-            hasAppendContent,
             computedMessages,
             shake,
             focus,
diff --git a/packages/vlossom/src/components/vs-input/__tests__/vs-input.test.ts b/packages/vlossom/src/components/vs-input/__tests__/vs-input.test.ts
index ae34a21c4..a8ceb0487 100644
--- a/packages/vlossom/src/components/vs-input/__tests__/vs-input.test.ts
+++ b/packages/vlossom/src/components/vs-input/__tests__/vs-input.test.ts
@@ -292,67 +292,11 @@ describe('vs-input', () => {
     });
 
     describe('prepend / append', () => {
-        it('prepend button slot을 설정할 수 있다', async () => {
-            // given
-            const wrapper: ReturnType<typeof mountComponent> = mount(VsInput, {
-                slots: {
-                    'prepend-button': 'this is button content',
-                },
-            });
-
-            // then
-            expect(wrapper.find('button.prepend').exists()).toBe(true);
-            expect(wrapper.html()).toContain('this is button content');
-        });
-
-        it('append button slot을 설정할 수 있다', async () => {
-            // given
-            const wrapper: ReturnType<typeof mountComponent> = mount(VsInput, {
-                slots: {
-                    'append-button': 'this is button content',
-                },
-            });
-
-            // then
-            expect(wrapper.find('button.append').exists()).toBe(true);
-            expect(wrapper.html()).toContain('this is button content');
-        });
-
-        it('prepend button을 클릭하면 prepend 이벤트를 발생시킨다', async () => {
-            // given
-            const wrapper: ReturnType<typeof mountComponent> = mount(VsInput, {
-                slots: {
-                    'prepend-button': 'this is button content',
-                },
-            });
-
-            // when
-            await wrapper.find('button.prepend').trigger('click');
-
-            // then
-            expect(wrapper.emitted('prepend')).toHaveLength(1);
-        });
-
-        it('append button을 클릭하면 append 이벤트를 발생시킨다', async () => {
-            // given
-            const wrapper: ReturnType<typeof mountComponent> = mount(VsInput, {
-                slots: {
-                    'append-button': 'this is button content',
-                },
-            });
-
-            // when
-            await wrapper.find('button.append').trigger('click');
-
-            // then
-            expect(wrapper.emitted('append')).toHaveLength(1);
-        });
-
         it('prepend content slot을 설정할 수 있다', async () => {
             // given
             const wrapper: ReturnType<typeof mountComponent> = mount(VsInput, {
                 slots: {
-                    'prepend-content': 'this is content',
+                    prepend: 'this is content',
                 },
             });
 
@@ -365,7 +309,7 @@ describe('vs-input', () => {
             // given
             const wrapper: ReturnType<typeof mountComponent> = mount(VsInput, {
                 slots: {
-                    'append-content': 'this is content',
+                    append: 'this is content',
                 },
             });
 
@@ -410,24 +354,6 @@ describe('vs-input', () => {
             // then
             expect(wrapper.emitted('enter')).toHaveLength(1);
         });
-
-        it('prepend button과 append button이 있을 경우 prepend, append 이벤트도 함께 발생시킨다', async () => {
-            // given
-            const wrapper: ReturnType<typeof mountComponent> = mount(VsInput, {
-                slots: {
-                    'prepend-button': 'this is button content',
-                    'append-button': 'this is button content',
-                },
-            });
-
-            // when
-            await wrapper.find('input').trigger('keyup.enter');
-
-            // then
-            expect(wrapper.emitted('enter')).toHaveLength(1);
-            expect(wrapper.emitted('prepend')).toHaveLength(1);
-            expect(wrapper.emitted('append')).toHaveLength(1);
-        });
     });
 
     describe('rules', () => {
diff --git a/packages/vlossom/src/components/vs-input/stories/VsInput.stories.ts b/packages/vlossom/src/components/vs-input/stories/VsInput.stories.ts
index d0db9ef62..cc3338808 100644
--- a/packages/vlossom/src/components/vs-input/stories/VsInput.stories.ts
+++ b/packages/vlossom/src/components/vs-input/stories/VsInput.stories.ts
@@ -9,7 +9,6 @@ import {
 } from '@/storybook';
 import { UIState } from '@/declaration';
 import { VsIcon } from '@/icons';
-import VsContainer from '@/components/vs-container/VsContainer.vue';
 import { InputType } from '../types';
 import VsInput from '../VsInput.vue';
 
@@ -54,7 +53,7 @@ export const ColorScheme: Story = {
         template: `
             <div>
                 ${getColorSchemeTemplate(`
-                    <vs-input v-bind="args" color-scheme="{{ color }}" style="marginBottom: 10px" />
+                    <vs-input v-bind="args" color-scheme="{{ color }}" style="marginBottom: 4px" />
                 `)}
             </div>
         `,
@@ -76,7 +75,7 @@ export const State: Story = {
         template: `
             <div>
                 ${getStateTemplate(`
-                    <vs-input v-bind="args" label="State ({{state}})" state="{{state}}" style="marginBottom: 16px" />
+                    <vs-input v-bind="args" label="State ({{state}})" state="{{state}}" style="marginBottom: 4px" />
                 `)}
             </div>
         `,
@@ -137,9 +136,9 @@ export const Type: Story = {
             return { types };
         },
         template: `
-            <div>
+            <form autocomplete="on">
                 <vs-input v-for="type in types" :key="type" :type="type" :placeholder="type" style="marginBottom: 10px" />
-            </div>
+            </form>
         `,
     }),
 };
@@ -163,31 +162,7 @@ export const Required: Story = {
     },
 };
 
-export const PrependButton: Story = {
-    render: (args: any) => ({
-        components: { VsInput },
-        setup() {
-            return { args };
-        },
-        template: `
-            <vs-input v-bind="args">
-                <template #prepend-button>
-                    <svg aria-label="edit" xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20">
-                        <path fill="currentColor" d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/>
-                    </svg>
-                </template>
-            </vs-input>
-        `,
-    }),
-    args: {
-        placeholder: 'email',
-    },
-    parameters: {
-        chromatic: chromaticParameters.theme,
-    },
-};
-
-export const AppendButton: Story = {
+export const Prepend: Story = {
     render: (args: any) => ({
         components: { VsInput, VsIcon },
         setup() {
@@ -195,30 +170,10 @@ export const AppendButton: Story = {
         },
         template: `
             <vs-input v-bind="args">
-                <template #append-button>
-                    <vs-icon icon="check" />
-                </template>
-            </vs-input>
-        `,
-    }),
-    args: {
-        placeholder: 'email',
-    },
-    parameters: {
-        chromatic: chromaticParameters.theme,
-    },
-};
-
-export const PrependContent: Story = {
-    render: (args: any) => ({
-        components: { VsInput },
-        setup() {
-            return { args };
-        },
-        template: `
-            <vs-input v-bind="args">
-                <template #prepend-content>
-                    <div style="padding: 3px">prepend</div>
+                <template #prepend>
+                    <button :style="{ width: '100%', height: '100%', color: 'white' }" aria-label="check">
+                        <vs-icon icon="success" size="24px" />
+                    </button>
                 </template>
             </vs-input>
         `,
@@ -231,7 +186,7 @@ export const PrependContent: Story = {
     },
 };
 
-export const AppendContent: Story = {
+export const Append: Story = {
     render: (args: any) => ({
         components: { VsInput, VsIcon },
         setup() {
@@ -239,8 +194,10 @@ export const AppendContent: Story = {
         },
         template: `
             <vs-input v-bind="args">
-                <template #append-content>
-                    <div style="padding: 3px">append</div>
+                <template #append>
+                    <button :style="{ width: '100%', height: '100%', color: 'white' }" aria-label="check">
+                        <vs-icon icon="success" size="24px" />
+                    </button>
                 </template>
             </vs-input>
         `,
@@ -253,42 +210,6 @@ export const AppendContent: Story = {
     },
 };
 
-export const Width: Story = {
-    render: (args: any) => ({
-        components: { VsInput, VsContainer },
-        setup() {
-            return { args };
-        },
-        template: `
-            <vs-container>
-                <vs-input v-bind="args" />
-                <vs-input v-bind="args" />
-            </vs-container>
-        `,
-    }),
-    args: {
-        width: { 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-input v-bind="args" />
-            </vs-container>
-        `,
-    }),
-    args: {
-        grid: { sm: 6, md: 4, lg: 3 },
-    },
-};
-
 export const StyleSet: Story = {
     args: {
         styleSet: {