@vunk/form 2.7.1 → 2.9.0

package/components/form/index.cjs

@@ -14,6 +14,7 @@ var templatesLayout = require('@vunk/form/components/templates-layout');
 var utilsObject = require('@vunk/core/shared/utils-object');
 var form = require('@vunk/form/shared/form');
 var rendererData = require('@vunk/form/components/renderer-data');
+var object = require('@vunk/shared/object');
 var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
 
 const props = {
@@ -141,14 +142,19 @@ var _sfc_main = vue.defineComponent({
             a.push(c);
             return a;
           }
-          if (Reflect.has(c, "templateIf")) {
+          if (!c.templateLayout?.allowEmpty && Reflect.has(c, "templateIf")) {
             const templateIfFunc = form.genTemplateIfFunc(c.templateIf);
             const flag = templateIfFunc(props2.data);
             if (!flag) {
               return a;
             }
           }
-          const colItem = genColItem(c, props2.colSource);
+          const colItem = genColItem(c, object.pickObject({
+            ...props2.colSource,
+            ...c.templateLayout
+          }, {
+            excludes: ["allowEmpty", "span"]
+          }));
           if (!lastRow || getRowEmptySpan(lastRow) < itemSpan) {
             a.push(genRowItem(colItem, props2.rowSource));
           } else {

package/components/form/index.mjs

@@ -10,6 +10,7 @@ import { VkfTemplatesLayout } from '@vunk/form/components/templates-layout';
 import { pickObject } from '@vunk/core/shared/utils-object';
 import { genTemplateIfFunc } from '@vunk/form/shared/form';
 import { VkfRendererData } from '@vunk/form/components/renderer-data';
+import { pickObject as pickObject$1 } from '@vunk/shared/object';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
 
 const props = {
@@ -137,14 +138,19 @@ var _sfc_main = defineComponent({
             a.push(c);
             return a;
           }
-          if (Reflect.has(c, "templateIf")) {
+          if (!c.templateLayout?.allowEmpty && Reflect.has(c, "templateIf")) {
             const templateIfFunc = genTemplateIfFunc(c.templateIf);
             const flag = templateIfFunc(props2.data);
             if (!flag) {
               return a;
             }
           }
-          const colItem = genColItem(c, props2.colSource);
+          const colItem = genColItem(c, pickObject$1({
+            ...props2.colSource,
+            ...c.templateLayout
+          }, {
+            excludes: ["allowEmpty", "span"]
+          }));
           if (!lastRow || getRowEmptySpan(lastRow) < itemSpan) {
             a.push(genRowItem(colItem, props2.rowSource));
           } else {

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

@@ -1,12 +1,25 @@
 import { __VkfTemplatesDefault } from '@vunk/form/components/templates-default';
 import { __VkfTemplatesLayout } from '@vunk/form/components/templates-layout';
-export type FormItem<P extends string = string> = (__VkfTemplatesDefault.Source<P> | __VkfTemplatesLayout.ElRowSource<FormItem<P>> | __VkfTemplatesLayout.ElColSource<FormItem<P>> | __VkfTemplatesLayout.VkfFlexSource<FormItem<P>>) & {
+import { VueComponentPropsType } from '@vunk/shared';
+import { ElCol } from 'element-plus';
+export type LayoutProps = {
     /**
-     * 如果开启 props.itemLayout，那么
+     * 如果开启 props.layout，那么
      * span 将生效
      * 1-24 之间的数字
      */
     span?: number;
+    /**
+     * layout 配置
+     */
+    templateLayout?: TemplateLayout;
 };
+export type FormItem<P extends string = string> = (__VkfTemplatesDefault.Source<P> | __VkfTemplatesLayout.ElRowSource<FormItem<P>> | __VkfTemplatesLayout.ElColSource<FormItem<P>> | __VkfTemplatesLayout.VkfFlexSource<FormItem<P>>) & LayoutProps;
 export type ColItem = __VkfTemplatesLayout.ElColSource<FormItem>;
 export type RowItem = __VkfTemplatesLayout.ElRowSource<ColItem>;
+export interface TemplateLayout extends VueComponentPropsType<typeof ElCol> {
+    /**
+      * 允许空渲染
+      */
+    allowEmpty?: boolean;
+}

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

@@ -25,6 +25,20 @@ const props = {
   }
 };
 
+const genInputEffectFunc = (inputEffectRaw) => {
+  if (!inputEffectRaw) {
+    return;
+  }
+  if (typeof inputEffectRaw === "function") {
+    return inputEffectRaw;
+  }
+  if (typeof inputEffectRaw === "string") {
+    const inputEffect = new Function("value", "context", inputEffectRaw);
+    return inputEffect;
+  }
+  return _function.noop;
+};
+
 const VkfFormItemRenderer$1 = vue.defineComponent({
   name: "VkfFormItemRenderer",
   props: props,
@@ -65,10 +79,12 @@ const VkfFormItemRenderer$1 = vue.defineComponent({
             _function.isCallable(c.templateProps) ? c.templateProps(rendererData?.value) : c.templateProps
           );
           const informationProps = _function.isCallable(slotData.informationProps) ? slotData.informationProps(rendererData?.value) : slotData.informationProps;
+          const inputEffect = genInputEffectFunc(slotData.inputEffect);
           Reflect.deleteProperty(slotData, "templateType");
           Reflect.deleteProperty(slotData, "templateIf");
           Reflect.deleteProperty(slotData, "templateProps");
           Reflect.deleteProperty(slotData, "informationProps");
+          Reflect.deleteProperty(slotData, "inputEffect");
           const nodeKey = currentK.join(",") + "-" + c.templateType + "-" + (c.prop || "no-prop");
           const modelValue = vue.computed({
             get: () => c.prop && getDataValue?.(c.prop),
@@ -77,7 +93,7 @@ const VkfFormItemRenderer$1 = vue.defineComponent({
               v
             })
           });
-          const nodes = getTemplateInstance(c.templateType)?.slots.default?.({
+          const defaultSlotArguments = {
             // for legacy
             data: slotData,
             raw: c,
@@ -85,13 +101,21 @@ const VkfFormItemRenderer$1 = vue.defineComponent({
             k: currentK,
             key: nodeKey,
             value: modelValue.value,
-            input: (v) => modelValue.value = v,
+            input: (v) => {
+              modelValue.value = v;
+              inputEffect?.(v, {
+                ...defaultSlotArguments,
+                parentProp: [c.prop].flat(Infinity).slice(0, -1)
+              });
+            },
             informationProps,
             templateIf,
             Renderer,
             getDataValue,
-            emitSetData
-          });
+            emitSetData,
+            inputEffect
+          };
+          const nodes = getTemplateInstance(c.templateType)?.slots.default?.(defaultSlotArguments);
           nodes && a.push(nodes);
         } else {
           validateTemplateType();

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

@@ -2,7 +2,7 @@ import { defineComponent, computed, h, nextTick, openBlock, createBlock, withCtx
 import { VkfTemplateInstancesProvider } from '@vunk/form/components/template-instances-provider';
 import { genTemplateIfFunc } from '@vunk/form/shared/form';
 import { useTemplateInstancesContext, useRendererData } from '@vunk/form/composables';
-import { isCallable } from '@vunk/shared/function';
+import { noop, isCallable } from '@vunk/shared/function';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
 
 const props = {
@@ -21,6 +21,20 @@ const props = {
   }
 };
 
+const genInputEffectFunc = (inputEffectRaw) => {
+  if (!inputEffectRaw) {
+    return;
+  }
+  if (typeof inputEffectRaw === "function") {
+    return inputEffectRaw;
+  }
+  if (typeof inputEffectRaw === "string") {
+    const inputEffect = new Function("value", "context", inputEffectRaw);
+    return inputEffect;
+  }
+  return noop;
+};
+
 const VkfFormItemRenderer$1 = defineComponent({
   name: "VkfFormItemRenderer",
   props: props,
@@ -61,10 +75,12 @@ const VkfFormItemRenderer$1 = defineComponent({
             isCallable(c.templateProps) ? c.templateProps(rendererData?.value) : c.templateProps
           );
           const informationProps = isCallable(slotData.informationProps) ? slotData.informationProps(rendererData?.value) : slotData.informationProps;
+          const inputEffect = genInputEffectFunc(slotData.inputEffect);
           Reflect.deleteProperty(slotData, "templateType");
           Reflect.deleteProperty(slotData, "templateIf");
           Reflect.deleteProperty(slotData, "templateProps");
           Reflect.deleteProperty(slotData, "informationProps");
+          Reflect.deleteProperty(slotData, "inputEffect");
           const nodeKey = currentK.join(",") + "-" + c.templateType + "-" + (c.prop || "no-prop");
           const modelValue = computed({
             get: () => c.prop && getDataValue?.(c.prop),
@@ -73,7 +89,7 @@ const VkfFormItemRenderer$1 = defineComponent({
               v
             })
           });
-          const nodes = getTemplateInstance(c.templateType)?.slots.default?.({
+          const defaultSlotArguments = {
             // for legacy
             data: slotData,
             raw: c,
@@ -81,13 +97,21 @@ const VkfFormItemRenderer$1 = defineComponent({
             k: currentK,
             key: nodeKey,
             value: modelValue.value,
-            input: (v) => modelValue.value = v,
+            input: (v) => {
+              modelValue.value = v;
+              inputEffect?.(v, {
+                ...defaultSlotArguments,
+                parentProp: [c.prop].flat(Infinity).slice(0, -1)
+              });
+            },
             informationProps,
             templateIf,
             Renderer,
             getDataValue,
-            emitSetData
-          });
+            emitSetData,
+            inputEffect
+          };
+          const nodes = getTemplateInstance(c.templateType)?.slots.default?.(defaultSlotArguments);
           nodes && a.push(nodes);
         } else {
           validateTemplateType();

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

@@ -0,0 +1,5 @@
+import { BasicSource } from '@vunk/form/shared';
+import { Func } from '@vunk/core';
+export declare const genInputEffectFunc: Func<[
+    any
+], BasicSource['inputEffect']>;

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

@@ -2,7 +2,9 @@ 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';
+import { InputEffectContext } from '@vunk/form/shared';
 type RendererTreeData = __VkfFormItemRenderer.RendererTreeData;
+type InternalField = 'templateType' | 'templateIf' | 'informationProps' | 'templateProps' | 'inputEffect';
 export interface DefaultSlotArguments {
     raw: RendererTreeData;
     /**
@@ -16,7 +18,7 @@ export interface DefaultSlotArguments {
     /**
      * 当前表单项的数据，排除渲染占用字段
      */
-    props: Omit<RendererTreeData, 'templateType' | 'templateIf' | 'informationProps' | 'templateProps'>;
+    props: Omit<RendererTreeData, InternalField>;
     /**
      * 提供给 Information 组件的 props
      */
@@ -37,6 +39,10 @@ export interface DefaultSlotArguments {
      * 更新表单数据（如果formItem提供prop)
      */
     input?: (v: any) => void;
+    /**
+     * input 执行后的副操作
+     */
+    inputEffect?: (v: any, e: InputEffectContext) => void;
     /**
      * 从表单数据中获取对应的值
      */

package/components/information-collection/index.cjs

@@ -11,6 +11,10 @@ var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
 
 const props = {
   ...formItem._VkfFormItemCtx.props,
+  information: {
+    type: Boolean,
+    default: true
+  },
   modelValue: {
     type: Array,
     default: () => []
@@ -39,8 +43,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   }) {
     const formItemProps = formItem._VkfFormItemCtx.createBindProps(props2);
     return () => vue.createVNode(formItem.VkfFormItem, vue.mergeProps({
-      "class": "vk-information-collection",
-      "information": true
+      "class": "vk-information-collection"
     }, formItemProps.value), {
       default: () => [vue.createVNode("div", {
         "class": "vk-information-collection-value"

package/components/information-collection/index.mjs

@@ -7,6 +7,10 @@ import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
 
 const props = {
   ..._VkfFormItemCtx.props,
+  information: {
+    type: Boolean,
+    default: true
+  },
   modelValue: {
     type: Array,
     default: () => []
@@ -35,8 +39,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   }) {
     const formItemProps = _VkfFormItemCtx.createBindProps(props2);
     return () => createVNode(VkfFormItem, mergeProps({
-      "class": "vk-information-collection",
-      "information": true
+      "class": "vk-information-collection"
     }, formItemProps.value), {
       default: () => [createVNode("div", {
         "class": "vk-information-collection-value"

package/components/information-collection/src/ctx.d.ts

@@ -3,6 +3,10 @@ import { NormalObject } from '@vunk/shared';
 import { PropType } from 'vue';
 import { TagProps } from 'element-plus';
 export declare const props: {
+    information: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     modelValue: {
         type: {
             (arrayLength: number): NormalObject[];
@@ -79,10 +83,6 @@ export declare const props: {
         type: StringConstructor;
         default: any;
     };
-    information: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     label: StringConstructor;
     labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
     labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "top" | "left" | "right", unknown, "", boolean>;

package/components/information-collection/src/index.vue.d.ts

@@ -1,4 +1,8 @@
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    information: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     modelValue: {
         type: {
             (arrayLength: number): import("@vunk/shared").NormalObject[];
@@ -75,10 +79,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: any;
     };
-    information: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     label: StringConstructor;
     labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
     labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "top" | "left" | "right", unknown, "", boolean>;
@@ -105,6 +105,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     inlineMessage: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, BooleanConstructor], unknown, unknown, "", boolean>;
     showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
 }>, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    information: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     modelValue: {
         type: {
             (arrayLength: number): import("@vunk/shared").NormalObject[];
@@ -181,10 +185,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: any;
     };
-    information: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     label: StringConstructor;
     labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
     labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "top" | "left" | "right", unknown, "", boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vunk/form",
-  "version": "2.7.1",
+  "version": "2.9.0",
   "description": "",
   "main": "index.esm.js",
   "scripts": {

package/shared/types/source/index.d.ts

@@ -4,24 +4,31 @@ import { __VkfTemplatesElementPlus } from '@vunk/form/components/templates-eleme
 import { __VkfTemplatesEsri } from '@vunk/form/components/templates-esri';
 import { AnyFunc, NormalObject } from '@vunk/core';
 import { __VkfTemplatesVariant } from '@vunk/form/components/templates-variant';
+import { __VkfFormItemRendererTemplate } from '@vunk/form/components/form-item-renderer-template';
+export interface InputEffectContext extends __VkfFormItemRendererTemplate.DefaultSlotArguments {
+    parentProp: Array<string | number>;
+}
 export interface BasicSource {
     /**
      * @description 渲染的组件
      */
     templateType?: string;
-    /**
-     * @description 渲染时提供给组件的 props
-     */
-    templateProps?: NormalObject | AnyFunc;
     /**
      *  @description 条件渲染
      */
     templateIf?: ((data: NormalObject) => boolean) | string | boolean;
+    /**
+     * @description 渲染时提供给组件的 props
+     */
+    templateProps?: NormalObject | AnyFunc;
     /**
      * @description 当被 Information 渲染时, 提供的 props
-     *
      */
     informationProps?: NormalObject | AnyFunc;
+    /**
+     * @description 当 input 触发时, 产生的副作用
+     */
+    inputEffect?: (value: any, context: InputEffectContext) => void;
     /**
      * @description dom class
      */