@nuxt/ui 2.11.0 → 2.12.0

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/layout/divider.d.ts

@@ -17,13 +17,18 @@ declare const _default: {
             horizontal: string;
             vertical: string;
         };
+        type: {
+            solid: string;
+            dotted: string;
+            dashed: string;
+        };
     };
     icon: {
         base: string;
     };
     avatar: {
         base: string;
-        size: string;
+        size: "2xs";
     };
     label: string;
 };

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

@@ -16,6 +16,11 @@ export default {
     size: {
       horizontal: "border-t",
       vertical: "border-s"
+    },
+    type: {
+      solid: "border-solid",
+      dotted: "border-dotted",
+      dashed: "border-dashed"
     }
   },
   icon: {

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: "",
@@ -14,6 +15,6 @@ export default {
   active: "text-primary-500 dark:text-primary-400",
   inactive: " hover:text-gray-700 dark:hover:text-gray-200",
   default: {
-    divider: "i-heroicons-chevron-right-20-solid"
+    divider: "i-heroicons-chevron-right-20-solid rtl:i-heroicons-chevron-left-20-solid"
   }
 };

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

@@ -9,10 +9,14 @@ declare const _default: {
         size: string;
         icon: {
             base: string;
+            loading: string;
             size: string;
             padding: string;
         };
-        closeButton: string;
+        closeButton: {
+            base: string;
+            padding: string;
+        };
     };
     emptyState: {
         wrapper: string;

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

@@ -9,10 +9,14 @@ export default {
     size: "sm:text-sm",
     icon: {
       base: "pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500",
+      loading: "animate-spin",
       size: "h-4 w-4",
       padding: "ps-10"
     },
-    closeButton: "absolute end-4"
+    closeButton: {
+      base: "absolute end-4",
+      padding: "pe-10"
+    }
   },
   emptyState: {
     wrapper: "flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14",

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

@@ -5,28 +5,28 @@ declare const _default: {
     default: {
         size: string;
         activeButton: {
-            color: string;
+            color: "primary";
         };
         inactiveButton: {
-            color: string;
+            color: "white";
         };
         firstButton: {
-            color: string;
+            color: "white";
             class: string;
             icon: string;
         };
         lastButton: {
-            color: string;
+            color: "white";
             class: string;
             icon: string;
         };
         prevButton: {
-            color: string;
+            color: "white";
             class: string;
             icon: string;
         };
         nextButton: {
-            color: string;
+            color: "white";
             class: string;
             icon: string;
         };

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

@@ -17,12 +17,17 @@ declare const _default: {
     };
     avatar: {
         base: string;
-        size: string;
+        size: "3xs";
     };
     badge: {
         base: string;
         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/overlays/contextMenu.mjs

@@ -1,4 +1,4 @@
-import arrow from "../_popperArrow.mjs";
+import { arrow } from "../popper.mjs";
 export default {
   wrapper: "relative",
   container: "z-20 group",

package/dist/runtime/ui.config/overlays/modal.d.ts

@@ -23,6 +23,7 @@ declare const _default: {
     shadow: string;
     width: string;
     height: string;
+    fullscreen: string;
     transition: {
         enter: string;
         enterFrom: string;

package/dist/runtime/ui.config/overlays/modal.mjs

@@ -4,7 +4,7 @@ export default {
   container: "flex min-h-full items-end sm:items-center justify-center text-center",
   padding: "p-4 sm:p-0",
   margin: "sm:my-8",
-  base: "relative text-left rtl:text-right overflow-hidden w-full flex flex-col",
+  base: "relative text-left rtl:text-right overflow-hidden flex flex-col",
   overlay: {
     base: "fixed inset-0 transition-opacity",
     background: "bg-gray-200/75 dark:bg-gray-800/75",
@@ -22,8 +22,9 @@ export default {
   ring: "",
   rounded: "rounded-lg",
   shadow: "shadow-xl",
-  width: "sm:max-w-lg",
+  width: "w-full sm:max-w-lg",
   height: "",
+  fullscreen: "w-screen h-screen",
   // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
   transition: {
     enter: "ease-out duration-300",

package/dist/runtime/ui.config/overlays/notification.d.ts

@@ -1,6 +1,7 @@
 declare const _default: {
     wrapper: string;
     container: string;
+    inner: string;
     title: string;
     description: string;
     actions: string;
@@ -36,13 +37,13 @@ declare const _default: {
         timeout: number;
         closeButton: {
             icon: string;
-            color: string;
-            variant: string;
+            color: "gray";
+            variant: "link";
             padded: boolean;
         };
         actionButton: {
-            size: string;
-            color: string;
+            size: "xs";
+            color: "white";
         };
     };
 };

package/dist/runtime/ui.config/overlays/notification.mjs

@@ -1,6 +1,7 @@
 export default {
   wrapper: "w-full pointer-events-auto",
   container: "relative overflow-hidden",
+  inner: "w-0 flex-1",
   title: "text-sm font-medium text-gray-900 dark:text-white",
   description: "mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400",
   actions: "flex items-center gap-2 mt-3 flex-shrink-0",

package/dist/runtime/ui.config/overlays/popover.d.ts

@@ -1,6 +1,7 @@
 declare const _default: {
     wrapper: string;
     container: string;
+    trigger: string;
     width: string;
     background: string;
     shadow: string;

package/dist/runtime/ui.config/overlays/popover.mjs

@@ -1,7 +1,8 @@
-import arrow from "../_popperArrow.mjs";
+import { arrow } from "../popper.mjs";
 export default {
   wrapper: "relative",
   container: "z-50 group",
+  trigger: "inline-flex w-full",
   width: "",
   background: "bg-white dark:bg-gray-900",
   shadow: "shadow-lg",

package/dist/runtime/ui.config/overlays/slideover.d.ts

@@ -19,6 +19,11 @@ declare const _default: {
     padding: string;
     shadow: string;
     width: string;
+    translate: {
+        base: string;
+        left: string;
+        right: string;
+    };
     transition: {
         enter: string;
         leave: string;

package/dist/runtime/ui.config/overlays/slideover.mjs

@@ -20,6 +20,11 @@ export default {
   padding: "",
   shadow: "shadow-xl",
   width: "w-screen max-w-md",
+  translate: {
+    base: "translate-x-0",
+    left: "-translate-x-full",
+    right: "translate-x-full"
+  },
   // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
   transition: {
     enter: "transform transition ease-in-out duration-300",

package/dist/runtime/ui.config/overlays/tooltip.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
     ring: string;
     base: string;
     shortcuts: string;
+    middot: string;
     transition: {
         enterActiveClass: string;
         enterFromClass: string;

package/dist/runtime/ui.config/overlays/tooltip.mjs

@@ -1,4 +1,4 @@
-import arrow from "../_popperArrow.mjs";
+import { arrow } from "../popper.mjs";
 export default {
   wrapper: "relative inline-flex",
   container: "z-20 group",
@@ -10,6 +10,7 @@ export default {
   ring: "ring-1 ring-gray-200 dark:ring-gray-800",
   base: "[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative",
   shortcuts: "hidden md:inline-flex flex-shrink-0 gap-0.5",
+  middot: "mx-1 text-gray-700 dark:text-gray-200",
   // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
     enterActiveClass: "transition ease-out duration-200",

package/dist/runtime/ui.config/{_popperArrow.d.ts → popper.d.ts}

@@ -1,4 +1,4 @@
-declare const _default: {
+export declare const arrow: {
     base: string;
     ring: string;
     rounded: string;
@@ -6,4 +6,3 @@ declare const _default: {
     shadow: string;
     placement: string;
 };
-export default _default;

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

@@ -0,0 +1,9 @@
+export const arrow = {
+  base: "invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2",
+  ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-800",
+  rounded: "before:rounded-sm",
+  background: "before:bg-gray-200 dark:before:bg-gray-800",
+  shadow: "before:shadow",
+  // 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/ui.css

@@ -1,13 +1 @@
-.dark {
-  color-scheme: dark;
-}
-
-a:focus-visible {
-  @apply outline-primary;
-}
-
-::selection { @apply bg-primary/40; }
-
-select {
-  background-image: none;
-}
+.dark{color-scheme:dark}a:focus-visible{@apply outline-primary}::-moz-selection{@apply bg-primary/40}::selection{@apply bg-primary/40}select{background-image:none}

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" && 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.0",
+  "version": "2.12.0",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "license": "MIT",
@@ -32,53 +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.13",
-    "@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.0",
+    "@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.6.1",
-    "@vueuse/integrations": "^10.6.1",
-    "@vueuse/math": "^10.6.1",
-    "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.6",
+    "nuxt-icon": "^0.6.8",
     "ohash": "^1.1.3",
     "pathe": "^1.1.1",
-    "scule": "^1.1.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss": "^3.3.5"
+    "scule": "^1.1.1",
+    "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",
-    "@testing-library/vue": "^8.0.1",
-    "@vitejs/plugin-vue": "^4.5.0",
-    "eslint": "^8.54.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",
-    "typescript": "^5.3.2",
+    "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.22",
-    "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"
   }
 }

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

@@ -1,8 +0,0 @@
-export default {
-  base: "before:w-2 before:h-2",
-  ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-800",
-  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'
-};