From 46dbaa3f372b71b71cf4c665e753de0fe934b25b Mon Sep 17 00:00:00 2001 From: Joren Broekema Date: Mon, 14 Sep 2020 15:04:28 +0200 Subject: [PATCH] fix(form-core): add index.d.ts and adjust types for LionInput types --- packages/form-core/index.d.ts | 52 +++++++++++++++++++ .../choice-group/ChoiceGroupMixin.test.js | 2 - .../choice-group/ChoiceInputMixin.test.js | 49 ++++++++--------- .../choice-group/ChoiceInputMixinTypes.d.ts | 2 + 4 files changed, 75 insertions(+), 30 deletions(-) create mode 100644 packages/form-core/index.d.ts diff --git a/packages/form-core/index.d.ts b/packages/form-core/index.d.ts new file mode 100644 index 000000000..fc1db61f0 --- /dev/null +++ b/packages/form-core/index.d.ts @@ -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'; diff --git a/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js b/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js index 43d853f95..95fd8eb55 100644 --- a/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js +++ b/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js @@ -1,5 +1,4 @@ import { html, LitElement } from '@lion/core'; -// @ts-expect-error import { LionInput } from '@lion/input'; import '@lion/fieldset/lion-fieldset.js'; import { FormGroupMixin, Required } from '@lion/form-core'; @@ -19,7 +18,6 @@ import { ChoiceInputMixin } from '../../src/choice-group/ChoiceInputMixin.js'; describe('ChoiceGroupMixin', () => { class ChoiceInput extends ChoiceInputMixin(LionInput) {} - // @ts-expect-error base constructors same return type customElements.define('choice-group-input', ChoiceInput); // @ts-expect-error class ChoiceGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {} diff --git a/packages/form-core/test/choice-group/ChoiceInputMixin.test.js b/packages/form-core/test/choice-group/ChoiceInputMixin.test.js index 6ec5aae29..6b729ca0b 100644 --- a/packages/form-core/test/choice-group/ChoiceInputMixin.test.js +++ b/packages/form-core/test/choice-group/ChoiceInputMixin.test.js @@ -1,35 +1,28 @@ import { html } from '@lion/core'; -// @ts-expect-error import { LionInput } from '@lion/input'; import { Required } from '@lion/form-core'; import { expect, fixture } from '@open-wc/testing'; import sinon from 'sinon'; import { ChoiceInputMixin } from '../../src/choice-group/ChoiceInputMixin.js'; -/** - * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} ChoiceInputHost - */ - describe('ChoiceInputMixin', () => { - /** @typedef {Element & ChoiceClass} ChoiceInput */ class ChoiceClass extends ChoiceInputMixin(LionInput) { constructor() { super(); this.type = 'checkbox'; // could also be 'radio', should be tested in integration test } } - // @ts-expect-error base constructors same return type customElements.define('choice-input', ChoiceClass); it('is hidden when attribute hidden is true', async () => { - const el = /** @type {ChoiceInput} */ (await fixture( + const el = /** @type {ChoiceClass} */ (await fixture( html``, )); expect(el).not.to.be.displayed; }); it('has choiceValue', async () => { - const el = /** @type {ChoiceInput} */ (await fixture( + const el = /** @type {ChoiceClass} */ (await fixture( html``, )); @@ -43,7 +36,7 @@ describe('ChoiceInputMixin', () => { it('can handle complex data via choiceValue', async () => { const date = new Date(2018, 11, 24, 10, 33, 30, 0); - const el = /** @type {ChoiceInput} */ (await fixture( + const el = /** @type {ChoiceClass} */ (await fixture( html``, )); @@ -53,7 +46,7 @@ describe('ChoiceInputMixin', () => { it('fires one "model-value-changed" event if choiceValue or checked state or modelValue changed', async () => { let counter = 0; - const el = /** @type {ChoiceInput} */ (await fixture(html` + const el = /** @type {ChoiceClass} */ (await fixture(html` { counter += 1; @@ -78,7 +71,7 @@ describe('ChoiceInputMixin', () => { it('fires one "user-input-changed" event after user interaction', async () => { let counter = 0; - const el = /** @type {ChoiceInput} */ (await fixture(html` + const el = /** @type {ChoiceClass} */ (await fixture(html` @@ -230,22 +223,22 @@ describe('ChoiceInputMixin', () => { describe('Format/parse/serialize loop', () => { it('creates a modelValue object like { checked: true, value: foo } on init', async () => { - const el = /** @type {ChoiceInput} */ (await fixture( + const el = /** @type {ChoiceClass} */ (await fixture( html``, )); expect(el.modelValue).deep.equal({ value: 'foo', checked: false }); - const elChecked = /** @type {ChoiceInput} */ (await fixture(html` + const elChecked = /** @type {ChoiceClass} */ (await fixture(html` `)); expect(elChecked.modelValue).deep.equal({ value: 'foo', checked: true }); }); it('creates a formattedValue based on modelValue.value', async () => { - const el = /** @type {ChoiceInput} */ (await fixture(``)); + const el = /** @type {ChoiceClass} */ (await fixture(``)); expect(el.formattedValue).to.equal(''); - const elementWithValue = /** @type {ChoiceInput} */ (await fixture(html` + const elementWithValue = /** @type {ChoiceClass} */ (await fixture(html` `)); expect(elementWithValue.formattedValue).to.equal('foo'); @@ -254,12 +247,12 @@ describe('ChoiceInputMixin', () => { describe('Interaction states', () => { it('is considered prefilled when checked and not considered prefilled when unchecked', async () => { - const el = /** @type {ChoiceInput} */ (await fixture( + const el = /** @type {ChoiceClass} */ (await fixture( html``, )); expect(el.prefilled).equal(true, 'checked element not considered prefilled'); - const elUnchecked = /** @type {ChoiceInput} */ (await fixture( + const elUnchecked = /** @type {ChoiceClass} */ (await fixture( ``, )); expect(elUnchecked.prefilled).equal(false, 'unchecked element not considered prefilled'); diff --git a/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts b/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts index d895cb95a..88bd3fefc 100644 --- a/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts +++ b/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts @@ -17,6 +17,8 @@ export declare class ChoiceInputHost { modelValue: ChoiceInputModelValue; serializedValue: ChoiceInputSerializedValue; + checked: boolean; + get choiceValue(): any; set choiceValue(value: any);