From 29553429df42cf0bcbfcba99d207f5c6095099f6 Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Thu, 9 Jan 2025 14:56:18 +0700 Subject: [PATCH 1/7] fix(InputMenu): removing tag does not change modelValue --- src/runtime/components/InputMenu.vue | 8 ++++++++ src/runtime/types/utils.ts | 3 ++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index 9fd19b9aaf..f70b024ae1 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -10,6 +10,7 @@ import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta' import { tv } from '../utils/tv' import type { AvatarProps, ChipProps, InputProps } from '../types' import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils' +import { isEqual } from 'ohash' const appConfig = _appConfig as AppConfig & { ui: { inputMenu: Partial } } @@ -291,6 +292,12 @@ function onUpdateOpen(value: boolean) { } } +function onRemoveTag(ev: any) { + const modelValue = props.modelValue as SelectModelValue[] + const filteredValue = modelValue.filter(value => !isEqual(value, ev)) + emits('update:modelValue', filteredValue) +} + defineExpose({ inputRef }) @@ -337,6 +344,7 @@ defineExpose({ as-child @blur="onBlur" @focus="onFocus" + @remove-tag="onRemoveTag" > diff --git a/src/runtime/types/utils.ts b/src/runtime/types/utils.ts index 29f22cd6bf..097ca7ee55 100644 --- a/src/runtime/types/utils.ts +++ b/src/runtime/types/utils.ts @@ -23,6 +23,7 @@ export type PartialString = { [K in keyof T]?: string } +export type MaybeArray = T | T[] export type MaybeArrayOfArray = T[] | T[][] export type MaybeArrayOfArrayItem = I extends Array ? T extends Array ? U : T : never @@ -31,5 +32,5 @@ export type SelectModelValue = (T exten export type SelectItemKey = T extends Record ? keyof T : string export type SelectModelValueEmits = { - 'update:modelValue': [payload: SelectModelValue] + 'update:modelValue': [payload: MaybeArray>] } From 40e4f2943154264a371af58098d506db412260f7 Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Thu, 9 Jan 2025 14:57:44 +0700 Subject: [PATCH 2/7] up --- src/runtime/components/InputMenu.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index f70b024ae1..3703ebe8ce 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -292,7 +292,7 @@ function onUpdateOpen(value: boolean) { } } -function onRemoveTag(ev: any) { +function onRemoveTag(event: any) { const modelValue = props.modelValue as SelectModelValue[] const filteredValue = modelValue.filter(value => !isEqual(value, ev)) emits('update:modelValue', filteredValue) From 0bef321d743c9720661baca383210f1fe50f2ac1 Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Thu, 9 Jan 2025 15:02:39 +0700 Subject: [PATCH 3/7] fix: ci --- src/runtime/components/InputMenu.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index 3703ebe8ce..1d321c125f 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -294,7 +294,7 @@ function onUpdateOpen(value: boolean) { function onRemoveTag(event: any) { const modelValue = props.modelValue as SelectModelValue[] - const filteredValue = modelValue.filter(value => !isEqual(value, ev)) + const filteredValue = modelValue.filter(value => !isEqual(value, event)) emits('update:modelValue', filteredValue) } From 3add3caf94976eda1be0e6c92ff7ce9e9d0203f7 Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Thu, 9 Jan 2025 15:20:37 +0700 Subject: [PATCH 4/7] fix: typecheck --- src/runtime/components/InputMenu.vue | 8 +++++--- src/runtime/types/utils.ts | 3 +-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index 1d321c125f..3d2efdd5dc 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -293,9 +293,11 @@ function onUpdateOpen(value: boolean) { } function onRemoveTag(event: any) { - const modelValue = props.modelValue as SelectModelValue[] - const filteredValue = modelValue.filter(value => !isEqual(value, event)) - emits('update:modelValue', filteredValue) + if (Array.isArray(props.modelValue)) { + const modelValue = props.modelValue + const filteredValue = modelValue.filter(value => !isEqual(value, event)) + emits('update:modelValue', filteredValue as SelectModelValue) + } } defineExpose({ diff --git a/src/runtime/types/utils.ts b/src/runtime/types/utils.ts index 097ca7ee55..29f22cd6bf 100644 --- a/src/runtime/types/utils.ts +++ b/src/runtime/types/utils.ts @@ -23,7 +23,6 @@ export type PartialString = { [K in keyof T]?: string } -export type MaybeArray = T | T[] export type MaybeArrayOfArray = T[] | T[][] export type MaybeArrayOfArrayItem = I extends Array ? T extends Array ? U : T : never @@ -32,5 +31,5 @@ export type SelectModelValue = (T exten export type SelectItemKey = T extends Record ? keyof T : string export type SelectModelValueEmits = { - 'update:modelValue': [payload: MaybeArray>] + 'update:modelValue': [payload: SelectModelValue] } From 303de4155a653df2ab894852255256132198822d Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Thu, 9 Jan 2025 15:49:30 +0700 Subject: [PATCH 5/7] fix: typecheck --- src/runtime/components/InputMenu.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index 3d2efdd5dc..edf20405e5 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -295,8 +295,8 @@ function onUpdateOpen(value: boolean) { function onRemoveTag(event: any) { if (Array.isArray(props.modelValue)) { const modelValue = props.modelValue - const filteredValue = modelValue.filter(value => !isEqual(value, event)) - emits('update:modelValue', filteredValue as SelectModelValue) + const filteredValue = modelValue.filter(value => !isEqual(value, event)) as SelectModelValue + emits('update:modelValue', filteredValue) } } From 8ba0eaca2887507cb56d180389684e757853a47a Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Thu, 9 Jan 2025 15:58:12 +0700 Subject: [PATCH 6/7] fix: typecheck --- src/runtime/components/InputMenu.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index edf20405e5..7525c85b3a 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -293,10 +293,10 @@ function onUpdateOpen(value: boolean) { } function onRemoveTag(event: any) { - if (Array.isArray(props.modelValue)) { - const modelValue = props.modelValue - const filteredValue = modelValue.filter(value => !isEqual(value, event)) as SelectModelValue - emits('update:modelValue', filteredValue) + if (props.multiple) { + const modelValue = props.modelValue as SelectModelValue + const filteredValue = modelValue.filter(value => !isEqual(value, event)) + emits('update:modelValue', filteredValue as SelectModelValue) } } From bffae79b814469830aea5cfa4a180230c3fe3ee9 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 9 Jan 2025 11:41:44 +0100 Subject: [PATCH 7/7] up --- src/runtime/components/InputMenu.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index 7525c85b3a..2856599966 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -10,7 +10,6 @@ import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta' import { tv } from '../utils/tv' import type { AvatarProps, ChipProps, InputProps } from '../types' import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils' -import { isEqual } from 'ohash' const appConfig = _appConfig as AppConfig & { ui: { inputMenu: Partial } } @@ -146,6 +145,7 @@ extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] import { computed, ref, toRef, onMounted, toRaw } from 'vue' import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui' import { defu } from 'defu' +import { isEqual } from 'ohash' import { reactivePick, createReusableTemplate } from '@vueuse/core' import { useAppConfig } from '#imports' import { useButtonGroup } from '../composables/useButtonGroup'