@peng_kai/kit 0.0.13 → 0.0.15

package/admin/layout/large/PageTab.vue

@@ -1,71 +1,71 @@
-<script setup lang="ts">
-import { Tabs as ATabs, TabPane as ATabPane } from "ant-design-vue";
-import { getDependencies } from "../../../kitDependencies";
-
-const { usePageTab } = getDependencies()
-const { activeTab, tabList, openTab, closeTab } = usePageTab()
-</script>
-
-<template>
-  <ATabs
-    class="app-page-tabs"
-    :activeKey="activeTab"
-    type="editable-card"
-    size="small"
-    :animated="false"
-    :hideAdd="true"
-    :tabBarGutter="4"
-    @tabClick="(openTab as any)"
-    @edit="(closeTab as any)"
-  >
-    <ATabPane v-for="tab of tabList" :key="tab.key" :tab="tab.title">
-      <template #closeIcon>
-        <i class="i-icon-park-outline:close" />
-      </template>
-    </ATabPane>
-  </ATabs>
-</template>
-
-<style scoped lang="scss">
-.app-page-tabs {
-  :deep(.ant-tabs-nav) {
-    margin: 0;
-  }
-
-  :deep(.ant-tabs-nav::before) {
-    display: none;
-  }
-
-  :deep(.ant-tabs-tab) {
-    --uno: 'border-rd-3px! text-14px p-[3px_1px_3px_8px]! select-none';
-  }
-
-  :deep(.ant-tabs-tab .ant-tabs-tab-btn) {
-    transform: translateX(8px);
-  }
-
-  :deep(.ant-tabs-tab-active) {
-    --uno: 'border-[currentColor]!';
-  }
-
-  :deep(.ant-tabs-tab-remove) {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    margin: 0;
-    opacity: 0;
-    transition: all 150ms;
-  }
-
-  :deep(.ant-tabs-tab:hover .ant-tabs-tab-btn),
-  :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
-    transform: translateX(0);
-  }
-
-  :deep(.ant-tabs-tab:hover .ant-tabs-tab-remove),
-  :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
-    margin-left: 0;
-    opacity: 1;
-  }
-}
-</style>
+<script setup lang="ts">
+import { Tabs as ATabs, TabPane as ATabPane } from "ant-design-vue";
+import { getDependencies } from "../../../kitDependencies";
+
+const { usePageTab } = getDependencies()
+const { activeTab, tabList, openTab, closeTab } = usePageTab()
+</script>
+
+<template>
+  <ATabs
+    class="app-page-tabs"
+    :activeKey="activeTab"
+    type="editable-card"
+    size="small"
+    :animated="false"
+    :hideAdd="true"
+    :tabBarGutter="4"
+    @tabClick="(openTab as any)"
+    @edit="(closeTab as any)"
+  >
+    <ATabPane v-for="tab of tabList" :key="tab.key" :tab="tab.title">
+      <template #closeIcon>
+        <i class="i-icon-park-outline:close" />
+      </template>
+    </ATabPane>
+  </ATabs>
+</template>
+
+<style scoped lang="scss">
+.app-page-tabs {
+  :deep(.ant-tabs-nav) {
+    margin: 0;
+  }
+
+  :deep(.ant-tabs-nav::before) {
+    display: none;
+  }
+
+  :deep(.ant-tabs-tab) {
+    --uno: 'border-rd-3px! text-14px p-[3px_1px_3px_8px]! select-none';
+  }
+
+  :deep(.ant-tabs-tab .ant-tabs-tab-btn) {
+    transform: translateX(8px);
+  }
+
+  :deep(.ant-tabs-tab-active) {
+    --uno: 'border-[currentColor]!';
+  }
+
+  :deep(.ant-tabs-tab-remove) {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    margin: 0;
+    opacity: 0;
+    transition: all 150ms;
+  }
+
+  :deep(.ant-tabs-tab:hover .ant-tabs-tab-btn),
+  :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
+    transform: translateX(0);
+  }
+
+  :deep(.ant-tabs-tab:hover .ant-tabs-tab-remove),
+  :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+</style>

package/admin/styles/globalCover.scss

@@ -1,43 +1,43 @@
-:root {
-  // table 组件头部圆角设为 0
-  .ant-table-wrapper {
-    .ant-table .ant-table-header,
-    table,
-    .ant-table-container table > thead > tr:first-child > *:first-child,
-    .ant-table-container table > thead > tr:first-child > *:last-child {
-      border-radius: 0;
-    }
-
-    .ant-pagination {
-      margin-bottom: 0;
-    }
-  }
-
-
-  // 隐藏在 sticky 模式下的滚动条
-  .ant-table-sticky-scroll {
-    display: none;
-  }
-
-  // 卡片
-  .ant-card .ant-card-actions > li > span {
-    cursor: inherit;
-  }
-
-  // Tab 溢出出现下列框时
-  .ant-tabs-dropdown-menu-title-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  // 表格
-  .ant-table-wrapper {
-    .ant-table-row-expand-icon-collapsed::before {
-      height: 1.5px;
-    }
-    .ant-table-row-expand-icon-collapsed::after {
-      width: 1.5px;
-    }
-  }
-}
+:root {
+  // table 组件头部圆角设为 0
+  .ant-table-wrapper {
+    .ant-table .ant-table-header,
+    table,
+    .ant-table-container table > thead > tr:first-child > *:first-child,
+    .ant-table-container table > thead > tr:first-child > *:last-child {
+      border-radius: 0;
+    }
+
+    .ant-pagination {
+      margin-bottom: 0;
+    }
+  }
+
+
+  // 隐藏在 sticky 模式下的滚动条
+  .ant-table-sticky-scroll {
+    display: none;
+  }
+
+  // 卡片
+  .ant-card .ant-card-actions > li > span {
+    cursor: inherit;
+  }
+
+  // Tab 溢出出现下列框时
+  .ant-tabs-dropdown-menu-title-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  // 表格
+  .ant-table-wrapper {
+    .ant-table-row-expand-icon-collapsed::before {
+      height: 1.5px;
+    }
+    .ant-table-row-expand-icon-collapsed::after {
+      width: 1.5px;
+    }
+  }
+}

package/antd/components/InputNumberRange.vue

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

package/antd/directives/formLabelAlign.ts

@@ -1,31 +1,31 @@
-import type { App } from 'vue'
-
-export function formLabelAlign(app: App) {
-  const directiveName = 'antd-form-label-align'
-  const resizeObserverKey = `${directiveName}@resizeObserver`
-
-  app.directive(directiveName, {
-    mounted(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));
-      (el as any)[resizeObserverKey] = resizeObserver
-    },
-    beforeUnmount(el) {
-      el[resizeObserverKey]?.disconnect()
-    },
-  })
+import type { App } from 'vue'
+
+export function formLabelAlign(app: App) {
+  const directiveName = 'antd-form-label-align'
+  const resizeObserverKey = `${directiveName}@resizeObserver`
+
+  app.directive(directiveName, {
+    mounted(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));
+      (el as any)[resizeObserverKey] = resizeObserver
+    },
+    beforeUnmount(el) {
+      el[resizeObserverKey]?.disconnect()
+    },
+  })
 }

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/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