80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
import { storiesOf, html } from '@open-wc/demoing-storybook';
|
|
import { maxLengthValidator } from '@lion/validate';
|
|
import { localize, LocalizeMixin } from '@lion/localize';
|
|
import { LionInput } from '../index.js';
|
|
|
|
storiesOf('Forms|Input Localize', module).add('localize', () => {
|
|
class InputValidationExample extends LocalizeMixin(LionInput) {
|
|
static get localizeNamespaces() {
|
|
return [
|
|
{ 'input-localize-example': locale => import(`./translations/${locale}.js`) },
|
|
...super.localizeNamespaces,
|
|
];
|
|
}
|
|
|
|
async onLocaleUpdated() {
|
|
super.onLocaleUpdated();
|
|
await this.localizeNamespacesLoaded;
|
|
this.label = localize.msg('input-localize-example:label');
|
|
}
|
|
}
|
|
|
|
if (!customElements.get('input-localize-example')) {
|
|
customElements.define('input-localize-example', InputValidationExample);
|
|
}
|
|
|
|
const notEqualsString = (value, stringValue) => stringValue.toString() !== value;
|
|
const notEqualsStringValidator = (...factoryParams) => [
|
|
(...params) => ({ notEqualsString: notEqualsString(...params) }),
|
|
factoryParams,
|
|
];
|
|
|
|
return html`
|
|
<input-localize-example
|
|
.errorValidators=${[maxLengthValidator(5)]}
|
|
.modelValue=${'default validator'}
|
|
></input-localize-example>
|
|
<input-localize-example
|
|
.errorValidators=${[notEqualsStringValidator('custom validator')]}
|
|
.modelValue=${'custom validator'}
|
|
></input-localize-example>
|
|
<p>
|
|
Change the locale with the buttons below:
|
|
<button
|
|
@click=${() => {
|
|
localize.locale = 'de-DE';
|
|
}}
|
|
>
|
|
DE
|
|
</button>
|
|
<button
|
|
@click=${() => {
|
|
localize.locale = 'en-GB';
|
|
}}
|
|
>
|
|
EN
|
|
</button>
|
|
<button
|
|
@click=${() => {
|
|
localize.locale = 'fr-FR';
|
|
}}
|
|
>
|
|
FR
|
|
</button>
|
|
<button
|
|
@click=${() => {
|
|
localize.locale = 'nl-NL';
|
|
}}
|
|
>
|
|
NL
|
|
</button>
|
|
<button
|
|
@click=${() => {
|
|
localize.locale = 'zh-CN';
|
|
}}
|
|
>
|
|
CN
|
|
</button>
|
|
</p>
|
|
`;
|
|
});
|