v0.2.0

components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stdf",
-    "version": "0.1.5",
+    "version": "0.2.0",
     "description": "Mobile web component library based on Svelte and Tailwind",
     "main": "index.js",
     "scripts": {

components/src/swiper/Swiper.svelte

@@ -43,6 +43,18 @@
     export let radius = 'none'; //容器内部区域圆角,none/base/xl/2xl/full container inner radius
     export let innerInjClass = ''; //容器内部元素注入 Class container inner inject class
 
+    // 始终触发的滑动距离百分比
+    // touch move distance percent
+    export let triggerLong = 30;
+
+    // 始终不触发的滑动距离百分比
+    // not touch move distance percent
+    export let notTriggerLong = 10;
+
+    // 触发的滑动速度系数
+    // touch move speed coefficient
+    export let triggerSpeed = 0.5;
+
     let width = containerWidth === 0 ? document.body.clientWidth : containerWidth; //宽度 width
     let active = data.length > 1 ? initActive + 1 : 1; //当前激活的item current active item
     let currentIndicate = data.length > 1 ? initActive : 0; //当前激活的指示器  current active indicate
@@ -59,7 +71,7 @@
     let transition = true;
     let swiperDom = null; //Swiper容器
     $: movePercent = moveX / width; //滑动距离占总宽度的百分比 touch width percent
-    
+
     const dataNew =
         data.length > 1
             ? [data[data.length - 1], ...data, data[0], data[1]]
@@ -320,28 +332,32 @@
         clearInterval(intervalTime); //清除定时器 clear timer
         moveX = e.clientX - startX;
     };
+
     //滑动结束
     // slide end
-    const touchendFun = () => {
-        isMove = false;
+    const touchendFun = e => {
         endTime = new Date().getTime();
-        translateXTransition = true;
-        //滑动距离大于等于容器宽度三分之一不用考虑滑动速度，都触发切换。
-        //滑动距离小于等于容器宽度十分之一，无论速度快慢都不触发切换。
-        //滑动距离大于容器宽度十分之一且小于三分之一，需要判断滑动速度，用一个速度阈值来判断。阈值大于等于0.5切换，否则不切换。
-        // If the sliding distance is greater than or equal to one-third of the container width, there is no need to consider the sliding speed, and the switching is triggered.
-        // If the sliding distance is less than or equal to one-tenth of the container width, the switching is not triggered regardless of the speed.
-        // If the sliding distance is greater than one-tenth of the container width and less than one-third, you need to judge the sliding speed and use a speed threshold to judge. The threshold is greater than or equal to 0.5 to switch, otherwise it will not switch.
         const moveXABS = Math.abs(moveX); //滑动距离，moveX绝对值。  slide distance, moveX absolute value
         const timeLong = endTime - startTime; //滑动时间  slide time
         const speed = moveXABS / timeLong; //滑动速度阈值  slide speed threshold
+
+        //滑动距离大于等于容器宽度 triggerLong/100 不用考虑滑动速度，都触发切换。
+        //滑动距离小于等于容器宽度 notTriggerLong/100，无论速度快慢都不触发切换。
+        //滑动距离大于容器宽度 notTriggerLong/100 且小于 triggerLong/100，需要判断滑动速度，用一个速度阈值来判断。阈值大于等于 triggerSpeed 切换，否则不切换。
+        // The sliding distance is greater than or equal to the container width triggerLong/100, and the sliding speed does not need to be considered, and the switching is triggered.
+        // The sliding distance is less than or equal to the container width notTriggerLong/100, and the switching is not triggered regardless of the speed.
+        // The sliding distance is greater than the container width notTriggerLong/100 and less than triggerLong/100, the sliding speed needs to be judged, and a speed threshold is used to judge. The threshold is greater than or equal to triggerSpeed to switch, otherwise it will not switch.
+
+        isMove = false;
+        translateXTransition = true;
+
         long = false;
         longTransition = false;
         setTimeout(() => {
             long = autoplay;
             longTransition = true;
         }, duration);
-        if (moveX <= -(width / 3)) {
+        if (moveX <= -(width * (triggerLong / 100))) {
             //左滑
             // slide left
             moveX = 0;
@@ -358,7 +374,7 @@
                     translateXTransition = false;
                 }, duration);
             }
-        } else if (moveX >= width / 3) {
+        } else if (moveX >= width * (triggerLong / 100)) {
             moveX = 0;
             currentIndicate--;
             active--;
@@ -373,8 +389,8 @@
                     translateXTransition = false;
                 }, duration);
             }
-        } else if (moveXABS > width / 10 && moveXABS < width / 3) {
-            if (moveX < 0 && speed >= 0.5) {
+        } else if (moveXABS > (notTriggerLong / 100) * width && moveXABS < width * (triggerLong / 100)) {
+            if (moveX < 0 && speed >= triggerSpeed) {
                 //左滑
                 // slide left
                 moveX = 0;
@@ -391,7 +407,7 @@
                         translateXTransition = false;
                     }, duration);
                 }
-            } else if (moveX > 0 && speed >= 0.5) {
+            } else if (moveX > 0 && speed >= triggerSpeed) {
                 //右滑
                 // slide right
                 moveX = 0;

doc/components/swiper/FAQ.md

@@ -1 +1,3 @@
+## 问：为何 Swiper 左右滑动过快时会感到卡顿？
 
+答：最开始是考虑直接通过使容器左右滚动和滚动对齐来实现切换效果（自带滚动惯性），遗憾的是目前 web 还不支持对平滑滚动的过渡时间做控制，这就失去了过渡效果的可配置。所以目前采用的方案是监听手指滑动的距离来实现滑动切换，同时通过 triggerLong、notTriggerLong 和 triggerSpeed 可对触发条件做自定义配置。当手指滑动结束离开屏幕时即表示一次滑动结束，Swiper 会结合滑动距离与滑动速度判断本次滑动是否触发切换。

doc/components/swiper/FAQ_en.md

@@ -1 +1,3 @@
+## Q: Why does Swiper lag when sliding too quickly left and right?
 
+A: Initially, we considered using container scrolling and alignment to achieve the switching effect (with built-in scroll inertia). Unfortunately, web browsers currently do not support controlling the transition time for smooth scrolling, which makes the configuration of transition effects impossible. Therefore, the current solution is to listen to the distance of finger sliding to achieve slide switching, and custom configure the triggering conditions using triggerLong, notTriggerLong, and triggerSpeed. When the finger finishes sliding and leaves the screen, it indicates the end of a slide. Swiper will determine whether to trigger the slide switch based on the sliding distance and sliding speed.

doc/components/swiper/api.md

@@ -27,6 +27,9 @@
 | activeInjClass      | String  | ’‘          | Class                                  | N    | 激活容器注入 Class。       |
 | notActiveInjClass   | String  | ’‘          | Class                                  | N    | 未激活容器注入 Class。     |
 | radius              | String  | 'none'      | 'none'/'base'/'xl'/'2xl'/'full'        | N    | 容器内部区域圆角。         |
+| triggerLong         | Number  | 30          | 0-100                                  | N    | 始终触发的滑动距离百分比。     |
+| notTriggerLong      | Number  | 10          | 0-100                                  | N    | 始终不触发的滑动距离百分比。   |
+| triggerSpeed        | Number  | 0.5         | 0-1                                    | N    | 触发的滑动速度系数。       |
 | innerInjClass       | String  | ’‘          | Class                                  | N    | 容器内部元素注入 Class。   |
 
 ## Swiper Events

doc/components/swiper/api_en.md

@@ -1,33 +1,36 @@
 ## Swiper Props
 
-| Prop Name           | Type    | Default Value | Optional Values                        | Required | Description                                         |
-| ------------------- | ------- | ------------- | -------------------------------------- | -------- | --------------------------------------------------- |
-| data                | Array   | []            | -                                      | Y        | The data to be rendered.                            |
-| interval            | Number  | 4             | -                                      | N        | Time interval (in seconds).                         |
-| duration            | Number  | 1000          | -                                      | N        | Transition duration (in milliseconds).              |
-| autoplay            | Boolean | true          | true/false                             | N        | Whether to enable automatic playback.               |
-| lazyplay            | Boolean | true          | true/false                             | N        | Whether to enable lazy loading.                     |
-| initActive          | Number  | 0             | -                                      | N        | Initial active index.                               |
-| indicatePosition    | String  | 'inner'       | 'inner'/'out'/'none'                   | N        | Indicator position.                                 |
-| indicateAlign       | String  | 'center'      | 'start'/'center'/'end'                 | N        | Indicator alignment.                                |
-| indicateStyle       | String  | 'pointLine'   | 'point'/'line'/'pointLine'/'longLine'  | N        | Indicator style.                                    |
-| indicateRadius      | Boolean | true          | true/false                             | N        | Whether the indicator has rounded corners.          |
-| indicateInjClass    | String  | '''           | Class                                  | N        | Additional class for the indicator.                 |
-| indicateColor       | String  | '''           | Class                                  | N        | Indicator color.                                    |
-| indicateActiveColor | String  | '''           | Class                                  | N        | Active indicator color.                             |
-| aspectRatio         | Array   | [16, 9]       | -                                      | N        | Container aspect ratio.                             |
-| containerWidth      | Number  | 0             | -                                      | N        | Container width.                                    |
-| px                  | String  | ’0‘           | '0'/'1'/'2'/'4'/'6'/'8'/'12'/'16'/'24' | N        | Horizontal padding of the container.                |
-| py                  | String  | '0'           | '0'/'1'/'2'/'4'/'6'/'8'/'12'           | N        | Vertical padding of the container.                  |
-| translateX          | Number  | 0             | -                                      | N        | X-axis offset value for inactive containers.        |
-| translateZ          | Number  | 0             | -                                      | N        | Z-axis offset value for inactive containers.        |
-| rotateX             | Number  | 0             | -                                      | N        | X-axis rotation value for inactive containers.      |
-| rotateY             | Number  | 0             | -                                      | N        | Y-axis rotation value for inactive containers.      |
-| rotateZ             | Number  | 0             | -                                      | N        | Z-axis rotation value for inactive containers.      |
-| activeInjClass      | String  | ’‘            | Class                                  | N        | Additional class for active container.              |
-| notActiveInjClass   | String  | ’‘            | Class                                  | N        | Additional class for inactive containers.           |
-| radius              | String  | 'none'        | 'none'/'base'/'xl'/'2xl'/'full'        | N        | Container inner radius.                             |
-| innerInjClass       | String  | ’‘            | Class                                  | N        | Additional class for elements inside the container. |
+| Prop Name           | Type    | Default Value | Optional Values                        | Required | Description                                                           |
+| ------------------- | ------- | ------------- | -------------------------------------- | -------- | --------------------------------------------------------------------- |
+| data                | Array   | []            | -                                      | Y        | The data to be rendered.                                              |
+| interval            | Number  | 4             | -                                      | N        | Time interval (in seconds).                                           |
+| duration            | Number  | 1000          | -                                      | N        | Transition duration (in milliseconds).                                |
+| autoplay            | Boolean | true          | true/false                             | N        | Whether to enable automatic playback.                                 |
+| lazyplay            | Boolean | true          | true/false                             | N        | Whether to enable lazy loading.                                       |
+| initActive          | Number  | 0             | -                                      | N        | Initial active index.                                                 |
+| indicatePosition    | String  | 'inner'       | 'inner'/'out'/'none'                   | N        | Indicator position.                                                   |
+| indicateAlign       | String  | 'center'      | 'start'/'center'/'end'                 | N        | Indicator alignment.                                                  |
+| indicateStyle       | String  | 'pointLine'   | 'point'/'line'/'pointLine'/'longLine'  | N        | Indicator style.                                                      |
+| indicateRadius      | Boolean | true          | true/false                             | N        | Whether the indicator has rounded corners.                            |
+| indicateInjClass    | String  | '''           | Class                                  | N        | Additional class for the indicator.                                   |
+| indicateColor       | String  | '''           | Class                                  | N        | Indicator color.                                                      |
+| indicateActiveColor | String  | '''           | Class                                  | N        | Active indicator color.                                               |
+| aspectRatio         | Array   | [16, 9]       | -                                      | N        | Container aspect ratio.                                               |
+| containerWidth      | Number  | 0             | -                                      | N        | Container width.                                                      |
+| px                  | String  | ’0‘           | '0'/'1'/'2'/'4'/'6'/'8'/'12'/'16'/'24' | N        | Horizontal padding of the container.                                  |
+| py                  | String  | '0'           | '0'/'1'/'2'/'4'/'6'/'8'/'12'           | N        | Vertical padding of the container.                                    |
+| translateX          | Number  | 0             | -                                      | N        | X-axis offset value for inactive containers.                          |
+| translateZ          | Number  | 0             | -                                      | N        | Z-axis offset value for inactive containers.                          |
+| rotateX             | Number  | 0             | -                                      | N        | X-axis rotation value for inactive containers.                        |
+| rotateY             | Number  | 0             | -                                      | N        | Y-axis rotation value for inactive containers.                        |
+| rotateZ             | Number  | 0             | -                                      | N        | Z-axis rotation value for inactive containers.                        |
+| activeInjClass      | String  | ’‘            | Class                                  | N        | Additional class for active container.                                |
+| notActiveInjClass   | String  | ’‘            | Class                                  | N        | Additional class for inactive containers.                             |
+| radius              | String  | 'none'        | 'none'/'base'/'xl'/'2xl'/'full'        | N        | Container inner radius.                                               |
+| triggerLong         | Number  | 30            | 0-100                                  | N        | Percentage of sliding distance that always triggers the slide switch. |
+| notTriggerLong      | Number  | 10            | 0-100                                  | N        | Percentage of sliding distance that never triggers the slide switch.  |
+| triggerSpeed        | Number  | 0.5           | 0-1                                    | N        | Touch move speed coefficient.                                         |
+| innerInjClass       | String  | ’‘            | Class                                  | N        | Additional class for elements inside the container.                   |
 
 ## Swiper Events
 

doc/components/swiper/guide.md

@@ -43,6 +43,16 @@ aspectRatio 计算出来。
 
 点击事件仅仅在传入图片时生效，传入组件时事件由传入的组件内部决定。
 
+## 滑动事件
+
+当手指或其他触摸设备在 Swiper 容器内滑动结束时，Swiper 会结合滑动距离与滑动速度判断本次滑动是否触发切换，若触发则会根据滑动方向切换到上一个或下一个容器。
+
+-   当滑动距离小于某个阈值时，始终不触发切换。
+-   当滑动距离大于某个阈值时，始终触发切换。
+-   当滑动距离介于两个阈值之间时，会根据滑动速度判断是否触发切换，速度大于某个速度系数时会触发切换。
+
+上述三种情况的阈值和速度系数可以通过 triggerLong、notTriggerLong 和 triggerSpeed 参数进行自定义。其中 triggerLong 和 notTriggerLong 为百分比，表示滑动距离占容器宽度的百分比；triggerSpeed 为 0-1 之间的小数，表示滑动速度系数。
+
 ## lazyplay
 
 Swiper 自动轮播时有一系列过渡动画，当页面同时有大量过渡效果时，考虑到设备性能与动画帧率等问题，Swiper 默认会开启懒轮播，即
@@ -50,8 +60,8 @@ Swiper 组件**不在页面可视范围内时会暂停自动轮播**，当然你
 
 下面两张图展示了极端情况下，同一个页面存在 30+ Swiper 同时轮播时，桌面端浏览器处理大量过渡动画时的性能监视图对比。
 
-- 未开启懒轮播，同时会有 30+ 组过渡动画在进行时的性能监视图。
-  <img src="lazyplay_no.png" style="width: 100%;" alt="lazyplay_no" title="未开启懒轮播性能监视图">
+-   未开启懒轮播，同时会有 30+ 组过渡动画在进行时的性能监视图。
+    <img src="lazyplay_no.png" style="width: 100%;" alt="lazyplay_no" title="未开启懒轮播性能监视图">
 
-- 已开启懒轮播，同时只有 3-4 组过渡动画在进行时的性能监视图。
-  <img src="lazyplay_yes.png" style="width: 100%;" alt="lazyplay_yes" title="已开启懒轮播性能监视图">
+-   已开启懒轮播，同时只有 3-4 组过渡动画在进行时的性能监视图。
+    <img src="lazyplay_yes.png" style="width: 100%;" alt="lazyplay_yes" title="已开启懒轮播性能监视图">

doc/components/swiper/guide_en.md

@@ -40,6 +40,16 @@ This is the setting of the rounded corners and injection classes for the interna
 
 The click event only works when images are passed in. When components are passed in, the event is determined by the component passed in.
 
+## Slide Events
+
+When the finger or other touch device finishes sliding within the Swiper container, Swiper determines whether to trigger the slide switch based on the sliding distance and sliding speed. If it is triggered, Swiper will switch to the previous or next container according to the sliding direction.
+
+-   When the sliding distance is less than a certain threshold, the slide switch is never triggered.
+-   When the sliding distance is greater than a certain threshold, the slide switch is always triggered.
+-   When the sliding distance is between two thresholds, the slide switch is triggered based on the sliding speed. If the speed is greater than a certain speed coefficient, the slide switch is triggered.
+
+The thresholds and speed coefficients for the above three cases can be customized using the triggerLong, notTriggerLong, and triggerSpeed. Among them, triggerLong and notTriggerLong are percentages representing the percentage of the sliding distance to the container width, and triggerSpeed is a decimal between 0 and 1 representing the sliding speed coefficient.
+
 ## lazyplay
 
 Swiper has a series of transition animations when autoplaying. When there are a large number of transition effects on the page, considering device performance and animation frame rate issues, Swiper will enable lazy autoplay by default, which means that the Swiper component **will pause autoplay when it is not within the visible range**. Of course, you can also set this separately.

doc/components/swiper/version.md

@@ -1 +1,5 @@
+## 0.2.0
 
+-   [!tag|A|0|] 支持通过 triggerLong、notTriggerLong 和 triggerSpeed 三个 API 自定义滑动触发条件。
+
+<font size=1>2023-07-23</font>

doc/components/swiper/version_en.md

@@ -0,0 +1,5 @@
+## 0.2.0
+
+-   [!tag|A|0|] Supports customizing slide triggering conditions through the triggerLong, notTriggerLong, and triggerSpeed APIs.
+
+<font size=1>2023-07-23</font>

doc/guide/changelog.md

@@ -1,3 +1,8 @@
+## 0.2.0
+
+-   适配 Svelte 4 同时也兼容 Svelte 3。目前仅需适配一项，即升级部分组件过渡动画，参考 Svelte 4 migration guide - [Transitions are local by default](https://svelte.dev/docs/v4-migration-guide#transitions-are-local-by-default)。
+-   增强 Swiper 组件，详见 [Swiper](https://stdf.design/#/components?nav=swiper&tab=4)。
+
 ## 0.1.5
 
 -   修改组件内部的触摸事件为指针事件，使其同时支持鼠标、触控笔和触摸等各种输入方式，包含组件：BottomSheet、IndexBar、Slider、Swiper。关联 [Issues](https://github.com/dufu1991/stdf/issues/5)。[!issue|shenliqing|]

doc/guide/changelog_en.md

@@ -1,3 +1,8 @@
+## 0.2.0
+
+-   Adapted for Svelte 4 while remaining compatible with Svelte 3. Currently, only one item needs to be adapted, which is to upgrade the transition animation of some components. Refer to the Svelte 4 migration guide - [Transitions are local by default](https://svelte.dev/docs/v4-migration-guide#transitions-are-local-by-default).
+-   Enhanced the Swiper component. For details, see [Swiper](https://stdf.design/#/components?nav=swiper&tab=4).
+
 ## 0.1.5
 
 -   Modify the touch events in the components to pointer events, enabling support for various input methods such as mouse, stylus, and touch. The components include BottomSheet, IndexBar, Slider, and Swiper. Related to [Issues](https://github.com/dufu1991/stdf/issues/5). [!issue|shenliqing|]

doc/guide/milestone.md

@@ -1,3 +1,7 @@
+## 2023-07-23
+
+适配 Svelte 4 也兼容 Svelte 3（v0.2.0）。
+
 ## 2023-06-16
 
 入选阮一峰老师的[科技爱好者周刊 259 期](https://www.ruanyifeng.com/blog/2023/06/weekly-issue-259.html)。

doc/guide/milestone_en.md

@@ -1,3 +1,7 @@
+## 2023-07-23
+
+Adapted for Svelte 4 while remaining compatible with Svelte 3 (v0.2.0).
+
 ## 2023-06-16
 
 Featured in Ruan Yifeng's [weekly-issue No. 259](https://www.ruanyifeng.com/blog/2023/06/weekly-issue-259.html).