fix: add triggerClass binding to PopoverTrigger and update icon-picker styles (#6095)

* Popover支持设置trigger的样式
* 修正icon-picker的input值更新
This commit is contained in:
Netfan 2025-05-01 21:40:45 +08:00 committed by GitHub
parent 0517a7014f
commit f1af9f8f6e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 2 deletions

View File

@ -21,6 +21,7 @@ interface Props extends PopoverRootProps {
class?: ClassType; class?: ClassType;
contentClass?: ClassType; contentClass?: ClassType;
contentProps?: PopoverContentProps; contentProps?: PopoverContentProps;
triggerClass?: ClassType;
} }
const props = withDefaults(defineProps<Props>(), {}); const props = withDefaults(defineProps<Props>(), {});
@ -32,6 +33,7 @@ const delegatedProps = computed(() => {
class: _cls, class: _cls,
contentClass: _, contentClass: _,
contentProps: _cProps, contentProps: _cProps,
triggerClass: _tClass,
...delegated ...delegated
} = props; } = props;
@ -43,7 +45,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
<template> <template>
<PopoverRoot v-bind="forwarded"> <PopoverRoot v-bind="forwarded">
<PopoverTrigger> <PopoverTrigger :class="triggerClass">
<slot name="trigger"></slot> <slot name="trigger"></slot>
<PopoverContent <PopoverContent

View File

@ -165,13 +165,18 @@ const searchInputProps = computed(() => {
}; };
}); });
function updateCurrentSelect(v: string) {
currentSelect.value = v;
}
defineExpose({ toggleOpenState, open, close }); defineExpose({ toggleOpenState, open, close });
</script> </script>
<template> <template>
<VbenPopover <VbenPopover
v-model:open="visible" v-model:open="visible"
:content-props="{ align: 'end', alignOffset: -11, sideOffset: 8 }" :content-props="{ align: 'end', alignOffset: -11, sideOffset: 8 }"
content-class="p-0 pt-3" content-class="p-0 pt-3 w-full"
trigger-class="w-full"
> >
<template #trigger> <template #trigger>
<template v-if="props.type === 'input'"> <template v-if="props.type === 'input'">
@ -183,6 +188,7 @@ defineExpose({ toggleOpenState, open, close });
role="combobox" role="combobox"
:aria-label="$t('ui.iconPicker.placeholder')" :aria-label="$t('ui.iconPicker.placeholder')"
aria-expanded="visible" aria-expanded="visible"
:[`onUpdate:${modelValueProp}`]="updateCurrentSelect"
v-bind="$attrs" v-bind="$attrs"
> >
<template #[iconSlot]> <template #[iconSlot]>