@peng_kai/kit 0.1.4 → 0.1.6

package/antd/hooks/useAntdDrawer.ts

@@ -1,73 +1,73 @@
-import { Button as AButton, Drawer as ADrawer, Space as ASpace } from 'ant-design-vue';
-import { defineComponent, h, isProxy, reactive, toRef, toRefs } from 'vue';
-import type { Component } from 'vue';
-import type { ButtonProps, DrawerProps } from 'ant-design-vue';
-import type { ComponentProps } from 'vue-component-type-helpers';
-import type { Writable } from 'type-fest';
-import { useComponentRef } from '../../vue';
-
-const defaultDrawerProps: DrawerProps = { open: false, destroyOnClose: true };
-
-interface IComponentConfig<Comp extends Component> {
-  is: Comp
-  props?: Writable<ComponentProps<Comp>>
-}
-
-export function useAntdDrawer<Comp extends Component>(
-  comp: IComponentConfig<Comp> | Comp,
-  drawerProps = defaultDrawerProps,
-) {
-  const _comp = ({ props: {}, ...((comp as any)?.is ? comp : { is: comp }) }) as Required<IComponentConfig<Comp>>;
-  const compProps = reactive(_comp.props);
-  const compRef = useComponentRef(_comp.is);
-  const _drawerProps: DrawerProps = reactive({
-    ...defaultDrawerProps,
-    ...isProxy(drawerProps) ? toRefs(drawerProps) : drawerProps,
-  });
-
-  const open = (newBodyProps?: Partial<typeof compProps>, newAntdModalProps?: Omit<Partial<DrawerProps>, 'open'>) => {
-    Object.assign(_drawerProps, newAntdModalProps);
-    Object.assign(compProps, newBodyProps);
-    _drawerProps.open = true;
-  };
-  const close = () => {
-    _drawerProps.open = false;
-  };
-
-  const DrawerExtra = defineComponent({
-    setup() {
-      const cancelBtnProps: ButtonProps = reactive({ onClick: close });
-      const confirmBtnProps: ButtonProps = reactive({
-        type: 'primary',
-        loading: toRef(() => (compRef as any)?.loading),
-        onClick: () => (compRef as any)?.confirm?.(),
-      });
-
-      return { cancelBtnProps, confirmBtnProps };
-    },
-    render() {
-      const { cancelBtnProps, confirmBtnProps } = this;
-
-      return h(ASpace, {}, () => [
-        h(AButton, cancelBtnProps, () => '取消'),
-        h(AButton, confirmBtnProps, () => '确定'),
-      ]);
-    },
-  });
-  const PresetComponent = defineComponent({
-    render() {
-      return h(ADrawer, _drawerProps, {
-        default: () => h(_comp.is, compProps as any),
-      });
-    },
-  });
-
-  _drawerProps.extra = _drawerProps.extra === undefined ? h(DrawerExtra) : _drawerProps.extra;
-  _drawerProps['onUpdate:open'] = (visiable) => {
-    _drawerProps.open = visiable;
-  };
-  (compProps as any).ref = compRef;
-  (compProps as any).onClose = close;
-
-  return { PresetComponent, drawerProps: _drawerProps, open, close };
-}
+import { Button as AButton, Drawer as ADrawer, Space as ASpace } from 'ant-design-vue';
+import { defineComponent, h, isProxy, reactive, toRef, toRefs } from 'vue';
+import type { Component } from 'vue';
+import type { ButtonProps, DrawerProps } from 'ant-design-vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { Writable } from 'type-fest';
+import { useComponentRef } from '../../vue';
+
+const defaultDrawerProps: DrawerProps = { open: false, destroyOnClose: true, rootClassName: 'antd-cover__basic-drawer' };
+
+interface IComponentConfig<Comp extends Component> {
+  is: Comp
+  props?: Writable<ComponentProps<Comp>>
+}
+
+export function useAntdDrawer<Comp extends Component>(
+  comp: IComponentConfig<Comp> | Comp,
+  drawerProps = defaultDrawerProps,
+) {
+  const _comp = ({ props: {}, ...((comp as any)?.is ? comp : { is: comp }) }) as Required<IComponentConfig<Comp>>;
+  const compProps = reactive(_comp.props);
+  const compRef = useComponentRef(_comp.is);
+  const _drawerProps: DrawerProps = reactive({
+    ...defaultDrawerProps,
+    ...isProxy(drawerProps) ? toRefs(drawerProps) : drawerProps,
+  });
+
+  const open = (newBodyProps?: Partial<typeof compProps>, newAntdModalProps?: Omit<Partial<DrawerProps>, 'open'>) => {
+    Object.assign(_drawerProps, newAntdModalProps);
+    Object.assign(compProps, newBodyProps);
+    _drawerProps.open = true;
+  };
+  const close = () => {
+    _drawerProps.open = false;
+  };
+
+  const DrawerFooter = defineComponent({
+    setup() {
+      const cancelBtnProps: ButtonProps = reactive({ onClick: close });
+      const confirmBtnProps: ButtonProps = reactive({
+        type: 'primary',
+        loading: toRef(() => (compRef as any)?.loading),
+        onClick: () => (compRef as any)?.confirm?.(),
+      });
+
+      return { cancelBtnProps, confirmBtnProps };
+    },
+    render() {
+      const { cancelBtnProps, confirmBtnProps } = this;
+
+      return h(ASpace, {}, () => [
+        h(AButton, cancelBtnProps, () => '取消'),
+        h(AButton, confirmBtnProps, () => '确定'),
+      ]);
+    },
+  });
+  const PresetComponent = defineComponent({
+    render() {
+      return h(ADrawer, _drawerProps, {
+        default: () => h(_comp.is, compProps as any),
+      });
+    },
+  });
+
+  _drawerProps.footer = _drawerProps.footer === undefined ? h(DrawerFooter) : _drawerProps.footer;
+  _drawerProps['onUpdate:open'] = (visiable) => {
+    _drawerProps.open = visiable;
+  };
+  (compProps as any).ref = compRef;
+  (compProps as any).onClose = close;
+
+  return { PresetComponent, drawerProps: _drawerProps, open, close };
+}

package/antd/hooks/useAntdTable.ts

@@ -1,71 +1,82 @@
-import { computed } from 'vue';
-import type { UseQueryReturnType } from '@tanstack/vue-query';
-import type { Table, TableProps } from 'ant-design-vue';
-import type { ColumnType } from 'ant-design-vue/es/table/interface';
-import type { ComponentProps } from 'vue-component-type-helpers';
-
-export function useAntdTable<
-  UQRR extends UseQueryReturnType<any, any>,
-  QP extends Partial<{ page?: string | number, page_size?: string | number }>,
->(uqrt: UQRR, queryParams: QP = ({} as any)) {
-  type RecordType = GetRecordType<UQRR>;
-  type LocalTableProps = TableProps<RecordType>;
-  type LocalColumnsType = NonNullable<LocalTableProps['columns']>;
-
-  const { data, isFetching, isLoading } = uqrt;
-
-  const onPaginationChange: ComponentProps<typeof Table>['onChange'] = (pagination) => {
-    const page = queryParams.page_size !== pagination.pageSize ? 1 : pagination.current;
-    Object.assign(queryParams, { page, page_size: pagination.pageSize ?? 10 });
-  };
-  const defineColumns = (columnsFn: () => LocalColumnsType) => computed(columnsFn);
-
-  const tableProps = computed<LocalTableProps>(() => {
-    const { list, pagination } = data.value ?? {};
-
-    return {
-      dataSource: list,
-      pagination: {
-        disabled: isFetching.value,
-        current: Number(queryParams.page ?? 1),
-        pageSize: Number(queryParams.page_size ?? 10),
-        total: pagination?.total ?? 0,
-        showTotal: total => `共 ${total} 条`,
-      },
-      loading: isLoading.value,
-      scroll: { x: 'max-content' },
-      sticky: true,
-      onChange: onPaginationChange as any,
-    };
-  });
-  const dataIndexs = new Proxy({} as Record<keyof RecordType, string>, {
-    get(_, p) {
-      return p;
-    },
-  });
-  const bodyCellType = {} as {
-    index: number
-    text: any
-    value: any
-    record: RecordType
-    column: ColumnType<RecordType>
-  };
-
-  return {
-    /** ATable 的预设 Props */
-    tableProps,
-    /** 【类型辅助】基于接口数据类型推导出的 dataIndex，供 columns 的 dataIndex 使用 */
-    dataIndexs,
-    /** 【类型辅助】bodyCell 插槽数据的精确类型描述 */
-    bodyCellType,
-    /** 【类型辅助】用于定义出类型精确的 columns  */
-    defineColumns,
-    onPaginationChange,
-  };
-}
-
-type GetRecordType<T> = T extends UseQueryReturnType<infer D, any>
-  ? D extends Api.PageData
-    ? NonNullable<D['list']>[0]
-    : never
-  : never;
+import { computed, reactive } from 'vue';
+import type { UseQueryReturnType } from '@tanstack/vue-query';
+import type { Table, TableProps } from 'ant-design-vue';
+import type { ColumnType } from 'ant-design-vue/es/table/interface';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+export function useAntdTable<
+  UQRR extends UseQueryReturnType<any, any>,
+  QP extends Partial<{ page?: string | number, page_size?: string | number }>,
+>(uqrt: UQRR, queryParams: QP = ({} as any)) {
+  type RecordType = GetRecordType<UQRR>;
+  type LocalTableProps = TableProps<RecordType>;
+  type LocalColumnsType = NonNullable<LocalTableProps['columns']>;
+  type LocalTableRowSelection = NonNullable<LocalTableProps['rowSelection']>;
+
+  const { data, isFetching, isLoading } = uqrt;
+
+  const onPaginationChange: ComponentProps<typeof Table>['onChange'] = (pagination) => {
+    const page = queryParams.page_size !== pagination.pageSize ? 1 : pagination.current;
+    Object.assign(queryParams, { page, page_size: pagination.pageSize ?? 10 });
+  };
+  const defineColumns = (columnsGetter: () => LocalColumnsType) => computed(columnsGetter);
+  const defineRowSelection = (rowSelectionGetter: () => LocalTableRowSelection) => {
+    const rowSelection = reactive(rowSelectionGetter());
+
+    rowSelection.selectedRowKeys ??= [];
+    rowSelection.onChange ??= keys => rowSelection.selectedRowKeys = keys;
+
+    return rowSelection;
+  };
+
+  const tableProps = computed<LocalTableProps>(() => {
+    const { list, pagination } = data.value ?? {};
+
+    return {
+      dataSource: list,
+      pagination: {
+        disabled: isFetching.value,
+        current: Number(queryParams.page ?? 1),
+        pageSize: Number(queryParams.page_size ?? 10),
+        total: pagination?.total ?? 0,
+        showTotal: total => `共 ${total} 条`,
+      },
+      loading: isLoading.value,
+      scroll: { x: 'max-content' },
+      sticky: true,
+      onChange: onPaginationChange as any,
+    };
+  });
+  const dataIndexs = new Proxy({} as Record<keyof RecordType, string>, {
+    get(_, p) {
+      return p;
+    },
+  });
+  const bodyCellType = {} as {
+    index: number
+    text: any
+    value: any
+    record: RecordType
+    column: ColumnType<RecordType>
+  };
+
+  return {
+    /** ATable 的预设 Props */
+    tableProps,
+    /** 【类型辅助】基于接口数据类型推导出的 dataIndex，供 columns 的 dataIndex 使用 */
+    dataIndexs,
+    /** 【类型辅助】bodyCell 插槽数据的精确类型描述 */
+    bodyCellType,
+    /** 【类型辅助】用于定义出类型精确的 columns  */
+    defineColumns,
+    /** 【类型辅助】用于定义出类型精确的 rowSelection  */
+    defineRowSelection,
+    onPaginationChange,
+  };
+}
+
+type GetRecordType<T> = T extends UseQueryReturnType<infer D, any>
+  ? D extends Api.PageData
+    ? NonNullable<D['list']>[0]
+    : never
+  : never;

package/package.json

@@ -1,54 +1,55 @@
-{
-  "name": "@peng_kai/kit",
-  "type": "module",
-  "version": "0.1.4",
-  "description": "",
-  "author": "",
-  "license": "ISC",
-  "keywords": [],
-  "main": "index.js",
-  "scripts": {
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
-  },
-  "peerDependencies": {
-    "@tanstack/vue-query": "4.37.1",
-    "@vueuse/core": "10.6.1",
-    "ant-design-vue": "4.0.7",
-    "axios": "1.6.2",
-    "bignumber.js": "9.1.2",
-    "dayjs": "1.11.10",
-    "lodash-es": "4.17.21",
-    "vue": "3.3.8",
-    "vue-router": "4.2.5"
-  },
-  "dependencies": {
-    "@babel/generator": "^7.23.5",
-    "@babel/parser": "^7.23.5",
-    "@babel/traverse": "^7.23.5",
-    "@babel/types": "^7.23.5",
-    "@tanstack/vue-query": "^4.37.1",
-    "@vueuse/core": "^10.6.1",
-    "ant-design-vue": "^4.0.7",
-    "axios": "^1.6.2",
-    "bignumber.js": "^9.1.2",
-    "chokidar": "^3.5.3",
-    "dayjs": "^1.11.10",
-    "fast-glob": "^3.3.2",
-    "lodash-es": "^4.17.21",
-    "nprogress": "^0.2.0",
-    "vue": "^3.3.8",
-    "vue-router": "^4.2.5"
-  },
-  "devDependencies": {
-    "@antfu/eslint-config": "^1.2.1",
-    "@peng_kai/lint": "^0.1.0",
-    "@types/lodash-es": "^4.17.11",
-    "@types/node": "18",
-    "@types/nprogress": "^0.2.3",
-    "@unocss/eslint-plugin": "^0.57.7",
-    "type-fest": "^4.8.1",
-    "typescript": "^5.2.2",
-    "vue-component-type-helpers": "^1.8.22"
-  }
-}
+{
+  "name": "@peng_kai/kit",
+  "type": "module",
+  "version": "0.1.6",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "main": "index.js",
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "peerDependencies": {
+    "@tanstack/vue-query": "4.37.1",
+    "@vueuse/core": "10.6.1",
+    "ant-design-vue": "4.0.7",
+    "axios": "1.6.2",
+    "bignumber.js": "9.1.2",
+    "dayjs": "1.11.10",
+    "lodash-es": "4.17.21",
+    "vue": "3.3.8",
+    "vue-router": "4.2.5"
+  },
+  "dependencies": {
+    "@babel/generator": "^7.23.5",
+    "@babel/parser": "^7.23.5",
+    "@babel/traverse": "^7.23.5",
+    "@babel/types": "^7.23.5",
+    "@tanstack/vue-query": "^4.37.1",
+    "@vueuse/core": "^10.6.1",
+    "a-calc": "^1.3.8",
+    "ant-design-vue": "^4.0.7",
+    "axios": "^1.6.2",
+    "bignumber.js": "^9.1.2",
+    "chokidar": "^3.5.3",
+    "dayjs": "^1.11.10",
+    "fast-glob": "^3.3.2",
+    "lodash-es": "^4.17.21",
+    "nprogress": "^0.2.0",
+    "vue": "^3.3.8",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^1.2.1",
+    "@peng_kai/lint": "^0.1.0",
+    "@types/lodash-es": "^4.17.11",
+    "@types/node": "18",
+    "@types/nprogress": "^0.2.3",
+    "@unocss/eslint-plugin": "^0.57.7",
+    "type-fest": "^4.8.1",
+    "typescript": "^5.2.2",
+    "vue-component-type-helpers": "^1.8.22"
+  }
+}

package/request/helpers.ts

@@ -1,49 +1,49 @@
-import type { AxiosInstance } from 'axios';
-
-export { isTimeout, getServices, ApiCode, ApiError };
-
-enum ApiCode {
-  NORMAL = 0, // 正常
-  UNKNOWN = -1, // 未知错误
-  TIMEOUT = -2, // 请求超时
-}
-
-function getServices() {
-  const serversModule = getServices.modules;
-  const servers: Record<string, { server: AxiosInstance } | undefined> = {};
-
-  for (const [key, module] of Object.entries(serversModule)) {
-    const name = key.match(/\/([0-9a-zA-Z]+)\.ts$/)?.[1];
-
-    if (name)
-      servers[`${name}.api`] = module as any;
-  }
-
-  return servers;
-}
-getServices.modules = {} as any;
-
-function isTimeout(error: any) {
-  return error?.message?.toLowerCase().includes('timeout');
-}
-
-class ApiError<TResp = any> extends Error {
-  public static is<ErrorResp = any>(error: any): error is ApiError<ErrorResp> {
-    return !!error?.isApiError;
-  }
-
-  /**
-   * 将HTTP status和Api code统一到一个code里
-   */
-  public code: number;
-  public msg: string;
-  public data: TResp;
-  public isApiError = true;
-
-  public constructor(info: { code: number, msg: string, data: TResp }) {
-    super(info.msg);
-    this.code = info.code;
-    this.msg = info.msg;
-    this.data = info.data;
-  }
-}
+import type { AxiosInstance } from 'axios';
+
+export { isTimeout, getServices, ApiCode, ApiError };
+
+enum ApiCode {
+  NORMAL = 0, // 正常
+  UNKNOWN = -1, // 未知错误
+  TIMEOUT = -2, // 请求超时
+}
+
+function getServices() {
+  const serversModule = getServices.modules;
+  const servers: Record<string, { server: AxiosInstance } | undefined> = {};
+
+  for (const [key, module] of Object.entries(serversModule)) {
+    const name = key.match(/\/([0-9a-zA-Z]+)\.ts$/)?.[1];
+
+    if (name)
+      servers[`${name}.api`] = module as any;
+  }
+
+  return servers;
+}
+getServices.modules = {} as any;
+
+function isTimeout(error: any) {
+  return error?.message?.toLowerCase().includes('timeout');
+}
+
+class ApiError<TResp = any> extends Error {
+  public static is<ErrorResp = any>(error: any): error is ApiError<ErrorResp> {
+    return !!error?.isApiError;
+  }
+
+  /**
+   * 将HTTP status和Api code统一到一个code里
+   */
+  public code: number;
+  public msg: string;
+  public data: TResp;
+  public isApiError = true;
+
+  public constructor(info: { code: number, msg: string, data: TResp }) {
+    super(info.msg);
+    this.code = info.code;
+    this.msg = info.msg;
+    this.data = info.data;
+  }
+}

package/request/interceptors/toLogin.ts

@@ -1,15 +1,15 @@
-import type { AxiosInterceptorManager } from 'axios';
-
-export function toLogin(authPath = `${window.location.origin}/auth/login`, code = 15001): Parameters<AxiosInterceptorManager<any>['use']> {
-  return [
-    undefined,
-    (err) => {
-      if (err.code !== code)
-        throw err;
-
-      const url = new URL(authPath);
-      url.searchParams.set('redirect', window.location.href);
-      window.location.href = url.toString();
-    },
-  ];
-}
+import type { AxiosInterceptorManager } from 'axios';
+
+export function toLogin(authPath = `${window.location.origin}/auth/login`, code = 15001): Parameters<AxiosInterceptorManager<any>['use']> {
+  return [
+    undefined,
+    (err) => {
+      if (err.code !== code)
+        throw err;
+
+      const url = new URL(authPath);
+      url.searchParams.set('redirect', window.location.href);
+      window.location.href = url.toString();
+    },
+  ];
+}