@zag-js/tabs 0.2.10 → 0.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-IVTIBLCN.mjs → chunk-5JW3YJ3I.mjs} +18 -42
- package/dist/chunk-5ZMNIWHF.mjs +53 -0
- package/dist/{chunk-3DBUWLYX.mjs → chunk-JG2VX4ST.mjs} +6 -66
- package/dist/index.js +46 -188
- package/dist/index.mjs +3 -3
- package/dist/tabs.connect.d.ts +15 -0
- package/dist/tabs.connect.js +32 -110
- package/dist/tabs.connect.mjs +2 -2
- package/dist/tabs.dom.d.ts +9 -6
- package/dist/tabs.dom.js +9 -65
- package/dist/tabs.dom.mjs +1 -1
- package/dist/tabs.machine.js +22 -142
- package/dist/tabs.machine.mjs +2 -2
- package/dist/tabs.types.d.ts +0 -4
- package/package.json +7 -5
- package/dist/chunk-4CROPD6E.mjs +0 -121
package/dist/chunk-4CROPD6E.mjs
DELETED
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
// ../../utilities/core/src/array.ts
|
|
2
|
-
var first = (v) => v[0];
|
|
3
|
-
var last = (v) => v[v.length - 1];
|
|
4
|
-
|
|
5
|
-
// ../../utilities/dom/src/query.ts
|
|
6
|
-
function isDocument(el) {
|
|
7
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
8
|
-
}
|
|
9
|
-
function isWindow(value) {
|
|
10
|
-
return value?.toString() === "[object Window]";
|
|
11
|
-
}
|
|
12
|
-
function isFrame(element) {
|
|
13
|
-
return element.localName === "iframe";
|
|
14
|
-
}
|
|
15
|
-
function getDocument(el) {
|
|
16
|
-
if (isWindow(el))
|
|
17
|
-
return el.document;
|
|
18
|
-
if (isDocument(el))
|
|
19
|
-
return el;
|
|
20
|
-
return el?.ownerDocument ?? document;
|
|
21
|
-
}
|
|
22
|
-
function defineDomHelpers(helpers) {
|
|
23
|
-
const dom2 = {
|
|
24
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
25
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
26
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
27
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
28
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
29
|
-
};
|
|
30
|
-
return {
|
|
31
|
-
...dom2,
|
|
32
|
-
...helpers
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
function isHTMLElement(v) {
|
|
36
|
-
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
37
|
-
}
|
|
38
|
-
function isVisible(el) {
|
|
39
|
-
if (!isHTMLElement(el))
|
|
40
|
-
return false;
|
|
41
|
-
return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
// ../../utilities/dom/src/nodelist.ts
|
|
45
|
-
function queryAll(root, selector) {
|
|
46
|
-
return Array.from(root?.querySelectorAll(selector) ?? []);
|
|
47
|
-
}
|
|
48
|
-
function itemById(v, id) {
|
|
49
|
-
return v.find((node) => node.id === id);
|
|
50
|
-
}
|
|
51
|
-
function indexOfId(v, id) {
|
|
52
|
-
const item = itemById(v, id);
|
|
53
|
-
return item ? v.indexOf(item) : -1;
|
|
54
|
-
}
|
|
55
|
-
function nextById(v, id, loop = true) {
|
|
56
|
-
let idx = indexOfId(v, id);
|
|
57
|
-
idx = loop ? (idx + 1) % v.length : Math.min(idx + 1, v.length - 1);
|
|
58
|
-
return v[idx];
|
|
59
|
-
}
|
|
60
|
-
function prevById(v, id, loop = true) {
|
|
61
|
-
let idx = indexOfId(v, id);
|
|
62
|
-
if (idx === -1)
|
|
63
|
-
return loop ? v[v.length - 1] : null;
|
|
64
|
-
idx = loop ? (idx - 1 + v.length) % v.length : Math.max(0, idx - 1);
|
|
65
|
-
return v[idx];
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
// src/tabs.dom.ts
|
|
69
|
-
var dom = defineDomHelpers({
|
|
70
|
-
getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
|
|
71
|
-
getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
|
|
72
|
-
getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
|
|
73
|
-
getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
|
|
74
|
-
getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
|
|
75
|
-
getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
|
|
76
|
-
getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
|
|
77
|
-
getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
|
|
78
|
-
getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
|
|
79
|
-
getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
|
|
80
|
-
getElements: (ctx) => {
|
|
81
|
-
const ownerId = CSS.escape(dom.getTablistId(ctx));
|
|
82
|
-
const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
|
|
83
|
-
return queryAll(dom.getTablistEl(ctx), selector);
|
|
84
|
-
},
|
|
85
|
-
getFirstEl: (ctx) => first(dom.getElements(ctx)),
|
|
86
|
-
getLastEl: (ctx) => last(dom.getElements(ctx)),
|
|
87
|
-
getNextEl: (ctx, id) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
|
|
88
|
-
getPrevEl: (ctx, id) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
|
|
89
|
-
getActiveContentEl: (ctx) => {
|
|
90
|
-
if (!ctx.value)
|
|
91
|
-
return;
|
|
92
|
-
const id = dom.getContentId(ctx, ctx.value);
|
|
93
|
-
return dom.getById(ctx, id);
|
|
94
|
-
},
|
|
95
|
-
getRectById: (ctx, id) => {
|
|
96
|
-
const empty = {
|
|
97
|
-
offsetLeft: 0,
|
|
98
|
-
offsetTop: 0,
|
|
99
|
-
offsetWidth: 0,
|
|
100
|
-
offsetHeight: 0
|
|
101
|
-
};
|
|
102
|
-
const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
|
|
103
|
-
if (ctx.isVertical) {
|
|
104
|
-
return {
|
|
105
|
-
top: `${tab.offsetTop}px`,
|
|
106
|
-
height: `${tab.offsetHeight}px`
|
|
107
|
-
};
|
|
108
|
-
}
|
|
109
|
-
return {
|
|
110
|
-
left: `${tab.offsetLeft}px`,
|
|
111
|
-
width: `${tab.offsetWidth}px`
|
|
112
|
-
};
|
|
113
|
-
}
|
|
114
|
-
});
|
|
115
|
-
|
|
116
|
-
export {
|
|
117
|
-
isFrame,
|
|
118
|
-
isHTMLElement,
|
|
119
|
-
isVisible,
|
|
120
|
-
dom
|
|
121
|
-
};
|