cnhis-design-vue 3.1.17-beta.2 → 3.1.17-beta.3

package/es/packages/big-table/src/components/separate.js

@@ -3,7 +3,7 @@ import { useSeparateMap } from '../../../../packages/big-table/src/hooks/useSepa
 import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
 
 const _hoisted_1 = { class: "big-table__separate" };
-const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", { class: "big-table__separatePlaceholder" }, "p", -1);
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", { class: "big-table__separatePlaceholder" }, /* @__PURE__ */ toDisplayString(` `), -1);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "separate",
   props: {

package/es/packages/big-table/src/hooks/useSeparateRow.js

@@ -89,7 +89,7 @@ function useSeparateRow(getColumnConfig, getFieldItem, $VXETable) {
           separateDataMap.value.set(row, {
             row,
             rawRow: rawData[dataIndex],
-            index,
+            index: dataIndex,
             separateData
           });
           row.$__SEPARATE_DATA = [separateData];
@@ -99,7 +99,7 @@ function useSeparateRow(getColumnConfig, getFieldItem, $VXETable) {
         separateDataMap.value.set(data2, {
           row: data2,
           rawRow: rawData[dataIndex],
-          index,
+          index: dataIndex,
           separateData
         });
         row.$__SEPARATE_DATA.push(separateData);

package/es/packages/form-config/index.d.ts

@@ -42,6 +42,7 @@ declare const FormConfig: SFCWithInstall<import("vue").DefineComponent<{
         notes?: string | undefined;
         desc?: string | undefined;
         children?: any[] | undefined;
+        __new?: boolean | undefined;
     }[]>;
     materialListRef: import("vue").Ref<{
         key: string;
@@ -57,9 +58,10 @@ declare const FormConfig: SFCWithInstall<import("vue").DefineComponent<{
         notes?: string | undefined;
         desc?: string | undefined;
         children?: any[] | undefined;
+        __new?: boolean | undefined;
     }[]>;
     addItem: (fieldItem: import("./src/types").FormConfigItem) => void;
-    textFormatter: import("./src/types").FormConfigTextFormatter;
+    parsedTextFormatter: import("./src/types").FormConfigTextFormatter;
     getRenderer: (fieldItem: import("./src/types").FormConfigItem) => import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>;
     currentEditField: import("vue").Ref<import("./src/types").FormConfigItem | undefined>;
     formConfigEditRef: import("vue").Ref<{
@@ -138,6 +140,116 @@ declare const FormConfig: SFCWithInstall<import("vue").DefineComponent<{
         modelValue: unknown[];
         componentData: Record<string, any>;
     }>;
+    FormConfigDragDisplay: import("vue").DefineComponent<{
+        fieldItem: {
+            type: import("vue").PropType<import("./src/types").FormConfigItem>;
+        };
+        getRenderer: {
+            type: import("../../../es/src/types").Func<any[], any>;
+            require: boolean;
+        };
+        textFormatter: {
+            type: import("vue").PropType<import("./src/types").FormConfigTextFormatter>;
+            required: true;
+        };
+    }, {
+        getItemColumnStyle: (fieldItem?: import("./src/types").FormConfigItem | undefined) => {
+            '--item-column': number;
+        };
+        commonConfig: {
+            onMove: ({ to, from }: import("sortablejs").SortableEvent) => void;
+            onChoose: ({ target, item }: import("sortablejs").SortableEvent) => void;
+            onUnchoose: ({ from, to, target, item }: import("sortablejs").SortableEvent) => void;
+            tag: string;
+            animation: string;
+            'item-key': string;
+        };
+        Draggable: import("vue").DefineComponent<{
+            list: {
+                type: ArrayConstructor;
+                required: boolean;
+                default: any;
+            };
+            modelValue: {
+                type: ArrayConstructor;
+                required: boolean;
+                default: any;
+            };
+            itemKey: {
+                type: (StringConstructor | FunctionConstructor)[];
+                required: boolean;
+            };
+            clone: {
+                type: FunctionConstructor;
+                default: (original: any) => any;
+            };
+            tag: {
+                type: StringConstructor;
+                default: string;
+            };
+            move: {
+                type: FunctionConstructor;
+                default: any;
+            };
+            componentData: {
+                type: ObjectConstructor;
+                required: boolean;
+                default: any;
+            };
+        }, unknown, {
+            error: boolean;
+        }, {
+            realList(): any;
+            getKey(): any;
+        }, {
+            getUnderlyingVm(domElement: any): any;
+            getUnderlyingPotencialDraggableComponent(htmElement: any): any;
+            emitChanges(evt: any): void;
+            alterList(onList: any): void;
+            spliceList(): void;
+            updatePosition(oldIndex: any, newIndex: any): void;
+            getRelatedContextFromMoveEvent({ to, related }: {
+                to: any;
+                related: any;
+            }): any;
+            getVmIndexFromDomIndex(domIndex: any): any;
+            onDragStart(evt: any): void;
+            onDragAdd(evt: any): void;
+            onDragRemove(evt: any): void;
+            onDragUpdate(evt: any): void;
+            computeFutureIndex(relatedContext: any, evt: any): any;
+            onDragMove(evt: any, originalEvent: any): any;
+            onDragEnd(): void;
+        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any[], any, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+            move: Function;
+            tag: string;
+            clone: Function;
+            list: unknown[];
+            modelValue: unknown[];
+            componentData: Record<string, any>;
+        } & {
+            itemKey?: string | Function | undefined;
+        }>, {
+            move: Function;
+            tag: string;
+            clone: Function;
+            list: unknown[];
+            modelValue: unknown[];
+            componentData: Record<string, any>;
+        }>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        fieldItem: {
+            type: import("vue").PropType<import("./src/types").FormConfigItem>;
+        };
+        getRenderer: {
+            type: import("../../../es/src/types").Func<any[], any>;
+            require: boolean;
+        };
+        textFormatter: {
+            type: import("vue").PropType<import("./src/types").FormConfigTextFormatter>;
+            required: true;
+        };
+    }>>, {}>;
     layoutWidthEnum2Column: typeof import("./src/utils").layoutWidthEnum2Column;
     FormConfigEdit: import("vue").DefineComponent<{}, {
         key: import("vue").Ref<number>;
@@ -1824,7 +1936,9 @@ declare const FormConfig: SFCWithInstall<import("vue").DefineComponent<{
                 notes?: string | undefined;
                 desc?: string | undefined;
                 children?: any[] | undefined;
+                __new?: boolean | undefined;
             }[] | undefined;
+            __new?: boolean | undefined;
         }>;
         generateFieldListByFieldItem: (fieldItem: import("./src/types").FormConfigItem) => import("..").FieldItem[];
         showModal: import("vue").Ref<boolean>;

package/es/packages/form-config/src/FormConfig.js

@@ -1,10 +1,11 @@
-import { defineComponent, ref, provide, toRaw, openBlock, createElementBlock, normalizeStyle, createElementVNode, createVNode, unref, mergeProps, withCtx, toDisplayString, createBlock, resolveDynamicComponent, createTextVNode } from 'vue';
+import { defineComponent, ref, provide, toRaw, openBlock, createElementBlock, normalizeStyle, createElementVNode, createVNode, unref, mergeProps, withCtx, toDisplayString, createTextVNode } from 'vue';
 import { cloneDeep, isFunction } from 'lodash-es';
 import Draggable from 'vuedraggable';
+import FormConfigDragDisplay from '../../../packages/form-config/src/components/FormConfigDragDisplay';
 import { layoutWidthEnum2Column } from '../../../packages/form-config/src/utils';
 import FormConfigEdit from './components/FormConfigEdit.js';
 import FormConfigCreator from './components/FormConfigCreator.js';
-import { InjectionActiveFieldItem } from '../../../packages/form-config/src/constants';
+import { InjectionFieldList, InjectionMaterialList, InjectionActiveFieldItem } from '../../../packages/form-config/src/constants';
 import { useSortable, usePresetRenderer } from '../../../packages/form-config/src/hooks';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
@@ -27,17 +28,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { commonConfig } = useSortable();
     const fieldListRef = ref([]);
     const materialListRef = ref([]);
+    provide(InjectionFieldList, fieldListRef);
+    provide(InjectionMaterialList, materialListRef);
     function addItem(fieldItem) {
       if (fieldListRef.value.some((field) => field.key === fieldItem.key))
         return;
       fieldListRef.value.push(fieldItem);
     }
-    const textFormatter = (fieldItem, parsedText) => {
+    const parsedTextFormatter = (fieldItem, parsedText) => {
       if (!isFunction(props.textFormatter))
         return parsedText;
       return props.textFormatter(fieldItem, parsedText);
     };
-    const { getRenderer } = usePresetRenderer(textFormatter);
+    const { getRenderer } = usePresetRenderer();
     const currentEditField = ref();
     provide(InjectionActiveFieldItem, currentEditField);
     const formConfigEditRef = ref();
@@ -86,22 +89,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             _hoisted_5,
             createVNode(FormConfigCreator, { onSubmit: addItem })
           ]),
-          createVNode(unref(Draggable), mergeProps(unref(commonConfig), {
-            group: "__display",
+          createVNode(FormConfigDragDisplay, {
             class: "form-config__displayContent",
+            "text-formatter": parsedTextFormatter,
+            "get-renderer": unref(getRenderer),
             modelValue: fieldListRef.value,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => fieldListRef.value = $event)
-          }), {
-            item: withCtx(({ element }) => [
-              createElementVNode("section", {
-                class: "form-config__displayContentItem",
-                style: normalizeStyle({ "--item-column": unref(layoutWidthEnum2Column)(element.layoutWidthEnum) })
-              }, [
-                (openBlock(), createBlock(resolveDynamicComponent(unref(getRenderer)(element)), { fieldItem: element }, null, 8, ["fieldItem"]))
-              ], 4)
-            ]),
-            _: 1
-          }, 16, ["modelValue"])
+          }, null, 8, ["get-renderer", "modelValue"])
         ]),
         createElementVNode("section", _hoisted_6, [
           _hoisted_7,

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

@@ -44,6 +44,7 @@ declare const _default: import("vue").DefineComponent<{
         notes?: string | undefined;
         desc?: string | undefined;
         children?: any[] | undefined;
+        __new?: boolean | undefined;
     }[]>;
     materialListRef: import("vue").Ref<{
         key: string;
@@ -59,9 +60,10 @@ declare const _default: import("vue").DefineComponent<{
         notes?: string | undefined;
         desc?: string | undefined;
         children?: any[] | undefined;
+        __new?: boolean | undefined;
     }[]>;
     addItem: (fieldItem: FormConfigItem) => void;
-    textFormatter: FormConfigTextFormatter;
+    parsedTextFormatter: FormConfigTextFormatter;
     getRenderer: (fieldItem: FormConfigItem) => import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>;
     currentEditField: import("vue").Ref<FormConfigItem | undefined>;
     formConfigEditRef: import("vue").Ref<{
@@ -140,6 +142,116 @@ declare const _default: import("vue").DefineComponent<{
         modelValue: unknown[];
         componentData: Record<string, any>;
     }>;
+    FormConfigDragDisplay: import("vue").DefineComponent<{
+        fieldItem: {
+            type: PropType<FormConfigItem>;
+        };
+        getRenderer: {
+            type: Func<any[], any>;
+            require: boolean;
+        };
+        textFormatter: {
+            type: PropType<FormConfigTextFormatter>;
+            required: true;
+        };
+    }, {
+        getItemColumnStyle: (fieldItem?: FormConfigItem | undefined) => {
+            '--item-column': number;
+        };
+        commonConfig: {
+            onMove: ({ to, from }: import("sortablejs").SortableEvent) => void;
+            onChoose: ({ target, item }: import("sortablejs").SortableEvent) => void;
+            onUnchoose: ({ from, to, target, item }: import("sortablejs").SortableEvent) => void;
+            tag: string;
+            animation: string;
+            'item-key': string;
+        };
+        Draggable: import("vue").DefineComponent<{
+            list: {
+                type: ArrayConstructor;
+                required: boolean;
+                default: any;
+            };
+            modelValue: {
+                type: ArrayConstructor;
+                required: boolean;
+                default: any;
+            };
+            itemKey: {
+                type: (StringConstructor | FunctionConstructor)[];
+                required: boolean;
+            };
+            clone: {
+                type: FunctionConstructor;
+                default: (original: any) => any;
+            };
+            tag: {
+                type: StringConstructor;
+                default: string;
+            };
+            move: {
+                type: FunctionConstructor;
+                default: any;
+            };
+            componentData: {
+                type: ObjectConstructor;
+                required: boolean;
+                default: any;
+            };
+        }, unknown, {
+            error: boolean;
+        }, {
+            realList(): any;
+            getKey(): any;
+        }, {
+            getUnderlyingVm(domElement: any): any;
+            getUnderlyingPotencialDraggableComponent(htmElement: any): any;
+            emitChanges(evt: any): void;
+            alterList(onList: any): void;
+            spliceList(): void;
+            updatePosition(oldIndex: any, newIndex: any): void;
+            getRelatedContextFromMoveEvent({ to, related }: {
+                to: any;
+                related: any;
+            }): any;
+            getVmIndexFromDomIndex(domIndex: any): any;
+            onDragStart(evt: any): void;
+            onDragAdd(evt: any): void;
+            onDragRemove(evt: any): void;
+            onDragUpdate(evt: any): void;
+            computeFutureIndex(relatedContext: any, evt: any): any;
+            onDragMove(evt: any, originalEvent: any): any;
+            onDragEnd(): void;
+        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any[], any, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+            move: Function;
+            tag: string;
+            clone: Function;
+            list: unknown[];
+            modelValue: unknown[];
+            componentData: Record<string, any>;
+        } & {
+            itemKey?: string | Function | undefined;
+        }>, {
+            move: Function;
+            tag: string;
+            clone: Function;
+            list: unknown[];
+            modelValue: unknown[];
+            componentData: Record<string, any>;
+        }>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        fieldItem: {
+            type: PropType<FormConfigItem>;
+        };
+        getRenderer: {
+            type: Func<any[], any>;
+            require: boolean;
+        };
+        textFormatter: {
+            type: PropType<FormConfigTextFormatter>;
+            required: true;
+        };
+    }>>, {}>;
     layoutWidthEnum2Column: typeof layoutWidthEnum2Column;
     FormConfigEdit: import("vue").DefineComponent<{}, {
         key: import("vue").Ref<number>;
@@ -1826,7 +1938,9 @@ declare const _default: import("vue").DefineComponent<{
                 notes?: string | undefined;
                 desc?: string | undefined;
                 children?: any[] | undefined;
+                __new?: boolean | undefined;
             }[] | undefined;
+            __new?: boolean | undefined;
         }>;
         generateFieldListByFieldItem: (fieldItem: FormConfigItem) => import("../..").FieldItem[];
         showModal: import("vue").Ref<boolean>;

package/es/packages/form-config/src/components/CloseButton.js

@@ -0,0 +1,45 @@
+import { defineComponent, inject, openBlock, createBlock, unref, withModifiers, withCtx, createVNode } from 'vue';
+import { CloseCircle } from '@vicons/ionicons5';
+import { isArray } from 'lodash-es';
+import { NButton, NIcon } from 'naive-ui';
+import { InjectionFieldList, InjectionMaterialList } from '../../../../packages/form-config/src/constants';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CloseButton",
+  props: {
+    fieldItem: { type: Object, required: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const fieldList = inject(InjectionFieldList);
+    const materialList = inject(InjectionMaterialList);
+    const remove = () => {
+      traverse(fieldList.value);
+      function traverse(_fieldItem) {
+        return isArray(_fieldItem) && _fieldItem.some((_fieldItem2, idx, arr) => {
+          if (_fieldItem2 !== props.fieldItem)
+            return traverse(_fieldItem2.children);
+          !_fieldItem2.__new && materialList.value.push(_fieldItem2);
+          return arr.splice(idx, 1);
+        });
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NButton), {
+        text: "",
+        class: "form-config__renderer--closeButton",
+        "text-color": "#a5a5a5",
+        onClick: withModifiers(remove, ["stop"])
+      }, {
+        icon: withCtx(() => [
+          createVNode(unref(NIcon), { component: unref(CloseCircle) }, null, 8, ["component"])
+        ]),
+        _: 1
+      }, 8, ["onClick"]);
+    };
+  }
+});
+var CloseButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "CloseButton.vue"]]);
+
+export { CloseButton as default };