@nuxt/ui 2.8.0 → 2.9.0

package/dist/runtime/{app.config.mjs → ui.config.mjs}

@@ -1,4 +1,4 @@
-const table = {
+export const table = {
   wrapper: "relative overflow-x-auto",
   base: "min-w-full table-fixed",
   divide: "divide-y divide-gray-300 dark:divide-gray-700",
@@ -23,6 +23,9 @@ const table = {
     font: "",
     size: "text-sm"
   },
+  checkbox: {
+    padding: "ps-4"
+  },
   loadingState: {
     wrapper: "flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14",
     label: "text-sm text-center text-gray-900 dark:text-white",
@@ -54,7 +57,7 @@ const table = {
     }
   }
 };
-const avatar = {
+export const avatar = {
   wrapper: "relative inline-flex items-center justify-center flex-shrink-0",
   background: "bg-gray-100 dark:bg-gray-800",
   rounded: "rounded-full",
@@ -113,12 +116,12 @@ const avatar = {
     chipPosition: "top-right"
   }
 };
-const avatarGroup = {
-  wrapper: "flex flex-row-reverse justify-end",
+export const avatarGroup = {
+  wrapper: "inline-flex flex-row-reverse justify-end",
   ring: "ring-2 ring-white dark:ring-gray-900",
   margin: "-me-1.5 first:me-0"
 };
-const badge = {
+export const badge = {
   base: "inline-flex items-center",
   rounded: "rounded-md",
   font: "font-medium",
@@ -151,7 +154,7 @@ const badge = {
     color: "primary"
   }
 };
-const button = {
+export const button = {
   base: "focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0",
   font: "font-medium",
   rounded: "rounded-md",
@@ -227,12 +230,15 @@ const button = {
     loadingIcon: "i-heroicons-arrow-path-20-solid"
   }
 };
-const buttonGroup = {
-  wrapper: "inline-flex -space-x-px",
+export const buttonGroup = {
+  wrapper: {
+    horizontal: "inline-flex -space-x-px",
+    vertical: "inline-flex flex-col -space-y-px"
+  },
   rounded: "rounded-md",
   shadow: "shadow-sm"
 };
-const dropdown = {
+export const dropdown = {
   wrapper: "relative inline-flex text-left rtl:text-right",
   container: "z-20",
   width: "w-48",
@@ -277,7 +283,7 @@ const dropdown = {
     strategy: "fixed"
   }
 };
-const accordion = {
+export const accordion = {
   wrapper: "w-full flex flex-col",
   item: {
     base: "",
@@ -297,7 +303,7 @@ const accordion = {
     variant: "soft"
   }
 };
-const alert = {
+export const alert = {
   wrapper: "w-full relative overflow-hidden",
   title: "text-sm font-medium",
   description: "mt-1 text-sm leading-4 opacity-90",
@@ -334,7 +340,7 @@ const alert = {
     }
   }
 };
-const kbd = {
+export const kbd = {
   base: "inline-flex items-center justify-center text-gray-900 dark:text-white",
   padding: "px-1",
   size: {
@@ -350,7 +356,7 @@ const kbd = {
     size: "sm"
   }
 };
-const input = {
+export const input = {
   wrapper: "relative",
   base: "relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0",
   rounded: "rounded-md",
@@ -454,7 +460,7 @@ const input = {
     loadingIcon: "i-heroicons-arrow-path-20-solid"
   }
 };
-const formGroup = {
+export const formGroup = {
   wrapper: "",
   label: {
     wrapper: "flex content-center items-center justify-between",
@@ -474,9 +480,12 @@ const formGroup = {
   description: "text-gray-500 dark:text-gray-400",
   hint: "text-gray-500 dark:text-gray-400",
   help: "mt-2 text-gray-500 dark:text-gray-400",
-  error: "mt-2 text-red-500 dark:text-red-400"
+  error: "mt-2 text-red-500 dark:text-red-400",
+  default: {
+    size: "sm"
+  }
 };
-const textarea = {
+export const textarea = {
   ...input,
   default: {
     size: "sm",
@@ -484,7 +493,7 @@ const textarea = {
     variant: "outline"
   }
 };
-const select = {
+export const select = {
   ...input,
   placeholder: "text-gray-900 dark:text-white",
   default: {
@@ -495,7 +504,7 @@ const select = {
     trailingIcon: "i-heroicons-chevron-down-20-solid"
   }
 };
-const selectMenu = {
+export const selectMenu = {
   container: "z-20",
   width: "w-full",
   height: "max-h-60",
@@ -549,7 +558,7 @@ const selectMenu = {
     selectedIcon: "i-heroicons-check-20-solid"
   }
 };
-const radio = {
+export const radio = {
   wrapper: "relative flex items-start",
   base: "h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent",
   color: "text-{color}-500 dark:text-{color}-400",
@@ -563,7 +572,7 @@ const radio = {
     color: "primary"
   }
 };
-const checkbox = {
+export const checkbox = {
   wrapper: "relative flex items-start",
   base: "h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent",
   rounded: "rounded",
@@ -578,7 +587,7 @@ const checkbox = {
     color: "primary"
   }
 };
-const toggle = {
+export const toggle = {
   base: "relative inline-flex h-5 w-9 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none",
   rounded: "rounded-full",
   ring: "focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
@@ -602,7 +611,7 @@ const toggle = {
     color: "primary"
   }
 };
-const range = {
+export const range = {
   wrapper: "relative w-full flex items-center",
   base: "w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group",
   rounded: "rounded-lg",
@@ -630,13 +639,13 @@ const range = {
     }
   },
   track: {
-    base: "[&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-slider-runnable-track]:group-disabled:bg-opacity-50",
-    background: "[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-slider-runnable-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-slider-runnable-track]:dark:bg-gray-700",
-    rounded: "[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-slider-runnable-track]:rounded-lg",
+    base: "[&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-range-track]:group-disabled:bg-opacity-50",
+    background: "[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-range-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-range-track]:dark:bg-gray-700",
+    rounded: "[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg",
     size: {
-      sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-moz-slider-runnable-track]:h-1",
-      md: "[&::-webkit-slider-runnable-track]:h-2 [&::-moz-slider-runnable-track]:h-2",
-      lg: "[&::-webkit-slider-runnable-track]:h-3 [&::-moz-slider-runnable-track]:h-3"
+      sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1",
+      md: "[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2",
+      lg: "[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3"
     }
   },
   size: {
@@ -649,7 +658,7 @@ const range = {
     color: "primary"
   }
 };
-const card = {
+export const card = {
   base: "overflow-hidden",
   background: "bg-white dark:bg-gray-900",
   divide: "divide-y divide-gray-200 dark:divide-gray-800",
@@ -672,17 +681,17 @@ const card = {
     padding: "px-4 py-4 sm:px-6"
   }
 };
-const container = {
+export const container = {
   base: "mx-auto",
   padding: "px-4 sm:px-6 lg:px-8",
   constrained: "max-w-7xl"
 };
-const skeleton = {
+export const skeleton = {
   base: "animate-pulse",
   background: "bg-gray-100 dark:bg-gray-800",
   rounded: "rounded-md"
 };
-const verticalNavigation = {
+export const verticalNavigation = {
   wrapper: "relative",
   base: "group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75",
   ring: "focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
@@ -709,7 +718,7 @@ const verticalNavigation = {
     inactive: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900"
   }
 };
-const commandPalette = {
+export const commandPalette = {
   wrapper: "flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800",
   container: "relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2",
   input: {
@@ -776,7 +785,7 @@ const commandPalette = {
     selectedIcon: "i-heroicons-check-20-solid"
   }
 };
-const pagination = {
+export const pagination = {
   wrapper: "flex items-center -space-x-px",
   base: "",
   rounded: "first:rounded-s-md last:rounded-e-md",
@@ -800,7 +809,7 @@ const pagination = {
     }
   }
 };
-const tabs = {
+export const tabs = {
   wrapper: "relative space-y-2",
   container: "relative w-full",
   base: "focus:outline-none",
@@ -820,7 +829,7 @@ const tabs = {
       shadow: "shadow-sm"
     },
     tab: {
-      base: "relative inline-flex items-center justify-center flex-shrink-0 w-full whitespace-nowrap focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out",
+      base: "relative inline-flex items-center justify-center flex-shrink-0 w-full whitespace-nowrap ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out",
       background: "",
       active: "text-gray-900 dark:text-white",
       inactive: "text-gray-500 dark:text-gray-400",
@@ -833,7 +842,7 @@ const tabs = {
     }
   }
 };
-const modal = {
+export const modal = {
   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",
@@ -869,7 +878,7 @@ const modal = {
     leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
   }
 };
-const slideover = {
+export const slideover = {
   wrapper: "fixed inset-0 flex z-50",
   overlay: {
     base: "fixed inset-0 transition-opacity",
@@ -897,7 +906,7 @@ const slideover = {
     leave: "transform transition ease-in-out duration-200"
   }
 };
-const tooltip = {
+export const tooltip = {
   wrapper: "relative inline-flex",
   container: "z-20",
   width: "max-w-xs",
@@ -921,7 +930,7 @@ const tooltip = {
     strategy: "fixed"
   }
 };
-const popover = {
+export const popover = {
   wrapper: "relative",
   container: "z-20",
   width: "",
@@ -943,7 +952,7 @@ const popover = {
     strategy: "fixed"
   }
 };
-const contextMenu = {
+export const contextMenu = {
   wrapper: "relative",
   container: "z-20",
   width: "",
@@ -966,7 +975,7 @@ const contextMenu = {
     scroll: false
   }
 };
-const notification = {
+export const notification = {
   wrapper: "w-full pointer-events-auto",
   container: "relative overflow-hidden",
   title: "text-sm font-medium text-gray-900 dark:text-white",
@@ -1012,46 +1021,9 @@ const notification = {
     }
   }
 };
-const notifications = {
+export const notifications = {
   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"
 };
-export default {
-  ui: {
-    table,
-    avatar,
-    avatarGroup,
-    badge,
-    button,
-    buttonGroup,
-    dropdown,
-    kbd,
-    accordion,
-    alert,
-    input,
-    formGroup,
-    textarea,
-    select,
-    selectMenu,
-    checkbox,
-    radio,
-    toggle,
-    range,
-    card,
-    container,
-    skeleton,
-    verticalNavigation,
-    commandPalette,
-    pagination,
-    tabs,
-    modal,
-    slideover,
-    popover,
-    tooltip,
-    contextMenu,
-    notification,
-    notifications
-  }
-};

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

@@ -1,11 +1,5 @@
-export declare const defuTwMerge: <Source extends {
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-}, Defaults extends ({
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} | (number | boolean | any[] | Record<never, any> | null | undefined))[]>(source: Source, ...defaults: Defaults) => import("defu").Defu<Source, Defaults>;
-export declare const hexToRgb: (hex: string) => string | null;
-export declare const getSlotsChildren: (slots: any) => any;
+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;
+export * from './lodash';

package/dist/runtime/utils/index.mjs

@@ -1,20 +1,31 @@
-import { createDefu } from "defu";
-import { twMerge } from "tailwind-merge";
-export const defuTwMerge = createDefu((obj, key, value) => {
-  if (typeof obj[key] === "string" && typeof value === "string" && obj[key] && value) {
-    obj[key] = twMerge(obj[key], value);
+import { defu, createDefu } from "defu";
+import { extendTailwindMerge } from "tailwind-merge";
+const customTwMerge = extendTailwindMerge({
+  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) {
+    obj[key] = customTwMerge(obj[key], value);
     return true;
   }
 });
-export const hexToRgb = (hex) => {
+export function mergeConfig(strategy, ...configs) {
+  if (strategy === "override") {
+    return defu({}, ...configs);
+  }
+  return defuTwMerge({}, ...configs);
+}
+export function hexToRgb(hex) {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
   hex = hex.replace(shorthandRegex, function(_, r, g, b) {
     return r + r + g + g + b + b;
   });
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
-};
-export const getSlotsChildren = (slots) => {
+}
+export function getSlotsChildren(slots) {
   let children = slots.default?.();
   if (children.length) {
     children = children.flatMap((c) => {
@@ -30,4 +41,5 @@ export const getSlotsChildren = (slots) => {
     }).filter(Boolean);
   }
   return children;
-};
+}
+export * from "./lodash.mjs";

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

@@ -0,0 +1,2 @@
+export declare function omit<T extends Record<string, any>, K extends keyof T>(object: T, keysToOmit: K[] | any[]): Pick<T, Exclude<keyof T, K>>;
+export declare function get(object: Record<string, any>, path: (string | number)[] | string, defaultValue?: any): any;

package/dist/runtime/utils/lodash.mjs

@@ -0,0 +1,23 @@
+export function omit(object, keysToOmit) {
+  const result = { ...object };
+  for (const key of keysToOmit) {
+    delete result[key];
+  }
+  return result;
+}
+export function get(object, path, defaultValue) {
+  if (typeof path === "string") {
+    path = path.split(".").map((key) => {
+      const numKey = Number(key);
+      return isNaN(numKey) ? key : numKey;
+    });
+  }
+  let result = object;
+  for (const key of path) {
+    if (result === void 0 || result === null) {
+      return defaultValue;
+    }
+    result = result[key];
+  }
+  return result !== void 0 ? result : defaultValue;
+}

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

@@ -0,0 +1 @@
+export declare function uid(): string;

package/dist/runtime/utils/uid.mjs

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

package/dist/types.d.mts

@@ -12,4 +12,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { ModuleOptions, default } from './module'
+export { accordion, alert, avatar, avatarGroup, badge, button, buttonGroup, card, checkbox, commandPalette, container, contextMenu, dropdown, formGroup, input, kbd, modal, notification, notifications, pagination, popover, radio, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module'

package/dist/types.d.ts

@@ -12,4 +12,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { ModuleOptions, default } from './module'
+export { accordion, alert, avatar, avatarGroup, badge, button, buttonGroup, card, checkbox, commandPalette, container, contextMenu, dropdown, formGroup, input, kbd, modal, notification, notifications, pagination, popover, radio, 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.8.0",
+  "version": "2.9.0",
   "repository": "https://github.com/nuxt/ui",
   "license": "MIT",
   "exports": {
@@ -25,15 +25,16 @@
     "build:docs": "nuxi generate docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "nuxi typecheck",
-    "prepare": "nuxi prepare docs",
+    "typecheck": "vue-tsc --noEmit && nuxi typecheck docs",
+    "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare docs",
     "release": "release-it"
   },
   "dependencies": {
-    "@egoist/tailwindcss-icons": "^1.1.0",
+    "@egoist/tailwindcss-icons": "^1.2.0",
+    "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.16",
     "@iconify-json/heroicons": "^1.1.12",
-    "@nuxt/kit": "^3.7.1",
+    "@nuxt/kit": "^3.7.4",
     "@nuxtjs/color-mode": "^3.3.0",
     "@nuxtjs/tailwindcss": "^6.8.0",
     "@popperjs/core": "^2.11.8",
@@ -46,28 +47,25 @@
     "@vueuse/math": "^10.4.1",
     "defu": "^6.1.2",
     "fuse.js": "^6.6.2",
-    "lodash-es": "^4.17.21",
+    "ohash": "^1.1.3",
+    "pathe": "^1.1.1",
+    "scule": "^1.0.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/module-builder": "^0.5.1",
-    "@release-it/conventional-changelog": "^7.0.1",
-    "eslint": "^8.48.0",
-    "joi": "^17.10.1",
-    "nuxt": "^3.7.1",
-    "release-it": "^16.1.5",
+    "@nuxt/module-builder": "^0.5.2",
+    "@release-it/conventional-changelog": "^7.0.2",
+    "eslint": "^8.50.0",
+    "joi": "^17.10.2",
+    "nuxt": "^3.7.4",
+    "release-it": "^16.2.1",
     "typescript": "^5.2.2",
     "unbuild": "^2.0.0",
-    "vue-tsc": "^1.8.10",
-    "yup": "^1.2.0",
-    "zod": "^3.22.2",
-    "valibot": "^0.13.1"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "nuxt-component-meta@0.5.3": "patches/nuxt-component-meta@0.5.3.patch"
-    }
+    "valibot": "^0.17.1",
+    "vue-tsc": "^1.8.15",
+    "yup": "^1.3.1",
+    "zod": "^3.22.2"
   }
 }