@aplus-frontend/ui 0.1.15 → 0.1.17

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

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

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

@@ -1,13 +1,14 @@
 import { ColumnType, TableProps } from 'ant-design-vue/es/table';
-import { ApTableValueFields, ApTableValueTypes, ValueEnum } from '../ap-table';
+import { ApTableValueFields, ApTableValueTypes, CommonFieldReturnType, FieldPropsType, ValueEnum } from '../ap-table';
 import { NamePath, ValidateOptions } from 'ant-design-vue/es/form/interface';
 import { DataIndex } from 'ant-design-vue/es/vc-table/interface';
 import { FormItemProps } from 'ant-design-vue';
 import { VNode } from 'vue';
 import { EllipsisConfig } from 'ant-design-vue/es/typography/Base';
 import { StandardBehaviorOptions } from '../../node_modules/scroll-into-view-if-needed';
-export type EditableColumnType<RecordType = any, ValueType extends ApTableValueTypes = ApTableValueTypes> = ValueType extends ApTableValueTypes ? Omit<ColumnType<RecordType>, 'children' | 'customRender' | 'ellipsis'> & {
-    children?: EditableColumnType<RecordType, ValueType>;
+import { Recordable } from '../type';
+export type EditableColumnType<RecordType = any, ExtraValueType = 'text', ValueType extends ApTableValueTypes = ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType = ExtraValueType | ValueType> = MergedValueType extends ExtraValueType | ValueType ? Omit<ColumnType<RecordType>, 'children' | 'customRender' | 'ellipsis'> & {
+    children?: EditableColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>;
     /**
      * 在title之后展示一个icon并触发tooltip
      */
@@ -31,22 +32,15 @@ export type EditableColumnType<RecordType = any, ValueType extends ApTableValueT
     /**
      * 自定义表单，适用于内置`valueType`不满足的情况下使用
      */
-    customRenderFormItem?: (config: EditableColumnType<RecordType, ValueType>, fieldProps: Record<string, any>, editable: boolean) => any;
+    customRenderFormItem?: (config: EditableColumnType<RecordType>, fieldProps: Recordable, editable: boolean) => any;
     /**
      * 指定值类型（将会用于普通列和可编辑表格的渲染）
      */
-    valueType?: ValueType;
+    valueType?: MergedValueType;
     /**
      * 值类型额外配置的参数（支持函数）
      */
-    fieldProps?: ApTableValueFields[ValueType] | ((opt: {
-        value: any;
-        text: any;
-        record: RecordType;
-        index: number;
-        renderIndex: number;
-        column: EditableColumnType<RecordType, ValueType>;
-    }) => ApTableValueFields[ValueType]);
+    fieldProps?: FieldPropsType<Extract<MergedValueType, ValueType> extends never ? CommonFieldReturnType : ApTableValueFields[Extract<MergedValueType, ValueType>], RecordType, ExtraValueType, ValueType, MergedValueType>;
     /**
      * 自定义渲染，添加了`editable`以及`originalNode`
      * @param opt

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

@@ -1,5 +1,6 @@
 import { EditableColumnType } from './interface';
 import { StandardBehaviorOptions } from '../../node_modules/scroll-into-view-if-needed';
+import { ValueTypeRenderConfig } from '../config-provider';
 /**
  * 获取编辑模式下默认映射的组件
  * @param valueType
@@ -8,10 +9,11 @@ import { StandardBehaviorOptions } from '../../node_modules/scroll-into-view-if-
 export declare function getEditableComponent(valueType: EditableColumnType['valueType']): any;
 /**
  * 获取可编辑表格的某列字段是否是required
+ * @description 请注意，此方法只根据`fieldProps.required`和`fieldProps.rules`来判断，并不会关注当前列是否可以渲染编辑节点
  * @param column
  * @returns
  */
-export declare function getColumnIsRequired(column: EditableColumnType<any, 'text'>): boolean;
+export declare function getColumnIsRequired(column: EditableColumnType<any, 'tex', 'text'>): boolean;
 /**
  * 获取ellipsis模式下最终需要渲染的字符串
  * @param column
@@ -27,4 +29,14 @@ export declare function mergeClass(current: string, classNames?: string | string
  * @param options
  */
 export declare function scrollToRowIndex(index: number, container?: HTMLElement, options?: StandardBehaviorOptions): void;
-export declare function getFinalNode(column: EditableColumnType, editable: boolean, innerProps: Record<string, any>, value: any): any;
+/**
+ * 获取最终需要渲染到单元格的节点
+ * @param column 表格列配置
+ * @param editable 是否可编辑
+ * @param innerProps props
+ * @param value 当前表格映射的值
+ * @param record 当前行数据
+ * @param extraValueTypes 自定义valueType映射
+ * @returns
+ */
+export declare function getFinalNode(column: EditableColumnType, editable: boolean, innerProps: Record<string, any>, value: any, record: any, extraRenderMap?: Record<string, ValueTypeRenderConfig>): any;

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

@@ -1,90 +1,100 @@
-import { isVNode as f, createVNode as s, mergeProps as d } from "vue";
-import { isFunction as n, isArray as p, isBoolean as a, omit as u } from "lodash-unified";
-import { apTableFormItemMap as c, noRenderAsFormItemValueList as y, apTableRenderItemMap as m } from "../ap-table/constants.mjs";
-import { isDef as b } from "../utils/index.mjs";
-import { getValueStr as g } from "../ap-field/number/helper.mjs";
-import T from "scroll-into-view-if-needed";
-import { Typography as C } from "ant-design-vue";
+import { isVNode as F, createVNode as f, mergeProps as g } from "vue";
+import { isFunction as b, isArray as T, 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 "../ap-form/index.mjs";
-import I from "../ap-form/ap-form-item.vue.mjs";
-function P(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !f(e);
+import { objectToString as C } from "../ap-table/utils.mjs";
+import m from "../ap-form/ap-form-item.vue.mjs";
+function y(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !F(e);
 }
-function R(e) {
-  return c[e];
+function N(e) {
+  return V[e];
 }
-function _(e) {
+function Q(e) {
   if (!e.fieldProps)
     return !1;
-  const r = n(e.fieldProps) ? e.fieldProps({}) : e.fieldProps;
-  return b(r.required) ? r.required : (p(r.rules) ? r.rules : r.rules ? [r.rules] : []).some((t) => t.required);
+  const t = b(e.fieldProps) ? e.fieldProps({}) : e.fieldProps;
+  return w(t.required) ? t.required : (T(t.rules) ? t.rules : t.rules ? [t.rules] : []).some((r) => r.required);
 }
-function F(e, r) {
+function _(e, t) {
   if (e.valueType === "text" || e.valueType === "textArea")
-    return r || "--";
+    return t || "--";
   if (e.valueType === "number") {
-    const o = e.fieldProps ? n(e.fieldProps) ? e.fieldProps({}) : e.fieldProps : {};
-    return g(r, o) || "--";
+    const o = e.fieldProps ? b(e.fieldProps) ? e.fieldProps({}) : e.fieldProps : {};
+    return S(t, o) || "--";
   }
-  return r;
+  return C(t);
 }
-function D(e, r) {
+function R(e, t) {
   const o = [e];
-  if (r) {
-    const t = p(r) ? r : [r];
-    o.unshift(...t);
+  if (t) {
+    const r = T(t) ? t : [t];
+    o.unshift(...r);
   }
   return o.join(" ");
 }
-function N(e, r = document.body, o = {}) {
-  const t = r.querySelectorAll("tr.ant-table-row")[e];
-  t && T(t, {
+function U(e, t = document.body, o = {}) {
+  const r = t.querySelectorAll("tr.ant-table-row")[e];
+  r && A(r, {
     scrollMode: "if-needed",
     block: "nearest",
     behavior: "smooth",
     ...o
   });
 }
-function V(e, r, o) {
-  return y.includes(e.valueType) ? o : e.copyable || e.ellipsis ? s(C.Paragraph, {
+function D(e, t, o) {
+  return j.includes(e.valueType) ? o : e.copyable || e.ellipsis ? f(v.Paragraph, {
     copyable: e.copyable ? {
-      text: r,
+      text: t,
       tooltip: !1
     } : !1,
-    ellipsis: e.ellipsis ? a(e.ellipsis) ? {
-      tooltip: r
+    ellipsis: e.ellipsis ? h(e.ellipsis) ? {
+      tooltip: t
     } : {
       ...e.ellipsis,
-      tooltip: r
+      tooltip: t
     } : !1,
-    content: e.ellipsis ? F(e, r) : o
+    content: e.ellipsis ? _(e, t) : o
   }, null) : o;
 }
-function O(e, r, o, t) {
-  let l;
-  if (e.valueType)
-    if (r) {
-      const i = R(e.valueType);
-      l = s(i, o, null);
-    } else {
-      const i = m[e.valueType];
-      l = V(e, t, s(i, d(o.field, {
-        mode: "read"
-      }), null));
+function W(e, t, o, r, I, i) {
+  var c, a;
+  if (t) {
+    if (e.customRenderFormItem) {
+      const n = e.customRenderFormItem(e, o.field, t);
+      return f(m, P(o, ["field"]), y(n) ? n : {
+        default: () => [n]
+      });
     }
-  if (e.customRenderFormItem) {
-    const i = e.customRenderFormItem(e, o.field, r);
-    l = s(I, u(o, ["field"]), P(i) ? i : {
-      default: () => [i]
-    });
+    const l = N(e.valueType);
+    if (l)
+      return f(l, o, null);
+    const s = i == null ? void 0 : i[e.valueType], u = (c = s == null ? void 0 : s.renderFormItem) == null ? void 0 : c.call(s, o.field);
+    return u ? f(m, o, y(u) ? u : {
+      default: () => [u]
+    }) : null;
   }
-  return l;
+  let p;
+  const d = q[e.valueType];
+  if (d)
+    p = f(d, g(o.field, {
+      mode: "read"
+    }), null);
+  else {
+    const l = i == null ? void 0 : i[e.valueType];
+    p = (a = l == null ? void 0 : l.render) == null ? void 0 : a.call(l, r, I, o.field);
+  }
+  return p ? D(e, r, p) : null;
 }
 export {
-  _ as getColumnIsRequired,
-  R as getEditableComponent,
-  O as getFinalNode,
-  F as getRawDisplayValue,
-  D as mergeClass,
-  N as scrollToRowIndex
+  Q as getColumnIsRequired,
+  N as getEditableComponent,
+  W as getFinalNode,
+  _ as getRawDisplayValue,
+  R as mergeClass,
+  U as scrollToRowIndex
 };