From 5787b1670489824ceb4a7ab7a583a4e556891fb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 1 Aug 2024 15:36:39 +0200 Subject: [PATCH 1/9] correct small size to 500px --- packages/uui-modal/lib/uui-modal-sidebar.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/uui-modal/lib/uui-modal-sidebar.element.ts b/packages/uui-modal/lib/uui-modal-sidebar.element.ts index ac3157666..238197a7d 100644 --- a/packages/uui-modal/lib/uui-modal-sidebar.element.ts +++ b/packages/uui-modal/lib/uui-modal-sidebar.element.ts @@ -104,7 +104,7 @@ export class UUIModalSidebarElement extends UUIModalElement { max-width: min(800px, calc(100% - var(--uui-modal-sidebar-left-gap))); } :host([size='small']) dialog { - max-width: min(400px, calc(100% - var(--uui-modal-sidebar-left-gap))); + max-width: min(500px, calc(100% - var(--uui-modal-sidebar-left-gap))); } `, ]; From 15bd564785274ae1d5c0b300f78c4d07cc3ea37d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 8 Aug 2024 12:33:24 +0200 Subject: [PATCH 2/9] remove input as form control of component --- packages/uui-input/lib/uui-input.element.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts index 124036f97..fe242ab15 100644 --- a/packages/uui-input/lib/uui-input.element.ts +++ b/packages/uui-input/lib/uui-input.element.ts @@ -224,10 +224,6 @@ export class UUIInputElement extends UUIFormControlMixin( () => this.maxlengthMessage, () => !!this.maxlength && String(this.value).length > this.maxlength, ); - - this.updateComplete.then(() => { - this.addFormControlElement(this._input); - }); } private _onKeypress(e: KeyboardEvent): void { From 0a7d042e464af30e662847439e55dff7daa8f8dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 9 Aug 2024 09:07:30 +0200 Subject: [PATCH 3/9] only update _message --- .../lib/uui-form-validation-message.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/uui-form-validation-message/lib/uui-form-validation-message.element.ts b/packages/uui-form-validation-message/lib/uui-form-validation-message.element.ts index 215cee81e..fb3cafd3b 100644 --- a/packages/uui-form-validation-message/lib/uui-form-validation-message.element.ts +++ b/packages/uui-form-validation-message/lib/uui-form-validation-message.element.ts @@ -80,13 +80,13 @@ export class UUIFormValidationMessageElement extends LitElement { } else { this._messages.delete(ctrl); } - this.requestUpdate(); + this.requestUpdate('_messages'); }; private _onControlValid = (e: UUIFormControlEvent) => { const ctrl = (e as any).composedPath()[0]; this._messages.delete(ctrl); - this.requestUpdate(); + this.requestUpdate('_messages'); }; render() { From 5cd2912c5a8bd56495f27ba923a9a9c57006ca40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 9 Aug 2024 10:20:55 +0200 Subject: [PATCH 4/9] only set a single validation message at a time --- .../uui-base/lib/mixins/FormControlMixin.ts | 112 +++++++++++------- 1 file changed, 70 insertions(+), 42 deletions(-) diff --git a/packages/uui-base/lib/mixins/FormControlMixin.ts b/packages/uui-base/lib/mixins/FormControlMixin.ts index f6575c98a..1a29d4021 100644 --- a/packages/uui-base/lib/mixins/FormControlMixin.ts +++ b/packages/uui-base/lib/mixins/FormControlMixin.ts @@ -24,6 +24,19 @@ type FlagTypes = | 'badInput' | 'valid'; +const WeightedErrorFlagTypes = [ + 'customError', + 'badInput', + 'patternMismatch', + 'rangeOverflow', + 'rangeUnderflow', + 'stepMismatch', + 'tooLong', + 'tooShort', + 'typeMismatch', + 'valueMissing', +]; + // Acceptable as an internal interface/type, BUT if exposed externally this should be turned into a public class in a separate file. interface UUIFormControlValidatorConfig { flagKey: FlagTypes; @@ -294,13 +307,18 @@ export const UUIFormControlMixin = < getMessageMethod: () => string, checkMethod: () => boolean, ): UUIFormControlValidatorConfig { - const obj = { + const validator = { flagKey: flagKey, getMessageMethod: getMessageMethod, checkMethod: checkMethod, }; - this.#validators.push(obj); - return obj; + this.#validators.push(validator); + // Sort validators based on the WeightedErrorFlagTypes order. [NL] + this.#validators.sort((a, b) => { + // This could easily be extended with a weight set on the validator object itself. [NL] + return WeightedErrorFlagTypes.indexOf(a.flagKey) - WeightedErrorFlagTypes.indexOf(b.flagKey); + }); + return validator; } protected removeValidator(validator: UUIFormControlValidatorConfig) { @@ -364,45 +382,55 @@ export const UUIFormControlMixin = < * Such are mainly properties that are not declared as a Lit state and or Lit property. */ protected _runValidators() { - this.#validity = {}; - const messages: Set = new Set(); - let innerFormControlEl: NativeFormControlElement | undefined = undefined; - - // Loop through inner native form controls to adapt their validityState. [NL] - this.#formCtrlElements.forEach(formCtrlEl => { - let key: keyof ValidityState; - for (key in formCtrlEl.validity) { - if (key !== 'valid' && formCtrlEl.validity[key]) { - this.#validity[key] = true; - messages.add(formCtrlEl.validationMessage); - innerFormControlEl ??= formCtrlEl; - } - } - }); - - // Loop through custom validators, currently its intentional to have them overwritten native validity. but might need to be reconsidered (This current way enables to overwrite with custom messages) [NL] - this.#validators.forEach(validator => { - if (validator.checkMethod()) { - this.#validity[validator.flagKey] = true; - messages.add(validator.getMessageMethod()); - } - }); - - const hasError = Object.values(this.#validity).includes(true); - - // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState#valid - this.#validity.valid = !hasError; - - // Transfer the new validityState to the ElementInternals. [NL] - this._internals.setValidity( - this.#validity, - // Turn messages into an array and join them with a comma. [NL]: - [...messages].join(', '), - innerFormControlEl ?? this.getFormElement() ?? undefined, - ); - - this.#dispatchValidationState(); - } + this.#validity = {}; + //const messages: Set = new Set(); + let message: string | undefined = undefined; + let innerFormControlEl: NativeFormControlElement | undefined = undefined; + + // Loop through custom validators, currently its intentional to have them overwritten native validity. but might need to be reconsidered (This current way enables to overwrite with custom messages) [NL] + this.#validators.some((validator) => { + if (validator.checkMethod()) { + this.#validity[validator.flagKey] = true; + //messages.add(validator.getMessageMethod()); + message = validator.getMessageMethod(); + return true; + } + return false; + }); + + if (message) { + // Loop through inner native form controls to adapt their validityState. [NL] + this.#formCtrlElements.some((formCtrlEl) => { + let key: keyof ValidityState; + for (key in formCtrlEl.validity) { + if (key !== 'valid' && formCtrlEl.validity[key]) { + this.#validity[key] = true; + //messages.add(formCtrlEl.validationMessage); + message = formCtrlEl.validationMessage; + innerFormControlEl ??= formCtrlEl; + return true; + } + } + return false; + }); + } + + const hasError = Object.values(this.#validity).includes(true); + + // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState#valid + this.#validity.valid = !hasError; + + // Transfer the new validityState to the ElementInternals. [NL] + this._internals.setValidity( + this.#validity, + // Turn messages into an array and join them with a comma. [NL]: + //[...messages].join(', '), + message, + innerFormControlEl ?? this.getFormElement() ?? undefined, + ); + + this.#dispatchValidationState(); + } #dispatchValidationState() { // Do not fire validation events unless we are not pristine/'untouched'/not-in-validation-mode. [NL] From 06272d31f7f3fa7aa6dce2d701804b354c13e287 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 9 Aug 2024 10:35:47 +0200 Subject: [PATCH 5/9] white space correction --- .../uui-base/lib/mixins/FormControlMixin.ts | 111 +++++++++--------- 1 file changed, 57 insertions(+), 54 deletions(-) diff --git a/packages/uui-base/lib/mixins/FormControlMixin.ts b/packages/uui-base/lib/mixins/FormControlMixin.ts index 1a29d4021..a4538ee73 100644 --- a/packages/uui-base/lib/mixins/FormControlMixin.ts +++ b/packages/uui-base/lib/mixins/FormControlMixin.ts @@ -313,11 +313,14 @@ export const UUIFormControlMixin = < checkMethod: checkMethod, }; this.#validators.push(validator); - // Sort validators based on the WeightedErrorFlagTypes order. [NL] - this.#validators.sort((a, b) => { - // This could easily be extended with a weight set on the validator object itself. [NL] - return WeightedErrorFlagTypes.indexOf(a.flagKey) - WeightedErrorFlagTypes.indexOf(b.flagKey); - }); + // Sort validators based on the WeightedErrorFlagTypes order. [NL] + this.#validators.sort((a, b) => { + // This could easily be extended with a weight set on the validator object itself. [NL] + return ( + WeightedErrorFlagTypes.indexOf(a.flagKey) - + WeightedErrorFlagTypes.indexOf(b.flagKey) + ); + }); return validator; } @@ -382,55 +385,55 @@ export const UUIFormControlMixin = < * Such are mainly properties that are not declared as a Lit state and or Lit property. */ protected _runValidators() { - this.#validity = {}; - //const messages: Set = new Set(); - let message: string | undefined = undefined; - let innerFormControlEl: NativeFormControlElement | undefined = undefined; - - // Loop through custom validators, currently its intentional to have them overwritten native validity. but might need to be reconsidered (This current way enables to overwrite with custom messages) [NL] - this.#validators.some((validator) => { - if (validator.checkMethod()) { - this.#validity[validator.flagKey] = true; - //messages.add(validator.getMessageMethod()); - message = validator.getMessageMethod(); - return true; - } - return false; - }); - - if (message) { - // Loop through inner native form controls to adapt their validityState. [NL] - this.#formCtrlElements.some((formCtrlEl) => { - let key: keyof ValidityState; - for (key in formCtrlEl.validity) { - if (key !== 'valid' && formCtrlEl.validity[key]) { - this.#validity[key] = true; - //messages.add(formCtrlEl.validationMessage); - message = formCtrlEl.validationMessage; - innerFormControlEl ??= formCtrlEl; - return true; - } - } - return false; - }); - } - - const hasError = Object.values(this.#validity).includes(true); - - // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState#valid - this.#validity.valid = !hasError; - - // Transfer the new validityState to the ElementInternals. [NL] - this._internals.setValidity( - this.#validity, - // Turn messages into an array and join them with a comma. [NL]: - //[...messages].join(', '), - message, - innerFormControlEl ?? this.getFormElement() ?? undefined, - ); - - this.#dispatchValidationState(); - } + this.#validity = {}; + //const messages: Set = new Set(); + let message: string | undefined = undefined; + let innerFormControlEl: NativeFormControlElement | undefined = undefined; + + // Loop through custom validators, currently its intentional to have them overwritten native validity. but might need to be reconsidered (This current way enables to overwrite with custom messages) [NL] + this.#validators.some(validator => { + if (validator.checkMethod()) { + this.#validity[validator.flagKey] = true; + //messages.add(validator.getMessageMethod()); + message = validator.getMessageMethod(); + return true; + } + return false; + }); + + if (message) { + // Loop through inner native form controls to adapt their validityState. [NL] + this.#formCtrlElements.some(formCtrlEl => { + let key: keyof ValidityState; + for (key in formCtrlEl.validity) { + if (key !== 'valid' && formCtrlEl.validity[key]) { + this.#validity[key] = true; + //messages.add(formCtrlEl.validationMessage); + message = formCtrlEl.validationMessage; + innerFormControlEl ??= formCtrlEl; + return true; + } + } + return false; + }); + } + + const hasError = Object.values(this.#validity).includes(true); + + // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState#valid + this.#validity.valid = !hasError; + + // Transfer the new validityState to the ElementInternals. [NL] + this._internals.setValidity( + this.#validity, + // Turn messages into an array and join them with a comma. [NL]: + //[...messages].join(', '), + message, + innerFormControlEl ?? this.getFormElement() ?? undefined, + ); + + this.#dispatchValidationState(); + } #dispatchValidationState() { // Do not fire validation events unless we are not pristine/'untouched'/not-in-validation-mode. [NL] From 997b936168d84987bbe4ba2b5650263aa96e5713 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 9 Aug 2024 20:53:59 +0200 Subject: [PATCH 6/9] correct weight order --- packages/uui-base/lib/mixins/FormControlMixin.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/uui-base/lib/mixins/FormControlMixin.ts b/packages/uui-base/lib/mixins/FormControlMixin.ts index a4538ee73..9b825347a 100644 --- a/packages/uui-base/lib/mixins/FormControlMixin.ts +++ b/packages/uui-base/lib/mixins/FormControlMixin.ts @@ -26,15 +26,15 @@ type FlagTypes = const WeightedErrorFlagTypes = [ 'customError', + 'valueMissing', 'badInput', + 'typeMismatch', 'patternMismatch', 'rangeOverflow', 'rangeUnderflow', 'stepMismatch', 'tooLong', 'tooShort', - 'typeMismatch', - 'valueMissing', ]; // Acceptable as an internal interface/type, BUT if exposed externally this should be turned into a public class in a separate file. From 2f241f3885b0ebba7c208460ac13feb2507eecca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 9 Aug 2024 21:09:03 +0200 Subject: [PATCH 7/9] sort correct --- packages/uui-base/lib/mixins/FormControlMixin.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/uui-base/lib/mixins/FormControlMixin.ts b/packages/uui-base/lib/mixins/FormControlMixin.ts index 9b825347a..5c7ee4680 100644 --- a/packages/uui-base/lib/mixins/FormControlMixin.ts +++ b/packages/uui-base/lib/mixins/FormControlMixin.ts @@ -42,6 +42,7 @@ interface UUIFormControlValidatorConfig { flagKey: FlagTypes; getMessageMethod: () => string; checkMethod: () => boolean; + weight: number; } export interface UUIFormControlMixinInterface extends LitElement { @@ -311,16 +312,13 @@ export const UUIFormControlMixin = < flagKey: flagKey, getMessageMethod: getMessageMethod, checkMethod: checkMethod, + weight: WeightedErrorFlagTypes.indexOf(flagKey), }; this.#validators.push(validator); // Sort validators based on the WeightedErrorFlagTypes order. [NL] - this.#validators.sort((a, b) => { - // This could easily be extended with a weight set on the validator object itself. [NL] - return ( - WeightedErrorFlagTypes.indexOf(a.flagKey) - - WeightedErrorFlagTypes.indexOf(b.flagKey) - ); - }); + this.#validators.sort((a, b) => + a.weight > b.weight ? 1 : b.weight > a.weight ? -1 : 0, + ); return validator; } @@ -401,7 +399,7 @@ export const UUIFormControlMixin = < return false; }); - if (message) { + if (!message) { // Loop through inner native form controls to adapt their validityState. [NL] this.#formCtrlElements.some(formCtrlEl => { let key: keyof ValidityState; From 45d60a8f817a2f7ffcd2600b98bf28533ccfe7e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 20 Aug 2024 11:07:43 +0200 Subject: [PATCH 8/9] still bind native --- packages/uui-input/lib/uui-input.element.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts index fe242ab15..124036f97 100644 --- a/packages/uui-input/lib/uui-input.element.ts +++ b/packages/uui-input/lib/uui-input.element.ts @@ -224,6 +224,10 @@ export class UUIInputElement extends UUIFormControlMixin( () => this.maxlengthMessage, () => !!this.maxlength && String(this.value).length > this.maxlength, ); + + this.updateComplete.then(() => { + this.addFormControlElement(this._input); + }); } private _onKeypress(e: KeyboardEvent): void { From d101a021b1d133df10b7efc241b6c78f9301621a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 20 Aug 2024 11:26:31 +0200 Subject: [PATCH 9/9] fix toggle slotted label --- packages/uui-boolean-input/lib/uui-boolean-input.element.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/uui-boolean-input/lib/uui-boolean-input.element.ts b/packages/uui-boolean-input/lib/uui-boolean-input.element.ts index 3b6aec789..fd1ce1eaa 100644 --- a/packages/uui-boolean-input/lib/uui-boolean-input.element.ts +++ b/packages/uui-boolean-input/lib/uui-boolean-input.element.ts @@ -252,6 +252,10 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin( cursor: not-allowed; opacity: 0.5; } + + .label { + display: block; + } `, ]; }