Skip to content

Commit

Permalink
feat(VsInput): remove prepend / append buttons (#185)
Browse files Browse the repository at this point in the history
  • Loading branch information
@smithoo
smithoo authored May 28, 2024
1 parent 373881b commit 91fe0b3
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 206 deletions.
44 changes: 7 additions & 37 deletions packages/vlossom/src/components/vs-input/VsInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,25 +19,16 @@
: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
ref="inputRef"
:id="id"
:type="type"
:value="inputValue"
:autocomplete="autocomplete ? 'on' : 'off'"
:name="name"
:disabled="disabled"
:readonly="readonly"
Expand All @@ -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">
Expand Down Expand Up @@ -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 },
Expand Down Expand Up @@ -152,7 +140,7 @@ export default defineComponent({
state,
} = toRefs(props);
const { slots, emit } = context;
const { emit } = context;
const inputValue: Ref<InputValueType> = ref(modelValue.value);
Expand Down Expand Up @@ -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() {
Expand All @@ -240,14 +222,6 @@ export default defineComponent({
function onEnter() {
emit('enter');
if (hasPrependButton.value) {
emit('prepend');
}
if (hasAppendButton.value) {
emit('append');
}
}
function clearWithFocus() {
Expand All @@ -264,10 +238,6 @@ export default defineComponent({
inputValue,
updateValue,
inputRef,
hasPrependButton,
hasAppendButton,
hasPrependContent,
hasAppendContent,
computedMessages,
shake,
focus,
Expand Down
78 changes: 2 additions & 76 deletions packages/vlossom/src/components/vs-input/__tests__/vs-input.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
});

Expand All @@ -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',
},
});

Expand Down Expand Up @@ -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', () => {
Expand Down
107 changes: 14 additions & 93 deletions packages/vlossom/src/components/vs-input/stories/VsInput.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
`,
Expand All @@ -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>
`,
Expand Down Expand Up @@ -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>
`,
}),
};
Expand All @@ -163,62 +162,18 @@ 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() {
return { args };
},
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>
`,
Expand All @@ -231,16 +186,18 @@ export const PrependContent: Story = {
},
};

export const AppendContent: Story = {
export const Append: Story = {
render: (args: any) => ({
components: { VsInput, VsIcon },
setup() {
return { args };
},
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>
`,
Expand All @@ -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: {
Expand Down

0 comments on commit 91fe0b3

Please sign in to comment.