@byyuurin/ui 0.2.0 → 0.3.0

package/dist/runtime/components/Toast.vue

@@ -59,97 +59,97 @@ defineExpose({
 </script>
 
 <template>
-  <ToastRoot
-    ref="el"
-    v-slot="{ remaining, duration, open }"
-    v-bind="rootProps"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :data-orientation="props.orientation"
-    data-part="root"
-    :style="{ '--height': height }"
-  >
-    <slot name="leading" :ui="ui">
-      <Avatar
-        v-if="props.avatar"
-        :size="props.ui?.avatarSize || ui.avatarSize()"
-        v-bind="props.avatar"
-        :class="ui.avatar({ class: props.ui?.avatar })"
-        data-part="avatar"
-      />
-      <Icon
-        v-else-if="props.icon"
-        :name="props.icon"
-        :class="ui.icon({ class: props.ui?.icon })"
-        data-part="icon"
-      />
-    </slot>
-
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <ToastTitle v-if="props.title || !!slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
-        <slot name="title">
-          <component :is="props.title()" v-if="typeof props.title === 'function'" />
-          <component :is="props.title" v-else-if="typeof props.title === 'object'" />
-          <template v-else>
-            {{ props.title }}
-          </template>
-        </slot>
-      </ToastTitle>
-      <ToastDescription v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
-        <slot name="description">
-          <component :is="props.description()" v-if="typeof props.description === 'function'" />
-          <component :is="props.description" v-else-if="typeof props.description === 'object'" />
-          <template v-else>
-            {{ props.description }}
-          </template>
-        </slot>
-      </ToastDescription>
-
-      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="actions">
-        <slot name="actions">
-          <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
-            <Button size="xs" :color="props.color" v-bind="action" />
-          </ToastAction>
-        </slot>
-      </div>
-    </div>
-
-    <div
-      v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions) || props.close"
-      :class="ui.actions({ class: props.ui?.actions })"
-      data-part="actions"
-    >
-      <template v-if="props.orientation === 'horizontal'">
-        <slot name="actions">
-          <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
-            <Button size="xs" :color="props.color" v-bind="action" />
-          </ToastAction>
-        </slot>
-      </template>
-
-      <ToastClose v-if="props.close || !!slots.close" as-child>
-        <slot name="close" :ui="ui">
-          <Button
-            v-if="props.close"
-            :icon="props.closeIcon || appConfig.ui.icons.close"
-            color="neutral"
-            variant="link"
-            :aria-label="t('toast.close')"
-            v-bind="typeof props.close === 'object' ? props.close : {}"
-            :class="ui.close({ class: props.ui?.close })"
-            data-part="close"
-            @click.stop
-          />
-        </slot>
-      </ToastClose>
-    </div>
-
-    <Progress
-      v-if="props.progress && open && remaining >= 0 && duration"
-      :model-value="remaining / duration * 100"
-      :color="props.color"
-      v-bind="typeof props.progress === 'object' ? props.progress : {}"
-      size="sm"
-      :class="ui.progress({ class: props.ui?.progress })"
-    />
-  </ToastRoot>
+  <ToastRoot
+    ref="el"
+    v-slot="{ remaining, duration, open }"
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :data-orientation="props.orientation"
+    data-part="root"
+    :style="{ '--height': height }"
+  >
+    <slot name="leading" :ui="ui">
+      <Avatar
+        v-if="props.avatar"
+        :size="props.ui?.avatarSize || ui.avatarSize()"
+        v-bind="props.avatar"
+        :class="ui.avatar({ class: props.ui?.avatar })"
+        data-part="avatar"
+      />
+      <Icon
+        v-else-if="props.icon"
+        :name="props.icon"
+        :class="ui.icon({ class: props.ui?.icon })"
+        data-part="icon"
+      />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <ToastTitle v-if="props.title || !!slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
+        <slot name="title">
+          <component :is="props.title()" v-if="typeof props.title === 'function'" />
+          <component :is="props.title" v-else-if="typeof props.title === 'object'" />
+          <template v-else>
+            {{ props.title }}
+          </template>
+        </slot>
+      </ToastTitle>
+      <ToastDescription v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+        <slot name="description">
+          <component :is="props.description()" v-if="typeof props.description === 'function'" />
+          <component :is="props.description" v-else-if="typeof props.description === 'object'" />
+          <template v-else>
+            {{ props.description }}
+          </template>
+        </slot>
+      </ToastDescription>
+
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="actions">
+        <slot name="actions">
+          <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
+            <Button size="xs" :color="props.color" v-bind="action" />
+          </ToastAction>
+        </slot>
+      </div>
+    </div>
+
+    <div
+      v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions) || props.close"
+      :class="ui.actions({ class: props.ui?.actions })"
+      data-part="actions"
+    >
+      <template v-if="props.orientation === 'horizontal'">
+        <slot name="actions">
+          <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
+            <Button size="xs" :color="props.color" v-bind="action" />
+          </ToastAction>
+        </slot>
+      </template>
+
+      <ToastClose v-if="props.close || !!slots.close" as-child>
+        <slot name="close" :ui="ui">
+          <Button
+            v-if="props.close"
+            :icon="props.closeIcon || appConfig.ui.icons.close"
+            color="neutral"
+            variant="link"
+            :aria-label="t('toast.close')"
+            v-bind="typeof props.close === 'object' ? props.close : {}"
+            :class="ui.close({ class: props.ui?.close })"
+            data-part="close"
+            @click.stop
+          />
+        </slot>
+      </ToastClose>
+    </div>
+
+    <Progress
+      v-if="props.progress && open && remaining >= 0 && duration"
+      :model-value="remaining / duration * 100"
+      :color="props.color"
+      v-bind="typeof props.progress === 'object' ? props.progress : {}"
+      size="sm"
+      :class="ui.progress({ class: props.ui?.progress })"
+    />
+  </ToastRoot>
 </template>

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

@@ -1,7 +1,7 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { PrimitiveProps, ToastRootEmits, ToastRootProps } from 'reka-ui';
 import theme from '#build/ui/toast';
-import type { AvatarProps, ButtonProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps, ProgressProps } from '../types';
+import type { AvatarProps, ButtonProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps, LinkPropsKeys, ProgressProps } from '../types';
 import type { StaticSlot, StringOrVNode } from '../types/utils';
 type ThemeVariants = VariantProps<typeof theme>;
 export interface ToastProps extends ComponentBaseProps, Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
@@ -28,7 +28,7 @@ export interface ToastProps extends ComponentBaseProps, Pick<ToastRootProps, 'de
      * Display a close button to dismiss the toast.
      * @default true
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the close button.
      * @default app.icons.close
@@ -54,6 +54,8 @@ export interface ToastSlots {
         ui: ComponentStyler<typeof theme>;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToastProps, {
     height: import("vue").ShallowRef<number, number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -139,12 +141,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToastP
         };
     }>, "currentTarget">) => any) | undefined;
 }>, {
-    close: boolean | Partial<ButtonProps>;
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     progress: boolean | Pick<ProgressProps, "color" | "ui">;
     orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToastSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ToastProvider.vue

@@ -69,17 +69,17 @@ function getOffset(index) {
 </script>
 
 <template>
-  <RekaToastProvider :swipe-direction="swipeDirection" v-bind="providerProps">
-    <slot></slot>
-
-    <Toast
-      v-for="(toast, index) of toasts"
-      :key="toast.id"
-      ref="refs"
-      :progress="props.progress"
-      v-bind="omit(toast, ['id', 'close'])"
-      :data-expanded="expanded"
-      :data-front="!expanded && index === toasts.length - 1"
+  <RekaToastProvider :swipe-direction="swipeDirection" v-bind="providerProps">
+    <slot></slot>
+
+    <Toast
+      v-for="(toast, index) of toasts"
+      :key="toast.id"
+      ref="refs"
+      :progress="props.progress"
+      v-bind="omit(toast, ['id', 'close'])"
+      :data-expanded="expanded"
+      :data-front="!expanded && index === toasts.length - 1"
       :style="{
   '--index': index - toasts.length + toasts.length,
   '--before': toasts.length - 1 - index,
@@ -87,30 +87,30 @@ function getOffset(index) {
   '--scale': expanded ? '1' : 'calc(1 - var(--before) * var(--scale-factor))',
   '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
   '--transform': 'translateY(var(--translate)) scale(var(--scale))'
-}"
-      :class="ui.base({ class: props.ui?.base })"
-      data-part="base"
-      @update:open="onUpdateOpen($event, toast.id)"
-      @click="toast.onClick && toast.onClick(toast)"
-    />
-
-    <ToastPortal v-bind="portalProps">
-      <ToastViewport
-        :data-expanded="expanded"
-        :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
-        data-part="viewport"
+}"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
+      @update:open="onUpdateOpen($event, toast.id)"
+      @click="toast.onClick && toast.onClick(toast)"
+    />
+
+    <ToastPortal v-bind="portalProps">
+      <ToastViewport
+        :data-expanded="expanded"
+        :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
+        data-part="viewport"
         :style="{
   '--scale-factor': '0.05',
   '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',
   '--gap': position?.startsWith('top') ? '16px' : '-16px',
   '--front-height': `${frontHeight}px`,
   '--height': `${height}px`
-}"
-        @mouseenter="hovered = true"
-        @mouseleave="hovered = false"
-      />
-    </ToastPortal>
-  </RekaToastProvider>
+}"
+        @mouseenter="hovered = true"
+        @mouseleave="hovered = false"
+      />
+    </ToastPortal>
+  </RekaToastProvider>
 </template>
 
 <style>

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

@@ -35,15 +35,15 @@ export interface ToastProviderProps extends ComponentBaseProps, Omit<RekaToastPr
 export interface ToasterSlots {
     default: StaticSlot;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToastProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToastProviderProps> & Readonly<{}>, {
     progress: boolean;
+    max: number;
     portal: boolean | string | HTMLElement;
     duration: number;
-    max: number;
     expand: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Tooltip.vue

@@ -41,29 +41,28 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <TooltipRoot v-slot="{ open }" v-bind="rootProps" :disabled="!(props.text || props.kbds?.length || !!slots.content) || props.disabled">
-    <TooltipTrigger v-if="!!slots.default" as-child :class="props.class">
-      <slot :open="open">
-      </slot>
-    </TooltipTrigger>
-
-    <TooltipPortal v-bind="portalProps">
-      <TooltipContent v-bind="contentProps" :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })" data-part="content">
-        <slot name="content" :ui="ui">
-          <span v-if="props.text" :class="ui.text({ class: props.ui?.text })" data-part="text">{{ props.text }}</span>
-
-          <span v-if="props.kbds?.length" :class="ui.kbds({ class: props.ui?.kbds })" data-part="kbds">
-            <Kbd
-              v-for="(kbd, index) in props.kbds"
-              :key="index"
-              :size="props.ui?.kbdsSize || ui.kbdsSize()"
-              v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
-            />
-          </span>
-        </slot>
-
-        <TooltipArrow v-if="props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
-      </TooltipContent>
-    </TooltipPortal>
-  </TooltipRoot>
+  <TooltipRoot v-slot="{ open }" v-bind="rootProps" :disabled="!(props.text || props.kbds?.length || !!slots.content) || props.disabled">
+    <TooltipTrigger v-if="!!slots.default || props.reference" v-bind="$attrs" as-child :reference="props.reference" :class="props.class">
+      <slot :open="open"></slot>
+    </TooltipTrigger>
+
+    <TooltipPortal v-bind="portalProps">
+      <TooltipContent v-bind="contentProps" :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })" data-part="content">
+        <slot name="content" :ui="ui">
+          <span v-if="props.text" :class="ui.text({ class: props.ui?.text })" data-part="text">{{ props.text }}</span>
+
+          <span v-if="props.kbds?.length" :class="ui.kbds({ class: props.ui?.kbds })" data-part="kbds">
+            <Kbd
+              v-for="(kbd, index) in props.kbds"
+              :key="index"
+              :size="props.ui?.kbdsSize || ui.kbdsSize()"
+              v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
+            />
+          </span>
+        </slot>
+
+        <TooltipArrow v-if="props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
+      </TooltipContent>
+    </TooltipPortal>
+  </TooltipRoot>
 </template>

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

@@ -37,6 +37,8 @@ export interface TooltipSlots {
         ui: ComponentStyler<typeof theme>;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{
@@ -44,8 +46,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Toolti
 }>, {
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, TooltipSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Tree.vue

@@ -0,0 +1,241 @@
+<script>
+import theme from "#build/ui/tree";
+</script>
+
+<script setup>
+import { createReusableTemplate, reactivePick } from "@vueuse/core";
+import { defu } from "defu";
+import { TreeItem, TreeRoot, useForwardPropsEmits } from "reka-ui";
+import { computed, shallowRef } from "vue";
+import { useAppConfig } from "#imports";
+import { get } from "../utils";
+import { cv, merge } from "../utils/style";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  getKey: { type: Function, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  trailingIcon: { type: [String, Object], required: false },
+  expandedIcon: { type: [String, Object], required: false },
+  collapsedIcon: { type: [String, Object], required: false },
+  items: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  nested: { type: Boolean, required: false, default: true },
+  onSelect: { type: Function, required: false },
+  onToggle: { type: Function, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  expanded: { type: Array, required: false },
+  defaultExpanded: { type: Array, required: false },
+  selectionBehavior: { type: String, required: false },
+  propagateSelect: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  bubbleSelect: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:expanded"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "items", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emit);
+const as = computed(() => {
+  if (typeof props.as === "string" || props.as && "render" in props.as && typeof props.as?.render === "function")
+    return { root: props.as, link: "button" };
+  return defu(props.as, { root: "ul", link: "button" });
+});
+const flattenedPaddingFormula = computed(() => {
+  const sizeConfig = {
+    xs: { base: 2, perLevel: 5.5 },
+    // px-2, ms-4 + ps-1.5
+    sm: { base: 2.5, perLevel: 6 },
+    // px-2.5, ms-4.5 + ps-1.5
+    md: { base: 2.5, perLevel: 6.5 },
+    // px-2.5, ms-5 + ps-1.5
+    lg: { base: 3, perLevel: 7 },
+    // px-3, ms-5.5 + ps-1.5
+    xl: { base: 3, perLevel: 7.5 }
+    // px-3, ms-6 + ps-1.5
+  };
+  const config = sizeConfig[props.size || "md"];
+  return (level) => `calc(var(--spacing) * ${(level - 1) * config.perLevel + config.base})`;
+});
+const { define: DefineTreeTemplate, reuse: ReuseTreeTemplate } = createReusableTemplate();
+const { define: DefineItemTemplate, reuse: ReuseItemTemplate } = createReusableTemplate({
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    level: {
+      type: Number,
+      required: true
+    }
+  }
+});
+const rootRef = shallowRef();
+function getItemLabel(item) {
+  return get(item, props.labelKey);
+}
+function getItemKey(item) {
+  return props.getKey ? props.getKey(item) || getItemLabel(item) : getItemLabel(item);
+}
+function getDefaultOpenedItems(item) {
+  const currentItem = item.defaultExpanded ? getItemKey(item) : null;
+  const childItems = item.children?.flatMap((child) => getDefaultOpenedItems(child)) ?? [];
+  return [currentItem, ...childItems].filter(Boolean);
+}
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.tree));
+  return styler(props);
+});
+const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.flatMap((item) => getDefaultOpenedItems(item)));
+defineExpose({
+  get $el() {
+    return rootRef.value?.$el;
+  }
+});
+function onUpdate(value) {
+  emit("update:modelValue", props.multiple && !Array.isArray(value) ? [value] : value);
+}
+</script>
+
+<template>
+  <DefineItemTemplate v-slot="{ item, index, level }">
+    <li
+      role="presentation"
+      :class="props.nested && level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
+      :data-part="props.nested && level > 1 ? 'itemWithChildren' : 'item'"
+    >
+      <TreeItem
+        v-slot="{ isExpanded, isSelected, isIndeterminate, handleSelect, handleToggle }"
+        :level="level"
+        :value="item"
+        as-child
+        @toggle="(item.onToggle ?? props.onToggle)?.($event, item)"
+        @select="(item.onSelect ?? props.onSelect)?.($event, item)"
+      >
+        <slot
+          :name="`${item.slot ?? 'item'}-wrapper`"
+          v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+          :item="item"
+        >
+          <component
+            :is="as.link"
+            :type="as.link === 'button' ? 'button' : void 0"
+            :disabled="item.disabled || props.disabled"
+            :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || props.disabled })"
+            data-part="link"
+            :style="!props.nested && level > 1 ? { paddingLeft: flattenedPaddingFormula(level) } : void 0"
+          >
+            <slot
+              :name="item.slot || 'item'"
+              v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+              :item="item"
+            >
+              <slot
+                :name="`${item.slot || 'item'}-leading`"
+                v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                :item="item"
+              >
+                <Icon
+                  v-if="item.icon"
+                  :name="item.icon"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  data-part="linkLeadingIcon"
+                />
+                <Icon
+                  v-else-if="item.children?.length"
+                  :name="isExpanded ? props.expandedIcon ?? appConfig.ui.icons.folderOpen : props.collapsedIcon ?? appConfig.ui.icons.folder"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  data-part="linkLeadingIcon"
+                />
+              </slot>
+
+              <span v-if="getItemLabel(item) || slots[`${item.slot || 'item'}-label`]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })" data-part="linkLabel">
+                <slot
+                  :name="`${item.slot || 'item'}-label`"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                  :item="item"
+                >
+                  {{ getItemLabel(item) }}
+                </slot>
+              </span>
+
+              <span
+                v-if="item.trailingIcon || item.children?.length || slots[`${item.slot || 'item'}-trailing`]"
+                :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
+                data-part="linkTrailing"
+              >
+                <slot
+                  :name="`${item.slot || 'item'}-trailing`"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                  :item="item"
+                >
+                  <Icon
+                    v-if="item.trailingIcon"
+                    :name="item.trailingIcon"
+                    :class="ui.linkTrailingIcon({ class: [props.trailingIcon, item.ui?.linkTrailingIcon] })"
+                    data-part="linkTrailingIcon"
+                  />
+                  <Icon
+                    v-else-if="item.children?.length"
+                    :name="props.trailingIcon ?? appConfig.ui.icons.chevronDown"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                    data-part="linkTrailingIcon"
+                  />
+                </slot>
+              </span>
+            </slot>
+          </component>
+        </slot>
+
+        <ul
+          v-if="props.nested && item.children?.length && isExpanded"
+          role="group"
+          :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
+          data-part="listWithChildren"
+        >
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </DefineItemTemplate>
+
+  <DefineTreeTemplate v-slot="{ items, level }">
+    <ReuseItemTemplate v-for="(item, index) in items" :key="`${level}-${index}`" :item="item" :index="index" :level="level" />
+  </DefineTreeTemplate>
+
+  <TreeRoot
+    ref="rootRef"
+    v-slot="{ flattenItems }"
+    v-bind="{ ...rootProps, ...$attrs }"
+    :as="as.root"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :get-key="getItemKey"
+    :default-expanded="defaultExpanded"
+    :selection-behavior="props.selectionBehavior"
+    :multiple="props.multiple"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <template v-if="!props.nested">
+      <ReuseItemTemplate
+        v-for="(item, index) in flattenItems"
+        :key="item._id"
+        :item="item.value"
+        :index="index"
+        :level="item.level"
+      />
+    </template>
+    <ReuseTreeTemplate v-else :items="props.items" :level="1" />
+  </TreeRoot>
+</template>