Skip to content

Commit

Permalink
Merge pull request #1214 from valadas/inputmode
Browse files Browse the repository at this point in the history
Added inputMode support to dnn-input
  • Loading branch information
valadas authored Oct 26, 2024
2 parents 245415b + 2d42bce commit e666349
Show file tree
Hide file tree
Showing 7 changed files with 129 additions and 13 deletions.
26 changes: 26 additions & 0 deletions packages/stencil-library/custom-elements.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,15 @@
"tagName": "dnn-autocomplete",
"description": "Building a component that is flexible enough for multiple use cases is not easy. This component externalizes some of its behavior to make it more reusable. To use it effectivelly please read the usage examples carefuly.",
"attributes": [
{
"name": "autocomplete",
"type": {
"text": "string"
},
"description": "Defines the type of automatic completion the browser could use.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete",
"default": "\"off\"",
"required": false
},
{
"name": "disabled",
"type": {
Expand Down Expand Up @@ -1129,6 +1138,14 @@
"description": "Defines the help label displayed under the field.",
"required": false
},
{
"name": "inputmode",
"type": {
"text": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\""
},
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents.\nThis allows a browser to display an appropriate virtual keyboard.",
"required": false
},
{
"name": "label",
"type": {
Expand Down Expand Up @@ -1748,6 +1765,15 @@
"tagName": "dnn-select",
"description": "",
"attributes": [
{
"name": "autocomplete",
"type": {
"text": "string"
},
"description": "Defines the type of automatic completion the browser can use.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete",
"default": "\"off\"",
"required": false
},
{
"name": "disable-validity-reporting",
"type": {
Expand Down
8 changes: 8 additions & 0 deletions packages/stencil-library/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,10 @@ export namespace Components {
* Defines the help label displayed under the field.
*/
"helpText": string;
/**
* Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.
*/
"inputmode": "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
/**
* The label for this input.
*/
Expand Down Expand Up @@ -1695,6 +1699,10 @@ declare namespace LocalJSX {
* Defines the help label displayed under the field.
*/
"helpText"?: string;
/**
* Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.
*/
"inputmode"?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
/**
* The label for this input.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,7 @@ private handleLoadMore(query){

| Property | Attribute | Description | Type | Default |
| ------------------------ | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ----------- |
| `autocomplete` | `autocomplete` | Defines the type of automatic completion the browser could use. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete | `string` | `"off"` |
| `disabled` | `disabled` | Defines whether the field is disabled. | `boolean` | `undefined` |
| `helpText` | `help-text` | Defines the help label displayed under the field. | `string` | `undefined` |
| `label` | `label` | The label for this autocomplete. | `string` | `undefined` |
Expand Down
49 changes: 45 additions & 4 deletions packages/stencil-library/src/components/dnn-input/dnn-input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,11 @@ export class DnnInput {
/** If true, enables users to switch between a password and a text field (to view their password). */
@Prop() allowShowPassword: boolean;

/** Hints at the type of data that might be entered by the user while editing the element or its contents.
* This allows a browser to display an appropriate virtual keyboard.
*/
@Prop() inputmode: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";

/** Fires when the value has changed and the user exits the input. */
@Event() valueChange: EventEmitter<number | string | string[]>;

Expand Down Expand Up @@ -112,9 +117,11 @@ export class DnnInput {
}

componentDidLoad() {
var validity = this.inputField.validity;
var validityMessage = validity.valid ? "" : this.inputField.validationMessage;
this.internals.setValidity(this.inputField.validity, validityMessage);
requestAnimationFrame(() => {
var validity = this.inputField.validity;
var validityMessage = validity.valid ? "" : this.inputField.validationMessage;
this.internals.setValidity(this.inputField.validity, validityMessage);
});
}

// eslint-disable-next-line @stencil-community/own-methods-must-be-private
Expand Down Expand Up @@ -184,6 +191,39 @@ export class DnnInput {
return true;
}

private getInputMode(): string {
if (this.inputmode != undefined) {
return this.inputmode;
}

if (this.type === "number") {
var min = parseFloat(this.min?.toString());
if ((this.step === 1 || this.step == undefined) && min >= 0) {
return "numeric";
}

return "decimal";
}

if (this.type === "tel") {
return "tel";
}

if (this.type === "url") {
return "url";
}

if (this.type === "email") {
return "email";
}

if (this.type === "search") {
return "search";
}

return "text";
}

handleBlur(): void {
this.focused = false
var validity = this.inputField.checkValidity();
Expand Down Expand Up @@ -220,6 +260,7 @@ export class DnnInput {
ref={el => this.inputField = el}
name={this.name}
type={this.type}
inputMode={this.getInputMode()}
disabled={this.disabled}
required={this.required}
autoComplete={this.autocomplete}
Expand Down Expand Up @@ -265,5 +306,5 @@ export class DnnInput {
</dnn-fieldset>
</Host>
);
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ A custom input component that wraps the html input element is a mobile friendly
| `disableValidityReporting` | `disable-validity-reporting` | <span style="color:red">**[DEPRECATED]**</span> This control has it's own validation reporting, will be removed in v0.25.0<br/><br/> | `boolean` | `undefined` |
| `disabled` | `disabled` | Defines whether the field is disabled. | `boolean` | `undefined` |
| `helpText` | `help-text` | Defines the help label displayed under the field. | `string` | `undefined` |
| `inputmode` | `inputmode` | Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `undefined` |
| `label` | `label` | The label for this input. | `string` | `undefined` |
| `max` | `max` | Defines the maximum allowed value. | `number \| string` | `undefined` |
| `maxlength` | `maxlength` | Defines the maximum amount of charaters. | `number` | `undefined` |
Expand Down
19 changes: 10 additions & 9 deletions packages/stencil-library/src/components/dnn-select/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,16 @@

## Properties

| Property | Attribute | Description | Type | Default |
| -------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
| `disableValidityReporting` | `disable-validity-reporting` | <span style="color:red">**[DEPRECATED]**</span> This control has its own validatin reporting, will be removed in v0.25.0<br/><br/> | `boolean` | `undefined` |
| `disabled` | `disabled` | Defines whether the field is disabled. | `boolean` | `undefined` |
| `helpText` | `help-text` | Defines the help label displayed under the field. | `string` | `undefined` |
| `label` | `label` | The label for this input. | `string` | `undefined` |
| `name` | `name` | The name for this input, if used in forms. | `string` | `undefined` |
| `required` | `required` | Defines whether the field requires having a value. | `boolean` | `undefined` |
| `value` | `value` | The value of the input. | `string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| -------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
| `autocomplete` | `autocomplete` | Defines the type of automatic completion the browser can use. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete | `string` | `"off"` |
| `disableValidityReporting` | `disable-validity-reporting` | <span style="color:red">**[DEPRECATED]**</span> This control has its own validatin reporting, will be removed in v0.25.0<br/><br/> | `boolean` | `undefined` |
| `disabled` | `disabled` | Defines whether the field is disabled. | `boolean` | `undefined` |
| `helpText` | `help-text` | Defines the help label displayed under the field. | `string` | `undefined` |
| `label` | `label` | The label for this input. | `string` | `undefined` |
| `name` | `name` | The name for this input, if used in forms. | `string` | `undefined` |
| `required` | `required` | Defines whether the field requires having a value. | `boolean` | `undefined` |
| `value` | `value` | The value of the input. | `string` | `undefined` |


## Events
Expand Down
38 changes: 38 additions & 0 deletions packages/stencil-library/vscode-data.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
"value": "Building a component that is flexible enough for multiple use cases is not easy. This component externalizes some of its behavior to make it more reusable. To use it effectivelly please read the usage examples carefuly."
},
"attributes": [
{
"name": "autocomplete",
"description": "Defines the type of automatic completion the browser could use.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete"
},
{
"name": "disabled",
"description": "Defines whether the field is disabled."
Expand Down Expand Up @@ -431,6 +435,36 @@
"name": "help-text",
"description": "Defines the help label displayed under the field."
},
{
"name": "inputmode",
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents.\nThis allows a browser to display an appropriate virtual keyboard.",
"values": [
{
"name": "decimal"
},
{
"name": "email"
},
{
"name": "none"
},
{
"name": "numeric"
},
{
"name": "search"
},
{
"name": "tel"
},
{
"name": "text"
},
{
"name": "url"
}
]
},
{
"name": "label",
"description": "The label for this input."
Expand Down Expand Up @@ -761,6 +795,10 @@
"value": ""
},
"attributes": [
{
"name": "autocomplete",
"description": "Defines the type of automatic completion the browser can use.\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete"
},
{
"name": "disable-validity-reporting",
"description": ""
Expand Down

0 comments on commit e666349

Please sign in to comment.