@zag-js/splitter 0.1.7 → 0.1.10
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/index.d.ts +0 -1
- package/dist/index.js +158 -234
- package/dist/index.mjs +158 -235
- package/dist/splitter.connect.d.ts +3 -4
- package/dist/splitter.dom.d.ts +17 -4
- package/dist/splitter.machine.d.ts +2 -3
- package/dist/splitter.types.d.ts +4 -5
- package/package.json +7 -6
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -7
- package/dist/index.mjs.map +0 -7
- package/dist/splitter.connect.d.ts.map +0 -1
- package/dist/splitter.dom.d.ts.map +0 -1
- package/dist/splitter.machine.d.ts.map +0 -1
- package/dist/splitter.types.d.ts.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -16,122 +16,154 @@ var __spreadValues = (a, b) => {
|
|
|
16
16
|
};
|
|
17
17
|
|
|
18
18
|
// ../../utilities/dom/dist/index.mjs
|
|
19
|
+
var __defProp2 = Object.defineProperty;
|
|
20
|
+
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
21
|
+
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
22
|
+
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
19
23
|
var __pow = Math.pow;
|
|
24
|
+
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
25
|
+
var __spreadValues2 = (a, b) => {
|
|
26
|
+
for (var prop in b || (b = {}))
|
|
27
|
+
if (__hasOwnProp2.call(b, prop))
|
|
28
|
+
__defNormalProp2(a, prop, b[prop]);
|
|
29
|
+
if (__getOwnPropSymbols2)
|
|
30
|
+
for (var prop of __getOwnPropSymbols2(b)) {
|
|
31
|
+
if (__propIsEnum2.call(b, prop))
|
|
32
|
+
__defNormalProp2(a, prop, b[prop]);
|
|
33
|
+
}
|
|
34
|
+
return a;
|
|
35
|
+
};
|
|
20
36
|
var dataAttr = (guard) => {
|
|
21
37
|
return guard ? "" : void 0;
|
|
22
38
|
};
|
|
23
|
-
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
fn2();
|
|
33
|
-
});
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
function raf(fn) {
|
|
37
|
-
const id = globalThis.requestAnimationFrame(fn);
|
|
38
|
-
return function cleanup() {
|
|
39
|
-
globalThis.cancelAnimationFrame(id);
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
var isDom = () => typeof window !== "undefined";
|
|
39
|
+
var runIfFn = (v, ...a) => {
|
|
40
|
+
const res = typeof v === "function" ? v(...a) : v;
|
|
41
|
+
return res != null ? res : void 0;
|
|
42
|
+
};
|
|
43
|
+
var callAll = (...fns) => (...a) => {
|
|
44
|
+
fns.forEach(function(fn) {
|
|
45
|
+
fn == null ? void 0 : fn(...a);
|
|
46
|
+
});
|
|
47
|
+
};
|
|
43
48
|
var isArray = (v) => Array.isArray(v);
|
|
44
49
|
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
45
50
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
51
|
+
var isDom = () => typeof window !== "undefined";
|
|
46
52
|
function getPlatform() {
|
|
47
53
|
var _a;
|
|
48
54
|
const agent = navigator.userAgentData;
|
|
49
55
|
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
50
56
|
}
|
|
51
57
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
52
|
-
var isTouchDevice = isDom() && !!navigator.maxTouchPoints;
|
|
58
|
+
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
53
59
|
var isMac = () => pt(/^Mac/) && !isTouchDevice;
|
|
54
60
|
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
55
61
|
var isIos = () => isApple() && !isMac();
|
|
62
|
+
function isDocument(el) {
|
|
63
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
64
|
+
}
|
|
65
|
+
function isWindow(value) {
|
|
66
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
67
|
+
}
|
|
68
|
+
function getDocument(el) {
|
|
69
|
+
var _a;
|
|
70
|
+
if (isWindow(el))
|
|
71
|
+
return el.document;
|
|
72
|
+
if (isDocument(el))
|
|
73
|
+
return el;
|
|
74
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
75
|
+
}
|
|
76
|
+
function defineDomHelpers(helpers) {
|
|
77
|
+
const dom2 = {
|
|
78
|
+
getRootNode: (ctx) => {
|
|
79
|
+
var _a, _b;
|
|
80
|
+
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
81
|
+
},
|
|
82
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
83
|
+
getWin: (ctx) => {
|
|
84
|
+
var _a;
|
|
85
|
+
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
86
|
+
},
|
|
87
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
88
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
89
|
+
};
|
|
90
|
+
return __spreadValues2(__spreadValues2({}, dom2), helpers);
|
|
91
|
+
}
|
|
56
92
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
57
93
|
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
58
94
|
var supportsMouseEvent = () => isDom() && window.onmousedown === null;
|
|
59
95
|
var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
|
|
60
96
|
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
61
97
|
var isLeftClick = (v) => v.button === 0;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
98
|
+
function getElementOffset(element) {
|
|
99
|
+
let left = 0;
|
|
100
|
+
let top = 0;
|
|
101
|
+
let el = element;
|
|
102
|
+
if (el.parentNode) {
|
|
103
|
+
do {
|
|
104
|
+
left += el.offsetLeft;
|
|
105
|
+
top += el.offsetTop;
|
|
106
|
+
} while ((el = el.offsetParent) && el.nodeType < 9);
|
|
107
|
+
el = element;
|
|
108
|
+
do {
|
|
109
|
+
left -= el.scrollLeft;
|
|
110
|
+
top -= el.scrollTop;
|
|
111
|
+
} while ((el = el.parentNode) && !/body/i.test(el.nodeName));
|
|
112
|
+
}
|
|
113
|
+
return {
|
|
114
|
+
top,
|
|
115
|
+
right: innerWidth - left - element.offsetWidth,
|
|
116
|
+
bottom: innerHeight - top - element.offsetHeight,
|
|
117
|
+
left
|
|
118
|
+
};
|
|
73
119
|
}
|
|
74
|
-
function
|
|
75
|
-
;
|
|
76
|
-
|
|
77
|
-
|
|
120
|
+
function getPointRelativeToNode(point, element) {
|
|
121
|
+
const offset = getElementOffset(element);
|
|
122
|
+
const x = point.x - offset.left;
|
|
123
|
+
const y = point.y - offset.top;
|
|
124
|
+
return { x, y };
|
|
78
125
|
}
|
|
79
|
-
|
|
126
|
+
var rtlKeyMap = {
|
|
127
|
+
ArrowLeft: "ArrowRight",
|
|
128
|
+
ArrowRight: "ArrowLeft",
|
|
129
|
+
Home: "End",
|
|
130
|
+
End: "Home"
|
|
131
|
+
};
|
|
132
|
+
var sameKeyMap = {
|
|
133
|
+
Up: "ArrowUp",
|
|
134
|
+
Down: "ArrowDown",
|
|
135
|
+
Esc: "Escape",
|
|
136
|
+
" ": "Space",
|
|
137
|
+
",": "Comma",
|
|
138
|
+
Left: "ArrowLeft",
|
|
139
|
+
Right: "ArrowRight"
|
|
140
|
+
};
|
|
141
|
+
function getEventKey(event, options = {}) {
|
|
80
142
|
var _a;
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
if (!listenerElements.has(node)) {
|
|
88
|
-
const group2 = /* @__PURE__ */ new Map([[hash, /* @__PURE__ */ new Set([handler])]]);
|
|
89
|
-
listenerElements.set(node, group2);
|
|
90
|
-
} else if (group == null ? void 0 : group.has(hash)) {
|
|
91
|
-
(_a = group == null ? void 0 : group.get(hash)) == null ? void 0 : _a.add(handler);
|
|
92
|
-
} else {
|
|
93
|
-
group == null ? void 0 : group.set(hash, /* @__PURE__ */ new Set([handler]));
|
|
143
|
+
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
144
|
+
let { key } = event;
|
|
145
|
+
key = (_a = sameKeyMap[key]) != null ? _a : key;
|
|
146
|
+
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
147
|
+
if (isRtl && key in rtlKeyMap) {
|
|
148
|
+
key = rtlKeyMap[key];
|
|
94
149
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
107
|
-
if (!((_a2 = listenerCache == null ? void 0 : listenerCache.get(node2)) == null ? void 0 : _a2.has(hash))) {
|
|
108
|
-
(_b = listenerCache.get(node2)) == null ? void 0 : _b.set(hash, listener);
|
|
109
|
-
node2.addEventListener(type, listener, options);
|
|
110
|
-
}
|
|
150
|
+
return key;
|
|
151
|
+
}
|
|
152
|
+
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
153
|
+
var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
|
|
154
|
+
function getEventStep(event) {
|
|
155
|
+
if (event.ctrlKey || event.metaKey) {
|
|
156
|
+
return 0.1;
|
|
157
|
+
} else {
|
|
158
|
+
const isPageKey = PAGE_KEYS.has(event.key);
|
|
159
|
+
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
|
|
160
|
+
return isSkipKey ? 10 : 1;
|
|
111
161
|
}
|
|
112
|
-
attach(node);
|
|
113
|
-
return function remove() {
|
|
114
|
-
var _a2, _b, _c, _d;
|
|
115
|
-
if (!listenerElements.has(node))
|
|
116
|
-
return;
|
|
117
|
-
const group2 = listenerElements.get(node);
|
|
118
|
-
(_a2 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a2.delete(handler);
|
|
119
|
-
if (((_b = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _b.size) === 0) {
|
|
120
|
-
const listener = (_c = listenerCache.get(node)) == null ? void 0 : _c.get(hash);
|
|
121
|
-
node.removeEventListener(type, listener, options);
|
|
122
|
-
group2 == null ? void 0 : group2.delete(hash);
|
|
123
|
-
(_d = listenerCache.get(node)) == null ? void 0 : _d.delete(hash);
|
|
124
|
-
if ((group2 == null ? void 0 : group2.size) === 0) {
|
|
125
|
-
listenerElements.delete(node);
|
|
126
|
-
listenerCache.delete(node);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
};
|
|
130
162
|
}
|
|
131
163
|
var isRef = (v) => hasProp(v, "current");
|
|
132
|
-
var
|
|
164
|
+
var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
|
|
133
165
|
function extractInfo(event, type = "page") {
|
|
134
|
-
const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] ||
|
|
166
|
+
const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : event;
|
|
135
167
|
return {
|
|
136
168
|
point: {
|
|
137
169
|
x: point[`${type}X`],
|
|
@@ -139,9 +171,12 @@ function extractInfo(event, type = "page") {
|
|
|
139
171
|
}
|
|
140
172
|
};
|
|
141
173
|
}
|
|
142
|
-
function addDomEvent(target,
|
|
174
|
+
function addDomEvent(target, eventName, handler, options) {
|
|
143
175
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
144
|
-
|
|
176
|
+
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
177
|
+
return () => {
|
|
178
|
+
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
179
|
+
};
|
|
145
180
|
}
|
|
146
181
|
function addPointerEvent(target, event, listener, options) {
|
|
147
182
|
var _a;
|
|
@@ -189,66 +224,24 @@ function getEventName(evt) {
|
|
|
189
224
|
return mouseEventNames[evt];
|
|
190
225
|
return evt;
|
|
191
226
|
}
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
};
|
|
198
|
-
var sameKeyMap = {
|
|
199
|
-
Up: "ArrowUp",
|
|
200
|
-
Down: "ArrowDown",
|
|
201
|
-
Esc: "Escape",
|
|
202
|
-
" ": "Space",
|
|
203
|
-
",": "Comma",
|
|
204
|
-
Left: "ArrowLeft",
|
|
205
|
-
Right: "ArrowRight"
|
|
206
|
-
};
|
|
207
|
-
function getEventKey(event, options = {}) {
|
|
208
|
-
var _a;
|
|
209
|
-
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
210
|
-
let { key } = event;
|
|
211
|
-
key = (_a = sameKeyMap[key]) != null ? _a : key;
|
|
212
|
-
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
213
|
-
if (isRtl && key in rtlKeyMap) {
|
|
214
|
-
key = rtlKeyMap[key];
|
|
215
|
-
}
|
|
216
|
-
return key;
|
|
217
|
-
}
|
|
218
|
-
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
219
|
-
var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
|
|
220
|
-
function getEventStep(event) {
|
|
221
|
-
if (event.ctrlKey || event.metaKey) {
|
|
222
|
-
return 0.1;
|
|
223
|
-
} else {
|
|
224
|
-
const isPageKey = PAGE_KEYS.has(event.key);
|
|
225
|
-
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
|
|
226
|
-
return isSkipKey ? 10 : 1;
|
|
227
|
+
function nextTick(fn) {
|
|
228
|
+
const set = /* @__PURE__ */ new Set();
|
|
229
|
+
function raf2(fn2) {
|
|
230
|
+
const id = globalThis.requestAnimationFrame(fn2);
|
|
231
|
+
set.add(() => globalThis.cancelAnimationFrame(id));
|
|
227
232
|
}
|
|
233
|
+
raf2(() => raf2(fn));
|
|
234
|
+
return function cleanup() {
|
|
235
|
+
set.forEach(function(fn2) {
|
|
236
|
+
fn2();
|
|
237
|
+
});
|
|
238
|
+
};
|
|
228
239
|
}
|
|
229
|
-
function
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
return item ? v.indexOf(item) : -1;
|
|
235
|
-
}
|
|
236
|
-
var getValueText = (item) => {
|
|
237
|
-
var _a, _b;
|
|
238
|
-
return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
|
|
239
|
-
};
|
|
240
|
-
var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
|
|
241
|
-
var wrap = (v, idx) => {
|
|
242
|
-
return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
|
|
243
|
-
};
|
|
244
|
-
function findByText(v, text, currentId) {
|
|
245
|
-
const index = currentId ? indexOfId(v, currentId) : -1;
|
|
246
|
-
let items = currentId ? wrap(v, index) : v;
|
|
247
|
-
const isSingleKey = text.length === 1;
|
|
248
|
-
if (isSingleKey) {
|
|
249
|
-
items = items.filter((item) => item.id !== currentId);
|
|
250
|
-
}
|
|
251
|
-
return items.find((item) => match(getValueText(item), text));
|
|
240
|
+
function raf(fn) {
|
|
241
|
+
const id = globalThis.requestAnimationFrame(fn);
|
|
242
|
+
return function cleanup() {
|
|
243
|
+
globalThis.cancelAnimationFrame(id);
|
|
244
|
+
};
|
|
252
245
|
}
|
|
253
246
|
var state = "default";
|
|
254
247
|
var savedUserSelect = "";
|
|
@@ -311,83 +304,37 @@ function trackPointerMove(opts) {
|
|
|
311
304
|
}
|
|
312
305
|
onPointerMove(info, event);
|
|
313
306
|
};
|
|
314
|
-
return
|
|
307
|
+
return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
|
|
315
308
|
}
|
|
316
|
-
function findByTypeahead(_items, options) {
|
|
317
|
-
const { state: state2, activeId, key, timeout = 350 } = options;
|
|
318
|
-
const search = state2.keysSoFar + key;
|
|
319
|
-
const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
|
|
320
|
-
const query2 = isRepeated ? search[0] : search;
|
|
321
|
-
let items = _items.slice();
|
|
322
|
-
const next = findByText(items, query2, activeId);
|
|
323
|
-
function cleanup() {
|
|
324
|
-
clearTimeout(state2.timer);
|
|
325
|
-
state2.timer = -1;
|
|
326
|
-
}
|
|
327
|
-
function update(value) {
|
|
328
|
-
state2.keysSoFar = value;
|
|
329
|
-
cleanup();
|
|
330
|
-
if (value !== "") {
|
|
331
|
-
state2.timer = +setTimeout(() => {
|
|
332
|
-
update("");
|
|
333
|
-
cleanup();
|
|
334
|
-
}, timeout);
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
update(search);
|
|
338
|
-
return next;
|
|
339
|
-
}
|
|
340
|
-
findByTypeahead.defaultOptions = {
|
|
341
|
-
keysSoFar: "",
|
|
342
|
-
timer: -1
|
|
343
|
-
};
|
|
344
|
-
|
|
345
|
-
// ../../types/dist/index.mjs
|
|
346
|
-
function createNormalizer(fn) {
|
|
347
|
-
return new Proxy({}, {
|
|
348
|
-
get() {
|
|
349
|
-
return fn;
|
|
350
|
-
}
|
|
351
|
-
});
|
|
352
|
-
}
|
|
353
|
-
var normalizeProp = createNormalizer((v) => v);
|
|
354
309
|
|
|
355
310
|
// src/splitter.dom.ts
|
|
356
|
-
var dom = {
|
|
357
|
-
getDoc: (ctx) => {
|
|
358
|
-
var _a;
|
|
359
|
-
return (_a = ctx.doc) != null ? _a : document;
|
|
360
|
-
},
|
|
361
|
-
getRootNode: (ctx) => {
|
|
362
|
-
var _a;
|
|
363
|
-
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
364
|
-
},
|
|
311
|
+
var dom = defineDomHelpers({
|
|
365
312
|
getRootId: (ctx) => {
|
|
366
313
|
var _a, _b;
|
|
367
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.
|
|
314
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.id}`;
|
|
368
315
|
},
|
|
369
316
|
getSplitterId: (ctx) => {
|
|
370
317
|
var _a, _b;
|
|
371
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.
|
|
318
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.id}:splitter`;
|
|
372
319
|
},
|
|
373
320
|
getToggleButtonId: (ctx) => {
|
|
374
321
|
var _a, _b;
|
|
375
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.
|
|
322
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.id}:toggle-btn`;
|
|
376
323
|
},
|
|
377
324
|
getLabelId: (ctx) => {
|
|
378
325
|
var _a, _b;
|
|
379
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.
|
|
326
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.id}:label`;
|
|
380
327
|
},
|
|
381
328
|
getPrimaryPaneId: (ctx) => {
|
|
382
329
|
var _a, _b;
|
|
383
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.
|
|
330
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.id}:primary`;
|
|
384
331
|
},
|
|
385
332
|
getSecondaryPaneId: (ctx) => {
|
|
386
333
|
var _a, _b;
|
|
387
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.
|
|
334
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.id}:secondary`;
|
|
388
335
|
},
|
|
389
|
-
getSplitterEl: (ctx) => dom.
|
|
390
|
-
getPrimaryPaneEl: (ctx) => dom.
|
|
336
|
+
getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
|
|
337
|
+
getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
|
|
391
338
|
getCursor(ctx) {
|
|
392
339
|
if (ctx.disabled || ctx.fixed)
|
|
393
340
|
return "default";
|
|
@@ -399,10 +346,10 @@ var dom = {
|
|
|
399
346
|
cursor = x ? "w-resize" : "n-resize";
|
|
400
347
|
return cursor;
|
|
401
348
|
}
|
|
402
|
-
};
|
|
349
|
+
});
|
|
403
350
|
|
|
404
351
|
// src/splitter.connect.ts
|
|
405
|
-
function connect(state2, send, normalize
|
|
352
|
+
function connect(state2, send, normalize) {
|
|
406
353
|
const isHorizontal = state2.context.isHorizontal;
|
|
407
354
|
const isDisabled = state2.context.disabled;
|
|
408
355
|
const isFocused = state2.hasTag("focus");
|
|
@@ -566,7 +513,7 @@ function connect(state2, send, normalize = normalizeProp) {
|
|
|
566
513
|
}
|
|
567
514
|
|
|
568
515
|
// src/splitter.machine.ts
|
|
569
|
-
import { createMachine, guards
|
|
516
|
+
import { createMachine, guards } from "@zag-js/core";
|
|
570
517
|
|
|
571
518
|
// ../../utilities/number/dist/index.mjs
|
|
572
519
|
var __pow2 = Math.pow;
|
|
@@ -616,26 +563,13 @@ function decimalOperation(a, op, b) {
|
|
|
616
563
|
}
|
|
617
564
|
var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
|
|
618
565
|
|
|
619
|
-
// ../../utilities/rect/dist/index.mjs
|
|
620
|
-
var isDom2 = () => typeof window !== "undefined";
|
|
621
|
-
var isTouchDevice2 = isDom2() && !!navigator.maxTouchPoints;
|
|
622
|
-
function relativeToNode(p, el) {
|
|
623
|
-
const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
|
|
624
|
-
const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
|
|
625
|
-
return {
|
|
626
|
-
point: { x: dx, y: dy },
|
|
627
|
-
progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
|
|
628
|
-
};
|
|
629
|
-
}
|
|
630
|
-
|
|
631
566
|
// src/splitter.machine.ts
|
|
632
567
|
var { not } = guards;
|
|
633
|
-
function machine(ctx
|
|
568
|
+
function machine(ctx) {
|
|
634
569
|
return createMachine({
|
|
635
570
|
id: "splitter",
|
|
636
571
|
initial: "unknown",
|
|
637
572
|
context: __spreadValues({
|
|
638
|
-
uid: "",
|
|
639
573
|
orientation: "horizontal",
|
|
640
574
|
min: 224,
|
|
641
575
|
max: 340,
|
|
@@ -668,10 +602,7 @@ function machine(ctx = {}) {
|
|
|
668
602
|
states: {
|
|
669
603
|
unknown: {
|
|
670
604
|
on: {
|
|
671
|
-
SETUP:
|
|
672
|
-
target: "idle",
|
|
673
|
-
actions: "setupDocument"
|
|
674
|
-
}
|
|
605
|
+
SETUP: "idle"
|
|
675
606
|
}
|
|
676
607
|
},
|
|
677
608
|
idle: {
|
|
@@ -808,13 +739,6 @@ function machine(ctx = {}) {
|
|
|
808
739
|
var _a;
|
|
809
740
|
(_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
810
741
|
},
|
|
811
|
-
setupDocument(ctx2, evt) {
|
|
812
|
-
if (evt.doc)
|
|
813
|
-
ctx2.doc = ref(evt.doc);
|
|
814
|
-
if (evt.root)
|
|
815
|
-
ctx2.rootNode = ref(evt.root);
|
|
816
|
-
ctx2.uid = evt.id;
|
|
817
|
-
},
|
|
818
742
|
setToMin(ctx2) {
|
|
819
743
|
ctx2.value = ctx2.min;
|
|
820
744
|
},
|
|
@@ -834,11 +758,11 @@ function machine(ctx = {}) {
|
|
|
834
758
|
});
|
|
835
759
|
},
|
|
836
760
|
setPointerValue(ctx2, evt) {
|
|
837
|
-
const
|
|
838
|
-
if (!
|
|
761
|
+
const el = dom.getPrimaryPaneEl(ctx2);
|
|
762
|
+
if (!el)
|
|
839
763
|
return;
|
|
840
|
-
const
|
|
841
|
-
let currentPoint = ctx2.isHorizontal ?
|
|
764
|
+
const relativePoint = getPointRelativeToNode(evt.point, el);
|
|
765
|
+
let currentPoint = ctx2.isHorizontal ? relativePoint.x : relativePoint.y;
|
|
842
766
|
let value = parseFloat(snapToStep(clamp(currentPoint, ctx2), ctx2.step));
|
|
843
767
|
if (Math.abs(value - ctx2.min) <= ctx2.snapOffset) {
|
|
844
768
|
value = ctx2.min;
|
|
@@ -854,4 +778,3 @@ export {
|
|
|
854
778
|
connect,
|
|
855
779
|
machine
|
|
856
780
|
};
|
|
857
|
-
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Send, State } from "./splitter.types";
|
|
3
|
-
export declare function connect<T extends PropTypes
|
|
1
|
+
import type { NormalizeProps, PropTypes } from "@zag-js/types";
|
|
2
|
+
import type { Send, State } from "./splitter.types";
|
|
3
|
+
export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
4
4
|
isCollapsed: boolean;
|
|
5
5
|
isExpanded: boolean;
|
|
6
6
|
isFocused: boolean;
|
|
@@ -17,4 +17,3 @@ export declare function connect<T extends PropTypes = ReactPropTypes>(state: Sta
|
|
|
17
17
|
labelProps: T["element"];
|
|
18
18
|
splitterProps: T["element"];
|
|
19
19
|
};
|
|
20
|
-
//# sourceMappingURL=splitter.connect.d.ts.map
|
package/dist/splitter.dom.d.ts
CHANGED
|
@@ -1,7 +1,21 @@
|
|
|
1
|
-
import { MachineContext as Ctx } from "./splitter.types";
|
|
1
|
+
import type { MachineContext as Ctx } from "./splitter.types";
|
|
2
2
|
export declare const dom: {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
getRootNode: (ctx: {
|
|
4
|
+
getRootNode?: () => Node | Document | ShadowRoot;
|
|
5
|
+
}) => Document | ShadowRoot;
|
|
6
|
+
getDoc: (ctx: {
|
|
7
|
+
getRootNode?: () => Node | Document | ShadowRoot;
|
|
8
|
+
}) => Document;
|
|
9
|
+
getWin: (ctx: {
|
|
10
|
+
getRootNode?: () => Node | Document | ShadowRoot;
|
|
11
|
+
}) => Window & typeof globalThis;
|
|
12
|
+
getActiveElement: (ctx: {
|
|
13
|
+
getRootNode?: () => Node | Document | ShadowRoot;
|
|
14
|
+
}) => HTMLElement;
|
|
15
|
+
getById: <T_1 = HTMLElement>(ctx: {
|
|
16
|
+
getRootNode?: () => Node | Document | ShadowRoot;
|
|
17
|
+
}, id: string) => T_1;
|
|
18
|
+
} & {
|
|
5
19
|
getRootId: (ctx: Ctx) => string;
|
|
6
20
|
getSplitterId: (ctx: Ctx) => string;
|
|
7
21
|
getToggleButtonId: (ctx: Ctx) => string;
|
|
@@ -12,4 +26,3 @@ export declare const dom: {
|
|
|
12
26
|
getPrimaryPaneEl: (ctx: Ctx) => HTMLElement;
|
|
13
27
|
getCursor(ctx: Ctx): "default" | (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
|
|
14
28
|
};
|
|
15
|
-
//# sourceMappingURL=splitter.dom.d.ts.map
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import { MachineContext, MachineState, UserDefinedContext } from "./splitter.types";
|
|
2
|
-
export declare function machine(ctx
|
|
3
|
-
//# sourceMappingURL=splitter.machine.d.ts.map
|
|
1
|
+
import type { MachineContext, MachineState, UserDefinedContext } from "./splitter.types";
|
|
2
|
+
export declare function machine(ctx: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
|
package/dist/splitter.types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { StateMachine as S } from "@zag-js/core";
|
|
2
|
-
import { Context, DirectionProperty } from "@zag-js/types";
|
|
1
|
+
import type { StateMachine as S } from "@zag-js/core";
|
|
2
|
+
import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
|
|
3
3
|
declare type ElementIds = Partial<{
|
|
4
4
|
root: string;
|
|
5
5
|
splitter: string;
|
|
@@ -8,7 +8,7 @@ declare type ElementIds = Partial<{
|
|
|
8
8
|
primaryPane: string;
|
|
9
9
|
secondaryPane: string;
|
|
10
10
|
}>;
|
|
11
|
-
declare type PublicContext = DirectionProperty & {
|
|
11
|
+
declare type PublicContext = DirectionProperty & CommonProperties & {
|
|
12
12
|
/**
|
|
13
13
|
* The ids of the elements in the splitter. Useful for composition.
|
|
14
14
|
*/
|
|
@@ -65,7 +65,7 @@ declare type PublicContext = DirectionProperty & {
|
|
|
65
65
|
*/
|
|
66
66
|
snapOffset: number;
|
|
67
67
|
};
|
|
68
|
-
export declare type UserDefinedContext =
|
|
68
|
+
export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
69
69
|
declare type ComputedContext = Readonly<{
|
|
70
70
|
/**
|
|
71
71
|
* @computed
|
|
@@ -92,4 +92,3 @@ export declare type MachineState = {
|
|
|
92
92
|
export declare type State = S.State<MachineContext, MachineState>;
|
|
93
93
|
export declare type Send = S.Send<S.AnyEventObject>;
|
|
94
94
|
export {};
|
|
95
|
-
//# sourceMappingURL=splitter.types.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/splitter",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.10",
|
|
4
4
|
"description": "Core logic for the splitter widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -30,11 +30,12 @@
|
|
|
30
30
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@zag-js/core": "0.1.
|
|
34
|
-
"@zag-js/
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
"@zag-js/
|
|
33
|
+
"@zag-js/core": "0.1.8",
|
|
34
|
+
"@zag-js/types": "0.2.2"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@zag-js/dom-utils": "0.1.7",
|
|
38
|
+
"@zag-js/number-utils": "0.1.2"
|
|
38
39
|
},
|
|
39
40
|
"scripts": {
|
|
40
41
|
"build:fast": "zag build",
|
package/dist/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5C,YAAY,EAAE,kBAAkB,IAAI,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA"}
|