@eslamdevui/ui 3.2.0-beta.1 → 3.2.0-beta.2

package/dist/runtime/components/DashboardSearchButton.vue

@@ -3,14 +3,15 @@ import theme from "#build/ui/dashboard-search-button";
 </script>
 
 <script setup>
-import { computed } from "vue";
+import { computed, toRef } from "vue";
 import { useForwardProps } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-import { omit } from "@nuxt/ui/utils";
+import { defu } from "defu";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import UTooltip from "./Tooltip.vue";
 import { useLocalePro } from "../composables/useLocalePro";
 import { useDashboard } from "../utils/dashboard";
-import { transformUI } from "../utils";
+import { transformUI, omit } from "../utils";
 import { tv } from "../utils/tv";
 const props = defineProps({
   icon: { type: String, required: false },
@@ -19,54 +20,75 @@ const props = defineProps({
   variant: { type: null, required: false },
   size: { type: null, required: false },
   collapsed: { type: Boolean, required: false, default: false },
+  tooltip: { type: [Boolean, Object], required: false, default: false },
   kbds: { type: Array, required: false, default: () => ["meta", "k"] },
   ui: { type: void 0, required: false },
   class: { type: null, required: false }
 });
-defineSlots();
-const proxySlots = omit(defineSlots(), ["trailing"]);
-const rootProps = useForwardProps(reactivePick(props, "color", "size", "variant"));
-const { t } = useLocalePro();
+const slots = defineSlots();
+const [DefineButtonTemplate, ReuseButtonTemplate] = createReusableTemplate();
+const proxySlots = omit(slots, ["trailing"]);
 const appConfig = useAppConfig();
+const { t } = useLocalePro();
 const { toggleSearch } = useDashboard();
-const dashboardSearchButtonUI = computed(
+const labelText = computed(() => props.label || t("dashboardSearchButton.label"));
+const uiPro = computed(
   () => tv({
     extend: tv(theme),
     ...appConfig.ui?.dashboardSearchButton
-  })
+  })()
 );
+const tooltipProps = toRef(
+  () => defu(
+    typeof props.tooltip === "boolean" ? {} : props.tooltip,
+    { delayDuration: 0, content: { side: "right" } }
+  )
+);
+const rootProps = useForwardProps(reactivePick(props, "color", "size"));
 </script>
 
 <template>
-  <UButton
-    :icon="props.icon || appConfig.ui.icons.search"
-    :label="props.label || t('dashboardSearchButton.label')"
-    v-bind="{
-  ...rootProps,
-  ...props.collapsed ? { 'square': true, 'label': void 0, 'aria-label': props.label || t('dashboardSearchButton.label') } : {}
-}"
-    :variant="props.variant || (props.collapsed ? 'ghost' : 'outline')"
-    :class="dashboardSearchButtonUI.base({ class: [props.ui?.base, props.class] })"
-    :ui="transformUI(dashboardSearchButtonUI, props.ui)"
-    @click="toggleSearch"
-  >
-    <template v-for="(_, name) in proxySlots" #[name]="slotData">
-      <slot :name="name" v-bind="slotData" />
-    </template>
-
-    <template v-if="!props.collapsed" #trailing>
-      <div :class="dashboardSearchButtonUI.trailing({ class: props.ui?.trailing })">
-        <slot name="trailing">
-          <template v-if="props.kbds?.length">
-            <UKbd
-              v-for="(kbd, idx) in props.kbds"
-              :key="idx"
-              variant="subtle"
-              v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
-            />
-          </template>
-        </slot>
-      </div>
-    </template>
-  </UButton>
+  <DefineButtonTemplate>
+    <UButton
+      :icon="props.icon || appConfig.ui.icons.search"
+      :label="props.collapsed ? void 0 : labelText"
+      :variant="props.variant || (props.collapsed ? 'ghost' : 'outline')"
+      :aria-label="props.collapsed ? labelText : void 0"
+      :square="props.collapsed"
+      :class="uiPro.base({ class: [props.ui?.base, props.class] })"
+      :ui="transformUI(uiPro, props.ui)"
+      v-bind="rootProps"
+      @click="toggleSearch"
+    >
+      <template #default="slotProps">
+        <template v-for="(_, name) in proxySlots" :key="name">
+          <slot :name="name" v-bind="slotProps" />
+        </template>
+      </template>
+
+      <template v-if="!props.collapsed" #trailing>
+        <div :class="uiPro.trailing({ class: props.ui?.trailing })">
+          <slot name="trailing">
+            <template v-if="props.kbds?.length">
+              <UKbd
+                v-for="(kbd, index) in props.kbds"
+                :key="index"
+                variant="subtle"
+                v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
+              />
+            </template>
+          </slot>
+        </div>
+      </template>
+    </UButton>
+  </DefineButtonTemplate>
+
+  <UTooltip
+    v-if="props.collapsed && props.tooltip"
+    :text="labelText"
+    v-bind="tooltipProps"
+  >
+    <ReuseButtonTemplate />
+  </UTooltip>
+  <ReuseButtonTemplate v-else />
 </template>

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

@@ -1,5 +1,5 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { ButtonProps, KbdProps, ComponentConfig } from '@nuxt/ui';
+import type { ButtonProps, KbdProps, ComponentConfig, TooltipProps } from '../types';
 import theme from '#build/ui/dashboard-search-button';
 export type DashboardSearchButton = ComponentConfig<typeof theme, AppConfig, 'dashboardSearchButton'>;
 export interface DashboardSearchButtonProps {
@@ -30,6 +30,11 @@ export interface DashboardSearchButtonProps {
      * @defaultValue false
      */
     collapsed?: boolean;
+    /**
+     * Display a tooltip on the button when is collapsed with the button label.
+     * This has priority over the global `tooltip` prop.
+     */
+    tooltip?: boolean | TooltipProps;
     /**
      * The keyboard keys to display in the button.
      * `{ variant: 'subtle' }`{lang="ts-type"}
@@ -41,6 +46,7 @@ export interface DashboardSearchButtonProps {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
     color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
     collapsed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;

package/dist/runtime/components/DashboardSidebar.vue

@@ -6,9 +6,9 @@ import theme from "#build/ui/dashboard-sidebar";
 import { ref, computed, toRef, useId, watch } from "vue";
 import { defu } from "defu";
 import { createReusableTemplate } from "@vueuse/core";
-import USlideover from "@nuxt/ui/components/Slideover.vue";
-import UModal from "@nuxt/ui/components/Modal.vue";
-import UDrawer from "@nuxt/ui/components/Drawer.vue";
+import USlideover from "./Slideover.vue";
+import UModal from "./Modal.vue";
+import UDrawer from "./Drawer.vue";
 import { useAppConfig, useRuntimeHook, useRoute } from "#imports";
 import { useResizable } from "../composables/useResizable";
 import { useDashboard } from "../utils/dashboard";
@@ -90,81 +90,81 @@ function toggleOpen() {
 </script>
 
 <template>
-  <DefineToggle>
-    <slot name="toggle" :open="open" :toggle="toggleOpen">
-      <UDashboardSidebarToggle
-        v-if="props.toggle"
-        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
-        :side="props.toggleSide"
-        :class="ui.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
-      />
-    </slot>
-  </DefineToggle>
-
-  <DefineHandle>
-    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart">
-      <UDashboardResizeHandle
-        v-if="props.resizable"
-        :aria-controls="id"
-        :class="ui.handle({ class: props.ui?.handle })"
-        @mousedown="onMouseDown"
-        @touchstart="onTouchStart"
-      />
-    </slot>
-  </DefineHandle>
-
-  <ReuseHandle v-if="props.side === 'right'" />
-
-  <div
-    :id="id"
-    ref="el"
-    :data-collapsed="isCollapsed"
-    :data-dragging="isDragging"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :style="{ '--width': `${size}${dashboardCtx.unit}` }"
-  >
-    <div v-if="$slots.header" :class="ui.header({ class: props.ui?.header })">
-      <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
-    </div>
-
-    <div :class="ui.body({ class: props.ui?.body })">
-      <slot :collapsed="isCollapsed" :collapse="collapse" />
-    </div>
-
-    <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-      <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
-    </div>
-  </div>
-
-  <ReuseHandle v-if="props.side === 'left'" />
-
-  <Menu
-    v-model:open="open"
-    v-bind="menuProps"
+  <DefineToggle>
+    <slot name="toggle" :open="open" :toggle="toggleOpen">
+      <UDashboardSidebarToggle
+        v-if="props.toggle"
+        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
+        :side="props.toggleSide"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
+      />
+    </slot>
+  </DefineToggle>
+
+  <DefineHandle>
+    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart">
+      <UDashboardResizeHandle
+        v-if="props.resizable"
+        :aria-controls="id"
+        :class="ui.handle({ class: props.ui?.handle })"
+        @mousedown="onMouseDown"
+        @touchstart="onTouchStart"
+      />
+    </slot>
+  </DefineHandle>
+
+  <ReuseHandle v-if="props.side === 'right'" />
+
+  <div
+    :id="id"
+    ref="el"
+    :data-collapsed="isCollapsed"
+    :data-dragging="isDragging"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="{ '--width': `${size}${dashboardCtx.unit}` }"
+  >
+    <div v-if="$slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+
+    <div :class="ui.body({ class: props.ui?.body })">
+      <slot :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+
+    <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+  </div>
+
+  <ReuseHandle v-if="props.side === 'left'" />
+
+  <Menu
+    v-model:open="open"
+    v-bind="menuProps"
     :ui="{
   overlay: ui.overlay({ class: props.ui?.overlay }),
   content: ui.content({ class: props.ui?.content })
-}"
-  >
-    <template #content>
-      <slot name="content">
-        <div
-          v-if="$slots.header || props.mode !== 'drawer'"
-          :class="ui.header({ class: props.ui?.header, menu: true })"
-        >
-          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'left'" />
-          <slot name="header" />
-          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'right'" />
-        </div>
-
-        <div :class="ui.body({ class: props.ui?.body, menu: true })">
-          <slot />
-        </div>
-
-        <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
-          <slot name="footer" />
-        </div>
-      </slot>
-    </template>
-  </Menu>
+}"
+  >
+    <template #content>
+      <slot name="content">
+        <div
+          v-if="$slots.header || props.mode !== 'drawer'"
+          :class="ui.header({ class: props.ui?.header, menu: true })"
+        >
+          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'left'" />
+          <slot name="header" />
+          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'right'" />
+        </div>
+
+        <div :class="ui.body({ class: props.ui?.body, menu: true })">
+          <slot />
+        </div>
+
+        <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
+          <slot name="footer" />
+        </div>
+      </slot>
+    </template>
+  </Menu>
 </template>

package/dist/runtime/components/DashboardSidebarCollapse.vue

@@ -32,15 +32,15 @@ function toggleCollapse() {
 </script>
 
 <template>
-  <UButton
-    v-bind="rootProps"
+  <UButton
+    v-bind="rootProps"
     :aria-label="
   sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse')
-"
+"
     :icon="
   sidebarCollapsed ? appConfig.ui.icons.panelOpen : appConfig.ui.icons.panelClose
-"
-    :class="ui({ class: props.class })"
-    @click="toggleCollapse"
-  />
+"
+    :class="ui({ class: props.class })"
+    @click="toggleCollapse"
+  />
 </template>

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

@@ -1,4 +1,4 @@
-import type { ButtonProps } from '@nuxt/ui';
+import type { ButtonProps } from '../types';
 export interface DashboardSidebarCollapseProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
     side?: 'left' | 'right';
     /** @defaultValue 'neutral' */

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -14,30 +14,27 @@ const props = defineProps({
   side: { type: String, required: false },
   color: { type: null, required: false },
   variant: { type: null, required: false },
-  class: { type: null, required: false },
-  ui: { type: null, required: false },
-  as: { type: null, required: false },
-  size: { type: null, required: false },
-  disabled: { type: Boolean, required: false }
+  class: { type: null, required: false }
 });
 const rootProps = useForwardProps(reactivePick(props, "color", "variant", "size", "as", "disabled", "ui"));
 const { t } = useLocalePro();
 const appConfig = useAppConfig();
 const { sidebarOpen, toggleSidebar } = useDashboard();
-const uiPro = computed(
-  () => tv({
-    extend: tv(theme),
+const ui = computed(() => {
+  const baseTheme = typeof theme === "string" ? { base: theme } : theme;
+  return tv({
+    extend: tv(baseTheme),
     ...appConfig.ui?.dashboardSidebarToggle
-  })()
-);
+  });
+});
 </script>
 
 <template>
-  <UButton
-    v-bind="rootProps"
-    :aria-label="sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open')"
-    :icon="sidebarOpen ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
-    :class="uiPro({ class: props.class, side: props.side })"
-    @click="toggleSidebar"
-  />
+  <UButton
+    v-bind="rootProps"
+    :aria-label="sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open')"
+    :icon="sidebarOpen ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
+    :class="typeof ui === 'function' ? ui({ class: props.class, side: props.side }) : ui"
+    @click="toggleSidebar"
+  />
 </template>

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

@@ -1,8 +1,7 @@
-import type { AppConfig } from '@nuxt/schema';
-import type { ButtonProps, ComponentConfig } from '../types';
-import theme from '#build/ui/dashboard-sidebar-toggle';
-export type DashboardSidebarToggle = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebarToggle'>;
-export interface DashboardSidebarToggleProps extends Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+import type { ButtonProps } from '@nuxt/ui';
+export interface DashboardSidebarToggleProps extends 
+/** @vue-ignore */
+Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
     side?: 'left' | 'right';
     /**
      * @defaultValue 'neutral'
@@ -13,7 +12,6 @@ export interface DashboardSidebarToggleProps extends Pick<ButtonProps, 'as' | 's
      */
     variant?: ButtonProps['variant'];
     class?: any;
-    ui?: DashboardSidebarToggle['slots'];
 }
 declare const _default: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Drawer.vue

@@ -54,59 +54,59 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
 </script>
 
 <template>
-  <DrawerRoot v-bind="rootProps">
-    <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
-      <slot />
-    </DrawerTrigger>
-
-    <DrawerPortal v-bind="portalProps">
-      <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
-
-      <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
-        <DrawerHandle v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
-
-        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
-          <DrawerTitle v-if="title || !!slots.title">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </DrawerTitle>
-
-          <DrawerDescription v-if="description || !!slots.description">
-            <slot name="description">
-              {{ description }}
-            </slot>
-          </DrawerDescription>
-        </VisuallyHidden>
-
-        <slot name="content">
-          <div :class="ui.container({ class: props.ui?.container })">
-            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
-              <slot name="header">
-                <DrawerTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
-                  <slot name="title">
-                    {{ title }}
-                  </slot>
-                </DrawerTitle>
-
-                <DrawerDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-                  <slot name="description">
-                    {{ description }}
-                  </slot>
-                </DrawerDescription>
-              </slot>
-            </div>
-
-            <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
-              <slot name="body" />
-            </div>
-
-            <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-              <slot name="footer" />
-            </div>
-          </div>
-        </slot>
-      </DrawerContent>
-    </DrawerPortal>
-  </DrawerRoot>
+  <DrawerRoot v-bind="rootProps">
+    <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot />
+    </DrawerTrigger>
+
+    <DrawerPortal v-bind="portalProps">
+      <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+
+      <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <DrawerHandle v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
+
+        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
+          <DrawerTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DrawerTitle>
+
+          <DrawerDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DrawerDescription>
+        </VisuallyHidden>
+
+        <slot name="content">
+          <div :class="ui.container({ class: props.ui?.container })">
+            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+              <slot name="header">
+                <DrawerTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DrawerTitle>
+
+                <DrawerDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DrawerDescription>
+              </slot>
+            </div>
+
+            <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+              <slot name="body" />
+            </div>
+
+            <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+              <slot name="footer" />
+            </div>
+          </div>
+        </slot>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
 </template>

package/dist/runtime/components/DropdownMenu.vue

@@ -41,28 +41,28 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
 </script>
 
 <template>
-  <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
-    <DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="disabled">
-      <slot :open="open" />
-    </DropdownMenuTrigger>
-
-    <UDropdownMenuContent
-      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
-      :ui="ui"
-      :ui-override="props.ui"
-      v-bind="contentProps"
-      :items="items"
-      :portal="portal"
-      :label-key="labelKey"
-      :checked-icon="checkedIcon"
-      :loading-icon="loadingIcon"
-      :external-icon="externalIcon"
-    >
-      <template v-for="(_, name) in proxySlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-
-      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
-    </UDropdownMenuContent>
-  </DropdownMenuRoot>
+  <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
+    <DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="disabled">
+      <slot :open="open" />
+    </DropdownMenuTrigger>
+
+    <UDropdownMenuContent
+      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+      :ui="ui"
+      :ui-override="props.ui"
+      v-bind="contentProps"
+      :items="items"
+      :portal="portal"
+      :label-key="labelKey"
+      :checked-icon="checkedIcon"
+      :loading-icon="loadingIcon"
+      :external-icon="externalIcon"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+    </UDropdownMenuContent>
+  </DropdownMenuRoot>
 </template>