From 29553429df42cf0bcbfcba99d207f5c6095099f6 Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Thu, 9 Jan 2025 14:56:18 +0700 Subject: [PATCH 01/14] 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 02/14] 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 03/14] 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 04/14] 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 05/14] 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 06/14] 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 07/14] 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' From 2a648d68e2a266bd1a958758bfe9631b30229700 Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Mon, 13 Jan 2025 13:57:16 +0700 Subject: [PATCH 08/14] fix(SelectMenu): resetSearchTermOnBlur does not work --- src/runtime/components/SelectMenu.vue | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index b69d67edf9..bc72bbf90a 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -151,7 +151,8 @@ import UInput from './Input.vue' const props = withDefaults(defineProps>(), { portal: true, searchInput: true, - labelKey: 'label' as never + labelKey: 'label' as never, + resetSearchTermOnBlur: true }) const emits = defineEmits>() const slots = defineSlots>() @@ -251,13 +252,26 @@ function onUpdate(value: any) { } function onUpdateOpen(value: boolean) { + let timeoutId + if (!value) { const event = new FocusEvent('blur') + emits('blur', event) emitFormBlur() + + // Since anatomy is diffrent from reka UI where is render inside we need to manually reset `searchTerm` + if (props.resetSearchTermOnBlur) { + const STATE_ANIMATION_MS = 100 + + timeoutId = setTimeout(() => { + searchTerm.value = '' + }, STATE_ANIMATION_MS) + } } else { const event = new FocusEvent('focus') emits('focus', event) + clearTimeout(timeoutId) } } From 59be033b274fe6a18181645c5f495c86ae778d94 Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Mon, 13 Jan 2025 14:04:28 +0700 Subject: [PATCH 09/14] up --- src/runtime/components/SelectMenu.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index bc72bbf90a..b0262dd33d 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -262,11 +262,11 @@ function onUpdateOpen(value: boolean) { // Since anatomy is diffrent from reka UI where is render inside we need to manually reset `searchTerm` if (props.resetSearchTermOnBlur) { - const STATE_ANIMATION_MS = 100 + const STATE_ANIMATION_DELAY_MS = 100 timeoutId = setTimeout(() => { searchTerm.value = '' - }, STATE_ANIMATION_MS) + }, STATE_ANIMATION_DELAY_MS) } } else { const event = new FocusEvent('focus') From 7918edbe5bc66ac02cc013e72e54befd7fdc4194 Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Mon, 13 Jan 2025 14:31:20 +0700 Subject: [PATCH 10/14] up --- src/runtime/components/SelectMenu.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index b0262dd33d..abde885c4a 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -261,6 +261,7 @@ function onUpdateOpen(value: boolean) { emitFormBlur() // Since anatomy is diffrent from reka UI where is render inside we need to manually reset `searchTerm` + // https://reka-ui.com/docs/components/combobox#anatomy if (props.resetSearchTermOnBlur) { const STATE_ANIMATION_DELAY_MS = 100 From bcd703aaa00da23e034743c4e1098b6ca3f3b40c Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Mon, 13 Jan 2025 16:35:46 +0700 Subject: [PATCH 11/14] up --- src/runtime/components/SelectMenu.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index abde885c4a..6caf623aaa 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -260,8 +260,8 @@ function onUpdateOpen(value: boolean) { emits('blur', event) emitFormBlur() - // Since anatomy is diffrent from reka UI where is render inside we need to manually reset `searchTerm` - // https://reka-ui.com/docs/components/combobox#anatomy + // Since we use `displayValue` prop inside ComboboxInput we should reset searchTerm manually + // https://reka-ui.com/docs/components/combobox#api-reference if (props.resetSearchTermOnBlur) { const STATE_ANIMATION_DELAY_MS = 100 From aece5f523f460f73001cd3a5386f8b73deb2daa9 Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Wed, 19 Mar 2025 09:44:27 +0700 Subject: [PATCH 12/14] fix(Skeleton): add ARIA accessibility attributes --- src/runtime/components/Skeleton.vue | 2 +- src/theme/skeleton.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/runtime/components/Skeleton.vue b/src/runtime/components/Skeleton.vue index b7f626015d..c6bf06c1c4 100644 --- a/src/runtime/components/Skeleton.vue +++ b/src/runtime/components/Skeleton.vue @@ -28,7 +28,7 @@ const props = defineProps() diff --git a/src/theme/skeleton.ts b/src/theme/skeleton.ts index d0ce79f088..8160503d29 100644 --- a/src/theme/skeleton.ts +++ b/src/theme/skeleton.ts @@ -1,3 +1,3 @@ export default { - base: 'animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-bg-elevated)]' + base: 'animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-bg-elevated)] aria-busy:cursor-progress' } From 2027925003d4cad5ae2d6d738d70f4d58ab03a30 Mon Sep 17 00:00:00 2001 From: rdjanuar Date: Wed, 19 Mar 2025 09:54:06 +0700 Subject: [PATCH 13/14] up --- src/runtime/components/Skeleton.vue | 9 ++++++++- src/theme/skeleton.ts | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/runtime/components/Skeleton.vue b/src/runtime/components/Skeleton.vue index 6554ed8381..749a7da880 100644 --- a/src/runtime/components/Skeleton.vue +++ b/src/runtime/components/Skeleton.vue @@ -25,7 +25,14 @@ const props = defineProps() diff --git a/src/theme/skeleton.ts b/src/theme/skeleton.ts index 8160503d29..d71777b48d 100644 --- a/src/theme/skeleton.ts +++ b/src/theme/skeleton.ts @@ -1,3 +1,3 @@ export default { - base: 'animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-bg-elevated)] aria-busy:cursor-progress' + base: 'animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-bg-elevated) aria-busy:cursor-progress' } From 52f74780293a814635f549dca397e7b23b8e5941 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 22 Apr 2025 21:35:34 +0200 Subject: [PATCH 14/14] up --- test/components/__snapshots__/Skeleton-vue.spec.ts.snap | 4 ++-- test/components/__snapshots__/Skeleton.spec.ts.snap | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/components/__snapshots__/Skeleton-vue.spec.ts.snap b/test/components/__snapshots__/Skeleton-vue.spec.ts.snap index 12aff9c818..a8c6e09292 100644 --- a/test/components/__snapshots__/Skeleton-vue.spec.ts.snap +++ b/test/components/__snapshots__/Skeleton-vue.spec.ts.snap @@ -1,5 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Skeleton > renders with as correctly 1`] = `""`; +exports[`Skeleton > renders with as correctly 1`] = `""`; -exports[`Skeleton > renders with class correctly 1`] = `"
"`; +exports[`Skeleton > renders with class correctly 1`] = `""`; diff --git a/test/components/__snapshots__/Skeleton.spec.ts.snap b/test/components/__snapshots__/Skeleton.spec.ts.snap index 12aff9c818..a8c6e09292 100644 --- a/test/components/__snapshots__/Skeleton.spec.ts.snap +++ b/test/components/__snapshots__/Skeleton.spec.ts.snap @@ -1,5 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Skeleton > renders with as correctly 1`] = `""`; +exports[`Skeleton > renders with as correctly 1`] = `""`; -exports[`Skeleton > renders with class correctly 1`] = `"
"`; +exports[`Skeleton > renders with class correctly 1`] = `""`;