[demo]For stdf 0.4.2

demo/src/routes/+layout.svelte

@@ -31,6 +31,7 @@
 
 	// 环境变量
 	// environment variables
+	// @ts-ignore
 	const mode = import.meta.env.MODE;
 
 	// mode 是否是指定组件模式
@@ -138,7 +139,7 @@
 				: 'STDF Demo'
 			: menuListArr.filter(item => item.nav === $page.url.pathname.substring(7))[0][isZh ? 'title_zh' : 'title_en'] +
 			  (isZh ? '示例' : ' Demo')}
-		left={showLeft ? 'back' : ''}
+		left={showLeft ? 'back' : 'none'}
 		rightSlot
 		injClass="bg-white/60 dark:bg-black/60 backdrop-blur"
 		on:clickleft={() => window.history.back()}

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

@@ -204,7 +204,7 @@
 <div class="px-4">
 	<div class="mb-4 font-bold">Elemental element arrangementtal element arrangement</div>
 	<div class="mt-8 mb-4 font-bold">No icon && Elemental element arrangement</div>
-	<CheckboxGroup layout="inline" wrap on:change={dotaInlineFun}>
+	<CheckboxGroup layout="inline" on:change={dotaInlineFun}>
 		{#each dotaInlines as item}
 			<Checkbox name={item} checkeds={checkInlines} icon="none" iconChecked="none">
 				<div

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

@@ -45,10 +45,10 @@
 <NoticeBar vertical {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">Scroll transition to 1 second</div>
-<NoticeBar vertical duration="1000" {textList}></NoticeBar>
+<NoticeBar vertical duration={1000} {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">The scrolling interval is 8 seconds</div>
-<NoticeBar vertical interval="8" {textList}></NoticeBar>
+<NoticeBar vertical interval={8} {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">Excessively long text</div>
 <NoticeBar vertical textList={textLongList}></NoticeBar>

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

@@ -99,7 +99,7 @@
 >
 	{value}
 	{#if !doneDisabled}
-		<span class="absolute left-1/2"><Confetti rounded amount="100" /></span>
+		<span class="absolute left-1/2"><Confetti rounded amount={100} /></span>
 	{/if}
 </div>
 <Cell title="Please enter 5201314" on:click={() => (visible12 = true)} />

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

@@ -36,11 +36,11 @@
 	};
 	const changePageFunc = e => {
 		currentPage = e.detail;
-		getData(currentPage);
+		getData();
 	};
 	// First page of the initial request
 	onMount(() => {
-		getData(currentPage);
+		getData();
 	});
 </script>
 

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

@@ -14,23 +14,7 @@
 	} from './data_en';
 
 	const datas = [{ data: someProvinceList }];
-	const leftDatas = [{ data: someProvinceList, align: 'left' }];
-	const showRow7Datas = [{ data: someProvinceList, showRow: 7 }];
-	const init3Datas = [{ data: someProvinceList, initIndex: 3 }];
-	const noAnimationDatas = [{ data: someProvinceList, useAnimation: false }];
-	const customKeyDatas = [{ data: cityList, labelKey: 'cityName' }];
 	const col3Datas = [{ data: weekList }, { data: amOrPmList }, { data: timeList }];
-	const col3DiffAlignDatas = [
-		{ data: weekList, align: 'left' },
-		{ data: amOrPmList, align: 'center' },
-		{ data: timeList, align: 'right' },
-	];
-	const col3DiffShowRowDatas = [{ data: weekList }, { data: amOrPmList, showRow: 3 }, { data: timeList, showRow: 7 }];
-	const col3DiffFlexDatas = [
-		{ data: weekList, flex: 3 },
-		{ data: amOrPmList, flex: 1 },
-		{ data: timeList, flex: 2 },
-	];
 
 	let visible1 = false;
 	let visible2 = false;
@@ -75,7 +59,7 @@
 	<Picker bind:visible={visible2} title="Please select province" {datas} />
 
 	<Cell title="Visible line 7" on:click={() => (visible3 = true)} />
-	<Picker bind:visible={visible3} datas={showRow7Datas} />
+	<Picker bind:visible={visible3} datas={[{ data: someProvinceList, showRow: 7 }]} />
 
 	<Cell title="Do not roll until the last selection item" on:click={() => (visible4 = true)} />
 	<Picker bind:visible={visible4} {datas} autoScrollToLast={false} />
@@ -85,31 +69,45 @@
 		on:click={() => (visible5 = true)}
 		subTitle="You need to disable automatic selection of the last selected item"
 	/>
-	<Picker bind:visible={visible5} datas={init3Datas} autoScrollToLast={false} />
+	<Picker bind:visible={visible5} datas={[{ data: someProvinceList, initIndex: 3 }]} autoScrollToLast={false} />
 
 	<Cell title="Cancel animation when auto scrolling" on:click={() => (visible6 = true)} />
-	<Picker bind:visible={visible6} datas={noAnimationDatas} />
+	<Picker bind:visible={visible6} datas={[{ data: someProvinceList, useAnimation: false }]} />
 
 	<Cell title="Customize the key value of the label" on:click={() => (visible7 = true)} />
-	<Picker bind:visible={visible7} datas={customKeyDatas} title="Please select city" />
+	<Picker bind:visible={visible7} datas={[{ data: cityList, labelKey: 'cityName' }]} title="Please select city" />
 
 	<Cell title="The selected items are displayed on the right" detail={currentDetail} on:click={() => (visible8 = true)} />
 	<Picker bind:visible={visible8} {datas} on:confirm={getCurrentDetailFunc} />
 
 	<Cell title="Single column left justified" on:click={() => (visible20 = true)} />
-	<Picker bind:visible={visible20} datas={leftDatas} />
+	<Picker bind:visible={visible20} datas={[{ data: someProvinceList, align: 'left' }]} />
 
 	<Cell title="Multi-column selector" on:click={() => (visible9 = true)} />
 	<Picker bind:visible={visible9} datas={col3Datas} />
 
 	<Cell title="Number of visible rows for different columns" on:click={() => (visible10 = true)} />
-	<Picker bind:visible={visible10} datas={col3DiffShowRowDatas} />
+	<Picker bind:visible={visible10} datas={[{ data: weekList }, { data: amOrPmList, showRow: 3 }, { data: timeList, showRow: 7 }]} />
 
 	<Cell title="flex ratio for different columns" on:click={() => (visible11 = true)} />
-	<Picker bind:visible={visible11} datas={col3DiffFlexDatas} />
+	<Picker
+		bind:visible={visible11}
+		datas={[
+			{ data: weekList, flex: 3 },
+			{ data: amOrPmList, flex: 1 },
+			{ data: timeList, flex: 2 },
+		]}
+	/>
 
 	<Cell title="Multiple columns with different alignments" on:click={() => (visible21 = true)} />
-	<Picker bind:visible={visible21} datas={col3DiffAlignDatas} />
+	<Picker
+		bind:visible={visible21}
+		datas={[
+			{ data: weekList, align: 'left' },
+			{ data: amOrPmList, align: 'center' },
+			{ data: timeList, align: 'right' },
+		]}
+	/>
 
 	<Cell title="Multilevel linkage" on:click={() => (visible12 = true)} />
 	<Picker bind:visible={visible12} datas={linkageData} isLinkage />

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

@@ -24,10 +24,10 @@
 
 <div class="m-4 font-bold text-lg">Combined with Grids</div>
 <Grids>
-	<Grid row={3} col={2}><Placeholder>3﹡2</Placeholder></Grid>
-	<Grid col={3}><Placeholder>1﹡3</Placeholder></Grid>
-	<Grid row={3}><Placeholder>3﹡1</Placeholder></Grid>
-	<Grid row={2} col={2}><Placeholder>2﹡2</Placeholder></Grid>
+	<Grid row="3" col="2"><Placeholder>3﹡2</Placeholder></Grid>
+	<Grid col="3"><Placeholder>1﹡3</Placeholder></Grid>
+	<Grid row="3"><Placeholder>3﹡1</Placeholder></Grid>
+	<Grid row="2" col="2"><Placeholder>2﹡2</Placeholder></Grid>
 	<Grid><Placeholder>1﹡1</Placeholder></Grid>
 	<Grid><Placeholder>1﹡1</Placeholder></Grid>
 </Grids>

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

@@ -62,13 +62,13 @@
 		<Progress {percent} duration="1000" />
 	</div>
 	<Button heightIn="0" group size="full">
-		<div class="flex">
+		<div class="flex divide-x divide-white dark:divide-black">
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>progress -10</div>
+			<div class="flex-1 py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>progress -10</div>
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>progress +10</div>
+			<div class="flex-1 py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>progress +10</div>
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>reset</div>

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

@@ -26,7 +26,7 @@
 </div>
 <div class="mx-4 mt-8 font-bold text-lg">Set unselected transparency</div>
 <div class="p-4">
-	<Rate opacity={0.8} />
+	<Rate opacity="0.8" />
 </div>
 <div class="mx-4 mt-8 font-bold text-lg">Allow semi-selection</div>
 <div class="p-4">
@@ -64,7 +64,7 @@
 </div>
 <div class="mx-4 mt-8 font-bold text-lg">customize</div>
 <div class="p-4">
-	<Rate custom opacity={0.6}>
+	<Rate custom opacity="0.6">
 		<Icon name="ri-star-fill" injClass="text-[#f5b53f]" />
 	</Rate>
 </div>
@@ -79,17 +79,17 @@
 	</Rate>
 </div>
 <div class="p-4">
-	<Rate half opacity={0.5} width={30} height={36} custom>
+	<Rate half opacity="0.5" width={30} height={36} custom>
 		<div class="text-3xl">👍</div>
 	</Rate>
 </div>
 <div class="p-4">
-	<Rate half opacity={0.5} width={30} height={36} vertical custom>
+	<Rate half opacity="0.5" width={30} height={36} vertical custom>
 		<div class="text-3xl">🍺</div>
 	</Rate>
 </div>
 <div class="p-4">
-	<Rate half opacity={0.5} width={30} height={36} custom>
+	<Rate half opacity="0.5" width={30} height={36} custom>
 		<div class="text-3xl text-primary dark:text-dark">M</div>
 	</Rate>
 </div>

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

@@ -3,6 +3,23 @@
 	import { Swiper } from '../../../../../packages/stdf/components';
 	import Item from './Item_en.svelte';
 
+	/**
+	 * @typedef {Object} img
+	 * @property {'img'} type
+	 * @property {String} url image url
+	 */
+
+	/**
+	 * @typedef {Object} component
+	 * @property {'component'} type
+	 * @property {Object} component
+	 */
+
+	/**
+	 * Data
+	 * @type {Array<img|component>}
+	 * @default []
+	 */
 	const data = [
 		{ type: 'img', url: '/assets/images/wall_1.jpg' },
 		{ type: 'img', url: '/assets/images/wall_2.jpg' },
@@ -10,11 +27,6 @@
 		{ type: 'img', url: '/assets/images/wall_4.jpg' },
 	];
 
-	const componentData = [
-		{ type: 'component', component: Item },
-		{ type: 'img', url: '/assets/images/wall_1.jpg' },
-	];
-
 	let indexClick = -1;
 	const clickImgFun = i => {
 		indexClick = i.detail;
@@ -282,7 +294,12 @@
 </div>
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">Container content uses components</div>
-<Swiper data={componentData} />
+<Swiper
+	data={[
+		{ type: 'component', component: Item },
+		{ type: 'img', url: '/assets/images/wall_1.jpg' },
+	]}
+/>
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
 	Listen for change events

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

@@ -4,31 +4,16 @@
 
 	const labels = [
 		{ text: 'Home', icon: { name: 'ri-home-3-line', size: 20 }, activeIcon: { name: 'ri-home-3-fill', size: 20 } },
-		{
-			text: 'Discover',
-			icon: { name: 'ri-compass-3-line', size: 20 },
-			activeIcon: { name: 'ri-compass-3-fill', size: 20 },
-		},
-		{
-			text: 'Message',
-			icon: { name: 'ri-discuss-line', size: 20 },
-			activeIcon: { name: 'ri-discuss-fill', size: 20 },
-		},
-		{
-			text: 'Mine',
-			icon: { name: 'ri-account-circle-line', size: 20 },
-			activeIcon: { name: 'ri-account-circle-fill', size: 20 },
-		},
+		{ text: 'Discover', icon: { name: 'ri-compass-3-line', size: 20 }, activeIcon: { name: 'ri-compass-3-fill', size: 20 } },
+		{ text: 'Message', icon: { name: 'ri-discuss-line', size: 20 }, activeIcon: { name: 'ri-discuss-fill', size: 20 } },
+		{ text: 'Mine', icon: { name: 'ri-account-circle-line', size: 20 }, activeIcon: { name: 'ri-account-circle-fill', size: 20 } },
 	];
 	const labels1 = [{ text: 'Home' }, { text: 'Discover' }, { text: 'Message' }, { text: 'Mine' }];
 	const labels2 = [
 		{ icon: { name: 'ri-home-3-line', size: 26 }, activeIcon: { name: 'ri-home-3-fill', size: 26 } },
 		{ icon: { name: 'ri-compass-3-line', size: 26 }, activeIcon: { name: 'ri-compass-3-fill', size: 26 } },
 		{ icon: { name: 'ri-discuss-line', size: 26 }, activeIcon: { name: 'ri-discuss-fill', size: 26 } },
-		{
-			icon: { name: 'ri-account-circle-line', size: 26 },
-			activeIcon: { name: 'ri-account-circle-fill', size: 26 },
-		},
+		{ icon: { name: 'ri-account-circle-line', size: 26 }, activeIcon: { name: 'ri-account-circle-fill', size: 26 } },
 	];
 	const labels3 = [
 		{ text: 'Home', icon: { name: 'ri-home-3-line', size: 20 } },
@@ -38,16 +23,8 @@
 	];
 	const labels4 = [
 		{ text: 'Home', icon: { name: 'ri-home-3-line', size: 20 }, activeIcon: { name: 'ri-home-3-fill', size: 20 } },
-		{
-			text: 'Message',
-			icon: { name: 'ri-discuss-line', size: 20 },
-			activeIcon: { name: 'ri-discuss-fill', size: 20 },
-		},
-		{
-			text: 'Mine',
-			icon: { name: 'ri-account-circle-line', size: 20 },
-			activeIcon: { name: 'ri-account-circle-fill', size: 20 },
-		},
+		{ text: 'Message', icon: { name: 'ri-discuss-line', size: 20 }, activeIcon: { name: 'ri-discuss-fill', size: 20 } },
+		{ text: 'Mine', icon: { name: 'ri-account-circle-line', size: 20 }, activeIcon: { name: 'ri-account-circle-fill', size: 20 } },
 	];
 	let active = 0;
 	const tabBarChangeFun = e => {

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

@@ -195,8 +195,8 @@
 
 <div class="px-4">
 	<div class="mb-4 font-bold text-2xl">行内元素排列</div>
-	<div class="mt-8 mb-4 font-bold text-lg">不用图标 && 行内元素排列</div>
-	<CheckboxGroup layout="inline" wrap on:change={dotaInlineFun}>
+	<div class="mt-8 mb-4 font-bold text-lg">不用图标 && 行内元素排列111</div>
+	<CheckboxGroup layout="inline" on:change={dotaInlineFun}>
 		{#each dotaInlines as item}
 			<Checkbox name={item} checkeds={checkInlines} icon="none" iconChecked="none">
 				<div

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

@@ -42,10 +42,10 @@
 <NoticeBar vertical {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">滚动过渡为 1 秒</div>
-<NoticeBar vertical duration="1000" {textList}></NoticeBar>
+<NoticeBar vertical duration={1000} {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">滚动间隔为 8 秒</div>
-<NoticeBar vertical interval="8" {textList}></NoticeBar>
+<NoticeBar vertical interval={8} {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">文字过长</div>
 <NoticeBar vertical textList={textLongList}></NoticeBar>

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

@@ -99,7 +99,7 @@
 >
 	{value}
 	{#if !doneDisabled}
-		<span class="absolute left-1/2"><Confetti rounded amount="100" /></span>
+		<span class="absolute left-1/2"><Confetti rounded amount={100} /></span>
 	{/if}
 </div>
 <Cell title="请输入 5201314" on:click={() => (visible12 = true)} />

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

@@ -36,11 +36,11 @@
 	};
 	const changePageFunc = e => {
 		currentPage = e.detail;
-		getData(currentPage);
+		getData();
 	};
 	// 初始请求第一页
 	onMount(() => {
-		getData(currentPage);
+		getData();
 	});
 </script>
 

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

@@ -14,23 +14,7 @@
 	} from './data';
 
 	const datas = [{ data: someProvinceList }];
-	const leftDatas = [{ data: someProvinceList, align: 'left' }];
-	const showRow7Datas = [{ data: someProvinceList, showRow: 7 }];
-	const init3Datas = [{ data: someProvinceList, initIndex: 3 }];
-	const noAnimationDatas = [{ data: someProvinceList, useAnimation: false }];
-	const customKeyDatas = [{ data: cityList, labelKey: 'cityName' }];
 	const col3Datas = [{ data: weekList }, { data: amOrPmList }, { data: timeList }];
-	const col3DiffAlignDatas = [
-		{ data: weekList, align: 'left' },
-		{ data: amOrPmList, align: 'center' },
-		{ data: timeList, align: 'right' },
-	];
-	const col3DiffShowRowDatas = [{ data: weekList }, { data: amOrPmList, showRow: 3 }, { data: timeList, showRow: 7 }];
-	const col3DiffFlexDatas = [
-		{ data: weekList, flex: 3 },
-		{ data: amOrPmList, flex: 1 },
-		{ data: timeList, flex: 2 },
-	];
 
 	let visible1 = false;
 	let visible2 = false;
@@ -75,37 +59,51 @@
 	<Picker bind:visible={visible2} title="请选择省份" {datas} />
 
 	<Cell title="可见 7 行" on:click={() => (visible3 = true)} />
-	<Picker bind:visible={visible3} datas={showRow7Datas} />
+	<Picker bind:visible={visible3} datas={[{ data: someProvinceList, showRow: 7 }]} />
 
 	<Cell title="关闭自动滚动至上次选定项" on:click={() => (visible4 = true)} />
 	<Picker bind:visible={visible4} {datas} autoScrollToLast={false} />
 
 	<Cell title="初始选定始终为第 4 项" on:click={() => (visible5 = true)} subTitle="需要关闭自动选定上次选中项" />
-	<Picker bind:visible={visible5} datas={init3Datas} autoScrollToLast={false} />
+	<Picker bind:visible={visible5} datas={[{ data: someProvinceList, initIndex: 3 }]} autoScrollToLast={false} />
 
 	<Cell title="自动滚动时取消动画" on:click={() => (visible6 = true)} />
-	<Picker bind:visible={visible6} datas={noAnimationDatas} />
+	<Picker bind:visible={visible6} datas={[{ data: someProvinceList, useAnimation: false }]} />
 
 	<Cell title="自定义 label 的 key 值" on:click={() => (visible7 = true)} />
-	<Picker bind:visible={visible7} datas={customKeyDatas} title="请选择城市" />
+	<Picker bind:visible={visible7} datas={[{ data: cityList, labelKey: 'cityName' }]} title="请选择城市" />
 
 	<Cell title="右侧展示选定项" detail={currentDetail} on:click={() => (visible8 = true)} />
 	<Picker bind:visible={visible8} {datas} on:confirm={getCurrentDetailFunc} />
 
 	<Cell title="单列左对齐" on:click={() => (visible20 = true)} />
-	<Picker bind:visible={visible20} datas={leftDatas} />
+	<Picker bind:visible={visible20} datas={[{ data: someProvinceList, align: 'left' }]} />
 
 	<Cell title="多列选择器" on:click={() => (visible9 = true)} />
 	<Picker bind:visible={visible9} datas={col3Datas} />
 
 	<Cell title="不同列可见行数" on:click={() => (visible10 = true)} />
-	<Picker bind:visible={visible10} datas={col3DiffShowRowDatas} />
+	<Picker bind:visible={visible10} datas={[{ data: weekList }, { data: amOrPmList, showRow: 3 }, { data: timeList, showRow: 7 }]} />
 
 	<Cell title="不同列 flex 比例" on:click={() => (visible11 = true)} />
-	<Picker bind:visible={visible11} datas={col3DiffFlexDatas} />
+	<Picker
+		bind:visible={visible11}
+		datas={[
+			{ data: weekList, flex: 3 },
+			{ data: amOrPmList, flex: 1 },
+			{ data: timeList, flex: 2 },
+		]}
+	/>
 
 	<Cell title="多列不同对齐方式" on:click={() => (visible21 = true)} />
-	<Picker bind:visible={visible21} datas={col3DiffAlignDatas} />
+	<Picker
+		bind:visible={visible21}
+		datas={[
+			{ data: weekList, align: 'left' },
+			{ data: amOrPmList, align: 'center' },
+			{ data: timeList, align: 'right' },
+		]}
+	/>
 
 	<Cell title="多级联动" on:click={() => (visible12 = true)} />
 	<Picker bind:visible={visible12} datas={linkageData} isLinkage />

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

@@ -24,10 +24,10 @@
 
 <div class="m-4 font-bold text-lg">与 Grids 结合</div>
 <Grids>
-	<Grid row={3} col={2}><Placeholder>3﹡2</Placeholder></Grid>
-	<Grid col={3}><Placeholder>1﹡3</Placeholder></Grid>
-	<Grid row={3}><Placeholder>3﹡1</Placeholder></Grid>
-	<Grid row={2} col={2}><Placeholder>2﹡2</Placeholder></Grid>
+	<Grid row="3" col="2"><Placeholder>3﹡2</Placeholder></Grid>
+	<Grid col="3"><Placeholder>1﹡3</Placeholder></Grid>
+	<Grid row="3"><Placeholder>3﹡1</Placeholder></Grid>
+	<Grid row="2" col="2"><Placeholder>2﹡2</Placeholder></Grid>
 	<Grid><Placeholder>1﹡1</Placeholder></Grid>
 	<Grid><Placeholder>1﹡1</Placeholder></Grid>
 </Grids>

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

@@ -62,13 +62,13 @@
 		<Progress {percent} duration="1000" />
 	</div>
 	<Button heightIn="0" group size="full">
-		<div class="flex">
+		<div class="flex divide-x divide-white dark:divide-black">
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>进度 -10</div>
+			<div class="flex-1 py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>进度 -10</div>
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>进度 +10</div>
+			<div class="flex-1 py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>进度 +10</div>
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>重置</div>

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

@@ -26,7 +26,7 @@
 </div>
 <div class="mx-4 mt-8 font-bold text-lg">设置未选中透明度</div>
 <div class="p-4">
-	<Rate opacity={0.8} />
+	<Rate opacity="0.8" />
 </div>
 <div class="mx-4 mt-8 font-bold text-lg">允许半选</div>
 <div class="p-4">
@@ -64,7 +64,7 @@
 </div>
 <div class="mx-4 mt-8 font-bold text-lg">自定义</div>
 <div class="p-4">
-	<Rate custom opacity={0.6}>
+	<Rate custom opacity="0.6">
 		<Icon name="ri-star-fill" injClass="text-[#f5b53f]" />
 	</Rate>
 </div>
@@ -79,17 +79,17 @@
 	</Rate>
 </div>
 <div class="p-4">
-	<Rate half opacity={0.5} width={30} height={36} custom>
+	<Rate half opacity="0.5" width={30} height={36} custom>
 		<div class="text-3xl">👍</div>
 	</Rate>
 </div>
 <div class="p-4">
-	<Rate half opacity={0.5} width={30} height={36} vertical custom>
+	<Rate half opacity="0.5" width={30} height={36} vertical custom>
 		<div class="text-3xl">🍺</div>
 	</Rate>
 </div>
 <div class="p-4">
-	<Rate half opacity={0.5} width={30} height={36} custom>
+	<Rate half opacity="0.5" width={30} height={36} custom>
 		<div class="text-3xl text-primary dark:text-dark">富</div>
 	</Rate>
 </div>

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

@@ -3,6 +3,23 @@
 	import { Swiper } from '../../../../../packages/stdf/components';
 	import Item from './Item.svelte';
 
+	/**
+	 * @typedef {Object} img
+	 * @property {'img'} type 类型
+	 * @property {String} url 图片地址
+	 */
+
+	/**
+	 * @typedef {Object} component
+	 * @property {'component'} type 类型
+	 * @property {Object} component 组件
+	 */
+
+	/**
+	 * 数据
+	 * @type {Array<img|component>}
+	 * @default []
+	 */
 	const data = [
 		{ type: 'img', url: '/assets/images/wall_1.jpg' },
 		{ type: 'img', url: '/assets/images/wall_2.jpg' },
@@ -10,11 +27,6 @@
 		{ type: 'img', url: '/assets/images/wall_4.jpg' },
 	];
 
-	const componentData = [
-		{ type: 'component', component: Item },
-		{ type: 'img', url: '/assets/images/wall_1.jpg' },
-	];
-
 	let indexClick = -1;
 	const clickImgFun = i => {
 		indexClick = i.detail;
@@ -282,7 +294,12 @@
 </div>
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">容器内容使用组件</div>
-<Swiper data={componentData} />
+<Swiper
+	data={[
+		{ type: 'component', component: Item },
+		{ type: 'img', url: '/assets/images/wall_1.jpg' },
+	]}
+/>
 
 <div class="font-bold text-lg mx-4 mt-10 mb-2">
 	监听 change 事件

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

@@ -4,31 +4,16 @@
 
 	const labels = [
 		{ text: '首页', icon: { name: 'ri-home-3-line', size: 20 }, activeIcon: { name: 'ri-home-3-fill', size: 20 } },
-		{
-			text: '发现',
-			icon: { name: 'ri-compass-3-line', size: 20 },
-			activeIcon: { name: 'ri-compass-3-fill', size: 20 },
-		},
-		{
-			text: '消息',
-			icon: { name: 'ri-discuss-line', size: 20 },
-			activeIcon: { name: 'ri-discuss-fill', size: 20 },
-		},
-		{
-			text: '我的',
-			icon: { name: 'ri-account-circle-line', size: 20 },
-			activeIcon: { name: 'ri-account-circle-fill', size: 20 },
-		},
+		{ text: '发现', icon: { name: 'ri-compass-3-line', size: 20 }, activeIcon: { name: 'ri-compass-3-fill', size: 20 } },
+		{ text: '消息', icon: { name: 'ri-discuss-line', size: 20 }, activeIcon: { name: 'ri-discuss-fill', size: 20 } },
+		{ text: '我的', icon: { name: 'ri-account-circle-line', size: 20 }, activeIcon: { name: 'ri-account-circle-fill', size: 20 } },
 	];
 	const labels1 = [{ text: '首页' }, { text: '发现' }, { text: '消息' }, { text: '我的' }];
 	const labels2 = [
 		{ icon: { name: 'ri-home-3-line', size: 26 }, activeIcon: { name: 'ri-home-3-fill', size: 26 } },
 		{ icon: { name: 'ri-compass-3-line', size: 26 }, activeIcon: { name: 'ri-compass-3-fill', size: 26 } },
 		{ icon: { name: 'ri-discuss-line', size: 26 }, activeIcon: { name: 'ri-discuss-fill', size: 26 } },
-		{
-			icon: { name: 'ri-account-circle-line', size: 26 },
-			activeIcon: { name: 'ri-account-circle-fill', size: 26 },
-		},
+		{ icon: { name: 'ri-account-circle-line', size: 26 }, activeIcon: { name: 'ri-account-circle-fill', size: 26 } },
 	];
 	const labels3 = [
 		{ text: '首页', icon: { name: 'ri-home-3-line', size: 20 } },
@@ -38,16 +23,8 @@
 	];
 	const labels4 = [
 		{ text: '首页', icon: { name: 'ri-home-3-line', size: 20 }, activeIcon: { name: 'ri-home-3-fill', size: 20 } },
-		{
-			text: '消息',
-			icon: { name: 'ri-discuss-line', size: 20 },
-			activeIcon: { name: 'ri-discuss-fill', size: 20 },
-		},
-		{
-			text: '我的',
-			icon: { name: 'ri-account-circle-line', size: 20 },
-			activeIcon: { name: 'ri-account-circle-fill', size: 20 },
-		},
+		{ text: '消息', icon: { name: 'ri-discuss-line', size: 20 }, activeIcon: { name: 'ri-discuss-fill', size: 20 } },
+		{ text: '我的', icon: { name: 'ri-account-circle-line', size: 20 }, activeIcon: { name: 'ri-account-circle-fill', size: 20 } },
 	];
 	let active = 0;
 	const tabBarChangeFun = e => {