feat: add UITabs

.commitlintrc.js

@@ -29,6 +29,7 @@ module.exports = {
                 'range-slider',
                 'select',
                 'table',
+                'tabs',
                 'textarea',
                 'toggle',
                 'pagination',

package.json

@@ -45,7 +45,7 @@
         "@vitejs/plugin-vue": "^2.0.1",
         "@vue/compiler-sfc": "^3.2.11",
         "@vue/eslint-config-typescript": "^10.0.0",
-        "@vue/test-utils": "2.0.0-rc.16",
+        "@vue/test-utils": "2.0.0-rc.18",
         "@vue/vue3-jest": "^27.0.0-alpha.3",
         "autoprefixer": "^10.4.0",
         "babel-jest": "^27.3.1",

src/components/tabs/Demo.vue

@@ -0,0 +1,35 @@
+<template>
+    <UITabs class="mb-4">
+        <UITab title="title 1">
+            tab 1
+        </UITab>
+        <UITab tab-key="fsss">
+            <template #title>
+                title 2
+            </template>
+            tab 2
+        </UITab>
+    </UITabs>
+
+    <UITabs vertical>
+        <UITab title="vertical" tab-key="no">
+            tab 1
+        </UITab>
+        <UITab title="tabs" tab-key="hi">
+            <UISubComponent />
+        </UITab>
+    </UITabs>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import UITabs from './UITabs.vue';
+import UITab from './UITab.vue';
+import UISubComponent from 'components/tabs/UISubComponent.vue';
+
+export default defineComponent({
+    name: 'TabsDemo',
+
+    components: { UISubComponent, UITabs, UITab }
+});
+</script>

src/components/tabs/UISubComponent.vue

@@ -0,0 +1,24 @@
+<template>
+    <button class="rounded border bg-blue-600 text-white px-4 py-2" @click="increment">
+        inc
+    </button>
+    <p>my-number:{{ number }}</p>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+
+export default defineComponent({
+    name: 'UISubComponent',
+
+    setup: () => {
+        const number = ref(0);
+        const increment = () => number.value++;
+
+        // eslint-disable-next-line no-console
+        onMounted(() => console.log('sub comp mounted'));
+        return { number, increment };
+    }
+});
+</script>
+

src/components/tabs/UITab.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="m-4">
+        <template v-if="false">
+            <slot name="title" />
+        </template>
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onUpdated } from 'vue';
+
+export default defineComponent({
+    name: 'UITab',
+
+    props: {
+        title: {
+            type: String
+        },
+
+        /**
+         * The key to emit when the tab is navigated to.
+         */
+        tabKey: {
+            type: String
+        },
+
+        /**
+         * Flag indicating that this tab is visible by default.
+         * If multiple UITabs marked with default, the first will be selected.
+         */
+        default: {
+            type: Boolean,
+            default: false
+        }
+    },
+
+    setup(props, ctx) {
+        const validateTitle = () => {
+            if (!props.title && !ctx.slots['title']) {
+                throw new Error('The title prop or slot is required when using UITab.');
+            }
+        };
+
+        validateTitle();
+
+        onUpdated(validateTitle);
+    }
+});
+</script>

src/components/tabs/UITabs.test.ts

@@ -0,0 +1,146 @@
+import { mount } from '@vue/test-utils';
+import UITab from './UITab.vue';
+import UITabs from './UITabs.vue';
+import { defineComponent, nextTick, ref } from 'vue';
+import { disableConsoleWarn, enableConsoleWarn } from 'helpers/test';
+
+describe('UITab', () => {
+    it('should throw an error if no title is given', () => {
+        disableConsoleWarn();
+        let failingFunc = () => mount(UITab);
+        expect(failingFunc).toThrow(new Error('The title prop or slot is required when using UITab.'));
+
+
+        failingFunc = () => mount(UITab, {
+            props: {
+                title: 'title'
+            }
+        });
+        expect(failingFunc).not.toThrow(new Error('The title prop or slot is required when using UITab.'));
+
+        failingFunc = () => mount(UITab, {
+            slots: {
+                title: 'title'
+            }
+        });
+        expect(failingFunc).not.toThrow(new Error('The title prop or slot is required when using UITab.'));
+        enableConsoleWarn();
+    });
+});
+
+describe('UITabs', () => {
+    it('should throw an error if less then 2 child given in the default slot', () => {
+        const failingFunc = () => mount({
+            template: '<UITabs><UITab><template #title>title</template></UITab></UITabs>',
+            components: { UITabs, UITab }
+        });
+
+        expect(failingFunc).toThrow(new Error('UITabs expect at least 2 UITabs in the default slot.'));
+    });
+
+    it('should throw an error if no title have been given to any of the UITabs', () => {
+        const failingFunc = () => mount({
+            template: '<UITabs><UITab title="title" /><UITab /></UITabs>',
+            components: { UITabs, UITab }
+        });
+
+        expect(failingFunc).toThrow(new Error('UITab expect to have the title prop or title slot set.'));
+    });
+
+    it('should display the titles from the slotted content', () => {
+        const wrapper = mount({
+            template: '<UITabs><UITab title="tab1" /><UITab title="tab2" /></UITabs>',
+            components: { UITabs, UITab }
+        });
+
+        expect(wrapper.html()).toContain('tab1');
+        expect(wrapper.html()).toContain('tab2');
+    });
+
+    it('should switch tabs when clicking on the title', async () => {
+        const wrapper = mount({
+            template: '<UITabs>' +
+                        '<UITab title="tab1"><p id="tab-1">tab-1-content</p></UITab>' +
+                        '<UITab title="tab2"><p id="tab-2">tab-2-content</p></UITab>' +
+                      '</UITabs>',
+            components: { UITabs, UITab }
+        });
+
+        expect(wrapper.get('#tab-1').isVisible()).toBe(true);
+        expect(wrapper.get('#tab-2').isVisible()).toBe(false);
+
+        await wrapper.find('div.cursor-pointer:not(.active-tab)').trigger('click');
+
+        expect(wrapper.get('#tab-1').isVisible()).toBe(false);
+        expect(wrapper.get('#tab-2').isVisible()).toBe(true);
+    });
+
+    it('should accept both text and components in the UITab\'s default slot', async () => {
+        // eslint-disable-next-line vue/one-component-per-file
+        const Foo = defineComponent({ name: 'FooBar', template: '<p id="tab-2">foo-content</p>' });
+
+        const wrapper = mount({
+            template: '<UITabs>' +
+                        '<UITab title="tab1"><p id="tab-1"></p>tab-1-content</UITab>' +
+                        '<UITab title="tab2"><Foo /></UITab>' +
+                      '</UITabs>',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            components: { UITabs, UITab, Foo }
+        });
+
+        expect(wrapper.get('#tab-1').isVisible()).toBe(true);
+        expect(wrapper.findComponent(Foo).isVisible()).toBe(false);
+
+        await wrapper.find('div.cursor-pointer:not(.active-tab)').trigger('click');
+
+        expect(wrapper.get('#tab-1').isVisible()).toBe(false);
+        expect(wrapper.get('#tab-2').isVisible()).toBe(true);
+    });
+
+    it('should keep the subcomponents alive', async () => {
+        // eslint-disable-next-line vue/one-component-per-file
+        const UISubComponent = defineComponent({
+            name: 'UISubComponent',
+
+            setup: () => {
+                const number = ref(0);
+                const increment = () => number.value++;
+
+                return {
+                    number,
+                    increment
+                };
+            },
+
+            template: 'my-number:{{ number }}'
+        });
+
+        const wrapper = mount({
+            template: '<UITabs>' +
+                '<UITab><template #title><p id="tab-1">title1</p></template></UITab>' +
+                '<UITab><template #title><p id="tab-2">title2</p></template><UISubComponent ref="subComponent" />' +
+                '</UITab></UITabs>',
+            components: { UITabs, UITab, UISubComponent },
+            setup: () => ({ subComponent: ref() })
+        });
+
+        await wrapper.find('#tab-2').trigger('click');
+        expect(wrapper.html()).toContain('my-number:0');
+        (wrapper.vm.$refs.subComponent as InstanceType<typeof UISubComponent>).increment();
+        await nextTick();
+        expect(wrapper.html()).toContain('my-number:1');
+        await wrapper.find('#tab-1').trigger('click');
+        await wrapper.find('#tab-2').trigger('click');
+        expect(wrapper.html()).toContain('my-number:1');
+    });
+
+    // eslint-disable-next-line jest/no-commented-out-tests
+    // it('should have the tab open by default which is given as the initialTab', () => {
+    //
+    // });
+    //
+    // eslint-disable-next-line jest/no-commented-out-tests
+    // it('should have the tab open by ', () => {
+    //
+    // });
+});