diff --git a/src/Umbraco.Web.UI.Client/.eslintrc.json b/src/Umbraco.Web.UI.Client/.eslintrc.json index 5034e34797..1d78b5edbf 100644 --- a/src/Umbraco.Web.UI.Client/.eslintrc.json +++ b/src/Umbraco.Web.UI.Client/.eslintrc.json @@ -1,18 +1,18 @@ { "ignorePatterns": ["vite.*.ts"], "root": true, + "plugins": ["eslint-plugin-local-rules"], "extends": ["eslint:recommended", "plugin:import/recommended", "prettier"], - "plugins": ["import", "eslint-plugin-local-rules"], "overrides": [ { "files": ["**/*.ts"], - "plugins": ["import", "@typescript-eslint", "lit", "lit-a11y"], "extends": [ "eslint:recommended", "plugin:import/recommended", "plugin:import/typescript", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", + "plugin:wc/recommended", "plugin:lit/recommended", "plugin:lit-a11y/recommended", "plugin:storybook/recommended", @@ -34,7 +34,8 @@ "import/no-unresolved": "error", "import/order": "warn", "local-rules/bad-type-import": "error", - "local-rules/no-direct-api-import": "warn" + "local-rules/no-direct-api-import": "warn", + "@typescript-eslint/no-non-null-assertion": "off" }, "settings": { "import/parsers": { diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json index f2c8e3250d..30f49277b1 100644 --- a/src/Umbraco.Web.UI.Client/package-lock.json +++ b/src/Umbraco.Web.UI.Client/package-lock.json @@ -20,7 +20,6 @@ "element-internals-polyfill": "^1.1.18", "lit": "^2.6.0", "lodash": "^4.17.21", - "openapi-typescript-fetch": "^1.1.3", "router-slot": "^1.5.5", "rxjs": "^7.8.0", "uuid": "^9.0.0" @@ -55,7 +54,8 @@ "eslint-plugin-lit": "^1.8.0", "eslint-plugin-lit-a11y": "^2.3.0", "eslint-plugin-local-rules": "^1.3.2", - "eslint-plugin-storybook": "^0.6.8", + "eslint-plugin-storybook": "^0.6.10", + "eslint-plugin-wc": "^1.4.0", "lit-html": "^2.6.0", "msw": "^0.49.2", "msw-storybook-addon": "^1.6.3", @@ -13789,9 +13789,9 @@ "dev": true }, "node_modules/eslint-plugin-storybook": { - "version": "0.6.8", - "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.8.tgz", - "integrity": "sha512-57vyICs19ODx0ql+shM0hKFn4Nvwcrdw29KJbj6QKGZ+Y47aDws/lvBx65++F0vpEsr0lkZljSdUbxWjIP2+Rw==", + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.10.tgz", + "integrity": "sha512-3DKXRey06EhwnTKaG6fgMqGTy4C3z6Ikyv6VVixO5BvaExWQe3yGWIAufrC2Et0OaAMIaMwx9KWjqb/Wq+JxPg==", "dev": true, "dependencies": { "@storybook/csf": "^0.0.1", @@ -13815,6 +13815,19 @@ "lodash": "^4.17.15" } }, + "node_modules/eslint-plugin-wc": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-wc/-/eslint-plugin-wc-1.4.0.tgz", + "integrity": "sha512-AmoKhJyBNcS3I+dbS/JTmRSq4REUvQ/JJCeWJezlK8gqTsdr5JD+EAvHldH/tVvU+l6qR2Tykga5hTINP9zS8A==", + "dev": true, + "dependencies": { + "is-valid-element-name": "^1.0.0", + "js-levenshtein-esm": "^1.2.0" + }, + "peerDependencies": { + "eslint": ">=5" + } + }, "node_modules/eslint-rule-extender": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/eslint-rule-extender/-/eslint-rule-extender-0.0.1.tgz", @@ -17314,6 +17327,12 @@ "node": ">=0.10.0" } }, + "node_modules/is-potential-custom-element-name": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", + "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", + "dev": true + }, "node_modules/is-reference": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.0.tgz", @@ -17470,6 +17489,15 @@ "dev": true, "optional": true }, + "node_modules/is-valid-element-name": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-valid-element-name/-/is-valid-element-name-1.0.0.tgz", + "integrity": "sha512-GZITEJY2LkSjQfaIPBha7eyZv+ge0PhBR7KITeCCWvy7VBQrCUdFkvpI+HrAPQjVtVjy1LvlEkqQTHckoszruw==", + "dev": true, + "dependencies": { + "is-potential-custom-element-name": "^1.0.0" + } + }, "node_modules/is-weakmap": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz", @@ -17884,6 +17912,12 @@ "node": ">=0.10.0" } }, + "node_modules/js-levenshtein-esm": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/js-levenshtein-esm/-/js-levenshtein-esm-1.2.0.tgz", + "integrity": "sha512-fzreKVq1eD7eGcQr7MtRpQH94f8gIfhdrc7yeih38xh684TNMK9v5aAu2wxfIRMk/GpAJRrzcirMAPIaSDaByQ==", + "dev": true + }, "node_modules/js-sdsl": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz", @@ -21296,15 +21330,6 @@ "node": ">=12" } }, - "node_modules/openapi-typescript-fetch": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/openapi-typescript-fetch/-/openapi-typescript-fetch-1.1.3.tgz", - "integrity": "sha512-smLZPck4OkKMNExcw8jMgrMOGgVGx2N/s6DbKL2ftNl77g5HfoGpZGFy79RBzU/EkaO0OZpwBnslfdBfh7ZcWg==", - "engines": { - "node": ">= 12.0.0", - "npm": ">= 7.0.0" - } - }, "node_modules/optionator": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", @@ -40001,9 +40026,9 @@ "dev": true }, "eslint-plugin-storybook": { - "version": "0.6.8", - "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.8.tgz", - "integrity": "sha512-57vyICs19ODx0ql+shM0hKFn4Nvwcrdw29KJbj6QKGZ+Y47aDws/lvBx65++F0vpEsr0lkZljSdUbxWjIP2+Rw==", + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.10.tgz", + "integrity": "sha512-3DKXRey06EhwnTKaG6fgMqGTy4C3z6Ikyv6VVixO5BvaExWQe3yGWIAufrC2Et0OaAMIaMwx9KWjqb/Wq+JxPg==", "dev": true, "requires": { "@storybook/csf": "^0.0.1", @@ -40023,6 +40048,16 @@ } } }, + "eslint-plugin-wc": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-wc/-/eslint-plugin-wc-1.4.0.tgz", + "integrity": "sha512-AmoKhJyBNcS3I+dbS/JTmRSq4REUvQ/JJCeWJezlK8gqTsdr5JD+EAvHldH/tVvU+l6qR2Tykga5hTINP9zS8A==", + "dev": true, + "requires": { + "is-valid-element-name": "^1.0.0", + "js-levenshtein-esm": "^1.2.0" + } + }, "eslint-rule-extender": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/eslint-rule-extender/-/eslint-rule-extender-0.0.1.tgz", @@ -42571,6 +42606,12 @@ "isobject": "^3.0.1" } }, + "is-potential-custom-element-name": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", + "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", + "dev": true + }, "is-reference": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.0.tgz", @@ -42679,6 +42720,15 @@ "dev": true, "optional": true }, + "is-valid-element-name": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-valid-element-name/-/is-valid-element-name-1.0.0.tgz", + "integrity": "sha512-GZITEJY2LkSjQfaIPBha7eyZv+ge0PhBR7KITeCCWvy7VBQrCUdFkvpI+HrAPQjVtVjy1LvlEkqQTHckoszruw==", + "dev": true, + "requires": { + "is-potential-custom-element-name": "^1.0.0" + } + }, "is-weakmap": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz", @@ -42990,6 +43040,12 @@ "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==", "dev": true }, + "js-levenshtein-esm": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/js-levenshtein-esm/-/js-levenshtein-esm-1.2.0.tgz", + "integrity": "sha512-fzreKVq1eD7eGcQr7MtRpQH94f8gIfhdrc7yeih38xh684TNMK9v5aAu2wxfIRMk/GpAJRrzcirMAPIaSDaByQ==", + "dev": true + }, "js-sdsl": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz", @@ -45572,11 +45628,6 @@ } } }, - "openapi-typescript-fetch": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/openapi-typescript-fetch/-/openapi-typescript-fetch-1.1.3.tgz", - "integrity": "sha512-smLZPck4OkKMNExcw8jMgrMOGgVGx2N/s6DbKL2ftNl77g5HfoGpZGFy79RBzU/EkaO0OZpwBnslfdBfh7ZcWg==" - }, "optionator": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 5d4f2a0580..73939ddbc2 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -35,7 +35,7 @@ "test": "web-test-runner --coverage", "test:watch": "web-test-runner --watch", "test:e2e": "npx playwright test", - "lint": "eslint --cache src e2e", + "lint": "eslint src e2e", "lint:fix": "npm run lint -- --fix", "format": "prettier 'src/**/*.ts'", "format:fix": "npm run format -- --write", @@ -56,17 +56,16 @@ }, "dependencies": { "@umbraco-ui/uui": "^1.1.0", + "@umbraco-ui/uui-color-swatch": "file:umbraco-ui-uui-color-swatch-0.0.0.tgz", + "@umbraco-ui/uui-color-swatches": "file:umbraco-ui-uui-color-swatches-2.0.0.tgz", "@umbraco-ui/uui-css": "^1.0.0", "@umbraco-ui/uui-modal": "file:umbraco-ui-uui-modal-0.0.0.tgz", "@umbraco-ui/uui-modal-container": "file:umbraco-ui-uui-modal-container-0.0.0.tgz", "@umbraco-ui/uui-modal-dialog": "file:umbraco-ui-uui-modal-dialog-0.0.0.tgz", "@umbraco-ui/uui-modal-sidebar": "file:umbraco-ui-uui-modal-sidebar-0.0.0.tgz", - "@umbraco-ui/uui-color-swatches": "file:umbraco-ui-uui-color-swatches-2.0.0.tgz", - "@umbraco-ui/uui-color-swatch": "file:umbraco-ui-uui-color-swatch-0.0.0.tgz", "element-internals-polyfill": "^1.1.18", "lit": "^2.6.0", "lodash": "^4.17.21", - "openapi-typescript-fetch": "^1.1.3", "router-slot": "^1.5.5", "rxjs": "^7.8.0", "uuid": "^9.0.0" @@ -101,7 +100,8 @@ "eslint-plugin-lit": "^1.8.0", "eslint-plugin-lit-a11y": "^2.3.0", "eslint-plugin-local-rules": "^1.3.2", - "eslint-plugin-storybook": "^0.6.8", + "eslint-plugin-storybook": "^0.6.10", + "eslint-plugin-wc": "^1.4.0", "lit-html": "^2.6.0", "msw": "^0.49.2", "msw-storybook-addon": "^1.6.3", diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts index 73f4f93dfb..52d943758a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts @@ -74,23 +74,36 @@ export class UmbCollectionViewsMediaGridElement extends UmbLitElement { constructor() { super(); - document.addEventListener('dragenter', () => { - this.toggleAttribute('dragging', true); - }); - document.addEventListener('dragleave', () => { - this.toggleAttribute('dragging', false); - }); - document.addEventListener('drop', (e) => { - e.preventDefault(); - this.toggleAttribute('dragging', false); - }); + document.addEventListener('dragenter', this._handleDragEnter.bind(this)); + document.addEventListener('dragleave', this._handleDragLeave.bind(this)); + document.addEventListener('drop', this._handleDrop.bind(this)); this.consumeContext('umbCollectionContext', (instance) => { - console.log("umbCollectionContext", instance) + console.log('umbCollectionContext', instance); this._collectionContext = instance; this._observeCollectionContext(); }); } + disconnectedCallback(): void { + super.disconnectedCallback(); + document.removeEventListener('dragenter', this._handleDragEnter.bind(this)); + document.removeEventListener('dragleave', this._handleDragLeave.bind(this)); + document.removeEventListener('drop', this._handleDrop.bind(this)); + } + + private _handleDragEnter() { + this.toggleAttribute('dragging', true); + } + + private _handleDragLeave() { + this.toggleAttribute('dragging', false); + } + + private _handleDrop(e: DragEvent) { + e.preventDefault(); + this.toggleAttribute('dragging', false); + } + private _observeCollectionContext() { if (!this._collectionContext) return; @@ -144,11 +157,13 @@ export class UmbCollectionViewsMediaGridElement extends UmbLitElement { label="Drop files here" accept="">
- ${this._mediaItems ? repeat( - this._mediaItems, - (file, index) => file.key + index, - (file) => this._renderMediaItem(file) - ) : ''} + ${this._mediaItems + ? repeat( + this._mediaItems, + (file, index) => file.key + index, + (file) => this._renderMediaItem(file) + ) + : ''}
`; } diff --git a/src/Umbraco.Web.UI.Client/src/core/controller/controller-host.mixin.ts b/src/Umbraco.Web.UI.Client/src/core/controller/controller-host.mixin.ts index a71bc71ab7..37291b934e 100644 --- a/src/Umbraco.Web.UI.Client/src/core/controller/controller-host.mixin.ts +++ b/src/Umbraco.Web.UI.Client/src/core/controller/controller-host.mixin.ts @@ -50,7 +50,6 @@ export const UmbControllerHostMixin = (superCl if(ctrl.unique) { this.#controllers.forEach(x => { if(x.unique === ctrl.unique) { - debugger; this.removeController(x); } }); diff --git a/src/Umbraco.Web.UI.Client/src/core/controller/controller.test.ts b/src/Umbraco.Web.UI.Client/src/core/controller/controller.test.ts new file mode 100644 index 0000000000..4da206b75e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/controller/controller.test.ts @@ -0,0 +1,50 @@ +import { expect } from '@open-wc/testing'; +import { customElement } from 'lit/decorators.js'; +import { UmbContextProviderController } from '../context-api/provide/context-provider.controller'; +import { UmbControllerHostInterface, UmbControllerHostMixin } from './controller-host.mixin'; + +class MyClass { + prop = 'value from provider'; +} + +@customElement('test-my-controller-host') +class MyHostElement extends UmbControllerHostMixin(HTMLElement) { + +} + +describe('UmbContextProvider', () => { + type NewType = UmbControllerHostInterface; + + let hostElement: NewType; + const contextInstance = new MyClass(); + + beforeEach(() => { + hostElement = document.createElement('test-my-controller-host') as UmbControllerHostInterface; + }); + + + describe('Destroyed controllers is gone from host', () => { + it('has a host property', () => { + + const ctrl = new UmbContextProviderController(hostElement, 'my-test-context', contextInstance); + + expect(hostElement.hasController(ctrl)).to.be.true; + + ctrl.destroy(); + + expect(hostElement.hasController(ctrl)).to.be.false; + }); + }); + + describe('Unique controllers replace each other', () => { + it('has a host property', () => { + + const firstCtrl = new UmbContextProviderController(hostElement, 'my-test-context', contextInstance); + const secondCtrl = new UmbContextProviderController(hostElement, 'my-test-context', contextInstance); + + expect(hostElement.hasController(firstCtrl)).to.be.false; + expect(hostElement.hasController(secondCtrl)).to.be.true; + }); + }); + +});