diff --git a/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue b/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue index d171709df..46bdcb865 100644 --- a/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue +++ b/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue @@ -71,7 +71,7 @@ import VsWrapper from '@/components/vs-wrapper/VsWrapper.vue'; import { VsCheckboxNode } from '@/nodes'; import type { VsCheckboxSetStyleSet } from './types'; -import { VsCheckboxStyleSet } from '../vs-checkbox/types'; +import type { VsCheckboxStyleSet } from '@/components/vs-checkbox/types'; const name = VsComponent.VsCheckboxSet; @@ -90,7 +90,10 @@ export default defineComponent({ }, vertical: { type: Boolean, default: false }, // v-model - modelValue: { type: Array as PropType, default: () => [] }, + modelValue: { + type: Array as PropType, + default: () => [], + }, }, emits: ['update:modelValue', 'update:changed', 'update:valid', 'change', 'focus', 'blur'], expose: ['clear', 'validate'], @@ -149,6 +152,11 @@ export default defineComponent({ messages, rules: allRules, callbacks: { + onMounted: () => { + if (!inputValue.value) { + inputValue.value = []; + } + }, onClear: () => { inputValue.value = []; }, @@ -160,11 +168,12 @@ export default defineComponent({ } async function onToggle(option: any, checked: boolean) { - const beforeChangeFn = beforeChange.value; const targetOptionValue = getOptionValue(option); const toValue = checked ? [...inputValue.value, targetOptionValue] : inputValue.value.filter((v: any) => !utils.object.isEqual(v, targetOptionValue)); + + const beforeChangeFn = beforeChange.value; if (beforeChangeFn) { const result = await beforeChangeFn(inputValue.value, toValue, option); if (!result) { diff --git a/packages/vlossom/src/components/vs-checkbox-set/__tests__/vs-checkbox-set.test.ts b/packages/vlossom/src/components/vs-checkbox-set/__tests__/vs-checkbox-set.test.ts index 9a1e7c24e..4e6190cd2 100644 --- a/packages/vlossom/src/components/vs-checkbox-set/__tests__/vs-checkbox-set.test.ts +++ b/packages/vlossom/src/components/vs-checkbox-set/__tests__/vs-checkbox-set.test.ts @@ -111,7 +111,8 @@ describe('vs-checkbox-set', () => { }); // when - await wrapper.find('input[value="B"]').setValue(true); + await wrapper.find('input[value="B"]').trigger('click'); + await nextTick(); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); @@ -131,6 +132,7 @@ describe('vs-checkbox-set', () => { // when await wrapper.setProps({ modelValue: ['B'] }); + await nextTick(); // then const checked = wrapper.findAll('input').filter((e) => e.element.checked); @@ -177,7 +179,8 @@ describe('vs-checkbox-set', () => { }); // when - await wrapper.find('input[value="b"]').setValue(true); + await wrapper.find('input[value="b"]').trigger('click'); + await nextTick(); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); @@ -197,6 +200,7 @@ describe('vs-checkbox-set', () => { // when await wrapper.setProps({ modelValue: ['b'] }); + await nextTick(); // then const checked = wrapper.findAll('input').filter((e) => e.element.checked); @@ -241,7 +245,7 @@ describe('vs-checkbox-set', () => { // when await nextTick(); - await wrapper.find('input[value="A"]').setValue(false); + await wrapper.find('input[value="A"]').trigger('click'); // then expect(wrapper.vm.computedMessages).toHaveLength(1); @@ -278,7 +282,7 @@ describe('vs-checkbox-set', () => { // when await nextTick(); - await wrapper.find('input[value="A"]').setValue(false); + await wrapper.find('input[value="A"]').trigger('click'); // then expect(wrapper.vm.validate()).toBe(false); @@ -303,7 +307,7 @@ describe('vs-checkbox-set', () => { }); // when - await wrapper.find('input[value="B"]').setValue(true); + await wrapper.find('input[value="B"]').trigger('click'); // then expect(beforeChange).toHaveBeenCalledWith(['A'], ['A', 'B'], 'B'); @@ -321,7 +325,7 @@ describe('vs-checkbox-set', () => { }); // when - await wrapper.find('input[value="B"]').setValue(true); + await wrapper.find('input[value="B"]').trigger('click'); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); @@ -341,7 +345,7 @@ describe('vs-checkbox-set', () => { }); // when - await wrapper.find('input[value="B"]').setValue(true); + await wrapper.find('input[value="B"]').trigger('click'); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); diff --git a/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue b/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue index 7db939f91..92c8f31d9 100644 --- a/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue +++ b/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue @@ -116,7 +116,7 @@ export default defineComponent({ getInitialValue, getClearedValue, getUpdatedValue, - } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + } = useValueMatcher(multiple, inputValue, trueValue, falseValue); function requiredCheck() { return required.value && !isChecked.value ? 'required' : ''; @@ -142,8 +142,9 @@ export default defineComponent({ }); async function onToggle(c: boolean) { - const beforeChangeFn = beforeChange.value; const toValue = getUpdatedValue(c, inputValue.value); + + const beforeChangeFn = beforeChange.value; if (beforeChangeFn) { const result = await beforeChangeFn(inputValue.value, toValue); if (!result) { diff --git a/packages/vlossom/src/components/vs-checkbox/__tests__/vs-checkbox.test.ts b/packages/vlossom/src/components/vs-checkbox/__tests__/vs-checkbox.test.ts index 206f53a58..0f24e2359 100644 --- a/packages/vlossom/src/components/vs-checkbox/__tests__/vs-checkbox.test.ts +++ b/packages/vlossom/src/components/vs-checkbox/__tests__/vs-checkbox.test.ts @@ -20,6 +20,7 @@ describe('vs-checkbox', () => { // then expect(wrapper.find('input').element.checked).toBe(true); + expect(wrapper.vm.isChecked).toBe(true); }); it('modelValue를 업데이트 할 수 있다', async () => { @@ -32,12 +33,13 @@ describe('vs-checkbox', () => { }); // when - await wrapper.find('input').setValue(true); + await wrapper.find('input').trigger('click'); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); expect(updateModelValueEvent).toHaveLength(1); expect(updateModelValueEvent?.[0][0]).toEqual(true); + expect(wrapper.find('input').element.checked).toBe(true); }); it('modelValue를 바꿔서 checkbox 값을 업데이트 할 수 있다', async () => { @@ -54,6 +56,7 @@ describe('vs-checkbox', () => { // then expect(wrapper.find('input').element.checked).toBe(true); + expect(wrapper.vm.isChecked).toBe(true); }); it('modelValue가 null이면 false로 가공해준다', async () => { @@ -88,6 +91,7 @@ describe('vs-checkbox', () => { // then expect(wrapper.find('input').element.checked).toBe(true); + expect(wrapper.vm.isChecked).toBe(true); }); it('checkbox를 true로 업데이트하면 modelValue를 true-value 값으로 업데이트 한다', async () => { @@ -102,7 +106,7 @@ describe('vs-checkbox', () => { }); // when - await wrapper.find('input').setValue(true); + await wrapper.find('input').trigger('click'); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); @@ -122,12 +126,13 @@ describe('vs-checkbox', () => { }); // when - await wrapper.find('input').setValue(false); + await wrapper.find('input').trigger('click'); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); expect(updateModelValueEvent).toHaveLength(1); expect(updateModelValueEvent?.[0][0]).toEqual('B'); + expect(wrapper.find('input').element.checked).toBe(false); }); it('object 타입 true-value, false-value를 설정할 수 있다', () => { @@ -143,6 +148,7 @@ describe('vs-checkbox', () => { // then expect(wrapper.find('input').element.checked).toBe(true); + expect(wrapper.vm.isChecked).toBe(true); }); }); @@ -161,6 +167,7 @@ describe('vs-checkbox', () => { // then expect(wrapper.find('input').element.checked).toBe(true); + expect(wrapper.vm.isChecked).toBe(true); }); it('인풋 값을 true로 업데이트하면 true-value가 modelValue배열에 포함된다', async () => { @@ -175,12 +182,13 @@ describe('vs-checkbox', () => { }); // when - await wrapper.find('input').setValue(true); + await wrapper.find('input').trigger('click'); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); expect(updateModelValueEvent).toHaveLength(1); expect(updateModelValueEvent?.[0][0]).toEqual(['A']); + expect(wrapper.find('input').element.checked).toBe(true); }); }); @@ -212,12 +220,13 @@ describe('vs-checkbox', () => { }); // when - await wrapper.find('input').setValue(true); + await wrapper.find('input').trigger('click'); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); expect(updateModelValueEvent).toHaveLength(1); expect(updateModelValueEvent?.[0][0]).toEqual('A'); + expect(wrapper.find('input').element.checked).toBe(true); }); }); @@ -237,9 +246,10 @@ describe('vs-checkbox', () => { // then expect(wrapper.find('input').element.checked).toBe(true); + expect(wrapper.vm.isChecked).toBe(true); }); - it('object array 타입으로 modelValue의 초깃값을 설정할 수 있다', () => { + it('object array 타입으로 modelValue의 초깃값을 설정할 수 있다', async () => { // given const wrapper: ReturnType = mount(VsCheckbox, { props: { @@ -250,8 +260,11 @@ describe('vs-checkbox', () => { }, }); + await nextTick(); + // then expect(wrapper.find('input').element.checked).toBe(true); + expect(wrapper.vm.isChecked).toBe(true); }); it('object array 타입으로 modelValue 를 업데이트 할 수 있다', async () => { @@ -266,7 +279,7 @@ describe('vs-checkbox', () => { }); // when - await wrapper.find('input').setValue(true); + await wrapper.find('input').trigger('click'); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); @@ -290,6 +303,7 @@ describe('vs-checkbox', () => { // then expect(wrapper.find('input').element.checked).toBe(true); + expect(wrapper.vm.isChecked).toBe(true); }); }); @@ -311,7 +325,7 @@ describe('vs-checkbox', () => { await nextTick(); // then - expect(wrapper.find('input').element.checked).toBe(false); + expect(wrapper.vm.isChecked).toBe(false); expect(wrapper.props('modelValue')).toEqual(['B']); }); }); @@ -332,6 +346,7 @@ describe('vs-checkbox', () => { // then expect(wrapper.find('input').element.checked).toBe(false); + expect(wrapper.vm.isChecked).toBe(false); expect(wrapper.props('modelValue')).toBe(false); }); }); @@ -350,7 +365,7 @@ describe('vs-checkbox', () => { // when await nextTick(); - await wrapper.find('input').setValue(false); + await wrapper.find('input').trigger('click'); // then expect(wrapper.vm.computedMessages).toHaveLength(1); @@ -405,7 +420,7 @@ describe('vs-checkbox', () => { }); // when - await wrapper.find('input').setValue('A'); + await wrapper.find('input').trigger('click'); // then expect(beforeChange).toHaveBeenCalledWith('B', 'A'); @@ -422,7 +437,7 @@ describe('vs-checkbox', () => { }); // when - await wrapper.find('input').setValue(true); + await wrapper.find('input').trigger('click'); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); @@ -441,7 +456,7 @@ describe('vs-checkbox', () => { }); // when - await wrapper.find('input').setValue(true); + await wrapper.find('input').trigger('click'); // then const updateModelValueEvent = wrapper.emitted('update:modelValue'); diff --git a/packages/vlossom/src/components/vs-notice/VsNotice.vue b/packages/vlossom/src/components/vs-notice/VsNotice.vue index 51d0f42e6..0ebfa8856 100644 --- a/packages/vlossom/src/components/vs-notice/VsNotice.vue +++ b/packages/vlossom/src/components/vs-notice/VsNotice.vue @@ -24,7 +24,7 @@ import { PropType, defineComponent, ref, toRefs, watch, computed } from 'vue'; import { useColorScheme, useStyleSet } from '@/composables'; import { VsComponent, type ColorScheme } from '@/declaration'; import { VsIcon } from '@/icons'; -import VsDivider from '../vs-divider/VsDivider.vue'; +import VsDivider from '@/components/vs-divider/VsDivider.vue'; import type { VsNoticeStyleSet } from './types'; diff --git a/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue b/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue index ba5810a93..06212e837 100644 --- a/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue +++ b/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue @@ -71,7 +71,7 @@ import VsWrapper from '@/components/vs-wrapper/VsWrapper.vue'; import { VsRadioNode } from '@/nodes'; import type { VsRadioSetStyleSet } from './types'; -import type { VsRadioStyleSet } from './../vs-radio/types'; +import type { VsRadioStyleSet } from '@/components/vs-radio/types'; export default defineComponent({ name: VsComponent.VsRadioSet, @@ -82,10 +82,6 @@ export default defineComponent({ ...getResponsiveProps(), colorScheme: { type: String as PropType }, styleSet: { type: [String, Object] as PropType }, - beforeChange: { - type: Function as PropType<(from: any, to: any, option: any) => Promise | null>, - default: null, - }, name: { type: String, required: true }, vertical: { type: Boolean, default: false }, // v-model @@ -97,7 +93,6 @@ export default defineComponent({ const { colorScheme, styleSet, - beforeChange, disabled, label, modelValue, @@ -157,16 +152,7 @@ export default defineComponent({ async function onToggle(option: any) { // radio change event value is always true - const beforeChangeFn = beforeChange.value; - const toValue = getOptionValue(option); - if (beforeChangeFn) { - const result = await beforeChangeFn(inputValue.value, toValue, option); - if (!result) { - return; - } - } - - inputValue.value = toValue; + inputValue.value = getOptionValue(option); } function onFocus(option: any, e: FocusEvent) { diff --git a/packages/vlossom/src/components/vs-radio-set/__tests__/vs-radio-set.test.ts b/packages/vlossom/src/components/vs-radio-set/__tests__/vs-radio-set.test.ts index bb7020dfe..59866e7fe 100644 --- a/packages/vlossom/src/components/vs-radio-set/__tests__/vs-radio-set.test.ts +++ b/packages/vlossom/src/components/vs-radio-set/__tests__/vs-radio-set.test.ts @@ -1,4 +1,4 @@ -import { afterEach, describe, expect, it, vi } from 'vitest'; +import { afterEach, describe, expect, it } from 'vitest'; import { mount } from '@vue/test-utils'; import { nextTick } from 'vue'; import VsRadioSet from './../VsRadioSet.vue'; @@ -326,69 +326,6 @@ describe('vs-radio-set', () => { }); }); - describe('before change', () => { - it('beforeChange 함수에 from, to 인자가 전달된다 ', async () => { - // given - const beforeChange = vi.fn().mockResolvedValue(true); - const wrapper: ReturnType = mount(VsRadioSet, { - props: { - name: 'radio', - modelValue: 'A', - 'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }), - options: ['A', 'B', 'C'], - beforeChange, - }, - }); - - // when - await wrapper.find('input[value="C"]').trigger('change'); - - // then - expect(beforeChange).toHaveBeenCalledWith('A', 'C', 'C'); - }); - - it('beforeChange 함수가 Promise를 리턴하면 값이 업데이트 된다', async () => { - // given - const wrapper: ReturnType = mount(VsRadioSet, { - props: { - name: 'test', - modelValue: 'A', - 'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }), - options: ['A', 'B', 'C'], - beforeChange: () => Promise.resolve(true), - }, - }); - - // when - await wrapper.find('input[value="B"]').setValue(true); - - // then - const updateModelValueEvent = wrapper.emitted('update:modelValue'); - expect(updateModelValueEvent).toHaveLength(1); - expect(updateModelValueEvent?.[0]).toEqual(['B']); - }); - - it('beforeChange 함수가 Promise를 리턴하면 값이 업데이트 되지 않는다', async () => { - // given - const wrapper: ReturnType = mount(VsRadioSet, { - props: { - name: 'test', - modelValue: 'A', - 'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }), - options: ['A', 'B', 'C'], - beforeChange: () => Promise.resolve(false), - }, - }); - - // when - await wrapper.find('input[value="B"]').setValue(true); - - // then - const updateModelValueEvent = wrapper.emitted('update:modelValue'); - expect(updateModelValueEvent).toBeUndefined(); - }); - }); - describe('focus / blur', () => { it('focus 이벤트를 발생시킬 수 있다', async () => { // given diff --git a/packages/vlossom/src/components/vs-radio-set/stories/VsRadioSet.stories.ts b/packages/vlossom/src/components/vs-radio-set/stories/VsRadioSet.stories.ts index a5a0bd960..61ed45cd4 100644 --- a/packages/vlossom/src/components/vs-radio-set/stories/VsRadioSet.stories.ts +++ b/packages/vlossom/src/components/vs-radio-set/stories/VsRadioSet.stories.ts @@ -7,7 +7,6 @@ import { getStateTemplate, } from '@/storybook'; import { UIState } from '@/declaration'; -import { useVlossom } from '@/vlossom-framework'; import VsContainer from '@/components/vs-container/VsContainer.vue'; import VsRadioSet from '../VsRadioSet.vue'; @@ -113,15 +112,6 @@ export const Vertical: Story = { }, }; -export const BeforeChange: Story = { - args: { - beforeChange: async () => { - const $vs = useVlossom(); - return await $vs.confirm.open('Are you sure?'); - }, - }, -}; - export const Width: Story = { render: (args: any) => ({ components: { VsRadioSet, VsContainer }, diff --git a/packages/vlossom/src/components/vs-radio/VsRadio.vue b/packages/vlossom/src/components/vs-radio/VsRadio.vue index 6e6bddb1c..22265a97d 100644 --- a/packages/vlossom/src/components/vs-radio/VsRadio.vue +++ b/packages/vlossom/src/components/vs-radio/VsRadio.vue @@ -64,10 +64,6 @@ export default defineComponent({ colorScheme: { type: String as PropType }, styleSet: { type: [String, Object] as PropType }, ariaLabel: { type: String, default: '' }, - beforeChange: { - type: Function as PropType<(from: any, to: any) => Promise | null>, - default: null, - }, checked: { type: Boolean, default: false }, name: { type: String, required: true }, radioLabel: { type: String, default: '' }, @@ -78,19 +74,8 @@ export default defineComponent({ emits: ['update:modelValue', 'update:changed', 'update:valid', 'change', 'focus', 'blur'], expose: ['clear', 'validate'], setup(props, context) { - const { - beforeChange, - checked, - colorScheme, - label, - messages, - modelValue, - name, - radioValue, - required, - rules, - styleSet, - } = toRefs(props); + const { checked, colorScheme, label, messages, modelValue, name, radioValue, required, rules, styleSet } = + toRefs(props); const { emit } = context; @@ -132,16 +117,7 @@ export default defineComponent({ async function onToggle() { // radio change event value is always true - const beforeChangeFn = beforeChange.value; - const toValue = radioValue.value; - if (beforeChangeFn) { - const result = await beforeChangeFn(inputValue.value, toValue); - if (!result) { - return; - } - } - - inputValue.value = toValue; + inputValue.value = radioValue.value; } function onFocus(e: FocusEvent) { diff --git a/packages/vlossom/src/components/vs-radio/__tests__/vs-radio.test.ts b/packages/vlossom/src/components/vs-radio/__tests__/vs-radio.test.ts index d3391a20b..6a00a8f1d 100644 --- a/packages/vlossom/src/components/vs-radio/__tests__/vs-radio.test.ts +++ b/packages/vlossom/src/components/vs-radio/__tests__/vs-radio.test.ts @@ -338,24 +338,4 @@ describe('vs-radio (multiple inputs)', () => { expect(radio2.vm.computedMessages).toHaveLength(1); expect(radio2.html()).toContain('required'); }); - - it('beforeChange 함수에 from, to 인자가 전달된다 ', async () => { - // given - const beforeChange = vi.fn().mockResolvedValue(true); - const radio3: ReturnType = mount(VsRadio, { - props: { - name: 'radio', - radioValue: 'C', - modelValue: 'A', - 'onUpdate:modelValue': (e) => radio3.setProps({ modelValue: e }), - beforeChange, - }, - }); - - // when - await radio3.find('input').trigger('change'); - - // then - expect(beforeChange).toHaveBeenCalledWith('A', 'C'); - }); }); diff --git a/packages/vlossom/src/components/vs-radio/stories/VsRadio.stories.ts b/packages/vlossom/src/components/vs-radio/stories/VsRadio.stories.ts index b2d683f7f..8fbf3c941 100644 --- a/packages/vlossom/src/components/vs-radio/stories/VsRadio.stories.ts +++ b/packages/vlossom/src/components/vs-radio/stories/VsRadio.stories.ts @@ -7,7 +7,6 @@ import { getStateTemplate, } from '@/storybook'; import { UIState } from '@/declaration'; -import { useVlossom } from '@/vlossom-framework'; import VsContainer from '@/components/vs-container/VsContainer.vue'; import VsRadio from './../VsRadio.vue'; @@ -119,15 +118,6 @@ export const Required: Story = { }, }; -export const BeforeChange: Story = { - args: { - beforeChange: async () => { - const $vs = useVlossom(); - return await $vs.confirm.open('Are you sure?'); - }, - }, -}; - export const Width: Story = { render: (args: any) => ({ components: { VsRadio, VsContainer }, diff --git a/packages/vlossom/src/components/vs-switch/VsSwitch.vue b/packages/vlossom/src/components/vs-switch/VsSwitch.vue index 0108e1396..d1052ae41 100644 --- a/packages/vlossom/src/components/vs-switch/VsSwitch.vue +++ b/packages/vlossom/src/components/vs-switch/VsSwitch.vue @@ -137,7 +137,7 @@ export default defineComponent({ getInitialValue, getClearedValue, getUpdatedValue, - } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + } = useValueMatcher(multiple, inputValue, trueValue, falseValue); function requiredCheck() { return required.value && !isChecked.value ? 'required' : ''; @@ -163,8 +163,9 @@ export default defineComponent({ return; } - const beforeChangeFn = beforeChange.value; const toValue = getUpdatedValue(!isChecked.value, inputValue.value); + + const beforeChangeFn = beforeChange.value; if (beforeChangeFn) { const result = await beforeChangeFn(inputValue.value, toValue); if (!result) { diff --git a/packages/vlossom/src/components/vs-table/__tests__/vs-table.test.ts b/packages/vlossom/src/components/vs-table/__tests__/vs-table.test.ts index 239ca972f..60e577798 100644 --- a/packages/vlossom/src/components/vs-table/__tests__/vs-table.test.ts +++ b/packages/vlossom/src/components/vs-table/__tests__/vs-table.test.ts @@ -107,7 +107,7 @@ describe('VsTable', () => { // when const selectAllCheckBox = wrapper.find('.select-all').find('input'); - await selectAllCheckBox.setValue(true); + await selectAllCheckBox.trigger('click'); await nextTick(); // then @@ -151,7 +151,7 @@ describe('VsTable', () => { // when const firstItemCheckbox = wrapper.findComponent({ name: 'VsTableBodyRow' }).find('input[type="checkbox"]'); - await firstItemCheckbox.setValue(true); + await firstItemCheckbox.trigger('click'); await nextTick(); // then diff --git a/packages/vlossom/src/composables/__tests__/value-matcher-composable.test.ts b/packages/vlossom/src/composables/__tests__/value-matcher-composable.test.ts index 8a8f6e36c..876ff07c7 100644 --- a/packages/vlossom/src/composables/__tests__/value-matcher-composable.test.ts +++ b/packages/vlossom/src/composables/__tests__/value-matcher-composable.test.ts @@ -8,13 +8,12 @@ describe('value-matcher-composable', () => { it('inputValue 중 하나라도 trueValue와 일치하면 true를 반환한다 ', () => { // given const multiple = ref(true); - const modelValue = ref([1, 2, 3]); const inputValue = ref([1, 2, 3]); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { isMatched } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { isMatched } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(isMatched.value).toBe(true); @@ -23,13 +22,12 @@ describe('value-matcher-composable', () => { it('inputValue 중 일치하는 요소가 없으면 false를 반환한다 ', () => { // given const multiple = ref(true); - const modelValue = ref([1, 2, 3]); const inputValue = ref([1, 2, 3]); const trueValue = ref(4); const falseValue = ref('falseValue'); // when - const { isMatched } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { isMatched } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(isMatched.value).toBe(false); @@ -40,13 +38,12 @@ describe('value-matcher-composable', () => { it('inputValue 와 trueValue 가 같은 경우, true를 반환한다', () => { // given const multiple = ref(false); - const modelValue = ref([1, 2, 3]); const inputValue = ref([1, 2, 3]); const trueValue = ref([1, 2, 3]); const falseValue = ref('falseValue'); // when - const { isMatched } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { isMatched } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(isMatched.value).toBe(true); @@ -55,13 +52,12 @@ describe('value-matcher-composable', () => { it('inputValue 와 trueValue 가 다른 경우, false를 반환한다', () => { // given const multiple = ref(false); - const modelValue = ref([1, 2, 3]); const inputValue = ref([1, 2, 3]); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { isMatched } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { isMatched } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(isMatched.value).toBe(false); @@ -71,13 +67,12 @@ describe('value-matcher-composable', () => { it('inputValue 와 trueValue 가 같은 경우, true를 반환한다', () => { // given const multiple = ref(true); - const modelValue = ref(1); const inputValue = ref(1); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { isMatched } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { isMatched } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(isMatched.value).toBe(true); @@ -86,13 +81,12 @@ describe('value-matcher-composable', () => { it('inputValue 와 trueValue 가 다른 경우, false를 반환한다', () => { // given const multiple = ref(true); - const modelValue = ref(1); const inputValue = ref(1); const trueValue = ref([1, 2, 3]); const falseValue = ref('falseValue'); // when - const { isMatched } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { isMatched } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(isMatched.value).toBe(false); @@ -105,13 +99,12 @@ describe('value-matcher-composable', () => { it('inputValue를 그대로 반환한다', () => { // given const multiple = ref(true); - const modelValue = ref([1, 2, 3]); const inputValue = ref([1, 2, 3]); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { getInitialValue } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { getInitialValue } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(getInitialValue()).toEqual([1, 2, 3]); @@ -122,13 +115,12 @@ describe('value-matcher-composable', () => { it('modelValue가 trueValue와 같으면 trueValue를 반환한다', () => { // given const multiple = ref(false); - const modelValue = ref([1, 2, 3]); const inputValue = ref([1, 2, 3]); const trueValue = ref([1, 2, 3]); const falseValue = ref('falseValue'); // when - const { getInitialValue } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { getInitialValue } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(getInitialValue()).toEqual([1, 2, 3]); @@ -137,13 +129,12 @@ describe('value-matcher-composable', () => { it('modelValue가 trueValue와 다르면 falseValue를 반환한다', () => { // given const multiple = ref(false); - const modelValue = ref([1, 2, 3]); const inputValue = ref([1, 2, 3]); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { getInitialValue } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { getInitialValue } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(getInitialValue()).toBe('falseValue'); @@ -154,13 +145,12 @@ describe('value-matcher-composable', () => { it('modelValue가 trueValue와 같으면 trueValue를 반환한다', () => { // given const multiple = ref(true); - const modelValue = ref(1); const inputValue = ref(1); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { getInitialValue } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { getInitialValue } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(getInitialValue()).toBe(1); @@ -169,13 +159,12 @@ describe('value-matcher-composable', () => { it('modelValue가 trueValue와 다르면 falseValue를 반환한다', () => { // given const multiple = ref(true); - const modelValue = ref(0); const inputValue = ref(0); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { getInitialValue } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { getInitialValue } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(getInitialValue()).toBe('falseValue'); @@ -188,13 +177,12 @@ describe('value-matcher-composable', () => { it('trueValue와 같은 값들을 제거한 배열을 반환한다', () => { // given const multiple = ref(true); - const modelValue = ref([1, 2, 3]); const inputValue = ref([1, 2, 3]); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { getClearedValue } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { getClearedValue } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(getClearedValue()).toEqual([2, 3]); @@ -205,13 +193,12 @@ describe('value-matcher-composable', () => { it('falseValue를 반환한다', () => { // given const multiple = ref(false); - const modelValue = ref([1, 2, 3]); const inputValue = ref([1, 2, 3]); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { getClearedValue } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { getClearedValue } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(getClearedValue()).toBe('falseValue'); @@ -222,13 +209,12 @@ describe('value-matcher-composable', () => { it('falseValue를 반환한다', () => { // given const multiple = ref(true); - const modelValue = ref(1); const inputValue = ref(1); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { getClearedValue } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { getClearedValue } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(getClearedValue()).toBe('falseValue'); @@ -243,13 +229,12 @@ describe('value-matcher-composable', () => { const value = [1, 2, 3]; const multiple = ref(true); - const modelValue = ref(value); const inputValue = ref(value); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { getUpdatedValue } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { getUpdatedValue } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(getUpdatedValue(true, value)).toEqual([1, 2, 3, 1]); @@ -263,13 +248,12 @@ describe('value-matcher-composable', () => { const value = 0; const multiple = ref(false); - const modelValue = ref(value); const inputValue = ref(value); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { getUpdatedValue } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { getUpdatedValue } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(getUpdatedValue(true, value)).toBe(1); @@ -282,13 +266,12 @@ describe('value-matcher-composable', () => { const value = 0; const multiple = ref(true); - const modelValue = ref(value); const inputValue = ref(value); const trueValue = ref(1); const falseValue = ref('falseValue'); // when - const { getUpdatedValue } = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue); + const { getUpdatedValue } = useValueMatcher(multiple, inputValue, trueValue, falseValue); // then expect(getUpdatedValue(true, value)).toBe(1); diff --git a/packages/vlossom/src/composables/value-matcher-composable.ts b/packages/vlossom/src/composables/value-matcher-composable.ts index 61cc4704a..09fa9a4f8 100644 --- a/packages/vlossom/src/composables/value-matcher-composable.ts +++ b/packages/vlossom/src/composables/value-matcher-composable.ts @@ -3,12 +3,11 @@ import { utils } from '@/utils'; export function useValueMatcher( multiple: Ref, - modelValue: Ref, inputValue: Ref, trueValue: Ref, falseValue: Ref, ) { - const isArrayValue = computed(() => Array.isArray(modelValue.value)); + const isArrayValue = computed(() => Array.isArray(inputValue.value)); const isMultipleValue = computed(() => multiple.value && isArrayValue.value); const isMatched: ComputedRef = computed(() => { @@ -23,7 +22,7 @@ export function useValueMatcher( if (isMultipleValue.value) { return inputValue.value; } - return utils.object.isEqual(modelValue.value, trueValue.value) ? trueValue.value : falseValue.value; + return utils.object.isEqual(inputValue.value, trueValue.value) ? trueValue.value : falseValue.value; } function getClearedValue() { diff --git a/packages/vlossom/src/index.ts b/packages/vlossom/src/index.ts index dedf9f0df..0e636bbd6 100644 --- a/packages/vlossom/src/index.ts +++ b/packages/vlossom/src/index.ts @@ -11,4 +11,6 @@ export * from './vlossom-framework'; export * from './components'; export * from './composables'; export * from './declaration'; +export * from './icons'; +export * from './nodes'; export * from './utils'; diff --git a/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.scss b/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.scss index defe783fe..5c6b064f6 100644 --- a/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.scss +++ b/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.scss @@ -52,7 +52,6 @@ $checkbox-selected-label-color: var(--vs-checkbox-selectedLabelFontColor, $check &.checked { .checkbox-label { - font-weight: var(--vs-checkbox-selectedLabelFontWeight, 500); color: $checkbox-selected-label-color; } } diff --git a/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue b/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue index bc498dc5a..6a9762e0a 100644 --- a/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue +++ b/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue @@ -3,6 +3,7 @@