RovingFocusItem-DpXPxr2p.mjs
3.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import { u as useId } from './PopperArrow-BinIEZTx.mjs';
import { Q as useCollection, P as Primitive } from './server.mjs';
import { i as injectRovingFocusGroupContext, g as getFocusIntent, w as wrapArray, f as focusFirst } from './Kbd-CaBf62mJ.mjs';
import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createVNode, renderSlot, nextTick } from 'vue';
var RovingFocusItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "RovingFocusItem",
props: {
tabStopId: {
type: String,
required: false
},
focusable: {
type: Boolean,
required: false,
default: true
},
active: {
type: Boolean,
required: false
},
allowShiftKey: {
type: Boolean,
required: false
},
asChild: {
type: Boolean,
required: false
},
as: {
type: null,
required: false,
default: "span"
}
},
setup(__props) {
const props = __props;
const context = injectRovingFocusGroupContext();
const randomId = useId();
const id = computed(() => props.tabStopId || randomId);
const isCurrentTabStop = computed(() => context.currentTabStopId.value === id.value);
const { getItems, CollectionItem } = useCollection();
function handleKeydown(event) {
if (event.key === "Tab" && event.shiftKey) {
context.onItemShiftTab();
return;
}
if (event.target !== event.currentTarget) return;
const focusIntent = getFocusIntent(event, context.orientation.value, context.dir.value);
if (focusIntent !== void 0) {
if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey)) return;
event.preventDefault();
let candidateNodes = [...getItems().map((i) => i.ref).filter((i) => i.dataset.disabled !== "")];
if (focusIntent === "last") candidateNodes.reverse();
else if (focusIntent === "prev" || focusIntent === "next") {
if (focusIntent === "prev") candidateNodes.reverse();
const currentIndex = candidateNodes.indexOf(event.currentTarget);
candidateNodes = context.loop.value ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
}
nextTick(() => focusFirst(candidateNodes));
}
}
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(CollectionItem), null, {
default: withCtx(() => [createVNode(unref(Primitive), {
tabindex: isCurrentTabStop.value ? 0 : -1,
"data-orientation": unref(context).orientation.value,
"data-active": _ctx.active ? "" : void 0,
"data-disabled": !_ctx.focusable ? "" : void 0,
as: _ctx.as,
"as-child": _ctx.asChild,
onMousedown: _cache[0] || (_cache[0] = (event) => {
if (!_ctx.focusable) event.preventDefault();
else unref(context).onItemFocus(id.value);
}),
onFocus: _cache[1] || (_cache[1] = ($event) => unref(context).onItemFocus(id.value)),
onKeydown: handleKeydown
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 8, [
"tabindex",
"data-orientation",
"data-active",
"data-disabled",
"as",
"as-child"
])]),
_: 3
});
};
}
});
var RovingFocusItem_default = RovingFocusItem_vue_vue_type_script_setup_true_lang_default;
export { RovingFocusItem_default as R };
//# sourceMappingURL=RovingFocusItem-DpXPxr2p.mjs.map