@aplus-frontend/ui 0.0.1-beta.9 → 0.0.1

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

@@ -0,0 +1,55 @@
+import "../ap-action/index.mjs";
+import "../ap-field/index.mjs";
+import "../ap-form/index.mjs";
+import "./components/index/index.vue.mjs";
+import m from "../ap-form/items/date/index.vue.mjs";
+import o from "../ap-form/items/date-range/index.vue.mjs";
+import r from "../ap-form/items/number/index.vue.mjs";
+import i from "../ap-form/items/radio/index.vue.mjs";
+import t from "../ap-form/items/select/index.vue.mjs";
+import f from "../ap-form/items/switch/index.vue.mjs";
+import a from "../ap-form/items/text/index.vue.mjs";
+import _ from "../ap-form/items/text-area/index.vue.mjs";
+import c from "../ap-form/items/checkbox/index.vue.mjs";
+import e from "../ap-field/date/index.vue.mjs";
+import n from "../ap-field/date-range/index.vue.mjs";
+import p from "../ap-field/number/index.vue.mjs";
+import s from "../ap-field/radio/index.vue.mjs";
+import $ from "../ap-field/select/index.vue.mjs";
+import d from "../ap-field/switch/index.vue.mjs";
+import x from "../ap-field/text/index.vue.mjs";
+import b from "../ap-field/text-area/index.vue.mjs";
+import h from "../ap-field/checkbox/index.vue.mjs";
+import l from "../ap-action/group/index.vue.mjs";
+import R from "./components/index/index.vue2.mjs";
+const N = {
+  date: m,
+  dateRange: o,
+  number: r,
+  radio: i,
+  select: t,
+  switch: f,
+  text: a,
+  textArea: _,
+  checkbox: c
+}, O = {
+  date: e,
+  dateRange: n,
+  number: p,
+  radio: s,
+  select: $,
+  switch: d,
+  text: x,
+  textArea: b,
+  checkbox: h,
+  action: l,
+  index: R
+}, P = [
+  "action",
+  "index"
+];
+export {
+  N as apTableFormItemMap,
+  O as apTableRenderItemMap,
+  P as noRenderAsFormItemValueList
+};

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

@@ -0,0 +1,82 @@
+import { Ref, ComputedRef } from 'vue';
+import { RequestData } from '../interface';
+import { ApFormSearchFormExpose } from '../../ap-form';
+import { TablePaginationConfig, FilterValue, SorterResult, TableCurrentDataSource } from 'ant-design-vue/es/table/interface';
+
+export type UseTablePagingParams<DataType, ParamsType> = {
+    request: (params: any) => Promise<RequestData<DataType>>;
+    /**
+     * 是否手动执行，页面初始化后不执行网络请求，需要手动触发
+     * @param params
+     * @returns
+     */
+    manual?: boolean;
+    /**
+     * @description 默认情况下，请求第几页
+     * @default 1
+     */
+    defaultCurrent?: number;
+    /**
+     * 默认每页请求的数据条数
+     * @default 10
+     */
+    defaultPageSize?: number;
+    /**
+     * 额外的默认请求参数，这个参数变更不会触发网络请求
+     */
+    defaultParams?: ParamsType;
+    /**
+     * 默认的数据源
+     */
+    defaultData?: DataType[];
+    /**
+     * 数据请求前格式化请求参数
+     * @param values
+     * @returns
+     */
+    formatParams?: (values: any) => any;
+    /**
+     * 特殊类型参数类型对照表（会根据该对照表运行默认的参数格式化）
+     */
+    paramsValueTypeMap?: Record<string, any>;
+    /**
+     * 重设表单需要忽略的字段
+     */
+    resetFieldsIgnores?: string[];
+    /**
+     * 需要后端筛选的字段列表
+     */
+    filterFields?: string[];
+    /**
+     * 需要后端筛选的排序字段列表
+     */
+    sortFields?: string[];
+};
+export declare const useTablePaging: <DataType = any, ParamsType = Record<string, any>>({ manual, defaultCurrent, defaultPageSize, request, defaultParams, defaultData, formatParams, paramsValueTypeMap, resetFieldsIgnores, filterFields, sortFields }: UseTablePagingParams<DataType, ParamsType>) => {
+    formRef: Ref<ApFormSearchFormExpose | undefined>;
+    submit: () => void;
+    reset: () => void;
+    refresh: () => void;
+    refreshByDelete: (n: number) => void;
+    data: Ref<{
+        total: number;
+        records: DataType[];
+        loading: boolean;
+    }>;
+    current: Ref<number>;
+    pageSize: Ref<number>;
+    handleTableChange: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<any> | SorterResult<any>[], extra: TableCurrentDataSource<any>) => void;
+    tableProps: ComputedRef<{
+        loading: boolean;
+        pagination: {
+            current: number;
+            pageSize: number;
+            total: number;
+            showSizeChanger: boolean;
+            showQuickJumper: boolean;
+            showTotal: (total: number) => string;
+        };
+        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

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

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

@@ -0,0 +1,5 @@
+import { default as ApTable } from './ap-table.vue';
+
+export { ApTable };
+export * from './interface';
+export * from './hooks/use-table-paging';

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

@@ -0,0 +1,6 @@
+import "./ap-table.vue2.mjs";
+import "./interface.mjs";
+import { useTablePaging as m } from "./hooks/use-table-paging.mjs";
+export {
+  m as useTablePaging
+};

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

@@ -0,0 +1,184 @@
+import { ColumnType, TableProps } from 'ant-design-vue/es/table';
+import { CompareFn, SortOrder } from 'ant-design-vue/es/table/interface';
+import { ApFormSearchFormProps } from '../ap-form';
+import { ApFormItemCheckboxProps, ApFormItemDateProps, ApFormItemDateRangeProps, ApFormItemNumberProps, ApFormItemRadioProps, ApFormItemSelectProps, ApFormItemSwitchProps, ApFormItemTextAreaProps, ApFormItemTextProps } from 'src/ap-form/items/interface';
+import { Recordable } from '../type';
+import { CSSProperties } from 'vue';
+import { ApActionGroupProps } from '../ap-action';
+import { ApTableIndexProps } from './components/interface';
+
+type ValueEnmuTyType = {
+    text: string;
+    status?: string;
+    color?: string;
+    disabled?: boolean;
+};
+/**
+ * ApTable默认支持的值类型（将会用于表单生成和默认值格式化）
+ */
+export type ApTableValueFields = {
+    /** 日期选择器 */
+    date: ApFormItemDateProps;
+    /** 日期范围选择器 */
+    dateRange: ApFormItemDateRangeProps;
+    /** 数字输入框 */
+    number: ApFormItemNumberProps;
+    /** 单选 */
+    radio: ApFormItemRadioProps;
+    /** 下拉选择 */
+    select: ApFormItemSelectProps;
+    /** 开关 */
+    switch: ApFormItemSwitchProps;
+    /** 文本输入 */
+    text: ApFormItemTextProps;
+    /** 多行文本输入 */
+    textArea: ApFormItemTextAreaProps;
+    /** 多选 */
+    checkbox: ApFormItemCheckboxProps;
+    /**
+     * 操作列
+     */
+    action: ApActionGroupProps;
+    /**
+     * 索引列
+     */
+    index: ApTableIndexProps;
+};
+export type ValueEnum = Record<string, ValueEnmuTyType>;
+export type ExtraProColumnType<T> = Omit<ColumnType<T>, 'children'> & {
+    sorter?: string | boolean | CompareFn<T> | {
+        compare?: CompareFn<T>;
+        /** Config multiple sorter order priority */
+        multiple?: number;
+    };
+};
+export type ApColumnType<ValueType extends keyof ApTableValueFields = 'text'> = ExtraProColumnType<any> & {
+    children?: ApColumnType[];
+    /**
+     * 表单项所占据的格子数（1-24格）
+     */
+    span?: number;
+    /**
+     * 在title之后展示一个icon并触发tooltip
+     */
+    tooltip?: string;
+    /**
+     * 是否可以复制
+     */
+    copyable?: boolean;
+    /**
+     * 是否搜索表单中隐藏
+     */
+    hideInSearch?: boolean;
+    /**
+     * 是否在表格中隐藏
+     */
+    hideInTable?: boolean;
+    /**
+     * 值的枚举，会自动转化把值当成 key 来取出要显示的内容（也会作为select的选项）
+     * @deprecated 未实现请使用`fieldProps.options`
+     */
+    valueEnum?: ValueEnum;
+    /**
+     * 自定义查询表单渲染
+     */
+    customRenderFormItem?: (config: ApColumnType) => any;
+    /**
+     * 指定值类型（将会用于默认渲染和查询表单生成）
+     */
+    valueType?: keyof ApTableValueFields;
+    /**
+     * 值类型额外配置的参数（用于查询表单渲染）
+     */
+    fieldProps?: ApTableValueFields[ValueType];
+};
+export type RequestData<T> = {
+    data: T[] | undefined;
+    total: number;
+} & Record<string, any>;
+export type ApTableProps<RecordType = any, ParamsType = any, ValueType extends keyof ApTableValueFields = 'text'> = Omit<TableProps<RecordType>, 'columns' | 'pagination' | 'dataSource' | 'size'> & {
+    /**
+     * 列配置
+     */
+    columns?: ApColumnType<any>[];
+    /**
+     * 是否启用卡片样式
+     */
+    card?: boolean;
+    /**
+     * request额外请求的参数，这些参数在变更时将不会自动发起网络请求
+     */
+    params?: ParamsType;
+    /**
+     * 自定义渲染搜索表单
+     * @param props
+     * @param defaultDom
+     * @returns
+     */
+    searchFormRender?: (props: ApTableProps<RecordType, ParamsType, ValueType>, defaultDom: any) => any;
+    /**
+     * 请求获取dataSource
+     * @param params
+     * @returns
+     */
+    request?: (params: ParamsType & {
+        pageSize?: number;
+        current?: number;
+        sort?: Record<string, SortOrder>;
+        filter?: Recordable<any>;
+    }) => Promise<Partial<RequestData<RecordType>>>;
+    /**
+     * 数据加载完成后触发
+     * @param data
+     * @returns
+     */
+    onLoad?: (data: RecordType[]) => void;
+    /**
+     * 表格的默认数据源，这些数据源将会在第一次请求后被替换
+     */
+    defaultData?: RecordType[];
+    /**
+     * 表格loading状态变更后触发
+     * @param loading
+     * @returns
+     */
+    onLoadingChange?: (loading: boolean) => void;
+    /**
+     * 查询表单配置，设置为false表示不渲染查询表单
+     */
+    searchForm?: false | ApFormSearchFormProps;
+    /**
+     * 查询表单提交之前，一般用于自定义对查询数据进行变更
+     * @param params
+     * @returns
+     */
+    beforeSearchSubmit?: (params: Partial<ParamsType>) => any;
+    /**
+     * 是否显示分页器（特定的分页器）或者指定默认的当前页和pageSize
+     */
+    pagination?: false | {
+        defaultCurrent?: number;
+        defaultPageSize?: number;
+    };
+    /**
+     * 自定义查询表单容器样式
+     */
+    searchFormWrapperStyle?: CSSProperties;
+    /**
+     * 自定义表格样式
+     */
+    tableWrapperStyle?: CSSProperties;
+    /**
+     * 是否手动发起第一次网络请求
+     */
+    manual?: boolean;
+    /**
+     * 表格尺寸（只支持中等大小和小尺寸）
+     */
+    size?: 'middle' | 'small';
+};
+export type ApTableExpose = {
+    submit: () => void;
+    reset: () => void;
+};
+export {};

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,46 @@
+.aplus-ap-table-wrapper {
+  padding: 16px;
+  background-color: #fff;
+}
+.aplus-ap-table__search-wrapper {
+  padding: 16px;
+  padding-bottom: 0;
+  background-color: #fff;
+  margin-bottom: 16px;
+}
+.aplus-ap-table__table-wrapper {
+  padding: 16px;
+  background-color: #fff;
+}
+.aplus-ap-table-table .ant-pagination {
+  margin-bottom: 0 !important;
+}
+.aplus-ap-table-table .ant-pagination .ant-pagination-total-text {
+  flex: 1;
+}
+.aplus-ap-table-table tr > th.ant-table-cell {
+  background-color: #F2F6F9;
+  border-bottom-color: #E9EDF3;
+}
+.aplus-ap-table-table tr > th.ant-table-cell::before {
+  display: none;
+}
+.aplus-ap-table-table tr > td.ant-table-cell {
+  border-top-color: #E9EDF3;
+}
+.aplus-ap-table-table-admin .ant-pagination {
+  margin-bottom: 0 !important;
+}
+.aplus-ap-table-table-admin .ant-pagination .ant-pagination-total-text {
+  flex: 1;
+}
+.aplus-ap-table-table-admin tr > th.ant-table-cell {
+  background-color: #FAFAFA;
+  border-bottom-color: #E9E9E9;
+}
+.aplus-ap-table-table-admin tr > th.ant-table-cell::before {
+  display: none;
+}
+.aplus-ap-table-table-admin tr > td.ant-table-cell {
+  border-top-color: #E9E9E9;
+}

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

@@ -0,0 +1,14 @@
+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;
+/**
+ * 解析数值
+ * @param t 值类型
+ * @param value 值
+ */
+export declare const parseFieldValue: (t: FieldValueType, value: any) => any;
+/**
+ * 对表格的dataIndex进行拼接处理
+ * @param dataIndex
+ * @returns
+ */
+export declare function dataIndexToStr(dataIndex: string | number | (string | number)[]): string | number;

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

@@ -0,0 +1,35 @@
+import { isObject as t, isArray as c } from "lodash-unified";
+const f = (e, r, s) => {
+  let a = {};
+  return t(e) ? Object.keys(e).forEach((n) => {
+    t(e[n]) ? a[n] = f(e[n], r[n], s) : a[n] = s(e[n], r);
+  }) : a = s(e, r), a;
+}, u = (e, r) => {
+  switch (e) {
+    case "dayjs":
+      return r.valueOf();
+    case "dayjsRange":
+      return r.map((s) => s.valueOf());
+    case "dayjsDayRange": {
+      const [s, a] = r;
+      return [s.startOf("day").valueOf(), a.endOf("day").valueOf()];
+    }
+    case "multiple":
+    case "multipleNumber":
+      return c(r) ? r : [r];
+    case "boolean":
+      return r;
+    case "object":
+      return r;
+    default:
+      return r;
+  }
+};
+function O(e) {
+  return c(e) ? e.join(".") : e;
+}
+export {
+  O as dataIndexToStr,
+  f as formatParamsValueType,
+  u as parseFieldValue
+};

package/es/src/ap-tag/ap-tag-group.vue.d.ts

@@ -0,0 +1,34 @@
+import { ApTagGroupProps, ApTagProps } from './interface';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+
+declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ApTagGroupProps>, {
+    list: () => ApTagProps[];
+    space: number;
+    ellipsisColor: string;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ApTagGroupProps>, {
+    list: () => ApTagProps[];
+    space: number;
+    ellipsisColor: string;
+}>>>, {
+    space: number;
+    list: ApTagProps[];
+    ellipsisColor: string;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};