@peng_kai/kit 0.0.14 → 0.0.16

package/antd/hooks/useAntdModal.ts

@@ -1,12 +1,12 @@
-import { Modal as AntModal } from 'ant-design-vue'
-import { createVNode, defineComponent, isProxy, reactive, toRefs, toRef } from 'vue'
-import type { Component } from 'vue'
-import type { ModalProps } from 'ant-design-vue'
-import type { ComponentProps } from 'vue-component-type-helpers'
-import type { Writable } from 'type-fest'
-import { useComponentRef } from '../../vue'
+import { Modal as AntModal } from 'ant-design-vue';
+import { createVNode, defineComponent, isProxy, reactive, toRef, toRefs } from 'vue';
+import type { Component } from 'vue';
+import type { ModalProps } from 'ant-design-vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { Writable } from 'type-fest';
+import { useComponentRef } from '../../vue';
 
-const defaultModalProps: ModalProps = { open: false, destroyOnClose: true, wrapClassName: 'antd-cover__basic-modal' }
+const defaultModalProps: ModalProps = { open: false, destroyOnClose: true, wrapClassName: 'antd-cover__basic-modal' };
 
 interface IComponentConfig<Comp extends Component> {
   is: Comp
@@ -26,40 +26,40 @@ export function useAntdModal<Comp extends Component>(
   comp: IComponentConfig<Comp> | Comp,
   modalProps = defaultModalProps,
 ) {
-  const _comp = ({ props: {}, type: 'body', ...((comp as any)?.is ? comp : { is: comp }) }) as Required<IComponentConfig<Comp>>
-  const compProps = reactive(_comp.props)
-  const compRef = useComponentRef(_comp.is)
+  const _comp = ({ props: {}, type: 'body', ...((comp as any)?.is ? comp : { is: comp }) }) as Required<IComponentConfig<Comp>>;
+  const compProps = reactive(_comp.props);
+  const compRef = useComponentRef(_comp.is);
   const _modalProps: ModalProps = reactive({
     ...defaultModalProps,
     ...isProxy(modalProps) ? toRefs(modalProps) : modalProps,
     confirmLoading: toRef(() => (compRef as any)?.loading),
     onOk: () => (compRef as any)?.confirm?.(),
-  })
-  const modalSlotName = _comp.type === 'body' ? 'default' : 'modalRender'
+  });
+  const modalSlotName = _comp.type === 'body' ? 'default' : 'modalRender';
 
   const open = (newCompProps?: Partial<typeof compProps>, newAntdModalProps?: Omit<Partial<ModalProps>, 'open'>) => {
-    Object.assign(_modalProps, newAntdModalProps)
-    Object.assign(compProps, newCompProps)
+    Object.assign(_modalProps, newAntdModalProps);
+    Object.assign(compProps, newCompProps);
 
-    _modalProps.open = true
-  }
+    _modalProps.open = true;
+  };
   const close = () => {
-    _modalProps.open = false
-  }
+    _modalProps.open = false;
+  };
 
   const PresetComponent = defineComponent({
     render() {
       return createVNode(AntModal, _modalProps, {
         [modalSlotName]: () => createVNode(_comp.is, compProps as any),
-      })
+      });
     },
-  })
+  });
 
   _modalProps['onUpdate:open'] = (visiable) => {
-    _modalProps.open = visiable
-  }
+    _modalProps.open = visiable;
+  };
   (compProps as any).ref = compRef;
-  (compProps as any).onClose = close
+  (compProps as any).onClose = close;
 
-  return { PresetComponent, modalProps: _modalProps, compProps, $comp: compRef, open, close }
+  return { PresetComponent, modalProps: _modalProps, compProps, $comp: compRef, open, close };
 }

package/antd/hooks/useAntdTable.ts

@@ -1,70 +1,70 @@
-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,
-      },
-      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 } 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,
+      },
+      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;

package/antd/hooks/useAntdTheme.ts

@@ -0,0 +1,86 @@
+import { reactiveComputed, useStyleTag } from '@vueuse/core';
+import pickBy from 'lodash-es/pickBy';
+import { theme } from 'ant-design-vue';
+import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
+import type { Ref } from 'vue';
+import { computed, unref } from 'vue';
+
+export function useAntdTheme(mode: Ref<string>, config: Ref<Record<string, any>>) {
+  const antdTheme = reactiveComputed<ThemeConfig>(() => {
+    const _mode = unref(mode);
+    const _config = unref(config);
+    const algorithm = ['dark'].includes(_mode) ? theme.darkAlgorithm : theme.defaultAlgorithm;
+    const screenXS = Number.parseFloat(_config.breakpoints.mobile);
+    const screenSM = Number.parseFloat(_config.breakpoints.mobilel);
+    const screenMD = Number.parseFloat(_config.breakpoints.tablet);
+    const screenLG = Number.parseFloat(_config.breakpoints.tabletl);
+    const screenXL = Number.parseFloat(_config.breakpoints.laptop);
+    const screenXXL = Number.parseFloat(_config.breakpoints.desktop);
+    const screenXXXL = Number.parseFloat(_config.breakpoints.desktop1k);
+    const token: ThemeConfig['token'] = {
+      ...algorithm({ ...theme.defaultSeed, colorPrimary: _config.colors.primary.DEFAULT }),
+      borderRadius: 2,
+      screenXS,
+      screenXSMin: screenXS,
+      screenXSMax: screenSM - 0.1,
+      screenSM,
+      screenSMMin: screenSM,
+      screenSMMax: screenMD - 0.1,
+      screenMD,
+      screenMDMin: screenMD,
+      screenMDMax: screenLG - 0.1,
+      screenLG,
+      screenLGMin: screenLG,
+      screenLGMax: screenXL - 0.1,
+      screenXL,
+      screenXLMin: screenXL,
+      screenXLMax: screenXXL - 0.1,
+      screenXXL,
+      screenXXLMin: screenXXL,
+      screenXXLMax: screenXXXL - 0.1,
+      screenXXXL,
+      screenXXXLMin: screenXXXL,
+    };
+
+    if (_mode === 'dark') {
+      Object.assign<typeof token, typeof token>(token, {
+        colorBgLayout: '#0a0a0a',
+      });
+    }
+
+    return { token };
+  });
+
+  const colorER = /.*color.*/;
+  const cssVariable = computed(() => {
+    return pickBy(antdTheme.token, (_v, k) => {
+      if (colorER.test(k))
+        return true;
+      if (['fontFamily'].includes(k))
+        return true;
+      return false;
+    });
+  });
+
+  useGlobalCssVariable('antd', cssVariable);
+
+  return antdTheme;
+}
+
+function useGlobalCssVariable(prefix: string, vars: Ref<Record<string, any>>) {
+  const cssVariable = computed(() => {
+    const _vars = unref(vars);
+    let wrapper = ':root{ /**/ }';
+
+    if (_vars) {
+      const tokens = Object.entries(_vars)
+        .map(([k, v]) => `--${prefix}-${String(k)}: ${String(v)};`)
+        .join(' ');
+      wrapper = wrapper.replace('/**/', tokens);
+    }
+
+    return wrapper;
+  });
+
+  return useStyleTag(cssVariable);
+}

package/antd/index.ts

@@ -1,7 +1,8 @@
-export { useAntdModal } from './hooks/useAntdModal'
-export { useAntdDrawer } from './hooks/useAntdDrawer'
-export { useAntdTable } from './hooks/useAntdTable'
-export { useAntdForm } from './hooks/useAntdForm'
-export { createAntdModal } from './hooks/createAntdModal'
-export { default as InputNumberRange } from './components/InputNumberRange.vue'
-export type { TField, RecordToSchemas } from './hooks/useAntdForm.ts'
+export { useAntdModal } from './hooks/useAntdModal';
+export { useAntdDrawer } from './hooks/useAntdDrawer';
+export { useAntdTable } from './hooks/useAntdTable';
+export { useAntdForm } from './hooks/useAntdForm';
+export { useAntdTheme } from './hooks/useAntdTheme';
+export { createAntdModal } from './hooks/createAntdModal';
+export { default as InputNumberRange } from './components/InputNumberRange.vue';
+export type { TField, RecordToSchemas } from './hooks/useAntdForm.ts';

package/eslint.config.js

@@ -0,0 +1,50 @@
+import antfu from '@antfu/eslint-config';
+
+export default antfu(
+  {
+    stylistic: {
+      indent: 2,
+      quotes: 'single',
+      semi: true,
+      jsx: true,
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.vue'],
+    rules: {
+      'no-console': ['off'],
+      'ts/no-use-before-define': ['off'],
+    },
+  },
+  {
+    files: ['**/*.vue'],
+    rules: {
+      'vue/attribute-hyphenation': ['error', 'never'],
+      'vue/v-on-event-hyphenation': ['error', 'never', { autofix: true }],
+      'vue/custom-event-name-casing': ['error', 'camelCase'],
+      'vue/prop-name-casing': ['error', 'camelCase'],
+      'vue/component-definition-name-casing': ['error', 'PascalCase'],
+      'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false }],
+      'vue/max-attributes-per-line': ['error', {
+        singleline: { max: 3 },
+        multiline: { max: 3 },
+      }],
+      'vue/v-slot-style': ['error', {
+        atComponent: 'shorthand',
+        default: 'shorthand',
+        named: 'shorthand',
+      }],
+      'vue/block-lang': ['error', {
+        script: { lang: 'ts' },
+      }],
+      'vue/block-order': ['error', {
+        order: ['script:not([setup])', 'script[setup]', 'template', 'style[scoped]', 'style:not([scoped])'],
+      }],
+    },
+  },
+  {
+    rules: {
+      'eslint-comments/no-unlimited-disable': ['off'],
+    },
+  },
+);

package/kitDependencies.ts

@@ -1,11 +1,15 @@
-import type dayjs from "dayjs";
-import type { useMenu, usePage, usePageTab, usePermission } from "./admin/hooks";
-import type { useRoute, useRouter } from 'vue-router'
+import type dayjs from 'dayjs';
+import type { useRoute, useRouter } from 'vue-router';
+import type { useMenu, usePage, usePageTab } from './admin/hooks';
+import type { TRole, usePermission } from './admin/permission/usePermission';
 
-const KEY = '__PK_KIT_DEPENDENCIES__'
+const KEY = '__PK_KIT_DEPENDENCIES__';
 
 interface Dependencies {
   dayjs: typeof dayjs
+  appName: string
+  appId: string
+  roles: Record<string, TRole>
   useRoute: typeof useRoute
   useRouter: typeof useRouter
   useMenu: typeof useMenu
@@ -15,15 +19,25 @@ interface Dependencies {
 }
 
 export function setDependencies(deps: Partial<Dependencies>) {
-  window[KEY] = { ...window[KEY], ...deps }
+  window[KEY] = { ...window[KEY], ...deps };
 }
 
 export function getDependencies() {
-  return window[KEY]
+  if (window[KEY]) {
+    return new Proxy(window[KEY], {
+      get(target, prop: keyof Dependencies) {
+        if (prop in target)
+          return target[prop];
+        else
+          throw new Error(`未发现 kit 依赖 ${prop}`);
+      },
+    });
+  }
+  else { throw new Error('未发现 kit 依赖'); };
 }
 
 declare global {
   interface Window {
     [KEY]: Dependencies
   }
-}
+}

package/package.json

@@ -1,40 +1,46 @@
-{
-  "name": "@peng_kai/kit",
-  "version": "0.0.14",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@tanstack/vue-query": "^4.37.1",
-    "@vueuse/core": "^10.5.0",
-    "ant-design-vue": "^4.0.6",
-    "axios": "^1.6.0",
-    "bignumber.js": "^9.1.2",
-    "dayjs": "^1.11.10",
-    "lodash-es": "^4.17.21",
-    "vue": "^3.3.7",
-    "vue-router": "^4.2.5"
-  },
-  "devDependencies": {
-    "@types/lodash-es": "^4.17.10",
-    "@types/node": "18",
-    "type-fest": "^4.6.0",
-    "vue-component-type-helpers": "^1.8.22"
-  },
-  "peerDependencies": {
-    "@tanstack/vue-query": "4.x",
-    "@vueuse/core": "10.x",
-    "ant-design-vue": "4.0.x",
-    "axios": "1.6.x",
-    "bignumber.js": "9.x",
-    "dayjs": "1.x",
-    "lodash-es": "4.x",
-    "vue": "3.3.x",
-    "vue-router": "4.2.x"
-  }
-}
+{
+  "name": "@peng_kai/kit",
+  "type": "module",
+  "version": "0.0.16",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "main": "index.js",
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "peerDependencies": {
+    "@tanstack/vue-query": "4.x",
+    "@vueuse/core": "10.x",
+    "ant-design-vue": "4.0.x",
+    "axios": "1.6.x",
+    "bignumber.js": "9.x",
+    "dayjs": "1.x",
+    "lodash-es": "4.x",
+    "vue": "3.3.x",
+    "vue-router": "4.2.x"
+  },
+  "dependencies": {
+    "@tanstack/vue-query": "^4.37.1",
+    "@vueuse/core": "^10.5.0",
+    "ant-design-vue": "^4.0.6",
+    "axios": "^1.6.0",
+    "bignumber.js": "^9.1.2",
+    "dayjs": "^1.11.10",
+    "lodash-es": "^4.17.21",
+    "nprogress": "^0.2.0",
+    "vue": "^3.3.7",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^1.2.1",
+    "@types/lodash-es": "^4.17.10",
+    "@types/node": "18",
+    "@types/nprogress": "^0.2.3",
+    "type-fest": "^4.6.0",
+    "typescript": "^5.2.2",
+    "vue-component-type-helpers": "^1.8.22"
+  }
+}