feat(components/button): add interceptCEMethods hook, intercept butto…

…n's click, focus and blur methods
lejunyang · Oct 30, 2024 · 149a26c · 149a26c
1 parent 714004e
commit 149a26c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 4 deletions.
diff --git a/packages/components/src/components/button/Button.tsx b/packages/components/src/components/button/Button.tsx
@@ -3,7 +3,7 @@ import { unrefOrGet, useSetupEdit } from '@lun-web/core';
 import { defineSpin } from '../spin';
 import { createDefineElement, renderElement } from 'utils';
 import { buttonEmits, buttonProps } from './type';
-import { useCEExpose, useCEStates, useNamespace } from 'hooks';
+import { interceptCEMethods, useCEExpose, useCEStates, useNamespace } from 'hooks';
 import { Transition, computed, ref } from 'vue';
 import { debounce as dF, isFunction, prevent, throttle as tF, copyText as copy, promiseTry } from '@lun-web/utils';
 import { getCompParts } from 'common';
@@ -18,6 +18,7 @@ export const Button = defineSSRCustomElement({
   setup(props, { emit }) {
     const ns = useNamespace(name);
     const [editComputed, editState] = useSetupEdit();
+    const button = ref<HTMLButtonElement>()
 
     let holdAnimationDone = false;
     const handleClick = computed(() => {
@@ -98,6 +99,7 @@ export const Button = defineSSRCustomElement({
       clearTimeout: clear,
     };
     useCEExpose(timeoutMethods);
+    interceptCEMethods(button);
 
     return () => {
       const { iconName, iconLibrary, size, spinProps, showLoading, hold, label, iconPosition } = props;
@@ -113,6 +115,7 @@ export const Button = defineSSRCustomElement({
       return (
         <button
           {...buttonHandlers}
+          ref={button}
           class={stateClass.value}
           aria-disabled={finalDisabled}
           disabled={finalDisabled}

diff --git a/packages/components/src/hooks/shadowDom.ts b/packages/components/src/hooks/shadowDom.ts
@@ -1,6 +1,16 @@
-import { objectComputed, unrefOrGetState, useEdit } from '@lun-web/core';
-import { fromObject, hyphenate, pick } from '@lun-web/utils';
-import { MaybeRef, camelize, computed, getCurrentInstance, onBeforeUnmount, onMounted, watchEffect } from 'vue';
+import { objectComputed, unrefOrGet, unrefOrGetState, useEdit } from '@lun-web/core';
+import { fromObject, hyphenate, pick, runIfFn } from '@lun-web/utils';
+import {
+  MaybeRef,
+  Ref,
+  camelize,
+  computed,
+  getCurrentInstance,
+  isRef,
+  onBeforeUnmount,
+  onMounted,
+  watchEffect,
+} from 'vue';
 import { useNamespace } from './useNameSpace';
 import { GlobalStaticConfig } from '../components/config/config.static';
 import { VueElement } from 'custom';
@@ -112,3 +122,32 @@ export function useAria(
     aria && Object.assign((CE as any as { _internals: ElementInternals })._internals, aria);
   });
 }
+
+type InterceptMethods = {
+  click?: () => void;
+  focus?: (options: FocusOptions) => void;
+  blur?: () => void;
+};
+/** intercept custom element's click, focus and blur methods */
+export function interceptCEMethods(
+  methodsOrEl:
+    | InterceptMethods
+    | ((originalMethods: Required<InterceptMethods>) => InterceptMethods)
+    | Ref<HTMLElement | undefined>,
+) {
+  const CE = useCE();
+  const { click, focus, blur } = CE,
+    originalMethods = { click: click.bind(CE), focus: focus.bind(CE), blur: blur.bind(CE) };
+  Object.assign(
+    CE,
+    isRef(methodsOrEl)
+      ? {
+          click: () => unrefOrGet(methodsOrEl)?.click(),
+          focus: () => unrefOrGet(methodsOrEl)?.focus(),
+          blur: () => unrefOrGet(methodsOrEl)?.blur(),
+        }
+      : runIfFn(methodsOrEl, originalMethods),
+  );
+  // recover intercepted methods before unmount to avoid duplicate change. because dom can disconnect and connect again, then it will setup again
+  onBeforeUnmount(() => Object.assign(CE, originalMethods));
+}