@peng_kai/kit 0.0.14 → 0.0.16

package/antd/components/InputNumberRange.vue

@@ -1,47 +1,53 @@
-<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 { 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>

package/antd/directives/formLabelAlign.ts

@@ -1,31 +1,36 @@
-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`;
+
+  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/createAntdModal.ts

@@ -1,61 +1,61 @@
-import { createVNode, defineComponent, reactive, render as vueRender } from 'vue'
-import { Modal as AntModal } from 'ant-design-vue'
-import { tryOnUnmounted } from '@vueuse/core'
-import type { VNode, 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 { createVNode, defineComponent, reactive, render as vueRender } from 'vue';
+import { Modal as AntModal } from 'ant-design-vue';
+import { tryOnUnmounted } from '@vueuse/core';
+import type { Component, VNode } from 'vue';
+import type { ModalProps } from 'ant-design-vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { Writable } from 'type-fest';
 
 export function createAntdModal<Comp extends Component>(comp: Comp, defaultModalProps: ModalProps = {}) {
-  type TCompProps = Writable<ComponentProps<Comp>>
+  type TCompProps = Writable<ComponentProps<Comp>>;
 
-  let holderUsed = false // 是否是使用 ContextHolder 的方式挂载弹窗
-  let container: DocumentFragment
-  let instance: VNode
-  const compProps = reactive({} as TCompProps)
+  let holderUsed = false; // 是否是使用 ContextHolder 的方式挂载弹窗
+  let container: DocumentFragment;
+  let instance: VNode;
+  const compProps = reactive({} as TCompProps);
   const modalProps = reactive<ModalProps>({
     'open': false,
     'destroyOnClose': true,
     ...defaultModalProps,
     'onUpdate:open': (value) => {
-      modalProps.open = value
+      modalProps.open = value;
     },
     'afterClose': () => {
       container && vueRender(null, container as any);
       (instance as any) = null;
-      (container as any) = null
+      (container as any) = null;
     },
-  })
+  });
   const ContextHolder = defineComponent({
     setup() {
       if (!instance)
-        holderUsed = true
+        holderUsed = true;
     },
     render() {
-      return createVNode(AntModal, modalProps, { modalRender: () => createVNode(comp, compProps) })
+      return createVNode(AntModal, modalProps, { modalRender: () => createVNode(comp, compProps) });
     },
-  })
+  });
 
   const open = (newCompProps: TCompProps) => {
-    Object.keys(compProps).forEach(k => delete compProps[k])
+    Object.keys(compProps).forEach(k => delete compProps[k]);
     Object.assign(compProps, {
       ...newCompProps,
       onClose: close,
-    })
+    });
 
     if (!holderUsed) {
-      container = document.createDocumentFragment()
-      instance = createVNode(ContextHolder)
-      vueRender(instance, container as any)
+      container = document.createDocumentFragment();
+      instance = createVNode(ContextHolder);
+      vueRender(instance, container as any);
     }
 
-    modalProps.open = true
-  }
+    modalProps.open = true;
+  };
   const close = () => {
-    modalProps.open = false
-  }
+    modalProps.open = false;
+  };
 
-  tryOnUnmounted(close)
+  tryOnUnmounted(close);
 
-  return { open, close, ContextHolder }
+  return { open, close, ContextHolder };
 }

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, 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 };
+
+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.helpers.ts

@@ -1,48 +1,48 @@
-export { buildGroupFieldName, parseGroupFieldName, isSameGroup, isSameField, getGroupIndex, GROUP_SEP }
+export { buildGroupFieldName, parseGroupFieldName, isSameGroup, isSameField, getGroupIndex, GROUP_SEP };
 
-const GROUP_SEP = '__'
+const GROUP_SEP = '__';
 const groupFieldNameRE = new RegExp(
   `(?<groupName>[a-zA-Z0-9]+)${GROUP_SEP}(?<index>\\d+)${GROUP_SEP}(?<fieldName>[a-zA-Z0-9]+)`,
-)
+);
 
 function buildGroupFieldName(name: string, index: number, field: string) {
-  return name + GROUP_SEP + index + GROUP_SEP + field
+  return name + GROUP_SEP + index + GROUP_SEP + field;
 }
 
 function parseGroupFieldName(name: string) {
-  const res = name.match(groupFieldNameRE)
+  const res = name.match(groupFieldNameRE);
   const ret = {
     fieldName: '',
     index: -1,
     groupName: '',
-  }
+  };
 
   if (res?.groups) {
-    ret.fieldName = res.groups.fieldName
-    ret.index = Number(res.groups.index)
-    ret.groupName = res.groups.groupName
+    ret.fieldName = res.groups.fieldName;
+    ret.index = Number(res.groups.index);
+    ret.groupName = res.groups.groupName;
   }
 
-  return ret
+  return ret;
 }
 
 function getGroupIndex(name: string, schemas: Record<string, any>) {
   const indexs = Object.keys(schemas).map((key) => {
-    const { groupName, index } = parseGroupFieldName(key)
-    return groupName === name ? index : -1
-  })
+    const { groupName, index } = parseGroupFieldName(key);
+    return groupName === name ? index : -1;
+  });
 
-  return Math.max.apply(undefined, indexs)
+  return Math.max.apply(undefined, indexs);
 }
 
 function isSameGroup(name: string, groupName: string) {
-  const { groupName: gn } = parseGroupFieldName(name)
+  const { groupName: gn } = parseGroupFieldName(name);
 
-  return gn === groupName
+  return gn === groupName;
 }
 
 function isSameField(name: string, fieldName: string) {
-  const { fieldName: fn } = parseGroupFieldName(name)
+  const { fieldName: fn } = parseGroupFieldName(name);
 
-  return fn === fieldName
+  return fn === fieldName;
 }

package/antd/hooks/useAntdForm.ts

@@ -1,81 +1,82 @@
-import { reactiveComputed } from '@vueuse/core'
-import type { FormInstance, FormItemProps, FormProps, RuleObject } from 'ant-design-vue/es/form'
-import { ref, computed } from 'vue'
-import type { ComputedRef, UnwrapRef } from 'vue'
-import { GROUP_SEP, buildGroupFieldName, getGroupIndex } from './useAntdForm.helpers'
+import { reactiveComputed } from '@vueuse/core';
+import type { FormInstance, FormItemProps, RuleObject } from 'ant-design-vue/es/form';
+import type { FormProps } from 'ant-design-vue';
+import { computed, ref } from 'vue';
+import type { ComputedRef, UnwrapRef } from 'vue';
+import { GROUP_SEP, buildGroupFieldName, getGroupIndex } from './useAntdForm.helpers';
 
-export { useAntdForm }
-export type { TField, RecordToSchemas }
+export { useAntdForm };
+export type { TField, RecordToSchemas };
 
 function useAntdForm<
-  F extends Record<string, TField>, 
-  S extends GetFormState<F>, 
-  STF = S
+  F extends Record<string, TField>,
+  S extends GetFormState<F>,
+  STF = S,
 >(
   schemas: F,
   _options?: {
     transform?: (state: S) => STF
   },
 ) {
-  const formRef = ref<FormInstance>()
+  const formRef = ref<FormInstance>();
   const $form = {
     get clearValidate() {
-      return formRef.value?.clearValidate
+      return formRef.value?.clearValidate;
     },
     get getFieldsValue() {
-      return formRef.value?.getFieldsValue
+      return formRef.value?.getFieldsValue;
     },
     get resetFields() {
-      return formRef.value?.resetFields
+      return formRef.value?.resetFields;
     },
     get scrollToField() {
-      return formRef.value?.scrollToField
+      return formRef.value?.scrollToField;
     },
     get validate() {
-      return formRef.value?.validate
+      return formRef.value?.validate;
     },
     get validateFields() {
-      return formRef.value?.validateFields
+      return formRef.value?.validateFields;
     },
     setField(name: string, schema: TField) {
-      (schemas as any)[name] = schema
+      (schemas as any)[name] = schema;
     },
     addGroup(groupName: string, groupSchemas: Record<string, TField>) {
-      const i = getGroupIndex(groupName, schemas) + 1
+      const i = getGroupIndex(groupName, schemas) + 1;
 
       Object.keys(groupSchemas).forEach((key) => {
         const name = buildGroupFieldName(groupName, i, key);
-        (schemas as any)[name] = groupSchemas[key]
-      })
+        (schemas as any)[name] = groupSchemas[key];
+      });
     },
     removeGroup(groupName: string, index?: number) {
-      const i = index ?? getGroupIndex(groupName, schemas)
+      const i = index ?? getGroupIndex(groupName, schemas);
 
       Object.keys(schemas).forEach((key) => {
         if (key.startsWith(groupName + GROUP_SEP + i))
-          Reflect.deleteProperty(schemas, key)
-      })
+          Reflect.deleteProperty(schemas, key);
+      });
     },
-  }
+  };
   const state = reactiveComputed(() => {
-    return Object.fromEntries(Object.entries(schemas).map(([k, v]) => [k, v.value])) as S
-  })
+    return Object.fromEntries(Object.entries(schemas).map(([k, v]) => [k, v.value])) as S;
+  });
   const props = reactiveComputed<FormProps>(() => {
     return {
       model: state,
       ref: (c: any) => (formRef.value = c),
-    }
-  })
+    };
+  });
   const itemProps = reactiveComputed(() => {
     const propsTuple = Object.entries(schemas).map(([key, value]): [string, FormItemProps] => [
       key,
       { name: key, rules: value.rules },
-    ])
-    const props = Object.fromEntries(propsTuple) as Record<keyof S, FormItemProps>
+    ]);
+    const props = Object.fromEntries(propsTuple) as Record<keyof S, FormItemProps>;
 
-    return props
-  })
-  const stateTF = _options?.transform ? computed(() => _options.transform!(state)) : computed(() => state)
+    return props;
+  });
+  const stateTF = _options?.transform ? computed(() => _options.transform!(state)) : computed(() => state);
 
   return {
     $form,
@@ -83,7 +84,7 @@ function useAntdForm<
     stateTF: stateTF as ComputedRef<STF>,
     props,
     itemProps,
-  }
+  };
 }
 
 interface TField<V = any> {
@@ -93,8 +94,8 @@ interface TField<V = any> {
 
 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']>;
-}
+};