124 lines
2.7 KiB
Text
124 lines
2.7 KiB
Text
import { Story, Meta, html } from '@open-wc/demoing-storybook';
|
|
import { loadDefaultFeedbackMessages, Validator } from '@lion/validate';
|
|
|
|
import '../lion-input-email.js';
|
|
|
|
<Meta title="Forms/Input Email" parameters={{ component: 'lion-input-email' }} />
|
|
|
|
# Input Email
|
|
|
|
`lion-input-email` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an email.
|
|
|
|
<Story name="Default">
|
|
{() => {
|
|
loadDefaultFeedbackMessages();
|
|
return html`
|
|
<lion-input-email label="Email" name="email"></lion-input-email>
|
|
`;
|
|
}}
|
|
</Story>
|
|
|
|
```html
|
|
<lion-input-email label="Email" name="email"></lion-input-email>
|
|
```
|
|
|
|
## Features
|
|
|
|
- Based on [lion-input](?path=/docs/forms-input--default-story)
|
|
- Makes use of email [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
|
|
- IsEmail (default)
|
|
|
|
## How to use
|
|
|
|
### Installation
|
|
|
|
```sh
|
|
npm i --save @lion/input-email
|
|
```
|
|
|
|
```js
|
|
import '@lion/input-email/lion-input-email.js';
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Faulty Prefilled
|
|
|
|
When prefilling with a faulty input, an error feedback message will show.
|
|
|
|
Use `loadDefaultFeedbackMessages` to get our default feedback messages displayed on it.
|
|
|
|
<Story name="Faulty prefilled">
|
|
{html`
|
|
<lion-input-email .modelValue=${'foo'} label="Email"></lion-input-email>
|
|
`}
|
|
</Story>
|
|
|
|
```js
|
|
import { loadDefaultFeedbackMessages } from '@lion/validate';
|
|
|
|
loadDefaultFeedbackMessages();
|
|
```
|
|
|
|
```html
|
|
<lion-input-email .modelValue=${'foo'} label="Email"></lion-input-email>
|
|
```
|
|
|
|
### Custom Validator
|
|
|
|
<Story name="Custom Validator">
|
|
{() => {
|
|
class GmailOnly extends Validator {
|
|
static get validatorName() {
|
|
return 'GmailOnly';
|
|
}
|
|
execute(value) {
|
|
let hasError = false;
|
|
if (!(value.indexOf('gmail.com') !== -1)) {
|
|
hasError = true;
|
|
}
|
|
return hasError;
|
|
}
|
|
static async getMessage() {
|
|
return 'You can only use gmail.com email addresses.';
|
|
}
|
|
}
|
|
return html`
|
|
<lion-input-email
|
|
.modelValue=${'foo@bar.com'}
|
|
.validators=${[new GmailOnly()]}
|
|
label="Email"
|
|
></lion-input-email>
|
|
`;
|
|
}}
|
|
</Story>
|
|
|
|
```js
|
|
import { Validator } from '@lion/validate';
|
|
|
|
class GmailOnly extends Validator {
|
|
static get validatorName() {
|
|
return 'GmailOnly';
|
|
}
|
|
|
|
execute(value) {
|
|
let hasError = false;
|
|
if (!(value.indexOf('gmail.com') !== -1)) {
|
|
hasError = true;
|
|
}
|
|
return hasError;
|
|
}
|
|
|
|
static async getMessage() {
|
|
return 'You can only use gmail.com email addresses.';
|
|
}
|
|
}
|
|
```
|
|
|
|
```html
|
|
<lion-input-email
|
|
.modelValue=${'foo@bar.com'}
|
|
.validators=${[new GmailOnly()]}
|
|
label="Email"
|
|
></lion-input-email>
|
|
```
|