@aplus-frontend/ui 0.0.1-beta.6 → 0.0.1-beta.8

package/es/src/pro-table/components/editable/editable-cell.vue2.mjs

@@ -1,4 +1,380 @@
-import f from "./editable-cell.vue.mjs";
+import { defineComponent as he, ref as v, computed as f, unref as l, watchEffect as _, nextTick as ve, toRaw as ge, createVNode as m, withDirectives as q, vShow as Ce, mergeProps as be, resolveDirective as ye } from "vue";
+import { FormOutlined as z, CloseOutlined as G, CheckOutlined as H } from "@ant-design/icons-vue";
+import { CellComponent as J } from "./cell-component.mjs";
+import "../../../config-provider/index.mjs";
+import { useTableContext as pe } from "../../hooks/use-table-context.mjs";
+import ke from "../../directives/click-outside.mjs";
+import { createPlaceholderMessage as Q } from "./helper.mjs";
+import { isBoolean as p, set as U, pick as Re } from "lodash-unified";
+import { treeToList as Ve } from "../../../utils/tree.mjs";
+import { Spin as X } from "ant-design-vue";
+import { parseRowKey as we } from "../../helper.mjs";
+import { isType as P, isFunction as k, isArray as I } from "@fruits-chain/utils";
+import "../style/editable-cell.css";
+import { useLocale as xe } from "../../../config-provider/hooks/use-locale.mjs";
+import { useNamespace as Ee } from "../../../config-provider/hooks/use-namespace.mjs";
+const Le = /* @__PURE__ */ he({
+  name: "EditableCell",
+  components: {
+    FormOutlined: z,
+    CloseOutlined: G,
+    CheckOutlined: H,
+    CellComponent: J,
+    Spin: X
+  },
+  directives: {
+    clickOutside: ke
+  },
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object],
+      default: ""
+    },
+    record: {
+      type: Object
+    },
+    column: {
+      type: Object,
+      default: () => ({})
+    },
+    index: {
+      type: Number,
+      required: !0
+    }
+  },
+  setup(n) {
+    const a = pe(), R = v(!1), j = v(), D = v(!1), g = v(""), N = v([]), u = v(n.value), B = v(n.value), T = v(!1), {
+      t: $
+    } = xe(), Y = Ee("editable-cell"), h = f(() => {
+      var e;
+      return ((e = n.column) == null ? void 0 : e.editComponent) || "Input";
+    }), Z = f(() => {
+      var e;
+      return (e = n.column) == null ? void 0 : e.editRule;
+    }), ee = f(() => l(g) && l(D)), L = f(() => {
+      const e = l(h);
+      return ["Checkbox", "Switch"].includes(e);
+    }), V = f(() => {
+      var S;
+      const e = l(L);
+      let t = ((S = n.column) == null ? void 0 : S.editComponentProps) ?? {};
+      const {
+        checkedValue: i,
+        unCheckedValue: o
+      } = t, c = e ? "checked" : "value", s = l(u);
+      let r = s;
+      e && (typeof i < "u" ? r = s === i ? i : o : typeof o < "u" ? r = s === o ? o : i : r = P("Number")(s) || p(s) ? s : !!s);
+      const {
+        record: d,
+        column: b,
+        index: x
+      } = n;
+      k(t) && (t = t({
+        text: s,
+        record: d,
+        column: b,
+        index: x
+      }) ?? {}), t.onChangeTemp = t.onChange, delete t.onChange;
+      const E = l(h), y = {};
+      return E === "ApiSelect" && (y.cache = !0), te(d, b, r), {
+        size: "small",
+        getPopupContainer: () => l(a == null ? void 0 : a.wrapRef.value) ?? document.body,
+        placeholder: Q(l(h), $),
+        ...y,
+        ...t,
+        [c]: r,
+        disabled: l(F)
+      };
+    });
+    function te(e, t, i) {
+      if (!e)
+        return !1;
+      const {
+        key: o,
+        dataIndex: c
+      } = t;
+      if (!o && !c)
+        return;
+      U(e, c || o, i);
+    }
+    const F = f(() => {
+      const {
+        editDynamicDisabled: e
+      } = n.column;
+      let t = !1;
+      if (p(e) && (t = e), k(e)) {
+        const {
+          record: i
+        } = n;
+        t = e({
+          record: i,
+          currentValue: u.value
+        });
+      }
+      return t;
+    }), ne = f(() => {
+      var s;
+      const {
+        editValueMap: e
+      } = n.column, t = l(u);
+      if (e && k(e))
+        return e(t);
+      const i = l(h);
+      if (!i.includes("Select") && !i.includes("Radio"))
+        return t;
+      const c = (((s = l(V)) == null ? void 0 : s.options) ?? (l(N) || [])).find((r) => `${r.value}` == `${t}`);
+      return (c == null ? void 0 : c.label) ?? t;
+    }), ie = f(() => l(L) || l(C) ? {} : {
+      width: "calc(100% - 48px)"
+    }), le = f(() => {
+      const {
+        align: e = "center"
+      } = n.column;
+      return `edit-cell-align-${e}`;
+    }), C = f(() => {
+      const {
+        editable: e
+      } = n.record || {};
+      return !!e;
+    });
+    _(() => {
+      u.value = n.value;
+    }), _(() => {
+      const {
+        editable: e
+      } = n.column;
+      (p(e) || p(l(C))) && (R.value = !!e || l(C));
+    });
+    function ce(e) {
+      var t;
+      e.stopPropagation(), !(l(C) || l((t = n.column) == null ? void 0 : t.editRow) || l(F)) && (g.value = "", R.value = !0, ve(() => {
+        var o;
+        const i = l(j);
+        (o = i == null ? void 0 : i.focus) == null || o.call(i);
+      }));
+    }
+    async function oe(e) {
+      var o, c;
+      const t = l(h);
+      e ? t === "Checkbox" ? u.value = e.target.checked : t === "Switch" ? u.value = e : e != null && e.target && Reflect.has(e.target, "value") ? u.value = e.target.value : (P("String")(e) || p(e) || P("Number")(e) || I(e)) && (u.value = e) : u.value = e;
+      const i = (o = l(V)) == null ? void 0 : o.onChangeTemp;
+      i && k(i) && i(...arguments), (c = a.emit) == null || c.call(a, "edit-change", {
+        column: n.column,
+        value: l(u),
+        record: ge(n.record)
+      }), K();
+    }
+    async function K() {
+      const {
+        column: e,
+        record: t
+      } = n, {
+        editRule: i
+      } = e, o = l(u);
+      if (i) {
+        if (p(i) && !o && !P("Number")(o)) {
+          D.value = !0;
+          const c = l(h);
+          return g.value = Q(c, $), !1;
+        }
+        if (k(i)) {
+          const c = await i(o, t);
+          return c ? (g.value = c, D.value = !0, !1) : (g.value = "", !0);
+        }
+      }
+      return g.value = "", !0;
+    }
+    async function w(e = !0, t = !0) {
+      var x;
+      if (t && !await K())
+        return !1;
+      const {
+        column: i,
+        index: o,
+        record: c
+      } = n;
+      if (!c)
+        return !1;
+      const {
+        key: s,
+        dataIndex: r
+      } = i, d = l(u);
+      if (!s && !r)
+        return;
+      const b = r || s;
+      if (!c.editable) {
+        const {
+          getBindValues: E
+        } = a, {
+          beforeEditSubmit: y,
+          columns: S,
+          rowKey: de
+        } = l(E), fe = we(de, c);
+        if (y && k(y)) {
+          T.value = !0;
+          const me = S.map((O) => O.dataIndex).filter((O) => !!O);
+          let W = !0;
+          try {
+            W = await y({
+              record: Re(c, [fe, ...me]),
+              index: o,
+              key: b,
+              value: d
+            });
+          } catch {
+            W = !1;
+          } finally {
+            T.value = !1;
+          }
+          if (W === !1)
+            return;
+        }
+      }
+      U(c, b, d), B.value = d, e && ((x = a.emit) == null || x.call(a, "edit-end", {
+        record: c,
+        index: o,
+        key: b,
+        value: d
+      })), R.value = !1;
+    }
+    async function se() {
+      var e;
+      (e = n.column) != null && e.editRow || w();
+    }
+    function ae() {
+      w();
+    }
+    function M() {
+      var s;
+      R.value = !1, u.value = B.value;
+      const {
+        column: e,
+        index: t,
+        record: i
+      } = n, {
+        key: o,
+        dataIndex: c
+      } = e;
+      (s = a.emit) == null || s.call(a, "edit-cancel", {
+        record: i,
+        index: t,
+        key: c || o,
+        value: l(u)
+      });
+    }
+    function ue() {
+      var t;
+      if ((t = n.column) != null && t.editable || l(C))
+        return;
+      l(h).includes("Input") && M();
+    }
+    function re(e) {
+      const {
+        replaceFields: t
+      } = l(V);
+      if (l(h) === "ApiTreeSelect") {
+        const {
+          title: o = "title",
+          value: c = "value",
+          children: s = "children"
+        } = t || {};
+        let r = Ve(e, {
+          children: s
+        });
+        r = r.map((d) => ({
+          label: d[o],
+          value: d[c]
+        })), N.value = r;
+      } else
+        N.value = e;
+    }
+    function A(e, t) {
+      var i;
+      n.record && (I(n.record[e]) ? (i = n.record[e]) == null || i.push(t) : n.record[e] = [t]);
+    }
+    return n.record && (A("submitCbs", w), A("validCbs", K), A("cancelCbs", M), n.column.dataIndex && (n.record.editValueRefs || (n.record.editValueRefs = {}), n.record.editValueRefs[n.column.dataIndex] = u), n.record.onCancelEdit = () => {
+      var e, t;
+      I((e = n.record) == null ? void 0 : e.cancelCbs) && ((t = n.record) == null || t.cancelCbs.forEach((i) => i()));
+    }, n.record.onSubmitEdit = async () => {
+      var e, t, i, o, c;
+      if (I((e = n.record) == null ? void 0 : e.submitCbs))
+        return (i = (t = n.record) == null ? void 0 : t.onValid) != null && i.call(t) ? ((((o = n.record) == null ? void 0 : o.submitCbs) || []).forEach((r) => r(!1, !1)), (c = a.emit) == null || c.call(a, "edit-row-end"), !0) : void 0;
+    }), {
+      isEdit: R,
+      ns: Y,
+      handleEdit: ce,
+      currentValueRef: u,
+      handleSubmit: w,
+      handleChange: oe,
+      handleCancel: M,
+      elRef: j,
+      getComponent: h,
+      getRule: Z,
+      onClickOutside: ue,
+      ruleMessage: g,
+      getRuleVisible: ee,
+      getComponentProps: V,
+      handleOptionsChange: re,
+      getWrapperStyle: ie,
+      getWrapperClass: le,
+      getRowEditable: C,
+      getValues: ne,
+      handleEnter: se,
+      handleSubmitClick: ae,
+      spinning: T,
+      getDisable: F
+    };
+  },
+  render() {
+    return m("div", {
+      class: this.ns.b()
+    }, [q(m("div", {
+      class: {
+        [this.ns.e("normal")]: !0,
+        "ellipsis-cell": this.column.ellipsis
+      },
+      onClick: this.handleEdit
+    }, [m("div", {
+      class: "cell-content",
+      title: this.column.ellipsis ? this.getValues ?? "" : ""
+    }, [this.column.editRender ? this.column.editRender({
+      text: this.value,
+      record: this.record,
+      column: this.column,
+      index: this.index,
+      currentValue: this.currentValueRef
+    }) : this.getValues ?? " "]), !this.column.editRow && !this.getDisable && m(z, {
+      class: this.ns.e("normal-icon")
+    }, null)]), [[Ce, !this.isEdit]]), this.isEdit && // todo: 无法Spin上面加onClick事件
+    m(X, {
+      spinning: this.spinning
+    }, {
+      default: () => [q(m("div", {
+        class: this.ns.e("wrapper"),
+        onClick: (n) => n.stopPropagation()
+      }, [m(J, be(this.getComponentProps, {
+        component: this.getComponent,
+        style: this.getWrapperStyle,
+        popoverVisible: this.getRuleVisible,
+        rule: this.getRule,
+        ruleMessage: this.ruleMessage,
+        class: this.getWrapperClass,
+        ref: "elRef",
+        onChange: this.handleChange,
+        onOptionsChange: this.handleOptionsChange,
+        onPressEnter: this.handleEnter
+      }), null), !this.getRowEditable && m("div", {
+        class: this.ns.e("action")
+      }, [m(H, {
+        class: [this.ns.e("icon"), "mx-2"],
+        onClick: this.handleSubmitClick
+      }, null), m(G, {
+        class: this.ns.e("icon"),
+        onClick: this.handleCancel
+      }, null)])]), [[ye("click-outside"), this.onClickOutside]])]
+    })]);
+  }
+});
 export {
-  f as default
+  Le as default
 };

package/es/src/pro-table/components/editable/index.mjs

@@ -1,9 +1,10 @@
 import { toRaw as l, h as e } from "vue";
-import p from "./editable-cell.vue.mjs";
-import { isArray as v } from "lodash-unified";
-function b(f) {
+import "./editable-cell.vue.mjs";
+import { isArray as p } from "lodash-unified";
+import v from "./editable-cell.vue2.mjs";
+function x(f) {
   return ({ text: u, record: t, index: m }) => (l(t).onValid = async () => {
-    if (v(t == null ? void 0 : t.validCbs)) {
+    if (p(t == null ? void 0 : t.validCbs)) {
       const i = ((t == null ? void 0 : t.validCbs) || []).map((a) => a());
       return (await Promise.all(i)).every((a) => !!a);
     } else
@@ -11,7 +12,7 @@ function b(f) {
   }, l(t).onEdit = async (i, n = !1) => {
     var a, s;
     return n || (t.editable = i), !i && n ? await t.onValid() && await ((a = t.onSubmitEdit) == null ? void 0 : a.call(t)) ? (t.editable = !1, !0) : !1 : (!i && !n && ((s = t.onCancelEdit) == null || s.call(t)), !0);
-  }, e(p, {
+  }, e(v, {
     value: u,
     record: t,
     column: f,
@@ -19,5 +20,5 @@ function b(f) {
   }));
 }
 export {
-  b as renderEditCell
+  x as renderEditCell
 };

package/es/src/pro-table/components/header-cell.vue.mjs

@@ -1,45 +1,4 @@
-import { defineComponent as i, computed as a, createVNode as l } from "vue";
-import { BasicHelp as u } from "../../basic/index.mjs";
-import r from "./edit-table-header-icon.vue.mjs";
-import "../../config-provider/index.mjs";
-import "./style/header-cell.css";
-import { useNamespace as d } from "../../config-provider/hooks/use-namespace.mjs";
-const h = /* @__PURE__ */ i({
-  name: "TableHeaderCell",
-  components: {
-    EditTableHeaderCell: r,
-    BasicHelp: u
-  },
-  props: {
-    column: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(t) {
-    const {
-      e: s
-    } = d("basic-table-header-cell"), m = a(() => {
-      var e;
-      return !!((e = t.column) != null && e.edit);
-    }), n = a(() => {
-      var c;
-      const e = t.column;
-      return typeof e.customHeaderRender == "function" ? e.customHeaderRender(e) : (e == null ? void 0 : e.customTitle) || ((c = t.column) == null ? void 0 : c.title);
-    }), o = a(() => {
-      var e;
-      return (e = t.column) == null ? void 0 : e.helpMessage;
-    });
-    return () => l("div", null, [m.value ? l(r, null, {
-      default: () => [n.value]
-    }) : l("span", {
-      class: "default-header-cell"
-    }, [n.value]), o.value && l(u, {
-      text: o.value,
-      class: s("help")
-    }, null)]);
-  }
-});
+import f from "./header-cell.vue2.mjs";
 export {
-  h as default
+  f as default
 };

package/es/src/pro-table/components/header-cell.vue2.mjs

@@ -1,4 +1,46 @@
-import f from "./header-cell.vue.mjs";
+import { defineComponent as i, computed as a, createVNode as l } from "vue";
+import { BasicHelp as r } from "../../basic/index.mjs";
+import "./edit-table-header-icon.vue2.mjs";
+import "../../config-provider/index.mjs";
+import "./style/header-cell.css";
+import u from "./edit-table-header-icon.vue.mjs";
+import { useNamespace as d } from "../../config-provider/hooks/use-namespace.mjs";
+const T = /* @__PURE__ */ i({
+  name: "TableHeaderCell",
+  components: {
+    EditTableHeaderCell: u,
+    BasicHelp: r
+  },
+  props: {
+    column: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(t) {
+    const {
+      e: s
+    } = d("basic-table-header-cell"), m = a(() => {
+      var e;
+      return !!((e = t.column) != null && e.edit);
+    }), o = a(() => {
+      var c;
+      const e = t.column;
+      return typeof e.customHeaderRender == "function" ? e.customHeaderRender(e) : (e == null ? void 0 : e.customTitle) || ((c = t.column) == null ? void 0 : c.title);
+    }), n = a(() => {
+      var e;
+      return (e = t.column) == null ? void 0 : e.helpMessage;
+    });
+    return () => l("div", null, [m.value ? l(u, null, {
+      default: () => [o.value]
+    }) : l("span", {
+      class: "default-header-cell"
+    }, [o.value]), n.value && l(r, {
+      text: n.value,
+      class: s("help")
+    }, null)]);
+  }
+});
 export {
-  f as default
+  T as default
 };