@nuxt/ui 2.8.1 → 2.10.0

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,48 +19,69 @@ 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;
+    };
+    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: () => 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>;
+    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;
@@ -81,45 +101,70 @@ 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;
+    };
+    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: () => 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;
+    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

@@ -3,7 +3,7 @@
     :vertical="orientation === 'vertical'"
     :selected-index="selectedIndex"
     as="div"
-    :class="wrapperClass"
+    :class="ui.wrapper"
     v-bind="attrs"
     @change="onChange"
   >
@@ -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>
@@ -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

@@ -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>
@@ -12,11 +15,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 +37,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,17 +64,19 @@ 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,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       container
     };
   }

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

@@ -1,6 +1,5 @@
-/// <reference types="lodash" />
 import type { PropType, Ref } from 'vue';
-import type { PopperOptions } from '../../types/popper';
+import type { PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
@@ -14,17 +13,22 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<PopperOptions>;
         default: () => {};
     };
-    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>>;
     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: {
@@ -39,16 +43,21 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<PopperOptions>;
         default: () => {};
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
+    ui: Partial<any>;
     popper: PopperOptions;
+    class: any;
     modelValue: boolean;
 }, {}>;
 export default _default;

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

@@ -1,12 +1,12 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
-    <HDialog :class="wrapperClass" v-bind="attrs" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="ui.wrapper" v-bind="attrs" @close="(e) => !preventClose && close(e)">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </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="[
@@ -30,12 +30,13 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
+import { computed, toRef, defineComponent } from "vue";
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from "@headlessui/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 { modal } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.modal, modal);
 export default defineComponent({
   components: {
     HDialog,
@@ -69,15 +70,18 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    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.modal));
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("modal", toRef(props, "ui"), config, toRef(props, "class"));
     const isOpen = computed({
       get() {
         return props.modelValue;
@@ -86,7 +90,6 @@ export default defineComponent({
         emit("update:modelValue", value);
       }
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     const transitionClass = computed(() => {
       if (!props.transition) {
         return {};
@@ -100,11 +103,10 @@ export default defineComponent({
       emit("close");
     }
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       isOpen,
-      wrapperClass,
       transitionClass,
       close
     };