low-code-form-generator 1.0.20 → 1.1.0

package/dist/low-code-form-generator.css

@@ -1 +1 @@
-.div-border[data-v-b4ec6a05]{min-height:50px;border:1px dashed #ecd55e;border-radius:5px;box-sizing:border-box}.grid[data-v-9c27fd62]{width:100%;display:grid}.grid-border[data-v-9c27fd62]{box-sizing:border-box;min-height:50px;border:1px dashed #409EFF;border-radius:5px}.options ul[data-v-2f0cb2a2]{padding:0}.options li[data-v-2f0cb2a2]{list-style-type:none;border-bottom:1px dotted #ebeef5;margin-bottom:10px;padding:10px 10px 10px 0;position:relative;border-radius:5px}.options li[data-v-2f0cb2a2]:hover{background-color:#ebeef5}.options li:hover .toolbar[data-v-2f0cb2a2]{display:block}.options .toolbar[data-v-2f0cb2a2]{display:none;position:absolute;bottom:0;right:10px}.options .toolbar .delete[data-v-2f0cb2a2]{color:red}.options .toolbar .el-icon[data-v-2f0cb2a2]:not(.delete){color:#3b82f6}.options .toolbar .el-icon[data-v-2f0cb2a2]{cursor:pointer;margin:0 5px}.tip[data-v-cbf30a35]{color:coral;cursor:pointer;align-self:center;margin-left:5px}#preview-box[data-v-e9180d61]{height:600px;overflow:auto}.header[data-v-69a53efe]{padding:10px;background:#fff;border-radius:5px;height:100%;box-sizing:border-box;display:flex}.el-dropdown[data-v-69a53efe]{margin-left:12px}[data-v-a7910661] .drop-zone-box,.panel[data-v-a7910661],.editor-panel[data-v-a7910661]{padding:10px;background:#fff;border-radius:5px;overflow:auto}.panel[data-v-a7910661],.panel[data-v-a7910661] .el-tabs,.panel[data-v-a7910661] .el-tabs .el-tabs__content,.panel[data-v-a7910661] .el-tabs .el-tab-pane{height:100%}.editor-panel[data-v-a7910661] .el-form-item__label{font-size:13px}.el-aside[data-v-a7910661]{overflow:hidden}.panel-content[data-v-a7910661]{height:calc(100% - 54px);overflow:auto}.panel-code[data-v-a7910661]{height:calc(100% - 79px)}.panel-code .code-editor[data-v-a7910661]{height:100%}.component-box[data-v-a7910661]{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;max-height:calc(100% - 10px);overflow-y:auto;overflow-x:hidden}.component-box .group-title[data-v-a7910661]{width:100%;font-weight:700;font-size:15px;margin-bottom:10px;color:#333}.component-box .group-title[data-v-a7910661]:not(:first-child){margin-top:20px}.grab[data-v-a7910661]{cursor:grab}.pointer[data-v-a7910661]{cursor:pointer}.item-component[data-v-a7910661]{width:calc(50% - 10px)}.item[data-v-a7910661]{display:inline-block;padding:8px 10px;border-radius:8px;background:#f3f4f64d;border:1px solid #e5e7eb;font-size:14px;font-weight:500;color:#333;box-sizing:border-box}.item[data-v-a7910661]:hover{background:#e0f2fe;border-color:#3b82f6;color:#1d4ed8}.item[data-v-a7910661]:active{cursor:grabbing;background:#bfdbfe}.item svg[data-v-a7910661]{vertical-align:sub;width:20px;height:20px;fill:currentColor;margin-right:5px}.canvas[data-v-a7910661]{padding:0;position:relative}.toolbar[data-v-a7910661]{position:absolute;z-index:100!important;background:#409eff;padding:3px 15px;border-top-left-radius:5px}.toolbar .el-icon[data-v-a7910661]{cursor:pointer;margin:0 5px}.toolbar .delete[data-v-a7910661]{color:#fff}.canvas-content[data-v-a7910661]{height:calc(100% - 60px);position:relative}.canvas-content .mask[data-v-a7910661]{position:absolute;left:0;top:0;height:100%;width:100%}.canvas-content #canvas-drop[data-v-a7910661],[data-v-a7910661] .el-form{height:100%}[data-v-a7910661] .el-form .drop-zone-box{height:100%;margin:0 10px;box-sizing:border-box}[data-v-a7910661] .el-dialog{padding:0!important}[data-v-a7910661] .el-dialog .el-dialog__footer{padding:15px;border-top:1px solid #e5e7eb}[data-v-a7910661] .el-dialog .el-dialog__header{padding:15px;border-bottom:1px solid #e5e7eb}[data-v-a7910661] .el-dialog .el-dialog__body{padding:15px}[data-v-a7910661] .cm-editor{height:100%;overflow:auto}[data-v-a7910661] .selected-component{outline:2px solid #409EFF;border-radius:5px;padding:5px}[data-v-a7910661] .el-header{padding:0;margin:0 10px 10px}[data-v-a7910661] .el-input-number{width:100%}[data-v-a7910661] .inline-block{display:inline-flex}[data-v-a7910661] .form-item-tip{color:coral;cursor:pointer;align-self:center;margin-left:5px}[data-v-a7910661] .drop-zone{min-height:50px;padding:10px;border:1px dashed #aaa;display:flex;flex-direction:column;gap:10px}[data-v-a7910661] .drop-item-tabs,[data-v-a7910661] .drop-item-card{width:100%}[data-v-a7910661] .drop-zone-box .el-tabs__content .el-tab-pane{min-height:55px}[data-v-a7910661] .drop-item-grid-component{width:100%}#preview-panel[data-v-965fdd3c]{height:100%}.el-container[data-v-03df7d24]{height:100%;margin:0}.low-code-form[data-v-03df7d24]{background-color:#f0f2f5;height:100%;padding:5px;box-sizing:border-box}[data-v-03df7d24] .el-form--inline .drop-item:not(.drop-item-card):not(.drop-item-el-tabs):not(.drop-item-el-button):not(.drop-item-el-divider):not(.drop-item-div-component){display:inline-flex}[data-v-03df7d24] .drop-item-el-button{display:inline-block}[data-v-03df7d24] .drop-item-el-button+.drop-item-el-button{margin-left:12px}[data-v-03df7d24] .drop-item{box-sizing:border-box;margin-bottom:10px}[data-v-03df7d24] .el-date-editor.el-input{width:100%}[data-v-03df7d24] .el-table td.el-table__cell .cell{min-height:23px}
+.div-border[data-v-b4ec6a05]{min-height:50px;border:1px dashed #ecd55e;border-radius:5px;box-sizing:border-box}.grid[data-v-9c27fd62]{width:100%;display:grid}.grid-border[data-v-9c27fd62]{box-sizing:border-box;min-height:50px;border:1px dashed #409EFF;border-radius:5px}.options ul[data-v-2f0cb2a2]{padding:0}.options li[data-v-2f0cb2a2]{list-style-type:none;border-bottom:1px dotted #ebeef5;margin-bottom:10px;padding:10px 10px 10px 0;position:relative;border-radius:5px}.options li[data-v-2f0cb2a2]:hover{background-color:#ebeef5}.options li:hover .toolbar[data-v-2f0cb2a2]{display:block}.options .toolbar[data-v-2f0cb2a2]{display:none;position:absolute;bottom:0;right:10px}.options .toolbar .delete[data-v-2f0cb2a2]{color:red}.options .toolbar .el-icon[data-v-2f0cb2a2]:not(.delete){color:#3b82f6}.options .toolbar .el-icon[data-v-2f0cb2a2]{cursor:pointer;margin:0 5px}.tip[data-v-cbf30a35]{color:coral;cursor:pointer;align-self:center;margin-left:5px}#preview-box[data-v-e9180d61]{height:600px;overflow:auto}.header[data-v-69a53efe]{padding:10px;background:#fff;border-radius:5px;height:100%;box-sizing:border-box;display:flex}.el-dropdown[data-v-69a53efe]{margin-left:12px}[data-v-a7910661] .drop-zone-box,.panel[data-v-a7910661],.editor-panel[data-v-a7910661]{padding:10px;background:#fff;border-radius:5px;overflow:auto}.panel[data-v-a7910661],.panel[data-v-a7910661] .el-tabs,.panel[data-v-a7910661] .el-tabs .el-tabs__content,.panel[data-v-a7910661] .el-tabs .el-tab-pane{height:100%}.editor-panel[data-v-a7910661] .el-form-item__label{font-size:13px}.el-aside[data-v-a7910661]{overflow:hidden}.panel-content[data-v-a7910661]{height:calc(100% - 54px);overflow:auto}.panel-code[data-v-a7910661]{height:calc(100% - 79px)}.panel-code .code-editor[data-v-a7910661]{height:100%}.component-box[data-v-a7910661]{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;max-height:calc(100% - 10px);overflow-y:auto;overflow-x:hidden}.component-box .group-title[data-v-a7910661]{width:100%;font-weight:700;font-size:15px;margin-bottom:10px;color:#333}.component-box .group-title[data-v-a7910661]:not(:first-child){margin-top:20px}.grab[data-v-a7910661]{cursor:grab}.pointer[data-v-a7910661]{cursor:pointer}.item-component[data-v-a7910661]{width:calc(50% - 10px)}.item[data-v-a7910661]{display:inline-block;padding:8px 10px;border-radius:8px;background:#f3f4f64d;border:1px solid #e5e7eb;font-size:14px;font-weight:500;color:#333;box-sizing:border-box}.item[data-v-a7910661]:hover{background:#e0f2fe;border-color:#3b82f6;color:#1d4ed8}.item[data-v-a7910661]:active{cursor:grabbing;background:#bfdbfe}.item svg[data-v-a7910661]{vertical-align:sub;width:20px;height:20px;fill:currentColor;margin-right:5px}.canvas[data-v-a7910661]{padding:0;position:relative}.toolbar[data-v-a7910661]{position:absolute;z-index:100!important;background:#409eff;padding:3px 15px;border-top-left-radius:5px}.toolbar .el-icon[data-v-a7910661]{cursor:pointer;margin:0 5px}.toolbar .delete[data-v-a7910661]{color:#fff}.canvas-content[data-v-a7910661]{height:calc(100% - 60px);position:relative}.canvas-content .mask[data-v-a7910661]{position:absolute;left:0;top:0;height:100%;width:100%}.canvas-content #canvas-drop[data-v-a7910661],[data-v-a7910661] .el-form{height:100%}[data-v-a7910661] .el-form .drop-zone-box{height:100%;margin:0 10px;box-sizing:border-box}[data-v-a7910661] .el-dialog{padding:0!important}[data-v-a7910661] .el-dialog .el-dialog__footer{padding:15px;border-top:1px solid #e5e7eb}[data-v-a7910661] .el-dialog .el-dialog__header{padding:15px;border-bottom:1px solid #e5e7eb}[data-v-a7910661] .el-dialog .el-dialog__body{padding:15px}[data-v-a7910661] .cm-editor{height:100%;overflow:auto}[data-v-a7910661] .selected-component{outline:2px solid #409EFF;border-radius:5px;padding:5px}[data-v-a7910661] .el-header{padding:0;margin:0 10px 10px}[data-v-a7910661] .el-input-number{width:100%}[data-v-a7910661] .inline-block{display:inline-flex}[data-v-a7910661] .form-item-tip{color:coral;cursor:pointer;align-self:center;margin-left:5px}[data-v-a7910661] .drop-zone{min-height:50px;padding:10px;border:1px dashed #aaa;display:flex;flex-direction:column;gap:10px}[data-v-a7910661] .drop-item-tabs,[data-v-a7910661] .drop-item-card{width:100%}[data-v-a7910661] .drop-zone-box .el-tabs__content .el-tab-pane{min-height:55px}[data-v-a7910661] .drop-item-grid-component{width:100%}#preview-panel[data-v-ce37e41c]{height:100%}.el-container[data-v-03df7d24]{height:100%;margin:0}.low-code-form[data-v-03df7d24]{background-color:#f0f2f5;height:100%;padding:5px;box-sizing:border-box}[data-v-03df7d24] .el-form--inline .drop-item:not(.drop-item-card):not(.drop-item-el-tabs):not(.drop-item-el-button):not(.drop-item-el-divider):not(.drop-item-div-component){display:inline-flex}[data-v-03df7d24] .drop-item-el-button{display:inline-block}[data-v-03df7d24] .drop-item-el-button+.drop-item-el-button{margin-left:12px}[data-v-03df7d24] .drop-item{box-sizing:border-box;margin-bottom:10px}[data-v-03df7d24] .el-date-editor.el-input{width:100%}[data-v-03df7d24] .el-table td.el-table__cell .cell{min-height:23px}

package/dist/low-code-form.es.js

@@ -1,10 +1,10 @@
-import { defineComponent as s, createElementBlock as l, openBlock as o, createElementVNode as r, ref as F, nextTick as J2, reactive as L1, normalizeClass as P0, unref as M2, renderSlot as l1, computed as G2, onUnmounted as s1, normalizeStyle as i1, onMounted as c1, resolveComponent as N, createBlock as Q, withCtx as z, resolveDynamicComponent as T1, h as f2, createVNode as g, withDirectives as B0, createCommentVNode as z2, vShow as A0, Fragment as V2, createTextVNode as w2, renderList as z0, createSlots as r4, toDisplayString as h0, createApp as u1, watch as x1, onBeforeUnmount as n4, Teleport as o4 } from "vue";
+import { defineComponent as s, createElementBlock as l, openBlock as o, createElementVNode as r, ref as F, nextTick as J2, reactive as L1, normalizeClass as P0, unref as M2, renderSlot as s1, computed as G2, onUnmounted as i1, normalizeStyle as c1, onMounted as u1, resolveComponent as N, createBlock as Q, withCtx as z, resolveDynamicComponent as T1, h as f2, createVNode as g, withDirectives as B0, createCommentVNode as z2, vShow as A0, Fragment as V2, createTextVNode as w2, renderList as z0, createSlots as r4, toDisplayString as h0, createApp as p1, watch as Q0, onBeforeUnmount as n4, Teleport as o4 } from "vue";
 import * as L2 from "element-plus";
 import { ElMessage as C1, ElMessageBox as l4 } from "element-plus";
 const s4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   get default() {
-    return o1;
+    return l1;
   }
 }, Symbol.toStringTag, { value: "Module" }));
 /**!
@@ -82,7 +82,7 @@ function D2(t) {
   if (typeof window < "u" && window.navigator)
     return !!/* @__PURE__ */ navigator.userAgent.match(t);
 }
-var F2 = D2(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i), d0 = D2(/Edge/i), b1 = D2(/firefox/i), i0 = D2(/safari/i) && !D2(/chrome/i) && !D2(/android/i), p1 = D2(/iP(ad|od|hone)/i), F1 = D2(/chrome/i) && D2(/android/i), k1 = {
+var F2 = D2(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i), d0 = D2(/Edge/i), b1 = D2(/firefox/i), i0 = D2(/safari/i) && !D2(/chrome/i) && !D2(/android/i), _1 = D2(/iP(ad|od|hone)/i), F1 = D2(/chrome/i) && D2(/android/i), k1 = {
   capture: !1,
   passive: !1
 };
@@ -211,7 +211,7 @@ function t0(t, e, a, n) {
   }
   return null;
 }
-function _1(t, e) {
+function m1(t, e) {
   for (var a = t.lastElementChild; a && (a === H.ghost || V(a, "display") === "none" || e && !D0(a, e)); )
     a = a.previousElementSibling;
   return a || null;
@@ -475,7 +475,7 @@ function l2(t) {
     newDraggableIndex: N2
   }, t));
 }
-var f, G, S, j, W2, E0, Y, P2, Z2, v2, u0, N2, g0, a2, Q2 = !1, L0 = !1, T0 = [], U2, b2, j0, U0, V1, y1, o0, K2, p0, _0 = !1, x0 = !1, V0, n2, Y0 = [], Q0 = !1, F0 = [], I0 = typeof document < "u", C0 = p1, S1 = d0 || F2 ? "cssFloat" : "float", x4 = I0 && !F1 && !p1 && "draggable" in document.createElement("div"), $1 = function() {
+var f, G, S, j, W2, E0, Y, P2, Z2, v2, u0, N2, g0, a2, Q2 = !1, L0 = !1, T0 = [], U2, b2, j0, U0, V1, y1, o0, K2, p0, _0 = !1, x0 = !1, V0, n2, Y0 = [], Z0 = !1, F0 = [], I0 = typeof document < "u", C0 = _1, S1 = d0 || F2 ? "cssFloat" : "float", x4 = I0 && !F1 && !_1 && "draggable" in document.createElement("div"), $1 = function() {
   if (I0) {
     if (F2)
       return !1;
@@ -500,7 +500,7 @@ var f, G, S, j, W2, E0, Y, P2, Z2, v2, u0, N2, g0, a2, Q2 = !1, L0 = !1, T0 = []
   var n;
   return T0.some(function(i) {
     var c = i[_2].options.emptyInsertThreshold;
-    if (!(!c || _1(i))) {
+    if (!(!c || m1(i))) {
       var u = Z(i), p = e >= u.left - c && e <= u.right + c, _ = a >= u.top - c && a <= u.bottom + c;
       if (p && _)
         return n = i;
@@ -596,7 +596,7 @@ function H(t, e) {
       y: 0
     },
     // Disabled on Safari: #1571; Enabled on Safari IOS: #2244
-    supportPointer: H.supportPointer !== !1 && "PointerEvent" in window && (!i0 || p1),
+    supportPointer: H.supportPointer !== !1 && "PointerEvent" in window && (!i0 || _1),
     emptyInsertThreshold: 5
   };
   v0.initializePlugins(this, t, a);
@@ -796,7 +796,7 @@ H.prototype = /** @lends Sortable.prototype */
   // Returns true - if no further action is needed (either inserted or another condition)
   _onDragOver: function(e) {
     var a = this.el, n = e.target, i, c, u, p = this.options, _ = p.group, m = H.active, d = g0 === _, h = p.sort, w = a2 || m, E, M = this, y = !1;
-    if (Q0) return;
+    if (Z0) return;
     function L(B2, r2) {
       u2(B2, M, S2({
         evt: e,
@@ -842,7 +842,7 @@ H.prototype = /** @lends Sortable.prototype */
       if (E = this._getDirection(e, n) === "vertical", i = Z(f), L("dragOverValid"), H.eventCanceled) return y;
       if (u)
         return G = j, R(), this._hideClone(), L("revert"), H.eventCanceled || (W2 ? j.insertBefore(f, W2) : j.appendChild(f)), O(!0);
-      var P = _1(a, p.draggable);
+      var P = m1(a, p.draggable);
       if (!P || V4(e, E, this) && !P.animated) {
         if (P === f)
           return O(!1);
@@ -872,7 +872,7 @@ H.prototype = /** @lends Sortable.prototype */
         I = s2 === 1;
         var O2 = M0(j, a, f, i, n, c, e, I);
         if (O2 !== !1)
-          return (O2 === 1 || O2 === -1) && (I = O2 === 1), Q0 = !0, setTimeout(H4, 30), R(), I && !W ? a.appendChild(f) : n.parentNode.insertBefore(f, I ? W : n), x && I1(x, 0, J - x.scrollTop), G = f.parentNode, i2 !== void 0 && !x0 && (V0 = Math.abs(i2 - Z(n)[A])), e2(), O(!0);
+          return (O2 === 1 || O2 === -1) && (I = O2 === 1), Z0 = !0, setTimeout(H4, 30), R(), I && !W ? a.appendChild(f) : n.parentNode.insertBefore(f, I ? W : n), x && I1(x, 0, J - x.scrollTop), G = f.parentNode, i2 !== void 0 && !x0 && (V0 = Math.abs(i2 - Z(n)[A])), e2(), O(!0);
       }
       if (a.contains(f))
         return O(!1);
@@ -895,7 +895,7 @@ H.prototype = /** @lends Sortable.prototype */
       this._nulling();
       return;
     }
-    Q2 = !1, x0 = !1, _0 = !1, clearInterval(this._loopId), clearTimeout(this._dragStartTimer), Z0(this.cloneId), Z0(this._dragStartId), this.nativeDraggable && (D(document, "drop", this), D(a, "dragstart", this._onDragStart)), this._offMoveEvents(), this._offUpEvents(), i0 && V(document.body, "user-select", ""), V(f, "transform", ""), e && (o0 && (e.cancelable && e.preventDefault(), !n.dropBubble && e.stopPropagation()), S && S.parentNode && S.parentNode.removeChild(S), (j === G || a2 && a2.lastPutMode !== "clone") && Y && Y.parentNode && Y.parentNode.removeChild(Y), f && (this.nativeDraggable && D(f, "dragend", this), W0(f), f.style["will-change"] = "", o0 && !Q2 && d2(f, a2 ? a2.options.ghostClass : this.options.ghostClass, !1), d2(f, this.options.chosenClass, !1), l2({
+    Q2 = !1, x0 = !1, _0 = !1, clearInterval(this._loopId), clearTimeout(this._dragStartTimer), e1(this.cloneId), e1(this._dragStartId), this.nativeDraggable && (D(document, "drop", this), D(a, "dragstart", this._onDragStart)), this._offMoveEvents(), this._offUpEvents(), i0 && V(document.body, "user-select", ""), V(f, "transform", ""), e && (o0 && (e.cancelable && e.preventDefault(), !n.dropBubble && e.stopPropagation()), S && S.parentNode && S.parentNode.removeChild(S), (j === G || a2 && a2.lastPutMode !== "clone") && Y && Y.parentNode && Y.parentNode.removeChild(Y), f && (this.nativeDraggable && D(f, "dragend", this), W0(f), f.style["will-change"] = "", o0 && !Q2 && d2(f, a2 ? a2.options.ghostClass : this.options.ghostClass, !1), d2(f, this.options.chosenClass, !1), l2({
       sortable: this,
       name: "unchoose",
       toEl: G,
@@ -1053,14 +1053,14 @@ function W0(t) {
   t.draggable = !1;
 }
 function H4() {
-  Q0 = !1;
+  Z0 = !1;
 }
 function E4(t, e, a) {
   var n = Z(t0(a.el, 0, a.options, !0)), i = q1(a.el, a.options, S), c = 10;
   return e ? t.clientX < i.left - c || t.clientY < n.top && t.clientX < n.right : t.clientY < i.top - c || t.clientY < n.bottom && t.clientX < n.left;
 }
 function V4(t, e, a) {
-  var n = Z(_1(a.el, a.options.draggable)), i = q1(a.el, a.options, S), c = 10;
+  var n = Z(m1(a.el, a.options.draggable)), i = q1(a.el, a.options, S), c = 10;
   return e ? t.clientX > i.right + c || t.clientY > n.bottom && t.clientX > n.left : t.clientY > i.bottom + c || t.clientX > n.right && t.clientY > n.top;
 }
 function y4(t, e, a, n, i, c, u, p) {
@@ -1094,7 +1094,7 @@ function A4(t) {
 function y0(t) {
   return setTimeout(t, 0);
 }
-function Z0(t) {
+function e1(t) {
   return clearTimeout(t);
 }
 I0 && T(document, "touchmove", function(t) {
@@ -1115,7 +1115,7 @@ H.utils = {
   clone: R1,
   index: g2,
   nextTick: y0,
-  cancelNextTick: Z0,
+  cancelNextTick: e1,
   detectDirection: j1,
   getChild: t0,
   expando: _2
@@ -1136,7 +1136,7 @@ H.create = function(t, e) {
   return new H(t, e);
 };
 H.version = p4;
-var K = [], l0, e1, t1 = !1, G0, J0, k0, s0;
+var K = [], l0, t1, a1 = !1, G0, J0, k0, s0;
 function D4() {
   function t() {
     this.defaults = {
@@ -1162,7 +1162,7 @@ function D4() {
       this.sortable.nativeDraggable ? D(document, "dragover", this._handleAutoScroll) : (D(document, "pointermove", this._handleFallbackAutoScroll), D(document, "touchmove", this._handleFallbackAutoScroll), D(document, "mousemove", this._handleFallbackAutoScroll)), B1(), S0(), h4();
     },
     nulling: function() {
-      k0 = e1 = l0 = t1 = s0 = G0 = J0 = null, K.length = 0;
+      k0 = t1 = l0 = a1 = s0 = G0 = J0 = null, K.length = 0;
     },
     _handleFallbackAutoScroll: function(a) {
       this._handleAutoScroll(a, !0);
@@ -1172,7 +1172,7 @@ function D4() {
       if (k0 = a, n || this.options.forceAutoScrollFallback || d0 || F2 || i0) {
         X0(a, this.options, p, n);
         var _ = R2(p, !0);
-        t1 && (!s0 || c !== G0 || u !== J0) && (s0 && B1(), s0 = setInterval(function() {
+        a1 && (!s0 || c !== G0 || u !== J0) && (s0 && B1(), s0 = setInterval(function() {
           var m = R2(document.elementFromPoint(c, u), !0);
           m !== _ && (_ = m, S0()), X0(a, i.options, m, n);
         }, 10), G0 = c, J0 = u);
@@ -1200,7 +1200,7 @@ function B1() {
 var X0 = P1(function(t, e, a, n) {
   if (e.scroll) {
     var i = (t.touches ? t.touches[0] : t).clientX, c = (t.touches ? t.touches[0] : t).clientY, u = e.scrollSensitivity, p = e.scrollSpeed, _ = y2(), m = !1, d;
-    e1 !== a && (e1 = a, S0(), l0 = e.scroll, d = e.scrollFn, l0 === !0 && (l0 = R2(a, !0)));
+    t1 !== a && (t1 = a, S0(), l0 = e.scroll, d = e.scrollFn, l0 === !0 && (l0 = R2(a, !0)));
     var h = 0, w = l0;
     do {
       var E = w, M = Z(E), y = M.top, L = M.bottom, R = M.left, O = M.right, e2 = M.width, P = M.height, m2 = void 0, s2 = void 0, i2 = E.scrollWidth, E2 = E.scrollHeight, t2 = V(E), A = E.scrollLeft, x = E.scrollTop;
@@ -1217,7 +1217,7 @@ var X0 = P1(function(t, e, a, n) {
         layer: h
       }), 24))), h++;
     } while (e.bubbleScroll && w !== _ && (w = R2(w, !1)));
-    t1 = m;
+    a1 = m;
   }
 }, 30), G1 = function(e) {
   var a = e.originalEvent, n = e.putSortable, i = e.dragEl, c = e.activeSortable, u = e.dispatchSortableEvent, p = e.hideGhostForTarget, _ = e.unhideGhostForTarget;
@@ -1231,9 +1231,9 @@ var X0 = P1(function(t, e, a, n) {
     }));
   }
 };
-function m1() {
+function h1() {
 }
-m1.prototype = {
+h1.prototype = {
   startIndex: null,
   dragStart: function(e) {
     var a = e.oldDraggableIndex;
@@ -1247,24 +1247,24 @@ m1.prototype = {
   },
   drop: G1
 };
-T2(m1, {
+T2(h1, {
   pluginName: "revertOnSpill"
 });
-function h1() {
+function d1() {
 }
-h1.prototype = {
+d1.prototype = {
   onSpill: function(e) {
     var a = e.dragEl, n = e.putSortable, i = n || this.sortable;
     i.captureAnimationState(), a.parentNode && a.parentNode.removeChild(a), i.animateAll();
   },
   drop: G1
 };
-T2(h1, {
+T2(d1, {
   pluginName: "removeOnSpill"
 });
 H.mount(new D4());
-H.mount(h1, m1);
-var d1 = {
+H.mount(d1, h1);
+var v1 = {
   name: "zh-cn",
   el: {
     breadcrumb: {
@@ -2736,7 +2736,7 @@ var L4 = /* @__PURE__ */ s({
       })
     ]));
   }
-}), v1 = S3, B3 = /* @__PURE__ */ s({
+}), f1 = S3, B3 = /* @__PURE__ */ s({
   name: "Dessert",
   __name: "dessert",
   setup(t) {
@@ -6103,7 +6103,7 @@ const b5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   DataAnalysis: x3,
   DataBoard: M3,
   DataLine: z3,
-  Delete: v1,
+  Delete: f1,
   DeleteFilled: E3,
   DeleteLocation: y3,
   Dessert: A3,
@@ -6325,10 +6325,10 @@ function R0() {
   return `${t}${e}`;
 }
 let K1 = null;
-function f1(t = [], e) {
+function w1(t = [], e) {
   t.forEach((a) => {
     const n = a.componentName;
-    ["ElCard", "ElTabPane", "GridComponent", "DivComponent"].includes(n) && a.id && e({ id: a.id }), a.children && Array.isArray(a.children) && f1(a.children, e);
+    ["ElCard", "ElTabPane", "GridComponent", "DivComponent"].includes(n) && a.id && e({ id: a.id }), a.children && Array.isArray(a.children) && w1(a.children, e);
   });
 }
 function C2() {
@@ -6345,11 +6345,11 @@ function Q1(t, e, a = null) {
   };
   return t.children && (n.children = t.children.map((i) => Q1(i, R0(), e))), n;
 }
-let a1 = {};
+let r1 = {};
 function Z1(t, e) {
   var a;
   for (const n of t) {
-    if (a1[e] = n, n.id === e) return n;
+    if (r1[e] = n, n.id === e) return n;
     if ((a = n.children) != null && a.length) {
       const i = Z1(n.children, e);
       if (i) return i;
@@ -6358,7 +6358,7 @@ function Z1(t, e) {
   return null;
 }
 function K0(t, e) {
-  return a1[e] ? a1[e] : Z1(t, e);
+  return r1[e] ? r1[e] : Z1(t, e);
 }
 function e4(t, e) {
   var a;
@@ -6397,14 +6397,14 @@ function A2(t) {
     };
   }));
 }
-function r1(t) {
+function n1(t) {
   if (t === null || typeof t != "object") return t;
   if (Array.isArray(t))
-    return t.map((a) => r1(a)).filter((a) => a !== void 0);
+    return t.map((a) => n1(a)).filter((a) => a !== void 0);
   const e = {};
   for (const a in t)
     if (Object.prototype.hasOwnProperty.call(t, a)) {
-      const n = r1(t[a]);
+      const n = n1(t[a]);
       n !== void 0 && (e[a] = n);
     }
   return e;
@@ -6452,7 +6452,7 @@ function H5() {
       return;
     }
     const u = n.originalEvent.dataTransfer.getData("itemId");
-    let p = r1(a4.componentMap[i]);
+    let p = n1(a4.componentMap[i]);
     if (!p) return;
     let _ = Q1(p, u);
     if (_.noUseForm)
@@ -6490,7 +6490,7 @@ function H5() {
     let [h] = m.children.splice(n.oldDraggableIndex, 1);
     d.children.splice(n.newIndex, 0, h), h.componentName === "ElCard" || h.componentName === "ElTabs" || h.componentName === "GridComponent" || h.componentName === "DivComponent" ? J2(() => {
       var E;
-      (h.componentName === "ElCard" || h.componentName === "GridComponent" || h.componentName === "DivComponent") && t({ id: h.id }), (E = h.children) != null && E.length && f1(h.children, t), A2(C2());
+      (h.componentName === "ElCard" || h.componentName === "GridComponent" || h.componentName === "DivComponent") && t({ id: h.id }), (E = h.children) != null && E.length && w1(h.children, t), A2(C2());
     }) : A2(C2());
   }
   return {
@@ -6571,7 +6571,7 @@ const y5 = ["data-component", "data-id"], A1 = {
         "data-component": t.componentData.componentName,
         "data-id": t.componentData.id || ((i = (n = t.componentData.children) == null ? void 0 : n[0]) == null ? void 0 : i.id)
       }, [
-        l1(e.$slots, "default")
+        s1(e.$slots, "default")
       ], 10, y5);
     };
   }
@@ -6624,13 +6624,13 @@ ${this.styleObjectToCssString(e)}
       };
       return $2.SET_STYLES(e.class.split(" ")[1], n), n;
     });
-    return s1(() => {
+    return i1(() => {
       $2.DELETE_STYLES(e.class.split(" ")[1]);
     }), (n, i) => (o(), l("div", {
       class: P0(["element block-element", { "div-border": !t.isPreview }]),
-      style: i1(a.value)
+      style: c1(a.value)
     }, [
-      l1(n.$slots, "default", {}, void 0, !0)
+      s1(n.$slots, "default", {}, void 0, !0)
     ], 6));
   }
 }, B5 = /* @__PURE__ */ k2(S5, [["__scopeId", "data-v-b4ec6a05"]]), A5 = {
@@ -6660,13 +6660,13 @@ ${this.styleObjectToCssString(e)}
       };
       return $2.SET_STYLES(e.class.split(" ")[1], { ...n, display: "grid" }), n;
     });
-    return s1(() => {
+    return i1(() => {
       $2.DELETE_STYLES(e.class.split(" ")[1]);
     }), (n, i) => (o(), l("div", {
       class: P0(["element grid", { "grid-border": !t.isPreview }]),
-      style: i1(a.value)
+      style: c1(a.value)
     }, [
-      l1(n.$slots, "default", {}, void 0, !0)
+      s1(n.$slots, "default", {}, void 0, !0)
     ], 6));
   }
 }, D5 = /* @__PURE__ */ k2(A5, [["__scopeId", "data-v-9c27fd62"]]), D1 = {
@@ -6700,14 +6700,14 @@ ${this.styleObjectToCssString(e)}
       const n = {};
       return e.fontSize && (n.fontSize = `${e.fontSize}px`), e.color && (n.color = e.color), Object.keys(n).length ? $2.SET_STYLES(`${e.class} ::v-deep(.el-icon)`, n) : $2.DELETE_STYLES(`${e.class} ::v-deep(.el-icon)`), n;
     });
-    return c1(() => {
+    return u1(() => {
       D1.SET_ICONS(e.class, e.icon);
-    }), s1(() => {
+    }), i1(() => {
       D1.DELETE_ICONS(e.class), $2.DELETE_STYLES(`${e.class} ::v-deep(.el-icon)`);
     }), (n, i) => {
       const c = N("el-icon");
       return o(), Q(c, {
-        style: i1(a.value)
+        style: c1(a.value)
       }, {
         default: z(() => [
           (o(), Q(T1(b5[e.icon])))
@@ -6717,16 +6717,16 @@ ${this.styleObjectToCssString(e)}
     };
   }
 }, T5 = ["ElCheckbox", "ElFormItem", "ElRadio", "ElOption", "ElTable", "ElTableColumn", "ElTabPane", "ElCard", "ElButton", "ElDivider", "GridComponent", "DivComponent", "div"], F5 = ["ElFormItem", "ElTabs", "ElTable", "ElDivider", "ElButton", "DivComponent"];
-function n1(t, e) {
+function o1(t, e) {
   return t.map((a) => {
     var n;
     if (a.componentName === "template" && a[e])
-      return n1(a[e]);
+      return o1(a[e]);
     if (a.componentName) {
       const i = {
         ...a.props,
         class: ((n = a.props) == null ? void 0 : n.class) || ""
-      }, c = a[e] ? n1(a[e]) : void 0;
+      }, c = a[e] ? o1(a[e]) : void 0;
       return f2(
         L2[a.componentName] || a.componentName,
         i,
@@ -6739,7 +6739,7 @@ function n1(t, e) {
 const k5 = {
   ElUpload: "fileList"
 };
-function w1({ isPreview: t = !1, callback: e }) {
+function g1({ isPreview: t = !1, callback: e }) {
   const a = t ? B.previewFormData : B.formData, n = T5;
   function i(c) {
     var M, y;
@@ -6771,7 +6771,7 @@ function w1({ isPreview: t = !1, callback: e }) {
         "data-component": c.componentName
       }, [f2(L2[c.componentName], _, {
         ...d,
-        [c.staticChildren[0].slot]: () => n1(c.staticChildren, "staticChildren")
+        [c.staticChildren[0].slot]: () => o1(c.staticChildren, "staticChildren")
       })]);
     const w = c.componentName === "ElFormItem" ? (y = (M = c.children) == null ? void 0 : M[0]) == null ? void 0 : y.componentName : c.componentName;
     if (c.componentName === "GridComponent")
@@ -7035,7 +7035,7 @@ const O5 = [
     function r2(v, b) {
       m.value[b].name = v;
     }
-    function g1() {
+    function x1() {
       var h2, a0, r0, j2, n0, f0, w0;
       if (!((a0 = (h2 = u.value) == null ? void 0 : h2.children) != null && a0.length))
         return;
@@ -7292,7 +7292,7 @@ const O5 = [
                       title: "删除"
                     }, {
                       default: z(() => [
-                        g(M2(v1))
+                        g(M2(f1))
                       ]),
                       _: 2
                     }, 1032, ["onClick"]),
@@ -7323,7 +7323,7 @@ const O5 = [
                 g(f0, {
                   link: "",
                   type: "primary",
-                  onClick: g1
+                  onClick: x1
                 }, {
                   default: z(() => b[7] || (b[7] = [
                     w2("增加")
@@ -7445,8 +7445,8 @@ const O5 = [
     let u = null;
     function p() {
       a.value = !0, J2(() => {
-        const h = w1({ isPreview: !0 });
-        u = u1({
+        const h = g1({ isPreview: !0 });
+        u = p1({
           render() {
             const w = JSON.parse(JSON.stringify(x2.value.components));
             return f2(
@@ -7463,7 +7463,7 @@ const O5 = [
               }
             );
           }
-        }).use(L2, { locale: d1 }), u.mount("#preview-box");
+        }).use(L2, { locale: v1 }), u.mount("#preview-box");
       });
     }
     function _() {
@@ -8094,7 +8094,7 @@ function Vs(t) {
   }
   return a;
 }
-const ys = ["index.js", "imports.js"], p2 = Vs(ys), o1 = [
+const ys = ["index.js", "imports.js"], p2 = Vs(ys), l1 = [
   { title: "容器组件" },
   p2.elCard(),
   p2.elTabsJson(),
@@ -8125,25 +8125,25 @@ const ys = ["index.js", "imports.js"], p2 = Vs(ys), o1 = [
     data: { type: Object }
   },
   setup(t) {
-    const e = o1, a = {};
-    o1.forEach((A) => {
+    const e = l1, a = {};
+    l1.forEach((A) => {
       A.componentName && (a[A.componentName] = A);
     }), a4.SET_COMPONENT_MAP(a);
     const n = F("first"), i = F("first"), c = F(null), u = F(null), p = F(null), _ = F(null), m = F(null), d = F(null), h = F(!1), w = F(m0.teleportTo.value), E = B.formData, M = B.rules;
     let y = null, L = !1, R = null;
     const O = t;
-    x1(m0.teleportTo, (A) => {
+    Q0(m0.teleportTo, (A) => {
       w.value = A;
-    }), x1(() => O.data, () => {
+    }), Q0(() => O.data, () => {
       E5(), L = !0, B.CLEAR_ALL(), u.value.init(B.formOptions), O.data && O.data.forms ? (B.SET_FORM_OPTIONS_INIT(O.data.formOptions.inline), B.SET_FORM_OPTIONS(O.data.formOptions), b0(O.data.forms)) : b0([]);
     });
     const {
       initSortable: e2,
       schema: P
     } = H5();
-    c1(() => {
-      const A = w1({});
-      R = u1({
+    u1(() => {
+      const A = g1({});
+      R = p1({
         mounted() {
           J2(() => {
             H.create(c.value, {
@@ -8171,7 +8171,7 @@ const ys = ["index.js", "imports.js"], p2 = Vs(ys), o1 = [
           });
         },
         updated() {
-          L && (f1(P.value.components, e2), L = !1);
+          L && (w1(P.value.components, e2), L = !1);
         },
         render() {
           O.data && O.data.forms && b0(O.data.forms);
@@ -8197,7 +8197,7 @@ const ys = ["index.js", "imports.js"], p2 = Vs(ys), o1 = [
             }
           );
         }
-      }).use(L2, { locale: d1 }), R.mount("#canvas-drop");
+      }).use(L2, { locale: v1 }), R.mount("#canvas-drop");
     }), n4(() => {
       b0([]), B.CLEAR_ALL(), R.unmount();
     });
@@ -8257,7 +8257,7 @@ const ys = ["index.js", "imports.js"], p2 = Vs(ys), o1 = [
                 onClick: x[0] || (x[0] = (r2) => E2())
               }, {
                 default: z(() => [
-                  g(M2(v1))
+                  g(M2(f1))
                 ]),
                 _: 1
               })
@@ -8381,10 +8381,11 @@ const ys = ["index.js", "imports.js"], p2 = Vs(ys), o1 = [
     const a = t, n = F(null), i = B.previewFormData, c = B.rules;
     return e({
       formRef: n
-    }), c1(() => {
-      i.value = a.variables;
-      const u = w1({ isPreview: !0, callback: a.callback });
-      u1({
+    }), Q0(() => a.variables, (u) => {
+      i.value = u;
+    }, { immediate: !0 }), u1(() => {
+      const u = g1({ isPreview: !0, callback: a.callback });
+      p1({
         render() {
           return f2(
             L2.ElForm,
@@ -8399,10 +8400,10 @@ const ys = ["index.js", "imports.js"], p2 = Vs(ys), o1 = [
             }
           );
         }
-      }).use(L2, { locale: d1 }).mount("#preview-panel");
+      }).use(L2, { locale: v1 }).mount("#preview-panel");
     }), (u, p) => (o(), l("div", Fs));
   }
-}, Os = /* @__PURE__ */ k2(ks, [["__scopeId", "data-v-965fdd3c"]]), Ns = { class: "low-code-form" }, Ps = {
+}, Os = /* @__PURE__ */ k2(ks, [["__scopeId", "data-v-ce37e41c"]]), Ns = { class: "low-code-form" }, Ps = {
   __name: "index",
   props: {
     isPreview: Boolean,