[stdf]v0.3.1

any-tdf · Oct 11, 2023 · 913c680 · 913c680
1 parent 66cb4db
commit 913c680
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 26 deletions.
diff --git a/demo/src/routes/en_US/input/+page.svelte b/demo/src/routes/en_US/input/+page.svelte
@@ -8,7 +8,7 @@
 
 	let IdCard = '';
 
-	const isIframe = getContext('iframe') === '1'; //判断是否是iframe
+	const isIframe = getContext('iframe') === '1'; // Determine whether it is iframe
 
 	$: placeholderIdCard = IdCard === '' ? 'Please enter identification number' : '';
 	const clickLabel4Fun = () => {
@@ -22,6 +22,12 @@
 		mobileLength = e.detail.length;
 	};
 	$: mobileState = mobileLength === 11 ? 'success' : mobileLength === 0 ? 'theme' : 'error';
+
+	// Press key
+	let key = '';
+	const keydownFun = e => {
+		key = e.detail;
+	};
 </script>
 
 <div class="px-4 pt-8 font-bold text-xl">Basic usage</div>
@@ -262,3 +268,7 @@
 
 <div class="px-4 pt-8 font-bold text-xl">textarea automatic height</div>
 <Input placeholder="Please enter the content" type="textarea" autosize />
+
+<div class="px-4 pt-4 font-bold text-xl">Listen for keydown event</div>
+<div class="px-4 pt-4">You pressed {key}</div>
+<Input placeholder="Please enter content" on:keydown={keydownFun} />
diff --git a/demo/src/routes/zh_CN/input/+page.svelte b/demo/src/routes/zh_CN/input/+page.svelte
@@ -22,6 +22,12 @@
 		mobileLength = e.detail.length;
 	};
 	$: mobileState = mobileLength === 11 ? 'success' : mobileLength === 0 ? 'theme' : 'error';
+
+	// 按键 key
+	let key = '';
+	const keydownFun = e => {
+		key = e.detail;
+	};
 </script>
 
 <div class="px-4 pt-8 font-bold text-xl">基础用法</div>
@@ -255,3 +261,7 @@
 
 <div class="px-4 pt-8 font-bold text-xl">textarea 自动高度</div>
 <Input placeholder="请输入内容" type="textarea" autosize />
+
+<div class="px-4 pt-4 font-bold text-xl">监听 keydown 事件</div>
+<div class="px-4 pt-4">你按下了 {key}</div>
+<Input placeholder="请输入内容" on:keydown={keydownFun} />
diff --git a/doc/components/input/api.md b/doc/components/input/api.md
@@ -35,18 +35,19 @@
 
 ## Input Events
 
-| 事件        | 参数                                          | 说明                     |
-| ----------- | --------------------------------------------- | ------------------------ |
-| focus       | event：事件对象，其中 detail 表示当前 value。 | 获得焦点时触发。         |
-| blur        | event：事件对象，其中 detail 表示当前 value。 | 失去焦点时触发。         |
-| change      | event：事件对象，其中 detail 表示当前 value。 | 输入框值发生变化时触发。 |
-| clear       | -                                             | 清空按钮点击时触发。     |
-| clicklabel1 | -                                             | 点击标签 1 时触发。      |
-| clicklabel2 | -                                             | 点击标签 2 时触发。      |
-| clicklabel3 | -                                             | 点击标签 3 时触发。      |
-| clicklabel4 | -                                             | 点击标签 4 时触发。      |
-| clicklabel5 | -                                             | 点击标签 5 时触发。      |
-| clicklabel6 | -                                             | 点击标签 6 时触发。      |
+| 事件        | 参数                                              | 说明                     |
+| ----------- | ------------------------------------------------- | ------------------------ |
+| focus       | event：事件对象，其中 detail 表示当前 value。     | 获得焦点时触发。         |
+| blur        | event：事件对象，其中 detail 表示当前 value。     | 失去焦点时触发。         |
+| change      | event：事件对象，其中 detail 表示当前 value。     | 输入框值发生变化时触发。 |
+| clear       | -                                                 | 清空按钮点击时触发。     |
+| clicklabel1 | -                                                 | 点击标签 1 时触发。      |
+| clicklabel2 | -                                                 | 点击标签 2 时触发。      |
+| clicklabel3 | -                                                 | 点击标签 3 时触发。      |
+| clicklabel4 | -                                                 | 点击标签 4 时触发。      |
+| clicklabel5 | -                                                 | 点击标签 5 时触发。      |
+| clicklabel6 | -                                                 | 点击标签 6 时触发。      |
+| keydown     | event：事件对象，其中 detail 表示按下的按键 key。 | 按下键盘时触发。         |
 
 ## Input Slots
 

diff --git a/doc/components/input/api_en.md b/doc/components/input/api_en.md
@@ -35,18 +35,19 @@
 
 ## Input Events
 
-| Event Name  | Parameters                                                      | Description                                             |
-| ----------- | --------------------------------------------------------------- | ------------------------------------------------------- |
-| focus       | event: event object, with 'detail' indicating the current value | Triggered when the input field receives focus.          |
-| blur        | event: event object, with 'detail' indicating the current value | Triggered when the input field loses focus.             |
-| change      | event: event object, with 'detail' indicating the current value | Triggered when the value of the input field is changed. |
-| clear       | -                                                               | Triggered when the clear button is clicked.             |
-| clicklabel1 | -                                                               | Triggered when label 1 is clicked.                      |
-| clicklabel2 | -                                                               | Triggered when label 2 is clicked.                      |
-| clicklabel3 | -                                                               | Triggered when label 3 is clicked.                      |
-| clicklabel4 | -                                                               | Triggered when label 4 is clicked.                      |
-| clicklabel5 | -                                                               | Triggered when label 5 is clicked.                      |
-| clicklabel6 | -                                                               | Triggered when label 6 is clicked.                      |
+| Event Name  | Parameters                                                            | Description                                             |
+| ----------- | --------------------------------------------------------------------- | ------------------------------------------------------- |
+| focus       | event: event object, with 'detail' indicating the current value       | Triggered when the input field receives focus.          |
+| blur        | event: event object, with 'detail' indicating the current value       | Triggered when the input field loses focus.             |
+| change      | event: event object, with 'detail' indicating the current value       | Triggered when the value of the input field is changed. |
+| clear       | -                                                                     | Triggered when the clear button is clicked.             |
+| clicklabel1 | -                                                                     | Triggered when label 1 is clicked.                      |
+| clicklabel2 | -                                                                     | Triggered when label 2 is clicked.                      |
+| clicklabel3 | -                                                                     | Triggered when label 3 is clicked.                      |
+| clicklabel4 | -                                                                     | Triggered when label 4 is clicked.                      |
+| clicklabel5 | -                                                                     | Triggered when label 5 is clicked.                      |
+| clicklabel6 | -                                                                     | Triggered when label 6 is clicked.                      |
+| keydown     | event: Event object, where detail represents the key that is pressed. | Triggered when the keyboard is pressed.                 |
 
 ## Input Slots
 

diff --git a/doc/components/input/guide.md b/doc/components/input/guide.md
@@ -10,6 +10,10 @@
 
 因为在组件内部对输入内容做了一些处理，渲染为页面的最终 input 时 type 除了 password 外都会被转成 text，如需要请自行转换类型。
 
+## 监听按键事件
+
+Input 组件内部监听了键盘按键事件，当按下任意按键时会触发 keydown 事件，事件对象中 detail 属性表示按下的按键 key（备注：keyCode 已弃用，参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode) ），可根据此值做一些特殊处理。参考示例。
+
 ## 可配置项
 
 Input 组件的所有可配置项位置如下图所示。

diff --git a/doc/components/input/guide_en.md b/doc/components/input/guide_en.md
@@ -10,6 +10,10 @@ Considering mobile interaction characteristics, the Input component is mainly us
 
 Because some processing is done on the input content inside the component, except for password, type will be converted to text when rendering the final input on the page. If needed, please convert the type yourself.
 
+## Listening for Key Events
+
+The Input component internally listens for keyboard key events. When any key is pressed, the keydown event is triggered. The detail property in the event object represents the key that was pressed (Note: keyCode is deprecated, refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)). You can use this value to perform special actions. Please refer to the example.
+
 ## Configurable Items
 
 The location of all configurable items of the Input component is shown in the following figure.

diff --git a/doc/components/input/version.md b/doc/components/input/version.md
@@ -1,3 +1,7 @@
+## 0.3.1
+
+- [!tag|A|0|]新增监听键盘事件 keydown。
+
 ## 0.0.11
 
 - [!tag|O|0|]垂直间距 py 默认值改为 2，并新增 3 与 6 两个可选值。

diff --git a/doc/components/input/version_en.md b/doc/components/input/version_en.md
@@ -1,3 +1,7 @@
+## 0.3.1
+
+- [!tag|A|0|] Added keydown event listener.
+
 ## 0.0.11
 
 - [!tag|O|0|] The default vertical spacing of py has been changed to 2, and two optional values of 3 and 6 have been added.

diff --git a/doc/guide/changelog.md b/doc/guide/changelog.md
@@ -1,3 +1,7 @@
+## 0.3.1
+
+- 增强 Input 组件，详见 [Input](https://stdf.design/#/components?nav=input&tab=4)。
+
 ## 0.3.0
 
 - 新增 NumKeyboard 组件，详见 [NumKeyboard](https://stdf.design/#/components?nav=numKeyboard&tab=0)。

diff --git a/doc/guide/changelog_en.md b/doc/guide/changelog_en.md
@@ -1,3 +1,7 @@
+## 0.3.1
+
+- Enhanced the Input component. For details, see [Input](https://stdf.design/#/components?nav=input&tab=4).
+
 ## 0.3.0
 
 - Add NumKeyboard component, please see [NumKeyboard](https://stdf.design/#/components?nav=numKeyboard&tab=0).

diff --git a/packages/stdf/components/input/Input.svelte b/packages/stdf/components/input/Input.svelte
@@ -304,6 +304,19 @@
 	const clickLabel6Fun = () => {
 		dispatch('clicklabel6');
 	};
+
+	// 键盘事件
+	// Keyboard event
+	const keydownFunc = e => {
+		// 如果是回车阻止默认事件，防止滚动
+		// If it is an enter key, prevent the default event to prevent scrolling
+		if (e.key === 'Enter') {
+			e.preventDefault();
+		}
+		// 派发事件，并传出按键的 key
+		// Dispatch events and pass out the key of the key
+		dispatch('keydown', e.key);
+	};
 </script>
 
 <div class={`px-2 ${pyObj[py] || pyObj['2']}`}>
@@ -399,6 +412,7 @@
 								{autocomplete}
 								{disabled}
 								bind:this={textareaDom}
+								on:keydown={keydownFunc}
 							/>
 						{:else}
 							<input
@@ -416,6 +430,7 @@
 								on:compositionstart={compositionstartFun}
 								{autocomplete}
 								{disabled}
+								on:keydown={keydownFunc}
 							/>
 						{/if}
 					</form>

diff --git a/packages/stdf/package.json b/packages/stdf/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "stdf",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"description": "Mobile web component library based on Svelte and Tailwind",
 	"main": "./components/index.js",
 	"svelte": "./components/index.js",