@aplus-frontend/ui 0.6.0-beta.8 → 0.6.0

package/es/src/ap-grid/hooks/use-inner-params.mjs

@@ -1,41 +1,30 @@
-import { DEFAULT_PAGE_SIZE as g, DEFAULT_CURRENT as E } from "../../ap-table/hooks/use-table-paging-ng.mjs";
-const a = {
+const e = {
   asc: "ascend",
   desc: "descend"
-}, v = (o) => {
-  const t = {};
-  let c = {};
-  const s = {
-    current: E,
-    pageSize: g
-  };
-  function i(n) {
-    o == null || o(s, c, t, {
-      currentDataSource: [],
-      action: n
+}, d = (t) => ({
+  sortChangeEvent: ({
+    field: o,
+    order: n,
+    column: s
+  }) => {
+    t(void 0, void 0, {
+      column: s,
+      field: o,
+      order: n ? e[n] : null
     });
+  },
+  filterChangeEvent: ({
+    filterList: o
+  }) => {
+    const n = {};
+    for (const s of o)
+      n[s.field] = s.values;
+    t == null || t(void 0, n);
+  },
+  paginationChangeEvent: (o, n) => {
+    t({ current: o, pageSize: n });
   }
-  return {
-    sortChangeEvent: ({
-      field: n,
-      order: e,
-      column: r
-    }) => {
-      t.column = r, t.order = e ? a[e] : null, t.field = n, i("sort");
-    },
-    filterChangeEvent: ({
-      filterList: n
-    }) => {
-      const e = {};
-      for (const r of n)
-        e[r.field] = r.values;
-      c = e, i("filter");
-    },
-    paginationChangeEvent: (n, e) => {
-      s.current = n, s.pageSize = e, i("paginate");
-    }
-  };
-};
+});
 export {
-  v as useInnerParams
+  d as useInnerParams
 };

package/es/src/ap-grid/hooks/use-render-columns.mjs

@@ -1,11 +1,11 @@
-import { ref as a, watch as u, computed as m, unref as p } from "vue";
-import { useToken as i } from "@aplus-frontend/antdv/es/theme/internal";
+import { ref as a, watch as u, computed as p, unref as i } from "vue";
+import { useToken as m } from "@aplus-frontend/antdv/es/theme/internal";
 import "../../config-provider/index.mjs";
 import { renderWithColumns as l } from "../utils/renderer.mjs";
 import { useNamespace as s } from "../../config-provider/hooks/use-namespace.mjs";
 import { useGlobalConfig as f } from "../../config-provider/hooks/use-global-config.mjs";
-const w = (e) => {
-  const [, o] = i(), { be: t } = s("ap-grid"), n = f("valueTypeMap"), r = a(Date.now());
+const h = (e) => {
+  const [, o] = m(), { be: t } = s("ap-grid"), n = f("valueTypeMap"), r = a(Date.now());
   return u(
     () => e.value,
     () => {
@@ -15,15 +15,15 @@ const w = (e) => {
       deep: !0
     }
   ), {
-    renderConfig: m(() => l(
+    renderConfig: p(() => l(
       e.value,
-      o.value.colorPrimary,
+      o.value.colorTextTertiary,
       t("table-header", "title"),
-      p(n)
+      i(n)
     )),
     updateSignal: r
   };
 };
 export {
-  w as useRenderColumns
+  h as useRenderColumns
 };

package/es/src/ap-grid/hooks/use-row-selection.d.ts

@@ -0,0 +1,100 @@
+import { TableRowSelection } from '@aplus-frontend/antdv/lib/table/interface';
+import { ComputedRef, Ref } from 'vue';
+import { ApTableProps, ApTableRowSelection } from '../../ap-table';
+import { Recordable } from '../../type';
+export interface RowSelectionReturnType<RecordType = any> {
+    rowSelection: ComputedRef<TableRowSelection<RecordType>>;
+    selectedRows: Ref<Partial<RecordType>[]>;
+    /**
+     * 选中某行
+     * @param item
+     * @returns
+     */
+    select: (item: RecordType) => void;
+    /**
+     * 取消选中某行
+     * @param item
+     * @returns
+     */
+    unSelect: (item: RecordType) => void;
+    /**
+     * 某行是否被选中
+     * @param item
+     * @returns
+     */
+    isSelected: (item: RecordType) => boolean;
+    /**
+     * 选中当前所有数据
+     * @returns
+     */
+    selectAll: () => void;
+    /**
+     * 取消选中当前所有数据
+     * @returns
+     */
+    unSelectAll: () => void;
+    /**
+     * 清空所有选中
+     * @returns
+     */
+    clearAll: () => void;
+    /**
+     * 切换某行的选中状态
+     * @param item
+     * @returns
+     */
+    toggleSelect: (item: RecordType) => void;
+    /**
+     * 多项选中
+     * @param items
+     * @returns
+     */
+    selectMulti: (items: RecordType[]) => void;
+    /**
+     * 多项反选
+     * @param items
+     * @returns
+     */
+    unSelectMulti: (items: RecordType[]) => void;
+    /**
+     * VxeTable 表格checkbox-change事件
+     * @param item
+     * @param select
+     * @param partRowData
+     * @returns
+     */
+    selectChange: (item: RecordType, select: boolean, partRowData: RecordType[]) => void;
+    /**
+     * VxeTable 表格checkbox-all事件
+     * @param item
+     * @param select
+     * @param partRowData
+     * @returns
+     */
+    selectAllChange: (select: boolean, partRowData: RecordType[]) => void;
+    /**
+     * VxeTable 表格checkbox-range-change事件
+     * @param selected
+     * @param partRowData
+     * @returns
+     */
+    selectRangeChange: (selected: RecordType[], partRowData: RecordType[]) => void;
+    /**
+     * 通过key勾选多条数据
+     * @param keys
+     * @returns
+     */
+    selectMultiByKeys: (keys: (string | number)[]) => void;
+}
+type RowSelectionParams<T> = Omit<ApTableRowSelection<T>, 'mode'> & {
+    /**
+     * 数据源（如果是后端分页，则表示当页数据，否则是全量数据）
+     */
+    dataSource: Ref<T[]>;
+    /**
+     * 同Table的rowkey
+     */
+    rowKey: ApTableProps['rowKey'];
+};
+declare const useTableRowSelection: <RecordType = Recordable>(props: RowSelectionParams<RecordType>) => RowSelectionReturnType<RecordType>;
+export default useTableRowSelection;

package/es/src/ap-grid/hooks/use-row-selection.mjs

@@ -0,0 +1,122 @@
+import { ref as k, computed as v, unref as a } from "vue";
+import { isFunction as i, cloneDeep as M } from "lodash-unified";
+function m(u, c) {
+  return !(c != null && c.length) || i(u) ? [] : c.map((f) => ({ [u]: f }));
+}
+const T = (u) => {
+  u.defaultSelectedRowKeys;
+  const c = k(
+    m(u.rowKey, u.defaultSelectedRowKeys)
+  );
+  function f(e, t) {
+    c.value = t;
+  }
+  const l = (e) => i(u.rowKey) ? u.rowKey(e) : e[u.rowKey], s = v(() => {
+    const e = /* @__PURE__ */ new Map();
+    return a(c).forEach((t) => {
+      e.set(l(t), t);
+    }), e;
+  });
+  function g(e) {
+    return a(s).has(l(e));
+  }
+  function h(e) {
+    const t = a(s);
+    t.set(l(e), e), c.value = [...t.values()];
+  }
+  function x(e) {
+    const t = a(s);
+    for (const n of e)
+      t.set(l(n), n);
+    c.value = [...t.values()];
+  }
+  function w(e) {
+    if (i(u.rowKey))
+      return;
+    const t = a(s);
+    for (const n of e) {
+      const o = a(u.dataSource).find(
+        (d) => l(d) === n
+      ), S = { [u.rowKey]: n };
+      t.set(String(n), o || S);
+    }
+    c.value = [...t.values()];
+  }
+  function y(e) {
+    const t = a(s);
+    t.delete(l(e)), c.value = [...t.values()];
+  }
+  function E(e) {
+    const t = a(s);
+    for (const n of e)
+      t.delete(l(n));
+    c.value = [...t.values()];
+  }
+  function r(e, t) {
+    const n = e;
+    for (const o of t)
+      n.set(l(o), o);
+    return n;
+  }
+  function K(e, t, n) {
+    const o = a(s);
+    t ? o.set(l(e), e) : o.delete(l(e)), r(o, n), c.value = [...o.values()];
+  }
+  function A(e, t) {
+    const n = M(a(s));
+    e ? a(u.dataSource).forEach((o) => {
+      n.set(l(o), o);
+    }) : a(u.dataSource).forEach((o) => {
+      n.delete(l(o));
+    }), r(n, t), c.value = [...n.values()];
+  }
+  function C(e, t) {
+    const n = M(a(s));
+    a(u.dataSource).forEach((o) => {
+      e.find((d) => l(d) === l(o)) ? n.set(l(o), o) : n.delete(l(o));
+    }), r(n, t), c.value = [...n.values()];
+  }
+  function R() {
+    const e = a(s);
+    a(u.dataSource).forEach((t) => {
+      e.set(l(t), t);
+    }), c.value = [...e.values()];
+  }
+  function D(e) {
+    const t = a(s), n = l(e);
+    t.has(n) ? t.delete(n) : t.set(n, e), c.value = [...t.values()];
+  }
+  function I() {
+    const e = a(s);
+    a(u.dataSource).forEach((t) => {
+      e.delete(l(t));
+    }), c.value = [...e.values()];
+  }
+  function b() {
+    c.value = [];
+  }
+  return {
+    select: h,
+    unSelect: y,
+    isSelected: g,
+    selectAll: R,
+    unSelectAll: I,
+    clearAll: b,
+    toggleSelect: D,
+    selectedRows: c,
+    selectMulti: x,
+    unSelectMulti: E,
+    rowSelection: v(() => ({
+      ...u,
+      onChange: f,
+      selectedRowKeys: a(c).map((e) => l(e))
+    })),
+    selectChange: K,
+    selectAllChange: A,
+    selectRangeChange: C,
+    selectMultiByKeys: w
+  };
+};
+export {
+  T as default
+};

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

@@ -0,0 +1,16 @@
+import { ComputedRef } from 'vue';
+export declare const useTableStyle: () => ComputedRef<{
+    '--vxe-ui-table-row-checkbox-checked-background-color': string;
+    '--vxe-ui-table-row-hover-checkbox-checked-background-color': string;
+    '--vxe-ui-font-primary-color': string;
+    '--vxe-ui-table-header-background-color': string;
+    '--vxe-ui-table-cell-padding-default': string;
+    '--vxe-ui-table-cell-padding-medium': string;
+    '--vxe-ui-table-row-height-medium': string;
+    '--vxe-ui-table-row-height-mini': string;
+    '--vxe-ui-table-row-radio-checked-background-color': string;
+    '--vxe-ui-table-row-hover-radio-checked-background-color': string;
+    '--vxe-ui-font-color': string;
+    '--vxe-ui-table-border-color': string;
+    '--vxe-ui-table-header-font-color': string;
+}>;

package/es/src/ap-grid/hooks/use-table-style.mjs

@@ -0,0 +1,26 @@
+import { useToken as r } from "@aplus-frontend/antdv/es/theme/internal";
+import { computed as c, unref as t } from "vue";
+const u = () => {
+  const [l, o] = r();
+  return c(() => {
+    const e = t(o);
+    return {
+      "--vxe-ui-table-row-checkbox-checked-background-color": e.controlItemBgActive,
+      "--vxe-ui-table-row-hover-checkbox-checked-background-color": e.controlItemBgActiveHover,
+      "--vxe-ui-font-primary-color": e.colorPrimary,
+      "--vxe-ui-table-header-background-color": "var(--ap-table-header-bg)",
+      "--vxe-ui-table-cell-padding-default": "12px",
+      "--vxe-ui-table-cell-padding-medium": "9px",
+      "--vxe-ui-table-row-height-medium": "36px",
+      "--vxe-ui-table-row-height-mini": "30px",
+      "--vxe-ui-table-row-radio-checked-background-color": e.controlItemBgActive,
+      "--vxe-ui-table-row-hover-radio-checked-background-color": e.controlItemBgActiveHover,
+      "--vxe-ui-font-color": e.colorTextBase,
+      "--vxe-ui-table-border-color": e.colorBorderSecondary,
+      "--vxe-ui-table-header-font-color": e.colorTextBase
+    };
+  });
+};
+export {
+  u as useTableStyle
+};