[stdf]Update Skeleton compoent, demo and documents.

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

@@ -49,7 +49,6 @@
 	</div>
 
 	<div class="m-4 font-bold text-lg">example 6</div>
-	<!-- eslint-disable-next-line no-unused-vars -->
 	{#each [1, 1, 1] as item}
 		<div class="flex justify-between items-center">
 			<div class="flex">

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

@@ -49,7 +49,6 @@
 	</div>
 
 	<div class="m-4 font-bold text-lg">示例 6</div>
-	<!-- eslint-disable-next-line no-unused-vars -->
 	{#each [1, 1, 1] as item}
 		<div class="flex justify-between items-center">
 			<div class="flex">

doc/components/skeleton/api.md

@@ -1,11 +1,11 @@
 ## Skeleton Props
 
-| 属性      | 类型   | 默认值 | 可选值                                                 | 必传 | 说明                                                                          |
-| --------- | ------ | ------ | ------------------------------------------------------ | ---- | ----------------------------------------------------------------------------- |
-| type      | String | 'div'  | 'div'/'p'/'img'/'video'/'code'/'qrcode'/'barcode'      | N    | Skeleton 类型。                                                               |
-| width     | String | '6'    | '2'/'4'/'6'/'8'/'12'/'16'/'24'/'32'/'48'/'64'/'96'     | N    | 宽度。                                                                        |
-| height    | String | '6'    | '1'/'2'/'4'/'6'/'8'/'12'/'16'/'24'/'32'/'48'/'64'/'96' | N    | 高度。                                                                        |
-| radius    | String | 'base' | 'none'/'base'/'md'/'xl'/'2xl'/'3xl'/'full'             | N    | 圆角风格。                                                                    |
-| padding   | String | '1'    | '0.5'/'1'/'2'/'4'                                      | N    | 内边距。                                                                      |
-| lines     | Number | 3      | -                                                      | N    | 行数，仅在 type 为“p”时生效。                                                 |
-| iconRatio | Number | 0.6    | 0 - 1                                                  | N    | 内部图标比例，仅在 type 为“img”、“video”、“code”、“qrcode”、“barcode”时生效。 |
+| 名称      | 类型                                                                   | 默认值   | 必传 | 说明                                                                  |
+| --------- | ---------------------------------------------------------------------- | -------- | ---- | --------------------------------------------------------------------- |
+| type      | `'div'\|'p'\|'img'\|'video'\|'code'\|'qrcode'\|'barcode'`              | `'div'`  | N    | Skeleton 类型。                                                       |
+| width     | `'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'\|'full'` | `'6'`    | N    | 宽度。                                                                |
+| height    | `'1'\|'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'`    | `'6'`    | N    | 高度。                                                                |
+| radius    | `'none'\|'base'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`                     | `'base'` | N    | 圆角风格。                                                            |
+| padding   | `'0.5'\|'1'\|'2'\|'4'\|'8'`                                            | `'1'`    | N    | 内边距。                                                              |
+| lines     | `number`                                                               | `3`      | N    | 行数，仅在 type 为 p 时生效。                                         |
+| iconRatio | `number`                                                               | `0.6`    | N    | 内部图标比例，仅在 type 为 img、video、code、qrcode、barcode 时生效。 |

doc/components/skeleton/api_en.md

@@ -1,11 +1,11 @@
 ## Skeleton Props
 
-| Property  | Type   | Default | Options                                                | Required | Description                                                                                                  |
-| --------- | ------ | ------- | ------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------ |
-| type      | String | 'div'   | 'div'/'p'/'img'/'video'/'code'/'qrcode'/'barcode'      | No       | The type of skeleton.                                                                                        |
-| width     | String | '6'     | '2'/'4'/'6'/'8'/'12'/'16'/'24'/'32'/'48'/'64'/'96'     | No       | The width of skeleton.                                                                                       |
-| height    | String | '6'     | '1'/'2'/'4'/'6'/'8'/'12'/'16'/'24'/'32'/'48'/'64'/'96' | No       | The height of skeleton.                                                                                      |
-| radius    | String | 'base'  | 'none'/'base'/'md'/'xl'/'2xl'/'3xl'/'full'             | No       | The border radius style.                                                                                     |
-| padding   | String | '1'     | '0.5'/'1'/'2'/'4'                                      | No       | The padding of skeleton.                                                                                     |
-| lines     | Number | 3       | -                                                      | No       | The number of lines, only effective when the type is 'p'.                                                    |
-| iconRatio | Number | 0.6     | 0-1                                                    | No       | The ratio of the internal icon, only effective when the type is 'img', 'video', 'code', 'qrcode', 'barcode'. |
+| Name      | Type                                                                   | Default  | Required | Description                                                                               |
+| --------- | ---------------------------------------------------------------------- | -------- | -------- | ----------------------------------------------------------------------------------------- |
+| type      | `'div'\|'p'\|'img'\|'video'\|'code'\|'qrcode'\|'barcode'`              | `'div'`  | N        | Type of skeleton.                                                                         |
+| width     | `'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'\|'full'` | `'6'`    | N        | Width.                                                                                    |
+| height    | `'1'\|'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'`    | `'6'`    | N        | Height.                                                                                   |
+| radius    | `'none'\|'base'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`                     | `'base'` | N        | Border radius style.                                                                      |
+| padding   | `'0.5'\|'1'\|'2'\|'4'\|'8'`                                            | `'1'`    | N        | Padding.                                                                                  |
+| lines     | `number`                                                               | `3`      | N        | Number of lines, only takes effect when type is p.                                        |
+| iconRatio | `number`                                                               | `0.6`    | N        | Internal icon ratio, only takes effect when type is img, video, code, qrcode, or barcode. |

doc/components/skeleton/guide.md

@@ -10,8 +10,8 @@
 
 ## type
 
-Skeleton 组件目前提供了七种类型的骨架屏，分别是：'div'/'p'/'img'/'video'/'code'/'qrcode'/'barcode'，其中 code 是代码块，qrcode 是二维码，barcode 是条形码。
+Skeleton 组件目前提供了七种类型的骨架屏，分别是：`'div'|'p'|'img'|'video'|'code'|'qrcode'|'barcode'`，其中 code 是代码块，qrcode 是二维码，barcode 是条形码。
 
 ## 特殊
 
-当 type 为'p'时可以通过 lines 属性来控制段落行数，此时最后一行的长度会在一个合适的范围内随机变化。
+当 type 为 `'p'` 时可以通过 lines 属性来控制段落行数，此时最后一行的长度会在一个合适的范围内随机变化。

doc/components/skeleton/guide_en.md

@@ -10,8 +10,8 @@
 
 ## Type
 
-The Skeleton component currently provides seven types of skeletons, which are: 'div'/'p'/'img'/'video'/'code'/'qrcode'/'barcode', where code is a code block, qrcode is a QR code, and barcode is a barcode.
+The Skeleton component currently provides seven types of skeletons, which are: `'div'|'p'|'img'|'video'|'code'|'qrcode'|'barcode'`, where code is a code block, qrcode is a QR code, and barcode is a barcode.
 
 ## Special
 
-When the type is 'p', you can control the number of lines in the paragraph through the lines attribute, and the length of the last line will randomly change within a reasonable range.
+When the type is `'p'`, you can control the number of lines in the paragraph through the lines attribute, and the length of the last line will randomly change within a reasonable range.

packages/stdf/components/skeleton/Skeleton.svelte

@@ -45,43 +45,32 @@
 	const paddingObj = { '0.5': ' p-0.5', '1': ' p-1', '2': ' p-2', '4': ' p-4' };
 	const randomArr = ['w-1/2', 'w-1/3', 'w-2/3', 'w-1/4', 'w-3/4', 'w-2/5', 'w-3/5', 'w-4/5', 'w-5/6'];
 	const typeIconFun = type => {
-		switch (type) {
-			case 'img':
-				return 'ri-image-2-fill';
-			case 'video':
-				return 'ri-movie-2-fill';
-			case 'code':
-				return 'ri-code-box-fill';
-			case 'qrcode':
-				return 'ri-qr-code-fill';
-			case 'barcode':
-				return 'ri-barcode-fill';
-			default:
-				return 'ri-qr-code-fill';
-		}
+		const typeMap = {
+			img: 'ri-image-2-fill',
+			video: 'ri-movie-2-fill',
+			code: 'ri-code-box-fill',
+			qrcode: 'ri-qr-code-fill',
+			barcode: 'ri-barcode-fill',
+		};
+		return typeMap[type] || typeMap.qrcode;
 	};
 </script>
 
-<div class={`animate-pulse ${type === 'p' || width === 'full' ? 'block' : 'inline-block'}${paddingObj[space] || paddingObj['1']}`}>
+<div class="animate-pulse {type === 'p' || width === 'full' ? 'block' : 'inline-block'}{paddingObj[space] || paddingObj['1']}">
 	{#if type === 'p'}
 		<div class="flex flex-col space-y-2">
-			<!-- eslint-disable-next-line no-unused-vars -->
 			{#each new Array(lines - 1) as item}
-				<div
-					class={`bg-black/20 dark:bg-white/20 w-full${heightObj[height] || heightObj['6']}${radiusObj[radius] || radiusObj.base}`}
-				></div>
+				<div class="bg-black/20 dark:bg-white/20 w-full{heightObj[height] || heightObj['6']}{radiusObj[radius] || radiusObj.base}"></div>
 			{/each}
 			<div
-				class={`bg-black/20 dark:bg-white/20 ${randomArr[Math.floor(Math.random() * randomArr.length)]}${
-					heightObj[height] || heightObj['6']
-				}${radiusObj[radius] || radiusObj.base}`}
+				class="bg-black/20 dark:bg-white/20 {randomArr[Math.floor(Math.random() * randomArr.length)]}{heightObj[height] ||
+					heightObj['6']}{radiusObj[radius] || radiusObj.base}"
 			></div>
 		</div>
 	{:else}
 		<div
-			class={`bg-black/20 dark:bg-white/20${widthObj[width] || widthObj.full}${heightObj[height] || heightObj['6']}${
-				radiusObj[radius] || radiusObj.base
-			} flex flex-col justify-center`}
+			class="bg-black/20 dark:bg-white/20{widthObj[width] || widthObj.full}{heightObj[height] || heightObj['6']}{radiusObj[radius] ||
+				radiusObj.base} flex flex-col justify-center"
 		>
 			{#if type === 'img' || type === 'video' || type === 'code' || type === 'qrcode' || type === 'barcode'}
 				<div class="m-auto" style="width:{iconRatio * 100 + '%'}">