@peng_kai/kit 0.1.10 → 0.1.12

package/admin/permission/vuePlugin.ts

@@ -1,30 +1,30 @@
-import type { App } from 'vue';
-import { getDependencies } from '../../kitDependencies';
-
-export type THasPermissionsFn = ReturnType<ReturnType<typeof getDependencies>['usePermission']>['hasPermissions'];
-
-export function setupPermissionPlugin(app: App) {
-  const { usePermission } = getDependencies();
-  const { hasPermissions } = usePermission();
-
-  app.directive('has-permissions', {
-    mounted(el, binding) {
-      const codes = binding.value;
-
-      if (!hasPermissions(codes))
-        el.remove();
-    },
-    updated(el, binding) {
-      const codes = binding.value;
-
-      if (!hasPermissions(codes))
-        el.remove();
-    },
-  });
-
-  app.use({
-    install(app) {
-      app.config.globalProperties.$hasPermission = hasPermissions;
-    },
-  });
-}
+import type { App } from 'vue';
+import { getDependencies } from '../../kitDependencies';
+
+export type THasPermissionsFn = ReturnType<ReturnType<typeof getDependencies>['usePermission']>['hasPermissions'];
+
+export function setupPermissionPlugin(app: App) {
+  const { usePermission } = getDependencies();
+  const { hasPermissions } = usePermission();
+
+  app.directive('has-permissions', {
+    mounted(el, binding) {
+      const codes = binding.value;
+
+      if (!hasPermissions(codes))
+        el.remove();
+    },
+    updated(el, binding) {
+      const codes = binding.value;
+
+      if (!hasPermissions(codes))
+        el.remove();
+    },
+  });
+
+  app.use({
+    install(app) {
+      app.config.globalProperties.$hasPermission = hasPermissions;
+    },
+  });
+}

package/admin/route-guards/index.ts

@@ -1,3 +1,3 @@
-export { setupPageProgress } from './pageProgress';
-export { setupPageTitle } from './pageTitle';
-export { setupCollapseMenu } from './collapseMenu';
+export { setupPageProgress } from './pageProgress';
+export { setupPageTitle } from './pageTitle';
+export { setupCollapseMenu } from './collapseMenu';

package/admin/route-guards/pageProgress.ts

@@ -1,27 +1,27 @@
-import type { Router } from 'vue-router';
-import { useStyleTag } from '@vueuse/core';
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
-
-/**
- * 用于显示页面跳转时，页面顶部进度条
- */
-export function setupPageProgress(router: Router) {
-  NProgress.configure({ showSpinner: false });
-  useStyleTag(`
-    #nprogress .bar {
-      height: 3px;
-      background: var(--antd-colorPrimary);
-    }
-    #nprogress .peg {
-      box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
-    }
-  `);
-
-  router.beforeEach(() => {
-    NProgress.start();
-  });
-  router.afterEach(() => {
-    setTimeout(() => NProgress.done(), 200);
-  });
-}
+import type { Router } from 'vue-router';
+import { useStyleTag } from '@vueuse/core';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+/**
+ * 用于显示页面跳转时，页面顶部进度条
+ */
+export function setupPageProgress(router: Router) {
+  NProgress.configure({ showSpinner: false });
+  useStyleTag(`
+    #nprogress .bar {
+      height: 3px;
+      background: var(--antd-colorPrimary);
+    }
+    #nprogress .peg {
+      box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
+    }
+  `);
+
+  router.beforeEach(() => {
+    NProgress.start();
+  });
+  router.afterEach(() => {
+    setTimeout(() => NProgress.done(), 200);
+  });
+}

package/admin/route-guards/pageTitle.ts

@@ -1,19 +1,19 @@
-import type { Router } from 'vue-router';
-import { getDependencies } from '../../kitDependencies';
-
-/**
- * 用于在路由跳转后，同步修改 title
- */
-export function setupPageTitle(router: Router) {
-  const deps = getDependencies();
-
-  router.afterEach((to, _, err) => {
-    const title = to.meta.title;
-
-    if (!err) {
-      document.title = typeof title === 'function'
-        ? title()
-        : title ?? deps.appName;
-    }
-  });
-}
+import type { Router } from 'vue-router';
+import { getDependencies } from '../../kitDependencies';
+
+/**
+ * 用于在路由跳转后，同步修改 title
+ */
+export function setupPageTitle(router: Router) {
+  const deps = getDependencies();
+
+  router.afterEach((to, _, err) => {
+    const title = to.meta.title;
+
+    if (!err) {
+      document.title = typeof title === 'function'
+        ? title()
+        : title ?? deps.appName;
+    }
+  });
+}

package/admin/styles/globalCover.scss

@@ -1,54 +1,54 @@
-: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;
-    }
-  }
-
-  .ant-drawer {
-    &:focus {
-      outline: none;
-    }
-
-    &.ant-drawer-bottom .ant-drawer-content {
-      border-top-left-radius: 8px;
-      border-top-right-radius: 8px;
-    }
-  }
-}
+: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;
+    }
+  }
+
+  .ant-drawer {
+    &:focus {
+      outline: none;
+    }
+
+    &.ant-drawer-bottom .ant-drawer-content {
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+    }
+  }
+}

package/admin/styles/index.scss

@@ -28,3 +28,7 @@
 :root {
   font-family: var(--antd-fontFamily);
 }
+
+:root.dark {
+  color-scheme: dark;
+}

package/antd/components/InputNumberRange.vue

@@ -1,53 +1,59 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { InputNumber as AInputNumber, Form } 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 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/useAntdModal.ts

@@ -1,5 +1,5 @@
 import { Modal as AntModal } from 'ant-design-vue';
-import { createVNode, defineComponent, isProxy, reactive, toRef, toRefs } from 'vue';
+import { createVNode, defineComponent, h, isProxy, reactive, ref, toRef, toRefs, watch } from 'vue';
 import type { Component } from 'vue';
 import type { ModalProps } from 'ant-design-vue';
 import type { ComponentProps } from 'vue-component-type-helpers';
@@ -48,8 +48,19 @@ export function useAntdModal<Comp extends Component>(
   };
 
   const PresetComponent = defineComponent({
+    setup() {
+      const hidden = ref(false);
+
+      watch(() => _modalProps.open, (open) => {
+        if (open)
+          hidden.value = false;
+        else
+          setTimeout(() => hidden.value = true, 500);
+      });
+      return { hidden };
+    },
     render() {
-      return createVNode(AntModal, _modalProps, {
+      return createVNode(this.hidden ? 'div' : AntModal, _modalProps, {
         [modalSlotName]: () => createVNode(_comp.is, compProps as any),
       });
     },