@aplus-frontend/ui 0.1.20 → 0.1.22

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

@@ -5,8 +5,8 @@ import "./components/index/index.vue.mjs";
 import "./components/status/index.vue.mjs";
 import i from "../ap-form/items/date/index.vue.mjs";
 import o from "../ap-form/items/date-range/index.vue.mjs";
-import t from "../ap-form/items/number/index.vue.mjs";
-import r from "../ap-form/items/radio/index.vue.mjs";
+import r from "../ap-form/items/number/index.vue.mjs";
+import t from "../ap-form/items/radio/index.vue.mjs";
 import e from "../ap-form/items/select/index.vue.mjs";
 import a from "../ap-form/items/switch/index.vue.mjs";
 import { ApFormItemText as m } from "../ap-form/items/text/index.mjs";
@@ -23,13 +23,13 @@ import x from "../ap-field/text-area/index.vue.mjs";
 import b from "../ap-field/checkbox/index.vue.mjs";
 import w from "../ap-action/group/index.vue.mjs";
 import h from "./components/index/index.vue2.mjs";
-import A from "./components/status/index.vue2.mjs";
-import k from "../ap-field/text/password.vue.mjs";
+import k from "./components/status/index.vue2.mjs";
+import A from "../ap-field/text/password.vue.mjs";
 const Q = {
   date: i,
   dateRange: o,
-  number: t,
-  radio: r,
+  number: r,
+  radio: t,
   select: e,
   switch: a,
   text: m,
@@ -48,8 +48,8 @@ const Q = {
   checkbox: b,
   action: w,
   index: h,
-  status: A,
-  password: k
+  status: k,
+  password: A
 }, X = [
   "action",
   "index"
@@ -61,7 +61,9 @@ const Q = {
   textOverflow: "ellipsis",
   whiteSpace: "normal",
   maxWidth: "100%",
-  verticalAlign: "middle"
+  verticalAlign: "middle",
+  wordBreak: "break-all",
+  flex: 1
 };
 export {
   Q as apTableFormItemMap,

package/es/src/ap-table/hooks/use-table-paging.d.ts

@@ -2,7 +2,8 @@ import { ComputedRef, Ref } from 'vue';
 import { RequestData } from '../interface';
 import { ApFormSearchFormExpose } from '../../ap-form';
 import { DataIndex } from 'ant-design-vue/es/vc-table/interface';
-import { TablePaginationConfig, FilterValue, SorterResult, TableCurrentDataSource } from 'ant-design-vue/es/table/interface';
+import { TablePaginationConfig } from 'ant-design-vue';
+import { FilterValue, SorterResult, TableCurrentDataSource } from 'ant-design-vue/es/table/interface';
 export type UseTablePagingParams<DataType, ParamsType> = {
     request: (params: any) => Promise<RequestData<DataType>>;
     /**
@@ -51,8 +52,16 @@ export type UseTablePagingParams<DataType, ParamsType> = {
      * 需要后端筛选的排序字段列表
      */
     sortFields?: ComputedRef<DataIndex[]>;
+    /**
+     * 是否显示基础分页（较少的现实内容）
+     */
+    showLessItems?: boolean;
+    /**
+     * 用于显示数据总量和当前数据顺序
+     */
+    showTotal?: boolean;
 };
-export declare const useTablePaging: <DataType = any, ParamsType = Record<string, any>>({ manual, defaultCurrent, defaultPageSize, request, defaultParams, defaultData, formatParams, paramsValueTypeMap, resetFieldsIgnores, filterFields, sortFields }: UseTablePagingParams<DataType, ParamsType>) => {
+export declare const useTablePaging: <DataType = any, ParamsType = Record<string, any>>({ manual, defaultCurrent, defaultPageSize, request, defaultParams, defaultData, formatParams, paramsValueTypeMap, resetFieldsIgnores, filterFields, sortFields, showLessItems, showTotal }: UseTablePagingParams<DataType, ParamsType>) => {
     formRef: Ref<ApFormSearchFormExpose | undefined>;
     submit: () => void;
     reset: () => void;
@@ -74,7 +83,9 @@ export declare const useTablePaging: <DataType = any, ParamsType = Record<string
             total: number;
             showSizeChanger: boolean;
             showQuickJumper: boolean;
-            showTotal: (total: number) => string;
+            showLessItems: boolean;
+            size: string;
+            showTotal: ((total: number) => import("vue/jsx-runtime").JSX.Element) | undefined;
         };
         onChange: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<any> | SorterResult<any>[], extra: TableCurrentDataSource<any>) => void;
         dataSource: DataType[];

package/es/src/ap-table/hooks/use-table-paging.mjs

@@ -1,145 +1,157 @@
-import { ref as S, nextTick as N, unref as o, onMounted as U, computed as z } from "vue";
-import { parseFieldValue as W, dataIndexToStr as X } from "../utils.mjs";
-import { isArray as Y } from "lodash-unified";
+import { ref as x, nextTick as Z, unref as o, onMounted as _, computed as V, createVNode as P } from "vue";
+import { parseFieldValue as I, dataIndexToStr as k } from "../utils.mjs";
+import { isArray as ee } from "lodash-unified";
 import "../../config-provider/index.mjs";
-import { useLocale as Z } from "../../config-provider/hooks/use-locale.mjs";
-const oe = ({
-  manual: j = !1,
-  defaultCurrent: D = 1,
-  defaultPageSize: P = 10,
-  request: R,
-  defaultParams: A = {},
-  defaultData: B = [],
-  formatParams: w,
-  paramsValueTypeMap: V,
-  resetFieldsIgnores: b,
-  filterFields: E,
-  sortFields: L
+import { useLocale as te } from "../../config-provider/hooks/use-locale.mjs";
+import { useNamespace as ae } from "../../config-provider/hooks/use-namespace.mjs";
+const le = ({
+  manual: B = !1,
+  defaultCurrent: E = 1,
+  defaultPageSize: w = 10,
+  request: M,
+  defaultParams: N = {},
+  defaultData: $ = [],
+  formatParams: C,
+  paramsValueTypeMap: y,
+  resetFieldsIgnores: O,
+  filterFields: q,
+  sortFields: J,
+  showLessItems: b = !1,
+  showTotal: L = !0
 }) => {
-  let T = 0, f = {};
-  const M = (e) => w ? w(e) : e, l = S(), i = S(D), g = S(P), { t: C } = Z(), n = S({
+  let z = 0, p = {};
+  const Q = (e) => C ? C(e) : e, l = x(), c = x(E), f = x(w), {
+    t: S
+  } = te(), {
+    b: F
+  } = ae("ap-table"), r = x({
     total: 0,
-    records: B,
+    records: $,
     loading: !1
-  }), x = async (e) => {
-    var r;
-    const a = M(e), t = Date.now();
-    T = t, n.value.loading = !0;
+  }), R = async (e) => {
+    var n;
+    const a = Q(e), t = Date.now();
+    z = t, r.value.loading = !0;
     try {
-      const s = await R({
-        ...A,
+      const s = await M({
+        ...N,
         ...a
       });
-      T === t && (n.value.total = s.total || ((r = s.data) == null ? void 0 : r.length) || 0, n.value.records = [...s.data || []]);
+      z === t && (r.value.total = s.total || ((n = s.data) == null ? void 0 : n.length) || 0, r.value.records = [...s.data || []]);
     } catch {
-      T === t && (n.value.records = [], n.value.total = 0);
+      z === t && (r.value.records = [], r.value.total = 0);
     } finally {
-      n.value.loading = !1;
+      r.value.loading = !1;
     }
-  }, y = (e) => {
+  }, j = (e) => {
     const a = {};
-    return Object.entries(e).forEach(([t, r]) => {
-      if (a[t] = r, V && r) {
-        const s = V[t];
-        s && (a[t] = W(s, r));
+    return Object.entries(e).forEach(([t, n]) => {
+      if (a[t] = n, y && n) {
+        const s = y[t];
+        s && (a[t] = I(s, n));
       }
     }), a;
-  }, q = async (e) => {
-    var r, s, d, p, m, u, h;
-    const a = ((s = (r = l.value) == null ? void 0 : r.apForm) == null ? void 0 : s.getFieldsValue()) || {}, t = {};
-    Object.entries(a).forEach(([v, c]) => {
-      b && b.indexOf(v) > -1 && (t[v] = c);
-    }), await ((p = (d = l.value) == null ? void 0 : d.apForm) == null ? void 0 : p.resetFields()), (h = (u = (m = l.value) == null ? void 0 : m.apForm) == null ? void 0 : u.setFieldsValue) == null || h.call(u, t), N(() => {
+  }, G = async (e) => {
+    var n, s, g, d, m, u, h;
+    const a = ((s = (n = l.value) == null ? void 0 : n.apForm) == null ? void 0 : s.getFieldsValue()) || {}, t = {};
+    Object.entries(a).forEach(([v, i]) => {
+      O && O.indexOf(v) > -1 && (t[v] = i);
+    }), await ((d = (g = l.value) == null ? void 0 : g.apForm) == null ? void 0 : d.resetFields()), (h = (u = (m = l.value) == null ? void 0 : m.apForm) == null ? void 0 : u.setFieldsValue) == null || h.call(u, t), Z(() => {
       e == null || e();
     });
-  }, F = (e) => {
-    f = e;
-    const a = y(e);
-    x(a);
-  }, J = (e) => {
-    F({
-      ...f,
+  }, T = (e) => {
+    p = e;
+    const a = j(e);
+    R(a);
+  }, H = (e) => {
+    T({
+      ...p,
       ...e
     });
-  }, O = () => {
+  }, D = () => {
     var a, t;
     const e = ((t = (a = l.value) == null ? void 0 : a.apForm) == null ? void 0 : t.getFieldsValue(!0)) || {};
-    i.value = 1, F({
+    c.value = 1, T({
       ...e,
       current: 1,
-      pageSize: f.pageSize || P
+      pageSize: p.pageSize || w
     });
-  }, Q = () => {
-    q(O);
-  }, G = () => {
-    F(f);
-  }, H = (e) => {
-    const a = o(n).total - e, t = Math.ceil(a / o(g)), r = o(i) > t ? t : o(i);
-    J({
-      current: r > 0 ? r : 1
+  }, K = () => {
+    G(D);
+  }, U = () => {
+    T(p);
+  }, W = (e) => {
+    const a = o(r).total - e, t = Math.ceil(a / o(f)), n = o(c) > t ? t : o(c);
+    H({
+      current: n > 0 ? n : 1
     });
-  }, $ = (e, a, t) => {
+  }, A = (e, a, t) => {
     var m, u, h, v;
-    const r = ((u = (m = l.value) == null ? void 0 : m.apForm) == null ? void 0 : u.getFieldsValue(!0)) || {};
-    i.value = e.current, g.value = e.pageSize;
-    const s = Y(t) ? [...t] : [t], d = {};
-    for (const c of s)
-      (h = o(L)) != null && h.includes(c.field) && (d[X(c.field)] = c.order);
-    const p = {};
-    for (const c of Object.keys(a))
-      (v = o(E)) != null && v.includes(c) && (p[c] = a[c]);
-    F({
-      ...r,
-      filter: p,
-      sort: d,
+    const n = ((u = (m = l.value) == null ? void 0 : m.apForm) == null ? void 0 : u.getFieldsValue(!0)) || {};
+    c.value = e.current, f.value = e.pageSize;
+    const s = ee(t) ? [...t] : [t], g = {};
+    for (const i of s)
+      (h = o(J)) != null && h.includes(i.field) && (g[k(i.field)] = i.order);
+    const d = {};
+    for (const i of Object.keys(a))
+      (v = o(q)) != null && v.includes(i) && (d[i] = a[i]);
+    T({
+      ...n,
+      filter: d,
+      sort: g,
       current: e.current,
       pageSize: e.pageSize
     });
   };
-  U(() => {
+  _(() => {
     var a, t;
     const e = ((t = (a = l.value) == null ? void 0 : a.apForm) == null ? void 0 : t.getFieldsValue(!0)) || {};
-    if (f = {
-      current: o(i),
-      pageSize: o(g),
+    if (p = {
+      current: o(c),
+      pageSize: o(f),
       ...e
-    }, !j) {
-      const r = y(f);
-      x(r);
+    }, !B) {
+      const n = j(p);
+      R(n);
     }
   });
-  const I = z(() => o(n).total === 0 ? "-" : `${o(i.value)}/${Math.ceil(
-    o(n).total / o(g)
-  )}`), K = z(() => ({
-    loading: o(n).loading,
+  const X = V(() => o(r).total === 0 ? "-" : `${o(c.value)}/${Math.ceil(o(r).total / o(f))}`), Y = V(() => ({
+    loading: o(r).loading,
     pagination: {
-      current: o(i),
-      pageSize: o(g),
-      total: o(n).total,
-      showSizeChanger: !0,
-      showQuickJumper: !0,
-      showTotal: (e) => `${C("ap.apTable.pagination.totalLeft", { total: e })} ${C(
-        "ap.apTable.pagination.totalRight",
-        { page: o(I) }
-      )}`
+      current: o(c),
+      pageSize: o(f),
+      total: o(r).total,
+      showSizeChanger: !b,
+      showQuickJumper: !b,
+      showLessItems: b,
+      size: "default",
+      showTotal: L ? (e) => P("span", {
+        class: F("pagination-total-wrapper")
+      }, [S("ap.apTable.pagination.totalLeftPrefix"), " ", P("span", {
+        class: F("pagination-count-text")
+      }, [e]), " ", S("ap.apTable.pagination.totalLeftSuffix"), P("span", {
+        class: F("pagination--total-right")
+      }, [S("ap.apTable.pagination.totalRightPrefix"), " ", P("span", {
+        class: F("pagination-count-text")
+      }, [o(X)]), " ", S("ap.apTable.pagination.totalRightSuffix")])]) : void 0
     },
-    onChange: $,
-    dataSource: o(n).records
+    onChange: A,
+    dataSource: o(r).records
   }));
   return {
     formRef: l,
-    submit: O,
-    reset: Q,
-    refresh: G,
-    refreshByDelete: H,
-    data: n,
-    current: i,
-    pageSize: g,
-    handleTableChange: $,
-    tableProps: K,
-    dataSource: z(() => o(n).records)
+    submit: D,
+    reset: K,
+    refresh: U,
+    refreshByDelete: W,
+    data: r,
+    current: c,
+    pageSize: f,
+    handleTableChange: A,
+    tableProps: Y,
+    dataSource: V(() => o(r).records)
   };
 };
 export {
-  oe as useTablePaging
+  le as useTablePaging
 };

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

@@ -162,6 +162,18 @@ export type RequestData<T> = {
     data: T[] | undefined;
     total: number;
 } & Record<string, any>;
+export type ApTablePaginationConfig = {
+    defaultCurrent?: number;
+    defaultPageSize?: number;
+    /**
+     * 是否显示较少页面内容
+     */
+    showLessItems?: boolean;
+    /**
+     * 用于显示数据总量和当前数据顺序
+     */
+    showTotal?: boolean;
+};
 export type ApTableProps<RecordType = any, ParamsType = any> = Omit<TableProps<RecordType>, 'columns' | 'pagination' | 'dataSource' | 'size' | 'rowSelection'> & {
     /**
      * 列配置
@@ -230,10 +242,7 @@ export type ApTableProps<RecordType = any, ParamsType = any> = Omit<TableProps<R
     /**
      * 是否显示分页器（特定的分页器）或者指定默认的当前页和pageSize
      */
-    pagination?: false | {
-        defaultCurrent?: number;
-        defaultPageSize?: number;
-    };
+    pagination?: false | ApTablePaginationConfig;
     /**
      * 自定义查询表单容器样式
      */

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

@@ -86,3 +86,12 @@
 .aplus-ap-table .ant-table-cell .ant-typography {
   margin-bottom: 0;
 }
+.aplus-ap-table-pagination-count-text {
+  color: var(--ap-table-pagination-total-count-color, #182948);
+}
+.aplus-ap-table-pagination--total-right {
+  padding-left: 12px;
+}
+.aplus-ap-table-pagination-total-wrapper {
+  color: var(--ap-table-pagination-total-color, #526A90);
+}