[stdf]Update IndexBar compoent, demo and documents.

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

@@ -3,100 +3,100 @@
 	import { IndexBar, Button, Toast } from '../../../../../packages/stdf/components';
 
 	const addressList = [
-		{ index: 'A', title: 'A', child: [{ text: 'Macau' }, { text: 'Anning' }, { text: 'Anqing' }, { text: 'Anshan' }] },
-		{ index: 'B', title: 'B', child: [{ text: 'Beijing' }, { text: 'Baoding' }, { text: 'Baotou' }, { text: 'Baoji' }] },
-		{ index: 'C', title: 'C', child: [{ text: 'Chengde' }, { text: 'Cangzhou' }, { text: 'Chifeng' }] },
-		{ index: 'D', title: 'D', child: [{ text: 'Datong' }, { text: 'Dalian' }, { text: 'Dali' }] },
-		{ index: 'E', title: 'E', child: [{ text: 'Enshi' }, { text: 'Ordos' }, { text: 'Emeishan' }] },
-		{ index: 'F', title: 'F', child: [{ text: 'Fushun' }, { text: 'Foshan' }, { text: 'Fuquan' }] },
-		{ index: 'G', title: 'G', child: [{ text: 'Gejiu' }, { text: 'Guilin' }, { text: 'Ganzhou' }] },
-		{ index: 'H', title: 'H', child: [{ text: 'Handan' }, { text: 'Hohhot' }, { text: 'Hulunbuir' }] },
-		{ index: 'J', title: 'J', child: [{ text: 'Jilin' }, { text: 'Jiuquan' }, { text: 'Jinjiang' }] },
-		{ index: 'K', title: 'K', child: [{ text: 'Kunming' }, { text: 'Kunshan' }, { text: 'Kaifeng' }] },
-		{ index: 'L', title: 'L', child: [{ text: 'Lhasa' }, { text: 'Lanzhou' }, { text: 'Luzhou' }] },
-		{ index: 'M', title: 'M', child: [{ text: 'Mianyang' }, { text: 'Maans' }, { text: 'Mudanjiang' }] },
-		{ index: 'N', title: 'N', child: [{ text: 'Nanchang' }, { text: 'Nanjing' }, { text: 'Ningbo' }] },
-		{ index: 'P', title: 'P', child: [{ text: 'Putian' }, { text: 'Panzhihua' }, { text: 'Pingdingshan' }] },
-		{ index: 'Q', title: 'Q', child: [{ text: 'Qujing' }, { text: 'Qingdao' }, { text: 'Qiqihar' }] },
-		{ index: 'R', title: 'R', child: [{ text: 'Ruili' }, { text: 'Ruian' }, { text: 'Ruijin' }] },
-		{ index: 'S', title: 'S', child: [{ text: 'Sanya' }, { text: 'Shanghai' }, { text: 'Shenzhen' }] },
-		{ index: 'T', title: 'T', child: [{ text: 'Taizhou' }, { text: 'Taiyuan' }, { text: 'Tianjin' }] },
-		{ index: 'W', title: 'W', child: [{ text: 'Wuhan' }, { text: 'Wuxi' }, { text: 'Wuhu' }] },
-		{ index: 'X', title: 'X', child: [{ text: 'Xi an' }, { text: 'Xiamen' }, { text: 'Xuanwei' }] },
-		{ index: 'Y', title: 'Y', child: [{ text: 'Yiwu' }, { text: 'Yinchuan' }, { text: 'Yuxi' }] },
-		{ index: 'Z', title: 'Z', child: [{ text: 'Zhaotong' }, { text: 'Zunyi' }, { text: 'Zhangjiajie' }] },
+		{ index: 'A', title: 'A', child: ['Macau', 'Anning', 'Anqing', 'Anshan'] },
+		{ index: 'B', title: 'B', child: ['Beijing', 'Baoding', 'Baotou', 'Baoji'] },
+		{ index: 'C', title: 'C', child: ['Chengde', 'Cangzhou', 'Chifeng'] },
+		{ index: 'D', title: 'D', child: ['Datong', 'Dalian', 'Dali'] },
+		{ index: 'E', title: 'E', child: ['Enshi', 'Ordos', 'Emeishan'] },
+		{ index: 'F', title: 'F', child: ['Fushun', 'Foshan', 'Fuquan'] },
+		{ index: 'G', title: 'G', child: ['Gejiu', 'Guilin', 'Ganzhou'] },
+		{ index: 'H', title: 'H', child: ['Handan', 'Hohhot', 'Hulunbuir'] },
+		{ index: 'J', title: 'J', child: ['Jilin', 'Jiuquan', 'Jinjiang'] },
+		{ index: 'K', title: 'K', child: ['Kunming', 'Kunshan', 'Kaifeng'] },
+		{ index: 'L', title: 'L', child: ['Lhasa', 'Lanzhou', 'Luzhou'] },
+		{ index: 'M', title: 'M', child: ['Mianyang', 'Maans', 'Mudanjiang'] },
+		{ index: 'N', title: 'N', child: ['Nanchang', 'Nanjing', 'Ningbo'] },
+		{ index: 'P', title: 'P', child: ['Putian', 'Panzhihua', 'Pingdingshan'] },
+		{ index: 'Q', title: 'Q', child: ['Qujing', 'Qingdao', 'Qiqihar'] },
+		{ index: 'R', title: 'R', child: ['Ruili', 'Ruian', 'Ruijin'] },
+		{ index: 'S', title: 'S', child: ['Sanya', 'Shanghai', 'Shenzhen'] },
+		{ index: 'T', title: 'T', child: ['Taizhou', 'Taiyuan', 'Tianjin'] },
+		{ index: 'W', title: 'W', child: ['Wuhan', 'Wuxi', 'Wuhu'] },
+		{ index: 'X', title: 'X', child: ['Xi an', 'Xiamen', 'Xuanwei'] },
+		{ index: 'Y', title: 'Y', child: ['Yiwu', 'Yinchuan', 'Yuxi'] },
+		{ index: 'Z', title: 'Z', child: ['Zhaotong', 'Zunyi', 'Zhangjiajie'] },
 	];
 
 	const emojiList = [
-		{ index: '😀', title: 'Smileys & Emotion', child: [{ text: '😂' }, { text: '🥰' }, { text: '🥱' }, { text: '🧐' }] },
-		{ index: '👋', title: 'People & Body', child: [{ text: '👌' }, { text: '🤝' }, { text: '👨‍💻' }, { text: '💪' }] },
-		{ index: '🐵', title: 'Animals & Nature', child: [{ text: '🦄' }, { text: '🌱' }, { text: '🦁' }, { text: '🐶' }] },
-		{ index: '🍎', title: 'Food & Drink', child: [{ text: '🍑' }, { text: '🍞' }, { text: '🍽️' }, { text: '🍩' }] },
-		{ index: '🌍', title: 'Travel & Places', child: [{ text: '🏔️' }, { text: '🚆' }, { text: '✈️' }, { text: '🛵' }] },
-		{ index: '🏆', title: 'Activities', child: [{ text: '⚽' }, { text: '🎨' }, { text: '🏀' }, { text: '🧨' }] },
-		{ index: '📱', title: 'Objects', child: [{ text: '🎩' }, { text: '💻' }, { text: '🎒' }, { text: '📖' }] },
-		{ index: '⚠️', title: 'Symbols', child: [{ text: '🚫' }, { text: '⚛️' }, { text: '🛄' }, { text: '🔱' }] },
-		{ index: '🏁', title: 'Flags', child: [{ text: '🇨🇳' }, { text: '🇺🇸' }, { text: '🇧🇻' }, { text: '🇦🇹' }] },
+		{ index: '😀', title: 'Smileys & Emotion', child: ['😂', '🥰', '🥱', '🧐'] },
+		{ index: '👋', title: 'People & Body', child: ['👌', '🤝', '👨‍💻', '💪'] },
+		{ index: '🐵', title: 'Animals & Nature', child: ['🦄', '🌱', '🦁', '🐶'] },
+		{ index: '🍎', title: 'Food & Drink', child: ['🍑', '🍞', '🍽️', '🍩'] },
+		{ index: '🌍', title: 'Travel & Places', child: ['🏔️', '🚆', '✈️', '🛵'] },
+		{ index: '🏆', title: 'Activities', child: ['⚽', '🎨', '🏀', '🧨'] },
+		{ index: '📱', title: 'Objects', child: ['🎩', '💻', '🎒', '📖'] },
+		{ index: '⚠️', title: 'Symbols', child: ['🚫', '⚛️', '🛄', '🔱'] },
+		{ index: '🏁', title: 'Flags', child: ['🇨🇳', '🇺🇸', '🇧🇻', '🇦🇹'] },
 	];
 	const movieTVList = [
 		{
 			index: '三',
 			title: '三体',
 			child: [
-				{ text: '地球往事' },
-				{ text: '黑暗森林' },
-				{ text: '死神永生' },
-				{ text: '科学边界' },
-				{ text: '射手和农场主' },
-				{ text: '寂静的春天' },
-				{ text: '宇宙闪烁' },
-				{ text: '地球叛军' },
-				{ text: '古筝行动' },
-				{ text: '智子' },
-				{ text: '面壁者' },
-				{ text: '咒语' },
-				{ text: '黑暗森林' },
-				{ text: '危机纪元' },
-				{ text: '威慑纪元' },
-				{ text: '广播纪元' },
-				{ text: '掩体纪元' },
-				{ text: '银河纪元' },
-				{ text: '时间开始' },
-				{ text: '时间之外，我们的宇宙' },
+				'地球往事',
+				'黑暗森林',
+				'死神永生',
+				'科学边界',
+				'射手和农场主',
+				'寂静的春天',
+				'宇宙闪烁',
+				'地球叛军',
+				'古筝行动',
+				'智子',
+				'面壁者',
+				'咒语',
+				'黑暗森林',
+				'危机纪元',
+				'威慑纪元',
+				'广播纪元',
+				'掩体纪元',
+				'银河纪元',
+				'时间开始',
+				'时间之外，我们的宇宙',
 			],
 		},
 		{
 			index: '流',
 			title: '流浪地球',
 			child: [
-				{ text: '人类的勇气和坚毅必将被镌刻在星空之下。' },
-				{ text: '希望是像钻石一样珍贵的东西！' },
-				{ text: '希望，希望是我们唯一回家的方向。' },
-				{ text: '让人类永远保持理智，是一种奢求。' },
-				{ text: '道路千万条，安全第一条；行车不规范，亲人两行泪！' },
-				{ text: '那时候人们还没注意到太阳，人们更喜欢叫做钱的东西。' },
-				{ text: '为了我们的孩子，没有什么不能失去的了' },
-				{ text: 'moss没有叛逃!' },
-				{ text: '火石没了，我老婆孩子全他妈白死了！' },
+				'人类的勇气和坚毅必将被镌刻在星空之下。',
+				'希望是像钻石一样珍贵的东西！',
+				'希望，希望是我们唯一回家的方向。',
+				'让人类永远保持理智，是一种奢求。',
+				'道路千万条，安全第一条；行车不规范，亲人两行泪！',
+				'那时候人们还没注意到太阳，人们更喜欢叫做钱的东西。',
+				'为了我们的孩子，没有什么不能失去的了',
+				'moss没有叛逃!',
+				'火石没了，我老婆孩子全他妈白死了！',
 			],
 		},
 		{
 			index: '仙',
 			title: '仙剑奇侠传',
 			child: [
-				{ text: '既不回头，何必不忘。既然无缘，何必誓言。' },
-				{ text: '没有值得不值得，只有愿意不愿意。' },
-				{ text: '不曾得到，谈何放下。既已得到，又如何放下。' },
-				{ text: '轮回的是故人，不变的是初心！' },
-				{ text: '明夕何夕，君已陌路。' },
-				{ text: '我曾经也拥有过爱，只是，我放弃了。' },
-				{ text: '你以为每天看到的东西，就会抓得住吗？' },
-				{ text: '世有无情人，却有痴情妖。' },
-				{ text: '君子，小人，皆在一念思量。' },
-				{ text: '到家了，一定要叫醒我，我怕我醒不过来。' },
-				{ text: '如果得道就是牺牲所有人来成全自己，我宁愿执迷不悟。' },
-				{ text: '我们今日一别，让我们十年后再相见，不见不散！' },
-				{ text: '一杯愁绪，几段情缘，莫过，与君对酒当歌。' },
+				'既不回头，何必不忘。既然无缘，何必誓言。',
+				'没有值得不值得，只有愿意不愿意。',
+				'不曾得到，谈何放下。既已得到，又如何放下。',
+				'轮回的是故人，不变的是初心！',
+				'明夕何夕，君已陌路。',
+				'我曾经也拥有过爱，只是，我放弃了。',
+				'你以为每天看到的东西，就会抓得住吗？',
+				'世有无情人，却有痴情妖。',
+				'君子，小人，皆在一念思量。',
+				'到家了，一定要叫醒我，我怕我醒不过来。',
+				'如果得道就是牺牲所有人来成全自己，我宁愿执迷不悟。',
+				'我们今日一别，让我们十年后再相见，不见不散！',
+				'一杯愁绪，几段情缘，莫过，与君对酒当歌。',
 			],
 		},
 	];
@@ -106,10 +106,10 @@
 	/**
 	 * @type {'base' | 'full' | 'none'}
 	 */
-	let radius = 'base';
-	let dataFlag = 0;
-	let scrollAlign = true;
-	let injClassList = [];
+	let radius = $state('base');
+	let dataFlag = $state(0);
+	let scrollAlign = $state(true);
+	let injClassList = $state([]);
 	const changeRadiusFun = () => {
 		radius = radius === 'base' ? 'full' : radius === 'full' ? 'none' : 'base';
 	};
@@ -122,8 +122,8 @@
 	const changeClassFun = () => {
 		injClassList = !injClassList.length ? ['!text-3xl text-center', 'text-xs text-center !py-1'] : [];
 	};
-	let visible = false;
-	let toastObj = { index: 0, group: {}, childIndex: 0, child: {} };
+	let visible = $state(false);
+	let toastObj = $state({ index: 0, group: {}, childIndex: 0, child: {} });
 </script>
 
 {#if dataFlag === 0}
@@ -135,8 +135,8 @@
 		titleInjClass={injClassList[0]}
 		textInjClass={injClassList[1]}
 		top={navHeight}
-		on:clickchild={e => {
-			toastObj = e.detail;
+		onclickChild={(index, group, childIndex, child) => {
+			toastObj = { index, group, childIndex, child };
 			visible = true;
 		}}
 	/>
@@ -149,8 +149,8 @@
 		titleInjClass={injClassList[0]}
 		textInjClass={injClassList[1]}
 		top={navHeight}
-		on:clickchild={e => {
-			toastObj = e.detail;
+		onclickChild={(index, group, childIndex, child) => {
+			toastObj = { index, group, childIndex, child };
 			visible = true;
 		}}
 	/>
@@ -163,22 +163,22 @@
 		titleInjClass={injClassList[0]}
 		textInjClass={injClassList[1]}
 		top={navHeight}
-		on:clickchild={e => {
-			toastObj = e.detail;
+		onclickChild={(index, group, childIndex, child) => {
+			toastObj = { index, group, childIndex, child };
 			visible = true;
 		}}
 	/>
 {/if}
 <Toast
 	bind:visible
-	message={`Clicked ${toastObj.index + 1} group(${toastObj.group.title}) ${toastObj.childIndex + 1} item(${toastObj.child.text})`}
+	message={`Clicked ${toastObj.index + 1} group(${toastObj.group.title}) ${toastObj.childIndex + 1} item(${toastObj.child})`}
 />
 
 <div class="sticky flex justify-between bottom-0 px-2 z-10 bg-white/90 dark:bg-black/90">
-	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeListFun}>Switch data</Button>
-	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeScrollAlignFun}>
+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" onclick={changeListFun}>Switch data</Button>
+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" onclick={changeScrollAlignFun}>
 		{scrollAlign ? 'open' : 'close'} Align
 	</Button>
-	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeRadiusFun}>Switch rounded</Button>
-	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeClassFun}>Switch style</Button>
+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" onclick={changeRadiusFun}>Switch rounded</Button>
+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" onclick={changeClassFun}>Switch style</Button>
 </div>

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

@@ -3,99 +3,99 @@
 	import { IndexBar, Button, Toast } from '../../../../../packages/stdf/components';
 
 	const addressList = [
-		{ index: 'A', title: 'A', child: [{ text: '澳门' }, { text: '安宁' }, { text: '安庆' }, { text: '鞍山' }] },
-		{ index: 'B', title: 'B', child: [{ text: '北京' }, { text: '保定' }, { text: '包头' }, { text: '宝鸡' }] },
-		{ index: 'C', title: 'C', child: [{ text: '承德' }, { text: '沧州' }, { text: '赤峰' }] },
-		{ index: 'D', title: 'D', child: [{ text: '大同' }, { text: '大连' }, { text: '大理' }] },
-		{ index: 'E', title: 'E', child: [{ text: '恩施' }, { text: '鄂尔多斯' }, { text: '峨眉山' }] },
-		{ index: 'F', title: 'F', child: [{ text: '抚顺' }, { text: '佛山' }, { text: '福泉' }] },
-		{ index: 'G', title: 'G', child: [{ text: '个旧' }, { text: '桂林' }, { text: '赣州' }] },
-		{ index: 'H', title: 'H', child: [{ text: '邯郸' }, { text: '呼和浩特' }, { text: '呼伦贝尔' }] },
-		{ index: 'J', title: 'J', child: [{ text: '吉林' }, { text: '酒泉' }, { text: '晋江' }] },
-		{ index: 'K', title: 'K', child: [{ text: '昆明' }, { text: '昆山' }, { text: '开封' }] },
-		{ index: 'L', title: 'L', child: [{ text: '拉萨' }, { text: '兰州' }, { text: '泸州' }] },
-		{ index: 'M', title: 'M', child: [{ text: '绵阳' }, { text: '马鞍山' }, { text: '牡丹江' }] },
-		{ index: 'N', title: 'N', child: [{ text: '南昌' }, { text: '南京' }, { text: '宁波' }] },
-		{ index: 'P', title: 'P', child: [{ text: '莆田' }, { text: '攀枝花' }, { text: '平顶山' }] },
-		{ index: 'Q', title: 'Q', child: [{ text: '曲靖' }, { text: '青岛' }, { text: '齐齐哈尔' }] },
-		{ index: 'R', title: 'R', child: [{ text: '瑞丽' }, { text: '瑞安' }, { text: '瑞金' }] },
-		{ index: 'S', title: 'S', child: [{ text: '三亚' }, { text: '上海' }, { text: '深圳' }] },
-		{ index: 'T', title: 'T', child: [{ text: '台州' }, { text: '太原' }, { text: '天津' }] },
-		{ index: 'W', title: 'W', child: [{ text: '武汉' }, { text: '无锡' }, { text: '芜湖' }] },
-		{ index: 'X', title: 'X', child: [{ text: '西安' }, { text: '厦门' }, { text: '宣威' }] },
-		{ index: 'Y', title: 'Y', child: [{ text: '义乌' }, { text: '银川' }, { text: '玉溪' }] },
-		{ index: 'Z', title: 'Z', child: [{ text: '昭通' }, { text: '遵义' }, { text: '张家界' }] },
+		{ index: 'A', title: 'A', child: ['澳门', '安宁', '安庆', '鞍山'] },
+		{ index: 'B', title: 'B', child: ['北京', '保定', '包头', '宝鸡'] },
+		{ index: 'C', title: 'C', child: ['承德', '沧州', '赤峰'] },
+		{ index: 'D', title: 'D', child: ['大同', '大连', '大理'] },
+		{ index: 'E', title: 'E', child: ['恩施', '鄂尔多斯', '峨眉山'] },
+		{ index: 'F', title: 'F', child: ['抚顺', '佛山', '福泉'] },
+		{ index: 'G', title: 'G', child: ['个旧', '桂林', '赣州'] },
+		{ index: 'H', title: 'H', child: ['邯郸', '呼和浩特', '呼伦贝尔'] },
+		{ index: 'J', title: 'J', child: ['吉林', '酒泉', '晋江'] },
+		{ index: 'K', title: 'K', child: ['昆明', '昆山', '开封'] },
+		{ index: 'L', title: 'L', child: ['拉萨', '兰州', '泸州'] },
+		{ index: 'M', title: 'M', child: ['绵阳', '马鞍山', '牡丹江'] },
+		{ index: 'N', title: 'N', child: ['南昌', '南京', '宁波'] },
+		{ index: 'P', title: 'P', child: ['莆田', '攀枝花', '平顶山'] },
+		{ index: 'Q', title: 'Q', child: ['曲靖', '青岛', '齐齐哈尔'] },
+		{ index: 'R', title: 'R', child: ['瑞丽', '瑞安', '瑞金'] },
+		{ index: 'S', title: 'S', child: ['三亚', '上海', '深圳'] },
+		{ index: 'T', title: 'T', child: ['台州', '太原', '天津'] },
+		{ index: 'W', title: 'W', child: ['武汉', '无锡', '芜湖'] },
+		{ index: 'X', title: 'X', child: ['西安', '厦门', '宣威'] },
+		{ index: 'Y', title: 'Y', child: ['义乌', '银川', '玉溪'] },
+		{ index: 'Z', title: 'Z', child: ['昭通', '遵义', '张家界'] },
 	];
 	const emojiList = [
-		{ index: '😀', title: '表情与情感', child: [{ text: '😂' }, { text: '🥰' }, { text: '🥱' }, { text: '🧐' }] },
-		{ index: '👋', title: '人物与身体', child: [{ text: '👌' }, { text: '🤝' }, { text: '👨‍💻' }, { text: '💪' }] },
-		{ index: '🐵', title: '动物与自然', child: [{ text: '🦄' }, { text: '🌱' }, { text: '🦁' }, { text: '🐶' }] },
-		{ index: '🍎', title: '食物与饮料', child: [{ text: '🍑' }, { text: '🍞' }, { text: '🍽️' }, { text: '🍩' }] },
-		{ index: '🌍', title: '旅行与地理', child: [{ text: '🏔️' }, { text: '🚆' }, { text: '✈️' }, { text: '🛵' }] },
-		{ index: '🏆', title: '活动', child: [{ text: '⚽' }, { text: '🎨' }, { text: '🏀' }, { text: '🧨' }] },
-		{ index: '📱', title: '物品', child: [{ text: '🎩' }, { text: '💻' }, { text: '🎒' }, { text: '📖' }] },
-		{ index: '⚠️', title: '符号标志', child: [{ text: '🚫' }, { text: '⚛️' }, { text: '🛄' }, { text: '🔱' }] },
-		{ index: '🏁', title: '旗帜', child: [{ text: '🇨🇳' }, { text: '🇺🇸' }, { text: '🇧🇻' }, { text: '🇦🇹' }] },
+		{ index: '😀', title: '表情与情感', child: ['😂', '🥰', '🥱', '🧐'] },
+		{ index: '👋', title: '人物与身体', child: ['👌', '🤝', '👨‍💻', '💪'] },
+		{ index: '🐵', title: '动物与自然', child: ['🦄', '🌱', '🦁', '🐶'] },
+		{ index: '🍎', title: '食物与饮料', child: ['🍑', '🍞', '🍽️', '🍩'] },
+		{ index: '🌍', title: '旅行与地理', child: ['🏔️', '🚆', '✈️', '🛵'] },
+		{ index: '🏆', title: '活动', child: ['⚽', '🎨', '🏀', '🧨'] },
+		{ index: '📱', title: '物品', child: ['🎩', '💻', '🎒', '📖'] },
+		{ index: '⚠️', title: '符号标志', child: ['🚫', '⚛️', '🛄', '🔱'] },
+		{ index: '🏁', title: '旗帜', child: ['🇨🇳', '🇺🇸', '🇧🇻', '🇦🇹'] },
 	];
 	const movieTVList = [
 		{
 			index: '三',
 			title: '三体',
 			child: [
-				{ text: '地球往事' },
-				{ text: '黑暗森林' },
-				{ text: '死神永生' },
-				{ text: '科学边界' },
-				{ text: '射手和农场主' },
-				{ text: '寂静的春天' },
-				{ text: '宇宙闪烁' },
-				{ text: '地球叛军' },
-				{ text: '古筝行动' },
-				{ text: '智子' },
-				{ text: '面壁者' },
-				{ text: '咒语' },
-				{ text: '黑暗森林' },
-				{ text: '危机纪元' },
-				{ text: '威慑纪元' },
-				{ text: '广播纪元' },
-				{ text: '掩体纪元' },
-				{ text: '银河纪元' },
-				{ text: '时间开始' },
-				{ text: '时间之外，我们的宇宙' },
+				'地球往事',
+				'黑暗森林',
+				'死神永生',
+				'科学边界',
+				'射手和农场主',
+				'寂静的春天',
+				'宇宙闪烁',
+				'地球叛军',
+				'古筝行动',
+				'智子',
+				'面壁者',
+				'咒语',
+				'黑暗森林',
+				'危机纪元',
+				'威慑纪元',
+				'广播纪元',
+				'掩体纪元',
+				'银河纪元',
+				'时间开始',
+				'时间之外，我们的宇宙',
 			],
 		},
 		{
 			index: '流',
 			title: '流浪地球',
 			child: [
-				{ text: '人类的勇气和坚毅必将被镌刻在星空之下。' },
-				{ text: '希望是像钻石一样珍贵的东西！' },
-				{ text: '希望，希望是我们唯一回家的方向。' },
-				{ text: '让人类永远保持理智，是一种奢求。' },
-				{ text: '道路千万条，安全第一条；行车不规范，亲人两行泪！' },
-				{ text: '那时候人们还没注意到太阳，人们更喜欢叫做钱的东西。' },
-				{ text: '为了我们的孩子，没有什么不能失去的了' },
-				{ text: 'moss没有叛逃!' },
-				{ text: '火石没了，我老婆孩子全他妈白死了！' },
+				'人类的勇气和坚毅必将被镌刻在星空之下。',
+				'希望是像钻石一样珍贵的东西！',
+				'希望，希望是我们唯一回家的方向。',
+				'让人类永远保持理智，是一种奢求。',
+				'道路千万条，安全第一条；行车不规范，亲人两行泪！',
+				'那时候人们还没注意到太阳，人们更喜欢叫做钱的东西。',
+				'为了我们的孩子，没有什么不能失去的了',
+				'moss没有叛逃!',
+				'火石没了，我老婆孩子全他妈白死了！',
 			],
 		},
 		{
 			index: '仙',
 			title: '仙剑奇侠传',
 			child: [
-				{ text: '既不回头，何必不忘。既然无缘，何必誓言。' },
-				{ text: '没有值得不值得，只有愿意不愿意。' },
-				{ text: '不曾得到，谈何放下。既已得到，又如何放下。' },
-				{ text: '轮回的是故人，不变的是初心！' },
-				{ text: '明夕何夕，君已陌路。' },
-				{ text: '我曾经也拥有过爱，只是，我放弃了。' },
-				{ text: '你以为每天看到的东西，就会抓得住吗？' },
-				{ text: '世有无情人，却有痴情妖。' },
-				{ text: '君子，小人，皆在一念思量。' },
-				{ text: '到家了，一定要叫醒我，我怕我醒不过来。' },
-				{ text: '如果得道就是牺牲所有人来成全自己，我宁愿执迷不悟。' },
-				{ text: '我们今日一别，让我们十年后再相见，不见不散！' },
-				{ text: '一杯愁绪，几段情缘，莫过，与君对酒当歌。' },
+				'既不回头，何必不忘。既然无缘，何必誓言。',
+				'没有值得不值得，只有愿意不愿意。',
+				'不曾得到，谈何放下。既已得到，又如何放下。',
+				'轮回的是故人，不变的是初心！',
+				'明夕何夕，君已陌路。',
+				'我曾经也拥有过爱，只是，我放弃了。',
+				'你以为每天看到的东西，就会抓得住吗？',
+				'世有无情人，却有痴情妖。',
+				'君子，小人，皆在一念思量。',
+				'到家了，一定要叫醒我，我怕我醒不过来。',
+				'如果得道就是牺牲所有人来成全自己，我宁愿执迷不悟。',
+				'我们今日一别，让我们十年后再相见，不见不散！',
+				'一杯愁绪，几段情缘，莫过，与君对酒当歌。',
 			],
 		},
 	];
@@ -105,10 +105,10 @@
 	/**
 	 * @type {'base' | 'full' | 'none'}
 	 */
-	let radius = 'base';
-	let dataFlag = 0;
-	let scrollAlign = true;
-	let injClassList = [];
+	let radius = $state('base');
+	let dataFlag = $state(0);
+	let scrollAlign = $state(true);
+	let injClassList = $state([]);
 	const changeRadiusFun = () => {
 		radius = radius === 'base' ? 'full' : radius === 'full' ? 'none' : 'base';
 	};
@@ -121,8 +121,8 @@
 	const changeClassFun = () => {
 		injClassList = !injClassList.length ? ['!text-3xl text-center', 'text-xs text-center !py-1'] : [];
 	};
-	let visible = false;
-	let toastObj = { index: 0, group: {}, childIndex: 0, child: {} };
+	let visible = $state(false);
+	let toastObj = $state({ index: 0, group: {}, childIndex: 0, child: {} });
 </script>
 
 {#if dataFlag === 0}
@@ -134,8 +134,8 @@
 		titleInjClass={injClassList[0]}
 		textInjClass={injClassList[1]}
 		top={navHeight}
-		on:clickchild={e => {
-			toastObj = e.detail;
+		onclickChild={(index, group, childIndex, child) => {
+			toastObj = { index, group, childIndex, child };
 			visible = true;
 		}}
 	/>
@@ -148,8 +148,8 @@
 		titleInjClass={injClassList[0]}
 		textInjClass={injClassList[1]}
 		top={navHeight}
-		on:clickchild={e => {
-			toastObj = e.detail;
+		onclickChild={(index, group, childIndex, child) => {
+			toastObj = { index, group, childIndex, child };
 			visible = true;
 		}}
 	/>
@@ -162,22 +162,22 @@
 		titleInjClass={injClassList[0]}
 		textInjClass={injClassList[1]}
 		top={navHeight}
-		on:clickchild={e => {
-			toastObj = e.detail;
+		onclickChild={(index, group, childIndex, child) => {
+			toastObj = { index, group, childIndex, child };
 			visible = true;
 		}}
 	/>
 {/if}
 <Toast
 	bind:visible
-	message={`点击了第 ${toastObj.index + 1} 组（${toastObj.group.title}）中的第 ${toastObj.childIndex + 1} 项（${toastObj.child.text}）`}
+	message={`点击了第 ${toastObj.index + 1} 组（${toastObj.group.title}）中的第 ${toastObj.childIndex + 1} 项（${toastObj.child}）`}
 />
 
 <div class="sticky flex justify-between bottom-0 px-2 z-10 bg-white/90 dark:bg-black/90">
-	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeListFun}>切换数据</Button>
-	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeScrollAlignFun}>
+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" onclick={changeListFun}>切换数据</Button>
+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" onclick={changeScrollAlignFun}>
 		{scrollAlign ? '关闭' : '开启'}滚动对齐
 	</Button>
-	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeRadiusFun}>切换圆角</Button>
-	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeClassFun}>切换样式</Button>
+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" onclick={changeRadiusFun}>切换圆角</Button>
+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" onclick={changeClassFun}>切换样式</Button>
 </div>

doc/components/indexBar/api.md

@@ -1,18 +1,27 @@
 ## IndexBar Props
 
-| 属性          | 类型    | 默认值 | 可选值               | 必传 | 说明                             |
-| ------------- | ------- | ------ | -------------------- | ---- | -------------------------------- |
-| data          | Array   | []     | -                    | Y    | 索引组组成的数组。               |
-| current       | Number  | 0      | -                    | N    | 当前激活的索引值。               |
-| top           | Number  | 0      | -                    | N    | 索引内容区域距离文档顶部的距离。 |
-| height        | Number  | 100    | -                    | Y    | 索引内容区域高度。               |
-| radius        | String  | 'base' | 'none'/'base'/'full' | N    | 圆角风格。                       |
-| scrollAlign   | Boolean | true   | true/false           | N    | 是否开启滚动自动对齐。           |
-| titleInjClass | String  | ''     | -                    | N    | 索引组标题注入 CSS。             |
-| textInjClass  | String  | ''     | -                    | N    | 索引项文本注入 CSS。             |
+| 名称          | 类型                     | 默认值   | 必传 | 说明                             |
+| ------------- | ------------------------ | -------- | ---- | -------------------------------- |
+| data          | `IndexBarItem[]`         | `[]`     | Y    | 索引数据组成的数组。             |
+| current       | `number`                 | `0`      | N    | 当前激活的索引值。               |
+| top           | `number`                 | `0`      | N    | 索引内容区域距离文档顶部的距离。 |
+| height        | `number`                 | `100`    | Y    | 索引内容区域高度。               |
+| radius        | `'none'\|'base'\|'full'` | `'base'` | N    | 圆角风格。                       |
+| scrollAlign   | `boolean`                | `true`   | N    | 是否开启滚动自动对齐。           |
+| titleInjClass | `string`                 | `''`     | N    | 索引组标题注入 CSS。             |
+| textInjClass  | `string`                 | `''`     | N    | 索引项文本注入 CSS。             |
 
 ## IndexBar Events
 
-| 名称       | 参数                                                                                                                                                                                    | 描述               |
-| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| clickchild | event：事件对象，其中 detail 内有四个参数：<br /> 1. index：点击项的父级组索引值；<br />2. group：点击项的父级组内容； <br />3. childIndex：点击项索引值；<br /> 4. child：点击项内容。 | 点击索引项时触发。 |
+| 名称         | 类型                                                                              | 参数                                                                                                                | 描述               |
+| ------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| onclickChild | `(index: number, group: IndexBarItem, childIndex: number, child: string) => void` | index - 点击项的父级组索引值<br />group - 点击项的父级组内容<br />childIndex - 点击项索引值<br />child - 点击项内容 | 点击索引项时触发。 |
+
+## IndexBarItem Props
+
+| 名称   | 类型       | 默认值 | 必传 | 说明             |
+| ------ | ---------- | ------ | ---- | ---------------- |
+| index  | `string`   | `''`   | Y    | 索引值。         |
+| title  | `string`   | `''`   | Y    | 标题。           |
+| child  | `string[]` | `[]`   | Y    | 子项组成的数组。 |
+| height | `number`   | `0`    | N    | 子项高度。       |

doc/components/indexBar/api_en.md

@@ -1,18 +1,27 @@
 ## IndexBar Props
 
-| Prop          | Type    | Default | Accepted Values      | Required | Description                                                                         |
-| ------------- | ------- | ------- | -------------------- | -------- | ----------------------------------------------------------------------------------- |
-| data          | Array   | []      | -                    | Y        | An array of index groups.                                                           |
-| current       | Number  | 0       | -                    | N        | The index value of the currently active index.                                      |
-| top           | Number  | 0       | -                    | N        | The distance between the top of the index content area and the top of the document. |
-| height        | Number  | 100     | -                    | Y        | The height of the index content area.                                               |
-| radius        | String  | 'base'  | 'none'/'base'/'full' | N        | The style of the border radius.                                                     |
-| scrollAlign   | Boolean | true    | true/false           | N        | Whether to enable automatic scroll alignment.                                       |
-| titleInjClass | String  | ''      | -                    | N        | Inject custom CSS into the title of the index group.                                |
-| textInjClass  | String  | ''      | -                    | N        | Inject custom CSS into the text of the index item.                                  |
+| Name          | Type                     | Default  | Required | Description                                       |
+| ------------- | ------------------------ | -------- | -------- | ------------------------------------------------- |
+| data          | `IndexBarItem[]`         | `[]`     | Y        | Array of index data.                              |
+| current       | `number`                 | `0`      | N        | Currently active index value.                     |
+| top           | `number`                 | `0`      | N        | Distance from index content area to document top. |
+| height        | `number`                 | `100`    | Y        | Height of index content area.                     |
+| radius        | `'none'\|'base'\|'full'` | `'base'` | N        | Border radius style.                              |
+| scrollAlign   | `boolean`                | `true`   | N        | Whether to enable scroll auto-alignment.          |
+| titleInjClass | `string`                 | `''`     | N        | Inject CSS for index group title.                 |
+| textInjClass  | `string`                 | `''`     | N        | Inject CSS for index item text.                   |
 
 ## IndexBar Events
 
-| Event Name | Parameters                                                                                                                                                                                                                                                                                                       | Description                              |
-| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
-| clickchild | event: Event object, which contains four parameters in the detail property: <br />1. index: The index value of the parent group of the clicked item. <br />2. group: The content of the parent group. <br />3. childIndex: The index value of the clicked item. <br />4. child: The content of the clicked item. | Triggered when an index item is clicked. |
+| Name         | Type                                                                              | Parameters                                                                                                                                                                | Description                            |
+| ------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| onclickChild | `(index: number, group: IndexBarItem, childIndex: number, child: string) => void` | index - Parent group index of clicked item<br />group - Parent group content of clicked item<br />childIndex - Index of clicked item<br />child - Content of clicked item | Triggered when clicking an index item. |
+
+## IndexBarItem Props
+
+| Name   | Type       | Default | Required | Description            |
+| ------ | ---------- | ------- | -------- | ---------------------- |
+| index  | `string`   | `''`    | Y        | Index value.           |
+| title  | `string`   | `''`    | Y        | Title.                 |
+| child  | `string[]` | `[]`    | Y        | Array of child items.  |
+| height | `number`   | `0`     | N        | Height of child items. |

doc/components/indexBar/guide.md

@@ -4,7 +4,7 @@
 
 ## data
 
-此 Props 是索引项组组成的数组，基本结构为`{ index: 'x', title: 'xx', child: [{ text: 'xx' }] }`，其中 index 用于显示右侧 Bar 内的文字（建议单个字符），title 为内容区域每一组索引的标题，child 为一组索引内的单项内容，其中至少要存在 text，作为单项索引的显示文本。具体使用请参考示例。
+此 Props 是索引项组组成的数组，基本结构为`{ index: 'x', title: 'xx', child: ['xx', 'xx'] }`，其中 index 用于显示右侧 Bar 内的文字（建议单个字符），title 为内容区域每一组索引的标题，child 为一组索引内的单项内容，具体使用请参考示例。
 
 ## height && top
 

doc/components/indexBar/guide_en.md

@@ -4,7 +4,7 @@ Generally used for quickly searching information on a page, where you can quickl
 
 ## data
 
-This Props is an array composed of indexing items, the basic structure is `{ index: 'x', title: 'xx', child: [{ text: 'xx' }] }`, where index is used to display the text in the right-side bar (it is recommended to use a single character), title is the title of each index group in the content area, and child is the content of a single indexing group, where there must be at least a text as the display text for the single index. For specific usage, please refer to the example.
+This Props is an array composed of indexing items, the basic structure is `{ index: 'x', title: 'xx', child: ['xx', 'xx'] }`, where index is used to display the text in the right-side bar (it is recommended to use a single character), title is the title of each index group in the content area, and child is the content of a single indexing group. For specific usage, please refer to the example.
 
 ## height && top
 

packages/stdf/components/indexBar/IndexBar.svelte

@@ -121,26 +121,16 @@
 			}
 		}
 	};
-
-	// 点击主体内容区域
-	// Click on the main body content area
-	const chickChildFun = (index, group, childIndex, child) => {
-		// 向外传递四个参数：1. index：点击项的父级组索引值；2. group：点击项的父级组内容；3. childIndex：点击项索引值；4. child：点击项内容。
-		// Pass out four parameters: 1. index: parent group index of clicked item; 2. group: parent group content of clicked item; 3. childIndex: index of clicked item; 4. child: content of clicked item
-		onclickChild && onclickChild(index, group, childIndex, child);
-	};
 </script>
 
-<div bind:this={bodyDom} class={`overflow-y-auto ${scrollAlign && 'snap-y'}`} onscroll={scrollBody} style="height:{height}px;">
+<div bind:this={bodyDom} class="overflow-y-auto {scrollAlign && 'snap-y'}" onscroll={scrollBody} style="height:{height}px;">
 	{#each data as group, index}
 		<div class="px-4 pt-8 snap-start" bind:clientHeight={group.height}>
-			<div class={`text-primary dark:text-dark text-sm ${titleInjClass}`}>{group.title}</div>
+			<div class="text-primary dark:text-dark text-sm {titleInjClass}">{group.title}</div>
 			{#each group.child as child, childIndex}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div class={`py-2 ${textInjClass}`} onclick={() => chickChildFun(index, group, childIndex, child)}>
-					{child.text}
-				</div>
+				<button class="py-2 w-full text-left {textInjClass}" onclick={() => onclickChild && onclickChild(index, group, childIndex, child)}>
+					{child}
+				</button>
 				<div class="h-px bg-black/5 dark:bg-white/5"></div>
 			{/each}
 		</div>
@@ -152,25 +142,25 @@
 	onpointerup={touchBoxEnd}
 	bind:clientHeight={barHeight}
 	bind:this={barDom}
-	class={`fixed right-5 bg-black/5 dark:bg-white/5 w-7 p-1 flex flex-col justify-around touch-none cursor-move select-none ${
-		radiusObj[radius] || radiusObj.base
-	}`}
+	class="fixed right-5 bg-black/5 dark:bg-white/5 w-7 p-1 flex flex-col justify-around touch-none cursor-move select-none {radiusObj[
+		radius
+	] || radiusObj.base}"
 	style="top:{top + (height - barHeight) / 2}px;min-height:{height / 4}px;"
 >
 	{#each data as group, i}
-		<div class={`flex-1 relative flex flex-col justify-center`}>
+		<div class="flex-1 relative flex flex-col justify-center">
 			<div
-				class={`w-5 h-5 leading-5 text-center text-xs transition-all ${
-					current === i ? 'bg-primary dark:bg-dark text-white dark:text-black' : 'text-gray-600 dark:text-gray-400'
-				} ${radiusObj[radius] || radiusObj.base}`}
+				class="w-5 h-5 leading-5 text-center text-xs transition-all {current === i
+					? 'bg-primary dark:bg-dark text-white dark:text-black'
+					: 'text-gray-600 dark:text-gray-400'} {radiusObj[radius] || radiusObj.base}"
 			>
 				{group.index}
 			</div>
 			{#if currentTouch === i}
 				<div
-					class={`absolute text-center -left-24 top-1/2 -translate-y-2/4 text-3xl border border-primary dark:border-dark w-14 h-14 leading-[3.5rem] text-primary dark:text-dark ${
-						radiusObj[radius] || radiusObj.base
-					}`}
+					class="absolute text-center -left-24 top-1/2 -translate-y-2/4 text-3xl border border-primary dark:border-dark w-14 h-14 leading-[3.5rem] text-primary dark:text-dark {radiusObj[
+						radius
+					] || radiusObj.base}"
 					transition:fly={{ x: 38, duration: 300 }}
 				>
 					{group.index}