@nuxt/ui 2.11.1 → 2.12.1

package/dist/runtime/components/data/Table.vue.d.ts

@@ -13,7 +13,6 @@ declare const _default: import("vue").DefineComponent<{
     rows: {
         type: PropType<{
             [key: string]: any;
-            click?: Function | undefined;
         }[]>;
         default: () => never[];
     };
@@ -22,6 +21,7 @@ declare const _default: import("vue").DefineComponent<{
             [key: string]: any;
             key: string;
             sortable?: boolean | undefined;
+            sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
             direction?: "asc" | "desc" | undefined;
             class?: string | undefined;
         }[]>;
@@ -38,6 +38,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => {};
     };
+    sortMode: {
+        type: PropType<"auto" | "manual">;
+        default: string;
+    };
     sortButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -81,20 +85,20 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    sort: import("vue").Ref<{
-        direction: string;
+    sort: import("vue").WritableComputedRef<{
         column: string;
+        direction: 'asc' | 'desc';
     }>;
     columns: import("vue").ComputedRef<{
         [key: string]: any;
         key: string;
         sortable?: boolean | undefined;
+        sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
         direction?: "asc" | "desc" | undefined;
         class?: string | undefined;
     }[]>;
     rows: import("vue").ComputedRef<{
         [key: string]: any;
-        click?: Function | undefined;
     }[]>;
     selected: import("vue").WritableComputedRef<unknown[]>;
     indeterminate: import("vue").ComputedRef<boolean>;
@@ -120,7 +124,6 @@ declare const _default: import("vue").DefineComponent<{
     rows: {
         type: PropType<{
             [key: string]: any;
-            click?: Function | undefined;
         }[]>;
         default: () => never[];
     };
@@ -129,6 +132,7 @@ declare const _default: import("vue").DefineComponent<{
             [key: string]: any;
             key: string;
             sortable?: boolean | undefined;
+            sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
             direction?: "asc" | "desc" | undefined;
             class?: string | undefined;
         }[]>;
@@ -145,6 +149,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => {};
     };
+    sortMode: {
+        type: PropType<"auto" | "manual">;
+        default: string;
+    };
     sortButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -192,21 +200,22 @@ declare const _default: import("vue").DefineComponent<{
         direction: 'asc' | 'desc';
     };
     ui: any;
-    class: any;
-    modelValue: unknown[];
-    by: string | Function;
-    rows: {
-        [key: string]: any;
-        click?: Function | undefined;
-    }[];
     columns: {
         [key: string]: any;
         key: string;
         sortable?: boolean | undefined;
+        sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
         direction?: "asc" | "desc" | undefined;
         class?: string | undefined;
     }[];
+    class: any;
+    modelValue: unknown[];
+    by: string | Function;
+    rows: {
+        [key: string]: any;
+    }[];
     columnAttribute: string;
+    sortMode: "auto" | "manual";
     sortButton: Button;
     sortAscIcon: string;
     sortDescIcon: string;

package/dist/runtime/components/elements/Accordion.vue

@@ -108,20 +108,24 @@ export default defineComponent({
         }
       });
     }
-    function onEnter(el, done) {
+    function onEnter(_el, done) {
+      const el = _el;
       el.style.height = "0";
       el.offsetHeight;
       el.style.height = el.scrollHeight + "px";
       el.addEventListener("transitionend", done, { once: true });
     }
-    function onBeforeLeave(el) {
+    function onBeforeLeave(_el) {
+      const el = _el;
       el.style.height = el.scrollHeight + "px";
       el.offsetHeight;
     }
-    function onAfterEnter(el) {
+    function onAfterEnter(_el) {
+      const el = _el;
       el.style.height = "auto";
     }
-    function onLeave(el, done) {
+    function onLeave(_el, done) {
+      const el = _el;
       el.style.height = "0";
       el.addEventListener("transitionend", done, { once: true });
     }

package/dist/runtime/components/elements/Accordion.vue.d.ts

@@ -42,10 +42,10 @@ declare const _default: import("vue").DefineComponent<{
     }[]>;
     closeOthers: (currentIndex: number, e: Event) => void;
     omit: typeof omit;
-    onEnter: (el: HTMLElement, done: any) => void;
-    onBeforeLeave: (el: HTMLElement) => void;
-    onAfterEnter: (el: HTMLElement) => void;
-    onLeave: (el: HTMLElement, done: any) => void;
+    onEnter: (_el: Element, done: () => void) => void;
+    onBeforeLeave: (_el: Element) => void;
+    onAfterEnter: (_el: Element) => void;
+    onLeave: (_el: Element, done: () => void) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<AccordionItem[]>;

package/dist/runtime/components/elements/Alert.vue

@@ -17,12 +17,12 @@
         </p>
 
         <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
         </div>
       </div>
       <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
         <template v-if="!description && !$slots.description && actions.length">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
         </template>
 
         <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />
@@ -113,11 +113,17 @@ export default defineComponent({
         variant?.replaceAll("{color}", props.color)
       ), props.class);
     });
+    function onAction(action) {
+      if (action.click) {
+        action.click();
+      }
+    }
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
       alertClass,
+      onAction,
       twMerge
     };
   }

package/dist/runtime/components/elements/Alert.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar, Button, AlertVariant } from '../../types';
+import type { Avatar, Button, AlertVariant, AlertAction } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     title: {
         type: StringConstructor;
@@ -22,9 +22,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => Button;
     };
     actions: {
-        type: PropType<(Button & {
-            click?: Function | undefined;
-        })[]>;
+        type: PropType<AlertAction[]>;
         default: () => never[];
     };
     color: {
@@ -51,6 +49,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     alertClass: import("vue").ComputedRef<string>;
+    onAction: (action: AlertAction) => void;
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
@@ -74,9 +73,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => Button;
     };
     actions: {
-        type: PropType<(Button & {
-            click?: Function | undefined;
-        })[]>;
+        type: PropType<AlertAction[]>;
         default: () => never[];
     };
     color: {
@@ -105,9 +102,7 @@ declare const _default: import("vue").DefineComponent<{
     icon: string;
     avatar: Avatar;
     closeButton: Button;
-    actions: (Button & {
-        click?: Function | undefined;
-    })[];
+    actions: AlertAction[];
     color: any;
     class: any;
     variant: AlertVariant;

package/dist/runtime/components/elements/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="buttonClass" v-bind="attrs">
+  <ULink :type="type" :disabled="disabled || loading" :class="buttonClass" v-bind="{ ...linkProps, ...attrs }">
     <slot name="leading" :disabled="disabled" :loading="loading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
     </slot>
@@ -22,7 +22,7 @@ import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import ULink from "../elements/Link.vue";
 import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from "../../utils";
 import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { button } from "#ui/ui.config";
@@ -34,6 +34,7 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
+    ...nuxtLinkProps,
     type: {
       type: String,
       default: "button"
@@ -172,6 +173,7 @@ export default defineComponent({
         props.loading && !isLeading.value && ui.value.icon.loading
       );
     });
+    const linkProps = computed(() => getNuxtLinkProps(props));
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -183,7 +185,8 @@ export default defineComponent({
       leadingIconName,
       trailingIconName,
       leadingIconClass,
-      trailingIconClass
+      trailingIconClass,
+      linkProps
     };
   }
 });

package/dist/runtime/components/elements/Button.vue.d.ts

@@ -80,6 +80,58 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: () => {};
     };
+    to: {
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    href: {
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    target: {
+        readonly type: PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly default: undefined;
+    };
+    rel: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    noRel: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    prefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    noPrefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    activeClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    exactActiveClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    prefetchedClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    replace: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    ariaCurrentValue: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    external: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
 }, {
     ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
@@ -93,6 +145,7 @@ declare const _default: import("vue").DefineComponent<{
     trailingIconName: import("vue").ComputedRef<string | undefined>;
     leadingIconClass: import("vue").ComputedRef<string>;
     trailingIconClass: import("vue").ComputedRef<string>;
+    linkProps: import("vue").ComputedRef<{}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
         type: StringConstructor;
@@ -173,6 +226,58 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: () => {};
     };
+    to: {
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    href: {
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    target: {
+        readonly type: PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly default: undefined;
+    };
+    rel: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    noRel: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    prefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    noPrefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    activeClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    exactActiveClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    prefetchedClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    replace: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    ariaCurrentValue: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    external: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
 }>>, {
     size: ButtonSize;
     ui: any;
@@ -180,6 +285,8 @@ declare const _default: import("vue").DefineComponent<{
     icon: string;
     color: any;
     type: string;
+    leading: boolean;
+    replace: boolean;
     class: any;
     label: string;
     loading: boolean;
@@ -191,7 +298,18 @@ declare const _default: import("vue").DefineComponent<{
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
-    leading: boolean;
     square: boolean;
+    to: import("vue-router").RouteLocationRaw;
+    href: import("vue-router").RouteLocationRaw;
+    target: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null;
+    rel: string;
+    noRel: boolean;
+    prefetch: boolean;
+    noPrefetch: boolean;
+    activeClass: string;
+    exactActiveClass: string;
+    prefetchedClass: string;
+    ariaCurrentValue: string;
+    external: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/Chip.vue.d.ts

@@ -81,10 +81,10 @@ declare const _default: import("vue").DefineComponent<{
     size: "sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl";
     ui: any;
     color: any;
+    inset: boolean;
+    position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
     class: any;
     text: string | number;
-    position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
-    inset: boolean;
     show: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/Dropdown.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable-next-line vue/no-template-shadow -->
   <HMenu v-slot="{ open }" as="div" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HMenuButton
       ref="trigger"
@@ -19,23 +20,24 @@
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
+
           <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
             <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
-              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])" custom>
+              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="getNuxtLinkProps(item)" custom>
                 <HMenuItem v-slot="{ active, disabled: itemDisabled, close }" :disabled="item.disabled">
                   <component
                     :is="!!href ? 'a' : 'button'"
                     :href="!itemDisabled ? href : undefined"
                     :rel="rel"
                     :target="target"
-                    :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
+                    :class="twMerge(twJoin(ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled), item.class)"
                     @click="onClick($event, item, { href, navigate, close, isExternal })"
                   >
                     <slot :name="item.slot || 'item'" :item="item">
-                      <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
+                      <UIcon v-if="item.icon" :name="item.icon" :class="twMerge(twJoin(ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive), item.iconClass)" />
                       <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
 
-                      <span :class="ui.item.label">{{ item.label }}</span>
+                      <span :class="twMerge(ui.item.label, item.labelClass)">{{ item.label }}</span>
 
                       <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
                         <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
@@ -53,15 +55,16 @@
 </template>
 
 <script>
-import { defineComponent, ref, computed, toRef, onMounted, resolveComponent } from "vue";
+import { defineComponent, ref, computed, watch, toRef, onMounted, resolveComponent } from "vue";
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from "@headlessui/vue";
 import { defu } from "defu";
+import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import UKbd from "../elements/Kbd.vue";
 import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
-import { mergeConfig, omit } from "../../utils";
+import { mergeConfig, getNuxtLinkProps } from "../../utils";
 import appConfig from "#build/app.config";
 import { dropdown } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.dropdown, dropdown);
@@ -86,6 +89,10 @@ export default defineComponent({
       default: "click",
       validator: (value) => ["click", "hover"].includes(value)
     },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -111,7 +118,8 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  setup(props) {
+  emits: ["update:open"],
+  setup(props, { emit }) {
     const { ui, attrs } = useUI("dropdown", toRef(props, "ui"), config, toRef(props, "class"));
     const popper = computed(() => defu(props.mode === "hover" ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper));
     const [trigger, container] = usePopper(popper.value);
@@ -119,18 +127,41 @@ export default defineComponent({
     let openTimeout = null;
     let closeTimeout = null;
     onMounted(() => {
-      setTimeout(() => {
-        const menuProvides = trigger.value?.$.provides;
-        if (!menuProvides) {
-          return;
-        }
-        const menuProvidesSymbols = Object.getOwnPropertySymbols(menuProvides);
-        menuApi.value = menuProvidesSymbols.length && menuProvides[menuProvidesSymbols[0]];
-      }, 200);
+      const menuProvides = trigger.value?.$.provides;
+      if (!menuProvides) {
+        return;
+      }
+      const menuProvidesSymbols = Object.getOwnPropertySymbols(menuProvides);
+      menuApi.value = menuProvidesSymbols.length && menuProvides[menuProvidesSymbols[0]];
+      if (props.open) {
+        menuApi.value?.openMenu();
+      }
     });
     const containerStyle = computed(() => {
+      if (props.mode !== "hover") {
+        return {};
+      }
       const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
-      return props.mode === "hover" ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {};
+      const placement = popper.value.placement?.split("-")[0];
+      const padding = `${offsetDistance}px`;
+      if (placement === "top" || placement === "bottom") {
+        return {
+          paddingTop: padding,
+          paddingBottom: padding
+        };
+      } else if (placement === "left" || placement === "right") {
+        return {
+          paddingLeft: padding,
+          paddingRight: padding
+        };
+      } else {
+        return {
+          paddingTop: padding,
+          paddingBottom: padding,
+          paddingLeft: padding,
+          paddingRight: padding
+        };
+      }
     });
     function onMouseOver() {
       if (props.mode !== "hover" || !menuApi.value) {
@@ -173,6 +204,22 @@ export default defineComponent({
         close();
       }
     }
+    watch(() => props.open, (newValue, oldValue) => {
+      if (!menuApi.value)
+        return;
+      if (oldValue === void 0 || newValue === oldValue)
+        return;
+      if (newValue) {
+        menuApi.value.openMenu();
+      } else {
+        menuApi.value.closeMenu();
+      }
+    });
+    watch(() => menuApi.value?.menuState, (newValue, oldValue) => {
+      if (oldValue === void 0 || newValue === oldValue)
+        return;
+      emit("update:open", newValue === 0);
+    });
     const NuxtLink = resolveComponent("NuxtLink");
     return {
       // eslint-disable-next-line vue/no-dupe-keys
@@ -186,7 +233,9 @@ export default defineComponent({
       onMouseOver,
       onMouseLeave,
       onClick,
-      omit,
+      getNuxtLinkProps,
+      twMerge,
+      twJoin,
       NuxtLink
     };
   }