[stdf]Update AsyncPicker compoent and documents.

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

@@ -1,29 +1,28 @@
 <!-- AsyncPicker Demo -->
 <script>
 	import { AsyncPicker, Cell } from '../../../../../packages/stdf/components';
-	// In order to avoid the messy Demo page, the specific reference data is placed in the data.js file, and you can view the bottom of the page.
+	// For the sake of clarity, the reference data is placed in the data_en.js file, which can be viewed at the bottom of this page.
 	import { linkageData, linkageDiffLabeData } from './data_en';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
 
-	let data = linkageData;
-	let currentLevel = 0;
-	let lastLevel = false;
-	let firstLevel = true;
-	let level1Data = linkageData[0].children;
-	let titleBind = 'Please select the provincial level';
+	let data = $state(linkageData);
+	let currentLevel = $state(0);
+	let lastLevel = $state(false);
+	let firstLevel = $state(true);
+	let level1Data = $state(linkageData[0].children);
+	let titleBind = $state('Please select province');
 
-	// Get the data after simulation for 3 seconds
-	const nextFunc = e => {
-		const { index } = e.detail;
+	// Simulate data obtained after 2 seconds
+	const nextFunc = index => {
 		if (currentLevel === 0) {
 			const nextData = linkageData[index].children;
 			level1Data = nextData;
@@ -31,20 +30,20 @@
 				// @ts-ignore
 				data = nextData;
 				currentLevel = 1;
-				titleBind = 'Please select the city level';
+				titleBind = 'Please select city';
 				firstLevel = false;
-			}, 3000);
+			}, 2000);
 		} else if (currentLevel === 1) {
 			const nextData = level1Data[index].children;
 			setTimeout(() => {
 				// @ts-ignore
 				data = nextData;
 				currentLevel = 2;
-				titleBind = 'Please select the district level';
+				titleBind = 'Please select district';
 				lastLevel = true;
-			}, 3000);
+			}, 2000);
 		} else {
-			console.log('Last Level');
+			console.log('Last level');
 		}
 	};
 	const prevFunc = () => {
@@ -53,40 +52,38 @@
 			setTimeout(() => {
 				data = prevData;
 				currentLevel = 0;
-				titleBind = 'Please select the provincial level';
+				titleBind = 'Please select province';
 				firstLevel = true;
-			}, 3000);
+			}, 2000);
 		} else if (currentLevel === 2) {
 			const prevData = level1Data;
 			setTimeout(() => {
 				// @ts-ignore
 				data = prevData;
 				currentLevel = 1;
-				titleBind = 'Please select the city level';
+				titleBind = 'Please select city';
 				lastLevel = false;
-			}, 3000);
+			}, 2000);
 		} else {
 			console.log('First level');
 		}
 	};
 
-	let allIndexs = [];
-	let allItems = [];
-	const getAllDataFunc = e => {
-		const { items, indexs } = e.detail;
+	let allIndexs = $state([]);
+	let allItems = $state([]);
+	const getAllDataFunc = (items, indexs) => {
 		allItems = items;
 		allIndexs = indexs;
 	};
 
-	// The processing logic of Labelkey at each level at different times
-	let diffLabelKeyData = linkageDiffLabeData;
-	let labelKey = 'province';
-	let diffLabelKeyCurrentLevel = 0;
-	let diffLabelKeyLastLevel = false;
-	let diffLabelKeyFirstLevel = true;
-	let diffLabelKeyLevel1Data = linkageDiffLabeData[0].children;
-	const diffLabelKeyNextFunc = e => {
-		const { index } = e.detail;
+	// 每一级对应的 labelKey 不同时的处理逻辑
+	let diffLabelKeyData = $state(linkageDiffLabeData);
+	let labelKey = $state('province');
+	let diffLabelKeyCurrentLevel = $state(0);
+	let diffLabelKeyLastLevel = $state(false);
+	let diffLabelKeyFirstLevel = $state(true);
+	let diffLabelKeyLevel1Data = $state(linkageDiffLabeData[0].children);
+	const diffLabelKeyNextFunc = index => {
 		if (diffLabelKeyCurrentLevel === 0) {
 			const nextData = linkageDiffLabeData[index].children;
 			diffLabelKeyLevel1Data = nextData;
@@ -96,7 +93,7 @@
 				labelKey = 'city';
 				diffLabelKeyCurrentLevel = 1;
 				diffLabelKeyFirstLevel = false;
-			}, 3000);
+			}, 2000);
 		} else if (diffLabelKeyCurrentLevel === 1) {
 			const nextData = diffLabelKeyLevel1Data[index].children;
 			setTimeout(() => {
@@ -105,7 +102,7 @@
 				diffLabelKeyCurrentLevel = 2;
 				labelKey = 'region';
 				diffLabelKeyLastLevel = true;
-			}, 3000);
+			}, 2000);
 		} else {
 			console.log('Last level');
 		}
@@ -118,7 +115,7 @@
 				diffLabelKeyCurrentLevel = 0;
 				diffLabelKeyFirstLevel = true;
 				labelKey = 'province';
-			}, 3000);
+			}, 2000);
 		} else if (diffLabelKeyCurrentLevel === 2) {
 			const prevData = diffLabelKeyLevel1Data;
 			setTimeout(() => {
@@ -127,14 +124,14 @@
 				diffLabelKeyCurrentLevel = 1;
 				labelKey = 'city';
 				diffLabelKeyLastLevel = false;
-			}, 3000);
+			}, 2000);
 		} else {
 			console.log('First level');
 		}
 	};
 </script>
 
-<div class="py-4 text-left">
+<div class="py-4">
 	<div class="px-4">
 		{#if allItems.length}
 			Currently selected:
@@ -142,22 +139,22 @@
 				<span class="mr-2 text-primary dark:text-dark">{item.label}</span>
 			{/each}
 		{:else}
-			<div>Please select the data</div>
+			<div>Please select data</div>
 		{/if}
 	</div>
 	<div class="px-4">
 		{#if allIndexs.length}
-			The index value of the current selection value is located::
+			The index values of current selections in their respective columns are:
 			{#each allIndexs as index}
 				<span class="mr-2 text-primary dark:text-dark">{index}</span>
 			{/each}
 		{:else}
-			<div>Please select the data</div>
+			<div>Please select data</div>
 		{/if}
 	</div>
 	<Cell
-		title="Basic usage"
-		on:click={() => {
+		title="Basic Usage"
+		onclick={() => {
 			visible1 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -171,14 +168,14 @@
 		bind:data
 		bind:lastLevel
 		bind:firstLevel
-		on:next={nextFunc}
-		on:prev={prevFunc}
-		on:confirm={getAllDataFunc}
+		onnext={nextFunc}
+		onprev={prevFunc}
+		onconfirm={getAllDataFunc}
 	/>
 
 	<Cell
-		title="It can be seen that the number of 7 lines is"
-		on:click={() => {
+		title="Show 7 Rows"
+		onclick={() => {
 			visible2 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -187,11 +184,11 @@
 			level1Data = linkageData[0].children;
 		}}
 	/>
-	<AsyncPicker bind:visible={visible2} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showRow={7} />
+	<AsyncPicker bind:visible={visible2} bind:data bind:lastLevel bind:firstLevel onnext={nextFunc} onprev={prevFunc} showRow={7} />
 
 	<Cell
-		title="Left -handed alignment"
-		on:click={() => {
+		title="Left Align"
+		onclick={() => {
 			visible3 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -200,11 +197,11 @@
 			level1Data = linkageData[0].children;
 		}}
 	/>
-	<AsyncPicker bind:visible={visible3} bind:data bind:lastLevel bind:firstLevel align="left" on:next={nextFunc} on:prev={prevFunc} />
+	<AsyncPicker bind:visible={visible3} bind:data bind:lastLevel bind:firstLevel align="left" onnext={nextFunc} onprev={prevFunc} />
 
 	<Cell
-		title="Customize the next text"
-		on:click={() => {
+		title="Custom Next/Previous Text"
+		onclick={() => {
 			visible5 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -218,15 +215,15 @@
 		bind:data
 		bind:lastLevel
 		bind:firstLevel
-		on:next={nextFunc}
-		on:prev={prevFunc}
-		nextText="continue"
-		prevText="return"
+		onnext={nextFunc}
+		onprev={prevFunc}
+		nextText="Continue"
+		prevText="Back"
 	/>
 
 	<Cell
-		title="Use different Labelkey at different levels"
-		on:click={() => {
+		title="Different labelKey for Each Level"
+		onclick={() => {
 			visible4 = true;
 			diffLabelKeyData = linkageDiffLabeData;
 			labelKey = 'province';
@@ -242,13 +239,13 @@
 		bind:lastLevel={diffLabelKeyLastLevel}
 		bind:firstLevel={diffLabelKeyFirstLevel}
 		bind:labelKey
-		on:next={diffLabelKeyNextFunc}
-		on:prev={diffLabelKeyPrevFunc}
+		onnext={diffLabelKeyNextFunc}
+		onprev={diffLabelKeyPrevFunc}
 	/>
 
 	<Cell
-		title="Change a loading"
-		on:click={() => {
+		title="Different Loading Effect"
+		onclick={() => {
 			visible6 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -262,14 +259,14 @@
 		bind:data
 		bind:lastLevel
 		bind:firstLevel
-		on:next={nextFunc}
-		on:prev={prevFunc}
-		loading={{ type: '1_15', width: 12, height: 12 }}
+		onnext={nextFunc}
+		onprev={prevFunc}
+		loading={{ type: '1_15', width: '12', height: '12' }}
 	/>
 
 	<Cell
-		title="Radius on the top"
-		on:click={() => {
+		title="Rounded Top Corners"
+		onclick={() => {
 			visible8 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -283,14 +280,14 @@
 		bind:data
 		bind:lastLevel
 		bind:firstLevel
-		on:next={nextFunc}
-		on:prev={prevFunc}
+		onnext={nextFunc}
+		onprev={prevFunc}
 		popup={{ radius: 'xl' }}
 	/>
 
 	<Cell
-		title="Show selected options"
-		on:click={() => {
+		title="Show Selected Options"
+		onclick={() => {
 			visible7 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -299,17 +296,17 @@
 			level1Data = linkageData[0].children;
 		}}
 	/>
-	<AsyncPicker bind:visible={visible7} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showSelected />
+	<AsyncPicker bind:visible={visible7} bind:data bind:lastLevel bind:firstLevel onnext={nextFunc} onprev={prevFunc} showSelected />
 
 	<Cell
-		title="Dynamic change title"
-		on:click={() => {
+		title="Dynamic Title"
+		onclick={() => {
 			visible9 = true;
 			data = linkageData;
 			lastLevel = false;
 			firstLevel = true;
 			currentLevel = 0;
-			titleBind = 'Please select the provincial level';
+			titleBind = 'Please select province';
 			level1Data = linkageData[0].children;
 		}}
 	/>
@@ -319,8 +316,8 @@
 		bind:lastLevel
 		bind:firstLevel
 		bind:title={titleBind}
-		on:next={nextFunc}
-		on:prev={prevFunc}
+		onnext={nextFunc}
+		onprev={prevFunc}
 	/>
 </div>
 <!-- 

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

@@ -4,26 +4,25 @@
 	// 为避免 Demo 页面杂乱，具体参考数据放在 data.js 文件内，可查看此页面底部注释。
 	import { linkageData, linkageDiffLabeData } from './data';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
 
-	let data = linkageData;
-	let currentLevel = 0;
-	let lastLevel = false;
-	let firstLevel = true;
-	let level1Data = linkageData[0].children;
-	let titleBind = '请选择省级';
+	let data = $state(linkageData);
+	let currentLevel = $state(0);
+	let lastLevel = $state(false);
+	let firstLevel = $state(true);
+	let level1Data = $state(linkageData[0].children);
+	let titleBind = $state('请选择省级');
 
-	// 模拟 3 秒后获取到数据
-	const nextFunc = e => {
-		const { index } = e.detail;
+	// 模拟 2 秒后获取到数据
+	const nextFunc = index => {
 		if (currentLevel === 0) {
 			const nextData = linkageData[index].children;
 			level1Data = nextData;
@@ -33,7 +32,7 @@
 				currentLevel = 1;
 				titleBind = '请选择市级';
 				firstLevel = false;
-			}, 3000);
+			}, 2000);
 		} else if (currentLevel === 1) {
 			const nextData = level1Data[index].children;
 			setTimeout(() => {
@@ -42,7 +41,7 @@
 				currentLevel = 2;
 				titleBind = '请选择区级';
 				lastLevel = true;
-			}, 3000);
+			}, 2000);
 		} else {
 			console.log('最后一级');
 		}
@@ -55,7 +54,7 @@
 				currentLevel = 0;
 				titleBind = '请选择省级';
 				firstLevel = true;
-			}, 3000);
+			}, 2000);
 		} else if (currentLevel === 2) {
 			const prevData = level1Data;
 			setTimeout(() => {
@@ -64,29 +63,27 @@
 				currentLevel = 1;
 				titleBind = '请选择市级';
 				lastLevel = false;
-			}, 3000);
+			}, 2000);
 		} else {
 			console.log('第一级');
 		}
 	};
 
-	let allIndexs = [];
-	let allItems = [];
-	const getAllDataFunc = e => {
-		const { items, indexs } = e.detail;
+	let allIndexs = $state([]);
+	let allItems = $state([]);
+	const getAllDataFunc = (items, indexs) => {
 		allItems = items;
 		allIndexs = indexs;
 	};
 
 	// 每一级对应的 labelKey 不同时的处理逻辑
-	let diffLabelKeyData = linkageDiffLabeData;
-	let labelKey = 'province';
-	let diffLabelKeyCurrentLevel = 0;
-	let diffLabelKeyLastLevel = false;
-	let diffLabelKeyFirstLevel = true;
-	let diffLabelKeyLevel1Data = linkageDiffLabeData[0].children;
-	const diffLabelKeyNextFunc = e => {
-		const { index } = e.detail;
+	let diffLabelKeyData = $state(linkageDiffLabeData);
+	let labelKey = $state('province');
+	let diffLabelKeyCurrentLevel = $state(0);
+	let diffLabelKeyLastLevel = $state(false);
+	let diffLabelKeyFirstLevel = $state(true);
+	let diffLabelKeyLevel1Data = $state(linkageDiffLabeData[0].children);
+	const diffLabelKeyNextFunc = index => {
 		if (diffLabelKeyCurrentLevel === 0) {
 			const nextData = linkageDiffLabeData[index].children;
 			diffLabelKeyLevel1Data = nextData;
@@ -96,7 +93,7 @@
 				labelKey = 'city';
 				diffLabelKeyCurrentLevel = 1;
 				diffLabelKeyFirstLevel = false;
-			}, 3000);
+			}, 2000);
 		} else if (diffLabelKeyCurrentLevel === 1) {
 			const nextData = diffLabelKeyLevel1Data[index].children;
 			setTimeout(() => {
@@ -105,7 +102,7 @@
 				diffLabelKeyCurrentLevel = 2;
 				labelKey = 'region';
 				diffLabelKeyLastLevel = true;
-			}, 3000);
+			}, 2000);
 		} else {
 			console.log('最后一级');
 		}
@@ -118,7 +115,7 @@
 				diffLabelKeyCurrentLevel = 0;
 				diffLabelKeyFirstLevel = true;
 				labelKey = 'province';
-			}, 3000);
+			}, 2000);
 		} else if (diffLabelKeyCurrentLevel === 2) {
 			const prevData = diffLabelKeyLevel1Data;
 			setTimeout(() => {
@@ -127,7 +124,7 @@
 				diffLabelKeyCurrentLevel = 1;
 				labelKey = 'city';
 				diffLabelKeyLastLevel = false;
-			}, 3000);
+			}, 2000);
 		} else {
 			console.log('第一级');
 		}
@@ -157,7 +154,7 @@
 	</div>
 	<Cell
 		title="基础用法"
-		on:click={() => {
+		onclick={() => {
 			visible1 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -171,14 +168,14 @@
 		bind:data
 		bind:lastLevel
 		bind:firstLevel
-		on:next={nextFunc}
-		on:prev={prevFunc}
-		on:confirm={getAllDataFunc}
+		onnext={nextFunc}
+		onprev={prevFunc}
+		onconfirm={getAllDataFunc}
 	/>
 
 	<Cell
 		title="可见 7 行数为"
-		on:click={() => {
+		onclick={() => {
 			visible2 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -187,11 +184,11 @@
 			level1Data = linkageData[0].children;
 		}}
 	/>
-	<AsyncPicker bind:visible={visible2} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showRow={7} />
+	<AsyncPicker bind:visible={visible2} bind:data bind:lastLevel bind:firstLevel onnext={nextFunc} onprev={prevFunc} showRow={7} />
 
 	<Cell
 		title="左对齐"
-		on:click={() => {
+		onclick={() => {
 			visible3 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -200,11 +197,11 @@
 			level1Data = linkageData[0].children;
 		}}
 	/>
-	<AsyncPicker bind:visible={visible3} bind:data bind:lastLevel bind:firstLevel align="left" on:next={nextFunc} on:prev={prevFunc} />
+	<AsyncPicker bind:visible={visible3} bind:data bind:lastLevel bind:firstLevel align="left" onnext={nextFunc} onprev={prevFunc} />
 
 	<Cell
 		title="自定义上下一步文字"
-		on:click={() => {
+		onclick={() => {
 			visible5 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -218,15 +215,15 @@
 		bind:data
 		bind:lastLevel
 		bind:firstLevel
-		on:next={nextFunc}
-		on:prev={prevFunc}
+		onnext={nextFunc}
+		onprev={prevFunc}
 		nextText="继续"
 		prevText="返回"
 	/>
 
 	<Cell
 		title="不同级别使用不同的 labelKey"
-		on:click={() => {
+		onclick={() => {
 			visible4 = true;
 			diffLabelKeyData = linkageDiffLabeData;
 			labelKey = 'province';
@@ -242,13 +239,13 @@
 		bind:lastLevel={diffLabelKeyLastLevel}
 		bind:firstLevel={diffLabelKeyFirstLevel}
 		bind:labelKey
-		on:next={diffLabelKeyNextFunc}
-		on:prev={diffLabelKeyPrevFunc}
+		onnext={diffLabelKeyNextFunc}
+		onprev={diffLabelKeyPrevFunc}
 	/>
 
 	<Cell
 		title="换一个 Loading 效果"
-		on:click={() => {
+		onclick={() => {
 			visible6 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -262,14 +259,14 @@
 		bind:data
 		bind:lastLevel
 		bind:firstLevel
-		on:next={nextFunc}
-		on:prev={prevFunc}
-		loading={{ type: '1_15', width: 12, height: 12 }}
+		onnext={nextFunc}
+		onprev={prevFunc}
+		loading={{ type: '1_15', width: '12', height: '12' }}
 	/>
 
 	<Cell
 		title="顶部来点圆角"
-		on:click={() => {
+		onclick={() => {
 			visible8 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -283,14 +280,14 @@
 		bind:data
 		bind:lastLevel
 		bind:firstLevel
-		on:next={nextFunc}
-		on:prev={prevFunc}
+		onnext={nextFunc}
+		onprev={prevFunc}
 		popup={{ radius: 'xl' }}
 	/>
 
 	<Cell
 		title="显示已选选项"
-		on:click={() => {
+		onclick={() => {
 			visible7 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -299,11 +296,11 @@
 			level1Data = linkageData[0].children;
 		}}
 	/>
-	<AsyncPicker bind:visible={visible7} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showSelected />
+	<AsyncPicker bind:visible={visible7} bind:data bind:lastLevel bind:firstLevel onnext={nextFunc} onprev={prevFunc} showSelected />
 
 	<Cell
 		title="动态改变标题"
-		on:click={() => {
+		onclick={() => {
 			visible9 = true;
 			data = linkageData;
 			lastLevel = false;
@@ -319,8 +316,8 @@
 		bind:lastLevel
 		bind:firstLevel
 		bind:title={titleBind}
-		on:next={nextFunc}
-		on:prev={prevFunc}
+		onnext={nextFunc}
+		onprev={prevFunc}
 	/>
 </div>
 <!-- 

doc/components/asyncPicker/api.md

@@ -1,31 +1,30 @@
 ## AsyncPicker Props
 
-| 属性         | 类型    | 默认值                            | 可选值                  | 必传 | 说明                      |
-| ------------ | ------- | --------------------------------- | ----------------------- | ---- | ------------------------- |
-| visible      | Boolean | false                             | true/false              | N    | 是否显示。                |
-| data         | Array   | []                                | -                       | Y    | 列数据。                  |
-| lastLevel    | Boolean | false                             | true/false              | N    | 是否是最后一级。          |
-| firstLevel   | Boolean | false                             | true/false              | N    | 是否是第一级。            |
-| showRow      | Number  | 5                                 | 3/5/7                   | N    | 列显示行数。              |
-| labelKey     | String  | 'label'                           | -                       | N    | 自定义 label 的 key。     |
-| align        | String  | 'center'                          | 'left'/'center'/'right' | N    | 对齐方式。                |
-| cancelText   | String  | 当前语言的 picker.defaultCancel   | -                       | N    | 取消选项文本。            |
-| confirmText  | String  | 当前语言的 picker.defaultConfirm  | -                       | N    | 确定选项文本。            |
-| title        | String  | 当前语言的 picker.defaultTitle    | -                       | N    | 中间标题文本。            |
-| nextText     | String  | 当前语言的 picker.defaultNext     | -                       | N    | 下一级文本。              |
-| prevText     | String  | 当前语言的 picker.defaultPrev     | -                       | N    | 上一级文本。              |
-| showSelected | Boolean | false                             | true/false              | N    | 是否显示已选项。          |
-| selectedText | String  | 当前语言的 picker.defaultSelected | -                       | N    | 已选文本。                |
-| popup        | Object  | {}                                | 参考 Popup Props        | N    | 弹出层参数。              |
-| loading      | Object  | {}                                | 参考 Loading Props      | N    | 加载数据时 Loading 参数。 |
+| 名称         | 类型                            | 默认值                            | 必传 | 说明                                                                                          |
+| ------------ | ------------------------------- | --------------------------------- | ---- | --------------------------------------------------------------------------------------------- |
+| visible      | `boolean`                       | false                             | N    | 是否显示。                                                                                    |
+| data         | `array`                         | []                                | Y    | 列数据，具体使用请参考示例。                                                                  |
+| lastLevel    | `boolean`                       | false                             | N    | 是否是最后一级。                                                                              |
+| firstLevel   | `boolean`                       | false                             | N    | 是否是第一级。                                                                                |
+| showRow      | `3` \| `5` \| `7`               | 5                                 | N    | 列显示行数。                                                                                  |
+| labelKey     | `string`                        | 'label'                           | N    | 自定义 label 的 key。                                                                         |
+| align        | `'left' \| 'center' \| 'right'` | 'center'                          | N    | 对齐方式。                                                                                    |
+| cancelText   | `string`                        | 当前语言的 picker.defaultCancel   | N    | 取消选项文本。                                                                                |
+| confirmText  | `string`                        | 当前语言的 picker.defaultConfirm  | N    | 确定选项文本。                                                                                |
+| title        | `string`                        | 当前语言的 picker.defaultTitle    | N    | 中间标题文本。                                                                                |
+| nextText     | `string`                        | 当前语言的 picker.defaultNext     | N    | 下一级文本。                                                                                  |
+| prevText     | `string`                        | 当前语言的 picker.defaultPrev     | N    | 上一级文本。                                                                                  |
+| showSelected | `boolean`                       | false                             | N    | 是否显示已选项。                                                                              |
+| selectedText | `string`                        | 当前语言的 picker.defaultSelected | N    | 已选文本。                                                                                    |
+| popup        | `Popup`                         | {}                                | N    | 弹出层参数 [Popup Props](https://stdf.design/#/components?nav=popup&tab=1)。                  |
+| loading      | `Loading`                       | {}                                | N    | 加载数据时 Loading 参数 [Loading Props](https://stdf.design/#/components?nav=loading&tab=1)。 |
 
 ## AsyncPicker Events
 
-| 名称    | 参数                                                                                                                             | 描述                   |
-| ------- | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
-| open    | -                                                                                                                                | 打开时触发。           |
-| close   | -                                                                                                                                | 关闭时触发。           |
-| cancel  | -                                                                                                                                | 点击左侧取消时触发。   |
-| prev    | -                                                                                                                                | 点击左侧上一级时触发。 |
-| next    | event：事件对象，其中 detail 内有一个参数 index，当前选定项在所在列的索引。                                                      | 点击右侧下一级时触发。 |
-| confirm | event：事件对象，其中 detail 内有两个参数：<br />1. items：选定多列数据组成的数组；<br />2. indexs：选定多列数据索引组成的数组。 | 点击右侧确定时触发。   |
+| 名称      | 类型                                       | 参数                                                                | 描述                   |
+| --------- | ------------------------------------------ | ------------------------------------------------------------------- | ---------------------- |
+| onclose   | `() => void`                               | -                                                                   | 关闭时触发。           |
+| oncancel  | `() => void`                               | -                                                                   | 点击左侧取消时触发。   |
+| onprev    | `() => void`                               | -                                                                   | 点击左侧上一级时触发。 |
+| onnext    | `(index: number) => void`                  | index - 当前选定项在所在列的索引                                    | 点击右侧下一级时触发。 |
+| onconfirm | `(items: any[], indexs: number[]) => void` | items - 选定多列数据组成的数组；indexs - 选定多列数据索引组成的数组 | 点击右侧确定时触发。   |

doc/components/asyncPicker/api_en.md

@@ -1,31 +1,30 @@
 ## AsyncPicker Props
 
-| Properties   | Type    | Default value                           | Optional value          | required | Description                           |
-| ------------ | ------- | --------------------------------------- | ----------------------- | -------- | ------------------------------------- |
-| visible      | Boolean | false                                   | true/false              | N        | Whether to display.                   |
-| data         | Array   | []                                      | -                       | Y        | Column data.                          |
-| lastLevel    | Boolean | false                                   | true/false              | N        | Whether it is the last level.         |
-| firstLevel   | Boolean | false                                   | true/false              | N        | Whether it is the first level.        |
-| showRow      | Number  | 5                                       | 3/5/7                   | N        | Line display rows.                    |
-| labelKey     | String  | 'label'                                 | -                       | N        | Custom Label's key.                   |
-| align        | String  | 'center'                                | 'left'/'center'/'right' | N        | Alignment.                            |
-| cancelText   | String  | Current language picker.defaultCancel   | -                       | N        | Cancel the option text.               |
-| confirmText  | String  | Current language picker.defaultConfirm  | -                       | N        | Determine the option text.            |
-| title        | String  | Current language picker.defaultTitle    | -                       | N        | The middle title text.                |
-| nextText     | String  | Current language picker.defaultNext     | -                       | N        | Next text.                            |
-| prevText     | String  | Current language picker.defaultPrev     | -                       | N        | Previous text.                        |
-| showSelected | Boolean | false                                   | true/false              | N        | Whether to display the option.        |
-| selectedText | String  | Current language picker.defaultSelected | -                       | N        | Selected text.                        |
-| popup        | Object  | {}                                      | refer to Popup Props    | N        | Popping layer parameters.             |
-| loading      | Object  | {}                                      | refer to Loading Props  | N        | Loading parameters when loading data. |
+| Name         | Type                            | Default                                 | Required | Description                                                                             |
+| ------------ | ------------------------------- | --------------------------------------- | -------- | --------------------------------------------------------------------------------------- |
+| visible      | `boolean`                       | false                                   | N        | Whether to show the picker.                                                             |
+| data         | `array`                         | []                                      | Y        | Column data. Please refer to examples for specific usage.                               |
+| lastLevel    | `boolean`                       | false                                   | N        | Whether it is the last level.                                                           |
+| firstLevel   | `boolean`                       | false                                   | N        | Whether it is the first level.                                                          |
+| showRow      | `3` \| `5` \| `7`               | 5                                       | N        | Number of rows to display in the column.                                                |
+| labelKey     | `string`                        | 'label'                                 | N        | Custom key for label.                                                                   |
+| align        | `'left' \| 'center' \| 'right'` | 'center'                                | N        | Text alignment.                                                                         |
+| cancelText   | `string`                        | Current language picker.defaultCancel   | N        | Cancel button text.                                                                     |
+| confirmText  | `string`                        | Current language picker.defaultConfirm  | N        | Confirm button text.                                                                    |
+| title        | `string`                        | Current language picker.defaultTitle    | N        | Title text.                                                                             |
+| nextText     | `string`                        | Current language picker.defaultNext     | N        | Next level text.                                                                        |
+| prevText     | `string`                        | Current language picker.defaultPrev     | N        | Previous level text.                                                                    |
+| showSelected | `boolean`                       | false                                   | N        | Whether to show selected items.                                                         |
+| selectedText | `string`                        | Current language picker.defaultSelected | N        | Selected text.                                                                          |
+| popup        | `Popup`                         | {}                                      | N        | Popup parameters [Popup Props](https://stdf.design/#/components?nav=popup&tab=1).       |
+| loading      | `Loading`                       | {}                                      | N        | Loading parameters [Loading Props](https://stdf.design/#/components?nav=loading&tab=1). |
 
 ## AsyncPicker Events
 
-| Name    | Parameter                                                                                                                                                                                                    | Description                                                  |
-| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------ |
-| open    | -                                                                                                                                                                                                            | Triggered when opening.                                      |
-| close   | -                                                                                                                                                                                                            | Triggered when closed.                                       |
-| cancel  | -                                                                                                                                                                                                            | Click on the left to be triggered.                           |
-| prev    | -                                                                                                                                                                                                            | Trip -triggered when you click on the left side of the left. |
-| next    | event: Event object, where there is a parameter INDEX in Detail, the index listed in the current selection item.                                                                                             | Triggered when clicking the next level on the right.         |
-| confirm | event: Event object, where there are two parameters in Detail: <br /> 1. times: Select the array composed of multiple columns of data; <br /> 2. indexs: Select the array of multiple lines of data indexes. | Click on the right side to trigger.                          |
+| Name      | Type                                       | Parameters                                                                | Description                             |
+| --------- | ------------------------------------------ | ------------------------------------------------------------------------- | --------------------------------------- |
+| onclose   | `() => void`                               | -                                                                         | Triggered when closing.                 |
+| oncancel  | `() => void`                               | -                                                                         | Triggered when clicking cancel.         |
+| onprev    | `() => void`                               | -                                                                         | Triggered when clicking previous level. |
+| onnext    | `(index: number) => void`                  | index - Index of selected item in current column                          | Triggered when clicking next level.     |
+| onconfirm | `(items: any[], indexs: number[]) => void` | items - Array of selected column data; indexs - Array of selected indexes | Triggered when clicking confirm.        |

doc/components/asyncPicker/guide.md

@@ -6,9 +6,9 @@ AsyncPicker 组件使用场景类似于 Picker 多级联动，是为了解决下
 
 AsyncPicker 的使用对比 Picker 多级联动稍微有些复杂，因为数据不是一次性传入，而是通过接口动态获取，所以需要开发者自己处理数据。
 
-通过监听 next 和 prev 方法，更新当前列的新数据 data 并动态绑定至组件内部，同时需要动态绑定当前列是否是第一级 lastLevel，是否是最后一级 firstLevel。
+通过监听 onnext 和 onprev 方法，更新当前列的新数据 data 并动态绑定至组件内部，同时需要动态绑定当前列是否是第一级 lastLevel，是否是最后一级 firstLevel。
 
-当数据是最后一级时，右侧按钮会触发 confirm 方法，返回选定的数据；当数据不是最后一级时，右侧按钮会触发 next 方法，返回当前选定项的索引值。
+当数据是最后一级时，右侧按钮会触发 onconfirm 方法，返回选定的数据；当数据不是最后一级时，右侧按钮会触发 onnext 方法，返回当前选定项的索引值。
 
 ## 返回数据
 
@@ -18,7 +18,7 @@ AsyncPicker 组件最终返回的数据有两项，一项是选定的多列数
 
 ## 使用优化
 
-实际开发中，多数情况下 AsyncPicker 的数据都是动态获取的，通常是通过接口获取，一般我们需要对传入的数据进行循环处理，以便于 AsyncPicker 组件能够正常使用。但这是一个比较繁琐且没必要的过程，因此 STDF 对 AsyncPicker 组件的入参作了一些优化，使得开发者可以直接传入接口返回的数据，而不需要做循环处理。
+实际开发中，多数情况下 AsyncPicker 的数据都是动态获取的，通常是通过接口获取，一般我们需要对传入的数据进行循环处理，以便于 AsyncPicker 组件能够正常使用。但这是一个比较繁琐且没必要的过程，因此 STDF 对 AsyncPicker 组件的入参做了一些优化，使得开发者可以直接传入接口返回的数据，而不需要做循环处理。
 
 - 可以通过动态绑定每次数据的 labelKey，自定义传入的每列数据 label 属性名，如果不传入则默认使用 'label'，请参考示例。
 

doc/components/asyncPicker/guide_en.md

@@ -1,40 +1,40 @@
-## Usage Scenario
+## Usage Scenarios
 
-The usage scenario of the AsyncPicker component is similar to a Picker with multiple levels of interdependence, which is designed to solve situations where lower level data is queried from the server based on upper level data selection. For example, after selecting data at the provincial level, corresponding data at the city level is queried dynamically, and then, after selecting city-level data, corresponding data at the district level is queried dynamically, and so on.
+The AsyncPicker component is similar to Picker's multi-level linkage, but it's designed to handle scenarios where child-level data needs to be queried from the server based on parent-level selections. For example: after selecting province-level data, dynamically query corresponding city-level data, and after selecting city-level data, dynamically query corresponding district-level data, and so on.
 
-## Usage
+## How to Use
 
-Using the AsyncPicker component requires more steps than a Picker with multiple levels of interdependence, because the data is not passed in at once but rather obtained dynamically through an API, so developers need to handle the data themselves.
+Using AsyncPicker is slightly more complex compared to Picker's multi-level linkage because the data isn't passed in all at once but is obtained dynamically through APIs. Therefore, developers need to handle the data themselves.
 
-By listening to the next and prev methods, update the new data "data" for the current column and dynamically bind it to the component's internal state. At the same time, you also need to dynamically bind whether the current column is the first level "lastLevel" and whether it is the last level "firstLevel".
+By monitoring the onnext and onprev methods, update the current column's new data and dynamically bind it to the component internally. Additionally, you need to dynamically bind whether the current column is the first level (lastLevel) or the last level (firstLevel).
 
-When the data is at the last level, clicking on the right button triggers the confirm method and returns the selected data. When the data is not at the last level, clicking on the right button triggers the next method and returns the index value of the current selection.
+When the data is at the last level, the right button will trigger the onconfirm method, returning the selected data; when the data is not at the last level, the right button will trigger the onnext method, returning the index of the current selection.
 
-## Returned Data
+## Return Data
 
-The AsyncPicker component ultimately returns two pieces of data: an array "items" composed of multiple selected data columns, and another array "indexs" composed of the indexes of the multiple selected data columns. Use as needed.
+The AsyncPicker component ultimately returns two items: an array of items containing the selected multi-column data, and an array of indexs containing the indices of the selected multi-column data. Please choose according to your needs.
 
-The data structure of each item in "items" is the same as the data structure passed in, which is convenient for developers to use directly.
+The structure of each item in items matches the structure of the input data, making it convenient for developers to use directly.
 
 ## Usage Optimization
 
-In actual development, the data of most AsyncPicker components is dynamically acquired, usually through an API. Normally, we need to loop through the passed-in data to make sure the AsyncPicker component can be used correctly. However, this is a somewhat cumbersome and unnecessary process, so STDF has optimized the input of the AsyncPicker component, allowing developers to directly pass in data returned by an API without needing to do looping themselves.
+In actual development, AsyncPicker data is usually obtained dynamically, typically through APIs. Generally, we need to process the input data through loops to make it work with the AsyncPicker component. However, this is a cumbersome and unnecessary process. Therefore, STDF has optimized the AsyncPicker component's input parameters, allowing developers to directly pass in API response data without loop processing.
 
-- LabelKey for each data item can be dynamically bound to customize the label attribute name for each column of data passed in. If not passed in, it defaults to "label". Please refer to the example.
+- You can dynamically bind labelKey for each data set to customize the label property name for each column's data. If not provided, it defaults to 'label'. Please refer to the examples.
 
 ## Notes
 
-The AsyncPicker is wrapped based on Popup by defining some Popup Props in advance, so you can achieve different effects by passing in Popup properties. For example, in the example, we change the rounded corner style by setting the radius of the popup.
+AsyncPicker is built on top of Popup by pre-defining some Popup Props. Therefore, different effects can be achieved by passing in Popup properties. For example, in the demo, the border radius style is changed by setting the popup's radius.
 
-The loading displayed when data is loaded in AsyncPicker is wrapped based on Loading, so you can achieve different effects by passing in Loading properties. For example, in the example, we changed the loading effect by setting some parameters of the loading.
+The loading display in AsyncPicker during data loading is built on top of the Loading component. Different effects can be achieved by passing in Loading properties. For example, in the demo, a different loading effect is achieved by setting some loading parameters.
 
-## Difference between Radio, ActionSheet, IndexBar, Picker, and AsyncPicker
+## Differences between Radio, ActionSheet, IndexBar, Picker, and AsyncPicker
 
-Radio, Checkbox, ActionSheet, IndexBar, Picker, and AsyncPicker components all essentially provide a series of data for users to select or perform certain operations, but they differ in usage:
+Radio, Checkbox, ActionSheet, IndexBar, Picker, and AsyncPicker components essentially all provide a series of data for users to select or perform operations, but there are some differences in their usage:
 
-- Radio is generally used to select a single data item, the number of options is fixed and relatively small. It needs to display the options directly on the UI interface, making it easy for users to have an overview of the available data while interacting with the interface, such as gender selection.
-- Checkbox is used in a similar way as Radio, but allows multiple selections.
-- ActionSheet is generally used to choose a set of options that will execute an operation immediately after selection. Options are fixed and relatively small, but do not need to be displayed directly on the UI interface, such as doing some deletion, modification and other operations.
-- IndexBar is generally used to select a single item of data. It handles large amounts of dynamic data that has been indexed and classified into categories, and is generally reserved for a full webpage display.
-- Picker is generally used to select one or multiple data items. Used for dynamic data with large or undefined length, or when selecting dependent data. **Regardless of whether it is dependent, the data is already determined when passed in.**
-- AsyncPicker is generally used to select multiple data. Lower level data is obtained dynamically based on upper level data selection. For example, if the server API returns only one level of data at a time, the next level of data must be requested based on the upper level of data selected by the user.
+- Radio is generally used for single-selection data with fixed and fewer options, requiring direct display of options in the UI interface for users to have an overview during interaction, such as gender selection.
+- Checkbox is similar to Radio in usage scenarios but allows multiple selections.
+- ActionSheet is generally used when immediate actions need to be executed after selection, with fixed and fewer options, but doesn't need to display options directly in the UI interface, such as delete or modify operations.
+- IndexBar is generally used for selecting single data items from very large dynamic datasets that have been categorized with indexes, typically using an entire page for display.
+- Picker is generally used for selecting single or multiple data items from large or variable-length dynamic datasets, or for selecting linked data. **Whether linked or not, the data is determined when passed in.**
+- AsyncPicker is generally used for selecting multiple data items where child-level data is dynamically obtained based on parent-level selections, such as when server APIs return only one level of data at a time and require additional requests based on user selections to obtain child-level data.