From 7689323348ec618cb3964677193ffbd956b44764 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Fri, 4 Oct 2024 14:29:25 +0300 Subject: [PATCH] experiment: add Lit based version of vaadin-scroller --- packages/scroller/package.json | 5 +- .../scroller/src/vaadin-lit-scroller.d.ts | 1 + packages/scroller/src/vaadin-lit-scroller.js | 69 +++++++++++++++++++ packages/scroller/test/scroller-lit.test.js | 2 + .../scroller/test/scroller-polymer.test.js | 2 + .../{scroller.test.js => scroller.common.js} | 12 ++-- 6 files changed, 85 insertions(+), 6 deletions(-) create mode 100644 packages/scroller/src/vaadin-lit-scroller.d.ts create mode 100644 packages/scroller/src/vaadin-lit-scroller.js create mode 100644 packages/scroller/test/scroller-lit.test.js create mode 100644 packages/scroller/test/scroller-polymer.test.js rename packages/scroller/test/{scroller.test.js => scroller.common.js} (94%) diff --git a/packages/scroller/package.json b/packages/scroller/package.json index e2e10219db..4bf0312dfc 100644 --- a/packages/scroller/package.json +++ b/packages/scroller/package.json @@ -21,6 +21,8 @@ "type": "module", "files": [ "src", + "!src/vaadin-lit-scroller.d.ts", + "!src/vaadin-lit-scroller.js", "theme", "vaadin-*.d.ts", "vaadin-*.js", @@ -41,7 +43,8 @@ "@vaadin/component-base": "24.6.0-alpha0", "@vaadin/vaadin-lumo-styles": "24.6.0-alpha0", "@vaadin/vaadin-material-styles": "24.6.0-alpha0", - "@vaadin/vaadin-themable-mixin": "24.6.0-alpha0" + "@vaadin/vaadin-themable-mixin": "24.6.0-alpha0", + "lit": "^3.0.0" }, "devDependencies": { "@vaadin/chai-plugins": "24.6.0-alpha0", diff --git a/packages/scroller/src/vaadin-lit-scroller.d.ts b/packages/scroller/src/vaadin-lit-scroller.d.ts new file mode 100644 index 0000000000..2ceb10f3af --- /dev/null +++ b/packages/scroller/src/vaadin-lit-scroller.d.ts @@ -0,0 +1 @@ +export * from './vaadin-scroller.js'; diff --git a/packages/scroller/src/vaadin-lit-scroller.js b/packages/scroller/src/vaadin-lit-scroller.js new file mode 100644 index 0000000000..d91678a54f --- /dev/null +++ b/packages/scroller/src/vaadin-lit-scroller.js @@ -0,0 +1,69 @@ +/** + * @license + * Copyright (c) 2020 - 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +import { css, html, LitElement } from 'lit'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js'; +import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; +import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { ScrollerMixin } from './vaadin-scroller-mixin.js'; + +/** + * LitElement based version of `` web component. + * + * ## Disclaimer + * + * This component is an experiment and not yet a part of Vaadin platform. + * There is no ETA regarding specific Vaadin version where it'll land. + * Feel free to try this code in your apps as per Apache 2.0 license. + */ +class Scroller extends ScrollerMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) { + static get is() { + return 'vaadin-scroller'; + } + + static get styles() { + return css` + :host { + display: block; + overflow: auto; + } + + :host([hidden]) { + display: none !important; + } + + :host([scroll-direction='vertical']) { + overflow-x: hidden; + } + + :host([scroll-direction='horizontal']) { + overflow-y: hidden; + } + + :host([scroll-direction='none']) { + overflow: hidden; + } + `; + } + + /** @protected */ + render() { + return html``; + } + + /** @protected */ + ready() { + super.ready(); + + this.__overflowController = new OverflowController(this); + this.addController(this.__overflowController); + } +} + +defineCustomElement(Scroller); + +export { Scroller }; diff --git a/packages/scroller/test/scroller-lit.test.js b/packages/scroller/test/scroller-lit.test.js new file mode 100644 index 0000000000..8233ca7e18 --- /dev/null +++ b/packages/scroller/test/scroller-lit.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-lit-scroller.js'; +import './scroller.common.js'; diff --git a/packages/scroller/test/scroller-polymer.test.js b/packages/scroller/test/scroller-polymer.test.js new file mode 100644 index 0000000000..70f6c18247 --- /dev/null +++ b/packages/scroller/test/scroller-polymer.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-scroller.js'; +import './scroller.common.js'; diff --git a/packages/scroller/test/scroller.test.js b/packages/scroller/test/scroller.common.js similarity index 94% rename from packages/scroller/test/scroller.test.js rename to packages/scroller/test/scroller.common.js index da658f3eec..7587680774 100644 --- a/packages/scroller/test/scroller.test.js +++ b/packages/scroller/test/scroller.common.js @@ -1,13 +1,13 @@ import { expect } from '@vaadin/chai-plugins'; -import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers'; +import { fixtureSync, nextFrame, nextRender, nextUpdate } from '@vaadin/testing-helpers'; import { sendKeys } from '@web/test-runner-commands'; -import '../vaadin-scroller.js'; describe('vaadin-scroller', () => { let scroller; - beforeEach(() => { + beforeEach(async () => { scroller = fixtureSync(''); + await nextRender(); }); describe('focus', () => { @@ -47,8 +47,9 @@ describe('vaadin-scroller', () => { }); describe('scrollDirection', () => { - it('should reflect scrollDirection to attribute', () => { + it('should reflect scrollDirection to attribute', async () => { scroller.scrollDirection = 'horizontal'; + await nextUpdate(scroller); expect(scroller.getAttribute('scroll-direction')).to.equal('horizontal'); }); @@ -57,8 +58,9 @@ describe('vaadin-scroller', () => { expect(getComputedStyle(scroller).overflowY).to.equal('auto'); }); - it('should be possible to enable only vertical scrollbars', () => { + it('should be possible to enable only vertical scrollbars', async () => { scroller.setAttribute('scroll-direction', 'vertical'); + await nextUpdate(scroller); expect(getComputedStyle(scroller).overflowY).to.equal('auto'); expect(getComputedStyle(scroller).overflowX).to.equal('hidden'); });