cnhis-design-vue 3.1.17-beta.0 → 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/fabric-chart/index.d.ts

@@ -52,6 +52,7 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
         endY: number;
     }>;
     topList: import("vue").ComputedRef<import("./src/interface").IDate[]>;
+    getRightInfo: import("vue").ComputedRef<any>;
     propItems: any;
     computedYCell: (type: import("./src/interface").IPointType) => number;
     cumputedX: (value: string | number) => any;
@@ -81,6 +82,7 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
     }) => void;
     setPopup: (point: any) => void;
     getEqualXTypes: (pointX: number) => import("./src/interface").IPointType[];
+    drawScaleValue: (yScaleValueList: any[]) => void;
     PopupTip: import("vue").DefineComponent<{
         show: {
             type: BooleanConstructor;

package/es/packages/fabric-chart/src/FabricChart.js

@@ -65,10 +65,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return grid.mainYCell * grid.subYCell + grid.surplusYCell;
     });
     const endX = computed(() => {
+      var _a;
       const { width, right = null, top } = props.data;
       if (!right)
         return width;
-      const endWidth = right.width || 50;
+      const endWidth = (_a = right.width) != null ? _a : 0;
       return width - endWidth;
     });
     const endXLimit = computed(() => {
@@ -148,7 +149,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const event = computed(() => {
       var _a;
-      return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true };
+      return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true, hovered: true };
     });
     const itemList = computed(() => {
       const { left } = props.data;
@@ -214,6 +215,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return topList2.sort((a, b) => a.seq - b.seq);
     });
+    const getRightInfo = computed(() => {
+      var _a;
+      const { left, right } = props.data;
+      const temperatureObj = left.yScaleValue.find((v) => v.type === "temperature");
+      const yScaleValue = (right == null ? void 0 : right.yScaleValue) || {};
+      if ((_a = temperatureObj == null ? void 0 : temperatureObj.list) == null ? void 0 : _a.length) {
+        Object.assign(yScaleValue, {
+          list: temperatureObj.list.map((v) => Math.floor((1.8 * v + 32) * 100) / 100),
+          spaceGridNumber: temperatureObj.spaceGridNumber
+        });
+      }
+      return yScaleValue;
+    });
     const propItems = reactive({
       canvasWidth: props.data.width,
       canvasHeight: props.data.height,
@@ -252,7 +266,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       temperatureYCell: temperatureYCell.value,
       painYCell: painYCell.value,
       event: event.value,
-      itemList: itemList.value
+      itemList: itemList.value,
+      getRightInfo: getRightInfo.value
     });
     function computedYCell(type) {
       const { yScaleValue } = props.data.left;
@@ -265,8 +280,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { cumputedX, cumputedY, getXValue, getYValue } = useCumputedPoint(propItems);
     useTop(canvas, propItems);
     const { pointTipProps, pointMenuProps, clickMenu, setPopup, getEqualXTypes } = useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, getYValue, props.addRenderItem);
-    useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, getYValue, getEqualXTypes);
-    useRight(canvas, propItems);
+    const { drawScaleValue } = useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, getYValue, getEqualXTypes);
+    useRight(canvas, propItems, drawScaleValue);
     useBottom(canvas, propItems);
     useOther(canvas, propItems, cumputedX);
     onMounted(() => {

package/es/packages/fabric-chart/src/FabricChart.vue.d.ts

@@ -53,6 +53,7 @@ declare const _default: import("vue").DefineComponent<{
         endY: number;
     }>;
     topList: import("vue").ComputedRef<IDate[]>;
+    getRightInfo: import("vue").ComputedRef<any>;
     propItems: any;
     computedYCell: (type: IPointType) => number;
     cumputedX: (value: string | number) => any;
@@ -82,6 +83,7 @@ declare const _default: import("vue").DefineComponent<{
     }) => void;
     setPopup: (point: any) => void;
     getEqualXTypes: (pointX: number) => IPointType[];
+    drawScaleValue: (yScaleValueList: any[]) => void;
     PopupTip: import("vue").DefineComponent<{
         show: {
             type: BooleanConstructor;

package/es/packages/fabric-chart/src/hooks/useCenter.js

@@ -31,8 +31,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     originY,
     endY,
     itemList,
-    painIndex,
-    painHeight,
+    event,
     vitalSignsOriginY,
     painOriginY
   } = propItems;
@@ -131,23 +130,23 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
   function setCanvasEvent() {
     if (!propItems.event.evented)
       return;
-    canvas.value.on("mouse:up", (event) => {
+    canvas.value.on("mouse:up", (event2) => {
       var _a;
-      if (event.button === 3) {
-        const { x = 0, y = 0 } = event.pointer || {};
+      if (event2.button === 3) {
+        const { x = 0, y = 0 } = event2.pointer || {};
         if (x >= originX && x <= endX && y >= originY && y <= endY) {
           pointTipProps.show = false;
           pointMenuProps.point = { x, y };
           pointMenuProps.show = true;
-          const { type } = ((_a = event.target) == null ? void 0 : _a.origin) || {};
-          if (event.target && (type === "temperature" || type === "pain")) {
+          const { type } = ((_a = event2.target) == null ? void 0 : _a.origin) || {};
+          if (event2.target && (type === "temperature" || type === "pain")) {
             if (type === "temperature") {
               pointMenuProps.list = [...TEMPERATURE_MENU];
             }
             if (type === "pain") {
               pointMenuProps.list = [...PAIN_MENU];
             }
-            pointMenuProps.target = event.target;
+            pointMenuProps.target = event2.target;
           } else {
             pointMenuProps.target = null;
             pointMenuProps.list = ["\u65B0\u589E\u8282\u70B9"];
@@ -162,7 +161,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
                     dataIndex: v.dataIndex,
                     key: v.key
                   },
-                  pointer: event.pointer
+                  pointer: event2.pointer
                 });
               }
             });
@@ -397,21 +396,23 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     });
   }
   function setPointEvent(point) {
-    point.on("mouseover", () => {
-      setPopup(point);
-    });
-    point.on("mouseout", () => {
-      pointTipProps.show = false;
-    });
+    if (event.hovered) {
+      point.on("mouseover", () => {
+        setPopup(point);
+      });
+      point.on("mouseout", () => {
+        pointTipProps.show = false;
+      });
+    }
     point.on("moving", () => {
       moveLimit(point);
       updateLine(point);
       canvas.value.renderAll();
-      setPopup(point);
+      event.hovered && setPopup(point);
     });
-    point.on("mouseup:before", (event) => {
+    point.on("mouseup:before", (event2) => {
       pointTipProps.show = false;
-      if (event.e.button === 0) {
+      if (event2.e.button === 0) {
         const { type } = point.origin;
         const value = getYValue(type, point.top);
         emits("change", {

package/es/packages/fabric-chart/src/hooks/useLeft.d.ts

@@ -1,4 +1,6 @@
 import { Ref } from 'vue';
 import { fabric } from '../utils';
 import { IPropItems } from '../interface';
-export declare function useLeft(canvas: Ref<fabric.Canvas>, propItems: IPropItems, emits: any, setPopup: Function, pointTipProps: any, getXValue: Function, getYValue: Function, getEqualXTypes: Function): void;
+export declare function useLeft(canvas: Ref<fabric.Canvas>, propItems: IPropItems, emits: any, setPopup: Function, pointTipProps: any, getXValue: Function, getYValue: Function, getEqualXTypes: Function): {
+    drawScaleValue: (yScaleValueList: any[]) => void;
+};

package/es/packages/fabric-chart/src/hooks/useLeft.js

@@ -16,8 +16,8 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
     iconsWidth,
     itemList,
     painIndex,
-    canvasWidth,
-    canvasHeight
+    right,
+    getRightInfo
   } = propItems;
   const mainScaleWidth = 9;
   const subScaleWidth = 5;
@@ -88,13 +88,23 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
     canvas.value.add(title, ...list);
     title.sendToBack();
   }
-  function drawScaleValue() {
+  function drawScaleValue(yScaleValueList) {
+    var _a;
+    if (!(yScaleValueList == null ? void 0 : yScaleValueList.length))
+      return;
+    const { layout } = yScaleValueList[0];
+    let start = iconsWidth;
+    let end = originX;
+    if (layout === "right") {
+      start = endX;
+      end = endX + ((_a = right == null ? void 0 : right.width) != null ? _a : 0);
+    }
     const groupList = [];
-    const column = !painHeight ? left.yScaleValue.length : left.yScaleValue.length - 1;
-    const colWidth = (originX - iconsWidth) / column;
-    const residue = (originX - iconsWidth) % column;
+    const column = !painHeight || layout === "right" ? yScaleValueList.length : yScaleValueList.length - 1;
+    const colWidth = (end - start) / column;
+    const residue = (end - start) % column;
     const firstColWidth = colWidth + residue;
-    left.yScaleValue.forEach((item, index) => {
+    yScaleValueList.forEach((item, index) => {
       if (item.type === "pain") {
         drwaPainScaleValue(item);
         return;
@@ -108,7 +118,7 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
         list.push(line2);
       }
       const rectWidth = index === 0 ? firstColWidth : colWidth;
-      const rectLeft = index === 0 ? iconsWidth : firstColWidth + iconsWidth + (index - 1) * colWidth;
+      const rectLeft = index === 0 ? start : firstColWidth + start + (index - 1) * colWidth;
       const line = index > 0 ? new fabric.Line([rectLeft, painIndex == 0 ? vitalSignsOriginY.originY : originY, rectLeft, vitalSignsOriginY.endY], {
         ...defaultBorderStyle
       }) : null;
@@ -157,9 +167,9 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
     });
     groupList.push(new fabric.Rect({
       ...defaultRectStyle,
-      width: originX - iconsWidth,
-      height: endY - originY,
-      left: iconsWidth,
+      width: layout === "right" ? end - start - 1 : end - start,
+      height: layout === "right" ? endY - originY - 1 : endY - originY,
+      left: start,
       top: originY,
       originX: "left",
       originY: "top"
@@ -249,11 +259,19 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
   }
   onMounted(() => {
     nextTick(() => {
+      var _a;
       iconsWidth && drawIcons();
-      drawScaleValue();
+      const yScaleValueList = left.yScaleValue.filter((v) => v.layout === "left" || v.type === "pain");
+      if ((right == null ? void 0 : right.width) && ((_a = right == null ? void 0 : right.yScaleValue) == null ? void 0 : _a.layout) === "left") {
+        yScaleValueList.push(getRightInfo);
+      }
+      drawScaleValue(yScaleValueList);
       canvas.value.renderAll();
     });
   });
+  return {
+    drawScaleValue
+  };
 }
 
 export { useLeft };

package/es/packages/fabric-chart/src/hooks/useRight.d.ts

@@ -1,4 +1,4 @@
 import { Ref } from 'vue';
 import { fabric } from '../utils';
 import { IPropItems } from '../interface';
-export declare function useRight(canvas: Ref<fabric.Canvas>, propItems: IPropItems): void;
+export declare function useRight(canvas: Ref<fabric.Canvas>, propItems: IPropItems, drawScaleValue: Function): void;

package/es/packages/fabric-chart/src/hooks/useRight.js

@@ -1,77 +1,19 @@
 import { onMounted, nextTick } from 'vue';
 import { fabric } from '../utils/index.js';
-import { defaultBorderStyle, defaultRectStyle, defaultStyle } from './useDraw.js';
+import { defaultBorderStyle } from './useDraw.js';
 
-function useRight(canvas, propItems) {
-  const { endX, endY, temperatureYCell, canvasWidth, canvasHeight, left, right, breathingHeight, vitalSignsOriginY } = propItems;
-  function drawScaleValue() {
-    var _a, _b, _c;
-    if (!right) {
-      canvas.value.add(new fabric.Line([canvasWidth - 1, 0, canvasWidth - 1, canvasHeight], defaultBorderStyle));
-      return false;
-    }
-    const list = [];
-    list.push(new fabric.Rect({
-      ...defaultRectStyle,
-      width: canvasWidth - endX - 1,
-      height: endY + breathingHeight - 1,
-      left: endX,
-      top: 0,
-      originX: "left",
-      originY: "top"
-    }));
-    const difVal = 6;
-    const spaceScaleNumber = right.yScaleValue.spaceScaleNumber || 5;
-    const mainScaleWidth = 9;
-    const subScaleWidth = 5;
-    const cList = left.yScaleValue.find((v) => v.type === "temperature").list;
-    const minC = Math.min(...cList);
-    const h1 = right.yScaleValue.list[1];
-    const h0 = right.yScaleValue.list[0];
-    const c1 = 5 * (h1 - 32) / 9;
-    const c0 = 5 * (h0 - 32) / 9;
-    const top1 = vitalSignsOriginY.endY - (c1 - minC) * temperatureYCell - difVal;
-    const top0 = vitalSignsOriginY.endY - (c0 - minC) * temperatureYCell - difVal;
-    const spaceHVaule = (top0 - top1) / spaceScaleNumber;
-    let endTop = 0;
-    right.yScaleValue.list.forEach((v, i) => {
-      var _a2;
-      const c = 5 * (+v - 32) / 9;
-      const top = vitalSignsOriginY.endY - (c - minC) * temperatureYCell - difVal;
-      if (i === right.yScaleValue.list.length - 1)
-        endTop = top;
-      const text = new fabric.Text(`${v}\xB0`, {
-        left: endX + mainScaleWidth,
-        top: i === 0 ? vitalSignsOriginY.endY - 5 : top - 5,
-        originX: "left",
-        ...((_a2 = right.yScaleValue) == null ? void 0 : _a2.style) || {}
-      });
-      list.push(text);
-      const spaceHVaule0 = (vitalSignsOriginY.endY - top1) / spaceScaleNumber;
-      for (let k = 0; k < spaceScaleNumber; k++) {
-        const scaleTop = i === 0 ? vitalSignsOriginY.endY - k * spaceHVaule0 : top - k * spaceHVaule;
-        const line = new fabric.Line([endX, scaleTop, k > 0 ? endX + subScaleWidth : endX + mainScaleWidth, scaleTop], {
-          ...defaultBorderStyle
-        });
-        list.push(line);
-      }
-    });
-    const width = canvasWidth - endX;
-    const unit = right.yScaleValue.unit ? new fabric.Text((_b = (_a = right.yScaleValue) == null ? void 0 : _a.unit) == null ? void 0 : _b.split("").join("\n"), {
-      left: endX + width / 2,
-      top: endTop / 2,
-      originX: "center",
-      ...((_c = right.yScaleValue) == null ? void 0 : _c.style) || {}
-    }) : null;
-    unit && list.push(unit);
-    const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
-    group && canvas.value.add(group);
-    group && group.sendToBack();
-  }
+function useRight(canvas, propItems, drawScaleValue) {
+  const { left, right, getRightInfo, canvasWidth, endY } = propItems;
   onMounted(() => {
     nextTick(() => {
-      drawScaleValue();
-      canvas.value.renderAll();
+      var _a;
+      const yScaleValueList = left.yScaleValue.filter((v) => v.layout === "right");
+      if ((right == null ? void 0 : right.width) && ((_a = right == null ? void 0 : right.yScaleValue) == null ? void 0 : _a.layout) === "right") {
+        yScaleValueList.push(getRightInfo);
+        const rightBorderLine = new fabric.Line([canvasWidth - 1, 0, canvasWidth - 1, endY], defaultBorderStyle);
+        canvas.value.add(rightBorderLine);
+      }
+      drawScaleValue(yScaleValueList);
     });
   });
 }

package/es/packages/fabric-chart/src/interface.d.ts

@@ -1,8 +1,10 @@
 import { InjectionKey, Ref } from 'vue';
 import { fabric } from './utils';
+import { AnyObject } from '../../../../es/src/types';
 interface IEvent {
     selectable: boolean;
     evented: boolean;
+    hovered: boolean;
 }
 interface ImainLineStyle {
     x: fabric.ILineOptions;
@@ -60,6 +62,7 @@ export interface IPropItems {
     painYCell: number;
     event: Partial<IEvent>;
     itemList: Array<any>;
+    getRightInfo: AnyObject;
 }
 export interface IPoint {
     time: string;

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,