cnhis-design-vue 3.1.18-beta.9 → 3.1.18

package/es/components/fabric-chart/src/hooks/useCenter2.js

@@ -1,6 +1,6 @@
 import { reactive, onMounted, nextTick } from 'vue';
 import { fabric } from '../utils/index.js';
-import { drawLine, defaultStyle, drawPoint, defaultTextStyle } from './useDraw2.js';
+import { drawLine, defaultStyle, drawPoint, drawText, drawArrow } from './useDraw2.js';
 import useGrid from './useGrid2.js';
 import { useShadow } from './useShadow2.js';
 import { TEMPERATURE_MENU, PAIN_MENU } from './constant2.js';
@@ -228,8 +228,22 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     });
   }
   function drawPolyLine(item, dataIndex, scaleValue) {
-    const { pointAttr = {}, lineAttr = {}, type = "circle" } = item;
-    const { noRiseStyle = {}, verifiedStyle = {}, reduceStyle = {}, pacemaker = {} } = scaleValue;
+    const {
+      pointAttr = {},
+      lineAttr = {},
+      type: pointType = "circle",
+      upArrowShow = false,
+      limitValueShow = false
+    } = item;
+    const {
+      type,
+      noRiseStyle = {},
+      verifiedStyle = {},
+      reduceStyle = {},
+      pacemaker = {},
+      upArrowStyle = {},
+      limitValueStyle = {}
+    } = scaleValue;
     const pointList = [];
     const lineList = [];
     const otherList = [];
@@ -239,7 +253,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
       const nextV = item.list[index + 1];
       const nextPoint = getPointer(nextV, scaleValue);
       let reduceLine, reducePoint, noRiseText, arrowGroup, verifiedText;
-      if ((points == null ? void 0 : points.length) && (scaleValue.type === "temperature" || scaleValue.type === "pain")) {
+      if ((points == null ? void 0 : points.length) && (type === "temperature" || type === "pain")) {
         if (v.noRise) {
           if (typeof v.noRise === "string") {
             noRiseText = drawText([points[0], points[1] + 5], {
@@ -250,22 +264,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
             otherList.push(noRiseText);
           } else {
             const top = points[1] + yCellHeight * 2;
-            const arrowLine = drawLine([...points, points[0], top], {
-              ...lineAttr,
-              stroke: noRiseStyle.fill
-            });
-            const arrow = drawText([points[0] + 0.5, top + 3], {
-              value: "v",
-              originX: "center",
-              originY: "bottom",
-              fontSize: 16,
-              ...noRiseStyle
-            });
-            arrowGroup = new fabric.Group([arrowLine, arrow], {
-              ...defaultStyle,
-              originX: "center",
-              originY: "top"
-            });
+            arrowGroup = drawArrow([points[0], points[1], top], noRiseStyle);
             otherList.push(arrowGroup);
           }
         }
@@ -279,7 +278,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
           otherList.push(verifiedText);
         }
         if (v.physicsReduce || v.drugReduce) {
-          const reduceY = cumputedY(scaleValue.type, scaleValue.list, v.physicsReduce || v.drugReduce);
+          const reduceY = cumputedY(type, scaleValue.list, v.physicsReduce || v.drugReduce);
           reduceLine = drawLine([...points, points[0], reduceY], {
             ...lineAttr,
             ...reduceStyle.line,
@@ -295,13 +294,43 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
           reducePoint && otherList.push(reducePoint);
         }
       }
+      if ((points == null ? void 0 : points.length) && type === "pulse") {
+        let upArrow;
+        if (upArrowShow && v.value > 180) {
+          let top = points[1] - yCellHeight * 2.5;
+          let yArr = [points[1] - yCellHeight / 2, top];
+          if (top < vitalSignsOriginY.originY) {
+            top = points[1] + yCellHeight * 2.5;
+            yArr = [top, points[1] + yCellHeight / 2];
+          }
+          upArrow = drawArrow([points[0], yArr[0], yArr[1]], upArrowStyle, "up");
+          otherList.push(upArrow);
+        }
+        if (limitValueShow) {
+          const commonOptions = {
+            value: v.value,
+            originX: "center",
+            originY: "center",
+            ...limitValueStyle
+          };
+          if (v.value > Math.max(...scaleValue.list)) {
+            const top = upArrow ? points[1] + yCellHeight / 2 + upArrow.height : points[1] + yCellHeight;
+            const limitValue = drawText([points[0], top], commonOptions);
+            otherList.push(limitValue);
+          }
+          if (v.value < Math.min(...scaleValue.list)) {
+            const limitValue = drawText([points[0], points[1] - yCellHeight], commonOptions);
+            otherList.push(limitValue);
+          }
+        }
+      }
       let point;
       let line;
       if (points && nextPoint && !v.breakpoint) {
         line = drawLine([...points, ...nextPoint], {
           ...lineAttr
         });
-      } else if (points && !nextPoint && !v.breakpoint && scaleValue.type === "temperature" && dataIndex < scaleValue.dataList.length - 1 && index === item.list.length - 1) {
+      } else if (points && !nextPoint && !v.breakpoint && type === "temperature" && dataIndex < scaleValue.dataList.length - 1 && index === item.list.length - 1) {
         const nextV2 = (_b = scaleValue.dataList[dataIndex + 1].list) == null ? void 0 : _b[0];
         const nextLinePoint = getPointer(nextV2, scaleValue);
         line = nextLinePoint ? drawLine([...points, ...nextLinePoint], {
@@ -319,7 +348,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
           title: item.title,
           key: item.key || "",
           unit: scaleValue.unit,
-          type: scaleValue.type,
+          type,
           dataIndex,
           index
         },
@@ -331,12 +360,12 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
         reduceLine,
         reducePoint,
         lockMovementX: true,
-        ...pacemaker.show && scaleValue.type == "pulse" ? pacemaker.style : pointAttr,
+        ...v.pacemakerShow && type == "pulse" ? pacemaker.style : pointAttr,
         ...propItems.event
       };
-      const pointType = pacemaker.show && scaleValue.type == "pulse" ? pacemaker.value : type;
+      const currentPointType = v.pacemakerShow && type == "pulse" ? pacemaker.value : pointType;
       if (previousLine) {
-        point = drawPoint(pointType, {
+        point = drawPoint(currentPointType, {
           left: previousLine.get("x2"),
           top: previousLine.get("y2"),
           ...pointAttrNew
@@ -344,13 +373,13 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
       } else {
         if (points) {
           pointAttrNew.leftLine = null;
-          if (scaleValue.type == "temperature" && index === 0) {
+          if (type == "temperature" && index === 0) {
             const objLine = [...prevLines].find((v2) => v2.dataIndex === dataIndex - 1);
             if (objLine) {
               pointAttrNew.leftLine = objLine.line;
             }
           }
-          point = drawPoint(pointType, {
+          point = drawPoint(currentPointType, {
             left: points[0],
             top: points[1],
             ...pointAttrNew
@@ -368,7 +397,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
         pointList.push(point);
       }
     });
-    scaleValue.type === "pulse" && shadowPointCache.push(pointList);
+    type === "pulse" && shadowPointCache.push(pointList);
     Promise.all(pointList).then((res) => {
       const lineListFilter = lineList.filter((v) => v);
       let prevPoint = null;
@@ -476,15 +505,6 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     }
     drawShaDow(point);
   }
-  function drawText([x, y], style) {
-    const text = new fabric.Text(style.value, {
-      ...defaultTextStyle,
-      left: x,
-      top: y,
-      ...style
-    });
-    return text;
-  }
   function isLimit(time) {
     const [minScale] = xScaleList;
     const maxScale = xScaleList.at(-1);

package/es/components/fabric-chart/src/hooks/useDraw.d.ts

@@ -38,5 +38,7 @@ export declare const defaultTextStyle: {
     lineHeight: number;
 };
 export declare function drawLine(points: number[], style: Partial<ILineOptions>): fabric.Line;
+export declare function drawText([x, y]: [x: number, y: number], style: ITextOptions): fabric.Text;
+export declare function drawArrow([x, y1, y2]: [x: number, y1: number, y2: number], style: ITextOptions | any, type?: string): fabric.Group;
 export declare function drawTextGroup(rectStyle: Partial<fabric.IRectOptions>, fontStyle: Partial<ITextOptions>, groupStyle: Partial<fabric.IGroupOptions>): fabric.Group;
 export declare function drawPoint(type: string | undefined, style: any): fabric.Object;

package/es/components/fabric-chart/src/hooks/useDraw.js

@@ -1 +1 @@
-export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawLine, drawPoint, drawTextGroup } from './useDraw2.js';
+export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawArrow, drawLine, drawPoint, drawText, drawTextGroup } from './useDraw2.js';

package/es/components/fabric-chart/src/hooks/useDraw2.js

@@ -39,6 +39,35 @@ function drawLine(points, style) {
     ...style
   });
 }
+function drawText([x, y], style) {
+  const text = new fabric.Text(String(style.value), {
+    ...defaultTextStyle,
+    left: x,
+    top: y,
+    ...style
+  });
+  return text;
+}
+function drawArrow([x, y1, y2], style, type = "down") {
+  const arrowLine = drawLine([x, y1, x, y2], {
+    strokeWidth: 1,
+    stroke: style.fill
+  });
+  const arrow = drawText([x + 0.5, type === "up" ? y2 - 3 : y2 + 3], {
+    value: "v",
+    originX: "center",
+    originY: "bottom",
+    fontSize: 16,
+    angle: type === "up" ? 180 : 0,
+    ...style
+  });
+  const arrowGroup = new fabric.Group([arrowLine, arrow], {
+    ...defaultStyle,
+    originX: "center",
+    originY: "top"
+  });
+  return arrowGroup;
+}
 function drawTextGroup(rectStyle, fontStyle, groupStyle) {
   const rect = new fabric.Rect({
     ...defaultRectStyle,
@@ -150,4 +179,4 @@ function drawPoint(type = "circle", style) {
   }
 }
 
-export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawLine, drawPoint, drawTextGroup };
+export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawArrow, drawLine, drawPoint, drawText, drawTextGroup };

package/es/components/fabric-chart/src/hooks/useLeft2.js

@@ -136,7 +136,14 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
           const isMaxMinNumber = i === 0 || i === listLen - 1;
           if (item.showNumber && (isMaxMinNumber ? item.showMaxMinNumber : true)) {
             const y = i == 0 ? top - 5 : top;
-            y > vitalSignsOriginY.originY && list.push(drawScaleNumber(v, item, textLeft, y));
+            const scaleNumber = drawScaleNumber(v, item, textLeft, y);
+            const limitY = vitalSignsOriginY.originY + scaleNumber.height / 2;
+            if (y < limitY) {
+              scaleNumber.set({
+                top: limitY
+              });
+            }
+            list.push(scaleNumber);
           }
           if (item.showScale && i !== listLen - 1) {
             for (let j = 0; j < 5; j++) {

package/es/components/fabric-chart/style/index.css

@@ -1,43 +1 @@
-.c-fabric-chart-popup-tip,
-.c-fabric-chart-popup-menu {
-  position: absolute;
-  z-index: 1001;
-  display: flex;
-  flex-flow: column nowrap;
-  margin: 0;
-  padding: 8px 12px;
-  font-size: 12px;
-}
-.c-fabric-chart-popup-tip > li,
-.c-fabric-chart-popup-menu > li {
-  list-style: none;
-}
-.c-fabric-chart-popup-tip {
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.7);
-}
-.c-fabric-chart-popup-tip > li {
-  color: #fff;
-}
-.c-fabric-chart-popup-menu {
-  padding: 8px 5px !important;
-  z-index: 1001;
-  background: #fff;
-  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, 0.2);
-  border: 1px solid #e2e6ed;
-  border-radius: 2px;
-}
-.c-fabric-chart-popup-menu > li {
-  padding: 5px;
-  background: #fff;
-  cursor: pointer;
-}
-.c-fabric-chart-popup-menu > li:hover {
-  background: #f0f7ff;
-}
-.c-fabric-chart-popup-menu > li.no-click {
-  cursor: default;
-}
-.c-fabric-chart-popup-menu > li.no-click:hover {
-  background: #fff;
-}
+.c-fabric-chart-popup-menu,.c-fabric-chart-popup-tip{display:flex;flex-flow:column nowrap;font-size:12px;margin:0;padding:8px 12px;position:absolute;z-index:1001}.c-fabric-chart-popup-menu>li,.c-fabric-chart-popup-tip>li{list-style:none}.c-fabric-chart-popup-tip{background:rgba(0,0,0,.7);border-radius:4px}.c-fabric-chart-popup-tip>li{color:#fff}.c-fabric-chart-popup-menu{background:#fff;border:1px solid #e2e6ed;border-radius:2px;box-shadow:0 2px 12px 0 rgba(56,56,56,.2);padding:8px 5px!important;z-index:1001}.c-fabric-chart-popup-menu>li{background:#fff;cursor:pointer;padding:5px}.c-fabric-chart-popup-menu>li:hover{background:#f0f7ff}.c-fabric-chart-popup-menu>li.no-click{cursor:default}.c-fabric-chart-popup-menu>li.no-click:hover{background:#fff}

package/es/components/field-set/style/index.css

@@ -1,139 +1 @@
-.c-field-set {
-  height: 100%;
-  position: relative;
-}
-.c-field-set ul {
-  margin: 0;
-  padding: 0;
-}
-.c-field-set .fields-set-content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.c-field-set .fields-set-content .fields-table {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-}
-.c-field-set .n-spin-container {
-  width: 100%;
-  height: 100%;
-}
-.c-field-set .n-spin-content {
-  height: 100%;
-}
-.c-field-set .setting-title {
-  background: #f2f2f4;
-  border: 1px solid #f2f2f2;
-  height: 52px;
-  line-height: 52px;
-}
-.c-field-set .setting-title span {
-  display: inline-block;
-}
-.c-field-set .setting-title.seting-title-api .width-large {
-  width: 15%;
-}
-.c-field-set .set-show {
-  min-height: 100px;
-  overflow-y: auto;
-}
-.c-field-set .set-show.set-show-api .width-large {
-  width: 15%;
-}
-.c-field-set .set-show .left-style.sortable-chosen {
-  background: #fafafa;
-  box-shadow: 0px 0px 10px 0px #d5d5d5;
-}
-.c-field-set .set-show li {
-  padding: 5px 0;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #e8e8e8;
-  height: 52px;
-  line-height: 52px;
-}
-.c-field-set .set-show .is-sort-style {
-  outline: none;
-  border-radius: 4px 4px 4px 4px;
-  border: solid 1px #d5d5d5;
-  height: 32px;
-  text-indent: 6px;
-  color: #38454f;
-  width: 87px;
-  margin-right: 5px;
-}
-.c-field-set .set-show .is-sort-style:disabled {
-  cursor: not-allowed;
-  background: #f5f5f5;
-}
-.c-field-set .set-show .col-width-style {
-  width: 70px;
-}
-.c-field-set .set-show .title-item {
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-  text-align: left;
-}
-.c-field-set .set-show .title-item > span {
-  display: inline-block;
-  max-width: calc(100% - 20px);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.c-field-set .alias-style {
-  outline: none;
-  border-radius: 4px 4px 4px 4px;
-  border: solid 1px #d4dee5;
-  height: 32px;
-  text-indent: 16px;
-  color: #38454f;
-}
-.c-field-set .btn-operate {
-  border-top: 1px solid #d5d5d5;
-  padding: 12px 0 12px;
-}
-.c-field-set .width-show {
-  display: inline-block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: var(--width-show);
-}
-.c-field-set .drag-icon-wrap {
-  width: 5% !important;
-  cursor: pointer;
-  text-align: center;
-}
-.c-field-set .width-showed {
-  display: inline-block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: 15%;
-}
-.c-field-set .width-showed select {
-  width: 90% !important;
-}
-.c-field-set .width-word {
-  display: inline-block;
-  overflow: hidden;
-  white-space: nowrap;
-  width: var(--width-large);
-  line-height: 52px;
-}
-.c-field-set .width-word input {
-  width: 90% !important;
-}
-.c-field-set .width-large {
-  display: inline-block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: var(--width-large);
-}
+.c-field-set{height:100%;position:relative}.c-field-set ul{margin:0;padding:0}.c-field-set .fields-set-content{display:flex;flex-direction:column;height:100%;overflow:hidden}.c-field-set .fields-set-content .fields-table{display:flex;flex:1;flex-direction:column;overflow:auto}.c-field-set .n-spin-container{height:100%;width:100%}.c-field-set .n-spin-content{height:100%}.c-field-set .setting-title{background:#f2f2f4;border:1px solid #f2f2f2;height:52px;line-height:52px}.c-field-set .setting-title span{display:inline-block}.c-field-set .setting-title.seting-title-api .width-large{width:15%}.c-field-set .set-show{min-height:100px;overflow-y:auto}.c-field-set .set-show.set-show-api .width-large{width:15%}.c-field-set .set-show .left-style.sortable-chosen{background:#fafafa;box-shadow:0 0 10px 0 #d5d5d5}.c-field-set .set-show li{align-items:center;border-bottom:1px solid #e8e8e8;display:flex;height:52px;line-height:52px;padding:5px 0}.c-field-set .set-show .is-sort-style{border:1px solid #d5d5d5;border-radius:4px 4px 4px 4px;color:#38454f;height:32px;margin-right:5px;outline:none;text-indent:6px;width:87px}.c-field-set .set-show .is-sort-style:disabled{background:#f5f5f5;cursor:not-allowed}.c-field-set .set-show .col-width-style{width:70px}.c-field-set .set-show .title-item{align-items:center;display:inline-flex;justify-content:flex-start;text-align:left}.c-field-set .set-show .title-item>span{display:inline-block;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-field-set .alias-style{border:1px solid #d4dee5;border-radius:4px 4px 4px 4px;color:#38454f;height:32px;outline:none;text-indent:16px}.c-field-set .btn-operate{border-top:1px solid #d5d5d5;padding:12px 0}.c-field-set .width-show{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--width-show)}.c-field-set .drag-icon-wrap{cursor:pointer;text-align:center;width:5%!important}.c-field-set .width-showed{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:15%}.c-field-set .width-showed select{width:90%!important}.c-field-set .width-word{display:inline-block;line-height:52px;overflow:hidden;white-space:nowrap;width:var(--width-large)}.c-field-set .width-word input{width:90%!important}.c-field-set .width-large{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--width-large)}

package/es/components/form-config/src/utils/index2.js

@@ -12,7 +12,7 @@ function layoutWidthEnum2Column(layoutWidthEnum) {
     ONE_SIX: 4,
     ONE_EIGHT: 3
   };
-  return transferMap[layoutWidthEnum] || 12;
+  return transferMap[layoutWidthEnum] || 24;
 }
 const hovering = ref();
 function bindHover(fieldItem) {

package/es/components/form-config/style/index.css

@@ -1,158 +1 @@
-.form-config {
-  display: flex;
-  justify-content: space-between;
-}
-.form-config__material {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  width: 200px;
-}
-.form-config__materialHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-}
-.form-config__materialContent {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  border: 1px dashed rgba(128, 128, 128, 0.35);
-  overflow-y: auto;
-  max-height: var(--max-height);
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.form-config__materialContentItem {
-  cursor: move;
-  justify-content: flex-start;
-  grid-column: span var(--item-column) / span var(--item-column);
-}
-.form-config__displayWrapper {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  min-width: 400px;
-  flex: 1;
-  padding: 16px 0;
-}
-.form-config__displayHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-}
-.form-config__displayContent {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  border: 1px dashed rgba(128, 128, 128, 0.35);
-  overflow-y: auto;
-  max-height: var(--max-height);
-  height: fit-content;
-  display: grid !important;
-  grid-template-columns: repeat(24, minmax(0px, 1fr));
-  gap: 8px;
-}
-.form-config__displayContentItem {
-  grid-column: span var(--item-column) / span var(--item-column);
-  position: relative;
-}
-.form-config__config {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  width: 240px;
-}
-.form-config__configHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-}
-.form-config__configContent {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  border: 1px dashed rgba(128, 128, 128, 0.35);
-  overflow-y: auto;
-  border: none;
-  max-height: var(--max-height);
-}
-.form-config__renderer {
-  cursor: move;
-  width: 100%;
-  height: 100%;
-  justify-content: flex-start;
-}
-.form-config__renderer--default {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 8px 0;
-  box-sizing: border-box;
-  user-select: none;
-  position: relative;
-}
-.form-config__renderer--complex {
-  border: 1px dashed skyblue;
-  border-radius: 8px;
-  padding: 8px;
-}
-.form-config__renderer--complexHeader {
-  display: flex;
-  justify-content: center;
-  padding: 8px;
-  margin-top: -8px;
-  position: relative;
-}
-.form-config__renderer--complex--grid {
-  display: grid !important;
-  grid-template-columns: repeat(24, minmax(0px, 1fr));
-  gap: 8px;
-  grid-column: span var(--item-column) / span var(--item-column);
-}
-.form-config__renderer--complex--flex {
-  display: flex;
-}
-.form-config .is-disabled {
-  background: #e5e5e5 !important;
-}
-.form-config .is-required {
-  padding-left: 16px !important;
-}
-.form-config .is-required::before {
-  position: absolute;
-  content: '*';
-  left: 8px;
-  color: red;
-}
-.form-config .is-active {
-  color: #5585f5 !important;
-}
-.form-config .is-choosing {
-  box-shadow: #5585f5 0 0 0 2px !important;
-  opacity: 0.7;
-}
-.form-config .is-choosing-area {
-  background: rgba(128, 128, 128, 0.1);
-}
-.form-config [is-hovering='true'] .form-config__renderer--closeButton {
-  visibility: visible;
-}
-.form-config .form-config__renderer--closeButton {
-  position: absolute;
-  visibility: hidden;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 4px;
-}
+.form-config{display:flex;justify-content:space-between}.form-config__material{border-radius:8px;box-sizing:border-box;flex-shrink:0;padding:16px;width:200px}.form-config__materialHeader{align-items:center;display:flex;height:40px;justify-content:space-between}.form-config__materialContent{border:1px dashed hsla(0,0%,50%,.35);border-radius:8px;box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;gap:8px;max-height:var(--max-height);min-height:200px;overflow-y:auto;padding:16px}.form-config__materialContentItem{cursor:move;grid-column:span var(--item-column) /span var(--item-column);justify-content:flex-start}.form-config__displayWrapper{border-radius:8px;box-sizing:border-box;flex-shrink:0;flex:1;min-width:400px;padding:16px 0}.form-config__displayHeader{align-items:center;display:flex;height:40px;justify-content:space-between}.form-config__displayContent{border:1px dashed hsla(0,0%,50%,.35);border-radius:8px;box-sizing:border-box;display:grid!important;flex-shrink:0;gap:8px;grid-template-columns:repeat(24,minmax(0,1fr));height:fit-content;max-height:var(--max-height);overflow-y:auto;padding:16px}.form-config__displayContentItem{grid-column:span var(--item-column) /span var(--item-column);position:relative}.form-config__config{border-radius:8px;box-sizing:border-box;flex-shrink:0;padding:16px;width:240px}.form-config__configHeader{align-items:center;display:flex;height:40px;justify-content:space-between}.form-config__configContent{border:none;border-radius:8px;box-sizing:border-box;flex-shrink:0;max-height:var(--max-height);overflow-y:auto;padding:16px}.form-config__renderer{cursor:move;justify-content:flex-start;width:100%}.form-config__renderer--default{align-items:center;box-sizing:border-box;display:flex;padding:8px 0;position:relative;user-select:none;width:100%}.form-config__renderer--complex{border:1px dashed skyblue;border-radius:8px;padding:8px}.form-config__renderer--complexHeader{display:flex;justify-content:center;margin-top:-8px;padding:8px;position:relative}.form-config__renderer--complex--grid{display:grid!important;gap:8px;grid-column:span var(--item-column) /span var(--item-column);grid-template-columns:repeat(24,minmax(0,1fr))}.form-config__renderer--complex--flex{display:flex}.form-config .is-disabled{background:#e5e5e5!important}.form-config .is-required{padding-left:16px!important}.form-config .is-required:before{color:red;content:"*";left:8px;position:absolute}.form-config .is-active{color:#5585f5!important}.form-config .is-choosing{box-shadow:0 0 0 2px #5585f5!important;opacity:.7}.form-config .is-choosing-area{background:hsla(0,0%,50%,.1)}.form-config [is-hovering=true] .form-config__renderer--closeButton{visibility:visible}.form-config .form-config__renderer--closeButton{position:absolute;right:4px;top:50%;transform:translateY(-50%);visibility:hidden}