[stdf]Publish v1.0.0-next.9

docs/mds/components/numKeyboard/api.md

@@ -1,28 +1,30 @@
 ## NumKeyboard Props
 
-| 名称         | 类型                                                                   | 默认值                 | 必传 | 说明                 |
-| ------------ | ---------------------------------------------------------------------- | ---------------------- | ---- | -------------------- |
-| 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`](https://stdf.design/#/components?nav=popup&tab=1)            | `{}`                   | N    | 弹出层参数。         |
+| 名称         | 类型                                                        | 默认值                 | 必传 | 说明                 |
+| ------------ | ----------------------------------------------------------- | ---------------------- | ---- | -------------------- |
+| value        | `string`                                                    | `''`                   | 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    | 按键圆角。           |
+| clear        | `boolean`                                                   | `false`                | N    | 打开时是否清空内容。 |
+| panelClass   | `string`                                                    | `''`                   | N    | 键盘面板注入 Class。 |
+| keyClass     | `string`                                                    | `''`                   | N    | 按键注入 Class。     |
+| doneClass    | `string`                                                    | `''`                   | N    | 完成按键注入 Class。 |
+| popup        | [`Popup`](https://stdf.design/#/components?nav=popup&tab=1) | `{}`                   | N    | 弹出层参数。         |
 
 ## NumKeyboard Events
 
-| 名称    | 类型                                    | 参数                                                      | 描述                   |
-| ------- | --------------------------------------- | --------------------------------------------------------- | ---------------------- |
-| onclick | `(numStr: string, key: string) => void` | numStr - 输入的数字字符内容<br />key - 本次点击的键盘 key | 每次点击任意按键触发。 |
-| onopen  | `(height: number) => void`              | height - 键盘高度                                         | 键盘打开时触发。       |
-| onclose | `() => void`                            | -                                                         | 键盘关闭时触发。       |
+| 名称    | 类型                       | 参数                     | 描述                   |
+| ------- | -------------------------- | ------------------------ | ---------------------- |
+| onclick | `(key: string) => void`    | key - 本次点击的键盘 key | 每次点击任意按键触发。 |
+| onopen  | `(height: number) => void` | height - 键盘高度        | 键盘打开时触发。       |
+| onclose | `() => void`               | -                        | 键盘关闭时触发。       |

docs/mds/components/numKeyboard/api_en.md

@@ -1,28 +1,30 @@
 ## NumKeyboard Props
 
-| 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`](https://stdf.design/#/components?nav=popup&tab=1)            | `{}`                           | N        | Popup parameters.                |
+| Name         | Type                                                        | Default                        | Required | Description                         |
+| ------------ | ----------------------------------------------------------- | ------------------------------ | -------- | ----------------------------------- |
+| value        | `string`                                                    | `''`                           | N        | Input content.                      |
+| 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.                  |
+| clear        | `boolean`                                                   | `false`                        | N        | Whether to clear content when open. |
+| 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`](https://stdf.design/#/components?nav=popup&tab=1) | `{}`                           | N        | Popup parameters.                   |
 
 ## NumKeyboard Events
 
-| 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.    |
+| Name    | Type                       | Parameters                 | Description                        |
+| ------- | -------------------------- | -------------------------- | ---------------------------------- |
+| onclick | `(key: string) => void`    | 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.    |

docs/mds/components/numKeyboard/version.md

@@ -0,0 +1,4 @@
+## 1.0.0-next.9
+
+- [!tag|A|0|]新增 `value` 与 `clear` 属性，关联 Issue [#36](https://github.com/any-tdf/stdf/issues/36)。[!issue|sbscan|]
+- [!tag|O|0|]输入值不再通过 `onclick` 事件获取，而是通过 `value` 绑定。

docs/mds/components/numKeyboard/version_en.md

@@ -0,0 +1,4 @@
+## 1.0.0-next.9
+
+- [!tag|A|0|]Add `value` and `clear` properties, related to Issue [#36](https://github.com/any-tdf/stdf/issues/36). [!issue|sbscan|]
+- [!tag|O|0|]Input value is no longer obtained through the `onclick` event, but through the `value` binding.

docs/mds/guide/changelog.md

@@ -1,3 +1,7 @@
+## 1.0.0-next.9 <font size=1>2024-12-23</font>
+
+- 增强 NumKeyboard 组件，详见 [NumKeyboard](https://next.stdf.design/components?nav=numKeyboard&tab=4)。
+
 ## 1.0.0-next.8 <font size=1>2024-12-16</font>
 
 - 增强 NavBar 组件，详见 [NavBar](https://next.stdf.design/components?nav=navBar&tab=4)。

docs/mds/guide/changelog_en.md

@@ -1,3 +1,7 @@
+## 1.0.0-next.9 <font size=1>2024-12-23</font>
+
+- Enhanced NumKeyboard component, please see [NumKeyboard](https://next.stdf.design/components?nav=numKeyboard&tab=4).
+
 ## 1.0.0-next.8 <font size=1>2024-12-16</font>
 
 - Enhanced NavBar component, please see [NavBar](https://next.stdf.design/components?nav=navBar&tab=4).

packages/stdf/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stdf",
-	"version": "1.0.0-next.8",
+	"version": "1.0.0-next.9",
 	"description": "Mobile web component library based on Svelte and Tailwind",
 	"author": "any-tdf",
 	"funding": "https://stdf.design?fund",

packages/stdf/src/lib/components/numKeyboard/NumKeyboard.svelte

@@ -12,6 +12,7 @@
 
 	let {
 		type = 'button',
+		value = $bindable(''),
 		visible = $bindable(true),
 		height = '12',
 		space = '2',
@@ -23,6 +24,7 @@
 		doneText = commonLang.done,
 		doneDisabled = $bindable(false),
 		radius = 'base',
+		clear = false,
 		panelClass = '',
 		keyClass = '',
 		doneClass = '',
@@ -104,39 +106,35 @@
 		}
 	};
 
-	// 输入的数字字符
-	// Input number character
-	let numStr = '';
-
 	// 点击按键事件
 	// Click the button event
-	const clickFunc = (key: string | number) => {
+	const clickFunc = (key: string) => {
 		// 当 key 不是 close 或 done 时，拼接字符串，是删除时，删除最后一个字符
 		// When key is not close or done, splice the string, delete the last character when it is deleted
 		if (key !== 'close' && key !== 'done') {
 			if (key === 'delete') {
-				numStr = numStr.slice(0, numStr.length - 1);
+				value = value.slice(0, value.length - 1);
 			} else {
-				numStr += key;
+				value += key;
 			}
 		}
-		// 如果 key 是数字处理为字符串
-		// If key is a number, process it as a string
-		const keyStr = typeof key === 'number' ? key.toString() : key;
-		// close 和 done 事件都回关闭
+		// close 和 done 事件都会关闭
 		// Both close and done events will be closed
-		if (keyStr === 'close' || (keyStr === 'done' && !doneDisabled)) {
+		if (key === 'close' || (key === 'done' && !doneDisabled)) {
 			visible = false;
 		}
 		// 派发事件，传递出两个参数，输入的数字字符串和本次点击的类型
 		// Dispatch events, pass out two parameters, the input number string and the type of this click
-		onclick?.(numStr, keyStr);
+		onclick?.(key);
 	};
 
 	// 激活与关闭键盘事件
 	// Activate and close the keyboard event
 	$effect(() => {
 		if (visible) {
+			if (clear) {
+				value = '';
+			}
 			onopen?.(keyboardHeight());
 		} else {
 			onclose?.();
@@ -150,7 +148,7 @@
 			'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}
+			{#each reverse ? ['7', '8', '9'] : ['1', '2', '3'] as item}
 				<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
 			{/each}
 			{#if done}
@@ -158,7 +156,7 @@
 					<Icon name="ri-delete-back-2-line" size={Number(height) * 2} />
 				</button>
 			{/if}
-			{#each [4, 5, 6] as item}
+			{#each ['4', '5', '6'] as item}
 				<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
 			{/each}
 			{#if done}
@@ -171,7 +169,7 @@
 					{doneText}
 				</button>
 			{/if}
-			{#each reverse ? [1, 2, 3] : [7, 8, 9] as item}
+			{#each reverse ? ['1', '2', '3'] : ['7', '8', '9'] as item}
 				<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
 			{/each}
 			{#if dot}

packages/stdf/src/lib/components/popup/Popup.svelte

@@ -239,15 +239,12 @@
 			transitionParams={transitionParamsFun()}
 			transitionOutParams={transitionOutParamsFun()}
 		>
-			<button
+			<div
 				class="w-full h-full{transparent ? ' bg-transparent' : ' bg-white dark:bg-gray-950'} {radiusFun()} overflow-y-auto"
 				class:popup-container={hideScrollbar}
-				onclick={(e) => {
-					e.stopPropagation();
-				}}
 			>
 				{@render children?.()}
-			</button>
+			</div>
 		</Transition>
 	</div>
 {/if}

packages/stdf/src/lib/types/index.ts

@@ -418,6 +418,7 @@ export type NoticeBarProps = {
 };
 
 export type NumKeyboardProps = {
+	value?: string;
 	type?: 'button' | 'block';
 	visible?: boolean;
 	height?: '8' | '10' | '12' | '14' | '16' | '20';
@@ -430,11 +431,12 @@ export type NumKeyboardProps = {
 	doneText?: string;
 	doneDisabled?: boolean;
 	radius?: 'none' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+	clear?: boolean;
 	panelClass?: string;
 	keyClass?: string;
 	doneClass?: string;
 	popup?: PopupProps;
-	onclick?: (numStr: string, key: string) => void;
+	onclick?: (key: string) => void;
 	onopen?: (height: number) => void;
 	onclose?: () => void;
 };

packages/stdf/src/routes/numKeyboard/en_US/+page.svelte

@@ -22,11 +22,13 @@
 	let visible17 = $state(false);
 	let visible18 = $state(false);
 	let visible19 = $state(false);
+	let visible20 = $state(false);
+	let visible21 = $state(false);
 
 	// Demo for click event listening
 	let visibleToast = $state(false);
 	let key = $state('');
-	const clickFunc = (_: string, k: string) => {
+	const clickFunc = (k: string) => {
 		key = k;
 		visibleToast = true;
 	};
@@ -35,23 +37,30 @@
 	let loveDom: HTMLElement | null = $state(null);
 	// Distance from loveDom to window bottom
 	let loveDomBottom = 0;
-	let value = $state('0');
-	let doneDisabled = $state(true);
+	let value = $state('');
 	let top = $state(0);
-	const loveFunc = (numStr: string) => {
-		value = numStr || '0';
-		doneDisabled = numStr === '5201314';
-	};
 	const openFunc = (height: number) => {
 		// If loveDom is less than keyboard height from window bottom, move loveDom up by keyboard height
 		loveDomBottom = window.innerHeight - (loveDom?.getBoundingClientRect().bottom || 0);
 		top = loveDomBottom < height ? -(height - loveDomBottom) - 50 : 0;
 	};
+
+	let value21 = $state('');
+	// Demo for getting content
+	let valueClear = $state('');
 </script>
 
 <Cell title="Basic Usage" onclick={() => (visible1 = true)} />
 <NumKeyboard bind:visible={visible1} />
 
+<div class="px-4">Content: {value21}</div>
+<Cell title="Get Content" onclick={() => (visible21 = true)} />
+<NumKeyboard bind:visible={visible21} bind:value={value21} />
+
+<div class="px-4">Content: {valueClear}</div>
+<Cell title="Clear Content When Open" onclick={() => (visible20 = true)} />
+<NumKeyboard bind:visible={visible20} bind:value={valueClear} clear />
+
 <Cell title="Hide Done Button" onclick={() => (visible2 = true)} />
 <NumKeyboard bind:visible={visible2} done={false} />
 
@@ -87,7 +96,7 @@
 <Toast bind:visible={visibleToast} duration={500} message={`Clicked ${key}`}></Toast>
 
 <div
-	class="relative mx-16 rounded-full bg-primary py-3 text-center text-xl text-white backdrop-blur transition-all dark:bg-dark dark:text-black"
+	class="bg-primary dark:bg-dark shadow-primary/30 dark:shadow-dark/30 relative mx-16 h-10 rounded-full text-center text-xl leading-10 text-white shadow-lg transition-all dark:text-black"
 	style="top:{top}px"
 	bind:this={loveDom}
 >
@@ -97,7 +106,7 @@
 	{/if}
 </div>
 <Cell title="Please Enter 5201314" onclick={() => (visible12 = true)} />
-<NumKeyboard bind:visible={visible12} bind:doneDisabled onclick={loveFunc} onopen={openFunc} onclose={() => (top = 0)} />
+<NumKeyboard bind:visible={visible12} doneDisabled={value !== '5201314'} bind:value onopen={openFunc} onclose={() => (top = 0)} />
 
 <Cell title="Larger Key Border Radius" onclick={() => (visible13 = true)} />
 <NumKeyboard bind:visible={visible13} radius="2xl" />

packages/stdf/src/routes/numKeyboard/zh_CN/+page.svelte

@@ -22,11 +22,13 @@
 	let visible17 = $state(false);
 	let visible18 = $state(false);
 	let visible19 = $state(false);
+	let visible20 = $state(false);
+	let visible21 = $state(false);
 
 	// 演示监听点击事件
 	let visibleToast = $state(false);
 	let key = $state('');
-	const clickFunc = (_: string, k: string) => {
+	const clickFunc = (k: string) => {
 		key = k;
 		visibleToast = true;
 	};
@@ -35,23 +37,30 @@
 	let loveDom: HTMLElement | null = $state(null);
 	// loveDom 距离窗口底部的距离
 	let loveDomBottom = 0;
-	let value = $state('0');
-	let doneDisabled = $state(true);
+	let value = $state('');
 	let top = $state(0);
-	const loveFunc = (numStr: string) => {
-		value = numStr || '0';
-		doneDisabled = numStr !== '5201314';
-	};
 	const openFunc = (height: number) => {
 		// 如果 loveDom 距离窗口底部小于键盘高度，就把 loveDom 向上移动键盘高度
 		loveDomBottom = window.innerHeight - (loveDom?.getBoundingClientRect().bottom || 0);
 		top = loveDomBottom < height ? -(height - loveDomBottom) - 50 : 0;
 	};
+
+	let value21 = $state('');
+	// 演示清空内容
+	let valueClear = $state('');
 </script>
 
 <Cell title="基础用法" onclick={() => (visible1 = true)} />
 <NumKeyboard bind:visible={visible1} />
 
+<div class="px-4">输入了: {value21}</div>
+<Cell title="获取内容" onclick={() => (visible21 = true)} />
+<NumKeyboard bind:visible={visible21} bind:value={value21} />
+
+<div class="px-4">输入了: {valueClear}</div>
+<Cell title="打开时清空内容" onclick={() => (visible20 = true)} />
+<NumKeyboard bind:visible={visible20} bind:value={valueClear} clear />
+
 <Cell title="不显示完成" onclick={() => (visible2 = true)} />
 <NumKeyboard bind:visible={visible2} done={false} />
 
@@ -87,7 +96,7 @@
 <Toast bind:visible={visibleToast} duration={500} message={`点击了 ${key}`}></Toast>
 
 <div
-	class="relative mx-16 rounded-full bg-primary py-3 text-center text-xl text-white backdrop-blur transition-all dark:bg-dark dark:text-black"
+	class="bg-primary dark:bg-dark shadow-primary/30 dark:shadow-dark/30 relative mx-16 h-10 rounded-full text-center text-xl leading-10 text-white shadow-lg transition-all dark:text-black"
 	style="top:{top}px"
 	bind:this={loveDom}
 >
@@ -97,7 +106,7 @@
 	{/if}
 </div>
 <Cell title="请输入 5201314" onclick={() => (visible12 = true)} />
-<NumKeyboard bind:visible={visible12} bind:doneDisabled onclick={loveFunc} onopen={openFunc} onclose={() => (top = 0)} />
+<NumKeyboard bind:visible={visible12} doneDisabled={value !== '5201314'} bind:value onopen={openFunc} onclose={() => (top = 0)} />
 
 <Cell title="增大按键圆角" onclick={() => (visible13 = true)} />
 <NumKeyboard bind:visible={visible13} radius="2xl" />