[stdf]Update Rate compoent, demo and documents.

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

@@ -2,57 +2,54 @@
 <script>
 	import { Rate, Icon } from '../../../../../packages/stdf/components';
 
-	let value = 2.5;
-	const getValueFun = e => {
-		value = e.detail;
-	};
+	let value = $state(2.5);
 </script>
 
-<div class="mx-4 mt-8 font-bold text-lg">Basic usage</div>
+<div class="mx-4 mt-8 font-bold text-lg">Basic Usage</div>
 <div class="p-4">
 	<Rate />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Set initial score</div>
+<div class="mx-4 mt-8 font-bold text-lg">Set Initial Score</div>
 <div class="p-4">
 	<Rate value={1} />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Zero points allowed</div>
+<div class="mx-4 mt-8 font-bold text-lg">Allow Zero Score</div>
 <div class="p-4">
 	<Rate zero />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Custom score</div>
+<div class="mx-4 mt-8 font-bold text-lg">Custom Total Score</div>
 <div class="p-4">
 	<Rate total={12} />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Set unselected transparency</div>
+<div class="mx-4 mt-8 font-bold text-lg">Set Unselected Opacity</div>
 <div class="p-4">
 	<Rate opacity="0.8" />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Allow semi-selection</div>
+<div class="mx-4 mt-8 font-bold text-lg">Allow Half Selection</div>
 <div class="p-4">
 	<Rate half />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Vertical semi-selection</div>
+<div class="mx-4 mt-8 font-bold text-lg">Vertical Half Selection</div>
 <div class="p-4">
 	<Rate half vertical />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Half option allows zero points</div>
+<div class="mx-4 mt-8 font-bold text-lg">Half Selection with Zero Score</div>
 <div class="p-4">
 	<Rate half zero />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Increase spacing</div>
+<div class="mx-4 mt-8 font-bold text-lg">Increase Spacing</div>
 <div class="p-4">
 	<Rate space="8" />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">disable</div>
+<div class="mx-4 mt-8 font-bold text-lg">Disabled</div>
 <div class="p-4">
 	<Rate disabled />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Read only</div>
+<div class="mx-4 mt-8 font-bold text-lg">Read Only</div>
 <div class="p-4">
 	<Rate readonly />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Different size</div>
+<div class="mx-4 mt-8 font-bold text-lg">Different Sizes</div>
 <div class="p-4">
 	<Rate width={20} height={20} />
 </div>
@@ -62,49 +59,49 @@
 <div class="p-4">
 	<Rate width={36} height={36} />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">customize</div>
+<div class="mx-4 mt-8 font-bold text-lg">Custom Icons</div>
 <div class="p-4">
-	<Rate custom opacity="0.6">
+	<Rate opacity="0.6">
 		<Icon name="ri-star-fill" injClass="text-[#f5b53f]" />
 	</Rate>
 </div>
 <div class="p-4">
-	<Rate custom>
+	<Rate>
 		<Icon name="ri-heart-3-fill" injClass="text-[red]" />
 	</Rate>
 </div>
 <div class="p-4">
-	<Rate half custom>
+	<Rate half>
 		<Icon name="ri-heart-3-fill" injClass="text-[red]" />
 	</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}>
 		<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>
 		<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}>
 		<div class="text-3xl text-primary dark:text-dark">M</div>
 	</Rate>
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Listening event</div>
+<div class="mx-4 mt-8 font-bold text-lg">Event Listening</div>
 <div class="p-4">
-	<Rate half {value} on:click={getValueFun} />
-	<p class="mt-2">Score:{value} star</p>
+	<Rate half {value} onclick={v => (value = v)} />
+	<p class="mt-2">Rating: {value} stars</p>
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">All activation ICONS have click animations</div>
+<div class="mx-4 mt-8 font-bold text-lg">Click Animation for All Active Icons</div>
 <div class="p-4">
 	<Rate animation="active" />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">Close click animation</div>
+<div class="mx-4 mt-8 font-bold text-lg">Disable Click Animation</div>
 <div class="p-4">
-	<Rate animation="none" />
+	<Rate animation={null} />
 </div>

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

@@ -2,10 +2,7 @@
 <script>
 	import { Rate, Icon } from '../../../../../packages/stdf/components';
 
-	let value = 2.5;
-	const getValueFun = e => {
-		value = e.detail;
-	};
+	let value = $state(2.5);
 </script>
 
 <div class="mx-4 mt-8 font-bold text-lg">基础用法</div>
@@ -64,38 +61,38 @@
 </div>
 <div class="mx-4 mt-8 font-bold text-lg">自定义</div>
 <div class="p-4">
-	<Rate custom opacity="0.6">
+	<Rate opacity="0.6">
 		<Icon name="ri-star-fill" injClass="text-[#f5b53f]" />
 	</Rate>
 </div>
 <div class="p-4">
-	<Rate custom>
+	<Rate>
 		<Icon name="ri-heart-3-fill" injClass="text-[red]" />
 	</Rate>
 </div>
 <div class="p-4">
-	<Rate half custom>
+	<Rate half>
 		<Icon name="ri-heart-3-fill" injClass="text-[red]" />
 	</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}>
 		<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>
 		<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}>
 		<div class="text-3xl text-primary dark:text-dark">富</div>
 	</Rate>
 </div>
 <div class="mx-4 mt-8 font-bold text-lg">监听事件</div>
 <div class="p-4">
-	<Rate half {value} on:click={getValueFun} />
+	<Rate half {value} onclick={v => (value = v)} />
 	<p class="mt-2">评分：{value} 星</p>
 </div>
 
@@ -106,5 +103,5 @@
 
 <div class="mx-4 mt-8 font-bold text-lg">关闭点击动画</div>
 <div class="p-4">
-	<Rate animation="none" />
+	<Rate animation={null} />
 </div>

doc/components/rate/api.md

@@ -1,29 +1,29 @@
 ## Rate Props
 
-| 属性      | 类型    | 默认值    | 可选值                    | 必传 | 说明                  |
-| --------- | ------- | --------- | ------------------------- | ---- | --------------------- |
-| value     | Number  | 4         | -                         | N    | 选定值。              |
-| total     | Number  | 5         | -                         | N    | 总分 。               |
-| width     | Number  | 24        | -                         | N    | 单个内容宽度（px） 。 |
-| height    | Number  | 24        | -                         | N    | 单个内容高度（px）。  |
-| opacity   | Number  | 0.2       | 0-1                       | N    | 未选中内容透明度 。   |
-| space     | String  | '3'       | '0'/'1'/'2'/'3'/'4'/'8'   | N    | 内容间距。            |
-| half      | Boolean | false     | true/false                | N    | 是否允许半选。        |
-| zero      | Boolean | false     | true/false                | N    | 是否允许 0 分 。      |
-| vertical  | Boolean | false     | true/false                | N    | 是否垂直半选 。       |
-| disabled  | Boolean | false     | true/false                | N    | 是否禁用。            |
-| readonly  | Boolean | false     | true/false                | N    | 是否只读。            |
-| custom    | Boolean | false     | true/false                | N    | 是否自定义内容。      |
-| animation | String  | 'current' | 'current'/'active'/'none' | N    | 点击动画类型。        |
+| 名称      | 类型                                                                         | 默认值      | 必传 | 说明                  |
+| --------- | ---------------------------------------------------------------------------- | ----------- | ---- | --------------------- |
+| value     | `number`                                                                     | `4`         | N    | 选定值。              |
+| total     | `number`                                                                     | `5`         | N    | 总分 。               |
+| width     | `number`                                                                     | `24`        | N    | 单个内容宽度（px） 。 |
+| height    | `number`                                                                     | `24`        | N    | 单个内容高度（px）。  |
+| opacity   | `'0.05'\|'0.1'\|'0.2'\|'0.3'\|'0.4'\|'0.5'\|'0.6'\|'0.7'\|'0.8'\|'0.9'\|'1'` | `0.2`       | N    | 未选中内容透明度 。   |
+| space     | `'0'\|'1'\|'2'\|'3'\|'4'\|'8'`                                               | `'3'`       | N    | 内容间距。            |
+| half      | `boolean`                                                                    | `false`     | N    | 是否允许半选。        |
+| zero      | `boolean`                                                                    | `false`     | N    | 是否允许 0 分 。      |
+| vertical  | `boolean`                                                                    | `false`     | N    | 是否垂直半选 。       |
+| disabled  | `boolean`                                                                    | `false`     | N    | 是否禁用。            |
+| readonly  | `boolean`                                                                    | `false`     | N    | 是否只读。            |
+| custom    | `boolean`                                                                    | `false`     | N    | 是否自定义内容。      |
+| animation | `'current'\|'active'\|null`                                                  | `'current'` | N    | 点击动画类型。        |
 
 ## Rate Events
 
-| 名称  | 参数                                          | 描述       |
-| ----- | --------------------------------------------- | ---------- |
-| click | event：事件对象，其中 detail 表示当前 value。 | 点击触发。 |
+| 名称    | 类型                      | 参数               | 描述       |
+| ------- | ------------------------- | ------------------ | ---------- |
+| onclick | `(value: number) => void` | value - 当前 value | 点击触发。 |
 
-## Rate Slots
+## Rate Snippets
 
-| 名称 | 说明                     |
-| ---- | ------------------------ |
-| -    | 将作为 Rate 的单个内容。 |
+| 名称     | 类型                                                                | 参数 | 说明                     |
+| -------- | ------------------------------------------------------------------- | ---- | ------------------------ |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 将作为 Rate 的单个内容。 |

doc/components/rate/api_en.md

@@ -1,29 +1,29 @@
 ## Rate Props
 
-| Property  | Type    | Default   | Options                   | Required | Description                                 |
-| --------- | ------- | --------- | ------------------------- | -------- | ------------------------------------------- |
-| value     | Number  | 4         | -                         | No       | The selected value.                         |
-| total     | Number  | 5         | -                         | No       | The total score.                            |
-| width     | Number  | 24        | -                         | No       | The width of a single content (in pixels).  |
-| height    | Number  | 24        | -                         | No       | The height of a single content (in pixels). |
-| opacity   | Number  | 0.2       | 0-1                       | No       | The opacity of unselected content.          |
-| space     | String  | '3'       | '0'/'1'/'2'/'3'/'4'/'8'   | No       | The spacing between contents.               |
-| half      | Boolean | false     | true/false                | No       | Whether to allow half selection.            |
-| zero      | Boolean | false     | true/false                | No       | Whether to allow 0 score.                   |
-| vertical  | Boolean | false     | true/false                | No       | Whether to allow vertical half selection.   |
-| disabled  | Boolean | false     | true/false                | No       | Whether to disable.                         |
-| readonly  | Boolean | false     | true/false                | No       | Whether to be read-only.                    |
-| custom    | Boolean | false     | true/false                | No       | Whether to use customized content.          |
-| animation | String  | 'current' | 'current'/'active'/'none' | No       | The type of click animation.                |
+| Name      | Type                                                                         | Default     | Required | Description                                |
+| --------- | ---------------------------------------------------------------------------- | ----------- | -------- | ------------------------------------------ |
+| value     | `number`                                                                     | `4`         | N        | Selected value.                            |
+| total     | `number`                                                                     | `5`         | N        | Total score.                               |
+| width     | `number`                                                                     | `24`        | N        | Width of single content (px).              |
+| height    | `number`                                                                     | `24`        | N        | Height of single content (px).             |
+| opacity   | `'0.05'\|'0.1'\|'0.2'\|'0.3'\|'0.4'\|'0.5'\|'0.6'\|'0.7'\|'0.8'\|'0.9'\|'1'` | `0.2`       | N        | Opacity of unselected content.             |
+| space     | `'0'\|'1'\|'2'\|'3'\|'4'\|'8'`                                               | `'3'`       | N        | Content spacing.                           |
+| half      | `boolean`                                                                    | `false`     | N        | Whether to allow half selection.           |
+| zero      | `boolean`                                                                    | `false`     | N        | Whether to allow 0 score.                  |
+| vertical  | `boolean`                                                                    | `false`     | N        | Whether to enable vertical half selection. |
+| disabled  | `boolean`                                                                    | `false`     | N        | Whether to disable.                        |
+| readonly  | `boolean`                                                                    | `false`     | N        | Whether it's read-only.                    |
+| custom    | `boolean`                                                                    | `false`     | N        | Whether to use custom content.             |
+| animation | `'current'\|'active'\|null`                                                  | `'current'` | N        | Click animation type.                      |
 
 ## Rate Events
 
-| Event | Parameters                                                     | Description             |
-| ----- | -------------------------------------------------------------- | ----------------------- |
-| click | event: Event object, where detail indicates the current value. | Triggered when clicked. |
+| Name    | Type                      | Parameters            | Description         |
+| ------- | ------------------------- | --------------------- | ------------------- |
+| onclick | `(value: number) => void` | value - Current value | Triggered on click. |
 
-## Rate Slots
+## Rate Snippets
 
-| Name | Description                                   |
-| ---- | --------------------------------------------- |
-| -    | A single content, which will be used by Rate. |
+| Name     | Type                                                                | Parameters | Description                              |
+| -------- | ------------------------------------------------------------------- | ---------- | ---------------------------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Will be used as single content for Rate. |

doc/components/rate/guide.md

@@ -15,8 +15,8 @@
 
 ## 点击动画
 
-通过 animation 来控制点击动画，current 表示仅点击项有动画，active 表示点击项及之前的项都有动画，none 表示无动画。
+通过 animation 来控制点击动画，`'current'` 表示仅点击项有动画，`'active'` 表示点击项及之前的项都有动画，`null` 表示无动画。
 
 ## 特别注意
 
-当需要自定义内容时，可以通过传入 Slot 实现，此时请务必**传入自定义内容的宽高**。
+当需要自定义内容时，可以通过传入 Snippet 实现，此时请务必**传入自定义内容的宽高**。

doc/components/rate/guide_en.md

@@ -13,6 +13,10 @@ Considering the interaction mode on mobile devices, when allowing half selection
 
 Note: When considering the click area, please make sure that **the values of width and height are not less than 20**.
 
+## Click Animation
+
+Control click animation through animation, `'current'` means only the clicked item has animation, `'active'` means the clicked item and all previous items have animation, and `null` means no animation.
+
 ## Special attention
 
 When custom content is needed, it can be achieved by passing in Slots. At this time, **be sure to pass in the width and height of the custom content**.

packages/stdf/components/rate/Rate.svelte

@@ -2,8 +2,8 @@
 	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	/** @typedef {import('../../index.d').Rate} Rate */
-	/** @type {Rate} */
+	/** @typedef {import('../../index.d').Rate} RateProps */
+	/** @type {RateProps} */
 	let {
 		value = $bindable(4),
 		total = 5,
@@ -151,34 +151,27 @@
 	};
 </script>
 
-<div class={`inset-0 inline-flex flex-wrap${spaceObj[space] || spaceObj['4']}${disabled ? ' opacity-50' : ''}`}>
-	<!-- eslint-disable-next-line no-unused-vars -->
+<div class="inset-0 inline-flex flex-wrap{spaceObj[space] || spaceObj['4']}{disabled ? ' opacity-50' : ''}">
 	{#each new Array(Math.floor(total)) as item, index}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class={`flex flex-wrap transition-all${disabled ? ' cursor-not-allowed' : ' cursor-pointer'}${
-				animation === 'active'
-					? clickIndex >= index && isScale
+		<button
+			class="flex flex-wrap transition-all{disabled ? ' cursor-not-allowed' : ' cursor-pointer'}{animation === 'active'
+				? clickIndex >= index && isScale
+					? ' scale-75'
+					: ''
+				: animation === 'current'
+					? clickIndex === index && isScale
 						? ' scale-75'
 						: ''
-					: animation === 'current'
-						? clickIndex === index && isScale
-							? ' scale-75'
-							: ''
-						: ''
-			}`}
+					: ''}"
 			style="height:{height}px;width:{width}px;"
 			onclick={() => clickFun(index)}
 		>
 			{#each [0, 1, 2, 3] as i}
 				<div
-					class={`overflow-hidden${
-						isActiveFun(index, value, half, vertical, i) ? '' : ` grayscale${opacityObj[opacity] || ' opacity-30'}`
-					}`}
+					class="overflow-hidden{isActiveFun(index, value, half, vertical, i) ? '' : ` grayscale${opacityObj[opacity] || ' opacity-30'}`}"
 					style="height:{height / 2}px;width:{width / 2}px;"
 				>
-					<div style={`transform:translateX(${i === 0 || i === 2 ? 0 : -(width / 2)}px) translateY(${i < 2 ? 0 : -(height / 2)}px)`}>
+					<div style="transform:translateX({i === 0 || i === 2 ? 0 : -(width / 2)}px) translateY({i < 2 ? 0 : -(height / 2)}px)">
 						{#if children}
 							{@render children?.()}
 						{:else}
@@ -187,6 +180,6 @@
 					</div>
 				</div>
 			{/each}
-		</div>
+		</button>
 	{/each}
 </div>