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,6 @@
import { ObjectDirective } from "vue";
//#region ../../packages/directives/click-outside/index.d.ts
declare const ClickOutside: ObjectDirective<HTMLElement, any>;
//#endregion
export { ClickOutside as default };
@@ -0,0 +1,60 @@
import { isClient } from "../../utils/browser.mjs";
import { isArray, isElement } from "../../utils/types.mjs";
//#region ../../packages/directives/click-outside/index.ts
const nodeList = /* @__PURE__ */ new Map();
if (isClient) {
let startClick;
document.addEventListener("mousedown", (e) => startClick = e);
document.addEventListener("mouseup", (e) => {
if (startClick) {
for (const handlers of nodeList.values()) for (const { documentHandler } of handlers) documentHandler(e, startClick);
startClick = void 0;
}
});
}
function createDocumentHandler(el, binding) {
let excludes = [];
if (isArray(binding.arg)) excludes = binding.arg;
else if (isElement(binding.arg)) excludes.push(binding.arg);
return function(mouseup, mousedown) {
const popperRef = binding.instance.popperRef;
const mouseUpTarget = mouseup.target;
const mouseDownTarget = mousedown?.target;
const isBound = !binding || !binding.instance;
const isTargetExists = !mouseUpTarget || !mouseDownTarget;
const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
const isSelf = el === mouseUpTarget;
const isTargetExcluded = excludes.length && excludes.some((item) => item?.contains(mouseUpTarget)) || excludes.length && excludes.includes(mouseDownTarget);
const isContainedByPopper = popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
if (isBound || isTargetExists || isContainedByEl || isSelf || isTargetExcluded || isContainedByPopper) return;
binding.value(mouseup, mousedown);
};
}
const ClickOutside = {
beforeMount(el, binding) {
if (!nodeList.has(el)) nodeList.set(el, []);
nodeList.get(el).push({
documentHandler: createDocumentHandler(el, binding),
bindingFn: binding.value
});
},
updated(el, binding) {
if (!nodeList.has(el)) nodeList.set(el, []);
const handlers = nodeList.get(el);
const oldHandlerIndex = handlers.findIndex((item) => item.bindingFn === binding.oldValue);
const newHandler = {
documentHandler: createDocumentHandler(el, binding),
bindingFn: binding.value
};
if (oldHandlerIndex >= 0) handlers.splice(oldHandlerIndex, 1, newHandler);
else handlers.push(newHandler);
},
unmounted(el) {
nodeList.delete(el);
}
};
//#endregion
export { ClickOutside as default };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/directives/click-outside/index.ts"],"sourcesContent":["import { isArray, isClient, isElement } from '@element-plus/utils'\n\nimport type {\n ComponentPublicInstance,\n DirectiveBinding,\n ObjectDirective,\n} from 'vue'\n\ntype DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void\ntype FlushList = Map<\n HTMLElement,\n {\n documentHandler: DocumentHandler\n bindingFn: (...args: unknown[]) => unknown\n }[]\n>\n\nconst nodeList: FlushList = new Map()\n\nif (isClient) {\n let startClick: MouseEvent | undefined\n document.addEventListener('mousedown', (e: MouseEvent) => (startClick = e))\n document.addEventListener('mouseup', (e: MouseEvent) => {\n if (startClick) {\n for (const handlers of nodeList.values()) {\n for (const { documentHandler } of handlers) {\n documentHandler(e as MouseEvent, startClick)\n }\n }\n startClick = undefined\n }\n })\n}\n\nfunction createDocumentHandler(\n el: HTMLElement,\n binding: DirectiveBinding\n): DocumentHandler {\n let excludes: HTMLElement[] = []\n if (isArray(binding.arg)) {\n excludes = binding.arg\n } else if (isElement(binding.arg)) {\n // due to current implementation on binding type is wrong the type casting is necessary here\n excludes.push(binding.arg as unknown as HTMLElement)\n }\n return function (mouseup, mousedown) {\n const popperRef = (\n binding.instance as ComponentPublicInstance<{\n popperRef: HTMLElement\n }>\n ).popperRef\n const mouseUpTarget = mouseup.target as Node\n const mouseDownTarget = mousedown?.target as Node\n const isBound = !binding || !binding.instance\n const isTargetExists = !mouseUpTarget || !mouseDownTarget\n const isContainedByEl =\n el.contains(mouseUpTarget) || el.contains(mouseDownTarget)\n const isSelf = el === mouseUpTarget\n\n const isTargetExcluded =\n (excludes.length &&\n excludes.some((item) => item?.contains(mouseUpTarget))) ||\n (excludes.length && excludes.includes(mouseDownTarget as HTMLElement))\n const isContainedByPopper =\n popperRef &&\n (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget))\n if (\n isBound ||\n isTargetExists ||\n isContainedByEl ||\n isSelf ||\n isTargetExcluded ||\n isContainedByPopper\n ) {\n return\n }\n binding.value(mouseup, mousedown)\n }\n}\n\nconst ClickOutside: ObjectDirective<HTMLElement, any> = {\n beforeMount(el, binding) {\n // there could be multiple handlers on the element\n if (!nodeList.has(el)) {\n nodeList.set(el, [])\n }\n\n nodeList.get(el)!.push({\n documentHandler: createDocumentHandler(el, binding),\n bindingFn: binding.value,\n })\n },\n updated(el, binding) {\n if (!nodeList.has(el)) {\n nodeList.set(el, [])\n }\n\n const handlers = nodeList.get(el)!\n const oldHandlerIndex = handlers.findIndex(\n (item) => item.bindingFn === binding.oldValue\n )\n const newHandler = {\n documentHandler: createDocumentHandler(el, binding),\n bindingFn: binding.value,\n }\n\n if (oldHandlerIndex >= 0) {\n // replace the old handler to the new handler\n handlers.splice(oldHandlerIndex, 1, newHandler)\n } else {\n handlers.push(newHandler)\n }\n },\n unmounted(el) {\n // remove all listeners when a component unmounted\n nodeList.delete(el)\n },\n}\n\nexport default ClickOutside\n"],"mappings":";;;;AAiBA,MAAM,2BAAsB,IAAI,KAAK;AAErC,IAAI,UAAU;CACZ,IAAI;AACJ,UAAS,iBAAiB,cAAc,MAAmB,aAAa,EAAG;AAC3E,UAAS,iBAAiB,YAAY,MAAkB;AACtD,MAAI,YAAY;AACd,QAAK,MAAM,YAAY,SAAS,QAAQ,CACtC,MAAK,MAAM,EAAE,qBAAqB,SAChC,iBAAgB,GAAiB,WAAW;AAGhD,gBAAa;;GAEf;;AAGJ,SAAS,sBACP,IACA,SACiB;CACjB,IAAI,WAA0B,EAAE;AAChC,KAAI,QAAQ,QAAQ,IAAI,CACtB,YAAW,QAAQ;UACV,UAAU,QAAQ,IAAI,CAE/B,UAAS,KAAK,QAAQ,IAA8B;AAEtD,QAAO,SAAU,SAAS,WAAW;EACnC,MAAM,YACJ,QAAQ,SAGR;EACF,MAAM,gBAAgB,QAAQ;EAC9B,MAAM,kBAAkB,WAAW;EACnC,MAAM,UAAU,CAAC,WAAW,CAAC,QAAQ;EACrC,MAAM,iBAAiB,CAAC,iBAAiB,CAAC;EAC1C,MAAM,kBACJ,GAAG,SAAS,cAAc,IAAI,GAAG,SAAS,gBAAgB;EAC5D,MAAM,SAAS,OAAO;EAEtB,MAAM,mBACH,SAAS,UACR,SAAS,MAAM,SAAS,MAAM,SAAS,cAAc,CAAC,IACvD,SAAS,UAAU,SAAS,SAAS,gBAA+B;EACvE,MAAM,sBACJ,cACC,UAAU,SAAS,cAAc,IAAI,UAAU,SAAS,gBAAgB;AAC3E,MACE,WACA,kBACA,mBACA,UACA,oBACA,oBAEA;AAEF,UAAQ,MAAM,SAAS,UAAU;;;AAIrC,MAAM,eAAkD;CACtD,YAAY,IAAI,SAAS;AAEvB,MAAI,CAAC,SAAS,IAAI,GAAG,CACnB,UAAS,IAAI,IAAI,EAAE,CAAC;AAGtB,WAAS,IAAI,GAAG,CAAE,KAAK;GACrB,iBAAiB,sBAAsB,IAAI,QAAQ;GACnD,WAAW,QAAQ;GACpB,CAAC;;CAEJ,QAAQ,IAAI,SAAS;AACnB,MAAI,CAAC,SAAS,IAAI,GAAG,CACnB,UAAS,IAAI,IAAI,EAAE,CAAC;EAGtB,MAAM,WAAW,SAAS,IAAI,GAAG;EACjC,MAAM,kBAAkB,SAAS,WAC9B,SAAS,KAAK,cAAc,QAAQ,SACtC;EACD,MAAM,aAAa;GACjB,iBAAiB,sBAAsB,IAAI,QAAQ;GACnD,WAAW,QAAQ;GACpB;AAED,MAAI,mBAAmB,EAErB,UAAS,OAAO,iBAAiB,GAAG,WAAW;MAE/C,UAAS,KAAK,WAAW;;CAG7B,UAAU,IAAI;AAEZ,WAAS,OAAO,GAAG;;CAEtB"}
+5
View File
@@ -0,0 +1,5 @@
import Mousewheel from "./mousewheel/index.js";
import ClickOutside from "./click-outside/index.js";
import { vRepeatClick } from "./repeat-click/index.js";
import TrapFocus from "./trap-focus/index.js";
export { ClickOutside, Mousewheel, TrapFocus, vRepeatClick };
+6
View File
@@ -0,0 +1,6 @@
import ClickOutside from "./click-outside/index.mjs";
import { vRepeatClick } from "./repeat-click/index.mjs";
import TrapFocus from "./trap-focus/index.mjs";
import Mousewheel from "./mousewheel/index.mjs";
export { ClickOutside, Mousewheel, TrapFocus, vRepeatClick };
+14
View File
@@ -0,0 +1,14 @@
import { ObjectDirective } from "vue";
import { NormalizedWheelEvent } from "normalize-wheel-es";
//#region ../../packages/directives/mousewheel/index.d.ts
declare const SCOPE = "_Mousewheel";
interface WheelElement extends HTMLElement {
[SCOPE]: null | {
wheelHandler?: (event: WheelEvent) => void;
};
}
type MousewheelCallback = (e: WheelEvent, normalized: NormalizedWheelEvent) => void;
declare const Mousewheel: ObjectDirective<WheelElement, MousewheelCallback>;
//#endregion
export { MousewheelCallback, SCOPE, WheelElement, Mousewheel as default };
+36
View File
@@ -0,0 +1,36 @@
import normalizeWheel from "normalize-wheel-es";
//#region ../../packages/directives/mousewheel/index.ts
const SCOPE = "_Mousewheel";
const mousewheel = function(element, callback) {
if (element && element.addEventListener) {
removeWheelHandler(element);
const fn = function(event) {
const normalized = normalizeWheel(event);
callback && Reflect.apply(callback, this, [event, normalized]);
};
element[SCOPE] = { wheelHandler: fn };
element.addEventListener("wheel", fn, { passive: true });
}
};
const removeWheelHandler = (element) => {
if (element[SCOPE]?.wheelHandler) {
element.removeEventListener("wheel", element[SCOPE].wheelHandler);
element[SCOPE] = null;
}
};
const Mousewheel = {
beforeMount(el, binding) {
mousewheel(el, binding.value);
},
unmounted(el) {
removeWheelHandler(el);
},
updated(el, binding) {
if (binding.value !== binding.oldValue) mousewheel(el, binding.value);
}
};
//#endregion
export { SCOPE, Mousewheel as default };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/directives/mousewheel/index.ts"],"sourcesContent":["import normalizeWheel from 'normalize-wheel-es'\n\nimport type { ObjectDirective } from 'vue'\nimport type { NormalizedWheelEvent } from 'normalize-wheel-es'\n\nexport const SCOPE = '_Mousewheel'\n\nexport interface WheelElement extends HTMLElement {\n [SCOPE]: null | {\n wheelHandler?: (event: WheelEvent) => void\n }\n}\n\nexport type MousewheelCallback = (\n e: WheelEvent,\n normalized: NormalizedWheelEvent\n) => void\n\nconst mousewheel = function (\n element: WheelElement,\n callback: MousewheelCallback\n) {\n if (element && element.addEventListener) {\n removeWheelHandler(element)\n\n const fn = function (this: HTMLElement, event: WheelEvent) {\n const normalized = normalizeWheel(event)\n callback && Reflect.apply(callback, this, [event, normalized])\n }\n\n element[SCOPE] = { wheelHandler: fn }\n element.addEventListener('wheel', fn, { passive: true })\n }\n}\n\nconst removeWheelHandler = (element: WheelElement) => {\n if (element[SCOPE]?.wheelHandler) {\n element.removeEventListener('wheel', element[SCOPE].wheelHandler)\n element[SCOPE] = null\n }\n}\n\nconst Mousewheel: ObjectDirective<WheelElement, MousewheelCallback> = {\n beforeMount(el, binding) {\n mousewheel(el, binding.value)\n },\n unmounted(el) {\n removeWheelHandler(el)\n },\n updated(el, binding) {\n if (binding.value !== binding.oldValue) {\n mousewheel(el, binding.value)\n }\n },\n}\n\nexport default Mousewheel\n"],"mappings":";;;AAKA,MAAa,QAAQ;AAarB,MAAM,aAAa,SACjB,SACA,UACA;AACA,KAAI,WAAW,QAAQ,kBAAkB;AACvC,qBAAmB,QAAQ;EAE3B,MAAM,KAAK,SAA6B,OAAmB;GACzD,MAAM,aAAa,eAAe,MAAM;AACxC,eAAY,QAAQ,MAAM,UAAU,MAAM,CAAC,OAAO,WAAW,CAAC;;AAGhE,UAAQ,SAAS,EAAE,cAAc,IAAI;AACrC,UAAQ,iBAAiB,SAAS,IAAI,EAAE,SAAS,MAAM,CAAC;;;AAI5D,MAAM,sBAAsB,YAA0B;AACpD,KAAI,QAAQ,QAAQ,cAAc;AAChC,UAAQ,oBAAoB,SAAS,QAAQ,OAAO,aAAa;AACjE,UAAQ,SAAS;;;AAIrB,MAAM,aAAgE;CACpE,YAAY,IAAI,SAAS;AACvB,aAAW,IAAI,QAAQ,MAAM;;CAE/B,UAAU,IAAI;AACZ,qBAAmB,GAAG;;CAExB,QAAQ,IAAI,SAAS;AACnB,MAAI,QAAQ,UAAU,QAAQ,SAC5B,YAAW,IAAI,QAAQ,MAAM;;CAGlC"}
@@ -0,0 +1,20 @@
import { ObjectDirective } from "vue";
//#region ../../packages/directives/repeat-click/index.d.ts
declare const REPEAT_INTERVAL = 100;
declare const REPEAT_DELAY = 600;
declare const SCOPE = "_RepeatClick";
interface RepeatClickEl extends HTMLElement {
[SCOPE]: null | {
start?: (evt: MouseEvent) => void;
clear?: () => void;
};
}
interface RepeatClickOptions {
interval?: number;
delay?: number;
handler: (...args: unknown[]) => unknown;
}
declare const vRepeatClick: ObjectDirective<RepeatClickEl, RepeatClickOptions | RepeatClickOptions['handler']>;
//#endregion
export { REPEAT_DELAY, REPEAT_INTERVAL, RepeatClickOptions, vRepeatClick };
@@ -0,0 +1,55 @@
import { isFunction } from "../../utils/types.mjs";
//#region ../../packages/directives/repeat-click/index.ts
const REPEAT_INTERVAL = 100;
const REPEAT_DELAY = 600;
const SCOPE = "_RepeatClick";
const vRepeatClick = {
beforeMount(el, binding) {
const value = binding.value;
const { interval = REPEAT_INTERVAL, delay = REPEAT_DELAY } = isFunction(value) ? {} : value;
let intervalId;
let delayId;
const handler = () => isFunction(value) ? value() : value.handler();
const clear = () => {
if (delayId) {
clearTimeout(delayId);
delayId = void 0;
}
if (intervalId) {
clearInterval(intervalId);
intervalId = void 0;
}
};
const start = (evt) => {
if (evt.button !== 0) return;
clear();
handler();
document.addEventListener("mouseup", clear, { once: true });
delayId = setTimeout(() => {
intervalId = setInterval(() => {
handler();
}, interval);
}, delay);
};
el[SCOPE] = {
start,
clear
};
el.addEventListener("mousedown", start);
},
unmounted(el) {
if (!el[SCOPE]) return;
const { start, clear } = el[SCOPE];
if (start) el.removeEventListener("mousedown", start);
if (clear) {
clear();
document.removeEventListener("mouseup", clear);
}
el[SCOPE] = null;
}
};
//#endregion
export { REPEAT_DELAY, REPEAT_INTERVAL, vRepeatClick };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/directives/repeat-click/index.ts"],"sourcesContent":["import { isFunction } from '@element-plus/utils'\n\nimport type { ObjectDirective } from 'vue'\n\nexport const REPEAT_INTERVAL = 100\nexport const REPEAT_DELAY = 600\nconst SCOPE = '_RepeatClick'\n\ninterface RepeatClickEl extends HTMLElement {\n [SCOPE]: null | {\n start?: (evt: MouseEvent) => void\n clear?: () => void\n }\n}\n\nexport interface RepeatClickOptions {\n interval?: number\n delay?: number\n handler: (...args: unknown[]) => unknown\n}\n\nexport const vRepeatClick: ObjectDirective<\n RepeatClickEl,\n RepeatClickOptions | RepeatClickOptions['handler']\n> = {\n beforeMount(el, binding) {\n const value = binding.value\n const { interval = REPEAT_INTERVAL, delay = REPEAT_DELAY } = isFunction(\n value\n )\n ? {}\n : value\n\n let intervalId: ReturnType<typeof setInterval> | undefined\n let delayId: ReturnType<typeof setTimeout> | undefined\n\n const handler = () => (isFunction(value) ? value() : value.handler())\n\n const clear = () => {\n if (delayId) {\n clearTimeout(delayId)\n delayId = undefined\n }\n if (intervalId) {\n clearInterval(intervalId)\n intervalId = undefined\n }\n }\n\n const start = (evt: MouseEvent) => {\n if (evt.button !== 0) return\n clear()\n handler()\n\n document.addEventListener('mouseup', clear, { once: true })\n\n delayId = setTimeout(() => {\n intervalId = setInterval(() => {\n handler()\n }, interval)\n }, delay)\n }\n\n el[SCOPE] = { start, clear }\n el.addEventListener('mousedown', start)\n },\n unmounted(el) {\n if (!el[SCOPE]) return\n const { start, clear } = el[SCOPE]\n\n if (start) {\n el.removeEventListener('mousedown', start)\n }\n if (clear) {\n clear()\n document.removeEventListener('mouseup', clear)\n }\n el[SCOPE] = null\n },\n}\n"],"mappings":";;;AAIA,MAAa,kBAAkB;AAC/B,MAAa,eAAe;AAC5B,MAAM,QAAQ;AAed,MAAa,eAGT;CACF,YAAY,IAAI,SAAS;EACvB,MAAM,QAAQ,QAAQ;EACtB,MAAM,EAAE,WAAW,iBAAiB,QAAQ,iBAAiB,WAC3D,MACD,GACG,EAAE,GACF;EAEJ,IAAI;EACJ,IAAI;EAEJ,MAAM,gBAAiB,WAAW,MAAM,GAAG,OAAO,GAAG,MAAM,SAAS;EAEpE,MAAM,cAAc;AAClB,OAAI,SAAS;AACX,iBAAa,QAAQ;AACrB,cAAU;;AAEZ,OAAI,YAAY;AACd,kBAAc,WAAW;AACzB,iBAAa;;;EAIjB,MAAM,SAAS,QAAoB;AACjC,OAAI,IAAI,WAAW,EAAG;AACtB,UAAO;AACP,YAAS;AAET,YAAS,iBAAiB,WAAW,OAAO,EAAE,MAAM,MAAM,CAAC;AAE3D,aAAU,iBAAiB;AACzB,iBAAa,kBAAkB;AAC7B,cAAS;OACR,SAAS;MACX,MAAM;;AAGX,KAAG,SAAS;GAAE;GAAO;GAAO;AAC5B,KAAG,iBAAiB,aAAa,MAAM;;CAEzC,UAAU,IAAI;AACZ,MAAI,CAAC,GAAG,OAAQ;EAChB,MAAM,EAAE,OAAO,UAAU,GAAG;AAE5B,MAAI,MACF,IAAG,oBAAoB,aAAa,MAAM;AAE5C,MAAI,OAAO;AACT,UAAO;AACP,YAAS,oBAAoB,WAAW,MAAM;;AAEhD,KAAG,SAAS;;CAEf"}
+12
View File
@@ -0,0 +1,12 @@
import { ObjectDirective } from "vue";
//#region ../../packages/directives/trap-focus/index.d.ts
declare const FOCUSABLE_CHILDREN = "_trap-focus-children";
declare const TRAP_FOCUS_HANDLER = "_trap-focus-handler";
interface TrapFocusElement extends HTMLElement {
[FOCUSABLE_CHILDREN]: HTMLElement[];
[TRAP_FOCUS_HANDLER]: (e: KeyboardEvent) => void;
}
declare const TrapFocus: ObjectDirective;
//#endregion
export { FOCUSABLE_CHILDREN, TRAP_FOCUS_HANDLER, TrapFocusElement, TrapFocus as default };
+52
View File
@@ -0,0 +1,52 @@
import { EVENT_CODE } from "../../constants/aria.mjs";
import { obtainAllFocusableElements } from "../../utils/dom/aria.mjs";
import { getEventCode } from "../../utils/dom/event.mjs";
import { nextTick } from "vue";
//#region ../../packages/directives/trap-focus/index.ts
const FOCUSABLE_CHILDREN = "_trap-focus-children";
const TRAP_FOCUS_HANDLER = "_trap-focus-handler";
const FOCUS_STACK = [];
const FOCUS_HANDLER = (e) => {
if (FOCUS_STACK.length === 0) return;
const code = getEventCode(e);
const focusableElement = FOCUS_STACK[FOCUS_STACK.length - 1][FOCUSABLE_CHILDREN];
if (focusableElement.length > 0 && code === EVENT_CODE.tab) {
if (focusableElement.length === 1) {
e.preventDefault();
if (document.activeElement !== focusableElement[0]) focusableElement[0].focus();
return;
}
const goingBackward = e.shiftKey;
const isFirst = e.target === focusableElement[0];
const isLast = e.target === focusableElement[focusableElement.length - 1];
if (isFirst && goingBackward) {
e.preventDefault();
focusableElement[focusableElement.length - 1].focus();
}
if (isLast && !goingBackward) {
e.preventDefault();
focusableElement[0].focus();
}
}
};
const TrapFocus = {
beforeMount(el) {
el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el);
FOCUS_STACK.push(el);
if (FOCUS_STACK.length <= 1) document.addEventListener("keydown", FOCUS_HANDLER);
},
updated(el) {
nextTick(() => {
el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el);
});
},
unmounted() {
FOCUS_STACK.shift();
if (FOCUS_STACK.length === 0) document.removeEventListener("keydown", FOCUS_HANDLER);
}
};
//#endregion
export { FOCUSABLE_CHILDREN, TRAP_FOCUS_HANDLER, TrapFocus as default };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/directives/trap-focus/index.ts"],"sourcesContent":["import { nextTick } from 'vue'\nimport { getEventCode, obtainAllFocusableElements } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\n\nimport type { ObjectDirective } from 'vue'\n\nexport const FOCUSABLE_CHILDREN = '_trap-focus-children'\nexport const TRAP_FOCUS_HANDLER = '_trap-focus-handler'\n\nexport interface TrapFocusElement extends HTMLElement {\n [FOCUSABLE_CHILDREN]: HTMLElement[]\n [TRAP_FOCUS_HANDLER]: (e: KeyboardEvent) => void\n}\n\nconst FOCUS_STACK: TrapFocusElement[] = []\n\nconst FOCUS_HANDLER = (e: KeyboardEvent) => {\n // Getting the top layer.\n if (FOCUS_STACK.length === 0) return\n const code = getEventCode(e)\n const focusableElement =\n FOCUS_STACK[FOCUS_STACK.length - 1][FOCUSABLE_CHILDREN]\n if (focusableElement.length > 0 && code === EVENT_CODE.tab) {\n if (focusableElement.length === 1) {\n e.preventDefault()\n if (document.activeElement !== focusableElement[0]) {\n focusableElement[0].focus()\n }\n return\n }\n const goingBackward = e.shiftKey\n const isFirst = e.target === focusableElement[0]\n const isLast = e.target === focusableElement[focusableElement.length - 1]\n if (isFirst && goingBackward) {\n e.preventDefault()\n focusableElement[focusableElement.length - 1].focus()\n }\n if (isLast && !goingBackward) {\n e.preventDefault()\n focusableElement[0].focus()\n }\n\n // the is critical since jsdom did not implement user actions, you can only mock it\n // DELETE ME: when testing env switches to puppeteer\n if (process.env.NODE_ENV === 'test') {\n const index = focusableElement.indexOf(e.target as HTMLElement)\n if (index !== -1) {\n focusableElement[goingBackward ? index - 1 : index + 1]?.focus()\n }\n }\n }\n}\n\nconst TrapFocus: ObjectDirective = {\n beforeMount(el: TrapFocusElement) {\n el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el)\n FOCUS_STACK.push(el)\n if (FOCUS_STACK.length <= 1) {\n document.addEventListener('keydown', FOCUS_HANDLER)\n }\n },\n updated(el: TrapFocusElement) {\n nextTick(() => {\n el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el)\n })\n },\n unmounted() {\n FOCUS_STACK.shift()\n if (FOCUS_STACK.length === 0) {\n document.removeEventListener('keydown', FOCUS_HANDLER)\n }\n },\n}\n\nexport default TrapFocus\n"],"mappings":";;;;;;AAMA,MAAa,qBAAqB;AAClC,MAAa,qBAAqB;AAOlC,MAAM,cAAkC,EAAE;AAE1C,MAAM,iBAAiB,MAAqB;AAE1C,KAAI,YAAY,WAAW,EAAG;CAC9B,MAAM,OAAO,aAAa,EAAE;CAC5B,MAAM,mBACJ,YAAY,YAAY,SAAS,GAAG;AACtC,KAAI,iBAAiB,SAAS,KAAK,SAAS,WAAW,KAAK;AAC1D,MAAI,iBAAiB,WAAW,GAAG;AACjC,KAAE,gBAAgB;AAClB,OAAI,SAAS,kBAAkB,iBAAiB,GAC9C,kBAAiB,GAAG,OAAO;AAE7B;;EAEF,MAAM,gBAAgB,EAAE;EACxB,MAAM,UAAU,EAAE,WAAW,iBAAiB;EAC9C,MAAM,SAAS,EAAE,WAAW,iBAAiB,iBAAiB,SAAS;AACvE,MAAI,WAAW,eAAe;AAC5B,KAAE,gBAAgB;AAClB,oBAAiB,iBAAiB,SAAS,GAAG,OAAO;;AAEvD,MAAI,UAAU,CAAC,eAAe;AAC5B,KAAE,gBAAgB;AAClB,oBAAiB,GAAG,OAAO;;;;AAcjC,MAAM,YAA6B;CACjC,YAAY,IAAsB;AAChC,KAAG,sBAAsB,2BAA2B,GAAG;AACvD,cAAY,KAAK,GAAG;AACpB,MAAI,YAAY,UAAU,EACxB,UAAS,iBAAiB,WAAW,cAAc;;CAGvD,QAAQ,IAAsB;AAC5B,iBAAe;AACb,MAAG,sBAAsB,2BAA2B,GAAG;IACvD;;CAEJ,YAAY;AACV,cAAY,OAAO;AACnB,MAAI,YAAY,WAAW,EACzB,UAAS,oBAAoB,WAAW,cAAc;;CAG3D"}