@peng_kai/kit 0.2.0-beta.0 → 0.2.0-beta.10

package/antd/components/InputNumberRange.vue

@@ -1,59 +1,59 @@
-<script lang="ts">
-import { computed } from 'vue';
-import { InputNumber as AInputNumber, Form } from 'ant-design-vue';
-</script>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    value: [number | undefined, number | undefined]
-    placeholder?: [string, string]
-    min?: number
-    max?: number
-  }>(),
-  {
-    min: Number.NEGATIVE_INFINITY,
-    max: Number.POSITIVE_INFINITY,
-  },
-);
-const emits = defineEmits<{
-  (e: 'update:value', value: typeof props.value): void
-}>();
-
-const formItemContext = Form.useInjectFormItemContext();
-const minValue = computed({
-  get() {
-    return props.value[0];
-  },
-  set(value) {
-    updateValue(value, maxValue.value);
-  },
-});
-const maxValue = computed({
-  get() {
-    return props.value[1];
-  },
-  set(value) {
-    updateValue(minValue.value, value);
-  },
-});
-
-function updateValue(...args: typeof props.value) {
-  emits('update:value', args.sort());
-  formItemContext.onFieldChange();
-}
-</script>
-
-<template>
-  <div class="flex items-center">
-    <AInputNumber
-      v-model:value="minValue" class="w-full" :min="props.min"
-      :max="props.max" :placeholder="props.placeholder?.[0]"
-    />
-    <span>&nbsp;-&nbsp;</span>
-    <AInputNumber
-      v-model:value="maxValue" class="w-full" :min="props.min"
-      :max="props.max" :placeholder="props.placeholder?.[1]"
-    />
-  </div>
-</template>
+<script lang="ts">
+import { computed } from 'vue';
+import { InputNumber as AInputNumber, Form } from 'ant-design-vue';
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    value: [number | undefined, number | undefined]
+    placeholder?: [string, string]
+    min?: number
+    max?: number
+  }>(),
+  {
+    min: Number.NEGATIVE_INFINITY,
+    max: Number.POSITIVE_INFINITY,
+  },
+);
+const emits = defineEmits<{
+  (e: 'update:value', value: typeof props.value): void
+}>();
+
+const formItemContext = Form.useInjectFormItemContext();
+const minValue = computed({
+  get() {
+    return props.value[0];
+  },
+  set(value) {
+    updateValue(value, maxValue.value);
+  },
+});
+const maxValue = computed({
+  get() {
+    return props.value[1];
+  },
+  set(value) {
+    updateValue(minValue.value, value);
+  },
+});
+
+function updateValue(...args: typeof props.value) {
+  emits('update:value', args.sort());
+  formItemContext.onFieldChange();
+}
+</script>
+
+<template>
+  <div class="flex items-center">
+    <AInputNumber
+      v-model:value="minValue" class="w-full" :min="props.min"
+      :max="props.max" :placeholder="props.placeholder?.[0]"
+    />
+    <span>&nbsp;-&nbsp;</span>
+    <AInputNumber
+      v-model:value="maxValue" class="w-full" :min="props.min"
+      :max="props.max" :placeholder="props.placeholder?.[1]"
+    />
+  </div>
+</template>

package/antd/directives/formLabelAlign.ts

@@ -1,36 +1,36 @@
-import type { App } from 'vue';
-
-export function formLabelAlign(app: App) {
-  const directiveName = 'antd-form-label-align';
-  const resizeObserverKey = `${directiveName}@resizeObserver`;
-
-  function init(el: HTMLElement) {
-    const labels = el.querySelectorAll('.ant-form-item .ant-form-item-label');
-    const resizeObserver = new ResizeObserver((entries) => {
-      const widths = entries.map(e => e.borderBoxSize?.[0]?.inlineSize ?? 0);
-      const maxWidth = Math.max(...widths);
-
-      if (maxWidth <= 0)
-        return;
-
-      el.style.setProperty('--max-label-width', `${maxWidth}px`);
-      entries.forEach((e) => {
-        const target = e.target as HTMLElement;
-        target.style.setProperty('width', 'var(--max-label-width)');
-      });
-    });
-
-    Array.from(labels).forEach(label => resizeObserver.observe(label));
-
-    return resizeObserver;
-  }
-
-  app.directive(directiveName, {
-    mounted(el: HTMLElement) {
-      (el as any)[resizeObserverKey] = init(el);
-    },
-    updated(el) {
-      (el as any)[resizeObserverKey] = init(el);
-    },
-  });
-}
+import type { App } from 'vue';
+
+export function formLabelAlign(app: App) {
+  const directiveName = 'antd-form-label-align';
+  const resizeObserverKey = `${directiveName}@resizeObserver`;
+
+  function init(el: HTMLElement) {
+    const labels = el.querySelectorAll('.ant-form-item .ant-form-item-label');
+    const resizeObserver = new ResizeObserver((entries) => {
+      const widths = entries.map(e => e.borderBoxSize?.[0]?.inlineSize ?? 0);
+      const maxWidth = Math.max(...widths);
+
+      if (maxWidth <= 0)
+        return;
+
+      el.style.setProperty('--max-label-width', `${maxWidth}px`);
+      entries.forEach((e) => {
+        const target = e.target as HTMLElement;
+        target.style.setProperty('width', 'var(--max-label-width)');
+      });
+    });
+
+    Array.from(labels).forEach(label => resizeObserver.observe(label));
+
+    return resizeObserver;
+  }
+
+  app.directive(directiveName, {
+    mounted(el: HTMLElement) {
+      (el as any)[resizeObserverKey] = init(el);
+    },
+    updated(el) {
+      (el as any)[resizeObserverKey] = init(el);
+    },
+  });
+}

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, 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 };
-}
+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,127 +1,127 @@
-import { computed, reactive, ref } from 'vue';
-import { pick } from 'lodash-es';
-import type { UseQueryReturnType } from '@tanstack/vue-query';
-import type { Table, TableProps } from 'ant-design-vue';
-import type { ColumnType, FilterValue } from 'ant-design-vue/es/table/interface';
-import type { ComponentProps } from 'vue-component-type-helpers';
-
-interface ISorter {
-  field?: string
-  order?: string
-}
-
-const defaultPageSizeOptions = ['10', '20', '50', '100'];
-
-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 filters = ref<Record<string, FilterValue>>();
-  const sorter = ref<ISorter>();
-  const sorters = ref<ISorter[]>();
-
-  /* pageSizeOptions 初始化 */
-  const pageSizeOptions = [...defaultPageSizeOptions];
-  const initPageSize = String(queryParams?.page_size ?? '10');
-
-  if (!pageSizeOptions.includes(initPageSize)) {
-    pageSizeOptions.push(initPageSize);
-    pageSizeOptions.sort((p, n) => Number(p) - Number(n));
-  }
-
-  const onChange: ComponentProps<typeof Table>['onChange'] = (_pagination, _filters, _sorter, extra) => {
-    if (extra.action === 'paginate') {
-      const page = queryParams.page_size !== _pagination.pageSize ? 1 : _pagination.current;
-      Object.assign(queryParams, { page, page_size: _pagination.pageSize ?? 10 });
-    }
-    else if (extra.action === 'filter') {
-      filters.value = _filters;
-    }
-    else if (extra.action === 'sort') {
-      if (Array.isArray(_sorter)) {
-        sorter.value = pick(_sorter[0], ['field', 'order']) as any;
-        sorters.value = _sorter.map(item => pick(item, ['field', 'order'])) as any;
-      }
-      else {
-        sorter.value = pick(_sorter, ['field', 'order']) as any;
-        sorters.value = [{ ...sorter.value }];
-      }
-    }
-  };
-  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,
-        showSizeChanger: true,
-        showQuickJumper: true,
-        pageSizeOptions,
-        showTotal: total => `共 ${total} 条`,
-      },
-      loading: isLoading.value,
-      scroll: { x: 'max-content' },
-      sticky: true,
-      onChange: onChange 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,
-    /* 过滤的字段 */
-    filters,
-    /* 排序的字段 */
-    sorter,
-    /* 多维排序的字段 */
-    sorters,
-    /** 【类型辅助】基于接口数据类型推导出的 dataIndex，供 columns 的 dataIndex 使用 */
-    dataIndexs,
-    /** 【类型辅助】bodyCell 插槽数据的精确类型描述 */
-    bodyCellType,
-    /** 【类型辅助】用于定义出类型精确的 columns  */
-    defineColumns,
-    /** 【类型辅助】用于定义出类型精确的 rowSelection  */
-    defineRowSelection,
-    /** 内置的 ATable onChange 事件，默认在 `tableProps` 中 */
-    onChange,
-  };
-}
-
-type GetRecordType<T> = T extends UseQueryReturnType<infer D, any>
-  ? D extends Api.PageData
-    ? NonNullable<D['list']>[0]
-    : never
-  : never;
+import { computed, reactive, ref } from 'vue';
+import { pick } from 'lodash-es';
+import type { UseQueryReturnType } from '@tanstack/vue-query';
+import type { Table, TableProps } from 'ant-design-vue';
+import type { ColumnType, FilterValue } from 'ant-design-vue/es/table/interface';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+interface ISorter {
+  field?: string
+  order?: string
+}
+
+const defaultPageSizeOptions = ['10', '20', '50', '100'];
+
+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 filters = ref<Record<string, FilterValue>>();
+  const sorter = ref<ISorter>();
+  const sorters = ref<ISorter[]>();
+
+  /* pageSizeOptions 初始化 */
+  const pageSizeOptions = [...defaultPageSizeOptions];
+  const initPageSize = String(queryParams?.page_size ?? '10');
+
+  if (!pageSizeOptions.includes(initPageSize)) {
+    pageSizeOptions.push(initPageSize);
+    pageSizeOptions.sort((p, n) => Number(p) - Number(n));
+  }
+
+  const onChange: ComponentProps<typeof Table>['onChange'] = (_pagination, _filters, _sorter, extra) => {
+    if (extra.action === 'paginate') {
+      const page = queryParams.page_size !== _pagination.pageSize ? 1 : _pagination.current;
+      Object.assign(queryParams, { page, page_size: _pagination.pageSize ?? 10 });
+    }
+    else if (extra.action === 'filter') {
+      filters.value = _filters;
+    }
+    else if (extra.action === 'sort') {
+      if (Array.isArray(_sorter)) {
+        sorter.value = pick(_sorter[0], ['field', 'order']) as any;
+        sorters.value = _sorter.map(item => pick(item, ['field', 'order'])) as any;
+      }
+      else {
+        sorter.value = pick(_sorter, ['field', 'order']) as any;
+        sorters.value = [{ ...sorter.value }];
+      }
+    }
+  };
+  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,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        pageSizeOptions,
+        showTotal: total => `共 ${total} 条`,
+      },
+      loading: isLoading.value,
+      scroll: { x: 'max-content' },
+      sticky: true,
+      onChange: onChange 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,
+    /* 过滤的字段 */
+    filters,
+    /* 排序的字段 */
+    sorter,
+    /* 多维排序的字段 */
+    sorters,
+    /** 【类型辅助】基于接口数据类型推导出的 dataIndex，供 columns 的 dataIndex 使用 */
+    dataIndexs,
+    /** 【类型辅助】bodyCell 插槽数据的精确类型描述 */
+    bodyCellType,
+    /** 【类型辅助】用于定义出类型精确的 columns  */
+    defineColumns,
+    /** 【类型辅助】用于定义出类型精确的 rowSelection  */
+    defineRowSelection,
+    /** 内置的 ATable onChange 事件，默认在 `tableProps` 中 */
+    onChange,
+  };
+}
+
+type GetRecordType<T> = T extends UseQueryReturnType<infer D, any>
+  ? D extends Api.PageData
+    ? NonNullable<D['list']>[0]
+    : never
+  : never;

package/libs/dayjs.ts

@@ -1,5 +1,12 @@
 import dayjs from 'dayjs';
 
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/zh';
+import 'dayjs/locale/en';
+
 export { isDayjs, unix, locale, extend } from 'dayjs';
 export type { Dayjs, PluginFunc, UnitType, UnitTypeLong, UnitTypeLongPlural, UnitTypeShort, QUnitType, ConfigType, ConfigTypeMap, OpUnitType, OptionType, ManipulateType } from 'dayjs';
 export default dayjs;
+
+dayjs.locale('zh');
+dayjs.extend(relativeTime);