@aplus-frontend/ui 0.0.20 → 0.0.21

package/es/src/ap-form/hooks/use-watch.d.ts

@@ -2,6 +2,6 @@ import { NamePath } from 'ant-design-vue/es/form/interface';
 import { ApFormExpose } from '../interface';
 import { Ref } from 'vue';
 
-type ApFormIns = ApFormExpose;
-declare const useWatch: <ValueType = any>(name: NamePath, form?: Ref<ApFormIns | undefined>) => Ref<ValueType | undefined>;
+type ApFormIns<T> = ApFormExpose<T>;
+declare const useWatch: <ValueType = any>(name: NamePath, form?: Ref<ApFormIns<ValueType> | undefined> | undefined) => Ref<ValueType | undefined>;
 export default useWatch;

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

@@ -0,0 +1,67 @@
+import { CSSProperties } from 'vue';
+import { RequestData } from '../ap-table';
+import { Recordable } from '../type';
+
+export type ApListProps<RecordType = any, ParamsType = Recordable> = {
+    /**
+     * 列表数据源，传入后`request`和`defaultData`都将失效
+     */
+    dataSource?: RecordType[];
+    /**
+     * 是否是加载中
+     */
+    loading?: boolean;
+    /**
+     * 当点击列表项时触发
+     * @deprecated 暂未实现
+     */
+    onItem?: (record: RecordType, index: number) => void;
+    /**
+     * 依赖的额外的参数（该参数变更不会触发网络请求）
+     */
+    params?: ParamsType;
+    /**
+     * 请求数据
+     * @param params
+     * @returns
+     */
+    request?: (params: Partial<ParamsType> & {
+        pageSize?: number;
+        current?: number;
+    }) => Promise<Partial<RequestData<RecordType>>>;
+    /**
+     * 表格的默认数据源，这些数据源将会在第一次请求后被替换
+     */
+    defaultData?: RecordType[];
+    /**
+     * 表格loading状态变更后触发
+     * @param loading
+     * @returns
+     */
+    onLoadingChange?: (loading: boolean) => void;
+    /**
+     * 查询表单提交之前，一般用于自定义对查询数据进行变更
+     * @param params
+     * @returns
+     */
+    beforeSearchSubmit?: (params: Partial<ParamsType>) => any;
+    /**
+     * 是否显示分页器（特定的分页器）或者指定默认的当前页和pageSize
+     */
+    pagination?: false | {
+        defaultCurrent?: number;
+        defaultPageSize?: number;
+    };
+    /**
+     * 是否手动发起第一次网络请求
+     */
+    manual?: boolean;
+    /**
+     * List容器的自定义样式
+     */
+    containerStyle?: CSSProperties;
+    /**
+     *  底部分页器容器的样式
+     */
+    footerWarpperStyle?: CSSProperties;
+};

package/es/src/ap-list/style/index.css

@@ -0,0 +1,6 @@
+.aplus-ap-list {
+  padding: 16px 24px;
+}
+.aplus-ap-list__footer {
+  margin-top: 16px;
+}

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

@@ -1,21 +1,21 @@
-import { defineComponent as Z, useSlots as ee, computed as d, createVNode as s, mergeProps as m, unref as n, watch as ae, openBlock as i, createElementBlock as f, normalizeClass as F, normalizeStyle as R, createSlots as k, withCtx as p, Fragment as te, renderList as E, createBlock as oe, resolveDynamicComponent as re, renderSlot as x, createCommentVNode as O, createElementVNode as L, toDisplayString as ne, normalizeProps as le, guardReactiveProps as de } from "vue";
-import { Typography as se, Table as ue, Tooltip as ie } from "ant-design-vue";
-import { useToken as pe } from "ant-design-vue/es/theme/internal";
-import { ApForm as ce } from "../ap-form/index.mjs";
-import { apTableRenderItemMap as me, noRenderAsFormItemValueList as z, apTableFormItemMap as fe } from "./constants.mjs";
+import { defineComponent as ae, useSlots as te, computed as s, createVNode as d, mergeProps as f, unref as l, watch as oe, openBlock as i, createElementBlock as m, normalizeClass as F, normalizeStyle as R, createSlots as k, withCtx as p, Fragment as re, renderList as L, createBlock as le, resolveDynamicComponent as ne, renderSlot as x, createCommentVNode as E, createElementVNode as O, toDisplayString as se, normalizeProps as de, guardReactiveProps as ue } from "vue";
+import { Typography as ie, Table as pe, Tooltip as ce } from "ant-design-vue";
+import { useToken as fe } from "ant-design-vue/es/theme/internal";
+import { ApForm as me } from "../ap-form/index.mjs";
+import { apTableRenderItemMap as ge, noRenderAsFormItemValueList as z, apTableFormItemMap as ye } from "./constants.mjs";
 import "../config-provider/index.mjs";
-import { useTablePaging as ge } from "./hooks/use-table-paging.mjs";
-import { isUndefined as T, omit as ye } from "lodash-unified";
+import { useTablePaging as be } from "./hooks/use-table-paging.mjs";
+import { omit as N, isUndefined as T, isBoolean as he } from "lodash-unified";
 import "./style/ap-table.css";
-import { QuestionCircleOutlined as he } from "@ant-design/icons-vue";
-import { apColumnToColumn as be, getTableRenderType as Ce, getTableRenderProps as Se, getColumnOrder as N, updateFormProps as Fe, getFieldProps as Re, getPlaceholder as xe } from "./utils.mjs";
-import Te from "./hooks/use-table-content-height.mjs";
-import { useLocale as we } from "../config-provider/hooks/use-locale.mjs";
-import { useNamespace as Be } from "../config-provider/hooks/use-namespace.mjs";
-import { useGlobalConfig as Pe } from "../config-provider/hooks/use-global-config.mjs";
-const ve = {
+import { QuestionCircleOutlined as Ce } from "@ant-design/icons-vue";
+import { apColumnToColumn as Se, getTableRenderType as Fe, getTableRenderProps as Re, getColumnOrder as V, updateFormProps as xe, getFieldProps as Te, getPlaceholder as we } from "./utils.mjs";
+import Be from "./hooks/use-table-content-height.mjs";
+import { useLocale as Pe } from "../config-provider/hooks/use-locale.mjs";
+import { useNamespace as ve } from "../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as Ie } from "../config-provider/hooks/use-global-config.mjs";
+const ke = {
   key: 0
-}, He = /* @__PURE__ */ Z({
+}, $e = /* @__PURE__ */ ae({
   name: "ApTable",
   __name: "ap-table",
   props: {
@@ -129,150 +129,159 @@ const ve = {
       default: !1
     }
   },
-  setup(V, {
-    expose: D
+  setup(D, {
+    expose: W
   }) {
-    const t = V, w = ee(), [, W] = pe(), {
-      t: j
-    } = we(), {
+    const o = D, w = te(), [, j] = fe(), {
+      t: _
+    } = Pe(), {
       e: g,
       b: u
-    } = Be("ap-table"), _ = Pe("uiMode", "aplus"), {
-      height: A,
-      contentRef: M
-    } = Te(), y = d(() => {
-      var o;
-      let e = ((o = t.columns) == null ? void 0 : o.filter((a) => !a.hideInTable)) || [];
+    } = ve("ap-table"), A = Ie("uiMode", "aplus"), {
+      height: M,
+      contentRef: q
+    } = Be(), y = s(() => {
+      var t;
+      let e = ((t = o.columns) == null ? void 0 : t.filter((a) => !a.hideInTable)) || [];
       return e = e.map((a) => ({
-        ...be(a),
+        ...N(Se(a), ["ellipsis"]),
         customRender({
           value: r,
-          ...l
+          ...n
         }) {
-          const C = Ce(a), I = me[C], Y = Se(a, {
+          const C = Fe(a), I = ge[C], ee = Re(a, {
             value: r,
-            ...l
+            ...n
           });
-          let S = U(a, r, s(I, m(Y, {
+          let S = X(a, r, d(I, f(ee, {
             mode: "read"
           }), null));
           return a.customRender && (S = a.customRender({
             value: r,
-            ...l,
+            ...n,
             column: a,
             originalNode: S
           })), S;
         }
       })), e;
-    }), B = d(() => {
-      var e, o, a;
-      return ((a = (o = (e = t.columns) == null ? void 0 : e.filter((r) => !r.hideInSearch && r.dataIndex && (r.valueType || r.customRenderFormItem) && !z.includes(r.valueType))) == null ? void 0 : o.sort((r, l) => {
-        let C = N(r.order);
-        return N(l.order) - C;
+    }), B = s(() => {
+      var e, t, a;
+      return ((a = (t = (e = o.columns) == null ? void 0 : e.filter((r) => !r.hideInSearch && r.dataIndex && (r.valueType || r.customRenderFormItem) && !z.includes(r.valueType))) == null ? void 0 : t.sort((r, n) => {
+        let C = V(r.order);
+        return V(n.order) - C;
       })) == null ? void 0 : a.map((r) => {
-        const l = Fe(r, Re(r.fieldProps, {}));
+        const n = xe(r, Te(r.fieldProps, {}));
         return {
           ...r,
           fieldProps: {
             label: r.title,
             name: r.dataIndex,
-            ...l || {},
+            ...n || {},
             // 格式化placeholder
-            placeholder: xe(j, r.valueType, l == null ? void 0 : l.placeholder)
+            placeholder: we(_, r.valueType, n == null ? void 0 : n.placeholder)
           }
         };
       })) || [];
-    }), q = d(() => n(y).filter((e) => e.sorter === !0).map((e) => e.dataIndex)), H = d(() => n(y).filter((e) => e.filters && !e.onFilter).map((e) => e.dataIndex)), {
-      formRef: h,
+    }), H = s(() => l(y).filter((e) => e.sorter === !0).map((e) => e.dataIndex)), K = s(() => l(y).filter((e) => e.filters && !e.onFilter).map((e) => e.dataIndex)), {
+      formRef: b,
       submit: P,
       reset: v,
       tableProps: c,
-      handleTableChange: K,
-      data: b
-    } = ge({
+      handleTableChange: $,
+      data: h
+    } = be({
       async request(e) {
         var a, r;
-        const o = await ((a = t.request) == null ? void 0 : a.call(t, e));
-        return (r = t.onLoad) == null || r.call(t, (o == null ? void 0 : o.data) || []), {
-          data: (o == null ? void 0 : o.data) || [],
-          total: (o == null ? void 0 : o.total) || 0
+        const t = await ((a = o.request) == null ? void 0 : a.call(o, e));
+        return (r = o.onLoad) == null || r.call(o, (t == null ? void 0 : t.data) || []), {
+          data: (t == null ? void 0 : t.data) || [],
+          total: (t == null ? void 0 : t.total) || 0
         };
       },
-      filterFields: n(H),
-      sortFields: n(q),
-      defaultParams: t.params,
-      defaultData: t.defaultData,
-      manual: t.manual,
-      defaultCurrent: t.pagination ? t.pagination.defaultCurrent : void 0,
-      defaultPageSize: t.pagination ? t.pagination.defaultPageSize : void 0,
-      formatParams: t.beforeSearchSubmit
-    }), $ = d(() => {
+      filterFields: l(K),
+      sortFields: l(H),
+      defaultParams: o.params,
+      defaultData: o.defaultData,
+      manual: o.manual,
+      defaultCurrent: o.pagination ? o.pagination.defaultCurrent : void 0,
+      defaultPageSize: o.pagination ? o.pagination.defaultPageSize : void 0,
+      formatParams: o.beforeSearchSubmit
+    }), G = s(() => {
       var e;
-      return t.scroll ? t.scroll : t.adaptive && (b.value.total > 0 || (e = t.dataSource) != null && e.length) ? {
-        y: n(A),
+      return o.scroll ? o.scroll : o.adaptive && (h.value.total > 0 || (e = o.dataSource) != null && e.length) ? {
+        y: l(M),
         x: "100%"
       } : {
         x: !0
       };
-    }), G = d(() => {
-      const e = n(c), o = T(t.dataSource) ? e : {
+    }), Q = s(() => {
+      var e;
+      if (o.tableLayout)
+        return o.tableLayout;
+      if ((e = o.columns) != null && e.some((t) => t.ellipsis))
+        return "fixed";
+    }), U = s(() => {
+      const e = l(c), t = T(o.dataSource) ? e : {
         ...e,
-        dataSource: t.dataSource,
-        onChange: t.onChange
+        dataSource: o.dataSource,
+        onChange: o.onChange
       };
       return {
-        ...t,
         ...o,
-        loading: T(t.loading) ? n(c).loading : t.loading,
-        pagination: t.pagination === !1 ? !1 : n(c).pagination,
-        scroll: n($)
+        ...t,
+        loading: T(o.loading) ? l(c).loading : o.loading,
+        pagination: o.pagination === !1 ? !1 : l(c).pagination,
+        scroll: l(G)
       };
-    }), Q = d(() => [u(), t.card ? null : u("wrapper"), t.adaptive ? u("adaptive") : null].filter(Boolean));
-    function U(e, o, a) {
-      return z.includes(e.valueType) ? a : e.copyable || e.ellipsis ? s(se.Text, {
+    }), J = s(() => [u(), o.card ? null : u("wrapper"), o.adaptive ? u("adaptive") : null].filter(Boolean));
+    function X(e, t, a) {
+      return z.includes(e.valueType) ? a : e.copyable || e.ellipsis ? d(ie.Paragraph, {
         copyable: e.copyable ? {
-          text: o,
+          text: t,
           tooltip: !1
         } : !1,
-        ellipsis: e.ellipsis ? {
-          tooltip: o
+        ellipsis: e.ellipsis ? he(e.ellipsis) ? {
+          tooltip: t
+        } : {
+          ...e.ellipsis,
+          tooltip: t
         } : !1,
-        content: a
+        content: e.ellipsis ? t : a
       }, null) : a;
     }
-    ae(() => n(b).loading, (e) => {
-      var o;
-      (o = t.onLoadingChange) == null || o.call(t, e);
+    oe(() => l(h).loading, (e) => {
+      var t;
+      (t = o.onLoadingChange) == null || t.call(o, e);
     });
-    function J(e) {
-      var o, a, r;
-      (r = (a = (o = h.value) == null ? void 0 : o.apForm) == null ? void 0 : a.setFieldsValue) == null || r.call(a, e);
+    function Y(e) {
+      var t, a, r;
+      (r = (a = (t = b.value) == null ? void 0 : t.apForm) == null ? void 0 : a.setFieldsValue) == null || r.call(a, e);
     }
-    function X() {
-      var e, o, a;
-      return (a = (o = (e = h.value) == null ? void 0 : e.apForm) == null ? void 0 : o.getFieldsValue) == null ? void 0 : a.call(o, !0);
+    function Z() {
+      var e, t, a;
+      return (a = (t = (e = b.value) == null ? void 0 : e.apForm) == null ? void 0 : t.getFieldsValue) == null ? void 0 : a.call(t, !0);
     }
-    return D({
+    return W({
       submit: () => P(),
       reset: () => v(),
-      setSearchFormValues: J,
-      getSearchFormValues: X,
-      dataSource: d(() => n(b).records)
-    }), (e, o) => (i(), f("div", {
-      class: F(Q.value)
-    }, [n(T)(e.dataSource) && e.searchForm !== !1 && B.value.length > 0 ? (i(), f("div", {
+      setSearchFormValues: Y,
+      getSearchFormValues: Z,
+      dataSource: s(() => l(h).records)
+    }), (e, t) => (i(), m("div", {
+      class: F(J.value)
+    }, [l(T)(e.dataSource) && e.searchForm !== !1 && B.value.length > 0 ? (i(), m("div", {
       key: 0,
-      class: F(e.card ? n(g)("search-wrapper") : null),
+      class: F(e.card ? l(g)("search-wrapper") : null),
       style: R(e.searchFormWrapperStyle)
-    }, [s(n(ce).SearchForm, m(e.searchForm || {}, {
+    }, [d(l(me).SearchForm, f(e.searchForm || {}, {
       ref_key: "formRef",
-      ref: h,
+      ref: b,
       "custom-reset": "",
-      onSubmit: n(P),
-      onReset: n(v),
-      "submit-loading": n(c).loading
+      onSubmit: l(P),
+      onReset: l(v),
+      "submit-loading": l(c).loading
     }), k({
-      default: p(() => [(i(!0), f(te, null, E(B.value, (a) => (i(), oe(re(a.customRenderFormItem ? a.customRenderFormItem(a) : n(fe)[a.valueType || "text"]), m({
+      default: p(() => [(i(!0), m(re, null, L(B.value, (a) => (i(), le(ne(a.customRenderFormItem ? a.customRenderFormItem(a) : l(ye)[a.valueType || "text"]), f({
         key: a.dataIndex,
         ref_for: !0
       }, a.fieldProps || {}, {
@@ -283,39 +292,40 @@ const ve = {
       name: "extra",
       fn: p(() => [x(e.$slots, "searchFormExtra")]),
       key: "0"
-    } : void 0]), 1040, ["onSubmit", "onReset", "submit-loading"])], 6)) : O("", !0), L("div", {
+    } : void 0]), 1040, ["onSubmit", "onReset", "submit-loading"])], 6)) : E("", !0), O("div", {
       ref_key: "contentRef",
-      ref: M,
-      class: F([n(g)("table-wrapper"), e.card ? n(g)("table-wrapper-card") : null]),
+      ref: q,
+      class: F([l(g)("table-wrapper"), e.card ? l(g)("table-wrapper-card") : null]),
       style: R(e.tableWrapperStyle)
-    }, [x(e.$slots, "title"), s(n(ue), m({
-      class: n(_) === "admin" ? n(u)("table-admin") : n(u)("table")
-    }, G.value, {
-      onChange: n(K),
+    }, [x(e.$slots, "title"), d(l(pe), f({
+      class: l(A) === "admin" ? l(u)("table-admin") : l(u)("table")
+    }, U.value, {
+      "table-layout": Q.value,
+      onChange: l($),
       columns: y.value
     }), k({
       headerCell: p(({
         column: a,
         title: r
-      }) => [a.tooltip ? (i(), f("span", ve, [L("span", null, ne(r), 1), s(n(ie), {
+      }) => [a.tooltip ? (i(), m("span", ke, [O("span", null, se(r), 1), d(l(ce), {
         title: a.tooltip,
         placement: "bottom"
       }, {
-        default: p(() => [s(n(he), {
+        default: p(() => [d(l(Ce), {
           style: R({
             paddingLeft: "4px",
-            color: n(W).colorPrimary
+            color: l(j).colorPrimary
           })
         }, null, 8, ["style"])]),
         _: 2
-      }, 1032, ["title"])])) : O("", !0)]),
+      }, 1032, ["title"])])) : E("", !0)]),
       _: 2
-    }, [E(n(ye)(w, ["title", "searchFormExtra"]), (a, r) => ({
+    }, [L(l(N)(w, ["title", "searchFormExtra"]), (a, r) => ({
       name: r,
-      fn: p((l) => [x(e.$slots, r, le(de(l || {})))])
-    }))]), 1040, ["class", "onChange", "columns"])], 6)], 2));
+      fn: p((n) => [x(e.$slots, r, de(ue(n || {})))])
+    }))]), 1040, ["class", "table-layout", "onChange", "columns"])], 6)], 2));
   }
 });
 export {
-  He as default
+  $e as default
 };

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

@@ -6,6 +6,7 @@ import { Recordable } from '../type';
 import { ComputedRef, CSSProperties, VNode } from 'vue';
 import { ApActionGroupProps } from '../ap-action';
 import { ApTableIndexProps } from './components/interface';
+import { EllipsisConfig } from 'ant-design-vue/es/typography/Base';
 
 export type ValueEnumType = {
     text: string;
@@ -56,7 +57,7 @@ export type ApTableValueFields = {
 };
 export type ApTableValueTypes = keyof ApTableValueFields;
 export type ValueEnum = Record<string, ValueEnumType>;
-export type ExtraProColumnType<T> = Omit<ColumnType<T>, 'children' | 'filters' | 'customRender'> & {
+export type ExtraProColumnType<T> = Omit<ColumnType<T>, 'children' | 'filters' | 'customRender' | 'ellipsis'> & {
     sorter?: string | boolean | CompareFn<T> | {
         compare?: CompareFn<T>;
         /** Config multiple sorter order priority */
@@ -77,6 +78,10 @@ export type ApColumnType<RecordType = any, ValueType extends ApTableValueTypes =
      * 是否可以复制
      */
     copyable?: boolean;
+    /**
+     * 是否省略自动溢出，自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等
+     */
+    ellipsis?: boolean | EllipsisConfig;
     /**
      * 是否搜索表单中隐藏
      */
@@ -248,6 +253,3 @@ export type ApTableExpose<SearchParamsType = Recordable, RecordType = any> = {
      */
     dataSource: ComputedRef<RecordType>;
 };
-export type FixedApColumnType<RecordType = any, ValueType extends ApTableValueTypes = ApTableValueTypes> = Omit<ApColumnType<RecordType, ValueType>, 'filters'> & {
-    filters?: ColumnType<RecordType>['filters'];
-};

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

@@ -85,3 +85,22 @@
 .aplus-ap-table .ant-table-small .ant-table-placeholder .ant-table-cell {
   padding: 0 !important;
 }
+.aplus-ap-table .ant-table-column-sorters {
+  justify-content: unset;
+}
+.aplus-ap-table .ant-table-column-sorters .ant-table-column-title {
+  flex: unset;
+}
+.aplus-ap-table .ant-table-filter-column {
+  justify-content: unset;
+}
+.aplus-ap-table .ant-table-filter-column .ant-table-column-title {
+  flex: unset;
+}
+.aplus-ap-table .ant-table-filter-column .ant-table-filter-trigger {
+  margin-left: 2px;
+  padding-left: 2px;
+}
+.aplus-ap-table .ant-table-cell .ant-typography {
+  margin-bottom: 0;
+}