@json-render/vue 0.18.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

@@ -1354,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: {
@@ -1441,6 +1464,7 @@ var ElementRenderer = (0, import_vue7.defineComponent)({
     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,
@@ -1449,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) => {
@@ -1728,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
@@ -1755,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)
+                          ]
+                        }
+                      )
                     }
                   )
                 }
@@ -1864,6 +1899,10 @@ function createRenderer(catalog, components) {
         type: Object,
         default: void 0
       },
+      directives: {
+        type: Array,
+        default: void 0
+      },
       loading: {
         type: Boolean,
         default: void 0
@@ -1902,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)
+                            ]
+                          }
+                        )
                       }
                     )
                   }