@peng_kai/kit 0.2.41 → 0.2.43

package/antd/hooks/useAntdForm.ts

@@ -5,9 +5,8 @@
 
 import type { FormInstance, FormItemProps, RuleObject } from 'ant-design-vue/es/form';
 import type { FormProps } from 'ant-design-vue';
-import { type MaybeRefOrGetter, computed, reactive, ref, shallowRef, toRef, watch, watchEffect } from 'vue';
-import { cloneDeep, mapValues } from 'lodash-es';
-import { reactiveComputed } from '@vueuse/core';
+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 };
@@ -29,7 +28,7 @@ interface Options<S, TS> {
 function useAntdForm<S extends Record<string, unknown>, TS = S>(schemas: MaybeRefOrGetter<SchemaConfig<S>>, options?: Options<S, TS>) {
   const schemasR = toRef(schemas);
 
-  const state = shallowRef({} as S);
+  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) }));
@@ -50,16 +49,15 @@ function useAntdForm<S extends Record<string, unknown>, TS = S>(schemas: MaybeRe
     get scrollToField() {
       return formRef.value?.scrollToField;
     },
+    get validate() {
+      return formRef.value?.validate;
+    },
     get validateFields() {
       return formRef.value?.validateFields;
     },
     get clearValidate() {
       return formRef.value?.clearValidate;
     },
-    async validate(...args: Parameters<FormInstance['validate']>) {
-      const res = await formRef.value?.validate(...args);
-      return cloneDeep(reactive(res ?? {}));
-    },
     addGroup(groupName: string, groupSchemas: Record<string, ItemSchema>) {
       const i = getGroupIndex(groupName, schemasR.value) + 1;
 
@@ -98,5 +96,17 @@ function useAntdForm<S extends Record<string, unknown>, TS = S>(schemas: MaybeRe
     state.value = newState;
   }, { flush: 'pre' });
 
-  return reactive({ state: reactiveComputed(() => state.value as S), stateTF, show, props, itemProps, $form });
+  // 为什么之前用 watchEffect？
+  // watch(schemasR, () => {
+  //   const _state: any = {};
+
+  //   for (const k in schemasR.value) {
+  //     const item = schemasR.value[k];
+  //     _state[k] = (k in state.value) ? toRef(state.value, k) : toRef(item, 'value');
+  //   }
+
+  //   state.value = _state;
+  // }, { immediate: true });
+
+  return reactive({ state, stateTF, show, props, itemProps, $form });
 }

package/antd/hooks/useAntdModal.ts

@@ -1,12 +1,17 @@
 import { Modal as AntModal } from 'ant-design-vue';
-import { createVNode, defineComponent, h, isProxy, reactive, ref, toRef, toRefs, watch } from 'vue';
+import { tryOnUnmounted } from '@vueuse/core';
+import { createVNode, defineComponent, isProxy, reactive, toRef, toRefs } from 'vue';
 import type { Component } from 'vue';
 import type { ModalProps } from 'ant-design-vue';
-import type { ComponentProps } from 'vue-component-type-helpers';
+import type { ComponentEmit, ComponentProps } from 'vue-component-type-helpers';
 import type { Writable } from 'type-fest';
 import { useTemplateRefs } from '../../vue';
 
-const defaultModalProps: ModalProps = { open: false, destroyOnClose: true, wrapClassName: 'antd-cover__basic-modal' };
+interface AntdModalProps extends ModalProps {
+  class?: string
+  rejectOnClose?: boolean
+  [k: string]: any
+}
 
 interface IComponentConfig<Comp extends Component> {
   is: Comp
@@ -14,6 +19,18 @@ interface IComponentConfig<Comp extends Component> {
   type?: 'modal' | 'body'
 }
 
+type ExtractConfirmArgs<T> = T extends {
+  (event: 'confirm', ...args: infer U): any
+} ? U extends [infer V] ? V : any : any;
+type UnwrapNonNullable<T> = T extends NonNullable<infer U> ? U : T;
+
+const defaultModalProps: AntdModalProps = {
+  open: false,
+  destroyOnClose: true,
+  wrapClassName: 'antd-cover__basic-modal',
+  rejectOnClose: false,
+};
+
 /**
  * AntdModal 组件的辅助 Hook
  * @param comp 组件配置，也可以直接传入组件，既 comp.is 参数
@@ -31,7 +48,7 @@ export function useAntdModal<Comp extends Component>(
   const [refs, setRefs] = useTemplateRefs<{
     comp: typeof _comp.is
   }>();
-  const _modalProps: ModalProps = reactive({
+  const _modalProps: AntdModalProps = reactive({
     ...defaultModalProps,
     ...isProxy(modalProps) ? toRefs(modalProps) : modalProps,
     confirmLoading: toRef(() => (refs.comp as any)?.loading),
@@ -41,15 +58,37 @@ export function useAntdModal<Comp extends Component>(
     },
   });
   const modalSlotName = _comp.type === 'body' ? 'default' : 'modalRender';
+  let promiseResolvers: PromiseWithResolvers<ExtractConfirmArgs<UnwrapNonNullable<ComponentEmit<Comp>>>>;
+
+  const _onClose = (e?: any) => {
+    if (_modalProps.rejectOnClose)
+      promiseResolvers.reject(e ?? new Error('Modal Cancel'));
+    else
+      promiseResolvers.resolve(undefined as any);
+  };
+
+  const open = (
+    newCompProps?: Partial<typeof compProps>,
+    newAntdModalProps?: Omit<Partial<ModalProps>, 'open'>,
+  ) => {
+    if (_modalProps.open)
+      return Promise.reject(new Error('Modal is already open'));
 
-  const open = (newCompProps?: Partial<typeof compProps>, newAntdModalProps?: Omit<Partial<ModalProps>, 'open'>) => {
     Object.assign(_modalProps, newAntdModalProps);
     Object.assign(compProps, newCompProps);
 
+    promiseResolvers = Promise.withResolvers();
     _modalProps.open = true;
+
+    return promiseResolvers.promise;
   };
-  const close = () => {
+  const confirm = (ev: any) => {
     _modalProps.open = false;
+    promiseResolvers.resolve(ev);
+  };
+  const close = (ev: any) => {
+    _modalProps.open = false;
+    _onClose(ev);
   };
 
   const PresetComponent = defineComponent({
@@ -62,9 +101,13 @@ export function useAntdModal<Comp extends Component>(
 
   _modalProps['onUpdate:open'] = (visiable) => {
     _modalProps.open = visiable;
+    !visiable && _onClose();
   };
   (compProps as any).ref = setRefs.comp;
   (compProps as any).onClose = close;
+  (compProps as any).onConfirm = confirm;
+
+  tryOnUnmounted(_onClose);
 
   return {
     PresetComponent,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.41",
+  "version": "0.2.43",
   "description": "",
   "author": "",
   "license": "ISC",

package/vue/components/echarts/src/ECharts.vue

@@ -50,6 +50,15 @@ function resetHanlder() {
 }
 useResizeObserver(toRef(() => $chartEle.value?.parentElement), resetHanlder);
 useEventListener(window, 'resize', resetHanlder);
+useEventListener(window, 'click', (ev) => {
+  const inst = echartInst.value;
+
+  // 点击图表外部时，隐藏提示框
+  if (inst && !inst.getDom().contains(ev.target as Node)) {
+    inst.dispatchAction({ type: 'hideTip' });
+    inst.dispatchAction({ type: 'updateAxisPointer', x: -1, y: -1 }); // 移到图表外
+  }
+});
 </script>
 
 <template>