@json-render/vue 0.19.0 → 0.21.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   schema
-} from "./chunk-WIPZLAF7.mjs";
+} from "./chunk-34A2QV2X.mjs";
 
 // src/composables/state.ts
 import {
@@ -534,9 +534,8 @@ var ActionProvider = defineComponent4({
               handler,
               setState: set,
               navigate: props.navigate,
-              executeAction: async (name) => {
-                const subBinding = { action: name };
-                await execute(subBinding);
+              executeAction: async (binding2) => {
+                await execute(binding2);
               }
             });
           } finally {
@@ -555,9 +554,8 @@ var ActionProvider = defineComponent4({
             handler,
             setState: set,
             navigate: props.navigate,
-            executeAction: async (name) => {
-              const subBinding = { action: name };
-              await execute(subBinding);
+            executeAction: async (binding2) => {
+              await execute(binding2);
             }
           });
         } finally {
@@ -1270,12 +1268,15 @@ import {
   resolveElementProps,
   resolveBindings,
   resolveActionParam,
+  resolveRepeatItemStatePath,
+  resolveRepeatStatePath,
   evaluateVisibility as evaluateVisibility2,
   getByPath as getByPath3,
   createDirectiveRegistry,
   isDevtoolsActive,
   subscribeDevtoolsActive
 } from "@json-render/core";
+var registryMetadata = /* @__PURE__ */ new WeakMap();
 var EMPTY_FUNCTIONS = {};
 var FUNCTIONS_KEY = /* @__PURE__ */ Symbol("json-render:functions");
 var FunctionsProvider = defineComponent6({
@@ -1500,18 +1501,28 @@ var ElementRenderer = defineComponent6({
         );
         return null;
       }
-      const childrenVNodes = resolvedElement.repeat ? h2(RepeatChildren, {
-        element: resolvedElement,
-        spec: props.spec,
-        registry: props.registry,
-        loading: props.loading,
-        fallback: props.fallback
-      }) : resolvedElement.children?.map((childKey) => {
+      const metadata = registryMetadata.get(props.registry)?.[resolvedElement.type];
+      if (resolvedElement.slots && metadata?.slots) {
+        const availableSlots = new Set(metadata.slots);
+        for (const slotName of Object.keys(resolvedElement.slots)) {
+          if (slotName === "default") {
+            console.warn(
+              `[json-render] Component "${resolvedElement.type}" uses slots.default. Use "children" for default slot content.`
+            );
+          } else if (!availableSlots.has(slotName)) {
+            console.warn(
+              `[json-render] Unknown slot "${slotName}" on component "${resolvedElement.type}". Available slots: ${metadata.slots.join(", ")}`
+            );
+          }
+        }
+      }
+      const renderChildKeys = (childKeys, slotName) => childKeys.map((childKey) => {
         const childElement = props.spec.elements[childKey];
         if (!childElement) {
           if (!props.loading) {
+            const location = slotName ? `in slot "${slotName}" of "${resolvedElement.type}"` : `as child of "${resolvedElement.type}"`;
             console.warn(
-              `[json-render] Missing element "${childKey}" referenced as child of "${resolvedElement.type}". This element will not render.`
+              `[json-render] Missing element "${childKey}" referenced ${location}. This element will not render.`
             );
           }
           return null;
@@ -1525,7 +1536,20 @@ var ElementRenderer = defineComponent6({
           loading: props.loading,
           fallback: props.fallback
         });
-      }).filter((n) => n !== null) ?? void 0;
+      }).filter((node) => node !== null);
+      const childrenVNodes = resolvedElement.repeat ? h2(RepeatChildren, {
+        element: resolvedElement,
+        spec: props.spec,
+        registry: props.registry,
+        loading: props.loading,
+        fallback: props.fallback
+      }) : resolvedElement.children ? renderChildKeys(resolvedElement.children) : void 0;
+      const namedSlots = resolvedElement.slots ? Object.fromEntries(
+        Object.entries(resolvedElement.slots).filter(([slotName]) => slotName !== "default").map(([slotName, childKeys]) => [
+          slotName,
+          () => renderChildKeys(childKeys, slotName)
+        ])
+      ) : {};
       const componentVNode = h2(
         Component,
         {
@@ -1535,7 +1559,7 @@ var ElementRenderer = defineComponent6({
           bindings: elementBindings,
           loading: props.loading
         },
-        { default: () => childrenVNodes }
+        { default: () => childrenVNodes, ...namedSlots }
       );
       const tagged = devtoolsActive.value && props.elementKey ? h2(
         "span",
@@ -1576,10 +1600,20 @@ var RepeatChildren = defineComponent6({
   },
   setup(props) {
     const { state } = useStateStore();
+    const parentScope = useRepeatScope();
     return () => {
       const repeat = props.element.repeat;
       if (!repeat?.statePath) return null;
-      const statePath = repeat.statePath;
+      const statePath = resolveRepeatStatePath(
+        repeat.statePath,
+        parentScope?.basePath
+      );
+      if (statePath === void 0) {
+        console.warn(
+          "[json-render/vue] $item in repeat.statePath used outside of a repeat scope"
+        );
+        return null;
+      }
       const raw = getByPath3(state.value, statePath);
       const items = Array.isArray(raw) ? raw : [];
       return items.map((itemValue, index) => {
@@ -1588,7 +1622,12 @@ var RepeatChildren = defineComponent6({
         ) : String(index);
         return h2(
           RepeatScopeProvider,
-          { key, item: itemValue, index, basePath: `${statePath}/${index}` },
+          {
+            key,
+            item: itemValue,
+            index,
+            basePath: resolveRepeatItemStatePath(statePath, index)
+          },
           {
             default: () => props.element.children?.map((childKey) => {
               const childElement = props.spec.elements[childKey];
@@ -1749,7 +1788,7 @@ var JSONUIProvider = defineComponent6({
     );
   }
 });
-function defineRegistry(_catalog, options) {
+function defineRegistry(catalog, options) {
   const registry = {};
   if (options.components) {
     for (const [name, componentFn] of Object.entries(options.components)) {
@@ -1781,6 +1820,7 @@ function defineRegistry(_catalog, options) {
           return () => componentFn({
             props: registryProps.element.props,
             children: slots.default?.(),
+            slots,
             emit: registryProps.emit,
             on: registryProps.on,
             bindings: registryProps.bindings,
@@ -1790,6 +1830,10 @@ function defineRegistry(_catalog, options) {
       });
     }
   }
+  const catalogComponents = catalog.data?.components;
+  if (catalogComponents) {
+    registryMetadata.set(registry, catalogComponents);
+  }
   const actionMap = options.actions ? Object.entries(options.actions) : [];
   const handlers = (getSetState, getState) => {
     const result = {};
@@ -1816,6 +1860,10 @@ function defineRegistry(_catalog, options) {
 }
 function createRenderer(catalog, components) {
   const registry = components;
+  const catalogComponents = catalog.data.components;
+  if (catalogComponents) {
+    registryMetadata.set(registry, catalogComponents);
+  }
   return defineComponent6({
     name: "CatalogRenderer",
     props: {