Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added inputMode support to dnn-input #1214

Merged
merged 2 commits into from
Oct 26, 2024
Merged

Added inputMode support to dnn-input #1214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
817af7d
Added inputMode support to dnn-input
valadas Oct 26, 2024
2d42bce
Commits generates files from earlier changes
valadas Oct 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions packages/stencil-library/custom-elements.json
View file
Open in desktop
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
View file
Open in desktop
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
1 change: 1 addition & 0 deletions packages/stencil-library/src/components/dnn-autocomplete/readme.md
View file
Open in desktop
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
View file
Open in desktop
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 @@ -179,6 +186,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 @@ -215,6 +255,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 @@ -260,5 +301,5 @@ export class DnnInput {
</dnn-fieldset>
</Host>
);
}
}
}
1 change: 1 addition & 0 deletions packages/stencil-library/src/components/dnn-input/readme.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading