@peng_kai/kit 0.2.44 → 0.2.45

package/antd/hooks/useAntdModal.ts

@@ -1,15 +1,16 @@
 import { Modal as AntModal } from 'ant-design-vue';
 import { tryOnUnmounted } from '@vueuse/core';
-import { createVNode, defineComponent, isProxy, reactive, toRef, toRefs } from 'vue';
+import { createVNode, defineComponent, isProxy, onMounted, reactive, toRef, toRefs } from 'vue';
 import type { Component } from 'vue';
 import type { ModalProps } from 'ant-design-vue';
 import type { ComponentEmit, ComponentProps } from 'vue-component-type-helpers';
 import type { Writable } from 'type-fest';
 import { useTemplateRefs } from '../../vue';
 
-interface AntdModalProps extends ModalProps {
+interface AntdModalProps<Comp extends Component = any> extends ModalProps {
   class?: string
   rejectOnClose?: boolean
+  opener?: (open: (newCompProps?: Writable<ComponentProps<Comp>>) => Promise<ExtractConfirmArgs<UnwrapNonNullable<ComponentEmit<Comp>>>>) => void
   [k: string]: any
 }
 
@@ -41,7 +42,7 @@ const defaultModalProps: AntdModalProps = {
  */
 export function useAntdModal<Comp extends Component>(
   comp: IComponentConfig<Comp> | Comp,
-  modalProps = defaultModalProps,
+  modalProps: AntdModalProps<Comp> = defaultModalProps,
 ) {
   const _comp = ({ props: {}, type: 'body', ...((comp as any)?.is ? comp : { is: comp }) }) as Required<IComponentConfig<Comp>>;
   const compProps = reactive(_comp.props);
@@ -68,7 +69,7 @@ export function useAntdModal<Comp extends Component>(
   };
 
   const open = (
-    newCompProps?: Partial<typeof compProps>,
+    newCompProps?: typeof compProps,
     newAntdModalProps?: Omit<Partial<ModalProps>, 'open'>,
   ) => {
     if (_modalProps.open)
@@ -86,16 +87,20 @@ export function useAntdModal<Comp extends Component>(
     _modalProps.open = false;
     promiseResolvers.resolve(ev);
   };
-  const close = (ev: any) => {
+  const close = (reason?: any) => {
     _modalProps.open = false;
-    _onClose(ev);
+    _onClose(reason);
   };
 
   const PresetComponent = defineComponent({
-    render() {
-      return createVNode(AntModal, _modalProps, {
-        [modalSlotName]: () => createVNode(_comp.is, compProps as any),
-      });
+    setup() {
+      onMounted(() => _modalProps.opener?.(open as any));
+
+      return () => {
+        return createVNode(AntModal, _modalProps, {
+          [modalSlotName]: () => createVNode(_comp.is, compProps as any),
+        });
+      };
     },
   });
 

package/package.json

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

package/vue/hooks/useIsActivated.ts

@@ -0,0 +1,15 @@
+import { computed, nextTick, onActivated, onDeactivated, onMounted, ref } from 'vue';
+
+/**
+ * 判断组件是否已经被激活/挂载
+ */
+export function useIsActivated() {
+  const isMounted = ref(false);
+  const isActivated = ref(false);
+
+  onMounted(() => setTimeout(() => isMounted.value = true));
+  onActivated(() => nextTick(() => isActivated.value = true));
+  onDeactivated(() => isActivated.value = false);
+
+  return computed(() => isMounted.value && isActivated.value);
+}

package/vue/hooks/useIsMounted.ts

@@ -1,7 +1,7 @@
 import { onMounted, ref } from 'vue';
 
 /**
- * 指示组件是否已挂载
+ * 【弃用，使用 useIsActivated 代替】指示组件是否已挂载
  */
 export function useIsMounted() {
   const mounted = ref(false);

package/vue/hooks/useSyncModalParams.ts

@@ -0,0 +1,66 @@
+import type { Simplify } from 'type-fest';
+import { onActivated, onBeforeUnmount, onDeactivated, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useRouteHash } from '../../libs/vueuse';
+
+const MODAL_NAME_KEY = 'modal';
+
+/**
+ * 解析 URL Hash 中的弹窗参数
+ * @param modalName 弹窗名称
+ * @param hash URL Hash
+ */
+export function parseModalParams<T = any>(modalName?: string, hash?: string) {
+  const hashStr = (hash || location.hash).replace(/^#/, '');
+  const hashParams = new URLSearchParams(hashStr);
+  const isTargetModal = (hashParams.get(MODAL_NAME_KEY) && modalName === undefined) || (hashParams.get(MODAL_NAME_KEY) === modalName);
+
+  if (isTargetModal) {
+      type GetParams<T> = 0 extends 1 & T
+        ? { modal: string, [key: string]: string } : Simplify<NonNullable<T>
+        & { modal: string }>;
+      return Object.fromEntries(hashParams.entries()) as GetParams<T>;
+  }
+}
+
+/**
+ * 同步弹窗参数到 URL Hash
+ * @param modalName 弹窗名称
+ * @param modalParams 弹窗参数
+ */
+export function useSyncModalParamsToHash(modalName: string, modalParams: Record<string, any>) {
+  const hashStr = useRouteHash(undefined, { route: useRoute(), router: useRouter() });
+
+  function syncParamsToHash() {
+    const _hashStr = hashStr.value ?? '';
+    const hashParams = new URLSearchParams(_hashStr.replace(/^#/, ''));
+
+    if (hashParams.get(MODAL_NAME_KEY) == null)
+      hashParams.set(MODAL_NAME_KEY, modalName);
+
+    if (hashParams.get(MODAL_NAME_KEY) === modalName) {
+      Object.keys(modalParams).forEach((k) => {
+        const v = modalParams[k];
+        v && hashParams.set(k, v);
+      });
+
+      hashStr.value = `#${hashParams.toString()}`;
+    }
+  }
+
+  function removeParamsFromHash() {
+    const _hashStr = hashStr.value ?? '';
+    const hashParams = new URLSearchParams(_hashStr.replace(/^#/, ''));
+
+    if (!hashParams.get(MODAL_NAME_KEY) || hashParams.get(MODAL_NAME_KEY) === modalName) {
+      hashParams.delete(MODAL_NAME_KEY);
+      Object.keys(modalParams).forEach(k => hashParams.delete(k));
+      hashStr.value = `#${hashParams.toString()}`;
+    }
+  }
+
+  watch(modalParams, syncParamsToHash, { immediate: true, deep: true });
+  onActivated(syncParamsToHash);
+  onBeforeUnmount(removeParamsFromHash);
+  onDeactivated(removeParamsFromHash);
+}

package/vue/index.ts

@@ -3,4 +3,5 @@ export { useTemplateRefs } from './hooks/useTemplateRefs';
 export { useTeleportTarget, createTeleportSelectors } from './hooks/useTeleportTarget';
 export { useIsMounted } from './hooks/useIsMounted';
 export { useIsDark } from './hooks/useIsDark';
+export { useSyncModalParamsToHash, parseModalParams } from './hooks/useSyncModalParams';
 export { InfiniteQuery } from './components/infinite-query';