@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

package/dist/runtime/components/Tabs.vue

@@ -44,41 +44,42 @@ defineExpose({
 </script>
 
 <template>
-  <TabsRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <TabsList :class="ui.list({ class: props.ui?.list })">
-      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
-
-      <slot name="list-leading" />
-
-      <TabsTrigger
-        v-for="(item, index) of items"
-        :key="index"
-        :ref="(el) => triggersRef[index] = el"
-        :value="item.value || String(index)"
-        :disabled="item.disabled"
-        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
-      >
-        <slot name="leading" :item="item" :index="index">
-          <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
-          <UAvatar v-else-if="item.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
-        </slot>
-
-        <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
-          <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
-        </span>
-
-        <slot name="trailing" :item="item" :index="index" />
-      </TabsTrigger>
-
-      <slot name="list-trailing" />
-    </TabsList>
-
-    <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
-        <slot :name="item.slot || 'content'" :item="item" :index="index">
-          {{ item.content }}
-        </slot>
-      </TabsContent>
-    </template>
-  </TabsRoot>
+  <TabsRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <TabsList :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+
+      <slot name="list-leading" />
+
+      <TabsTrigger
+        v-for="(item, index) of items"
+        :key="index"
+        :ref="(el) => triggersRef[index] = el"
+        `
+        :value="item.value || String(index)"
+        :disabled="item.disabled"
+        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
+      >
+        <slot name="leading" :item="item" :index="index">
+          <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
+          <UAvatar v-else-if="item.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
+        </slot>
+
+        <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+          <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
+        </span>
+
+        <slot name="trailing" :item="item" :index="index" />
+      </TabsTrigger>
+
+      <slot name="list-trailing" />
+    </TabsList>
+
+    <template v-if="!!content">
+      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
+        <slot :name="item.slot || 'content'" :item="item" :index="index">
+          {{ item.content }}
+        </slot>
+      </TabsContent>
+    </template>
+  </TabsRoot>
 </template>

package/dist/runtime/components/Textarea.vue

@@ -133,37 +133,37 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <textarea
-      :id="id"
-      ref="textareaRef"
-      :value="modelValue"
-      :name="name"
-      :rows="rows"
-      :placeholder="placeholder"
-      :class="ui.base({ class: props.ui?.base })"
-      :disabled="disabled"
-      :required="required"
-      v-bind="{ ...$attrs, ...ariaAttrs }"
-      @input="onInput"
-      @blur="onBlur"
-      @change="onChange"
-      @focus="emitFormFocus"
-    />
-
-    <slot />
-
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
-      </slot>
-    </span>
-
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
-      </slot>
-    </span>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <textarea
+      :id="id"
+      ref="textareaRef"
+      :value="modelValue"
+      :name="name"
+      :rows="rows"
+      :placeholder="placeholder"
+      :class="ui.base({ class: props.ui?.base })"
+      :disabled="disabled"
+      :required="required"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="emitFormFocus"
+    />
+
+    <slot />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </Primitive>
 </template>

package/dist/runtime/components/Timeline.vue

@@ -51,42 +51,42 @@ function getItemState(index) {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div
-      v-for="(item, index) in items"
-      :key="item.value ?? index"
-      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-      :data-state="getItemState(index)"
-    >
-      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
-        <UAvatar :size="size" :icon="item.icon" v-bind="typeof item.avatar === 'object' ? item.avatar : {}" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }">
-          <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item" />
-        </UAvatar>
-
-        <Separator
-          v-if="index < items.length - 1"
-          :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
-          :orientation="props.orientation"
-        />
-      </div>
-
-      <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-        <div v-if="item.date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
-          <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
-            {{ item.date }}
-          </slot>
-        </div>
-        <div v-if="item.title || !!slots.title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
-          <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
-            {{ item.title }}
-          </slot>
-        </div>
-        <div v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
-          <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
-            {{ item.description }}
-          </slot>
-        </div>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div
+      v-for="(item, index) in items"
+      :key="item.value ?? index"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      :data-state="getItemState(index)"
+    >
+      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+        <UAvatar :size="size" :icon="item.icon" v-bind="typeof item.avatar === 'object' ? item.avatar : {}" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }">
+          <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item" />
+        </UAvatar>
+
+        <Separator
+          v-if="index < items.length - 1"
+          :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
+          :orientation="props.orientation"
+        />
+      </div>
+
+      <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+        <div v-if="item.date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
+          <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
+            {{ item.date }}
+          </slot>
+        </div>
+        <div v-if="item.title || !!slots.title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
+          <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
+            {{ item.title }}
+          </slot>
+        </div>
+        <div v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+          <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
+            {{ item.description }}
+          </slot>
+        </div>
+      </div>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Toast.vue

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

package/dist/runtime/components/Toaster.vue

@@ -67,18 +67,18 @@ function getOffset(index) {
 </script>
 
 <template>
-  <ToastProvider :swipe-direction="swipeDirection" v-bind="providerProps">
-    <slot />
-
-    <UToast
-      v-for="(toast, index) of toasts"
-      :key="toast.id"
-      ref="refs"
-      :progress="progress"
-      v-bind="omit(toast, ['id', 'close'])"
-      :close="toast.close"
-      :data-expanded="expanded"
-      :data-front="!expanded && index === toasts.length - 1"
+  <ToastProvider :swipe-direction="swipeDirection" v-bind="providerProps">
+    <slot />
+
+    <UToast
+      v-for="(toast, index) of toasts"
+      :key="toast.id"
+      ref="refs"
+      :progress="progress"
+      v-bind="omit(toast, ['id', 'close'])"
+      :close="toast.close"
+      :data-expanded="expanded"
+      :data-front="!expanded && index === toasts.length - 1"
       :style="{
   '--index': index - toasts.length + toasts.length,
   '--before': toasts.length - 1 - index,
@@ -86,26 +86,26 @@ 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, toast.onClick ? 'cursor-pointer' : void 0] })"
-      @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] })"
+}"
+      :class="ui.base({ class: [props.ui?.base, toast.onClick ? 'cursor-pointer' : void 0] })"
+      @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] })"
         :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>
-  </ToastProvider>
+}"
+        @mouseenter="hovered = true"
+        @mouseleave="hovered = false"
+      />
+    </ToastPortal>
+  </ToastProvider>
 </template>

package/dist/runtime/components/Tooltip.vue

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

package/dist/runtime/components/Tree.vue

@@ -58,64 +58,64 @@ const defaultExpanded = computed(
 </script>
 
 <template>
-  <DefineTreeTemplate v-slot="{ items, level }">
-    <li
-      v-for="(item, index) in items"
-      :key="`${level}-${index}`"
-      :class="level > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
-    >
-      <TreeItem
-        v-slot="{ isExpanded, isSelected }"
-        as-child
-        :level="level"
-        :value="item"
-        @toggle="item.onToggle"
-        @select="item.onSelect"
-      >
-        <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>
-            </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>
-
-        <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })">
-          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
-        </ul>
-      </TreeItem>
-    </li>
-  </DefineTreeTemplate>
-
-  <TreeRoot
-    v-bind="rootProps"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :get-key="getItemValue"
-    :default-expanded="defaultExpanded"
-    :selection-behavior="selectionBehavior"
-  >
-    <ReuseTreeTemplate :items="items" :level="0" />
-  </TreeRoot>
+  <DefineTreeTemplate v-slot="{ items, level }">
+    <li
+      v-for="(item, index) in items"
+      :key="`${level}-${index}`"
+      :class="level > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
+    >
+      <TreeItem
+        v-slot="{ isExpanded, isSelected }"
+        as-child
+        :level="level"
+        :value="item"
+        @toggle="item.onToggle"
+        @select="item.onSelect"
+      >
+        <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>
+            </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>
+
+        <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })">
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </DefineTreeTemplate>
+
+  <TreeRoot
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :get-key="getItemValue"
+    :default-expanded="defaultExpanded"
+    :selection-behavior="selectionBehavior"
+  >
+    <ReuseTreeTemplate :items="items" :level="0" />
+  </TreeRoot>
 </template>