@json-render/vue 0.18.0 → 0.20.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   schema
-} from "./chunk-WIPZLAF7.mjs";
+} from "./chunk-F4CKBTOP.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,8 +1268,11 @@ import {
   resolveElementProps,
   resolveBindings,
   resolveActionParam,
+  resolveRepeatItemStatePath,
+  resolveRepeatStatePath,
   evaluateVisibility as evaluateVisibility2,
   getByPath as getByPath3,
+  createDirectiveRegistry,
   isDevtoolsActive,
   subscribeDevtoolsActive
 } from "@json-render/core";
@@ -1297,6 +1298,29 @@ function useFunctions() {
     computed6(() => EMPTY_FUNCTIONS)
   );
 }
+var DIRECTIVES_KEY = /* @__PURE__ */ Symbol("json-render:directives");
+var DirectivesProvider = defineComponent6({
+  name: "DirectivesProvider",
+  props: {
+    directives: {
+      type: Array,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const registry = computed6(
+      () => props.directives ? createDirectiveRegistry(props.directives) : void 0
+    );
+    provide6(DIRECTIVES_KEY, registry);
+    return () => slots.default?.();
+  }
+});
+function useDirectives() {
+  return inject6(
+    DIRECTIVES_KEY,
+    computed6(() => void 0)
+  );
+}
 var ElementErrorBoundary = defineComponent6({
   name: "ElementErrorBoundary",
   props: {
@@ -1384,6 +1408,7 @@ var ElementRenderer = defineComponent6({
     const { execute } = useActions();
     const { getSnapshot, state: watchState } = useStateStore();
     const functions = useFunctions();
+    const directives = useDirectives();
     const fullCtx = computed6(() => {
       const base = repeatScope ? {
         ...visibilityCtx.value,
@@ -1392,6 +1417,7 @@ var ElementRenderer = defineComponent6({
         repeatBasePath: repeatScope.basePath
       } : { ...visibilityCtx.value };
       base.functions = functions.value;
+      base.directives = directives.value;
       return base;
     });
     const emitEvent = async (eventName) => {
@@ -1550,10 +1576,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) => {
@@ -1562,7 +1598,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];
@@ -1671,6 +1712,10 @@ var JSONUIProvider = defineComponent6({
       type: Object,
       default: void 0
     },
+    directives: {
+      type: Array,
+      default: void 0
+    },
     onStateChange: {
       type: Function,
       default: void 0
@@ -1698,10 +1743,16 @@ var JSONUIProvider = defineComponent6({
                     FunctionsProvider,
                     { functions: props.functions },
                     {
-                      default: () => [
-                        slots.default?.(),
-                        h2(ConfirmationDialogManager)
-                      ]
+                      default: () => h2(
+                        DirectivesProvider,
+                        { directives: props.directives },
+                        {
+                          default: () => [
+                            slots.default?.(),
+                            h2(ConfirmationDialogManager)
+                          ]
+                        }
+                      )
                     }
                   )
                 }
@@ -1807,6 +1858,10 @@ function createRenderer(catalog, components) {
         type: Object,
         default: void 0
       },
+      directives: {
+        type: Array,
+        default: void 0
+      },
       loading: {
         type: Boolean,
         default: void 0
@@ -1845,15 +1900,21 @@ function createRenderer(catalog, components) {
                       FunctionsProvider,
                       { functions: rendererProps.functions },
                       {
-                        default: () => [
-                          h2(Renderer, {
-                            spec: rendererProps.spec,
-                            registry,
-                            loading: rendererProps.loading,
-                            fallback: rendererProps.fallback
-                          }),
-                          h2(ConfirmationDialogManager)
-                        ]
+                        default: () => h2(
+                          DirectivesProvider,
+                          { directives: rendererProps.directives },
+                          {
+                            default: () => [
+                              h2(Renderer, {
+                                spec: rendererProps.spec,
+                                registry,
+                                loading: rendererProps.loading,
+                                fallback: rendererProps.fallback
+                              }),
+                              h2(ConfirmationDialogManager)
+                            ]
+                          }
+                        )
                       }
                     )
                   }