@vunk/form 1.4.12 → 2.0.1

package/components/form/index.cjs

@@ -13,6 +13,8 @@ var templatesDefault = require('@vunk/form/components/templates-default');
 var templatesLayout = require('@vunk/form/components/templates-layout');
 var utilsObject = require('@vunk/core/shared/utils-object');
 var form = require('@vunk/form/shared/form');
+var templateInstancesProvider = require('@vunk/form/components/template-instances-provider');
+var rendererData = require('@vunk/form/components/renderer-data');
 var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
 
 const props = {
@@ -56,6 +58,13 @@ const props = {
   colSource: {
     type: Object,
     default: () => ({})
+  },
+  /**
+   * 是否继承父级模板
+   */
+  inheritTemplates: {
+    type: Boolean,
+    default: false
   }
 };
 const createBindProps = utilsVue.bindPropsFactory(props);
@@ -112,6 +121,8 @@ const genRowItem = (defaultItem, options = {}) => {
 var _sfc_main = vue.defineComponent({
   name: "VkfForm",
   components: {
+    VkfTemplateInstancesProvider: templateInstancesProvider.VkfTemplateInstancesProvider,
+    VkfRendererData: rendererData.VkfRendererData,
     ElForm: elementPlus.ElForm,
     VkfFormItemRenderer: formItemRenderer.VkfFormItemRenderer,
     VkfTemplatesDefault: templatesDefault.VkfTemplatesDefault,
@@ -177,6 +188,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VkfTemplatesDefault = vue.resolveComponent("VkfTemplatesDefault");
   const _component_VkfTemplatesLayout = vue.resolveComponent("VkfTemplatesLayout");
   const _component_VkfFormItemRenderer = vue.resolveComponent("VkfFormItemRenderer");
+  const _component_VkfRendererData = vue.resolveComponent("VkfRendererData");
+  const _component_VkfTemplateInstancesProvider = vue.resolveComponent("VkfTemplateInstancesProvider");
   const _component_ElForm = vue.resolveComponent("ElForm");
   return vue.openBlock(), vue.createBlock(_component_ElForm, vue.mergeProps(_ctx.formProps, {
     ref: _ctx.getRef,
@@ -186,18 +199,33 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     model: _ctx.model || _ctx.data
   }, vue.toHandlers(_ctx.formEmits), { onSubmit: _ctx.handleSubmit }), {
     default: vue.withCtx(() => [
-      vue.createVNode(_component_VkfFormItemRenderer, { source: _ctx.rendererSource }, {
+      vue.createVNode(_component_VkfTemplateInstancesProvider, { "inherit-templates": _ctx.inheritTemplates }, {
         default: vue.withCtx(() => [
-          vue.createVNode(_component_VkfTemplatesDefault, {
+          !_ctx.inheritTemplates ? (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 0 },
+            [
+              vue.createVNode(_component_VkfTemplatesDefault),
+              vue.createVNode(_component_VkfTemplatesLayout),
+              vue.renderSlot(_ctx.$slots, "rendererTemplate")
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : vue.createCommentVNode("v-if", true),
+          vue.createVNode(_component_VkfRendererData, {
             data: _ctx.data,
             onSetData: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("setData", $event))
-          }, null, 8, ["data"]),
-          vue.createVNode(_component_VkfTemplatesLayout, { data: _ctx.data }, null, 8, ["data"]),
-          vue.renderSlot(_ctx.$slots, "rendererTemplate")
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_VkfFormItemRenderer, { source: _ctx.rendererSource }, null, 8, ["source"])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["data"])
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["source"]),
+      }, 8, ["inherit-templates"]),
       vue.renderSlot(_ctx.$slots, "default")
     ]),
     _: 3

package/components/form/index.mjs

@@ -1,7 +1,7 @@
 import { formProps, formEmits, ElForm } from 'element-plus';
 import { bindPropsFactory, onEmitsFactory } from '@vunk/core/shared/utils-vue';
 import { NOOP } from '@vunk/core/shared/utils-function';
-import { defineComponent, shallowRef, getCurrentInstance, provide, computed, resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withCtx, createVNode, renderSlot } from 'vue';
+import { defineComponent, shallowRef, getCurrentInstance, provide, computed, resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withCtx, createVNode, createElementBlock, Fragment, renderSlot, createCommentVNode } from 'vue';
 import { VkfFormItemRenderer } from '@vunk/form/components/form-item-renderer';
 import { createFormBindProps, createFormOnEmits } from '@vunk/form/shared/element-plus';
 import { getValue } from '@vunk/core/shared/helper';
@@ -9,6 +9,8 @@ import { VkfTemplatesDefault } from '@vunk/form/components/templates-default';
 import { VkfTemplatesLayout } from '@vunk/form/components/templates-layout';
 import { pickObject } from '@vunk/core/shared/utils-object';
 import { genTemplateIfFunc } from '@vunk/form/shared/form';
+import { VkfTemplateInstancesProvider } from '@vunk/form/components/template-instances-provider';
+import { VkfRendererData } from '@vunk/form/components/renderer-data';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
 
 const props = {
@@ -52,6 +54,13 @@ const props = {
   colSource: {
     type: Object,
     default: () => ({})
+  },
+  /**
+   * 是否继承父级模板
+   */
+  inheritTemplates: {
+    type: Boolean,
+    default: false
   }
 };
 const createBindProps = bindPropsFactory(props);
@@ -108,6 +117,8 @@ const genRowItem = (defaultItem, options = {}) => {
 var _sfc_main = defineComponent({
   name: "VkfForm",
   components: {
+    VkfTemplateInstancesProvider,
+    VkfRendererData,
     ElForm,
     VkfFormItemRenderer,
     VkfTemplatesDefault,
@@ -173,6 +184,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VkfTemplatesDefault = resolveComponent("VkfTemplatesDefault");
   const _component_VkfTemplatesLayout = resolveComponent("VkfTemplatesLayout");
   const _component_VkfFormItemRenderer = resolveComponent("VkfFormItemRenderer");
+  const _component_VkfRendererData = resolveComponent("VkfRendererData");
+  const _component_VkfTemplateInstancesProvider = resolveComponent("VkfTemplateInstancesProvider");
   const _component_ElForm = resolveComponent("ElForm");
   return openBlock(), createBlock(_component_ElForm, mergeProps(_ctx.formProps, {
     ref: _ctx.getRef,
@@ -182,18 +195,33 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     model: _ctx.model || _ctx.data
   }, toHandlers(_ctx.formEmits), { onSubmit: _ctx.handleSubmit }), {
     default: withCtx(() => [
-      createVNode(_component_VkfFormItemRenderer, { source: _ctx.rendererSource }, {
+      createVNode(_component_VkfTemplateInstancesProvider, { "inherit-templates": _ctx.inheritTemplates }, {
         default: withCtx(() => [
-          createVNode(_component_VkfTemplatesDefault, {
+          !_ctx.inheritTemplates ? (openBlock(), createElementBlock(
+            Fragment,
+            { key: 0 },
+            [
+              createVNode(_component_VkfTemplatesDefault),
+              createVNode(_component_VkfTemplatesLayout),
+              renderSlot(_ctx.$slots, "rendererTemplate")
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : createCommentVNode("v-if", true),
+          createVNode(_component_VkfRendererData, {
             data: _ctx.data,
             onSetData: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("setData", $event))
-          }, null, 8, ["data"]),
-          createVNode(_component_VkfTemplatesLayout, { data: _ctx.data }, null, 8, ["data"]),
-          renderSlot(_ctx.$slots, "rendererTemplate")
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_VkfFormItemRenderer, { source: _ctx.rendererSource }, null, 8, ["source"])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["data"])
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["source"]),
+      }, 8, ["inherit-templates"]),
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3

package/components/form/src/ctx.d.ts

@@ -43,6 +43,13 @@ export declare const props: {
         type: PropType<Partial<ColItem>>;
         default: () => ColItem;
     };
+    /**
+     * 是否继承父级模板
+     */
+    inheritTemplates: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     model: ObjectConstructor;
     rules: {
         readonly type: import("vue").PropType<Partial<Record<string, import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>>>>;
@@ -75,7 +82,7 @@ export declare const props: {
     };
     disabled: BooleanConstructor;
 };
-export declare const createBindProps: <T2 extends import("@vunk/core").NormalObject, EX extends (Extract<"size", keyof T2> | Extract<"disabled", keyof T2> | Extract<"data", keyof T2> | Extract<"elRef", keyof T2> | Extract<"inline", keyof T2> | Extract<"readonly", keyof T2> | Extract<"labelWidth", keyof T2> | Extract<"labelPosition", keyof T2> | Extract<"rules", keyof T2> | Extract<"inlineMessage", keyof T2> | Extract<"showMessage", keyof T2> | Extract<"model", keyof T2> | Extract<"requireAsteriskPosition", keyof T2> | Extract<"labelSuffix", keyof T2> | Extract<"statusIcon", keyof T2> | Extract<"validateOnRuleChange", keyof T2> | Extract<"hideRequiredAsterisk", keyof T2> | Extract<"scrollToError", keyof T2> | Extract<"scrollIntoViewOptions", keyof T2> | Extract<"formItems", keyof T2> | Extract<"layout", keyof T2> | Extract<"rowSource", keyof T2> | Extract<"colSource", keyof T2>)[]>(propsArg: T2, excludes?: EX) => import("vue").ComputedRef<{ [P in EX extends (infer KE)[] ? Exclude<Extract<"size" | "disabled" | "data" | "elRef" | "inline" | "readonly" | "labelWidth" | "labelPosition" | "rules" | "inlineMessage" | "showMessage" | "model" | "requireAsteriskPosition" | "labelSuffix" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "scrollIntoViewOptions" | "formItems" | "layout" | "rowSource" | "colSource", keyof T2>, KE> : Extract<"size" | "disabled" | "data" | "elRef" | "inline" | "readonly" | "labelWidth" | "labelPosition" | "rules" | "inlineMessage" | "showMessage" | "model" | "requireAsteriskPosition" | "labelSuffix" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "scrollIntoViewOptions" | "formItems" | "layout" | "rowSource" | "colSource", keyof T2>]: { [k in Extract<"size" | "disabled" | "data" | "elRef" | "inline" | "readonly" | "labelWidth" | "labelPosition" | "rules" | "inlineMessage" | "showMessage" | "model" | "requireAsteriskPosition" | "labelSuffix" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "scrollIntoViewOptions" | "formItems" | "layout" | "rowSource" | "colSource", keyof T2>]: T2[k]; }[P]; }>;
+export declare const createBindProps: <T2 extends import("@vunk/core").NormalObject, EX extends (Extract<"size", keyof T2> | Extract<"disabled", keyof T2> | Extract<"data", keyof T2> | Extract<"elRef", keyof T2> | Extract<"inline", keyof T2> | Extract<"readonly", keyof T2> | Extract<"labelWidth", keyof T2> | Extract<"labelPosition", keyof T2> | Extract<"rules", keyof T2> | Extract<"inlineMessage", keyof T2> | Extract<"showMessage", keyof T2> | Extract<"model", keyof T2> | Extract<"requireAsteriskPosition", keyof T2> | Extract<"labelSuffix", keyof T2> | Extract<"statusIcon", keyof T2> | Extract<"validateOnRuleChange", keyof T2> | Extract<"hideRequiredAsterisk", keyof T2> | Extract<"scrollToError", keyof T2> | Extract<"scrollIntoViewOptions", keyof T2> | Extract<"formItems", keyof T2> | Extract<"layout", keyof T2> | Extract<"rowSource", keyof T2> | Extract<"colSource", keyof T2> | Extract<"inheritTemplates", keyof T2>)[]>(propsArg: T2, excludes?: EX) => import("vue").ComputedRef<{ [P in EX extends (infer KE)[] ? Exclude<Extract<"size" | "disabled" | "data" | "elRef" | "inline" | "readonly" | "labelWidth" | "labelPosition" | "rules" | "inlineMessage" | "showMessage" | "model" | "requireAsteriskPosition" | "labelSuffix" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "scrollIntoViewOptions" | "formItems" | "layout" | "rowSource" | "colSource" | "inheritTemplates", keyof T2>, KE> : Extract<"size" | "disabled" | "data" | "elRef" | "inline" | "readonly" | "labelWidth" | "labelPosition" | "rules" | "inlineMessage" | "showMessage" | "model" | "requireAsteriskPosition" | "labelSuffix" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "scrollIntoViewOptions" | "formItems" | "layout" | "rowSource" | "colSource" | "inheritTemplates", keyof T2>]: { [k in Extract<"size" | "disabled" | "data" | "elRef" | "inline" | "readonly" | "labelWidth" | "labelPosition" | "rules" | "inlineMessage" | "showMessage" | "model" | "requireAsteriskPosition" | "labelSuffix" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "scrollIntoViewOptions" | "formItems" | "layout" | "rowSource" | "colSource" | "inheritTemplates", keyof T2>]: T2[k]; }[P]; }>;
 export declare const emits: {
     setData: (e: SetDataEvent) => SetDataEvent;
     validate: any;

package/components/form/src/index.vue.d.ts

@@ -28,6 +28,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: import("vue").PropType<Partial<import("./types").ColItem>>;
         default: () => import("./types").ColItem;
     };
+    inheritTemplates: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     model: ObjectConstructor;
     rules: {
         readonly type: import("vue").PropType<Partial<Record<string, import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>>>>;
@@ -115,6 +119,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: import("vue").PropType<Partial<import("./types").ColItem>>;
         default: () => import("./types").ColItem;
     };
+    inheritTemplates: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     model: ObjectConstructor;
     rules: {
         readonly type: import("vue").PropType<Partial<Record<string, import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>>>>;
@@ -353,7 +361,30 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     layout: boolean;
     rowSource: Partial<RowItem>;
     colSource: Partial<import("./types").ColItem>;
+    inheritTemplates: boolean;
 }, {}, {
+    VkfTemplateInstancesProvider: {
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<Record<string | symbol, any>>>, Record<string | symbol, any>, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        [x: string]: any;
+        [x: symbol]: any;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+        install(app: import("vue").App): void;
+    };
+    VkfRendererData: {
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<Record<string | symbol, any>>>, Record<string | symbol, any>, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        [x: string]: any;
+        [x: symbol]: any;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+        install(app: import("vue").App): void;
+    };
     ElForm: import("element-plus/es/utils").SFCWithInstall<{
         new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
             readonly model: ObjectConstructor;

package/components/form-item-renderer/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var form = require('@vunk/form/shared/form');
+var composables = require('@vunk/form/composables');
 var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
 
 const props = {
@@ -22,16 +23,18 @@ const props = {
   }
 };
 
-const S_TEMPLATE_INSTANCES = Symbol("templateInstances");
-const parentTemplateInstancesSymbol = Symbol("parentTemplateInstancesSymbol");
-
 const VkfFormItemRenderer$1 = vue.defineComponent({
   name: "VkfFormItemRenderer",
   props: props,
   setup(props, ctx) {
-    const pTemplateInstances = vue.inject(parentTemplateInstancesSymbol, null);
-    const templateInstances = props.templateInstances ?? pTemplateInstances ?? vue.shallowReactive({});
-    vue.provide(S_TEMPLATE_INSTANCES, templateInstances);
+    const parentTemplateInstance = composables.useTemplateInstances();
+    const {
+      emitSetData,
+      data: rendererData,
+      getDataValue
+    } = composables.useRendererData();
+    const templateInstances = props.templateInstances ?? parentTemplateInstance ?? vue.shallowReactive({});
+    vue.provide("vkTemplateInstances", templateInstances);
     const Renderer = (props2) => {
       return vue.h(VkfFormItemRenderer$1, {
         templateInstances,
@@ -45,31 +48,43 @@ const VkfFormItemRenderer$1 = vue.defineComponent({
         const validateTemplateType = () => {
           vue.nextTick(() => {
             if (c.templateType && !templateInstances[c.templateType]) {
-              console.warn(c.templateType, "templateType\u4E0D\u5B58\u5728\u5C06\u8DF3\u8FC7");
+              console.warn(
+                c.templateType,
+                "templateType\u4E0D\u5B58\u5728\u5C06\u8DF3\u8FC7"
+              );
             }
           });
         };
         if (c.templateType && templateInstances[c.templateType]) {
+          const templateIf = form.genTemplateIfFunc(c.templateIf);
+          const preTemplateVisible = rendererData ? templateIf(rendererData.value) : true;
+          if (!preTemplateVisible) return a;
           const slotData = { ...c };
           Reflect.deleteProperty(slotData, "templateType");
-          Reflect.deleteProperty(slotData, "templateSlots");
           Reflect.deleteProperty(slotData, "templateIf");
+          const nodeKey = currentK.join(",") + "-" + c.templateType + "-" + (c.prop || "no-prop");
+          const modelValue = vue.computed({
+            get: () => c.prop && getDataValue?.(c.prop),
+            set: (v) => emitSetData?.({
+              k: c.prop,
+              v
+            })
+          });
           const nodes = templateInstances[c.templateType].slots.default?.({
+            // for legacy
             data: slotData,
             raw: c,
-            Renderer,
+            props: slotData,
             k: currentK,
-            key: currentK.join(",") + "-" + c.templateType + "-" + c?.prop || "no-prop",
-            templateIf: form.genTemplateIfFunc(c.templateIf)
+            key: nodeKey,
+            value: modelValue.value,
+            input: (v) => modelValue.value = v,
+            templateIf,
+            Renderer,
+            getDataValue,
+            emitSetData
           });
           nodes && a.push(nodes);
-        } else if (c.templateSlots?.default) {
-          validateTemplateType();
-          currentK.push("templateSlots", "default");
-          if (Array.isArray(c.templateSlots?.default)) {
-            const subNode = renderFormItems(c.templateSlots.default, currentK);
-            a = a.concat(subNode);
-          }
         } else {
           validateTemplateType();
         }
@@ -96,8 +111,6 @@ VkfFormItemRenderer.install = (app) => {
   app.component(VkfFormItemRenderer.name, VkfFormItemRenderer);
 };
 
-exports.S_TEMPLATE_INSTANCES = S_TEMPLATE_INSTANCES;
 exports.VkfFormItemRenderer = VkfFormItemRenderer;
 exports.__VkfFormItemRenderer = types;
 exports.default = VkfFormItemRenderer;
-exports.parentTemplateInstancesSymbol = parentTemplateInstancesSymbol;

package/components/form-item-renderer/index.d.ts

@@ -1,5 +1,4 @@
 import VkfFormItemRenderer from './src/index.vue';
 export * as __VkfFormItemRenderer from './src/types';
-export * from './src/symbols';
 export { VkfFormItemRenderer, };
 export default VkfFormItemRenderer;

package/components/form-item-renderer/index.mjs

@@ -1,5 +1,6 @@
-import { defineComponent, inject, shallowReactive, provide, h, nextTick } from 'vue';
+import { defineComponent, shallowReactive, provide, computed, h, nextTick } from 'vue';
 import { genTemplateIfFunc } from '@vunk/form/shared/form';
+import { useTemplateInstances, useRendererData } from '@vunk/form/composables';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
 
 const props = {
@@ -18,16 +19,18 @@ const props = {
   }
 };
 
-const S_TEMPLATE_INSTANCES = Symbol("templateInstances");
-const parentTemplateInstancesSymbol = Symbol("parentTemplateInstancesSymbol");
-
 const VkfFormItemRenderer$1 = defineComponent({
   name: "VkfFormItemRenderer",
   props: props,
   setup(props, ctx) {
-    const pTemplateInstances = inject(parentTemplateInstancesSymbol, null);
-    const templateInstances = props.templateInstances ?? pTemplateInstances ?? shallowReactive({});
-    provide(S_TEMPLATE_INSTANCES, templateInstances);
+    const parentTemplateInstance = useTemplateInstances();
+    const {
+      emitSetData,
+      data: rendererData,
+      getDataValue
+    } = useRendererData();
+    const templateInstances = props.templateInstances ?? parentTemplateInstance ?? shallowReactive({});
+    provide("vkTemplateInstances", templateInstances);
     const Renderer = (props2) => {
       return h(VkfFormItemRenderer$1, {
         templateInstances,
@@ -41,31 +44,43 @@ const VkfFormItemRenderer$1 = defineComponent({
         const validateTemplateType = () => {
           nextTick(() => {
             if (c.templateType && !templateInstances[c.templateType]) {
-              console.warn(c.templateType, "templateType\u4E0D\u5B58\u5728\u5C06\u8DF3\u8FC7");
+              console.warn(
+                c.templateType,
+                "templateType\u4E0D\u5B58\u5728\u5C06\u8DF3\u8FC7"
+              );
             }
           });
         };
         if (c.templateType && templateInstances[c.templateType]) {
+          const templateIf = genTemplateIfFunc(c.templateIf);
+          const preTemplateVisible = rendererData ? templateIf(rendererData.value) : true;
+          if (!preTemplateVisible) return a;
           const slotData = { ...c };
           Reflect.deleteProperty(slotData, "templateType");
-          Reflect.deleteProperty(slotData, "templateSlots");
           Reflect.deleteProperty(slotData, "templateIf");
+          const nodeKey = currentK.join(",") + "-" + c.templateType + "-" + (c.prop || "no-prop");
+          const modelValue = computed({
+            get: () => c.prop && getDataValue?.(c.prop),
+            set: (v) => emitSetData?.({
+              k: c.prop,
+              v
+            })
+          });
           const nodes = templateInstances[c.templateType].slots.default?.({
+            // for legacy
             data: slotData,
             raw: c,
-            Renderer,
+            props: slotData,
             k: currentK,
-            key: currentK.join(",") + "-" + c.templateType + "-" + c?.prop || "no-prop",
-            templateIf: genTemplateIfFunc(c.templateIf)
+            key: nodeKey,
+            value: modelValue.value,
+            input: (v) => modelValue.value = v,
+            templateIf,
+            Renderer,
+            getDataValue,
+            emitSetData
           });
           nodes && a.push(nodes);
-        } else if (c.templateSlots?.default) {
-          validateTemplateType();
-          currentK.push("templateSlots", "default");
-          if (Array.isArray(c.templateSlots?.default)) {
-            const subNode = renderFormItems(c.templateSlots.default, currentK);
-            a = a.concat(subNode);
-          }
         } else {
           validateTemplateType();
         }
@@ -92,4 +107,4 @@ VkfFormItemRenderer.install = (app) => {
   app.component(VkfFormItemRenderer.name, VkfFormItemRenderer);
 };
 
-export { S_TEMPLATE_INSTANCES, VkfFormItemRenderer, types as __VkfFormItemRenderer, VkfFormItemRenderer as default, parentTemplateInstancesSymbol };
+export { VkfFormItemRenderer, types as __VkfFormItemRenderer, VkfFormItemRenderer as default };

package/components/form-item-renderer/src/index.vue.d.ts

@@ -1,4 +1,4 @@
-import { ComponentInternalInstance, VNode } from 'vue';
+import { VNode } from 'vue';
 import { RendererTreeData } from './types';
 declare const VkfFormItemRenderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     source: {
@@ -6,7 +6,7 @@ declare const VkfFormItemRenderer: import("vue").DefineComponent<import("vue").E
         default: () => any[];
     };
     templateInstances: {
-        type: import("vue").PropType<Record<string, ComponentInternalInstance>>;
+        type: import("vue").PropType<Record<string, import("vue").ComponentInternalInstance>>;
         default: any;
     };
     k: {
@@ -23,7 +23,7 @@ declare const VkfFormItemRenderer: import("vue").DefineComponent<import("vue").E
         default: () => any[];
     };
     templateInstances: {
-        type: import("vue").PropType<Record<string, ComponentInternalInstance>>;
+        type: import("vue").PropType<Record<string, import("vue").ComponentInternalInstance>>;
         default: any;
     };
     k: {
@@ -31,8 +31,8 @@ declare const VkfFormItemRenderer: import("vue").DefineComponent<import("vue").E
         default: () => any[];
     };
 }>> & Readonly<{}>, {
-    templateInstances: Record<string, ComponentInternalInstance>;
     source: RendererTreeData[];
+    templateInstances: Record<string, import("vue").ComponentInternalInstance>;
     k: (string | number)[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default VkfFormItemRenderer;

package/components/form-item-renderer/src/types.d.ts

@@ -2,7 +2,6 @@ import { NormalObject } from '@vunk/core';
 export interface RendererTreeData {
     key?: string;
     templateType?: string;
-    templateSlots?: any;
     templateIf?: string | ((e: NormalObject) => boolean) | boolean;
     [k: string]: any;
 }

package/components/form-item-renderer-template/index.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var composables = require('@vunk/form/composables');
 var vue = require('vue');
-var formItemRenderer = require('@vunk/form/components/form-item-renderer');
 var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
 
 const props = {
@@ -18,7 +18,7 @@ var _sfc_main = vue.defineComponent({
   name: "VkfFormItemRendererTemplate",
   props,
   setup(props2) {
-    const templateInstances = vue.inject(formItemRenderer.S_TEMPLATE_INSTANCES);
+    const templateInstances = composables.useTemplateInstances();
     if (!templateInstances) throw new Error();
     const vm = vue.getCurrentInstance();
     const oVm = templateInstances[props2.type];

package/components/form-item-renderer-template/index.mjs

@@ -1,5 +1,5 @@
-import { defineComponent, inject, getCurrentInstance, onUnmounted } from 'vue';
-import { S_TEMPLATE_INSTANCES } from '@vunk/form/components/form-item-renderer';
+import { useTemplateInstances } from '@vunk/form/composables';
+import { defineComponent, getCurrentInstance, onUnmounted } from 'vue';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
 
 const props = {
@@ -14,7 +14,7 @@ var _sfc_main = defineComponent({
   name: "VkfFormItemRendererTemplate",
   props,
   setup(props2) {
-    const templateInstances = inject(S_TEMPLATE_INSTANCES);
+    const templateInstances = useTemplateInstances();
     if (!templateInstances) throw new Error();
     const vm = getCurrentInstance();
     const oVm = templateInstances[props2.type];

package/components/form-item-renderer-template/src/types.d.ts

@@ -1 +1,45 @@
+import { __VkfFormItemRenderer } from '@vunk/form/components/form-item-renderer';
+import { NormalObject } from '@vunk/shared';
+import type { VkfFormItemRenderer } from '@vunk/form/components/form-item-renderer';
+import { MaybeArray, SetDataEvent } from '@vunk/core';
+type RendererTreeData = __VkfFormItemRenderer.RendererTreeData;
+export interface DefaultSlotArguments {
+    raw: RendererTreeData;
+    /**
+     * 根据 templateIf 生成的控制显隐事件
+     */
+    templateIf: (e?: NormalObject) => boolean;
+    /**
+     * @deprecated  use props
+     */
+    data: Omit<RendererTreeData, 'templateType' | 'templateIf'>;
+    /**
+     * 当前表单项的数据，排除渲染占用字段
+     */
+    props: Omit<RendererTreeData, 'templateType' | 'templateIf'>;
+    /**
+     * 当前表单项，在整个 formItems 中的位置
+     */
+    k: (string | number)[];
+    /**
+     * FormItemRenderer 便于子组件使用
+     */
+    Renderer: typeof VkfFormItemRenderer;
+    /**
+     * 对应的表单数据（如果formItem提供prop)
+     */
+    value?: never;
+    /**
+     * 更新表单数据（如果formItem提供prop)
+     */
+    input?: (v: any) => void;
+    /**
+     * 从表单数据中获取对应的值
+     */
+    getDataValue: (key: MaybeArray<number | string>) => any;
+    /**
+     * 更新表单数据
+     */
+    emitSetData: (e: SetDataEvent) => void;
+}
 export {};