[stdf]Update Swiper compoent, demo and documents.

demo/src/routes/en_US/swiper/+page.svelte

@@ -4,20 +4,20 @@
 	import Item from './Item_en.svelte';
 
 	/**
-	 * @typedef {Object} img
-	 * @property {'img'} type
-	 * @property {String} url image url
+	 * @typedef {Object} Img
+	 * @property {'img'} type Type
+	 * @property {String} url Image URL
 	 */
 
 	/**
-	 * @typedef {Object} component
-	 * @property {'component'} type
-	 * @property {Object} component
+	 * @typedef {Object} Component
+	 * @property {'component'} type Type
+	 * @property {Object} component Component
 	 */
 
 	/**
 	 * Data
-	 * @type {Array<img|component>}
+	 * @type {(Img|Component)[]}
 	 * @default []
 	 */
 	const data = [
@@ -27,75 +27,68 @@
 		{ type: 'img', url: '/assets/images/wall_4.jpg' },
 	];
 
-	let indexClick = -1;
-	const clickImgFun = i => {
-		indexClick = i.detail;
-	};
-
-	let indexChange = 0;
-	const changeContainerFun = i => {
-		indexChange = i.detail;
-	};
+	let indexClick = $state(-1);
+	let indexChange = $state(0);
 </script>
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Basic usage</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Basic Usage</div>
 <Swiper {data} />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">The initial index is 2</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Initial Index 2</div>
 <Swiper {data} initActive={2} />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Interval of 8 seconds</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">8s Interval</div>
 <Swiper {data} interval={8} />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Transition 1500 ms</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">1500ms Duration</div>
 <Swiper {data} duration={1500} />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Turn off autoplay</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Disable Autoplay</div>
 <Swiper {data} autoplay={false} />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">External indicator</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">External Indicator</div>
 <Swiper {data} indicatePosition="out" />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Off indicator</div>
-<Swiper {data} indicatePosition="none" />
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Hide Indicator</div>
+<Swiper {data} indicatePosition={null} />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Right-align indicator</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Right Aligned Indicator</div>
 <Swiper {data} indicateAlign="right" />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Dot indicator</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Dot Indicator</div>
 <Swiper {data} indicateStyle="point" />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Linear indicator</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Line Indicator</div>
 <Swiper {data} indicateStyle="line" />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Long line indicator</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Long Line Indicator</div>
 <Swiper {data} indicateStyle="longLine" interval={8} />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper {data} indicateStyle="longLine" interval={8} indicatePosition="out" />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Square indicator</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Square Indicator</div>
 <Swiper {data} indicateRadius={false} />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper {data} indicateStyle="point" indicateRadius={false} />
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
-	Specifies the color behind the indicator
-	<p class="font-thin text-xs mb-2">injection Class</p>
+	Custom Indicator Background
+	<p class="font-thin text-xs mb-2">Inject Class</p>
 </div>
 <Swiper {data} indicateInjClass="from-black/0 to-extend0/50" />
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
-	Specify indicator color
-	<p class="font-thin text-xs mb-2">Remove the background color at the same time</p>
+	Custom Indicator Color
+	<p class="font-thin text-xs mb-2">Remove Background</p>
 </div>
 <Swiper {data} indicateInjClass="bg-none" indicateColor="bg-extend2" indicateActiveColor="bg-extend1" />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Specifies the container aspect ratio</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Custom Aspect Ratio</div>
 <Swiper {data} aspectRatio={[4, 1]} />
 
 <div class="font-bold text-lg mx-4 mt-10">
-	Configure the inside margins of the container
-	<p class="font-thin text-xs mb-2">Also specify indicator color, remove indicator back color, and configure container interior fillet</p>
+	Container Padding
+	<p class="font-thin text-xs mb-2">With Custom Colors and Radius</p>
 </div>
 <Swiper
 	{data}
@@ -108,7 +101,7 @@
 	interval={8}
 	indicateStyle="longLine"
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="6"
@@ -121,8 +114,8 @@
 />
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
-	Add a drop shadow inside the container
-	<p class="font-normal text-xs mb-2">injection Class</p>
+	Inner Shadow
+	<p class="font-normal text-xs mb-2">Inject Class</p>
 </div>
 <Swiper
 	{data}
@@ -136,7 +129,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Inactive container X and Z offsets</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Inactive Item X, Z Translation</div>
 <Swiper
 	{data}
 	px="16"
@@ -149,7 +142,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	translateX={100}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -162,7 +155,7 @@
 	translateX={-200}
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="12"
@@ -175,7 +168,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Inactive container X, Y, Z axis rotation</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Inactive Item X, Y, Z Rotation</div>
 <Swiper
 	{data}
 	px="4"
@@ -188,7 +181,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	duration={2000}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -201,7 +194,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	duration={2000}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -214,7 +207,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	duration={2000}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -228,7 +221,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	duration={2000}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -242,7 +235,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	duration={2000}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -257,7 +250,7 @@
 	duration={2000}
 />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">The container injection Class was not activated</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Custom Inactive Item Style</div>
 <Swiper
 	{data}
 	px="24"
@@ -272,7 +265,7 @@
 	duration={2000}
 	notActiveInjClass="grayscale"
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="24"
@@ -288,12 +281,12 @@
 	notActiveInjClass="blur"
 />
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Specified container width</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Custom Container Width</div>
 <div class="flex justify-center">
 	<Swiper {data} containerWidth={(document.body.clientWidth / 4) * 3} />
 </div>
 
-<div class="font-bold text-lg mx-4 mt-10 mb-2">Container content uses components</div>
+<div class="font-bold text-lg mx-4 mt-10 mb-2">Component as Content</div>
 <Swiper
 	data={[
 		{ type: 'component', component: Item },
@@ -302,30 +295,26 @@
 />
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
-	Listen for change events
-	<p class=" font-normal text-xs mb-2">Currently active index values:{indexChange}</p>
+	onchange Event
+	<p class=" font-normal text-xs mb-2">Current Index: {indexChange}</p>
 </div>
-<Swiper {data} on:change={changeContainerFun} />
+<Swiper {data} onchange={current => (indexChange = current)} />
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
-	Listen for click events
-	<p class="font-normal text-xs mb-2">Click on the index value: {indexClick === -1 ? 'Not clicked' : indexClick}</p>
+	onclick Event
+	<p class="font-normal text-xs mb-2">Clicked Index: {indexClick === -1 ? 'None' : indexClick}</p>
 </div>
-<Swiper {data} on:clickimg={clickImgFun} />
+<Swiper {data} onclick={current => (indexClick = current)} />
 
-<!-- Item.svelte -->
-<!-- 
+<!-- Item_en.svelte -->
+<!--
 <script>
-    import { Button, Avatar } from '../../../../../packages/stdf/components';
+	import { Button, Avatar } from 'stdf';
 </script>
 
 <div class="flex flex-col space-y-4 items-center">
-    <div class="text-center">This container uses a single component as its content</div>
-    <div>
-        <Avatar />
-    </div>
-    <div class="w-full">
-        <Button>button</Button>
-    </div>
+	<div class="text-center">This container uses a single component as its content</div>
+	<div><Avatar /></div>
+	<div class="w-full"><Button>button</Button></div>
 </div>
- -->
+-->

demo/src/routes/zh_CN/swiper/+page.svelte

@@ -4,20 +4,20 @@
 	import Item from './Item.svelte';
 
 	/**
-	 * @typedef {Object} img
+	 * @typedef {Object} Img
 	 * @property {'img'} type 类型
 	 * @property {String} url 图片地址
 	 */
 
 	/**
-	 * @typedef {Object} component
+	 * @typedef {Object} Component
 	 * @property {'component'} type 类型
 	 * @property {Object} component 组件
 	 */
 
 	/**
 	 * 数据
-	 * @type {Array<img|component>}
+	 * @type {(Img|Component)[]}
 	 * @default []
 	 */
 	const data = [
@@ -27,15 +27,8 @@
 		{ type: 'img', url: '/assets/images/wall_4.jpg' },
 	];
 
-	let indexClick = -1;
-	const clickImgFun = i => {
-		indexClick = i.detail;
-	};
-
-	let indexChange = 0;
-	const changeContainerFun = i => {
-		indexChange = i.detail;
-	};
+	let indexClick = $state(-1);
+	let indexChange = $state(0);
 </script>
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">基础用法</div>
@@ -57,7 +50,7 @@
 <Swiper {data} indicatePosition="out" />
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">关闭指示器</div>
-<Swiper {data} indicatePosition="none" />
+<Swiper {data} indicatePosition={null} />
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">指示器右对齐</div>
 <Swiper {data} indicateAlign="right" />
@@ -70,12 +63,12 @@
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">长线指示器</div>
 <Swiper {data} indicateStyle="longLine" interval={8} />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper {data} indicateStyle="longLine" interval={8} indicatePosition="out" />
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">方形指示器</div>
 <Swiper {data} indicateRadius={false} />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper {data} indicateStyle="point" indicateRadius={false} />
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
@@ -108,7 +101,7 @@
 	interval={8}
 	indicateStyle="longLine"
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="6"
@@ -149,7 +142,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	translateX={100}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -162,7 +155,7 @@
 	translateX={-200}
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="12"
@@ -188,7 +181,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	duration={2000}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -201,7 +194,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	duration={2000}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -214,7 +207,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	duration={2000}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -228,7 +221,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	duration={2000}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -242,7 +235,7 @@
 	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
 	duration={2000}
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="4"
@@ -272,7 +265,7 @@
 	duration={2000}
 	notActiveInjClass="grayscale"
 />
-<div class="mt-10" />
+<div class="mt-10"></div>
 <Swiper
 	{data}
 	px="24"
@@ -302,28 +295,26 @@
 />
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
-	监听 change 事件
+	监听 onchange 事件
 	<p class=" font-normal text-xs mb-2">当前激活索引值：{indexChange}</p>
 </div>
-<Swiper {data} on:change={changeContainerFun} />
+<Swiper {data} onchange={current => (indexChange = current)} />
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
-	监听 click 事件
+	监听 onclick 事件
 	<p class="font-normal text-xs mb-2">点击索引值：{indexClick === -1 ? '未点击' : indexClick}</p>
 </div>
-<Swiper {data} on:clickimg={clickImgFun} />
+<Swiper {data} onclick={current => (indexClick = current)} />
 
 <!-- Item.svelte -->
-<!-- <script>
-    import { Button, Avatar } from '../../../../../packages/stdf/components';
+<!--
+<script>
+	import { Button, Avatar } from 'stdf';
 </script>
 
 <div class="flex flex-col space-y-4 items-center">
-    <div class="text-center">此容器使用单个组件作为内容</div>
-    <div>
-        <Avatar />
-    </div>
-    <div class="w-full">
-        <Button>按 钮</Button>
-    </div>
-</div> -->
+	<div class="text-center">此容器使用单个组件作为内容</div>
+	<div><Avatar /></div>
+	<div class="w-full"><Button>按钮</Button></div>
+</div>
+-->

doc/components/swiper/api.md

@@ -1,40 +1,52 @@
 ## Swiper Props
 
-| 属性                | 类型    | 默认值      | 可选值                                 | 必传 | 说明                         |
-| ------------------- | ------- | ----------- | -------------------------------------- | ---- | ---------------------------- |
-| data                | Array   | []          | -                                      | Y    | 数据。                       |
-| interval            | Number  | 4           | -                                      | N    | 间隔时间（秒）。             |
-| duration            | Number  | 1000        | -                                      | N    | 过渡时间（毫秒）。           |
-| autoplay            | Boolean | true        | true/false                             | N    | 是否自动播放。               |
-| lazyplay            | Boolean | true        | true/false                             | N    | 是否懒轮播。                 |
-| initActive          | Number  | 0           | -                                      | N    | 初始激活索引。               |
-| indicatePosition    | String  | 'inner'     | 'inner'/'out'/'none'                   | N    | 指示器位置。                 |
-| indicateAlign       | String  | 'center'    | 'start'/'center'/'end'                 | N    | 指示器对齐方式。             |
-| indicateStyle       | String  | 'pointLine' | 'point'/'line'/'pointLine'/'longLine'  | N    | 指示器样式。                 |
-| indicateRadius      | Boolean | true        | true/false                             | N    | 指示器是否圆角。             |
-| indicateInjClass    | String  | '''         | Class                                  | N    | 指示器注入 Class。           |
-| indicateColor       | String  | '''         | Class                                  | N    | 指示器颜色。                 |
-| indicateActiveColor | String  | '''         | Class                                  | N    | 指示器激活颜色。             |
-| aspectRatio         | Array   | [16, 9]     | -                                      | N    | 容器宽高比。                 |
-| containerWidth      | Number  | 0           | -                                      | N    | 容器宽度。                   |
-| px                  | String  | ’0‘         | '0'/'1'/'2'/'4'/'6'/'8'/'12'/'16'/'24' | N    | 容器横向内边距。             |
-| py                  | String  | '0'         | '0'/'1'/'2'/'4'/'6'/'8'/'12'           | N    | 容器纵向内边距。             |
-| translateX          | Number  | 0           | -                                      | N    | 未激活容器 X 方向偏移值。    |
-| translateZ          | Number  | 0           | -                                      | N    | 未激活容器 Z 方向偏移值 。   |
-| rotateX             | Number  | 0           | -                                      | N    | 未激活容器 X 轴旋转值。      |
-| rotateY             | Number  | 0           | -                                      | N    | 未激活容器 Y 轴旋转值。      |
-| rotateZ             | Number  | 0           | -                                      | N    | 未激活容器 Z 轴旋转值。      |
-| 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。     |
+| 名称                | 类型                                             | 默认值        | 必传 | 说明                         |
+| ------------------- | ------------------------------------------------ | ------------- | ---- | ---------------------------- |
+| data                | `(SwiperImg\|SwiperComponent)[]`                 | `[]`          | Y    | 数据。                       |
+| interval            | `number`                                         | `4`           | N    | 间隔时间（秒）。             |
+| duration            | `number`                                         | `1000`        | N    | 过渡时间（毫秒）。           |
+| autoplay            | `boolean`                                        | `true`        | N    | 是否自动播放。               |
+| lazyplay            | `boolean`                                        | `true`        | N    | 是否懒轮播。                 |
+| initActive          | `number`                                         | `0`           | N    | 初始激活索引。               |
+| indicatePosition    | `'inner'\|'out'\|null`                           | `'inner'`     | N    | 指示器位置。                 |
+| indicateAlign       | `'center'\|'right'\|'left'`                      | `'center'`    | N    | 指示器对齐方式。             |
+| indicateStyle       | `'point'\|'line'\|'pointLine'\|'longLine'`       | `'pointLine'` | N    | 指示器样式。                 |
+| indicateRadius      | `boolean`                                        | `true`        | N    | 指示器是否圆角。             |
+| indicateInjClass    | `string`                                         | `''`          | N    | 指示器注入 Class。           |
+| indicateColor       | `string`                                         | `''`          | N    | 指示器颜色。                 |
+| indicateActiveColor | `string`                                         | `''`          | N    | 指示器激活颜色。             |
+| aspectRatio         | `[number,number]`                                | `[16, 9]`     | N    | 容器宽高比。                 |
+| containerWidth      | `number`                                         | `0`           | N    | 容器宽度。                   |
+| px                  | `'0'\|'1'\|'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'` | `'0'`         | N    | 容器横向内边距。             |
+| py                  | `'0'\|'1'\|'2'\|'4'\|'6'\|'8'\|'12'`             | `'0'`         | N    | 容器纵向内边距。             |
+| translateX          | `number`                                         | `0`           | N    | 未激活容器 X 方向偏移值。    |
+| translateZ          | `number`                                         | `0`           | N    | 未激活容器 Z 方向偏移值 。   |
+| rotateX             | `number`                                         | `0`           | N    | 未激活容器 X 轴旋转值。      |
+| rotateY             | `number`                                         | `0`           | N    | 未激活容器 Y 轴旋转值。      |
+| rotateZ             | `number`                                         | `0`           | N    | 未激活容器 Z 轴旋转值。      |
+| activeInjClass      | `string`                                         | `''`          | N    | 激活容器注入 Class。         |
+| notActiveInjClass   | `string`                                         | `''`          | N    | 未激活容器注入 Class。       |
+| radius              | `'none'\|'base'\|'xl'\|'2xl'\|'full'`            | `'none'`      | N    | 容器内部区域圆角。           |
+| triggerLong         | `number`                                         | `30`          | N    | 始终触发的滑动距离百分比。   |
+| notTriggerLong      | `number`                                         | `10`          | N    | 始终不触发的滑动距离百分比。 |
+| triggerSpeed        | `number`                                         | `0.5`         | N    | 触发的滑动速度系数。         |
+| innerInjClass       | `string`                                         | `''`          | N    | 容器内部元素注入 Class。     |
 
 ## Swiper Events
 
-| 名称     | 参数                                              | 描述                     |
-| -------- | ------------------------------------------------- | ------------------------ |
-| clickimg | event：事件对象，其中 detail 表示点击容器索引值。 | 点击容器内图片时触发。   |
-| change   | event：事件对象，其中 detail 表示当前容器索引值。 | 当前激活容器变化时触发。 |
+| 名称     | 类型                        | 参数                 | 描述                     |
+| -------- | --------------------------- | -------------------- | ------------------------ |
+| onclick  | `(current: number) => void` | current - 点击索引值 | 点击容器内图片时触发。   |
+| onchange | `(current: number) => void` | current - 当前索引值 | 当前激活容器变化时触发。 |
+
+## SwiperImg
+
+```javascript
+type SwiperImg = { type: 'img'; url: string };
+```
+
+## SwiperComponent
+
+```javascript
+type SwiperComponent = { type: 'component'; component: Component };
+```

doc/components/swiper/api_en.md

@@ -1,40 +1,52 @@
 ## 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.                                               |
-| 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.                   |
+| Name                | Type                                             | Default       | Required | Description                                     |
+| ------------------- | ------------------------------------------------ | ------------- | -------- | ----------------------------------------------- |
+| data                | `(SwiperImg\|SwiperComponent)[]`                 | `[]`          | Y        | Data.                                           |
+| interval            | `number`                                         | `4`           | N        | Interval time (seconds).                        |
+| duration            | `number`                                         | `1000`        | N        | Transition duration (milliseconds).             |
+| autoplay            | `boolean`                                        | `true`        | N        | Whether to autoplay.                            |
+| lazyplay            | `boolean`                                        | `true`        | N        | Whether to lazy load.                           |
+| initActive          | `number`                                         | `0`           | N        | Initial active index.                           |
+| indicatePosition    | `'inner'\|'out'\|null`                           | `'inner'`     | N        | Indicator position.                             |
+| indicateAlign       | `'center'\|'right'\|'left'`                      | `'center'`    | N        | Indicator alignment.                            |
+| indicateStyle       | `'point'\|'line'\|'pointLine'\|'longLine'`       | `'pointLine'` | N        | Indicator style.                                |
+| indicateRadius      | `boolean`                                        | `true`        | N        | Whether indicator has rounded corners.          |
+| indicateInjClass    | `string`                                         | `''`          | N        | Indicator injected class.                       |
+| indicateColor       | `string`                                         | `''`          | N        | Indicator color.                                |
+| indicateActiveColor | `string`                                         | `''`          | N        | Active indicator color.                         |
+| aspectRatio         | `[number,number]`                                | `[16, 9]`     | N        | Container aspect ratio.                         |
+| containerWidth      | `number`                                         | `0`           | N        | Container width.                                |
+| px                  | `'0'\|'1'\|'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'` | `'0'`         | N        | Container horizontal padding.                   |
+| py                  | `'0'\|'1'\|'2'\|'4'\|'6'\|'8'\|'12'`             | `'0'`         | N        | Container vertical padding.                     |
+| translateX          | `number`                                         | `0`           | N        | Inactive container X-axis translation.          |
+| translateZ          | `number`                                         | `0`           | N        | Inactive container Z-axis translation.          |
+| rotateX             | `number`                                         | `0`           | N        | Inactive container X-axis rotation.             |
+| rotateY             | `number`                                         | `0`           | N        | Inactive container Y-axis rotation.             |
+| rotateZ             | `number`                                         | `0`           | N        | Inactive container Z-axis rotation.             |
+| activeInjClass      | `string`                                         | `''`          | N        | Active container injected class.                |
+| notActiveInjClass   | `string`                                         | `''`          | N        | Inactive container injected class.              |
+| radius              | `'none'\|'base'\|'xl'\|'2xl'\|'full'`            | `'none'`      | N        | Container inner area border radius.             |
+| triggerLong         | `number`                                         | `30`          | N        | Slide distance percentage that always triggers. |
+| notTriggerLong      | `number`                                         | `10`          | N        | Slide distance percentage that never triggers.  |
+| triggerSpeed        | `number`                                         | `0.5`         | N        | Slide speed coefficient that triggers.          |
+| innerInjClass       | `string`                                         | `''`          | N        | Container inner element injected class.         |
 
 ## Swiper Events
 
-| Event Name | Parameters                                                                             | Description                                            |
-| ---------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------ |
-| clickimg   | event: The event object detail representing the index of the clicked container.        | Triggered when an image inside a container is clicked. |
-| change     | event: The event object detail representing the index of the current active container. | Triggered when the current active container changes.   |
+| Name     | Type                        | Parameters              | Description                              |
+| -------- | --------------------------- | ----------------------- | ---------------------------------------- |
+| onclick  | `(current: number) => void` | current - clicked index | Triggered when clicking container image. |
+| onchange | `(current: number) => void` | current - current index | Triggered when active container changes. |
+
+## SwiperImg
+
+```javascript
+type SwiperImg = { type: 'img'; url: string };
+```
+
+## SwiperComponent
+
+```javascript
+type SwiperComponent = { type: 'component'; component: Component };
+```

doc/components/swiper/guide.md

@@ -1,6 +1,6 @@
 ## data
 
-传入的数据 data 内部的 type 支持'img'和'component'，其中 img 类型需要传入图片 url，component 类型时传入单文件组件，Swiper
+传入的数据 data 内部的 type 支持 `'img'` 和 `'component'`，其中 `img` 类型需要传入图片 url，`component` 类型时传入单文件组件，Swiper
 内部将会根据 type 渲染对应内容。
 
 ## interval && duration
@@ -9,7 +9,7 @@
 
 ## indicateStyle
 
-此参数配置指示器的样式，其中 longLine 时，激活的指示器会在 Swiper 停留时间内表示间隔进度，请参考示例。
+此参数配置指示器的样式，当 `indicateStyle` 为 `longLine` 时，激活的指示器会在 Swiper 停留时间内表示间隔进度，请参考示例。
 
 ## indicateInjClass
 
@@ -39,7 +39,7 @@ aspectRatio 计算出来。
 
 这是对容器内部区域的圆角设置与注入 Class，请参考示例。
 
-## clickimg 事件
+## onclick 事件
 
 点击事件仅仅在传入图片时生效，传入组件时事件由传入的组件内部决定。
 

doc/components/swiper/guide_en.md

@@ -1,63 +1,63 @@
 ## data
 
-The internal `type` supported by the incoming `data` can be `img` or `component`. For the `img` type, the image URL needs to be passed in, and for the `component` type, a single file component needs to be passed in. Swiper will render the corresponding content according to the `type`.
+The type field in the input data supports 'img' and 'component'. For 'img' type, you need to provide an image URL. For 'component' type, you need to provide a single-file component. The Swiper will render corresponding content based on the type.
 
 ## interval && duration
 
-For ease of writing, note that the interval time is in seconds, and the transition time is in milliseconds, and that the transition time passed in must be less than the interval time.
+For convenience, note that the interval time is in seconds while the transition duration is in milliseconds. Also note that the transition duration must be less than the interval time.
 
 ## indicateStyle
 
-This parameter configures the style of the indicator. When `longLine` is used, the active indicator will represent the interval progress during the time the Swiper stays, please refer to the example.
+This parameter configures the indicator style. When `indicateStyle` is set to `longLine`, the active indicator will show the interval progress during the Swiper's dwell time. Please refer to the examples.
 
 ## indicateInjClass
 
-This parameter can inject CSS class names (not limited to Tailwind CSS) into the indicator region. For example, in the example, the default gradient background with transparency is removed by injecting a class.
+This parameter allows you to inject CSS class names (not limited to Tailwind CSS) into the indicator area. For example, you can remove the default gradient background with transparency as shown in the examples.
 
-If the injected class doesn't work, add an exclamation mark before the class name to force it to take effect. You can refer to the [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).
+If the injected class doesn't take effect, add "!" before the class name. Please refer to [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).
 
 ## aspectRatio && containerWidth && px && py
 
-If `containerWidth` is not passed in or is 0, Swiper will use the page width as the width of the component area by default. The height of this area will be calculated based on `containerWidth` and `aspectRatio`.
+If containerWidth is not provided or set to 0, the Swiper will use the page width as the component area width by default. The height of this area will be calculated using containerWidth and aspectRatio.
 
-Note that `aspectRatio` only determines the aspect ratio of the container, so the aspect ratio of the display area inside each container will only be the same as `aspectRatio` when `px` and `py` are the same.
+Note that aspectRatio only determines the container's aspect ratio. The aspect ratio of the inner display area will match aspectRatio only when px and py are equal.
 
-## Inactive container offset and rotation
+## Inactive Container Offset and Rotation
 
-By setting the offset values in the X and Z directions and the rotation angles around the X, Y, and Z axes, the inactive container can be offset and rotated on the corresponding axes, achieving some special transition effects. Please refer to the example.
+By setting offset values in X and Z directions and rotation angles around X, Y, and Z axes, inactive containers can be offset and rotated along corresponding axes to achieve special transition effects. Please refer to the examples.
 
-Note that the offset value is in pixels (px), while the rotation angle is in degrees (deg).
+Note that offset values are in pixels (px) while rotation angles are in degrees (deg).
 
 ## activeInjClass && notActiveInjClass
 
-By injecting classes into the active and inactive containers, containers in different states can have different styles.
+By injecting classes into active and inactive containers, you can apply different styles to containers in different states.
 
 ## radius && innerInjClass
 
-This is the setting of the rounded corners and injection classes for the internal region of the container. Please refer to the example.
+These parameters control the border radius and class injection for the inner container area. Please refer to the examples.
 
-## clickimg event
+## onclick Event
 
-The click event only works when images are passed in. When components are passed in, the event is determined by the component passed in.
+Click events only work when images are provided. For components, events are determined by the provided component itself.
 
-## Slide Events
+## Swipe 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 a finger or other touch device finishes sliding within the Swiper container, the Swiper will determine whether to trigger a switch based on the sliding distance and velocity. If triggered, it 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.
+- When the sliding distance is less than a certain threshold, switching will never be triggered.
+- When the sliding distance is greater than a certain threshold, switching will always be triggered.
+- When the sliding distance is between these two thresholds, switching will be determined by the sliding velocity - if the velocity exceeds a certain coefficient, switching will be 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.
+The thresholds and velocity coefficient for these three scenarios can be customized through triggerLong, notTriggerLong, and triggerSpeed parameters. Both triggerLong and notTriggerLong are percentages representing the sliding distance as a percentage of container width; triggerSpeed is a decimal between 0-1 representing the velocity 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.
+When Swiper auto-plays, there are a series of transition animations. Considering device performance and animation frame rate issues when there are many simultaneous transitions on a page, Swiper enables lazy playback by default - meaning the Swiper component **will pause auto-play when not in the viewport**. Of course, you can configure this individually.
 
-The following two images show the performance monitoring comparison of desktop browsers processing a large number of transition animations when there are 30+ Swipers autoplaying on the same page in extreme cases:
+The following two images show performance monitoring comparisons in an extreme case where 30+ Swipers are playing simultaneously on the same page in a desktop browser.
 
-- When lazy autoplay is not enabled and there are 30+ transition animations being performed at the same time:
-  <img src="lazyplay_no.png" style="width: 100%;" alt="lazyplay_no" title="Performance monitoring image when lazy autoplay is not enabled">
+- Performance monitor when lazy playback is disabled, showing 30+ sets of transitions occurring simultaneously.
+  <img src="lazyplay_no.png" style="width: 100%;" alt="lazyplay_no" title="Performance monitor with lazy playback disabled">
 
-- When lazy autoplay is enabled and only 3-4 transition animations are being performed at the same time:
-  <img src="lazyplay_yes.png" style="width: 100%;" alt="lazyplay_yes" title="Performance monitoring image when lazy autoplay is enabled">
+- Performance monitor when lazy playback is enabled, showing only 3-4 sets of transitions occurring simultaneously.
+  <img src="lazyplay_yes.png" style="width: 100%;" alt="lazyplay_yes" title="Performance monitor with lazy playback enabled">

packages/stdf/components/swiper/Swiper.svelte

@@ -34,7 +34,7 @@
 		notTriggerLong = 10,
 		triggerSpeed = 0.5,
 		onchange,
-		onclickImg,
+		onclick,
 	} = $props();
 
 	let width = containerWidth === 0 ? document.body.clientWidth : containerWidth; //宽度 width
@@ -129,13 +129,11 @@
 			return `${-translateX}px`;
 		}
 	};
-	const translateZFun = (i, active, translateZ, movePercent) => {
-		if (i === active) {
-			return `${0 - Math.abs(translateZ * (isMove ? movePercent : 0))}px`;
-		} else {
-			return `${-translateZ + Math.abs(translateZ * (isMove ? movePercent : 0))}px`;
-		}
-	};
+	const translateZFun = (i, active, translateZ, movePercent) =>
+		i === active
+			? `${0 - Math.abs(translateZ * (isMove ? movePercent : 0))}px`
+			: `${-translateZ + Math.abs(translateZ * (isMove ? movePercent : 0))}px`;
+
 	const rotateXFun = (i, active, rotateX, movePercent) => {
 		if (i === active) {
 			return `${-rotateX * (isMove ? movePercent : 0)}deg`;
@@ -265,7 +263,7 @@
 	const clickImgFun = () => {
 		//派发Swiper容器点击事件，currentIndicate表示点击的容器索引值
 		// dispatch the Swiper container click event, currentIndicate indicates the index value of the clicked container
-		onclickImg && onclickImg(currentIndicate);
+		onclick && onclick(currentIndicate);
 	};
 	//滑动开始
 	// slide start
@@ -408,9 +406,9 @@
 		<!-- Render multiple item through loop dataNew -->
 		{#each dataNew as item, i}
 			<div
-				class={`absolute ${pxObj[px] || ''} ${pyObj[py] || ''} ${translateXTransition ? 'transition-all' : 'transition-none'} ${
-					i === active ? activeInjClass : notActiveInjClass
-				}`}
+				class="absolute {pxObj[px] || ''} {pyObj[py] || ''} {translateXTransition ? 'transition-all' : 'transition-none'} {i === active
+					? activeInjClass
+					: notActiveInjClass}"
 				style="width:{width}px;height:{(width * aspectRatio[1]) / aspectRatio[0]}px;left:{width * (i - active) +
 					moveX}px;transition-duration: {duration}ms;z-index:{zIndexFun(i, active, dataNew)};transform:translateX({translateXFun(
 					i,
@@ -426,15 +424,10 @@
 				{#if item.type === 'img'}
 					<!-- svelte-ignore a11y_click_events_have_key_events -->
 					<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-					<img
-						onclick={clickImgFun}
-						class={`object-cover w-full h-full ${radiusObj[radius] || ''} ${innerInjClass}`}
-						src={item.url}
-						alt=""
-					/>
+					<img onclick={clickImgFun} class="object-cover w-full h-full {radiusObj[radius] || ''} {innerInjClass}" src={item.url} alt="" />
 				{/if}
 				{#if item.type === 'component'}
-					<div class={` w-full h-full ${radiusObj[radius] || ''} ${innerInjClass}`}>
+					<div class="w-full h-full {radiusObj[radius] || ''} {innerInjClass}">
 						<item.component />
 					</div>
 				{/if}
@@ -443,29 +436,27 @@
 		<!-- 轮播指示器(内部) -->
 		<!-- Carousel indicator (inner) -->
 		<div
-			class:hidden={data.length < 2 || indicatePosition === 'out' || indicatePosition === 'none'}
-			class={`absolute bottom-0 flex pt-4 pb-2 px-4 space-x-2 w-full bg-gradient-to-b from-black/0 to-black/40 z-50 ${indicateInjClass} ${
-				indicateAlignObj[indicateAlign] || indicateAlignObj.center
-			}`}
+			class:hidden={data.length < 2 || indicatePosition === 'out' || indicatePosition === null}
+			class="absolute bottom-0 flex pt-4 pb-2 px-4 space-x-2 w-full bg-gradient-to-b from-black/0 to-black/40 z-50 {indicateInjClass} {indicateAlignObj[
+				indicateAlign
+			] || indicateAlignObj.center}"
 		>
 			<!-- eslint-disable-next-line no-unused-vars -->
 			{#each data as item, i}
 				<div
-					class={`${indicateStyleInnerFun(indicateStyle, currentIndicate === i, indicateColor, indicateActiveColor)} ${
-						indicateRadius && 'rounded-full'
-					} transition-all`}
+					class="{indicateStyleInnerFun(indicateStyle, currentIndicate === i, indicateColor, indicateActiveColor)} {indicateRadius &&
+						'rounded-full'} transition-all"
 					style="transition-duration: {duration}ms;"
 				>
 					{#if indicateStyle === 'longLine'}
 						<div
-							class={`absolute h-1 transition-all ${long ? 'ease-linear' : ''} ${indicateRadius && 'rounded-full'} ${
-								long && currentIndicate === i ? 'w-16' : 'w-1'
-							} ${indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}`}
-							style={`${
-								longTransition
-									? `transition-duration: ${currentIndicate === 0 && once ? interval * 1000 : interval * 1000 - duration}ms`
-									: `transition-duration:${duration}ms`
-							}`}
+							class="absolute h-1 transition-all {long ? 'ease-linear' : ''} {indicateRadius && 'rounded-full'} {long &&
+							currentIndicate === i
+								? 'w-16'
+								: 'w-1'} {indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}"
+							style={longTransition
+								? `transition-duration: ${currentIndicate === 0 && once ? interval * 1000 : interval * 1000 - duration}ms`
+								: `transition-duration:${duration}ms`}
 						></div>
 					{/if}
 				</div>
@@ -475,22 +466,20 @@
 	<!-- 轮播指示器(外部) -->
 	<!-- Carousel indicator (outer) -->
 	<div
-		class:hidden={data.length < 2 || indicatePosition === 'inner' || indicatePosition === 'none'}
-		class={`flex py-3 px-4 space-x-2 w-full ${indicateAlignObj[indicateAlign] || indicateAlignObj.center} ${indicateInjClass}`}
+		class:hidden={data.length < 2 || indicatePosition === 'inner' || indicatePosition === null}
+		class="flex py-3 px-4 space-x-2 w-full {indicateAlignObj[indicateAlign] || indicateAlignObj.center} {indicateInjClass}"
 	>
-		<!-- eslint-disable-next-line no-unused-vars -->
 		{#each data as item, i}
 			<div
-				class={`${indicateStyleOutFun(indicateStyle, currentIndicate === i, indicateColor, indicateActiveColor)} ${
-					indicateRadius && 'rounded-full'
-				} transition-all`}
+				class="{indicateStyleOutFun(indicateStyle, currentIndicate === i, indicateColor, indicateActiveColor)} {indicateRadius &&
+					'rounded-full'} transition-all"
 				style="transition-duration: {duration}ms;"
 			>
 				{#if indicateStyle === 'longLine'}
 					<div
-						class={`absolute h-1 transition-all ${long ? 'ease-linear' : ''} ${indicateRadius && 'rounded-full'} ${
-							long && currentIndicate === i ? 'w-16' : 'w-1'
-						} ${indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}`}
+						class="absolute h-1 transition-all {long ? 'ease-linear' : ''} {indicateRadius && 'rounded-full'} {long && currentIndicate === i
+							? 'w-16'
+							: 'w-1'} {indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}"
 						style={longTransition
 							? `transition-duration: ${currentIndicate === 0 && once ? interval * 1000 : interval * 1000 - duration}ms;`
 							: `transition-duration:${duration}ms`}