@vertz/ui-primitives 0.2.24 → 0.2.26
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/shared/{chunk-kskxxc2q.js → chunk-1dx23qnr.js} +5 -1
- package/dist/shared/chunk-5964gmv0.js +416 -0
- package/dist/shared/{chunk-f0wy7k56.js → chunk-9ydd4pn3.js} +6 -0
- package/dist/shared/chunk-bc2qqkhr.js +194 -0
- package/dist/src/accordion/accordion-composed.js +1 -1
- package/dist/src/accordion/accordion.js +1 -1
- package/dist/src/index.d.ts +132 -99
- package/dist/src/index.js +1 -0
- package/dist/src/list/list-composed.d.ts +34 -0
- package/dist/src/list/list-composed.js +6 -0
- package/dist/src/pagination/pagination-composed.js +1 -1
- package/package.json +3 -3
- package/dist/shared/chunk-4gyg71bn.js +0 -178
|
@@ -52,6 +52,7 @@ function AccordionItem(__props) {
|
|
|
52
52
|
const nowOpen = ctx.isOpen(__props.value);
|
|
53
53
|
const contentEl = contentRef.current;
|
|
54
54
|
if (contentEl) {
|
|
55
|
+
contentEl.removeAttribute("data-initial");
|
|
55
56
|
if (nowOpen) {
|
|
56
57
|
setHidden(contentEl, false);
|
|
57
58
|
const height = contentEl.scrollHeight;
|
|
@@ -159,8 +160,11 @@ function AccordionContent(__props) {
|
|
|
159
160
|
const isOpen = computed(() => ctx.isOpen());
|
|
160
161
|
el.value.setAttribute("aria-hidden", isOpen.value ? "false" : "true");
|
|
161
162
|
el.value.setAttribute("data-state", isOpen.value ? "open" : "closed");
|
|
162
|
-
if (
|
|
163
|
+
if (isOpen.value) {
|
|
164
|
+
el.value.setAttribute("data-initial", "");
|
|
165
|
+
} else {
|
|
163
166
|
el.value.style.display = "none";
|
|
167
|
+
}
|
|
164
168
|
const __mfResult0 = el.value;
|
|
165
169
|
__flushMountFrame();
|
|
166
170
|
return __mfResult0;
|
|
@@ -0,0 +1,416 @@
|
|
|
1
|
+
import {
|
|
2
|
+
cn
|
|
3
|
+
} from "./chunk-q7xbcj9q.js";
|
|
4
|
+
|
|
5
|
+
// src/list/list-composed.tsx
|
|
6
|
+
import { computed } from "@vertz/ui";
|
|
7
|
+
import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
|
|
8
|
+
import { createContext, ListAnimationContext, onMount, ref, useContext } from "@vertz/ui";
|
|
9
|
+
var ListContext = createContext(undefined, "@vertz/ui-primitives::ListContext");
|
|
10
|
+
function useListContext(subComponent) {
|
|
11
|
+
const ctx = useContext(ListContext);
|
|
12
|
+
if (!ctx) {
|
|
13
|
+
throw new Error(`List.${subComponent} must be used inside a <List> component`);
|
|
14
|
+
}
|
|
15
|
+
return ctx;
|
|
16
|
+
}
|
|
17
|
+
function ListItem(__props) {
|
|
18
|
+
const __mfDepth = __pushMountFrame();
|
|
19
|
+
try {
|
|
20
|
+
const ctx = useListContext("Item");
|
|
21
|
+
const __mfResult0 = (() => {
|
|
22
|
+
const __el0 = __element("li");
|
|
23
|
+
__attr(__el0, "class", () => cn(ctx.classes?.item, __props.className ?? __props.class));
|
|
24
|
+
{
|
|
25
|
+
const __v = ctx.sortable ? "" : undefined;
|
|
26
|
+
if (__v != null && __v !== false)
|
|
27
|
+
__el0.setAttribute("data-sortable-item", __v === true ? "" : __v);
|
|
28
|
+
}
|
|
29
|
+
__enterChildren(__el0);
|
|
30
|
+
__append(__el0, __child(() => __props.children));
|
|
31
|
+
__exitChildren();
|
|
32
|
+
return __el0;
|
|
33
|
+
})();
|
|
34
|
+
__flushMountFrame();
|
|
35
|
+
return __mfResult0;
|
|
36
|
+
} catch (__mfErr) {
|
|
37
|
+
__discardMountFrame(__mfDepth);
|
|
38
|
+
throw __mfErr;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
function ListDragHandle(__props) {
|
|
42
|
+
const __mfDepth = __pushMountFrame();
|
|
43
|
+
try {
|
|
44
|
+
const ctx = useListContext("DragHandle");
|
|
45
|
+
const __mfResult0 = (() => {
|
|
46
|
+
const __el0 = __element("div");
|
|
47
|
+
__el0.setAttribute("data-list-drag-handle", "");
|
|
48
|
+
{
|
|
49
|
+
const __v = ctx.sortable ? "" : undefined;
|
|
50
|
+
if (__v != null && __v !== false)
|
|
51
|
+
__el0.setAttribute("data-sortable", __v === true ? "" : __v);
|
|
52
|
+
}
|
|
53
|
+
__attr(__el0, "class", () => cn(ctx.classes?.dragHandle, __props.className ?? __props.class));
|
|
54
|
+
__enterChildren(__el0);
|
|
55
|
+
__append(__el0, __child(() => __props.children));
|
|
56
|
+
__exitChildren();
|
|
57
|
+
return __el0;
|
|
58
|
+
})();
|
|
59
|
+
__flushMountFrame();
|
|
60
|
+
return __mfResult0;
|
|
61
|
+
} catch (__mfErr) {
|
|
62
|
+
__discardMountFrame(__mfDepth);
|
|
63
|
+
throw __mfErr;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
var DEFAULT_DURATION = 200;
|
|
67
|
+
var DEFAULT_EASING = "ease-out";
|
|
68
|
+
function resolveAnimateConfig(animate) {
|
|
69
|
+
if (typeof animate === "object") {
|
|
70
|
+
return {
|
|
71
|
+
duration: animate.duration ?? DEFAULT_DURATION,
|
|
72
|
+
easing: animate.easing ?? DEFAULT_EASING
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
return { duration: DEFAULT_DURATION, easing: DEFAULT_EASING };
|
|
76
|
+
}
|
|
77
|
+
function createAnimationHooks(animate) {
|
|
78
|
+
const { duration, easing } = resolveAnimateConfig(animate);
|
|
79
|
+
const itemRects = new Map;
|
|
80
|
+
const itemNodes = new Map;
|
|
81
|
+
return {
|
|
82
|
+
onBeforeReconcile() {
|
|
83
|
+
itemRects.clear();
|
|
84
|
+
for (const [key, el] of itemNodes) {
|
|
85
|
+
itemRects.set(key, el.getBoundingClientRect());
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
onAfterReconcile() {
|
|
89
|
+
if (globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches)
|
|
90
|
+
return;
|
|
91
|
+
for (const [key, el] of itemNodes) {
|
|
92
|
+
const firstRect = itemRects.get(key);
|
|
93
|
+
if (!firstRect)
|
|
94
|
+
continue;
|
|
95
|
+
const lastRect = el.getBoundingClientRect();
|
|
96
|
+
const deltaX = firstRect.left - lastRect.left;
|
|
97
|
+
const deltaY = firstRect.top - lastRect.top;
|
|
98
|
+
if (Math.abs(deltaX) < 0.5 && Math.abs(deltaY) < 0.5)
|
|
99
|
+
continue;
|
|
100
|
+
el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
|
|
101
|
+
el.style.transition = "none";
|
|
102
|
+
requestAnimationFrame(() => {
|
|
103
|
+
el.style.transition = `transform ${duration}ms ${easing}`;
|
|
104
|
+
el.style.transform = "";
|
|
105
|
+
el.addEventListener("transitionend", () => {
|
|
106
|
+
el.style.transition = "";
|
|
107
|
+
el.style.transform = "";
|
|
108
|
+
}, { once: true });
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
onItemEnter(node, key) {
|
|
113
|
+
if (node instanceof Element) {
|
|
114
|
+
itemNodes.set(key, node);
|
|
115
|
+
node.setAttribute("data-presence", "enter");
|
|
116
|
+
if ("offsetHeight" in node) {
|
|
117
|
+
node.offsetHeight;
|
|
118
|
+
}
|
|
119
|
+
if (typeof node.getAnimations === "function") {
|
|
120
|
+
const anims = node.getAnimations();
|
|
121
|
+
if (anims.length > 0) {
|
|
122
|
+
Promise.all(anims.map((a) => a.finished.catch(() => {}))).then(() => {
|
|
123
|
+
if (itemNodes.get(key) === node) {
|
|
124
|
+
node.removeAttribute("data-presence");
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
node.removeAttribute("data-presence");
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
onItemExit(node, key, done) {
|
|
134
|
+
itemNodes.delete(key);
|
|
135
|
+
itemRects.delete(key);
|
|
136
|
+
if (node instanceof Element) {
|
|
137
|
+
const el = node;
|
|
138
|
+
const rect = node.getBoundingClientRect();
|
|
139
|
+
const reducedMotion = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
|
|
140
|
+
const remainingRects = new Map;
|
|
141
|
+
for (const [k, n] of itemNodes) {
|
|
142
|
+
remainingRects.set(k, n.getBoundingClientRect());
|
|
143
|
+
}
|
|
144
|
+
el.style.overflow = "hidden";
|
|
145
|
+
el.style.pointerEvents = "none";
|
|
146
|
+
el.style.borderBottomWidth = "0";
|
|
147
|
+
node.setAttribute("data-presence", "exit");
|
|
148
|
+
if (!reducedMotion) {
|
|
149
|
+
el.style.height = `${rect.height}px`;
|
|
150
|
+
el.style.transition = "none";
|
|
151
|
+
el.style.opacity = "1";
|
|
152
|
+
el.offsetHeight;
|
|
153
|
+
el.style.transition = `height ${duration}ms ${easing}, opacity ${duration}ms ${easing}, ` + `padding ${duration}ms ${easing}`;
|
|
154
|
+
el.style.height = "0";
|
|
155
|
+
el.style.paddingTop = "0";
|
|
156
|
+
el.style.paddingBottom = "0";
|
|
157
|
+
el.style.opacity = "0";
|
|
158
|
+
el.addEventListener("transitionend", () => done(), { once: true });
|
|
159
|
+
setTimeout(() => done(), duration + 50);
|
|
160
|
+
} else {
|
|
161
|
+
done();
|
|
162
|
+
}
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
done();
|
|
166
|
+
}
|
|
167
|
+
};
|
|
168
|
+
}
|
|
169
|
+
function findSortableItem(target, root) {
|
|
170
|
+
if (!(target instanceof HTMLElement))
|
|
171
|
+
return null;
|
|
172
|
+
const item = target.closest("[data-sortable-item]");
|
|
173
|
+
if (item instanceof HTMLElement && root.contains(item))
|
|
174
|
+
return item;
|
|
175
|
+
return null;
|
|
176
|
+
}
|
|
177
|
+
function createDropIndicator() {
|
|
178
|
+
let indicator = null;
|
|
179
|
+
function getOrCreate() {
|
|
180
|
+
if (!indicator) {
|
|
181
|
+
indicator = document.createElement("div");
|
|
182
|
+
indicator.setAttribute("data-drop-indicator", "");
|
|
183
|
+
indicator.style.height = "2px";
|
|
184
|
+
indicator.style.background = "var(--color-primary, #3b82f6)";
|
|
185
|
+
indicator.style.borderRadius = "1px";
|
|
186
|
+
indicator.style.position = "absolute";
|
|
187
|
+
indicator.style.left = "0";
|
|
188
|
+
indicator.style.right = "0";
|
|
189
|
+
indicator.style.pointerEvents = "none";
|
|
190
|
+
indicator.style.zIndex = "100";
|
|
191
|
+
}
|
|
192
|
+
return indicator;
|
|
193
|
+
}
|
|
194
|
+
return {
|
|
195
|
+
show(ulEl, beforeItem) {
|
|
196
|
+
const el = getOrCreate();
|
|
197
|
+
if (!el.parentNode)
|
|
198
|
+
ulEl.appendChild(el);
|
|
199
|
+
if (beforeItem) {
|
|
200
|
+
const ulRect = ulEl.getBoundingClientRect();
|
|
201
|
+
const itemRect = beforeItem.getBoundingClientRect();
|
|
202
|
+
el.style.top = `${itemRect.top - ulRect.top - 1}px`;
|
|
203
|
+
} else {
|
|
204
|
+
const items = ulEl.querySelectorAll("[data-sortable-item]");
|
|
205
|
+
if (items.length > 0) {
|
|
206
|
+
const last = items[items.length - 1];
|
|
207
|
+
const ulRect = ulEl.getBoundingClientRect();
|
|
208
|
+
const lastRect = last.getBoundingClientRect();
|
|
209
|
+
el.style.top = `${lastRect.bottom - ulRect.top - 1}px`;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
hide() {
|
|
214
|
+
indicator?.parentNode?.removeChild(indicator);
|
|
215
|
+
}
|
|
216
|
+
};
|
|
217
|
+
}
|
|
218
|
+
function applyShiftTransforms(allItems, fromIndex, targetInsertionIndex, draggedHeight, animate) {
|
|
219
|
+
const { duration, easing } = resolveAnimateConfig(animate);
|
|
220
|
+
const reducedMotion = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
|
|
221
|
+
for (let i = 0;i < allItems.length; i++) {
|
|
222
|
+
if (i === fromIndex)
|
|
223
|
+
continue;
|
|
224
|
+
let shift = 0;
|
|
225
|
+
if (targetInsertionIndex > fromIndex) {
|
|
226
|
+
if (i > fromIndex && i < targetInsertionIndex) {
|
|
227
|
+
shift = -draggedHeight;
|
|
228
|
+
}
|
|
229
|
+
} else if (targetInsertionIndex < fromIndex) {
|
|
230
|
+
if (i >= targetInsertionIndex && i < fromIndex) {
|
|
231
|
+
shift = draggedHeight;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
const item = allItems[i];
|
|
235
|
+
const transition = reducedMotion ? "none" : `transform ${duration}ms ${easing}`;
|
|
236
|
+
if (shift !== 0) {
|
|
237
|
+
item.style.transition = transition;
|
|
238
|
+
item.style.transform = `translateY(${shift}px)`;
|
|
239
|
+
} else {
|
|
240
|
+
item.style.transition = transition;
|
|
241
|
+
item.style.transform = "";
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
function setupDragSort(ulEl, getSortable, getOnReorder, getAnimate) {
|
|
246
|
+
const dropIndicator = createDropIndicator();
|
|
247
|
+
ulEl.addEventListener("pointerdown", (e) => {
|
|
248
|
+
if (!getSortable())
|
|
249
|
+
return;
|
|
250
|
+
const target = e.target;
|
|
251
|
+
if (!target)
|
|
252
|
+
return;
|
|
253
|
+
const hasHandles = ulEl.querySelector("[data-list-drag-handle][data-sortable]") !== null;
|
|
254
|
+
if (hasHandles) {
|
|
255
|
+
const handle = target.closest("[data-list-drag-handle][data-sortable]");
|
|
256
|
+
if (!handle || !ulEl.contains(handle))
|
|
257
|
+
return;
|
|
258
|
+
} else {
|
|
259
|
+
const item = target.closest("[data-sortable-item]");
|
|
260
|
+
if (!item || !ulEl.contains(item))
|
|
261
|
+
return;
|
|
262
|
+
}
|
|
263
|
+
const draggedItem = findSortableItem(target, ulEl);
|
|
264
|
+
if (!draggedItem)
|
|
265
|
+
return;
|
|
266
|
+
e.preventDefault();
|
|
267
|
+
const animate = getAnimate();
|
|
268
|
+
const useAnimatedShift = !!animate;
|
|
269
|
+
const startY = e.clientY;
|
|
270
|
+
draggedItem.setAttribute("data-dragging", "");
|
|
271
|
+
const allItems = [...ulEl.querySelectorAll("[data-sortable-item]")];
|
|
272
|
+
const fromIndex = allItems.indexOf(draggedItem);
|
|
273
|
+
if (fromIndex === -1)
|
|
274
|
+
return;
|
|
275
|
+
const snapshotRects = allItems.map((item) => item.getBoundingClientRect());
|
|
276
|
+
const draggedRect = snapshotRects[fromIndex];
|
|
277
|
+
const draggedHeight = draggedRect.height;
|
|
278
|
+
const ulRect = ulEl.getBoundingClientRect();
|
|
279
|
+
let placeholder = null;
|
|
280
|
+
if (useAnimatedShift) {
|
|
281
|
+
for (const item of allItems) {
|
|
282
|
+
item.style.willChange = "transform";
|
|
283
|
+
}
|
|
284
|
+
const draggedWidth = draggedRect.width;
|
|
285
|
+
const initialTop = draggedRect.top - ulRect.top;
|
|
286
|
+
const initialLeft = draggedRect.left - ulRect.left;
|
|
287
|
+
placeholder = document.createElement("li");
|
|
288
|
+
placeholder.setAttribute("data-drag-placeholder", "");
|
|
289
|
+
placeholder.style.height = `${draggedHeight}px`;
|
|
290
|
+
placeholder.style.visibility = "hidden";
|
|
291
|
+
placeholder.style.pointerEvents = "none";
|
|
292
|
+
draggedItem.parentNode?.insertBefore(placeholder, draggedItem);
|
|
293
|
+
draggedItem.style.position = "absolute";
|
|
294
|
+
draggedItem.style.width = `${draggedWidth}px`;
|
|
295
|
+
draggedItem.style.top = `${initialTop}px`;
|
|
296
|
+
draggedItem.style.left = `${initialLeft}px`;
|
|
297
|
+
draggedItem.style.zIndex = "50";
|
|
298
|
+
}
|
|
299
|
+
function calcInsertionFromSnapshot(clientY) {
|
|
300
|
+
if (snapshotRects.length === 0)
|
|
301
|
+
return 0;
|
|
302
|
+
for (let i = 0;i < snapshotRects.length; i++) {
|
|
303
|
+
const rect = snapshotRects[i];
|
|
304
|
+
const midY = rect.top + rect.height / 2;
|
|
305
|
+
if (clientY <= midY)
|
|
306
|
+
return i;
|
|
307
|
+
}
|
|
308
|
+
return snapshotRects.length;
|
|
309
|
+
}
|
|
310
|
+
const onMove = (moveEvent) => {
|
|
311
|
+
moveEvent.preventDefault();
|
|
312
|
+
const deltaY = moveEvent.clientY - startY;
|
|
313
|
+
if (useAnimatedShift) {
|
|
314
|
+
const initialTop = draggedRect.top - ulRect.top;
|
|
315
|
+
draggedItem.style.top = `${initialTop + deltaY}px`;
|
|
316
|
+
} else {
|
|
317
|
+
draggedItem.style.transform = `translateY(${deltaY}px)`;
|
|
318
|
+
draggedItem.style.transition = "none";
|
|
319
|
+
}
|
|
320
|
+
const targetInsertionIndex = calcInsertionFromSnapshot(moveEvent.clientY);
|
|
321
|
+
if (useAnimatedShift) {
|
|
322
|
+
applyShiftTransforms(allItems, fromIndex, targetInsertionIndex, draggedHeight, animate);
|
|
323
|
+
} else {
|
|
324
|
+
const indicatorTarget = (targetInsertionIndex < allItems.length ? allItems[targetInsertionIndex] : null) ?? null;
|
|
325
|
+
if (indicatorTarget !== draggedItem) {
|
|
326
|
+
dropIndicator.show(ulEl, indicatorTarget);
|
|
327
|
+
} else {
|
|
328
|
+
dropIndicator.hide();
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
};
|
|
332
|
+
const onUp = (upEvent) => {
|
|
333
|
+
document.removeEventListener("pointermove", onMove);
|
|
334
|
+
document.removeEventListener("pointerup", onUp);
|
|
335
|
+
draggedItem.removeAttribute("data-dragging");
|
|
336
|
+
draggedItem.style.transform = "";
|
|
337
|
+
draggedItem.style.transition = "";
|
|
338
|
+
if (useAnimatedShift) {
|
|
339
|
+
if (placeholder?.parentNode) {
|
|
340
|
+
placeholder.parentNode.removeChild(placeholder);
|
|
341
|
+
placeholder = null;
|
|
342
|
+
}
|
|
343
|
+
draggedItem.style.position = "";
|
|
344
|
+
draggedItem.style.width = "";
|
|
345
|
+
draggedItem.style.top = "";
|
|
346
|
+
draggedItem.style.left = "";
|
|
347
|
+
draggedItem.style.zIndex = "";
|
|
348
|
+
for (const item of allItems) {
|
|
349
|
+
item.style.transition = "none";
|
|
350
|
+
item.style.transform = "";
|
|
351
|
+
item.style.willChange = "";
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
dropIndicator.hide();
|
|
355
|
+
const insertionIndex = calcInsertionFromSnapshot(upEvent.clientY);
|
|
356
|
+
const destIndex = insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
|
|
357
|
+
if (fromIndex !== destIndex) {
|
|
358
|
+
getOnReorder()?.(fromIndex, destIndex);
|
|
359
|
+
}
|
|
360
|
+
};
|
|
361
|
+
document.addEventListener("pointermove", onMove);
|
|
362
|
+
document.addEventListener("pointerup", onUp);
|
|
363
|
+
});
|
|
364
|
+
}
|
|
365
|
+
function ComposedListRoot(__props) {
|
|
366
|
+
const __mfDepth = __pushMountFrame();
|
|
367
|
+
try {
|
|
368
|
+
const ctx = {
|
|
369
|
+
classes: __props.classes,
|
|
370
|
+
animate: __props.animate ?? false,
|
|
371
|
+
sortable: __props.sortable ?? false,
|
|
372
|
+
onReorder: __props.onReorder
|
|
373
|
+
};
|
|
374
|
+
const animHooks = computed(() => __props.animate ?? false ? createAnimationHooks(__props.animate ?? false) : undefined);
|
|
375
|
+
const ulRef = ref();
|
|
376
|
+
if (__props.sortable ?? false) {
|
|
377
|
+
onMount(() => {
|
|
378
|
+
const ul = ulRef.current;
|
|
379
|
+
if (ul) {
|
|
380
|
+
setupDragSort(ul, () => __props.sortable ?? false, () => __props.onReorder, () => __props.animate ?? false);
|
|
381
|
+
}
|
|
382
|
+
});
|
|
383
|
+
}
|
|
384
|
+
const __mfResult0 = ListContext.Provider({ get value() {
|
|
385
|
+
return ctx;
|
|
386
|
+
}, children: () => ListAnimationContext.Provider({ get value() {
|
|
387
|
+
return animHooks.value;
|
|
388
|
+
}, children: () => (() => {
|
|
389
|
+
const __el0 = __element("ul");
|
|
390
|
+
ulRef.current = __el0;
|
|
391
|
+
__attr(__el0, "class", () => cn(__props.classes?.root, __props.className ?? __props.class));
|
|
392
|
+
__enterChildren(__el0);
|
|
393
|
+
__append(__el0, __child(() => __props.children));
|
|
394
|
+
__exitChildren();
|
|
395
|
+
return __el0;
|
|
396
|
+
})() }) });
|
|
397
|
+
__flushMountFrame();
|
|
398
|
+
return __mfResult0;
|
|
399
|
+
} catch (__mfErr) {
|
|
400
|
+
__discardMountFrame(__mfDepth);
|
|
401
|
+
throw __mfErr;
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
function reorder(arr, from, to) {
|
|
405
|
+
const result = [...arr];
|
|
406
|
+
const moved = result.splice(from, 1)[0];
|
|
407
|
+
result.splice(to, 0, moved);
|
|
408
|
+
return result;
|
|
409
|
+
}
|
|
410
|
+
var ComposedList = Object.assign(ComposedListRoot, {
|
|
411
|
+
Item: ListItem,
|
|
412
|
+
DragHandle: ListDragHandle,
|
|
413
|
+
reorder
|
|
414
|
+
});
|
|
415
|
+
|
|
416
|
+
export { ComposedList };
|
|
@@ -27,6 +27,7 @@ function AccordionRoot(options = {}) {
|
|
|
27
27
|
if (!entry)
|
|
28
28
|
return;
|
|
29
29
|
const { trigger: t, content: c } = entry;
|
|
30
|
+
c.removeAttribute("data-initial");
|
|
30
31
|
if (open) {
|
|
31
32
|
setHidden(c, false);
|
|
32
33
|
}
|
|
@@ -123,6 +124,11 @@ function AccordionRoot(options = {}) {
|
|
|
123
124
|
if (__v != null && __v !== false)
|
|
124
125
|
__el2.setAttribute("data-state", __v === true ? "" : __v);
|
|
125
126
|
}
|
|
127
|
+
{
|
|
128
|
+
const __v = isOpen ? "" : undefined;
|
|
129
|
+
if (__v != null && __v !== false)
|
|
130
|
+
__el2.setAttribute("data-initial", __v === true ? "" : __v);
|
|
131
|
+
}
|
|
126
132
|
{
|
|
127
133
|
const __v = { display: isOpen ? "" : "none" };
|
|
128
134
|
if (__v != null && __v !== false)
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
import {
|
|
2
|
+
cn
|
|
3
|
+
} from "./chunk-q7xbcj9q.js";
|
|
4
|
+
|
|
5
|
+
// src/pagination/pagination-composed.tsx
|
|
6
|
+
import { computed } from "@vertz/ui";
|
|
7
|
+
import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
|
|
8
|
+
function generatePaginationRange(current, total, siblings) {
|
|
9
|
+
const range = [];
|
|
10
|
+
const left = Math.max(2, current - siblings);
|
|
11
|
+
const right = Math.min(total - 1, current + siblings);
|
|
12
|
+
range.push(1);
|
|
13
|
+
if (left > 2) {
|
|
14
|
+
range.push("...");
|
|
15
|
+
}
|
|
16
|
+
for (let idx = left;idx <= right; idx++) {
|
|
17
|
+
if (idx !== 1 && idx !== total) {
|
|
18
|
+
range.push(idx);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
if (right < total - 1) {
|
|
22
|
+
range.push("...");
|
|
23
|
+
}
|
|
24
|
+
if (total > 1) {
|
|
25
|
+
range.push(total);
|
|
26
|
+
}
|
|
27
|
+
return range;
|
|
28
|
+
}
|
|
29
|
+
function PageButton(__props) {
|
|
30
|
+
const __mfDepth = __pushMountFrame();
|
|
31
|
+
try {
|
|
32
|
+
if (__props.page === __props.currentPage) {
|
|
33
|
+
const __mfResult0 = (() => {
|
|
34
|
+
const __el0 = __element("button");
|
|
35
|
+
__el0.setAttribute("type", "button");
|
|
36
|
+
__attr(__el0, "class", () => cn(__props.classes?.linkActive));
|
|
37
|
+
__el0.setAttribute("aria-current", "page");
|
|
38
|
+
__enterChildren(__el0);
|
|
39
|
+
__append(__el0, __child(() => String(__props.page)));
|
|
40
|
+
__exitChildren();
|
|
41
|
+
return __el0;
|
|
42
|
+
})();
|
|
43
|
+
__flushMountFrame();
|
|
44
|
+
return __mfResult0;
|
|
45
|
+
}
|
|
46
|
+
const __mfResult1 = (() => {
|
|
47
|
+
const __el1 = __element("button");
|
|
48
|
+
__el1.setAttribute("type", "button");
|
|
49
|
+
__attr(__el1, "class", () => cn(__props.classes?.link));
|
|
50
|
+
__on(__el1, "click", () => __props.onPageChange(__props.page));
|
|
51
|
+
__enterChildren(__el1);
|
|
52
|
+
__append(__el1, __child(() => String(__props.page)));
|
|
53
|
+
__exitChildren();
|
|
54
|
+
return __el1;
|
|
55
|
+
})();
|
|
56
|
+
__flushMountFrame();
|
|
57
|
+
return __mfResult1;
|
|
58
|
+
} catch (__mfErr) {
|
|
59
|
+
__discardMountFrame(__mfDepth);
|
|
60
|
+
throw __mfErr;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
function buildPageItems(range, classes, currentPage, onPageChange, ellipsisContent) {
|
|
64
|
+
const __mfDepth = __pushMountFrame();
|
|
65
|
+
try {
|
|
66
|
+
const __mfResult0 = range.map((page) => page === "..." ? (() => {
|
|
67
|
+
const __el0 = __element("li");
|
|
68
|
+
{
|
|
69
|
+
const __v = cn(classes?.item);
|
|
70
|
+
if (__v != null && __v !== false)
|
|
71
|
+
__el0.setAttribute("class", __v === true ? "" : __v);
|
|
72
|
+
}
|
|
73
|
+
__enterChildren(__el0);
|
|
74
|
+
__append(__el0, (() => {
|
|
75
|
+
const __el1 = __element("span");
|
|
76
|
+
__el1.setAttribute("aria-hidden", "true");
|
|
77
|
+
{
|
|
78
|
+
const __v = cn(classes?.ellipsis);
|
|
79
|
+
if (__v != null && __v !== false)
|
|
80
|
+
__el1.setAttribute("class", __v === true ? "" : __v);
|
|
81
|
+
}
|
|
82
|
+
__enterChildren(__el1);
|
|
83
|
+
__insert(__el1, ellipsisContent);
|
|
84
|
+
__exitChildren();
|
|
85
|
+
return __el1;
|
|
86
|
+
})());
|
|
87
|
+
__exitChildren();
|
|
88
|
+
return __el0;
|
|
89
|
+
})() : (() => {
|
|
90
|
+
const __el2 = __element("li");
|
|
91
|
+
{
|
|
92
|
+
const __v = cn(classes?.item);
|
|
93
|
+
if (__v != null && __v !== false)
|
|
94
|
+
__el2.setAttribute("class", __v === true ? "" : __v);
|
|
95
|
+
}
|
|
96
|
+
__enterChildren(__el2);
|
|
97
|
+
__append(__el2, PageButton({ get page() {
|
|
98
|
+
return page;
|
|
99
|
+
}, get currentPage() {
|
|
100
|
+
return currentPage;
|
|
101
|
+
}, get onPageChange() {
|
|
102
|
+
return onPageChange;
|
|
103
|
+
}, get classes() {
|
|
104
|
+
return classes;
|
|
105
|
+
} }));
|
|
106
|
+
__exitChildren();
|
|
107
|
+
return __el2;
|
|
108
|
+
})());
|
|
109
|
+
__flushMountFrame();
|
|
110
|
+
return __mfResult0;
|
|
111
|
+
} catch (__mfErr) {
|
|
112
|
+
__discardMountFrame(__mfDepth);
|
|
113
|
+
throw __mfErr;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
function ComposedPaginationRoot(__props) {
|
|
117
|
+
const __mfDepth = __pushMountFrame();
|
|
118
|
+
try {
|
|
119
|
+
const range = computed(() => generatePaginationRange(__props.currentPage, __props.totalPages, __props.siblingCount ?? 1));
|
|
120
|
+
const pageItems = () => buildPageItems(range.value, __props.classes, __props.currentPage, __props.onPageChange, __props.ellipsisContent ?? "...");
|
|
121
|
+
const __mfResult0 = (() => {
|
|
122
|
+
const __el0 = __element("nav");
|
|
123
|
+
__el0.setAttribute("aria-label", "Pagination");
|
|
124
|
+
__attr(__el0, "class", () => cn(__props.classes?.nav, __props.className ?? __props.class));
|
|
125
|
+
__enterChildren(__el0);
|
|
126
|
+
__append(__el0, (() => {
|
|
127
|
+
const __el1 = __element("ul");
|
|
128
|
+
__attr(__el1, "class", () => cn(__props.classes?.list));
|
|
129
|
+
__enterChildren(__el1);
|
|
130
|
+
__append(__el1, (() => {
|
|
131
|
+
const __el2 = __element("li");
|
|
132
|
+
__attr(__el2, "class", () => cn(__props.classes?.item));
|
|
133
|
+
__enterChildren(__el2);
|
|
134
|
+
__append(__el2, (() => {
|
|
135
|
+
const __el3 = __element("button");
|
|
136
|
+
__el3.setAttribute("type", "button");
|
|
137
|
+
__attr(__el3, "class", () => cn(__props.classes?.navButton));
|
|
138
|
+
{
|
|
139
|
+
const __v = { paddingLeft: "0.375rem", paddingRight: "0.625rem" };
|
|
140
|
+
if (__v != null && __v !== false)
|
|
141
|
+
__el3.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
|
|
142
|
+
}
|
|
143
|
+
__el3.setAttribute("aria-label", "Previous page");
|
|
144
|
+
__attr(__el3, "disabled", () => __props.currentPage <= 1);
|
|
145
|
+
__on(__el3, "click", () => __props.onPageChange(__props.currentPage - 1));
|
|
146
|
+
__enterChildren(__el3);
|
|
147
|
+
__append(__el3, __child(() => __props.prevContent ?? "Previous"));
|
|
148
|
+
__exitChildren();
|
|
149
|
+
return __el3;
|
|
150
|
+
})());
|
|
151
|
+
__exitChildren();
|
|
152
|
+
return __el2;
|
|
153
|
+
})());
|
|
154
|
+
__insert(__el1, pageItems);
|
|
155
|
+
__append(__el1, (() => {
|
|
156
|
+
const __el4 = __element("li");
|
|
157
|
+
__attr(__el4, "class", () => cn(__props.classes?.item));
|
|
158
|
+
__enterChildren(__el4);
|
|
159
|
+
__append(__el4, (() => {
|
|
160
|
+
const __el5 = __element("button");
|
|
161
|
+
__el5.setAttribute("type", "button");
|
|
162
|
+
__attr(__el5, "class", () => cn(__props.classes?.navButton));
|
|
163
|
+
{
|
|
164
|
+
const __v = { paddingLeft: "0.625rem", paddingRight: "0.375rem" };
|
|
165
|
+
if (__v != null && __v !== false)
|
|
166
|
+
__el5.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
|
|
167
|
+
}
|
|
168
|
+
__el5.setAttribute("aria-label", "Next page");
|
|
169
|
+
__attr(__el5, "disabled", () => __props.currentPage >= __props.totalPages);
|
|
170
|
+
__on(__el5, "click", () => __props.onPageChange(__props.currentPage + 1));
|
|
171
|
+
__enterChildren(__el5);
|
|
172
|
+
__append(__el5, __child(() => __props.nextContent ?? "Next"));
|
|
173
|
+
__exitChildren();
|
|
174
|
+
return __el5;
|
|
175
|
+
})());
|
|
176
|
+
__exitChildren();
|
|
177
|
+
return __el4;
|
|
178
|
+
})());
|
|
179
|
+
__exitChildren();
|
|
180
|
+
return __el1;
|
|
181
|
+
})());
|
|
182
|
+
__exitChildren();
|
|
183
|
+
return __el0;
|
|
184
|
+
})();
|
|
185
|
+
__flushMountFrame();
|
|
186
|
+
return __mfResult0;
|
|
187
|
+
} catch (__mfErr) {
|
|
188
|
+
__discardMountFrame(__mfDepth);
|
|
189
|
+
throw __mfErr;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
var ComposedPagination = ComposedPaginationRoot;
|
|
193
|
+
|
|
194
|
+
export { ComposedPagination };
|