@form-create/component-elm-group 2.5.37 → 2.6.0

package/dist/index.es.js

@@ -0,0 +1,365 @@
+/*!
+ * FormCreate 低代码表单渲染器
+ * @form-create/component-elm-group v2.6.0
+ * (c) 2018-2024 xaboy
+ * Github https://github.com/xaboy/form-create
+ * Site https://form-create.com/
+ * Released under the MIT License.
+ */
+(function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode('._fc-group{display:flex;min-height:42px;justify-content:center;flex-direction:column}._fc-group-disabled ._fc-group-btn,._fc-group-disabled ._fc-group-add{cursor:not-allowed}._fc-group-handle{display:flex;flex-direction:row;position:absolute;bottom:-15px;right:30px;border-radius:15px;border:1px dashed #d9d9d9;padding:3px 8px;background-color:#fff}._fc-group-btn{cursor:pointer}._fc-group-idx{position:absolute;bottom:-15px;left:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#eee;border-radius:15px;font-weight:700}._fc-group-handle ._fc-group-btn+._fc-group-btn{margin-left:7px}._fc-group-container{position:relative;display:flex;flex-direction:column;border:1px dashed #d9d9d9;padding:20px 20px 25px;margin:5px 5px 25px;border-radius:5px}._fc-group-arrow{position:relative;width:20px;height:20px}._fc-group-arrow:before{content:"";position:absolute;top:8px;left:5px;width:9px;height:9px;border-left:2px solid #999;border-top:2px solid #999}._fc-group-arrow:before{transform:rotate(45deg)}._fc-group-arrow._fc-group-down{transform:rotate(180deg)}._fc-group-plus-minus{width:20px;height:20px;position:relative;cursor:pointer}._fc-group-plus-minus:before,._fc-group-plus-minus:after{content:"";position:absolute;top:50%;left:50%;width:60%;height:2px;background-color:#409eff;transform:translate(-50%,-50%)}._fc-group-plus-minus:before{transform:translate(-50%,-50%) rotate(90deg)}._fc-group-plus-minus._fc-group-minus:before{display:none}._fc-group-plus-minus._fc-group-minus:after{background-color:#f56c6c}._fc-group-add{cursor:pointer;width:25px;height:25px;border:1px solid rgb(64 158 255 / 50%);border-radius:15px}._fc-group-add._fc-group-plus-minus:before,._fc-group-add._fc-group-plus-minus:after{width:50%}')),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+var g = Object.defineProperty;
+var p = Object.getOwnPropertySymbols;
+var _ = Object.prototype.hasOwnProperty, $ = Object.prototype.propertyIsEnumerable;
+var m = (e, t, s) => t in e ? g(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, h = (e, t) => {
+  for (var s in t || (t = {}))
+    _.call(t, s) && m(e, s, t[s]);
+  if (p)
+    for (var s of p(t))
+      $.call(t, s) && m(e, s, t[s]);
+  return e;
+};
+import v from "vue";
+const c = {
+  type(e, t) {
+    return Object.prototype.toString.call(e) === "[object " + t + "]";
+  },
+  Undef(e) {
+    return e == null;
+  },
+  Element(e) {
+    return typeof e == "object" && e !== null && e.nodeType === 1 && !c.Object(e);
+  },
+  trueArray(e) {
+    return Array.isArray(e) && e.length > 0;
+  },
+  Function(e) {
+    const t = this.getType(e);
+    return t === "Function" || t === "AsyncFunction";
+  },
+  getType(e) {
+    const t = Object.prototype.toString.call(e);
+    return /^\[object (.*)\]$/.exec(t)[1];
+  },
+  empty(e) {
+    return e == null || Array.isArray(e) && Array.isArray(e) && !e.length ? !0 : typeof e == "string" && !e;
+  }
+};
+["Date", "Object", "String", "Boolean", "Array", "Number"].forEach((e) => {
+  c[e] = function(t) {
+    return c.type(t, e);
+  };
+});
+function j(e, t) {
+  return {}.hasOwnProperty.call(e, t);
+}
+function a(e, t, s) {
+  v.set(e, t, s);
+}
+function f(e, t = {}, s) {
+  let i = !1;
+  for (let n in t)
+    if (Object.prototype.hasOwnProperty.call(t, n)) {
+      let r = t[n];
+      if ((i = Array.isArray(r)) || c.Object(r)) {
+        let l = e[n] === void 0;
+        if (i)
+          i = !1, l && a(e, n, []);
+        else if (r._clone && s !== void 0) {
+          a(e, n, r._clone());
+          continue;
+        } else
+          l && a(e, n, {});
+        e[n] = f(e[n], r, s);
+      } else
+        a(e, n, r), c.Undef(r) || (c.Undef(r.__json) || (e[n].__json = r.__json), c.Undef(r.__origin) || (e[n].__origin = r.__origin));
+    }
+  return e;
+}
+function y(e) {
+  return f({}, { value: e }).value;
+}
+const O = Object.assign || function(e) {
+  for (let t, s = 1; s < arguments.length; s++)
+    for (let i in t = arguments[s], t)
+      Object.prototype.hasOwnProperty.call(t, i) && a(e, i, t[i]);
+  return e;
+};
+function A() {
+  return O.apply(this, arguments);
+}
+const E = "fcGroup", S = {
+  name: E,
+  props: {
+    field: String,
+    rule: [Array, Object],
+    rules: Array,
+    expand: Number,
+    options: Object,
+    formCreateInject: {
+      type: Object,
+      required: !0
+    },
+    button: {
+      type: Boolean,
+      default: !0
+    },
+    max: {
+      type: Number,
+      default: 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    sortBtn: {
+      type: Boolean,
+      default: !0
+    },
+    defaultValue: Object,
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    syncDisabled: {
+      type: Boolean,
+      default: !0
+    },
+    onBeforeRemove: {
+      type: Function,
+      default: () => {
+      }
+    },
+    onBeforeAdd: {
+      type: Function,
+      default: () => {
+      }
+    },
+    parse: Function
+  },
+  data() {
+    return {
+      len: 0,
+      cacheRule: {},
+      cacheValue: {},
+      sort: [],
+      type: void 0
+    };
+  },
+  computed: {
+    formRule() {
+      return this.rules ? this.rules : this.rule ? Array.isArray(this.rule) ? this.rule : [this.rule] : [];
+    }
+  },
+  watch: {
+    cacheRule: {
+      handler(e) {
+        this.sort = Object.keys(e);
+      },
+      immediate: !0
+    },
+    formRule: {
+      handler(e, t) {
+        Object.keys(this.cacheRule).forEach((s) => {
+          const i = this.cacheRule[s];
+          if (i.$f) {
+            const n = i.$f.formData();
+            if (e === t)
+              i.$f.deferSyncValue(() => {
+                f(i.rule, e), i.$f.setValue(n);
+              }, !0);
+            else {
+              const r = i.$f.formData();
+              i.$f.once("reloading", () => {
+                i.$f.setValue(r);
+              }), i.rule = y(e);
+            }
+          }
+        });
+      },
+      deep: !0
+    },
+    expand(e) {
+      let t = e - this.value.length;
+      t > 0 && this.expandRule(t);
+    },
+    value(e, t) {
+      e = e || [];
+      let s = this.sort, i = s.length, n = i - e.length;
+      if (n < 0) {
+        for (let r = n; r < 0; r++)
+          this.addRule(e.length + r);
+        this.sort = Object.keys(this.cacheRule);
+        for (let r = 0; r < i; r++)
+          this.setValue(s[r], e[r]);
+      } else {
+        if (n > 0) {
+          for (let r = 0; r < n; r++)
+            this.removeRule(s[i - r - 1]);
+          this.sort = Object.keys(this.cacheRule);
+        }
+        e.forEach((r, l) => {
+          this.setValue(s[l], e[l]);
+        });
+      }
+    }
+  },
+  methods: {
+    _value(e) {
+      return e && j(e, this.field) ? e[this.field] : e;
+    },
+    cache(e, t) {
+      this.cacheValue[e] = JSON.stringify(t);
+    },
+    input(e) {
+      this.$emit("input", e), this.$emit("change", e);
+    },
+    formData(e, t) {
+      const s = this.cacheRule, i = this.sort;
+      if (i.filter((r) => s[r].$f).length !== i.length)
+        return;
+      const n = i.map((r) => {
+        const l = e === r ? t : h({}, this.cacheRule[r].$f.form), u = this.field ? l[this.field] || null : l;
+        return this.cache(r, u), u;
+      });
+      this.input(n);
+    },
+    setValue(e, t) {
+      const s = this.field, i = this.cacheRule[e].$f;
+      s && (t = { [s]: this._value(t) }), this.cacheValue[e] !== JSON.stringify(s ? t[s] : t) && (this.cache(e, t), i && i.coverValue(t || {}));
+    },
+    addRule(e, t) {
+      const s = this.formCreateInject.form.copyRules(this.formRule), i = this.options ? h({}, this.options) : {
+        submitBtn: !1,
+        resetBtn: !1
+      };
+      if (this.defaultValue) {
+        i.formData || (i.formData = {});
+        const n = y(this.defaultValue);
+        A(i.formData, this.field ? { [this.field]: n } : n);
+      }
+      this.parse && this.parse({ rule: s, options: i, index: this.sort.length }), this.$set(this.cacheRule, ++this.len, { rule: s, options: i }), t && this.$nextTick(() => this.$emit("add", s, Object.keys(this.cacheRule).length - 1));
+    },
+    add$f(e, t, s) {
+      this.cacheRule[t].$f = s, this.$nextTick(() => {
+        this.$emit("itemMounted", s, Object.keys(this.cacheRule).indexOf(t));
+      });
+    },
+    removeRule(e, t) {
+      const s = Object.keys(this.cacheRule).indexOf(e);
+      this.$delete(this.cacheRule, e), this.$delete(this.cacheValue, e), t && this.$nextTick(() => this.$emit("remove", s));
+    },
+    add(e) {
+      this.disabled || this.onBeforeAdd(this.value) === !1 || this.addRule(e, !0);
+    },
+    del(e, t) {
+      if (this.disabled || this.onBeforeRemove(this.value, e) === !1)
+        return;
+      this.removeRule(t, !0);
+      const s = [...this.value];
+      s.splice(e, 1), this.input(s);
+    },
+    addIcon(e) {
+      return /* @__PURE__ */ React.createElement("div", { class: "_fc-group-btn _fc-group-plus-minus", "on-click": this.add });
+    },
+    delIcon(e, t) {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          class: "_fc-group-btn _fc-group-plus-minus _fc-group-minus",
+          onClick: () => this.del(e, t)
+        }
+      );
+    },
+    sortUpIcon(e) {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          class: "_fc-group-btn _fc-group-arrow _fc-group-up",
+          onClick: () => this.changeSort(e, -1)
+        }
+      );
+    },
+    sortDownIcon(e) {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          class: "_fc-group-btn _fc-group-arrow _fc-group-down",
+          onClick: () => this.changeSort(e, 1)
+        }
+      );
+    },
+    changeSort(e, t) {
+      const s = this.sort[e];
+      this.$set(this.sort, e, this.sort[e + t]), this.sort[e + t] = s, this.formData(0);
+    },
+    makeIcon(e, t, s) {
+      if (this.$scopedSlots.button)
+        return this.$scopedSlots.button({
+          total: e,
+          index: t,
+          vm: this,
+          key: s,
+          del: () => this.del(t, s),
+          add: this.add
+        });
+      const i = [];
+      return (!this.max || e < this.max) && e === t + 1 && i.push(this.addIcon(s)), e > this.min && i.push(this.delIcon(t, s)), this.sortBtn && t && i.push(this.sortUpIcon(t)), this.sortBtn && t !== e - 1 && i.push(this.sortDownIcon(t)), i;
+    },
+    emitEvent(e, t, s, i) {
+      this.$emit(e, ...t, this.cacheRule[i].$f, s);
+    },
+    expandRule(e) {
+      for (let t = 0; t < e; t++)
+        this.value.push(this.field ? null : {});
+    }
+  },
+  created() {
+    this.type = this.formCreateInject.form.$form();
+    const e = (this.expand || 0) - this.value.length;
+    e > 0 && this.expandRule(e);
+    for (let t = 0; t < this.value.length; t++)
+      this.addRule(t);
+  },
+  render() {
+    const e = this.sort, t = this.button, s = this.type, i = this.disabled, n = e.length === 0 ? this.$scopedSlots.default ? this.$scopedSlots.default({
+      vm: this,
+      add: this.add
+    }) : /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: "a_def",
+        class: "_fc-group-plus-minus _fc-group-add",
+        "on-click": this.add
+      }
+    ) : e.map((r, l) => {
+      const { rule: u, options: b } = this.cacheRule[r], d = t && !i ? this.makeIcon(e.length, l, r) : [];
+      return /* @__PURE__ */ React.createElement("div", { class: "_fc-group-container", key: r }, /* @__PURE__ */ React.createElement(
+        s,
+        {
+          key: r,
+          on: {
+            "update:value": (o) => this.formData(r, o),
+            "emit-event": (o, ...R) => this.emitEvent(o, R, l, r),
+            input: (o) => this.add$f(l, r, o)
+          },
+          props: {
+            disabled: i,
+            inFor: !0,
+            value: this.field ? { [this.field]: this._value(this.value[l]) } : this.value[l],
+            rule: u,
+            option: b,
+            extendOption: !0
+          }
+        }
+      ), /* @__PURE__ */ React.createElement("div", { class: "_fc-group-idx" }, l + 1), d.length ? /* @__PURE__ */ React.createElement("div", { class: "_fc-group-handle" }, d) : null);
+    });
+    return /* @__PURE__ */ React.createElement("div", { key: "con", class: "_fc-group " + (i ? "_fc-group-disabled" : "") }, n);
+  }
+};
+export {
+  S as default
+};