experiment: add LitElement based version of tabs

dev/tabs.html

@@ -8,8 +8,7 @@
     <script type="module" src="./common.js"></script>
 
     <script type="module">
-      import '@vaadin/tabs';
-      import '@vaadin/tooltip';
+      import '@vaadin/tabs/theme/lumo/vaadin-lit-tabs.js';
     </script>
   </head>
 

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"
   ],

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';

packages/tabs/src/vaadin-lit-tab.js

@@ -0,0 +1,58 @@
+/**
+ * @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 `<vaadin-tab>` 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
+ * @protected
+ */
+class Tab extends TabMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-tab';
+  }
+
+  static get styles() {
+    return [tabStyles];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <slot></slot>
+      <slot name="tooltip"></slot>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+  }
+}
+
+defineCustomElement(Tab);
+
+export { Tab };

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';

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 `<vaadin-tabs>` 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`
+      <div @click="${this._scrollBack}" part="back-button" aria-hidden="true"></div>
+
+      <div id="scroll" part="tabs">
+        <slot></slot>
+      </div>
+
+      <div @click="${this._scrollForward}" part="forward-button" aria-hidden="true"></div>
+    `;
+  }
+}
+
+defineCustomElement(Tabs);
+
+export { Tabs };

packages/tabs/src/vaadin-tabs-mixin.js

@@ -24,6 +24,8 @@ export const TabsMixin = (superClass) =>
         orientation: {
           value: 'horizontal',
           type: String,
+          reflectToAttribute: true,
+          sync: true,
         },
 
         /**

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';

packages/tabs/test/scroll-polymer.test.js

@@ -0,0 +1,3 @@
+import './not-animated-styles.js';
+import '../vaadin-tabs.js';
+import './scroll.common.js';

packages/tabs/test/scroll.test.js → 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;

packages/tabs/test/tab-lit.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-tab.js';
+import './tab.common.js';

packages/tabs/test/tab-polymer.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-tab.js';
+import './tab.common.js';

packages/tabs/test/tab.test.js → 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('<vaadin-tab>text-content</vaadin-tab>');
+    await nextRender();
   });
 
   it('should have a correct localName', () => {

packages/tabs/test/tabs-lit.test.js

@@ -0,0 +1,2 @@
+import '../theme/lumo/vaadin-lit-tabs.js';
+import './tabs.common.js';

packages/tabs/test/tabs-polymer.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-tabs.js';
+import './tabs.common.js';

packages/tabs/test/tabs.test.js → 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(`
       <vaadin-tabs>
         <vaadin-tab>Foo</vaadin-tab>
@@ -39,6 +47,7 @@ describe('tabs', () => {
         </vaadin-tab>
       </vaadin-tabs>
     `);
+    await nextRender();
     tabs._observer.flush();
   });
 
@@ -234,7 +243,7 @@ describe('tabs', () => {
 describe('flex child tabs', () => {
   let wrapper, tabs;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     wrapper = fixtureSync(`
       <div style="display: flex; width: 400px;">
         <vaadin-tabs>
@@ -243,6 +252,7 @@ describe('flex child tabs', () => {
         </vaadin-tabs>
       </div>
     `);
+    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(`
       <div style="display: flex; justify-content: center; width: 400px;">
         <vaadin-tabs theme="equal-width-tabs">
@@ -268,6 +278,7 @@ describe('flex equal width tabs', () => {
         </vaadin-tabs>
       </div>
     `);
+    await nextRender();
     tabs = wrapper.querySelector('vaadin-tabs');
     tabs._observer.flush();
   });

packages/tabs/theme/lumo/vaadin-lit-tab.js

@@ -0,0 +1,2 @@
+import './vaadin-tab-styles.js';
+import '../../src/vaadin-lit-tab.js';

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';

packages/tabs/theme/material/vaadin-lit-tab.js

@@ -0,0 +1,2 @@
+import './vaadin-tab-styles.js';
+import '../../src/vaadin-lit-tab.js';

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';