feat: merge field/validate/choice-input/form-group into @lion/form-core
This commit is contained in:
Thijs Louisse
Thomas Allmer
parent
f008ee42a7
commit
6170374ee8
204 changed files with 1308 additions and 5161 deletions
|
|
@ -1,3 +1,4 @@
|
|||
node_modules
|
||||
coverage/
|
||||
bundlesize/
|
||||
.history/
|
||||
|
|
|
|||
|
|
@ -47,23 +47,32 @@ module.exports = {
|
|||
generateBundle() {
|
||||
this.emitFile({
|
||||
type: 'asset',
|
||||
fileName: 'packages/form-system/dev-assets/FormatMixinDiagram-1.svg',
|
||||
fileName: 'packages/form-integrations/dev-assets/FormatMixinDiagram-1.svg',
|
||||
source: fs.readFileSync(
|
||||
path.join(__dirname, '../packages/form-system/dev-assets/FormatMixinDiagram-1.svg'),
|
||||
path.join(
|
||||
__dirname,
|
||||
'../packages/form-integrations/dev-assets/FormatMixinDiagram-1.svg',
|
||||
),
|
||||
),
|
||||
});
|
||||
this.emitFile({
|
||||
type: 'asset',
|
||||
fileName: 'packages/form-system/dev-assets/FormatMixinDiagram-2.svg',
|
||||
fileName: 'packages/form-integrations/dev-assets/FormatMixinDiagram-2.svg',
|
||||
source: fs.readFileSync(
|
||||
path.join(__dirname, '../packages/form-system/dev-assets/FormatMixinDiagram-2.svg'),
|
||||
path.join(
|
||||
__dirname,
|
||||
'../packages/form-integrations/dev-assets/FormatMixinDiagram-2.svg',
|
||||
),
|
||||
),
|
||||
});
|
||||
this.emitFile({
|
||||
type: 'asset',
|
||||
fileName: 'packages/form-system/dev-assets/FormatMixinDiagram-3.svg',
|
||||
fileName: 'packages/form-integrations/dev-assets/FormatMixinDiagram-3.svg',
|
||||
source: fs.readFileSync(
|
||||
path.join(__dirname, '../packages/form-system/dev-assets/FormatMixinDiagram-3.svg'),
|
||||
path.join(
|
||||
__dirname,
|
||||
'../packages/form-integrations/dev-assets/FormatMixinDiagram-3.svg',
|
||||
),
|
||||
),
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -59,9 +59,8 @@ The accessibility column indicates whether the functionality is accessible in it
|
|||
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------------- |
|
||||
| **-- Forms --** | | | ✔️ |
|
||||
| [form](?path=/docs/forms-form-overview--page) | [](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements | ✔️ |
|
||||
| [field](?path=/docs/forms-system-overview--page) | [](https://www.npmjs.com/package/@lion/field) | Base Class for all inputs | ✔️ |
|
||||
| [form-core](?path=/docs/forms-system-overview--page) | [](https://www.npmjs.com/package/@lion/field) | Core functionality for all form controls | ✔️ |
|
||||
| [fieldset](?path=/docs/forms-fieldset-overview--page) | [](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs | ✔️ |
|
||||
| [validate](?path=/docs/form-system-validate-system--page) | [](https://www.npmjs.com/package/@lion/validate) | Validation for form components | n/a |
|
||||
| [checkbox](?path=/docs/forms-checkbox--default-story) | [](https://www.npmjs.com/package/@lion/checkbox) | Checkbox form element | ✔️ |
|
||||
| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | [](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes | ✔️ |
|
||||
| [input](?path=/docs/forms-input--default-story) | [](https://www.npmjs.com/package/@lion/input) | Input element for strings | ✔️ |
|
||||
|
|
|
|||
|
|
@ -2,12 +2,11 @@ import '../packages/ajax/index.js';
|
|||
import '../packages/button/index.js';
|
||||
import '../packages/calendar/index.js';
|
||||
import '../packages/checkbox-group/index.js';
|
||||
import '../packages/choice-input/index.js';
|
||||
import '../packages/core/index.js';
|
||||
import '../packages/dialog/index.js';
|
||||
import '../packages/field/index.js';
|
||||
import '../packages/fieldset/index.js';
|
||||
import '../packages/form/index.js';
|
||||
import '../packages/form-core/index.js';
|
||||
import '../packages/icon/index.js';
|
||||
import '../packages/input/index.js';
|
||||
import '../packages/input-amount/index.js';
|
||||
|
|
@ -24,4 +23,4 @@ import '../packages/switch/index.js';
|
|||
import '../packages/tabs/index.js';
|
||||
import '../packages/textarea/index.js';
|
||||
import '../packages/tooltip/index.js';
|
||||
import '../packages/validate/index.js';
|
||||
import '../packages/validate-messages/index.js';
|
||||
|
|
|
|||
|
|
@ -183,9 +183,7 @@ export const distributeNewElements = () => {
|
|||
},
|
||||
);
|
||||
}
|
||||
return html`
|
||||
<lea-tabs-experimental></lea-tabs-experimental>
|
||||
`;
|
||||
return html` <lea-tabs-experimental></lea-tabs-experimental> `;
|
||||
};
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ Its purpose is to provide a way for users to check **multiple** options amongst
|
|||
|
||||
```js script
|
||||
import { html } from 'lit-html';
|
||||
import { Required, Validator, loadDefaultFeedbackMessages } from '@lion/validate';
|
||||
import { Required, Validator } from '@lion/form-core';
|
||||
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
|
||||
import './lion-checkbox-group.js';
|
||||
import './lion-checkbox.js';
|
||||
|
||||
|
|
@ -38,7 +39,8 @@ export const main = () => html`
|
|||
|
||||
## Features
|
||||
|
||||
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
|
||||
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page),
|
||||
it has all the features a fieldset has.
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
@ -57,7 +59,8 @@ import '@lion/checkbox-group/lion-checkbox.js';
|
|||
|
||||
The `modelValue` of a `lion-checkbox-group` is an array containing the `choiceValues` of the `lion-checkbox` elements that have been checked.
|
||||
|
||||
Given the scientists example above, say that we were to select the first and last options (Archimedes & Marie Curie).
|
||||
Given the scientists example above, say that we were to select the first and last options
|
||||
(Archimedes & Marie Curie).
|
||||
|
||||
Then the `modelValue` of the `lion-checkbox-group` will look as follows:
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
"lion-checkbox-group.js"
|
||||
],
|
||||
"dependencies": {
|
||||
"@lion/choice-input": "0.9.1",
|
||||
"@lion/form-core": "0.0.0",
|
||||
"@lion/core": "0.6.0",
|
||||
"@lion/fieldset": "0.12.0",
|
||||
"@lion/input": "0.6.1"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { LionInput } from '@lion/input';
|
||||
import { ChoiceInputMixin } from '@lion/choice-input';
|
||||
import { ChoiceInputMixin } from '@lion/form-core';
|
||||
|
||||
export class LionCheckbox extends ChoiceInputMixin(LionInput) {
|
||||
connectedCallback() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { LitElement } from '@lion/core';
|
||||
import { ChoiceGroupMixin } from '@lion/choice-input';
|
||||
import { FormGroupMixin } from '@lion/fieldset';
|
||||
import { ChoiceGroupMixin, FormGroupMixin } from '@lion/form-core';
|
||||
|
||||
/**
|
||||
* A wrapper around multiple checkboxes
|
||||
|
|
|
|||
|
|
@ -1,928 +0,0 @@
|
|||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [0.9.1](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.9.0...@lion/choice-input@0.9.1) (2020-05-27)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [0.9.0](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.8.2...@lion/choice-input@0.9.0) (2020-05-18)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* use singleton manager to support nested npm installations ([e2eb0e0](https://github.com/ing-bank/lion/commit/e2eb0e0077b9efed9382701461753778f63cad48))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.8.2](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.8.1...@lion/choice-input@0.8.2) (2020-04-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add display:none for hidden ([#692](https://github.com/ing-bank/lion/issues/692)) ([9731771](https://github.com/ing-bank/lion/commit/9731771c23a5ed8661558e62cb5e34b62cc2b8b7))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.8.1](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.8.0...@lion/choice-input@0.8.1) (2020-04-02)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [0.8.0](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.7.7...@lion/choice-input@0.8.0) (2020-03-25)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **field:** align (pre)filled and empty, fix filled not working ([e397f8d](https://github.com/ing-bank/lion/commit/e397f8d68b44c2ccb6447a908a97ace6568738ad))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.7.7](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.7.6...@lion/choice-input@0.7.7) (2020-03-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* normalization model-value-changed events ([1b6c3a4](https://github.com/ing-bank/lion/commit/1b6c3a44c820b9d61c26849b91bbb1bc8d6c772b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.7.6](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.7.5...@lion/choice-input@0.7.6) (2020-03-12)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **choice-input:** fix serializedValue setter check ([0445b86](https://github.com/ing-bank/lion/commit/0445b86350f65649c03ed84bfaf9652838c43e55))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.7.5](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.7.4...@lion/choice-input@0.7.5) (2020-03-05)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.7.4](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.7.3...@lion/choice-input@0.7.4) (2020-03-04)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.7.3](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.7.2...@lion/choice-input@0.7.3) (2020-03-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* normalize subclasser apis ([ce0630f](https://github.com/ing-bank/lion/commit/ce0630f32b2206813e5cfd2c7842b2faa5141591))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.7.2](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.7.1...@lion/choice-input@0.7.2) (2020-03-01)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.7.1](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.7.0...@lion/choice-input@0.7.1) (2020-02-26)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [0.7.0](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.6.2...@lion/choice-input@0.7.0) (2020-02-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* api normalisation formElements and values ([9b905c4](https://github.com/ing-bank/lion/commit/9b905c492a0c0d2226cc1d75c73e2e70dc97815a))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.6.2](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.6.1...@lion/choice-input@0.6.2) (2020-02-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* reduce storybook chunck sizes for more performance ([9fc5606](https://github.com/ing-bank/lion/commit/9fc560605f5dcf6e9abcf8d58079c59f12750046))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.6.1](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.6.0...@lion/choice-input@0.6.1) (2020-02-10)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [0.6.0](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.5.9...@lion/choice-input@0.6.0) (2020-02-06)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* flatten modelValue and remove checkedValue ([848ff06](https://github.com/ing-bank/lion/commit/848ff06887c86532e60d33d2db67d1152910d9cb))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.5.9](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.5.8...@lion/choice-input@0.5.9) (2020-02-06)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.5.8](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.5.7...@lion/choice-input@0.5.8) (2020-02-06)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.5.7](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.5.6...@lion/choice-input@0.5.7) (2020-02-05)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.5.6](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.5.5...@lion/choice-input@0.5.6) (2020-02-05)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.5.5](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.5.4...@lion/choice-input@0.5.5) (2020-02-03)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.5.4](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.5.3...@lion/choice-input@0.5.4) (2020-01-23)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.5.3](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.5.2...@lion/choice-input@0.5.3) (2020-01-23)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.5.2](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.5.1...@lion/choice-input@0.5.2) (2020-01-20)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.5.1](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.5.0...@lion/choice-input@0.5.1) (2020-01-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* update storybook and use main.js ([e61e0b9](https://github.com/ing-bank/lion/commit/e61e0b938ff72cc18cc0b3aa1560f2cece0c9fe6))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [0.5.0](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.11...@lion/choice-input@0.5.0) (2020-01-13)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* improved storybook demos ([89b835a](https://github.com/ing-bank/lion/commit/89b835a79998c45a28093de01f69216c35009a40))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.11](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.10...@lion/choice-input@0.4.11) (2020-01-08)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.10](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.9...@lion/choice-input@0.4.10) (2019-12-13)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.9](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.8...@lion/choice-input@0.4.9) (2019-12-04)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.8](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.7...@lion/choice-input@0.4.8) (2019-12-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* let lerna publish fixed versions ([bc7448c](https://github.com/ing-bank/lion/commit/bc7448c694deb3c05fd3d083a9acb5365b26b7ab))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.7](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.6...@lion/choice-input@0.4.7) (2019-12-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* use strict versions to get correct deps on older versions ([8645c13](https://github.com/ing-bank/lion/commit/8645c13b1d77e488713f2e5e0e4e00c4d30ea1ee))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.6](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.5...@lion/choice-input@0.4.6) (2019-12-01)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.5](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.4...@lion/choice-input@0.4.5) (2019-11-28)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.4](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.3...@lion/choice-input@0.4.4) (2019-11-27)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.3](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.2...@lion/choice-input@0.4.3) (2019-11-27)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.2](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.1...@lion/choice-input@0.4.2) (2019-11-26)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.1](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.4.0...@lion/choice-input@0.4.1) (2019-11-22)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [0.4.0](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.3.1...@lion/choice-input@0.4.0) (2019-11-18)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* finalize validation and adopt it everywhere ([396deb2](https://github.com/ing-bank/lion/commit/396deb2e3b4243f102a5c98e9b0518fa0f31a6b1))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.3.1](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.3.0...@lion/choice-input@0.3.1) (2019-11-15)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [0.3.0](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.44...@lion/choice-input@0.3.0) (2019-11-13)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* remove all deprecations from lion ([66d3d39](https://github.com/ing-bank/lion/commit/66d3d390aebeaa61b6effdea7d5f7eea0e89c894))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.44](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.43...@lion/choice-input@0.2.44) (2019-11-12)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.43](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.42...@lion/choice-input@0.2.43) (2019-11-06)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.42](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.41...@lion/choice-input@0.2.42) (2019-11-01)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.41](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.40...@lion/choice-input@0.2.41) (2019-10-25)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.40](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.39...@lion/choice-input@0.2.40) (2019-10-23)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.39](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.38...@lion/choice-input@0.2.39) (2019-10-23)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.38](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.37...@lion/choice-input@0.2.38) (2019-10-21)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.37](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.36...@lion/choice-input@0.2.37) (2019-10-14)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.36](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.35...@lion/choice-input@0.2.36) (2019-10-11)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.35](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.34...@lion/choice-input@0.2.35) (2019-10-09)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.34](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.33...@lion/choice-input@0.2.34) (2019-10-07)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.33](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.32...@lion/choice-input@0.2.33) (2019-09-30)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.32](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.31...@lion/choice-input@0.2.32) (2019-09-27)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.31](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.30...@lion/choice-input@0.2.31) (2019-09-25)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.30](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.29...@lion/choice-input@0.2.30) (2019-09-20)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.29](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.28...@lion/choice-input@0.2.29) (2019-09-19)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.28](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.27...@lion/choice-input@0.2.28) (2019-09-13)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.27](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.26...@lion/choice-input@0.2.27) (2019-08-23)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.26](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.25...@lion/choice-input@0.2.26) (2019-08-17)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.25](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.24...@lion/choice-input@0.2.25) (2019-08-15)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.24](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.23...@lion/choice-input@0.2.24) (2019-08-15)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.23](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.22...@lion/choice-input@0.2.23) (2019-08-14)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.22](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.21...@lion/choice-input@0.2.22) (2019-08-07)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.21](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.20...@lion/choice-input@0.2.21) (2019-08-07)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.20](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.19...@lion/choice-input@0.2.20) (2019-07-30)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.19](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.18...@lion/choice-input@0.2.19) (2019-07-30)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.18](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.17...@lion/choice-input@0.2.18) (2019-07-25)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.17](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.16...@lion/choice-input@0.2.17) (2019-07-24)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.16](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.15...@lion/choice-input@0.2.16) (2019-07-23)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.15](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.14...@lion/choice-input@0.2.15) (2019-07-23)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.14](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.13...@lion/choice-input@0.2.14) (2019-07-23)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.13](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.12...@lion/choice-input@0.2.13) (2019-07-19)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.12](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.11...@lion/choice-input@0.2.12) (2019-07-19)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.11](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.10...@lion/choice-input@0.2.11) (2019-07-18)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.10](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.9...@lion/choice-input@0.2.10) (2019-07-17)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.9](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.8...@lion/choice-input@0.2.9) (2019-07-16)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.8](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.7...@lion/choice-input@0.2.8) (2019-07-16)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.7](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.6...@lion/choice-input@0.2.7) (2019-07-15)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.6](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.5...@lion/choice-input@0.2.6) (2019-07-15)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.5](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.4...@lion/choice-input@0.2.5) (2019-07-09)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.4](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.3...@lion/choice-input@0.2.4) (2019-07-04)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.3](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.2...@lion/choice-input@0.2.3) (2019-07-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **choice-input:** tests for empty modelValue ([caedb05](https://github.com/ing-bank/lion/commit/caedb05))
|
||||
* **field:** don't return Unparseable on empty strings ([6a85dbc](https://github.com/ing-bank/lion/commit/6a85dbc))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.2](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.1...@lion/choice-input@0.2.2) (2019-07-02)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.1](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.2.0...@lion/choice-input@0.2.1) (2019-06-27)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [0.2.0](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.22...@lion/choice-input@0.2.0) (2019-06-25)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **choice-input:** api normalization and cleanup ([2870e0d](https://github.com/ing-bank/lion/commit/2870e0d))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.22](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.21...@lion/choice-input@0.1.22) (2019-06-24)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.21](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.20...@lion/choice-input@0.1.21) (2019-06-20)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.20](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.19...@lion/choice-input@0.1.20) (2019-06-18)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.19](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.18...@lion/choice-input@0.1.19) (2019-06-06)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.18](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.17...@lion/choice-input@0.1.18) (2019-06-04)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.17](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.16...@lion/choice-input@0.1.17) (2019-05-31)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.16](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.15...@lion/choice-input@0.1.16) (2019-05-31)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.15](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.14...@lion/choice-input@0.1.15) (2019-05-29)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.14](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.13...@lion/choice-input@0.1.14) (2019-05-29)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.13](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.12...@lion/choice-input@0.1.13) (2019-05-24)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.12](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.11...@lion/choice-input@0.1.12) (2019-05-22)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.11](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.10...@lion/choice-input@0.1.11) (2019-05-17)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.10](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.9...@lion/choice-input@0.1.10) (2019-05-16)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.9](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.8...@lion/choice-input@0.1.9) (2019-05-16)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.8](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.7...@lion/choice-input@0.1.8) (2019-05-13)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.7](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.6...@lion/choice-input@0.1.7) (2019-05-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add prepublish step to make links absolute for npm docs ([9f2c4f6](https://github.com/ing-bank/lion/commit/9f2c4f6))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.6](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.5...@lion/choice-input@0.1.6) (2019-05-08)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.5](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.4...@lion/choice-input@0.1.5) (2019-05-07)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.4](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.3...@lion/choice-input@0.1.4) (2019-04-29)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.3](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.2...@lion/choice-input@0.1.3) (2019-04-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* update storybook/linting; adjust story labels, eslint ignores ([8d96f84](https://github.com/ing-bank/lion/commit/8d96f84))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.2](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.1...@lion/choice-input@0.1.2) (2019-04-27)
|
||||
|
||||
**Note:** Version bump only for package @lion/choice-input
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.1](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.1.0...@lion/choice-input@0.1.1) (2019-04-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add missing files to npm packages ([0e3ca17](https://github.com/ing-bank/lion/commit/0e3ca17))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 0.1.0 (2019-04-26)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* release inital public lion version ([ec8da8f](https://github.com/ing-bank/lion/commit/ec8da8f))
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export { ChoiceGroupMixin } from './src/ChoiceGroupMixin.js';
|
||||
export { ChoiceInputMixin } from './src/ChoiceInputMixin.js';
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
{
|
||||
"name": "@lion/choice-input",
|
||||
"version": "0.9.1",
|
||||
"description": "Base for all choise inputs like checkbox/radio",
|
||||
"author": "ing-bank",
|
||||
"homepage": "https://github.com/ing-bank/lion/",
|
||||
"license": "MIT",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/ing-bank/lion.git",
|
||||
"directory": "packages/choice-input"
|
||||
},
|
||||
"scripts": {
|
||||
"prepublishOnly": "../../scripts/npm-prepublish.js",
|
||||
"test": "cd ../../ && yarn test:browser --grep \"packages/choice-input/test/**/*.test.js\"",
|
||||
"test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/choice-input/test/**/*.test.js\""
|
||||
},
|
||||
"keywords": [
|
||||
"lion",
|
||||
"web-components",
|
||||
"choice-input"
|
||||
],
|
||||
"main": "index.js",
|
||||
"module": "index.js",
|
||||
"files": [
|
||||
"docs",
|
||||
"src",
|
||||
"stories",
|
||||
"test",
|
||||
"translations",
|
||||
"*.js"
|
||||
],
|
||||
"sideEffects": false,
|
||||
"dependencies": {
|
||||
"@lion/core": "0.6.0",
|
||||
"@lion/field": "0.13.1"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,9 +0,0 @@
|
|||
export { FocusMixin } from './src/FocusMixin.js';
|
||||
export { FormatMixin } from './src/FormatMixin.js';
|
||||
export { FormControlMixin } from './src/FormControlMixin.js';
|
||||
export { InteractionStateMixin } from './src/InteractionStateMixin.js'; // applies FocusMixin
|
||||
export { LionField } from './src/LionField.js';
|
||||
export { FormRegisteringMixin } from './src/registration/FormRegisteringMixin.js';
|
||||
export { FormRegistrarMixin } from './src/registration/FormRegistrarMixin.js';
|
||||
export { FormRegistrarPortalMixin } from './src/registration/FormRegistrarPortalMixin.js';
|
||||
export { FormControlsCollection } from './src/registration/FormControlsCollection.js';
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { formFixture } from './test-helpers/formFixture.js';
|
||||
|
|
@ -6,7 +6,8 @@
|
|||
import { html } from 'lit-html';
|
||||
import '@lion/input/lion-input.js';
|
||||
import { localize } from '@lion/localize';
|
||||
import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate';
|
||||
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
|
||||
import { MinLength, Validator, Required } from '@lion/form-core';
|
||||
import './lion-fieldset.js';
|
||||
import './docs/helpers/demo-fieldset-child.js';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { LionField } from '@lion/field';
|
||||
import { LionField } from '@lion/form-core';
|
||||
|
||||
customElements.define(
|
||||
'demo-fieldset-child',
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
export { LionFieldset } from './src/LionFieldset.js';
|
||||
export { FormGroupMixin } from './src/FormGroupMixin.js';
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@lion/core": "0.6.0",
|
||||
"@lion/field": "0.13.1",
|
||||
"@lion/validate": "0.11.0"
|
||||
"@lion/form-core": "0.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { LitElement } from '@lion/core';
|
||||
import { FormGroupMixin } from './FormGroupMixin.js';
|
||||
import { FormGroupMixin } from '@lion/form-core';
|
||||
|
||||
/**
|
||||
* @desc LionFieldset is basically a 'sub form' and can have its own nested sub forms.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { LionField } from '@lion/field';
|
||||
import '@lion/field/lion-field.js';
|
||||
import { formFixture as fixture } from '@lion/field/test-helpers.js';
|
||||
import { LionField, IsNumber, Validator } from '@lion/form-core';
|
||||
import '@lion/form-core/lion-field.js';
|
||||
import { formFixture as fixture } from '@lion/form-core/test-helpers.js';
|
||||
import { localizeTearDown } from '@lion/localize/test-helpers.js';
|
||||
import { IsNumber, Validator } from '@lion/validate';
|
||||
import {
|
||||
defineCE,
|
||||
expect,
|
||||
|
|
@ -300,7 +299,9 @@ describe('<lion-fieldset>', () => {
|
|||
|
||||
it('does not propagate/override initial disabled value on nested form elements', async () => {
|
||||
const el = await fixture(
|
||||
html`<${tag}><${tag} name="sub" disabled>${inputSlots}</${tag}></${tag}>`,
|
||||
html`<${tag}>
|
||||
<${tag} name="sub" disabled>${inputSlots}</${tag}>
|
||||
</${tag}>`,
|
||||
);
|
||||
await el.updateComplete;
|
||||
expect(el.disabled).to.equal(false);
|
||||
|
|
@ -355,10 +356,9 @@ describe('<lion-fieldset>', () => {
|
|||
|
||||
const el = await fixture(html`
|
||||
<${tag}>
|
||||
<${childTag} name="color"
|
||||
.validators=${[new IsCat()]}
|
||||
.modelValue=${'blue'}
|
||||
></${childTag}>
|
||||
<${childTag} name="color" .validators=${[
|
||||
new IsCat(),
|
||||
]} .modelValue=${'blue'}></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await nextFrame();
|
||||
|
|
@ -387,10 +387,9 @@ describe('<lion-fieldset>', () => {
|
|||
|
||||
const el = await fixture(html`
|
||||
<${tag}>
|
||||
<${childTag} name="color"
|
||||
.validators=${[new IsCat()]}
|
||||
.modelValue=${'blue'}
|
||||
></${childTag}>
|
||||
<${childTag} name="color" .validators=${[
|
||||
new IsCat(),
|
||||
]} .modelValue=${'blue'}></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await nextFrame();
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ Then we follow the steps below:
|
|||
Steps as described can be implemented with the following javascript:
|
||||
|
||||
```js
|
||||
import { LionField } from '@lion/field';
|
||||
import { LionField } from '@lion/form-core';
|
||||
import './my-slider.js';
|
||||
|
||||
export class LionSlider extends LionField {
|
||||
|
|
@ -5,14 +5,9 @@
|
|||
```js script
|
||||
import { html } from '@lion/core';
|
||||
import { LionInput } from '@lion/input';
|
||||
import {
|
||||
Required,
|
||||
IsString,
|
||||
MaxLength,
|
||||
DefaultSuccess,
|
||||
Validator,
|
||||
loadDefaultFeedbackMessages,
|
||||
} from '@lion/validate';
|
||||
import { Required, IsString, MaxLength, DefaultSuccess, Validator } from '@lion/form-core';
|
||||
|
||||
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
|
||||
|
||||
export default {
|
||||
title: 'Forms/Validation/Overview',
|
||||
|
|
@ -34,7 +29,7 @@ Our validation system is designed to:
|
|||
- allow for advanced UX scenarios by updating validation state on every value change
|
||||
- provide a powerful way of writing validations via classes
|
||||
|
||||
Validation is applied by default to all [form controls](../field/docs/FormFundaments.md) via the
|
||||
Validation is applied by default to all [form controls](../form-core/docs/FormFundaments.md) via the
|
||||
ValidateMixin.
|
||||
|
||||
For a detailed description of the validation system and the `ValidateMixin`, please see [ValidationSystem](./docs/ValidationSystem.md).
|
||||
|
|
@ -49,7 +44,7 @@ npm i --save @lion/validate
|
|||
|
||||
```js
|
||||
import '@lion/input/lion-input.js';
|
||||
import { %ValidatorName% } from '@lion/validate';
|
||||
import { %ValidatorName% } from '@lion/form-core';
|
||||
```
|
||||
|
||||
### Example
|
||||
|
|
@ -20,6 +20,7 @@ Together with [interaction states](?path=/docs/forms-system-interaction-states--
|
|||
validity states can determine whether a validation message should be shown along the input field.
|
||||
|
||||
## Assessing field validation state programmatically
|
||||
|
||||
When a field has validation feedback it can be accessed using the `hasFeedbackFor` and `showsFeedbackFor` properties.
|
||||
This can be used if the validity of the field is needed in code.
|
||||
|
||||
|
|
@ -30,12 +31,12 @@ interaction state such as a field being `touched` and `dirty`, `prefilled` or `s
|
|||
```js
|
||||
// Field is invalid and has not interacted with
|
||||
const field = document.querySelector('#my-field');
|
||||
field.hasFeedbackFor.includes('error') // returns true
|
||||
field.showsFeedbackFor.includes('error') // returns false
|
||||
field.hasFeedbackFor.includes('error'); // returns true
|
||||
field.showsFeedbackFor.includes('error'); // returns false
|
||||
|
||||
// Field invalid, dirty and touched
|
||||
field.hasFeedbackFor.includes('error') // returns true
|
||||
field.showsFeedbackFor.includes('error') // returns true
|
||||
field.hasFeedbackFor.includes('error'); // returns true
|
||||
field.showsFeedbackFor.includes('error'); // returns true
|
||||
```
|
||||
|
||||
## Validators
|
||||
52
packages/form-core/index.js
Normal file
52
packages/form-core/index.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
export { FocusMixin } from './src/FocusMixin.js';
|
||||
export { FormatMixin } from './src/FormatMixin.js';
|
||||
export { FormControlMixin } from './src/FormControlMixin.js';
|
||||
export { InteractionStateMixin } from './src/InteractionStateMixin.js'; // applies FocusMixin
|
||||
export { LionField } from './src/LionField.js';
|
||||
export { FormRegisteringMixin } from './src/registration/FormRegisteringMixin.js';
|
||||
export { FormRegistrarMixin } from './src/registration/FormRegistrarMixin.js';
|
||||
export { FormRegistrarPortalMixin } from './src/registration/FormRegistrarPortalMixin.js';
|
||||
export { FormControlsCollection } from './src/registration/FormControlsCollection.js';
|
||||
|
||||
// validate
|
||||
|
||||
export { ValidateMixin } from './src/validate/ValidateMixin.js';
|
||||
export { Unparseable } from './src/validate/Unparseable.js';
|
||||
export { Validator } from './src/validate/Validator.js';
|
||||
export { ResultValidator } from './src/validate/ResultValidator.js';
|
||||
|
||||
export { Required } from './src/validate/validators/Required.js';
|
||||
|
||||
export {
|
||||
IsString,
|
||||
EqualsLength,
|
||||
MinLength,
|
||||
MaxLength,
|
||||
MinMaxLength,
|
||||
IsEmail,
|
||||
Pattern,
|
||||
} from './src/validate/validators/StringValidators.js';
|
||||
|
||||
export {
|
||||
IsNumber,
|
||||
MinNumber,
|
||||
MaxNumber,
|
||||
MinMaxNumber,
|
||||
} from './src/validate/validators/NumberValidators.js';
|
||||
|
||||
export {
|
||||
IsDate,
|
||||
MinDate,
|
||||
MaxDate,
|
||||
MinMaxDate,
|
||||
IsDateDisabled,
|
||||
} from './src/validate/validators/DateValidators.js';
|
||||
|
||||
export { DefaultSuccess } from './src/validate/resultValidators/DefaultSuccess.js';
|
||||
|
||||
export { LionValidationFeedback } from './src/validate/LionValidationFeedback.js';
|
||||
|
||||
export { ChoiceGroupMixin } from './src/choice-group/ChoiceGroupMixin.js';
|
||||
export { ChoiceInputMixin } from './src/choice-group/ChoiceInputMixin.js';
|
||||
|
||||
export { FormGroupMixin } from './src/form-group/FormGroupMixin.js';
|
||||
3
packages/form-core/lion-validation-feedback.js
Normal file
3
packages/form-core/lion-validation-feedback.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { LionValidationFeedback } from './src/validate/LionValidationFeedback.js';
|
||||
|
||||
customElements.define('lion-validation-feedback', LionValidationFeedback);
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@lion/validate",
|
||||
"version": "0.11.0",
|
||||
"description": "Validate your form elements",
|
||||
"name": "@lion/form-core",
|
||||
"version": "0.0.0",
|
||||
"description": "Form-core contains all essential building blocks for creating form fields and fieldsets",
|
||||
"author": "ing-bank",
|
||||
"homepage": "https://github.com/ing-bank/lion/",
|
||||
"license": "MIT",
|
||||
|
|
@ -11,17 +11,17 @@
|
|||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/ing-bank/lion.git",
|
||||
"directory": "packages/validate"
|
||||
"directory": "packages/field"
|
||||
},
|
||||
"scripts": {
|
||||
"prepublishOnly": "../../scripts/npm-prepublish.js",
|
||||
"test": "cd ../../ && yarn test:browser --grep \"packages/validate/test/**/*.test.js\"",
|
||||
"test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/validate/test/**/*.test.js\""
|
||||
"test": "cd ../../ && yarn test:browser --grep \"packages/form-core/test/**/*.test.js\"",
|
||||
"test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/form-core/test/**/*.test.js\""
|
||||
},
|
||||
"keywords": [
|
||||
"lion",
|
||||
"web-components",
|
||||
"validate"
|
||||
"field"
|
||||
],
|
||||
"main": "index.js",
|
||||
"module": "index.js",
|
||||
|
|
@ -30,12 +30,13 @@
|
|||
"src",
|
||||
"stories",
|
||||
"test",
|
||||
"test-helpers",
|
||||
"test-suites",
|
||||
"test-helpers",
|
||||
"translations",
|
||||
"*.js"
|
||||
],
|
||||
"sideEffects": [
|
||||
"lion-field.js",
|
||||
"lion-validation-feedback.js"
|
||||
],
|
||||
"dependencies": {
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { css, dedupeMixin, html, nothing, SlotMixin } from '@lion/core';
|
||||
import { Unparseable } from '@lion/validate';
|
||||
import { Unparseable } from './validate/Unparseable.js';
|
||||
import { FormRegisteringMixin } from './registration/FormRegisteringMixin.js';
|
||||
import { getAriaElementsInRightDomOrder } from './utils/getAriaElementsInRightDomOrder.js';
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/* eslint-disable class-methods-use-this */
|
||||
|
||||
import { dedupeMixin } from '@lion/core';
|
||||
import { Unparseable } from '@lion/validate';
|
||||
import { Unparseable } from './validate/Unparseable.js';
|
||||
|
||||
// For a future breaking release:
|
||||
// - do not allow the private `.formattedValue` as property that can be set to
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { LitElement, SlotMixin } from '@lion/core';
|
||||
import { DisabledMixin } from '@lion/core/src/DisabledMixin.js';
|
||||
import { ValidateMixin } from '@lion/validate';
|
||||
import { ValidateMixin } from './validate/ValidateMixin.js';
|
||||
import { FocusMixin } from './FocusMixin.js';
|
||||
import { FormatMixin } from './FormatMixin.js';
|
||||
import { FormControlMixin } from './FormControlMixin.js';
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { dedupeMixin } from '@lion/core';
|
||||
import { FormRegistrarMixin, InteractionStateMixin } from '@lion/field';
|
||||
import { FormRegistrarMixin } from '../registration/FormRegistrarMixin.js';
|
||||
import { InteractionStateMixin } from '../InteractionStateMixin.js';
|
||||
|
||||
export const ChoiceGroupMixin = dedupeMixin(
|
||||
superclass =>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/* eslint-disable class-methods-use-this */
|
||||
|
||||
import { css, html, nothing } from '@lion/core';
|
||||
import { FormatMixin } from '@lion/field';
|
||||
import { FormatMixin } from '../FormatMixin.js';
|
||||
|
||||
export const ChoiceInputMixin = superclass =>
|
||||
// eslint-disable-next-line
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Validator } from '@lion/validate';
|
||||
import { Validator } from '../validate/Validator.js';
|
||||
|
||||
export class FormElementsHaveNoError extends Validator {
|
||||
static get validatorName() {
|
||||
|
|
@ -1,19 +1,20 @@
|
|||
import { dedupeMixin, html, SlotMixin } from '@lion/core';
|
||||
import { DisabledMixin } from '@lion/core/src/DisabledMixin.js';
|
||||
import { FormControlMixin, FormControlsCollection, FormRegistrarMixin } from '@lion/field';
|
||||
import { getAriaElementsInRightDomOrder } from '@lion/field/src/utils/getAriaElementsInRightDomOrder.js';
|
||||
import { ValidateMixin } from '@lion/validate';
|
||||
import { FormControlMixin } from '../FormControlMixin.js';
|
||||
import { FormControlsCollection } from '../registration/FormControlsCollection.js';
|
||||
import { FormRegistrarMixin } from '../registration/FormRegistrarMixin.js';
|
||||
import { ValidateMixin } from '../validate/ValidateMixin.js';
|
||||
import { getAriaElementsInRightDomOrder } from '../utils/getAriaElementsInRightDomOrder.js';
|
||||
import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
|
||||
|
||||
/**
|
||||
* @desc Form group mixin serves as the basis for (sub) forms. Designed to be put on
|
||||
* elements with role=group (or radiogroup)
|
||||
* elements with [role="group|radiogroup"] (think of checkbox-group, radio-group, fieldset).
|
||||
* It bridges all the functionality of the child form controls:
|
||||
* ValidateMixin, InteractionStateMixin, FormatMixin, FormControlMixin etc.
|
||||
* It is designed to be used on top of FormRegstrarMixin and ChoiceGroupMixin
|
||||
* Also, the LionFieldset element (which supports name based retrieval of children via formElements
|
||||
* and the automatic grouping of formElements via '[]')
|
||||
*
|
||||
* It is designed to be used on top of FormRegistrarMixin and ChoiceGroupMixin.
|
||||
* Also, it is th basis of the LionFieldset element (which supports name based retrieval of
|
||||
* children via formElements and the automatic grouping of formElements via '[]').
|
||||
*/
|
||||
export const FormGroupMixin = dedupeMixin(
|
||||
superclass =>
|
||||
|
|
@ -27,7 +28,6 @@ export const FormGroupMixin = dedupeMixin(
|
|||
* Interaction state that can be used to compute the visibility of
|
||||
* feedback messages
|
||||
*/
|
||||
// TODO: Move property submitted to InteractionStateMixin.
|
||||
submitted: {
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
// TODO: still needed? It can be solved with while loop as well
|
||||
|
||||
/**
|
||||
* Use the `.add` method to add async functions to the queue
|
||||
* Await the `.complete` if you want to ensure the queue is empty at any point
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { dedupeMixin } from '@lion/core';
|
||||
|
||||
// TODO: will be moved to @Lion/core later
|
||||
// TODO: will be moved to @Lion/core later?
|
||||
|
||||
/**
|
||||
* @desc Why this mixin?
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
// TODO: this method has to be removed when EventTarget polyfill is available on IE11
|
||||
// TODO: move to core and apply everywhere?
|
||||
// TODO: pascalCase this filename?
|
||||
export function fakeExtendsEventTarget(instance) {
|
||||
const delegate = document.createDocumentFragment();
|
||||
['addEventListener', 'dispatchEvent', 'removeEventListener'].forEach(funcName => {
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
// TODO: pascalCase this filename?
|
||||
export function pascalCase(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
/* eslint-disable class-methods-use-this, camelcase, no-param-reassign, max-classes-per-file */
|
||||
|
||||
import { dedupeMixin, ScopedElementsMixin, SlotMixin } from '@lion/core';
|
||||
// TODO: make form-core independent from localize
|
||||
import { localize } from '@lion/localize';
|
||||
import { LionValidationFeedback } from './LionValidationFeedback.js';
|
||||
import { ResultValidator } from './ResultValidator.js';
|
||||
import { Unparseable } from './Unparseable.js';
|
||||
import { AsyncQueue } from './utils/AsyncQueue.js';
|
||||
import { pascalCase } from './utils/pascal-case.js';
|
||||
import { SyncUpdatableMixin } from './utils/SyncUpdatableMixin.js';
|
||||
import { AsyncQueue } from '../utils/AsyncQueue.js';
|
||||
import { pascalCase } from '../utils/pascalCase.js';
|
||||
import { SyncUpdatableMixin } from '../utils/SyncUpdatableMixin.js';
|
||||
import { Validator } from './Validator.js';
|
||||
import { Required } from './validators/Required.js';
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { fakeExtendsEventTarget } from './utils/fake-extends-event-target.js';
|
||||
import { fakeExtendsEventTarget } from '../utils/fakeExtendsEventTarget.js';
|
||||
|
||||
export class Validator {
|
||||
constructor(param, config) {
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
/* eslint-disable max-classes-per-file */
|
||||
// TODO: move to input-datepicker?
|
||||
import { normalizeDateTime } from '@lion/localize';
|
||||
import { Validator } from '../Validator.js';
|
||||
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
export { formFixture } from './test-helpers/formFixture.js';
|
||||
export {
|
||||
AlwaysInvalid,
|
||||
AlwaysValid,
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/* eslint-disable max-classes-per-file, class-methods-use-this */
|
||||
import { Validator } from '../src/Validator.js';
|
||||
import { Validator } from '../src/validate/Validator.js';
|
||||
|
||||
export class AlwaysInvalid extends Validator {
|
||||
static get validatorName() {
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { LitElement } from '@lion/core';
|
||||
import { Unparseable, Validator } from '@lion/validate';
|
||||
import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
|
||||
import sinon from 'sinon';
|
||||
import { FormatMixin } from '../src/FormatMixin.js';
|
||||
import { Unparseable, Validator } from '../index.js';
|
||||
|
||||
function mimicUserInput(formControl, newViewValue) {
|
||||
formControl.value = newViewValue; // eslint-disable-line no-param-reassign
|
||||
|
|
@ -80,20 +80,16 @@ export function runFormatMixinSuite(customConfig) {
|
|||
}
|
||||
|
||||
elem = unsafeStatic(cfg.tagString);
|
||||
nonFormat = await fixture(html`<${elem}
|
||||
.formatter="${v => v}"
|
||||
.parser="${v => v}"
|
||||
.serializer="${v => v}"
|
||||
.deserializer="${v => v}"
|
||||
><input slot="input">
|
||||
</${elem}>`);
|
||||
nonFormat = await fixture(html`<${elem} .formatter="${v => v}" .parser="${v =>
|
||||
v}" .serializer="${v => v}" .deserializer="${v => v}"><input
|
||||
slot="input">
|
||||
</${elem}>`);
|
||||
fooFormat = await fixture(html`
|
||||
<${elem}
|
||||
.formatter="${value => `foo: ${value}`}"
|
||||
.parser="${value => value.replace('foo: ', '')}"
|
||||
.serializer="${value => `[foo] ${value}`}"
|
||||
.deserializer="${value => value.replace('[foo] ', '')}"
|
||||
><input slot="input">
|
||||
<${elem} .formatter="${value => `foo: ${value}`}" .parser="${value =>
|
||||
value.replace('foo: ', '')}"
|
||||
.serializer="${value => `[foo] ${value}`}" .deserializer="${value =>
|
||||
value.replace('[foo] ', '')}"><input
|
||||
slot="input">
|
||||
</${elem}>`);
|
||||
});
|
||||
|
||||
|
|
@ -182,13 +178,11 @@ export function runFormatMixinSuite(customConfig) {
|
|||
it('synchronizes _inputNode.value as a fallback mechanism', async () => {
|
||||
// Note that in lion-field, the attribute would be put on <lion-field>, not on <input>
|
||||
const formatElem = await fixture(html`
|
||||
<${elem}
|
||||
value="string",
|
||||
.formatter=${value => `foo: ${value}`}
|
||||
<${elem} value="string" , .formatter=${value => `foo: ${value}`}
|
||||
.parser=${value => value.replace('foo: ', '')}
|
||||
.serializer=${value => `[foo] ${value}`}
|
||||
.deserializer=${value => value.replace('[foo] ', '')}
|
||||
><input slot="input" value="string"/></${elem}>`);
|
||||
><input slot="input" value="string" /></${elem}>`);
|
||||
// Now check if the format/parse/serialize loop has been triggered
|
||||
await formatElem.updateComplete;
|
||||
expect(formatElem.formattedValue).to.equal('foo: string');
|
||||
|
|
@ -250,12 +244,7 @@ export function runFormatMixinSuite(customConfig) {
|
|||
const parserSpy = sinon.spy(value => value.replace('foo: ', ''));
|
||||
const serializerSpy = sinon.spy(value => `[foo] ${value}`);
|
||||
const el = await fixture(html`
|
||||
<${elem}
|
||||
.formatter=${formatterSpy}
|
||||
.parser=${parserSpy}
|
||||
.serializer=${serializerSpy}
|
||||
.modelValue=${'test'}
|
||||
>
|
||||
<${elem} .formatter=${formatterSpy} .parser=${parserSpy} .serializer=${serializerSpy} .modelValue=${'test'}>
|
||||
<input slot="input">
|
||||
</${elem}>
|
||||
`);
|
||||
|
|
@ -270,9 +259,7 @@ export function runFormatMixinSuite(customConfig) {
|
|||
const formatterSpy = sinon.spy(value => `foo: ${value}`);
|
||||
const generatedViewValue = generateValueBasedOnType({ viewValue: true });
|
||||
await fixture(html`
|
||||
<${elem}
|
||||
value="${generatedViewValue}"
|
||||
.formatter="${formatterSpy}"
|
||||
<${elem} value="${generatedViewValue}" .formatter="${formatterSpy}"
|
||||
.formatOptions="${{ locale: 'en-GB', decimalSeparator: '-' }}">
|
||||
<input slot="input" value="${generatedViewValue}">
|
||||
</${elem}>
|
||||
|
|
@ -362,8 +349,7 @@ export function runFormatMixinSuite(customConfig) {
|
|||
describe('Unparseable values', () => {
|
||||
it('should convert to Unparseable when wrong value inputted by user', async () => {
|
||||
const el = await fixture(html`
|
||||
<${elem}
|
||||
.parser=${viewValue => Number(viewValue) || undefined}
|
||||
<${elem} .parser=${viewValue => Number(viewValue) || undefined}
|
||||
>
|
||||
<input slot="input">
|
||||
</${elem}>
|
||||
|
|
@ -374,8 +360,7 @@ export function runFormatMixinSuite(customConfig) {
|
|||
|
||||
it('should preserve the viewValue when not parseable', async () => {
|
||||
const el = await fixture(html`
|
||||
<${elem}
|
||||
.parser=${viewValue => Number(viewValue) || undefined}
|
||||
<${elem} .parser=${viewValue => Number(viewValue) || undefined}
|
||||
>
|
||||
<input slot="input">
|
||||
</${elem}>
|
||||
|
|
@ -387,8 +372,7 @@ export function runFormatMixinSuite(customConfig) {
|
|||
|
||||
it('should display the viewValue when modelValue is of type Unparseable', async () => {
|
||||
const el = await fixture(html`
|
||||
<${elem}
|
||||
.parser=${viewValue => Number(viewValue) || undefined}
|
||||
<${elem} .parser=${viewValue => Number(viewValue) || undefined}
|
||||
>
|
||||
<input slot="input">
|
||||
</${elem}>
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
import { html, LitElement } from '@lion/core';
|
||||
import { formFixture as fixture } from '@lion/field/test-helpers.js';
|
||||
import { FormGroupMixin } from '@lion/fieldset';
|
||||
import { formFixture as fixture } from '@lion/form-core/test-helpers.js';
|
||||
import '@lion/fieldset/lion-fieldset.js';
|
||||
import { LionInput } from '@lion/input';
|
||||
import { Required } from '@lion/validate';
|
||||
import { FormGroupMixin, Required } from '@lion/form-core';
|
||||
import { expect, nextFrame } from '@open-wc/testing';
|
||||
import { ChoiceGroupMixin } from '../src/ChoiceGroupMixin.js';
|
||||
import { ChoiceInputMixin } from '../src/ChoiceInputMixin.js';
|
||||
import { ChoiceGroupMixin } from '../../src/choice-group/ChoiceGroupMixin.js';
|
||||
import { ChoiceInputMixin } from '../../src/choice-group/ChoiceInputMixin.js';
|
||||
|
||||
describe('ChoiceGroupMixin', () => {
|
||||
before(() => {
|
||||
|
|
@ -278,11 +277,11 @@ describe('ChoiceGroupMixin', () => {
|
|||
|
||||
it('can check multiple checkboxes by setting the modelValue', async () => {
|
||||
const el = await fixture(html`
|
||||
<lion-checkbox-group name="gender[]">
|
||||
<lion-checkbox .choiceValue=${'male'}></lion-checkbox>
|
||||
<lion-checkbox .choiceValue=${'female'}></lion-checkbox>
|
||||
<lion-checkbox .choiceValue=${'other'}></lion-checkbox>
|
||||
</lion-checkbox-group>
|
||||
<choice-group-multiple name="gender[]">
|
||||
<choice-group-input .choiceValue=${'male'}></choice-group-input>
|
||||
<choice-group-input .choiceValue=${'female'}></choice-group-input>
|
||||
<choice-group-input .choiceValue=${'other'}></choice-group-input>
|
||||
</choice-group-multiple>
|
||||
`);
|
||||
|
||||
await nextFrame();
|
||||
|
|
@ -296,11 +295,11 @@ describe('ChoiceGroupMixin', () => {
|
|||
|
||||
it('unchecks non-matching checkboxes when setting the modelValue', async () => {
|
||||
const el = await fixture(html`
|
||||
<lion-checkbox-group name="gender[]">
|
||||
<lion-checkbox .choiceValue=${'male'} checked></lion-checkbox>
|
||||
<lion-checkbox .choiceValue=${'female'}></lion-checkbox>
|
||||
<lion-checkbox .choiceValue=${'other'} checked></lion-checkbox>
|
||||
</lion-checkbox-group>
|
||||
<choice-group-multiple name="gender[]">
|
||||
<choice-group-input .choiceValue=${'male'} checked></choice-group-input>
|
||||
<choice-group-input .choiceValue=${'female'}></choice-group-input>
|
||||
<choice-group-input .choiceValue=${'other'} checked></choice-group-input>
|
||||
</choice-group-multiple>
|
||||
`);
|
||||
|
||||
await nextFrame();
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { html } from '@lion/core';
|
||||
import { LionInput } from '@lion/input';
|
||||
import { Required } from '@lion/validate';
|
||||
import { Required } from '@lion/form-core';
|
||||
import { expect, fixture } from '@open-wc/testing';
|
||||
import sinon from 'sinon';
|
||||
import { ChoiceInputMixin } from '../src/ChoiceInputMixin.js';
|
||||
import { ChoiceInputMixin } from '../../src/choice-group/ChoiceInputMixin.js';
|
||||
|
||||
describe('ChoiceInputMixin', () => {
|
||||
before(() => {
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { unsafeHTML } from '@lion/core';
|
||||
import { localize } from '@lion/localize';
|
||||
import { localizeTearDown } from '@lion/localize/test-helpers.js';
|
||||
import { Required, Validator } from '@lion/validate';
|
||||
import { Required, Validator } from '@lion/form-core';
|
||||
import {
|
||||
aTimeout,
|
||||
expect,
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { expect, fixtureSync, defineCE, unsafeStatic, html, fixture } from '@open-wc/testing';
|
||||
import sinon from 'sinon';
|
||||
import { UpdatingElement } from '@lion/core';
|
||||
import { SyncUpdatableMixin } from '../src/utils/SyncUpdatableMixin.js';
|
||||
import { SyncUpdatableMixin } from '../../src/utils/SyncUpdatableMixin.js';
|
||||
|
||||
describe('SyncUpdatableMixin', () => {
|
||||
describe('Until firstUpdated', () => {
|
||||
|
|
@ -7,7 +7,7 @@ import {
|
|||
MaxDate,
|
||||
MinMaxDate,
|
||||
IsDateDisabled,
|
||||
} from '../src/validators/DateValidators.js';
|
||||
} from '../../src/validate/validators/DateValidators.js';
|
||||
|
||||
describe('Date Validation', () => {
|
||||
it('provides new isDate() to allow only dates', () => {
|
||||
|
|
@ -5,7 +5,7 @@ import {
|
|||
MinNumber,
|
||||
MaxNumber,
|
||||
MinMaxNumber,
|
||||
} from '../src/validators/NumberValidators.js';
|
||||
} from '../../src/validate/validators/NumberValidators.js';
|
||||
|
||||
describe('Number Validation', () => {
|
||||
it('provides new IsNumber() to allow only numbers', () => {
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { expect } from '@open-wc/testing';
|
||||
import { ResultValidator } from '../src/ResultValidator.js';
|
||||
import { Required } from '../src/validators/Required.js';
|
||||
import { MinLength } from '../src/validators/StringValidators.js';
|
||||
import { ResultValidator } from '../../src/validate/ResultValidator.js';
|
||||
import { Required } from '../../src/validate/validators/Required.js';
|
||||
import { MinLength } from '../../src/validate/validators/StringValidators.js';
|
||||
|
||||
describe('ResultValidator', () => {
|
||||
it('has an "executeOnResults" function returning active state', async () => {
|
||||
|
|
@ -8,7 +8,7 @@ import {
|
|||
MinMaxLength,
|
||||
IsEmail,
|
||||
Pattern,
|
||||
} from '../src/validators/StringValidators.js';
|
||||
} from '../../src/validate/validators/StringValidators.js';
|
||||
|
||||
describe('String Validation', () => {
|
||||
it('provides new IsString() to allow only strings', () => {
|
||||
3
packages/form-core/test/validate/ValidateMixin.test.js
Normal file
3
packages/form-core/test/validate/ValidateMixin.test.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { runValidateMixinSuite } from '../../test-suites/ValidateMixin.suite.js';
|
||||
|
||||
runValidateMixinSuite();
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { runValidateMixinFeedbackPart } from '../../test-suites/ValidateMixinFeedbackPart.suite.js';
|
||||
|
||||
runValidateMixinFeedbackPart();
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { expect, fixture, html, unsafeStatic, defineCE } from '@open-wc/testing';
|
||||
import sinon from 'sinon';
|
||||
import { LitElement } from '@lion/core';
|
||||
import { ValidateMixin } from '../src/ValidateMixin.js';
|
||||
import { Validator } from '../src/Validator.js';
|
||||
import { ValidateMixin } from '../../src/validate/ValidateMixin.js';
|
||||
import { Validator } from '../../src/validate/Validator.js';
|
||||
|
||||
async function expectThrowsAsync(method, errorMessage) {
|
||||
let error = null;
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
/* eslint-disable no-unused-vars, no-param-reassign */
|
||||
import { expect, fixture, html } from '@open-wc/testing';
|
||||
import sinon from 'sinon';
|
||||
import '../lion-validation-feedback.js';
|
||||
import { AlwaysInvalid, AlwaysValid } from '../test-helpers.js';
|
||||
import '../../lion-validation-feedback.js';
|
||||
import { AlwaysInvalid, AlwaysValid } from '../../test-helpers.js';
|
||||
|
||||
describe('lion-validation-feedback', () => {
|
||||
it('renders a validation message', async () => {
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
[//]: # 'AUTO INSERT HEADER PREPUBLISH'
|
||||
|
||||
# Form System
|
||||
# Form Integratioms
|
||||
|
||||
The Form System allows you to create complex forms with various validations in an easy way.
|
||||
|
||||
|
|
@ -21,10 +21,10 @@ For a more in depth description look into the [Form System Overview](?path=/docs
|
|||
## Packages
|
||||
|
||||
| Package | Description |
|
||||
| ------------------------------------------------------------------- | ---------------------------------- |
|
||||
| ----------------------------------------------------------------- | ----------------------------------- |
|
||||
| [checkbox](?path=/docs/forms-checkbox--default-story) | Checkbox form element |
|
||||
| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | Group of checkboxes |
|
||||
| [field](?path=/docs/forms-field--default-story) | Base class for all inputs |
|
||||
| [form-core](?path=/docs/forms-field--default-story) | Core functionality for all controls |
|
||||
| [fieldset](?path=/docs/forms-fieldset-overview--page) | Group for form inputs |
|
||||
| [form](?path=/docs/forms-form-overview--page) | Wrapper for multiple form elements |
|
||||
| [input](?path=/docs/forms-input--default-story) | Input element for strings |
|
||||
|
|
@ -36,4 +36,3 @@ For a more in depth description look into the [Form System Overview](?path=/docs
|
|||
| [radio-group](?path=/docs/forms-radio-group--default-story) | Group of radios |
|
||||
| [select](?path=/docs/forms-select--default-story) | Simple native dropdown element |
|
||||
| [textarea](?path=/docs/forms-textarea--default-story) | Multiline text input |
|
||||
| [validate](?path=/docs/forms-system-validate-system--default-story) | Validation for our form components |
|
||||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
|
@ -25,7 +25,8 @@ import '@lion/select-rich/lion-option.js';
|
|||
import '@lion/select-rich/lion-options.js';
|
||||
import '@lion/select-rich/lion-select-rich.js';
|
||||
import '@lion/textarea/lion-textarea.js';
|
||||
import { MinLength, Required } from '@lion/validate';
|
||||
import { MinLength, Required } from '@lion/form-core';
|
||||
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
|
||||
|
||||
export default {
|
||||
title: 'Forms/Features Overview',
|
||||
|
|
@ -36,6 +37,7 @@ export default {
|
|||
|
||||
```js story
|
||||
export const main = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
Required.getMessage = () => 'Please enter a value';
|
||||
return html`
|
||||
<lion-form
|
||||
|
|
@ -23,7 +23,6 @@ import {
|
|||
IsDate,
|
||||
IsEmail,
|
||||
IsNumber,
|
||||
loadDefaultFeedbackMessages,
|
||||
MaxDate,
|
||||
MaxLength,
|
||||
MaxNumber,
|
||||
|
|
@ -35,7 +34,10 @@ import {
|
|||
MinNumber,
|
||||
Required,
|
||||
Validator,
|
||||
} from '@lion/validate';
|
||||
Pattern,
|
||||
} from '@lion/form-core';
|
||||
|
||||
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
|
||||
|
||||
export default {
|
||||
title: 'Forms/Validation/Examples',
|
||||
|
|
@ -76,6 +78,11 @@ export const stringValidators = () => html`
|
|||
.modelValue=${'that should be enough'}
|
||||
label="MinMaxLength"
|
||||
></lion-input>
|
||||
<lion-input
|
||||
.validators=${[new Pattern(/#LionRocks/)]}
|
||||
.modelValue=${'regex checks if "#Lion<NO SPACE>Rocks" is in this input #LionRocks'}
|
||||
label="Pattern"
|
||||
></lion-input>
|
||||
`;
|
||||
```
|
||||
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
```js script
|
||||
import { html } from 'lit-html';
|
||||
import '@lion/input/lion-input.js';
|
||||
import { Unparseable } from '@lion/validate';
|
||||
import { Unparseable } from '@lion/form-core';
|
||||
import '../docs/helper-wc/h-output.js';
|
||||
|
||||
export default {
|
||||
|
|
@ -7,7 +7,7 @@ import { html } from 'lit-html';
|
|||
import { render } from '@lion/core';
|
||||
import { renderLitAsNode } from '@lion/helpers';
|
||||
import '@lion/input/lion-input.js';
|
||||
import { Validator } from '@lion/validate';
|
||||
import { Validator } from '@lion/form-core';
|
||||
import '../docs/helper-wc/h-output.js';
|
||||
|
||||
export default {
|
||||
|
|
@ -167,11 +167,7 @@ export const feedbackCondition = () => {
|
|||
Set conditions for validation feedback visibility
|
||||
</h3>
|
||||
<lion-checkbox-group name="props[]" @model-value-changed="${fetchConditionsAndReevaluate}">
|
||||
${props.map(
|
||||
p => html`
|
||||
<lion-checkbox .label="${p}" .choiceValue="${p}"> </lion-checkbox>
|
||||
`,
|
||||
)}
|
||||
${props.map(p => html` <lion-checkbox .label="${p}" .choiceValue="${p}"> </lion-checkbox> `)}
|
||||
</lion-checkbox-group>
|
||||
`;
|
||||
};
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
import { html } from 'lit-html';
|
||||
import { render } from '@lion/core';
|
||||
import '@lion/input/lion-input.js';
|
||||
import { Validator } from '@lion/validate';
|
||||
import { Validator } from '@lion/form-core';
|
||||
import '../docs/helper-wc/h-output.js';
|
||||
|
||||
export default {
|
||||
|
|
@ -54,7 +54,7 @@ your interaction element to all logic inside the LionField.
|
|||
Steps as described can be implemented with the following javascript:
|
||||
|
||||
```js
|
||||
import { LionField } from '@lion/field';
|
||||
import { LionField } from '@lion/form-core';
|
||||
import './my-slider.js';
|
||||
|
||||
export class LionSlider extends LionField {
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue