@json-render/vue 0.17.0 → 0.19.0

package/dist/index.d.mts

@@ -1,8 +1,10 @@
 import * as vue from 'vue';
 import { PropType, ShallowRef, ComputedRef, VNode, Ref, Component } from 'vue';
-import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, Spec, FlatElement, SchemaDefinition, ComputedFunction, UIElement } from '@json-render/core';
+import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, Spec, FlatElement, SchemaDefinition, ComputedFunction, DirectiveDefinition, UIElement } from '@json-render/core';
 export { ComputedFunction, Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
 export { VueSchema, VueSpec, schema } from './schema.mjs';
+import * as zod from 'zod';
+import * as zod_v4_core from 'zod/v4/core';
 
 /**
  * State context value
@@ -708,6 +710,8 @@ interface JSONUIProviderProps {
     validationFunctions?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     onStateChange?: (changes: Array<{
         path: string;
         value: unknown;
@@ -745,6 +749,10 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Record<string, ComputedFunction>>;
         default: undefined;
     };
+    directives: {
+        type: PropType<DirectiveDefinition[]>;
+        default: undefined;
+    };
     onStateChange: {
         type: PropType<(changes: Array<{
             path: string;
@@ -783,6 +791,10 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Record<string, ComputedFunction>>;
         default: undefined;
     };
+    directives: {
+        type: PropType<DirectiveDefinition[]>;
+        default: undefined;
+    };
     onStateChange: {
         type: PropType<(changes: Array<{
             path: string;
@@ -800,6 +812,7 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
     handlers: Record<string, (params: Record<string, unknown>) => Promise<unknown> | unknown>;
     navigate: (path: string) => void;
     functions: Record<string, ComputedFunction>;
+    directives: DirectiveDefinition<zod.ZodType<unknown, unknown, zod_v4_core.$ZodTypeInternals<unknown, unknown>>>[];
     validationFunctions: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 /**
@@ -851,6 +864,8 @@ interface CreateRendererProps {
     }>) => void;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     loading?: boolean;
     fallback?: Component;
 }

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 import * as vue from 'vue';
 import { PropType, ShallowRef, ComputedRef, VNode, Ref, Component } from 'vue';
-import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, Spec, FlatElement, SchemaDefinition, ComputedFunction, UIElement } from '@json-render/core';
+import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, Spec, FlatElement, SchemaDefinition, ComputedFunction, DirectiveDefinition, UIElement } from '@json-render/core';
 export { ComputedFunction, Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
 export { VueSchema, VueSpec, schema } from './schema.js';
+import * as zod from 'zod';
+import * as zod_v4_core from 'zod/v4/core';
 
 /**
  * State context value
@@ -708,6 +710,8 @@ interface JSONUIProviderProps {
     validationFunctions?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     onStateChange?: (changes: Array<{
         path: string;
         value: unknown;
@@ -745,6 +749,10 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Record<string, ComputedFunction>>;
         default: undefined;
     };
+    directives: {
+        type: PropType<DirectiveDefinition[]>;
+        default: undefined;
+    };
     onStateChange: {
         type: PropType<(changes: Array<{
             path: string;
@@ -783,6 +791,10 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Record<string, ComputedFunction>>;
         default: undefined;
     };
+    directives: {
+        type: PropType<DirectiveDefinition[]>;
+        default: undefined;
+    };
     onStateChange: {
         type: PropType<(changes: Array<{
             path: string;
@@ -800,6 +812,7 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
     handlers: Record<string, (params: Record<string, unknown>) => Promise<unknown> | unknown>;
     navigate: (path: string) => void;
     functions: Record<string, ComputedFunction>;
+    directives: DirectiveDefinition<zod.ZodType<unknown, unknown, zod_v4_core.$ZodTypeInternals<unknown, unknown>>>[];
     validationFunctions: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 /**
@@ -851,6 +864,8 @@ interface CreateRendererProps {
     }>) => void;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     loading?: boolean;
     fallback?: Component;
 }

package/dist/index.js

@@ -422,109 +422,141 @@ var ActionProvider = (0, import_vue4.defineComponent)({
     };
     const execute = async (binding) => {
       const resolved = (0, import_core4.resolveAction)(binding, getSnapshot());
-      if (resolved.action === "setState" && resolved.params) {
-        const statePath = resolved.params.statePath;
-        const value = resolved.params.value;
-        if (statePath) {
-          set(statePath, value);
+      const dispatchId = (0, import_core4.nextActionDispatchId)();
+      const dispatchedAt = Date.now();
+      (0, import_core4.notifyActionDispatch)({
+        id: dispatchId,
+        name: resolved.action,
+        params: resolved.params,
+        at: dispatchedAt
+      });
+      let __ok = true;
+      let __error = void 0;
+      try {
+        if (resolved.action === "setState" && resolved.params) {
+          const statePath = resolved.params.statePath;
+          const value = resolved.params.value;
+          if (statePath) {
+            set(statePath, value);
+          }
+          return;
         }
-        return;
-      }
-      if (resolved.action === "pushState" && resolved.params) {
-        const statePath = resolved.params.statePath;
-        const rawValue = resolved.params.value;
-        if (statePath) {
-          const resolvedValue = deepResolveValue(rawValue, get);
-          const arr = get(statePath) ?? [];
-          set(statePath, [...arr, resolvedValue]);
-          const clearStatePath = resolved.params.clearStatePath;
-          if (clearStatePath) {
-            set(clearStatePath, "");
+        if (resolved.action === "pushState" && resolved.params) {
+          const statePath = resolved.params.statePath;
+          const rawValue = resolved.params.value;
+          if (statePath) {
+            const resolvedValue = deepResolveValue(rawValue, get);
+            const arr = get(statePath) ?? [];
+            set(statePath, [...arr, resolvedValue]);
+            const clearStatePath = resolved.params.clearStatePath;
+            if (clearStatePath) {
+              set(clearStatePath, "");
+            }
           }
+          return;
         }
-        return;
-      }
-      if (resolved.action === "removeState" && resolved.params) {
-        const statePath = resolved.params.statePath;
-        const index = resolved.params.index;
-        if (statePath !== void 0 && index !== void 0) {
-          const arr = get(statePath) ?? [];
-          set(
-            statePath,
-            arr.filter((_, i) => i !== index)
-          );
+        if (resolved.action === "removeState" && resolved.params) {
+          const statePath = resolved.params.statePath;
+          const index = resolved.params.index;
+          if (statePath !== void 0 && index !== void 0) {
+            const arr = get(statePath) ?? [];
+            set(
+              statePath,
+              arr.filter((_, i) => i !== index)
+            );
+          }
+          return;
         }
-        return;
-      }
-      if (resolved.action === "validateForm") {
-        const validateAll = validation?.validateAll;
-        if (!validateAll) {
-          console.warn(
-            "validateForm action was dispatched but no ValidationProvider is connected. Ensure ValidationProvider is rendered inside the provider tree."
-          );
+        if (resolved.action === "validateForm") {
+          const validateAll = validation?.validateAll;
+          if (!validateAll) {
+            console.warn(
+              "validateForm action was dispatched but no ValidationProvider is connected. Ensure ValidationProvider is rendered inside the provider tree."
+            );
+            return;
+          }
+          const valid = validateAll();
+          const errors = {};
+          for (const [path, fs] of Object.entries(validation.fieldStates)) {
+            if (fs.result && !fs.result.valid) {
+              errors[path] = fs.result.errors;
+            }
+          }
+          const statePath = resolved.params?.statePath || "/formValidation";
+          set(statePath, { valid, errors });
           return;
         }
-        const valid = validateAll();
-        const errors = {};
-        for (const [path, fs] of Object.entries(validation.fieldStates)) {
-          if (fs.result && !fs.result.valid) {
-            errors[path] = fs.result.errors;
+        if (resolved.action === "push" && resolved.params) {
+          const screen = resolved.params.screen;
+          if (screen) {
+            const currentScreen = get("/currentScreen");
+            const navStack = get("/navStack") ?? [];
+            if (currentScreen) {
+              set("/navStack", [...navStack, currentScreen]);
+            } else {
+              set("/navStack", [...navStack, ""]);
+            }
+            set("/currentScreen", screen);
           }
+          return;
         }
-        const statePath = resolved.params?.statePath || "/formValidation";
-        set(statePath, { valid, errors });
-        return;
-      }
-      if (resolved.action === "push" && resolved.params) {
-        const screen = resolved.params.screen;
-        if (screen) {
-          const currentScreen = get("/currentScreen");
+        if (resolved.action === "pop") {
           const navStack = get("/navStack") ?? [];
-          if (currentScreen) {
-            set("/navStack", [...navStack, currentScreen]);
-          } else {
-            set("/navStack", [...navStack, ""]);
+          if (navStack.length > 0) {
+            const previousScreen = navStack[navStack.length - 1];
+            set("/navStack", navStack.slice(0, -1));
+            if (previousScreen) {
+              set("/currentScreen", previousScreen);
+            } else {
+              set("/currentScreen", void 0);
+            }
           }
-          set("/currentScreen", screen);
+          return;
         }
-        return;
-      }
-      if (resolved.action === "pop") {
-        const navStack = get("/navStack") ?? [];
-        if (navStack.length > 0) {
-          const previousScreen = navStack[navStack.length - 1];
-          set("/navStack", navStack.slice(0, -1));
-          if (previousScreen) {
-            set("/currentScreen", previousScreen);
-          } else {
-            set("/currentScreen", void 0);
+        const handler = handlers.value[resolved.action];
+        if (!handler) {
+          console.warn(`No handler registered for action: ${resolved.action}`);
+          return;
+        }
+        if (resolved.confirm) {
+          await new Promise((resolve, reject) => {
+            pendingConfirmation.value = {
+              action: resolved,
+              handler,
+              resolve: () => {
+                pendingConfirmation.value = null;
+                resolve();
+              },
+              reject: () => {
+                pendingConfirmation.value = null;
+                reject(new Error("Action cancelled"));
+              }
+            };
+          });
+          const addLoading2 = new Set(loadingActions.value);
+          addLoading2.add(resolved.action);
+          loadingActions.value = addLoading2;
+          try {
+            await (0, import_core4.executeAction)({
+              action: resolved,
+              handler,
+              setState: set,
+              navigate: props.navigate,
+              executeAction: async (name) => {
+                const subBinding = { action: name };
+                await execute(subBinding);
+              }
+            });
+          } finally {
+            const removeLoading = new Set(loadingActions.value);
+            removeLoading.delete(resolved.action);
+            loadingActions.value = removeLoading;
           }
+          return;
         }
-        return;
-      }
-      const handler = handlers.value[resolved.action];
-      if (!handler) {
-        console.warn(`No handler registered for action: ${resolved.action}`);
-        return;
-      }
-      if (resolved.confirm) {
-        await new Promise((resolve, reject) => {
-          pendingConfirmation.value = {
-            action: resolved,
-            handler,
-            resolve: () => {
-              pendingConfirmation.value = null;
-              resolve();
-            },
-            reject: () => {
-              pendingConfirmation.value = null;
-              reject(new Error("Action cancelled"));
-            }
-          };
-        });
-        const addLoading2 = new Set(loadingActions.value);
-        addLoading2.add(resolved.action);
-        loadingActions.value = addLoading2;
+        const addLoading = new Set(loadingActions.value);
+        addLoading.add(resolved.action);
+        loadingActions.value = addLoading;
         try {
           await (0, import_core4.executeAction)({
             action: resolved,
@@ -541,26 +573,20 @@ var ActionProvider = (0, import_vue4.defineComponent)({
           removeLoading.delete(resolved.action);
           loadingActions.value = removeLoading;
         }
-        return;
-      }
-      const addLoading = new Set(loadingActions.value);
-      addLoading.add(resolved.action);
-      loadingActions.value = addLoading;
-      try {
-        await (0, import_core4.executeAction)({
-          action: resolved,
-          handler,
-          setState: set,
-          navigate: props.navigate,
-          executeAction: async (name) => {
-            const subBinding = { action: name };
-            await execute(subBinding);
-          }
-        });
+      } catch (err) {
+        __ok = false;
+        __error = err;
+        throw err;
       } finally {
-        const removeLoading = new Set(loadingActions.value);
-        removeLoading.delete(resolved.action);
-        loadingActions.value = removeLoading;
+        const now = Date.now();
+        (0, import_core4.notifyActionSettle)({
+          id: dispatchId,
+          name: resolved.action,
+          ok: __ok,
+          at: now,
+          durationMs: now - dispatchedAt,
+          error: __error
+        });
       }
     };
     const confirm = () => pendingConfirmation.value?.resolve();
@@ -1328,6 +1354,29 @@ function useFunctions() {
     (0, import_vue7.computed)(() => EMPTY_FUNCTIONS)
   );
 }
+var DIRECTIVES_KEY = /* @__PURE__ */ Symbol("json-render:directives");
+var DirectivesProvider = (0, import_vue7.defineComponent)({
+  name: "DirectivesProvider",
+  props: {
+    directives: {
+      type: Array,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const registry = (0, import_vue7.computed)(
+      () => props.directives ? (0, import_core7.createDirectiveRegistry)(props.directives) : void 0
+    );
+    (0, import_vue7.provide)(DIRECTIVES_KEY, registry);
+    return () => slots.default?.();
+  }
+});
+function useDirectives() {
+  return (0, import_vue7.inject)(
+    DIRECTIVES_KEY,
+    (0, import_vue7.computed)(() => void 0)
+  );
+}
 var ElementErrorBoundary = (0, import_vue7.defineComponent)({
   name: "ElementErrorBoundary",
   props: {
@@ -1372,6 +1421,14 @@ async function resolveAndExecuteBindings(actionBindings, ctx, getSnapshot, execu
     if (cancelled?.()) break;
   }
 }
+function useDevtoolsActive() {
+  const active = (0, import_vue7.ref)((0, import_core7.isDevtoolsActive)());
+  const unsub = (0, import_core7.subscribeDevtoolsActive)(() => {
+    active.value = (0, import_core7.isDevtoolsActive)();
+  });
+  (0, import_vue7.onBeforeUnmount)(unsub);
+  return active;
+}
 var ElementRenderer = (0, import_vue7.defineComponent)({
   name: "JsonRenderElement",
   props: {
@@ -1379,6 +1436,10 @@ var ElementRenderer = (0, import_vue7.defineComponent)({
       type: Object,
       required: true
     },
+    elementKey: {
+      type: String,
+      default: void 0
+    },
     spec: {
       type: Object,
       required: true
@@ -1397,11 +1458,13 @@ var ElementRenderer = (0, import_vue7.defineComponent)({
     }
   },
   setup(props) {
+    const devtoolsActive = useDevtoolsActive();
     const repeatScope = useRepeatScope();
     const { ctx: visibilityCtx } = useVisibility();
     const { execute } = useActions();
     const { getSnapshot, state: watchState } = useStateStore();
     const functions = useFunctions();
+    const directives = useDirectives();
     const fullCtx = (0, import_vue7.computed)(() => {
       const base = repeatScope ? {
         ...visibilityCtx.value,
@@ -1410,6 +1473,7 @@ var ElementRenderer = (0, import_vue7.defineComponent)({
         repeatBasePath: repeatScope.basePath
       } : { ...visibilityCtx.value };
       base.functions = functions.value;
+      base.directives = directives.value;
       return base;
     });
     const emitEvent = async (eventName) => {
@@ -1511,28 +1575,33 @@ var ElementRenderer = (0, import_vue7.defineComponent)({
         return (0, import_vue7.h)(ElementRenderer, {
           key: childKey,
           element: childElement,
+          elementKey: childKey,
           spec: props.spec,
           registry: props.registry,
           loading: props.loading,
           fallback: props.fallback
         });
       }).filter((n) => n !== null) ?? void 0;
+      const componentVNode = (0, import_vue7.h)(
+        Component,
+        {
+          element: resolvedElement,
+          emit: emitEvent,
+          on: onEvent,
+          bindings: elementBindings,
+          loading: props.loading
+        },
+        { default: () => childrenVNodes }
+      );
+      const tagged = devtoolsActive.value && props.elementKey ? (0, import_vue7.h)(
+        "span",
+        { "data-jr-key": props.elementKey, style: "display:contents" },
+        [componentVNode]
+      ) : componentVNode;
       return (0, import_vue7.h)(
         ElementErrorBoundary,
         { elementType: resolvedElement.type },
-        {
-          default: () => (0, import_vue7.h)(
-            Component,
-            {
-              element: resolvedElement,
-              emit: emitEvent,
-              on: onEvent,
-              bindings: elementBindings,
-              loading: props.loading
-            },
-            { default: () => childrenVNodes }
-          )
-        }
+        { default: () => tagged }
       );
     };
   }
@@ -1590,6 +1659,7 @@ var RepeatChildren = (0, import_vue7.defineComponent)({
               return (0, import_vue7.h)(ElementRenderer, {
                 key: childKey,
                 element: childElement,
+                elementKey: childKey,
                 spec: props.spec,
                 registry: props.registry,
                 loading: props.loading,
@@ -1629,6 +1699,7 @@ var Renderer = (0, import_vue7.defineComponent)({
       if (!rootElement) return null;
       return (0, import_vue7.h)(ElementRenderer, {
         element: rootElement,
+        elementKey: props.spec.root,
         spec: props.spec,
         registry: props.registry,
         loading: props.loading,
@@ -1682,6 +1753,10 @@ var JSONUIProvider = (0, import_vue7.defineComponent)({
       type: Object,
       default: void 0
     },
+    directives: {
+      type: Array,
+      default: void 0
+    },
     onStateChange: {
       type: Function,
       default: void 0
@@ -1709,10 +1784,16 @@ var JSONUIProvider = (0, import_vue7.defineComponent)({
                     FunctionsProvider,
                     { functions: props.functions },
                     {
-                      default: () => [
-                        slots.default?.(),
-                        (0, import_vue7.h)(ConfirmationDialogManager)
-                      ]
+                      default: () => (0, import_vue7.h)(
+                        DirectivesProvider,
+                        { directives: props.directives },
+                        {
+                          default: () => [
+                            slots.default?.(),
+                            (0, import_vue7.h)(ConfirmationDialogManager)
+                          ]
+                        }
+                      )
                     }
                   )
                 }
@@ -1818,6 +1899,10 @@ function createRenderer(catalog, components) {
         type: Object,
         default: void 0
       },
+      directives: {
+        type: Array,
+        default: void 0
+      },
       loading: {
         type: Boolean,
         default: void 0
@@ -1856,15 +1941,21 @@ function createRenderer(catalog, components) {
                       FunctionsProvider,
                       { functions: rendererProps.functions },
                       {
-                        default: () => [
-                          (0, import_vue7.h)(Renderer, {
-                            spec: rendererProps.spec,
-                            registry,
-                            loading: rendererProps.loading,
-                            fallback: rendererProps.fallback
-                          }),
-                          (0, import_vue7.h)(ConfirmationDialogManager)
-                        ]
+                        default: () => (0, import_vue7.h)(
+                          DirectivesProvider,
+                          { directives: rendererProps.directives },
+                          {
+                            default: () => [
+                              (0, import_vue7.h)(Renderer, {
+                                spec: rendererProps.spec,
+                                registry,
+                                loading: rendererProps.loading,
+                                fallback: rendererProps.fallback
+                              }),
+                              (0, import_vue7.h)(ConfirmationDialogManager)
+                            ]
+                          }
+                        )
                       }
                     )
                   }