From 32202a88ec93d2e5f4a6a6b697ce6a9c627e7929 Mon Sep 17 00:00:00 2001 From: Joren Broekema Date: Mon, 14 Sep 2020 15:08:02 +0200 Subject: [PATCH] feat(input): add types --- .changeset/serious-sheep-drum.md | 5 +++++ .changeset/witty-adults-sip.md | 5 +++++ packages/input/index.d.ts | 1 + packages/input/src/LionInput.js | 13 +++++++++++-- .../input/test/lion-input-integrations.test.js | 1 - packages/input/test/lion-input.test.js | 16 ++++++++++------ tsconfig.json | 3 ++- 7 files changed, 34 insertions(+), 10 deletions(-) create mode 100644 .changeset/serious-sheep-drum.md create mode 100644 .changeset/witty-adults-sip.md create mode 100644 packages/input/index.d.ts diff --git a/.changeset/serious-sheep-drum.md b/.changeset/serious-sheep-drum.md new file mode 100644 index 000000000..d2b1e420b --- /dev/null +++ b/.changeset/serious-sheep-drum.md @@ -0,0 +1,5 @@ +--- +'@lion/form-core': patch +--- + +Added index definition file to git, to allow for importing LionField module definition. Adjust some types now that LionInput will be typed diff --git a/.changeset/witty-adults-sip.md b/.changeset/witty-adults-sip.md new file mode 100644 index 000000000..d8e2a73cb --- /dev/null +++ b/.changeset/witty-adults-sip.md @@ -0,0 +1,5 @@ +--- +'@lion/input': minor +--- + +Add types for LionInput component, including applying them in the tests. diff --git a/packages/input/index.d.ts b/packages/input/index.d.ts new file mode 100644 index 000000000..9779cad06 --- /dev/null +++ b/packages/input/index.d.ts @@ -0,0 +1 @@ +export { LionInput } from './src/LionInput.js'; diff --git a/packages/input/src/LionInput.js b/packages/input/src/LionInput.js index 5553f0de5..829bea50d 100644 --- a/packages/input/src/LionInput.js +++ b/packages/input/src/LionInput.js @@ -6,6 +6,7 @@ import { LionField } from '@lion/form-core'; * @customElement lion-input * @extends {LionField} */ +// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. export class LionInput extends LionField { static get properties() { return { @@ -39,8 +40,9 @@ export class LionInput extends LionField { input: () => { // TODO: Find a better way to do value delegation via attr const native = document.createElement('input'); - if (this.hasAttribute('value')) { - native.setAttribute('value', this.getAttribute('value')); + const value = this.getAttribute('value'); + if (value) { + native.setAttribute('value', value); } return native; }, @@ -51,8 +53,13 @@ export class LionInput extends LionField { super(); this.readOnly = false; this.type = 'text'; + this.placeholder = ''; } + /** + * @param {PropertyKey} name + * @param {?} oldValue + */ requestUpdateInternal(name, oldValue) { super.requestUpdateInternal(name, oldValue); if (name === 'readOnly') { @@ -60,11 +67,13 @@ export class LionInput extends LionField { } } + /** @param {import('lit-element').PropertyValues } changedProperties */ firstUpdated(changedProperties) { super.firstUpdated(changedProperties); this.__delegateReadOnly(); } + /** @param {import('lit-element').PropertyValues } changedProperties */ updated(changedProperties) { super.updated(changedProperties); if (changedProperties.has('type')) { diff --git a/packages/input/test/lion-input-integrations.test.js b/packages/input/test/lion-input-integrations.test.js index 15d8aef27..c14395bca 100644 --- a/packages/input/test/lion-input-integrations.test.js +++ b/packages/input/test/lion-input-integrations.test.js @@ -7,7 +7,6 @@ const tagString = 'lion-input'; describe(' integrations', () => { runInteractionStateMixinSuite({ tagString, - suffix: 'lion-input', }); runFormatMixinSuite({ diff --git a/packages/input/test/lion-input.test.js b/packages/input/test/lion-input.test.js index 6511277bd..bba50e0bb 100644 --- a/packages/input/test/lion-input.test.js +++ b/packages/input/test/lion-input.test.js @@ -2,12 +2,16 @@ import { expect, fixture, html, unsafeStatic } from '@open-wc/testing'; import '../lion-input.js'; +/** + * @typedef {import('../src/LionInput').LionInput} LionInput + */ + const tagString = 'lion-input'; const tag = unsafeStatic(tagString); describe('', () => { it('delegates readOnly property and readonly attribute', async () => { - const el = await fixture(html`<${tag} readonly>`); + const el = /** @type {LionInput} */ (await fixture(html`<${tag} readonly>`)); expect(el._inputNode.readOnly).to.equal(true); el.readOnly = false; await el.updateComplete; @@ -16,19 +20,19 @@ describe('', () => { }); it('delegates value attribute', async () => { - const el = await fixture(html`<${tag} value="prefilled">`); + const el = /** @type {LionInput} */ (await fixture(html`<${tag} value="prefilled">`)); expect(el._inputNode.getAttribute('value')).to.equal('prefilled'); }); it('automatically creates an element if not provided by user', async () => { - const el = await fixture(html` + const el = /** @type {LionInput} */ (await fixture(html` <${tag}> - `); + `)); expect(el.querySelector('input')).to.equal(el._inputNode); }); it('has a type which is reflected to an attribute and is synced down to the native input', async () => { - const el = await fixture(html`<${tag}>`); + const el = /** @type {LionInput} */ (await fixture(html`<${tag}>`)); expect(el.type).to.equal('text'); expect(el.getAttribute('type')).to.equal('text'); expect(el._inputNode.getAttribute('type')).to.equal('text'); @@ -40,7 +44,7 @@ describe('', () => { }); it('has an attribute that can be used to set the placeholder text of the input', async () => { - const el = await fixture(html`<${tag} placeholder="text">`); + const el = /** @type {LionInput} */ (await fixture(html`<${tag} placeholder="text">`)); expect(el.getAttribute('placeholder')).to.equal('text'); expect(el._inputNode.getAttribute('placeholder')).to.equal('text'); diff --git a/tsconfig.json b/tsconfig.json index 07496df74..fabe5dd02 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,7 +23,8 @@ "packages/overlays/**/*.js", "packages/tooltip/**/*.js", "packages/button/src/**/*.js", - "packages/listbox/src/*.js" + "packages/listbox/src/*.js", + "packages/input/**/*.js" ], "exclude": [ "node_modules",