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

chore(ui): lint and types fixes

Browse source
This commit is contained in:
Thijs Louisse 2023-11-08 18:46:00 +01:00
parent f1b1c46aab
commit 45fe0b4bb3
23 changed files with 6230 additions and 13217 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/components/collapsible/assets/CustomCollapsible.js
View file

@ -56,6 +56,8 @@ export class CustomCollapsible extends LionCollapsible {
contentNode.style.setProperty('opacity', '1');
contentNode.style.setProperty('padding', '12px 0');
contentNode.style.setProperty('max-height', '0px');
// @ts-ignore
// eslint-disable-next-line no-promise-executor-return
await new Promise(resolve => requestAnimationFrame(() => resolve()));
contentNode.style.setProperty('max-height', expectedHeight);
await this._waitForTransition({ contentNode });
@ -105,6 +107,8 @@ export class CustomCollapsible extends LionCollapsible {
*/
async __calculateHeight(contentNode) {
contentNode.style.setProperty('max-height', '');
// @ts-ignore
// eslint-disable-next-line no-promise-executor-return
await new Promise(resolve => requestAnimationFrame(() => resolve()));
return this._contentHeight; // Expected height i.e. actual size once collapsed after animation
}

2
docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js
View file

@ -1,4 +1,4 @@
import { OverlaysManager , OverlaysManager as OverlaysManager2 } from 'overlays';
import { OverlaysManager, OverlaysManager as OverlaysManager2 } from 'overlays';
import { singletonManager } from 'singleton-manager';
let compatibleManager1;

19230
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
packages/ajax/test/interceptors/cacheInterceptors.test.js
View file

@ -25,6 +25,7 @@ describe('cache interceptors', () => {
*/
const returnResponseOnTick = (timeout, i) =>
new Promise(resolve =>
// eslint-disable-next-line no-promise-executor-return
window.setTimeout(() => resolve(new Response(`mock response ${i}`)), timeout),
);

2
packages/ui/components/calendar/src/LionCalendar.js
View file

@ -815,7 +815,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
) {
this.__focusedDate = /** @type {HTMLButtonElement & { date: Date }} */ (
this.shadowRoot?.activeElement
).date;
)?.date;
}
}

4
packages/ui/components/calendar/test-helpers/DayObject.js
View file

@ -63,7 +63,7 @@ export class DayObject {
get weekdayNameShort() {
const weekdayEls = Array.from(
/** @type {HTMLElement} */ (this.el.parentElement?.parentElement).querySelectorAll(
/** @type {HTMLElement} */ (this.el.parentElement?.parentElement)?.querySelectorAll(
'.calendar__day-cell',
),
);
@ -73,7 +73,7 @@ export class DayObject {
get weekdayNameLong() {
const weekdayEls = Array.from(
/** @type {HTMLElement} */ (this.el.parentElement?.parentElement).querySelectorAll(
/** @type {HTMLElement} */ (this.el.parentElement?.parentElement)?.querySelectorAll(
'.calendar__day-cell',
),
);

1
packages/ui/components/drawer/src/LionDrawer.js
View file

@ -115,6 +115,7 @@ export class LionDrawer extends LionCollapsible {
const prop = this.position === 'top' ? 'height' : 'width';
contentNode.style.setProperty(prop, /** @type {string} */ (min));
// eslint-disable-next-line no-promise-executor-return
await new Promise(resolve => requestAnimationFrame(() => resolve(true)));
contentNode.style.setProperty(prop, /** @type {string} */ (max));
await this._waitForTransition({ contentNode });

4
packages/ui/components/form-core/test-helpers/ExampleValidators.js
View file

@ -2,9 +2,7 @@
import { Validator } from '@lion/ui/form-core.js';
export class AlwaysInvalid extends Validator {
static get validatorName() {
return 'AlwaysInvalid';
}
static validatorName = 'AlwaysInvalid';
execute() {
const showMessage = true;

2
packages/ui/components/form-core/test-suites/FormRegistrationMixins.suite.js
View file

@ -165,6 +165,7 @@ export const runRegistrationSuite = customConfig => {
it('works for components that have a delayed render', async () => {
class PerformUpdate extends FormRegistrarMixin(LitElement) {
async performUpdate() {
// eslint-disable-next-line no-promise-executor-return
await new Promise(resolve => setTimeout(() => resolve(undefined), 10));
await super.performUpdate();
}
@ -359,6 +360,7 @@ export const runRegistrationSuite = customConfig => {
const delayedPortalString = defineCE(
class extends FormRegistrarPortalMixin(LitElement) {
async performUpdate() {
// eslint-disable-next-line no-promise-executor-return
await new Promise(resolve => setTimeout(() => resolve(undefined), 10));
await super.performUpdate();
}

13
packages/ui/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js
View file

@ -517,7 +517,11 @@ export function runValidateMixinFeedbackPart() {
.submitted=${true}
.validators=${[constructorValidator]}
.modelValue=${'cat'}
.fieldName=${new Promise(resolve => resolve('myField'))}
.fieldName=${new Promise(
(
resolve, // eslint-disable-next-line no-promise-executor-return
) => resolve('myField'),
)}
>${lightDom}</${tag}>
`)
);
@ -537,6 +541,7 @@ export function runValidateMixinFeedbackPart() {
it('".getMessage()" gets .fieldName defined on Validator config', async () => {
const constructorValidator = new MinLength(4, {
// eslint-disable-next-line no-promise-executor-return
fieldName: new Promise(resolve => resolve('myFieldViaCfg')),
});
const ctorValidator = /** @type {typeof MinLength} */ (constructorValidator.constructor);
@ -548,7 +553,11 @@ export function runValidateMixinFeedbackPart() {
.submitted=${true}
.validators=${[constructorValidator]}
.modelValue=${'cat'}
.fieldName=${new Promise(resolve => resolve('myField'))}
.fieldName=${new Promise(
(
resolve, // eslint-disable-next-line no-promise-executor-return
) => resolve('myField'),
)}
>${lightDom}</${tag}>
`)
);

2
packages/ui/components/form-core/test/validate/StringValidators.test.js
View file

@ -124,7 +124,7 @@ describe('String Validation', () => {
isEnabled = validator.execute('#LionRests');
expect(isEnabled).to.be.true;
validator = new Pattern(new RegExp('#LionRocks'));
validator = new Pattern(/#LionRocks/);
isEnabled = validator.execute('Some string #LionRocks');
expect(isEnabled).to.be.false;

1
packages/ui/components/helpers/src/SbActionLogger.js
View file

@ -5,6 +5,7 @@ import { css, html, LitElement, render } from 'lit';
export class SbActionLogger extends LitElement {
static get properties() {
return {
// eslint-disable-next-line lit/no-native-attributes
title: { type: String, reflect: true },
simple: { type: Boolean, reflect: true },
__logCounter: { type: Number },

10
packages/ui/components/icon/src/LionIcon.js
View file

@ -57,14 +57,6 @@ export class LionIcon extends LitElement {
type: String,
attribute: 'icon-id',
},
/**
* @private
*/
role: {
type: String,
attribute: 'role',
reflect: true,
},
};
}
@ -101,7 +93,6 @@ export class LionIcon extends LitElement {
constructor() {
super();
this.role = 'img';
this.ariaLabel = '';
this.iconId = '';
/**
@ -131,6 +122,7 @@ export class LionIcon extends LitElement {
// ensures that aria-hidden is set if there is no aria-label attribute
this._onLabelChanged();
super.connectedCallback();
this.setAttribute('role', 'img');
}
/**

2
packages/ui/components/icon/test/lion-icon.test.js
View file

@ -185,10 +185,12 @@ describe('lion-icon', () => {
try {
icons.addIconResolver(
'foo',
// eslint-disable-next-line no-promise-executor-return
() => new Promise(resolve => setTimeout(() => resolve(heartSvg), 10)),
);
icons.addIconResolver(
'bar',
// eslint-disable-next-line no-promise-executor-return
() => new Promise(resolve => setTimeout(() => resolve(hammerSvg), 4)),
);
const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);

18
packages/ui/components/input-range/test/lion-input-range.test.js
View file

@ -19,10 +19,14 @@ describe('<lion-input-range>', () => {
<lion-input-range .modelValue=${75} unit="${`%`}"></lion-input-range>
`);
expect(
/** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.input-range__value')).innerText,
/** @type {HTMLElement} */ (
/** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
).innerText,
).to.equal('75');
expect(
/** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.input-range__unit')).innerText,
/** @type {HTMLElement} */ (
/** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__unit')
).innerText,
).to.equal('%');
});
@ -30,12 +34,14 @@ describe('<lion-input-range>', () => {
const el = await fixture(`<lion-input-range min="100" max="200"></lion-input-range>`);
expect(el.shadowRoot?.querySelectorAll('.input-range__limits span').length).to.equal(2);
expect(
/** @type {HTMLElement} */ (el.shadowRoot?.querySelectorAll('.input-range__limits span')[0])
.innerText,
/** @type {HTMLElement} */ (
/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[0]
).innerText,
).to.equal(el.min.toString());
expect(
/** @type {HTMLElement} */ (el.shadowRoot?.querySelectorAll('.input-range__limits span')[1])
.innerText,
/** @type {HTMLElement} */ (
/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[1]
).innerText,
).to.equal(el.max.toString());
});

10
packages/ui/components/listbox/src/LionOptions.js
View file

@ -7,10 +7,6 @@ import { FormRegistrarPortalMixin } from '@lion/ui/form-core.js';
export class LionOptions extends FormRegistrarPortalMixin(LitElement) {
static get properties() {
return {
role: {
type: String,
reflect: true,
},
tabIndex: {
type: Number,
reflect: true,
@ -21,10 +17,14 @@ export class LionOptions extends FormRegistrarPortalMixin(LitElement) {
constructor() {
super();
this.role = 'listbox';
this.tabIndex = 0;
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'listbox');
}
createRenderRoot() {
return this;
}

1
packages/ui/components/localize/src/number/utils/normalize-format-number-to-parts/normalizeIntl.js
View file

@ -17,6 +17,7 @@ import { forceFRBESymbols, forceSymbols } from './forceSymbols.js';
* @param {string} _locale
* @returns {FormatNumberPart[]}
*/
// eslint-disable-next-line default-param-last
export function normalizeIntl(formattedParts, options = {}, _locale) {
let normalize = forceNormalSpaces(formattedParts);
// Dutch and Belgian currency must be moved to end of number

1
packages/ui/components/localize/test-helpers/fake-imports.js
View file

@ -56,5 +56,6 @@ export async function fakeImport(path, ms = 0) {
setTimeout(() => resolveOrReject(result, resolve, reject), ms);
});
}
// eslint-disable-next-line no-promise-executor-return
return new Promise((resolve, reject) => resolveOrReject(result, resolve, reject));
}

2
packages/ui/components/select/test/lion-select.test.js
View file

@ -60,7 +60,7 @@ describe('lion-select', () => {
expect(lionSelect.formattedValue).to.equal('');
const select = /** @type {HTMLSlotElement} */ (
lionSelect.shadowRoot?.querySelector('slot[name=input]')
/** @type {ShadowRoot} */ (lionSelect.shadowRoot).querySelector('slot[name=input]')
).assignedElements()[0];
const options = select.querySelectorAll('option');
options[1].textContent = 'Item 2';

6
packages/ui/components/switch/src/LionSwitchButton.js
View file

@ -4,10 +4,6 @@ import { DisabledWithTabIndexMixin } from '@lion/ui/core.js';
export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
static get properties() {
return {
role: {
type: String,
reflect: true,
},
checked: {
type: Boolean,
reflect: true,
@ -76,7 +72,6 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
// inputNode = this, which always requires a value prop
this.value = '';
this.role = 'switch';
this.checked = false;
this.__initialized = false;
/** @protected */
@ -89,6 +84,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'switch');
this.setAttribute('aria-checked', `${this.checked}`);
this.addEventListener('click', this._toggleChecked);
this.addEventListener('keydown', this.__handleKeydown);

14
packages/ui/components/tabs/src/LionTabs.js
View file

@ -345,6 +345,13 @@ export class LionTabs extends LitElement {
}
}
/**
* @return {number}
*/
get selectedIndex() {
return this.__selectedIndex || 0;
}
/**
* @param {number} value The new index
*/
@ -371,13 +378,6 @@ export class LionTabs extends LitElement {
this.requestUpdate('selectedIndex', stale);
}
/**
* @return {number}
*/
get selectedIndex() {
return this.__selectedIndex || 0;
}
/** @protected */
get _pairCount() {
return (this.__store && this.__store.length) || 0;

2
packages/ui/components/textarea/src/LionTextarea.js
View file

@ -198,7 +198,7 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
let count = 3; // max tasks to wait for
// @ts-ignore this property is added by webcomponentsjs polyfill for old browsers
while (count !== 0 && !this.__shady_native_contains(this._inputNode)) {
// eslint-disable-next-line no-await-in-loop
// eslint-disable-next-line no-await-in-loop, no-promise-executor-return
await new Promise(resolve => setTimeout(resolve));
count -= 1;
}

115
packages/ui/docs/components/collapsible/assets/CustomCollapsible.js
View file

@ -1,115 +0,0 @@
import { LionCollapsible } from '@lion/ui/collapsible.js';
const EVENT = {
TRANSITION_END: 'transitionend',
TRANSITION_START: 'transitionstart',
};
/**
* `CustomCollapsible` is a class for custom collapsible element (`<custom-collapsible>` web component).
* @customElement custom-collapsible
*/
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
export class CustomCollapsible extends LionCollapsible {
static get properties() {
return {
transitioning: {
type: Boolean,
reflect: true,
},
};
}
constructor() {
super();
this.transitioning = false;
}
connectedCallback() {
super.connectedCallback();
this._contentNode?.style.setProperty(
'transition',
'max-height 0.35s, padding 0.35s, opacity 0.35s',
);
if (this.opened) {
this._contentNode?.style.setProperty('padding', '12px 0');
}
}
/**
* Wait until transition is finished.
* @override
*/
toggle() {
if (!this.transitioning) {
super.toggle();
}
}
/**
* Trigger show animation and wait for transition to be finished.
* @param {Object} options - element node and its options
* @param {HTMLElement} options.contentNode
* @override
*/
async _showAnimation({ contentNode }) {
const expectedHeight = await this.__calculateHeight(contentNode);
contentNode.style.setProperty('opacity', '1');
contentNode.style.setProperty('padding', '12px 0');
contentNode.style.setProperty('max-height', '0px');
// eslint-disable-next-line no-promise-executor-return
await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
contentNode.style.setProperty('max-height', expectedHeight);
await this._waitForTransition({ contentNode });
}
/**
* Trigger hide animation and wait for transition to be finished.
* @param {Object} options - element node and its options
* @param {HTMLElement} options.contentNode
* @override
*/
async _hideAnimation({ contentNode }) {
if (this._contentHeight === '0px') {
return;
}
['opacity', 'padding', 'max-height'].map(prop => contentNode.style.setProperty(prop, '0'));
await this._waitForTransition({ contentNode });
}
/**
* Wait until the transition event is finished.
* @param {Object} options - element node and its options
* @param {HTMLElement} options.contentNode
* @returns {Promise<void>} transition event
*/
_waitForTransition({ contentNode }) {
return new Promise(resolve => {
const transitionStarted = () => {
contentNode.removeEventListener(EVENT.TRANSITION_START, transitionStarted);
this.transitioning = true;
};
contentNode.addEventListener(EVENT.TRANSITION_START, transitionStarted);
const transitionEnded = () => {
contentNode.removeEventListener(EVENT.TRANSITION_END, transitionEnded);
this.transitioning = false;
resolve();
};
contentNode.addEventListener(EVENT.TRANSITION_END, transitionEnded);
});
}
/**
* Calculate total content height after collapsible opens
* @param {HTMLElement} contentNode content node
* @private
*/
async __calculateHeight(contentNode) {
contentNode.style.setProperty('max-height', '');
// eslint-disable-next-line no-promise-executor-return
await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
return this._contentHeight; // Expected height i.e. actual size once collapsed after animation
}
}
customElements.define('custom-collapsible', CustomCollapsible);