[stdf]Update NumKeyboard compoent, demo and documents.

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

@@ -3,94 +3,88 @@
 	import { NumKeyboard, Cell, Toast } from '../../../../../packages/stdf/components';
 	import { Confetti } from 'svelte-confetti';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-	let visible12 = false;
-	let visible13 = false;
-	let visible14 = false;
-	let visible15 = false;
-	let visible16 = false;
-	let visible17 = false;
-	let visible18 = false;
-	let visible19 = false;
-
-	// Demonstrate listening for click events
-	let visibleToast = false;
-	let key = '';
-	const clickFunc = e => {
-		key = e.detail.key;
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
+	let visible10 = $state(false);
+	let visible11 = $state(false);
+	let visible12 = $state(false);
+	let visible13 = $state(false);
+	let visible14 = $state(false);
+	let visible15 = $state(false);
+	let visible16 = $state(false);
+	let visible17 = $state(false);
+	let visible18 = $state(false);
+	let visible19 = $state(false);
+
+	// Demo for click event listening
+	let visibleToast = $state(false);
+	let key = $state('');
+	const clickFunc = (_, k) => {
+		key = k;
 		visibleToast = true;
 	};
 
-	// Demonstrate listening for open and close events
-	let loveDom = null;
-	// The distance from loveDom to the bottom of the window
+	// Demo for open and close event listening
+	let loveDom = $state(null);
+	// Distance from loveDom to window bottom
 	let loveDomBottom = 0;
-	let value = '0';
-	$: doneDisabled = value !== '5201314';
-	let top = 0;
-	const loveFunc = e => {
-		value = e.detail.numStr || '0';
+	let value = $state('0');
+	let doneDisabled = $state(false);
+	let top = $state(0);
+	const loveFunc = numStr => {
+		value = numStr || '0';
+		doneDisabled = numStr === '5201314';
 	};
-	const openFunc = e => {
-		// If the distance from loveDom to the bottom of the window is less than the height of the keyboard, move loveDom up to the height of the keyboard
+	const openFunc = height => {
+		// If loveDom is less than keyboard height from window bottom, move loveDom up by keyboard height
 		loveDomBottom = window.innerHeight - loveDom.getBoundingClientRect().bottom;
-		if (loveDomBottom < e.detail.keyboardHeight) {
-			top = -(e.detail.keyboardHeight - loveDomBottom) - 50;
-		} else {
-			top = 0;
-		}
-	};
-	const closeFunc = () => {
-		top = 0;
+		top = loveDomBottom < height ? -(height - loveDomBottom) - 50 : 0;
 	};
 </script>
 
-<Cell title="Basic" on:click={() => (visible1 = true)} />
+<Cell title="Basic Usage" onclick={() => (visible1 = true)} />
 <NumKeyboard bind:visible={visible1} />
 
-<Cell title="No show done" on:click={() => (visible2 = true)} />
+<Cell title="Hide Done Button" onclick={() => (visible2 = true)} />
 <NumKeyboard bind:visible={visible2} done={false} />
 
-<Cell title="Show close" on:click={() => (visible3 = true)} />
+<Cell title="Show Close Button" onclick={() => (visible3 = true)} />
 <NumKeyboard bind:visible={visible3} close />
 
-<Cell title="Show close and not show done" subTitle="Must hidden dot" on:click={() => (visible9 = true)} />
+<Cell title="Show Close & Hide Done" subTitle="Must hide decimal point" onclick={() => (visible9 = true)} />
 <NumKeyboard bind:visible={visible9} close dot={false} done={false} />
 
-<Cell title="Digit up and down" on:click={() => (visible4 = true)} />
+<Cell title="Reverse Number Order" onclick={() => (visible4 = true)} />
 <NumKeyboard bind:visible={visible4} reverse />
 
-<Cell title="Increase key height" on:click={() => (visible5 = true)} />
+<Cell title="Increase Key Height" onclick={() => (visible5 = true)} />
 <NumKeyboard bind:visible={visible5} height="16" />
 
-<Cell title="Increase spacing" on:click={() => (visible6 = true)} />
-<NumKeyboard bind:visible={visible6} gap="4" p="4" />
+<Cell title="Increase Spacing" onclick={() => (visible6 = true)} />
+<NumKeyboard bind:visible={visible6} space="4" p="4" />
 
-<Cell title="The decimal point is not displayed" on:click={() => (visible7 = true)} />
-<NumKeyboard bind:visible={visible7} dot={false} />
+<Cell title="Hide Decimal Point" onclick={() => (visible7 = true)} />
+<NumKeyboard bind:visible={visible7} close dot={false} />
 
-<Cell title="Unnecessary all are not displayed" on:click={() => (visible8 = true)} />
+<Cell title="Hide All Optional Elements" onclick={() => (visible8 = true)} />
 <NumKeyboard bind:visible={visible8} done={false} dot={false} />
 
-<Cell title="Block type" on:click={() => (visible10 = true)} />
+<Cell title="Block Style" onclick={() => (visible10 = true)} />
 <NumKeyboard bind:visible={visible10} type="block" height="14" p="0" />
 
-<Cell title="Customize the doneText" on:click={() => (visible18 = true)} />
+<Cell title="Custom Done Text" onclick={() => (visible18 = true)} />
 <NumKeyboard bind:visible={visible18} doneText="Transfer" />
 
-<Cell title="Listen click event" on:click={() => (visible11 = true)} />
-<NumKeyboard bind:visible={visible11} on:click={clickFunc} />
-<Toast bind:visible={visibleToast} duration={500} message={`clicked ${key}`}></Toast>
+<Cell title="Click Event Listening" onclick={() => (visible11 = true)} />
+<NumKeyboard bind:visible={visible11} onclick={clickFunc} />
+<Toast bind:visible={visibleToast} duration={500} message={`Clicked ${key}`}></Toast>
 
 <div
 	class="relative text-center text-xl mx-16 rounded-full py-3 bg-primary text-white dark:bg-dark dark:text-black backdrop-blur transition-all"
@@ -98,31 +92,31 @@
 	bind:this={loveDom}
 >
 	{value}
-	{#if !doneDisabled}
+	{#if value === '5201314'}
 		<span class="absolute left-1/2"><Confetti rounded amount={100} /></span>
 	{/if}
 </div>
-<Cell title="Please enter 5201314" on:click={() => (visible12 = true)} />
-<NumKeyboard bind:visible={visible12} bind:doneDisabled on:click={loveFunc} on:open={openFunc} on:close={closeFunc} />
+<Cell title="Please Enter 5201314" onclick={() => (visible12 = true)} />
+<NumKeyboard bind:visible={visible12} bind:doneDisabled onclick={loveFunc} onopen={openFunc} onclose={() => (top = 0)} />
 
-<Cell title="Increase key corners" on:click={() => (visible13 = true)} />
+<Cell title="Larger Key Border Radius" onclick={() => (visible13 = true)} />
 <NumKeyboard bind:visible={visible13} radius="2xl" />
 
-<Cell title="Done key injection Class" on:click={() => (visible14 = true)} />
+<Cell title="Inject Done Button Class" onclick={() => (visible14 = true)} />
 <NumKeyboard bind:visible={visible14} doneClass="!bg-gradient-to-r from-[#9820a8] to-[#d16b98]" />
 
-<Cell title="Panel and key injection Class" on:click={() => (visible15 = true)} />
+<Cell title="Inject Panel & Key Class" onclick={() => (visible15 = true)} />
 <NumKeyboard
 	bind:visible={visible15}
 	panelClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]"
 	keyClass="!bg-transparent border border-white/40 !text-white"
 />
 
-<Cell title="Custom transition animations" subTitle="By popup" on:click={() => (visible16 = true)} />
+<Cell title="Custom Transition" subTitle="Via popup" onclick={() => (visible16 = true)} />
 <NumKeyboard bind:visible={visible16} popup={{ duration: 1000, easeType: 'bounceOut' }} />
 
-<Cell title="Opaque background when open" subTitle="By mask in popup" on:click={() => (visible17 = true)} />
-<NumKeyboard bind:visible={visible17} popup={{ mask: 0.4 }} />
+<Cell title="Opaque Background When Active" subTitle="Via popup mask" onclick={() => (visible17 = true)} />
+<NumKeyboard bind:visible={visible17} popup={{ mask: { opacity: '0.4' } }} />
 
-<Cell title="Customize key fonts" subTitle="Needs imported and config in tailwind.config.js" on:click={() => (visible19 = true)} />
+<Cell title="Custom Key Font" subTitle="Need to import and configure in tailwind.config.js" onclick={() => (visible19 = true)} />
 <NumKeyboard bind:visible={visible19} keyClass="font-Trueno" />

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

@@ -3,93 +3,87 @@
 	import { NumKeyboard, Cell, Toast } from '../../../../../packages/stdf/components';
 	import { Confetti } from 'svelte-confetti';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-	let visible12 = false;
-	let visible13 = false;
-	let visible14 = false;
-	let visible15 = false;
-	let visible16 = false;
-	let visible17 = false;
-	let visible18 = false;
-	let visible19 = false;
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
+	let visible10 = $state(false);
+	let visible11 = $state(false);
+	let visible12 = $state(false);
+	let visible13 = $state(false);
+	let visible14 = $state(false);
+	let visible15 = $state(false);
+	let visible16 = $state(false);
+	let visible17 = $state(false);
+	let visible18 = $state(false);
+	let visible19 = $state(false);
 
 	// 演示监听点击事件
-	let visibleToast = false;
-	let key = '';
-	const clickFunc = e => {
-		key = e.detail.key;
+	let visibleToast = $state(false);
+	let key = $state('');
+	const clickFunc = (_, k) => {
+		key = k;
 		visibleToast = true;
 	};
 
 	// 演示监听开启与关闭事件
-	let loveDom = null;
+	let loveDom = $state(null);
 	// loveDom 距离窗口底部的距离
 	let loveDomBottom = 0;
-	let value = '0';
-	$: doneDisabled = value !== '5201314';
-	let top = 0;
-	const loveFunc = e => {
-		value = e.detail.numStr || '0';
+	let value = $state('0');
+	let doneDisabled = $state(false);
+	let top = $state(0);
+	const loveFunc = numStr => {
+		value = numStr || '0';
+		doneDisabled = numStr === '5201314';
 	};
-	const openFunc = e => {
+	const openFunc = height => {
 		// 如果 loveDom 距离窗口底部小于键盘高度，就把 loveDom 向上移动键盘高度
 		loveDomBottom = window.innerHeight - loveDom.getBoundingClientRect().bottom;
-		if (loveDomBottom < e.detail.keyboardHeight) {
-			top = -(e.detail.keyboardHeight - loveDomBottom) - 50;
-		} else {
-			top = 0;
-		}
-	};
-	const closeFunc = () => {
-		top = 0;
+		top = loveDomBottom < height ? -(height - loveDomBottom) - 50 : 0;
 	};
 </script>
 
-<Cell title="基础用法" on:click={() => (visible1 = true)} />
+<Cell title="基础用法" onclick={() => (visible1 = true)} />
 <NumKeyboard bind:visible={visible1} />
 
-<Cell title="不显示完成" on:click={() => (visible2 = true)} />
+<Cell title="不显示完成" onclick={() => (visible2 = true)} />
 <NumKeyboard bind:visible={visible2} done={false} />
 
-<Cell title="显示关闭" on:click={() => (visible3 = true)} />
+<Cell title="显示关闭" onclick={() => (visible3 = true)} />
 <NumKeyboard bind:visible={visible3} close />
 
-<Cell title="显示关闭不显示完成" subTitle="必须隐藏小数点" on:click={() => (visible9 = true)} />
+<Cell title="显示关闭不显示完成" subTitle="必须隐藏小数点" onclick={() => (visible9 = true)} />
 <NumKeyboard bind:visible={visible9} close dot={false} done={false} />
 
-<Cell title="数字上下反向" on:click={() => (visible4 = true)} />
+<Cell title="数字上下反向" onclick={() => (visible4 = true)} />
 <NumKeyboard bind:visible={visible4} reverse />
 
-<Cell title="增高按键高度" on:click={() => (visible5 = true)} />
+<Cell title="增高按键高度" onclick={() => (visible5 = true)} />
 <NumKeyboard bind:visible={visible5} height="16" />
 
-<Cell title="增大间距" on:click={() => (visible6 = true)} />
-<NumKeyboard bind:visible={visible6} gap="4" p="4" />
+<Cell title="增大间距" onclick={() => (visible6 = true)} />
+<NumKeyboard bind:visible={visible6} space="4" p="4" />
 
-<Cell title="不显示小数点" on:click={() => (visible7 = true)} />
+<Cell title="不显示小数点" onclick={() => (visible7 = true)} />
 <NumKeyboard bind:visible={visible7} close dot={false} />
 
-<Cell title="不必要的全部不显示" on:click={() => (visible8 = true)} />
+<Cell title="不必要的全部不显示" onclick={() => (visible8 = true)} />
 <NumKeyboard bind:visible={visible8} done={false} dot={false} />
 
-<Cell title="块式" on:click={() => (visible10 = true)} />
+<Cell title="块式" onclick={() => (visible10 = true)} />
 <NumKeyboard bind:visible={visible10} type="block" height="14" p="0" />
 
-<Cell title="自定义完成文字" on:click={() => (visible18 = true)} />
+<Cell title="自定义完成文字" onclick={() => (visible18 = true)} />
 <NumKeyboard bind:visible={visible18} doneText="转账" />
 
-<Cell title="监听点击事件" on:click={() => (visible11 = true)} />
-<NumKeyboard bind:visible={visible11} on:click={clickFunc} />
+<Cell title="监听点击事件" onclick={() => (visible11 = true)} />
+<NumKeyboard bind:visible={visible11} onclick={clickFunc} />
 <Toast bind:visible={visibleToast} duration={500} message={`点击了 ${key}`}></Toast>
 
 <div
@@ -98,31 +92,31 @@
 	bind:this={loveDom}
 >
 	{value}
-	{#if !doneDisabled}
+	{#if value === '5201314'}
 		<span class="absolute left-1/2"><Confetti rounded amount={100} /></span>
 	{/if}
 </div>
-<Cell title="请输入 5201314" on:click={() => (visible12 = true)} />
-<NumKeyboard bind:visible={visible12} bind:doneDisabled on:click={loveFunc} on:open={openFunc} on:close={closeFunc} />
+<Cell title="请输入 5201314" onclick={() => (visible12 = true)} />
+<NumKeyboard bind:visible={visible12} bind:doneDisabled onclick={loveFunc} onopen={openFunc} onclose={() => (top = 0)} />
 
-<Cell title="增大按键圆角" on:click={() => (visible13 = true)} />
+<Cell title="增大按键圆角" onclick={() => (visible13 = true)} />
 <NumKeyboard bind:visible={visible13} radius="2xl" />
 
-<Cell title="完成按键注入 Class" on:click={() => (visible14 = true)} />
+<Cell title="完成按键注入 Class" onclick={() => (visible14 = true)} />
 <NumKeyboard bind:visible={visible14} doneClass="!bg-gradient-to-r from-[#9820a8] to-[#d16b98]" />
 
-<Cell title="面板与按键注入 Class" on:click={() => (visible15 = true)} />
+<Cell title="面板与按键注入 Class" onclick={() => (visible15 = true)} />
 <NumKeyboard
 	bind:visible={visible15}
 	panelClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]"
 	keyClass="!bg-transparent border border-white/40 !text-white"
 />
 
-<Cell title="自定义过渡动画" subTitle="通过 popup" on:click={() => (visible16 = true)} />
+<Cell title="自定义过渡动画" subTitle="通过 popup" onclick={() => (visible16 = true)} />
 <NumKeyboard bind:visible={visible16} popup={{ duration: 1000, easeType: 'bounceOut' }} />
 
-<Cell title="激活时背景不透明" subTitle="通过 popup 内的 mask" on:click={() => (visible17 = true)} />
-<NumKeyboard bind:visible={visible17} popup={{ mask: 0.4 }} />
+<Cell title="激活时背景不透明" subTitle="通过 popup 内的 mask" onclick={() => (visible17 = true)} />
+<NumKeyboard bind:visible={visible17} popup={{ mask: { opacity: '0.4' } }} />
 
-<Cell title="自定义按键字体" subTitle="需要引入并在 tailwind.config.js 中配置" on:click={() => (visible19 = true)} />
+<Cell title="自定义按键字体" subTitle="需要引入并在 tailwind.config.js 中配置" onclick={() => (visible19 = true)} />
 <NumKeyboard bind:visible={visible19} keyClass="font-Trueno" />

doc/components/numKeyboard/api.md

@@ -1,28 +1,28 @@
 ## NumKeyboard Props
 
-| 属性         | 类型    | 默认值                 | 可选值                                          | 必传 | 说明                 |
-| ------------ | ------- | ---------------------- | ----------------------------------------------- | ---- | -------------------- |
-| type         | String  | 'button'               | 'button'/'block'                                | N    | 键盘样式类型。       |
-| visible      | Boolean | false                  | true/false                                      | N    | 是否显示键盘。       |
-| height       | String  | '12'                   | '8'/'10'/'12'/'14'/'16'/'20'                    | N    | 按键高度。           |
-| gap          | String  | '2'                    | '0'/'1'/'2'/'3'/'4'                             | N    | 按键间距。           |
-| p            | String  | '2'                    | '0'/'1'/'2'/'3'/'4'                             | N    | 键盘内边距。         |
-| reverse      | Boolean | false                  | true/false                                      | N    | 数字是否上下反向。   |
-| done         | Boolean | true                   | true/false                                      | N    | 是否显示完成按钮。   |
-| dot          | Boolean | true                   | true/false                                      | N    | 是否显示小数点。     |
-| close        | Boolean | false                  | true/false                                      | N    | 是否显示关闭按钮。   |
-| doneText     | String  | 当前语言的 common.done | -                                               | N    | 完成按钮文案。       |
-| doneDisabled | Boolean | false                  | true/false                                      | N    | 完成按钮是否禁用。   |
-| radius       | String  | 'base'                 | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'3xl'/'full' | N    | 按键圆角。           |
-| panelClass   | String  | ''                     | Class                                           | N    | 键盘面板注入 Class。 |
-| keyClass     | String  | ''                     | Class                                           | N    | 按键注入 Class。     |
-| doneClass    | String  | ''                     | Class                                           | N    | 完成按键注入 Class。 |
-| popup        | Object  | {}                     | 参考 Popup Props                                | N    | 弹出层配置项。       |
+| 名称         | 类型                                                                   | 默认值                 | 必传 | 说明                                                                         |
+| ------------ | ---------------------------------------------------------------------- | ---------------------- | ---- | ---------------------------------------------------------------------------- |
+| type         | `'button'`\|`'block'`                                                  | `'button'`             | N    | 键盘样式类型。                                                               |
+| visible      | `boolean`                                                              | `false`                | N    | 是否显示键盘。                                                               |
+| height       | `'8'`\|`'10'`\|`'12'`\|`'14'`\|`'16'`\|`'20'`                          | `'12'`                 | N    | 按键高度。                                                                   |
+| space        | `'0'`\|`'1'`\|`'2'`\|`'3'`\|`'4'`                                      | `'2'`                  | N    | 按键间距。                                                                   |
+| p            | `'0'`\|`'1'`\|`'2'`\|`'3'`\|`'4'`                                      | `'2'`                  | N    | 键盘内边距。                                                                 |
+| reverse      | `boolean`                                                              | `false`                | N    | 数字是否上下反向。                                                           |
+| done         | `boolean`                                                              | `true`                 | N    | 是否显示完成按钮。                                                           |
+| dot          | `boolean`                                                              | `true`                 | N    | 是否显示小数点。                                                             |
+| close        | `boolean`                                                              | `false`                | N    | 是否显示关闭按钮。                                                           |
+| doneText     | `string`                                                               | 当前语言的 common.done | N    | 完成按钮文案。                                                               |
+| doneDisabled | `boolean`                                                              | `false`                | N    | 完成按钮是否禁用。                                                           |
+| radius       | `'none'`\|`'base'`\|`'md'`\|`'lg'`\|`'xl'`\|`'2xl'`\|`'3xl'`\|`'full'` | `'base'`               | N    | 按键圆角。                                                                   |
+| panelClass   | `string`                                                               | `''`                   | N    | 键盘面板注入 Class。                                                         |
+| keyClass     | `string`                                                               | `''`                   | N    | 按键注入 Class。                                                             |
+| doneClass    | `string`                                                               | `''`                   | N    | 完成按键注入 Class。                                                         |
+| popup        | `Popup`                                                                | `{}`                   | N    | 弹出层参数 [Popup Props](https://stdf.design/#/components?nav=popup&tab=1)。 |
 
 ## NumKeyboard Events
 
-| 名称  | 参数                                                                                                               | 描述                   |
-| ----- | ------------------------------------------------------------------------------------------------------------------ | ---------------------- |
-| click | event：事件对象，其中 detail 内有两个参数：<br />1. numStr：输入的数字字符内容；<br />2. key：本次点击的键盘 key。 | 每次点击任意按键触发。 |
-| open  | event：事件对象，其中 detail 内有一个参数 keyboardHeight，键盘高度。                                               | 键盘打开时触发。       |
-| close | -                                                                                                                  | 键盘关闭时触发。       |
+| 名称    | 类型                                    | 参数                                                      | 描述                   |
+| ------- | --------------------------------------- | --------------------------------------------------------- | ---------------------- |
+| onclick | `(numStr: string, key: string) => void` | numStr - 输入的数字字符内容<br />key - 本次点击的键盘 key | 每次点击任意按键触发。 |
+| onopen  | `(height: number) => void`              | height - 键盘高度                                         | 键盘打开时触发。       |
+| onclose | `() => void`                            | -                                                         | 键盘关闭时触发。       |

doc/components/numKeyboard/api_en.md

@@ -1,30 +1,28 @@
 ## NumKeyboard Props
 
-| Property     | Type    | Default                                 | Options                                         | Required | Description                                    |
-| ------------ | ------- | --------------------------------------- | ----------------------------------------------- | -------- | ---------------------------------------------- |
-| type         | String  | 'button'                                | 'button'/'block'                                | No       | The style type of the keyboard.                |
-| visible      | Boolean | false                                   | true/false                                      | No       | Whether the keyboard is visible.               |
-| height       | String  | '12'                                    | '8'/'10'/'12'/'14'/'16'/'20'                    | No       | The height of the keys.                        |
-| gap          | String  | '2'                                     | '0'/'1'/'2'/'3'/'4'                             | No       | The gap between keys.                          |
-| p            | String  | '2'                                     | '0'/'1'/'2'/'3'/'4'                             | No       | The padding inside the keyboard.               |
-| reverse      | Boolean | false                                   | true/false                                      | No       | Whether the numbers are reversed.              |
-| done         | Boolean | true                                    | true/false                                      | No       | Whether to show the done button.               |
-| dot          | Boolean | true                                    | true/false                                      | No       | Whether to show the decimal point.             |
-| close        | Boolean | false                                   | true/false                                      | No       | Whether to show the close button.              |
-| doneText     | String  | The common.done of the current language | -                                               | No       | The text of the done button.                   |
-| doneDisabled | Boolean | false                                   | true/false                                      | No       | Whether the done button is disabled.           |
-| radius       | String  | 'base'                                  | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'3xl'/'full' | No       | The border radius of the keys.                 |
-| panelClass   | String  | ''                                      | Class                                           | No       | The injected class for the keyboard panel.     |
-| keyClass     | String  | ''                                      | Class                                           | No       | The injected class for the keys.               |
-| doneClass    | String  | ''                                      | Class                                           | No       | The injected class for the done button.        |
-| popup        | Object  | {}                                      | Refer to Popup Props                            | No       | The configuration options for the popup layer. |
+| Name         | Type                                                                   | Default                        | Required | Description                                                                       |
+| ------------ | ---------------------------------------------------------------------- | ------------------------------ | -------- | --------------------------------------------------------------------------------- |
+| type         | `'button'`\|`'block'`                                                  | `'button'`                     | N        | Keyboard style type.                                                              |
+| visible      | `boolean`                                                              | `false`                        | N        | Whether to show keyboard.                                                         |
+| height       | `'8'`\|`'10'`\|`'12'`\|`'14'`\|`'16'`\|`'20'`                          | `'12'`                         | N        | Key height.                                                                       |
+| space        | `'0'`\|`'1'`\|`'2'`\|`'3'`\|`'4'`                                      | `'2'`                          | N        | Key spacing.                                                                      |
+| p            | `'0'`\|`'1'`\|`'2'`\|`'3'`\|`'4'`                                      | `'2'`                          | N        | Keyboard padding.                                                                 |
+| reverse      | `boolean`                                                              | `false`                        | N        | Whether to reverse number order.                                                  |
+| done         | `boolean`                                                              | `true`                         | N        | Whether to show done button.                                                      |
+| dot          | `boolean`                                                              | `true`                         | N        | Whether to show decimal point.                                                    |
+| close        | `boolean`                                                              | `false`                        | N        | Whether to show close button.                                                     |
+| doneText     | `string`                                                               | Current language's common.done | N        | Done button text.                                                                 |
+| doneDisabled | `boolean`                                                              | `false`                        | N        | Whether to disable done button.                                                   |
+| radius       | `'none'`\|`'base'`\|`'md'`\|`'lg'`\|`'xl'`\|`'2xl'`\|`'3xl'`\|`'full'` | `'base'`                       | N        | Key border radius.                                                                |
+| panelClass   | `string`                                                               | `''`                           | N        | Inject class for keyboard panel.                                                  |
+| keyClass     | `string`                                                               | `''`                           | N        | Inject class for keys.                                                            |
+| doneClass    | `string`                                                               | `''`                           | N        | Inject class for done button.                                                     |
+| popup        | `Popup`                                                                | `{}`                           | N        | Popup parameters [Popup Props](https://stdf.design/#/components?nav=popup&tab=1). |
 
 ## NumKeyboard Events
 
-| Name  | Parameters                                                                                                                                              | Description                            |
-| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
-| click | event: event object, with two parameters in the detail property: <br />1. numStr: the input number as a string; <br />2. key: the key that was clicked. | Triggered when any key is clicked.     |
-| open  | event: event object, with the keyboardHeight property in the detail property indicating the height of the keyboard.                                     | Triggered when the keyboard is opened. |
-| close | -                                                                                                                                                       | Triggered when the keyboard is closed. |
-
-–
+| Name    | Type                                    | Parameters                                                   | Description                        |
+| ------- | --------------------------------------- | ------------------------------------------------------------ | ---------------------------------- |
+| onclick | `(numStr: string, key: string) => void` | numStr - Input number string<br />key - Clicked keyboard key | Triggered when any key is clicked. |
+| onopen  | `(height: number) => void`              | height - Keyboard height                                     | Triggered when keyboard opens.     |
+| onclose | `() => void`                            | -                                                            | Triggered when keyboard closes.    |

doc/components/numKeyboard/guide.md

@@ -24,7 +24,7 @@ NumKeyboard 组件的按键有 5 种类型，分别是 0-9 数字、删除、小
 
 ## 键盘高度
 
-移动端使用到键盘的地方需要注意键盘的高度，因为键盘可能会遮盖掉页面上需要显示输入内容的区域，所以 NumKeyboard 组件在打开的时候会自动计算键盘的高度，通过 open 事件派发出去，开发者可以根据这个值来处理键盘遮挡的问题。
+移动端使用到键盘的地方需要注意键盘的高度，因为键盘可能会遮盖掉页面上需要显示输入内容的区域，所以 NumKeyboard 组件在打开的时候会自动计算键盘的高度，通过 onopen 事件派发出去，开发者可以根据这个值来处理键盘遮挡的问题。
 
 ## CSS 注入
 

doc/components/numKeyboard/guide_en.md

@@ -24,7 +24,7 @@ The key text size will dynamically adjust according to the height of the key.
 
 ## Keyboard Height
 
-When using the keyboard on a mobile device, it is important to consider the height of the keyboard. The keyboard may cover the area where input content needs to be displayed on the page. Therefore, the NumKeyboard component automatically calculates the height of the keyboard when it is opened and dispatches it through the open event. Developers can use this value to handle the issue of keyboard covering content.
+When using the keyboard on a mobile device, it is important to consider the height of the keyboard. The keyboard may cover the area where input content needs to be displayed on the page. Therefore, the NumKeyboard component automatically calculates the height of the keyboard when it is opened and dispatches it through the onopen event. Developers can use this value to handle the issue of keyboard covering content.
 
 ## CSS Injection
 

packages/stdf/components/numKeyboard/NumKeyboard.svelte

@@ -22,7 +22,7 @@
 		dot = true,
 		close = false,
 		doneText = commonLang.done,
-		doneDisabled = false,
+		doneDisabled = $bindable(false),
 		radius = 'base',
 		panelClass = '',
 		keyClass = '',
@@ -73,13 +73,13 @@
 
 	// 按钮式 class
 	// Button type class
-	const buttonClass = `flex flex-col justify-center shadow-sm font-bold cursor-pointer active:scale-95 transition-all duration-100 ${
+	const buttonClass = `flex flex-col justify-center items-center shadow-sm font-bold active:scale-95 transition-all duration-100 ${
 		heightClass[height] || 'h-12'
 	} ${fontSizeClass[height] || 'text-base'} ${radiusClass[radius] || 'rounded'}${keyClass ? ' ' + keyClass : ''}`;
 
 	// 块式 class
 	// Block type class
-	const blockClass = `flex flex-col justify-center font-bold cursor-pointer active:opacity-40 transition-all duration-100 ${
+	const blockClass = `flex flex-col justify-center items-center font-bold active:opacity-40 transition-all duration-100 ${
 		heightClass[height] || 'h-12'
 	} ${fontSizeClass[height] || 'text-base'}${keyClass ? ' ' + keyClass : ''}`;
 
@@ -138,80 +138,56 @@
 	// Activate and close the keyboard event
 	$effect(() => {
 		if (visible) {
-			onopen?.(keyboardHeight());
+			onopen && onopen(keyboardHeight());
 		} else {
 			onclose && onclose();
 		}
 	});
 </script>
 
-<Popup bind:visible size={0} mask={{ opacity: 0 }} transitionDistance={keyboardHeight()} {...popup}>
+<Popup bind:visible size={0} mask={{ opacity: '0' }} transitionDistance={keyboardHeight()} {...popup}>
 	<div
 		class="bg-gray-100 dark:bg-gray-950 text-center {type === 'block' ? 'border-t border-gray-100 dark:border-gray-950' : ''} {pClass[p] ||
 			'p-2'}{panelClass ? ' ' + panelClass : ''}"
 	>
 		<div class="grid {type === 'button' ? gapClass[space] || 'gap-2' : 'gap-px'} {done ? 'grid-cols-4' : 'grid-cols-3'}">
 			{#each reverse ? [7, 8, 9] : [1, 2, 3] as item}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div class={baseClassFunc(item)} onclick={() => clickFunc(item)}>
-					{item}
-				</div>
+				<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
 			{/each}
 			{#if done}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div class={baseClassFunc('delete')} onclick={() => clickFunc('delete')}>
+				<button class={baseClassFunc('delete')} onclick={() => clickFunc('delete')}>
 					<Icon name="ri-delete-back-2-line" size={Number(height) * 2} />
-				</div>
+				</button>
 			{/if}
 			{#each [4, 5, 6] as item}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div class={baseClassFunc(item)} onclick={() => clickFunc(item)}>
-					{item}
-				</div>
+				<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
 			{/each}
 			{#if done}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
+				<button
 					class="{baseClassFunc('done')} h-full row-span-3 bg-primary dark:bg-dark text-white dark:text-black {doneDisabled
 						? 'active:!scale-100 transition-none !opacity-50'
 						: ''}{doneClass ? '' + doneClass : ''}"
 					onclick={() => clickFunc('done')}
 				>
 					{doneText}
-				</div>
+				</button>
 			{/if}
 			{#each reverse ? [1, 2, 3] : [7, 8, 9] as item}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div class={baseClassFunc(item)} onclick={() => clickFunc(item)}>
-					{item}
-				</div>
+				<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
 			{/each}
 			{#if dot}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div class={baseClassFunc('.')} onclick={() => clickFunc('.')}>.</div>
+				<button class={baseClassFunc('.')} onclick={() => clickFunc('.')}>.</button>
 			{/if}
 			{#if done ? close : !dot && close}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div class={baseClassFunc('close')} onclick={() => clickFunc('close')}>
+				<button class={baseClassFunc('close')} onclick={() => clickFunc('close')}>
 					<Icon name="ri-skip-down-line" size={Number(height) * 2} />
-				</div>
+				</button>
 			{/if}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div class={baseClassFunc('0') + ' ' + zeroColFunc()} onclick={() => clickFunc('0')}>0</div>
+			<button class={baseClassFunc('0') + ' ' + zeroColFunc()} onclick={() => clickFunc('0')}>0</button>
 			{#if !done}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div class={baseClassFunc('delete')} onclick={() => clickFunc('delete')}>
+				<button class={baseClassFunc('delete')} onclick={() => clickFunc('delete')}>
 					<Icon name="ri-delete-back-2-line" size={Number(height) * 2} />
-				</div>
+				</button>
 			{/if}
 		</div>
 	</div>