@plaidev/karte-action-sdk 1.1.268-29088092.6390e271 → 1.1.268-29089896.0dceea5e

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.
@@ -5464,11 +5464,11 @@ const LAYOUT_ALIGN = ['flex-start', 'center', 'flex-end', 'stretch'];
5464
5464
  const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
5465
5465
 
5466
5466
  var root_1$2 = $.template(`<button><i></i></button>`);
5467
- var root$d = $.template(`<div class="slider svelte-1slel1d"><ul class="slider-list svelte-1slel1d"><!></ul> <div></div></div>`);
5467
+ var root$d = $.template(`<div class="slider svelte-1rafop1"><div class="slider-container svelte-1rafop1"><ul class="slider-list svelte-1rafop1"><!></ul></div> <div></div></div>`);
5468
5468
 
5469
5469
  const $$css$e = {
5470
- hash: 'svelte-1slel1d',
5471
- code: '.slider-list.svelte-1slel1d {-webkit-user-drag:none;margin:0;padding:0;list-style:none;}'
5470
+ hash: 'svelte-1rafop1',
5471
+ code: '.slider.svelte-1rafop1 {width:100%;overflow:hidden;}.slider-container.svelte-1rafop1 {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-1rafop1 {-webkit-user-drag:none;margin:0;padding:0;list-style:none;}'
5472
5472
  };
5473
5473
 
5474
5474
  function Slider($$anchor, $$props) {
@@ -5477,7 +5477,7 @@ function Slider($$anchor, $$props) {
5477
5477
 
5478
5478
  const indicators = $.mutable_state();
5479
5479
  const itemWidthPercentage = $.mutable_state();
5480
- const style = $.mutable_state();
5480
+ const baseContainerStyle = $.mutable_state();
5481
5481
  const containerStyle = $.mutable_state();
5482
5482
  const indicatorListStyle = $.mutable_state();
5483
5483
  const indicatorItemStyle = $.mutable_state();
@@ -5492,27 +5492,34 @@ function Slider($$anchor, $$props) {
5492
5492
  let isDragging = false;
5493
5493
  let startX = 0;
5494
5494
  let movedX = $.mutable_state(null);
5495
- let childCount = $.mutable_state($.get(slotElement)?.children?.length ?? 0);
5496
-
5497
- const calcTransformX = (index, itemCount, _movedX) => {
5498
- if (index === 0) return undefined;
5499
-
5500
- const movingX = (() => {
5501
- let result = 0;
5502
- const itemWidth = $.get(itemWidthPercentage);
5503
- const itemMargin = (100 - $.get(itemWidthPercentage)) / 2;
5504
-
5505
- const movingMap = [...Array($.get(currentIndex) + 1)].map((_, index) => {
5506
- if (index === 0) return 0;
5507
- if (index === 1 || index === itemCount - 1) return itemWidth - itemMargin;
5508
- return itemWidth;
5509
- });
5495
+ let childCount = $.mutable_state(0);
5496
+ let transformX = $.mutable_state();
5497
+
5498
+ console.log('transformX', $.get(transformX));
5499
+
5500
+ const computeTransformX = (
5501
+ index,
5502
+ itemCount,
5503
+ movedX,
5504
+ itemWidthPercentage,
5505
+ gap
5506
+ ) => {
5507
+ if (index === 0) return;
5508
+
5509
+ let result = 0;
5510
+ const itemMargin = (100 - itemWidthPercentage) / 2;
5511
+
5512
+ for (let i = 1; i <= index; i++) {
5513
+ if (i === 1 || i === itemCount - 1) {
5514
+ result += itemWidthPercentage - itemMargin;
5515
+ } else {
5516
+ result += itemWidthPercentage;
5517
+ }
5518
+ }
5510
5519
 
5511
- movingMap.forEach((value) => result += value);
5512
- return result;
5513
- })();
5520
+ const moved = movedX ? ` + ${-movedX}px` : '';
5514
5521
 
5515
- return `translateX(calc(-${movingX}% - ${(props().gap ?? 0) * index}px + ${($.get(movedX) ?? 0) * -1}px))`;
5522
+ return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
5516
5523
  };
5517
5524
 
5518
5525
  const handleClickIndicator = (index) => {
@@ -5528,6 +5535,8 @@ function Slider($$anchor, $$props) {
5528
5535
  };
5529
5536
 
5530
5537
  const toNext = () => {
5538
+ console.log('toNext');
5539
+
5531
5540
  if ($.get(currentIndex) < $.get(childCount) - 1) {
5532
5541
  $.set(currentIndex, $.get(currentIndex) + 1);
5533
5542
  } else if (props().loop) {
@@ -5597,34 +5606,47 @@ function Slider($$anchor, $$props) {
5597
5606
  $.set(movedX, null);
5598
5607
 
5599
5608
  if (isDragging) {
5600
- e.preventDefault();
5609
+ // e.preventDefault()
5601
5610
  e.stopPropagation();
5602
5611
  }
5603
5612
 
5604
5613
  document.removeEventListener('mousemove', handleMousemove);
5605
5614
  document.removeEventListener('mouseup', handleMouseup);
5615
+ document.removeEventListener('click', handleClick);
5606
5616
  };
5607
5617
 
5608
5618
  const handleMousedown = (e) => {
5609
5619
  startX = e.clientX;
5610
5620
  isDragging = false;
5611
5621
  document.addEventListener('mousemove', handleMousemove, { passive: true });
5612
- document.addEventListener('mouseup', handleMouseup, { passive: true });
5622
+ document.addEventListener('mouseup', handleMouseup, { passive: false });
5613
5623
  document.addEventListener('click', handleClick, { capture: true });
5614
5624
  };
5615
5625
 
5616
5626
  onMount$1(() => {
5617
5627
  setChildCount();
5618
- setInterval(setChildCount, 300);
5628
+
5629
+ let autoSlideTimer;
5619
5630
 
5620
5631
  if (props().auto) {
5621
- setInterval(
5632
+ autoSlideTimer = setInterval(
5622
5633
  () => {
5623
5634
  toNext();
5624
5635
  },
5625
5636
  props().interval ?? 5000
5626
5637
  );
5627
5638
  }
5639
+
5640
+ return () => {
5641
+ // clearInterval(childCountTimer)
5642
+ if (autoSlideTimer) clearInterval(autoSlideTimer);
5643
+ };
5644
+ });
5645
+
5646
+ $.legacy_pre_effect(() => ($.get(slotElement)), () => {
5647
+ if ($.get(slotElement)) {
5648
+ $.set(childCount, $.get(slotElement).children.length);
5649
+ }
5628
5650
  });
5629
5651
 
5630
5652
  $.legacy_pre_effect(
@@ -5644,20 +5666,27 @@ function Slider($$anchor, $$props) {
5644
5666
  $.set(itemWidthPercentage, props().itemWidthPercentage ?? 100);
5645
5667
  });
5646
5668
 
5647
- $.legacy_pre_effect(() => (objToStyle), () => {
5648
- $.set(style, objToStyle({ overflow: 'hidden', width: '100%' }));
5649
- });
5669
+ $.legacy_pre_effect(
5670
+ () => (
5671
+ $.get(currentIndex),
5672
+ $.get(childCount),
5673
+ $.get(movedX),
5674
+ $.get(itemWidthPercentage),
5675
+ $.deep_read_state(props())
5676
+ ),
5677
+ () => {
5678
+ $.set(transformX, computeTransformX($.get(currentIndex), $.get(childCount), $.get(movedX), $.get(itemWidthPercentage), props().gap ?? 0));
5679
+ }
5680
+ );
5650
5681
 
5651
5682
  $.legacy_pre_effect(
5652
5683
  () => (
5653
5684
  $.deep_read_state(props()),
5654
5685
  $.get(itemWidthPercentage),
5655
- $.get(movedX),
5656
- $.get(currentIndex),
5657
- $.get(childCount)
5686
+ $.get(movedX)
5658
5687
  ),
5659
5688
  () => {
5660
- $.set(containerStyle, objToStyle({
5689
+ $.set(baseContainerStyle, {
5661
5690
  display: 'grid',
5662
5691
  // marginInline: `-${props.gap}px`,
5663
5692
  gap: `${props().gap}px`,
@@ -5666,8 +5695,20 @@ function Slider($$anchor, $$props) {
5666
5695
  gridAutoColumns: `minmax(${$.get(itemWidthPercentage)}%, 1fr)`,
5667
5696
  flexShrink: 0,
5668
5697
  transition: $.get(movedX) === null ? 'transform 0.5s' : undefined,
5669
- transform: calcTransformX($.get(currentIndex), $.get(childCount), $.get(movedX)),
5670
5698
  userSelect: 'none'
5699
+ });
5700
+ }
5701
+ );
5702
+
5703
+ $.legacy_pre_effect(
5704
+ () => (
5705
+ $.get(baseContainerStyle),
5706
+ $.get(transformX)
5707
+ ),
5708
+ () => {
5709
+ $.set(containerStyle, objToStyle({
5710
+ ...$.get(baseContainerStyle),
5711
+ transform: $.get(transformX)
5671
5712
  }));
5672
5713
  }
5673
5714
  );
@@ -5696,16 +5737,18 @@ function Slider($$anchor, $$props) {
5696
5737
  $.init();
5697
5738
 
5698
5739
  var div = root$d();
5699
- var ul = $.child(div);
5740
+ var div_1 = $.child(div);
5741
+ var ul = $.child(div_1);
5700
5742
  var node = $.child(ul);
5701
5743
 
5702
5744
  $.slot(node, $$props, 'default', {}, null);
5703
5745
  $.reset(ul);
5704
5746
  $.bind_this(ul, ($$value) => $.set(slotElement, $$value), () => $.get(slotElement));
5747
+ $.reset(div_1);
5705
5748
 
5706
- var div_1 = $.sibling(ul, 2);
5749
+ var div_2 = $.sibling(div_1, 2);
5707
5750
 
5708
- $.each(div_1, 5, () => $.get(indicators) ?? [], $.index, ($$anchor, indicator, i) => {
5751
+ $.each(div_2, 5, () => $.get(indicators) ?? [], $.index, ($$anchor, indicator, i) => {
5709
5752
  var button = root_1$2();
5710
5753
  var i_1 = $.child(button);
5711
5754
 
@@ -5736,15 +5779,14 @@ function Slider($$anchor, $$props) {
5736
5779
  $.append($$anchor, button);
5737
5780
  });
5738
5781
 
5739
- $.reset(div_1);
5782
+ $.reset(div_2);
5740
5783
  $.reset(div);
5741
5784
 
5742
5785
  $.template_effect(
5743
5786
  ($0) => {
5744
5787
  $.set_attribute(div, 'data-layer-id', layerId());
5745
- $.set_style(div, $.get(style));
5746
5788
  $.set_style(ul, $0);
5747
- $.set_style(div_1, $.get(indicatorListStyle));
5789
+ $.set_style(div_2, $.get(indicatorListStyle));
5748
5790
  },
5749
5791
  [
5750
5792
  () => [
@@ -5755,8 +5797,8 @@ function Slider($$anchor, $$props) {
5755
5797
  $.derived_safe_equal
5756
5798
  );
5757
5799
 
5758
- $.event('mousedown', ul, handleMousedown);
5759
- $.event('touchstart', ul, handleTouchstart);
5800
+ $.event('mousedown', div_1, handleMousedown);
5801
+ $.event('touchstart', div_1, handleTouchstart);
5760
5802
  $.append($$anchor, div);
5761
5803
  $.pop();
5762
5804
  }
@@ -5430,11 +5430,11 @@ const LAYOUT_ALIGN = ['flex-start', 'center', 'flex-end', 'stretch'];
5430
5430
  const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
5431
5431
 
5432
5432
  var root_1$2 = $.template(`<button><i></i></button>`);
5433
- var root$d = $.template(`<div class="slider svelte-1slel1d"><ul class="slider-list svelte-1slel1d"><!></ul> <div></div></div>`);
5433
+ var root$d = $.template(`<div class="slider svelte-1rafop1"><div class="slider-container svelte-1rafop1"><ul class="slider-list svelte-1rafop1"><!></ul></div> <div></div></div>`);
5434
5434
 
5435
5435
  const $$css$e = {
5436
- hash: 'svelte-1slel1d',
5437
- code: '.slider-list.svelte-1slel1d {-webkit-user-drag:none;margin:0;padding:0;list-style:none;}'
5436
+ hash: 'svelte-1rafop1',
5437
+ code: '.slider.svelte-1rafop1 {width:100%;overflow:hidden;}.slider-container.svelte-1rafop1 {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-1rafop1 {-webkit-user-drag:none;margin:0;padding:0;list-style:none;}'
5438
5438
  };
5439
5439
 
5440
5440
  function Slider($$anchor, $$props) {
@@ -5443,7 +5443,7 @@ function Slider($$anchor, $$props) {
5443
5443
 
5444
5444
  const indicators = $.mutable_state();
5445
5445
  const itemWidthPercentage = $.mutable_state();
5446
- const style = $.mutable_state();
5446
+ const baseContainerStyle = $.mutable_state();
5447
5447
  const containerStyle = $.mutable_state();
5448
5448
  const indicatorListStyle = $.mutable_state();
5449
5449
  const indicatorItemStyle = $.mutable_state();
@@ -5458,27 +5458,34 @@ function Slider($$anchor, $$props) {
5458
5458
  let isDragging = false;
5459
5459
  let startX = 0;
5460
5460
  let movedX = $.mutable_state(null);
5461
- let childCount = $.mutable_state($.get(slotElement)?.children?.length ?? 0);
5462
-
5463
- const calcTransformX = (index, itemCount, _movedX) => {
5464
- if (index === 0) return undefined;
5465
-
5466
- const movingX = (() => {
5467
- let result = 0;
5468
- const itemWidth = $.get(itemWidthPercentage);
5469
- const itemMargin = (100 - $.get(itemWidthPercentage)) / 2;
5470
-
5471
- const movingMap = [...Array($.get(currentIndex) + 1)].map((_, index) => {
5472
- if (index === 0) return 0;
5473
- if (index === 1 || index === itemCount - 1) return itemWidth - itemMargin;
5474
- return itemWidth;
5475
- });
5461
+ let childCount = $.mutable_state(0);
5462
+ let transformX = $.mutable_state();
5463
+
5464
+ console.log('transformX', $.get(transformX));
5465
+
5466
+ const computeTransformX = (
5467
+ index,
5468
+ itemCount,
5469
+ movedX,
5470
+ itemWidthPercentage,
5471
+ gap
5472
+ ) => {
5473
+ if (index === 0) return;
5474
+
5475
+ let result = 0;
5476
+ const itemMargin = (100 - itemWidthPercentage) / 2;
5477
+
5478
+ for (let i = 1; i <= index; i++) {
5479
+ if (i === 1 || i === itemCount - 1) {
5480
+ result += itemWidthPercentage - itemMargin;
5481
+ } else {
5482
+ result += itemWidthPercentage;
5483
+ }
5484
+ }
5476
5485
 
5477
- movingMap.forEach((value) => result += value);
5478
- return result;
5479
- })();
5486
+ const moved = movedX ? ` + ${-movedX}px` : '';
5480
5487
 
5481
- return `translateX(calc(-${movingX}% - ${(props().gap ?? 0) * index}px + ${($.get(movedX) ?? 0) * -1}px))`;
5488
+ return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
5482
5489
  };
5483
5490
 
5484
5491
  const handleClickIndicator = (index) => {
@@ -5494,6 +5501,8 @@ function Slider($$anchor, $$props) {
5494
5501
  };
5495
5502
 
5496
5503
  const toNext = () => {
5504
+ console.log('toNext');
5505
+
5497
5506
  if ($.get(currentIndex) < $.get(childCount) - 1) {
5498
5507
  $.set(currentIndex, $.get(currentIndex) + 1);
5499
5508
  } else if (props().loop) {
@@ -5563,34 +5572,47 @@ function Slider($$anchor, $$props) {
5563
5572
  $.set(movedX, null);
5564
5573
 
5565
5574
  if (isDragging) {
5566
- e.preventDefault();
5575
+ // e.preventDefault()
5567
5576
  e.stopPropagation();
5568
5577
  }
5569
5578
 
5570
5579
  document.removeEventListener('mousemove', handleMousemove);
5571
5580
  document.removeEventListener('mouseup', handleMouseup);
5581
+ document.removeEventListener('click', handleClick);
5572
5582
  };
5573
5583
 
5574
5584
  const handleMousedown = (e) => {
5575
5585
  startX = e.clientX;
5576
5586
  isDragging = false;
5577
5587
  document.addEventListener('mousemove', handleMousemove, { passive: true });
5578
- document.addEventListener('mouseup', handleMouseup, { passive: true });
5588
+ document.addEventListener('mouseup', handleMouseup, { passive: false });
5579
5589
  document.addEventListener('click', handleClick, { capture: true });
5580
5590
  };
5581
5591
 
5582
5592
  onMount$1(() => {
5583
5593
  setChildCount();
5584
- setInterval(setChildCount, 300);
5594
+
5595
+ let autoSlideTimer;
5585
5596
 
5586
5597
  if (props().auto) {
5587
- setInterval(
5598
+ autoSlideTimer = setInterval(
5588
5599
  () => {
5589
5600
  toNext();
5590
5601
  },
5591
5602
  props().interval ?? 5000
5592
5603
  );
5593
5604
  }
5605
+
5606
+ return () => {
5607
+ // clearInterval(childCountTimer)
5608
+ if (autoSlideTimer) clearInterval(autoSlideTimer);
5609
+ };
5610
+ });
5611
+
5612
+ $.legacy_pre_effect(() => ($.get(slotElement)), () => {
5613
+ if ($.get(slotElement)) {
5614
+ $.set(childCount, $.get(slotElement).children.length);
5615
+ }
5594
5616
  });
5595
5617
 
5596
5618
  $.legacy_pre_effect(
@@ -5610,20 +5632,27 @@ function Slider($$anchor, $$props) {
5610
5632
  $.set(itemWidthPercentage, props().itemWidthPercentage ?? 100);
5611
5633
  });
5612
5634
 
5613
- $.legacy_pre_effect(() => (objToStyle), () => {
5614
- $.set(style, objToStyle({ overflow: 'hidden', width: '100%' }));
5615
- });
5635
+ $.legacy_pre_effect(
5636
+ () => (
5637
+ $.get(currentIndex),
5638
+ $.get(childCount),
5639
+ $.get(movedX),
5640
+ $.get(itemWidthPercentage),
5641
+ $.deep_read_state(props())
5642
+ ),
5643
+ () => {
5644
+ $.set(transformX, computeTransformX($.get(currentIndex), $.get(childCount), $.get(movedX), $.get(itemWidthPercentage), props().gap ?? 0));
5645
+ }
5646
+ );
5616
5647
 
5617
5648
  $.legacy_pre_effect(
5618
5649
  () => (
5619
5650
  $.deep_read_state(props()),
5620
5651
  $.get(itemWidthPercentage),
5621
- $.get(movedX),
5622
- $.get(currentIndex),
5623
- $.get(childCount)
5652
+ $.get(movedX)
5624
5653
  ),
5625
5654
  () => {
5626
- $.set(containerStyle, objToStyle({
5655
+ $.set(baseContainerStyle, {
5627
5656
  display: 'grid',
5628
5657
  // marginInline: `-${props.gap}px`,
5629
5658
  gap: `${props().gap}px`,
@@ -5632,8 +5661,20 @@ function Slider($$anchor, $$props) {
5632
5661
  gridAutoColumns: `minmax(${$.get(itemWidthPercentage)}%, 1fr)`,
5633
5662
  flexShrink: 0,
5634
5663
  transition: $.get(movedX) === null ? 'transform 0.5s' : undefined,
5635
- transform: calcTransformX($.get(currentIndex), $.get(childCount), $.get(movedX)),
5636
5664
  userSelect: 'none'
5665
+ });
5666
+ }
5667
+ );
5668
+
5669
+ $.legacy_pre_effect(
5670
+ () => (
5671
+ $.get(baseContainerStyle),
5672
+ $.get(transformX)
5673
+ ),
5674
+ () => {
5675
+ $.set(containerStyle, objToStyle({
5676
+ ...$.get(baseContainerStyle),
5677
+ transform: $.get(transformX)
5637
5678
  }));
5638
5679
  }
5639
5680
  );
@@ -5662,16 +5703,18 @@ function Slider($$anchor, $$props) {
5662
5703
  $.init();
5663
5704
 
5664
5705
  var div = root$d();
5665
- var ul = $.child(div);
5706
+ var div_1 = $.child(div);
5707
+ var ul = $.child(div_1);
5666
5708
  var node = $.child(ul);
5667
5709
 
5668
5710
  $.slot(node, $$props, 'default', {}, null);
5669
5711
  $.reset(ul);
5670
5712
  $.bind_this(ul, ($$value) => $.set(slotElement, $$value), () => $.get(slotElement));
5713
+ $.reset(div_1);
5671
5714
 
5672
- var div_1 = $.sibling(ul, 2);
5715
+ var div_2 = $.sibling(div_1, 2);
5673
5716
 
5674
- $.each(div_1, 5, () => $.get(indicators) ?? [], $.index, ($$anchor, indicator, i) => {
5717
+ $.each(div_2, 5, () => $.get(indicators) ?? [], $.index, ($$anchor, indicator, i) => {
5675
5718
  var button = root_1$2();
5676
5719
  var i_1 = $.child(button);
5677
5720
 
@@ -5702,15 +5745,14 @@ function Slider($$anchor, $$props) {
5702
5745
  $.append($$anchor, button);
5703
5746
  });
5704
5747
 
5705
- $.reset(div_1);
5748
+ $.reset(div_2);
5706
5749
  $.reset(div);
5707
5750
 
5708
5751
  $.template_effect(
5709
5752
  ($0) => {
5710
5753
  $.set_attribute(div, 'data-layer-id', layerId());
5711
- $.set_style(div, $.get(style));
5712
5754
  $.set_style(ul, $0);
5713
- $.set_style(div_1, $.get(indicatorListStyle));
5755
+ $.set_style(div_2, $.get(indicatorListStyle));
5714
5756
  },
5715
5757
  [
5716
5758
  () => [
@@ -5721,8 +5763,8 @@ function Slider($$anchor, $$props) {
5721
5763
  $.derived_safe_equal
5722
5764
  );
5723
5765
 
5724
- $.event('mousedown', ul, handleMousedown);
5725
- $.event('touchstart', ul, handleTouchstart);
5766
+ $.event('mousedown', div_1, handleMousedown);
5767
+ $.event('touchstart', div_1, handleTouchstart);
5726
5768
  $.append($$anchor, div);
5727
5769
  $.pop();
5728
5770
  }