first commit
This commit is contained in:
root
+36
@@ -0,0 +1,36 @@
|
||||
import * as vue from "vue";
|
||||
import { ShallowRef } from "vue";
|
||||
import { MaybeRef } from "@vueuse/core";
|
||||
|
||||
//#region ../../packages/hooks/use-focus-controller/index.d.ts
|
||||
interface UseFocusControllerOptions {
|
||||
disabled?: MaybeRef<boolean>;
|
||||
/**
|
||||
* return true to cancel focus
|
||||
* @param event FocusEvent
|
||||
*/
|
||||
beforeFocus?: (event: FocusEvent) => boolean | undefined;
|
||||
afterFocus?: () => void;
|
||||
/**
|
||||
* return true to cancel blur
|
||||
* @param event FocusEvent
|
||||
*/
|
||||
beforeBlur?: (event: FocusEvent) => boolean | undefined;
|
||||
afterBlur?: () => void;
|
||||
}
|
||||
declare function useFocusController<T extends {
|
||||
focus: () => void;
|
||||
}>(target: ShallowRef<T | undefined>, {
|
||||
disabled,
|
||||
beforeFocus,
|
||||
afterFocus,
|
||||
beforeBlur,
|
||||
afterBlur
|
||||
}?: UseFocusControllerOptions): {
|
||||
isFocused: vue.Ref<boolean, boolean>; /** Avoid using wrapperRef and handleFocus/handleBlur together */
|
||||
wrapperRef: ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
handleFocus: (event: FocusEvent) => void;
|
||||
handleBlur: (event: FocusEvent) => void;
|
||||
};
|
||||
//#endregion
|
||||
export { useFocusController };
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
const require_runtime = require('../../_virtual/_rolldown/runtime.js');
|
||||
const require_aria = require('../../utils/dom/aria.js');
|
||||
const require_types = require('../../utils/types.js');
|
||||
let _vueuse_core = require("@vueuse/core");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
|
||||
//#region ../../packages/hooks/use-focus-controller/index.ts
|
||||
function useFocusController(target, { disabled, beforeFocus, afterFocus, beforeBlur, afterBlur } = {}) {
|
||||
const { emit } = (0, vue.getCurrentInstance)();
|
||||
const wrapperRef = (0, vue.shallowRef)();
|
||||
const isFocused = (0, vue.ref)(false);
|
||||
const handleFocus = (event) => {
|
||||
const cancelFocus = (0, _vue_shared.isFunction)(beforeFocus) ? beforeFocus(event) : false;
|
||||
if ((0, vue.unref)(disabled) || isFocused.value || cancelFocus) return;
|
||||
isFocused.value = true;
|
||||
emit("focus", event);
|
||||
afterFocus?.();
|
||||
};
|
||||
const handleBlur = (event) => {
|
||||
const cancelBlur = (0, _vue_shared.isFunction)(beforeBlur) ? beforeBlur(event) : false;
|
||||
if ((0, vue.unref)(disabled) || event.relatedTarget && wrapperRef.value?.contains(event.relatedTarget) || cancelBlur) return;
|
||||
isFocused.value = false;
|
||||
emit("blur", event);
|
||||
afterBlur?.();
|
||||
};
|
||||
const handleClick = (event) => {
|
||||
if ((0, vue.unref)(disabled) || require_aria.isFocusable(event.target) || wrapperRef.value?.contains(document.activeElement) && wrapperRef.value !== document.activeElement) return;
|
||||
target.value?.focus();
|
||||
};
|
||||
(0, vue.watch)([wrapperRef, () => (0, vue.unref)(disabled)], ([el, disabled]) => {
|
||||
if (!el) return;
|
||||
if (disabled) el.removeAttribute("tabindex");
|
||||
else el.setAttribute("tabindex", "-1");
|
||||
});
|
||||
(0, _vueuse_core.useEventListener)(wrapperRef, "focus", handleFocus, true);
|
||||
(0, _vueuse_core.useEventListener)(wrapperRef, "blur", handleBlur, true);
|
||||
(0, _vueuse_core.useEventListener)(wrapperRef, "click", handleClick, true);
|
||||
if (process.env.NODE_ENV === "test") (0, vue.onMounted)(() => {
|
||||
const targetEl = require_types.isElement(target.value) ? target.value : document.querySelector("input,textarea");
|
||||
if (targetEl) {
|
||||
(0, _vueuse_core.useEventListener)(targetEl, "focus", handleFocus, true);
|
||||
(0, _vueuse_core.useEventListener)(targetEl, "blur", handleBlur, true);
|
||||
}
|
||||
});
|
||||
return {
|
||||
isFocused,
|
||||
wrapperRef,
|
||||
handleFocus,
|
||||
handleBlur
|
||||
};
|
||||
}
|
||||
|
||||
//#endregion
|
||||
exports.useFocusController = useFocusController;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["isFocusable","isElement"],"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 { ShallowRef } from 'vue'\nimport type { MaybeRef } from '@vueuse/core'\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":";;;;;;;;;AA8BA,SAAgB,mBACd,QACA,EACE,UACA,aACA,YACA,YACA,cAC6B,EAAE,EACjC;CAEA,MAAM,EAAE,sCAD6B;CAErC,MAAM,kCAAsC;CAC5C,MAAM,yBAAgB,MAAM;CAE5B,MAAM,eAAe,UAAsB;EACzC,MAAM,0CAAyB,YAAY,GAAG,YAAY,MAAM,GAAG;AACnE,qBAAU,SAAS,IAAI,UAAU,SAAS,YAAa;AAEvD,YAAU,QAAQ;AAClB,OAAK,SAAS,MAAM;AACpB,gBAAc;;CAGhB,MAAM,cAAc,UAAsB;EACxC,MAAM,yCAAwB,WAAW,GAAG,WAAW,MAAM,GAAG;AAChE,qBACQ,SAAS,IACd,MAAM,iBACL,WAAW,OAAO,SAAS,MAAM,cAAsB,IACzD,WAEA;AAEF,YAAU,QAAQ;AAClB,OAAK,QAAQ,MAAM;AACnB,eAAa;;CAGf,MAAM,eAAe,UAAiB;AACpC,qBACQ,SAAS,IACfA,yBAAY,MAAM,OAAsB,IACvC,WAAW,OAAO,SAAS,SAAS,cAAc,IACjD,WAAW,UAAU,SAAS,cAEhC;AAEF,SAAO,OAAO,OAAO;;AAGvB,gBAAM,CAAC,iCAAwB,SAAS,CAAC,GAAG,CAAC,IAAI,cAAc;AAC7D,MAAI,CAAC,GAAI;AACT,MAAI,SACF,IAAG,gBAAgB,WAAW;MAE9B,IAAG,aAAa,YAAY,KAAK;GAEnC;AAEF,oCAAiB,YAAY,SAAS,aAAa,KAAK;AACxD,oCAAiB,YAAY,QAAQ,YAAY,KAAK;AACtD,oCAAiB,YAAY,SAAS,aAAa,KAAK;AAGxD,KAAI,QAAQ,IAAI,aAAa,OAC3B,0BAAgB;EACd,MAAM,WAAWC,wBAAU,OAAO,MAAM,GACpC,OAAO,QACP,SAAS,cAAc,iBAAiB;AAE5C,MAAI,UAAU;AACZ,sCAAiB,UAAU,SAAS,aAAa,KAAK;AACtD,sCAAiB,UAAU,QAAQ,YAAY,KAAK;;GAEtD;AAGJ,QAAO;EACL;EAEA;EACA;EACA;EACD"}
|
||||
Reference in New Issue
Block a user