This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,105 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
var rovingFocusGroup = require('./roving-focus-group.js');
var tokens = require('./tokens.js');
var utils = require('./utils.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var event = require('../../../utils/dom/event.js');
const CURRENT_TAB_ID_CHANGE_EVT = "currentTabIdChange";
const ENTRY_FOCUS_EVT = "rovingFocusGroup.entryFocus";
const EVT_OPTS = { bubbles: false, cancelable: true };
const _sfc_main = vue.defineComponent({
name: "ElRovingFocusGroupImpl",
inheritAttrs: false,
props: rovingFocusGroup.rovingFocusGroupProps,
emits: [CURRENT_TAB_ID_CHANGE_EVT, "entryFocus"],
setup(props, { emit }) {
var _a;
const currentTabbedId = vue.ref((_a = props.currentTabId || props.defaultCurrentTabId) != null ? _a : null);
const isBackingOut = vue.ref(false);
const isClickFocus = vue.ref(false);
const rovingFocusGroupRef = vue.ref();
const { getItems } = vue.inject(rovingFocusGroup.ROVING_FOCUS_COLLECTION_INJECTION_KEY, void 0);
const rovingFocusGroupRootStyle = vue.computed(() => {
return [
{
outline: "none"
},
props.style
];
});
const onItemFocus = (tabbedId) => {
emit(CURRENT_TAB_ID_CHANGE_EVT, tabbedId);
};
const onItemShiftTab = () => {
isBackingOut.value = true;
};
const onMousedown = event.composeEventHandlers((e) => {
var _a2;
(_a2 = props.onMousedown) == null ? void 0 : _a2.call(props, e);
}, () => {
isClickFocus.value = true;
});
const onFocus = event.composeEventHandlers((e) => {
var _a2;
(_a2 = props.onFocus) == null ? void 0 : _a2.call(props, e);
}, (e) => {
const isKeyboardFocus = !vue.unref(isClickFocus);
const { target, currentTarget } = e;
if (target === currentTarget && isKeyboardFocus && !vue.unref(isBackingOut)) {
const entryFocusEvt = new Event(ENTRY_FOCUS_EVT, EVT_OPTS);
currentTarget == null ? void 0 : currentTarget.dispatchEvent(entryFocusEvt);
if (!entryFocusEvt.defaultPrevented) {
const items = getItems().filter((item) => item.focusable);
const activeItem = items.find((item) => item.active);
const currentItem = items.find((item) => item.id === vue.unref(currentTabbedId));
const candidates = [activeItem, currentItem, ...items].filter(Boolean);
const candidateNodes = candidates.map((item) => item.ref);
utils.focusFirst(candidateNodes);
}
}
isClickFocus.value = false;
});
const onBlur = event.composeEventHandlers((e) => {
var _a2;
(_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
}, () => {
isBackingOut.value = false;
});
const handleEntryFocus = (...args) => {
emit("entryFocus", ...args);
};
vue.provide(tokens.ROVING_FOCUS_GROUP_INJECTION_KEY, {
currentTabbedId: vue.readonly(currentTabbedId),
loop: vue.toRef(props, "loop"),
tabIndex: vue.computed(() => {
return vue.unref(isBackingOut) ? -1 : 0;
}),
rovingFocusGroupRef,
rovingFocusGroupRootStyle,
orientation: vue.toRef(props, "orientation"),
dir: vue.toRef(props, "dir"),
onItemFocus,
onItemShiftTab,
onBlur,
onFocus,
onMousedown
});
vue.watch(() => props.currentTabId, (val) => {
currentTabbedId.value = val != null ? val : null;
});
core.useEventListener(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus);
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.renderSlot(_ctx.$slots, "default");
}
var ElRovingFocusGroupImpl = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "roving-focus-group-impl.vue"]]);
exports["default"] = ElRovingFocusGroupImpl;
//# sourceMappingURL=roving-focus-group-impl.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,59 @@
import type { StyleValue } from 'vue';
declare const _default: import("vue").DefineComponent<{
style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
currentTabId: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string) | (() => string | null) | ((new (...args: any[]) => string) | (() => string | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultCurrentTabId: StringConstructor;
loop: BooleanConstructor;
dir: import("element-plus/es/utils").EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
orientation: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined) | ((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onBlur: FunctionConstructor;
onFocus: FunctionConstructor;
onMousedown: FunctionConstructor;
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("currentTabIdChange" | "entryFocus")[], "currentTabIdChange" | "entryFocus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
currentTabId: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string) | (() => string | null) | ((new (...args: any[]) => string) | (() => string | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultCurrentTabId: StringConstructor;
loop: BooleanConstructor;
dir: import("element-plus/es/utils").EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
orientation: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined) | ((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onBlur: FunctionConstructor;
onFocus: FunctionConstructor;
onMousedown: FunctionConstructor;
}>> & {
onCurrentTabIdChange?: ((...args: any[]) => any) | undefined;
onEntryFocus?: ((...args: any[]) => any) | undefined;
}, {
dir: string;
loop: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,217 @@
import type { ExtractPropTypes, StyleValue, __ExtractPublicPropTypes } from 'vue';
export declare const rovingFocusGroupProps: {
style: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
currentTabId: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string) | (() => string | null) | ((new (...args: any[]) => string) | (() => string | null))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultCurrentTabId: StringConstructor;
loop: BooleanConstructor;
dir: import("element-plus/es/utils").EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
orientation: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined) | ((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
onBlur: FunctionConstructor;
onFocus: FunctionConstructor;
onMousedown: FunctionConstructor;
};
export type ElRovingFocusGroupProps = ExtractPropTypes<typeof rovingFocusGroupProps>;
export type ElRovingFocusGroupPropsPublic = __ExtractPublicPropTypes<typeof rovingFocusGroupProps>;
declare const ElCollection: {
name: string;
setup(): void;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
template?: string | object;
render?: Function;
components?: Record<string, import("vue").Component>;
directives?: Record<string, import("vue").Directive>;
inheritAttrs?: boolean;
emits?: (import("vue").EmitsOptions & ThisType<void>) | undefined;
expose?: string[];
serverPrefetch?(): Promise<any>;
compilerOptions?: import("vue").RuntimeCompilerOptions;
call?: (this: unknown, ...args: unknown[]) => never;
__defaults?: {} | undefined;
compatConfig?: Partial<Record<import("vue").DeprecationTypes, boolean | "suppress-warning">> & {
MODE?: 2 | 3 | ((comp: import("vue").Component | null) => 2 | 3);
};
data?: ((this: import("vue").CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<ExtractPropTypes<{}>>, {}, false, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, {}>, vm: import("vue").CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<ExtractPropTypes<{}>>, {}, false, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, {}>) => {}) | undefined;
computed?: {} | undefined;
methods?: {} | undefined;
watch?: {
[x: string]: (string | import("vue").WatchCallback<any, any> | ({
handler: import("vue").WatchCallback | string;
} & import("vue").WatchOptions<boolean>)) | (string | import("vue").WatchCallback<any, any> | ({
handler: import("vue").WatchCallback | string;
} & import("vue").WatchOptions<boolean>))[];
};
provide?: import("vue").ComponentProvideOptions;
inject?: string[] | {
[x: string]: string | symbol | {
from?: string | symbol;
default?: unknown;
};
[x: symbol]: string | symbol | {
from?: string | symbol;
default?: unknown;
};
};
filters?: Record<string, Function>;
mixins?: import("vue").ComponentOptionsMixin[] | undefined;
extends?: import("vue").ComponentOptionsMixin | undefined;
beforeCreate?(): void;
created?(): void;
beforeMount?(): void;
mounted?(): void;
beforeUpdate?(): void;
updated?(): void;
activated?(): void;
deactivated?(): void;
beforeDestroy?(): void;
beforeUnmount?(): void;
destroyed?(): void;
unmounted?(): void;
renderTracked?: (e: import("vue").DebuggerEvent) => void;
renderTriggered?: (e: import("vue").DebuggerEvent) => void;
errorCaptured?: (err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void;
delimiters?: [string, string];
__differentiator?: undefined;
__isBuiltIn?: boolean;
__file?: string;
__name?: string;
beforeRouteEnter?: import("vue-router").NavigationGuardWithThis<undefined>;
beforeRouteUpdate?: import("vue-router").NavigationGuard;
beforeRouteLeave?: import("vue-router").NavigationGuard;
key?: string | number | symbol;
ref?: import("vue").VNodeRef;
ref_for?: boolean;
ref_key?: string;
onVnodeBeforeMount?: ((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[];
onVnodeMounted?: ((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[];
onVnodeBeforeUpdate?: ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[];
onVnodeUpdated?: ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[];
onVnodeBeforeUnmount?: ((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[];
onVnodeUnmounted?: ((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[];
class?: unknown;
style?: unknown;
}, ElCollectionItem: {
name: string;
setup(_: unknown, { attrs }: import("vue").SetupContext): void;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
template?: string | object;
render?: Function;
components?: Record<string, import("vue").Component>;
directives?: Record<string, import("vue").Directive>;
inheritAttrs?: boolean;
emits?: (import("vue").EmitsOptions & ThisType<void>) | undefined;
expose?: string[];
serverPrefetch?(): Promise<any>;
compilerOptions?: import("vue").RuntimeCompilerOptions;
call?: (this: unknown, ...args: unknown[]) => never;
__defaults?: {} | undefined;
compatConfig?: Partial<Record<import("vue").DeprecationTypes, boolean | "suppress-warning">> & {
MODE?: 2 | 3 | ((comp: import("vue").Component | null) => 2 | 3);
};
data?: ((this: import("vue").CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<ExtractPropTypes<{}>>, {}, false, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, {}>, vm: import("vue").CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, Readonly<ExtractPropTypes<{}>>, {}, false, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<ExtractPropTypes<{}>>, {}, {}, {}, import("vue").MethodOptions, {}>) => {}) | undefined;
computed?: {} | undefined;
methods?: {} | undefined;
watch?: {
[x: string]: (string | import("vue").WatchCallback<any, any> | ({
handler: import("vue").WatchCallback | string;
} & import("vue").WatchOptions<boolean>)) | (string | import("vue").WatchCallback<any, any> | ({
handler: import("vue").WatchCallback | string;
} & import("vue").WatchOptions<boolean>))[];
};
provide?: import("vue").ComponentProvideOptions;
inject?: string[] | {
[x: string]: string | symbol | {
from?: string | symbol;
default?: unknown;
};
[x: symbol]: string | symbol | {
from?: string | symbol;
default?: unknown;
};
};
filters?: Record<string, Function>;
mixins?: import("vue").ComponentOptionsMixin[] | undefined;
extends?: import("vue").ComponentOptionsMixin | undefined;
beforeCreate?(): void;
created?(): void;
beforeMount?(): void;
mounted?(): void;
beforeUpdate?(): void;
updated?(): void;
activated?(): void;
deactivated?(): void;
beforeDestroy?(): void;
beforeUnmount?(): void;
destroyed?(): void;
unmounted?(): void;
renderTracked?: (e: import("vue").DebuggerEvent) => void;
renderTriggered?: (e: import("vue").DebuggerEvent) => void;
errorCaptured?: (err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void;
delimiters?: [string, string];
__differentiator?: undefined;
__isBuiltIn?: boolean;
__file?: string;
__name?: string;
beforeRouteEnter?: import("vue-router").NavigationGuardWithThis<undefined>;
beforeRouteUpdate?: import("vue-router").NavigationGuard;
beforeRouteLeave?: import("vue-router").NavigationGuard;
key?: string | number | symbol;
ref?: import("vue").VNodeRef;
ref_for?: boolean;
ref_key?: string;
onVnodeBeforeMount?: ((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[];
onVnodeMounted?: ((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[];
onVnodeBeforeUpdate?: ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[];
onVnodeUpdated?: ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[];
onVnodeBeforeUnmount?: ((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[];
onVnodeUnmounted?: ((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[];
class?: unknown;
style?: unknown;
}, COLLECTION_INJECTION_KEY: import("vue").InjectionKey<import("element-plus/es/components/collection").ElCollectionInjectionContext>, COLLECTION_ITEM_INJECTION_KEY: import("vue").InjectionKey<import("element-plus/es/components/collection").ElCollectionItemInjectionContext>;
export { ElCollection, ElCollectionItem, COLLECTION_INJECTION_KEY as ROVING_FOCUS_COLLECTION_INJECTION_KEY, COLLECTION_ITEM_INJECTION_KEY as ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY, };

View File

@@ -0,0 +1,39 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var collection = require('../../collection/src/collection.js');
var runtime = require('../../../utils/vue/props/runtime.js');
const rovingFocusGroupProps = runtime.buildProps({
style: { type: runtime.definePropType([String, Array, Object]) },
currentTabId: {
type: runtime.definePropType(String)
},
defaultCurrentTabId: String,
loop: Boolean,
dir: {
type: String,
values: ["ltr", "rtl"],
default: "ltr"
},
orientation: {
type: runtime.definePropType(String)
},
onBlur: Function,
onFocus: Function,
onMousedown: Function
});
const {
ElCollection,
ElCollectionItem,
COLLECTION_INJECTION_KEY,
COLLECTION_ITEM_INJECTION_KEY
} = collection.createCollectionWithScope("RovingFocusGroup");
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","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 HTMLAttributes,\n StyleValue,\n __ExtractPublicPropTypes,\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"],"names":["buildProps","definePropType","createCollectionWithScope"],"mappings":";;;;;;;AAEY,MAAC,qBAAqB,GAAGA,kBAAU,CAAC;AAChD,EAAE,KAAK,EAAE,EAAE,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE;AAC1D,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAEA,sBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,mBAAmB,EAAE,MAAM;AAC7B,EAAE,IAAI,EAAE,OAAO;AACf,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAEA,sBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,MAAM,EAAE,QAAQ;AAClB,EAAE,OAAO,EAAE,QAAQ;AACnB,EAAE,WAAW,EAAE,QAAQ;AACvB,CAAC,EAAE;AACE,MAAC;AACN,EAAE,YAAY;AACd,EAAE,gBAAgB;AAClB,EAAE,wBAAwB;AAC1B,EAAE,6BAA6B;AAC/B,CAAC,GAAGC,oCAAyB,CAAC,kBAAkB;;;;;;;;"}

View File

@@ -0,0 +1,2 @@
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
export default _default;

View File

@@ -0,0 +1,35 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var rovingFocusGroupImpl = require('./roving-focus-group-impl.js');
var rovingFocusGroup = require('./roving-focus-group.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
const _sfc_main = vue.defineComponent({
name: "ElRovingFocusGroup",
components: {
ElFocusGroupCollection: rovingFocusGroup.ElCollection,
ElRovingFocusGroupImpl: rovingFocusGroupImpl["default"]
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_roving_focus_group_impl = vue.resolveComponent("el-roving-focus-group-impl");
const _component_el_focus_group_collection = vue.resolveComponent("el-focus-group-collection");
return vue.openBlock(), vue.createBlock(_component_el_focus_group_collection, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_roving_focus_group_impl, vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16)
]),
_: 3
});
}
var ElRovingFocusGroup = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "roving-focus-group.vue"]]);
exports["default"] = ElRovingFocusGroup;
//# sourceMappingURL=roving-focus-group2.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"roving-focus-group2.js","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"],"names":["defineComponent","ElFocusGroupCollection","ElRovingFocusGroupImpl","_createBlock","_withCtx","_createVNode","_normalizeProps","_guardReactiveProps","_renderSlot"],"mappings":";;;;;;;;;AAaA,MAAK,YAAaA,mBAAa,CAAA;AAAA,EAC7B,IAAM,EAAA,oBAAA;AAAA,EACN,UAAY,EAAA;AAAA,4BACVC,6BAAA;AAAA,4BACAC,+BAAA;AAAA,GACF;AACF,CAAC,CAAA,CAAA;;;;0BAlBCC,eAI4B,CAAA,oCAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,WAAA,CAH1B,MAE6B;AAAA,MAF7BC,eAAA,CAAA,qCAAA,EAAAC,kBAAA,CAAAC,sBAAA,CAAA,IAAA,CAAA,MAAA,CAAA,CAAA,EAAA;AAAA,QAE6B,OAAA,EAAAH,WAAA,CAAA,MAAA;AAAA,UAAAI,cAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAFO,CAAM;AAAA,SAAA,CAAA;AAAA,QAAA,CAAA,EAAA,CAAA;AAChC,OAAA,EAAA,EAAA,CAAR;AAAQ,KAAA,CAAA;;;;;;;;"}

View File

@@ -0,0 +1,112 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var rovingFocusGroup = require('./roving-focus-group.js');
var tokens = require('./tokens.js');
var utils = require('./utils.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-id/index.js');
var event = require('../../../utils/dom/event.js');
var aria = require('../../../constants/aria.js');
const _sfc_main = vue.defineComponent({
components: {
ElRovingFocusCollectionItem: rovingFocusGroup.ElCollectionItem
},
props: {
focusable: {
type: Boolean,
default: true
},
active: Boolean
},
emits: ["mousedown", "focus", "keydown"],
setup(props, { emit }) {
const { currentTabbedId, loop, onItemFocus, onItemShiftTab } = vue.inject(tokens.ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
const { getItems } = vue.inject(rovingFocusGroup.ROVING_FOCUS_COLLECTION_INJECTION_KEY, void 0);
const id = index.useId();
const rovingFocusGroupItemRef = vue.ref();
const handleMousedown = event.composeEventHandlers((e) => {
emit("mousedown", e);
}, (e) => {
if (!props.focusable) {
e.preventDefault();
} else {
onItemFocus(vue.unref(id));
}
});
const handleFocus = event.composeEventHandlers((e) => {
emit("focus", e);
}, () => {
onItemFocus(vue.unref(id));
});
const handleKeydown = event.composeEventHandlers((e) => {
emit("keydown", e);
}, (e) => {
const { code, shiftKey, target, currentTarget } = e;
if (code === aria.EVENT_CODE.tab && shiftKey) {
onItemShiftTab();
return;
}
if (target !== currentTarget)
return;
const focusIntent = utils.getFocusIntent(e);
if (focusIntent) {
e.preventDefault();
const items = getItems().filter((item) => item.focusable);
let elements = items.map((item) => item.ref);
switch (focusIntent) {
case "last": {
elements.reverse();
break;
}
case "prev":
case "next": {
if (focusIntent === "prev") {
elements.reverse();
}
const currentIdx = elements.indexOf(currentTarget);
elements = loop.value ? utils.reorderArray(elements, currentIdx + 1) : elements.slice(currentIdx + 1);
break;
}
}
vue.nextTick(() => {
utils.focusFirst(elements);
});
}
});
const isCurrentTab = vue.computed(() => currentTabbedId.value === vue.unref(id));
vue.provide(tokens.ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {
rovingFocusGroupItemRef,
tabIndex: vue.computed(() => vue.unref(isCurrentTab) ? 0 : -1),
handleMousedown,
handleFocus,
handleKeydown
});
return {
id,
handleKeydown,
handleFocus,
handleMousedown
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_roving_focus_collection_item = vue.resolveComponent("el-roving-focus-collection-item");
return vue.openBlock(), vue.createBlock(_component_el_roving_focus_collection_item, {
id: _ctx.id,
focusable: _ctx.focusable,
active: _ctx.active
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["id", "focusable", "active"]);
}
var ElRovingFocusItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "roving-focus-item.vue"]]);
exports["default"] = ElRovingFocusItem;
//# sourceMappingURL=roving-focus-item.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,26 @@
declare const _default: import("vue").DefineComponent<{
focusable: {
type: BooleanConstructor;
default: boolean;
};
active: BooleanConstructor;
}, {
id: import("vue").Ref<string>;
handleKeydown: (event: Event) => void;
handleFocus: (event: Event) => void;
handleMousedown: (event: Event) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "keydown" | "mousedown")[], "focus" | "keydown" | "mousedown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
focusable: {
type: BooleanConstructor;
default: boolean;
};
active: BooleanConstructor;
}>> & {
onFocus?: ((...args: any[]) => any) | undefined;
onKeydown?: ((...args: any[]) => any) | undefined;
onMousedown?: ((...args: any[]) => any) | undefined;
}, {
active: boolean;
focusable: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,27 @@
import type { InjectionKey, Ref, StyleValue } from 'vue';
import type { ElRovingFocusGroupProps } from './roving-focus-group';
type EventHandler<T = Event> = (e: T) => void;
export 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;
};
export type RovingFocusGroupItemInjectionContext = {
rovingFocusGroupItemRef: Ref<HTMLElement | undefined>;
tabIndex: Ref<number>;
handleMousedown: EventHandler;
handleFocus: EventHandler;
handleKeydown: EventHandler;
};
export declare const ROVING_FOCUS_GROUP_INJECTION_KEY: InjectionKey<RovingGroupInjectionContext>;
export declare const ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY: InjectionKey<RovingFocusGroupItemInjectionContext>;
export {};

View File

@@ -0,0 +1,10 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const ROVING_FOCUS_GROUP_INJECTION_KEY = Symbol("elRovingFocusGroup");
const ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY = Symbol("elRovingFocusGroupItem");
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","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}\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"],"names":[],"mappings":";;;;AAAY,MAAC,gCAAgC,GAAG,MAAM,CAAC,oBAAoB,EAAE;AACjE,MAAC,qCAAqC,GAAG,MAAM,CAAC,wBAAwB;;;;;"}

View File

@@ -0,0 +1,8 @@
import type { HTMLAttributes } from 'vue';
type Orientation = HTMLAttributes['aria-orientation'];
type Direction = 'ltr' | 'rtl';
type FocusIntent = 'first' | 'last' | 'prev' | 'next';
export declare const getFocusIntent: (event: KeyboardEvent, orientation?: Orientation, dir?: Direction) => FocusIntent | undefined;
export declare const reorderArray: <T>(array: T[], atIdx: number) => T[];
export declare const focusFirst: (elements: HTMLElement[]) => void;
export {};

View File

@@ -0,0 +1,54 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var aria = require('../../../constants/aria.js');
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 aria.EVENT_CODE.right:
return aria.EVENT_CODE.left;
case aria.EVENT_CODE.left:
return aria.EVENT_CODE.right;
default:
return key;
}
};
const getFocusIntent = (event, orientation, dir) => {
const key = getDirectionAwareKey(event.code, dir);
if (orientation === "vertical" && [aria.EVENT_CODE.left, aria.EVENT_CODE.right].includes(key))
return void 0;
if (orientation === "horizontal" && [aria.EVENT_CODE.up, 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;
}
};
exports.focusFirst = focusFirst;
exports.getFocusIntent = getFocusIntent;
exports.reorderArray = reorderArray;
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"utils.js","sources":["../../../../../../packages/components/roving-focus-group/src/utils.ts"],"sourcesContent":["import { EVENT_CODE } from '@element-plus/constants'\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 key = getDirectionAwareKey(event.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"],"names":["EVENT_CODE"],"mappings":";;;;;;AACA,MAAM,uBAAuB,GAAG;AAChC,EAAE,SAAS,EAAE,MAAM;AACnB,EAAE,OAAO,EAAE,MAAM;AACjB,EAAE,UAAU,EAAE,MAAM;AACpB,EAAE,SAAS,EAAE,MAAM;AACnB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,IAAI,EAAE,OAAO;AACf,EAAE,QAAQ,EAAE,MAAM;AAClB,EAAE,GAAG,EAAE,MAAM;AACb,CAAC,CAAC;AACF,MAAM,oBAAoB,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK;AAC3C,EAAE,IAAI,GAAG,KAAK,KAAK;AACnB,IAAI,OAAO,GAAG,CAAC;AACf,EAAE,QAAQ,GAAG;AACb,IAAI,KAAKA,eAAU,CAAC,KAAK;AACzB,MAAM,OAAOA,eAAU,CAAC,IAAI,CAAC;AAC7B,IAAI,KAAKA,eAAU,CAAC,IAAI;AACxB,MAAM,OAAOA,eAAU,CAAC,KAAK,CAAC;AAC9B,IAAI;AACJ,MAAM,OAAO,GAAG,CAAC;AACjB,GAAG;AACH,CAAC,CAAC;AACU,MAAC,cAAc,GAAG,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK;AAC3D,EAAE,MAAM,GAAG,GAAG,oBAAoB,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;AACpD,EAAE,IAAI,WAAW,KAAK,UAAU,IAAI,CAACA,eAAU,CAAC,IAAI,EAAEA,eAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;AACrF,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,EAAE,IAAI,WAAW,KAAK,YAAY,IAAI,CAACA,eAAU,CAAC,EAAE,EAAEA,eAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;AACpF,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,EAAE,OAAO,uBAAuB,CAAC,GAAG,CAAC,CAAC;AACtC,EAAE;AACU,MAAC,YAAY,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK;AAC9C,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,KAAK,CAAC,CAAC,GAAG,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;AACpE,EAAE;AACU,MAAC,UAAU,GAAG,CAAC,QAAQ,KAAK;AACxC,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC;AACjD,EAAE,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE;AAClC,IAAI,IAAI,OAAO,KAAK,UAAU;AAC9B,MAAM,OAAO;AACb,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;AACpB,IAAI,IAAI,UAAU,KAAK,QAAQ,CAAC,aAAa;AAC7C,MAAM,OAAO;AACb,GAAG;AACH;;;;;;"}