@peng_kai/kit 0.1.17 → 0.2.0-beta.1

package/antd/components/InputNumberRange.vue

@@ -1,59 +1,59 @@
-<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>
+<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/useAntdForm.helpers.ts

@@ -1,15 +1,38 @@
-export { buildGroupFieldName, parseGroupFieldName, isSameGroup, isSameField, getGroupIndex, GROUP_SEP };
+import type { FormItemProps } from 'ant-design-vue/es/form';
+
+export {
+  buildGroupField,
+  parseGroupField,
+  groupingForm,
+  formatGroup,
+  isSameGroup,
+  isSameField,
+  getGroupIndex,
+  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]+)`,
+  `(?<groupName>.+?)${GROUP_SEP}(?<index>\\d+)${GROUP_SEP}(?<fieldName>.+)`,
 );
 
-function buildGroupFieldName(name: string, index: number, field: string) {
+/**
+ * 构建组字段名
+ * @param name - 组名
+ * @param index - 组索引
+ * @param field - 字段名
+ * @returns 返回组字段名
+ */
+function buildGroupField(name: string, index: number, field: string) {
   return name + GROUP_SEP + index + GROUP_SEP + field;
 }
 
-function parseGroupFieldName(name: string) {
+/**
+ * 解析组字段名
+ * @param name - 组字段名
+ * @returns 返回一个数组，包含组名、组索引和字段名
+ */
+function parseGroupField(name: string) {
   const res = name.match(groupFieldNameRE);
   const ret = {
     fieldName: '',
@@ -26,23 +49,84 @@ function parseGroupFieldName(name: string) {
   return ret;
 }
 
+/**
+ * 根据指定的组名对表单项进行分组
+ * @param groupName - 要分组的组名
+ * @param items - 包含表单项的对象
+ * @returns 返回一个对象，其键为组索引，值为该组内的表单项
+ */
+function groupingForm(groupName: string, items: Record<string, FormItemProps>) {
+  const _groups: Record<number, typeof items> = {};
+
+  for (const [key, item] of Object.entries(items)) {
+    const { groupName: name, index } = parseGroupField(key);
+
+    if (name === groupName) {
+      _groups[index] ??= {};
+      _groups[index][key] = item;
+    }
+  }
+
+  return _groups;
+}
+
+/**
+ * 格式化表单项组
+ * @param name - 组名
+ * @param items - 包含表单数据
+ * @returns 返回一个数组，其元素为分组后的表单项对象，如果没有找到匹配的组名，则返回 undefined
+ */
+function formatGroup(name: string, items: Record<string, any>) {
+  const group: any[] = [];
+
+  for (const k in items) {
+    const params = parseGroupField(k);
+
+    if (params.groupName !== name || params.index === -1)
+      continue;
+
+    group[params.index] ??= {};
+    group[params.index][params.fieldName] = items[k];
+  }
+
+  return group?.length ? group.filter(g => !!g) : undefined;
+}
+
+/**
+ * 获取指定组名的最大索引值
+ * @param name - 组名
+ * @param schemas - 包含组字段的对象
+ * @returns 返回指定组名的最大索引值，如果没有找到匹配的组名，则返回 -1
+ */
 function getGroupIndex(name: string, schemas: Record<string, any>) {
   const indexs = Object.keys(schemas).map((key) => {
-    const { groupName, index } = parseGroupFieldName(key);
+    const { groupName, index } = parseGroupField(key);
     return groupName === name ? index : -1;
   });
 
-  return Math.max.apply(undefined, indexs);
+  return Math.max(...indexs);
 }
 
+/**
+ * 判断指定的名称是否属于同一组
+ * @param name - 要检查的名称
+ * @param groupName - 组名
+ * @returns 如果指定的名称属于同一组，则返回 true，否则返回 false
+ */
 function isSameGroup(name: string, groupName: string) {
-  const { groupName: gn } = parseGroupFieldName(name);
+  const { groupName: gn } = parseGroupField(name);
 
   return gn === groupName;
 }
 
+/**
+ * 判断指定的字段名是否相同
+ * @param name - 要检查的名称
+ * @param fieldName - 字段名
+ * @returns 如果指定的名称和字段名相同，则返回 true，否则返回 false
+ */
 function isSameField(name: string, fieldName: string) {
-  const { fieldName: fn } = parseGroupFieldName(name);
+  const { fieldName: fn } = parseGroupField(name);
 
   return fn === fieldName;
 }

package/antd/hooks/useAntdForm.ts

@@ -1,28 +1,45 @@
-import { reactiveComputed } from '@vueuse/core';
+/**
+ * TODO:
+ * 1. 分组表单排序
+ */
+
 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';
+import { type MaybeRefOrGetter, computed, reactive, ref, toRef, watch, watchEffect } from 'vue';
+import { mapValues } from 'lodash-es';
+import { GROUP_SEP, buildGroupField, getGroupIndex } from './useAntdForm.helpers';
 
 export { useAntdForm };
-export type { TField, RecordToSchemas };
+export type { SchemaConfig, ItemSchema };
+
+type SchemaConfig<T> = {
+  [P in keyof T]: {
+    value: MaybeRefOrGetter<T[P]>
+    show?: (state: T) => boolean
+    rules?: RuleObject[] | ((state: T) => Array<RuleObject | undefined> | undefined)
+  }
+};
+type ItemSchema = SchemaConfig<any>[string];
+
+interface Options<S, TS> {
+  transform?: (state: S) => TS
+}
+
+function useAntdForm<S extends Record<string, any>, TS = S>(schemas: MaybeRefOrGetter<SchemaConfig<S>>, options?: Options<S, TS>) {
+  const schemasR = toRef(schemas);
 
-function useAntdForm<
-  F extends Record<string, TField>,
-  S extends GetFormState<F>,
-  STF = S,
->(
-  schemas: F,
-  _options?: {
-    transform?: (state: S) => STF
-  },
-) {
+  const state = ref({} as S);
+  const stateTF = computed<TS>(() => options?.transform?.(<any>state.value) ?? <any>state.value);
+  const show = computed(() => mapValues(state.value, (_, k): boolean => schemasR.value[k].show?.(state.value) ?? true));
+  const props = computed<FormProps>(() => ({ model: state.value, ref: (c: any) => (formRef.value = c) }));
+  const itemProps = computed(() => mapValues(state.value, (_, k): FormItemProps => {
+    const r = schemasR.value[k].rules;
+    const rules = typeof r === 'function' ? r(state.value)?.filter((i: any) => !!i) : r;
+
+    return { name: k, rules };
+  }));
   const formRef = ref<FormInstance>();
   const $form = {
-    get clearValidate() {
-      return formRef.value?.clearValidate;
-    },
     get getFieldsValue() {
       return formRef.value?.getFieldsValue;
     },
@@ -38,64 +55,39 @@ function useAntdForm<
     get validateFields() {
       return formRef.value?.validateFields;
     },
-    setField(name: string, schema: TField) {
-      (schemas as any)[name] = schema;
+    get clearValidate() {
+      return formRef.value?.clearValidate;
     },
-    addGroup(groupName: string, groupSchemas: Record<string, TField>) {
-      const i = getGroupIndex(groupName, schemas) + 1;
+    addGroup(groupName: string, groupSchemas: Record<string, ItemSchema>) {
+      const i = getGroupIndex(groupName, schemasR.value) + 1;
 
       Object.keys(groupSchemas).forEach((key) => {
-        const name = buildGroupFieldName(groupName, i, key);
-        (schemas as any)[name] = groupSchemas[key];
+        const name = buildGroupField(groupName, i, key);
+        schemasR.value[name] = groupSchemas[key];
       });
     },
     removeGroup(groupName: string, index?: number) {
-      const i = index ?? getGroupIndex(groupName, schemas);
+      const i = index ?? getGroupIndex(groupName, schemasR.value);
 
-      Object.keys(schemas).forEach((key) => {
+      Object.keys(schemasR.value).forEach((key) => {
         if (key.startsWith(groupName + GROUP_SEP + i))
-          Reflect.deleteProperty(schemas, key);
+          Reflect.deleteProperty(schemasR.value, key);
       });
     },
   };
-  const state = reactiveComputed(() => {
-    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>;
 
-    return props;
-  });
-  const stateTF = _options?.transform ? computed(() => _options.transform!(state)) : computed(() => state);
+  watch(itemProps, () => $form.clearValidate?.(), { flush: 'post', deep: true });
 
-  return {
-    $form,
-    state,
-    stateTF: stateTF as ComputedRef<STF>,
-    props,
-    itemProps,
-  };
-}
+  watchEffect(() => {
+    const _state: any = {};
 
-interface TField<V = any> {
-  value: V
-  rules?: RuleObject[]
-}
+    for (const k in schemasR.value) {
+      const item = schemasR.value[k];
+      _state[k] = (k in state.value) ? toRef(state.value, k) : toRef(item, 'value');
+    }
 
-type RecordToSchemas<T extends Record<string, unknown>> = {
-  [K in keyof T]: TField<T[K]>
-};
+    state.value = _state;
+  });
 
-type GetFormState<C extends Record<string, TField>> = {
-  [K in keyof C]: UnwrapRef<C[K]['value']>;
-};
+  return reactive({ state, stateTF, show, props, itemProps, $form });
+}