@nuxt/ui 3.3.0 → 3.3.1

package/dist/runtime/components/InputNumber.vue.d.ts

@@ -4,7 +4,7 @@ import theme from '#build/ui/input-number';
 import type { ButtonProps } from '../types';
 import type { ComponentConfig } from '../types/utils';
 type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>;
-export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange'> {
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -80,43 +80,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         };
         $refs: {
             [x: string]: unknown;
-        } & {
-            primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-                asChild: {
-                    type: BooleanConstructor;
-                    default: boolean;
-                };
-                as: {
-                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                    default: string;
-                };
-            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-                asChild: boolean;
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<import("vue").ExtractPropTypes<{
-                asChild: {
-                    type: BooleanConstructor;
-                    default: boolean;
-                };
-                as: {
-                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                    default: string;
-                };
-            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, {}, {}, {}, {
-                asChild: boolean;
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }> | null;
         };
         $slots: Readonly<{
             [name: string]: import("vue").Slot<any> | undefined;
@@ -152,7 +115,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         as: import("reka-ui").AsTag | import("vue").Component;
     }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {
-            default?(_: {}): any;
+            default?: (props: {}) => any;
         };
     }) | null, ({
         $: import("vue").ComponentInternalInstance;
@@ -166,43 +129,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         };
         $refs: {
             [x: string]: unknown;
-        } & {
-            primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-                asChild: {
-                    type: BooleanConstructor;
-                    default: boolean;
-                };
-                as: {
-                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                    default: string;
-                };
-            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-                asChild: boolean;
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<import("vue").ExtractPropTypes<{
-                asChild: {
-                    type: BooleanConstructor;
-                    default: boolean;
-                };
-                as: {
-                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                    default: string;
-                };
-            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, {}, {}, {}, {
-                asChild: boolean;
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }> | null;
         };
         $slots: Readonly<{
             [name: string]: import("vue").Slot<any> | undefined;
@@ -238,7 +164,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         as: import("reka-ui").AsTag | import("vue").Component;
     }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {
-            default?(_: {}): any;
+            default?: (props: {}) => any;
         };
     }) | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/components/InputTags.vue.d.ts

@@ -117,7 +117,7 @@ declare const _default: <T extends InputTagItem>(__VLS_props: NonNullable<Awaite
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").TagsInputInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null, ({
             $: import("vue").ComponentInternalInstance;
@@ -169,7 +169,7 @@ declare const _default: <T extends InputTagItem>(__VLS_props: NonNullable<Awaite
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").TagsInputInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null>;
     }>): void;

package/dist/runtime/components/PinInput.vue

@@ -34,7 +34,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "complete", "change", "blur"]);
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "defaultValue", "disabled", "id", "mask", "modelValue", "name", "otp", "required", "type"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "disabled", "id", "mask", "name", "otp", "required", "type"), emits);
 const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pinInput || {} })({
   color: color.value,
@@ -76,6 +76,8 @@ defineExpose({
     :id="id"
     :name="name"
     :placeholder="placeholder"
+    :model-value="modelValue"
+    :default-value="defaultValue"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"

package/dist/runtime/components/PinInput.vue.d.ts

@@ -38,19 +38,19 @@ export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T
     change: [payload: Event];
     blur: [payload: Event];
 };
-declare const _default: <T extends PinInputType = "text">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: <T extends PinInputType>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onBlur?: ((payload: Event) => any) | undefined;
-        readonly onComplete?: ((value: T extends "number" ? number[] : string[]) => any) | undefined;
+        readonly onComplete?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
         readonly onChange?: ((payload: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((value: T extends "number" ? number[] : string[]) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue" | "onComplete"> & PinInputProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>): void;
     attrs: any;
     slots: {};
-    emit: ((evt: "blur", payload: Event) => void) & ((evt: "complete", value: T extends "number" ? number[] : string[]) => void) & ((evt: "change", payload: Event) => void) & ((evt: "update:modelValue", value: T extends "number" ? number[] : string[]) => void);
+    emit: ((evt: "blur", payload: Event) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "change", payload: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Select.vue

@@ -12,7 +12,7 @@ import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { usePortal } from "../composables/usePortal";
-import { compare, get, isArrayOfArray } from "../utils";
+import { get, getDisplayValue, isArrayOfArray } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
@@ -81,11 +81,16 @@ const groups = computed(
 const items = computed(() => groups.value.flatMap((group) => group));
 function displayValue(value) {
   if (props.multiple && Array.isArray(value)) {
-    const values = value.map((v) => displayValue(v)).filter(Boolean);
-    return values?.length ? values.join(", ") : void 0;
+    const displayedValues = value.map((item) => getDisplayValue(items.value, item, {
+      labelKey: props.labelKey,
+      valueKey: props.valueKey
+    })).filter((v) => v != null && v !== "");
+    return displayedValues.length > 0 ? displayedValues.join(", ") : void 0;
   }
-  const item = items.value.find((item2) => compare(typeof item2 === "object" ? get(item2, props.valueKey) : item2, value));
-  return item && (typeof item === "object" ? get(item, props.labelKey) : item);
+  return getDisplayValue(items.value, value, {
+    labelKey: props.labelKey,
+    valueKey: props.valueKey
+  });
 }
 const triggerRef = ref(null);
 function autoFocus() {
@@ -137,7 +142,12 @@ defineExpose({
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <SelectTrigger :id="id" ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="{ ...$attrs, ...ariaAttrs }">
+    <SelectTrigger
+      :id="id"
+      ref="triggerRef"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+    >
       <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
           <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

package/dist/runtime/components/Select.vue.d.ts

@@ -186,7 +186,7 @@ declare const _default: <T extends ArrayOrNested<SelectItem>, VK extends GetItem
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").SelectTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null, ({
             $: import("vue").ComponentInternalInstance;
@@ -237,7 +237,7 @@ declare const _default: <T extends ArrayOrNested<SelectItem>, VK extends GetItem
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").SelectTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null>;
     }>): void;

package/dist/runtime/components/SelectMenu.vue

@@ -13,7 +13,7 @@ import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
-import { compare, get, isArrayOfArray } from "../utils";
+import { compare, get, getDisplayValue, isArrayOfArray } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
@@ -90,11 +90,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.selectMenu ||
 }));
 function displayValue(value) {
   if (props.multiple && Array.isArray(value)) {
-    const values = value.map((v) => displayValue(v)).filter(Boolean);
-    return values?.length ? values.join(", ") : void 0;
+    const displayedValues = value.map((item) => getDisplayValue(items.value, item, {
+      labelKey: props.labelKey,
+      valueKey: props.valueKey
+    })).filter((v) => v != null && v !== "");
+    return displayedValues.length > 0 ? displayedValues.join(", ") : void 0;
   }
-  const item = items.value.find((item2) => compare(typeof item2 === "object" && props.valueKey ? get(item2, props.valueKey) : item2, value));
-  return item && (typeof item === "object" ? get(item, props.labelKey) : item);
+  return getDisplayValue(items.value, value, {
+    labelKey: props.labelKey,
+    valueKey: props.valueKey
+  });
 }
 const groups = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []

package/dist/runtime/components/SelectMenu.vue.d.ts

@@ -233,7 +233,7 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null, ({
             $: import("vue").ComponentInternalInstance;
@@ -283,7 +283,7 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null>;
     }>): void;

package/dist/runtime/components/Tabs.vue

@@ -11,6 +11,7 @@ import { get } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
+import UBadge from "./Badge.vue";
 const props = defineProps({
   as: { type: null, required: false },
   items: { type: Array, required: false },

package/dist/runtime/components/Toast.vue.d.ts

@@ -50,7 +50,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
      * `{ size: 'sm' }`{lang="ts-type"}
      * @defaultValue true
      */
-    progress?: boolean | Pick<ProgressProps, 'color'>;
+    progress?: boolean | Pick<ProgressProps, 'color' | 'ui'>;
     class?: any;
     ui?: Toast['slots'];
 }
@@ -153,7 +153,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToastProps
     }>, "currentTarget">) => any) | undefined;
 }>, {
     close: boolean | Partial<ButtonProps>;
-    progress: boolean | Pick<ProgressProps, "color">;
+    progress: boolean | Pick<ProgressProps, "color" | "ui">;
     orientation: Toast["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToastSlots>;
 export default _default;

package/dist/runtime/components/Tooltip.vue

@@ -31,7 +31,7 @@ const props = defineProps({
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "delayDuration", "disableHoverableContent", "disableClosingTrigger", "disabled", "ignoreNonKeyboardFocus"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "delayDuration", "disableHoverableContent", "disableClosingTrigger", "ignoreNonKeyboardFocus"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
 const arrowProps = toRef(() => props.arrow);
@@ -41,7 +41,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tooltip || {}
 </script>
 
 <template>
-  <TooltipRoot v-slot="{ open }" v-bind="rootProps">
+  <TooltipRoot v-slot="{ open }" v-bind="rootProps" :disabled="!(text || kbds?.length || !!slots.content) || props.disabled">
     <TooltipTrigger v-if="!!slots.default || !!reference" v-bind="$attrs" as-child :reference="reference" :class="props.class">
       <slot :open="open" />
     </TooltipTrigger>

package/dist/runtime/components/Tree.vue

@@ -73,35 +73,37 @@ const defaultExpanded = computed(
         @toggle="item.onToggle"
         @select="item.onSelect"
       >
-        <button type="button" :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
-          <slot :name="item.slot || 'item'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
-            <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
-              <UIcon
-                v-if="item.icon"
-                :name="item.icon"
-                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
-              />
-              <UIcon
-                v-else-if="item.children?.length"
-                :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
-                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
-              />
-            </slot>
-
-            <span v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
-              <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
-                {{ getItemLabel(item) }}
+        <slot :name="item.slot ? `${item.slot}-wrapper` : 'item-wrapper'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+          <button type="button" :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
+            <slot :name="item.slot || 'item'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+              <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+                <UIcon
+                  v-if="item.icon"
+                  :name="item.icon"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                />
+                <UIcon
+                  v-else-if="item.children?.length"
+                  :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                />
               </slot>
-            </span>
 
-            <span v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })">
-              <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
-                <UIcon v-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })" />
-                <UIcon v-else-if="item.children?.length" :name="trailingIcon ?? appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })" />
-              </slot>
-            </span>
-          </slot>
-        </button>
+              <span v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
+                <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+                  {{ getItemLabel(item) }}
+                </slot>
+              </span>
+
+              <span v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })">
+                <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+                  <UIcon v-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })" />
+                  <UIcon v-else-if="item.children?.length" :name="trailingIcon ?? appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })" />
+                </slot>
+              </span>
+            </slot>
+          </button>
+        </slot>
 
         <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })">
           <ReuseTreeTemplate :items="item.children" :level="level + 1" />

package/dist/runtime/components/Tree.vue.d.ts

@@ -85,6 +85,7 @@ type SlotProps<T extends TreeItem> = (props: {
     selected: boolean;
 }) => any;
 export type TreeSlots<A extends TreeItem[] = TreeItem[], T extends NestedItem<A> = NestedItem<A>> = {
+    'item-wrapper': SlotProps<T>;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
     'item-label': SlotProps<T>;

package/dist/runtime/composables/useFileUpload.js

@@ -4,7 +4,13 @@ function parseAcceptToDataTypes(accept) {
   if (!accept || accept === "*") {
     return void 0;
   }
-  const types = accept.split(",").map((type) => type.trim()).filter((type) => {
+  const types = accept.split(",").map((type) => {
+    const trimmedType = type.trim();
+    if (trimmedType.includes("/") && trimmedType.endsWith("/*")) {
+      return trimmedType.split("/")[0] || trimmedType;
+    }
+    return trimmedType;
+  }).filter((type) => {
     return !type.startsWith(".");
   });
   return types.length > 0 ? types : void 0;

package/dist/runtime/composables/useOverlay.d.ts

@@ -50,7 +50,7 @@ type OverlayInstance<T extends Component> = Omit<ManagedOverlayOptionsPrivate<T>
 };
 type OpenedOverlay<T extends Component> = Omit<OverlayInstance<T>, 'open' | 'close' | 'patch' | 'modelValue' | 'resolvePromise'> & {
     result: Promise<CloseEventArgType<ComponentEmit<T>>>;
-};
+} & Promise<CloseEventArgType<ComponentEmit<T>>>;
 declare function _useOverlay(): {
     overlays: import("vue").ShallowReactive<Overlay[]>;
     open: <T extends Component>(id: symbol, props?: ComponentProps<T>) => OpenedOverlay<T>;

package/dist/runtime/composables/useOverlay.js

@@ -30,12 +30,13 @@ function _useOverlay() {
     }
     overlay.isOpen = true;
     overlay.isMounted = true;
-    return {
+    const result = new Promise((resolve) => overlay.resolvePromise = resolve);
+    return Object.assign(result, {
       id,
       isMounted: overlay.isMounted,
       isOpen: overlay.isOpen,
-      result: new Promise((resolve) => overlay.resolvePromise = resolve)
-    };
+      result
+    });
   };
   const close = (id, value) => {
     const overlay = getOverlay(id);

package/dist/runtime/locale/ar.js

@@ -52,6 +52,9 @@ export default defineLocale({
     },
     table: {
       noData: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0628\u064A\u0627\u0646\u0627\u062A"
+    },
+    fileUpload: {
+      removeFile: "\u0625\u0632\u0627\u0644\u0629 {filename}"
     }
   }
 });

package/dist/runtime/locale/az.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "M\u0259lumat yoxdur"
+    },
+    fileUpload: {
+      removeFile: "{filename} sil"
     }
   }
 });

package/dist/runtime/locale/bg.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "\u041D\u044F\u043C\u0430 \u0434\u0430\u043D\u043D\u0438"
+    },
+    fileUpload: {
+      removeFile: "\u041F\u0440\u0435\u043C\u0430\u0445\u043D\u0438 {filename}"
     }
   }
 });

package/dist/runtime/locale/bn.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "\u0995\u09CB\u09A8 \u09A4\u09A5\u09CD\u09AF \u09A8\u09C7\u0987"
+    },
+    fileUpload: {
+      removeFile: "{filename} \u09B8\u09B0\u09BE\u09A8"
     }
   }
 });

package/dist/runtime/locale/ca.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "Sense dades"
+    },
+    fileUpload: {
+      removeFile: "Eliminar {filename}"
     }
   }
 });

package/dist/runtime/locale/ckb.js

@@ -52,6 +52,9 @@ export default defineLocale({
     },
     table: {
       noData: "\u0647\u06CC\u0686 \u062F\u0627\u062A\u0627\u06CC\u06D5\u06A9 \u0646\u06CC\u06CC\u06D5"
+    },
+    fileUpload: {
+      removeFile: "{filename} \u0628\u0633\u0695\u06D5\u0648\u06D5"
     }
   }
 });

package/dist/runtime/locale/cs.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "\u017D\xE1dn\xE1 data"
+    },
+    fileUpload: {
+      removeFile: "Odebrat {filename}"
     }
   }
 });

package/dist/runtime/locale/da.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "Ingen data"
+    },
+    fileUpload: {
+      removeFile: "Fjern {filename}"
     }
   }
 });

package/dist/runtime/locale/de.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "Keine Daten"
+    },
+    fileUpload: {
+      removeFile: "{filename} entfernen"
     }
   }
 });

package/dist/runtime/locale/el.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "\u0394\u03B5\u03BD \u03C5\u03C0\u03AC\u03C1\u03C7\u03BF\u03C5\u03BD \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1"
+    },
+    fileUpload: {
+      removeFile: "\u0391\u03C6\u03B1\u03AF\u03C1\u03B5\u03C3\u03B7 {filename}"
     }
   }
 });

package/dist/runtime/locale/en.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "No data"
+    },
+    fileUpload: {
+      removeFile: "Remove {filename}"
     }
   }
 });

package/dist/runtime/locale/es.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "Sin datos"
+    },
+    fileUpload: {
+      removeFile: "Eliminar {filename}"
     }
   }
 });

package/dist/runtime/locale/et.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "Pole andmeid"
+    },
+    fileUpload: {
+      removeFile: "Eemalda {filename}"
     }
   }
 });

package/dist/runtime/locale/fa_ir.js

@@ -52,6 +52,9 @@ export default defineLocale({
     },
     table: {
       noData: "\u062F\u0627\u062F\u0647\u200C\u0627\u06CC \u0645\u0648\u062C\u0648\u062F \u0646\u06CC\u0633\u062A"
+    },
+    fileUpload: {
+      removeFile: "\u062D\u0630\u0641 {filename}"
     }
   }
 });

package/dist/runtime/locale/fi.js

@@ -51,6 +51,9 @@ export default defineLocale({
     },
     table: {
       noData: "Ei tietoja"
+    },
+    fileUpload: {
+      removeFile: "Poista {filename}"
     }
   }
 });