From f8a80c4c5232ebeac74293839eae00351a61f047 Mon Sep 17 00:00:00 2001 From: Thomas Cazade Date: Tue, 4 Mar 2025 16:51:55 +0100 Subject: [PATCH 1/5] feat(select): invalid v-model with is-multi prop now returns all options --- src/Select.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Select.vue b/src/Select.vue index 6545b46..fd4d4fc 100644 --- a/src/Select.vue +++ b/src/Select.vue @@ -72,8 +72,9 @@ const availableOptions = computed(() => { })); // Remove already selected values from the list of options, when in multi-select mode. + // In case an invalid v-model is provided, we return all options since we can't know what options are valid. const getNonSelectedOptions = (options: GenericOption[]) => options.filter( - (option) => Array.isArray(selected.value) && !selected.value.includes(option.value), + (option) => Array.isArray(selected.value) ? !selected.value.includes(option.value) : true, ); if (props.isSearchable && search.value) { From cb3ac38771e1b0b9ab58a35e51db2dd3455090a4 Mon Sep 17 00:00:00 2001 From: Thomas Cazade Date: Tue, 11 Mar 2025 13:37:19 +0100 Subject: [PATCH 2/5] feat(select): automatically convert v-model to array when undefined with is-multi https://github.com/TotomInc/vue3-select-component/issues/212 --- src/Select.vue | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/Select.vue b/src/Select.vue index fd4d4fc..915f7af 100644 --- a/src/Select.vue +++ b/src/Select.vue @@ -44,10 +44,7 @@ const emit = defineEmits<{ (e: "search", value: string): void; }>(); -const selected = defineModel({ - required: true, - validator: (value, _props) => _props.isMulti ? Array.isArray(value) : !Array.isArray(value), -}); +const selected = defineModel({ required: true }); const containerRef = useTemplateRef("container"); const inputRef = useTemplateRef("input"); @@ -154,8 +151,12 @@ const setOption = (option: GenericOption) => { if (Array.isArray(selected.value)) { selected.value.push(option.value); } - else if (!props.disableInvalidVModelWarn) { - console.warn(`[vue3-select-component warn]: The v-model provided should be an array when using \`isMulti\` prop, instead it was: ${selected.value}`); + else { + selected.value = [option.value]; + + if (!props.disableInvalidVModelWarn) { + console.warn(`[vue3-select-component warn]: The v-model provided should be an array when using \`isMulti\` prop, instead it was: ${selected.value}. Since an option has been selected, the component automatically converted the v-model to an array.`); + } } } else { From e01b3f354563951bca4fe611159bd8156f742f88 Mon Sep 17 00:00:00 2001 From: Thomas Cazade Date: Tue, 11 Mar 2025 13:42:26 +0100 Subject: [PATCH 3/5] chore: release v0.11.6-beta.1 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 08ab700..ad4ed1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vue3-select-component", - "version": "0.11.5", + "version": "0.11.6-beta.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "vue3-select-component", - "version": "0.11.5", + "version": "0.11.6-beta.1", "license": "MIT", "devDependencies": { "@antfu/eslint-config": "4.10.1", diff --git a/package.json b/package.json index f649fb9..9b09c94 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vue3-select-component", "type": "module", - "version": "0.11.5", + "version": "0.11.6-beta.1", "description": "A flexible & modern select-input control for Vue 3.", "author": "Thomas Cazade ", "license": "MIT", From 80170ca57e6725f0cb4afd7853d1b35a50c40ce4 Mon Sep 17 00:00:00 2001 From: Thomas Cazade Date: Thu, 20 Mar 2025 13:19:21 +0100 Subject: [PATCH 4/5] fix(select): use getOptionValue to determine selected options when using isMulti prop https://github.com/TotomInc/vue3-select-component/issues/212#issuecomment-2739646578 --- src/Select.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Select.vue b/src/Select.vue index 915f7af..389733c 100644 --- a/src/Select.vue +++ b/src/Select.vue @@ -83,7 +83,7 @@ const availableOptions = computed(() => { return props.isMulti ? getNonSelectedOptions(options) : options; }); -const selectedOptions = computed(() => { +const selectedOptions = computed(() => { if (props.isMulti) { if (!Array.isArray(selected.value)) { if (!props.disableInvalidVModelWarn) { @@ -93,9 +93,9 @@ const selectedOptions = computed(() => { return []; } - return selected.value.map( - (value) => props.options.find((option) => option.value === value)!, - ); + return selected.value + .map((selectedValue) => props.options.find((option) => props.getOptionValue(option) === selectedValue)) + .filter((option) => option !== undefined); } const found = props.options.find((option) => props.getOptionValue(option) === selected.value); From b7b65f8482e7455484d0b01bd4382483b2f669d4 Mon Sep 17 00:00:00 2001 From: Thomas Cazade Date: Thu, 20 Mar 2025 13:20:48 +0100 Subject: [PATCH 5/5] chore: release v0.11.6-beta.2 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index ad4ed1b..4f532e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vue3-select-component", - "version": "0.11.6-beta.1", + "version": "0.11.6-beta.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "vue3-select-component", - "version": "0.11.6-beta.1", + "version": "0.11.6-beta.2", "license": "MIT", "devDependencies": { "@antfu/eslint-config": "4.10.1", diff --git a/package.json b/package.json index 9b09c94..9c64fff 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vue3-select-component", "type": "module", - "version": "0.11.6-beta.1", + "version": "0.11.6-beta.2", "description": "A flexible & modern select-input control for Vue 3.", "author": "Thomas Cazade ", "license": "MIT",