@nuxt/ui 2.8.1 → 2.9.0

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass" v-bind="attrs">
+  <div :class="ui.wrapper" v-bind="attrs">
     <slot name="prev" :on-click="onClickPrev">
       <UButton
         v-if="prevButton"
@@ -8,6 +8,7 @@
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...ui.default.prevButton, ...prevButton }"
         :ui="{ rounded: '' }"
+        aria-label="Prev"
         @click="onClickPrev"
       />
     </slot>
@@ -31,6 +32,7 @@
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...ui.default.nextButton, ...nextButton }"
         :ui="{ rounded: '' }"
+        aria-label="Next"
         @click="onClickNext"
       />
     </slot>
@@ -38,13 +40,14 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
+import { computed, toRef, defineComponent } from "vue";
 import UButton from "../elements/Button.vue";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
+import { pagination, button } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.pagination, pagination);
+const buttonConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
 export default defineComponent({
   components: {
     UButton
@@ -67,45 +70,48 @@ export default defineComponent({
       type: Number,
       default: 7,
       validate(value) {
-        return value >= 7 && value < Number.MAX_VALUE;
+        return value >= 5 && value < Number.MAX_VALUE;
       }
     },
     size: {
       type: String,
-      default: () => appConfig.ui.pagination.default.size,
+      default: () => config.default.size,
       validator(value) {
-        return Object.keys(appConfig.ui.button.size).includes(value);
+        return Object.keys(buttonConfig.size).includes(value);
       }
     },
     activeButton: {
       type: Object,
-      default: () => appConfig.ui.pagination.default.activeButton
+      default: () => config.default.activeButton
     },
     inactiveButton: {
       type: Object,
-      default: () => appConfig.ui.pagination.default.inactiveButton
+      default: () => config.default.inactiveButton
     },
     prevButton: {
       type: Object,
-      default: () => appConfig.ui.pagination.default.prevButton
+      default: () => config.default.prevButton
     },
     nextButton: {
       type: Object,
-      default: () => appConfig.ui.pagination.default.nextButton
+      default: () => config.default.nextButton
     },
     divider: {
       type: String,
       default: "\u2026"
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { attrs, emit }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.pagination));
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("pagination", toRef(props, "ui"), config, toRef(props, "class"));
     const currentPage = computed({
       get() {
         return props.modelValue;
@@ -116,50 +122,54 @@ export default defineComponent({
     });
     const pages = computed(() => Array.from({ length: Math.ceil(props.total / props.pageCount) }, (_, i) => i + 1));
     const displayedPages = computed(() => {
-      if (!props.max || pages.value.length <= 5) {
-        return pages.value;
-      } else {
-        const current = currentPage.value;
-        const max = pages.value.length;
-        const r = Math.floor((Math.min(props.max, max) - 5) / 2);
-        const r1 = current - r;
-        const r2 = current + r;
-        const beforeWrapped = r1 - 1 > 1;
-        const afterWrapped = r2 + 1 < max;
-        const items = [1];
-        if (beforeWrapped)
-          items.push(props.divider);
-        if (!afterWrapped) {
-          const addedItems = current + r + 2 - max;
-          for (let i = current - r - addedItems; i <= current - r - 1; i++) {
-            items.push(i);
-          }
-        }
-        for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++) {
+      const totalPages = pages.value.length;
+      const current = currentPage.value;
+      const maxDisplayedPages = Math.max(props.max, 5);
+      const r = Math.floor((Math.min(maxDisplayedPages, totalPages) - 5) / 2);
+      const r1 = current - r;
+      const r2 = current + r;
+      const beforeWrapped = r1 - 1 > 1;
+      const afterWrapped = r2 + 1 < totalPages;
+      const items = [];
+      if (totalPages <= maxDisplayedPages) {
+        for (let i = 1; i <= totalPages; i++) {
           items.push(i);
         }
-        if (!beforeWrapped) {
-          const addedItems = 1 - (current - r - 2);
-          for (let i = current + r + 1; i <= current + r + addedItems; i++) {
-            items.push(i);
-          }
-        }
-        if (afterWrapped)
-          items.push(props.divider);
-        if (r2 < max)
-          items.push(max);
-        if (items.length >= 3 && items[1] === props.divider && items[2] === 3) {
-          items[1] = 2;
+        return items;
+      }
+      items.push(1);
+      if (beforeWrapped)
+        items.push(props.divider);
+      if (!afterWrapped) {
+        const addedItems = current + r + 2 - totalPages;
+        for (let i = current - r - addedItems; i <= current - r - 1; i++) {
+          items.push(i);
         }
-        if (items.length >= 3 && items[items.length - 2] === props.divider && items[items.length - 1] === items.length) {
-          items[items.length - 2] = items.length - 1;
+      }
+      for (let i = Math.max(2, r1); i <= Math.min(totalPages, r2); i++) {
+        items.push(i);
+      }
+      if (!beforeWrapped) {
+        const addedItems = 1 - (current - r - 2);
+        for (let i = current + r + 1; i <= current + r + addedItems; i++) {
+          items.push(i);
         }
-        return items;
       }
+      if (afterWrapped)
+        items.push(props.divider);
+      if (r2 < totalPages) {
+        items.push(totalPages);
+      }
+      if (items.length >= 3 && items[1] === props.divider && items[2] === 3) {
+        items[1] = 2;
+      }
+      if (items.length >= 3 && items[items.length - 2] === props.divider && items[items.length - 1] === items.length) {
+        items[items.length - 2] = items.length - 1;
+      }
+      return items;
     });
     const canGoPrev = computed(() => currentPage.value > 1);
     const canGoNext = computed(() => currentPage.value < pages.value.length);
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     function onClickPage(page) {
       if (typeof page === "string") {
         return;
@@ -179,15 +189,14 @@ export default defineComponent({
       currentPage.value++;
     }
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       currentPage,
       pages,
       displayedPages,
       canGoPrev,
       canGoNext,
-      wrapperClass,
       onClickPrev,
       onClickNext,
       onClickPage

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

@@ -1,6 +1,5 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { Button } from '../../types/button';
+import type { Button } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
@@ -20,45 +19,48 @@ declare const _default: import("vue").DefineComponent<{
         validate(value: any): boolean;
     };
     size: {
-        type: StringConstructor;
+        type: PropType<string | number | symbol>;
         default: () => any;
         validator(value: string): boolean;
     };
     activeButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     inactiveButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     prevButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     nextButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     divider: {
         type: StringConstructor;
         default: string;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     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>;
-    wrapperClass: import("vue").ComputedRef<string>;
     onClickPrev: () => void;
     onClickNext: () => void;
     onClickPage: (page: number | string) => void;
@@ -81,39 +83,44 @@ declare const _default: import("vue").DefineComponent<{
         validate(value: any): boolean;
     };
     size: {
-        type: StringConstructor;
+        type: PropType<string | number | symbol>;
         default: () => any;
         validator(value: string): boolean;
     };
     activeButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     inactiveButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     prevButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     nextButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     divider: {
         type: StringConstructor;
         default: string;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
-    size: string;
+    ui: Partial<any>;
+    class: any;
+    size: string | number | symbol;
     max: number;
     pageCount: number;
     activeButton: Button;

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

@@ -3,7 +3,7 @@
     :vertical="orientation === 'vertical'"
     :selected-index="selectedIndex"
     as="div"
-    :class="wrapperClass"
+    :class="ui.wrapper"
     v-bind="attrs"
     @change="onChange"
   >
@@ -38,6 +38,7 @@
         :key="index"
         v-slot="{ selected }"
         :class="ui.base"
+        tabindex="-1"
       >
         <slot :name="item.slot || 'item'" :item="item" :index="index" :selected="selected">
           {{ item.content }}
@@ -48,13 +49,14 @@
 </template>
 
 <script>
-import { ref, computed, watch, onMounted, defineComponent } from "vue";
+import { toRef, ref, watch, onMounted, defineComponent } from "vue";
 import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from "@headlessui/vue";
 import { useResizeObserver } from "@vueuse/core";
-import { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { tabs } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.tabs, tabs);
 export default defineComponent({
   components: {
     HTabGroup,
@@ -82,20 +84,22 @@ export default defineComponent({
       type: Array,
       default: () => []
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(props, { attrs, emit }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.tabs));
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("tabs", toRef(props, "ui"), config, toRef(props, "class"));
     const listRef = ref();
     const itemRefs = ref([]);
     const markerRef = ref();
     const selectedIndex = ref(props.modelValue || props.defaultIndex);
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     function calcMarkerSize(index) {
       const tab = itemRefs.value[index]?.$el;
       if (!tab) {
@@ -123,14 +127,13 @@ export default defineComponent({
     });
     onMounted(() => calcMarkerSize(selectedIndex.value));
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       listRef,
       itemRefs,
       markerRef,
       selectedIndex,
-      wrapperClass,
       onChange
     };
   }

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

@@ -1,6 +1,5 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { TabItem } from '../../types/tabs';
+import type { TabItem } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
@@ -19,20 +18,23 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TabItem[]>;
         default: () => never[];
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     listRef: import("vue").Ref<HTMLElement | undefined>;
     itemRefs: import("vue").Ref<HTMLElement[]>;
     markerRef: import("vue").Ref<HTMLElement | undefined>;
     selectedIndex: import("vue").Ref<number>;
-    wrapperClass: import("vue").ComputedRef<string>;
     onChange: (index: any) => 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: {
@@ -52,15 +54,20 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TabItem[]>;
         default: () => never[];
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     modelValue: number;
     items: TabItem[];
     orientation: "horizontal" | "vertical";

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

@@ -1,5 +1,5 @@
 <template>
-  <nav :class="wrapperClass" v-bind="attrs">
+  <nav :class="ui.wrapper" v-bind="attrs">
     <ULink
       v-for="(link, index) of links"
       v-slot="{ isActive }"
@@ -38,14 +38,15 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
+import { toRef, defineComponent } from "vue";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import ULink from "../elements/Link.vue";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig, omit } from "../../utils";
+import appConfig from "#build/app.config";
+import { verticalNavigation } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.verticalNavigation, verticalNavigation);
 export default defineComponent({
   components: {
     UIcon,
@@ -58,20 +59,21 @@ export default defineComponent({
       type: Array,
       default: () => []
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.verticalNavigation));
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+  setup(props) {
+    const { ui, attrs } = useUI("verticalNavigation", toRef(props, "ui"), config, toRef(props, "class"));
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      wrapperClass,
+      attrs,
       omit
     };
   }

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

@@ -1,37 +1,41 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { VerticalNavigationLink } from '../../types/vertical-navigation';
+import { omit } from '../../utils';
+import type { VerticalNavigationLink } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     links: {
         type: PropType<VerticalNavigationLink[]>;
         default: () => never[];
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
-    wrapperClass: import("vue").ComputedRef<string>;
-    omit: {
-        <T extends object, K extends import("lodash").PropertyName[]>(object: T | null | undefined, ...paths: K): Pick<T, Exclude<keyof T, K[number]>>;
-        <T_1 extends object, K_1 extends keyof T_1>(object: T_1 | null | undefined, ...paths: import("lodash").Many<K_1>[]): import("lodash").Omit<T_1, K_1>;
-        <T_2 extends object>(object: T_2 | null | undefined, ...paths: import("lodash").Many<import("lodash").PropertyName>[]): Partial<T_2>;
-    };
+    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<VerticalNavigationLink[]>;
         default: () => never[];
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     links: VerticalNavigationLink[];
 }, {}>;
 export default _default;

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

@@ -12,11 +12,13 @@
 import { computed, toRef, defineComponent } from "vue";
 import { defu } from "defu";
 import { onClickOutside } from "@vueuse/core";
-import { omit } from "lodash-es";
 import { twMerge, twJoin } from "tailwind-merge";
+import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { contextMenu } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.contextMenu, contextMenu);
 export default defineComponent({
   inheritAttrs: false,
   props: {
@@ -32,15 +34,18 @@ export default defineComponent({
       type: Object,
       default: () => ({})
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue", "close"],
-  setup(props, { attrs, emit }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.contextMenu));
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("contextMenu", toRef(props, "ui"), config);
     const popper = computed(() => defu({}, props.popper, ui.value.popper));
     const isOpen = computed({
       get() {
@@ -56,15 +61,15 @@ export default defineComponent({
       return twMerge(twJoin(
         ui.value.container,
         ui.value.width
-      ), attrs.class);
+      ), props.class);
     });
     onClickOutside(container, () => {
       isOpen.value = false;
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       isOpen,
       wrapperClass,
       container