Tabs component

ember-headlessui/addon/components/tabs-group.hbs

@@ -0,0 +1,5 @@
+<div data-test-ember-headlessui-tabs-wrapper ...attributes>
+    {{yield (hash
+            Title=(component 'tabs-group/-title' registerTabNames=this.registerTabNames selectTab=this.selectTab selectedTab=this.selectedTab)
+            Content=(component 'tabs-group/-content' selectedContent=this.selectedContent registerContent=this.registerContent))}}
+</div>

ember-headlessui/addon/components/tabs-group.js

@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+export default class TABSGROUP extends Component {
+  tabNames = [];
+  Contents = [];
+  @tracked currentTab = null;
+  @action
+  registerTabNames(e) {
+    this.tabNames = [...this.tabNames, e];
+  }
+  @action
+  registerContent(e) {
+    this.Contents = [...this.Contents, e];
+    this.currentTab = 0;
+  }
+  @action
+  selectTab(changedTo, changedFrom) {
+    this.currentTab = this.tabNames.indexOf(changedTo.target);
+    this.pastTab = this.tabNames.indexOf(changedFrom);
+    if (this.args.onChange) {
+      return this.args.onChange(
+        this.currentTab,
+        this.tabNames[this.currentTab],
+        this.tabNames[this.pastTab]
+      );
+    }
+  }
+
+  get selectedTab() {
+    return this.tabNames[this.currentTab];
+  }
+  get selectedContent() {
+    return this.Contents[this.currentTab];
+  }
+}

ember-headlessui/addon/components/tabs-group/-content.hbs

@@ -0,0 +1,7 @@
+<div class="{{if this.renderContent '' 'hidden'}}"
+    data-test-headlessui-tabs-content='test-tabs-content-{{@content-index}}'
+    {{this.registerContent}} ...attributes>
+    {{#if this.renderContent}}
+        {{yield}}
+    {{/if}}
+</div>

ember-headlessui/addon/components/tabs-group/-content.js

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { modifier } from 'ember-modifier';
+
+export default class Content extends Component {
+  @tracked element = null;
+  get renderContent() {
+    return this.element === this.args.selectedContent;
+  }
+  registerContent = modifier((e) => {
+    this.element = e;
+    this.args.registerContent(e);
+  });
+}

ember-headlessui/addon/components/tabs-group/-title.hbs

@@ -0,0 +1,11 @@
+<button
+  type='button'
+  data-test-headlessui-tabs-title='test-tabs-title-btn-{{@index}}'
+  id={{guid}}
+  disabled={{if @disable true false}}
+  {{on 'click' this.selectTab}}
+  {{this.registerTabs}}
+  ...attributes
+>
+  {{yield}}
+</button>

ember-headlessui/addon/components/tabs-group/-title.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+
+import { modifier } from 'ember-modifier';
+
+export default class Title extends Component {
+  guid = `${guidFor(this)}-tailwindui-tabs-title`;
+  @tracked element = null;
+
+  registerTabs = modifier((e) => {
+    this.element = e;
+    this.args.registerTabNames(e);
+  });
+
+  @action
+  selectTab(changedTo) {
+    let changedFrom = this.args.selectedTab;
+    return this.args.selectTab(changedTo, changedFrom);
+  }
+}

ember-headlessui/app/components/tabs-group.js

@@ -0,0 +1 @@
+export { default } from 'ember-headlessui/components/tabs-group';

ember-headlessui/app/components/tabs-group/-content.js

@@ -0,0 +1 @@
+export { default } from 'ember-headlessui/components/tabs-group/-content';

ember-headlessui/app/components/tabs-group/-title.js

@@ -0,0 +1 @@
+export { default } from 'ember-headlessui/components/tabs-group/-title';

test-app/app/controllers/tabs/tabs-basic.js

@@ -0,0 +1,18 @@
+import { tracked } from '@glimmer/tracking';
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class TabsTabsBasicController extends Controller {
+  @tracked activatedIndex = 0;
+  titles = ['cars', 'motor cycles', 'boats', 'planes'];
+  contents = [
+    'cars content',
+    'motor cycles content',
+    'boats content',
+    'planes content',
+  ];
+  @action
+  onChange(activeIndex) {
+    this.activatedIndex = activeIndex;
+  }
+}

test-app/app/controllers/tabs/tabs-with-disable-state.js

@@ -0,0 +1,19 @@
+import { tracked } from '@glimmer/tracking';
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class TabsTabsBasicController extends Controller {
+  disabledToBeIndex = 2;
+  @tracked activatedIndex = 0;
+  titles = ['cars', 'motor cycles', 'boats', 'planes'];
+  contents = [
+    'cars content',
+    'motor cycles content',
+    'boats content',
+    'planes content',
+  ];
+  @action
+  onChange(activeIndex) {
+    this.activatedIndex = activeIndex;
+  }
+}

test-app/app/controllers/tabs/tabs-with-onchange-action.js

@@ -0,0 +1,21 @@
+import { tracked } from '@glimmer/tracking';
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class TabsTabsBasicController extends Controller {
+  @tracked activatedIndex = 0;
+  titles = ['cars', 'motor cycles', 'boats', 'planes'];
+  contents = [
+    'cars content',
+    'motor cycles content',
+    'boats content',
+    'planes content',
+  ];
+  @action
+  onChange(activeIndex, changedTo, changedFrom) {
+    alert(
+      `sure you want to change to ${changedTo.textContent.trim()} from ${changedFrom.textContent.trim()}?`
+    );
+    this.activatedIndex = activeIndex;
+  }
+}

test-app/app/router.js

@@ -35,4 +35,10 @@ Router.map(function () {
   this.route('radio-group', function () {
     this.route('radio-group-basic');
   });
+
+  this.route('tabs', function () {
+    this.route('tabs-basic');
+    this.route('tabs-with-onchange-action');
+    this.route('tabs-with-disable-state');
+  });
 });

test-app/app/routes/tabs/tabs-basic.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class TabsBasicRoute extends Route {}

test-app/app/templates/index.hbs

@@ -105,6 +105,28 @@
           </li>
         </ul>
       </li>
+      <li>
+        <h3 class='text-xl'>
+          Tabs
+        </h3>
+        <ul>
+          <li>
+            <LinkTo @route='tabs.tabs-basic'>
+              tabs (Basic)
+            </LinkTo>
+          </li>
+          <li>
+            <LinkTo @route='tabs.tabs-with-onchange-action'>
+              tabs (with custom on change)
+            </LinkTo>
+          </li>
+          <li>
+            <LinkTo @route='tabs.tabs-with-disable-state'>
+              tabs (with disabled state)
+            </LinkTo>
+          </li>
+        </ul>
+      </li>
     </ul>
   </div>
-</div>
+</div>

test-app/app/templates/tabs/tabs-basic.hbs

@@ -0,0 +1,22 @@
+<div class='w-full max-w-md px-2 py-16 mx-auto'>
+    <TabsGroup class="flex flex-col space-x-1 rounded-xl p-1" @onChange = {{this.onChange}} as |tabs|>
+        <div class='flex space-x-1 rounded-xl bg-sky-600/20 p-1'>
+            {{#each this.titles as |tabName index|}}
+                <tabs.Title
+                    @index={{index}}
+                    class='w-full rounded-lg py-2.5 text-sm font-medium leading-5 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 space-x-4 pointer-events-auto {{if (eq index this.activatedIndex) "bg-white shadow"}}'
+                    >
+                {{tabName}}
+                </tabs.Title>
+            {{/each}}
+        </div>
+        <div class="mx-auto w-full max-w-md shadow-md px-4 py-4 rounded-xl bg-white mt-4">
+            {{#each this.contents as |content index|}}
+                <tabs.Content class="content" @content-index={{index}}>
+                    <p>{{content}}</p>
+                </tabs.Content>
+            {{/each}}
+        </div>
+    </TabsGroup>
+</div>
+

test-app/app/templates/tabs/tabs-with-disable-state.hbs

@@ -0,0 +1,22 @@
+<div class='w-full max-w-md px-2 py-16 mx-auto'>
+    <TabsGroup class="flex flex-col space-x-1 rounded-xl p-1" @onChange = {{this.onChange}} as |tabs|>
+        <div class='flex space-x-1 rounded-xl bg-sky-600/20 p-1'>
+            {{#each this.titles as |tabName index|}}
+                <tabs.Title
+                    @index={{index}}
+                    @disable={{if (eq index this.disabledToBeIndex) true}}
+                    class='w-full rounded-lg py-2.5 text-sm font-medium leading-5 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 space-x-4 pointer-events-auto {{if (eq index this.activatedIndex) "bg-white shadow"}}'
+                    >
+                {{tabName}}
+                </tabs.Title>
+            {{/each}}
+        </div>
+        <div class="mx-auto w-full max-w-md shadow-md px-4 py-4 rounded-xl bg-white mt-4">
+            {{#each this.contents as |content index|}}
+                <tabs.Content class="content" @content-index={{index}}>
+                    <p>{{content}}</p>
+                </tabs.Content>
+            {{/each}}
+        </div>
+    </TabsGroup>
+</div>

test-app/app/templates/tabs/tabs-with-onchange-action.hbs

@@ -0,0 +1,21 @@
+<div class='w-full max-w-md px-2 py-16 mx-auto'>
+    <TabsGroup class="flex flex-col space-x-1 rounded-xl p-1" @onChange = {{this.onChange}} as |tabs|>
+        <div class='flex space-x-1 rounded-xl bg-sky-600/20 p-1'>
+            {{#each this.titles as |tabName index|}}
+                <tabs.Title
+                    @index={{index}}
+                    class='w-full rounded-lg py-2.5 text-sm font-medium leading-5 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 space-x-4 pointer-events-auto {{if (eq index this.activatedIndex) "bg-white shadow"}}'
+                    >
+                {{tabName}}
+                </tabs.Title>
+            {{/each}}
+        </div>
+        <div class="mx-auto w-full max-w-md shadow-md px-4 py-4 rounded-xl bg-white mt-4">
+            {{#each this.contents as |content index|}}
+                <tabs.Content class="content" @content-index={{index}}>
+                    <p>{{content}}</p>
+                </tabs.Content>
+            {{/each}}
+        </div>
+    </TabsGroup>
+</div>

test-app/tests/integration/components/tabs-basic-test.js

@@ -0,0 +1,113 @@
+import { click, render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+
+module('Integration | Component | <Tabs>', function (hooks) {
+  setupRenderingTest(hooks);
+  test('Should render the tabs component', async function (assert) {
+    await render(hbs`
+        <div class='w-full max-w-md px-2 py-16 mx-auto'>
+        <TabsGroup class="flex flex-col space-x-1 rounded-xl p-1" @onChange = {{this.onChange}} as |tabs|>
+            <div class='flex space-x-1 rounded-xl bg-sky-600/20 p-1'>
+                <tabs.Title
+                    @index={{1}}
+                    class='w-full rounded-lg py-2.5 text-sm font-medium leading-5 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 space-x-4'
+                    >
+                    hello
+                </tabs.Title>
+                <tabs.Title 
+                    @index={{2}} 
+                    @disable={{true}}
+                    class='w-full rounded-lg py-2.5 text-sm font-medium leading-5 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 space-x-4'>
+                    hell02
+                </tabs.Title>
+                <tabs.Title 
+                    @index={{3}} 
+                    class='w-full rounded-lg py-2.5 text-sm font-medium leading-5 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 space-x-4'>
+                    hell03
+                </tabs.Title>
+                <tabs.Title 
+                    @index={{4}} 
+                    class='w-full rounded-lg py-2.5 text-sm font-medium leading-5 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 space-x-4'>
+                    hell04
+                </tabs.Title>
+            </div>
+            <div class="mx-auto w-full max-w-md shadow-md px-4 py-4 rounded-xl bg-white mt-4">
+                <tabs.Content class="content">
+                    <p>hello world</p>
+                </tabs.Content>
+                <tabs.Content class="content">
+                    <p>hello world 2</p>
+                </tabs.Content>
+                <tabs.Content class="content">
+                    <p>hello world 3</p>
+                </tabs.Content>
+                <tabs.Content class="content">
+                    <p>hello world 4</p>
+                </tabs.Content>
+            </div>
+        </TabsGroup>
+    </div>`);
+    assert.dom('[data-test-ember-headlessui-tabs-wrapper]').exists();
+  });
+
+  test('Should render the respective content when a tab is selected', async function (assert) {
+    await render(hbs`<div class='w-full max-w-md px-2 py-16 mx-auto'>
+        <TabsGroup class="flex flex-col space-x-1 rounded-xl p-1" as |tabs|>
+            <div class='flex space-x-1 rounded-xl bg-sky-600/20 p-1'>
+                <tabs.Title
+                    @index={{1}}
+                    class='w-full rounded-lg py-2.5 text-sm font-medium leading-5 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 space-x-4'
+                    >
+                    hello
+                </tabs.Title>
+                <tabs.Title 
+                    @index={{2}} 
+                    @disable={{true}}
+                    class='w-full rounded-lg py-2.5 text-sm font-medium leading-5 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 space-x-4'>
+                    hell02
+                </tabs.Title>
+                <tabs.Title 
+                    @index={{3}} 
+                    class='w-full rounded-lg py-2.5 text-sm font-medium leading-5 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 space-x-4'>
+                    hell03
+                </tabs.Title>
+                <tabs.Title 
+                    @index={{4}} 
+                    class='w-full rounded-lg py-2.5 text-sm font-medium leading-5 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 space-x-4'>
+                    hell04
+                </tabs.Title>
+            </div>
+            <div class="mx-auto w-full max-w-md shadow-md px-4 py-4 rounded-xl bg-white mt-4">
+                <tabs.Content class="content" @content-index={{1}}>
+                    <p>hello world</p>
+                </tabs.Content>
+                <tabs.Content class="content"  @content-index={{2}}>
+                    <p>hello world 2</p>
+                </tabs.Content>
+                <tabs.Content class="content"  @content-index={{3}}>
+                    <p>hello world 3</p>
+                </tabs.Content>
+                <tabs.Content class="content"  @content-index={{4}}>
+                    <p>hello world 4</p>
+                </tabs.Content>
+            </div>
+        </TabsGroup>
+    </div>
+`);
+    await click('[data-test-headlessui-tabs-title="test-tabs-title-btn-3"]');
+    assert
+      .dom('[data-test-headlessui-tabs-content="test-tabs-content-1"]')
+      .doesNotExist();
+    assert
+      .dom('[data-test-headlessui-tabs-content="test-tabs-content-2"]')
+      .doesNotExist();
+    assert
+      .dom('[data-test-headlessui-tabs-content="test-tabs-content-4"]')
+      .doesNotexist();
+    assert
+      .dom('[data-test-headlessui-tabs-content="test-tabs-content-3"]')
+      .exists();
+  });
+});