From 939d0e3bdbe332c806776447117d8708e08d90c0 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Mon, 6 May 2024 09:44:21 +0300 Subject: [PATCH] experiment: add LitElement based version of tabs (#7379) --- packages/tabs/package.json | 2 + packages/tabs/src/vaadin-lit-tab.d.ts | 6 ++ packages/tabs/src/vaadin-lit-tab.js | 57 +++++++++++++++++++ packages/tabs/src/vaadin-lit-tabs.d.ts | 6 ++ packages/tabs/src/vaadin-lit-tabs.js | 54 ++++++++++++++++++ packages/tabs/src/vaadin-tabs-mixin.js | 2 + packages/tabs/test/scroll-lit.test.js | 3 + packages/tabs/test/scroll-polymer.test.js | 3 + .../test/{scroll.test.js => scroll.common.js} | 2 - packages/tabs/test/tab-lit.test.js | 2 + packages/tabs/test/tab-polymer.test.js | 2 + .../tabs/test/{tab.test.js => tab.common.js} | 6 +- packages/tabs/test/tabs-lit.test.js | 2 + packages/tabs/test/tabs-polymer.test.js | 2 + .../test/{tabs.test.js => tabs.common.js} | 21 +++++-- packages/tabs/theme/lumo/vaadin-lit-tab.js | 2 + packages/tabs/theme/lumo/vaadin-lit-tabs.js | 3 + .../tabs/theme/material/vaadin-lit-tab.js | 2 + .../tabs/theme/material/vaadin-lit-tabs.js | 3 + 19 files changed, 170 insertions(+), 10 deletions(-) create mode 100644 packages/tabs/src/vaadin-lit-tab.d.ts create mode 100644 packages/tabs/src/vaadin-lit-tab.js create mode 100644 packages/tabs/src/vaadin-lit-tabs.d.ts create mode 100644 packages/tabs/src/vaadin-lit-tabs.js create mode 100644 packages/tabs/test/scroll-lit.test.js create mode 100644 packages/tabs/test/scroll-polymer.test.js rename packages/tabs/test/{scroll.test.js => scroll.common.js} (99%) create mode 100644 packages/tabs/test/tab-lit.test.js create mode 100644 packages/tabs/test/tab-polymer.test.js rename packages/tabs/test/{tab.test.js => tab.common.js} (88%) create mode 100644 packages/tabs/test/tabs-lit.test.js create mode 100644 packages/tabs/test/tabs-polymer.test.js rename packages/tabs/test/{tabs.test.js => tabs.common.js} (96%) create mode 100644 packages/tabs/theme/lumo/vaadin-lit-tab.js create mode 100644 packages/tabs/theme/lumo/vaadin-lit-tabs.js create mode 100644 packages/tabs/theme/material/vaadin-lit-tab.js create mode 100644 packages/tabs/theme/material/vaadin-lit-tabs.js diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 6608d49bf6..87395207ca 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -24,6 +24,8 @@ "theme", "vaadin-*.d.ts", "vaadin-*.js", + "!vaadin-lit-*.d.ts", + "!vaadin-lit-*.js", "web-types.json", "web-types.lit.json" ], diff --git a/packages/tabs/src/vaadin-lit-tab.d.ts b/packages/tabs/src/vaadin-lit-tab.d.ts new file mode 100644 index 0000000000..b54e5b3cfa --- /dev/null +++ b/packages/tabs/src/vaadin-lit-tab.d.ts @@ -0,0 +1,6 @@ +/** + * @license + * Copyright (c) 2017 - 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +export * from './vaadin-tab.js'; diff --git a/packages/tabs/src/vaadin-lit-tab.js b/packages/tabs/src/vaadin-lit-tab.js new file mode 100644 index 0000000000..7967e3c8f2 --- /dev/null +++ b/packages/tabs/src/vaadin-lit-tab.js @@ -0,0 +1,57 @@ +/** + * @license + * Copyright (c) 2017 - 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +import { html, LitElement } from 'lit'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; +import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js'; +import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { TabMixin } from './vaadin-tab-mixin.js'; +import { tabStyles } from './vaadin-tab-styles.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. + * + * @extends HTMLElement + * @mixes ElementMixin + * @mixes TabMixin + * @mixes ThemableMixin + */ +class Tab extends TabMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) { + static get is() { + return 'vaadin-tab'; + } + + static get styles() { + return [tabStyles]; + } + + /** @protected */ + render() { + return html` + + + `; + } + + /** @protected */ + ready() { + super.ready(); + + this._tooltipController = new TooltipController(this); + this.addController(this._tooltipController); + } +} + +defineCustomElement(Tab); + +export { Tab }; diff --git a/packages/tabs/src/vaadin-lit-tabs.d.ts b/packages/tabs/src/vaadin-lit-tabs.d.ts new file mode 100644 index 0000000000..69ca687d17 --- /dev/null +++ b/packages/tabs/src/vaadin-lit-tabs.d.ts @@ -0,0 +1,6 @@ +/** + * @license + * Copyright (c) 2017 - 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +export * from './vaadin-tabs.js'; diff --git a/packages/tabs/src/vaadin-lit-tabs.js b/packages/tabs/src/vaadin-lit-tabs.js new file mode 100644 index 0000000000..54089a2b2f --- /dev/null +++ b/packages/tabs/src/vaadin-lit-tabs.js @@ -0,0 +1,54 @@ +/** + * @license + * Copyright (c) 2017 - 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +import './vaadin-lit-tab.js'; +import { html, LitElement } from 'lit'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; +import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { TabsMixin } from './vaadin-tabs-mixin.js'; +import { tabsStyles } from './vaadin-tabs-styles.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. + * + * @extends HTMLElement + * @mixes ElementMixin + * @mixes TabsMixin + * @mixes ThemableMixin + */ +class Tabs extends TabsMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) { + static get is() { + return 'vaadin-tabs'; + } + + static get styles() { + return [tabsStyles]; + } + + /** @protected */ + render() { + return html` + + +
+ +
+ + + `; + } +} + +defineCustomElement(Tabs); + +export { Tabs }; diff --git a/packages/tabs/src/vaadin-tabs-mixin.js b/packages/tabs/src/vaadin-tabs-mixin.js index 95b206f236..8181e064d0 100644 --- a/packages/tabs/src/vaadin-tabs-mixin.js +++ b/packages/tabs/src/vaadin-tabs-mixin.js @@ -24,6 +24,8 @@ export const TabsMixin = (superClass) => orientation: { value: 'horizontal', type: String, + reflectToAttribute: true, + sync: true, }, /** diff --git a/packages/tabs/test/scroll-lit.test.js b/packages/tabs/test/scroll-lit.test.js new file mode 100644 index 0000000000..a04fb41edd --- /dev/null +++ b/packages/tabs/test/scroll-lit.test.js @@ -0,0 +1,3 @@ +import './not-animated-styles.js'; +import '../theme/lumo/vaadin-lit-tabs.js'; +import './scroll.common.js'; diff --git a/packages/tabs/test/scroll-polymer.test.js b/packages/tabs/test/scroll-polymer.test.js new file mode 100644 index 0000000000..1396a61b68 --- /dev/null +++ b/packages/tabs/test/scroll-polymer.test.js @@ -0,0 +1,3 @@ +import './not-animated-styles.js'; +import '../vaadin-tabs.js'; +import './scroll.common.js'; diff --git a/packages/tabs/test/scroll.test.js b/packages/tabs/test/scroll.common.js similarity index 99% rename from packages/tabs/test/scroll.test.js rename to packages/tabs/test/scroll.common.js index b3903cc17e..aa9b0dbd1d 100644 --- a/packages/tabs/test/scroll.test.js +++ b/packages/tabs/test/scroll.common.js @@ -1,7 +1,5 @@ import { expect } from '@esm-bundle/chai'; import { arrowDown, arrowLeft, arrowRight, arrowUp, fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers'; -import './not-animated-styles.js'; -import '../vaadin-tabs.js'; describe('scrollable tabs', () => { let tabs, items, scroller; diff --git a/packages/tabs/test/tab-lit.test.js b/packages/tabs/test/tab-lit.test.js new file mode 100644 index 0000000000..6cfc28d2f1 --- /dev/null +++ b/packages/tabs/test/tab-lit.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-lit-tab.js'; +import './tab.common.js'; diff --git a/packages/tabs/test/tab-polymer.test.js b/packages/tabs/test/tab-polymer.test.js new file mode 100644 index 0000000000..ba544d3af1 --- /dev/null +++ b/packages/tabs/test/tab-polymer.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-tab.js'; +import './tab.common.js'; diff --git a/packages/tabs/test/tab.test.js b/packages/tabs/test/tab.common.js similarity index 88% rename from packages/tabs/test/tab.test.js rename to packages/tabs/test/tab.common.js index c333d33088..bf4c3768f5 100644 --- a/packages/tabs/test/tab.test.js +++ b/packages/tabs/test/tab.common.js @@ -1,12 +1,12 @@ import { expect } from '@esm-bundle/chai'; -import { fixtureSync } from '@vaadin/testing-helpers'; -import '../vaadin-tab.js'; +import { fixtureSync, nextRender } from '@vaadin/testing-helpers'; describe('tab', () => { let tab; - beforeEach(() => { + beforeEach(async () => { tab = fixtureSync('text-content'); + await nextRender(); }); it('should have a correct localName', () => { diff --git a/packages/tabs/test/tabs-lit.test.js b/packages/tabs/test/tabs-lit.test.js new file mode 100644 index 0000000000..912cd8e57c --- /dev/null +++ b/packages/tabs/test/tabs-lit.test.js @@ -0,0 +1,2 @@ +import '../theme/lumo/vaadin-lit-tabs.js'; +import './tabs.common.js'; diff --git a/packages/tabs/test/tabs-polymer.test.js b/packages/tabs/test/tabs-polymer.test.js new file mode 100644 index 0000000000..43a472d70f --- /dev/null +++ b/packages/tabs/test/tabs-polymer.test.js @@ -0,0 +1,2 @@ +import '../vaadin-tabs.js'; +import './tabs.common.js'; diff --git a/packages/tabs/test/tabs.test.js b/packages/tabs/test/tabs.common.js similarity index 96% rename from packages/tabs/test/tabs.test.js rename to packages/tabs/test/tabs.common.js index f47fc14109..f6593b1c17 100644 --- a/packages/tabs/test/tabs.test.js +++ b/packages/tabs/test/tabs.common.js @@ -1,7 +1,15 @@ import { expect } from '@esm-bundle/chai'; -import { arrowRight, aTimeout, enter, fixtureSync, listenOnce, nextFrame, space } from '@vaadin/testing-helpers'; +import { + arrowRight, + aTimeout, + enter, + fixtureSync, + listenOnce, + nextFrame, + nextRender, + space, +} from '@vaadin/testing-helpers'; import sinon from 'sinon'; -import '../vaadin-tabs.js'; /** * Resolves once the function is invoked on the given object. @@ -26,7 +34,7 @@ async function onceResized(tabs) { describe('tabs', () => { let tabs; - beforeEach(() => { + beforeEach(async () => { tabs = fixtureSync(` Foo @@ -39,6 +47,7 @@ describe('tabs', () => { `); + await nextRender(); tabs._observer.flush(); }); @@ -234,7 +243,7 @@ describe('tabs', () => { describe('flex child tabs', () => { let wrapper, tabs; - beforeEach(() => { + beforeEach(async () => { wrapper = fixtureSync(`
@@ -243,6 +252,7 @@ describe('flex child tabs', () => {
`); + await nextRender(); tabs = wrapper.querySelector('vaadin-tabs'); }); @@ -258,7 +268,7 @@ describe('flex child tabs', () => { describe('flex equal width tabs', () => { let wrapper, tabs; - beforeEach(() => { + beforeEach(async () => { wrapper = fixtureSync(`
@@ -268,6 +278,7 @@ describe('flex equal width tabs', () => {
`); + await nextRender(); tabs = wrapper.querySelector('vaadin-tabs'); tabs._observer.flush(); }); diff --git a/packages/tabs/theme/lumo/vaadin-lit-tab.js b/packages/tabs/theme/lumo/vaadin-lit-tab.js new file mode 100644 index 0000000000..760d1c99bc --- /dev/null +++ b/packages/tabs/theme/lumo/vaadin-lit-tab.js @@ -0,0 +1,2 @@ +import './vaadin-tab-styles.js'; +import '../../src/vaadin-lit-tab.js'; diff --git a/packages/tabs/theme/lumo/vaadin-lit-tabs.js b/packages/tabs/theme/lumo/vaadin-lit-tabs.js new file mode 100644 index 0000000000..e693388a6f --- /dev/null +++ b/packages/tabs/theme/lumo/vaadin-lit-tabs.js @@ -0,0 +1,3 @@ +import './vaadin-lit-tab.js'; +import './vaadin-tabs-styles.js'; +import '../../src/vaadin-lit-tabs.js'; diff --git a/packages/tabs/theme/material/vaadin-lit-tab.js b/packages/tabs/theme/material/vaadin-lit-tab.js new file mode 100644 index 0000000000..760d1c99bc --- /dev/null +++ b/packages/tabs/theme/material/vaadin-lit-tab.js @@ -0,0 +1,2 @@ +import './vaadin-tab-styles.js'; +import '../../src/vaadin-lit-tab.js'; diff --git a/packages/tabs/theme/material/vaadin-lit-tabs.js b/packages/tabs/theme/material/vaadin-lit-tabs.js new file mode 100644 index 0000000000..e693388a6f --- /dev/null +++ b/packages/tabs/theme/material/vaadin-lit-tabs.js @@ -0,0 +1,3 @@ +import './vaadin-lit-tab.js'; +import './vaadin-tabs-styles.js'; +import '../../src/vaadin-lit-tabs.js';