@cldemo/ui-kit 1.0.0

package/buildLibs/utils/Web/ClXeditable.js

@@ -0,0 +1,593 @@
+import { defineComponent as Oe, useAttrs as Be, useSlots as De, ref as S, reactive as ie, computed as g, watch as oe, onMounted as Le, nextTick as _, onUnmounted as Fe, resolveComponent as k, openBlock as o, createBlock as E, withCtx as H, createElementVNode as I, createVNode as j, createElementBlock as f, renderSlot as ue, mergeProps as U, Fragment as O, normalizeStyle as K, toDisplayString as re, createCommentVNode as Me, normalizeClass as L } from "vue";
+import { C as s } from "../Shared/base-PQGakkrl.js";
+import { C as F } from "../Shared/index-BnerInzC.js";
+import { R as ce } from "../Shared/resize-kOWxHVSP.js";
+import { u as Pe } from "../Shared/language-DxTlvFs2.js";
+import { _ as Ne } from "../Shared/Popup.vue_vue_type_script_setup_true_lang-CbaTn8Yz.js";
+const ze = { class: "xeditable-content" }, He = { class: "xeditable-body" }, je = { class: "xeditable-form" }, Ae = {
+  key: 1,
+  class: "xeditable-element"
+}, Je = ["id"], Re = {
+  key: 0,
+  class: "xeditable-errmsg"
+}, Ye = /* @__PURE__ */ Oe({
+  name: "ClXeditable",
+  __name: "Index",
+  props: {
+    type: {
+      type: String,
+      required: !0
+      // input | select | textarea | radio | checkbox | selectTag | inputTag | dateTime | customHtml
+    },
+    className: {
+      type: String,
+      default: ""
+    },
+    classNameLabel: {
+      type: String,
+      default: ""
+    },
+    value: [String, Number],
+    label: String,
+    subUnitOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    subUnitList: {
+      type: Array,
+      default: () => []
+    },
+    submitCallback: Function,
+    isUseOnSubmitCheck: {
+      type: Boolean,
+      default: !1
+    },
+    appendContainer: {
+      type: String,
+      default: ""
+    },
+    isCheckValidate: {
+      type: Boolean,
+      default: !1
+    },
+    validateRules: {
+      type: Array,
+      default: () => [{ r: "required" }]
+    },
+    checkValidateCallback: Function,
+    isUseEllipsis: {
+      type: Boolean,
+      default: !1
+    },
+    classNameEllipsis: {
+      type: String,
+      default: ""
+    },
+    isAutoTooltip: {
+      type: Boolean,
+      default: !0
+    },
+    clickEditPoint: {
+      type: String,
+      default: "value"
+      // value icon
+    },
+    isShowEditValue: {
+      type: Boolean,
+      default: !0
+    },
+    isShowEditIcon: {
+      type: Boolean,
+      default: !1
+    },
+    editIcon: {
+      type: String,
+      default: "clIconFont clIcon-edit"
+    },
+    isSubmitCleanValue: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["onSubmit", "onChangeOpen"],
+  setup(c, { expose: de, emit: me }) {
+    const a = c, X = me, M = Be(), pe = De(), { optPageLanguage: G, getPageLanguage: fe } = Pe();
+    fe("xEditable");
+    const b = S(null), V = S(null), v = S(null), B = S(null), Q = S(null), W = S(null), l = ie({
+      keyIndex: `xeditable-${s.getRandom(8)}`,
+      showText: "",
+      subUnitValue: "",
+      subUnitValueType: "",
+      showMsg: "",
+      isShowEmpty: !1,
+      isBtnOperateCenter: !1
+    }), u = S({}), w = S([]), x = ie({
+      status: 0,
+      // 1:初始，2:过渡中 0:结束
+      startColor: "#FFFF80",
+      endColor: "rgba(0, 0, 0, 0)"
+    }), p = {
+      lastValue: "",
+      runStep: "",
+      resizeEventCustomHtml: null,
+      resizeEventErrMsg: null
+    }, Y = g(() => {
+      const { type: e } = a;
+      return e === "input" || e === "select";
+    }), A = g(() => !s.isUndefined(pe.iconLabel)), be = g(() => {
+      let t = ["panel-xeditable"].join(" ");
+      return s.isEmpty(a.className) || (t += " " + a.className), t;
+    }), ve = g(() => {
+      const e = ["xeditable-value"];
+      return l.isShowEmpty && e.push("xeditable-empty"), (a.isShowEditIcon || A.value) && e.push("xeditable-edit-icon"), e.join(" ");
+    }), ye = g(() => {
+      const e = ["xeditable-value-label"], { clickEditPoint: t } = a;
+      return t === "value" || l.isShowEmpty ? e.push("dropdownLayer-arrow-anchorPoint") : e.push("xeditable-click-invalid"), e.join(" ");
+    }), ke = g(() => {
+      const e = ["xeditable-value-editIcon", "dropdownLayer-arrow-anchorPoint"];
+      return A.value && e.push("xeditable-value-editIcon-slot"), e.join(" ");
+    }), ge = g(() => {
+      const e = ["xeditable-ellipsis"];
+      return e.push(a.classNameEllipsis), x.status === 2 && e.push("xeditable-value-hlight"), e.join(" ");
+    }), Ee = g(() => {
+      const e = ["xeditable-dropdown"];
+      return e.push(`xeditable-dropdown-${a.type}`), e.join(" ");
+    }), he = g(() => {
+      const e = {};
+      return l.isBtnOperateCenter && (e["text-align"] = "center"), e;
+    }), Z = g(() => {
+      const e = {};
+      switch (x.status) {
+        case 1:
+          e["background-color"] = x.startColor;
+          break;
+        case 2:
+          e["background-color"] = x.endColor;
+          break;
+      }
+      return e;
+    }), Ce = (e) => {
+      const t = F.getElementData(M);
+      X("onSubmit", e, t);
+    }, xe = (e) => {
+      _(() => {
+        const t = F.getElementData(M);
+        X("onChangeOpen", e, t);
+      });
+    }, J = () => {
+      b.value && b.value.setOpen(!1), B.value && B.value.loadStop();
+    }, ee = (e) => {
+      l.showMsg = s.isEmpty(e) ? "" : e, _(() => {
+        b.value && b.value.calculationPosition();
+      });
+    }, te = () => {
+      let e = !1;
+      switch (a.type) {
+        case "select":
+          s.isBoolean(u.value.multiple) && (e = u.value.multiple);
+          break;
+        case "radio":
+          e = !1;
+          break;
+        case "checkbox":
+          e = !0;
+          break;
+        case "selectTag":
+          e = !0;
+          break;
+        case "inputTag":
+          s.isBoolean(u.value.multiple) && (e = u.value.multiple);
+          break;
+      }
+      return e;
+    }, le = () => {
+      const e = s.getJsonClone(a.subUnitOptions);
+      switch (a.type) {
+        case "input": {
+          let t = "", i = !1, n = 0, r = { isClean: !0 };
+          if (r = s.getJsonMerge(r, e), s.isBoolean(r.isNumber) && (i = r.isNumber), i && (t = "int", s.isNumber(r.decimal) && (n = parseInt(r.decimal), n > 0)))
+            switch (n.toString()) {
+              case "2":
+                t = "float2";
+                break;
+              case "3":
+                t = "float3";
+                break;
+              default:
+                t = "float";
+            }
+          l.subUnitValueType = t, u.value = r;
+          break;
+        }
+        case "select": {
+          let t = { multiple: !1, placeholder: G.value.common.pleaseSelect };
+          t = s.getJsonMerge(t, e), u.value = t;
+          break;
+        }
+        case "textarea": {
+          let t = { isClean: !0 };
+          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = !0;
+          break;
+        }
+        case "radio": {
+          let t = { isInline: !0, name: `${l.keyIndex}-radio` };
+          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = t.isInline;
+          break;
+        }
+        case "checkbox": {
+          let t = { isInline: !1, name: `${l.keyIndex}-checkbox` };
+          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = t.isInline;
+          break;
+        }
+        case "selectTag": {
+          let t = { type: "radio" };
+          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = !0;
+          break;
+        }
+        case "inputTag": {
+          let t = { multiple: !0, isAutofill: !0 };
+          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = !0;
+          break;
+        }
+        case "dateTime": {
+          let t = { isDropdown: !1 };
+          t = s.getJsonMerge(t, e), u.value = t, l.isBtnOperateCenter = !0;
+          break;
+        }
+        case "customHtml": {
+          l.isBtnOperateCenter = !0;
+          break;
+        }
+      }
+    }, R = (e, t) => {
+      let i = !1, n = !1;
+      t && (s.isUndefined(t.label) || (i = !0), s.isUndefined(t.list) || (n = !0));
+      let r = "", y = "", d = "";
+      switch (s.isEmpty(e) || (d = e?.toString()), a.type) {
+        case "input":
+        case "textarea": {
+          if (!i && d && !s.isEmpty(d))
+            if (a.type === "input" && s.isBoolean(u.value.isNumber) && s.isNumber(d)) {
+              const C = l.subUnitValueType === "float" ? u.value.decimal : "";
+              r = s.getValueByFormat(d, l.subUnitValueType, {
+                decimalNum: C
+              });
+            } else
+              r = d;
+          y = d;
+          break;
+        }
+        case "select":
+        case "radio":
+        case "checkbox":
+        case "selectTag":
+        case "inputTag": {
+          const C = n ? t.list : w.value;
+          if (!i && d && !s.isEmpty(d))
+            if (a.type === "inputTag")
+              r = d;
+            else {
+              const T = te(), P = [], q = T ? d.split(",") : [d.toString()], N = s.getJsonByList(C);
+              q.forEach((z) => {
+                s.isExistJsonKey(N, z) && P.push(N[z].name);
+              }), r = P.join(",");
+            }
+          y = d;
+          break;
+        }
+        case "dateTime": {
+          i || (r = d), y = d;
+          break;
+        }
+      }
+      a.isSubmitCleanValue && (y = "", V.value && V.value.reset()), l.showText = i ? t.label.toString() : r, l.subUnitValue = y, l.isShowEmpty = s.isEmpty(l.showText), p.lastValue = l.subUnitValue, n && (w.value = t.list);
+    }, Se = () => {
+      x.status = 1, _(() => {
+        setTimeout(() => {
+          x.status = 2;
+        }, 10), setTimeout(() => {
+          x.status = 0;
+        }, 1500);
+      });
+    }, D = (e) => {
+      if (e.success) {
+        ee(""), V.value && V.value.reset();
+        const t = v.value ? v.value.getValueData() : {};
+        let i = "";
+        const n = {}, r = s.isEmpty(e.data) ? {} : e.data, y = s.isUndefined(r.label);
+        switch (n.label = y ? null : r.label, a.type) {
+          case "input":
+          case "textarea":
+          case "dateTime":
+            i = t.value;
+            break;
+          case "select":
+          case "radio":
+          case "checkbox":
+          case "selectTag":
+          case "inputTag": {
+            if (te() && s.isArray(t)) {
+              const d = [], C = [];
+              t.forEach((T) => {
+                d.push(T.id), C.push(T.name);
+              }), y && (n.label = C.join(",")), i = a.type === "inputTag" ? C.join(",") : d.join(",");
+            } else
+              y && (n.label = t.name || ""), i = a.type === "inputTag" ? t.name || "" : t.id ? t.id.toString() : "";
+            s.isUndefined(r.list) || (n.list = r.list);
+            break;
+          }
+        }
+        n.isResult = !0, p.runStep !== "updateProps" && R(i, n), Se(), J();
+      } else
+        ee(e.msg), _(() => {
+          B.value && B.value.loadStop();
+        });
+    }, Ue = () => {
+      le(), R(a.value, { label: a.label, list: a.subUnitList });
+    };
+    oe(
+      [() => a.value, () => a.label, () => a.subUnitList],
+      ([e, t, i], [n, r, y]) => {
+        e !== n && (p.runStep = "updateProps", R(e, { label: t, list: i }));
+      }
+    ), oe(
+      () => a.subUnitOptions,
+      () => {
+        le();
+      }
+    ), Le(() => {
+      _(() => {
+        Ue();
+      });
+    }), Fe(() => {
+    });
+    const we = async () => {
+      let e = !1;
+      if (a.isCheckValidate) {
+        if (e = await V.value.validate(), a.checkValidateCallback && s.isFunction(a.checkValidateCallback)) {
+          const t = F.getElementData(M), i = $();
+          let n = await a.checkValidateCallback(i, t);
+          n = s.isBoolean(n) ? n : !0, n || (e = !1);
+        }
+      } else
+        e = !0;
+      return e;
+    }, se = () => {
+      let e = !1;
+      return a.submitCallback && s.isFunction(a.submitCallback) && (e = !0), e;
+    }, $ = () => {
+      let e = "";
+      return a.type !== "customHtml" && (e = v.value ? v.value.getValue() : ""), e;
+    }, ae = () => {
+      if (a.submitCallback && se()) {
+        const e = $(), t = F.getElementData(M), i = a.submitCallback(e, t);
+        if (i.then && s.isFunction(i.then))
+          i.then((n) => {
+            D(s.isBoolean(n) ? { success: n } : n);
+          });
+        else {
+          let n = {};
+          s.isUndefined(i) ? n = { success: !0 } : s.isBoolean(i) ? n = { success: i } : s.isObject(i) && s.isBoolean(i.success) ? n = i : n = { success: !1, msg: G.value.submitCallback }, D(n);
+        }
+      }
+    }, Ve = () => {
+      we().then((e) => {
+        if (e)
+          if (a.type === "customHtml")
+            p.runStep = "first", ae();
+          else {
+            const t = $(), i = s.isEmpty(t);
+            t !== p.lastValue || i && l.showText.length > 0 ? (p.runStep = "first", se() ? ae() : (a.isUseOnSubmitCheck || D({ success: !0 }), Ce(t))) : J();
+          }
+        else
+          D({ success: !1 });
+      });
+    }, Te = () => {
+      J();
+    }, h = () => {
+      b.value && (b.value.checkCurrentIsOpen() || b.value.initCompleteOpen());
+    }, _e = (e) => {
+      e ? (p.lastValue = l.subUnitValue, _(() => {
+        a.type === "customHtml" ? (h(), p.resizeEventCustomHtml = new ce({
+          element: Q.value,
+          callback: () => {
+            b.value && b.value.calculationPosition();
+          }
+        })) : p.resizeEventErrMsg = new ce({
+          element: W.value,
+          callback: () => {
+            b.value && b.value.calculationPosition();
+          }
+        });
+      })) : (l.subUnitValue = p.lastValue, p.resizeEventCustomHtml && (p.resizeEventCustomHtml.destroy(), p.resizeEventCustomHtml = null), p.resizeEventErrMsg && (p.resizeEventErrMsg.destroy(), p.resizeEventErrMsg = null)), xe(e);
+    }, Ie = (e) => {
+      const t = F.getParent(e.target, ".xeditable-click-invalid", e.currentTarget, !1);
+      s.isUndefined(t) || (e.preventDefault(), e.stopPropagation());
+    };
+    return de({
+      setOnSubmitResult: (e) => {
+        a.isUseOnSubmitCheck && s.isUndefined(a.submitCallback) && D(e);
+      }
+    }), (e, t) => {
+      const i = k("cl-ellipsis"), n = k("cl-input"), r = k("cl-textarea"), y = k("cl-select"), d = k("cl-radio"), C = k("cl-checkbox"), T = k("cl-select-tag"), P = k("cl-input-tag"), q = k("cl-datetime"), N = k("cl-form-validate"), z = k("cl-form"), ne = k("cl-button");
+      return o(), E(Ne, {
+        ref_key: "refElDropdownLayer",
+        ref: b,
+        classParent: be.value,
+        classText: c.classNameLabel,
+        classDropDown: Ee.value,
+        dropdownArrowPos: "center",
+        dropDownPos: "up",
+        isUseDropdownArrow: !0,
+        isCloseDestroy: !0,
+        isInitDelayComplete: !0,
+        appendContainer: c.appendContainer,
+        onOnChangeOpen: _e,
+        transitionEnter: "animated fadeIn",
+        transitionLeave: "animated fadeOut"
+      }, {
+        label: H(() => [
+          I("div", {
+            class: L(ve.value)
+          }, [
+            c.isShowEditValue ? (o(), f("div", {
+              key: 0,
+              class: L(ye.value),
+              onClick: t[0] || (t[0] = (m) => Ie(m))
+            }, [
+              c.isUseEllipsis && l.showText.length > 0 ? (o(), E(i, {
+                key: 0,
+                className: ge.value,
+                isAutoTooltip: c.isAutoTooltip,
+                text: l.showText,
+                style: K(Z.value)
+              }, null, 8, ["className", "isAutoTooltip", "text", "style"])) : (o(), f("span", {
+                key: 1,
+                class: L({ "xeditable-value-hlight": x.status === 2 }),
+                style: K(Z.value)
+              }, re(l.showText), 7))
+            ], 2)) : (o(), f(O, { key: 1 }, [], 64)),
+            c.isShowEditIcon || A.value ? (o(), f("div", {
+              key: 2,
+              class: L(ke.value)
+            }, [
+              ue(e.$slots, "iconLabel", {}, () => [
+                I("i", {
+                  class: L(c.editIcon)
+                }, null, 2)
+              ])
+            ], 2)) : (o(), f(O, { key: 3 }, [], 64))
+          ], 2)
+        ]),
+        dropdown: H(() => [
+          I("div", ze, [
+            I("div", He, [
+              I("div", je, [
+                j(z, {
+                  ref_key: "refElForm",
+                  ref: V,
+                  isScrollToErr: !1
+                }, {
+                  default: H(() => [
+                    c.type === "customHtml" ? (o(), f("div", {
+                      key: 0,
+                      ref_key: "refElCustom",
+                      ref: Q,
+                      class: "xeditable-custom"
+                    }, [
+                      ue(e.$slots, "customForm")
+                    ], 512)) : (o(), f("div", Ae, [
+                      j(N, {
+                        isCheck: c.isCheckValidate,
+                        checkValue: l.subUnitValue,
+                        rules: c.validateRules,
+                        msgElementId: Y.value ? `#${l.keyIndex}_errmsg` : ""
+                      }, {
+                        default: H(() => [
+                          c.type === "input" ? (o(), E(n, U({
+                            key: 0,
+                            ref_key: "refElFormEdit",
+                            ref: v,
+                            value: l.subUnitValue,
+                            "onUpdate:value": t[1] || (t[1] = (m) => l.subUnitValue = m)
+                          }, u.value, { onOnInit: h }), null, 16, ["value"])) : c.type === "textarea" ? (o(), E(r, U({
+                            key: 1,
+                            ref_key: "refElFormEdit",
+                            ref: v,
+                            value: l.subUnitValue,
+                            "onUpdate:value": t[2] || (t[2] = (m) => l.subUnitValue = m)
+                          }, u.value, { onOnInit: h }), null, 16, ["value"])) : c.type === "select" ? (o(), E(y, U({
+                            key: 2,
+                            ref_key: "refElFormEdit",
+                            ref: v,
+                            value: l.subUnitValue,
+                            "onUpdate:value": t[3] || (t[3] = (m) => l.subUnitValue = m),
+                            list: w.value
+                          }, u.value, { onOnInit: h }), null, 16, ["value", "list"])) : c.type === "radio" ? (o(), E(d, U({
+                            key: 3,
+                            ref_key: "refElFormEdit",
+                            ref: v,
+                            value: l.subUnitValue,
+                            "onUpdate:value": t[4] || (t[4] = (m) => l.subUnitValue = m),
+                            list: w.value
+                          }, u.value, { onOnInit: h }), null, 16, ["value", "list"])) : c.type === "checkbox" ? (o(), E(C, U({
+                            key: 4,
+                            ref_key: "refElFormEdit",
+                            ref: v,
+                            value: l.subUnitValue,
+                            "onUpdate:value": t[5] || (t[5] = (m) => l.subUnitValue = m),
+                            list: w.value
+                          }, u.value, { onOnInit: h }), null, 16, ["value", "list"])) : c.type === "selectTag" ? (o(), E(T, U({
+                            key: 5,
+                            ref_key: "refElFormEdit",
+                            ref: v,
+                            value: l.subUnitValue,
+                            "onUpdate:value": t[6] || (t[6] = (m) => l.subUnitValue = m),
+                            list: w.value
+                          }, u.value, { onOnInit: h }), null, 16, ["value", "list"])) : c.type === "inputTag" ? (o(), E(P, U({
+                            key: 6,
+                            ref_key: "refElFormEdit",
+                            ref: v,
+                            value: l.subUnitValue,
+                            "onUpdate:value": t[7] || (t[7] = (m) => l.subUnitValue = m),
+                            list: w.value
+                          }, u.value, { onOnInit: h }), null, 16, ["value", "list"])) : c.type === "dateTime" ? (o(), E(q, U({
+                            key: 7,
+                            ref_key: "refElFormEdit",
+                            ref: v,
+                            value: l.subUnitValue,
+                            "onUpdate:value": t[8] || (t[8] = (m) => l.subUnitValue = m)
+                          }, u.value, { onOnInit: h }), null, 16, ["value"])) : (o(), f(O, { key: 8 }, [], 64))
+                        ]),
+                        _: 1
+                      }, 8, ["isCheck", "checkValue", "rules", "msgElementId"])
+                    ]))
+                  ]),
+                  _: 3
+                }, 512)
+              ]),
+              I("div", {
+                class: "xeditable-operate",
+                style: K(he.value)
+              }, [
+                j(ne, {
+                  ref_key: "refElSubmit",
+                  ref: B,
+                  icon: "clIconFont clIcon-check1",
+                  isShowLoad: !0,
+                  size: "small",
+                  loadPos: "zoom-out",
+                  loadTheme: "rotaryLine",
+                  isShowBackDrop: !0,
+                  onOnClick: Ve
+                }, null, 512),
+                j(ne, {
+                  icon: "clIconFont clIcon-close",
+                  size: "small",
+                  color: "grayLight",
+                  onOnClick: Te
+                })
+              ], 4)
+            ]),
+            Y.value ? (o(), f(O, { key: 0 }, [
+              c.isCheckValidate ? (o(), f("div", {
+                key: 0,
+                ref_key: "refElErrMsg",
+                ref: W,
+                id: `${l.keyIndex}_errmsg`,
+                class: "xeditable-errmsg"
+              }, null, 8, Je)) : (o(), f(O, { key: 1 }, [
+                l.showMsg.length > 0 ? (o(), f("div", Re, re(l.showMsg), 1)) : (o(), f(O, { key: 1 }, [], 64))
+              ], 64))
+            ], 64)) : Me("", !0)
+          ])
+        ]),
+        _: 3
+      }, 8, ["classParent", "classText", "classDropDown", "appendContainer"]);
+    };
+  }
+});
+export {
+  Ye as default
+};
+//# sourceMappingURL=ClXeditable.js.map