@nuxt/ui 2.9.0 → 2.11.0

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

@@ -0,0 +1,78 @@
+<template>
+  <nav aria-label="Breadcrumb" :class="ui.wrapper" v-bind="attrs">
+    <ol :class="ui.ol">
+      <li v-for="(link, index) in links" :key="index" :class="ui.li">
+        <ULink
+          as="span"
+          :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
+          v-bind="omit(link, ['label', 'icon', 'iconClass'])"
+          :aria-current="index === links.length - 1 ? 'page' : undefined"
+        >
+          <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
+            <UIcon
+              v-if="link.icon"
+              :name="link.icon"
+              :class="[ui.icon.base, index === links.length - 1 ? ui.icon.active : !!link.to ? ui.icon.inactive : '', link.iconClass]"
+            />
+          </slot>
+
+          <slot :link="link" :index="index" :is-active="index === links.length - 1">
+            {{ link.label }}
+          </slot>
+        </ULink>
+
+        <slot v-if="index < links.length - 1" name="divider">
+          <template v-if="divider">
+            <UIcon v-if="divider.startsWith('i-')" :name="divider" :class="ui.divider.base" role="presentation" />
+            <span v-else role="presentation">{{ divider }}</span>
+          </template>
+        </slot>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+import { defineComponent, toRef } from "vue";
+import UIcon from "../elements/Icon.vue";
+import ULink from "../elements/Link.vue";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig, omit } from "../../utils";
+import appConfig from "#build/app.config";
+import { breadcrumb } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.breadcrumb, breadcrumb);
+export default defineComponent({
+  components: {
+    UIcon,
+    ULink
+  },
+  inheritAttrs: false,
+  props: {
+    links: {
+      type: Array,
+      default: () => []
+    },
+    divider: {
+      type: String,
+      default: () => config.default.divider
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("breadcrumb", toRef(props, "ui"), config, toRef(props, "class"));
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      omit
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,50 @@
+import type { PropType } from 'vue';
+import { omit } from '../../utils';
+import type { BreadcrumbLink } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    links: {
+        type: PropType<BreadcrumbLink[]>;
+        default: () => never[];
+    };
+    divider: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    omit: typeof omit;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    links: {
+        type: PropType<BreadcrumbLink[]>;
+        default: () => never[];
+    };
+    divider: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>>, {
+    ui: Partial<any>;
+    class: any;
+    divider: string;
+    links: BreadcrumbLink[];
+}, {}>;
+export default _default;

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

@@ -181,7 +181,7 @@ export default defineComponent({
     const isLoading = ref(false);
     onMounted(() => {
       if (props.autoselect) {
-        activateFirstOption();
+        activateNextOption();
       }
     });
     onMounted(() => {
@@ -221,18 +221,25 @@ export default defineComponent({
       }
       for (const key in groupedCommands) {
         const group = props.groups.find((group2) => group2.key === key);
-        const commands2 = groupedCommands[key].slice(0, options.value.resultLimit).map((result) => {
+        let commands2 = groupedCommands[key].map((result) => {
           const { item, ...data } = result;
           return {
             ...item,
             ...data
           };
         });
-        groups2.push({ ...group, commands: commands2 });
+        if (group.filter && typeof group.filter === "function") {
+          commands2 = group.filter(query.value, commands2);
+        }
+        groups2.push({ ...group, commands: commands2.slice(0, options.value.resultLimit) });
       }
       for (const group of props.groups) {
         if (group.search && searchResults.value[group.key]?.length) {
-          groups2.push({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) });
+          let commands2 = searchResults.value[group.key] || [];
+          if (group.filter && typeof group.filter === "function") {
+            commands2 = group.filter(query.value, commands2);
+          }
+          groups2.push({ ...group, commands: commands2.slice(0, options.value.resultLimit) });
         }
       }
       return groups2;
@@ -247,12 +254,11 @@ export default defineComponent({
         searchResults.value[group.key] = await group.search(query.value);
       }));
       isLoading.value = false;
+      activateFirstOption();
     }, props.debounce);
     watch(query, () => {
       debouncedSearch();
-      setTimeout(() => {
-        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" }));
-      }, 0);
+      activateFirstOption();
     });
     const iconName = computed(() => {
       if ((props.loading || isLoading.value) && props.loadingIcon) {
@@ -269,6 +275,11 @@ export default defineComponent({
     });
     const emptyState = computed(() => ({ ...ui.value.default.emptyState, ...props.emptyState }));
     function activateFirstOption() {
+      setTimeout(() => {
+        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" }));
+      }, 0);
+    }
+    function activateNextOption() {
       setTimeout(() => {
         comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown" }));
       }, 0);

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

@@ -193,12 +193,12 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: Partial<any>;
     icon: string;
     closeButton: Button;
-    ui: Partial<any>;
     class: any;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;

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

@@ -1,10 +1,23 @@
 <template>
   <div :class="ui.wrapper" v-bind="attrs">
+    <slot name="first" :on-click="onClickFirst">
+      <UButton
+        v-if="firstButton && showFirst"
+        :size="size"
+        :disabled="!canGoFirstOrPrev"
+        :class="[ui.base, ui.rounded]"
+        v-bind="{ ...ui.default.firstButton, ...firstButton }"
+        :ui="{ rounded: '' }"
+        aria-label="First"
+        @click="onClickFirst"
+      />
+    </slot>
+
     <slot name="prev" :on-click="onClickPrev">
       <UButton
         v-if="prevButton"
         :size="size"
-        :disabled="!canGoPrev"
+        :disabled="!canGoFirstOrPrev"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...ui.default.prevButton, ...prevButton }"
         :ui="{ rounded: '' }"
@@ -28,7 +41,7 @@
       <UButton
         v-if="nextButton"
         :size="size"
-        :disabled="!canGoNext"
+        :disabled="!canGoLastOrNext"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...ui.default.nextButton, ...nextButton }"
         :ui="{ rounded: '' }"
@@ -36,6 +49,19 @@
         @click="onClickNext"
       />
     </slot>
+
+    <slot name="last" :on-click="onClickLast">
+      <UButton
+        v-if="lastButton && showLast"
+        :size="size"
+        :disabled="!canGoLastOrNext"
+        :class="[ui.base, ui.rounded]"
+        v-bind="{ ...ui.default.lastButton, ...lastButton }"
+        :ui="{ rounded: '' }"
+        aria-label="Last"
+        @click="onClickLast"
+      />
+    </slot>
   </div>
 </template>
 
@@ -88,6 +114,22 @@ export default defineComponent({
       type: Object,
       default: () => config.default.inactiveButton
     },
+    showFirst: {
+      type: Boolean,
+      default: false
+    },
+    showLast: {
+      type: Boolean,
+      default: false
+    },
+    firstButton: {
+      type: Object,
+      default: () => config.default.firstButton
+    },
+    lastButton: {
+      type: Object,
+      default: () => config.default.lastButton
+    },
     prevButton: {
       type: Object,
       default: () => config.default.prevButton
@@ -168,8 +210,20 @@ export default defineComponent({
       }
       return items;
     });
-    const canGoPrev = computed(() => currentPage.value > 1);
-    const canGoNext = computed(() => currentPage.value < pages.value.length);
+    const canGoFirstOrPrev = computed(() => currentPage.value > 1);
+    const canGoLastOrNext = computed(() => currentPage.value < pages.value.length);
+    function onClickFirst() {
+      if (!canGoFirstOrPrev.value) {
+        return;
+      }
+      currentPage.value = 1;
+    }
+    function onClickLast() {
+      if (!canGoLastOrNext.value) {
+        return;
+      }
+      currentPage.value = pages.value.length;
+    }
     function onClickPage(page) {
       if (typeof page === "string") {
         return;
@@ -177,13 +231,13 @@ export default defineComponent({
       currentPage.value = page;
     }
     function onClickPrev() {
-      if (!canGoPrev.value) {
+      if (!canGoFirstOrPrev.value) {
         return;
       }
       currentPage.value--;
     }
     function onClickNext() {
-      if (!canGoNext.value) {
+      if (!canGoLastOrNext.value) {
         return;
       }
       currentPage.value++;
@@ -195,11 +249,13 @@ export default defineComponent({
       currentPage,
       pages,
       displayedPages,
-      canGoPrev,
-      canGoNext,
+      canGoLastOrNext,
+      canGoFirstOrPrev,
       onClickPrev,
       onClickNext,
-      onClickPage
+      onClickPage,
+      onClickFirst,
+      onClickLast
     };
   }
 });

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Button } from '../../types';
+import type { Button, ButtonSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
         validate(value: any): boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -31,6 +31,22 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Button>;
         default: () => Button;
     };
+    showFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLast: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    firstButton: {
+        type: PropType<Button>;
+        default: () => Button;
+    };
+    lastButton: {
+        type: PropType<Button>;
+        default: () => Button;
+    };
     prevButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -59,11 +75,13 @@ declare const _default: import("vue").DefineComponent<{
     currentPage: import("vue").WritableComputedRef<number>;
     pages: import("vue").ComputedRef<number[]>;
     displayedPages: import("vue").ComputedRef<(string | number)[]>;
-    canGoPrev: import("vue").ComputedRef<boolean>;
-    canGoNext: import("vue").ComputedRef<boolean>;
+    canGoLastOrNext: import("vue").ComputedRef<boolean>;
+    canGoFirstOrPrev: import("vue").ComputedRef<boolean>;
     onClickPrev: () => void;
     onClickNext: () => void;
     onClickPage: (page: number | string) => void;
+    onClickFirst: () => void;
+    onClickLast: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
@@ -83,7 +101,7 @@ declare const _default: import("vue").DefineComponent<{
         validate(value: any): boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -95,6 +113,22 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Button>;
         default: () => Button;
     };
+    showFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLast: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    firstButton: {
+        type: PropType<Button>;
+        default: () => Button;
+    };
+    lastButton: {
+        type: PropType<Button>;
+        default: () => Button;
+    };
     prevButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -118,15 +152,19 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    size: ButtonSize;
     ui: Partial<any>;
     class: any;
-    size: string | number | symbol;
     max: number;
+    divider: string;
     pageCount: number;
     activeButton: Button;
     inactiveButton: Button;
+    showFirst: boolean;
+    showLast: boolean;
+    firstButton: Button;
+    lastButton: Button;
     prevButton: Button;
     nextButton: Button;
-    divider: string;
 }, {}>;
 export default _default;

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

@@ -26,7 +26,7 @@
       >
         <button :class="[ui.list.tab.base, ui.list.tab.background, ui.list.tab.height, ui.list.tab.padding, ui.list.tab.size, ui.list.tab.font, ui.list.tab.rounded, ui.list.tab.shadow, selected ? ui.list.tab.active : ui.list.tab.inactive]">
           <slot :item="item" :index="index" :selected="selected" :disabled="disabled">
-            {{ item.label }}
+            <span class="truncate">{{ item.label }}</span>
           </slot>
         </button>
       </HTab>

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

@@ -66,11 +66,11 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    orientation: "horizontal" | "vertical";
     ui: Partial<any>;
     class: any;
     modelValue: number;
     items: TabItem[];
-    orientation: "horizontal" | "vertical";
     defaultIndex: number;
 }, {}>;
 export default _default;

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

@@ -1,8 +1,11 @@
 <template>
   <div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrs">
     <Transition appear v-bind="ui.transition">
-      <div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
-        <slot />
+      <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 :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
+          <slot />
+        </div>
       </div>
     </Transition>
   </div>
@@ -72,6 +75,8 @@ export default defineComponent({
       attrs,
       isOpen,
       wrapperClass,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       container
     };
   }

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

@@ -28,6 +28,7 @@ declare const _default: import("vue").DefineComponent<{
     }, string>>;
     isOpen: import("vue").WritableComputedRef<boolean>;
     wrapperClass: import("vue").ComputedRef<string>;
+    popper: import("vue").ComputedRef<PopperOptions>;
     container: Ref<import("@vueuse/core").MaybeElement>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -51,8 +52,8 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
     ui: Partial<any>;
     popper: PopperOptions;

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

@@ -6,7 +6,7 @@
       </TransitionChild>
 
       <div :class="ui.inner">
-        <div :class="[ui.container, ui.padding]">
+        <div :class="[ui.container, !fullscreen && ui.padding]">
           <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
             <HDialogPanel
               :class="[

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

@@ -74,8 +74,8 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
     ui: Partial<any>;
     class: any;

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

@@ -1,35 +1,39 @@
 <template>
   <Transition appear v-bind="ui.transition">
-    <div :class="wrapperClass" v-bind="attrs" @mouseover="onMouseover" @mouseleave="onMouseleave">
+    <div
+      :class="wrapperClass"
+      role="status"
+      v-bind="attrs"
+      @mouseover="onMouseover"
+      @mouseleave="onMouseleave"
+    >
       <div :class="[ui.container, ui.rounded, ui.ring]">
-        <div :class="ui.padding">
-          <div class="flex gap-3" :class="{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }">
-            <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="flex" :class="[ui.padding, ui.gap, { 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }]">
+          <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">
-              <p :class="ui.title">
-                <slot name="title" :title="title">
-                  {{ title }}
-                </slot>
-              </p>
-              <p v-if="(description || $slots.description)" :class="ui.description">
-                <slot name="description" :description="description">
-                  {{ description }}
-                </slot>
-              </p>
+          <div class="w-0 flex-1">
+            <p :class="ui.title">
+              <slot name="title" :title="title">
+                {{ title }}
+              </slot>
+            </p>
+            <p v-if="(description || $slots.description)" :class="ui.description">
+              <slot name="description" :description="description">
+                {{ description }}
+              </slot>
+            </p>
 
-              <div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
-                <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
-              </div>
+            <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)" />
             </div>
-            <div class="flex-shrink-0 flex items-center gap-3">
-              <div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2">
-                <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)" />
+            </template>
 
-              <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
-            </div>
+            <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" />
@@ -84,7 +88,7 @@ export default defineComponent({
     },
     timeout: {
       type: Number,
-      default: 5e3
+      default: () => config.default.timeout
     },
     actions: {
       type: Array,
@@ -194,7 +198,8 @@ export default defineComponent({
       onMouseover,
       onMouseleave,
       onClose,
-      onAction
+      onAction,
+      twMerge
     };
   }
 });

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

@@ -27,7 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     timeout: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     actions: {
         type: PropType<NotificationAction[]>;
@@ -65,6 +65,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseleave: () => void;
     onClose: () => void;
     onAction: (action: NotificationAction) => 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<{
     id: {
         type: (NumberConstructor | StringConstructor)[];
@@ -92,7 +93,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     timeout: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     actions: {
         type: PropType<NotificationAction[]>;
@@ -118,6 +119,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: Partial<any>;
     description: string;
     icon: string;
     avatar: Avatar;
@@ -126,7 +128,6 @@ declare const _default: import("vue").DefineComponent<{
     actions: NotificationAction[];
     callback: Function;
     color: any;
-    ui: Partial<any>;
     class: any;
 }, {}>;
 export default _default;