@aplus-frontend/ui 0.1.34 → 0.1.36

package/es/src/editable-table/index.vue.mjs

@@ -1,19 +1,17 @@
-import { defineComponent as J, useSlots as X, ref as b, watch as R, unref as o, openBlock as p, createBlock as F, withCtx as m, createVNode as x, mergeProps as Y, createSlots as Z, createElementBlock as ee, normalizeClass as te, createCommentVNode as B, createElementVNode as ae, toDisplayString as ne, normalizeStyle as oe, renderList as le, renderSlot as re, normalizeProps as ue, guardReactiveProps as se } from "vue";
-import { Table as ie, Tooltip as de } from "ant-design-vue";
-import { ApForm as y } from "../ap-form/index.mjs";
-import { isEqual as me, isArray as k, isNumber as g, cloneDeep as h, omit as fe } from "lodash-unified";
+import { defineComponent as W, useSlots as $, ref as w, watch as C, unref as o, openBlock as q, createBlock as J, withCtx as c, createVNode as b, mergeProps as Q, createSlots as X, renderList as Y, renderSlot as Z, normalizeProps as ee, guardReactiveProps as te } from "vue";
+import { Table as ae } from "ant-design-vue";
+import { ApForm as p } from "../ap-form/index.mjs";
+import { isEqual as ne, isArray as R, isNumber as x, cloneDeep as h, omit as F } from "lodash-unified";
 import "../config-provider/index.mjs";
 import "../hooks/index.mjs";
-import { isDef as C } from "../utils/index.mjs";
-import { scrollToRowIndex as ce, getColumnIsRequired as pe } from "./utils.mjs";
-import xe from "./hooks/use-get-columns.mjs";
+import { isDef as g } from "../utils/index.mjs";
+import { scrollToRowIndex as oe } from "./utils.mjs";
+import le from "./hooks/use-get-columns.mjs";
 import "./style/index.css";
-import { useToken as ye } from "ant-design-vue/es/theme/internal";
-import { QuestionCircleOutlined as ge } from "@ant-design/icons-vue";
-import { useNamespace as he } from "../config-provider/hooks/use-namespace.mjs";
-import { useControllableValue as Ce } from "../hooks/useControllableValue.mjs";
-import { useGlobalConfig as ve } from "../config-provider/hooks/use-global-config.mjs";
-const ze = /* @__PURE__ */ J({
+import { useNamespace as re } from "../config-provider/hooks/use-namespace.mjs";
+import { useControllableValue as ue } from "../hooks/useControllableValue.mjs";
+import { useGlobalConfig as se } from "../config-provider/hooks/use-global-config.mjs";
+const be = /* @__PURE__ */ W({
   name: "EditableTable",
   __name: "index",
   props: {
@@ -112,147 +110,128 @@ const ze = /* @__PURE__ */ J({
     onFieldChange: {}
   },
   emits: ["update:value"],
-  setup(V, {
-    expose: T,
+  setup(B, {
+    expose: V,
     emit: D
   }) {
-    const l = V, {
-      b: E,
-      em: L
-    } = he("editable-table"), N = X(), _ = D, v = b(), {
+    const n = B, {
+      b: L
+    } = re("editable-table"), T = $(), _ = D, v = w(), {
       value: u,
-      updateValue: S
-    } = Ce(l, _), s = b(), [, A] = ye(), z = ve("valueTypeMap"), c = y.useWatch(l.name, s);
-    R(() => c.value, (e) => {
+      updateValue: E
+    } = ue(n, _), s = w(), N = se("valueTypeMap"), m = p.useWatch(n.name, s);
+    C(() => m.value, (e) => {
       var t;
-      S(e), (t = l.onChange) == null || t.call(l, e);
+      E(e), (t = n.onChange) == null || t.call(n, e);
     }, {
       deep: !0
-    }), R(u, (e) => {
+    }), C(u, (e) => {
       var t;
-      e !== o(c) && (me(e, o(c)) || (t = s.value) == null || t.setFieldValue(l.name, e));
+      e !== o(m) && (ne(e, o(m)) || (t = s.value) == null || t.setFieldValue(n.name, e));
     }, {
       deep: !0
     });
-    const P = xe(l, z);
-    function I() {
+    const k = le(n, N);
+    function A() {
       var e;
       (e = s.value) == null || e.resetFields();
     }
-    function O(e) {
-      return e ? (k(e) ? e : [e]).map((n) => k(n) ? [l.name, ...n] : [l.name, n]) : void 0;
+    function S(e) {
+      return e ? (R(e) ? e : [e]).map((l) => R(l) ? [n.name, ...l] : [n.name, l]) : void 0;
     }
-    async function j(e, t) {
+    async function P(e, t) {
       var a;
-      const n = await ((a = s.value) == null ? void 0 : a.validateFields(O(e), t));
-      return n == null ? void 0 : n[l.name];
+      const l = await ((a = s.value) == null ? void 0 : a.validateFields(S(e), t));
+      return l == null ? void 0 : l[n.name];
     }
-    function q(e, t) {
-      var r, i, d;
-      const n = ((r = o(u)) == null ? void 0 : r.length) || 0;
-      if (C(l.maxLength) && n >= l.maxLength)
+    function j(e, t) {
+      var r, d, i;
+      const l = ((r = o(u)) == null ? void 0 : r.length) || 0;
+      if (g(n.maxLength) && l >= n.maxLength)
         return;
       const a = [...o(u) || []];
-      C(t) ? a.splice(t, 0, {
+      g(t) ? a.splice(t, 0, {
         ...e || {}
       }) : a.push({
         ...e || {}
-      }), (d = (i = s.value) == null ? void 0 : i.setFieldValue) == null || d.call(i, l.name, a);
+      }), (i = (d = s.value) == null ? void 0 : d.setFieldValue) == null || i.call(d, n.name, a);
     }
-    function K(e, t = "suffix") {
-      var d, f, w;
-      const n = ((d = o(u)) == null ? void 0 : d.length) || 0, a = g(e) ? e : e.length;
-      if (C(l.maxLength) && n + a > l.maxLength)
+    function z(e, t = "suffix") {
+      var i, f, y;
+      const l = ((i = o(u)) == null ? void 0 : i.length) || 0, a = x(e) ? e : e.length;
+      if (g(n.maxLength) && l + a > n.maxLength)
         return;
-      const r = [...o(u) || []], i = g(e) ? new Array(e).fill({}) : h(e);
-      t === "suffix" ? r.push(...i) : r.unshift(...i), (w = (f = s.value) == null ? void 0 : f.setFieldValue) == null || w.call(f, l.name, r);
+      const r = [...o(u) || []], d = x(e) ? new Array(e).fill({}) : h(e);
+      t === "suffix" ? r.push(...d) : r.unshift(...d), (y = (f = s.value) == null ? void 0 : f.setFieldValue) == null || y.call(f, n.name, r);
     }
-    function M(e) {
+    function I(e) {
       var a, r;
       let t = h(o(u) || []);
-      const n = g(e) ? [e] : e;
-      t = t.filter((i, d) => !n.includes(d)), (r = (a = s.value) == null ? void 0 : a.setFieldValue) == null || r.call(a, l.name, t);
+      const l = x(e) ? [e] : e;
+      t = t.filter((d, i) => !l.includes(i)), (r = (a = s.value) == null ? void 0 : a.setFieldValue) == null || r.call(a, n.name, t);
     }
-    function G() {
+    function O() {
       return o(u);
     }
-    function H(e) {
+    function K(e) {
       var t;
-      (t = s.value) == null || t.setFieldValue(l.name, e);
+      (t = s.value) == null || t.setFieldValue(n.name, e);
     }
-    function U(e) {
+    function M(e) {
       var t;
       return (t = o(u)) == null ? void 0 : t[e];
     }
-    function W(e, t, n = !0) {
-      var r, i;
+    function G(e, t, l = !0) {
+      var r, d;
       const a = h(o(u));
       a[e] && (a[e] = {
-        ...n ? a[e] : {},
+        ...l ? a[e] : {},
         ...t
-      }, (i = (r = s.value) == null ? void 0 : r.setFieldValue) == null || i.call(r, l.name, [...a]));
+      }, (d = (r = s.value) == null ? void 0 : r.setFieldValue) == null || d.call(r, n.name, [...a]));
     }
-    function $(e, t) {
+    function H(e, t) {
       var a;
-      const n = e === "end" ? u.value.length - 1 : e;
-      ce(n, (a = v.value) == null ? void 0 : a.$el, t);
+      const l = e === "end" ? u.value.length - 1 : e;
+      oe(l, (a = v.value) == null ? void 0 : a.$el, t);
     }
-    function Q() {
+    function U() {
       var e, t;
-      (t = (e = s.value) == null ? void 0 : e.setFieldValue) == null || t.call(e, l.name, []);
+      (t = (e = s.value) == null ? void 0 : e.setFieldValue) == null || t.call(e, n.name, []);
     }
-    return T({
-      resetFields: I,
-      validateFields: j,
-      add: q,
-      remove: M,
-      getRowData: U,
-      getRowsData: G,
-      setRowData: W,
-      addMultiple: K,
-      scrollTo: $,
-      clear: Q,
-      setTableData: H
-    }), (e, t) => (p(), F(o(y), {
+    return V({
+      resetFields: A,
+      validateFields: P,
+      add: j,
+      remove: I,
+      getRowData: M,
+      getRowsData: O,
+      setRowData: G,
+      addMultiple: z,
+      scrollTo: H,
+      clear: U,
+      setTableData: K
+    }), (e, t) => (q(), J(o(p), {
       "initial-values": {
-        [l.name]: o(u)
+        [n.name]: o(u)
       },
       ref_key: "formRef",
       ref: s
     }, {
-      default: m(() => [x(o(y).FormItem, {
+      default: c(() => [b(o(p).FormItem, {
         name: e.name,
         "no-style": ""
       }, {
-        default: m(() => [x(o(ie), Y(o(fe)(l, ["name", "value", "onUpdate:value", "maxLength", "onChange"]), {
-          class: o(E)(),
-          columns: o(P),
+        default: c(() => [b(o(ae), Q(o(F)(n, ["name", "value", "onUpdate:value", "maxLength", "onChange"]), {
+          class: o(L)(),
+          columns: o(k),
           "data-source": o(u),
           ref_key: "tableRef",
           ref: v
-        }), Z({
-          headerCell: m(({
-            column: n
-          }) => [o(pe)(n) ? (p(), ee("span", {
-            key: 0,
-            class: te(o(L)("header-cell", "required"))
-          }, "*", 2)) : B("", !0), ae("span", null, ne(n.title), 1), n.tooltip ? (p(), F(o(de), {
-            key: 1,
-            title: n.tooltip,
-            placement: "bottom"
-          }, {
-            default: m(() => [x(o(ge), {
-              style: oe({
-                paddingLeft: "4px",
-                color: o(A).colorPrimary
-              })
-            }, null, 8, ["style"])]),
-            _: 2
-          }, 1032, ["title"])) : B("", !0)]),
+        }), X({
           _: 2
-        }, [le(N, (n, a) => ({
+        }, [Y(o(F)(T, ["headerCell"]), (l, a) => ({
           name: a,
-          fn: m((r) => [re(e.$slots, a, ue(se(r || {})))])
+          fn: c((r) => [Z(e.$slots, a, ee(te(r || {})))])
         }))]), 1040, ["class", "columns", "data-source"])]),
         _: 3
       }, 8, ["name"])]),
@@ -261,5 +240,5 @@ const ze = /* @__PURE__ */ J({
   }
 });
 export {
-  ze as default
+  be as default
 };

package/es/src/editable-table/style/index.css

@@ -44,3 +44,15 @@
 .aplus-editable-table .ant-form-item-explain-error {
   text-align: left;
 }
+.aplus-editable-table-table-header__title {
+  display: -webkit-inline-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  max-width: 100%;
+  vertical-align: middle;
+  word-break: break-all;
+  flex: 1;
+}

package/es/src/editable-table/utils.d.ts

@@ -1,6 +1,7 @@
 import { EditableColumnType } from './interface';
 import { StandardBehaviorOptions } from '../../node_modules/scroll-into-view-if-needed';
 import { ValueTypeRenderConfig } from '../config-provider';
+import { VNode, RendererNode, RendererElement } from 'vue';
 /**
  * 获取编辑模式下默认映射的组件
  * @param valueType
@@ -13,7 +14,7 @@ export declare function getEditableComponent(valueType: EditableColumnType['valu
  * @param column
  * @returns
  */
-export declare function getColumnIsRequired(column: EditableColumnType<any, 'tex', 'text'>): boolean;
+export declare function getColumnIsRequired(column: EditableColumnType<any, 'text', 'text'>): boolean;
 /**
  * 获取ellipsis模式下最终需要渲染的字符串
  * @param column
@@ -40,3 +41,9 @@ export declare function scrollToRowIndex(index: number, container?: HTMLElement,
  * @returns
  */
 export declare function getFinalNode(column: EditableColumnType, editable: boolean, innerProps: Record<string, any>, value: any, record: any, extraRenderMap?: Record<string, ValueTypeRenderConfig>): any;
+export declare function getEditableTableTitle(column: EditableColumnType<any>, titleNodeClassName: string, requiredNodeClassName: string, slot?: (props: {
+    title: any;
+    column: EditableColumnType<any>;
+}) => any, tooltipColor?: string): VNode< RendererNode, RendererElement, {
+    [key: string]: any;
+}>[] | import("vue/jsx-runtime").JSX.Element;

package/es/src/editable-table/utils.mjs

@@ -1,100 +1,134 @@
-import { isVNode as F, createVNode as f, mergeProps as g } from "vue";
-import { isFunction as T, isArray as I, isBoolean as h, omit as P } from "lodash-unified";
-import { apTableFormItemMap as V, noRenderAsFormItemValueList as j, apTableRenderItemMap as q } from "../ap-table/constants.mjs";
-import { isDef as w } from "../utils/index.mjs";
-import { getValueStr as S } from "../ap-field/number/helper.mjs";
-import A from "scroll-into-view-if-needed";
-import { Typography as v } from "ant-design-vue";
+import { isVNode as I, createVNode as s, mergeProps as F, createTextVNode as S, Fragment as w } from "vue";
+import { isFunction as g, isArray as h, isBoolean as P, omit as V, isString as m } from "lodash-unified";
+import { apTableFormItemMap as q, noRenderAsFormItemValueList as v, apTableRenderItemMap as C } from "../ap-table/constants.mjs";
+import { isDef as j } from "../utils/index.mjs";
+import { getValueStr as A } from "../ap-field/number/helper.mjs";
+import N from "scroll-into-view-if-needed";
+import { Typography as O, Tooltip as W } from "ant-design-vue";
 import "../ap-form/index.mjs";
-import { objectToString as C } from "../ap-table/utils.mjs";
-import y from "../ap-form/ap-form-item.vue.mjs";
-function b(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !F(e);
+import { objectToString as _ } from "../ap-table/utils.mjs";
+import { QuestionCircleOutlined as D } from "@ant-design/icons-vue";
+import T from "../ap-form/ap-form-item.vue.mjs";
+function b(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !I(t);
 }
-function N(e) {
-  return V[e];
+function E(t) {
+  return q[t];
 }
-function Q(e) {
-  if (!e.fieldProps)
+function k(t) {
+  if (!t.fieldProps)
     return !1;
-  const t = T(e.fieldProps) ? e.fieldProps({}) : e.fieldProps;
-  return w(t.required) ? t.required : (I(t.rules) ? t.rules : t.rules ? [t.rules] : []).some((r) => r.required);
+  const e = g(t.fieldProps) ? t.fieldProps({}) : t.fieldProps;
+  return j(e.required) ? e.required : (h(e.rules) ? e.rules : e.rules ? [e.rules] : []).some((o) => o.required);
 }
-function _(e, t) {
-  if (e.valueType === "text" || e.valueType === "textArea")
-    return t || "--";
-  if (e.valueType === "number") {
-    const o = e.fieldProps ? T(e.fieldProps) ? e.fieldProps({}) : e.fieldProps : {};
-    return S(t, o) || "--";
+function B(t, e) {
+  if (t.valueType === "text" || t.valueType === "textArea")
+    return e || "--";
+  if (t.valueType === "number") {
+    const i = t.fieldProps ? g(t.fieldProps) ? t.fieldProps({}) : t.fieldProps : {};
+    return A(e, i) || "--";
   }
-  return C(t);
+  return _(e);
 }
-function R(e, t) {
-  const o = [e];
-  if (t) {
-    const r = I(t) ? t : [t];
-    o.unshift(...r);
+function Z(t, e) {
+  const i = [t];
+  if (e) {
+    const o = h(e) ? e : [e];
+    i.unshift(...o);
   }
-  return o.join(" ");
+  return i.join(" ");
 }
-function U(e, t = document.body, o = {}) {
-  const r = t.querySelectorAll("tr.ant-table-row")[e];
-  r && A(r, {
+function $(t, e = document.body, i = {}) {
+  const o = e.querySelectorAll("tr.ant-table-row")[t];
+  o && N(o, {
     scrollMode: "if-needed",
     block: "nearest",
     behavior: "smooth",
-    ...o
+    ...i
   });
 }
-function D(e, t, o) {
-  return j.includes(e.valueType) ? o : e.copyable || e.ellipsis ? f(v.Paragraph, {
-    copyable: e.copyable ? {
-      text: t,
+function H(t, e, i) {
+  return v.includes(t.valueType) ? i : t.copyable || t.ellipsis ? s(O.Paragraph, {
+    copyable: t.copyable ? {
+      text: e,
       tooltip: !1
     } : !1,
-    ellipsis: e.ellipsis ? h(e.ellipsis) ? {
-      tooltip: t
+    ellipsis: t.ellipsis ? P(t.ellipsis) ? {
+      tooltip: e
     } : {
-      ...e.ellipsis,
-      tooltip: t
+      ...t.ellipsis,
+      tooltip: e
     } : !1,
-    content: e.ellipsis ? _(e, t) : o
-  }, null) : o;
+    content: t.ellipsis ? B(t, e) : i
+  }, null) : i;
 }
-function W(e, t, o, r, d, i) {
-  var a, m;
-  if (t) {
-    if (e.customRenderFormItem) {
-      const n = e.customRenderFormItem(e, o.field, t, d);
-      return f(y, P(o, ["field"]), b(n) ? n : {
-        default: () => [n]
+function M(t, e, i, o, d, l) {
+  var c, a;
+  if (e) {
+    if (t.customRenderFormItem) {
+      const y = t.customRenderFormItem(t, i.field, e, d);
+      return s(T, V(i, ["field"]), b(y) ? y : {
+        default: () => [y]
       });
     }
-    const l = N(e.valueType);
-    if (l)
-      return f(l, o, null);
-    const s = i == null ? void 0 : i[e.valueType], u = (a = s == null ? void 0 : s.renderFormItem) == null ? void 0 : a.call(s, o.field);
-    return u ? f(y, o, b(u) ? u : {
-      default: () => [u]
+    const r = E(t.valueType);
+    if (r)
+      return s(r, i, null);
+    const n = l == null ? void 0 : l[t.valueType], f = (c = n == null ? void 0 : n.renderFormItem) == null ? void 0 : c.call(n, i.field);
+    return f ? s(T, i, b(f) ? f : {
+      default: () => [f]
     }) : null;
   }
   let p;
-  const c = q[e.valueType];
-  if (c)
-    p = f(c, g(o.field, {
+  const u = C[t.valueType];
+  if (u)
+    p = s(u, F(i.field, {
       mode: "read"
     }), null);
   else {
-    const l = i == null ? void 0 : i[e.valueType];
-    p = (m = l == null ? void 0 : l.render) == null ? void 0 : m.call(l, r, d, o.field);
+    const r = l == null ? void 0 : l[t.valueType];
+    p = (a = r == null ? void 0 : r.render) == null ? void 0 : a.call(r, o, d, i.field);
   }
-  return p ? D(e, r, p) : null;
+  return p ? H(t, o, p) : null;
+}
+function tt(t, e, i, o, d) {
+  const l = o == null ? void 0 : o({
+    title: t.title,
+    column: t
+  });
+  if (l && (l.length > 1 || l[0].children && l[0].children !== "v-if"))
+    return l;
+  const u = k(t), a = m(t.title) ? {
+    class: e,
+    title: t.title
+  } : {}, r = s("div", a, [u ? s("span", {
+    class: i
+  }, [S("*")]) : null, t.title]), n = t.tooltip ? m(t.tooltip) ? s(w, null, [t.tooltip]) : t.tooltip(t) : null;
+  return n ? s("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      maxWidth: "100%"
+    }
+  }, [r, s(W, {
+    title: n,
+    placement: "bottom"
+  }, {
+    default: () => [s(D, {
+      style: {
+        padding: "4px",
+        color: d,
+        verticalAlign: "middle"
+      }
+    }, null)]
+  })]) : r;
 }
 export {
-  Q as getColumnIsRequired,
-  N as getEditableComponent,
-  W as getFinalNode,
-  _ as getRawDisplayValue,
-  R as mergeClass,
-  U as scrollToRowIndex
+  k as getColumnIsRequired,
+  E as getEditableComponent,
+  tt as getEditableTableTitle,
+  M as getFinalNode,
+  B as getRawDisplayValue,
+  Z as mergeClass,
+  $ as scrollToRowIndex
 };