@aplus-frontend/ui 0.0.2 → 0.0.3

package/es/src/ap-table/ap-table.vue.d.ts

@@ -140,11 +140,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
         };
         align: {
             type: PropType<AlignType>;
-            default: AlignType; /**
-             * tips
-             * 通常情况下，表格渲染是不需要请求网络数据的，因此这里删掉request，
-             * 如果需要做映射，可以在外部发起一次网络请求，然后使用valueEnum设置匹配枚举。
-             */
+            default: AlignType;
         };
         builtinPlacements: {
             type: PropType<BuildInPlacements>;

package/es/src/ap-table/ap-table.vue.mjs

@@ -1,17 +1,19 @@
-import { defineComponent as H, computed as d, createVNode as r, mergeProps as p, unref as o, watch as G, openBlock as s, createElementBlock as f, normalizeClass as b, normalizeStyle as R, withCtx as c, Fragment as Q, renderList as T, createBlock as U, resolveDynamicComponent as J, createCommentVNode as B, createElementVNode as I, renderSlot as P, createSlots as X, toDisplayString as Y, normalizeProps as Z, guardReactiveProps as ee } from "vue";
-import { Typography as ae, Table as te, Tooltip as oe } from "ant-design-vue";
-import { ApForm as ne } from "../ap-form/index.mjs";
-import { apTableRenderItemMap as le, noRenderAsFormItemValueList as v, apTableFormItemMap as re } from "./constants.mjs";
+import { defineComponent as U, computed as u, createVNode as d, mergeProps as f, unref as n, watch as J, openBlock as i, createElementBlock as m, normalizeClass as b, normalizeStyle as T, withCtx as y, Fragment as X, renderList as B, createBlock as Y, resolveDynamicComponent as Z, createCommentVNode as I, createElementVNode as v, renderSlot as P, createSlots as ee, toDisplayString as ae, normalizeProps as te, guardReactiveProps as oe } from "vue";
+import { Typography as ne, Table as le, Tooltip as re } from "ant-design-vue";
+import { ApForm as de } from "../ap-form/index.mjs";
+import { apTableRenderItemMap as se, noRenderAsFormItemValueList as k, apTableFormItemMap as ue } from "./constants.mjs";
 import "../config-provider/index.mjs";
-import { useTablePaging as de } from "./hooks/use-table-paging.mjs";
-import { omit as k, isUndefined as se } from "lodash-unified";
+import { useTablePaging as ie } from "./hooks/use-table-paging.mjs";
+import { omit as O, isUndefined as pe } from "lodash-unified";
 import "./style/ap-table.css";
-import { QuestionCircleOutlined as ie } from "@ant-design/icons-vue";
-import { useNamespace as ue } from "../config-provider/hooks/use-namespace.mjs";
-import { useGlobalConfig as pe } from "../config-provider/hooks/use-global-config.mjs";
-const fe = {
+import { QuestionCircleOutlined as ce } from "@ant-design/icons-vue";
+import { getFieldProps as z, getColumnOrder as E, getPlaceholder as fe } from "./utils.mjs";
+import { useLocale as me } from "../config-provider/hooks/use-locale.mjs";
+import { useNamespace as ye } from "../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as ge } from "../config-provider/hooks/use-global-config.mjs";
+const he = {
   key: 0
-}, Re = /* @__PURE__ */ H({
+}, Oe = /* @__PURE__ */ U({
   name: "ApTable",
   __name: "ap-table",
   props: {
@@ -120,158 +122,170 @@ const fe = {
       default: "middle"
     }
   },
-  setup(z, {
-    expose: E
+  setup(L, {
+    expose: N
   }) {
-    const n = z, {
-      e: h,
-      b: m
-    } = ue("ap-table"), L = pe("uiMode"), y = d(() => {
-      var t;
-      let a = ((t = n.columns) == null ? void 0 : t.filter((e) => !e.hideInTable)) || [];
-      return a = a.map((e) => ({
-        ...e,
+    const l = L, {
+      t: D
+    } = me(), {
+      e: C,
+      b: g
+    } = ye("ap-table"), V = ge("uiMode"), h = u(() => {
+      var o;
+      let e = ((o = l.columns) == null ? void 0 : o.filter((a) => !a.hideInTable)) || [];
+      return e = e.map((a) => ({
+        ...a,
         customRender({
-          value: l,
-          ...u
+          value: t,
+          ...r
         }) {
-          var F;
-          let g;
-          if (e.customRender)
-            g = e.customRender({
-              value: l,
-              ...u,
-              column: e
+          let s;
+          if (a.customRender)
+            s = a.customRender({
+              value: t,
+              ...r,
+              column: a
             });
           else {
-            const A = le[e.valueType || "text"], M = ((F = e.fieldProps) == null ? void 0 : F.field) || e.fieldProps || {}, _ = e.valueType === "switch", K = e.valueType === "index", $ = _ ? {
-              checked: l
+            const R = se[a.valueType || "text"], c = z(a.fieldProps, {
+              value: t,
+              ...r
+            }), $ = (c == null ? void 0 : c.field) || c || {}, H = a.valueType === "switch", G = a.valueType === "index", Q = H ? {
+              checked: t
             } : {
-              value: K ? u.index + 1 : l
+              value: G ? r.index + 1 : t
             };
-            g = r(A, p(k(M, ["request"]), $, {
+            s = d(R, f(O($, ["request"]), Q, {
               mode: "read"
             }), null);
           }
-          return W(e, l, g);
+          return _(a, t, s);
         }
-      })), a;
-    }), C = d(() => {
-      var a, t;
-      return ((t = (a = n.columns) == null ? void 0 : a.filter((e) => !e.hideInSearch && e.dataIndex && (e.valueType || e.customRenderFormItem) && !v.includes(e.valueType))) == null ? void 0 : t.map((e) => ({
-        ...e,
-        fieldProps: {
-          ...e.fieldProps || {},
-          label: e.title,
-          name: e.dataIndex
-        }
-      }))) || [];
-    }), N = d(() => o(y).filter((a) => a.sorter === !0).map((a) => a.dataIndex)), D = d(() => o(y).filter((a) => a.filters && !a.onFilter).map((a) => a.dataIndex)), {
-      formRef: S,
-      submit: w,
-      reset: x,
-      tableProps: i,
-      handleTableChange: O,
-      data: V
-    } = de({
-      async request(a) {
-        var e, l;
-        const t = await ((e = n.request) == null ? void 0 : e.call(n, a));
-        return (l = n.onLoad) == null || l.call(n, (t == null ? void 0 : t.data) || []), {
-          data: (t == null ? void 0 : t.data) || [],
-          total: (t == null ? void 0 : t.total) || 0
+      })), e;
+    }), S = u(() => {
+      var e, o, a;
+      return ((a = (o = (e = l.columns) == null ? void 0 : e.filter((t) => !t.hideInSearch && t.dataIndex && (t.valueType || t.customRenderFormItem) && !k.includes(t.valueType))) == null ? void 0 : o.sort((t, r) => {
+        let s = E(t.order);
+        return E(r.order) - s;
+      })) == null ? void 0 : a.map((t) => {
+        const r = z(t.fieldProps);
+        return {
+          ...t,
+          fieldProps: {
+            ...r || {},
+            label: t.title,
+            name: t.dataIndex,
+            // 格式化placeholder
+            placeholder: fe(D, t.valueType, r == null ? void 0 : r.placeholder)
+          }
+        };
+      })) || [];
+    }), j = u(() => n(h).filter((e) => e.sorter === !0).map((e) => e.dataIndex)), W = u(() => n(h).filter((e) => e.filters && !e.onFilter).map((e) => e.dataIndex)), {
+      formRef: w,
+      submit: x,
+      reset: F,
+      tableProps: p,
+      handleTableChange: q,
+      data: A
+    } = ie({
+      async request(e) {
+        var a, t;
+        const o = await ((a = l.request) == null ? void 0 : a.call(l, e));
+        return (t = l.onLoad) == null || t.call(l, (o == null ? void 0 : o.data) || []), {
+          data: (o == null ? void 0 : o.data) || [],
+          total: (o == null ? void 0 : o.total) || 0
         };
       },
-      filterFields: o(D),
-      sortFields: o(N),
-      defaultParams: n.params,
-      defaultData: n.defaultData,
-      manual: n.manual,
-      defaultCurrent: n.pagination ? n.pagination.defaultCurrent : void 0,
-      defaultPageSize: n.pagination ? n.pagination.defaultPageSize : void 0,
-      formatParams: n.beforeSearchSubmit
-    }), j = d(() => ({
-      ...n,
-      ...o(i),
-      loading: se(n.loading) ? o(i).loading : n.loading,
-      pagination: n.pagination === !1 ? !1 : o(i).pagination
+      filterFields: n(W),
+      sortFields: n(j),
+      defaultParams: l.params,
+      defaultData: l.defaultData,
+      manual: l.manual,
+      defaultCurrent: l.pagination ? l.pagination.defaultCurrent : void 0,
+      defaultPageSize: l.pagination ? l.pagination.defaultPageSize : void 0,
+      formatParams: l.beforeSearchSubmit
+    }), M = u(() => ({
+      ...l,
+      ...n(p),
+      loading: pe(l.loading) ? n(p).loading : l.loading,
+      pagination: l.pagination === !1 ? !1 : n(p).pagination
     }));
-    function W(a, t, e) {
-      return v.includes(a.valueType) ? e : a.copyable || a.ellipsis ? r(ae.Text, {
-        copyable: a.copyable ? {
-          text: t,
+    function _(e, o, a) {
+      return k.includes(e.valueType) ? a : e.copyable || e.ellipsis ? d(ne.Text, {
+        copyable: e.copyable ? {
+          text: o,
           tooltip: !1
         } : !1,
-        ellipsis: a.ellipsis ? {
-          tooltip: t
+        ellipsis: e.ellipsis ? {
+          tooltip: o
         } : !1,
-        content: e
-      }, null) : e;
+        content: a
+      }, null) : a;
     }
-    G(() => o(V).loading, (a) => {
-      var t;
-      (t = n.onLoadingChange) == null || t.call(n, a);
+    J(() => n(A).loading, (e) => {
+      var o;
+      (o = l.onLoadingChange) == null || o.call(l, e);
     });
-    function q(a) {
-      var t, e, l;
-      (l = (e = (t = S.value) == null ? void 0 : t.apForm) == null ? void 0 : e.setFieldsValue) == null || l.call(e, a);
+    function K(e) {
+      var o, a, t;
+      (t = (a = (o = w.value) == null ? void 0 : o.apForm) == null ? void 0 : a.setFieldsValue) == null || t.call(a, e);
     }
-    return E({
-      submit: () => w(),
-      reset: () => x(),
-      setSearchFormValues: q
-    }), (a, t) => (s(), f("div", {
-      class: b(a.card ? null : o(m)("wrapper"))
-    }, [a.searchForm !== !1 && C.value.length > 0 ? (s(), f("div", {
+    return N({
+      submit: () => x(),
+      reset: () => F(),
+      setSearchFormValues: K
+    }), (e, o) => (i(), m("div", {
+      class: b(e.card ? null : n(g)("wrapper"))
+    }, [e.searchForm !== !1 && S.value.length > 0 ? (i(), m("div", {
       key: 0,
-      class: b(a.card ? o(h)("search-wrapper") : null),
-      style: R(a.searchFormWrapperStyle)
-    }, [r(o(ne).SearchForm, p(a.searchForm || {}, {
+      class: b(e.card ? n(C)("search-wrapper") : null),
+      style: T(e.searchFormWrapperStyle)
+    }, [d(n(de).SearchForm, f(e.searchForm || {}, {
       ref_key: "formRef",
-      ref: S,
+      ref: w,
       "custom-reset": "",
-      onSubmit: o(w),
-      onReset: o(x),
-      "submit-loading": o(i).loading
+      onSubmit: n(x),
+      onReset: n(F),
+      "submit-loading": n(p).loading
     }), {
-      default: c(() => [(s(!0), f(Q, null, T(C.value, (e) => (s(), U(J(e.customRenderFormItem ? e.customRenderFormItem(e) : o(re)[e.valueType || "text"]), p({
-        key: e.dataIndex,
+      default: y(() => [(i(!0), m(X, null, B(S.value, (a) => (i(), Y(Z(a.customRenderFormItem ? a.customRenderFormItem(a) : n(ue)[a.valueType || "text"]), f({
+        key: a.dataIndex,
         ref_for: !0
-      }, e.fieldProps || {}, {
-        span: e.span
+      }, a.fieldProps || {}, {
+        span: a.span
       }), null, 16, ["span"]))), 128))]),
       _: 1
-    }, 16, ["onSubmit", "onReset", "submit-loading"])], 6)) : B("", !0), I("div", {
-      class: b(a.card ? o(h)("table-wrapper") : null),
-      style: R(a.tableWrapperStyle)
-    }, [P(a.$slots, "title"), r(o(te), p({
-      class: o(L) === "admin" ? o(m)("table-admin") : o(m)("table")
-    }, j.value, {
-      onChange: o(O),
-      columns: y.value
-    }), X({
-      headerCell: c(({
-        column: e,
-        title: l
-      }) => [e.tooltip ? (s(), f("span", fe, [I("span", null, Y(l), 1), r(o(oe), {
-        title: e.tooltip,
+    }, 16, ["onSubmit", "onReset", "submit-loading"])], 6)) : I("", !0), v("div", {
+      class: b(e.card ? n(C)("table-wrapper") : null),
+      style: T(e.tableWrapperStyle)
+    }, [P(e.$slots, "title"), d(n(le), f({
+      class: n(V) === "admin" ? n(g)("table-admin") : n(g)("table")
+    }, M.value, {
+      onChange: n(q),
+      columns: h.value
+    }), ee({
+      headerCell: y(({
+        column: a,
+        title: t
+      }) => [a.tooltip ? (i(), m("span", he, [v("span", null, ae(t), 1), d(n(re), {
+        title: a.tooltip,
         placement: "bottom"
       }, {
-        default: c(() => [r(o(ie), {
+        default: y(() => [d(n(ce), {
           style: {
             color: "#0070ff",
             "padding-left": "4px"
           }
         })]),
         _: 2
-      }, 1032, ["title"])])) : B("", !0)]),
+      }, 1032, ["title"])])) : I("", !0)]),
       _: 2
-    }, [T(o(k)(a.$slots, "title"), (e, l) => ({
-      name: l,
-      fn: c((u) => [P(a.$slots, l, Z(ee(u || {})))])
+    }, [B(n(O)(e.$slots, "title"), (a, t) => ({
+      name: t,
+      fn: y((r) => [P(e.$slots, t, te(oe(r || {})))])
     }))]), 1040, ["class", "onChange", "columns"])], 6)], 2));
   }
 });
 export {
-  Re as default
+  Oe as default
 };

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

@@ -52,8 +52,8 @@ export type ExtraProColumnType<T> = Omit<ColumnType<T>, 'children'> & {
         multiple?: number;
     };
 };
-export type ApColumnType<ValueType extends keyof ApTableValueFields = 'text'> = ExtraProColumnType<any> & {
-    children?: ApColumnType[];
+export type ApColumnType<ValueType extends keyof ApTableValueFields = 'text', RecordType = any> = ExtraProColumnType<any> & {
+    children?: ApColumnType<any, RecordType>[];
     /**
      * 表单项所占据的格子数（1-24格）
      */
@@ -89,7 +89,19 @@ export type ApColumnType<ValueType extends keyof ApTableValueFields = 'text'> =
     /**
      * 值类型额外配置的参数（用于查询表单渲染）
      */
-    fieldProps?: ApTableValueFields[ValueType];
+    fieldProps?: ApTableValueFields[ValueType] | ((opt?: {
+        value: any;
+        text: any;
+        record: RecordType;
+        index: number;
+        renderIndex: number;
+        column: ApColumnType<ValueType, RecordType>;
+    }) => ApTableValueFields[ValueType]);
+    /**
+     * 用于表单项排序的字段
+     * @description 值越大，越排在前面，请设置正整数，设置为0或负数将会无效
+     */
+    order?: number;
 };
 export type RequestData<T> = {
     data: T[] | undefined;
@@ -99,7 +111,7 @@ export type ApTableProps<RecordType = any, ParamsType = any, ValueType extends k
     /**
      * 列配置
      */
-    columns?: ApColumnType<any>[];
+    columns?: ApColumnType<any, RecordType>[];
     /**
      * 是否启用卡片样式
      */

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

@@ -1,4 +1,5 @@
-import { ValueEnum, ValueEnumType } from './interface';
+import { ApColumnType, ApTableValueFields, ValueEnum, ValueEnumType } from './interface';
+import { Translator } from '../config-provider';
 
 export type FieldValueType = 'multiple' | 'multipleNumber' | 'dayjs' | 'dayjsRange' | 'dayjsDayRange' | 'number' | 'boolean' | 'object';
 export declare const formatParamsValueType: (type: FieldValueType | Record<string, FieldValueType>, value: any, cb: (t: FieldValueType, value: any) => any) => any;
@@ -29,4 +30,32 @@ export declare const objectToMap: (value: ValueEnum | undefined) => ValueEnumMap
  * @returns
  */
 export declare const valueEnumToArray: (valueEnumParams: ValueEnum) => OptionType;
+/**
+ * 获取列在查询表单中的排序
+ * @param order
+ * @returns
+ */
+export declare const getColumnOrder: (order?: number) => number;
+/**
+ * 获取查询表单的placeholder
+ * @param t
+ * @param valueType
+ * @param placeholder
+ * @returns
+ */
+export declare const getPlaceholder: (t: Translator, valueType?: keyof ApTableValueFields, placeholder?: string) => string | string[] | undefined;
+/**
+ * 获取对象形式的FieldProps
+ * @param fieldProps
+ * @param record
+ * @returns
+ */
+export declare function getFieldProps<RecordType = any>(fieldProps: ApColumnType<any, any>['fieldProps'], opt?: {
+    value: any;
+    text: any;
+    record: any;
+    index: number;
+    renderIndex: number;
+    column: ApColumnType<any, RecordType>;
+}): any;
 export {};

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

@@ -1,63 +1,83 @@
-import { isObject as c, isArray as a } from "lodash-unified";
-const u = (t, r, n) => {
-  let o = {};
-  return c(t) ? Object.keys(t).forEach((s) => {
-    c(t[s]) ? o[s] = u(t[s], r[s], n) : o[s] = n(t[s], r);
-  }) : o = n(t, r), o;
-}, d = (t, r) => {
+import { isObject as c, isArray as u, isUndefined as i, isFunction as a } from "lodash-unified";
+const f = (t, e, n) => {
+  let s = {};
+  return c(t) ? Object.keys(t).forEach((o) => {
+    c(t[o]) ? s[o] = f(t[o], e[o], n) : s[o] = n(t[o], e);
+  }) : s = n(t, e), s;
+}, p = (t, e) => {
   switch (t) {
     case "dayjs":
-      return r.valueOf();
+      return e.valueOf();
     case "dayjsRange":
-      return r.map((n) => n.valueOf());
+      return e.map((n) => n.valueOf());
     case "dayjsDayRange": {
-      const [n, o] = r;
-      return [n.startOf("day").valueOf(), o.endOf("day").valueOf()];
+      const [n, s] = e;
+      return [n.startOf("day").valueOf(), s.endOf("day").valueOf()];
     }
     case "multiple":
     case "multipleNumber":
-      return a(r) ? r : [r];
+      return u(e) ? e : [e];
     case "boolean":
-      return r;
+      return e;
     case "object":
-      return r;
+      return e;
     default:
-      return r;
+      return e;
   }
 };
-function p(t) {
-  return a(t) ? t.join(".") : t;
+function b(t) {
+  return u(t) ? t.join(".") : t;
 }
-function f(t) {
-  const r = Object.prototype.toString.call(t).match(/^\[object (.*)\]$/)[1].toLowerCase();
-  return r === "string" && typeof t == "object" ? "object" : t === null ? "null" : t === void 0 ? "undefined" : r;
+function d(t) {
+  const e = Object.prototype.toString.call(t).match(/^\[object (.*)\]$/)[1].toLowerCase();
+  return e === "string" && typeof t == "object" ? "object" : t === null ? "null" : t === void 0 ? "undefined" : e;
 }
-const i = (t) => f(t) === "map" ? t : new Map(Object.entries(t || {})), b = (t) => {
-  const r = [], n = i(t);
-  return n.forEach((o, s) => {
-    const e = n.get(s) || n.get(`${s}`);
-    if (e) {
-      if (typeof e == "object" && (e != null && e.text)) {
-        r.push({
-          text: e == null ? void 0 : e.text,
-          value: s,
-          label: e == null ? void 0 : e.text,
-          disabled: e.disabled
+const l = (t) => d(t) === "map" ? t : new Map(Object.entries(t || {})), g = (t) => {
+  const e = [], n = l(t);
+  return n.forEach((s, o) => {
+    const r = n.get(o) || n.get(`${o}`);
+    if (r) {
+      if (typeof r == "object" && (r != null && r.text)) {
+        e.push({
+          text: r == null ? void 0 : r.text,
+          value: o,
+          label: r == null ? void 0 : r.text,
+          disabled: r.disabled
         });
         return;
       }
-      r.push({
-        text: e,
-        label: e,
-        value: s
+      e.push({
+        text: r,
+        label: r,
+        value: o
       });
     }
-  }), r;
+  }), e;
+}, j = (t) => i(t) || t < 0 ? 0 : t, x = (t, e, n) => {
+  if (n)
+    return n;
+  const s = ["select", "date"], o = [
+    "text",
+    "textArea",
+    "number"
+  ];
+  if (e === "dateRange")
+    return [t("ap.common.chooseText"), t("ap.common.chooseText")];
+  if (s.includes(e))
+    return t("ap.common.chooseText");
+  if (o.includes(e))
+    return t("ap.common.inputText");
 };
+function O(t, e) {
+  return !t || !a(t) ? t : t(e);
+}
 export {
-  p as dataIndexToStr,
-  u as formatParamsValueType,
-  i as objectToMap,
-  d as parseFieldValue,
-  b as valueEnumToArray
+  b as dataIndexToStr,
+  f as formatParamsValueType,
+  j as getColumnOrder,
+  O as getFieldProps,
+  x as getPlaceholder,
+  l as objectToMap,
+  p as parseFieldValue,
+  g as valueEnumToArray
 };

package/es/src/ap-tag/style/ap-tag-group.css

@@ -2,5 +2,6 @@
   text-wrap: nowrap;
   display: flex;
   flex-wrap: nowrap;
+  white-space: nowrap;
   align-items: center;
 }

package/es/src/ap-tag/style/ap-tag.css

@@ -1,5 +1,6 @@
 .aplus-tag-wrapper {
   text-wrap: nowrap;
+  white-space: nowrap;
   display: inline-block;
 }
 .aplus-tag-inner-wrapper {