@plaidev/karte-action-sdk 1.1.268-29089896.0dceea5e → 1.1.268-29090020.0f31d4b5
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/hydrate/index.es.js +92 -73
- package/dist/index.es.js +92 -73
- package/dist/svelte5/hydrate/index.es.js +30 -22
- package/dist/svelte5/index.es.js +30 -22
- package/dist/svelte5/index.front2.es.js +30 -22
- package/package.json +1 -1
package/dist/hydrate/index.es.js
CHANGED
@@ -17452,17 +17452,17 @@ const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
|
|
17452
17452
|
/* src/components-flex/slider/Slider.svelte generated by Svelte v3.53.1 */
|
17453
17453
|
|
17454
17454
|
function add_css$f(target) {
|
17455
|
-
append_styles(target, "svelte-
|
17455
|
+
append_styles(target, "svelte-wwv1o", ".slider.svelte-wwv1o{width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y}.slider-container.svelte-wwv1o{width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y}.slider-list.svelte-wwv1o{-webkit-user-drag:none;margin:0;padding:0;list-style:none;will-change:transform}");
|
17456
17456
|
}
|
17457
17457
|
|
17458
17458
|
function get_each_context$1(ctx, list, i) {
|
17459
17459
|
const child_ctx = ctx.slice();
|
17460
|
-
child_ctx[
|
17461
|
-
child_ctx[
|
17460
|
+
child_ctx[36] = list[i];
|
17461
|
+
child_ctx[38] = i;
|
17462
17462
|
return child_ctx;
|
17463
17463
|
}
|
17464
17464
|
|
17465
|
-
// (
|
17465
|
+
// (192:4) {#each indicators ?? [] as indicator, i}
|
17466
17466
|
function create_each_block$1(ctx) {
|
17467
17467
|
let button;
|
17468
17468
|
let i_1;
|
@@ -17472,7 +17472,7 @@ function create_each_block$1(ctx) {
|
|
17472
17472
|
let dispose;
|
17473
17473
|
|
17474
17474
|
function click_handler() {
|
17475
|
-
return /*click_handler*/ ctx[
|
17475
|
+
return /*click_handler*/ ctx[22](/*i*/ ctx[38]);
|
17476
17476
|
}
|
17477
17477
|
|
17478
17478
|
return {
|
@@ -17493,9 +17493,9 @@ function create_each_block$1(ctx) {
|
|
17493
17493
|
},
|
17494
17494
|
h() {
|
17495
17495
|
attr(i_1, "style", i_1_style_value = objToStyle({
|
17496
|
-
.../*indicatorItemStyle*/ ctx[
|
17496
|
+
.../*indicatorItemStyle*/ ctx[4],
|
17497
17497
|
...{
|
17498
|
-
background: /*indicator*/ ctx[
|
17498
|
+
background: /*indicator*/ ctx[36].isActive ? '#555555' : '#AAAAAA'
|
17499
17499
|
}
|
17500
17500
|
}));
|
17501
17501
|
|
@@ -17518,10 +17518,10 @@ function create_each_block$1(ctx) {
|
|
17518
17518
|
p(new_ctx, dirty) {
|
17519
17519
|
ctx = new_ctx;
|
17520
17520
|
|
17521
|
-
if (dirty[0] & /*indicatorItemStyle, indicators*/
|
17522
|
-
.../*indicatorItemStyle*/ ctx[
|
17521
|
+
if (dirty[0] & /*indicatorItemStyle, indicators*/ 144 && i_1_style_value !== (i_1_style_value = objToStyle({
|
17522
|
+
.../*indicatorItemStyle*/ ctx[4],
|
17523
17523
|
...{
|
17524
|
-
background: /*indicator*/ ctx[
|
17524
|
+
background: /*indicator*/ ctx[36].isActive ? '#555555' : '#AAAAAA'
|
17525
17525
|
}
|
17526
17526
|
}))) {
|
17527
17527
|
attr(i_1, "style", i_1_style_value);
|
@@ -17545,9 +17545,9 @@ function create_fragment$j(ctx) {
|
|
17545
17545
|
let current;
|
17546
17546
|
let mounted;
|
17547
17547
|
let dispose;
|
17548
|
-
const default_slot_template = /*#slots*/ ctx[
|
17549
|
-
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[
|
17550
|
-
let each_value = /*indicators*/ ctx[
|
17548
|
+
const default_slot_template = /*#slots*/ ctx[19].default;
|
17549
|
+
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[18], null);
|
17550
|
+
let each_value = /*indicators*/ ctx[7] ?? [];
|
17551
17551
|
let each_blocks = [];
|
17552
17552
|
|
17553
17553
|
for (let i = 0; i < each_value.length; i += 1) {
|
@@ -17592,12 +17592,12 @@ function create_fragment$j(ctx) {
|
|
17592
17592
|
this.h();
|
17593
17593
|
},
|
17594
17594
|
h() {
|
17595
|
-
attr(ul, "class", "slider-list svelte-
|
17596
|
-
attr(ul, "style", ul_style_value = [/*containerStyle*/ ctx[
|
17597
|
-
attr(div0, "class", "slider-container svelte-
|
17598
|
-
attr(div1, "style", /*indicatorListStyle*/ ctx[
|
17595
|
+
attr(ul, "class", "slider-list svelte-wwv1o");
|
17596
|
+
attr(ul, "style", ul_style_value = [/*containerStyle*/ ctx[6], /*overrideStyle*/ ctx[1]].join(' '));
|
17597
|
+
attr(div0, "class", "slider-container svelte-wwv1o");
|
17598
|
+
attr(div1, "style", /*indicatorListStyle*/ ctx[5]);
|
17599
17599
|
attr(div2, "data-layer-id", /*layerId*/ ctx[0]);
|
17600
|
-
attr(div2, "class", "slider svelte-
|
17600
|
+
attr(div2, "class", "slider svelte-wwv1o");
|
17601
17601
|
},
|
17602
17602
|
m(target, anchor) {
|
17603
17603
|
insert_hydration(target, div2, anchor);
|
@@ -17608,7 +17608,8 @@ function create_fragment$j(ctx) {
|
|
17608
17608
|
default_slot.m(ul, null);
|
17609
17609
|
}
|
17610
17610
|
|
17611
|
-
/*ul_binding*/ ctx[
|
17611
|
+
/*ul_binding*/ ctx[20](ul);
|
17612
|
+
/*div0_binding*/ ctx[21](div0);
|
17612
17613
|
append_hydration(div2, t);
|
17613
17614
|
append_hydration(div2, div1);
|
17614
17615
|
|
@@ -17620,8 +17621,8 @@ function create_fragment$j(ctx) {
|
|
17620
17621
|
|
17621
17622
|
if (!mounted) {
|
17622
17623
|
dispose = [
|
17623
|
-
listen(div0, "mousedown", /*handleMousedown*/ ctx[
|
17624
|
-
listen(div0, "touchstart", /*handleTouchstart*/ ctx[
|
17624
|
+
listen(div0, "mousedown", /*handleMousedown*/ ctx[10]),
|
17625
|
+
listen(div0, "touchstart", /*handleTouchstart*/ ctx[9])
|
17625
17626
|
];
|
17626
17627
|
|
17627
17628
|
mounted = true;
|
@@ -17629,26 +17630,26 @@ function create_fragment$j(ctx) {
|
|
17629
17630
|
},
|
17630
17631
|
p(ctx, dirty) {
|
17631
17632
|
if (default_slot) {
|
17632
|
-
if (default_slot.p && (!current || dirty[0] & /*$$scope*/
|
17633
|
+
if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 262144)) {
|
17633
17634
|
update_slot_base(
|
17634
17635
|
default_slot,
|
17635
17636
|
default_slot_template,
|
17636
17637
|
ctx,
|
17637
|
-
/*$$scope*/ ctx[
|
17638
|
+
/*$$scope*/ ctx[18],
|
17638
17639
|
!current
|
17639
|
-
? get_all_dirty_from_scope(/*$$scope*/ ctx[
|
17640
|
-
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[
|
17640
|
+
? get_all_dirty_from_scope(/*$$scope*/ ctx[18])
|
17641
|
+
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[18], dirty, null),
|
17641
17642
|
null
|
17642
17643
|
);
|
17643
17644
|
}
|
17644
17645
|
}
|
17645
17646
|
|
17646
|
-
if (!current || dirty[0] & /*containerStyle, overrideStyle*/
|
17647
|
+
if (!current || dirty[0] & /*containerStyle, overrideStyle*/ 66 && ul_style_value !== (ul_style_value = [/*containerStyle*/ ctx[6], /*overrideStyle*/ ctx[1]].join(' '))) {
|
17647
17648
|
attr(ul, "style", ul_style_value);
|
17648
17649
|
}
|
17649
17650
|
|
17650
|
-
if (dirty[0] & /*handleClickIndicator, indicatorItemStyle, indicators*/
|
17651
|
-
each_value = /*indicators*/ ctx[
|
17651
|
+
if (dirty[0] & /*handleClickIndicator, indicatorItemStyle, indicators*/ 400) {
|
17652
|
+
each_value = /*indicators*/ ctx[7] ?? [];
|
17652
17653
|
let i;
|
17653
17654
|
|
17654
17655
|
for (i = 0; i < each_value.length; i += 1) {
|
@@ -17670,8 +17671,8 @@ function create_fragment$j(ctx) {
|
|
17670
17671
|
each_blocks.length = each_value.length;
|
17671
17672
|
}
|
17672
17673
|
|
17673
|
-
if (!current || dirty[0] & /*indicatorListStyle*/
|
17674
|
-
attr(div1, "style", /*indicatorListStyle*/ ctx[
|
17674
|
+
if (!current || dirty[0] & /*indicatorListStyle*/ 32) {
|
17675
|
+
attr(div1, "style", /*indicatorListStyle*/ ctx[5]);
|
17675
17676
|
}
|
17676
17677
|
|
17677
17678
|
if (!current || dirty[0] & /*layerId*/ 1) {
|
@@ -17690,7 +17691,8 @@ function create_fragment$j(ctx) {
|
|
17690
17691
|
d(detaching) {
|
17691
17692
|
if (detaching) detach(div2);
|
17692
17693
|
if (default_slot) default_slot.d(detaching);
|
17693
|
-
/*ul_binding*/ ctx[
|
17694
|
+
/*ul_binding*/ ctx[20](null);
|
17695
|
+
/*div0_binding*/ ctx[21](null);
|
17694
17696
|
destroy_each(each_blocks, detaching);
|
17695
17697
|
mounted = false;
|
17696
17698
|
run_all(dispose);
|
@@ -17698,6 +17700,8 @@ function create_fragment$j(ctx) {
|
|
17698
17700
|
};
|
17699
17701
|
}
|
17700
17702
|
|
17703
|
+
const THROTTLE = 16;
|
17704
|
+
|
17701
17705
|
function instance$j($$self, $$props, $$invalidate) {
|
17702
17706
|
let indicators;
|
17703
17707
|
let itemWidthPercentage;
|
@@ -17710,6 +17714,7 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
17710
17714
|
let { props } = $$props;
|
17711
17715
|
let { overrideStyle } = $$props;
|
17712
17716
|
useInjectCustomizeCss(props);
|
17717
|
+
let containerElement;
|
17713
17718
|
let slotElement;
|
17714
17719
|
let currentIndex = 0;
|
17715
17720
|
let isDragging = false;
|
@@ -17717,7 +17722,7 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
17717
17722
|
let movedX = null;
|
17718
17723
|
let childCount = 0;
|
17719
17724
|
let transformX;
|
17720
|
-
|
17725
|
+
let lastFrame = 0;
|
17721
17726
|
|
17722
17727
|
const computeTransformX = (index, itemCount, movedX, itemWidthPercentage, gap) => {
|
17723
17728
|
if (index === 0) return;
|
@@ -17733,54 +17738,64 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
17733
17738
|
}
|
17734
17739
|
|
17735
17740
|
const moved = movedX ? ` + ${-movedX}px` : '';
|
17736
|
-
return `
|
17741
|
+
return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
|
17737
17742
|
};
|
17738
17743
|
|
17739
17744
|
const handleClickIndicator = index => {
|
17740
|
-
$$invalidate(
|
17745
|
+
$$invalidate(12, currentIndex = index);
|
17741
17746
|
};
|
17742
17747
|
|
17743
17748
|
const setChildCount = () => {
|
17744
17749
|
const count = slotElement?.children?.length ?? 0;
|
17745
17750
|
|
17746
17751
|
if (count !== childCount) {
|
17747
|
-
$$invalidate(
|
17752
|
+
$$invalidate(14, childCount = slotElement?.children?.length ?? 0);
|
17748
17753
|
}
|
17749
17754
|
};
|
17750
17755
|
|
17751
17756
|
const toNext = () => {
|
17752
|
-
console.log('toNext');
|
17753
|
-
|
17754
17757
|
if (currentIndex < childCount - 1) {
|
17755
|
-
$$invalidate(
|
17758
|
+
$$invalidate(12, currentIndex = currentIndex + 1);
|
17756
17759
|
} else if (props.loop) {
|
17757
|
-
$$invalidate(
|
17760
|
+
$$invalidate(12, currentIndex = 0);
|
17758
17761
|
}
|
17759
17762
|
};
|
17760
17763
|
|
17761
17764
|
const toPrev = () => {
|
17762
17765
|
if (currentIndex > 0) {
|
17763
|
-
$$invalidate(
|
17766
|
+
$$invalidate(12, currentIndex = currentIndex - 1);
|
17764
17767
|
} else if (props.loop) {
|
17765
|
-
$$invalidate(
|
17768
|
+
$$invalidate(12, currentIndex = childCount - 1);
|
17766
17769
|
}
|
17767
17770
|
};
|
17768
17771
|
|
17769
17772
|
const handleClick = e => {
|
17770
|
-
|
17773
|
+
const isParentContainer = el => {
|
17774
|
+
if (!el) return false;
|
17775
|
+
return el === containerElement || isParentContainer(el.parentElement);
|
17776
|
+
};
|
17777
|
+
|
17778
|
+
if (isParentContainer(e.target) && isDragging) {
|
17771
17779
|
e.preventDefault();
|
17772
17780
|
e.stopPropagation();
|
17773
17781
|
}
|
17774
17782
|
};
|
17775
17783
|
|
17776
|
-
const
|
17777
|
-
$$invalidate(
|
17784
|
+
const move = moved => {
|
17785
|
+
$$invalidate(13, movedX = moved);
|
17778
17786
|
|
17779
|
-
if (
|
17787
|
+
if ((moved > 10 || moved < -10) && !isDragging) {
|
17780
17788
|
isDragging = true;
|
17781
17789
|
}
|
17782
17790
|
};
|
17783
17791
|
|
17792
|
+
const handleTouchmove = e => {
|
17793
|
+
const now = performance.now();
|
17794
|
+
if (now - lastFrame < THROTTLE) return;
|
17795
|
+
move(startX - e.touches[0].clientX);
|
17796
|
+
lastFrame = now;
|
17797
|
+
};
|
17798
|
+
|
17784
17799
|
const handleTouchend = () => {
|
17785
17800
|
if (movedX >= 32) {
|
17786
17801
|
toNext();
|
@@ -17788,7 +17803,7 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
17788
17803
|
toPrev();
|
17789
17804
|
}
|
17790
17805
|
|
17791
|
-
$$invalidate(
|
17806
|
+
$$invalidate(13, movedX = null);
|
17792
17807
|
document.removeEventListener('touchmove', handleTouchmove);
|
17793
17808
|
document.removeEventListener('touchend', handleTouchend);
|
17794
17809
|
document.removeEventListener('click', handleClick);
|
@@ -17798,16 +17813,12 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
17798
17813
|
startX = e.touches[0].clientX;
|
17799
17814
|
isDragging = false;
|
17800
17815
|
document.addEventListener('touchmove', handleTouchmove, { passive: true });
|
17801
|
-
document.addEventListener('touchend', handleTouchend, { passive:
|
17802
|
-
document.addEventListener('click', handleClick
|
17816
|
+
document.addEventListener('touchend', handleTouchend, { passive: false });
|
17817
|
+
document.addEventListener('click', handleClick);
|
17803
17818
|
};
|
17804
17819
|
|
17805
17820
|
const handleMousemove = e => {
|
17806
|
-
|
17807
|
-
|
17808
|
-
if (movedX > 10 || movedX < -10) {
|
17809
|
-
isDragging = true;
|
17810
|
-
}
|
17821
|
+
move(startX - e.clientX);
|
17811
17822
|
};
|
17812
17823
|
|
17813
17824
|
const handleMouseup = e => {
|
@@ -17817,10 +17828,9 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
17817
17828
|
toPrev();
|
17818
17829
|
}
|
17819
17830
|
|
17820
|
-
$$invalidate(
|
17831
|
+
$$invalidate(13, movedX = null);
|
17821
17832
|
|
17822
17833
|
if (isDragging) {
|
17823
|
-
// e.preventDefault()
|
17824
17834
|
e.stopPropagation();
|
17825
17835
|
}
|
17826
17836
|
|
@@ -17851,7 +17861,6 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
17851
17861
|
}
|
17852
17862
|
|
17853
17863
|
return () => {
|
17854
|
-
// clearInterval(childCountTimer)
|
17855
17864
|
if (autoSlideTimer) clearInterval(autoSlideTimer);
|
17856
17865
|
};
|
17857
17866
|
});
|
@@ -17863,36 +17872,43 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
17863
17872
|
});
|
17864
17873
|
}
|
17865
17874
|
|
17875
|
+
function div0_binding($$value) {
|
17876
|
+
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
|
17877
|
+
containerElement = $$value;
|
17878
|
+
$$invalidate(3, containerElement);
|
17879
|
+
});
|
17880
|
+
}
|
17881
|
+
|
17866
17882
|
const click_handler = i => handleClickIndicator(i);
|
17867
17883
|
|
17868
17884
|
$$self.$$set = $$props => {
|
17869
17885
|
if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
|
17870
|
-
if ('props' in $$props) $$invalidate(
|
17886
|
+
if ('props' in $$props) $$invalidate(11, props = $$props.props);
|
17871
17887
|
if ('overrideStyle' in $$props) $$invalidate(1, overrideStyle = $$props.overrideStyle);
|
17872
|
-
if ('$$scope' in $$props) $$invalidate(
|
17888
|
+
if ('$$scope' in $$props) $$invalidate(18, $$scope = $$props.$$scope);
|
17873
17889
|
};
|
17874
17890
|
|
17875
17891
|
$$self.$$.update = () => {
|
17876
17892
|
if ($$self.$$.dirty[0] & /*slotElement*/ 4) {
|
17877
17893
|
if (slotElement) {
|
17878
|
-
$$invalidate(
|
17894
|
+
$$invalidate(14, childCount = slotElement.children.length);
|
17879
17895
|
}
|
17880
17896
|
}
|
17881
17897
|
|
17882
|
-
if ($$self.$$.dirty[0] & /*childCount, currentIndex*/
|
17883
|
-
$$invalidate(
|
17898
|
+
if ($$self.$$.dirty[0] & /*childCount, currentIndex*/ 20480) {
|
17899
|
+
$$invalidate(7, indicators = [...Array(childCount)].map((_, i) => ({ index: i, isActive: i === currentIndex })));
|
17884
17900
|
}
|
17885
17901
|
|
17886
|
-
if ($$self.$$.dirty[0] & /*props*/
|
17887
|
-
$$invalidate(
|
17902
|
+
if ($$self.$$.dirty[0] & /*props*/ 2048) {
|
17903
|
+
$$invalidate(17, itemWidthPercentage = props.itemWidthPercentage ?? 100);
|
17888
17904
|
}
|
17889
17905
|
|
17890
|
-
if ($$self.$$.dirty[0] & /*currentIndex, childCount, movedX, itemWidthPercentage, props*/
|
17891
|
-
$$invalidate(
|
17906
|
+
if ($$self.$$.dirty[0] & /*currentIndex, childCount, movedX, itemWidthPercentage, props*/ 161792) {
|
17907
|
+
$$invalidate(15, transformX = computeTransformX(currentIndex, childCount, movedX, itemWidthPercentage, props.gap ?? 0));
|
17892
17908
|
}
|
17893
17909
|
|
17894
|
-
if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX*/
|
17895
|
-
$$invalidate(
|
17910
|
+
if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX*/ 141312) {
|
17911
|
+
$$invalidate(16, baseContainerStyle = {
|
17896
17912
|
display: 'grid',
|
17897
17913
|
// marginInline: `-${props.gap}px`,
|
17898
17914
|
gap: `${props.gap}px`,
|
@@ -17905,34 +17921,36 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
17905
17921
|
});
|
17906
17922
|
}
|
17907
17923
|
|
17908
|
-
if ($$self.$$.dirty[0] & /*baseContainerStyle, transformX*/
|
17909
|
-
$$invalidate(
|
17924
|
+
if ($$self.$$.dirty[0] & /*baseContainerStyle, transformX*/ 98304) {
|
17925
|
+
$$invalidate(6, containerStyle = objToStyle({
|
17910
17926
|
...baseContainerStyle,
|
17911
17927
|
transform: transformX
|
17912
17928
|
}));
|
17913
17929
|
}
|
17914
17930
|
};
|
17915
17931
|
|
17916
|
-
$$invalidate(
|
17932
|
+
$$invalidate(5, indicatorListStyle = objToStyle({
|
17917
17933
|
display: 'flex',
|
17918
17934
|
justifyContent: 'center',
|
17919
17935
|
gap: '4px',
|
17920
17936
|
marginTop: '12px'
|
17921
17937
|
}));
|
17922
17938
|
|
17923
|
-
$$invalidate(
|
17939
|
+
$$invalidate(4, indicatorItemStyle = {
|
17924
17940
|
width: '8px',
|
17925
17941
|
height: '8px',
|
17926
17942
|
borderRadius: '100%',
|
17927
17943
|
display: 'block',
|
17928
17944
|
background: '#AAAAAA',
|
17929
|
-
border: 0
|
17945
|
+
border: 0,
|
17946
|
+
cursor: 'pointer'
|
17930
17947
|
});
|
17931
17948
|
|
17932
17949
|
return [
|
17933
17950
|
layerId,
|
17934
17951
|
overrideStyle,
|
17935
17952
|
slotElement,
|
17953
|
+
containerElement,
|
17936
17954
|
indicatorItemStyle,
|
17937
17955
|
indicatorListStyle,
|
17938
17956
|
containerStyle,
|
@@ -17950,6 +17968,7 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
17950
17968
|
$$scope,
|
17951
17969
|
slots,
|
17952
17970
|
ul_binding,
|
17971
|
+
div0_binding,
|
17953
17972
|
click_handler
|
17954
17973
|
];
|
17955
17974
|
}
|
@@ -17957,7 +17976,7 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
17957
17976
|
class Slider extends SvelteComponent {
|
17958
17977
|
constructor(options) {
|
17959
17978
|
super();
|
17960
|
-
init(this, options, instance$j, create_fragment$j, safe_not_equal, { layerId: 0, props:
|
17979
|
+
init(this, options, instance$j, create_fragment$j, safe_not_equal, { layerId: 0, props: 11, overrideStyle: 1 }, add_css$f, [-1, -1]);
|
17961
17980
|
}
|
17962
17981
|
}
|
17963
17982
|
|
package/dist/index.es.js
CHANGED
@@ -16145,17 +16145,17 @@ const LAYOUT_JUSTIFY = ['flex-start', 'center', 'flex-end', 'space-between'];
|
|
16145
16145
|
/* src/components-flex/slider/Slider.svelte generated by Svelte v3.53.1 */
|
16146
16146
|
|
16147
16147
|
function add_css$f(target) {
|
16148
|
-
append_styles(target, "svelte-
|
16148
|
+
append_styles(target, "svelte-wwv1o", ".slider.svelte-wwv1o{width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y}.slider-container.svelte-wwv1o{width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y}.slider-list.svelte-wwv1o{-webkit-user-drag:none;margin:0;padding:0;list-style:none;will-change:transform}");
|
16149
16149
|
}
|
16150
16150
|
|
16151
16151
|
function get_each_context$1(ctx, list, i) {
|
16152
16152
|
const child_ctx = ctx.slice();
|
16153
|
-
child_ctx[
|
16154
|
-
child_ctx[
|
16153
|
+
child_ctx[36] = list[i];
|
16154
|
+
child_ctx[38] = i;
|
16155
16155
|
return child_ctx;
|
16156
16156
|
}
|
16157
16157
|
|
16158
|
-
// (
|
16158
|
+
// (192:4) {#each indicators ?? [] as indicator, i}
|
16159
16159
|
function create_each_block$1(ctx) {
|
16160
16160
|
let button;
|
16161
16161
|
let i_1;
|
@@ -16165,7 +16165,7 @@ function create_each_block$1(ctx) {
|
|
16165
16165
|
let dispose;
|
16166
16166
|
|
16167
16167
|
function click_handler() {
|
16168
|
-
return /*click_handler*/ ctx[
|
16168
|
+
return /*click_handler*/ ctx[22](/*i*/ ctx[38]);
|
16169
16169
|
}
|
16170
16170
|
|
16171
16171
|
return {
|
@@ -16175,9 +16175,9 @@ function create_each_block$1(ctx) {
|
|
16175
16175
|
t = space();
|
16176
16176
|
|
16177
16177
|
attr(i_1, "style", i_1_style_value = objToStyle({
|
16178
|
-
.../*indicatorItemStyle*/ ctx[
|
16178
|
+
.../*indicatorItemStyle*/ ctx[4],
|
16179
16179
|
...{
|
16180
|
-
background: /*indicator*/ ctx[
|
16180
|
+
background: /*indicator*/ ctx[36].isActive ? '#555555' : '#AAAAAA'
|
16181
16181
|
}
|
16182
16182
|
}));
|
16183
16183
|
|
@@ -16200,10 +16200,10 @@ function create_each_block$1(ctx) {
|
|
16200
16200
|
p(new_ctx, dirty) {
|
16201
16201
|
ctx = new_ctx;
|
16202
16202
|
|
16203
|
-
if (dirty[0] & /*indicatorItemStyle, indicators*/
|
16204
|
-
.../*indicatorItemStyle*/ ctx[
|
16203
|
+
if (dirty[0] & /*indicatorItemStyle, indicators*/ 144 && i_1_style_value !== (i_1_style_value = objToStyle({
|
16204
|
+
.../*indicatorItemStyle*/ ctx[4],
|
16205
16205
|
...{
|
16206
|
-
background: /*indicator*/ ctx[
|
16206
|
+
background: /*indicator*/ ctx[36].isActive ? '#555555' : '#AAAAAA'
|
16207
16207
|
}
|
16208
16208
|
}))) {
|
16209
16209
|
attr(i_1, "style", i_1_style_value);
|
@@ -16227,9 +16227,9 @@ function create_fragment$j(ctx) {
|
|
16227
16227
|
let current;
|
16228
16228
|
let mounted;
|
16229
16229
|
let dispose;
|
16230
|
-
const default_slot_template = /*#slots*/ ctx[
|
16231
|
-
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[
|
16232
|
-
let each_value = /*indicators*/ ctx[
|
16230
|
+
const default_slot_template = /*#slots*/ ctx[19].default;
|
16231
|
+
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[18], null);
|
16232
|
+
let each_value = /*indicators*/ ctx[7] ?? [];
|
16233
16233
|
let each_blocks = [];
|
16234
16234
|
|
16235
16235
|
for (let i = 0; i < each_value.length; i += 1) {
|
@@ -16249,12 +16249,12 @@ function create_fragment$j(ctx) {
|
|
16249
16249
|
each_blocks[i].c();
|
16250
16250
|
}
|
16251
16251
|
|
16252
|
-
attr(ul, "class", "slider-list svelte-
|
16253
|
-
attr(ul, "style", ul_style_value = [/*containerStyle*/ ctx[
|
16254
|
-
attr(div0, "class", "slider-container svelte-
|
16255
|
-
attr(div1, "style", /*indicatorListStyle*/ ctx[
|
16252
|
+
attr(ul, "class", "slider-list svelte-wwv1o");
|
16253
|
+
attr(ul, "style", ul_style_value = [/*containerStyle*/ ctx[6], /*overrideStyle*/ ctx[1]].join(' '));
|
16254
|
+
attr(div0, "class", "slider-container svelte-wwv1o");
|
16255
|
+
attr(div1, "style", /*indicatorListStyle*/ ctx[5]);
|
16256
16256
|
attr(div2, "data-layer-id", /*layerId*/ ctx[0]);
|
16257
|
-
attr(div2, "class", "slider svelte-
|
16257
|
+
attr(div2, "class", "slider svelte-wwv1o");
|
16258
16258
|
},
|
16259
16259
|
m(target, anchor) {
|
16260
16260
|
insert(target, div2, anchor);
|
@@ -16265,7 +16265,8 @@ function create_fragment$j(ctx) {
|
|
16265
16265
|
default_slot.m(ul, null);
|
16266
16266
|
}
|
16267
16267
|
|
16268
|
-
/*ul_binding*/ ctx[
|
16268
|
+
/*ul_binding*/ ctx[20](ul);
|
16269
|
+
/*div0_binding*/ ctx[21](div0);
|
16269
16270
|
append(div2, t);
|
16270
16271
|
append(div2, div1);
|
16271
16272
|
|
@@ -16277,8 +16278,8 @@ function create_fragment$j(ctx) {
|
|
16277
16278
|
|
16278
16279
|
if (!mounted) {
|
16279
16280
|
dispose = [
|
16280
|
-
listen(div0, "mousedown", /*handleMousedown*/ ctx[
|
16281
|
-
listen(div0, "touchstart", /*handleTouchstart*/ ctx[
|
16281
|
+
listen(div0, "mousedown", /*handleMousedown*/ ctx[10]),
|
16282
|
+
listen(div0, "touchstart", /*handleTouchstart*/ ctx[9])
|
16282
16283
|
];
|
16283
16284
|
|
16284
16285
|
mounted = true;
|
@@ -16286,26 +16287,26 @@ function create_fragment$j(ctx) {
|
|
16286
16287
|
},
|
16287
16288
|
p(ctx, dirty) {
|
16288
16289
|
if (default_slot) {
|
16289
|
-
if (default_slot.p && (!current || dirty[0] & /*$$scope*/
|
16290
|
+
if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 262144)) {
|
16290
16291
|
update_slot_base(
|
16291
16292
|
default_slot,
|
16292
16293
|
default_slot_template,
|
16293
16294
|
ctx,
|
16294
|
-
/*$$scope*/ ctx[
|
16295
|
+
/*$$scope*/ ctx[18],
|
16295
16296
|
!current
|
16296
|
-
? get_all_dirty_from_scope(/*$$scope*/ ctx[
|
16297
|
-
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[
|
16297
|
+
? get_all_dirty_from_scope(/*$$scope*/ ctx[18])
|
16298
|
+
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[18], dirty, null),
|
16298
16299
|
null
|
16299
16300
|
);
|
16300
16301
|
}
|
16301
16302
|
}
|
16302
16303
|
|
16303
|
-
if (!current || dirty[0] & /*containerStyle, overrideStyle*/
|
16304
|
+
if (!current || dirty[0] & /*containerStyle, overrideStyle*/ 66 && ul_style_value !== (ul_style_value = [/*containerStyle*/ ctx[6], /*overrideStyle*/ ctx[1]].join(' '))) {
|
16304
16305
|
attr(ul, "style", ul_style_value);
|
16305
16306
|
}
|
16306
16307
|
|
16307
|
-
if (dirty[0] & /*handleClickIndicator, indicatorItemStyle, indicators*/
|
16308
|
-
each_value = /*indicators*/ ctx[
|
16308
|
+
if (dirty[0] & /*handleClickIndicator, indicatorItemStyle, indicators*/ 400) {
|
16309
|
+
each_value = /*indicators*/ ctx[7] ?? [];
|
16309
16310
|
let i;
|
16310
16311
|
|
16311
16312
|
for (i = 0; i < each_value.length; i += 1) {
|
@@ -16327,8 +16328,8 @@ function create_fragment$j(ctx) {
|
|
16327
16328
|
each_blocks.length = each_value.length;
|
16328
16329
|
}
|
16329
16330
|
|
16330
|
-
if (!current || dirty[0] & /*indicatorListStyle*/
|
16331
|
-
attr(div1, "style", /*indicatorListStyle*/ ctx[
|
16331
|
+
if (!current || dirty[0] & /*indicatorListStyle*/ 32) {
|
16332
|
+
attr(div1, "style", /*indicatorListStyle*/ ctx[5]);
|
16332
16333
|
}
|
16333
16334
|
|
16334
16335
|
if (!current || dirty[0] & /*layerId*/ 1) {
|
@@ -16347,7 +16348,8 @@ function create_fragment$j(ctx) {
|
|
16347
16348
|
d(detaching) {
|
16348
16349
|
if (detaching) detach(div2);
|
16349
16350
|
if (default_slot) default_slot.d(detaching);
|
16350
|
-
/*ul_binding*/ ctx[
|
16351
|
+
/*ul_binding*/ ctx[20](null);
|
16352
|
+
/*div0_binding*/ ctx[21](null);
|
16351
16353
|
destroy_each(each_blocks, detaching);
|
16352
16354
|
mounted = false;
|
16353
16355
|
run_all(dispose);
|
@@ -16355,6 +16357,8 @@ function create_fragment$j(ctx) {
|
|
16355
16357
|
};
|
16356
16358
|
}
|
16357
16359
|
|
16360
|
+
const THROTTLE = 16;
|
16361
|
+
|
16358
16362
|
function instance$j($$self, $$props, $$invalidate) {
|
16359
16363
|
let indicators;
|
16360
16364
|
let itemWidthPercentage;
|
@@ -16367,6 +16371,7 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
16367
16371
|
let { props } = $$props;
|
16368
16372
|
let { overrideStyle } = $$props;
|
16369
16373
|
useInjectCustomizeCss(props);
|
16374
|
+
let containerElement;
|
16370
16375
|
let slotElement;
|
16371
16376
|
let currentIndex = 0;
|
16372
16377
|
let isDragging = false;
|
@@ -16374,7 +16379,7 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
16374
16379
|
let movedX = null;
|
16375
16380
|
let childCount = 0;
|
16376
16381
|
let transformX;
|
16377
|
-
|
16382
|
+
let lastFrame = 0;
|
16378
16383
|
|
16379
16384
|
const computeTransformX = (index, itemCount, movedX, itemWidthPercentage, gap) => {
|
16380
16385
|
if (index === 0) return;
|
@@ -16390,54 +16395,64 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
16390
16395
|
}
|
16391
16396
|
|
16392
16397
|
const moved = movedX ? ` + ${-movedX}px` : '';
|
16393
|
-
return `
|
16398
|
+
return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
|
16394
16399
|
};
|
16395
16400
|
|
16396
16401
|
const handleClickIndicator = index => {
|
16397
|
-
$$invalidate(
|
16402
|
+
$$invalidate(12, currentIndex = index);
|
16398
16403
|
};
|
16399
16404
|
|
16400
16405
|
const setChildCount = () => {
|
16401
16406
|
const count = slotElement?.children?.length ?? 0;
|
16402
16407
|
|
16403
16408
|
if (count !== childCount) {
|
16404
|
-
$$invalidate(
|
16409
|
+
$$invalidate(14, childCount = slotElement?.children?.length ?? 0);
|
16405
16410
|
}
|
16406
16411
|
};
|
16407
16412
|
|
16408
16413
|
const toNext = () => {
|
16409
|
-
console.log('toNext');
|
16410
|
-
|
16411
16414
|
if (currentIndex < childCount - 1) {
|
16412
|
-
$$invalidate(
|
16415
|
+
$$invalidate(12, currentIndex = currentIndex + 1);
|
16413
16416
|
} else if (props.loop) {
|
16414
|
-
$$invalidate(
|
16417
|
+
$$invalidate(12, currentIndex = 0);
|
16415
16418
|
}
|
16416
16419
|
};
|
16417
16420
|
|
16418
16421
|
const toPrev = () => {
|
16419
16422
|
if (currentIndex > 0) {
|
16420
|
-
$$invalidate(
|
16423
|
+
$$invalidate(12, currentIndex = currentIndex - 1);
|
16421
16424
|
} else if (props.loop) {
|
16422
|
-
$$invalidate(
|
16425
|
+
$$invalidate(12, currentIndex = childCount - 1);
|
16423
16426
|
}
|
16424
16427
|
};
|
16425
16428
|
|
16426
16429
|
const handleClick = e => {
|
16427
|
-
|
16430
|
+
const isParentContainer = el => {
|
16431
|
+
if (!el) return false;
|
16432
|
+
return el === containerElement || isParentContainer(el.parentElement);
|
16433
|
+
};
|
16434
|
+
|
16435
|
+
if (isParentContainer(e.target) && isDragging) {
|
16428
16436
|
e.preventDefault();
|
16429
16437
|
e.stopPropagation();
|
16430
16438
|
}
|
16431
16439
|
};
|
16432
16440
|
|
16433
|
-
const
|
16434
|
-
$$invalidate(
|
16441
|
+
const move = moved => {
|
16442
|
+
$$invalidate(13, movedX = moved);
|
16435
16443
|
|
16436
|
-
if (
|
16444
|
+
if ((moved > 10 || moved < -10) && !isDragging) {
|
16437
16445
|
isDragging = true;
|
16438
16446
|
}
|
16439
16447
|
};
|
16440
16448
|
|
16449
|
+
const handleTouchmove = e => {
|
16450
|
+
const now = performance.now();
|
16451
|
+
if (now - lastFrame < THROTTLE) return;
|
16452
|
+
move(startX - e.touches[0].clientX);
|
16453
|
+
lastFrame = now;
|
16454
|
+
};
|
16455
|
+
|
16441
16456
|
const handleTouchend = () => {
|
16442
16457
|
if (movedX >= 32) {
|
16443
16458
|
toNext();
|
@@ -16445,7 +16460,7 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
16445
16460
|
toPrev();
|
16446
16461
|
}
|
16447
16462
|
|
16448
|
-
$$invalidate(
|
16463
|
+
$$invalidate(13, movedX = null);
|
16449
16464
|
document.removeEventListener('touchmove', handleTouchmove);
|
16450
16465
|
document.removeEventListener('touchend', handleTouchend);
|
16451
16466
|
document.removeEventListener('click', handleClick);
|
@@ -16455,16 +16470,12 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
16455
16470
|
startX = e.touches[0].clientX;
|
16456
16471
|
isDragging = false;
|
16457
16472
|
document.addEventListener('touchmove', handleTouchmove, { passive: true });
|
16458
|
-
document.addEventListener('touchend', handleTouchend, { passive:
|
16459
|
-
document.addEventListener('click', handleClick
|
16473
|
+
document.addEventListener('touchend', handleTouchend, { passive: false });
|
16474
|
+
document.addEventListener('click', handleClick);
|
16460
16475
|
};
|
16461
16476
|
|
16462
16477
|
const handleMousemove = e => {
|
16463
|
-
|
16464
|
-
|
16465
|
-
if (movedX > 10 || movedX < -10) {
|
16466
|
-
isDragging = true;
|
16467
|
-
}
|
16478
|
+
move(startX - e.clientX);
|
16468
16479
|
};
|
16469
16480
|
|
16470
16481
|
const handleMouseup = e => {
|
@@ -16474,10 +16485,9 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
16474
16485
|
toPrev();
|
16475
16486
|
}
|
16476
16487
|
|
16477
|
-
$$invalidate(
|
16488
|
+
$$invalidate(13, movedX = null);
|
16478
16489
|
|
16479
16490
|
if (isDragging) {
|
16480
|
-
// e.preventDefault()
|
16481
16491
|
e.stopPropagation();
|
16482
16492
|
}
|
16483
16493
|
|
@@ -16508,7 +16518,6 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
16508
16518
|
}
|
16509
16519
|
|
16510
16520
|
return () => {
|
16511
|
-
// clearInterval(childCountTimer)
|
16512
16521
|
if (autoSlideTimer) clearInterval(autoSlideTimer);
|
16513
16522
|
};
|
16514
16523
|
});
|
@@ -16520,36 +16529,43 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
16520
16529
|
});
|
16521
16530
|
}
|
16522
16531
|
|
16532
|
+
function div0_binding($$value) {
|
16533
|
+
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
|
16534
|
+
containerElement = $$value;
|
16535
|
+
$$invalidate(3, containerElement);
|
16536
|
+
});
|
16537
|
+
}
|
16538
|
+
|
16523
16539
|
const click_handler = i => handleClickIndicator(i);
|
16524
16540
|
|
16525
16541
|
$$self.$$set = $$props => {
|
16526
16542
|
if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
|
16527
|
-
if ('props' in $$props) $$invalidate(
|
16543
|
+
if ('props' in $$props) $$invalidate(11, props = $$props.props);
|
16528
16544
|
if ('overrideStyle' in $$props) $$invalidate(1, overrideStyle = $$props.overrideStyle);
|
16529
|
-
if ('$$scope' in $$props) $$invalidate(
|
16545
|
+
if ('$$scope' in $$props) $$invalidate(18, $$scope = $$props.$$scope);
|
16530
16546
|
};
|
16531
16547
|
|
16532
16548
|
$$self.$$.update = () => {
|
16533
16549
|
if ($$self.$$.dirty[0] & /*slotElement*/ 4) {
|
16534
16550
|
if (slotElement) {
|
16535
|
-
$$invalidate(
|
16551
|
+
$$invalidate(14, childCount = slotElement.children.length);
|
16536
16552
|
}
|
16537
16553
|
}
|
16538
16554
|
|
16539
|
-
if ($$self.$$.dirty[0] & /*childCount, currentIndex*/
|
16540
|
-
$$invalidate(
|
16555
|
+
if ($$self.$$.dirty[0] & /*childCount, currentIndex*/ 20480) {
|
16556
|
+
$$invalidate(7, indicators = [...Array(childCount)].map((_, i) => ({ index: i, isActive: i === currentIndex })));
|
16541
16557
|
}
|
16542
16558
|
|
16543
|
-
if ($$self.$$.dirty[0] & /*props*/
|
16544
|
-
$$invalidate(
|
16559
|
+
if ($$self.$$.dirty[0] & /*props*/ 2048) {
|
16560
|
+
$$invalidate(17, itemWidthPercentage = props.itemWidthPercentage ?? 100);
|
16545
16561
|
}
|
16546
16562
|
|
16547
|
-
if ($$self.$$.dirty[0] & /*currentIndex, childCount, movedX, itemWidthPercentage, props*/
|
16548
|
-
$$invalidate(
|
16563
|
+
if ($$self.$$.dirty[0] & /*currentIndex, childCount, movedX, itemWidthPercentage, props*/ 161792) {
|
16564
|
+
$$invalidate(15, transformX = computeTransformX(currentIndex, childCount, movedX, itemWidthPercentage, props.gap ?? 0));
|
16549
16565
|
}
|
16550
16566
|
|
16551
|
-
if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX*/
|
16552
|
-
$$invalidate(
|
16567
|
+
if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX*/ 141312) {
|
16568
|
+
$$invalidate(16, baseContainerStyle = {
|
16553
16569
|
display: 'grid',
|
16554
16570
|
// marginInline: `-${props.gap}px`,
|
16555
16571
|
gap: `${props.gap}px`,
|
@@ -16562,34 +16578,36 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
16562
16578
|
});
|
16563
16579
|
}
|
16564
16580
|
|
16565
|
-
if ($$self.$$.dirty[0] & /*baseContainerStyle, transformX*/
|
16566
|
-
$$invalidate(
|
16581
|
+
if ($$self.$$.dirty[0] & /*baseContainerStyle, transformX*/ 98304) {
|
16582
|
+
$$invalidate(6, containerStyle = objToStyle({
|
16567
16583
|
...baseContainerStyle,
|
16568
16584
|
transform: transformX
|
16569
16585
|
}));
|
16570
16586
|
}
|
16571
16587
|
};
|
16572
16588
|
|
16573
|
-
$$invalidate(
|
16589
|
+
$$invalidate(5, indicatorListStyle = objToStyle({
|
16574
16590
|
display: 'flex',
|
16575
16591
|
justifyContent: 'center',
|
16576
16592
|
gap: '4px',
|
16577
16593
|
marginTop: '12px'
|
16578
16594
|
}));
|
16579
16595
|
|
16580
|
-
$$invalidate(
|
16596
|
+
$$invalidate(4, indicatorItemStyle = {
|
16581
16597
|
width: '8px',
|
16582
16598
|
height: '8px',
|
16583
16599
|
borderRadius: '100%',
|
16584
16600
|
display: 'block',
|
16585
16601
|
background: '#AAAAAA',
|
16586
|
-
border: 0
|
16602
|
+
border: 0,
|
16603
|
+
cursor: 'pointer'
|
16587
16604
|
});
|
16588
16605
|
|
16589
16606
|
return [
|
16590
16607
|
layerId,
|
16591
16608
|
overrideStyle,
|
16592
16609
|
slotElement,
|
16610
|
+
containerElement,
|
16593
16611
|
indicatorItemStyle,
|
16594
16612
|
indicatorListStyle,
|
16595
16613
|
containerStyle,
|
@@ -16607,6 +16625,7 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
16607
16625
|
$$scope,
|
16608
16626
|
slots,
|
16609
16627
|
ul_binding,
|
16628
|
+
div0_binding,
|
16610
16629
|
click_handler
|
16611
16630
|
];
|
16612
16631
|
}
|
@@ -16614,7 +16633,7 @@ function instance$j($$self, $$props, $$invalidate) {
|
|
16614
16633
|
class Slider extends SvelteComponent {
|
16615
16634
|
constructor(options) {
|
16616
16635
|
super();
|
16617
|
-
init(this, options, instance$j, create_fragment$j, safe_not_equal, { layerId: 0, props:
|
16636
|
+
init(this, options, instance$j, create_fragment$j, safe_not_equal, { layerId: 0, props: 11, overrideStyle: 1 }, add_css$f, [-1, -1]);
|
16618
16637
|
}
|
16619
16638
|
}
|
16620
16639
|
|
@@ -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-
|
5467
|
+
var root$d = $.template(`<div class="slider svelte-wwv1o"><div class="slider-container svelte-wwv1o"><ul class="slider-list svelte-wwv1o"><!></ul></div> <div></div></div>`);
|
5468
5468
|
|
5469
5469
|
const $$css$e = {
|
5470
|
-
hash: 'svelte-
|
5471
|
-
code: '.slider.svelte-
|
5470
|
+
hash: 'svelte-wwv1o',
|
5471
|
+
code: '.slider.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-container.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-wwv1o {-webkit-user-drag:none;margin:0;padding:0;list-style:none;will-change:transform;}'
|
5472
5472
|
};
|
5473
5473
|
|
5474
5474
|
function Slider($$anchor, $$props) {
|
@@ -5487,6 +5487,7 @@ function Slider($$anchor, $$props) {
|
|
5487
5487
|
|
5488
5488
|
useInjectCustomizeCss(props());
|
5489
5489
|
|
5490
|
+
let containerElement = $.mutable_state();
|
5490
5491
|
let slotElement = $.mutable_state();
|
5491
5492
|
let currentIndex = $.mutable_state(0);
|
5492
5493
|
let isDragging = false;
|
@@ -5494,8 +5495,8 @@ function Slider($$anchor, $$props) {
|
|
5494
5495
|
let movedX = $.mutable_state(null);
|
5495
5496
|
let childCount = $.mutable_state(0);
|
5496
5497
|
let transformX = $.mutable_state();
|
5497
|
-
|
5498
|
-
|
5498
|
+
let lastFrame = 0;
|
5499
|
+
const THROTTLE = 16;
|
5499
5500
|
|
5500
5501
|
const computeTransformX = (
|
5501
5502
|
index,
|
@@ -5519,7 +5520,7 @@ function Slider($$anchor, $$props) {
|
|
5519
5520
|
|
5520
5521
|
const moved = movedX ? ` + ${-movedX}px` : '';
|
5521
5522
|
|
5522
|
-
return `
|
5523
|
+
return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
|
5523
5524
|
};
|
5524
5525
|
|
5525
5526
|
const handleClickIndicator = (index) => {
|
@@ -5535,8 +5536,6 @@ function Slider($$anchor, $$props) {
|
|
5535
5536
|
};
|
5536
5537
|
|
5537
5538
|
const toNext = () => {
|
5538
|
-
console.log('toNext');
|
5539
|
-
|
5540
5539
|
if ($.get(currentIndex) < $.get(childCount) - 1) {
|
5541
5540
|
$.set(currentIndex, $.get(currentIndex) + 1);
|
5542
5541
|
} else if (props().loop) {
|
@@ -5553,20 +5552,33 @@ function Slider($$anchor, $$props) {
|
|
5553
5552
|
};
|
5554
5553
|
|
5555
5554
|
const handleClick = (e) => {
|
5556
|
-
|
5555
|
+
const isParentContainer = (el) => {
|
5556
|
+
if (!el) return false;
|
5557
|
+
return el === $.get(containerElement) || isParentContainer(el.parentElement);
|
5558
|
+
};
|
5559
|
+
|
5560
|
+
if (isParentContainer(e.target) && isDragging) {
|
5557
5561
|
e.preventDefault();
|
5558
5562
|
e.stopPropagation();
|
5559
5563
|
}
|
5560
5564
|
};
|
5561
5565
|
|
5562
|
-
const
|
5563
|
-
$.set(movedX,
|
5566
|
+
const move = (moved) => {
|
5567
|
+
$.set(movedX, moved);
|
5564
5568
|
|
5565
|
-
if (
|
5569
|
+
if ((moved > 10 || moved < -10) && !isDragging) {
|
5566
5570
|
isDragging = true;
|
5567
5571
|
}
|
5568
5572
|
};
|
5569
5573
|
|
5574
|
+
const handleTouchmove = (e) => {
|
5575
|
+
const now = performance.now();
|
5576
|
+
|
5577
|
+
if (now - lastFrame < THROTTLE) return;
|
5578
|
+
move(startX - e.touches[0].clientX);
|
5579
|
+
lastFrame = now;
|
5580
|
+
};
|
5581
|
+
|
5570
5582
|
const handleTouchend = () => {
|
5571
5583
|
if ($.get(movedX) >= 32) {
|
5572
5584
|
toNext();
|
@@ -5584,16 +5596,12 @@ function Slider($$anchor, $$props) {
|
|
5584
5596
|
startX = e.touches[0].clientX;
|
5585
5597
|
isDragging = false;
|
5586
5598
|
document.addEventListener('touchmove', handleTouchmove, { passive: true });
|
5587
|
-
document.addEventListener('touchend', handleTouchend, { passive:
|
5588
|
-
document.addEventListener('click', handleClick
|
5599
|
+
document.addEventListener('touchend', handleTouchend, { passive: false });
|
5600
|
+
document.addEventListener('click', handleClick);
|
5589
5601
|
};
|
5590
5602
|
|
5591
5603
|
const handleMousemove = (e) => {
|
5592
|
-
|
5593
|
-
|
5594
|
-
if ($.get(movedX) > 10 || $.get(movedX) < -10) {
|
5595
|
-
isDragging = true;
|
5596
|
-
}
|
5604
|
+
move(startX - e.clientX);
|
5597
5605
|
};
|
5598
5606
|
|
5599
5607
|
const handleMouseup = (e) => {
|
@@ -5606,7 +5614,6 @@ function Slider($$anchor, $$props) {
|
|
5606
5614
|
$.set(movedX, null);
|
5607
5615
|
|
5608
5616
|
if (isDragging) {
|
5609
|
-
// e.preventDefault()
|
5610
5617
|
e.stopPropagation();
|
5611
5618
|
}
|
5612
5619
|
|
@@ -5638,7 +5645,6 @@ function Slider($$anchor, $$props) {
|
|
5638
5645
|
}
|
5639
5646
|
|
5640
5647
|
return () => {
|
5641
|
-
// clearInterval(childCountTimer)
|
5642
5648
|
if (autoSlideTimer) clearInterval(autoSlideTimer);
|
5643
5649
|
};
|
5644
5650
|
});
|
@@ -5729,7 +5735,8 @@ function Slider($$anchor, $$props) {
|
|
5729
5735
|
borderRadius: '100%',
|
5730
5736
|
display: 'block',
|
5731
5737
|
background: '#AAAAAA',
|
5732
|
-
border: 0
|
5738
|
+
border: 0,
|
5739
|
+
cursor: 'pointer'
|
5733
5740
|
});
|
5734
5741
|
});
|
5735
5742
|
|
@@ -5745,6 +5752,7 @@ function Slider($$anchor, $$props) {
|
|
5745
5752
|
$.reset(ul);
|
5746
5753
|
$.bind_this(ul, ($$value) => $.set(slotElement, $$value), () => $.get(slotElement));
|
5747
5754
|
$.reset(div_1);
|
5755
|
+
$.bind_this(div_1, ($$value) => $.set(containerElement, $$value), () => $.get(containerElement));
|
5748
5756
|
|
5749
5757
|
var div_2 = $.sibling(div_1, 2);
|
5750
5758
|
|
package/dist/svelte5/index.es.js
CHANGED
@@ -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-
|
5433
|
+
var root$d = $.template(`<div class="slider svelte-wwv1o"><div class="slider-container svelte-wwv1o"><ul class="slider-list svelte-wwv1o"><!></ul></div> <div></div></div>`);
|
5434
5434
|
|
5435
5435
|
const $$css$e = {
|
5436
|
-
hash: 'svelte-
|
5437
|
-
code: '.slider.svelte-
|
5436
|
+
hash: 'svelte-wwv1o',
|
5437
|
+
code: '.slider.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-container.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-wwv1o {-webkit-user-drag:none;margin:0;padding:0;list-style:none;will-change:transform;}'
|
5438
5438
|
};
|
5439
5439
|
|
5440
5440
|
function Slider($$anchor, $$props) {
|
@@ -5453,6 +5453,7 @@ function Slider($$anchor, $$props) {
|
|
5453
5453
|
|
5454
5454
|
useInjectCustomizeCss(props());
|
5455
5455
|
|
5456
|
+
let containerElement = $.mutable_state();
|
5456
5457
|
let slotElement = $.mutable_state();
|
5457
5458
|
let currentIndex = $.mutable_state(0);
|
5458
5459
|
let isDragging = false;
|
@@ -5460,8 +5461,8 @@ function Slider($$anchor, $$props) {
|
|
5460
5461
|
let movedX = $.mutable_state(null);
|
5461
5462
|
let childCount = $.mutable_state(0);
|
5462
5463
|
let transformX = $.mutable_state();
|
5463
|
-
|
5464
|
-
|
5464
|
+
let lastFrame = 0;
|
5465
|
+
const THROTTLE = 16;
|
5465
5466
|
|
5466
5467
|
const computeTransformX = (
|
5467
5468
|
index,
|
@@ -5485,7 +5486,7 @@ function Slider($$anchor, $$props) {
|
|
5485
5486
|
|
5486
5487
|
const moved = movedX ? ` + ${-movedX}px` : '';
|
5487
5488
|
|
5488
|
-
return `
|
5489
|
+
return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
|
5489
5490
|
};
|
5490
5491
|
|
5491
5492
|
const handleClickIndicator = (index) => {
|
@@ -5501,8 +5502,6 @@ function Slider($$anchor, $$props) {
|
|
5501
5502
|
};
|
5502
5503
|
|
5503
5504
|
const toNext = () => {
|
5504
|
-
console.log('toNext');
|
5505
|
-
|
5506
5505
|
if ($.get(currentIndex) < $.get(childCount) - 1) {
|
5507
5506
|
$.set(currentIndex, $.get(currentIndex) + 1);
|
5508
5507
|
} else if (props().loop) {
|
@@ -5519,20 +5518,33 @@ function Slider($$anchor, $$props) {
|
|
5519
5518
|
};
|
5520
5519
|
|
5521
5520
|
const handleClick = (e) => {
|
5522
|
-
|
5521
|
+
const isParentContainer = (el) => {
|
5522
|
+
if (!el) return false;
|
5523
|
+
return el === $.get(containerElement) || isParentContainer(el.parentElement);
|
5524
|
+
};
|
5525
|
+
|
5526
|
+
if (isParentContainer(e.target) && isDragging) {
|
5523
5527
|
e.preventDefault();
|
5524
5528
|
e.stopPropagation();
|
5525
5529
|
}
|
5526
5530
|
};
|
5527
5531
|
|
5528
|
-
const
|
5529
|
-
$.set(movedX,
|
5532
|
+
const move = (moved) => {
|
5533
|
+
$.set(movedX, moved);
|
5530
5534
|
|
5531
|
-
if (
|
5535
|
+
if ((moved > 10 || moved < -10) && !isDragging) {
|
5532
5536
|
isDragging = true;
|
5533
5537
|
}
|
5534
5538
|
};
|
5535
5539
|
|
5540
|
+
const handleTouchmove = (e) => {
|
5541
|
+
const now = performance.now();
|
5542
|
+
|
5543
|
+
if (now - lastFrame < THROTTLE) return;
|
5544
|
+
move(startX - e.touches[0].clientX);
|
5545
|
+
lastFrame = now;
|
5546
|
+
};
|
5547
|
+
|
5536
5548
|
const handleTouchend = () => {
|
5537
5549
|
if ($.get(movedX) >= 32) {
|
5538
5550
|
toNext();
|
@@ -5550,16 +5562,12 @@ function Slider($$anchor, $$props) {
|
|
5550
5562
|
startX = e.touches[0].clientX;
|
5551
5563
|
isDragging = false;
|
5552
5564
|
document.addEventListener('touchmove', handleTouchmove, { passive: true });
|
5553
|
-
document.addEventListener('touchend', handleTouchend, { passive:
|
5554
|
-
document.addEventListener('click', handleClick
|
5565
|
+
document.addEventListener('touchend', handleTouchend, { passive: false });
|
5566
|
+
document.addEventListener('click', handleClick);
|
5555
5567
|
};
|
5556
5568
|
|
5557
5569
|
const handleMousemove = (e) => {
|
5558
|
-
|
5559
|
-
|
5560
|
-
if ($.get(movedX) > 10 || $.get(movedX) < -10) {
|
5561
|
-
isDragging = true;
|
5562
|
-
}
|
5570
|
+
move(startX - e.clientX);
|
5563
5571
|
};
|
5564
5572
|
|
5565
5573
|
const handleMouseup = (e) => {
|
@@ -5572,7 +5580,6 @@ function Slider($$anchor, $$props) {
|
|
5572
5580
|
$.set(movedX, null);
|
5573
5581
|
|
5574
5582
|
if (isDragging) {
|
5575
|
-
// e.preventDefault()
|
5576
5583
|
e.stopPropagation();
|
5577
5584
|
}
|
5578
5585
|
|
@@ -5604,7 +5611,6 @@ function Slider($$anchor, $$props) {
|
|
5604
5611
|
}
|
5605
5612
|
|
5606
5613
|
return () => {
|
5607
|
-
// clearInterval(childCountTimer)
|
5608
5614
|
if (autoSlideTimer) clearInterval(autoSlideTimer);
|
5609
5615
|
};
|
5610
5616
|
});
|
@@ -5695,7 +5701,8 @@ function Slider($$anchor, $$props) {
|
|
5695
5701
|
borderRadius: '100%',
|
5696
5702
|
display: 'block',
|
5697
5703
|
background: '#AAAAAA',
|
5698
|
-
border: 0
|
5704
|
+
border: 0,
|
5705
|
+
cursor: 'pointer'
|
5699
5706
|
});
|
5700
5707
|
});
|
5701
5708
|
|
@@ -5711,6 +5718,7 @@ function Slider($$anchor, $$props) {
|
|
5711
5718
|
$.reset(ul);
|
5712
5719
|
$.bind_this(ul, ($$value) => $.set(slotElement, $$value), () => $.get(slotElement));
|
5713
5720
|
$.reset(div_1);
|
5721
|
+
$.bind_this(div_1, ($$value) => $.set(containerElement, $$value), () => $.get(containerElement));
|
5714
5722
|
|
5715
5723
|
var div_2 = $.sibling(div_1, 2);
|
5716
5724
|
|
@@ -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-
|
5433
|
+
var root$d = $.template(`<div class="slider svelte-wwv1o"><div class="slider-container svelte-wwv1o"><ul class="slider-list svelte-wwv1o"><!></ul></div> <div></div></div>`);
|
5434
5434
|
|
5435
5435
|
const $$css$e = {
|
5436
|
-
hash: 'svelte-
|
5437
|
-
code: '.slider.svelte-
|
5436
|
+
hash: 'svelte-wwv1o',
|
5437
|
+
code: '.slider.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-container.svelte-wwv1o {width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;}.slider-list.svelte-wwv1o {-webkit-user-drag:none;margin:0;padding:0;list-style:none;will-change:transform;}'
|
5438
5438
|
};
|
5439
5439
|
|
5440
5440
|
function Slider($$anchor, $$props) {
|
@@ -5453,6 +5453,7 @@ function Slider($$anchor, $$props) {
|
|
5453
5453
|
|
5454
5454
|
useInjectCustomizeCss(props());
|
5455
5455
|
|
5456
|
+
let containerElement = $.mutable_state();
|
5456
5457
|
let slotElement = $.mutable_state();
|
5457
5458
|
let currentIndex = $.mutable_state(0);
|
5458
5459
|
let isDragging = false;
|
@@ -5460,8 +5461,8 @@ function Slider($$anchor, $$props) {
|
|
5460
5461
|
let movedX = $.mutable_state(null);
|
5461
5462
|
let childCount = $.mutable_state(0);
|
5462
5463
|
let transformX = $.mutable_state();
|
5463
|
-
|
5464
|
-
|
5464
|
+
let lastFrame = 0;
|
5465
|
+
const THROTTLE = 16;
|
5465
5466
|
|
5466
5467
|
const computeTransformX = (
|
5467
5468
|
index,
|
@@ -5485,7 +5486,7 @@ function Slider($$anchor, $$props) {
|
|
5485
5486
|
|
5486
5487
|
const moved = movedX ? ` + ${-movedX}px` : '';
|
5487
5488
|
|
5488
|
-
return `
|
5489
|
+
return `translate3d(calc(-${result}% - ${gap * index}px${moved}), 0, 0)`;
|
5489
5490
|
};
|
5490
5491
|
|
5491
5492
|
const handleClickIndicator = (index) => {
|
@@ -5501,8 +5502,6 @@ function Slider($$anchor, $$props) {
|
|
5501
5502
|
};
|
5502
5503
|
|
5503
5504
|
const toNext = () => {
|
5504
|
-
console.log('toNext');
|
5505
|
-
|
5506
5505
|
if ($.get(currentIndex) < $.get(childCount) - 1) {
|
5507
5506
|
$.set(currentIndex, $.get(currentIndex) + 1);
|
5508
5507
|
} else if (props().loop) {
|
@@ -5519,20 +5518,33 @@ function Slider($$anchor, $$props) {
|
|
5519
5518
|
};
|
5520
5519
|
|
5521
5520
|
const handleClick = (e) => {
|
5522
|
-
|
5521
|
+
const isParentContainer = (el) => {
|
5522
|
+
if (!el) return false;
|
5523
|
+
return el === $.get(containerElement) || isParentContainer(el.parentElement);
|
5524
|
+
};
|
5525
|
+
|
5526
|
+
if (isParentContainer(e.target) && isDragging) {
|
5523
5527
|
e.preventDefault();
|
5524
5528
|
e.stopPropagation();
|
5525
5529
|
}
|
5526
5530
|
};
|
5527
5531
|
|
5528
|
-
const
|
5529
|
-
$.set(movedX,
|
5532
|
+
const move = (moved) => {
|
5533
|
+
$.set(movedX, moved);
|
5530
5534
|
|
5531
|
-
if (
|
5535
|
+
if ((moved > 10 || moved < -10) && !isDragging) {
|
5532
5536
|
isDragging = true;
|
5533
5537
|
}
|
5534
5538
|
};
|
5535
5539
|
|
5540
|
+
const handleTouchmove = (e) => {
|
5541
|
+
const now = performance.now();
|
5542
|
+
|
5543
|
+
if (now - lastFrame < THROTTLE) return;
|
5544
|
+
move(startX - e.touches[0].clientX);
|
5545
|
+
lastFrame = now;
|
5546
|
+
};
|
5547
|
+
|
5536
5548
|
const handleTouchend = () => {
|
5537
5549
|
if ($.get(movedX) >= 32) {
|
5538
5550
|
toNext();
|
@@ -5550,16 +5562,12 @@ function Slider($$anchor, $$props) {
|
|
5550
5562
|
startX = e.touches[0].clientX;
|
5551
5563
|
isDragging = false;
|
5552
5564
|
document.addEventListener('touchmove', handleTouchmove, { passive: true });
|
5553
|
-
document.addEventListener('touchend', handleTouchend, { passive:
|
5554
|
-
document.addEventListener('click', handleClick
|
5565
|
+
document.addEventListener('touchend', handleTouchend, { passive: false });
|
5566
|
+
document.addEventListener('click', handleClick);
|
5555
5567
|
};
|
5556
5568
|
|
5557
5569
|
const handleMousemove = (e) => {
|
5558
|
-
|
5559
|
-
|
5560
|
-
if ($.get(movedX) > 10 || $.get(movedX) < -10) {
|
5561
|
-
isDragging = true;
|
5562
|
-
}
|
5570
|
+
move(startX - e.clientX);
|
5563
5571
|
};
|
5564
5572
|
|
5565
5573
|
const handleMouseup = (e) => {
|
@@ -5572,7 +5580,6 @@ function Slider($$anchor, $$props) {
|
|
5572
5580
|
$.set(movedX, null);
|
5573
5581
|
|
5574
5582
|
if (isDragging) {
|
5575
|
-
// e.preventDefault()
|
5576
5583
|
e.stopPropagation();
|
5577
5584
|
}
|
5578
5585
|
|
@@ -5604,7 +5611,6 @@ function Slider($$anchor, $$props) {
|
|
5604
5611
|
}
|
5605
5612
|
|
5606
5613
|
return () => {
|
5607
|
-
// clearInterval(childCountTimer)
|
5608
5614
|
if (autoSlideTimer) clearInterval(autoSlideTimer);
|
5609
5615
|
};
|
5610
5616
|
});
|
@@ -5695,7 +5701,8 @@ function Slider($$anchor, $$props) {
|
|
5695
5701
|
borderRadius: '100%',
|
5696
5702
|
display: 'block',
|
5697
5703
|
background: '#AAAAAA',
|
5698
|
-
border: 0
|
5704
|
+
border: 0,
|
5705
|
+
cursor: 'pointer'
|
5699
5706
|
});
|
5700
5707
|
});
|
5701
5708
|
|
@@ -5711,6 +5718,7 @@ function Slider($$anchor, $$props) {
|
|
5711
5718
|
$.reset(ul);
|
5712
5719
|
$.bind_this(ul, ($$value) => $.set(slotElement, $$value), () => $.get(slotElement));
|
5713
5720
|
$.reset(div_1);
|
5721
|
+
$.bind_this(div_1, ($$value) => $.set(containerElement, $$value), () => $.get(containerElement));
|
5714
5722
|
|
5715
5723
|
var div_2 = $.sibling(div_1, 2);
|
5716
5724
|
|