@destyler/carousel 0.2.11 → 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/index.d.mts CHANGED
@@ -1,10 +1,7 @@
1
- import * as _destyler_anatomy0 from "@destyler/anatomy";
2
- import * as _destyler_xstate0 from "@destyler/xstate";
3
1
  import { AnyEventObject, ContextRef, Machine, XSend, XState } from "@destyler/xstate";
4
2
  import { CommonProperties, DirectionProperty, NormalizeProps, Orientation, OrientationProperty, PropTypes, RequiredBy } from "@destyler/types";
5
-
6
3
  //#region src/anatomy.d.ts
7
- declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "autoplayTrigger">;
4
+ export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "autoplayTrigger">;
8
5
  //#endregion
9
6
  //#region src/types.d.ts
10
7
  interface PageChangeDetails {
@@ -241,17 +238,17 @@ interface MachineApi<T extends PropTypes = PropTypes> {
241
238
  }
242
239
  //#endregion
243
240
  //#region src/connect.d.ts
244
- declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
241
+ export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
245
242
  //#endregion
246
243
  //#region src/machine.d.ts
247
- declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
244
+ export declare function machine(userContext: UserDefinedContext): import("@destyler/xstate").Machine<MachineContext, MachineState, import("@destyler/xstate").AnyEventObject>;
248
245
  //#endregion
249
246
  //#region src/props.d.ts
250
- declare const props: ("autoplay" | "id" | "ids" | "translations" | "slidesPerPage" | "slidesPerMove" | "allowMouseDrag" | "loop" | "page" | "defaultPage" | "spacing" | "padding" | "onPageChange" | "inViewThreshold" | "snapType" | "slideCount" | "onDragStatusChange" | "onAutoplayStatusChange" | "dir" | "getRootNode" | "orientation")[];
251
- declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "autoplay" | "id" | "ids" | "translations" | "slidesPerPage" | "slidesPerMove" | "allowMouseDrag" | "loop" | "page" | "defaultPage" | "spacing" | "padding" | "onPageChange" | "inViewThreshold" | "snapType" | "slideCount" | "onDragStatusChange" | "onAutoplayStatusChange" | "dir" | "getRootNode" | "orientation">];
252
- declare const indicatorProps: (keyof IndicatorProps)[];
253
- declare const splitIndicatorProps: <Props extends IndicatorProps>(props: Props) => [IndicatorProps, Omit<Props, keyof IndicatorProps>];
254
- declare const itemProps: (keyof ItemProps)[];
255
- declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
247
+ export declare const props: ("autoplay" | "id" | "ids" | "translations" | "slidesPerPage" | "slidesPerMove" | "allowMouseDrag" | "loop" | "page" | "defaultPage" | "spacing" | "padding" | "onPageChange" | "inViewThreshold" | "snapType" | "slideCount" | "onDragStatusChange" | "onAutoplayStatusChange" | "dir" | "getRootNode" | "orientation")[];
248
+ export declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "autoplay" | "id" | "ids" | "translations" | "slidesPerPage" | "slidesPerMove" | "allowMouseDrag" | "loop" | "page" | "defaultPage" | "spacing" | "padding" | "onPageChange" | "inViewThreshold" | "snapType" | "slideCount" | "onDragStatusChange" | "onAutoplayStatusChange" | "dir" | "getRootNode" | "orientation">];
249
+ export declare const indicatorProps: (keyof IndicatorProps)[];
250
+ export declare const splitIndicatorProps: <Props extends IndicatorProps>(props: Props) => [IndicatorProps, Omit<Props, keyof IndicatorProps>];
251
+ export declare const itemProps: (keyof ItemProps)[];
252
+ export declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
256
253
  //#endregion
257
- export { type MachineApi as Api, type AutoplayStatusDetails, type UserDefinedContext as Context, type DragStatusDetails, type ElementIds, type IndicatorProps, type IntlTranslations, type ItemProps, type MachineState, type Orientation, type PageChangeDetails, type Service, type State, anatomy, connect, indicatorProps, itemProps, machine, props, splitIndicatorProps, splitItemProps, splitProps };
254
+ export type { MachineApi as Api, AutoplayStatusDetails, UserDefinedContext as Context, DragStatusDetails, ElementIds, IndicatorProps, IntlTranslations, ItemProps, MachineState, Orientation, PageChangeDetails, Service, State };
package/dist/index.mjs CHANGED
@@ -4,11 +4,9 @@ import { findSnapPoint, getScrollSnapPositions } from "@destyler/scroll-snap";
4
4
  import { add, compact, createSplitProps, isControlled, isEqual, isObject, isPropUserProvided, nextIndex, prevIndex, remove, resolveControllableProp, uniq, withControllableProvided } from "@destyler/utils";
5
5
  import { createMachine, ref } from "@destyler/xstate";
6
6
  import { createProps } from "@destyler/types";
7
-
8
7
  //#region src/anatomy.ts
9
8
  const anatomy = createAnatomy("carousel").parts("root", "itemGroup", "item", "control", "nextTrigger", "prevTrigger", "indicatorGroup", "indicator", "autoplayTrigger");
10
9
  const parts = anatomy.build();
11
-
12
10
  //#endregion
13
11
  //#region src/dom.ts
14
12
  const dom = createScope({
@@ -31,7 +29,6 @@ const dom = createScope({
31
29
  else el.setAttribute("tabindex", "0");
32
30
  }
33
31
  });
34
-
35
32
  //#endregion
36
33
  //#region src/connect.ts
37
34
  function connect(state, send, normalize) {
@@ -139,20 +136,20 @@ function connect(state, send, normalize) {
139
136
  }
140
137
  });
141
138
  },
142
- getItemProps(props$1) {
143
- const isInView = state.context.slidesInView.includes(props$1.index);
139
+ getItemProps(props) {
140
+ const isInView = state.context.slidesInView.includes(props.index);
144
141
  return normalize.element({
145
142
  ...parts.item.attrs,
146
- "id": dom.getItemId(state.context, props$1.index),
143
+ "id": dom.getItemId(state.context, props.index),
147
144
  "dir": state.context.dir,
148
145
  "role": "group",
149
- "data-index": props$1.index,
146
+ "data-index": props.index,
150
147
  "data-inview": String(isInView),
151
148
  "aria-roledescription": "slide",
152
149
  "data-orientation": state.context.orientation,
153
- "aria-label": state.context.slideCount ? translations.item(props$1.index, state.context.slideCount) : void 0,
150
+ "aria-label": state.context.slideCount ? translations.item(props.index, state.context.slideCount) : void 0,
154
151
  "aria-hidden": ariaAttr(!isInView),
155
- "style": { scrollSnapAlign: getSnapAlign(state.context, props$1) }
152
+ "style": { scrollSnapAlign: getSnapAlign(state.context, props) }
156
153
  });
157
154
  },
158
155
  getControlProps() {
@@ -209,53 +206,53 @@ function connect(state, send, normalize) {
209
206
  if (event.defaultPrevented) return;
210
207
  const src = "indicator";
211
208
  const exec = {
212
- ArrowDown(event$1) {
209
+ ArrowDown(event) {
213
210
  if (horizontal) return;
214
211
  send({
215
212
  type: "PAGE.NEXT",
216
213
  src
217
214
  });
218
- event$1.preventDefault();
215
+ event.preventDefault();
219
216
  },
220
- ArrowUp(event$1) {
217
+ ArrowUp(event) {
221
218
  if (horizontal) return;
222
219
  send({
223
220
  type: "PAGE.PREV",
224
221
  src
225
222
  });
226
- event$1.preventDefault();
223
+ event.preventDefault();
227
224
  },
228
- ArrowRight(event$1) {
225
+ ArrowRight(event) {
229
226
  if (!horizontal) return;
230
227
  send({
231
228
  type: "PAGE.NEXT",
232
229
  src
233
230
  });
234
- event$1.preventDefault();
231
+ event.preventDefault();
235
232
  },
236
- ArrowLeft(event$1) {
233
+ ArrowLeft(event) {
237
234
  if (!horizontal) return;
238
235
  send({
239
236
  type: "PAGE.PREV",
240
237
  src
241
238
  });
242
- event$1.preventDefault();
239
+ event.preventDefault();
243
240
  },
244
- Home(event$1) {
241
+ Home(event) {
245
242
  send({
246
243
  type: "PAGE.SET",
247
244
  index: 0,
248
245
  src
249
246
  });
250
- event$1.preventDefault();
247
+ event.preventDefault();
251
248
  },
252
- End(event$1) {
249
+ End(event) {
253
250
  send({
254
251
  type: "PAGE.SET",
255
252
  index: pageSnapPoints.length - 1,
256
253
  src
257
254
  });
258
- event$1.preventDefault();
255
+ event.preventDefault();
259
256
  }
260
257
  }[getEventKey(event, {
261
258
  dir: state.context.dir,
@@ -265,23 +262,23 @@ function connect(state, send, normalize) {
265
262
  }
266
263
  });
267
264
  },
268
- getIndicatorProps(props$1) {
265
+ getIndicatorProps(props) {
269
266
  return normalize.button({
270
267
  ...parts.indicator.attrs,
271
268
  "dir": state.context.dir,
272
- "id": dom.getIndicatorId(state.context, props$1.index),
269
+ "id": dom.getIndicatorId(state.context, props.index),
273
270
  "type": "button",
274
271
  "data-orientation": state.context.orientation,
275
- "data-index": props$1.index,
276
- "data-readonly": dataAttr(props$1.readOnly),
277
- "data-current": dataAttr(props$1.index === state.context.page),
278
- "aria-label": translations.indicator(props$1.index),
272
+ "data-index": props.index,
273
+ "data-readonly": dataAttr(props.readOnly),
274
+ "data-current": dataAttr(props.index === state.context.page),
275
+ "aria-label": translations.indicator(props.index),
279
276
  onClick(event) {
280
277
  if (event.defaultPrevented) return;
281
- if (props$1.readOnly) return;
278
+ if (props.readOnly) return;
282
279
  send({
283
280
  type: "PAGE.SET",
284
- index: props$1.index,
281
+ index: props.index,
285
282
  src: "indicator"
286
283
  });
287
284
  }
@@ -302,12 +299,11 @@ function connect(state, send, normalize) {
302
299
  }
303
300
  };
304
301
  }
305
- function getSnapAlign(ctx, props$1) {
306
- const { snapAlign = "start", index } = props$1;
302
+ function getSnapAlign(ctx, props) {
303
+ const { snapAlign = "start", index } = props;
307
304
  const perMove = ctx.slidesPerMove === "auto" ? Math.floor(ctx.slidesPerPage) : ctx.slidesPerMove;
308
305
  return (index + perMove) % perMove === 0 ? snapAlign : void 0;
309
306
  }
310
-
311
307
  //#endregion
312
308
  //#region src/machine.ts
313
309
  const DEFAULT_SLIDES_PER_PAGE = 1;
@@ -398,11 +394,11 @@ function machine(userContext) {
398
394
  slidesInView: []
399
395
  },
400
396
  computed: {
401
- isRtl: (ctx$1) => ctx$1.dir === "rtl",
402
- isHorizontal: (ctx$1) => ctx$1.orientation === "horizontal",
403
- canScrollNext: (ctx$1) => ctx$1.loop || ctx$1.page < ctx$1.pageSnapPoints.length - 1,
404
- canScrollPrev: (ctx$1) => ctx$1.loop || ctx$1.page > 0,
405
- autoplayInterval: (ctx$1) => isObject(ctx$1.autoplay) ? ctx$1.autoplay.delay : 4e3
397
+ isRtl: (ctx) => ctx.dir === "rtl",
398
+ isHorizontal: (ctx) => ctx.orientation === "horizontal",
399
+ canScrollNext: (ctx) => ctx.loop || ctx.page < ctx.pageSnapPoints.length - 1,
400
+ canScrollPrev: (ctx) => ctx.loop || ctx.page > 0,
401
+ autoplayInterval: (ctx) => isObject(ctx.autoplay) ? ctx.autoplay.delay : 4e3
406
402
  },
407
403
  watch: {
408
404
  slidesPerPage: ["setSnapPoints"],
@@ -456,11 +452,7 @@ function machine(userContext) {
456
452
  target: "autoplay",
457
453
  actions: ["invokeAutoplayStart"]
458
454
  },
459
- "INVIEW.SET": {
460
- target: "idle",
461
- internal: false,
462
- actions: ["setSlidesInView"]
463
- }
455
+ "INVIEW.SET": { actions: ["setSlidesInView"] }
464
456
  }
465
457
  },
466
458
  dragging: {
@@ -472,11 +464,7 @@ function machine(userContext) {
472
464
  target: "idle",
473
465
  actions: ["endDragging", "invokeDraggingEnd"]
474
466
  },
475
- "INVIEW.SET": {
476
- target: "dragging",
477
- internal: false,
478
- actions: ["setSlidesInView"]
479
- }
467
+ "INVIEW.SET": { actions: ["setSlidesInView"] }
480
468
  }
481
469
  },
482
470
  autoplay: {
@@ -489,26 +477,22 @@ function machine(userContext) {
489
477
  actions: ["invokeDragStart"]
490
478
  },
491
479
  "AUTOPLAY.PAUSE": "idle",
492
- "INVIEW.SET": {
493
- target: "autoplay",
494
- internal: false,
495
- actions: ["setSlidesInView"]
496
- }
480
+ "INVIEW.SET": { actions: ["setSlidesInView"] }
497
481
  }
498
482
  }
499
483
  }
500
484
  }, {
501
485
  activities: {
502
- trackSlideMutation(ctx$1, _evt, { send }) {
503
- return ensureItemGroupEl(ctx$1, (el) => {
504
- const observer = new (dom.getWin(ctx$1)).MutationObserver(() => {
486
+ trackSlideMutation(ctx, _evt, { send }) {
487
+ return ensureItemGroupEl(ctx, (el) => {
488
+ const observer = new (dom.getWin(ctx)).MutationObserver(() => {
505
489
  send({
506
490
  type: "SNAP.REFRESH",
507
491
  src: "slide.mutation"
508
492
  });
509
- dom.syncTabIndex(ctx$1);
493
+ dom.syncTabIndex(ctx);
510
494
  });
511
- dom.syncTabIndex(ctx$1);
495
+ dom.syncTabIndex(ctx);
512
496
  observer.observe(el, {
513
497
  childList: true,
514
498
  subtree: true
@@ -516,60 +500,61 @@ function machine(userContext) {
516
500
  return () => observer.disconnect();
517
501
  });
518
502
  },
519
- trackSlideResize(ctx$1, _evt, { send }) {
520
- return ensureItemGroupEl(ctx$1, () => {
521
- const observer = new (dom.getWin(ctx$1)).ResizeObserver(() => {
503
+ trackSlideResize(ctx, _evt, { send }) {
504
+ return ensureItemGroupEl(ctx, () => {
505
+ const observer = new (dom.getWin(ctx)).ResizeObserver(() => {
522
506
  send({
523
507
  type: "SNAP.REFRESH",
524
508
  src: "slide.resize"
525
509
  });
526
510
  });
527
- dom.getItemEls(ctx$1).forEach((slide) => observer.observe(slide));
511
+ dom.getItemEls(ctx).forEach((slide) => observer.observe(slide));
528
512
  return () => observer.disconnect();
529
513
  });
530
514
  },
531
- trackSlideIntersections(ctx$1, _evt, { send }) {
532
- return ensureItemGroupEl(ctx$1, (el) => {
533
- const observer = new (dom.getWin(ctx$1)).IntersectionObserver((entries) => {
534
- const nextSlides = uniq(entries.reduce((acc, entry) => {
515
+ trackSlideIntersections(ctx, _evt, { send }) {
516
+ return ensureItemGroupEl(ctx, (el) => {
517
+ const observer = new (dom.getWin(ctx)).IntersectionObserver((entries) => {
518
+ const slidesInView = entries.reduce((acc, entry) => {
535
519
  const target = entry.target;
536
520
  const index = Number(target.dataset.index ?? "-1");
537
521
  if (index == null || Number.isNaN(index) || index === -1) return acc;
538
522
  return entry.isIntersecting ? add(acc, index) : remove(acc, index);
539
- }, ctx$1.slidesInView));
540
- if (isEqual(ctx$1.slidesInView, nextSlides)) return;
523
+ }, ctx.slidesInView);
524
+ const nextSlides = uniq(slidesInView);
525
+ if (isEqual(ctx.slidesInView, nextSlides)) return;
541
526
  send({
542
527
  type: "INVIEW.SET",
543
528
  slidesInView: nextSlides
544
529
  });
545
530
  }, {
546
531
  root: el,
547
- threshold: ctx$1.inViewThreshold
532
+ threshold: ctx.inViewThreshold
548
533
  });
549
- dom.getItemEls(ctx$1).forEach((slide) => observer.observe(slide));
534
+ dom.getItemEls(ctx).forEach((slide) => observer.observe(slide));
550
535
  return () => observer.disconnect();
551
536
  });
552
537
  },
553
- trackScroll(ctx$1) {
554
- return ensureItemGroupEl(ctx$1, (el) => {
538
+ trackScroll(ctx) {
539
+ return ensureItemGroupEl(ctx, (el) => {
555
540
  const onScrollEnd = () => {
556
- if (ctx$1.slidesInView.length === 0) return;
557
- const scrollPosition = ctx$1.isHorizontal ? el.scrollLeft : el.scrollTop;
558
- const page = ctx$1.pageSnapPoints.findIndex((point) => Math.abs(point - scrollPosition) < 1);
541
+ if (ctx.slidesInView.length === 0) return;
542
+ const scrollPosition = ctx.isHorizontal ? el.scrollLeft : el.scrollTop;
543
+ const page = ctx.pageSnapPoints.findIndex((point) => Math.abs(point - scrollPosition) < 1);
559
544
  if (page === -1) return;
560
- set.page(ctx$1, page);
545
+ set.page(ctx, page);
561
546
  };
562
547
  const onScroll = () => {
563
- clearTimeout(ctx$1.timeoutRef.current);
564
- ctx$1.timeoutRef.current = setTimeout(() => {
548
+ clearTimeout(ctx.timeoutRef.current);
549
+ ctx.timeoutRef.current = setTimeout(() => {
565
550
  onScrollEnd?.();
566
551
  }, 150);
567
552
  };
568
553
  return addDomEvent(el, "scroll", onScroll, { passive: true });
569
554
  });
570
555
  },
571
- trackDocumentVisibility(ctx$1, _evt, { send }) {
572
- const doc = dom.getDoc(ctx$1);
556
+ trackDocumentVisibility(ctx, _evt, { send }) {
557
+ const doc = dom.getDoc(ctx);
573
558
  const onVisibilityChange = () => {
574
559
  if (doc.visibilityState === "visible") return;
575
560
  send({
@@ -579,8 +564,9 @@ function machine(userContext) {
579
564
  };
580
565
  return addDomEvent(doc, "visibilitychange", onVisibilityChange);
581
566
  },
582
- trackPointerMove(ctx$1, _evt, { send }) {
583
- return trackPointerMove(dom.getDoc(ctx$1), {
567
+ trackPointerMove(ctx, _evt, { send }) {
568
+ const doc = dom.getDoc(ctx);
569
+ return trackPointerMove(doc, {
584
570
  onPointerMove({ event }) {
585
571
  send({
586
572
  type: "DRAGGING",
@@ -595,68 +581,69 @@ function machine(userContext) {
595
581
  }
596
582
  },
597
583
  actions: {
598
- resetScrollPosition(ctx$1) {
599
- const el = dom.getItemGroupEl(ctx$1);
584
+ resetScrollPosition(ctx) {
585
+ const el = dom.getItemGroupEl(ctx);
600
586
  if (!el) return;
601
587
  el.scrollTo(0, 0);
602
588
  },
603
- clearScrollEndTimer(ctx$1) {
604
- if (ctx$1.timeoutRef.current == null) return;
605
- clearTimeout(ctx$1.timeoutRef.current);
606
- ctx$1.timeoutRef.current = void 0;
589
+ clearScrollEndTimer(ctx) {
590
+ if (ctx.timeoutRef.current == null) return;
591
+ clearTimeout(ctx.timeoutRef.current);
592
+ ctx.timeoutRef.current = void 0;
607
593
  },
608
- scrollToPage(ctx$1, evt) {
594
+ scrollToPage(ctx, evt) {
609
595
  const behavior = evt.instant ? "instant" : "smooth";
610
- const index = clamp(ctx$1.page ?? 0, 0, ctx$1.pageSnapPoints.length - 1);
611
- const el = dom.getItemGroupEl(ctx$1);
612
- const axis = ctx$1.isHorizontal ? "left" : "top";
596
+ const index = clamp(ctx.page ?? 0, 0, ctx.pageSnapPoints.length - 1);
597
+ const el = dom.getItemGroupEl(ctx);
598
+ const axis = ctx.isHorizontal ? "left" : "top";
613
599
  el.scrollTo({
614
- [axis]: ctx$1.pageSnapPoints[index],
600
+ [axis]: ctx.pageSnapPoints[index],
615
601
  behavior
616
602
  });
617
603
  },
618
- setNextPage(ctx$1) {
619
- const page = nextIndex(ctx$1.pageSnapPoints, ctx$1.page, { loop: ctx$1.loop });
620
- set.page(ctx$1, page);
604
+ setNextPage(ctx) {
605
+ const page = nextIndex(ctx.pageSnapPoints, ctx.page, { loop: ctx.loop });
606
+ set.page(ctx, page);
621
607
  },
622
- setPrevPage(ctx$1) {
623
- const page = prevIndex(ctx$1.pageSnapPoints, ctx$1.page, { loop: ctx$1.loop });
624
- set.page(ctx$1, page);
608
+ setPrevPage(ctx) {
609
+ const page = prevIndex(ctx.pageSnapPoints, ctx.page, { loop: ctx.loop });
610
+ set.page(ctx, page);
625
611
  },
626
- setMatchingPage(ctx$1, evt) {
627
- const snapPoint = findSnapPoint(dom.getItemGroupEl(ctx$1), ctx$1.isHorizontal ? "x" : "y", (node) => node.dataset.index === evt.index.toString());
612
+ setMatchingPage(ctx, evt) {
613
+ const snapPoint = findSnapPoint(dom.getItemGroupEl(ctx), ctx.isHorizontal ? "x" : "y", (node) => node.dataset.index === evt.index.toString());
628
614
  if (snapPoint == null) return;
629
- const page = ctx$1.pageSnapPoints.indexOf(snapPoint);
630
- set.page(ctx$1, page);
615
+ const page = ctx.pageSnapPoints.indexOf(snapPoint);
616
+ set.page(ctx, page);
631
617
  },
632
- setPage(ctx$1, evt) {
633
- set.page(ctx$1, evt.index ?? ctx$1.page);
618
+ setPage(ctx, evt) {
619
+ set.page(ctx, evt.index ?? ctx.page);
634
620
  },
635
- clampPage(ctx$1) {
636
- const index = clamp(ctx$1.page, 0, ctx$1.pageSnapPoints.length - 1);
637
- set.page(ctx$1, index);
621
+ clampPage(ctx) {
622
+ const index = clamp(ctx.page, 0, ctx.pageSnapPoints.length - 1);
623
+ set.page(ctx, index);
638
624
  },
639
- setSnapPoints(ctx$1) {
625
+ setSnapPoints(ctx) {
640
626
  queueMicrotask(() => {
641
- const scrollSnapPoints = getScrollSnapPositions(dom.getItemGroupEl(ctx$1));
642
- ctx$1.pageSnapPoints = ctx$1.isHorizontal ? scrollSnapPoints.x : scrollSnapPoints.y;
627
+ const el = dom.getItemGroupEl(ctx);
628
+ const scrollSnapPoints = getScrollSnapPositions(el);
629
+ ctx.pageSnapPoints = ctx.isHorizontal ? scrollSnapPoints.x : scrollSnapPoints.y;
643
630
  });
644
631
  },
645
- disableScrollSnap(ctx$1) {
646
- const el = dom.getItemGroupEl(ctx$1);
632
+ disableScrollSnap(ctx) {
633
+ const el = dom.getItemGroupEl(ctx);
647
634
  const styles = getComputedStyle(el);
648
635
  el.dataset.scrollSnapType = styles.getPropertyValue("scroll-snap-type");
649
636
  el.style.setProperty("scroll-snap-type", "none");
650
637
  },
651
- scrollSlides(ctx$1, evt) {
652
- dom.getItemGroupEl(ctx$1).scrollBy({
638
+ scrollSlides(ctx, evt) {
639
+ dom.getItemGroupEl(ctx).scrollBy({
653
640
  left: evt.left,
654
641
  top: evt.top,
655
642
  behavior: "instant"
656
643
  });
657
644
  },
658
- endDragging(ctx$1) {
659
- const el = dom.getItemGroupEl(ctx$1);
645
+ endDragging(ctx) {
646
+ const el = dom.getItemGroupEl(ctx);
660
647
  const startX = el.scrollLeft;
661
648
  const startY = el.scrollTop;
662
649
  const snapPositions = getScrollSnapPositions(el);
@@ -678,62 +665,61 @@ function machine(userContext) {
678
665
  }
679
666
  });
680
667
  },
681
- focusIndicatorEl(ctx$1, evt) {
668
+ focusIndicatorEl(ctx, evt) {
682
669
  if (evt.src !== "indicator") return;
683
- const el = dom.getActiveIndicatorEl(ctx$1);
670
+ const el = dom.getActiveIndicatorEl(ctx);
684
671
  raf(() => el.focus({ preventScroll: true }));
685
672
  },
686
- invokeDragStart(ctx$1) {
687
- ctx$1.onDragStatusChange?.({
673
+ invokeDragStart(ctx) {
674
+ ctx.onDragStatusChange?.({
688
675
  type: "dragging.start",
689
676
  isDragging: true,
690
- page: ctx$1.page
677
+ page: ctx.page
691
678
  });
692
679
  },
693
- invokeDragging(ctx$1) {
694
- ctx$1.onDragStatusChange?.({
680
+ invokeDragging(ctx) {
681
+ ctx.onDragStatusChange?.({
695
682
  type: "dragging",
696
683
  isDragging: true,
697
- page: ctx$1.page
684
+ page: ctx.page
698
685
  });
699
686
  },
700
- invokeDraggingEnd(ctx$1) {
701
- ctx$1.onDragStatusChange?.({
687
+ invokeDraggingEnd(ctx) {
688
+ ctx.onDragStatusChange?.({
702
689
  type: "dragging.end",
703
690
  isDragging: false,
704
- page: ctx$1.page
691
+ page: ctx.page
705
692
  });
706
693
  },
707
- invokeAutoplay(ctx$1) {
708
- ctx$1.onAutoplayStatusChange?.({
694
+ invokeAutoplay(ctx) {
695
+ ctx.onAutoplayStatusChange?.({
709
696
  type: "autoplay",
710
697
  isPlaying: true,
711
- page: ctx$1.page
698
+ page: ctx.page
712
699
  });
713
700
  },
714
- invokeAutoplayStart(ctx$1) {
715
- ctx$1.onAutoplayStatusChange?.({
701
+ invokeAutoplayStart(ctx) {
702
+ ctx.onAutoplayStatusChange?.({
716
703
  type: "autoplay.start",
717
704
  isPlaying: true,
718
- page: ctx$1.page
705
+ page: ctx.page
719
706
  });
720
707
  },
721
- invokeAutoplayEnd(ctx$1) {
722
- ctx$1.onAutoplayStatusChange?.({
708
+ invokeAutoplayEnd(ctx) {
709
+ ctx.onAutoplayStatusChange?.({
723
710
  type: "autoplay.stop",
724
711
  isPlaying: false,
725
- page: ctx$1.page
712
+ page: ctx.page
726
713
  });
727
714
  },
728
- setSlidesInView(ctx$1, evt) {
715
+ setSlidesInView(ctx, evt) {
729
716
  if (evt.type !== "INVIEW.SET") return;
730
- ctx$1.slidesInView = evt.slidesInView;
717
+ ctx.slidesInView = evt.slidesInView;
731
718
  }
732
719
  },
733
- delays: { AUTOPLAY_INTERVAL: (ctx$1) => ctx$1.autoplayInterval }
720
+ delays: { AUTOPLAY_INTERVAL: (ctx) => ctx.autoplayInterval }
734
721
  });
735
722
  }
736
-
737
723
  //#endregion
738
724
  //#region src/props.ts
739
725
  const props = createProps()([
@@ -764,6 +750,5 @@ const indicatorProps = createProps()(["index", "readOnly"]);
764
750
  const splitIndicatorProps = createSplitProps(indicatorProps);
765
751
  const itemProps = createProps()(["index", "snapAlign"]);
766
752
  const splitItemProps = createSplitProps(itemProps);
767
-
768
753
  //#endregion
769
- export { anatomy, connect, indicatorProps, itemProps, machine, props, splitIndicatorProps, splitItemProps, splitProps };
754
+ export { anatomy, connect, indicatorProps, itemProps, machine, props, splitIndicatorProps, splitItemProps, splitProps };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@destyler/carousel",
3
3
  "type": "module",
4
- "version": "0.2.11",
4
+ "version": "0.2.12",
5
5
  "description": "an interactive slideshow component for cycling through elements.",
6
6
  "author": "Elone Hoo <elonehoo@gmail.com>",
7
7
  "license": "MIT",
@@ -22,12 +22,12 @@
22
22
  "dist"
23
23
  ],
24
24
  "dependencies": {
25
- "@destyler/anatomy": "0.2.11",
26
- "@destyler/dom": "0.2.11",
27
- "@destyler/scroll-snap": "0.2.11",
28
- "@destyler/xstate": "0.2.11",
29
- "@destyler/utils": "0.2.11",
30
- "@destyler/types": "0.2.11"
25
+ "@destyler/anatomy": "0.2.12",
26
+ "@destyler/dom": "0.2.12",
27
+ "@destyler/scroll-snap": "0.2.12",
28
+ "@destyler/types": "0.2.12",
29
+ "@destyler/utils": "0.2.12",
30
+ "@destyler/xstate": "0.2.12"
31
31
  },
32
32
  "publishConfig": {
33
33
  "access": "public"