{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-focus-controller/index.ts"],"sourcesContent":["import {\n  getCurrentInstance,\n  onMounted,\n  ref,\n  shallowRef,\n  unref,\n  watch,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isElement, isFocusable, isFunction } from '@element-plus/utils'\n\nimport type { MaybeRef, ShallowRef } from 'vue'\n\ninterface UseFocusControllerOptions {\n  disabled?: MaybeRef<boolean>\n  /**\n   * return true to cancel focus\n   * @param event FocusEvent\n   */\n  beforeFocus?: (event: FocusEvent) => boolean | undefined\n  afterFocus?: () => void\n  /**\n   * return true to cancel blur\n   * @param event FocusEvent\n   */\n  beforeBlur?: (event: FocusEvent) => boolean | undefined\n  afterBlur?: () => void\n}\n\nexport function useFocusController<T extends { focus: () => void }>(\n  target: ShallowRef<T | undefined>,\n  {\n    disabled,\n    beforeFocus,\n    afterFocus,\n    beforeBlur,\n    afterBlur,\n  }: UseFocusControllerOptions = {}\n) {\n  const instance = getCurrentInstance()!\n  const { emit } = instance\n  const wrapperRef = shallowRef<HTMLElement>()\n  const isFocused = ref(false)\n\n  const handleFocus = (event: FocusEvent) => {\n    const cancelFocus = isFunction(beforeFocus) ? beforeFocus(event) : false\n    if (unref(disabled) || isFocused.value || cancelFocus) return\n\n    isFocused.value = true\n    emit('focus', event)\n    afterFocus?.()\n  }\n\n  const handleBlur = (event: FocusEvent) => {\n    const cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false\n    if (\n      unref(disabled) ||\n      (event.relatedTarget &&\n        wrapperRef.value?.contains(event.relatedTarget as Node)) ||\n      cancelBlur\n    )\n      return\n\n    isFocused.value = false\n    emit('blur', event)\n    afterBlur?.()\n  }\n\n  const handleClick = (event: Event) => {\n    if (\n      unref(disabled) ||\n      isFocusable(event.target as HTMLElement) ||\n      (wrapperRef.value?.contains(document.activeElement) &&\n        wrapperRef.value !== document.activeElement)\n    )\n      return\n\n    target.value?.focus()\n  }\n\n  watch([wrapperRef, () => unref(disabled)], ([el, disabled]) => {\n    if (!el) return\n    if (disabled) {\n      el.removeAttribute('tabindex')\n    } else {\n      el.setAttribute('tabindex', '-1')\n    }\n  })\n\n  useEventListener(wrapperRef, 'focus', handleFocus, true)\n  useEventListener(wrapperRef, 'blur', handleBlur, true)\n  useEventListener(wrapperRef, 'click', handleClick, true)\n\n  // only for test\n  if (process.env.NODE_ENV === 'test') {\n    onMounted(() => {\n      const targetEl = isElement(target.value)\n        ? target.value\n        : document.querySelector('input,textarea')\n\n      if (targetEl) {\n        useEventListener(targetEl, 'focus', handleFocus, true)\n        useEventListener(targetEl, 'blur', handleBlur, true)\n      }\n    })\n  }\n\n  return {\n    isFocused,\n    /** Avoid using wrapperRef and handleFocus/handleBlur together */\n    wrapperRef,\n    handleFocus,\n    handleBlur,\n  }\n}\n"],"mappings":";;;;;AA6BA,SAAgB,mBACd,QACA,EACE,UACA,aACA,YACA,YACA,cAC6B,CAAC,GAChC;CAEA,MAAM,EAAE,SADS,mBACO;CACxB,MAAM,aAAa,WAAwB;CAC3C,MAAM,YAAY,IAAI,KAAK;CAE3B,MAAM,eAAe,UAAsB;EACzC,MAAM,cAAc,WAAW,WAAW,IAAI,YAAY,KAAK,IAAI;EACnE,IAAI,MAAM,QAAQ,KAAK,UAAU,SAAS,aAAa;EAEvD,UAAU,QAAQ;EAClB,KAAK,SAAS,KAAK;EACnB,aAAa;CACf;CAEA,MAAM,cAAc,UAAsB;EACxC,MAAM,aAAa,WAAW,UAAU,IAAI,WAAW,KAAK,IAAI;EAChE,IACE,MAAM,QAAQ,KACb,MAAM,iBACL,WAAW,OAAO,SAAS,MAAM,aAAqB,KACxD,YAEA;EAEF,UAAU,QAAQ;EAClB,KAAK,QAAQ,KAAK;EAClB,YAAY;CACd;CAEA,MAAM,eAAe,UAAiB;EACpC,IACE,MAAM,QAAQ,KACd,YAAY,MAAM,MAAqB,KACtC,WAAW,OAAO,SAAS,SAAS,aAAa,KAChD,WAAW,UAAU,SAAS,eAEhC;EAEF,OAAO,OAAO,MAAM;CACtB;CAEA,MAAM,CAAC,kBAAkB,MAAM,QAAQ,CAAC,IAAI,CAAC,IAAI,cAAc;EAC7D,IAAI,CAAC,IAAI;EACT,IAAI,UACF,GAAG,gBAAgB,UAAU;OAE7B,GAAG,aAAa,YAAY,IAAI;CAEpC,CAAC;CAED,iBAAiB,YAAY,SAAS,aAAa,IAAI;CACvD,iBAAiB,YAAY,QAAQ,YAAY,IAAI;CACrD,iBAAiB,YAAY,SAAS,aAAa,IAAI;CAgBvD,OAAO;EACL;;EAEA;EACA;EACA;CACF;AACF"}