fix ToggleGroup emitting empty values

This commit is contained in:
pa
2026-01-26 16:38:34 +09:00
committed by Natsumi
parent 0a3597f84e
commit 7a4014f846
+14 -2
View File
@@ -1,7 +1,7 @@
<script setup> <script setup>
import { computed, provide, unref } from 'vue';
import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui'; import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { provide } from 'vue';
import { reactiveOmit } from '@vueuse/core'; import { reactiveOmit } from '@vueuse/core';
const props = defineProps({ const props = defineProps({
@@ -33,6 +33,17 @@
const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant'); const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
const forwarded = useForwardPropsEmits(delegatedProps, emits); const forwarded = useForwardPropsEmits(delegatedProps, emits);
const forwardedProps = computed(() => {
const { ['onUpdate:modelValue']: _ignored, ...rest } = unref(forwarded);
return rest;
});
function onUpdateModelValue(value) {
if (!value || (Array.isArray(value) && !value.length)) {
return;
}
emits('update:modelValue', value);
}
</script> </script>
<template> <template>
@@ -45,7 +56,8 @@
:style="{ :style="{
'--gap': spacing '--gap': spacing
}" }"
v-bind="forwarded" v-bind="forwardedProps"
@update:modelValue="onUpdateModelValue"
:class=" :class="
cn( cn(
'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs', 'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',