@destyler/carousel 0.0.7-beta.5 → 0.0.7-beta.9

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.cjs DELETED
@@ -1,684 +0,0 @@
1
- 'use strict';
2
-
3
- const anatomy$1 = require('@zag-js/anatomy');
4
- const domEvent = require('@zag-js/dom-event');
5
- const domQuery = require('@zag-js/dom-query');
6
- const core = require('@zag-js/core');
7
- const scrollSnap = require('@zag-js/scroll-snap');
8
- const utils = require('@zag-js/utils');
9
- const types = require('@zag-js/types');
10
-
11
- const anatomy = anatomy$1.createAnatomy("carousel").parts(
12
- "root",
13
- "itemGroup",
14
- "item",
15
- "control",
16
- "nextTrigger",
17
- "prevTrigger",
18
- "indicatorGroup",
19
- "indicator",
20
- "autoplayTrigger"
21
- );
22
- const parts = anatomy.build();
23
-
24
- const dom = domQuery.createScope({
25
- getRootId: (ctx) => ctx.ids?.root ?? `carousel:${ctx.id}`,
26
- getItemId: (ctx, index) => ctx.ids?.item?.(index) ?? `carousel:${ctx.id}:item:${index}`,
27
- getItemGroupId: (ctx) => ctx.ids?.itemGroup ?? `carousel:${ctx.id}:item-group`,
28
- getNextTriggerId: (ctx) => ctx.ids?.nextTrigger ?? `carousel:${ctx.id}:next-trigger`,
29
- getPrevTriggerId: (ctx) => ctx.ids?.prevTrigger ?? `carousel:${ctx.id}:prev-trigger`,
30
- getIndicatorGroupId: (ctx) => ctx.ids?.indicatorGroup ?? `carousel:${ctx.id}:indicator-group`,
31
- getIndicatorId: (ctx, index) => ctx.ids?.indicator?.(index) ?? `carousel:${ctx.id}:indicator:${index}`,
32
- getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
33
- getItemGroupEl: (ctx) => dom.getById(ctx, dom.getItemGroupId(ctx)),
34
- getItemEl: (ctx, index) => dom.getById(ctx, dom.getItemId(ctx, index)),
35
- getItemEls: (ctx) => domQuery.queryAll(dom.getItemGroupEl(ctx), `[data-part=item]`),
36
- getActiveIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx, ctx.page)),
37
- syncTabIndex(ctx) {
38
- const el = dom.getItemGroupEl(ctx);
39
- if (!el)
40
- return;
41
- const tabbables = domQuery.getTabbables(el);
42
- if (tabbables.length > 0) {
43
- el.removeAttribute("tabindex");
44
- } else {
45
- el.setAttribute("tabindex", "0");
46
- }
47
- }
48
- });
49
-
50
- function connect(state, send, normalize) {
51
- const isPlaying = state.matches("autoplay");
52
- const isDragging = state.matches("dragging");
53
- const canScrollNext = state.context.canScrollNext;
54
- const canScrollPrev = state.context.canScrollPrev;
55
- const horizontal = state.context.isHorizontal;
56
- const pageSnapPoints = Array.from(state.context.pageSnapPoints);
57
- const page = state.context.page;
58
- const slidesPerPage = state.context.slidesPerPage;
59
- const padding = state.context.padding;
60
- const translations = state.context.translations;
61
- return {
62
- isPlaying,
63
- isDragging,
64
- page,
65
- pageSnapPoints,
66
- canScrollNext,
67
- canScrollPrev,
68
- getProgress() {
69
- return page / pageSnapPoints.length;
70
- },
71
- scrollToIndex(index, instant) {
72
- send({ type: "INDEX.SET", index, instant });
73
- },
74
- scrollTo(index, instant) {
75
- send({ type: "PAGE.SET", index, instant });
76
- },
77
- scrollNext(instant) {
78
- send({ type: "PAGE.NEXT", instant });
79
- },
80
- scrollPrev(instant) {
81
- send({ type: "PAGE.PREV", instant });
82
- },
83
- play() {
84
- send("AUTOPLAY.START");
85
- },
86
- pause() {
87
- send("AUTOPLAY.PAUSE");
88
- },
89
- isInView(index) {
90
- return Array.from(state.context.slidesInView).includes(index);
91
- },
92
- refresh() {
93
- send({ type: "SNAP.REFRESH" });
94
- },
95
- getRootProps() {
96
- return normalize.element({
97
- ...parts.root.attrs,
98
- "id": dom.getRootId(state.context),
99
- "role": "region",
100
- "aria-roledescription": "carousel",
101
- "data-orientation": state.context.orientation,
102
- "dir": state.context.dir,
103
- "style": {
104
- "--slides-per-page": slidesPerPage,
105
- "--slide-spacing": state.context.spacing,
106
- "--slide-item-size": "calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"
107
- }
108
- });
109
- },
110
- getItemGroupProps() {
111
- return normalize.element({
112
- ...parts.itemGroup.attrs,
113
- "id": dom.getItemGroupId(state.context),
114
- "data-orientation": state.context.orientation,
115
- "data-dragging": domQuery.dataAttr(isDragging),
116
- "dir": state.context.dir,
117
- "aria-live": isPlaying ? "off" : "polite",
118
- onMouseDown(event) {
119
- if (!state.context.allowMouseDrag)
120
- return;
121
- if (event.button !== 0)
122
- return;
123
- if (event.defaultPrevented)
124
- return;
125
- const target = domQuery.getEventTarget(event);
126
- if (domQuery.isFocusable(target) && target !== event.currentTarget)
127
- return;
128
- event.preventDefault();
129
- send({ type: "DRAGGING.START" });
130
- },
131
- "style": {
132
- display: "grid",
133
- gap: "var(--slide-spacing)",
134
- scrollSnapType: [horizontal ? "x" : "y", state.context.snapType].join(" "),
135
- gridAutoFlow: horizontal ? "column" : "row",
136
- scrollbarWidth: "none",
137
- overscrollBehavior: "contain",
138
- [horizontal ? "gridAutoColumns" : "gridAutoRows"]: "var(--slide-item-size)",
139
- [horizontal ? "scrollPaddingInline" : "scrollPaddingBlock"]: padding,
140
- [horizontal ? "paddingInline" : "paddingBlock"]: padding,
141
- [horizontal ? "overflowX" : "overflowY"]: "auto"
142
- }
143
- });
144
- },
145
- getItemProps(props) {
146
- const isInView = state.context.slidesInView.includes(props.index);
147
- return normalize.element({
148
- ...parts.item.attrs,
149
- "id": dom.getItemId(state.context, props.index),
150
- "dir": state.context.dir,
151
- "role": "group",
152
- "data-index": props.index,
153
- "data-inview": domQuery.dataAttr(isInView),
154
- "aria-roledescription": "slide",
155
- "data-orientation": state.context.orientation,
156
- "aria-label": state.context.slideCount ? translations.item(props.index, state.context.slideCount) : void 0,
157
- "aria-hidden": domQuery.ariaAttr(!isInView),
158
- "style": {
159
- scrollSnapAlign: getSnapAlign(state.context, props)
160
- }
161
- });
162
- },
163
- getControlProps() {
164
- return normalize.element({
165
- ...parts.control.attrs,
166
- "data-orientation": state.context.orientation
167
- });
168
- },
169
- getPrevTriggerProps() {
170
- return normalize.button({
171
- ...parts.prevTrigger.attrs,
172
- "id": dom.getPrevTriggerId(state.context),
173
- "type": "button",
174
- "disabled": !canScrollPrev,
175
- "dir": state.context.dir,
176
- "aria-label": translations.prevTrigger,
177
- "data-orientation": state.context.orientation,
178
- "aria-controls": dom.getItemGroupId(state.context),
179
- onClick(event) {
180
- if (event.defaultPrevented)
181
- return;
182
- send({ type: "PAGE.PREV", src: "trigger" });
183
- }
184
- });
185
- },
186
- getNextTriggerProps() {
187
- return normalize.button({
188
- ...parts.nextTrigger.attrs,
189
- "dir": state.context.dir,
190
- "id": dom.getNextTriggerId(state.context),
191
- "type": "button",
192
- "aria-label": translations.nextTrigger,
193
- "data-orientation": state.context.orientation,
194
- "aria-controls": dom.getItemGroupId(state.context),
195
- "disabled": !canScrollNext,
196
- onClick(event) {
197
- if (event.defaultPrevented)
198
- return;
199
- send({ type: "PAGE.NEXT", src: "trigger" });
200
- }
201
- });
202
- },
203
- getIndicatorGroupProps() {
204
- return normalize.element({
205
- ...parts.indicatorGroup.attrs,
206
- "dir": state.context.dir,
207
- "id": dom.getIndicatorGroupId(state.context),
208
- "data-orientation": state.context.orientation,
209
- onKeyDown(event) {
210
- if (event.defaultPrevented)
211
- return;
212
- const src = "indicator";
213
- const keyMap = {
214
- ArrowDown(event2) {
215
- if (horizontal)
216
- return;
217
- send({ type: "PAGE.NEXT", src });
218
- event2.preventDefault();
219
- },
220
- ArrowUp(event2) {
221
- if (horizontal)
222
- return;
223
- send({ type: "PAGE.PREV", src });
224
- event2.preventDefault();
225
- },
226
- ArrowRight(event2) {
227
- if (!horizontal)
228
- return;
229
- send({ type: "PAGE.NEXT", src });
230
- event2.preventDefault();
231
- },
232
- ArrowLeft(event2) {
233
- if (!horizontal)
234
- return;
235
- send({ type: "PAGE.PREV", src });
236
- event2.preventDefault();
237
- },
238
- Home(event2) {
239
- send({ type: "PAGE.SET", index: 0, src });
240
- event2.preventDefault();
241
- },
242
- End(event2) {
243
- send({ type: "PAGE.SET", index: pageSnapPoints.length - 1, src });
244
- event2.preventDefault();
245
- }
246
- };
247
- const key = domEvent.getEventKey(event, {
248
- dir: state.context.dir,
249
- orientation: state.context.orientation
250
- });
251
- const exec = keyMap[key];
252
- exec?.(event);
253
- }
254
- });
255
- },
256
- getIndicatorProps(props) {
257
- return normalize.button({
258
- ...parts.indicator.attrs,
259
- "dir": state.context.dir,
260
- "id": dom.getIndicatorId(state.context, props.index),
261
- "type": "button",
262
- "data-orientation": state.context.orientation,
263
- "data-index": props.index,
264
- "data-readonly": domQuery.dataAttr(props.readOnly),
265
- "data-current": domQuery.dataAttr(props.index === state.context.page),
266
- "aria-label": translations.indicator(props.index),
267
- onClick(event) {
268
- if (event.defaultPrevented)
269
- return;
270
- if (props.readOnly)
271
- return;
272
- send({ type: "PAGE.SET", index: props.index, src: "indicator" });
273
- }
274
- });
275
- },
276
- getAutoplayTriggerProps() {
277
- return normalize.button({
278
- ...parts.autoplayTrigger.attrs,
279
- "type": "button",
280
- "data-orientation": state.context.orientation,
281
- "data-pressed": domQuery.dataAttr(isPlaying),
282
- "aria-label": isPlaying ? translations.autoplayStop : translations.autoplayStart,
283
- onClick(event) {
284
- if (event.defaultPrevented)
285
- return;
286
- send({ type: isPlaying ? "AUTOPLAY.PAUSE" : "AUTOPLAY.START" });
287
- }
288
- });
289
- }
290
- };
291
- }
292
- function getSnapAlign(ctx, props) {
293
- const { snapAlign = "start", index } = props;
294
- const perMove = ctx.slidesPerMove === "auto" ? Math.floor(ctx.slidesPerPage) : ctx.slidesPerMove;
295
- const shouldSnap = (index + perMove) % perMove === 0;
296
- return shouldSnap ? snapAlign : void 0;
297
- }
298
-
299
- const DEFAULT_SLIDES_PER_PAGE = 1;
300
- const DEFAULT_SLIDES_PER_MOVE = "auto";
301
- const invoke = {
302
- pageChange: (ctx) => {
303
- ctx.onPageChange?.({
304
- page: ctx.page,
305
- pageSnapPoint: ctx.pageSnapPoints[ctx.page]
306
- });
307
- }
308
- };
309
- const set = {
310
- page: (ctx, value) => {
311
- const page = clamp(value, 0, ctx.pageSnapPoints.length - 1);
312
- if (utils.isEqual(ctx.page, page))
313
- return;
314
- ctx.page = page;
315
- invoke.pageChange(ctx);
316
- }
317
- };
318
- function clamp(value, min, max) {
319
- return Math.min(Math.max(value, min), max);
320
- }
321
- function getPageSnapPoints(totalSlides, slidesPerMove, slidesPerPage) {
322
- if (totalSlides == null)
323
- return [];
324
- const snapPoints = [];
325
- const perMove = slidesPerMove === "auto" ? Math.floor(slidesPerPage) : slidesPerMove;
326
- for (let i = 0; i < totalSlides - 1; i += perMove) snapPoints.push(i);
327
- return snapPoints;
328
- }
329
- function machine(userContext) {
330
- const ctx = utils.compact(userContext);
331
- return core.createMachine(
332
- {
333
- id: "carousel",
334
- initial: ctx.autoplay ? "autoplay" : "idle",
335
- context: {
336
- dir: "ltr",
337
- page: 0,
338
- orientation: "horizontal",
339
- snapType: "mandatory",
340
- loop: false,
341
- slidesPerPage: DEFAULT_SLIDES_PER_PAGE,
342
- slidesPerMove: DEFAULT_SLIDES_PER_MOVE,
343
- spacing: "0px",
344
- autoplay: false,
345
- allowMouseDrag: false,
346
- inViewThreshold: 0.6,
347
- ...ctx,
348
- timeoutRef: core.ref({ current: void 0 }),
349
- translations: {
350
- nextTrigger: "Next slide",
351
- prevTrigger: "Previous slide",
352
- indicator: (index) => `Go to slide ${index + 1}`,
353
- item: (index, count) => `${index + 1} of ${count}`,
354
- autoplayStart: "Start slide rotation",
355
- autoplayStop: "Stop slide rotation",
356
- ...ctx.translations
357
- },
358
- pageSnapPoints: getPageSnapPoints(
359
- ctx.slideCount,
360
- ctx.slidesPerMove ?? DEFAULT_SLIDES_PER_MOVE,
361
- ctx.slidesPerPage ?? DEFAULT_SLIDES_PER_PAGE
362
- ),
363
- slidesInView: []
364
- },
365
- computed: {
366
- isRtl: (ctx2) => ctx2.dir === "rtl",
367
- isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
368
- canScrollNext: (ctx2) => ctx2.loop || ctx2.page < ctx2.pageSnapPoints.length - 1,
369
- canScrollPrev: (ctx2) => ctx2.loop || ctx2.page > 0,
370
- autoplayInterval: (ctx2) => utils.isObject(ctx2.autoplay) ? ctx2.autoplay.delay : 4e3
371
- },
372
- watch: {
373
- slidesPerPage: ["setSnapPoints"],
374
- slidesPerMove: ["setSnapPoints"],
375
- page: ["scrollToPage", "focusIndicatorEl"],
376
- orientation: ["setSnapPoints", "scrollToPage"]
377
- },
378
- on: {
379
- "PAGE.NEXT": {
380
- target: "idle",
381
- actions: ["clearScrollEndTimer", "setNextPage"]
382
- },
383
- "PAGE.PREV": {
384
- target: "idle",
385
- actions: ["clearScrollEndTimer", "setPrevPage"]
386
- },
387
- "PAGE.SET": {
388
- target: "idle",
389
- actions: ["clearScrollEndTimer", "setPage"]
390
- },
391
- "INDEX.SET": {
392
- target: "idle",
393
- actions: ["clearScrollEndTimer", "setMatchingPage"]
394
- },
395
- "SNAP.REFRESH": {
396
- actions: ["setSnapPoints", "clampPage"]
397
- }
398
- },
399
- activities: ["trackSlideMutation", "trackSlideIntersections", "trackSlideResize"],
400
- entry: ["resetScrollPosition", "setSnapPoints", "setPage"],
401
- exit: ["clearScrollEndTimer"],
402
- states: {
403
- idle: {
404
- activities: ["trackScroll"],
405
- on: {
406
- "DRAGGING.START": {
407
- target: "dragging",
408
- actions: ["invokeDragStart"]
409
- },
410
- "AUTOPLAY.START": {
411
- target: "autoplay",
412
- actions: ["invokeAutoplayStart"]
413
- }
414
- }
415
- },
416
- dragging: {
417
- activities: ["trackPointerMove"],
418
- entry: ["disableScrollSnap"],
419
- on: {
420
- "DRAGGING": {
421
- actions: ["scrollSlides", "invokeDragging"]
422
- },
423
- "DRAGGING.END": {
424
- target: "idle",
425
- actions: ["endDragging", "invokeDraggingEnd"]
426
- }
427
- }
428
- },
429
- autoplay: {
430
- activities: ["trackDocumentVisibility", "trackScroll"],
431
- exit: ["invokeAutoplayEnd"],
432
- every: {
433
- AUTOPLAY_INTERVAL: ["setNextPage", "invokeAutoplay"]
434
- },
435
- on: {
436
- "DRAGGING.START": {
437
- target: "dragging",
438
- actions: ["invokeDragStart"]
439
- },
440
- "AUTOPLAY.PAUSE": "idle"
441
- }
442
- }
443
- }
444
- },
445
- {
446
- activities: {
447
- trackSlideMutation(ctx2, _evt, { send }) {
448
- const el = dom.getItemGroupEl(ctx2);
449
- if (!el)
450
- return;
451
- const win = dom.getWin(ctx2);
452
- const observer = new win.MutationObserver(() => {
453
- send({ type: "SNAP.REFRESH", src: "slide.mutation" });
454
- dom.syncTabIndex(ctx2);
455
- });
456
- dom.syncTabIndex(ctx2);
457
- observer.observe(el, { childList: true, subtree: true });
458
- return () => observer.disconnect();
459
- },
460
- trackSlideResize(ctx2, _evt, { send }) {
461
- const el = dom.getItemGroupEl(ctx2);
462
- if (!el)
463
- return;
464
- const win = dom.getWin(ctx2);
465
- const observer = new win.ResizeObserver(() => {
466
- send({ type: "SNAP.REFRESH", src: "slide.resize" });
467
- });
468
- dom.getItemEls(ctx2).forEach((slide) => observer.observe(slide));
469
- return () => observer.disconnect();
470
- },
471
- trackSlideIntersections(ctx2) {
472
- const el = dom.getItemGroupEl(ctx2);
473
- const win = dom.getWin(ctx2);
474
- const observer = new win.IntersectionObserver(
475
- (entries) => {
476
- const slidesInView = entries.reduce((acc, entry) => {
477
- const target = entry.target;
478
- const index = Number(target.dataset.index ?? "-1");
479
- if (index == null || Number.isNaN(index) || index === -1)
480
- return acc;
481
- return entry.isIntersecting ? utils.add(acc, index) : utils.remove(acc, index);
482
- }, ctx2.slidesInView);
483
- ctx2.slidesInView = utils.uniq(slidesInView);
484
- },
485
- {
486
- root: el,
487
- threshold: ctx2.inViewThreshold
488
- }
489
- );
490
- dom.getItemEls(ctx2).forEach((slide) => observer.observe(slide));
491
- return () => observer.disconnect();
492
- },
493
- trackScroll(ctx2) {
494
- const el = dom.getItemGroupEl(ctx2);
495
- if (!el)
496
- return;
497
- const onScrollEnd = () => {
498
- if (ctx2.slidesInView.length === 0)
499
- return;
500
- const scrollPosition = ctx2.isHorizontal ? el.scrollLeft : el.scrollTop;
501
- const page = ctx2.pageSnapPoints.findIndex((point) => Math.abs(point - scrollPosition) < 1);
502
- if (page === -1)
503
- return;
504
- set.page(ctx2, page);
505
- };
506
- const onScroll = () => {
507
- clearTimeout(ctx2.timeoutRef.current);
508
- ctx2.timeoutRef.current = setTimeout(() => {
509
- onScrollEnd?.();
510
- }, 150);
511
- };
512
- return domEvent.addDomEvent(el, "scroll", onScroll, { passive: true });
513
- },
514
- trackDocumentVisibility(ctx2, _evt, { send }) {
515
- const doc = dom.getDoc(ctx2);
516
- const onVisibilityChange = () => {
517
- if (doc.visibilityState === "visible")
518
- return;
519
- send({ type: "AUTOPLAY.PAUSE", src: "doc.hidden" });
520
- };
521
- return domEvent.addDomEvent(doc, "visibilitychange", onVisibilityChange);
522
- },
523
- trackPointerMove(ctx2, _evt, { send }) {
524
- const doc = dom.getDoc(ctx2);
525
- return domEvent.trackPointerMove(doc, {
526
- onPointerMove({ event }) {
527
- send({ type: "DRAGGING", left: -event.movementX, top: -event.movementY });
528
- },
529
- onPointerUp() {
530
- send({ type: "DRAGGING.END" });
531
- }
532
- });
533
- }
534
- },
535
- actions: {
536
- resetScrollPosition(ctx2) {
537
- const el = dom.getItemGroupEl(ctx2);
538
- el.scrollTo(0, 0);
539
- },
540
- clearScrollEndTimer(ctx2) {
541
- if (ctx2.timeoutRef.current == null)
542
- return;
543
- clearTimeout(ctx2.timeoutRef.current);
544
- ctx2.timeoutRef.current = void 0;
545
- },
546
- scrollToPage(ctx2, evt) {
547
- const behavior = evt.instant ? "instant" : "smooth";
548
- const index = clamp(evt.index ?? ctx2.page, 0, ctx2.pageSnapPoints.length - 1);
549
- const el = dom.getItemGroupEl(ctx2);
550
- const axis = ctx2.isHorizontal ? "left" : "top";
551
- el.scrollTo({ [axis]: ctx2.pageSnapPoints[index], behavior });
552
- },
553
- setNextPage(ctx2) {
554
- const page = utils.nextIndex(ctx2.pageSnapPoints, ctx2.page, { loop: ctx2.loop });
555
- set.page(ctx2, page);
556
- },
557
- setPrevPage(ctx2) {
558
- const page = utils.prevIndex(ctx2.pageSnapPoints, ctx2.page, { loop: ctx2.loop });
559
- set.page(ctx2, page);
560
- },
561
- setMatchingPage(ctx2, evt) {
562
- const snapPoint = scrollSnap.findSnapPoint(
563
- dom.getItemGroupEl(ctx2),
564
- ctx2.isHorizontal ? "x" : "y",
565
- (node) => node.dataset.index === evt.index.toString()
566
- );
567
- if (snapPoint == null)
568
- return;
569
- const page = ctx2.pageSnapPoints.indexOf(snapPoint);
570
- set.page(ctx2, page);
571
- },
572
- setPage(ctx2, evt) {
573
- set.page(ctx2, evt.index ?? ctx2.page);
574
- },
575
- clampPage(ctx2) {
576
- const index = clamp(ctx2.page, 0, ctx2.pageSnapPoints.length - 1);
577
- set.page(ctx2, index);
578
- },
579
- setSnapPoints(ctx2) {
580
- queueMicrotask(() => {
581
- const el = dom.getItemGroupEl(ctx2);
582
- const scrollSnapPoints = scrollSnap.getScrollSnapPositions(el);
583
- ctx2.pageSnapPoints = ctx2.isHorizontal ? scrollSnapPoints.x : scrollSnapPoints.y;
584
- });
585
- },
586
- disableScrollSnap(ctx2) {
587
- const el = dom.getItemGroupEl(ctx2);
588
- const styles = getComputedStyle(el);
589
- el.dataset.scrollSnapType = styles.getPropertyValue("scroll-snap-type");
590
- el.style.setProperty("scroll-snap-type", "none");
591
- },
592
- scrollSlides(ctx2, evt) {
593
- const el = dom.getItemGroupEl(ctx2);
594
- el.scrollBy({ left: evt.left, top: evt.top, behavior: "instant" });
595
- },
596
- endDragging(ctx2) {
597
- const el = dom.getItemGroupEl(ctx2);
598
- const startX = el.scrollLeft;
599
- const startY = el.scrollTop;
600
- const snapPositions = scrollSnap.getScrollSnapPositions(el);
601
- const closestX = snapPositions.x.reduce((closest, curr) => {
602
- return Math.abs(curr - startX) < Math.abs(closest - startX) ? curr : closest;
603
- }, snapPositions.x[0]);
604
- const closestY = snapPositions.y.reduce((closest, curr) => {
605
- return Math.abs(curr - startY) < Math.abs(closest - startY) ? curr : closest;
606
- }, snapPositions.y[0]);
607
- domQuery.raf(() => {
608
- el.scrollTo({ left: closestX, top: closestY, behavior: "smooth" });
609
- const scrollSnapType = el.dataset.scrollSnapType;
610
- if (scrollSnapType) {
611
- el.style.removeProperty("scroll-snap-type");
612
- delete el.dataset.scrollSnapType;
613
- }
614
- });
615
- },
616
- focusIndicatorEl(ctx2, evt) {
617
- if (evt.src !== "indicator")
618
- return;
619
- const el = dom.getActiveIndicatorEl(ctx2);
620
- domQuery.raf(() => el.focus({ preventScroll: true }));
621
- },
622
- invokeDragStart(ctx2) {
623
- ctx2.onDragStatusChange?.({ type: "dragging.start", isDragging: true, page: ctx2.page });
624
- },
625
- invokeDragging(ctx2) {
626
- ctx2.onDragStatusChange?.({ type: "dragging", isDragging: true, page: ctx2.page });
627
- },
628
- invokeDraggingEnd(ctx2) {
629
- ctx2.onDragStatusChange?.({ type: "dragging.end", isDragging: false, page: ctx2.page });
630
- },
631
- invokeAutoplay(ctx2) {
632
- ctx2.onAutoplayStatusChange?.({ type: "autoplay", isPlaying: true, page: ctx2.page });
633
- },
634
- invokeAutoplayStart(ctx2) {
635
- ctx2.onAutoplayStatusChange?.({ type: "autoplay.start", isPlaying: true, page: ctx2.page });
636
- },
637
- invokeAutoplayEnd(ctx2) {
638
- ctx2.onAutoplayStatusChange?.({ type: "autoplay.stop", isPlaying: false, page: ctx2.page });
639
- }
640
- },
641
- delays: {
642
- AUTOPLAY_INTERVAL: (ctx2) => ctx2.autoplayInterval
643
- }
644
- }
645
- );
646
- }
647
-
648
- const props = types.createProps()([
649
- "dir",
650
- "getRootNode",
651
- "id",
652
- "ids",
653
- "loop",
654
- "page",
655
- "onPageChange",
656
- "orientation",
657
- "slideCount",
658
- "slidesPerPage",
659
- "slidesPerMove",
660
- "spacing",
661
- "padding",
662
- "autoplay",
663
- "allowMouseDrag",
664
- "inViewThreshold",
665
- "translations",
666
- "snapType",
667
- "onDragStatusChange",
668
- "onAutoplayStatusChange"
669
- ]);
670
- const splitProps = utils.createSplitProps(props);
671
- const indicatorProps = types.createProps()(["index", "readOnly"]);
672
- const splitIndicatorProps = utils.createSplitProps(indicatorProps);
673
- const itemProps = types.createProps()(["index", "snapAlign"]);
674
- const splitItemProps = utils.createSplitProps(itemProps);
675
-
676
- exports.anatomy = anatomy;
677
- exports.connect = connect;
678
- exports.indicatorProps = indicatorProps;
679
- exports.itemProps = itemProps;
680
- exports.machine = machine;
681
- exports.props = props;
682
- exports.splitIndicatorProps = splitIndicatorProps;
683
- exports.splitItemProps = splitItemProps;
684
- exports.splitProps = splitProps;