[stdf]Update Stepper compoent, demo and documents.

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

@@ -2,12 +2,12 @@
 <script>
 	import { Stepper, Toast } from '../../../../../packages/stdf/components';
 
-	let asyncValue1 = 1;
-	let loading1 = false;
-	let asyncValue2 = 1;
-	let loading2 = false;
-	let asyncValue3 = 1;
-	let loading3 = false;
+	let asyncValue1 = $state(1);
+	let loading1 = $state(false);
+	let asyncValue2 = $state(1);
+	let loading2 = $state(false);
+	let asyncValue3 = $state(1);
+	let loading3 = $state(false);
 	const handleChange1 = type => {
 		loading1 = true;
 		setTimeout(() => {
@@ -31,34 +31,34 @@
 	};
 </script>
 
-<div class="mx-4 mt-8 font-bold text-lg">Basic Usage</div>
+<div class="mx-4 mt-8 text-lg font-bold">Basic Usage</div>
 <div class="px-4 py-4">
 	<Stepper />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">Set Maximum/Minimum/Initial Value</div>
+<div class="mx-4 mt-8 text-lg font-bold">Set Maximum/Minimum/Initial Value</div>
 <div class="px-4 py-4">
 	<Stepper min={2} max={10} value={5} />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">Set Step</div>
+<div class="mx-4 mt-8 text-lg font-bold">Set Step</div>
 <div class="px-4 py-4">
 	<Stepper step={5} />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">Highlight Number Area</div>
+<div class="mx-4 mt-8 text-lg font-bold">Highlight Number Area</div>
 <div class="px-4 py-4">
 	<Stepper numberHighlight />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">Highlight Number Area</div>
-<div class="px-4 py-4 flex gap-2">
+<div class="mx-4 mt-8 text-lg font-bold">Highlight Number Area</div>
+<div class="flex gap-2 px-4 py-4">
 	<Stepper theme={false} />
 	<Stepper theme={false} numberHighlight />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">Different Radius</div>
-<div class="px-4 py-4 flex flex-wrap gap-2">
+<div class="mx-4 mt-8 text-lg font-bold">Different Radius</div>
+<div class="flex flex-wrap gap-2 px-4 py-4">
 	<div><Stepper radius="none" /></div>
 	<div><Stepper radius="base" /></div>
 	<div><Stepper radius="xl" /></div>
@@ -67,8 +67,8 @@
 	<div><Stepper radius="full" theme={false} /></div>
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">Vertical</div>
-<div class="px-2 py-4 flex justify-around">
+<div class="mx-4 mt-8 text-lg font-bold">Vertical</div>
+<div class="flex justify-around px-2 py-4">
 	<Stepper vertical />
 	<Stepper vertical numberHighlight />
 	<Stepper vertical theme={false} />
@@ -76,7 +76,7 @@
 	<Stepper radius="xl" vertical />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">Format Display Numbers</div>
+<div class="mx-4 mt-8 text-lg font-bold">Format Display Numbers</div>
 <div class="px-4 py-4">
 	<div class="mb-2 text-sm">Keep one decimal place</div>
 	<Stepper decimal={1} step={0.1} max={1} min={0.1} value={0.5} />
@@ -86,37 +86,32 @@
 	<Stepper decimal={4} step={0.0001} max={1} min={0.0001} value={0.5} />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">Asynchronous Display Numbers</div>
+<div class="mx-4 mt-8 text-lg font-bold">Asynchronous Display Numbers</div>
 <div class="px-4 py-4">
 	<div class="mb-2 text-sm">Toast shows asynchronous status</div>
-	<Stepper
-		async={loading1}
-		value={asyncValue1}
-		on:increase={() => handleChange1('increase')}
-		on:decrease={() => handleChange1('decrease')}
-	/>
+	<Stepper async={loading1} value={asyncValue1} onincrease={() => handleChange1('increase')} ondecrease={() => handleChange1('decrease')} />
 </div>
 <Toast bind:visible={loading1} type="loading" message="Saving..." />
 <div class="px-4 mb-2 text-sm">Internal display asynchronous status</div>
-<div class="px-4 py-4 flex gap-2">
+<div class="flex gap-2 px-4 py-4">
 	<Stepper
 		async={loading2}
 		value={asyncValue2}
 		asyncLoading
-		on:increase={() => handleChange2('increase')}
-		on:decrease={() => handleChange2('decrease')}
+		onincrease={() => handleChange2('increase')}
+		ondecrease={() => handleChange2('decrease')}
 	/>
 	<Stepper
 		async={loading3}
 		value={asyncValue3}
 		asyncLoading
 		loading={{ type: '1_51' }}
-		on:increase={() => handleChange3('increase')}
-		on:decrease={() => handleChange3('decrease')}
+		onincrease={() => handleChange3('increase')}
+		ondecrease={() => handleChange3('decrease')}
 	/>
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">No external padding</div>
+<div class="mx-4 mt-8 text-lg font-bold">No external padding</div>
 <div class="px-4 py-2">
 	<Stepper padding={false} />
 </div>
@@ -127,7 +122,7 @@
 	<Stepper padding={false} theme={false} />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">Inject Class in Different Positions</div>
+<div class="mx-4 mt-8 text-lg font-bold">Inject Class in Different Positions</div>
 <div class="px-4 py-2">
 	<Stepper theme={false} injClassOut="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
 </div>

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

@@ -2,12 +2,12 @@
 <script>
 	import { Stepper, Toast } from '../../../../../packages/stdf/components';
 
-	let asyncValue1 = 1;
-	let loading1 = false;
-	let asyncValue2 = 1;
-	let loading2 = false;
-	let asyncValue3 = 1;
-	let loading3 = false;
+	let asyncValue1 = $state(1);
+	let loading1 = $state(false);
+	let asyncValue2 = $state(1);
+	let loading2 = $state(false);
+	let asyncValue3 = $state(1);
+	let loading3 = $state(false);
 	const handleChange1 = type => {
 		loading1 = true;
 		setTimeout(() => {
@@ -31,34 +31,34 @@
 	};
 </script>
 
-<div class="mx-4 mt-8 font-bold text-lg">基础用法</div>
+<div class="mx-4 mt-8 text-lg font-bold">基础用法</div>
 <div class="px-4 py-4">
 	<Stepper />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">设置最大值/最小值/初始值</div>
+<div class="mx-4 mt-8 text-lg font-bold">设置最大值/最小值/初始值</div>
 <div class="px-4 py-4">
 	<Stepper min={2} max={10} value={5} />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">设置步长</div>
+<div class="mx-4 mt-8 text-lg font-bold">设置步长</div>
 <div class="px-4 py-4">
 	<Stepper step={5} />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">强调数字区域</div>
+<div class="mx-4 mt-8 text-lg font-bold">强调数字区域</div>
 <div class="px-4 py-4">
 	<Stepper numberHighlight />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">强调区域不用主题色</div>
-<div class="px-4 py-4 flex gap-2">
+<div class="mx-4 mt-8 text-lg font-bold">强调区域不用主题色</div>
+<div class="flex gap-2 px-4 py-4">
 	<Stepper theme={false} />
 	<Stepper theme={false} numberHighlight />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">不同圆角</div>
-<div class="px-4 py-4 flex flex-wrap gap-2">
+<div class="mx-4 mt-8 text-lg font-bold">不同圆角</div>
+<div class="flex flex-wrap gap-2 px-4 py-4">
 	<div><Stepper radius="none" /></div>
 	<div><Stepper radius="base" /></div>
 	<div><Stepper radius="xl" /></div>
@@ -67,8 +67,8 @@
 	<div><Stepper radius="full" theme={false} /></div>
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">竖向</div>
-<div class="px-2 py-4 flex justify-around">
+<div class="mx-4 mt-8 text-lg font-bold">竖向</div>
+<div class="flex justify-around px-2 py-4">
 	<Stepper vertical />
 	<Stepper vertical numberHighlight />
 	<Stepper vertical theme={false} />
@@ -76,7 +76,7 @@
 	<Stepper radius="xl" vertical />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">格式化显示数字</div>
+<div class="mx-4 mt-8 text-lg font-bold">格式化显示数字</div>
 <div class="px-4 py-4">
 	<div class="mb-2 text-sm">保留一位小数</div>
 	<Stepper decimal={1} step={0.1} max={1} min={0.1} value={0.5} />
@@ -86,37 +86,32 @@
 	<Stepper decimal={4} step={0.0001} max={1} min={0.0001} value={0.5} />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">异步显示数字</div>
+<div class="mx-4 mt-8 text-lg font-bold">异步显示数字</div>
 <div class="px-4 py-4">
 	<div class="mb-2 text-sm">Toast 显示异步状态</div>
-	<Stepper
-		async={loading1}
-		value={asyncValue1}
-		on:increase={() => handleChange1('increase')}
-		on:decrease={() => handleChange1('decrease')}
-	/>
+	<Stepper async={loading1} value={asyncValue1} onincrease={() => handleChange1('increase')} ondecrease={() => handleChange1('decrease')} />
 </div>
 <Toast bind:visible={loading1} type="loading" message="保存中..." />
 <div class="px-4 mb-2 text-sm">内部显示异步状态</div>
-<div class="px-4 py-4 flex gap-2">
+<div class="flex gap-2 px-4 py-4">
 	<Stepper
 		async={loading2}
 		value={asyncValue2}
 		asyncLoading
-		on:increase={() => handleChange2('increase')}
-		on:decrease={() => handleChange2('decrease')}
+		onincrease={() => handleChange2('increase')}
+		ondecrease={() => handleChange2('decrease')}
 	/>
 	<Stepper
 		async={loading3}
 		value={asyncValue3}
 		asyncLoading
 		loading={{ type: '1_51' }}
-		on:increase={() => handleChange3('increase')}
-		on:decrease={() => handleChange3('decrease')}
+		onincrease={() => handleChange3('increase')}
+		ondecrease={() => handleChange3('decrease')}
 	/>
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">外部无 padding</div>
+<div class="mx-4 mt-8 text-lg font-bold">外部无 padding</div>
 <div class="px-4 py-2">
 	<Stepper padding={false} />
 </div>
@@ -127,7 +122,7 @@
 	<Stepper padding={false} theme={false} />
 </div>
 
-<div class="mx-4 mt-8 font-bold text-lg">不同位置注入 Class</div>
+<div class="mx-4 mt-8 text-lg font-bold">不同位置注入 Class</div>
 <div class="px-4 py-2">
 	<Stepper theme={false} injClassOut="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
 </div>

doc/components/stepper/api.md

@@ -1,28 +1,28 @@
 ## Stepper Props
 
-| 属性            | 类型    | 默认值 | 可选值                    | 必传 | 说明                               |
-| --------------- | ------- | ------ | ------------------------- | ---- | ---------------------------------- |
-| value           | Number  | 10     | -                         | N    | 当前值。                           |
-| min             | Number  | 0      | -                         | N    | 最小值。                           |
-| max             | Number  | 100    | -                         | N    | 最大值。                           |
-| step            | Number  | 1      | -                         | N    | 步长。                             |
-| vertical        | Boolean | false  | -                         | N    | 是否纵向。                         |
-| numberHighlight | Boolean | false  | -                         | N    | 是否强调数字区域。                 |
-| theme           | Boolean | true   | -                         | N    | 强调区域是否是主题色。             |
-| radius          | String  | 'base' | 'none'/'base'/'xl'/'full' | N    | 圆角风格。                         |
-| decimal         | Number  | 0      | -                         | N    | 对内部显示数字保留小数位数。       |
-| async           | Boolean | false  | -                         | N    | 是否异步状态。                     |
-| asyncLoading    | Boolean | false  | -                         | N    | 异步状态时，是否显示内部 Loading。 |
-| loading         | Object  | {}     | 参考 Loading Props        | N    | 异步状态时，Loading 参数。         |
-| padding         | Boolean | true   | -                         | N    | 外部有无 padding。                 |
-| injClassOut     | String  | ''     | Class                     | N    | 外部注入的类。                     |
-| injClassBtn     | String  | ''     | Class                     | N    | 按钮区域注入的类。                 |
-| injClassNum     | String  | ''     | Class                     | N    | 数字区域注入的类。                 |
+| 名称            | 类型                                                            | 默认值   | 必传 | 说明                               |
+| --------------- | --------------------------------------------------------------- | -------- | ---- | ---------------------------------- |
+| value           | `number`                                                        | `10`     | N    | 当前值。                           |
+| min             | `number`                                                        | `0`      | N    | 最小值。                           |
+| max             | `number`                                                        | `100`    | N    | 最大值。                           |
+| step            | `number`                                                        | `1`      | N    | 步长。                             |
+| vertical        | `boolean`                                                       | `false`  | N    | 是否纵向。                         |
+| numberHighlight | `boolean`                                                       | `false`  | N    | 是否强调数字区域。                 |
+| theme           | `boolean`                                                       | `true`   | N    | 强调区域是否是主题色。             |
+| radius          | `'none'\|'base'\|'xl'\|'full'`                                  | `'base'` | N    | 圆角风格。                         |
+| decimal         | `number`                                                        | `0`      | N    | 对内部显示数字保留小数位数。       |
+| async           | `boolean`                                                       | `false`  | N    | 是否异步状态。                     |
+| asyncLoading    | `boolean`                                                       | `false`  | N    | 异步状态时，是否显示内部 Loading。 |
+| loading         | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`     | N    | 异步状态时，Loading 参数。         |
+| padding         | `boolean`                                                       | `true`   | N    | 外部有无 padding。                 |
+| injClassOut     | `string`                                                        | `''`     | N    | 外部注入的类。                     |
+| injClassBtn     | `string`                                                        | `''`     | N    | 按钮区域注入的类。                 |
+| injClassNum     | `string`                                                        | `''`     | N    | 数字区域注入的类。                 |
 
 ## Stepper Events
 
-| 名称     | 参数                                     | 描述             |
-| -------- | ---------------------------------------- | ---------------- |
-| change   | event：事件对象，其中 value 表示当前值。 | 当前值。         |
-| decrease | -                                        | 点击减少时触发。 |
-| increase | -                                        | 点击增加时触发。 |
+| 名称       | 类型                | 参数           | 描述             |
+| ---------- | ------------------- | -------------- | ---------------- |
+| onchange   | `{ value: number }` | value - 当前值 | 当前值。         |
+| ondecrease | `() => void`        | -              | 点击减少时触发。 |
+| onincrease | `() => void`        | -              | 点击增加时触发。 |

doc/components/stepper/api_en.md

@@ -1,28 +1,28 @@
 ## Stepper Props
 
-| Prop Name       | Type    | Default | Optional Values           | Required | Description                                         |
-| --------------- | ------- | ------- | ------------------------- | -------- | --------------------------------------------------- |
-| value           | Number  | 10      | -                         | N        | Current value.                                      |
-| min             | Number  | 0       | -                         | N        | Minimum value.                                      |
-| max             | Number  | 100     | -                         | N        | Maximum value.                                      |
-| step            | Number  | 1       | -                         | N        | Step.                                               |
-| vertical        | Boolean | false   | -                         | N        | Whether to be vertical.                             |
-| numberHighlight | Boolean | false   | -                         | N        | Whether to highlight the number area.               |
-| theme           | Boolean | true    | -                         | N        | Whether the highlighted area is the theme color.    |
-| radius          | String  | 'base'  | 'none'/'base'/'xl'/'full' | N        | Corner style.                                       |
-| decimal         | Number  | 0       | -                         | N        | Number of decimal places for internal display.      |
-| async           | Boolean | false   | -                         | N        | Whether to be asynchronous.                         |
-| asyncLoading    | Boolean | false   | -                         | N        | Whether to show internal Loading when asynchronous. |
-| loading         | Object  | {}      | 参考 Loading Props        | N        | Loading parameters when asynchronous.               |
-| padding         | Boolean | true    | -                         | N        | Whether there is padding outside.                   |
-| injClassOut     | String  | ''      | Class                     | N        | Class for outside.                                  |
-| injClassBtn     | String  | ''      | Class                     | N        | Class for button area.                              |
-| injClassNum     | String  | ''      | Class                     | N        | Class for number area.                              |
+| Name            | Type                                                            | Default  | Required | Description                                        |
+| --------------- | --------------------------------------------------------------- | -------- | -------- | -------------------------------------------------- |
+| value           | `number`                                                        | `10`     | N        | Current value.                                     |
+| min             | `number`                                                        | `0`      | N        | Minimum value.                                     |
+| max             | `number`                                                        | `100`    | N        | Maximum value.                                     |
+| step            | `number`                                                        | `1`      | N        | Step increment.                                    |
+| vertical        | `boolean`                                                       | `false`  | N        | Whether to display vertically.                     |
+| numberHighlight | `boolean`                                                       | `false`  | N        | Whether to highlight the number area.              |
+| theme           | `boolean`                                                       | `true`   | N        | Whether the highlighted area uses the theme color. |
+| radius          | `'none'\|'base'\|'xl'\|'full'`                                  | `'base'` | N        | Border radius style.                               |
+| decimal         | `number`                                                        | `0`      | N        | Number of decimal places for displayed value.      |
+| async           | `boolean`                                                       | `false`  | N        | Whether in async state.                            |
+| asyncLoading    | `boolean`                                                       | `false`  | N        | Whether to show internal Loading in async state.   |
+| loading         | [`Loading`](https://stdf.design/#/components?nav=loading&tab=1) | `{}`     | N        | Loading parameters in async state.                 |
+| padding         | `boolean`                                                       | `true`   | N        | Whether to have external padding.                  |
+| injClassOut     | `string`                                                        | `''`     | N        | Injected class for the outer container.            |
+| injClassBtn     | `string`                                                        | `''`     | N        | Injected class for the button area.                |
+| injClassNum     | `string`                                                        | `''`     | N        | Injected class for the number area.                |
 
 ## Stepper Events
 
-| Name     | Parameters                                             | Description                          |
-| -------- | ------------------------------------------------------ | ------------------------------------ |
-| change   | event：event object, where value is the current value. | Current value.                       |
-| decrease | -                                                      | Triggered when clicking to decrease. |
-| increase | -                                                      | Triggered when clicking to increase. |
+| Name       | Type                | Parameters            | Description                                |
+| ---------- | ------------------- | --------------------- | ------------------------------------------ |
+| onchange   | `{ value: number }` | value - current value | Triggered when the value changes.          |
+| ondecrease | `() => void`        | -                     | Triggered when decrease button is clicked. |
+| onincrease | `() => void`        | -                     | Triggered when increase button is clicked. |