@nuxt/ui 2.8.1 → 2.10.0

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

@@ -1,63 +1,72 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
+import type { BadgeVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: StringConstructor;
+        type: PropType<"sm" | "md" | "xs" | "lg">;
         default: () => any;
         validator(value: string): boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
     variant: {
-        type: StringConstructor;
+        type: PropType<BadgeVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
     label: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
+    attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
-    }, "class">;
+    }, string>>;
     badgeClass: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: StringConstructor;
+        type: PropType<"sm" | "md" | "xs" | "lg">;
         default: () => any;
         validator(value: string): boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
     variant: {
-        type: StringConstructor;
+        type: PropType<BadgeVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
     label: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    color: string;
-    ui: any;
+    color: any;
+    ui: Partial<any>;
+    class: any;
     label: string | number;
-    variant: string;
-    size: string;
+    variant: BadgeVariant;
+    size: "sm" | "md" | "xs" | "lg";
 }, {}>;
 export default _default;

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

@@ -17,14 +17,15 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { computed, defineComponent, toRef } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import ULink from "../elements/Link.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 { button } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
 export default defineComponent({
   components: {
     UIcon,
@@ -58,25 +59,25 @@ export default defineComponent({
     },
     size: {
       type: String,
-      default: () => appConfig.ui.button.default.size,
+      default: () => config.default.size,
       validator(value) {
-        return Object.keys(appConfig.ui.button.size).includes(value);
+        return Object.keys(config.size).includes(value);
       }
     },
     color: {
       type: String,
-      default: () => appConfig.ui.button.default.color,
+      default: () => config.default.color,
       validator(value) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.button.color)].includes(value);
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
       }
     },
     variant: {
       type: String,
-      default: () => appConfig.ui.button.default.variant,
+      default: () => config.default.variant,
       validator(value) {
         return [
-          ...Object.keys(appConfig.ui.button.variant),
-          ...Object.values(appConfig.ui.button.color).flatMap((value2) => Object.keys(value2))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap((value2) => Object.keys(value2))
         ].includes(value);
       }
     },
@@ -86,7 +87,7 @@ export default defineComponent({
     },
     loadingIcon: {
       type: String,
-      default: () => appConfig.ui.button.default.loadingIcon
+      default: () => config.default.loadingIcon
     },
     leadingIcon: {
       type: String,
@@ -112,14 +113,17 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs, slots }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.button));
+  setup(props, { slots }) {
+    const { ui, attrs } = useUI("button", toRef(props, "ui"), config);
     const isLeading = computed(() => {
       return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;
     });
@@ -138,7 +142,7 @@ export default defineComponent({
         props.padded && ui.value[isSquare.value ? "square" : "padding"][props.size],
         variant?.replaceAll("{color}", props.color),
         props.block ? "w-full flex justify-center items-center" : "inline-flex items-center"
-      ), attrs.class);
+      ), props.class);
     });
     const leadingIconName = computed(() => {
       if (props.loading) {
@@ -167,7 +171,7 @@ export default defineComponent({
       );
     });
     return {
-      attrs: omit(attrs, ["class"]),
+      attrs,
       isLeading,
       isTrailing,
       isSquare,

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

@@ -1,5 +1,5 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
+import type { ButtonVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     type: {
         type: StringConstructor;
@@ -26,17 +26,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: StringConstructor;
+        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
         default: () => any;
         validator(value: string): boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
     variant: {
-        type: StringConstructor;
+        type: PropType<ButtonVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -72,14 +72,18 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
+    attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
-    }, "class">;
+    }, string>>;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true>;
     isSquare: import("vue").ComputedRef<boolean>;
@@ -114,17 +118,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: StringConstructor;
+        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
         default: () => any;
         validator(value: string): boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
     variant: {
-        type: StringConstructor;
+        type: PropType<ButtonVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -160,20 +164,26 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
+    truncate: boolean;
     icon: string;
-    color: string;
-    ui: any;
+    color: any;
+    ui: Partial<any>;
+    class: any;
     label: string;
-    type: string;
     loading: boolean;
+    type: string;
     disabled: boolean;
-    variant: string;
-    size: string;
+    variant: ButtonVariant;
+    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl";
     block: boolean;
     padded: boolean;
     loadingIcon: string;
@@ -182,6 +192,5 @@ declare const _default: import("vue").DefineComponent<{
     trailing: boolean;
     leading: boolean;
     square: boolean;
-    truncate: boolean;
 }, {}>;
 export default _default;

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

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: StringConstructor;
+        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
         default: null;
         validator(value: string): boolean;
     };
@@ -10,15 +10,19 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator(value: string): boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: StringConstructor;
+        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
         default: null;
         validator(value: string): boolean;
     };
@@ -27,13 +31,18 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator(value: string): boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
-    size: string;
+    ui: Partial<any>;
+    class: any;
+    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl";
     orientation: "horizontal" | "vertical";
 }, {}>;
 export default _default;

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

@@ -1,9 +1,11 @@
-import { h, cloneVNode, computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import { defuTwMerge, getSlotsChildren } from "../../utils/index.mjs";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI.mjs";
+import { mergeConfig, getSlotsChildren } from "../../utils/index.mjs";
 import appConfig from "#build/app.config";
+import { button, buttonGroup } from "#ui/ui.config";
+const buttonConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
+const buttonGroupConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.buttonGroup, buttonGroup);
 export default defineComponent({
   inheritAttrs: false,
   props: {
@@ -11,7 +13,7 @@ export default defineComponent({
       type: String,
       default: null,
       validator(value) {
-        return Object.keys(appConfig.ui.button.size).includes(value);
+        return Object.keys(buttonConfig.size).includes(value);
       }
     },
     orientation: {
@@ -21,14 +23,17 @@ export default defineComponent({
         return ["horizontal", "vertical"].includes(value);
       }
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs, slots }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.buttonGroup));
+  setup(props, { slots }) {
+    const { ui, attrs } = useUI("buttonGroup", toRef(props, "ui"), buttonGroupConfig);
     const children = computed(() => getSlotsChildren(slots));
     const rounded = computed(() => {
       const roundedMap = {
@@ -46,11 +51,6 @@ export default defineComponent({
     });
     const clones = computed(() => children.value.map((node, index) => {
       const vProps = {};
-      if (props.orientation === "vertical") {
-        ui.value.wrapper = "flex flex-col -space-y-px";
-      } else {
-        ui.value.wrapper = "inline-flex -space-x-px";
-      }
       if (props.size) {
         vProps.size = props.size;
       }
@@ -65,6 +65,13 @@ export default defineComponent({
       }
       return cloneVNode(node, vProps);
     }));
-    return () => h("div", { class: twMerge(twJoin(ui.value.wrapper, ui.value.rounded, ui.value.shadow), attrs.class), ...omit(attrs, ["class"]) }, clones.value);
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.wrapper[props.orientation],
+        ui.value.rounded,
+        ui.value.shadow
+      ), props.class);
+    });
+    return () => h("div", { class: wrapperClass.value, ...attrs.value }, clones.value);
   }
 });

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

@@ -1,5 +1,5 @@
 <template>
-  <HMenu v-slot="{ open }" as="div" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
+  <HMenu v-slot="{ open }" as="div" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HMenuButton
       ref="trigger"
       as="div"
@@ -17,46 +17,50 @@
 
     <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
-        <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">
-            <HMenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
-              <ULink
-                v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])"
-                :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
-                @click="item.click"
-              >
-                <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]" />
-                  <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
+        <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)]" />
+          <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">
+              <HMenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
+                <component
+                  :is="!!item.to ? NuxtLink : 'button'"
+                  v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])"
+                  :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
+                  @click="item.click"
+                >
+                  <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]" />
+                    <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="truncate">{{ item.label }}</span>
 
-                  <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
-                    <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
-                  </span>
-                </slot>
-              </ULink>
-            </HMenuItem>
-          </div>
-        </HMenuItems>
+                    <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
+                      <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
+                    </span>
+                  </slot>
+                </component>
+              </HMenuItem>
+            </div>
+          </HMenuItems>
+        </div>
       </Transition>
     </div>
   </HMenu>
 </template>
 
 <script>
-import { defineComponent, ref, computed, onMounted } from "vue";
+import { defineComponent, ref, computed, 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 { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import UKbd from "../elements/Kbd.vue";
-import ULink from "../elements/Link.vue";
+import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { mergeConfig, omit } from "../../utils";
+import appConfig from "#build/app.config";
+import { dropdown } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.dropdown, dropdown);
 export default defineComponent({
   components: {
     HMenu,
@@ -65,8 +69,7 @@ export default defineComponent({
     HMenuItem,
     UIcon,
     UAvatar,
-    UKbd,
-    ULink
+    UKbd
   },
   inheritAttrs: false,
   props: {
@@ -95,14 +98,17 @@ export default defineComponent({
       type: Number,
       default: 0
     },
+    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.dropdown));
+  setup(props) {
+    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);
     const menuApi = ref(null);
@@ -122,7 +128,6 @@ export default defineComponent({
       const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
       return props.mode === "hover" ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {};
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     function onMouseOver() {
       if (props.mode !== "hover" || !menuApi.value) {
         return;
@@ -155,17 +160,20 @@ export default defineComponent({
         closeTimeout = null;
       }, props.closeDelay);
     }
+    const NuxtLink = resolveComponent("NuxtLink");
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       trigger,
       container,
       containerStyle,
-      wrapperClass,
       onMouseOver,
       onMouseLeave,
-      omit
+      omit,
+      NuxtLink
     };
   }
 });

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

@@ -1,7 +1,6 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { DropdownItem } from '../../types/dropdown';
-import type { PopperOptions } from '../../types/popper';
+import { omit } from '../../utils';
+import type { DropdownItem, PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     items: {
         type: PropType<DropdownItem[][]>;
@@ -28,15 +27,20 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    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>>;
+    popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     containerStyle: import("vue").ComputedRef<{
@@ -46,14 +50,10 @@ declare const _default: import("vue").DefineComponent<{
         paddingTop?: undefined;
         paddingBottom?: undefined;
     }>;
-    wrapperClass: import("vue").ComputedRef<string>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
-    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>;
-    };
+    omit: typeof omit;
+    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<{
     items: {
         type: PropType<DropdownItem[][]>;
@@ -80,13 +80,18 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
+    ui: Partial<any>;
     popper: PopperOptions;
+    class: any;
     disabled: boolean;
     items: DropdownItem[][];
     mode: "click" | "hover";