dynamicformdjx 0.4.1 → 0.4.3

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as R, ref as w, watch as N, toRaw as h, createVNode as n, createTextVNode as m, nextTick as j, Fragment as x, shallowReactive as O, unref as D, isRef as F } from "vue";
-import { t as p, r as V, f as T, p as L, s as M, e as $ } from "./index-MF72-iEr.js";
-const H = /* @__PURE__ */ R({
+import { defineComponent as O, ref as R, watch as L, toRaw as x, createVNode as a, createTextVNode as g, Fragment as k, nextTick as M, shallowReactive as D, unref as H, isRef as T } from "vue";
+import { t as V, r as j, f as $, p as E, s as z, e as K } from "./index-MF72-iEr.js";
+const P = /* @__PURE__ */ O({
   name: "DynamicInput",
   props: {
     size: {
@@ -33,129 +33,146 @@ const H = /* @__PURE__ */ R({
   emits: {
     "update:modelValue": (t) => !0,
     onReset: () => !0,
-    onMerge: (t, r) => !0
+    onMerge: (t, c) => !0
   },
+  slots: Object,
   setup(t, {
-    emit: r,
-    expose: f
+    emit: c,
+    expose: p,
+    slots: r
   }) {
-    const d = {
+    const f = {
       resetTxt: "重置",
       newTxt: "添加项",
       mergeTxt: "合并",
       ...t.btnConfigs
-    }, c = {
+    }, m = {
       hideReset: !1,
       maxHeight: "300px",
       autoScroll: !0,
       allowFilter: !0,
+      hideArrayBtn: !1,
+      hideNumberBtn: !1,
       ...t.configs
-    }, y = {
+    }, v = {
       arraySplitSymbol: ",",
       ...t.dyListConfigs
-    }, v = t.size, o = w(p(t.modelValue, t.randomFun, y.arraySplitSymbol)), b = w(null);
-    return N(o, (e) => {
+    }, b = t.size, d = R(V(t.modelValue, t.randomFun, v.arraySplitSymbol)), h = R(null);
+    L(d, (e) => {
       if (!t.isController) return;
-      const u = V(e, y.arraySplitSymbol);
-      r("update:modelValue", u), r("onMerge", u, h(o.value));
+      const s = j(e, v.arraySplitSymbol);
+      c("update:modelValue", s), c("onMerge", s, x(d.value));
     }, {
       deep: !0
-    }), f({
+    }), p({
       onSet: (e) => {
-        o.value = p(e ?? t.modelValue, t.randomFun, y.arraySplitSymbol);
+        d.value = V(e ?? t.modelValue, t.randomFun, v.arraySplitSymbol);
       },
-      getResult: (e = "res") => e === "ori" ? h(o.value) : V(o.value, y.arraySplitSymbol)
-    }), () => n("div", {
-      class: t.dyCls ?? `dynamicForm ${v}`
-    }, [n("div", {
-      class: "dyFormList",
-      ref: b,
+      getResult: (e = "res") => e === "ori" ? x(d.value) : j(d.value, v.arraySplitSymbol)
+    });
+    const y = () => d.value.push({
+      rId: t.randomFun(),
+      key: "",
+      value: ""
+    }), A = () => {
+      d.value = V(t.modelValue, t.randomFun, v.arraySplitSymbol), c("onReset");
+    }, o = () => {
+      d.value.sort((s, l) => +s.rId - +l.rId);
+      const e = j(d.value, v.arraySplitSymbol);
+      c("update:modelValue", e), c("onMerge", e, x(d.value)), d.value = V(e, t.randomFun, v.arraySplitSymbol);
+    };
+    return () => a("div", {
+      class: `dynamicForm ${b} ${t.dyCls}`
+    }, [a("div", {
+      class: `dyFormList ${d.value.length ? "" : "noList"}`,
+      ref: h,
       style: {
-        maxHeight: c.maxHeight
-      }
-    }, [o.value.map((e, u, l) => n("div", {
-      class: "dItem",
-      key: e.rId
-    }, [n("div", {
-      class: "input"
-    }, [n("input", {
-      size: v,
-      value: e.key,
-      class: "key nativeInput",
-      onInput: (s) => {
-        e.key = s.target.value;
-      }
-    }, null), m(":"), n("div", {
-      class: "vInput"
-    }, [n("div", {
-      class: "slot"
-    }, [n("button", {
-      class: [e.isArray ? "success" : "default", "small", "bt"],
-      onClick: () => {
-        e.isArray = !e.isArray;
-      }
-    }, [m("Array")]), m(" "), n("button", {
-      class: [e.isNumber ? "success" : "default", "small", "bt"],
-      onClick: () => {
-        e.isNumber = !e.isNumber;
+        maxHeight: m.maxHeight
       }
-    }, [m("Number")])]), n("input", {
-      size: v,
-      value: e.value,
-      class: "value nativeV",
-      onInput: (s) => {
-        const i = s.target.value;
-        c.allowFilter && e.isNumber ? e.value = T(i, e.isArray, y.arraySplitSymbol) : e.value = i;
-      }
-    }, null)])]), n("div", {
-      class: "btn"
-    }, [n("button", {
-      class: [v, "success", "bt"],
-      disabled: u !== l.length - 1,
-      onClick: () => {
-        o.value.push({
-          rId: t.randomFun(),
-          key: "",
-          value: ""
-        }), c.autoScroll && j(() => {
-          const s = b.value;
-          s?.scrollTo({
-            top: s.scrollHeight,
-            behavior: "smooth"
+    }, [d.value.map((e, s, l) => {
+      const u = {
+        row: e,
+        index: s,
+        isLast: s === l.length - 1,
+        addItem: () => {
+          d.value.push({
+            rId: t.randomFun(),
+            key: "",
+            value: ""
+          }), m.autoScroll && M(() => {
+            const i = h.value;
+            i?.scrollTo({
+              top: i.scrollHeight,
+              behavior: "smooth"
+            });
           });
-        });
-      }
-    }, [m("+")]), n("button", {
-      class: ["danger", v, "bt"],
-      onClick: () => {
-        o.value = o.value.filter((s) => s.rId !== e.rId);
-      }
-    }, [m("-")])])]))]), n("div", {
-      class: "control"
-    }, [!o.value.length && n("button", {
-      class: ["success", v, "bt"],
-      onClick: () => {
-        o.value.push({
-          rId: t.randomFun(),
-          key: "",
-          value: ""
-        });
-      }
-    }, [d.newTxt]), !t.isController && n(x, null, [!c.hideReset && n("button", {
-      class: ["default", v, "bt"],
-      onClick: () => {
-        o.value = p(t.modelValue, t.randomFun, y.arraySplitSymbol), r("onReset");
-      }
-    }, [d.resetTxt]), n("button", {
-      class: ["info", v, "bt"],
-      onClick: () => {
-        o.value.sort((u, l) => +u.rId - +l.rId);
-        const e = V(o.value, y.arraySplitSymbol);
-        r("update:modelValue", e), r("onMerge", e, h(o.value)), o.value = p(e, t.randomFun, y.arraySplitSymbol);
-      }
-    }, [d.mergeTxt])])])]);
+        },
+        removeItem: () => {
+          d.value = d.value.filter((i) => i.rId !== e.rId);
+        },
+        toggleArray: () => e.isArray = !e.isArray,
+        toggleNumber: () => e.isNumber = !e.isNumber
+      };
+      return a("div", {
+        class: "dItem",
+        key: e.rId
+      }, [a("div", {
+        class: "input"
+      }, [a("input", {
+        size: b,
+        value: e.key,
+        class: "key nativeInput",
+        onInput: (i) => {
+          e.key = i.target.value;
+        }
+      }, null), g(":"), a("div", {
+        class: "vInput"
+      }, [a("div", {
+        class: "slot"
+      }, [r.typeTools ? r.typeTools(u) : a(k, null, [!m.hideArrayBtn && a("button", {
+        class: [e.isArray ? "success" : "default", "small", "bt"],
+        onClick: u.toggleArray
+      }, [g("Array")]), !m.hideNumberBtn && a("button", {
+        class: [e.isNumber ? "success" : "default", "small", "bt"],
+        onClick: u.toggleNumber
+      }, [g("Number")])])]), a("input", {
+        size: b,
+        value: e.value,
+        class: "value nativeV",
+        onInput: (i) => {
+          const n = i.target.value;
+          m.allowFilter && e.isNumber ? e.value = $(n, e.isArray, v.arraySplitSymbol) : e.value = n;
+        }
+      }, null)])]), a("div", {
+        class: "btn"
+      }, [r.rowActions ? r.rowActions(u) : a(k, null, [a("button", {
+        class: [b, "success", "bt"],
+        disabled: !u.isLast,
+        onClick: u.addItem
+      }, [g("+")]), a("button", {
+        class: ["danger", b, "bt"],
+        onClick: u.removeItem
+      }, [g("-")])])])]);
+    })]), a("div", {
+      class: `control ${d.value.length ? "" : "noList"}`
+    }, [!d.value.length && (r.newBtn ? r.newBtn({
+      newItem: y
+    }) : a("button", {
+      class: ["success", b, "bt"],
+      onClick: y
+    }, [f.newTxt])), !t.isController && a(k, null, [!m.hideReset && (r.resetBtn ? r.resetBtn({
+      reset: A
+    }) : a("button", {
+      class: ["default", b, "bt"],
+      onClick: A
+    }, [f.resetTxt])), r.mergeBtn ? r.mergeBtn({
+      merge: o
+    }) : a("button", {
+      class: ["info", b, "bt"],
+      onClick: o
+    }, [f.mergeTxt])])])]);
   }
-}), z = /* @__PURE__ */ R({
+}), q = /* @__PURE__ */ O({
   name: "DynamicCascadeInput",
   props: {
     modelValue: {
@@ -194,217 +211,254 @@ const H = /* @__PURE__ */ R({
   emits: {
     "update:modelValue": (t) => !0,
     onReset: () => !0,
-    onMerge: (t, r) => !0
+    onMerge: (t, c) => !0
   },
+  slots: Object,
   setup(t, {
-    emit: r,
-    expose: f
+    emit: c,
+    expose: p,
+    slots: r
   }) {
-    const d = {
+    const f = {
       resetTxt: "重置",
       newTxt: "添加项",
       mergeTxt: "合并",
       ...t.btnConfigs
-    }, c = {
+    }, m = {
       hideReset: !1,
       maxHeight: "600px",
       allowFilter: !0,
       showBorder: !0,
       showPad: !0,
+      hideArrayBtn: !1,
+      hideNumberBtn: !1,
       retractLen: 0,
       borderColors: [],
       ...t.configs
-    }, y = {
+    }, v = {
       arraySplitSymbol: ",",
       ...t.dyListConfigs
-    }, v = (l) => ["string", "number"].includes(l), o = (l) => Object.keys(l).map((s, i) => {
-      let a = l[s];
-      const g = Array.isArray(a), A = g ? a.every((S) => typeof S == "number") : typeof a == "number", C = a === null;
-      return v(typeof a) && (a = l[s]), C && (a = ""), {
+    }, b = (l) => ["string", "number"].includes(l), d = (l) => Object.keys(l).map((u, i) => {
+      let n = l[u];
+      const C = Array.isArray(n), B = C ? n.every((N) => typeof N == "number") : typeof n == "number", w = n === null;
+      return b(typeof n) && (n = l[u]), w && (n = ""), {
         rId: t.randomFun(i),
-        key: s,
-        value: Object.prototype.toString.call(a) === "[object Object]" ? o(l[s]) : g ? a.join(y.arraySplitSymbol) : a,
-        isArray: g || void 0,
-        isNumber: A || void 0
+        key: u,
+        value: Object.prototype.toString.call(n) === "[object Object]" ? d(l[u]) : C ? n.join(v.arraySplitSymbol) : n,
+        isArray: C || void 0,
+        isNumber: B || void 0
       };
-    }), b = (l) => l.reduce((s, i) => {
-      const a = i.value;
-      return i.key.trim().length && (s[i.key] = Array.isArray(a) ? b(a) : L(i.value, i.isArray, i.isNumber, y.arraySplitSymbol)), s;
-    }, {}), e = w(o(t.modelValue)), u = (l, s = 1, i) => n("div", {
-      class: [`depth-${s}`, c.showBorder ? "" : "no-border", c.showPad ? "" : "no-pad"],
+    }), h = (l) => l.reduce((u, i) => {
+      const n = i.value;
+      return i.key.trim().length && (u[i.key] = Array.isArray(n) ? h(n) : E(i.value, i.isArray, i.isNumber, v.arraySplitSymbol)), u;
+    }, {}), y = R(d(t.modelValue)), A = (l, u = 1, i) => a("div", {
+      class: [`depth-${u}`, m.showBorder ? "" : "no-border", m.showPad ? "" : "no-pad"],
       style: {
-        "--depth": s,
-        ["--c" + [s]]: M(c.borderColors, s)
+        "--depth": u,
+        ["--c" + [u]]: z(m.borderColors, u)
       }
-    }, [l.map((a, g, A) => {
-      const C = Array.isArray(a.value), S = v(typeof a.value);
-      return n("div", {
+    }, [l.map((n, C, B) => {
+      const w = Array.isArray(n.value), N = b(typeof n.value), I = {
+        row: n,
+        index: C,
+        isLast: C === B.length - 1,
+        addItem: () => {
+          l.push({
+            rId: t.randomFun(),
+            key: "",
+            value: ""
+          });
+        },
+        addChild: () => {
+          N && (n.value = [], n.isArray = void 0), n.value.push({
+            rId: t.randomFun(),
+            key: "",
+            value: ""
+          });
+        },
+        removeItem: () => {
+          if (l.splice(C, 1), l.length < 1) {
+            if (i === void 0) return h([]);
+            const F = y.value.findIndex((S) => S.rId === i?.rId);
+            u < 1 ? y.value.splice(F, 1, {
+              ...i,
+              value: ""
+            }) : i.value = "";
+          }
+        },
+        toggleArray: () => n.isArray = !n.isArray,
+        toggleNumber: () => n.isNumber = !n.isNumber
+      };
+      return a("div", {
         class: "dItem",
-        key: a.rId,
+        key: n.rId,
         style: {
-          marginLeft: s > 1 ? `${s * c.retractLen}px` : "0"
+          marginLeft: u > 1 ? `${u * m.retractLen}px` : "0"
         }
-      }, [n("div", {
+      }, [a("div", {
         class: "input"
-      }, [!C && n(x, null, [n("input", {
-        value: a.key,
+      }, [!w && a(k, null, [a("input", {
+        value: n.key,
         class: "key nativeInput",
-        onInput: (I) => a.key = I.target.value
-      }, null), m(":")]), n("div", {
+        onInput: (F) => n.key = F.target.value
+      }, null), g(":")]), a("div", {
         class: "vInput"
-      }, [n("div", {
+      }, [a("div", {
         class: "slot"
-      }, [Array.isArray(a.value) ? void 0 : n(x, null, [n("button", {
-        class: [a.isArray ? "success" : "default", "small", "bt"],
-        onClick: () => {
-          a.isArray = !a.isArray;
-        }
-      }, [m("Array")]), m(" "), n("button", {
-        class: [a.isNumber ? "success" : "default", "small", "bt"],
-        onClick: () => {
-          a.isNumber = !a.isNumber;
-        }
-      }, [m("Number")])])]), n("input", {
-        class: `value nativeV ${C ? "isKey" : ""}`,
-        value: S ? a.value : a.key,
-        onInput: (I) => {
-          const k = I.target.value;
-          if (C) {
-            a.key = k;
+      }, [Array.isArray(n.value) ? void 0 : r.typeTools ? r.typeTools(I) : a(k, null, [!m.hideArrayBtn && a("button", {
+        class: [n.isArray ? "success" : "default", "small", "bt"],
+        onClick: I.toggleArray
+      }, [g("Array")]), !m.hideNumberBtn && a("button", {
+        class: [n.isNumber ? "success" : "default", "small", "bt"],
+        onClick: I.toggleNumber
+      }, [g("Number")])])]), a("input", {
+        class: `value nativeV ${w ? "isKey" : ""}`,
+        value: N ? n.value : n.key,
+        onInput: (F) => {
+          const S = F.target.value;
+          if (w) {
+            n.key = S;
             return;
           }
-          c.allowFilter && a.isNumber ? a.value = T(k, a.isArray, y.arraySplitSymbol) : a.value = k;
+          m.allowFilter && n.isNumber ? n.value = $(S, n.isArray, v.arraySplitSymbol) : n.value = S;
         }
-      }, null), n("div", {
+      }, null), a("div", {
         class: "surSlot"
-      }, [s < t.depth ? !C && n("button", {
+      }, [u < t.depth ? !w && (r.newChild ? r.newChild(I) : a("button", {
         class: ["success", "bt"],
-        onClick: () => {
-          S && (a.value = [], a.isArray = void 0), a.value.push({
-            rId: t.randomFun(),
-            key: "",
-            value: ""
-          });
-        }
-      }, [t.newChildTxt(a)]) : null])])]), n("div", {
+        onClick: I.addChild
+      }, [t.newChildTxt(n)])) : null])])]), a("div", {
         class: "btn"
-      }, [n("button", {
+      }, [r.rowActions ? r.rowActions(I) : a(k, null, [a("button", {
         class: ["success", "bt"],
-        disabled: g !== A.length - 1,
-        onClick: () => {
-          l.push({
-            rId: t.randomFun(),
-            key: "",
-            value: ""
-          });
-        }
-      }, [m("+")]), n("button", {
+        disabled: !I.isLast,
+        onClick: I.addItem
+      }, [g("+")]), a("button", {
         class: ["danger", "bt"],
-        onClick: () => {
-          if (l.splice(g, 1), l.length < 1) {
-            if (i === void 0) return b([]);
-            const I = e.value.findIndex((k) => k.rId === i?.rId);
-            s < 1 ? e.value.splice(I, 1, {
-              ...i,
-              value: ""
-            }) : i.value = "";
-          }
-        }
-      }, [m("-")])]), Array.isArray(a.value) && u(a.value, s + 1, a)]);
+        onClick: I.removeItem
+      }, [g("-")])])]), Array.isArray(n.value) && A(n.value, u + 1, n)]);
     })]);
-    return N(e, (l) => {
+    L(y, (l) => {
       if (!t.isController) return;
-      const s = b(l);
-      r("update:modelValue", s), r("onMerge", s, h(e.value));
+      const u = h(l);
+      c("update:modelValue", u), c("onMerge", u, x(y.value));
     }, {
       deep: !0
-    }), f({
+    }), p({
       onSet: (l) => {
-        e.value = o(l ?? t.modelValue);
+        y.value = d(l ?? t.modelValue);
       },
-      getResult: (l = "res") => l === "ori" ? h(e.value) : b(e.value)
-    }), () => n("div", {
-      class: t.dyCls ?? "dynamicCascadeForm"
-    }, [n("div", {
-      class: "dyFormList",
+      getResult: (l = "res") => l === "ori" ? x(y.value) : h(y.value)
+    });
+    const o = () => y.value.push({
+      rId: t.randomFun(),
+      key: "",
+      value: ""
+    }), e = () => {
+      y.value = d(t.modelValue), c("onReset");
+    }, s = () => {
+      const l = h(y.value);
+      c("update:modelValue", l), c("onMerge", l, x(y.value)), y.value = d(l);
+    };
+    return () => a("div", {
+      class: `dynamicCascadeForm ${t.dyCls}`
+    }, [a("div", {
+      class: `dyFormList ${y.value.length ? "" : "noObj"}`,
       style: {
-        maxHeight: c.maxHeight
+        maxHeight: m.maxHeight
       }
-    }, [u(e.value)]), n("div", {
-      class: "control"
-    }, [!e.value.length && n("button", {
+    }, [A(y.value)]), a("div", {
+      class: `control ${y.value.length ? "" : "noObj"}`
+    }, [!y.value.length && (r.newBtn ? r.newBtn({
+      newItem: o
+    }) : a("button", {
       class: ["success", "bt"],
-      onClick: () => {
-        e.value.push({
-          rId: t.randomFun(),
-          key: "",
-          value: ""
-        });
-      }
-    }, [d.newTxt]), !t.isController && n(x, null, [!c.hideReset && n("button", {
+      onClick: o
+    }, [f.newTxt])), !t.isController && a(k, null, [!m.hideReset && (r.resetBtn ? r.resetBtn({
+      reset: e
+    }) : a("button", {
       class: ["default", "bt"],
-      onClick: () => {
-        e.value = o(t.modelValue), r("onReset");
-      }
-    }, [d.resetTxt]), n("button", {
+      onClick: e
+    }, [f.resetTxt])), r.mergeBtn ? r.mergeBtn({
+      merge: s
+    }) : a("button", {
       class: ["info", "bt"],
-      onClick: () => {
-        const l = b(e.value);
-        r("update:modelValue", l), r("onMerge", l, h(e.value)), e.value = o(l);
-      }
-    }, [d.mergeTxt])])])]);
+      onClick: s
+    }, [f.mergeTxt])])])]);
   }
 });
-function P(t, r = !0) {
-  return t.map((f) => {
-    const d = f;
-    return d.value = $(f.value), r ? O(d) : d;
+function J(t, c = !0) {
+  return t.map((p) => {
+    const r = p;
+    return r.value = K(p.value), c ? D(r) : r;
   });
 }
-function q(t) {
-  const r = () => D(t), f = (e, u) => {
-    r().forEach((l) => {
-      const s = l.key;
-      (!u || u.includes(s)) && (l.disabled = e);
+function Q(t) {
+  const c = () => H(t), p = (o, e) => {
+    c().forEach((s) => {
+      const l = s.key;
+      (!e || e.includes(l)) && (s.disabled = o);
     });
-  }, d = (e, u) => {
-    r().forEach((l) => {
-      const s = l.key;
-      (!u || u.includes(s)) && (l.hidden = e);
+  }, r = (o, e) => {
+    c().forEach((s) => {
+      const l = s.key;
+      (!e || e.includes(l)) && (s.hidden = o);
     });
-  }, c = (e, u) => {
-    const l = r().find((s) => s.key === e);
-    l && (F(l.value) ? l.value.value = u : l.value = u);
+  }, f = (o, e) => {
+    const s = c().find((l) => l.key === o);
+    s && (T(s.value) ? s.value.value = e : s.value = e);
   };
-  return { setDisabled: f, setHidden: d, setValue: c, setValues: (e) => {
-    Object.entries(e).forEach(([u, l]) => {
-      c(u, l);
+  return { setDisabled: p, setHidden: r, setValue: f, setValues: (o) => {
+    Object.entries(o).forEach(([e, s]) => {
+      f(e, s);
     });
-  }, getValue: (e) => r().find((u) => u.key === e), getValues: (e) => {
-    const u = e && e.length ? new Set(e) : null;
-    return r().reduce((l, s) => {
-      const i = s.key;
-      if (!u || u.has(i)) {
-        const a = F(s.value) ? s.value.value : s.value;
-        l[i] = a;
+  }, getValue: (o) => c().find((e) => e.key === o), getValues: (o) => {
+    const e = o && o.length ? new Set(o) : null;
+    return c().reduce((s, l) => {
+      const u = l.key;
+      if (!e || e.has(u)) {
+        const i = T(l.value) ? l.value.value : l.value;
+        s[u] = i;
       }
-      return l;
+      return s;
     }, {});
-  }, onReset: (e = null) => {
-    r().forEach((u) => {
-      F(u.value) ? u.value.value = e : u.value = e;
+  }, onReset: (o = null) => {
+    c().forEach((e) => {
+      T(e.value) ? e.value.value = o : e.value = o;
+    });
+  }, setItem: (o, e) => {
+    c().forEach((s) => {
+      if (s.key === o) {
+        const { key: l, ...u } = e;
+        Object.assign(s, u);
+      }
+    });
+  }, setItems: (o) => {
+    const e = new Map(o);
+    c().forEach((s) => {
+      const l = e.get(s.key);
+      if (l) {
+        const { key: u, ...i } = l;
+        Object.assign(s, i);
+      }
+    });
+  }, updateKeys: (o) => {
+    const e = new Map(o);
+    c().forEach((s) => {
+      const l = e.get(s.key);
+      l && (s.key = l);
     });
   } };
 }
-const _ = {
+const U = {
   install(t) {
-    t.component("DynamicInput", H), t.component("DynamicCascadeInput", z);
+    t.component("DynamicInput", P), t.component("DynamicCascadeInput", q);
   }
 };
 export {
-  z as DynamicCascadeInput,
-  H as DynamicInput,
-  _ as DynamicInputPlugin,
-  q as useDyForm,
-  P as useReactiveForm
+  q as DynamicCascadeInput,
+  P as DynamicInput,
+  U as DynamicInputPlugin,
+  Q as useDyForm,
+  J as useReactiveForm
 };