Browse Source

Add negative prop to Input component

Fixes #37

Add support for negative numbers in the Number Input component.

* Add a new `negative` prop to the `Input` component in `packages/stdf/components/input/Input.svelte`.
* Update the `valueChangeFun` function in `packages/stdf/components/input/Input.svelte` to handle negative numbers when the `negative` prop is set.
* Update the `type` prop in `doc/components/input/api_en.md` and `doc/components/input/api.md` to include a 'negative' option.
* Add a description for the `negative` prop in `doc/components/input/api_en.md` and `doc/components/input/api.md`.
* Add examples of the `negative` prop in `demo/src/routes/en_US/input/+page.svelte` and `demo/src/routes/zh_CN/input/+page.svelte`.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/any-tdf/stdf/issues/37?shareId=XXXX-XXXX-XXXX-XXXX).
Rizmy Abdulla 1 year ago
parent
commit
a2b80a65ca

+ 1 - 0
demo/src/routes/en_US/input/+page.svelte

@@ -58,6 +58,7 @@
 <Input title="Url" type="url" />
 <Input title="Search" type="search" />
 <Input title="Text (not using virtual keyboard)" type="none" />
+<Input title="Number (allowing negative numbers)" type="number" negative />
 
 <div class="px-4 pt-8 font-bold text-xl">Linear style</div>
 <Input title="text" inputStyle="line" />

+ 1 - 0
demo/src/routes/zh_CN/input/+page.svelte

@@ -53,6 +53,7 @@
 <Input title="数字(任意)" type="number" />
 <Input title="数字(整数)" type="numeric" />
 <Input title="数字(允许小数点)" type="decimal" />
+<Input title="数字(允许负数)" type="number" negative />
 <Input title="邮箱" type="email" />
 <Input title="电话号码" type="tel" />
 <Input title="链接地址" type="url" />

+ 2 - 1
doc/components/input/api.md

@@ -12,7 +12,7 @@
 | lineTransition    | String             | 'none'  | 'none'/'center'/'left'                                                                        | N    | 线性过渡位置。                  |
 | duration          | String             | 'base'  | 'fast'/'base'/'slow'/'slower'                                                                 | N    | 过渡时间。                      |
 | value             | String             | ''      | -                                                                                             | N    | 输入框值。                      |
-| type              | String             | 'text'  | 'text'/'decimal'/'email'/'none'/'numeric'/'search'/'tel'/'url'/'password'/'number'/'textarea' | N    | 输入框类型。                    |
+| type              | String             | 'text'  | 'text'/'decimal'/'email'/'none'/'numeric'/'search'/'tel'/'url'/'password'/'number'/'textarea'/'negative' | N    | 输入框类型。                    |
 | inputmode         | String             | ''      | 'text'/'decimal'/'email'/'none'/'numeric'/'search'/'tel'/'url'                                | N    | 指定输入的数据类型。            |
 | state             | String             | 'theme' | 'theme'/'success'/'warning'/'error'/'info'                                                    | N    | 状态。                          |
 | maxlength         | Number             | 24      | -                                                                                             | N    | 最多可输入文本长度。            |
@@ -32,6 +32,7 @@
 | data1             | String/slot        | ''      | ''/Any String/slot                                                                            | N    | 数据项 1 内容。                 |
 | data2             | String/slot        | ''      | ''/Any String/slot                                                                            | N    | 数据项 2 内容。                 |
 | data3             | String/slot        | ''      | ''/Any String/slot                                                                            | N    | 数据项 3 内容。                 |
+| negative          | Boolean            | false   | true/false                                                                                    | N    | 是否允许负数。                  |
 
 ## Input Events
 

+ 2 - 1
doc/components/input/api_en.md

@@ -12,7 +12,7 @@
 | lineTransition    | String             | 'none'        | 'none'/'center'/'left'                                                                        | No       | The position of linear transition.                            |
 | duration          | String             | 'base'        | 'fast'/'base'/'slow'/'slower'                                                                 | No       | The transition duration.                                      |
 | value             | String             | ''            | -                                                                                             | No       | The value of the input field.                                 |
-| type              | String             | 'text'        | 'text'/'decimal'/'email'/'none'/'numeric'/'search'/'tel'/'url'/'password'/'number'/'textarea' | No       | The type of the input field.                                  |
+| type              | String             | 'text'        | 'text'/'decimal'/'email'/'none'/'numeric'/'search'/'tel'/'url'/'password'/'number'/'textarea'/'negative' | No       | The type of the input field.                                  |
 | inputmode         | String             | ''            | 'text'/'decimal'/'email'/'none'/'numeric'/'search'/'tel'/'url'                                | No       | The data type to be entered.                                  |
 | state             | String             | 'theme'       | 'theme'/'success'/'warning'/'error'/'info'                                                    | No       | The state of the input field.                                 |
 | maxlength         | Number             | 24            | -                                                                                             | No       | The maximum number of characters allowed.                     |
@@ -32,6 +32,7 @@
 | data1             | String/slot        | ''            | ''/Any String/slot                                                                            | No       | The contents of data item 1.                                  |
 | data2             | String/slot        | ''            | ''/Any String/slot                                                                            | No       | The contents of data item 2.                                  |
 | data3             | String/slot        | ''            | ''/Any String/slot                                                                            | No       | The contents of data item 3.                                  |
+| negative          | Boolean            | false         | true/false                                                                                    | No       | Whether or not to allow negative numbers.                     |
 
 ## Input Events
 

+ 9 - 1
packages/stdf/components/input/Input.svelte

@@ -250,6 +250,14 @@
 	 */
 	export let autosize = false;
 
+	/**
+	 * 是否允许负数
+	 * Whether to allow negative numbers
+	 * @type {boolean}
+	 * @default false
+	 */
+	export let negative = false;
+
 	// 是否获取焦点
 	// Whether to get focus
 	let focus = false;
@@ -371,7 +379,7 @@
 				if (type === 'decimal' || type === 'number') {
 					// 数字
 					// Number
-					value = e.target.value.replace(/[^\d^.]+/g, '');
+					value = e.target.value.replace(negative ? /[^\d^.\-]+/g : /[^\d^.]+/g, '');
 					// value = e.target.value.replace(/[^\d^\.]+/g, '');
 				} else if (type === 'numeric') {
 					// 整数