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

chore: add changeset localize and form-control

Browse source
This commit is contained in:
Thijs Louisse 2021-01-06 00:56:38 +01:00 committed by Joren Broekema
parent b88760d578
commit a8cf421536
6 changed files with 36 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.changeset/fast-years-search.md Normal file
View file

@ -0,0 +1,7 @@
---
'@lion/form-integrations': patch
'@lion/localize': patch
---
Improved localize DX by making it clear from source code structure what are main (exported) functions and what are util/helper functions consumed by those main functions.
Added Chrome Intl corrections for Philippine currency names and en-GB short month names.

9
.changeset/slow-forks-speak.md Normal file
View file

@ -0,0 +1,9 @@
---
'@lion/form-core': minor
'@lion/listbox': minor
---
Added `isTriggeredByUser` meta data in `model-value-changed` event
Sometimes it can be helpful to detect whether a value change was caused by a user or via a programmatical change.
This feature acts as a normalization layer: since we use `model-value-changed` as a single source of truth event for all FormControls, there should be no use cases for (inconsistently implemented (cross browser)) events like `input`/`change`/`user-input-changed` etc.

14
packages/form-core/types/FormControlMixinTypes.d.ts vendored
View file

@ -6,7 +6,7 @@ import { DisabledHost } from '@lion/core/types/DisabledMixinTypes';
import { LionValidationFeedback } from '../src/validate/LionValidationFeedback';
import { FormRegisteringHost } from './registration/FormRegisteringMixinTypes';
export type ModelValueEventDetails {
export type ModelValueEventDetails = {
/**
* A list that represents the path of FormControls the model-value-changed event
* 'traveled through'.
@ -15,10 +15,12 @@ export type ModelValueEventDetails {
*/
formPath: HTMLElement[];
/**
* Whether the model-value-changed event is triggered via user interaction. This information
* can be helpful for both Application Developers and Subclassers.
* This concept is related to the native isTrusted property:
* https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
* Sometimes it can be helpful to detect whether a value change was caused by a user or
* via a programmatical change.
* This feature acts as a normalization layer: since we use `model-value-changed` as a single
* source of truth event for all FormControls, there should be no use cases for
* (inconsistently implemented (cross browser)) events
* like 'input'/'change'/'user-input-changed' etc.)
*/
isTriggeredByUser: boolean;
/**
@ -27,7 +29,7 @@ export type ModelValueEventDetails {
* case `isTriggeredByUser` is true))
*/
initialize?: boolean;
}
};
declare interface HTMLElementWithValue extends HTMLElement {
value: string;

3
packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts vendored
View file

@ -35,6 +35,7 @@ export declare class ChoiceInputHost {
render(): TemplateResult;
_choiceGraphicTemplate(): TemplateResult;
_afterTemplate(): TemplateResult;
connectedCallback(): void;
disconnectedCallback(): void;
@ -47,6 +48,8 @@ export declare class ChoiceInputHost {
__syncCheckedToInputElement(): void;
__isHandlingUserInput: boolean;
_proxyInputEvent(): void;
_onModelValueChanged(

6
packages/form-integrations/docs/17-validation-examples.md
View file

@ -58,7 +58,11 @@ Useful on input elements it allows to define how many characters can be entered.
```js preview-story
export const stringValidators = () => html`
<lion-input .validators=${[new EqualsLength(7)]} label="EqualsLength"></lion-input>
<lion-input
.validators=${[new EqualsLength(7)]}
.modelValue=${'not exactly'}
label="EqualsLength"
></lion-input>
<lion-input
.validators=${[new MinLength(10)]}
.modelValue=${'too short'}

8
packages/form-integrations/test/model-value-consistency.test.js
View file

@ -329,12 +329,12 @@ describe('detail.isTriggeredByUser', () => {
* - false: when .modelValue (or checked) set programmatically
*
* ChoiceGroupField (listbox, select-rich, combobox, radio-group, checkbox-group):
* - true: when child formElement condition for Choice Field is met
* - false: when child formElement condition for Choice Field is not met
* - true: when child formElement condition for ChoiceField(Option) is met
* - false: when child formElement condition for ChoiceField(Option) is not met
*
* FormOrFieldset (fieldset, form):
* - true: when child formElement condition for Field is met
* - false: when child formElement condition for Field is not met
* - true: when child formElement condition for RegularField is met
* - false: when child formElement condition for RegularField is not met
*/
const featureDetectChoiceField = el => 'checked' in el && 'choiceValue' in el;