@nuxt/ui 4.10.0 → 4.11.1

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

@@ -1,8 +1,12 @@
 import type { ClassValue, TVVariants, TVCompoundVariants, TVDefaultVariants } from 'tailwind-variants';
 /**
  * A function form for a slot class that **replaces** the slot's default classes
- * instead of merging onto them. It receives the slot's fully resolved default
- * class string and returns the classes to use in its place.
+ * instead of merging onto them, returning the classes to use in their place.
+ * In `app.config.ui` it receives the slot's own theme classes and replaces only
+ * those — `variants` and `compoundVariants` still apply on top. In `:ui` / `class`
+ * it runs after variant resolution, so it receives the fully resolved class
+ * string and replaces it, keeping only the plain classes passed alongside the
+ * replacer (e.g. `[() => 'text-xl', 'opacity-50']` resolves to both).
  * @example title: defaults => 'text-xl font-bold'
  */
 export type SlotClassReplacer = (defaults: string) => ClassValue;

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

@@ -4,6 +4,6 @@ import type { FormSchema, ValidateReturnSchema } from '../types/form';
 export declare function isSuperStructSchema(schema: any): schema is Struct<any, any>;
 export declare function isStandardSchema(schema: any): schema is StandardSchemaV1;
 export declare function validateStandardSchema(state: any, schema: StandardSchemaV1): Promise<ValidateReturnSchema<typeof state>>;
-export declare function validateSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>>;
+export declare function validateSchema<T extends object>(state: T, _schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>>;
 export declare function getAtPath<T extends object>(data: T, path?: string): any;
 export declare function setAtPath<T extends object>(data: T, path: string, value: any): T;

package/dist/runtime/utils/form.js

@@ -1,3 +1,4 @@
+import { toRaw } from "vue";
 export function isSuperStructSchema(schema) {
   return "schema" in schema && typeof schema.coercer === "function" && typeof schema.validator === "function" && typeof schema.refiner === "function";
 }
@@ -37,7 +38,8 @@ async function validateSuperstructSchema(state, schema) {
     result
   };
 }
-export function validateSchema(state, schema) {
+export function validateSchema(state, _schema) {
+  const schema = toRaw(_schema);
   if (isStandardSchema(schema)) {
     return validateStandardSchema(state, schema);
   } else if (isSuperStructSchema(schema)) {

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

@@ -0,0 +1 @@
+export declare const linkKeys: readonly ["active", "activeClass", "ariaCurrentValue", "as", "disabled", "download", "exact", "exactActiveClass", "exactHash", "exactQuery", "external", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "href", "hreflang", "inactiveClass", "locale", "media", "noPrefetch", "noRel", "onClick", "ping", "prefetch", "prefetchOn", "prefetchedClass", "referrerpolicy", "rel", "replace", "target", "title", "to", "trailingSlash", "type", "viewTransition"];

package/dist/runtime/utils/link-keys.js

@@ -0,0 +1,40 @@
+export const linkKeys = [
+  "active",
+  "activeClass",
+  "ariaCurrentValue",
+  "as",
+  "disabled",
+  "download",
+  "exact",
+  "exactActiveClass",
+  "exactHash",
+  "exactQuery",
+  "external",
+  "form",
+  "formaction",
+  "formenctype",
+  "formmethod",
+  "formnovalidate",
+  "formtarget",
+  "href",
+  "hreflang",
+  "inactiveClass",
+  "locale",
+  "media",
+  "noPrefetch",
+  "noRel",
+  "onClick",
+  "ping",
+  "prefetch",
+  "prefetchOn",
+  "prefetchedClass",
+  "referrerpolicy",
+  "rel",
+  "replace",
+  "target",
+  "title",
+  "to",
+  "trailingSlash",
+  "type",
+  "viewTransition"
+];

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

@@ -1,5 +1,6 @@
 import type { LinkProps } from '../components/Link.vue';
-export declare const linkKeys: readonly ["active", "activeClass", "ariaCurrentValue", "as", "disabled", "download", "exact", "exactActiveClass", "exactHash", "exactQuery", "external", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "href", "hreflang", "inactiveClass", "locale", "media", "noPrefetch", "noRel", "onClick", "ping", "prefetch", "prefetchOn", "prefetchedClass", "referrerpolicy", "rel", "replace", "target", "title", "to", "trailingSlash", "type", "viewTransition"];
+import { linkKeys } from './link-keys';
+export { linkKeys };
 export declare function pickLinkProps(link: LinkProps & {
     [key: string]: any;
 }): import("@vueuse/shared").ReactivePickReturn<LinkProps & {

package/dist/runtime/utils/link.js

@@ -1,45 +1,7 @@
 import { reactivePick } from "@vueuse/core";
 import { isEqual, diff } from "ohash/utils";
-export const linkKeys = [
-  "active",
-  "activeClass",
-  "ariaCurrentValue",
-  "as",
-  "disabled",
-  "download",
-  "exact",
-  "exactActiveClass",
-  "exactHash",
-  "exactQuery",
-  "external",
-  "form",
-  "formaction",
-  "formenctype",
-  "formmethod",
-  "formnovalidate",
-  "formtarget",
-  "href",
-  "hreflang",
-  "inactiveClass",
-  "locale",
-  "media",
-  "noPrefetch",
-  "noRel",
-  "onClick",
-  "ping",
-  "prefetch",
-  "prefetchOn",
-  "prefetchedClass",
-  "referrerpolicy",
-  "rel",
-  "replace",
-  "target",
-  "title",
-  "to",
-  "trailingSlash",
-  "type",
-  "viewTransition"
-];
+import { linkKeys } from "./link-keys.js";
+export { linkKeys };
 export function pickLinkProps(link) {
   const keys = Object.keys(link);
   const ariaKeys = keys.filter((key) => key.startsWith("aria-"));

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

@@ -0,0 +1,5 @@
+type IdleCallbackHandle = ReturnType<typeof setTimeout> | number;
+export declare function requestIdleCallback(callback: () => void): IdleCallbackHandle | undefined;
+export declare function cancelIdleCallback(handle: IdleCallbackHandle | undefined): void;
+export declare function observeIntersection(element: Element, callback: () => void): () => void;
+export {};

package/dist/runtime/utils/prefetch.js

@@ -0,0 +1,45 @@
+export function requestIdleCallback(callback) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (typeof window.requestIdleCallback === "function") {
+    return window.requestIdleCallback(callback);
+  }
+  return setTimeout(callback, 1);
+}
+export function cancelIdleCallback(handle) {
+  if (typeof window === "undefined" || handle === void 0) {
+    return;
+  }
+  if (typeof window.cancelIdleCallback === "function") {
+    window.cancelIdleCallback(handle);
+    return;
+  }
+  clearTimeout(handle);
+}
+let observer = null;
+const callbacks = /* @__PURE__ */ new Map();
+export function observeIntersection(element, callback) {
+  if (typeof IntersectionObserver === "undefined") {
+    return () => {
+    };
+  }
+  observer ||= new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      const callback2 = callbacks.get(entry.target);
+      if ((entry.isIntersecting || entry.intersectionRatio > 0) && callback2) {
+        callback2();
+      }
+    }
+  });
+  callbacks.set(element, callback);
+  observer.observe(element);
+  return () => {
+    callbacks.delete(element);
+    observer?.unobserve(element);
+    if (callbacks.size === 0) {
+      observer?.disconnect();
+      observer = null;
+    }
+  };
+}

package/dist/runtime/utils/search.js

@@ -8,32 +8,25 @@ const htmlEscapes = {
 function escapeHTML(str) {
   return str.replace(/[&<>"']/g, (char) => htmlEscapes[char]);
 }
-function isAlreadyEscaped(str) {
-  return /&(?:amp|lt|gt|quot|#39);/.test(str);
-}
-function sanitize(str) {
-  if (isAlreadyEscaped(str)) {
-    return str;
-  }
-  return escapeHTML(str);
-}
 function truncateHTMLFromStart(html, maxLength) {
   let truncated = "";
   let totalLength = 0;
   let insideTag = false;
-  for (let i = html.length - 1; i >= 0; i--) {
-    if (html[i] === ">") {
+  const chars = Array.from(html);
+  for (let i = chars.length - 1; i >= 0; i--) {
+    const char = chars[i];
+    if (char === ">") {
       insideTag = true;
-    } else if (html[i] === "<") {
+    } else if (char === "<") {
       insideTag = false;
-      truncated = html[i] + truncated;
+      truncated = char + truncated;
       continue;
     }
     if (!insideTag) {
       totalLength++;
     }
     if (totalLength <= maxLength) {
-      truncated = html[i] + truncated;
+      truncated = char + truncated;
     } else {
       truncated = "..." + truncated;
       break;
@@ -62,17 +55,17 @@ export function highlight(item, searchTerm, forceKey, omitKeys, useTokenSearch)
       const lastIndiceNextIndex = region[1] + 1;
       const isMatched = lastIndiceNextIndex - region[0] >= minTokenLength;
       content += [
-        sanitize(value.substring(nextUnhighlightedRegionStartingIndex, region[0])),
+        escapeHTML(value.substring(nextUnhighlightedRegionStartingIndex, region[0])),
         isMatched && `<mark>`,
-        sanitize(value.substring(region[0], lastIndiceNextIndex)),
+        escapeHTML(value.substring(region[0], lastIndiceNextIndex)),
         isMatched && "</mark>"
       ].filter(Boolean).join("");
       nextUnhighlightedRegionStartingIndex = lastIndiceNextIndex;
     });
-    content += sanitize(value.substring(nextUnhighlightedRegionStartingIndex));
+    content += escapeHTML(value.substring(nextUnhighlightedRegionStartingIndex));
     const markIndex = content.indexOf("<mark>");
     if (markIndex !== -1) {
-      content = truncateHTMLFromStart(content, content.length - markIndex);
+      content = truncateHTMLFromStart(content, Array.from(content.slice(markIndex)).length);
     }
     return content;
   }

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

@@ -34,7 +34,7 @@ type WideTV = {
  * Wraps `tailwind-variants`' `tv` so slot classes can be **replaced** (not just
  * merged) through a function form — `(defaults) => classes` — in `:ui`, the
  * `class` prop and `app.config.ui`. The wrapper is transparent for every other
- * usage: it preserves the `TVReturnType` (so `extend: tv(theme)` keeps working
+ * usage: it preserves the `TVReturnType` (so `extend: theme` keeps working
  * via property reads) and only intercepts the slot functions on invocation.
  */
 export declare const tv: WideTV;

package/dist/runtime/utils/tv.js

@@ -29,7 +29,44 @@ function plainClasses(value) {
 function applyReplacer(replacer, slotProps, resolveDefaults) {
   return cnMerge(replacer(resolveDefaults()), ...plainClasses(slotProps.class), ...plainClasses(slotProps.className))(config) ?? "";
 }
-function wrapSlots(slots, directives) {
+function isMemoizable(value, depth = 0) {
+  if (value === void 0 || value === null) {
+    return true;
+  }
+  const type = typeof value;
+  if (type === "string" || type === "boolean") {
+    return true;
+  }
+  if (type === "number") {
+    return Number.isFinite(value);
+  }
+  if (Array.isArray(value)) {
+    if (depth >= 4) {
+      return false;
+    }
+    for (const item of value) {
+      if (!isMemoizable(item, depth + 1)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
+function memoKey(slotProps) {
+  const proto = Object.getPrototypeOf(slotProps);
+  if (proto !== Object.prototype && proto !== null) {
+    return void 0;
+  }
+  for (const key of Object.keys(slotProps)) {
+    if (!isMemoizable(slotProps[key])) {
+      return void 0;
+    }
+  }
+  return JSON.stringify(slotProps);
+}
+function wrapSlots(slots) {
+  const memo = /* @__PURE__ */ new Map();
   return new Proxy(slots, {
     get(target, key) {
       const slot = target[key];
@@ -37,52 +74,93 @@ function wrapSlots(slots, directives) {
         return slot;
       }
       return (slotProps = {}) => {
-        const replacer = findReplacer(slotProps.class) ?? findReplacer(slotProps.className) ?? directives?.[key];
+        const replacer = findReplacer(slotProps.class) ?? findReplacer(slotProps.className);
         if (!replacer) {
-          return slot(slotProps);
+          const cacheKey = memoKey(slotProps);
+          if (cacheKey === void 0) {
+            return slot(slotProps);
+          }
+          let cache = memo.get(key);
+          if (!cache) {
+            cache = /* @__PURE__ */ new Map();
+            memo.set(key, cache);
+          }
+          let result = cache.get(cacheKey);
+          if (result === void 0 && !cache.has(cacheKey)) {
+            if (cache.size >= 500) {
+              cache.clear();
+            }
+            result = slot(slotProps);
+            cache.set(cacheKey, result);
+          }
+          return result;
         }
         return applyReplacer(replacer, slotProps, () => slot({ ...slotProps, class: void 0, className: void 0 }));
       };
     }
   });
 }
-function extractDirectives(componentConfig) {
+function defaultClasses(value) {
+  return cnMerge(value)(config) ?? "";
+}
+function resolveReplacers(componentConfig) {
   if (!componentConfig || typeof componentConfig !== "object") {
-    return { config: componentConfig };
-  }
-  let config2 = componentConfig;
-  let directives;
-  if (typeof componentConfig.base === "function") {
-    directives = { base: componentConfig.base };
-    config2 = { ...config2, base: "" };
+    return componentConfig;
   }
   const slots = componentConfig.slots;
-  if (slots && typeof slots === "object") {
-    const replacers = Object.entries(slots).filter(([, value]) => typeof value === "function");
-    if (replacers.length) {
-      directives ??= {};
-      const cleaned = { ...slots };
-      for (const [slot, replacer] of replacers) {
-        directives[slot] = replacer;
-        cleaned[slot] = "";
+  const replacers = slots && typeof slots === "object" ? Object.entries(slots).filter((entry) => typeof entry[1] === "function") : [];
+  const baseReplacer = typeof componentConfig.base === "function" ? componentConfig.base : void 0;
+  if (!replacers.length && !baseReplacer) {
+    return componentConfig;
+  }
+  const extend = componentConfig.extend;
+  const resolved = { ...componentConfig };
+  let extendSlots;
+  let blankExtendBase = false;
+  if (baseReplacer) {
+    resolved.base = baseReplacer(defaultClasses(extend?.slots?.base ?? extend?.base));
+    if (extend?.slots?.base) {
+      extendSlots ??= { ...extend.slots };
+      extendSlots.base = "";
+    }
+    if (extend?.base) {
+      blankExtendBase = true;
+    }
+  }
+  if (replacers.length) {
+    const cleaned = { ...slots };
+    for (const [slot, replacer] of replacers) {
+      cleaned[slot] = replacer(defaultClasses(extend?.slots?.[slot]));
+      if (extend?.slots?.[slot]) {
+        extendSlots ??= { ...extend.slots };
+        extendSlots[slot] = "";
       }
-      config2 = { ...config2, slots: cleaned };
     }
+    resolved.slots = cleaned;
+  }
+  if (extendSlots || blankExtendBase) {
+    const cleanedExtend = { ...extend };
+    if (extendSlots) {
+      cleanedExtend.slots = extendSlots;
+    }
+    if (blankExtendBase) {
+      cleanedExtend.base = "";
+    }
+    resolved.extend = cleanedExtend;
   }
-  return { config: config2, directives };
+  return resolved;
 }
 export const tv = ((componentConfig) => {
-  const { config: cleanConfig, directives } = extractDirectives(componentConfig);
-  const component = baseTv(cleanConfig);
+  const component = baseTv(resolveReplacers(componentConfig));
   return new Proxy(component, {
     apply(target, thisArg, args) {
       const result = Reflect.apply(target, thisArg, args);
       if (result && typeof result === "object") {
-        return wrapSlots(result, directives);
+        return wrapSlots(result);
       }
       if (typeof result === "string") {
         const slotProps = args[0] ?? {};
-        const replacer = findReplacer(slotProps.class) ?? findReplacer(slotProps.className) ?? directives?.base;
+        const replacer = findReplacer(slotProps.class) ?? findReplacer(slotProps.className);
         if (replacer) {
           return applyReplacer(replacer, slotProps, () => Reflect.apply(target, thisArg, [{ ...slotProps, class: void 0, className: void 0 }]));
         }

package/dist/runtime/vue/components/Icon.vue

@@ -4,7 +4,7 @@
 
 <script setup>
 import { computed } from "vue";
-import { Icon as IconifyIcon } from "@iconify/vue";
+import { Icon as IconifyIcon, iconLoaded } from "@iconify/vue";
 import { useAppConfig } from "#imports";
 const props = defineProps({
   name: { type: null, required: true },
@@ -25,16 +25,19 @@ const mode = computed(() => {
 });
 const size = computed(() => props.size || appConfig.icon?.size);
 const customize = computed(() => resolveCustomizeFn(props.customize, appConfig.icon?.customize));
+const icon = computed(() => typeof props.name === "string" ? props.name.replace(/^i-/, "") : "");
+const ssr = computed(() => iconLoaded(icon.value));
 </script>
 
 <template>
   <IconifyIcon
     v-if="typeof name === 'string'"
-    :icon="name.replace(/^i-/, '')"
+    :icon="icon"
     :mode="mode"
     :width="size"
     :height="size"
     :customise="customize"
+    :ssr="ssr"
   />
   <component :is="name" v-else />
 </template>

package/dist/runtime/vue/components/color-mode/ColorModeSelect.vue

@@ -32,6 +32,7 @@ const props = defineProps({
   modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  fixed: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
   filterFields: { type: Array, required: false },
   ignoreFilter: { type: Boolean, required: false },