cnhis-design-vue 3.3.1-beta.9 → 3.3.1-release.5

package/es/components/form-config/src/FormConfig.vue.d.ts

@@ -1799,7 +1799,7 @@ declare const _default: import("vue").DefineComponent<{
             placeholder?: string | undefined;
             validate?: {
                 [x: string]: any;
-                obj_type?: ("password" | "sex" | "age" | "email" | "birthday" | "id_card" | "age_unit" | "mobile" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name") | undefined;
+                obj_type?: ("password" | "sex" | "age" | "email" | "mobile" | "birthday" | "id_card" | "age_unit" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name") | undefined;
                 vali_obj?: string | undefined;
                 max_value?: string | number | undefined;
                 min_value?: string | number | undefined;
@@ -1968,7 +1968,12 @@ declare const _default: import("vue").DefineComponent<{
             wrapperStyle?: Record<string, string | number> | undefined;
             childFieldStrategy?: "checked" | "all" | undefined;
             childWidthMode?: "inner" | "outer" | undefined;
-            validator?: ((value: unknown, fieldItem: import("../../../components/form-render").FieldItem, field: import("@formily/core").Field<any, any, any, any>) => string | void) | undefined;
+            validator?: ((value: unknown, fieldItem: import("../../../components/form-render").FieldItem, context: {
+                field: import("@formily/core").Field<any, any, any, any>;
+                form: import("@formily/core").Form<any>;
+                value: unknown;
+                validator: AnyFn;
+            }) => string | void) | undefined;
             reactions?: {
                 [x: string]: any;
                 dependencies?: string[] | undefined;
@@ -2052,7 +2057,7 @@ declare const _default: import("vue").DefineComponent<{
                     placeholder?: string | undefined;
                     validate?: {
                         [x: string]: any;
-                        obj_type?: ("password" | "sex" | "age" | "email" | "birthday" | "id_card" | "age_unit" | "mobile" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name") | undefined;
+                        obj_type?: ("password" | "sex" | "age" | "email" | "mobile" | "birthday" | "id_card" | "age_unit" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name") | undefined;
                         vali_obj?: string | undefined;
                         max_value?: string | number | undefined;
                         min_value?: string | number | undefined;
@@ -2221,7 +2226,12 @@ declare const _default: import("vue").DefineComponent<{
                     wrapperStyle?: Record<string, string | number> | undefined;
                     childFieldStrategy?: "checked" | "all" | undefined;
                     childWidthMode?: "inner" | "outer" | undefined;
-                    validator?: ((value: unknown, fieldItem: import("../../../components/form-render").FieldItem, field: import("@formily/core").Field<any, any, any, any>) => string | void) | undefined;
+                    validator?: ((value: unknown, fieldItem: import("../../../components/form-render").FieldItem, context: {
+                        field: import("@formily/core").Field<any, any, any, any>;
+                        form: import("@formily/core").Form<any>;
+                        value: unknown;
+                        validator: AnyFn;
+                    }) => string | void) | undefined;
                     reactions?: {
                         [x: string]: any;
                         dependencies?: string[] | undefined;
@@ -2278,7 +2288,7 @@ declare const _default: import("vue").DefineComponent<{
                 placeholder?: string | undefined;
                 validate?: {
                     [x: string]: any;
-                    obj_type?: ("password" | "sex" | "age" | "email" | "birthday" | "id_card" | "age_unit" | "mobile" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name") | undefined;
+                    obj_type?: ("password" | "sex" | "age" | "email" | "mobile" | "birthday" | "id_card" | "age_unit" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name") | undefined;
                     vali_obj?: string | undefined;
                     max_value?: string | number | undefined;
                     min_value?: string | number | undefined;
@@ -2447,7 +2457,12 @@ declare const _default: import("vue").DefineComponent<{
                 wrapperStyle?: Record<string, string | number> | undefined;
                 childFieldStrategy?: "checked" | "all" | undefined;
                 childWidthMode?: "inner" | "outer" | undefined;
-                validator?: ((value: unknown, fieldItem: import("../../../components/form-render").FieldItem, field: import("@formily/core").Field<any, any, any, any>) => string | void) | undefined;
+                validator?: ((value: unknown, fieldItem: import("../../../components/form-render").FieldItem, context: {
+                    field: import("@formily/core").Field<any, any, any, any>;
+                    form: import("@formily/core").Form<any>;
+                    value: unknown;
+                    validator: AnyFn;
+                }) => string | void) | undefined;
                 reactions?: {
                     [x: string]: any;
                     dependencies?: string[] | undefined;
@@ -2518,7 +2533,7 @@ declare const _default: import("vue").DefineComponent<{
                 placeholder?: string | undefined;
                 validate?: {
                     [x: string]: any;
-                    obj_type?: ("password" | "sex" | "age" | "email" | "birthday" | "id_card" | "age_unit" | "mobile" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name") | undefined;
+                    obj_type?: ("password" | "sex" | "age" | "email" | "mobile" | "birthday" | "id_card" | "age_unit" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name") | undefined;
                     vali_obj?: string | undefined;
                     max_value?: string | number | undefined;
                     min_value?: string | number | undefined;
@@ -2681,7 +2696,12 @@ declare const _default: import("vue").DefineComponent<{
                 wrapperStyle?: Record<string, string | number> | undefined;
                 childFieldStrategy?: "checked" | "all" | undefined;
                 childWidthMode?: "inner" | "outer" | undefined;
-                validator?: ((value: unknown, fieldItem: import("../../../components/form-render").FieldItem, field: import("@formily/core").Field<any, any, any, any>) => string | void) | undefined;
+                validator?: ((value: unknown, fieldItem: import("../../../components/form-render").FieldItem, context: {
+                    field: import("@formily/core").Field<any, any, any, any>;
+                    form: import("@formily/core").Form<any>;
+                    value: unknown;
+                    validator: AnyFn;
+                }) => string | void) | undefined;
                 reactions?: {
                     [x: string]: any;
                     dependencies?: string[] | undefined;
@@ -3943,7 +3963,7 @@ declare const _default: import("vue").DefineComponent<{
             placeholder?: string | undefined;
             validate?: Partial<{
                 [key: string]: any;
-                obj_type: "password" | "sex" | "age" | "email" | "birthday" | "id_card" | "age_unit" | "mobile" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name";
+                obj_type: "password" | "sex" | "age" | "email" | "mobile" | "birthday" | "id_card" | "age_unit" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name";
                 vali_obj: string;
                 max_value: string | number;
                 min_value: string | number;
@@ -4036,7 +4056,12 @@ declare const _default: import("vue").DefineComponent<{
             wrapperStyle?: Record<string, string | number> | undefined;
             childFieldStrategy?: "checked" | "all" | undefined;
             childWidthMode?: "inner" | "outer" | undefined;
-            validator?: ((value: unknown, fieldItem: import("../../../components/form-render").FieldItem, field: import("@formily/core").Field<any, any, any, any>) => string | void) | undefined;
+            validator?: ((value: unknown, fieldItem: import("../../../components/form-render").FieldItem, context: {
+                field: import("@formily/core").Field<any, any, any, any>;
+                form: import("@formily/core").Form<any>;
+                value: unknown;
+                validator: AnyFn;
+            }) => string | void) | undefined;
             reactions?: import("../../../shared/types").ArrayAble<import("../../../components/form-render").ReactionType> | undefined;
         }[];
         removeSetValueField: (item: LowCodeTypes.reactionConfig, index: number) => void;

package/es/components/form-config/src/FormConfig.vue.js

@@ -1 +1,6 @@
-import r from"./FormConfig.vue2.js";import o from"../../../_virtual/_plugin-vue_export-helper.js";var e=o(r,[["__file","FormConfig.vue"]]);export{e as default};
+import _sfc_main from './FormConfig.vue2.js';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
+
+var script = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "FormConfig.vue"]]);
+
+export { script as default };

package/es/components/form-config/src/FormConfig.vue2.js

@@ -1 +1,245 @@
-import{defineComponent as e,provide as o,ref as r,computed as t,toRaw as a,openBlock as i,createElementBlock as s,mergeProps as l,unref as n,createElementVNode as m,toDisplayString as f,createVNode as u,isRef as d,withCtx as c,createBlock as p,createCommentVNode as v,createTextVNode as g}from"vue";import{useTheme as h}from"../../../shared/hooks/useTheme.js";import"@vueuse/core";import"date-fns";import{isArray as _,cloneDeep as y,isFunction as x}from"lodash-es";import"@vue/shared";import{uuidGenerator as j,traverse as k}from"../../../shared/utils/index.js";import"@vueuse/shared";import"../../../shared/hooks/selectHooks/useSearchContent.js";import"@vicons/ionicons5";import{NSelect as L,NSpace as C}from"naive-ui";import{useVersion as F}from"../../../shared/hooks/useVersion.js";import"../../../shared/hooks/useScrollLoading.js";import{useFormConfigLocale as b}from"./hooks/useLocale.js";import V from"../../../shared/components/VueDraggable/src/vuedraggable.js";import M from"./components/FormConfigCreator.vue.js";import R from"./components/FormConfigDragDisplay.vue.js";import w from"./components/FormConfigEdit.vue.js";import D from"./components/FormConfigEventSetting.vue.js";import E from"./components/FormConfigMaterialItem.js";import{useDataNormalize as H}from"./hooks/useDataNormalize.js";import{InjectionFormConfigProps as S,InjectionFormConfigEmit as A,InjectionFieldList as I,InjectionMaterialList as U,InjectionLowCodeReactions as O,InjectionActiveFieldItem as P,FORM_CONFIG_GROUP as T}from"./constants/index.js";import{fieldItemNormalize as z}from"./utils/index.js";import{useSortableConfig as B}from"./hooks/useSortalbeConfig.js";import"./hooks/useConfigurationField.js";const N=["id"],W={class:"form-config__material"},q={class:"form-config__materialHeader"},G={class:"form-config__displayWrapper"},J={class:"form-config__displayHeader"},K={class:"form-config__config"},Q={class:"form-config__configHeader"},X={class:"form-config__configContent"};var Y=e({__name:"FormConfig",props:{maxHeight:{type:String},fieldVisitor:{type:Object},textFormatter:{type:Function},formRenderRef:{type:Object},extraMaterialList:{type:[Array,Function]},formProps:{type:Object},beforeMove:{type:Function},showLowCodeReactions:Boolean},emits:["addItem","removeItem","reactionsValidateFailure"],setup(e,{expose:Y,emit:Z}){const $=e;o(S,$),o(A,Z);const ee=j(),oe=h(),re=r([]);o(I,re);const te=r([]);o(U,te);const ae=r([]);function ie(e){re.value.some((o=>o.key===e.key))||re.value.push(e)}o(O,ae);const se=(e,o)=>x($.textFormatter)?$.textFormatter(e,o):o,le=r();o(P,le);const ne=r(),{transform:me,inverseTransform:fe}=H($),ue=t({get:()=>null,set(e){if(!e)return;const o=ce.value.find((o=>o.key===e));o&&(o.__extra=!0,z(o),te.value.push(o),Z("addItem",o))}}),de=r([]),ce=t((()=>{if(!_(de.value))return[];const e=[];return k([...te.value,...re.value],(o=>e.push(o.key))),de.value.filter((o=>!e.find((e=>e===o.key))))}));async function pe(){$.extraMaterialList&&!de.value.length&&(de.value=x($.extraMaterialList)?await $.extraMaterialList():$.extraMaterialList)}return Y({loadData({fieldList:e,lowCodeReactions:o=[]}){let r=[],t=[];e.forEach((e=>{return!1===(o=y(a(e))).show?t.push(o):r.push(o),void z(o);var o})),re.value=me(r),te.value=t,ae.value=o,le.value=void 0},validate(){var e;return null==(e=ne.value)?void 0:e.validate()},getData:(e=!1)=>({fieldList:fe(y(a(re.value)),e,{show:!0}),materialList:fe(y(a(te.value)),e,{show:!1}),lowCodeReactions:y(a(ae.value))}),clearExtraList(){de.value=[]}}),(o,r)=>(i(),s("section",l({class:"form-config",style:{"--max-height":e.maxHeight,...n(oe)},id:n(ee)},n(F)()),[m("section",W,[m("header",q,f(n(b)("materialArea")),1),u(n(V),l(B({fieldList:re,materialList:te,hooks:{beforeMove:$.beforeMove}}),{class:"form-config__materialContent",modelValue:n(te),"onUpdate:modelValue":r[0]||(r[0]=e=>d(te)?te.value=e:null)}),{item:c((({element:e})=>[u(n(E),{"form-config-item":e,"text-formatter":se,"material-List":n(te)},null,8,["form-config-item","material-List"])])),_:1},16,["modelValue"]),e.extraMaterialList?(i(),p(n(L),{key:0,class:"form-config__materialExtraList",filterable:"",value:n(ue),"onUpdate:value":r[1]||(r[1]=e=>d(ue)?ue.value=e:null),placeholder:n(b)("materialArea.createMaterialPlaceholder"),options:n(ce),"label-field":"name","value-field":"key",onFocus:pe},null,8,["value","placeholder","options"])):v("v-if",!0)]),m("section",G,[m("header",J,[g(f(n(b)("layoutArea"))+" ",1),u(n(C),null,{default:c((()=>[e.showLowCodeReactions?(i(),p(D,{key:0,modelValue:ae.value,"onUpdate:modelValue":r[2]||(r[2]=e=>ae.value=e),"bind-form-render-ref":e.formRenderRef,onValidateFailure:r[3]||(r[3]=e=>Z("reactionsValidateFailure",e))},null,8,["modelValue","bind-form-render-ref"])):v("v-if",!0),u(M,{onSubmit:ie})])),_:1})]),u(R,{class:"form-config__displayContent",group:n(T),"text-formatter":se,modelValue:n(re),"onUpdate:modelValue":r[4]||(r[4]=e=>d(re)?re.value=e:null)},null,8,["group","modelValue"])]),m("section",K,[m("header",Q,f(n(b)("configArea")),1),m("section",X,[u(w,{ref_key:"formConfigEditRef",ref:ne,uuid:n(ee),"bind-form-render-ref":e.formRenderRef,"form-props":e.formProps},null,8,["uuid","bind-form-render-ref","form-props"])])])],16,N))}});export{Y as default};
+import { defineComponent, provide, ref, computed, toRaw, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString, createVNode, isRef, withCtx, createBlock, createCommentVNode, createTextVNode } from 'vue';
+import { useTheme } from '../../../shared/hooks/useTheme.js';
+import '@vueuse/core';
+import 'date-fns';
+import { isArray, cloneDeep, isFunction } from 'lodash-es';
+import '@vue/shared';
+import { uuidGenerator, traverse } from '../../../shared/utils/index.js';
+import '@vueuse/shared';
+import '../../../shared/hooks/selectHooks/useSearchContent.js';
+import '@vicons/ionicons5';
+import { NSelect, NSpace } from 'naive-ui';
+import { useVersion } from '../../../shared/hooks/useVersion.js';
+import '../../../shared/hooks/useScrollLoading.js';
+import { useFormConfigLocale } from './hooks/useLocale.js';
+import draggableComponent from '../../../shared/components/VueDraggable/src/vuedraggable.js';
+import FormConfigCreator from './components/FormConfigCreator.vue.js';
+import FormConfigDragDisplay from './components/FormConfigDragDisplay.vue.js';
+import FormConfigEdit from './components/FormConfigEdit.vue.js';
+import FormConfigEventSetting from './components/FormConfigEventSetting.vue.js';
+import FormConfigMaterialItem from './components/FormConfigMaterialItem.js';
+import { useDataNormalize } from './hooks/useDataNormalize.js';
+import { InjectionFormConfigProps, InjectionFormConfigEmit, InjectionFieldList, InjectionMaterialList, InjectionLowCodeReactions, InjectionActiveFieldItem, FORM_CONFIG_GROUP } from './constants/index.js';
+import { fieldItemNormalize } from './utils/index.js';
+import { useSortableConfig } from './hooks/useSortalbeConfig.js';
+import './hooks/useConfigurationField.js';
+
+const _hoisted_1 = ["id"];
+const _hoisted_2 = {
+  class: "form-config__material"
+};
+const _hoisted_3 = {
+  class: "form-config__materialHeader"
+};
+const _hoisted_4 = {
+  class: "form-config__displayWrapper"
+};
+const _hoisted_5 = {
+  class: "form-config__displayHeader"
+};
+const _hoisted_6 = {
+  class: "form-config__config"
+};
+const _hoisted_7 = {
+  class: "form-config__configHeader"
+};
+const _hoisted_8 = {
+  class: "form-config__configContent"
+};
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FormConfig",
+  props: {
+    maxHeight: {
+      type: String
+    },
+    fieldVisitor: {
+      type: Object
+    },
+    textFormatter: {
+      type: Function
+    },
+    formRenderRef: {
+      type: Object
+    },
+    extraMaterialList: {
+      type: [Array, Function]
+    },
+    formProps: {
+      type: Object
+    },
+    beforeMove: {
+      type: Function
+    },
+    showLowCodeReactions: Boolean
+  },
+  emits: [
+    "addItem",
+    "removeItem",
+    "reactionsValidateFailure"
+  ],
+  setup(__props, {
+    expose,
+    emit
+  }) {
+    const props = __props;
+    provide(InjectionFormConfigProps, props);
+    provide(InjectionFormConfigEmit, emit);
+    const uuid = uuidGenerator();
+    const cssVars = useTheme();
+    const fieldListRef = ref([]);
+    provide(InjectionFieldList, fieldListRef);
+    const materialListRef = ref([]);
+    provide(InjectionMaterialList, materialListRef);
+    const lowCodeReactionsRef = ref([]);
+    provide(InjectionLowCodeReactions, lowCodeReactionsRef);
+    function getSortOption() {
+      return useSortableConfig({
+        fieldList: fieldListRef,
+        materialList: materialListRef,
+        hooks: {
+          beforeMove: props.beforeMove
+        }
+      });
+    }
+    function addItem(formConfigItem) {
+      if (fieldListRef.value.some((field) => field.key === formConfigItem.key))
+        return;
+      fieldListRef.value.push(formConfigItem);
+    }
+    const parsedTextFormatter = (formConfigItem, parsedText) => {
+      if (!isFunction(props.textFormatter))
+        return parsedText;
+      return props.textFormatter(formConfigItem, parsedText);
+    };
+    const currentEditField = ref();
+    provide(InjectionActiveFieldItem, currentEditField);
+    const formConfigEditRef = ref();
+    const {
+      transform,
+      inverseTransform
+    } = useDataNormalize(props);
+    const extraValueRef = computed({
+      get() {
+        return null;
+      },
+      set(value) {
+        if (!value)
+          return;
+        const item = extraOptions.value.find((item2) => item2.key === value);
+        if (!item)
+          return;
+        item.__extra = true;
+        fieldItemNormalize(item);
+        materialListRef.value.push(item);
+        emit("addItem", item);
+      }
+    });
+    const _extraOptions = ref([]);
+    const extraOptions = computed(() => {
+      if (!isArray(_extraOptions.value))
+        return [];
+      const widgetFieldList = [];
+      traverse([...materialListRef.value, ...fieldListRef.value], (field) => widgetFieldList.push(field.key));
+      return _extraOptions.value.filter((item) => !widgetFieldList.find((field) => field === item.key));
+    });
+    async function onFocus() {
+      if (!props.extraMaterialList || _extraOptions.value.length)
+        return;
+      _extraOptions.value = isFunction(props.extraMaterialList) ? await props.extraMaterialList() : props.extraMaterialList;
+    }
+    expose({
+      loadData({
+        fieldList,
+        lowCodeReactions = []
+      }) {
+        let _fieldList = [], _materialList = [];
+        fieldList.forEach((field) => classification(cloneDeep(toRaw(field))));
+        fieldListRef.value = transform(_fieldList);
+        materialListRef.value = _materialList;
+        lowCodeReactionsRef.value = lowCodeReactions;
+        currentEditField.value = void 0;
+        function classification(item) {
+          item.show === false ? _materialList.push(item) : _fieldList.push(item);
+          fieldItemNormalize(item);
+        }
+      },
+      validate() {
+        var _a;
+        return (_a = formConfigEditRef.value) == null ? void 0 : _a.validate();
+      },
+      getData(withOriginalSetting = false) {
+        return {
+          fieldList: inverseTransform(cloneDeep(toRaw(fieldListRef.value)), withOriginalSetting, {
+            show: true
+          }),
+          materialList: inverseTransform(cloneDeep(toRaw(materialListRef.value)), withOriginalSetting, {
+            show: false
+          }),
+          lowCodeReactions: cloneDeep(toRaw(lowCodeReactionsRef.value))
+        };
+      },
+      clearExtraList() {
+        _extraOptions.value = [];
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", mergeProps({
+        class: "form-config",
+        style: {
+          "--max-height": __props.maxHeight,
+          ...unref(cssVars)
+        },
+        id: unref(uuid)
+      }, unref(useVersion)()), [createElementVNode("section", _hoisted_2, [createElementVNode("header", _hoisted_3, toDisplayString(unref(useFormConfigLocale)("materialArea")), 1), createVNode(unref(draggableComponent), mergeProps(getSortOption(), {
+        class: "form-config__materialContent",
+        modelValue: unref(materialListRef),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(materialListRef) ? materialListRef.value = $event : null)
+      }), {
+        item: withCtx(({
+          element
+        }) => [createVNode(unref(FormConfigMaterialItem), {
+          "form-config-item": element,
+          "text-formatter": parsedTextFormatter,
+          "material-List": unref(materialListRef)
+        }, null, 8, ["form-config-item", "material-List"])]),
+        _: 1
+      }, 16, ["modelValue"]), __props.extraMaterialList ? (openBlock(), createBlock(unref(NSelect), {
+        key: 0,
+        class: "form-config__materialExtraList",
+        filterable: "",
+        value: unref(extraValueRef),
+        "onUpdate:value": _cache[1] || (_cache[1] = ($event) => isRef(extraValueRef) ? extraValueRef.value = $event : null),
+        placeholder: unref(useFormConfigLocale)("materialArea.createMaterialPlaceholder"),
+        options: unref(extraOptions),
+        "label-field": "name",
+        "value-field": "key",
+        onFocus
+      }, null, 8, ["value", "placeholder", "options"])) : createCommentVNode("v-if", true)]), createElementVNode("section", _hoisted_4, [createElementVNode("header", _hoisted_5, [createTextVNode(toDisplayString(unref(useFormConfigLocale)("layoutArea")) + " ", 1), createVNode(unref(NSpace), null, {
+        default: withCtx(() => [__props.showLowCodeReactions ? (openBlock(), createBlock(FormConfigEventSetting, {
+          key: 0,
+          modelValue: lowCodeReactionsRef.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => lowCodeReactionsRef.value = $event),
+          "bind-form-render-ref": __props.formRenderRef,
+          onValidateFailure: _cache[3] || (_cache[3] = (e) => emit("reactionsValidateFailure", e))
+        }, null, 8, ["modelValue", "bind-form-render-ref"])) : createCommentVNode("v-if", true), createVNode(FormConfigCreator, {
+          onSubmit: addItem
+        })]),
+        _: 1
+      })]), createVNode(FormConfigDragDisplay, {
+        class: "form-config__displayContent",
+        group: unref(FORM_CONFIG_GROUP),
+        "text-formatter": parsedTextFormatter,
+        modelValue: unref(fieldListRef),
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(fieldListRef) ? fieldListRef.value = $event : null)
+      }, null, 8, ["group", "modelValue"])]), createElementVNode("section", _hoisted_6, [createElementVNode("header", _hoisted_7, toDisplayString(unref(useFormConfigLocale)("configArea")), 1), createElementVNode("section", _hoisted_8, [createVNode(FormConfigEdit, {
+        ref_key: "formConfigEditRef",
+        ref: formConfigEditRef,
+        uuid: unref(uuid),
+        "bind-form-render-ref": __props.formRenderRef,
+        "form-props": __props.formProps
+      }, null, 8, ["uuid", "bind-form-render-ref", "form-props"])])])], 16, _hoisted_1);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/form-config/src/components/FormConfigCreator.vue.js

@@ -1 +1,6 @@
-import r from"./FormConfigCreator.vue2.js";import o from"../../../../_virtual/_plugin-vue_export-helper.js";var e=o(r,[["__file","FormConfigCreator.vue"]]);export{e as default};
+import _sfc_main from './FormConfigCreator.vue2.js';
+import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
+
+var FormConfigCreator = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "FormConfigCreator.vue"]]);
+
+export { FormConfigCreator as default };

package/es/components/form-config/src/components/FormConfigCreator.vue2.js

@@ -1 +1,105 @@
-import{defineComponent as e,ref as t,openBlock as i,createBlock as a,unref as o,withCtx as l,createVNode as n,createTextVNode as r,toDisplayString as s}from"vue";import{pick as u}from"lodash-es";import{NButtonGroup as m,NPopconfirm as f,NButton as d}from"naive-ui";import{EditAbleField as c}from"../constants/index.js";import{useConfigurationField as p}from"../hooks/useConfigurationField.js";import{useFormConfigLocale as v}from"../hooks/useLocale.js";import"../../../index.js";import g from"../../../form-render/index.js";var L=e({__name:"FormConfigCreator",emits:{submit:e=>e},setup(e,{emit:L}){const _=p().generateFieldListByKeys([c.NAME,c.LAYOUT_WIDTH_ENUM,c.NOTES,c.DEFAULT_EXPAND,c.FOLD]);Object.assign(_[0],{html_type:"INPUT",is_null:"0"});const h=t(),x=t(),y={defaultExpand:!0,fold:!0,layoutWidthEnum:"ALL_LINE"};async function E(e,t,i){if(!i)return;await i.validate();const a=i.getFormValues();L("submit",{layoutWidthEnum:"ALL_LINE",...a,type:e,key:a.name,...t,__new:!0})}return(e,t)=>(i(),a(o(m),{size:"small"},{default:l((()=>[n(o(f),{width:"300px","show-icon":!1,"show-arrow":!1,to:"body","positive-text":o(v)("configArea.positiveBtn"),"negative-text":o(v)("configArea.negativeBtn"),onPositiveClick:t[0]||(t[0]=e=>E("NEWLINE",{},x.value))},{trigger:l((()=>[n(o(d),null,{default:l((()=>[r(s(o(v)("layoutArea.createLinebreak")),1)])),_:1})])),default:l((()=>[n(o(g),{column:12,ref_key:"lineBreakFormRef",ref:x,"initial-data":o(u)(y,["layoutWidthEnum"]),size:"small","label-width":"auto","label-placement":"left",fieldList:o(_).slice(0,1)},null,8,["initial-data","fieldList"])])),_:1},8,["positive-text","negative-text"]),n(o(f),{width:"300px","show-icon":!1,"show-arrow":!1,to:"body","positive-text":o(v)("configArea.positiveBtn"),"negative-text":o(v)("configArea.negativeBtn"),onPositiveClick:t[1]||(t[1]=e=>E("LINE_BAR",{children:[]},h.value))},{trigger:l((()=>[n(o(d),null,{default:l((()=>[r(s(o(v)("layoutArea.createLinebar")),1)])),_:1})])),default:l((()=>[n(o(g),{column:12,ref_key:"linebarFormRef",ref:h,"initial-data":y,size:"small","label-width":"auto","label-placement":"left",fieldList:o(_)},null,8,["fieldList"])])),_:1},8,["positive-text","negative-text"])])),_:1}))}});export{L as default};
+import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createVNode, createTextVNode, toDisplayString } from 'vue';
+import { pick } from 'lodash-es';
+import { NButtonGroup, NPopconfirm, NButton } from 'naive-ui';
+import { EditAbleField } from '../constants/index.js';
+import { useConfigurationField } from '../hooks/useConfigurationField.js';
+import { useFormConfigLocale } from '../hooks/useLocale.js';
+import '../../../index.js';
+import FormRender from '../../../form-render/index.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FormConfigCreator",
+  emits: {
+    submit: (payload) => payload
+  },
+  setup(__props, {
+    emit
+  }) {
+    const linebarField = useConfigurationField().generateFieldListByKeys([EditAbleField.NAME, EditAbleField.LAYOUT_WIDTH_ENUM, EditAbleField.NOTES, EditAbleField.DEFAULT_EXPAND, EditAbleField.FOLD]);
+    Object.assign(linebarField[0], {
+      html_type: "INPUT",
+      is_null: "0"
+    });
+    const linebarFormRef = ref();
+    const lineBreakFormRef = ref();
+    const initialData = {
+      defaultExpand: true,
+      fold: true,
+      layoutWidthEnum: "ALL_LINE"
+    };
+    async function submit(type, props, formRef) {
+      if (!formRef)
+        return;
+      await formRef.validate();
+      const formData = formRef.getFormValues();
+      emit("submit", {
+        layoutWidthEnum: "ALL_LINE",
+        ...formData,
+        type,
+        key: formData.name,
+        ...props,
+        __new: true
+      });
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NButtonGroup), {
+        size: "small"
+      }, {
+        default: withCtx(() => [createVNode(unref(NPopconfirm), {
+          width: "300px",
+          "show-icon": false,
+          "show-arrow": false,
+          to: "body",
+          "positive-text": unref(useFormConfigLocale)("configArea.positiveBtn"),
+          "negative-text": unref(useFormConfigLocale)("configArea.negativeBtn"),
+          onPositiveClick: _cache[0] || (_cache[0] = ($event) => submit("NEWLINE", {}, lineBreakFormRef.value))
+        }, {
+          trigger: withCtx(() => [createVNode(unref(NButton), null, {
+            default: withCtx(() => [createTextVNode(toDisplayString(unref(useFormConfigLocale)("layoutArea.createLinebreak")), 1)]),
+            _: 1
+          })]),
+          default: withCtx(() => [createVNode(unref(FormRender), {
+            column: 12,
+            ref_key: "lineBreakFormRef",
+            ref: lineBreakFormRef,
+            "initial-data": unref(pick)(initialData, ["layoutWidthEnum"]),
+            size: "small",
+            "label-width": "auto",
+            "label-placement": "left",
+            fieldList: unref(linebarField).slice(0, 1)
+          }, null, 8, ["initial-data", "fieldList"])]),
+          _: 1
+        }, 8, ["positive-text", "negative-text"]), createVNode(unref(NPopconfirm), {
+          width: "300px",
+          "show-icon": false,
+          "show-arrow": false,
+          to: "body",
+          "positive-text": unref(useFormConfigLocale)("configArea.positiveBtn"),
+          "negative-text": unref(useFormConfigLocale)("configArea.negativeBtn"),
+          onPositiveClick: _cache[1] || (_cache[1] = ($event) => submit("LINE_BAR", {
+            children: []
+          }, linebarFormRef.value))
+        }, {
+          trigger: withCtx(() => [createVNode(unref(NButton), null, {
+            default: withCtx(() => [createTextVNode(toDisplayString(unref(useFormConfigLocale)("layoutArea.createLinebar")), 1)]),
+            _: 1
+          })]),
+          default: withCtx(() => [createVNode(unref(FormRender), {
+            column: 12,
+            ref_key: "linebarFormRef",
+            ref: linebarFormRef,
+            "initial-data": initialData,
+            size: "small",
+            "label-width": "auto",
+            "label-placement": "left",
+            fieldList: unref(linebarField)
+          }, null, 8, ["fieldList"])]),
+          _: 1
+        }, 8, ["positive-text", "negative-text"])]),
+        _: 1
+      });
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/form-config/src/components/FormConfigDragDisplay.vue.js

@@ -1 +1,6 @@
-import r from"./FormConfigDragDisplay.vue2.js";import o from"../../../../_virtual/_plugin-vue_export-helper.js";var e=o(r,[["__file","FormConfigDragDisplay.vue"]]);export{e as default};
+import _sfc_main from './FormConfigDragDisplay.vue2.js';
+import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
+
+var FormConfigDragDisplay = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "FormConfigDragDisplay.vue"]]);
+
+export { FormConfigDragDisplay as default };

package/es/components/form-config/src/components/FormConfigDragDisplay.vue2.js

@@ -1 +1,60 @@
-import{defineComponent as e,inject as t,openBlock as o,createBlock as r,unref as m,mergeProps as i,withCtx as n,resolveDynamicComponent as s,normalizeStyle as f}from"vue";import a from"../../../../shared/components/VueDraggable/src/vuedraggable.js";import{InjectionFormConfigProps as l,InjectionFieldList as u,InjectionMaterialList as p}from"../constants/index.js";import{usePresetRenderer as g}from"../hooks/usePresetRenderer.js";import{useSortableConfig as c}from"../hooks/useSortalbeConfig.js";import"../hooks/useConfigurationField.js";import{layoutWidthEnum2Column as d}from"../utils/index.js";var y=e({__name:"FormConfigDragDisplay",props:{formConfigItem:{type:Object},textFormatter:{type:Function,required:!0}},setup(e){const y=t(l);function v(e){return{"--item-column":e?d(e.layoutWidthEnum):24}}const C=t(u),j=t(p);const{getRenderer:x}=g();return(t,l)=>{return o(),r(m(a),i((u=e.formConfigItem,c({group:"COMBINATION"===(null==u?void 0:u.type)?u.key:"",fieldList:C,materialList:j,hooks:{beforeMove:null==y?void 0:y.beforeMove}})),{style:v(e.formConfigItem)}),{item:n((({element:t})=>[(o(),r(s(m(x)(t)),{class:"form-config__displayContentItem",style:f(v(t)),"form-config-item":t,textFormatter:e.textFormatter},null,8,["style","form-config-item","textFormatter"]))])),_:1},16,["style"]);var u}}});export{y as default};
+import { defineComponent, inject, openBlock, createBlock, unref, mergeProps, withCtx, resolveDynamicComponent, normalizeStyle } from 'vue';
+import draggableComponent from '../../../../shared/components/VueDraggable/src/vuedraggable.js';
+import { InjectionFormConfigProps, InjectionFieldList, InjectionMaterialList } from '../constants/index.js';
+import { usePresetRenderer } from '../hooks/usePresetRenderer.js';
+import { useSortableConfig } from '../hooks/useSortalbeConfig.js';
+import '../hooks/useConfigurationField.js';
+import { layoutWidthEnum2Column } from '../utils/index.js';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FormConfigDragDisplay",
+  props: {
+    formConfigItem: {
+      type: Object
+    },
+    textFormatter: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(__props) {
+    const globProps = inject(InjectionFormConfigProps);
+    function getItemColumnStyle(formConfigItem) {
+      return {
+        "--item-column": formConfigItem ? layoutWidthEnum2Column(formConfigItem.layoutWidthEnum) : 24
+      };
+    }
+    const fieldList = inject(InjectionFieldList);
+    const materialList = inject(InjectionMaterialList);
+    function getSortOption(formConfigItem) {
+      return useSortableConfig({
+        group: (formConfigItem == null ? void 0 : formConfigItem.type) === "COMBINATION" ? formConfigItem.key : "",
+        fieldList,
+        materialList,
+        hooks: {
+          beforeMove: globProps == null ? void 0 : globProps.beforeMove
+        }
+      });
+    }
+    const {
+      getRenderer
+    } = usePresetRenderer();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(draggableComponent), mergeProps(getSortOption(__props.formConfigItem), {
+        style: getItemColumnStyle(__props.formConfigItem)
+      }), {
+        item: withCtx(({
+          element
+        }) => [(openBlock(), createBlock(resolveDynamicComponent(unref(getRenderer)(element)), {
+          class: "form-config__displayContentItem",
+          style: normalizeStyle(getItemColumnStyle(element)),
+          "form-config-item": element,
+          textFormatter: __props.textFormatter
+        }, null, 8, ["style", "form-config-item", "textFormatter"]))]),
+        _: 1
+      }, 16, ["style"]);
+    };
+  }
+});
+
+export { _sfc_main as default };