@peng_kai/kit 0.0.9 → 0.0.10

package/admin/layout/large/Menu.vue

@@ -1,73 +1,68 @@
-<script lang="ts">
-import { computed, ref, watch } from "vue";
-import { Menu as AMenu } from "ant-design-vue";
-import type { ItemType } from 'ant-design-vue'
-import { useMenu } from '../../hooks'
-import type { TMenu } from '../../hooks'
-import { kitDependencies } from "../../../kitDependencies";
-
-function formatMenu(menu: TMenu): ItemType {
-  return {
-    key: menu.key,
-    title: menu.label,
-    label: menu.label,
-    icon: menu.icon ?? undefined,
-    onClick: (e) => {
-      (e as any).stopPropagation()
-      menu.trigger()
-    },
-    children: menu.children?.map(formatMenu),
-  }
-}
-</script>
-
-<script setup lang="ts">
-const router = kitDependencies.useRouter()
-const { menus, getMenuPath } = useMenu()
-const items = computed(() => menus.map(formatMenu))
-const openKeys = ref<string[]>([])
-const selectedKeys = ref<string[]>([])
-console.log('获取 kitDependencies');
-
-setTimeout(() => {
-}, 3000)
-console.log('菜单对象对比', kitDependencies, kitDependencies.menus === menus);
-
-watch(
-  () => router?.currentRoute.value,
-  (route) => {
-    if (!route) return;
-
-    const menuPath = getMenuPath(route.name as string)
-    openKeys.value = menuPath.map(menu => menu.key)
-    selectedKeys.value = [openKeys.value.pop()!]
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <AMenu
-    class="menu"
-    :items="items"
-    :openKeys="openKeys"
-    :selectedKeys="selectedKeys"
-    mode="inline"
-    :inlineIndent="14"
-  />
-</template>
-
-<style lang="scss" scoped>
-.menu {
-  border-inline-end: none !important;
-
-  &.ant-menu-inline-collapsed {
-    width: var(--app-siderbar-width);
-  }
-
-  &,
-  .ant-menu {
-    background-color: transparent;
-  }
-}
-</style>
+<script lang="ts">
+import { computed, ref, watch } from "vue";
+import { Menu as AMenu } from "ant-design-vue";
+import type { ItemType } from 'ant-design-vue'
+import type { TMenu } from '../../hooks'
+import { getDependencies } from "../../../kitDependencies";
+
+function formatMenu(menu: TMenu): ItemType {
+  return {
+    key: menu.key,
+    title: menu.label,
+    label: menu.label,
+    icon: menu.icon ?? undefined,
+    onClick: (e) => {
+      (e as any).stopPropagation()
+      menu.trigger()
+    },
+    children: menu.children?.map(formatMenu),
+  }
+}
+</script>
+
+<script setup lang="ts">
+const{ useRouter, useMenu } = getDependencies()
+const router = useRouter()
+const { menus, getMenuPath } = useMenu()
+const items = computed(() => menus.map(formatMenu))
+const openKeys = ref<string[]>([])
+const selectedKeys = ref<string[]>([])
+
+watch(
+  () => router?.currentRoute.value,
+  (route) => {
+    if (!route) return;
+
+    const menuPath = getMenuPath(route.name as string)
+    openKeys.value = menuPath.map(menu => menu.key)
+    selectedKeys.value = [openKeys.value.pop()!]
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <AMenu
+    class="menu"
+    :items="items"
+    :openKeys="openKeys"
+    :selectedKeys="selectedKeys"
+    mode="inline"
+    :inlineIndent="14"
+  />
+</template>
+
+<style lang="scss" scoped>
+.menu {
+  border-inline-end: none !important;
+
+  &.ant-menu-inline-collapsed {
+    width: var(--app-siderbar-width);
+  }
+
+  &,
+  .ant-menu {
+    background-color: transparent;
+  }
+}
+</style>

package/admin/layout/large/PageTab.vue

@@ -1,70 +1,71 @@
-<script setup lang="ts">
-import { Tabs as ATabs, TabPane as ATabPane } from "ant-design-vue";
-import { usePageTab } from '../../hooks'
-
-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/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/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) {
-  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) {
+  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