@nuxt/ui 2.11.0 → 2.12.0

package/dist/runtime/components/navigation/Pagination.vue.d.ts

@@ -18,6 +18,10 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
         validate(value: any): boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<ButtonSize>;
         default: () => any;
@@ -61,11 +65,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>;
@@ -100,6 +104,10 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
         validate(value: any): boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<ButtonSize>;
         default: () => any;
@@ -143,18 +151,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
-    ui: Partial<any>;
+    ui: any;
     class: any;
+    disabled: boolean;
     max: number;
     divider: string;
     pageCount: number;

package/dist/runtime/components/navigation/Tabs.vue

@@ -86,11 +86,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "change"],
@@ -105,6 +105,9 @@ export default defineComponent({
       if (!tab) {
         return;
       }
+      if (!markerRef.value) {
+        return;
+      }
       markerRef.value.style.top = `${tab.offsetTop}px`;
       markerRef.value.style.left = `${tab.offsetLeft}px`;
       markerRef.value.style.width = `${tab.offsetWidth}px`;
@@ -114,16 +117,16 @@ export default defineComponent({
       selectedIndex.value = index;
       emit("change", index);
       if (props.modelValue !== void 0) {
-        emit("update:modelValue", index);
+        emit("update:modelValue", selectedIndex.value);
       }
-      calcMarkerSize(index);
+      calcMarkerSize(selectedIndex.value);
     }
     useResizeObserver(listRef, () => {
       calcMarkerSize(selectedIndex.value);
     });
     watch(() => props.modelValue, (value) => {
       selectedIndex.value = value;
-      calcMarkerSize(value);
+      calcMarkerSize(selectedIndex.value);
     });
     onMounted(() => calcMarkerSize(selectedIndex.value));
     return {

package/dist/runtime/components/navigation/Tabs.vue.d.ts

@@ -20,11 +20,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>;
@@ -34,8 +34,8 @@ declare const _default: import("vue").DefineComponent<{
     listRef: import("vue").Ref<HTMLElement | undefined>;
     itemRefs: import("vue").Ref<HTMLElement[]>;
     markerRef: import("vue").Ref<HTMLElement | undefined>;
-    selectedIndex: import("vue").Ref<number>;
-    onChange: (index: any) => void;
+    selectedIndex: import("vue").Ref<number | undefined>;
+    onChange: (index: number) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
@@ -56,18 +56,18 @@ 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: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
     orientation: "horizontal" | "vertical";
-    ui: Partial<any>;
+    ui: any;
     class: any;
     modelValue: number;
     items: TabItem[];

package/dist/runtime/components/navigation/VerticalNavigation.vue

@@ -1,47 +1,57 @@
 <template>
   <nav :class="ui.wrapper" v-bind="attrs">
-    <ULink
-      v-for="(link, index) of links"
-      v-slot="{ isActive }"
-      :key="index"
-      v-bind="omit(link, ['label', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
-      :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
-      :active-class="ui.active"
-      :inactive-class="ui.inactive"
-      @click="link.click"
-      @keyup.enter="$event.target.blur()"
-    >
-      <slot name="avatar" :link="link" :is-active="isActive">
-        <UAvatar
-          v-if="link.avatar"
-          v-bind="{ size: ui.avatar.size, ...link.avatar }"
-          :class="[ui.avatar.base]"
-        />
-      </slot>
-      <slot name="icon" :link="link" :is-active="isActive">
-        <UIcon
-          v-if="link.icon"
-          :name="link.icon"
-          :class="[ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive, link.iconClass]"
-        />
-      </slot>
-      <slot :link="link" :is-active="isActive">
-        <span v-if="link.label" :class="ui.label">{{ link.label }}</span>
-      </slot>
-      <slot name="badge" :link="link" :is-active="isActive">
-        <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
-          {{ link.badge }}
-        </span>
-      </slot>
-    </ULink>
+    <ul v-for="(section, sectionIndex) of linkSections" :key="`linkSection${sectionIndex}`">
+      <li v-for="(link, index) of section" :key="`linkSection${sectionIndex}-${index}`">
+        <ULink
+          v-slot="{ isActive }"
+          v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
+          :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
+          :active-class="ui.active"
+          :inactive-class="ui.inactive"
+          @click="link.click"
+          @keyup.enter="$event.target.blur()"
+        >
+          <slot name="avatar" :link="link" :is-active="isActive">
+            <UAvatar
+              v-if="link.avatar"
+              v-bind="{ size: ui.avatar.size, ...link.avatar }"
+              :class="[ui.avatar.base]"
+            />
+          </slot>
+          <slot name="icon" :link="link" :is-active="isActive">
+            <UIcon
+              v-if="link.icon"
+              :name="link.icon"
+              :class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)"
+            />
+          </slot>
+          <slot :link="link" :is-active="isActive">
+            <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">
+              <span v-if="isActive" class="sr-only">
+                Current page:
+              </span>
+              {{ link.label }}
+            </span>
+          </slot>
+          <slot name="badge" :link="link" :is-active="isActive">
+            <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
+              {{ link.badge }}
+            </span>
+          </slot>
+        </ULink>
+      </li>
+      <UDivider v-if="sectionIndex < linkSections.length - 1" :ui="ui.divider" />
+    </ul>
   </nav>
 </template>
 
 <script>
-import { toRef, defineComponent } from "vue";
+import { toRef, defineComponent, computed } from "vue";
+import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import ULink from "../elements/Link.vue";
+import UDivider from "../layout/Divider.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig, omit } from "../../utils";
 import appConfig from "#build/app.config";
@@ -51,7 +61,8 @@ export default defineComponent({
   components: {
     UIcon,
     UAvatar,
-    ULink
+    ULink,
+    UDivider
   },
   inheritAttrs: false,
   props: {
@@ -61,20 +72,26 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {
     const { ui, attrs } = useUI("verticalNavigation", toRef(props, "ui"), config, toRef(props, "class"));
+    const linkSections = computed(() => {
+      return Array.isArray(props.links[0]) ? props.links : [props.links];
+    });
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      omit
+      omit,
+      linkSections,
+      twMerge,
+      twJoin
     };
   }
 });

package/dist/runtime/components/navigation/VerticalNavigation.vue.d.ts

@@ -1,18 +1,19 @@
 import type { PropType } from 'vue';
+import { twJoin } from 'tailwind-merge';
 import { omit } from '../../utils';
 import type { VerticalNavigationLink } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     links: {
-        type: PropType<VerticalNavigationLink[]>;
+        type: PropType<VerticalNavigationLink[] | VerticalNavigationLink[][]>;
         default: () => never[];
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -20,22 +21,25 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     omit: typeof omit;
+    linkSections: import("vue").ComputedRef<VerticalNavigationLink[][]>;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+    twJoin: typeof twJoin;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     links: {
-        type: PropType<VerticalNavigationLink[]>;
+        type: PropType<VerticalNavigationLink[] | VerticalNavigationLink[][]>;
         default: () => never[];
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
-    links: VerticalNavigationLink[];
+    links: VerticalNavigationLink[] | VerticalNavigationLink[][];
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/ContextMenu.vue

@@ -2,7 +2,8 @@
   <div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrs">
     <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)" />
+
         <div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
           <slot />
         </div>
@@ -39,11 +40,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "close"],

package/dist/runtime/components/overlays/ContextMenu.vue.d.ts

@@ -15,11 +15,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>;
@@ -45,17 +45,17 @@ 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: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: Partial<any>;
+    ui: any;
     popper: PopperOptions;
     class: any;
     modelValue: boolean;

package/dist/runtime/components/overlays/Modal.vue

@@ -14,10 +14,7 @@
                 ui.background,
                 ui.ring,
                 ui.shadow,
-                fullscreen ? 'w-screen' : ui.width,
-                fullscreen ? 'h-screen' : ui.height,
-                fullscreen ? 'rounded-none' : ui.rounded,
-                fullscreen ? 'm-0' : ui.margin
+                fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin],
               ]"
             >
               <slot />
@@ -72,11 +69,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "close"],

package/dist/runtime/components/overlays/Modal.vue.d.ts

@@ -26,11 +26,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>;
@@ -67,22 +67,22 @@ 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: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: Partial<any>;
+    ui: any;
+    transition: boolean;
     class: any;
     modelValue: boolean;
     appear: boolean;
     overlay: boolean;
-    transition: boolean;
     preventClose: boolean;
     fullscreen: boolean;
 }, {}>;

package/dist/runtime/components/overlays/Notification.vue

@@ -12,7 +12,7 @@
           <UIcon v-if="icon" :name="icon" :class="iconClass" />
           <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
-          <div class="w-0 flex-1">
+          <div :class="ui.inner">
             <p :class="ui.title">
               <slot name="title" :title="title">
                 {{ title }}
@@ -25,15 +25,15 @@
             </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="onAction(action)" />
+              <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="onAction(action)" />
+              <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="onClose" />
+            <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="onClose" />
           </div>
         </div>
         <div v-if="timeout" :class="progressClass" :style="progressStyle" />
@@ -107,11 +107,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["close"],
@@ -122,7 +122,7 @@ export default defineComponent({
     const wrapperClass = computed(() => {
       return twMerge(twJoin(
         ui.value.wrapper,
-        ui.value.background,
+        ui.value.background?.replaceAll("{color}", props.color),
         ui.value.rounded,
         ui.value.shadow
       ), props.class);

package/dist/runtime/components/overlays/Notification.vue.d.ts

@@ -44,11 +44,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>;
@@ -110,16 +110,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: () => {};
     };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: Partial<any>;
+    ui: any;
     description: string;
     icon: string;
     avatar: Avatar;

package/dist/runtime/components/overlays/Notifications.vue

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

package/dist/runtime/components/overlays/Notifications.vue.d.ts

@@ -3,11 +3,11 @@ import type { Notification } from '../../types';
 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>;
@@ -36,14 +36,14 @@ declare const _default: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
 }, {}>;
 export default _default;