ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: merge field/validate/choice-input/form-group into @lion/form-core

Browse source
This commit is contained in:
Thijs Louisse 2020-05-29 16:03:49 +02:00 committed by Thomas Allmer
parent f008ee42a7
commit 6170374ee8
204 changed files with 1308 additions and 5161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintignore
View file

@ -1,3 +1,4 @@
node_modules node_modules
coverage/ coverage/
bundlesize/ bundlesize/
.history/

21
.storybook/main.js
View file

@ -47,23 +47,32 @@ module.exports = {
generateBundle() { generateBundle() {
this.emitFile({ this.emitFile({
type: 'asset', type: 'asset',
fileName: 'packages/form-system/dev-assets/FormatMixinDiagram-1.svg', fileName: 'packages/form-integrations/dev-assets/FormatMixinDiagram-1.svg',
source: fs.readFileSync( 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({ this.emitFile({
type: 'asset', type: 'asset',
fileName: 'packages/form-system/dev-assets/FormatMixinDiagram-2.svg', fileName: 'packages/form-integrations/dev-assets/FormatMixinDiagram-2.svg',
source: fs.readFileSync( 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({ this.emitFile({
type: 'asset', type: 'asset',
fileName: 'packages/form-system/dev-assets/FormatMixinDiagram-3.svg', fileName: 'packages/form-integrations/dev-assets/FormatMixinDiagram-3.svg',
source: fs.readFileSync( 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',
),
), ),
}); });
}, },

3
README.md
View file

@ -59,9 +59,8 @@ The accessibility column indicates whether the functionality is accessible in it
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------------- | | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------------- |
| **-- Forms --** | | | ✔️ | | **-- Forms --** | | | ✔️ |
| [form](?path=/docs/forms-form-overview--page) | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements | ✔️ | | [form](?path=/docs/forms-form-overview--page) | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements | ✔️ |
| [field](?path=/docs/forms-system-overview--page) | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field) | Base Class for all inputs | ✔️ | | [form-core](?path=/docs/forms-system-overview--page) | [![form-core](https://img.shields.io/npm/v/@lion/form-core.svg)](https://www.npmjs.com/package/@lion/field) | Core functionality for all form controls | ✔️ |
| [fieldset](?path=/docs/forms-fieldset-overview--page) | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs | ✔️ | | [fieldset](?path=/docs/forms-fieldset-overview--page) | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs | ✔️ |
| [validate](?path=/docs/form-system-validate-system--page) | [![validate](https://img.shields.io/npm/v/@lion/validate.svg)](https://www.npmjs.com/package/@lion/validate) | Validation for form components | n/a |
| [checkbox](?path=/docs/forms-checkbox--default-story) | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox) | Checkbox form element | ✔️ | | [checkbox](?path=/docs/forms-checkbox--default-story) | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox) | Checkbox form element | ✔️ |
| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes | ✔️ | | [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes | ✔️ |
| [input](?path=/docs/forms-input--default-story) | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input) | Input element for strings | ✔️ | | [input](?path=/docs/forms-input--default-story) | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input) | Input element for strings | ✔️ |

5
bundlesize/all.js
View file

@ -2,12 +2,11 @@ import '../packages/ajax/index.js';
import '../packages/button/index.js'; import '../packages/button/index.js';
import '../packages/calendar/index.js'; import '../packages/calendar/index.js';
import '../packages/checkbox-group/index.js'; import '../packages/checkbox-group/index.js';
import '../packages/choice-input/index.js';
import '../packages/core/index.js'; import '../packages/core/index.js';
import '../packages/dialog/index.js'; import '../packages/dialog/index.js';
import '../packages/field/index.js';
import '../packages/fieldset/index.js'; import '../packages/fieldset/index.js';
import '../packages/form/index.js'; import '../packages/form/index.js';
import '../packages/form-core/index.js';
import '../packages/icon/index.js'; import '../packages/icon/index.js';
import '../packages/input/index.js'; import '../packages/input/index.js';
import '../packages/input-amount/index.js'; import '../packages/input-amount/index.js';
@ -24,4 +23,4 @@ import '../packages/switch/index.js';
import '../packages/tabs/index.js'; import '../packages/tabs/index.js';
import '../packages/textarea/index.js'; import '../packages/textarea/index.js';
import '../packages/tooltip/index.js'; import '../packages/tooltip/index.js';
import '../packages/validate/index.js'; import '../packages/validate-messages/index.js';

4
demo/docs/20-lea-tabs.md
View file

@ -183,9 +183,7 @@ export const distributeNewElements = () => {
}, },
); );
} }
return html` return html` <lea-tabs-experimental></lea-tabs-experimental> `;
<lea-tabs-experimental></lea-tabs-experimental>
`;
}; };
``` ```

9
packages/checkbox-group/README.md
View file

@ -9,7 +9,8 @@ Its purpose is to provide a way for users to check **multiple** options amongst
```js script ```js script
import { html } from 'lit-html'; 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-group.js';
import './lion-checkbox.js'; import './lion-checkbox.js';
@ -38,7 +39,8 @@ export const main = () => html`
## Features ## 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 ## 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. 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: Then the `modelValue` of the `lion-checkbox-group` will look as follows:

2
packages/checkbox-group/package.json
View file

@ -39,7 +39,7 @@
"lion-checkbox-group.js" "lion-checkbox-group.js"
], ],
"dependencies": { "dependencies": {
"@lion/choice-input": "0.9.1", "@lion/form-core": "0.0.0",
"@lion/core": "0.6.0", "@lion/core": "0.6.0",
"@lion/fieldset": "0.12.0", "@lion/fieldset": "0.12.0",
"@lion/input": "0.6.1" "@lion/input": "0.6.1"

2
packages/checkbox-group/src/LionCheckbox.js
View file

@ -1,5 +1,5 @@
import { LionInput } from '@lion/input'; import { LionInput } from '@lion/input';
import { ChoiceInputMixin } from '@lion/choice-input'; import { ChoiceInputMixin } from '@lion/form-core';
export class LionCheckbox extends ChoiceInputMixin(LionInput) { export class LionCheckbox extends ChoiceInputMixin(LionInput) {
connectedCallback() { connectedCallback() {

3
packages/checkbox-group/src/LionCheckboxGroup.js
View file

@ -1,6 +1,5 @@
import { LitElement } from '@lion/core'; import { LitElement } from '@lion/core';
import { ChoiceGroupMixin } from '@lion/choice-input'; import { ChoiceGroupMixin, FormGroupMixin } from '@lion/form-core';
import { FormGroupMixin } from '@lion/fieldset';
/** /**
* A wrapper around multiple checkboxes * A wrapper around multiple checkboxes

928
packages/choice-input/CHANGELOG.md
View file

@ -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))

2
packages/choice-input/index.js
View file

@ -1,2 +0,0 @@
export { ChoiceGroupMixin } from './src/ChoiceGroupMixin.js';
export { ChoiceInputMixin } from './src/ChoiceInputMixin.js';

41
packages/choice-input/package.json
View file

@ -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"
}
}

1010
packages/field/CHANGELOG.md
View file

File diff suppressed because it is too large Load diff

9
packages/field/index.js
View file

@ -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
packages/field/test-helpers.js
View file

@ -1 +0,0 @@
export { formFixture } from './test-helpers/formFixture.js';

3
packages/fieldset/README.md
View file

@ -6,7 +6,8 @@
import { html } from 'lit-html'; import { html } from 'lit-html';
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import { localize } from '@lion/localize'; 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 './lion-fieldset.js';
import './docs/helpers/demo-fieldset-child.js'; import './docs/helpers/demo-fieldset-child.js';

2
packages/fieldset/docs/helpers/demo-fieldset-child.js
View file

@ -1,4 +1,4 @@
import { LionField } from '@lion/field'; import { LionField } from '@lion/form-core';
customElements.define( customElements.define(
'demo-fieldset-child', 'demo-fieldset-child',

1
packages/fieldset/index.js
View file

@ -1,2 +1 @@
export { LionFieldset } from './src/LionFieldset.js'; export { LionFieldset } from './src/LionFieldset.js';
export { FormGroupMixin } from './src/FormGroupMixin.js';

3
packages/fieldset/package.json
View file

@ -39,7 +39,6 @@
], ],
"dependencies": { "dependencies": {
"@lion/core": "0.6.0", "@lion/core": "0.6.0",
"@lion/field": "0.13.1", "@lion/form-core": "0.0.0"
"@lion/validate": "0.11.0"
} }
} }

2
packages/fieldset/src/LionFieldset.js
View file

@ -1,5 +1,5 @@
import { LitElement } from '@lion/core'; 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. * @desc LionFieldset is basically a 'sub form' and can have its own nested sub forms.

31
packages/fieldset/test/lion-fieldset.test.js
View file

@ -1,8 +1,7 @@
import { LionField } from '@lion/field'; import { LionField, IsNumber, Validator } from '@lion/form-core';
import '@lion/field/lion-field.js'; import '@lion/form-core/lion-field.js';
import { formFixture as fixture } from '@lion/field/test-helpers.js'; import { formFixture as fixture } from '@lion/form-core/test-helpers.js';
import { localizeTearDown } from '@lion/localize/test-helpers.js'; import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { IsNumber, Validator } from '@lion/validate';
import { import {
defineCE, defineCE,
expect, expect,
@ -247,7 +246,7 @@ describe('<lion-fieldset>', () => {
<${childTag} name="d" disabled .modelValue="${'x'}"></${childTag}> <${childTag} name="d" disabled .modelValue="${'x'}"></${childTag}>
</${tag}> </${tag}>
<${tag} name="disabledFieldset" disabled> <${tag} name="disabledFieldset" disabled>
<${childTag} name="e" .modelValue="${'x'}"></${childTag}> <${childTag} name="e" .modelValue="${'x'}"></${childTag}>
</${tag}> </${tag}>
</${tag}> </${tag}>
`); `);
@ -300,7 +299,9 @@ describe('<lion-fieldset>', () => {
it('does not propagate/override initial disabled value on nested form elements', async () => { it('does not propagate/override initial disabled value on nested form elements', async () => {
const el = await fixture( 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; await el.updateComplete;
expect(el.disabled).to.equal(false); expect(el.disabled).to.equal(false);
@ -355,10 +356,9 @@ describe('<lion-fieldset>', () => {
const el = await fixture(html` const el = await fixture(html`
<${tag}> <${tag}>
<${childTag} name="color" <${childTag} name="color" .validators=${[
.validators=${[new IsCat()]} new IsCat(),
.modelValue=${'blue'} ]} .modelValue=${'blue'}></${childTag}>
></${childTag}>
</${tag}> </${tag}>
`); `);
await nextFrame(); await nextFrame();
@ -387,10 +387,9 @@ describe('<lion-fieldset>', () => {
const el = await fixture(html` const el = await fixture(html`
<${tag}> <${tag}>
<${childTag} name="color" <${childTag} name="color" .validators=${[
.validators=${[new IsCat()]} new IsCat(),
.modelValue=${'blue'} ]} .modelValue=${'blue'}></${childTag}>
></${childTag}>
</${tag}> </${tag}>
`); `);
await nextFrame(); await nextFrame();
@ -983,7 +982,7 @@ describe('<lion-fieldset>', () => {
it('calls resetGroup on children fieldsets', async () => { it('calls resetGroup on children fieldsets', async () => {
const el = await fixture(html` const el = await fixture(html`
<${tag} name="parentFieldset"> <${tag} name="parentFieldset">
<${tag} name="childFieldset"> <${tag} name="childFieldset">
<${childTag} name="child[]" .modelValue="${'foo1'}"> <${childTag} name="child[]" .modelValue="${'foo1'}">
</${childTag}> </${childTag}>
</${tag}> </${tag}>
@ -998,7 +997,7 @@ describe('<lion-fieldset>', () => {
it('calls reset on children fields', async () => { it('calls reset on children fields', async () => {
const el = await fixture(html` const el = await fixture(html`
<${tag} name="parentFieldset"> <${tag} name="parentFieldset">
<${tag} name="childFieldset"> <${tag} name="childFieldset">
<${childTag} name="child[]" .modelValue="${'foo1'}"> <${childTag} name="child[]" .modelValue="${'foo1'}">
</${childTag}> </${childTag}>
</${tag}> </${tag}>

0
packages/field/README.md → packages/form-core/README.md
View file

2
packages/field/docs/CustomFieldsTutorial.md → packages/form-core/docs/CustomFieldsTutorial.md
View file

@ -48,7 +48,7 @@ Then we follow the steps below:
Steps as described can be implemented with the following javascript: Steps as described can be implemented with the following javascript:
```js ```js
import { LionField } from '@lion/field'; import { LionField } from '@lion/form-core';
import './my-slider.js'; import './my-slider.js';
export class LionSlider extends LionField { export class LionSlider extends LionField {

0
packages/field/docs/FormFundaments.md → packages/form-core/docs/FormFundaments.md
View file

0
packages/field/docs/FormattingAndParsing.md → packages/form-core/docs/FormattingAndParsing.md
View file

0
packages/choice-input/README.md → packages/form-core/docs/choice-group/README.md
View file

15
packages/validate/README.md → packages/form-core/docs/validate/README.md
View file

@ -5,14 +5,9 @@
```js script ```js script
import { html } from '@lion/core'; import { html } from '@lion/core';
import { LionInput } from '@lion/input'; import { LionInput } from '@lion/input';
import { import { Required, IsString, MaxLength, DefaultSuccess, Validator } from '@lion/form-core';
Required,
IsString, import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
MaxLength,
DefaultSuccess,
Validator,
loadDefaultFeedbackMessages,
} from '@lion/validate';
export default { export default {
title: 'Forms/Validation/Overview', 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 - allow for advanced UX scenarios by updating validation state on every value change
- provide a powerful way of writing validations via classes - 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. ValidateMixin.
For a detailed description of the validation system and the `ValidateMixin`, please see [ValidationSystem](./docs/ValidationSystem.md). 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 ```js
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import { %ValidatorName% } from '@lion/validate'; import { %ValidatorName% } from '@lion/form-core';
``` ```
### Example ### Example

0
packages/validate/docs/assets/FlowDiagram.md → packages/form-core/docs/validate/assets/FlowDiagram.md
View file

11
packages/validate/docs/system.md → packages/form-core/docs/validate/system.md
View file

@ -20,22 +20,23 @@ 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. validity states can determine whether a validation message should be shown along the input field.
## Assessing field validation state programmatically ## Assessing field validation state programmatically
When a field has validation feedback it can be accessed using the `hasFeedbackFor` and `showsFeedbackFor` properties. 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. This can be used if the validity of the field is needed in code.
`hasFeedbackFor` is the state of the field regardless of whether the feedback is shown or not. `hasFeedbackFor` is the state of the field regardless of whether the feedback is shown or not.
`showsFeedbackFor` represents whether or not validation feedback is being shown. This takes into account `showsFeedbackFor` represents whether or not validation feedback is being shown. This takes into account
interaction state such as a field being `touched` and `dirty`, `prefilled` or `submitted` interaction state such as a field being `touched` and `dirty`, `prefilled` or `submitted`
```js ```js
// Field is invalid and has not interacted with // Field is invalid and has not interacted with
const field = document.querySelector('#my-field'); const field = document.querySelector('#my-field');
field.hasFeedbackFor.includes('error') // returns true field.hasFeedbackFor.includes('error'); // returns true
field.showsFeedbackFor.includes('error') // returns false field.showsFeedbackFor.includes('error'); // returns false
// Field invalid, dirty and touched // Field invalid, dirty and touched
field.hasFeedbackFor.includes('error') // returns true field.hasFeedbackFor.includes('error'); // returns true
field.showsFeedbackFor.includes('error') // returns true field.showsFeedbackFor.includes('error'); // returns true
``` ```
## Validators ## Validators

52
packages/form-core/index.js Normal file
View 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';

0
packages/field/lion-field.js → packages/form-core/lion-field.js
View file

3
packages/form-core/lion-validation-feedback.js Normal file
View file

@ -0,0 +1,3 @@
import { LionValidationFeedback } from './src/validate/LionValidationFeedback.js';
customElements.define('lion-validation-feedback', LionValidationFeedback);

17
packages/validate/package.json → packages/form-core/package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "@lion/validate", "name": "@lion/form-core",
"version": "0.11.0", "version": "0.0.0",
"description": "Validate your form elements", "description": "Form-core contains all essential building blocks for creating form fields and fieldsets",
"author": "ing-bank", "author": "ing-bank",
"homepage": "https://github.com/ing-bank/lion/", "homepage": "https://github.com/ing-bank/lion/",
"license": "MIT", "license": "MIT",
@ -11,17 +11,17 @@
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/ing-bank/lion.git", "url": "https://github.com/ing-bank/lion.git",
"directory": "packages/validate" "directory": "packages/field"
}, },
"scripts": { "scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js", "prepublishOnly": "../../scripts/npm-prepublish.js",
"test": "cd ../../ && yarn test:browser --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/validate/test/**/*.test.js\"" "test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/form-core/test/**/*.test.js\""
}, },
"keywords": [ "keywords": [
"lion", "lion",
"web-components", "web-components",
"validate" "field"
], ],
"main": "index.js", "main": "index.js",
"module": "index.js", "module": "index.js",
@ -30,12 +30,13 @@
"src", "src",
"stories", "stories",
"test", "test",
"test-helpers",
"test-suites", "test-suites",
"test-helpers",
"translations", "translations",
"*.js" "*.js"
], ],
"sideEffects": [ "sideEffects": [
"lion-field.js",
"lion-validation-feedback.js" "lion-validation-feedback.js"
], ],
"dependencies": { "dependencies": {

0
packages/field/src/FocusMixin.js → packages/form-core/src/FocusMixin.js
View file

2
packages/field/src/FormControlMixin.js → packages/form-core/src/FormControlMixin.js
View file

@ -1,5 +1,5 @@
import { css, dedupeMixin, html, nothing, SlotMixin } from '@lion/core'; 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 { FormRegisteringMixin } from './registration/FormRegisteringMixin.js';
import { getAriaElementsInRightDomOrder } from './utils/getAriaElementsInRightDomOrder.js'; import { getAriaElementsInRightDomOrder } from './utils/getAriaElementsInRightDomOrder.js';

2
packages/field/src/FormatMixin.js → packages/form-core/src/FormatMixin.js
View file

@ -1,7 +1,7 @@
/* eslint-disable class-methods-use-this */ /* eslint-disable class-methods-use-this */
import { dedupeMixin } from '@lion/core'; import { dedupeMixin } from '@lion/core';
import { Unparseable } from '@lion/validate'; import { Unparseable } from './validate/Unparseable.js';
// For a future breaking release: // For a future breaking release:
// - do not allow the private `.formattedValue` as property that can be set to // - do not allow the private `.formattedValue` as property that can be set to

0
packages/field/src/InteractionStateMixin.js → packages/form-core/src/InteractionStateMixin.js
View file

2
packages/field/src/LionField.js → packages/form-core/src/LionField.js
View file

@ -1,6 +1,6 @@
import { LitElement, SlotMixin } from '@lion/core'; import { LitElement, SlotMixin } from '@lion/core';
import { DisabledMixin } from '@lion/core/src/DisabledMixin.js'; 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 { FocusMixin } from './FocusMixin.js';
import { FormatMixin } from './FormatMixin.js'; import { FormatMixin } from './FormatMixin.js';
import { FormControlMixin } from './FormControlMixin.js'; import { FormControlMixin } from './FormControlMixin.js';

3
packages/choice-input/src/ChoiceGroupMixin.js → packages/form-core/src/choice-group/ChoiceGroupMixin.js
View file

@ -1,5 +1,6 @@
import { dedupeMixin } from '@lion/core'; 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( export const ChoiceGroupMixin = dedupeMixin(
superclass => superclass =>

2
packages/choice-input/src/ChoiceInputMixin.js → packages/form-core/src/choice-group/ChoiceInputMixin.js
View file

@ -1,7 +1,7 @@
/* eslint-disable class-methods-use-this */ /* eslint-disable class-methods-use-this */
import { css, html, nothing } from '@lion/core'; import { css, html, nothing } from '@lion/core';
import { FormatMixin } from '@lion/field'; import { FormatMixin } from '../FormatMixin.js';
export const ChoiceInputMixin = superclass => export const ChoiceInputMixin = superclass =>
// eslint-disable-next-line // eslint-disable-next-line

2
packages/fieldset/src/FormElementsHaveNoError.js → packages/form-core/src/form-group/FormElementsHaveNoError.js
View file

@ -1,4 +1,4 @@
import { Validator } from '@lion/validate'; import { Validator } from '../validate/Validator.js';
export class FormElementsHaveNoError extends Validator { export class FormElementsHaveNoError extends Validator {
static get validatorName() { static get validatorName() {

18
packages/fieldset/src/FormGroupMixin.js → packages/form-core/src/form-group/FormGroupMixin.js
View file

@ -1,19 +1,20 @@
import { dedupeMixin, html, SlotMixin } from '@lion/core'; import { dedupeMixin, html, SlotMixin } from '@lion/core';
import { DisabledMixin } from '@lion/core/src/DisabledMixin.js'; import { DisabledMixin } from '@lion/core/src/DisabledMixin.js';
import { FormControlMixin, FormControlsCollection, FormRegistrarMixin } from '@lion/field'; import { FormControlMixin } from '../FormControlMixin.js';
import { getAriaElementsInRightDomOrder } from '@lion/field/src/utils/getAriaElementsInRightDomOrder.js'; import { FormControlsCollection } from '../registration/FormControlsCollection.js';
import { ValidateMixin } from '@lion/validate'; import { FormRegistrarMixin } from '../registration/FormRegistrarMixin.js';
import { ValidateMixin } from '../validate/ValidateMixin.js';
import { getAriaElementsInRightDomOrder } from '../utils/getAriaElementsInRightDomOrder.js';
import { FormElementsHaveNoError } from './FormElementsHaveNoError.js'; import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
/** /**
* @desc Form group mixin serves as the basis for (sub) forms. Designed to be put on * @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: * It bridges all the functionality of the child form controls:
* ValidateMixin, InteractionStateMixin, FormatMixin, FormControlMixin etc. * ValidateMixin, InteractionStateMixin, FormatMixin, FormControlMixin etc.
* It is designed to be used on top of FormRegstrarMixin and ChoiceGroupMixin * It is designed to be used on top of FormRegistrarMixin and ChoiceGroupMixin.
* Also, the LionFieldset element (which supports name based retrieval of children via formElements * Also, it is th basis of the LionFieldset element (which supports name based retrieval of
* and the automatic grouping of formElements via '[]') * children via formElements and the automatic grouping of formElements via '[]').
*
*/ */
export const FormGroupMixin = dedupeMixin( export const FormGroupMixin = dedupeMixin(
superclass => superclass =>
@ -27,7 +28,6 @@ export const FormGroupMixin = dedupeMixin(
* Interaction state that can be used to compute the visibility of * Interaction state that can be used to compute the visibility of
* feedback messages * feedback messages
*/ */
// TODO: Move property submitted to InteractionStateMixin.
submitted: { submitted: {
type: Boolean, type: Boolean,
reflect: true, reflect: true,

0
packages/field/src/registration/FormControlsCollection.js → packages/form-core/src/registration/FormControlsCollection.js
View file

0
packages/field/src/registration/FormRegisteringMixin.js → packages/form-core/src/registration/FormRegisteringMixin.js
View file

0
packages/field/src/registration/FormRegistrarMixin.js → packages/form-core/src/registration/FormRegistrarMixin.js
View file

0
packages/field/src/registration/FormRegistrarPortalMixin.js → packages/form-core/src/registration/FormRegistrarPortalMixin.js
View file

0
packages/field/src/registration/formRegistrarManager.js → packages/form-core/src/registration/formRegistrarManager.js
View file

2
packages/validate/src/utils/AsyncQueue.js → packages/form-core/src/utils/AsyncQueue.js
View file

@ -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 * 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 * Await the `.complete` if you want to ensure the queue is empty at any point

2
packages/validate/src/utils/SyncUpdatableMixin.js → packages/form-core/src/utils/SyncUpdatableMixin.js
View file

@ -1,6 +1,6 @@
import { dedupeMixin } from '@lion/core'; 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? * @desc Why this mixin?

2
packages/validate/src/utils/fake-extends-event-target.js → packages/form-core/src/utils/fakeExtendsEventTarget.js
View file

@ -1,4 +1,6 @@
// TODO: this method has to be removed when EventTarget polyfill is available on IE11 // 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) { export function fakeExtendsEventTarget(instance) {
const delegate = document.createDocumentFragment(); const delegate = document.createDocumentFragment();
['addEventListener', 'dispatchEvent', 'removeEventListener'].forEach(funcName => { ['addEventListener', 'dispatchEvent', 'removeEventListener'].forEach(funcName => {

0
packages/field/src/utils/getAriaElementsInRightDomOrder.js → packages/form-core/src/utils/getAriaElementsInRightDomOrder.js
View file

1
packages/validate/src/utils/pascal-case.js → packages/form-core/src/utils/pascalCase.js
View file

@ -1,3 +1,4 @@
// TODO: pascalCase this filename?
export function pascalCase(str) { export function pascalCase(str) {
return str.charAt(0).toUpperCase() + str.slice(1); return str.charAt(0).toUpperCase() + str.slice(1);
} }

0
packages/validate/src/LionValidationFeedback.js → packages/form-core/src/validate/LionValidationFeedback.js
View file

0
packages/validate/src/ResultValidator.js → packages/form-core/src/validate/ResultValidator.js
View file

0
packages/validate/src/Unparseable.js → packages/form-core/src/validate/Unparseable.js
View file

7
packages/validate/src/ValidateMixin.js → packages/form-core/src/validate/ValidateMixin.js
View file

@ -1,13 +1,14 @@
/* eslint-disable class-methods-use-this, camelcase, no-param-reassign, max-classes-per-file */ /* eslint-disable class-methods-use-this, camelcase, no-param-reassign, max-classes-per-file */
import { dedupeMixin, ScopedElementsMixin, SlotMixin } from '@lion/core'; import { dedupeMixin, ScopedElementsMixin, SlotMixin } from '@lion/core';
// TODO: make form-core independent from localize
import { localize } from '@lion/localize'; import { localize } from '@lion/localize';
import { LionValidationFeedback } from './LionValidationFeedback.js'; import { LionValidationFeedback } from './LionValidationFeedback.js';
import { ResultValidator } from './ResultValidator.js'; import { ResultValidator } from './ResultValidator.js';
import { Unparseable } from './Unparseable.js'; import { Unparseable } from './Unparseable.js';
import { AsyncQueue } from './utils/AsyncQueue.js'; import { AsyncQueue } from '../utils/AsyncQueue.js';
import { pascalCase } from './utils/pascal-case.js'; import { pascalCase } from '../utils/pascalCase.js';
import { SyncUpdatableMixin } from './utils/SyncUpdatableMixin.js'; import { SyncUpdatableMixin } from '../utils/SyncUpdatableMixin.js';
import { Validator } from './Validator.js'; import { Validator } from './Validator.js';
import { Required } from './validators/Required.js'; import { Required } from './validators/Required.js';

2
packages/validate/src/Validator.js → packages/form-core/src/validate/Validator.js
View file

@ -1,4 +1,4 @@
import { fakeExtendsEventTarget } from './utils/fake-extends-event-target.js'; import { fakeExtendsEventTarget } from '../utils/fakeExtendsEventTarget.js';
export class Validator { export class Validator {
constructor(param, config) { constructor(param, config) {

0
packages/validate/src/resultValidators/DefaultSuccess.js → packages/form-core/src/validate/resultValidators/DefaultSuccess.js
View file

1
packages/validate/src/validators/DateValidators.js → packages/form-core/src/validate/validators/DateValidators.js
View file

@ -1,4 +1,5 @@
/* eslint-disable max-classes-per-file */ /* eslint-disable max-classes-per-file */
// TODO: move to input-datepicker?
import { normalizeDateTime } from '@lion/localize'; import { normalizeDateTime } from '@lion/localize';
import { Validator } from '../Validator.js'; import { Validator } from '../Validator.js';

0
packages/validate/src/validators/NumberValidators.js → packages/form-core/src/validate/validators/NumberValidators.js
View file

0
packages/validate/src/validators/Required.js → packages/form-core/src/validate/validators/Required.js
View file

0
packages/validate/src/validators/StringValidators.js → packages/form-core/src/validate/validators/StringValidators.js
View file

1
packages/validate/test-helpers.js → packages/form-core/test-helpers.js
View file

@ -1,3 +1,4 @@
export { formFixture } from './test-helpers/formFixture.js';
export { export {
AlwaysInvalid, AlwaysInvalid,
AlwaysValid, AlwaysValid,

2
packages/validate/test-helpers/ExampleValidators.js → packages/form-core/test-helpers/ExampleValidators.js
View file

@ -1,5 +1,5 @@
/* eslint-disable max-classes-per-file, class-methods-use-this */ /* 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 { export class AlwaysInvalid extends Validator {
static get validatorName() { static get validatorName() {

0
packages/field/test-helpers/formFixture.js → packages/form-core/test-helpers/formFixture.js
View file

0
packages/field/test-suites/FormRegistrationMixins.suite.js → packages/form-core/test-suites/FormRegistrationMixins.suite.js
View file

56
packages/field/test-suites/FormatMixin.suite.js → packages/form-core/test-suites/FormatMixin.suite.js
View file

@ -1,8 +1,8 @@
import { LitElement } from '@lion/core'; import { LitElement } from '@lion/core';
import { Unparseable, Validator } from '@lion/validate';
import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing'; import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import { FormatMixin } from '../src/FormatMixin.js'; import { FormatMixin } from '../src/FormatMixin.js';
import { Unparseable, Validator } from '../index.js';
function mimicUserInput(formControl, newViewValue) { function mimicUserInput(formControl, newViewValue) {
formControl.value = newViewValue; // eslint-disable-line no-param-reassign formControl.value = newViewValue; // eslint-disable-line no-param-reassign
@ -80,20 +80,16 @@ export function runFormatMixinSuite(customConfig) {
} }
elem = unsafeStatic(cfg.tagString); elem = unsafeStatic(cfg.tagString);
nonFormat = await fixture(html`<${elem} nonFormat = await fixture(html`<${elem} .formatter="${v => v}" .parser="${v =>
.formatter="${v => v}" v}" .serializer="${v => v}" .deserializer="${v => v}"><input
.parser="${v => v}" slot="input">
.serializer="${v => v}" </${elem}>`);
.deserializer="${v => v}"
><input slot="input">
</${elem}>`);
fooFormat = await fixture(html` fooFormat = await fixture(html`
<${elem} <${elem} .formatter="${value => `foo: ${value}`}" .parser="${value =>
.formatter="${value => `foo: ${value}`}" value.replace('foo: ', '')}"
.parser="${value => value.replace('foo: ', '')}" .serializer="${value => `[foo] ${value}`}" .deserializer="${value =>
.serializer="${value => `[foo] ${value}`}" value.replace('[foo] ', '')}"><input
.deserializer="${value => value.replace('[foo] ', '')}" slot="input">
><input slot="input">
</${elem}>`); </${elem}>`);
}); });
@ -182,13 +178,11 @@ export function runFormatMixinSuite(customConfig) {
it('synchronizes _inputNode.value as a fallback mechanism', async () => { 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> // Note that in lion-field, the attribute would be put on <lion-field>, not on <input>
const formatElem = await fixture(html` const formatElem = await fixture(html`
<${elem} <${elem} value="string" , .formatter=${value => `foo: ${value}`}
value="string",
.formatter=${value => `foo: ${value}`}
.parser=${value => value.replace('foo: ', '')} .parser=${value => value.replace('foo: ', '')}
.serializer=${value => `[foo] ${value}`} .serializer=${value => `[foo] ${value}`}
.deserializer=${value => value.replace('[foo] ', '')} .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 // Now check if the format/parse/serialize loop has been triggered
await formatElem.updateComplete; await formatElem.updateComplete;
expect(formatElem.formattedValue).to.equal('foo: string'); expect(formatElem.formattedValue).to.equal('foo: string');
@ -250,12 +244,7 @@ export function runFormatMixinSuite(customConfig) {
const parserSpy = sinon.spy(value => value.replace('foo: ', '')); const parserSpy = sinon.spy(value => value.replace('foo: ', ''));
const serializerSpy = sinon.spy(value => `[foo] ${value}`); const serializerSpy = sinon.spy(value => `[foo] ${value}`);
const el = await fixture(html` const el = await fixture(html`
<${elem} <${elem} .formatter=${formatterSpy} .parser=${parserSpy} .serializer=${serializerSpy} .modelValue=${'test'}>
.formatter=${formatterSpy}
.parser=${parserSpy}
.serializer=${serializerSpy}
.modelValue=${'test'}
>
<input slot="input"> <input slot="input">
</${elem}> </${elem}>
`); `);
@ -270,9 +259,7 @@ export function runFormatMixinSuite(customConfig) {
const formatterSpy = sinon.spy(value => `foo: ${value}`); const formatterSpy = sinon.spy(value => `foo: ${value}`);
const generatedViewValue = generateValueBasedOnType({ viewValue: true }); const generatedViewValue = generateValueBasedOnType({ viewValue: true });
await fixture(html` await fixture(html`
<${elem} <${elem} value="${generatedViewValue}" .formatter="${formatterSpy}"
value="${generatedViewValue}"
.formatter="${formatterSpy}"
.formatOptions="${{ locale: 'en-GB', decimalSeparator: '-' }}"> .formatOptions="${{ locale: 'en-GB', decimalSeparator: '-' }}">
<input slot="input" value="${generatedViewValue}"> <input slot="input" value="${generatedViewValue}">
</${elem}> </${elem}>
@ -362,9 +349,8 @@ export function runFormatMixinSuite(customConfig) {
describe('Unparseable values', () => { describe('Unparseable values', () => {
it('should convert to Unparseable when wrong value inputted by user', async () => { it('should convert to Unparseable when wrong value inputted by user', async () => {
const el = await fixture(html` const el = await fixture(html`
<${elem} <${elem} .parser=${viewValue => Number(viewValue) || undefined}
.parser=${viewValue => Number(viewValue) || undefined} >
>
<input slot="input"> <input slot="input">
</${elem}> </${elem}>
`); `);
@ -374,9 +360,8 @@ export function runFormatMixinSuite(customConfig) {
it('should preserve the viewValue when not parseable', async () => { it('should preserve the viewValue when not parseable', async () => {
const el = await fixture(html` const el = await fixture(html`
<${elem} <${elem} .parser=${viewValue => Number(viewValue) || undefined}
.parser=${viewValue => Number(viewValue) || undefined} >
>
<input slot="input"> <input slot="input">
</${elem}> </${elem}>
`); `);
@ -387,9 +372,8 @@ export function runFormatMixinSuite(customConfig) {
it('should display the viewValue when modelValue is of type Unparseable', async () => { it('should display the viewValue when modelValue is of type Unparseable', async () => {
const el = await fixture(html` const el = await fixture(html`
<${elem} <${elem} .parser=${viewValue => Number(viewValue) || undefined}
.parser=${viewValue => Number(viewValue) || undefined} >
>
<input slot="input"> <input slot="input">
</${elem}> </${elem}>
`); `);

0
packages/field/test-suites/InteractionStateMixin.suite.js → packages/form-core/test-suites/InteractionStateMixin.suite.js
View file

0
packages/validate/test-suites/ValidateMixin.suite.js → packages/form-core/test-suites/ValidateMixin.suite.js
View file

0
packages/validate/test-suites/ValidateMixinFeedbackPart.suite.js → packages/form-core/test-suites/ValidateMixinFeedbackPart.suite.js
View file

0
packages/field/test/FocusMixin.test.js → packages/form-core/test/FocusMixin.test.js
View file

0
packages/field/test/FormControlMixin.test.js → packages/form-core/test/FormControlMixin.test.js
View file

0
packages/field/test/FormRegistrationMixins.test.js → packages/form-core/test/FormRegistrationMixins.test.js
View file

0
packages/field/test/FormatMixin.test.js → packages/form-core/test/FormatMixin.test.js
View file

0
packages/field/test/InteractionStateMixin.test.js → packages/form-core/test/InteractionStateMixin.test.js
View file

29
packages/choice-input/test/ChoiceGroupMixin.test.js → packages/form-core/test/choice-group/ChoiceGroupMixin.test.js
View file

@ -1,12 +1,11 @@
import { html, LitElement } from '@lion/core'; import { html, LitElement } from '@lion/core';
import { formFixture as fixture } from '@lion/field/test-helpers.js'; import { formFixture as fixture } from '@lion/form-core/test-helpers.js';
import { FormGroupMixin } from '@lion/fieldset';
import '@lion/fieldset/lion-fieldset.js'; import '@lion/fieldset/lion-fieldset.js';
import { LionInput } from '@lion/input'; 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 { expect, nextFrame } from '@open-wc/testing';
import { ChoiceGroupMixin } from '../src/ChoiceGroupMixin.js'; import { ChoiceGroupMixin } from '../../src/choice-group/ChoiceGroupMixin.js';
import { ChoiceInputMixin } from '../src/ChoiceInputMixin.js'; import { ChoiceInputMixin } from '../../src/choice-group/ChoiceInputMixin.js';
describe('ChoiceGroupMixin', () => { describe('ChoiceGroupMixin', () => {
before(() => { before(() => {
@ -278,11 +277,11 @@ describe('ChoiceGroupMixin', () => {
it('can check multiple checkboxes by setting the modelValue', async () => { it('can check multiple checkboxes by setting the modelValue', async () => {
const el = await fixture(html` const el = await fixture(html`
<lion-checkbox-group name="gender[]"> <choice-group-multiple name="gender[]">
<lion-checkbox .choiceValue=${'male'}></lion-checkbox> <choice-group-input .choiceValue=${'male'}></choice-group-input>
<lion-checkbox .choiceValue=${'female'}></lion-checkbox> <choice-group-input .choiceValue=${'female'}></choice-group-input>
<lion-checkbox .choiceValue=${'other'}></lion-checkbox> <choice-group-input .choiceValue=${'other'}></choice-group-input>
</lion-checkbox-group> </choice-group-multiple>
`); `);
await nextFrame(); await nextFrame();
@ -296,11 +295,11 @@ describe('ChoiceGroupMixin', () => {
it('unchecks non-matching checkboxes when setting the modelValue', async () => { it('unchecks non-matching checkboxes when setting the modelValue', async () => {
const el = await fixture(html` const el = await fixture(html`
<lion-checkbox-group name="gender[]"> <choice-group-multiple name="gender[]">
<lion-checkbox .choiceValue=${'male'} checked></lion-checkbox> <choice-group-input .choiceValue=${'male'} checked></choice-group-input>
<lion-checkbox .choiceValue=${'female'}></lion-checkbox> <choice-group-input .choiceValue=${'female'}></choice-group-input>
<lion-checkbox .choiceValue=${'other'} checked></lion-checkbox> <choice-group-input .choiceValue=${'other'} checked></choice-group-input>
</lion-checkbox-group> </choice-group-multiple>
`); `);
await nextFrame(); await nextFrame();

4
packages/choice-input/test/ChoiceInputMixin.test.js → packages/form-core/test/choice-group/ChoiceInputMixin.test.js
View file

@ -1,9 +1,9 @@
import { html } from '@lion/core'; import { html } from '@lion/core';
import { LionInput } from '@lion/input'; import { LionInput } from '@lion/input';
import { Required } from '@lion/validate'; import { Required } from '@lion/form-core';
import { expect, fixture } from '@open-wc/testing'; import { expect, fixture } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import { ChoiceInputMixin } from '../src/ChoiceInputMixin.js'; import { ChoiceInputMixin } from '../../src/choice-group/ChoiceInputMixin.js';
describe('ChoiceInputMixin', () => { describe('ChoiceInputMixin', () => {
before(() => { before(() => {

0
packages/field/test/field-integrations.test.js → packages/form-core/test/field-integrations.test.js
View file

2
packages/field/test/lion-field.test.js → packages/form-core/test/lion-field.test.js
View file

@ -1,7 +1,7 @@
import { unsafeHTML } from '@lion/core'; import { unsafeHTML } from '@lion/core';
import { localize } from '@lion/localize'; import { localize } from '@lion/localize';
import { localizeTearDown } from '@lion/localize/test-helpers.js'; import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { Required, Validator } from '@lion/validate'; import { Required, Validator } from '@lion/form-core';
import { import {
aTimeout, aTimeout,
expect, expect,

2
packages/validate/test/SyncUpdatableMixin.test.js → packages/form-core/test/utils/SyncUpdatableMixin.test.js
View file

@ -1,7 +1,7 @@
import { expect, fixtureSync, defineCE, unsafeStatic, html, fixture } from '@open-wc/testing'; import { expect, fixtureSync, defineCE, unsafeStatic, html, fixture } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import { UpdatingElement } from '@lion/core'; import { UpdatingElement } from '@lion/core';
import { SyncUpdatableMixin } from '../src/utils/SyncUpdatableMixin.js'; import { SyncUpdatableMixin } from '../../src/utils/SyncUpdatableMixin.js';
describe('SyncUpdatableMixin', () => { describe('SyncUpdatableMixin', () => {
describe('Until firstUpdated', () => { describe('Until firstUpdated', () => {

0
packages/field/test/utils/getAriaElementsInRightDomOrder.test.js → packages/form-core/test/utils/getAriaElementsInRightDomOrder.test.js
View file

2
packages/validate/test/DateValidators.test.js → packages/form-core/test/validate/DateValidators.test.js
View file

@ -7,7 +7,7 @@ import {
MaxDate, MaxDate,
MinMaxDate, MinMaxDate,
IsDateDisabled, IsDateDisabled,
} from '../src/validators/DateValidators.js'; } from '../../src/validate/validators/DateValidators.js';
describe('Date Validation', () => { describe('Date Validation', () => {
it('provides new isDate() to allow only dates', () => { it('provides new isDate() to allow only dates', () => {

2
packages/validate/test/NumberValidators.test.js → packages/form-core/test/validate/NumberValidators.test.js
View file

@ -5,7 +5,7 @@ import {
MinNumber, MinNumber,
MaxNumber, MaxNumber,
MinMaxNumber, MinMaxNumber,
} from '../src/validators/NumberValidators.js'; } from '../../src/validate/validators/NumberValidators.js';
describe('Number Validation', () => { describe('Number Validation', () => {
it('provides new IsNumber() to allow only numbers', () => { it('provides new IsNumber() to allow only numbers', () => {

6
packages/validate/test/ResultValidator.test.js → packages/form-core/test/validate/ResultValidator.test.js
View file

@ -1,7 +1,7 @@
import { expect } from '@open-wc/testing'; import { expect } from '@open-wc/testing';
import { ResultValidator } from '../src/ResultValidator.js'; import { ResultValidator } from '../../src/validate/ResultValidator.js';
import { Required } from '../src/validators/Required.js'; import { Required } from '../../src/validate/validators/Required.js';
import { MinLength } from '../src/validators/StringValidators.js'; import { MinLength } from '../../src/validate/validators/StringValidators.js';
describe('ResultValidator', () => { describe('ResultValidator', () => {
it('has an "executeOnResults" function returning active state', async () => { it('has an "executeOnResults" function returning active state', async () => {

2
packages/validate/test/StringValidators.test.js → packages/form-core/test/validate/StringValidators.test.js
View file

@ -8,7 +8,7 @@ import {
MinMaxLength, MinMaxLength,
IsEmail, IsEmail,
Pattern, Pattern,
} from '../src/validators/StringValidators.js'; } from '../../src/validate/validators/StringValidators.js';
describe('String Validation', () => { describe('String Validation', () => {
it('provides new IsString() to allow only strings', () => { it('provides new IsString() to allow only strings', () => {

3
packages/form-core/test/validate/ValidateMixin.test.js Normal file
View file

@ -0,0 +1,3 @@
import { runValidateMixinSuite } from '../../test-suites/ValidateMixin.suite.js';
runValidateMixinSuite();

3
packages/form-core/test/validate/ValidateMixinFeedbackPart.test.js Normal file
View file

@ -0,0 +1,3 @@
import { runValidateMixinFeedbackPart } from '../../test-suites/ValidateMixinFeedbackPart.suite.js';
runValidateMixinFeedbackPart();

4
packages/validate/test/Validator.test.js → packages/form-core/test/validate/Validator.test.js
View file

@ -1,8 +1,8 @@
import { expect, fixture, html, unsafeStatic, defineCE } from '@open-wc/testing'; import { expect, fixture, html, unsafeStatic, defineCE } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import { LitElement } from '@lion/core'; import { LitElement } from '@lion/core';
import { ValidateMixin } from '../src/ValidateMixin.js'; import { ValidateMixin } from '../../src/validate/ValidateMixin.js';
import { Validator } from '../src/Validator.js'; import { Validator } from '../../src/validate/Validator.js';
async function expectThrowsAsync(method, errorMessage) { async function expectThrowsAsync(method, errorMessage) {
let error = null; let error = null;

4
packages/validate/test/lion-validation-feedback.test.js → packages/form-core/test/validate/lion-validation-feedback.test.js
View file

@ -1,8 +1,8 @@
/* eslint-disable no-unused-vars, no-param-reassign */ /* eslint-disable no-unused-vars, no-param-reassign */
import { expect, fixture, html } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import '../lion-validation-feedback.js'; import '../../lion-validation-feedback.js';
import { AlwaysInvalid, AlwaysValid } from '../test-helpers.js'; import { AlwaysInvalid, AlwaysValid } from '../../test-helpers.js';
describe('lion-validation-feedback', () => { describe('lion-validation-feedback', () => {
it('renders a validation message', async () => { it('renders a validation message', async () => {

35
packages/form-system/README.md → packages/form-integrations/README.md
View file

@ -1,6 +1,6 @@
[//]: # 'AUTO INSERT HEADER PREPUBLISH' [//]: # 'AUTO INSERT HEADER PREPUBLISH'
# Form System # Form Integratioms
The Form System allows you to create complex forms with various validations in an easy way. The Form System allows you to create complex forms with various validations in an easy way.
@ -20,20 +20,19 @@ For a more in depth description look into the [Form System Overview](?path=/docs
## Packages ## Packages
| Package | Description | | Package | Description |
| ------------------------------------------------------------------- | ---------------------------------- | | ----------------------------------------------------------------- | ----------------------------------- |
| [checkbox](?path=/docs/forms-checkbox--default-story) | Checkbox form element | | [checkbox](?path=/docs/forms-checkbox--default-story) | Checkbox form element |
| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | Group of checkboxes | | [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 | | [fieldset](?path=/docs/forms-fieldset-overview--page) | Group for form inputs |
| [form](?path=/docs/forms-form-overview--page) | Wrapper for multiple form elements | | [form](?path=/docs/forms-form-overview--page) | Wrapper for multiple form elements |
| [input](?path=/docs/forms-input--default-story) | Input element for strings | | [input](?path=/docs/forms-input--default-story) | Input element for strings |
| [input-amount](?path=/docs/forms-input-amount--default-story) | Input element for amounts | | [input-amount](?path=/docs/forms-input-amount--default-story) | Input element for amounts |
| [input-date](?path=/docs/forms-input-date--default-story) | Input element for dates | | [input-date](?path=/docs/forms-input-date--default-story) | Input element for dates |
| [input-email](?path=/docs/forms-input-email--default-story) | Input element for e-mails | | [input-email](?path=/docs/forms-input-email--default-story) | Input element for e-mails |
| [input-iban](?path=/docs/forms-input-iban--default-story) | Input element for IBANs | | [input-iban](?path=/docs/forms-input-iban--default-story) | Input element for IBANs |
| [radio](?path=/docs/forms-radio--default-story) | Radio form element | | [radio](?path=/docs/forms-radio--default-story) | Radio form element |
| [radio-group](?path=/docs/forms-radio-group--default-story) | Group of radios | | [radio-group](?path=/docs/forms-radio-group--default-story) | Group of radios |
| [select](?path=/docs/forms-select--default-story) | Simple native dropdown element | | [select](?path=/docs/forms-select--default-story) | Simple native dropdown element |
| [textarea](?path=/docs/forms-textarea--default-story) | Multiline text input | | [textarea](?path=/docs/forms-textarea--default-story) | Multiline text input |
| [validate](?path=/docs/forms-system-validate-system--default-story) | Validation for our form components |

0
packages/form-system/dev-assets/FormatMixinDiagram-1.svg → packages/form-integrations/dev-assets/FormatMixinDiagram-1.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
packages/form-system/dev-assets/FormatMixinDiagram-2.svg → packages/form-integrations/dev-assets/FormatMixinDiagram-2.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

0
packages/form-system/dev-assets/FormatMixinDiagram-3.svg → packages/form-integrations/dev-assets/FormatMixinDiagram-3.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

4
packages/form-system/docs/15-features-overview.md → packages/form-integrations/docs/15-features-overview.md
View file

@ -25,7 +25,8 @@ import '@lion/select-rich/lion-option.js';
import '@lion/select-rich/lion-options.js'; import '@lion/select-rich/lion-options.js';
import '@lion/select-rich/lion-select-rich.js'; import '@lion/select-rich/lion-select-rich.js';
import '@lion/textarea/lion-textarea.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 { export default {
title: 'Forms/Features Overview', title: 'Forms/Features Overview',
@ -36,6 +37,7 @@ export default {
```js story ```js story
export const main = () => { export const main = () => {
loadDefaultFeedbackMessages();
Required.getMessage = () => 'Please enter a value'; Required.getMessage = () => 'Please enter a value';
return html` return html`
<lion-form <lion-form

11
packages/form-system/docs/17-validation-examples.md → packages/form-integrations/docs/17-validation-examples.md
View file

@ -23,7 +23,6 @@ import {
IsDate, IsDate,
IsEmail, IsEmail,
IsNumber, IsNumber,
loadDefaultFeedbackMessages,
MaxDate, MaxDate,
MaxLength, MaxLength,
MaxNumber, MaxNumber,
@ -35,7 +34,10 @@ import {
MinNumber, MinNumber,
Required, Required,
Validator, Validator,
} from '@lion/validate'; Pattern,
} from '@lion/form-core';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
export default { export default {
title: 'Forms/Validation/Examples', title: 'Forms/Validation/Examples',
@ -76,6 +78,11 @@ export const stringValidators = () => html`
.modelValue=${'that should be enough'} .modelValue=${'that should be enough'}
label="MinMaxLength" label="MinMaxLength"
></lion-input> ></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>
`; `;
``` ```

0
packages/form-system/docs/20-system-overview.md → packages/form-integrations/docs/20-system-overview.md
View file

0
packages/form-system/docs/25-system-model-value.md → packages/form-integrations/docs/25-system-model-value.md
View file

2
packages/form-system/docs/30-system-formatting.md → packages/form-integrations/docs/30-system-formatting.md
View file

@ -5,7 +5,7 @@
```js script ```js script
import { html } from 'lit-html'; import { html } from 'lit-html';
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import { Unparseable } from '@lion/validate'; import { Unparseable } from '@lion/form-core';
import '../docs/helper-wc/h-output.js'; import '../docs/helper-wc/h-output.js';
export default { export default {

8
packages/form-system/docs/35-system-interaction-states.md → packages/form-integrations/docs/35-system-interaction-states.md
View file

@ -7,7 +7,7 @@ import { html } from 'lit-html';
import { render } from '@lion/core'; import { render } from '@lion/core';
import { renderLitAsNode } from '@lion/helpers'; import { renderLitAsNode } from '@lion/helpers';
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import { Validator } from '@lion/validate'; import { Validator } from '@lion/form-core';
import '../docs/helper-wc/h-output.js'; import '../docs/helper-wc/h-output.js';
export default { export default {
@ -167,11 +167,7 @@ export const feedbackCondition = () => {
Set conditions for validation feedback visibility Set conditions for validation feedback visibility
</h3> </h3>
<lion-checkbox-group name="props[]" @model-value-changed="${fetchConditionsAndReevaluate}"> <lion-checkbox-group name="props[]" @model-value-changed="${fetchConditionsAndReevaluate}">
${props.map( ${props.map(p => html` <lion-checkbox .label="${p}" .choiceValue="${p}"> </lion-checkbox> `)}
p => html`
<lion-checkbox .label="${p}" .choiceValue="${p}"> </lion-checkbox>
`,
)}
</lion-checkbox-group> </lion-checkbox-group>
`; `;
}; };

4
packages/form-system/docs/40-system-creating-a-custom-field.md → packages/form-integrations/docs/40-system-creating-a-custom-field.md
View file

@ -6,7 +6,7 @@
import { html } from 'lit-html'; import { html } from 'lit-html';
import { render } from '@lion/core'; import { render } from '@lion/core';
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import { Validator } from '@lion/validate'; import { Validator } from '@lion/form-core';
import '../docs/helper-wc/h-output.js'; import '../docs/helper-wc/h-output.js';
export default { 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: Steps as described can be implemented with the following javascript:
```js ```js
import { LionField } from '@lion/field'; import { LionField } from '@lion/form-core';
import './my-slider.js'; import './my-slider.js';
export class LionSlider extends LionField { export class LionSlider extends LionField {

Some files were not shown because too many files have changed in this diff Show more