@nuxt/ui 2.11.0 → 2.12.0

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

@@ -22,11 +22,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     attrs: import("vue").ComputedRef<Pick<{
@@ -55,15 +55,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
     size: BadgeSize;
-    ui: Partial<any>;
+    ui: any;
     color: any;
     class: any;
     label: string | number;

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

@@ -5,7 +5,7 @@
     </slot>
 
     <slot>
-      <span v-if="label" :class="[truncate ? 'text-left break-all line-clamp-1' : '']">
+      <span v-if="label" :class="[truncate ? ui.truncate : '']">
         {{ label }}
       </span>
     </slot>
@@ -116,11 +116,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props, { slots }) {
@@ -143,7 +143,7 @@ export default defineComponent({
         ui.value.gap[size.value],
         props.padded && ui.value[isSquare.value ? "square" : "padding"][size.value],
         variant?.replaceAll("{color}", props.color),
-        props.block ? "w-full flex justify-center items-center" : "inline-flex items-center"
+        props.block ? ui.value.block : ui.value.inline
       ), props.class);
     });
     const leadingIconName = computed(() => {
@@ -162,17 +162,19 @@ export default defineComponent({
       return twJoin(
         ui.value.icon.base,
         ui.value.icon.size[size.value],
-        props.loading && "animate-spin"
+        props.loading && ui.value.icon.loading
       );
     });
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
         ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && "animate-spin"
+        props.loading && !isLeading.value && ui.value.icon.loading
       );
     });
     return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
       attrs,
       isLeading,
       isTrailing,

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

@@ -74,13 +74,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
+    ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
@@ -166,19 +167,20 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
     size: ButtonSize;
-    ui: Partial<any>;
+    ui: any;
     truncate: boolean;
     icon: string;
     color: any;
     type: string;
+    leading: boolean;
     class: any;
     label: string;
     loading: boolean;
@@ -190,7 +192,6 @@ declare const _default: import("vue").DefineComponent<{
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
-    leading: boolean;
     square: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/ButtonGroup.d.ts

@@ -13,11 +13,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
@@ -34,16 +34,16 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
     orientation: "horizontal" | "vertical";
     size: ButtonSize;
-    ui: Partial<any>;
+    ui: any;
     class: any;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/ButtonGroup.mjs

@@ -27,11 +27,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props, { slots }) {
@@ -44,20 +44,7 @@ export default defineComponent({
         ui.value.shadow
       ), props.class);
     });
-    const rounded = computed(() => {
-      const roundedMap = {
-        "rounded-none": { horizontal: { start: "rounded-s-none", end: "rounded-e-none" }, vertical: { start: "rounded-t-none", end: "rounded-b-none" } },
-        "rounded-sm": { horizontal: { start: "rounded-s-sm", end: "rounded-e-sm" }, vertical: { start: "rounded-t-sm", end: "rounded-b-sm" } },
-        rounded: { horizontal: { start: "rounded-s", end: "rounded-e" }, vertical: { start: "rounded-t", end: "rounded-b" } },
-        "rounded-md": { horizontal: { start: "rounded-s-md", end: "rounded-e-md" }, vertical: { start: "rounded-t-md", end: "rounded-b-md" } },
-        "rounded-lg": { horizontal: { start: "rounded-s-lg", end: "rounded-e-lg" }, vertical: { start: "rounded-t-lg", end: "rounded-b-lg" } },
-        "rounded-xl": { horizontal: { start: "rounded-s-xl", end: "rounded-e-xl" }, vertical: { start: "rounded-t-xl", end: "rounded-b-xl" } },
-        "rounded-2xl": { horizontal: { start: "rounded-s-2xl", end: "rounded-e-2xl" }, vertical: { start: "rounded-t-2xl", end: "rounded-b-2xl" } },
-        "rounded-3xl": { horizontal: { start: "rounded-s-3xl", end: "rounded-e-3xl" }, vertical: { start: "rounded-t-3xl", end: "rounded-b-3xl" } },
-        "rounded-full": { horizontal: { start: "rounded-s-full", end: "rounded-e-full" }, vertical: { start: "rounded-t-full", end: "rounded-b-full" } }
-      };
-      return roundedMap[ui.value.rounded][props.orientation];
-    });
+    const rounded = computed(() => ui.value.orientation[ui.value.rounded][props.orientation]);
     useProvideButtonGroup({ orientation: toRef(props, "orientation"), size: toRef(props, "size"), ui, rounded });
     return () => h("div", { class: wrapperClass.value, ...attrs.value }, children.value);
   }

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

@@ -56,11 +56,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

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

@@ -29,11 +29,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -71,20 +71,20 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
     size: "sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl";
-    ui: Partial<any>;
+    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,10 +1,11 @@
 <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"
       as="div"
       :disabled="disabled"
-      class="inline-flex w-full"
+      :class="ui.trigger"
       role="button"
       @mouseover="onMouseOver"
     >
@@ -18,24 +19,25 @@
     <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+          <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="omit(item, ['label', 'labelClass', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'class', 'click'])" 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="truncate">{{ 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,9 +55,10 @@
 </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";
@@ -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
@@ -104,14 +111,15 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      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
@@ -187,6 +234,8 @@ export default defineComponent({
       onMouseLeave,
       onClick,
       omit,
+      twMerge,
+      twJoin,
       NuxtLink
     };
   }

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import { twJoin } from 'tailwind-merge';
 import { omit } from '../../utils';
 import type { DropdownItem, PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
@@ -11,6 +12,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -29,11 +34,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -44,11 +49,25 @@ declare const _default: import("vue").DefineComponent<{
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     containerStyle: import("vue").ComputedRef<{
+        paddingTop?: undefined;
+        paddingBottom?: undefined;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
+    } | {
         paddingTop: string;
         paddingBottom: string;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
     } | {
+        paddingLeft: string;
+        paddingRight: string;
         paddingTop?: undefined;
         paddingBottom?: undefined;
+    } | {
+        paddingTop: string;
+        paddingBottom: string;
+        paddingLeft: string;
+        paddingRight: string;
     }>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
@@ -59,8 +78,10 @@ declare const _default: import("vue").DefineComponent<{
         isExternal: any;
     }) => void;
     omit: typeof omit;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+    twJoin: typeof twJoin;
     NuxtLink: string | import("vue").ConcreteComponent<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<DropdownItem[][]>;
         default: () => never[];
@@ -70,6 +91,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -88,18 +113,21 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
-}>>, {
-    ui: Partial<any>;
+}>> & {
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+}, {
+    ui: any;
     popper: PopperOptions;
     class: any;
     disabled: boolean;
     items: DropdownItem[][];
+    open: boolean;
     mode: "click" | "hover";
     openDelay: number;
     closeDelay: number;

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

@@ -28,11 +28,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

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

@@ -12,11 +12,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -36,15 +36,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
     size: KbdSize;
-    ui: Partial<any>;
+    ui: any;
     value: string;
     class: any;
 }, {}>;

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

@@ -21,7 +21,7 @@
       :role="disabled ? 'link' : undefined"
       :rel="rel"
       :target="target"
-      :class="active ? activeClass : resolveLinkClass(route, $route, { isActive, isExactActive })"
+      :class="active !== undefined ? (active ? activeClass : inactiveClass) : resolveLinkClass(route, $route, { isActive, isExactActive })"
       @click="(e) => !isExternal && navigate(e)"
     >
       <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
@@ -47,7 +47,7 @@ export default defineComponent({
     },
     active: {
       type: Boolean,
-      default: false
+      default: void 0
     },
     exact: {
       type: Boolean,

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

@@ -79,11 +79,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

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

@@ -36,11 +36,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -93,15 +93,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
     size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
-    ui: Partial<any>;
+    ui: any;
     value: number;
     icon: string;
     color: any;