@eslamdevui/ui 3.2.0-beta.2 → 3.2.0

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>

package/dist/runtime/components/color-mode/ColorModeAvatar.vue

@@ -11,6 +11,6 @@ defineProps({
 </script>
 
 <template>
-  <UAvatar :src="light" class="dark:hidden" v-bind="$attrs" />
-  <UAvatar :src="dark" class="hidden dark:block" v-bind="$attrs" />
+  <UAvatar :src="light" class="dark:hidden" v-bind="$attrs" />
+  <UAvatar :src="dark" class="hidden dark:block" v-bind="$attrs" />
 </template>

package/dist/runtime/components/color-mode/ColorModeButton.vue

@@ -26,20 +26,20 @@ const isDark = computed({
 </script>
 
 <template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <UButton
-      :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
-      :color="color"
-      :variant="variant"
-      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
-      v-bind="$attrs"
-      @click="isDark = !isDark"
-    />
-
-    <template #fallback>
-      <slot name="fallback">
-        <div class="size-8" />
-      </slot>
-    </template>
-  </ClientOnly>
+  <ClientOnly v-if="!colorMode?.forced">
+    <UButton
+      :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
+      :color="color"
+      :variant="variant"
+      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+      v-bind="$attrs"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <slot name="fallback">
+        <div class="size-8" />
+      </slot>
+    </template>
+  </ClientOnly>
 </template>

package/dist/runtime/components/color-mode/ColorModeImage.vue

@@ -12,6 +12,6 @@ defineProps({
 </script>
 
 <template>
-  <component :is="ImageComponent" :src="light" class="dark:hidden" v-bind="$attrs" />
-  <component :is="ImageComponent" :src="dark" class="hidden dark:block" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="light" class="dark:hidden" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="dark" class="hidden dark:block" v-bind="$attrs" />
 </template>

package/dist/runtime/components/color-mode/ColorModeSelect.vue

@@ -27,23 +27,23 @@ const preference = computed({
 </script>
 
 <template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <USelectMenu
-      v-model="preference"
-      :search-input="false"
-      :icon="preference?.icon"
-      v-bind="$attrs"
-      :items="items"
-    />
-    <template #fallback>
-      <USelectMenu
-        :search-input="false"
-        :icon="items[0]?.icon"
-        v-bind="$attrs"
-        :model-value="items[0]"
-        :items="items"
-        disabled
-      />
-    </template>
-  </ClientOnly>
+  <ClientOnly v-if="!colorMode?.forced">
+    <USelectMenu
+      v-model="preference"
+      :search-input="false"
+      :icon="preference?.icon"
+      v-bind="$attrs"
+      :items="items"
+    />
+    <template #fallback>
+      <USelectMenu
+        :search-input="false"
+        :icon="items[0]?.icon"
+        v-bind="$attrs"
+        :model-value="items[0]"
+        :items="items"
+        disabled
+      />
+    </template>
+  </ClientOnly>
 </template>

package/dist/runtime/components/color-mode/ColorModeSwitch.vue

@@ -22,23 +22,23 @@ const isDark = computed({
 </script>
 
 <template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <USwitch
-      v-model="isDark"
-      :checked-icon="appConfig.ui.icons.dark"
-      :unchecked-icon="appConfig.ui.icons.light"
-      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
-      v-bind="$attrs"
-    />
-
-    <template #fallback>
-      <USwitch
-        :checked-icon="appConfig.ui.icons.dark"
-        :unchecked-icon="appConfig.ui.icons.light"
-        :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
-        v-bind="$attrs"
-        disabled
-      />
-    </template>
-  </ClientOnly>
+  <ClientOnly v-if="!colorMode?.forced">
+    <USwitch
+      v-model="isDark"
+      :checked-icon="appConfig.ui.icons.dark"
+      :unchecked-icon="appConfig.ui.icons.light"
+      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+      v-bind="$attrs"
+    />
+
+    <template #fallback>
+      <USwitch
+        :checked-icon="appConfig.ui.icons.dark"
+        :unchecked-icon="appConfig.ui.icons.light"
+        :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+        v-bind="$attrs"
+        disabled
+      />
+    </template>
+  </ClientOnly>
 </template>