feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
@@ -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 };
@@ -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
@@ -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"}