@nuxt/ui 2.11.1 → 2.12.0

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.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;
   }

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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "license": "MIT",
@@ -32,51 +32,54 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@egoist/tailwindcss-icons": "^1.4.0",
+    "@egoist/tailwindcss-icons": "^1.7.2",
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.16",
-    "@iconify-json/heroicons": "^1.1.15",
-    "@nuxt/kit": "^3.8.2",
+    "@iconify-json/heroicons": "^1.1.19",
+    "@nuxt/kit": "^3.9.1",
     "@nuxtjs/color-mode": "^3.3.2",
-    "@nuxtjs/tailwindcss": "^6.10.1",
+    "@nuxtjs/tailwindcss": "^6.10.3",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
-    "@vueuse/core": "^10.7.0",
-    "@vueuse/integrations": "^10.7.0",
-    "@vueuse/math": "^10.7.0",
-    "defu": "^6.1.3",
+    "@vueuse/core": "^10.7.1",
+    "@vueuse/integrations": "^10.7.1",
+    "@vueuse/math": "^10.7.1",
+    "defu": "^6.1.4",
     "fuse.js": "^6.6.2",
-    "nuxt-icon": "^0.6.7",
+    "nuxt-icon": "^0.6.8",
     "ohash": "^1.1.3",
     "pathe": "^1.1.1",
     "scule": "^1.1.1",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss": "^3.3.6"
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/module-builder": "^0.5.4",
+    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/test-utils": "^3.9.0",
     "@release-it/conventional-changelog": "^8.0.1",
-    "eslint": "^8.55.0",
+    "@vue/test-utils": "^2.4.3",
+    "eslint": "^8.56.0",
     "happy-dom": "^12.10.3",
     "joi": "^17.11.0",
-    "nuxt": "^3.8.2",
-    "nuxt-vitest": "^0.11.5",
-    "release-it": "^17.0.0",
+    "nuxt": "^3.9.1",
+    "release-it": "^17.0.1",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
-    "valibot": "^0.21.0",
-    "vitest": "^0.33.0",
-    "vue-tsc": "^1.8.25",
-    "yup": "^1.3.2",
+    "valibot": "^0.25.0",
+    "vitest": "^1.1.3",
+    "vitest-environment-nuxt": "^1.0.0",
+    "vue-tsc": "^1.8.27",
+    "yup": "^1.3.3",
     "zod": "^3.22.4"
   },
   "resolutions": {
-    "@nuxt/kit": "3.8.2",
-    "@nuxt/schema": "3.8.2",
-    "vue": "3.3.8"
+    "@nuxt/kit": "3.9.1",
+    "@nuxt/schema": "3.9.1",
+    "vue": "3.3.13",
+    "tailwindcss": "3.4.1"
   }
 }