@nuxt/ui 2.11.1 → 2.12.1

package/dist/runtime/types/link.d.ts

@@ -1,6 +1,9 @@
 import type { NuxtLinkProps } from '#app'
 
 export interface Link extends NuxtLinkProps {
+  as?: string
+  type?: string
+  disabled?: boolean
   active?: boolean
   exact?: boolean
   exactQuery?: boolean

package/dist/runtime/types/tooltip.d.ts

@@ -0,0 +1,7 @@
+export interface Tooltip {
+  text?: string
+  prevent?: boolean
+  shortcuts?: string[]
+  openDelay?: number
+  closeDelay?: number
+}

package/dist/runtime/types/vertical-navigation.d.ts

@@ -3,6 +3,7 @@ import type { Avatar } from './avatar'
 
 export interface VerticalNavigationLink extends Link {
   label: string
+  labelClass?: string
   icon?: string
   iconClass?: string
   avatar?: Avatar

package/dist/runtime/ui.config/forms/input.mjs

@@ -76,24 +76,24 @@ export default {
       wrapper: "absolute inset-y-0 start-0 flex items-center",
       pointer: "pointer-events-none",
       padding: {
-        "2xs": "ps-2",
-        xs: "ps-2.5",
-        sm: "ps-2.5",
-        md: "ps-3",
-        lg: "ps-3.5",
-        xl: "ps-3.5"
+        "2xs": "px-2",
+        xs: "px-2.5",
+        sm: "px-2.5",
+        md: "px-3",
+        lg: "px-3.5",
+        xl: "px-3.5"
       }
     },
     trailing: {
       wrapper: "absolute inset-y-0 end-0 flex items-center",
       pointer: "pointer-events-none",
       padding: {
-        "2xs": "pe-2",
-        xs: "pe-2.5",
-        sm: "pe-2.5",
-        md: "pe-3",
-        lg: "pe-3.5",
-        xl: "pe-3.5"
+        "2xs": "px-2",
+        xs: "px-2.5",
+        sm: "px-2.5",
+        md: "px-3",
+        lg: "px-3.5",
+        xl: "px-3.5"
       }
     }
   },

package/dist/runtime/ui.config/forms/inputMenu.d.ts

@@ -0,0 +1,64 @@
+declare const _default: {
+    container: string;
+    trigger: string;
+    width: string;
+    height: string;
+    base: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    ring: string;
+    empty: string;
+    option: {
+        base: string;
+        rounded: string;
+        padding: string;
+        size: string;
+        color: string;
+        container: string;
+        active: string;
+        inactive: string;
+        selected: string;
+        disabled: string;
+        empty: string;
+        icon: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        selectedIcon: {
+            wrapper: string;
+            padding: string;
+            base: string;
+        };
+        avatar: {
+            base: string;
+            size: "3xs";
+        };
+        chip: {
+            base: string;
+        };
+    };
+    transition: {
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    popper: {
+        placement: string;
+    };
+    default: {
+        selectedIcon: string;
+        trailingIcon: string;
+    };
+    arrow: {
+        ring: string;
+        background: string;
+        base: string;
+        rounded: string;
+        shadow: string;
+        placement: string;
+    };
+};
+export default _default;

package/dist/runtime/ui.config/forms/inputMenu.mjs

@@ -0,0 +1,62 @@
+import { arrow } from "../popper.mjs";
+export default {
+  container: "z-20 group",
+  trigger: "inline-flex w-full",
+  width: "w-full",
+  height: "max-h-60",
+  base: "relative focus:outline-none overflow-y-auto scroll-py-1",
+  background: "bg-white dark:bg-gray-800",
+  shadow: "shadow-lg",
+  rounded: "rounded-md",
+  padding: "p-1",
+  ring: "ring-1 ring-gray-200 dark:ring-gray-700",
+  empty: "text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5",
+  option: {
+    base: "cursor-default select-none relative flex items-center justify-between gap-1",
+    rounded: "rounded-md",
+    padding: "px-2 py-1.5",
+    size: "text-sm",
+    color: "text-gray-900 dark:text-white",
+    container: "flex items-center gap-2 min-w-0",
+    active: "bg-gray-100 dark:bg-gray-900",
+    inactive: "",
+    selected: "pe-7",
+    disabled: "cursor-not-allowed opacity-50",
+    empty: "text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5",
+    icon: {
+      base: "flex-shrink-0 h-4 w-4",
+      active: "text-gray-900 dark:text-white",
+      inactive: "text-gray-400 dark:text-gray-500"
+    },
+    selectedIcon: {
+      wrapper: "absolute inset-y-0 end-0 flex items-center",
+      padding: "pe-2",
+      base: "h-4 w-4 text-gray-900 dark:text-white flex-shrink-0"
+    },
+    avatar: {
+      base: "flex-shrink-0",
+      size: "3xs"
+    },
+    chip: {
+      base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full"
+    }
+  },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    leaveActiveClass: "transition ease-in duration-100",
+    leaveFromClass: "opacity-100",
+    leaveToClass: "opacity-0"
+  },
+  popper: {
+    placement: "bottom-end"
+  },
+  default: {
+    selectedIcon: "i-heroicons-check-20-solid",
+    trailingIcon: "i-heroicons-chevron-down-20-solid"
+  },
+  arrow: {
+    ...arrow,
+    ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",
+    background: "before:bg-white dark:before:bg-gray-700"
+  }
+};

package/dist/runtime/ui.config/forms/selectMenu.d.ts

@@ -1,19 +1,10 @@
 declare const _default: {
-    container: string;
-    trigger: string;
     select: string;
-    width: string;
-    height: string;
-    base: string;
-    background: string;
-    shadow: string;
-    rounded: string;
-    padding: string;
-    ring: string;
     input: string;
     required: string;
     label: string;
     option: {
+        create: string;
         base: string;
         rounded: string;
         padding: string;
@@ -25,7 +16,6 @@ declare const _default: {
         selected: string;
         disabled: string;
         empty: string;
-        create: string;
         icon: {
             base: string;
             active: string;
@@ -54,7 +44,8 @@ declare const _default: {
     };
     default: {
         selectedIcon: string;
-        clearOnClose: boolean;
+        clearSearchOnClose: boolean;
+        showCreateOptionWhen: string;
     };
     arrow: {
         ring: string;
@@ -64,5 +55,16 @@ declare const _default: {
         shadow: string;
         placement: string;
     };
+    container: string;
+    trigger: string;
+    width: string;
+    height: string;
+    base: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    ring: string;
+    empty: string;
 };
 export default _default;

package/dist/runtime/ui.config/forms/selectMenu.mjs

@@ -1,49 +1,14 @@
 import { arrow } from "../popper.mjs";
+import inputMenu from "./inputMenu.mjs";
 export default {
-  container: "z-20 group",
-  trigger: "inline-flex w-full",
+  ...inputMenu,
   select: "inline-flex items-center text-left cursor-default",
-  width: "w-full",
-  height: "max-h-60",
-  base: "relative focus:outline-none overflow-y-auto scroll-py-1",
-  background: "bg-white dark:bg-gray-800",
-  shadow: "shadow-lg",
-  rounded: "rounded-md",
-  padding: "p-1",
-  ring: "ring-1 ring-gray-200 dark:ring-gray-700",
-  input: "block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none",
+  input: "block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none",
   required: "absolute inset-0 w-px opacity-0 cursor-default",
   label: "block truncate",
   option: {
-    base: "cursor-default select-none relative flex items-center justify-between gap-1",
-    rounded: "rounded-md",
-    padding: "px-2 py-1.5",
-    size: "text-sm",
-    color: "text-gray-900 dark:text-white",
-    container: "flex items-center gap-2 min-w-0",
-    active: "bg-gray-100 dark:bg-gray-900",
-    inactive: "",
-    selected: "pe-7",
-    disabled: "cursor-not-allowed opacity-50",
-    empty: "text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5",
-    create: "block truncate",
-    icon: {
-      base: "flex-shrink-0 h-4 w-4",
-      active: "text-gray-900 dark:text-white",
-      inactive: "text-gray-400 dark:text-gray-500"
-    },
-    selectedIcon: {
-      wrapper: "absolute inset-y-0 end-0 flex items-center",
-      padding: "pe-2",
-      base: "h-4 w-4 text-gray-900 dark:text-white flex-shrink-0"
-    },
-    avatar: {
-      base: "flex-shrink-0",
-      size: "3xs"
-    },
-    chip: {
-      base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full"
-    }
+    ...inputMenu.option,
+    create: "block truncate"
   },
   // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
@@ -56,7 +21,8 @@ export default {
   },
   default: {
     selectedIcon: "i-heroicons-check-20-solid",
-    clearOnClose: false
+    clearSearchOnClose: false,
+    showCreateOptionWhen: "empty"
   },
   arrow: {
     ...arrow,

package/dist/runtime/ui.config/index.d.ts

@@ -13,6 +13,7 @@ export { default as progress } from './elements/progress';
 export { default as meter } from './elements/meter';
 export { default as meterGroup } from './elements/meterGroup';
 export { default as input } from './forms/input';
+export { default as inputMenu } from './forms/inputMenu';
 export { default as formGroup } from './forms/formGroup';
 export { default as textarea } from './forms/textarea';
 export { default as select } from './forms/select';

package/dist/runtime/ui.config/index.mjs

@@ -13,6 +13,7 @@ export { default as progress } from "./elements/progress.mjs";
 export { default as meter } from "./elements/meter.mjs";
 export { default as meterGroup } from "./elements/meterGroup.mjs";
 export { default as input } from "./forms/input.mjs";
+export { default as inputMenu } from "./forms/inputMenu.mjs";
 export { default as formGroup } from "./forms/formGroup.mjs";
 export { default as textarea } from "./forms/textarea.mjs";
 export { default as select } from "./forms/select.mjs";

package/dist/runtime/ui.config/layout/card.mjs

@@ -1,5 +1,5 @@
 export default {
-  base: "overflow-hidden",
+  base: "",
   background: "bg-white dark:bg-gray-900",
   divide: "divide-y divide-gray-200 dark:divide-gray-800",
   ring: "ring-1 ring-gray-200 dark:ring-gray-800",

package/dist/runtime/ui.config/navigation/breadcrumb.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
     ol: string;
     li: string;
     base: string;
+    label: string;
     icon: {
         base: string;
         active: string;

package/dist/runtime/ui.config/navigation/breadcrumb.mjs

@@ -3,6 +3,7 @@ export default {
   ol: "flex items-center gap-x-1.5",
   li: "flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm",
   base: "flex items-center gap-x-1.5 group font-semibold",
+  label: "",
   icon: {
     base: "flex-shrink-0 w-4 h-4",
     active: "",

package/dist/runtime/ui.config/navigation/verticalNavigation.d.ts

@@ -24,5 +24,10 @@ declare const _default: {
         active: string;
         inactive: string;
     };
+    divider: {
+        wrapper: {
+            base: string;
+        };
+    };
 };
 export default _default;

package/dist/runtime/ui.config/navigation/verticalNavigation.mjs

@@ -23,5 +23,10 @@ export default {
     base: "relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5",
     active: "bg-white dark:bg-gray-900",
     inactive: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900"
+  },
+  divider: {
+    wrapper: {
+      base: "p-2"
+    }
   }
 };

package/dist/runtime/ui.config/popper.mjs

@@ -4,5 +4,6 @@ export const arrow = {
   rounded: "before:rounded-sm",
   background: "before:bg-gray-200 dark:before:bg-gray-800",
   shadow: "before:shadow",
-  placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
+  // eslint-disable-next-line quotes
+  placement: `group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1`
 };

package/dist/runtime/utils/index.d.ts

@@ -8,3 +8,4 @@ export declare function getSlotsChildren(slots: any): any;
  */
 export declare function looseToNumber(val: any): any;
 export * from './lodash';
+export * from './link';

package/dist/runtime/utils/index.mjs

@@ -1,12 +1,20 @@
 import { defu, createDefu } from "defu";
 import { extendTailwindMerge } from "tailwind-merge";
 const customTwMerge = extendTailwindMerge({
-  classGroups: {
-    icons: [(classPart) => /^i-/.test(classPart)]
+  extend: {
+    classGroups: {
+      icons: [(classPart) => /^i-/.test(classPart)]
+    }
   }
 });
 const defuTwMerge = createDefu((obj, key, value, namespace) => {
-  if (namespace !== "default" && !namespace.startsWith("default.") && typeof obj[key] === "string" && typeof value === "string" && obj[key] && value) {
+  if (namespace === "default" || namespace.startsWith("default.")) {
+    return false;
+  }
+  if (namespace.endsWith("avatar") && key === "size") {
+    return false;
+  }
+  if (typeof obj[key] === "string" && typeof value === "string" && obj[key] && value) {
     obj[key] = customTwMerge(obj[key], value);
     return true;
   }
@@ -47,3 +55,4 @@ export function looseToNumber(val) {
   return isNaN(n) ? val : n;
 }
 export * from "./lodash.mjs";
+export * from "./link.mjs";

package/dist/runtime/utils/link.d.ts

@@ -0,0 +1,58 @@
+import type { PropType } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+export declare const nuxtLinkProps: {
+    readonly to: {
+        readonly type: PropType<RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    readonly href: {
+        readonly type: PropType<RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    readonly target: {
+        readonly type: PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly default: undefined;
+    };
+    readonly rel: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly noRel: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly prefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly noPrefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly activeClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly exactActiveClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly prefetchedClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly replace: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly ariaCurrentValue: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly external: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+};
+export declare const getNuxtLinkProps: (props: any) => {};
+export declare const getULinkProps: (props: any) => {};

package/dist/runtime/utils/link.mjs

@@ -0,0 +1,111 @@
+export const nuxtLinkProps = {
+  to: {
+    type: [String, Object],
+    default: void 0
+  },
+  href: {
+    type: [String, Object],
+    default: void 0
+  },
+  // Attributes
+  target: {
+    type: String,
+    default: void 0
+  },
+  rel: {
+    type: String,
+    default: void 0
+  },
+  noRel: {
+    type: Boolean,
+    default: void 0
+  },
+  // Prefetching
+  prefetch: {
+    type: Boolean,
+    default: void 0
+  },
+  noPrefetch: {
+    type: Boolean,
+    default: void 0
+  },
+  // Styling
+  activeClass: {
+    type: String,
+    default: void 0
+  },
+  exactActiveClass: {
+    type: String,
+    default: void 0
+  },
+  prefetchedClass: {
+    type: String,
+    default: void 0
+  },
+  // Vue Router's `<RouterLink>` additional props
+  replace: {
+    type: Boolean,
+    default: void 0
+  },
+  ariaCurrentValue: {
+    type: String,
+    default: void 0
+  },
+  // Edge cases handling
+  external: {
+    type: Boolean,
+    default: void 0
+  }
+};
+const uLinkProps = {
+  as: {
+    type: String,
+    default: "button"
+  },
+  type: {
+    type: String,
+    default: "button"
+  },
+  disabled: {
+    type: Boolean,
+    default: null
+  },
+  active: {
+    type: Boolean,
+    default: void 0
+  },
+  exact: {
+    type: Boolean,
+    default: false
+  },
+  exactQuery: {
+    type: Boolean,
+    default: false
+  },
+  exactHash: {
+    type: Boolean,
+    default: false
+  },
+  inactiveClass: {
+    type: String,
+    default: void 0
+  }
+};
+export const getNuxtLinkProps = (props) => {
+  const keys = Object.keys(nuxtLinkProps);
+  return keys.reduce((acc, key) => {
+    if (props[key] !== void 0) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
+};
+export const getULinkProps = (props) => {
+  const keys = [...Object.keys(nuxtLinkProps), ...Object.keys(uLinkProps)];
+  return keys.reduce((acc, key) => {
+    if (props[key] !== void 0) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
+};

package/dist/runtime/utils/uid.mjs

@@ -1,4 +1,5 @@
 let _id = 0;
 export function uid() {
-  return `nuid-${_id++}`;
+  _id = (_id + 1) % Number.MAX_SAFE_INTEGER;
+  return `nuid-${_id}`;
 }

package/dist/types.d.mts

@@ -1,5 +1,5 @@
 
-import type { ModuleOptions } from './module'
+import type { ModuleOptions } from './module.js'
 
 
 declare module '@nuxt/schema' {
@@ -13,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export type { accordion, alert, avatar, avatarGroup, badge, breadcrumb, button, buttonGroup, card, checkbox, chip, commandPalette, container, contextMenu, divider, dropdown, formGroup, input, kbd, meter, meterGroup, modal, notification, notifications, pagination, popover, progress, radio, radioGroup, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module'
+export type { accordion, alert, avatar, avatarGroup, badge, breadcrumb, button, buttonGroup, card, checkbox, chip, commandPalette, container, contextMenu, divider, dropdown, formGroup, input, inputMenu, kbd, meter, meterGroup, modal, notification, notifications, pagination, popover, progress, radio, radioGroup, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module.js'

package/dist/types.d.ts

@@ -13,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export type { accordion, alert, avatar, avatarGroup, badge, breadcrumb, button, buttonGroup, card, checkbox, chip, commandPalette, container, contextMenu, divider, dropdown, formGroup, input, kbd, meter, meterGroup, modal, notification, notifications, pagination, popover, progress, radio, radioGroup, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module'
+export type { accordion, alert, avatar, avatarGroup, badge, breadcrumb, button, buttonGroup, card, checkbox, chip, commandPalette, container, contextMenu, divider, dropdown, formGroup, input, inputMenu, kbd, meter, meterGroup, modal, notification, notifications, pagination, popover, progress, radio, radioGroup, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module'