@nuxt/ui 2.10.0 → 2.11.1

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

@@ -0,0 +1,37 @@
+export default {
+  wrapper: "relative z-50",
+  inner: "fixed inset-0 overflow-y-auto",
+  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 flex flex-col",
+  overlay: {
+    base: "fixed inset-0 transition-opacity",
+    background: "bg-gray-200/75 dark:bg-gray-800/75",
+    // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+    transition: {
+      enter: "ease-out duration-300",
+      enterFrom: "opacity-0",
+      enterTo: "opacity-100",
+      leave: "ease-in duration-200",
+      leaveFrom: "opacity-100",
+      leaveTo: "opacity-0"
+    }
+  },
+  background: "bg-white dark:bg-gray-900",
+  ring: "",
+  rounded: "rounded-lg",
+  shadow: "shadow-xl",
+  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",
+    enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+    enterTo: "opacity-100 translate-y-0 sm:scale-100",
+    leave: "ease-in duration-200",
+    leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
+    leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+  }
+};

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

@@ -0,0 +1,50 @@
+declare const _default: {
+    wrapper: string;
+    container: string;
+    inner: string;
+    title: string;
+    description: string;
+    actions: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    gap: string;
+    ring: string;
+    icon: {
+        base: string;
+        color: string;
+    };
+    avatar: {
+        base: string;
+        size: "md";
+    };
+    progress: {
+        base: string;
+        background: string;
+    };
+    transition: {
+        enterActiveClass: string;
+        enterFromClass: string;
+        enterToClass: string;
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    default: {
+        color: string;
+        icon: null;
+        timeout: number;
+        closeButton: {
+            icon: string;
+            color: "gray";
+            variant: "link";
+            padded: boolean;
+        };
+        actionButton: {
+            size: "xs";
+            color: "white";
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,50 @@
+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",
+  background: "bg-white dark:bg-gray-900",
+  shadow: "shadow-lg",
+  rounded: "rounded-lg",
+  padding: "p-4",
+  gap: "gap-3",
+  ring: "ring-1 ring-gray-200 dark:ring-gray-800",
+  icon: {
+    base: "flex-shrink-0 w-5 h-5",
+    color: "text-{color}-500 dark:text-{color}-400"
+  },
+  avatar: {
+    base: "flex-shrink-0 self-center",
+    size: "md"
+  },
+  progress: {
+    base: "absolute bottom-0 end-0 start-0 h-1",
+    background: "bg-{color}-500 dark:bg-{color}-400"
+  },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: "transform ease-out duration-300 transition",
+    enterFromClass: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2",
+    enterToClass: "translate-y-0 opacity-100 sm:translate-x-0",
+    leaveActiveClass: "transition ease-in duration-100",
+    leaveFromClass: "opacity-100",
+    leaveToClass: "opacity-0"
+  },
+  default: {
+    color: "primary",
+    icon: null,
+    timeout: 5e3,
+    closeButton: {
+      icon: "i-heroicons-x-mark-20-solid",
+      color: "gray",
+      variant: "link",
+      padded: false
+    },
+    actionButton: {
+      size: "xs",
+      color: "white"
+    }
+  }
+};

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    wrapper: string;
+    position: string;
+    width: string;
+    container: string;
+};
+export default _default;

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

@@ -0,0 +1,6 @@
+export default {
+  wrapper: "fixed flex flex-col justify-end z-[55]",
+  position: "bottom-0 end-0",
+  width: "w-full sm:w-96",
+  container: "px-4 sm:px-6 py-6 space-y-3 overflow-y-auto"
+};

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

@@ -0,0 +1,43 @@
+declare const _default: {
+    wrapper: string;
+    container: string;
+    trigger: string;
+    width: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    ring: string;
+    base: string;
+    transition: {
+        enterActiveClass: string;
+        enterFromClass: string;
+        enterToClass: string;
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    overlay: {
+        base: string;
+        background: string;
+        transition: {
+            enterActiveClass: string;
+            enterFromClass: string;
+            enterToClass: string;
+            leaveActiveClass: string;
+            leaveFromClass: string;
+            leaveToClass: string;
+        };
+    };
+    popper: {
+        strategy: string;
+    };
+    arrow: {
+        base: string;
+        ring: string;
+        rounded: string;
+        background: string;
+        shadow: string;
+        placement: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,37 @@
+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",
+  rounded: "rounded-md",
+  ring: "ring-1 ring-gray-200 dark:ring-gray-800",
+  base: "overflow-hidden focus:outline-none relative",
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: "transition ease-out duration-200",
+    enterFromClass: "opacity-0 translate-y-1",
+    enterToClass: "opacity-100 translate-y-0",
+    leaveActiveClass: "transition ease-in duration-150",
+    leaveFromClass: "opacity-100 translate-y-0",
+    leaveToClass: "opacity-0 translate-y-1"
+  },
+  overlay: {
+    base: "fixed inset-0 transition-opacity z-50",
+    background: "bg-gray-200/75 dark:bg-gray-800/75",
+    transition: {
+      enterActiveClass: "ease-out duration-200",
+      enterFromClass: "opacity-0",
+      enterToClass: "opacity-100",
+      leaveActiveClass: "ease-in duration-150",
+      leaveFromClass: "opacity-100",
+      leaveToClass: "opacity-0"
+    }
+  },
+  popper: {
+    strategy: "fixed"
+  },
+  arrow
+};

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

@@ -0,0 +1,32 @@
+declare const _default: {
+    wrapper: string;
+    overlay: {
+        base: string;
+        background: string;
+        transition: {
+            enter: string;
+            enterFrom: string;
+            enterTo: string;
+            leave: string;
+            leaveFrom: string;
+            leaveTo: string;
+        };
+    };
+    base: string;
+    background: string;
+    ring: string;
+    rounded: string;
+    padding: string;
+    shadow: string;
+    width: string;
+    translate: {
+        base: string;
+        left: string;
+        right: string;
+    };
+    transition: {
+        enter: string;
+        leave: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,33 @@
+export default {
+  wrapper: "fixed inset-0 flex z-50",
+  overlay: {
+    base: "fixed inset-0 transition-opacity",
+    background: "bg-gray-200/75 dark:bg-gray-800/75",
+    // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+    transition: {
+      enter: "ease-in-out duration-500",
+      enterFrom: "opacity-0",
+      enterTo: "opacity-100",
+      leave: "ease-in-out duration-500",
+      leaveFrom: "opacity-100",
+      leaveTo: "opacity-0"
+    }
+  },
+  base: "relative flex-1 flex flex-col w-full focus:outline-none",
+  background: "bg-white dark:bg-gray-900",
+  ring: "",
+  rounded: "",
+  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",
+    leave: "transform transition ease-in-out duration-200"
+  }
+};

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

@@ -0,0 +1,33 @@
+declare const _default: {
+    wrapper: string;
+    container: string;
+    width: string;
+    background: string;
+    color: string;
+    shadow: string;
+    rounded: string;
+    ring: string;
+    base: string;
+    shortcuts: string;
+    middot: string;
+    transition: {
+        enterActiveClass: string;
+        enterFromClass: string;
+        enterToClass: string;
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    popper: {
+        strategy: string;
+    };
+    arrow: {
+        base: string;
+        ring: string;
+        rounded: string;
+        background: string;
+        shadow: string;
+        placement: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,27 @@
+import { arrow } from "../popper.mjs";
+export default {
+  wrapper: "relative inline-flex",
+  container: "z-20 group",
+  width: "max-w-xs",
+  background: "bg-white dark:bg-gray-900",
+  color: "text-gray-900 dark:text-white",
+  shadow: "shadow",
+  rounded: "rounded",
+  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",
+    enterFromClass: "opacity-0 translate-y-1",
+    enterToClass: "opacity-100 translate-y-0",
+    leaveActiveClass: "transition ease-in duration-150",
+    leaveFromClass: "opacity-100 translate-y-0",
+    leaveToClass: "opacity-0 translate-y-1"
+  },
+  popper: {
+    strategy: "fixed"
+  },
+  arrow
+};

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

@@ -0,0 +1,8 @@
+export declare const arrow: {
+    base: string;
+    ring: string;
+    rounded: string;
+    background: string;
+    shadow: string;
+    placement: string;
+};

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

@@ -0,0 +1,8 @@
+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",
+  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.d.ts

@@ -2,4 +2,9 @@ import type { Strategy } from '../types';
 export declare function mergeConfig<T>(strategy: Strategy, ...configs: any[]): T;
 export declare function hexToRgb(hex: string): string | null;
 export declare function getSlotsChildren(slots: any): any;
+/**
+ * "123-foo" will be parsed to 123
+ * This is used for the .number modifier in v-model
+ */
+export declare function looseToNumber(val: any): any;
 export * from './lodash';

package/dist/runtime/utils/index.mjs

@@ -6,7 +6,7 @@ const customTwMerge = extendTailwindMerge({
   }
 });
 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.") && typeof obj[key] === "string" && typeof value === "string" && obj[key] && value) {
     obj[key] = customTwMerge(obj[key], value);
     return true;
   }
@@ -27,7 +27,7 @@ export function hexToRgb(hex) {
 }
 export function getSlotsChildren(slots) {
   let children = slots.default?.();
-  if (children.length) {
+  if (children?.length) {
     children = children.flatMap((c) => {
       if (typeof c.type === "symbol") {
         if (typeof c.children === "string") {
@@ -40,6 +40,10 @@ export function getSlotsChildren(slots) {
       return c;
     }).filter(Boolean);
   }
-  return children;
+  return children || [];
+}
+export function looseToNumber(val) {
+  const n = parseFloat(val);
+  return isNaN(n) ? val : n;
 }
 export * from "./lodash.mjs";

package/dist/types.d.mts

@@ -1,5 +1,6 @@
 
-import { ModuleOptions } from './module'
+import type { ModuleOptions } from './module'
+
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['ui']?: Partial<ModuleOptions> }
@@ -12,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { accordion, alert, avatar, avatarGroup, badge, button, buttonGroup, card, checkbox, 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, 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/dist/types.d.ts

@@ -1,5 +1,6 @@
 
-import { ModuleOptions } from './module'
+import type { ModuleOptions } from './module'
+
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['ui']?: Partial<ModuleOptions> }
@@ -12,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { accordion, alert, avatar, avatarGroup, badge, button, buttonGroup, card, checkbox, 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, 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,7 +1,8 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.10.0",
-  "repository": "https://github.com/nuxt/ui",
+  "version": "2.11.1",
+  "repository": "nuxt/ui",
+  "homepage": "https://ui.nuxt.com",
   "license": "MIT",
   "exports": {
     ".": {
@@ -27,45 +28,55 @@
     "lint:fix": "eslint . --fix",
     "typecheck": "vue-tsc --noEmit && nuxi typecheck docs",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare docs",
-    "release": "release-it"
+    "release": "release-it",
+    "test": "vitest"
   },
   "dependencies": {
     "@egoist/tailwindcss-icons": "^1.4.0",
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.16",
-    "@iconify-json/heroicons": "^1.1.13",
-    "@nuxt/kit": "^3.8.0",
-    "@nuxtjs/color-mode": "^3.3.0",
-    "@nuxtjs/tailwindcss": "^6.8.1",
+    "@iconify-json/heroicons": "^1.1.15",
+    "@nuxt/kit": "^3.8.2",
+    "@nuxtjs/color-mode": "^3.3.2",
+    "@nuxtjs/tailwindcss": "^6.10.1",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
-    "@vueuse/core": "^10.5.0",
-    "@vueuse/integrations": "^10.5.0",
-    "@vueuse/math": "^10.5.0",
+    "@vueuse/core": "^10.7.0",
+    "@vueuse/integrations": "^10.7.0",
+    "@vueuse/math": "^10.7.0",
     "defu": "^6.1.3",
     "fuse.js": "^6.6.2",
+    "nuxt-icon": "^0.6.7",
     "ohash": "^1.1.3",
     "pathe": "^1.1.1",
-    "scule": "^1.0.0",
+    "scule": "^1.1.1",
     "tailwind-merge": "^1.14.0",
-    "tailwindcss": "^3.3.5"
+    "tailwindcss": "^3.3.6"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/module-builder": "^0.5.2",
-    "@release-it/conventional-changelog": "^7.0.2",
-    "eslint": "^8.52.0",
+    "@nuxt/module-builder": "^0.5.4",
+    "@release-it/conventional-changelog": "^8.0.1",
+    "eslint": "^8.55.0",
+    "happy-dom": "^12.10.3",
     "joi": "^17.11.0",
-    "nuxt": "^3.8.0",
-    "release-it": "^16.2.1",
-    "typescript": "^5.2.2",
+    "nuxt": "^3.8.2",
+    "nuxt-vitest": "^0.11.5",
+    "release-it": "^17.0.0",
+    "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
-    "valibot": "^0.19.0",
-    "vue-tsc": "^1.8.21",
+    "valibot": "^0.21.0",
+    "vitest": "^0.33.0",
+    "vue-tsc": "^1.8.25",
     "yup": "^1.3.2",
     "zod": "^3.22.4"
+  },
+  "resolutions": {
+    "@nuxt/kit": "3.8.2",
+    "@nuxt/schema": "3.8.2",
+    "vue": "3.3.8"
   }
 }