使用VUE重构项目
Some checks failed
build / build (api, amd64, linux) (push) Failing after -51s
build / build (api, arm64, linux) (push) Failing after -52s
build / build (api.exe, amd64, windows) (push) Failing after -51s

This commit is contained in:
2026-04-20 00:19:11 +08:00
parent c080bb8d4a
commit db7f1ba82f
12743 changed files with 1250466 additions and 359982 deletions

View File

@@ -0,0 +1,6 @@
import { _default } from "./src/roving-focus-group.vue.js";
import { _default as _default$1 } from "./src/roving-focus-item.vue.js";
import { COLLECTION_INJECTION_KEY, COLLECTION_ITEM_INJECTION_KEY } from "./src/roving-focus-group.js";
import { ROVING_FOCUS_GROUP_INJECTION_KEY, ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, RovingFocusGroupItemInjectionContext, RovingGroupInjectionContext } from "./src/tokens.js";
import { focusFirst, getFocusIntent, reorderArray } from "./src/utils.js";
export { _default as ElRovingFocusGroup, _default as default, _default$1 as ElRovingFocusItem, COLLECTION_INJECTION_KEY as ROVING_FOCUS_COLLECTION_INJECTION_KEY, ROVING_FOCUS_GROUP_INJECTION_KEY, ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, COLLECTION_ITEM_INJECTION_KEY as ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY, RovingFocusGroupItemInjectionContext, RovingGroupInjectionContext, focusFirst, getFocusIntent, reorderArray };

View File

@@ -0,0 +1,22 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_roving_focus_group = require('./src/roving-focus-group.js');
const require_tokens = require('./src/tokens.js');
const require_utils = require('./src/utils.js');
const require_roving_focus_group$1 = require('./src/roving-focus-group2.js');
const require_roving_focus_item = require('./src/roving-focus-item.js');
//#region ../../packages/components/roving-focus-group/index.ts
var roving_focus_group_default$1 = require_roving_focus_group$1.default;
//#endregion
exports.ElRovingFocusGroup = require_roving_focus_group$1.default;
exports.ElRovingFocusItem = require_roving_focus_item.default;
exports.ROVING_FOCUS_COLLECTION_INJECTION_KEY = require_roving_focus_group.ROVING_FOCUS_COLLECTION_INJECTION_KEY;
exports.ROVING_FOCUS_GROUP_INJECTION_KEY = require_tokens.ROVING_FOCUS_GROUP_INJECTION_KEY;
exports.ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY = require_tokens.ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY;
exports.ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY = require_roving_focus_group.ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY;
exports.default = roving_focus_group_default$1;
exports.focusFirst = require_utils.focusFirst;
exports.getFocusIntent = require_utils.getFocusIntent;
exports.reorderArray = require_utils.reorderArray;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["ElRovingFocusGroup"],"sources":["../../../../../packages/components/roving-focus-group/index.ts"],"sourcesContent":["// This component is ported from https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus\n// with some modification for Vue\nimport ElRovingFocusGroup from './src/roving-focus-group.vue'\nimport ElRovingFocusItem from './src/roving-focus-item.vue'\n\nexport { ElRovingFocusGroup, ElRovingFocusItem }\n\nexport * from './src/tokens'\nexport * from './src/utils'\n\nexport {\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n} from './src/roving-focus-group'\n\nexport default ElRovingFocusGroup\n"],"mappings":";;;;;;;;AAeA,mCAAeA"}

View File

@@ -0,0 +1,15 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require__plugin_vue_export_helper = require('../../../_virtual/_plugin-vue_export-helper.js');
const require_roving_focus_group_impl_vue_vue_type_script_lang = require('./roving-focus-group-impl.vue_vue_type_script_lang.js');
let vue = require("vue");
//#region ../../packages/components/roving-focus-group/src/roving-focus-group-impl.vue
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return (0, vue.renderSlot)(_ctx.$slots, "default");
}
var roving_focus_group_impl_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_roving_focus_group_impl_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
//#endregion
exports.default = roving_focus_group_impl_default;
//# sourceMappingURL=roving-focus-group-impl.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,117 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../utils/dom/event.js');
const require_roving_focus_group = require('./roving-focus-group.js');
const require_tokens = require('./tokens.js');
const require_utils = require('./utils.js');
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
//#region ../../packages/components/roving-focus-group/src/roving-focus-group-impl.vue?vue&type=script&lang.ts
const CURRENT_TAB_ID_CHANGE_EVT = "currentTabIdChange";
const ENTRY_FOCUS_EVT = "rovingFocusGroup.entryFocus";
const EVT_OPTS = {
bubbles: false,
cancelable: true
};
var roving_focus_group_impl_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
name: "ElRovingFocusGroupImpl",
inheritAttrs: false,
props: require_roving_focus_group.rovingFocusGroupProps,
emits: [CURRENT_TAB_ID_CHANGE_EVT, "entryFocus"],
setup(props, { emit }) {
const currentTabbedId = (0, vue.ref)((props.currentTabId || props.defaultCurrentTabId) ?? null);
const isBackingOut = (0, vue.ref)(false);
const isClickFocus = (0, vue.ref)(false);
const rovingFocusGroupRef = (0, vue.ref)();
const { getItems } = (0, vue.inject)(require_roving_focus_group.ROVING_FOCUS_COLLECTION_INJECTION_KEY, void 0);
const rovingFocusGroupRootStyle = (0, vue.computed)(() => {
return [{ outline: "none" }, props.style];
});
const onItemFocus = (tabbedId) => {
emit(CURRENT_TAB_ID_CHANGE_EVT, tabbedId);
};
const onItemShiftTab = () => {
isBackingOut.value = true;
};
const onMousedown = require_event.composeEventHandlers((e) => {
props.onMousedown?.(e);
}, () => {
isClickFocus.value = true;
});
const onFocus = require_event.composeEventHandlers((e) => {
props.onFocus?.(e);
}, (e) => {
const isKeyboardFocus = !(0, vue.unref)(isClickFocus);
const { target, currentTarget } = e;
if (target === currentTarget && isKeyboardFocus && !(0, vue.unref)(isBackingOut)) {
const entryFocusEvt = new Event(ENTRY_FOCUS_EVT, EVT_OPTS);
currentTarget?.dispatchEvent(entryFocusEvt);
if (!entryFocusEvt.defaultPrevented) {
const items = getItems().filter((item) => item.focusable);
require_utils.focusFirst([
items.find((item) => item.active),
items.find((item) => item.id === (0, vue.unref)(currentTabbedId)),
...items
].filter(Boolean).map((item) => item.ref));
}
}
isClickFocus.value = false;
});
const onBlur = require_event.composeEventHandlers((e) => {
props.onBlur?.(e);
}, () => {
isBackingOut.value = false;
});
const handleEntryFocus = (...args) => {
emit("entryFocus", ...args);
};
const onKeydown = (e) => {
const focusIntent = require_utils.getFocusIntent(e);
if (focusIntent) {
e.preventDefault();
let elements = getItems().filter((item) => item.focusable).map((item) => item.ref);
switch (focusIntent) {
case "last":
elements.reverse();
break;
case "prev":
case "next": {
if (focusIntent === "prev") elements.reverse();
const currentIdx = elements.indexOf(e.currentTarget);
elements = props.loop ? require_utils.reorderArray(elements, currentIdx + 1) : elements.slice(currentIdx + 1);
break;
}
default: break;
}
(0, vue.nextTick)(() => {
require_utils.focusFirst(elements);
});
}
};
(0, vue.provide)(require_tokens.ROVING_FOCUS_GROUP_INJECTION_KEY, {
currentTabbedId: (0, vue.readonly)(currentTabbedId),
loop: (0, vue.toRef)(props, "loop"),
tabIndex: (0, vue.computed)(() => {
return (0, vue.unref)(isBackingOut) ? -1 : 0;
}),
rovingFocusGroupRef,
rovingFocusGroupRootStyle,
orientation: (0, vue.toRef)(props, "orientation"),
dir: (0, vue.toRef)(props, "dir"),
onItemFocus,
onItemShiftTab,
onBlur,
onFocus,
onMousedown,
onKeydown
});
(0, vue.watch)(() => props.currentTabId, (val) => {
currentTabbedId.value = val ?? null;
});
(0, _vueuse_core.useEventListener)(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus);
}
});
//#endregion
exports.default = roving_focus_group_impl_vue_vue_type_script_lang_default;
//# sourceMappingURL=roving-focus-group-impl.vue_vue_type_script_lang.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,70 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { ElCollectionInjectionContext, ElCollectionItemInjectionContext } from "../../collection/src/tokens.js";
import "../../collection/index.js";
import * as vue from "vue";
import { ExtractPropTypes, ExtractPublicPropTypes, StyleValue } from "vue";
//#region ../../packages/components/roving-focus-group/src/roving-focus-group.d.ts
declare const rovingFocusGroupProps: {
style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
currentTabId: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string) | (() => string | null) | (((new (...args: any[]) => string) | (() => string | null)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultCurrentTabId: StringConstructor;
loop: BooleanConstructor;
dir: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
orientation: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined) | (((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onBlur: FunctionConstructor;
onFocus: FunctionConstructor;
onMousedown: FunctionConstructor;
};
type ElRovingFocusGroupProps = ExtractPropTypes<typeof rovingFocusGroupProps>;
declare const ElCollection: {
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
name: string;
setup(): void;
}, ElCollectionItem: {
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
name: string;
setup(_: unknown, {
attrs
}: vue.SetupContext): void;
}, COLLECTION_INJECTION_KEY: vue.InjectionKey<ElCollectionInjectionContext>, COLLECTION_ITEM_INJECTION_KEY: vue.InjectionKey<ElCollectionItemInjectionContext>;
//#endregion
export { COLLECTION_INJECTION_KEY, COLLECTION_ITEM_INJECTION_KEY, ElRovingFocusGroupProps };

View File

@@ -0,0 +1,33 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
const require_collection = require('../../collection/src/collection.js');
//#region ../../packages/components/roving-focus-group/src/roving-focus-group.ts
const rovingFocusGroupProps = require_runtime.buildProps({
style: { type: require_runtime.definePropType([
String,
Array,
Object
]) },
currentTabId: { type: require_runtime.definePropType(String) },
defaultCurrentTabId: String,
loop: Boolean,
dir: {
type: String,
values: ["ltr", "rtl"],
default: "ltr"
},
orientation: { type: require_runtime.definePropType(String) },
onBlur: Function,
onFocus: Function,
onMousedown: Function
});
const { ElCollection, ElCollectionItem, COLLECTION_INJECTION_KEY, COLLECTION_ITEM_INJECTION_KEY } = require_collection.createCollectionWithScope("RovingFocusGroup");
//#endregion
exports.ElCollection = ElCollection;
exports.ElCollectionItem = ElCollectionItem;
exports.ROVING_FOCUS_COLLECTION_INJECTION_KEY = COLLECTION_INJECTION_KEY;
exports.ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY = COLLECTION_ITEM_INJECTION_KEY;
exports.rovingFocusGroupProps = rovingFocusGroupProps;
//# sourceMappingURL=roving-focus-group.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"roving-focus-group.js","names":["buildProps","definePropType","createCollectionWithScope"],"sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-group.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { createCollectionWithScope } from '@element-plus/components/collection'\n\nimport type {\n ExtractPropTypes,\n ExtractPublicPropTypes,\n HTMLAttributes,\n StyleValue,\n} from 'vue'\n\nexport const rovingFocusGroupProps = buildProps({\n style: { type: definePropType<StyleValue>([String, Array, Object]) },\n currentTabId: {\n type: definePropType<string | null>(String),\n },\n defaultCurrentTabId: String,\n loop: Boolean,\n dir: {\n type: String, // left for direction support\n values: ['ltr', 'rtl'],\n default: 'ltr',\n },\n orientation: {\n // left for orientation support\n type: definePropType<HTMLAttributes['aria-orientation']>(String),\n },\n\n onBlur: Function,\n onFocus: Function,\n onMousedown: Function,\n})\n\nexport type ElRovingFocusGroupProps = ExtractPropTypes<\n typeof rovingFocusGroupProps\n>\n\nexport type ElRovingFocusGroupPropsPublic = ExtractPublicPropTypes<\n typeof rovingFocusGroupProps\n>\n\nconst {\n ElCollection,\n ElCollectionItem,\n COLLECTION_INJECTION_KEY,\n COLLECTION_ITEM_INJECTION_KEY,\n} = createCollectionWithScope('RovingFocusGroup')\n\nexport {\n ElCollection,\n ElCollectionItem,\n COLLECTION_INJECTION_KEY as ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n COLLECTION_ITEM_INJECTION_KEY as ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n}\n"],"mappings":";;;;;AAUA,MAAa,wBAAwBA,2BAAW;CAC9C,OAAO,EAAE,MAAMC,+BAA2B;EAAC;EAAQ;EAAO;EAAO,CAAC,EAAE;CACpE,cAAc,EACZ,MAAMA,+BAA8B,OAAO,EAC5C;CACD,qBAAqB;CACrB,MAAM;CACN,KAAK;EACH,MAAM;EACN,QAAQ,CAAC,OAAO,MAAM;EACtB,SAAS;EACV;CACD,aAAa,EAEX,MAAMA,+BAAmD,OAAO,EACjE;CAED,QAAQ;CACR,SAAS;CACT,aAAa;CACd,CAAC;AAUF,MAAM,EACJ,cACA,kBACA,0BACA,kCACEC,6CAA0B,mBAAmB"}

View File

@@ -0,0 +1,83 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import * as vue from "vue";
//#region ../../packages/components/roving-focus-group/src/roving-focus-group.vue.d.ts
declare const _default: typeof __VLS_export;
declare const __VLS_export: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
ElFocusGroupCollection: {
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
name: string;
setup(): void;
};
ElRovingFocusGroupImpl: vue.DefineComponent<vue.ExtractPropTypes<{
style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
currentTabId: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string) | (() => string | null) | (((new (...args: any[]) => string) | (() => string | null)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultCurrentTabId: StringConstructor;
loop: BooleanConstructor;
dir: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
orientation: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined) | (((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onBlur: FunctionConstructor;
onFocus: FunctionConstructor;
onMousedown: FunctionConstructor;
}>, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("currentTabIdChange" | "entryFocus")[], "currentTabIdChange" | "entryFocus", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
currentTabId: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string) | (() => string | null) | (((new (...args: any[]) => string) | (() => string | null)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultCurrentTabId: StringConstructor;
loop: BooleanConstructor;
dir: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
orientation: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined) | (((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onBlur: FunctionConstructor;
onFocus: FunctionConstructor;
onMousedown: FunctionConstructor;
}>> & Readonly<{
onCurrentTabIdChange?: ((...args: any[]) => any) | undefined;
onEntryFocus?: ((...args: any[]) => any) | undefined;
}>, {
loop: boolean;
dir: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default };

View File

@@ -0,0 +1,17 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_roving_focus_group = require('./roving-focus-group.js');
const require_roving_focus_group_impl = require('./roving-focus-group-impl.js');
let vue = require("vue");
//#region ../../packages/components/roving-focus-group/src/roving-focus-group.vue?vue&type=script&lang.ts
var roving_focus_group_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
name: "ElRovingFocusGroup",
components: {
ElFocusGroupCollection: require_roving_focus_group.ElCollection,
ElRovingFocusGroupImpl: require_roving_focus_group_impl.default
}
});
//#endregion
exports.default = roving_focus_group_vue_vue_type_script_lang_default;
//# sourceMappingURL=roving-focus-group.vue_vue_type_script_lang.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"roving-focus-group.vue_vue_type_script_lang.js","names":[],"sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-group.vue"],"sourcesContent":["<template>\n <el-focus-group-collection>\n <el-roving-focus-group-impl v-bind=\"$attrs\">\n <slot />\n </el-roving-focus-group-impl>\n </el-focus-group-collection>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport ElRovingFocusGroupImpl from './roving-focus-group-impl.vue'\nimport { ElCollection as ElFocusGroupCollection } from './roving-focus-group'\n\nexport default defineComponent({\n name: 'ElRovingFocusGroup',\n components: {\n ElFocusGroupCollection,\n ElRovingFocusGroupImpl,\n },\n})\n</script>\n"],"mappings":";;;;;;AAaA,mFAA+B;CAC7B,MAAM;CACN,YAAY;EACV;EACA;EACD;CACF,CAAA"}

View File

@@ -0,0 +1,23 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require__plugin_vue_export_helper = require('../../../_virtual/_plugin-vue_export-helper.js');
const require_roving_focus_group_vue_vue_type_script_lang = require('./roving-focus-group.vue_vue_type_script_lang.js');
let vue = require("vue");
//#region ../../packages/components/roving-focus-group/src/roving-focus-group.vue
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_roving_focus_group_impl = (0, vue.resolveComponent)("el-roving-focus-group-impl");
const _component_el_focus_group_collection = (0, vue.resolveComponent)("el-focus-group-collection");
return (0, vue.openBlock)(), (0, vue.createBlock)(_component_el_focus_group_collection, null, {
default: (0, vue.withCtx)(() => [(0, vue.createVNode)(_component_el_roving_focus_group_impl, (0, vue.normalizeProps)((0, vue.guardReactiveProps)(_ctx.$attrs)), {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 16)]),
_: 3
});
}
var roving_focus_group_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_roving_focus_group_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
//#endregion
exports.default = roving_focus_group_default;
//# sourceMappingURL=roving-focus-group2.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"roving-focus-group2.js","names":[],"sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-group.vue"],"sourcesContent":["<template>\n <el-focus-group-collection>\n <el-roving-focus-group-impl v-bind=\"$attrs\">\n <slot />\n </el-roving-focus-group-impl>\n </el-focus-group-collection>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport ElRovingFocusGroupImpl from './roving-focus-group-impl.vue'\nimport { ElCollection as ElFocusGroupCollection } from './roving-focus-group'\n\nexport default defineComponent({\n name: 'ElRovingFocusGroup',\n components: {\n ElFocusGroupCollection,\n ElRovingFocusGroupImpl,\n },\n})\n</script>\n"],"mappings":";;;;;;;;;;mDAK8B,sCAAA,MAAA;EAAA,gCADG,sBAAA,2FAFO,KAAA,OAAM,CAAA,EAAA;GAAA,gCAChC,qBAAA,KAAA,QAAA,UAAA,CAAA,CAAA"}

View File

@@ -0,0 +1,27 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require__plugin_vue_export_helper = require('../../../_virtual/_plugin-vue_export-helper.js');
const require_roving_focus_item_vue_vue_type_script_lang = require('./roving-focus-item.vue_vue_type_script_lang.js');
let vue = require("vue");
//#region ../../packages/components/roving-focus-group/src/roving-focus-item.vue
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_roving_focus_collection_item = (0, vue.resolveComponent)("el-roving-focus-collection-item");
return (0, vue.openBlock)(), (0, vue.createBlock)(_component_el_roving_focus_collection_item, {
id: _ctx.id,
focusable: _ctx.focusable,
active: _ctx.active
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 8, [
"id",
"focusable",
"active"
]);
}
var roving_focus_item_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_roving_focus_item_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
//#endregion
exports.default = roving_focus_item_default;
//# sourceMappingURL=roving-focus-item.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"roving-focus-item.js","names":[],"sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-item.vue"],"sourcesContent":["<template>\n <el-roving-focus-collection-item\n :id=\"id\"\n :focusable=\"focusable\"\n :active=\"active\"\n >\n <slot />\n </el-roving-focus-collection-item>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, provide, ref, unref } from 'vue'\nimport { useId } from '@element-plus/hooks'\nimport { composeEventHandlers, getEventCode } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElCollectionItem as ElRovingFocusCollectionItem } from './roving-focus-group'\nimport {\n ROVING_FOCUS_GROUP_INJECTION_KEY,\n ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n} from './tokens'\n\nexport default defineComponent({\n components: {\n ElRovingFocusCollectionItem,\n },\n props: {\n focusable: {\n type: Boolean,\n default: true,\n },\n active: Boolean,\n },\n emits: ['mousedown', 'focus', 'keydown'],\n setup(props, { emit }) {\n const { currentTabbedId, onItemFocus, onItemShiftTab, onKeydown } = inject(\n ROVING_FOCUS_GROUP_INJECTION_KEY,\n undefined\n )!\n\n const id = useId()\n const rovingFocusGroupItemRef = ref<HTMLElement>()\n\n const handleMousedown = composeEventHandlers(\n (e: Event) => {\n emit('mousedown', e)\n },\n (e) => {\n if (!props.focusable) {\n e.preventDefault()\n } else {\n onItemFocus(unref(id))\n }\n }\n )\n\n const handleFocus = composeEventHandlers(\n (e: Event) => {\n emit('focus', e)\n },\n () => {\n onItemFocus(unref(id))\n }\n )\n\n const handleKeydown = composeEventHandlers(\n (e: Event) => {\n emit('keydown', e)\n },\n (e) => {\n const { shiftKey, target, currentTarget } = e as KeyboardEvent\n const code = getEventCode(e as KeyboardEvent)\n\n if (code === EVENT_CODE.tab && shiftKey) {\n onItemShiftTab()\n return\n }\n if (target !== currentTarget) return\n onKeydown(e as KeyboardEvent)\n }\n )\n\n const isCurrentTab = computed(() => currentTabbedId.value === unref(id))\n\n provide(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {\n rovingFocusGroupItemRef,\n tabIndex: computed(() => (unref(isCurrentTab) ? 0 : -1)),\n handleMousedown,\n handleFocus,\n handleKeydown,\n })\n\n return {\n id,\n handleKeydown,\n handleFocus,\n handleMousedown,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;;mDAOoC,4CAAA;EAL/B,IAAI,KAAA;EACJ,WAAW,KAAA;EACX,QAAQ,KAAA;EAAA,EAAA;kCAED,qBAAA,KAAA,QAAA,UAAA,CAAA,CAAA"}

View File

@@ -0,0 +1,50 @@
import * as vue from "vue";
//#region ../../packages/components/roving-focus-group/src/roving-focus-item.vue.d.ts
declare const _default: typeof __VLS_export;
declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
focusable: {
type: BooleanConstructor;
default: boolean;
};
active: BooleanConstructor;
}>, {
id: vue.Ref<string, string>;
handleKeydown: (event: Event) => void;
handleFocus: (event: Event) => void;
handleMousedown: (event: Event) => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("focus" | "keydown" | "mousedown")[], "focus" | "keydown" | "mousedown", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
focusable: {
type: BooleanConstructor;
default: boolean;
};
active: BooleanConstructor;
}>> & Readonly<{
onFocus?: ((...args: any[]) => any) | undefined;
onKeydown?: ((...args: any[]) => any) | undefined;
onMousedown?: ((...args: any[]) => any) | undefined;
}>, {
active: boolean;
focusable: boolean;
}, {}, {
ElRovingFocusCollectionItem: {
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
name: string;
setup(_: unknown, {
attrs
}: vue.SetupContext): void;
};
}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default };

View File

@@ -0,0 +1,69 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_aria = require('../../../constants/aria.js');
const require_event = require('../../../utils/dom/event.js');
const require_index = require('../../../hooks/use-id/index.js');
const require_roving_focus_group = require('./roving-focus-group.js');
const require_tokens = require('./tokens.js');
let vue = require("vue");
//#region ../../packages/components/roving-focus-group/src/roving-focus-item.vue?vue&type=script&lang.ts
var roving_focus_item_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
components: { ElRovingFocusCollectionItem: require_roving_focus_group.ElCollectionItem },
props: {
focusable: {
type: Boolean,
default: true
},
active: Boolean
},
emits: [
"mousedown",
"focus",
"keydown"
],
setup(props, { emit }) {
const { currentTabbedId, onItemFocus, onItemShiftTab, onKeydown } = (0, vue.inject)(require_tokens.ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
const id = require_index.useId();
const rovingFocusGroupItemRef = (0, vue.ref)();
const handleMousedown = require_event.composeEventHandlers((e) => {
emit("mousedown", e);
}, (e) => {
if (!props.focusable) e.preventDefault();
else onItemFocus((0, vue.unref)(id));
});
const handleFocus = require_event.composeEventHandlers((e) => {
emit("focus", e);
}, () => {
onItemFocus((0, vue.unref)(id));
});
const handleKeydown = require_event.composeEventHandlers((e) => {
emit("keydown", e);
}, (e) => {
const { shiftKey, target, currentTarget } = e;
if (require_event.getEventCode(e) === require_aria.EVENT_CODE.tab && shiftKey) {
onItemShiftTab();
return;
}
if (target !== currentTarget) return;
onKeydown(e);
});
const isCurrentTab = (0, vue.computed)(() => currentTabbedId.value === (0, vue.unref)(id));
(0, vue.provide)(require_tokens.ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {
rovingFocusGroupItemRef,
tabIndex: (0, vue.computed)(() => (0, vue.unref)(isCurrentTab) ? 0 : -1),
handleMousedown,
handleFocus,
handleKeydown
});
return {
id,
handleKeydown,
handleFocus,
handleMousedown
};
}
});
//#endregion
exports.default = roving_focus_item_vue_vue_type_script_lang_default;
//# sourceMappingURL=roving-focus-item.vue_vue_type_script_lang.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"roving-focus-item.vue_vue_type_script_lang.js","names":[],"sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-item.vue"],"sourcesContent":["<template>\n <el-roving-focus-collection-item\n :id=\"id\"\n :focusable=\"focusable\"\n :active=\"active\"\n >\n <slot />\n </el-roving-focus-collection-item>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, provide, ref, unref } from 'vue'\nimport { useId } from '@element-plus/hooks'\nimport { composeEventHandlers, getEventCode } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElCollectionItem as ElRovingFocusCollectionItem } from './roving-focus-group'\nimport {\n ROVING_FOCUS_GROUP_INJECTION_KEY,\n ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n} from './tokens'\n\nexport default defineComponent({\n components: {\n ElRovingFocusCollectionItem,\n },\n props: {\n focusable: {\n type: Boolean,\n default: true,\n },\n active: Boolean,\n },\n emits: ['mousedown', 'focus', 'keydown'],\n setup(props, { emit }) {\n const { currentTabbedId, onItemFocus, onItemShiftTab, onKeydown } = inject(\n ROVING_FOCUS_GROUP_INJECTION_KEY,\n undefined\n )!\n\n const id = useId()\n const rovingFocusGroupItemRef = ref<HTMLElement>()\n\n const handleMousedown = composeEventHandlers(\n (e: Event) => {\n emit('mousedown', e)\n },\n (e) => {\n if (!props.focusable) {\n e.preventDefault()\n } else {\n onItemFocus(unref(id))\n }\n }\n )\n\n const handleFocus = composeEventHandlers(\n (e: Event) => {\n emit('focus', e)\n },\n () => {\n onItemFocus(unref(id))\n }\n )\n\n const handleKeydown = composeEventHandlers(\n (e: Event) => {\n emit('keydown', e)\n },\n (e) => {\n const { shiftKey, target, currentTarget } = e as KeyboardEvent\n const code = getEventCode(e as KeyboardEvent)\n\n if (code === EVENT_CODE.tab && shiftKey) {\n onItemShiftTab()\n return\n }\n if (target !== currentTarget) return\n onKeydown(e as KeyboardEvent)\n }\n )\n\n const isCurrentTab = computed(() => currentTabbedId.value === unref(id))\n\n provide(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {\n rovingFocusGroupItemRef,\n tabIndex: computed(() => (unref(isCurrentTab) ? 0 : -1)),\n handleMousedown,\n handleFocus,\n handleKeydown,\n })\n\n return {\n id,\n handleKeydown,\n handleFocus,\n handleMousedown,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;;AAqBA,kFAA+B;CAC7B,YAAY,EACV,0EACD;CACD,OAAO;EACL,WAAW;GACT,MAAM;GACN,SAAS;GACV;EACD,QAAQ;EACT;CACD,OAAO;EAAC;EAAa;EAAS;EAAU;CACxC,MAAM,OAAO,EAAE,QAAQ;EACrB,MAAM,EAAE,iBAAiB,aAAa,gBAAgB,8BACpD,iDACA,OACD;EAED,MAAM,KAAK,qBAAM;EACjB,MAAM,wCAA2C;EAEjD,MAAM,kBAAkB,oCACrB,MAAa;AACZ,QAAK,aAAa,EAAC;MAEpB,MAAM;AACL,OAAI,CAAC,MAAM,UACT,GAAE,gBAAe;OAEjB,4BAAkB,GAAG,CAAA;IAG3B;EAEA,MAAM,cAAc,oCACjB,MAAa;AACZ,QAAK,SAAS,EAAC;WAEX;AACJ,8BAAkB,GAAG,CAAA;IAEzB;EAEA,MAAM,gBAAgB,oCACnB,MAAa;AACZ,QAAK,WAAW,EAAC;MAElB,MAAM;GACL,MAAM,EAAE,UAAU,QAAQ,kBAAkB;AAG5C,OAFa,2BAAa,EAAkB,KAE/B,wBAAW,OAAO,UAAU;AACvC,oBAAe;AACf;;AAEF,OAAI,WAAW,cAAe;AAC9B,aAAU,EAAkB;IAEhC;EAEA,MAAM,uCAA8B,gBAAgB,yBAAgB,GAAG,CAAA;AAEvE,mBAAQ,sDAAuC;GAC7C;GACA,iDAAgC,aAAY,GAAI,IAAI,GAAI;GACxD;GACA;GACA;GACD,CAAA;AAED,SAAO;GACL;GACA;GACA;GACA;GACF;;CAEH,CAAA"}

View File

@@ -0,0 +1,31 @@
import { ElRovingFocusGroupProps } from "./roving-focus-group.js";
import { InjectionKey, Ref, StyleValue } from "vue";
//#region ../../packages/components/roving-focus-group/src/tokens.d.ts
type EventHandler<T = Event> = (e: T) => void;
type RovingGroupInjectionContext = {
currentTabbedId: Ref<string | null>;
dir: Ref<ElRovingFocusGroupProps['dir']>;
loop: Ref<ElRovingFocusGroupProps['loop']>;
orientation: Ref<ElRovingFocusGroupProps['orientation']>;
tabIndex: Ref<number>;
rovingFocusGroupRef: Ref<HTMLElement | undefined>;
rovingFocusGroupRootStyle: Ref<StyleValue>;
onBlur: EventHandler;
onFocus: EventHandler<FocusEvent>;
onMousedown: EventHandler;
onItemFocus: (id: string) => void;
onItemShiftTab: () => void;
onKeydown: EventHandler<KeyboardEvent>;
};
type RovingFocusGroupItemInjectionContext = {
rovingFocusGroupItemRef: Ref<HTMLElement | undefined>;
tabIndex: Ref<number>;
handleMousedown: EventHandler;
handleFocus: EventHandler;
handleKeydown: EventHandler;
};
declare const ROVING_FOCUS_GROUP_INJECTION_KEY: InjectionKey<RovingGroupInjectionContext>;
declare const ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY: InjectionKey<RovingFocusGroupItemInjectionContext>;
//#endregion
export { ROVING_FOCUS_GROUP_INJECTION_KEY, ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, RovingFocusGroupItemInjectionContext, RovingGroupInjectionContext };

View File

@@ -0,0 +1,10 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
//#region ../../packages/components/roving-focus-group/src/tokens.ts
const ROVING_FOCUS_GROUP_INJECTION_KEY = Symbol("elRovingFocusGroup");
const ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY = Symbol("elRovingFocusGroupItem");
//#endregion
exports.ROVING_FOCUS_GROUP_INJECTION_KEY = ROVING_FOCUS_GROUP_INJECTION_KEY;
exports.ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY = ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY;
//# sourceMappingURL=tokens.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"tokens.js","names":[],"sources":["../../../../../../packages/components/roving-focus-group/src/tokens.ts"],"sourcesContent":["import type { InjectionKey, Ref, StyleValue } from 'vue'\nimport type { ElRovingFocusGroupProps } from './roving-focus-group'\n\ntype EventHandler<T = Event> = (e: T) => void\n\nexport type RovingGroupInjectionContext = {\n currentTabbedId: Ref<string | null>\n dir: Ref<ElRovingFocusGroupProps['dir']>\n loop: Ref<ElRovingFocusGroupProps['loop']>\n orientation: Ref<ElRovingFocusGroupProps['orientation']>\n tabIndex: Ref<number>\n rovingFocusGroupRef: Ref<HTMLElement | undefined>\n rovingFocusGroupRootStyle: Ref<StyleValue>\n onBlur: EventHandler\n onFocus: EventHandler<FocusEvent>\n onMousedown: EventHandler\n onItemFocus: (id: string) => void\n onItemShiftTab: () => void\n onKeydown: EventHandler<KeyboardEvent>\n}\n\nexport type RovingFocusGroupItemInjectionContext = {\n rovingFocusGroupItemRef: Ref<HTMLElement | undefined>\n tabIndex: Ref<number>\n handleMousedown: EventHandler\n handleFocus: EventHandler\n handleKeydown: EventHandler\n}\n\nexport const ROVING_FOCUS_GROUP_INJECTION_KEY: InjectionKey<RovingGroupInjectionContext> =\n Symbol('elRovingFocusGroup')\n\nexport const ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY: InjectionKey<RovingFocusGroupItemInjectionContext> =\n Symbol('elRovingFocusGroupItem')\n"],"mappings":";;;AA6BA,MAAa,mCACX,OAAO,qBAAqB;AAE9B,MAAa,wCACX,OAAO,yBAAyB"}

View File

@@ -0,0 +1,11 @@
import { HTMLAttributes } from "vue";
//#region ../../packages/components/roving-focus-group/src/utils.d.ts
type Orientation = HTMLAttributes['aria-orientation'];
type Direction = 'ltr' | 'rtl';
type FocusIntent = 'first' | 'last' | 'prev' | 'next';
declare const getFocusIntent: (event: KeyboardEvent, orientation?: Orientation, dir?: Direction) => FocusIntent | undefined;
declare const reorderArray: <T>(array: T[], atIdx: number) => T[];
declare const focusFirst: (elements: HTMLElement[]) => void;
//#endregion
export { focusFirst, getFocusIntent, reorderArray };

View File

@@ -0,0 +1,46 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_aria = require('../../../constants/aria.js');
const require_event = require('../../../utils/dom/event.js');
//#region ../../packages/components/roving-focus-group/src/utils.ts
const MAP_KEY_TO_FOCUS_INTENT = {
ArrowLeft: "prev",
ArrowUp: "prev",
ArrowRight: "next",
ArrowDown: "next",
PageUp: "first",
Home: "first",
PageDown: "last",
End: "last"
};
const getDirectionAwareKey = (key, dir) => {
if (dir !== "rtl") return key;
switch (key) {
case require_aria.EVENT_CODE.right: return require_aria.EVENT_CODE.left;
case require_aria.EVENT_CODE.left: return require_aria.EVENT_CODE.right;
default: return key;
}
};
const getFocusIntent = (event, orientation, dir) => {
const key = getDirectionAwareKey(require_event.getEventCode(event), dir);
if (orientation === "vertical" && [require_aria.EVENT_CODE.left, require_aria.EVENT_CODE.right].includes(key)) return void 0;
if (orientation === "horizontal" && [require_aria.EVENT_CODE.up, require_aria.EVENT_CODE.down].includes(key)) return void 0;
return MAP_KEY_TO_FOCUS_INTENT[key];
};
const reorderArray = (array, atIdx) => {
return array.map((_, idx) => array[(idx + atIdx) % array.length]);
};
const focusFirst = (elements) => {
const { activeElement: prevActive } = document;
for (const element of elements) {
if (element === prevActive) return;
element.focus();
if (prevActive !== document.activeElement) return;
}
};
//#endregion
exports.focusFirst = focusFirst;
exports.getFocusIntent = getFocusIntent;
exports.reorderArray = reorderArray;
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"utils.js","names":["EVENT_CODE","getEventCode"],"sources":["../../../../../../packages/components/roving-focus-group/src/utils.ts"],"sourcesContent":["import { EVENT_CODE } from '@element-plus/constants'\nimport { getEventCode } from '@element-plus/utils'\n\nimport type { HTMLAttributes } from 'vue'\n\ntype Orientation = HTMLAttributes['aria-orientation']\ntype Direction = 'ltr' | 'rtl'\ntype FocusIntent = 'first' | 'last' | 'prev' | 'next'\n\nconst MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {\n ArrowLeft: 'prev',\n ArrowUp: 'prev',\n ArrowRight: 'next',\n ArrowDown: 'next',\n PageUp: 'first',\n Home: 'first',\n PageDown: 'last',\n End: 'last',\n}\n\nconst getDirectionAwareKey = (key: string, dir?: Direction) => {\n if (dir !== 'rtl') return key\n\n switch (key) {\n case EVENT_CODE.right:\n return EVENT_CODE.left\n case EVENT_CODE.left:\n return EVENT_CODE.right\n default:\n return key\n }\n}\n\nexport const getFocusIntent = (\n event: KeyboardEvent,\n orientation?: Orientation,\n dir?: Direction\n) => {\n const code = getEventCode(event)\n const key = getDirectionAwareKey(code, dir)\n if (\n orientation === 'vertical' &&\n [EVENT_CODE.left, EVENT_CODE.right].includes(key)\n )\n return undefined\n if (\n orientation === 'horizontal' &&\n [EVENT_CODE.up, EVENT_CODE.down].includes(key)\n )\n return undefined\n return MAP_KEY_TO_FOCUS_INTENT[key]\n}\n\nexport const reorderArray = <T>(array: T[], atIdx: number) => {\n return array.map((_, idx) => array[(idx + atIdx) % array.length])\n}\n\nexport const focusFirst = (elements: HTMLElement[]) => {\n const { activeElement: prevActive } = document\n\n for (const element of elements) {\n if (element === prevActive) return\n element.focus()\n if (prevActive !== document.activeElement) return\n }\n}\n"],"mappings":";;;;;AASA,MAAM,0BAAuD;CAC3D,WAAW;CACX,SAAS;CACT,YAAY;CACZ,WAAW;CACX,QAAQ;CACR,MAAM;CACN,UAAU;CACV,KAAK;CACN;AAED,MAAM,wBAAwB,KAAa,QAAoB;AAC7D,KAAI,QAAQ,MAAO,QAAO;AAE1B,SAAQ,KAAR;EACE,KAAKA,wBAAW,MACd,QAAOA,wBAAW;EACpB,KAAKA,wBAAW,KACd,QAAOA,wBAAW;EACpB,QACE,QAAO;;;AAIb,MAAa,kBACX,OACA,aACA,QACG;CAEH,MAAM,MAAM,qBADCC,2BAAa,MAAM,EACO,IAAI;AAC3C,KACE,gBAAgB,cAChB,CAACD,wBAAW,MAAMA,wBAAW,MAAM,CAAC,SAAS,IAAI,CAEjD,QAAO;AACT,KACE,gBAAgB,gBAChB,CAACA,wBAAW,IAAIA,wBAAW,KAAK,CAAC,SAAS,IAAI,CAE9C,QAAO;AACT,QAAO,wBAAwB;;AAGjC,MAAa,gBAAmB,OAAY,UAAkB;AAC5D,QAAO,MAAM,KAAK,GAAG,QAAQ,OAAO,MAAM,SAAS,MAAM,QAAQ;;AAGnE,MAAa,cAAc,aAA4B;CACrD,MAAM,EAAE,eAAe,eAAe;AAEtC,MAAK,MAAM,WAAW,UAAU;AAC9B,MAAI,YAAY,WAAY;AAC5B,UAAQ,OAAO;AACf,MAAI,eAAe,SAAS,cAAe"}