@nuxt/ui 4.10.0 → 4.11.0

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>