@peng_kai/kit 0.0.9 → 0.0.11

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, isProxy, reactive, toRefs, toRef, h } 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, isProxy, reactive, toRefs, toRef, h } 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 }
+}

package/antd/hooks/useAntdForm.ts

@@ -5,9 +5,13 @@ import type { ComputedRef, UnwrapRef } from 'vue'
 import { GROUP_SEP, buildGroupFieldName, getGroupIndex } from './useAntdForm.helpers'
 
 export { useAntdForm }
-export type { TField }
+export type { TField, RecordToSchemas }
 
-function useAntdForm<F extends Record<string, TField>, S extends GetFormState<F>, STF = S>(
+function useAntdForm<
+  F extends Record<string, TField>, 
+  S extends GetFormState<F>, 
+  STF = S
+>(
   schemas: F,
   _options?: {
     transform?: (state: S) => STF
@@ -82,10 +86,15 @@ function useAntdForm<F extends Record<string, TField>, S extends GetFormState<F>
   }
 }
 
-interface TField {
-  value: any
+interface TField<V = any> {
+  value: V
   rules?: RuleObject[]
 }
+
+type RecordToSchemas<T extends Record<string, unknown>> = {
+  [K in keyof T]: TField<T[K]>
+}
+
 type GetFormState<C extends Record<string, TField>> = {
   [K in keyof C]: UnwrapRef<C[K]['value']>;
-}
+}

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) {
-  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/index.ts

@@ -4,4 +4,4 @@ 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 } from './hooks/useAntdForm.ts'
+export type { TField, RecordToSchemas } from './hooks/useAntdForm.ts'

package/components/infinite-query/index.ts

@@ -1 +1 @@
-export { default as InfiniteQuery } from './src/InfiniteQuery.vue'
+export { default as InfiniteQuery } from './src/InfiniteQuery.vue'

package/components/infinite-query/src/InfiniteQuery.vue

@@ -1,147 +1,147 @@
-<script lang="ts">
-import { computed, ref, unref } from "vue";
-import type { UseInfiniteQueryReturnType } from '@tanstack/vue-query'
-import { useCreateTrigger } from './useCreateTrigger'
-</script>
-
-<script setup lang="ts" generic="T extends UseInfiniteQueryReturnType<any, any>">
-type TPage = T extends UseInfiniteQueryReturnType<infer P, any> ? NonNullable<P> : any
-type TRecord = TPage extends { list: Array<infer I> } ? I : any
-
-const props = defineProps<{
-  queryier: T
-}>()
-
-const { queryier } = props
-const pages = computed(() => queryier.data.value?.pages)
-// TODO: 状态之间的互斥仍有问题
-const isInitialLoading = computed(() => queryier.isInitialLoading.value)
-const isInitialLoadingError = computed(() => queryier.isLoadingError.value && !isInitialLoading.value)
-const isMoreLoading = computed(
-  () => (queryier.isFetchingNextPage.value || queryier.isFetching.value) && !isInitialLoading.value,
-)
-const isMoreLoadingError = computed(() => queryier.isRefetchError.value && !isMoreLoading.value)
-const noMore = computed(
-  () =>
-    !queryier.hasNextPage?.value
-    && !isInitialLoading.value
-    && !isInitialLoadingError.value
-    && !isMoreLoading.value
-    && !isMoreLoadingError.value,
-)
-const $container = ref<HTMLElement>()
-const containerCssVars = computed(() => {
-  const ctnEle = unref($container)
-
-  if (!ctnEle)
-    return {}
-
-  const rect = ctnEle.getBoundingClientRect()
-
-  return {
-    '--ctn-height': `${rect.height}px`,
-  }
-})
-
-function refetch() {
-  queryier.refetch()
-}
-
-function refetchLastPage() {
-  queryier.refetch({
-    refetchPage(lastPage: any, _index, allPages: any[]) {
-      const lastIndex = allPages?.length - 1
-      return lastPage?.pagination?.page === allPages?.[lastIndex]?.pagination?.page
-    },
-  })
-}
-
-function fetchNextPage() {
-  const { isFetching, isLoading, hasNextPage } = queryier
-
-  if (isFetching.value || isLoading.value || !hasNextPage?.value)
-    return
-
-  queryier.fetchNextPage()
-}
-
-function triggerFetchNextPage() {
-  if (queryier.isError.value)
-    return
-
-  fetchNextPage()
-}
-
-useCreateTrigger($container, triggerFetchNextPage)
-</script>
-
-<template>
-  <div ref="$container" class="infinite-query-wrapper" :style="containerCssVars">
-    <div v-if="isInitialLoading" class="initial-loading">
-      <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
-    </div>
-    <div v-if="isInitialLoadingError" class="initial-loading-error" @click="refetch()">
-      <span>加载失败，点击重试</span>
-    </div>
-
-    <div v-for="(page, i) of pages" :key="i">
-      <template v-for="record of page.list">
-        <slot :record="record as TRecord" />
-      </template>
-    </div>
-
-    <div v-if="isMoreLoading" class="more-loading">
-      <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
-      <span class="ml-1 text">加载中...</span>
-    </div>
-    <div v-if="isMoreLoadingError" class="more-loading-error" @click="fetchNextPage()">
-      <span class="text">加载失败，点击重试</span>
-    </div>
-    <div v-if="noMore" class="no-more" @click="refetchLastPage()">
-      <span class="text">暂无更多</span>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.infinite-query-wrapper {
-  overflow: auto;
-  font-size: 14px;
-}
-
-.loading-icon {
-  display: block;
-  color: var(--antd-colorPrimary);
-  font-size: 1.2em;
-}
-
-.initial-loading,
-.initial-loading-error,
-.more-loading,
-.more-loading-error,
-.no-more {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--antd-colorTextSecondary);
-}
-
-.initial-loading,
-.initial-loading-error {
-  height: var(--ctn-height, 100px);
-}
-
-.initial-loading-error {
-  cursor: pointer;
-}
-
-.more-loading,
-.more-loading-error,
-.no-more {
-  height: 50px;
-}
-
-.more-loading-error {
-  cursor: pointer;
-}
-</style>
+<script lang="ts">
+import { computed, ref, unref } from "vue";
+import type { UseInfiniteQueryReturnType } from '@tanstack/vue-query'
+import { useCreateTrigger } from './useCreateTrigger'
+</script>
+
+<script setup lang="ts" generic="T extends UseInfiniteQueryReturnType<any, any>">
+type TPage = T extends UseInfiniteQueryReturnType<infer P, any> ? NonNullable<P> : any
+type TRecord = TPage extends { list: Array<infer I> } ? I : any
+
+const props = defineProps<{
+  queryier: T
+}>()
+
+const { queryier } = props
+const pages = computed(() => queryier.data.value?.pages)
+// TODO: 状态之间的互斥仍有问题
+const isInitialLoading = computed(() => queryier.isInitialLoading.value)
+const isInitialLoadingError = computed(() => queryier.isLoadingError.value && !isInitialLoading.value)
+const isMoreLoading = computed(
+  () => (queryier.isFetchingNextPage.value || queryier.isFetching.value) && !isInitialLoading.value,
+)
+const isMoreLoadingError = computed(() => queryier.isRefetchError.value && !isMoreLoading.value)
+const noMore = computed(
+  () =>
+    !queryier.hasNextPage?.value
+    && !isInitialLoading.value
+    && !isInitialLoadingError.value
+    && !isMoreLoading.value
+    && !isMoreLoadingError.value,
+)
+const $container = ref<HTMLElement>()
+const containerCssVars = computed(() => {
+  const ctnEle = unref($container)
+
+  if (!ctnEle)
+    return {}
+
+  const rect = ctnEle.getBoundingClientRect()
+
+  return {
+    '--ctn-height': `${rect.height}px`,
+  }
+})
+
+function refetch() {
+  queryier.refetch()
+}
+
+function refetchLastPage() {
+  queryier.refetch({
+    refetchPage(lastPage: any, _index, allPages: any[]) {
+      const lastIndex = allPages?.length - 1
+      return lastPage?.pagination?.page === allPages?.[lastIndex]?.pagination?.page
+    },
+  })
+}
+
+function fetchNextPage() {
+  const { isFetching, isLoading, hasNextPage } = queryier
+
+  if (isFetching.value || isLoading.value || !hasNextPage?.value)
+    return
+
+  queryier.fetchNextPage()
+}
+
+function triggerFetchNextPage() {
+  if (queryier.isError.value)
+    return
+
+  fetchNextPage()
+}
+
+useCreateTrigger($container, triggerFetchNextPage)
+</script>
+
+<template>
+  <div ref="$container" class="infinite-query-wrapper" :style="containerCssVars">
+    <div v-if="isInitialLoading" class="initial-loading">
+      <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
+    </div>
+    <div v-if="isInitialLoadingError" class="initial-loading-error" @click="refetch()">
+      <span>加载失败，点击重试</span>
+    </div>
+
+    <div v-for="(page, i) of pages" :key="i">
+      <template v-for="record of page.list">
+        <slot :record="record as TRecord" />
+      </template>
+    </div>
+
+    <div v-if="isMoreLoading" class="more-loading">
+      <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
+      <span class="ml-1 text">加载中...</span>
+    </div>
+    <div v-if="isMoreLoadingError" class="more-loading-error" @click="fetchNextPage()">
+      <span class="text">加载失败，点击重试</span>
+    </div>
+    <div v-if="noMore" class="no-more" @click="refetchLastPage()">
+      <span class="text">暂无更多</span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.infinite-query-wrapper {
+  overflow: auto;
+  font-size: 14px;
+}
+
+.loading-icon {
+  display: block;
+  color: var(--antd-colorPrimary);
+  font-size: 1.2em;
+}
+
+.initial-loading,
+.initial-loading-error,
+.more-loading,
+.more-loading-error,
+.no-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--antd-colorTextSecondary);
+}
+
+.initial-loading,
+.initial-loading-error {
+  height: var(--ctn-height, 100px);
+}
+
+.initial-loading-error {
+  cursor: pointer;
+}
+
+.more-loading,
+.more-loading-error,
+.no-more {
+  height: 50px;
+}
+
+.more-loading-error {
+  cursor: pointer;
+}
+</style>