chore: cleanup and align types/tests
This commit is contained in:
jorenbroekema
parent
8a3a3bbaee
commit
eb87859d76
12 changed files with 44 additions and 15 deletions
|
|
@ -267,7 +267,7 @@ export const invokerButton = () => html`
|
|||
|
||||
Validation can be used as normal, below is an example of a combobox with a `Required` validator.
|
||||
|
||||
```js story
|
||||
```js preview-story
|
||||
export const validation = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
Required.getMessage = () => 'Please enter a value';
|
||||
|
|
@ -278,7 +278,6 @@ export const validation = () => {
|
|||
.validators="${[new Required()]}"
|
||||
name="favoriteMovie"
|
||||
label="Favorite movie"
|
||||
autocomplete="both"
|
||||
>
|
||||
<lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option>
|
||||
<lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option>
|
||||
|
|
|
|||
|
|
@ -433,8 +433,8 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
|
|||
*
|
||||
* @param {EventTarget & import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} target
|
||||
*/
|
||||
_repropagationConditionFails(target) {
|
||||
return super._repropagationConditionFails(target) && this.formElements?.some(el => el.checked);
|
||||
_repropagationCondition(target) {
|
||||
return super._repropagationCondition(target) || this.formElements.every(el => !el.checked);
|
||||
}
|
||||
|
||||
/* eslint-disable no-param-reassign */
|
||||
|
|
@ -482,6 +482,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
|
|||
prevValue.length &&
|
||||
curValue.length &&
|
||||
prevValue[0].toLowerCase() !== curValue[0].toLowerCase();
|
||||
|
||||
return userIsAddingChars || userStartsNewWord;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -450,22 +450,23 @@ describe('lion-combobox', () => {
|
|||
it('works with validation', async () => {
|
||||
const el = /** @type {LionCombobox} */ (await fixture(html`
|
||||
<lion-combobox name="foo" .validators=${[new Required()]}>
|
||||
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
|
||||
<lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
|
||||
<lion-option .choiceValue="${'Chard'}">Chard</lion-option>
|
||||
<lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
|
||||
<lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
|
||||
</lion-combobox>
|
||||
`));
|
||||
|
||||
// open
|
||||
el._comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
|
||||
|
||||
mimicUserTyping(el, 'art');
|
||||
await el.updateComplete;
|
||||
expect(el.checkedIndex).to.equal(0);
|
||||
|
||||
mimicUserTyping(el, '');
|
||||
// Simulate backspace deleting the char at the end of the string
|
||||
el._inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' }));
|
||||
el._inputNode.dispatchEvent(new Event('input'));
|
||||
const arr = el._inputNode.value.split('');
|
||||
arr.splice(el._inputNode.value.length - 1, 1);
|
||||
el._inputNode.value = arr.join('');
|
||||
await el.updateComplete;
|
||||
el.dispatchEvent(new Event('blur'));
|
||||
|
||||
expect(el.checkedIndex).to.equal(-1);
|
||||
await el.feedbackComplete;
|
||||
expect(el.hasFeedbackFor).to.include('error');
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { FormControlMixin } from './FormControlMixin.js';
|
|||
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
|
||||
*/
|
||||
const FocusMixinImplementation = superclass =>
|
||||
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
|
||||
// eslint-disable-next-line no-unused-vars, max-len, no-shadow
|
||||
class FocusMixin extends FormControlMixin(superclass) {
|
||||
static get properties() {
|
||||
|
|
|
|||
|
|
@ -801,7 +801,7 @@ const FormControlMixinImplementation = superclass =>
|
|||
// We only send the checked changed up (not the unchecked). In this way a choice group
|
||||
// (radio-group, checkbox-group, select/listbox) acts as an 'endpoint' (a single Field)
|
||||
// just like the native <select>
|
||||
if (this._repropagationConditionFails(target)) {
|
||||
if (!this._repropagationCondition(target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -828,8 +828,8 @@ const FormControlMixinImplementation = superclass =>
|
|||
* This will fix the types and reduce the need for ignores/expect-errors
|
||||
* @param {EventTarget & import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} target
|
||||
*/
|
||||
_repropagationConditionFails(target) {
|
||||
return (
|
||||
_repropagationCondition(target) {
|
||||
return !(
|
||||
this._repropagationRole === 'choice-group' &&
|
||||
// @ts-expect-error multipleChoice is not directly available but only as side effect
|
||||
!this.multipleChoice &&
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ import { ValidateMixin } from './validate/ValidateMixin.js';
|
|||
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
|
||||
*/
|
||||
const FormatMixinImplementation = superclass =>
|
||||
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
|
||||
class FormatMixin extends ValidateMixin(FormControlMixin(superclass)) {
|
||||
static get properties() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import { FormControlMixin } from './FormControlMixin.js';
|
|||
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
|
||||
*/
|
||||
const InteractionStateMixinImplementation = superclass =>
|
||||
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
|
||||
class InteractionStateMixin extends FormControlMixin(superclass) {
|
||||
static get properties() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js';
|
|||
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
|
||||
*/
|
||||
const ChoiceGroupMixinImplementation = superclass =>
|
||||
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
|
||||
class ChoiceGroupMixin extends FormRegistrarMixin(InteractionStateMixin(superclass)) {
|
||||
static get properties() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ const hasChanged = (nw, old = {}) => nw.value !== old.value || nw.checked !== ol
|
|||
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
|
||||
*/
|
||||
const ChoiceInputMixinImplementation = superclass =>
|
||||
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
|
||||
class ChoiceInputMixin extends FormatMixin(superclass) {
|
||||
static get properties() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
|
|||
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
|
||||
*/
|
||||
const FormGroupMixinImplementation = superclass =>
|
||||
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
|
||||
class FormGroupMixin extends FormRegistrarMixin(
|
||||
FormControlMixin(ValidateMixin(DisabledMixin(SlotMixin(superclass)))),
|
||||
) {
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ function arrayDiff(array1 = [], array2 = []) {
|
|||
* @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
|
||||
*/
|
||||
export const ValidateMixinImplementation = superclass =>
|
||||
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
|
||||
class extends FormControlMixin(
|
||||
SyncUpdatableMixin(DisabledMixin(SlotMixin(ScopedElementsMixin(superclass)))),
|
||||
) {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,27 @@ declare interface HTMLElementWithValue extends HTMLElement {
|
|||
|
||||
export declare class FormControlHost {
|
||||
static get styles(): CSSResult | CSSResult[];
|
||||
static get properties(): {
|
||||
name: {
|
||||
type: StringConstructor;
|
||||
reflect: boolean;
|
||||
};
|
||||
readOnly: {
|
||||
type: BooleanConstructor;
|
||||
attribute: string;
|
||||
reflect: boolean;
|
||||
};
|
||||
label: StringConstructor;
|
||||
helpText: {
|
||||
type: StringConstructor;
|
||||
attribute: string;
|
||||
};
|
||||
modelValue: { attribute: boolean };
|
||||
_ariaLabelledNodes: { attribute: boolean };
|
||||
_ariaDescribedNodes: { attribute: boolean };
|
||||
_repropagationRole: { attribute: boolean };
|
||||
_isRepropagationEndpoint: { attribute: boolean };
|
||||
};
|
||||
/**
|
||||
* A Boolean attribute which, if present, indicates that the user should not be able to edit
|
||||
* the value of the input. The difference between disabled and readonly is that read-only
|
||||
|
|
|
|||
Loading…
Reference in a new issue