@code-coaching/vuetiful 0.23.1 → 0.24.0

package/src/components/molecules/VRail/VRailTile.vue

@@ -1,39 +1,41 @@
 <script setup lang="ts">
-import type { CssClasses } from "@/index";
-import { VRadioItem } from "@/index";
-import { useRail } from "@/services";
-import { inject } from "vue";
+import type { CssClasses } from '@/index';
+import { VRadioItem } from '@/index';
+import { useRail } from '@/services';
+import { inject } from 'vue';
 
 defineProps({
   value: {
     type: String,
-    default: "",
+    default: '',
   },
   label: {
     type: String as () => string,
-    default: "",
+    default: '',
   },
 
   regionIcon: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
   regionLabel: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
 });
 
 const { selectedRailTile } = useRail();
-const activeRail = inject("activeRail");
-const hoverRail = inject("hoverRail");
+const activeRail = inject('activeRail');
+const hoverRail = inject('hoverRail');
 </script>
 
 <template>
   <v-radio-item
     unstyled
     :value="value"
-    :class="`vuetiful-rail-tile grid aspect-square w-full cursor-pointer place-content-center place-items-center ${ selectedRailTile === value ? `${activeRail}` : `${hoverRail}` }`"
+    :class="`vuetiful-rail-tile grid aspect-square w-full cursor-pointer place-content-center place-items-center ${
+      selectedRailTile === value ? `${activeRail}` : `${hoverRail}`
+    }`"
   >
     <template v-if="$slots.default">
       <div :class="`vuetiful-rail-tile-icon ${regionIcon}`"><slot /></div>

package/src/components/molecules/VShell.test.ts

@@ -1,13 +1,13 @@
-import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
-import { VShell } from ".";
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { VShell } from '.';
 
-test("VShell", () => {
+test('VShell', () => {
   expect(VShell).toBeTruthy();
 });
 
 // TODO: add tests
-test("VShell using slot", () => {
+test('VShell using slot', () => {
   const wrapper = mount(VShell);
 
   expect(wrapper).toBeTruthy();

package/src/components/molecules/VShell.vue

@@ -9,14 +9,14 @@
  */
 export type CssClasses = string;
 defineProps({
-  regionPage: { type: String as () => CssClasses, default: "" },
-  slotFixedHeader: { type: String as () => CssClasses, default: "z-10" },
-  slotSidebarLeft: { type: String as () => CssClasses, default: "w-auto" },
-  slotSidebarRight: { type: String as () => CssClasses, default: "w-auto" },
-  slotPageHeader: { type: String as () => CssClasses, default: "" },
-  slotPageContent: { type: String as () => CssClasses, default: "" },
-  slotPageFooter: { type: String as () => CssClasses, default: "" },
-  slotFixedFooter: { type: String as () => CssClasses, default: "" },
+  regionPage: { type: String as () => CssClasses, default: '' },
+  slotFixedHeader: { type: String as () => CssClasses, default: 'z-10' },
+  slotSidebarLeft: { type: String as () => CssClasses, default: 'w-auto' },
+  slotSidebarRight: { type: String as () => CssClasses, default: 'w-auto' },
+  slotPageHeader: { type: String as () => CssClasses, default: '' },
+  slotPageContent: { type: String as () => CssClasses, default: '' },
+  slotPageFooter: { type: String as () => CssClasses, default: '' },
+  slotFixedFooter: { type: String as () => CssClasses, default: '' },
 });
 </script>
 
@@ -34,14 +34,8 @@ defineProps({
         <slot name="sidebarLeft" />
       </aside>
 
-      <div
-        tabindex="-1"
-        :class="`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${regionPage ?? ''}`"
-      >
-        <header
-          v-if="$slots.pageHeader"
-          :class="`vuetiful-page-header flex-none ${slotPageHeader}`"
-        >
+      <div tabindex="-1" :class="`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${regionPage ?? ''}`">
+        <header v-if="$slots.pageHeader" :class="`vuetiful-page-header flex-none ${slotPageHeader}`">
           <slot name="pageHeader" />
         </header>
 
@@ -49,10 +43,7 @@ defineProps({
           <slot />
         </main>
 
-        <footer
-          v-if="$slots.pageFooter"
-          :class="`vuetiful-page-footer flex-none ${slotPageFooter}`"
-        >
+        <footer v-if="$slots.pageFooter" :class="`vuetiful-page-footer flex-none ${slotPageFooter}`">
           <slot name="pageFooter" />
         </footer>
       </div>

package/src/components/molecules/VTabs/VTab.test.ts

@@ -1,9 +1,9 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VTab, VTabs } from "..";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VTab, VTabs } from '..';
 
-describe("VTab", () => {
-  test("defaults", async () => {
+describe('VTab', () => {
+  test('defaults', async () => {
     const wrapper = mount({
       template: /*html*/ `
           <v-tabs>
@@ -13,25 +13,25 @@ describe("VTab", () => {
           </v-tabs>
         `,
       components: {
-        "v-tabs": VTabs,
-        "v-tab": VTab,
+        'v-tabs': VTabs,
+        'v-tab': VTab,
       },
     });
 
     const vuetiful = wrapper.find("[data-test='vuetiful']");
     const slotContainer = vuetiful.find("[data-test='slot-container']");
-    expect(vuetiful.classes()).toEqual(["vuetiful-tab", "flex", "flex-col"]);
+    expect(vuetiful.classes()).toEqual(['vuetiful-tab', 'flex', 'flex-col']);
     expect(slotContainer.classes()).toEqual([
-      "vuetiful-tab-content",
-      "text-base",
-      "rounded-token",
-      "w-full",
-      "px-4",
-      "py-2",
+      'vuetiful-tab-content',
+      'text-base',
+      'rounded-token',
+      'w-full',
+      'px-4',
+      'py-2',
     ]);
   });
 
-  test("vertical", async () => {
+  test('vertical', async () => {
     const wrapper = mount({
       template: /*html*/ `
           <v-tabs vertical>
@@ -41,16 +41,16 @@ describe("VTab", () => {
           </v-tabs>
         `,
       components: {
-        "v-tabs": VTabs,
-        "v-tab": VTab,
+        'v-tabs': VTabs,
+        'v-tab': VTab,
       },
     });
 
     const vuetiful = wrapper.find("[data-test='vuetiful']");
-    expect(vuetiful.classes()).toEqual(["vuetiful-tab", "flex", "flex-row", "justify-between"]);
+    expect(vuetiful.classes()).toEqual(['vuetiful-tab', 'flex', 'flex-row', 'justify-between']);
   });
 
-  test("class-tab", async () => {
+  test('class-tab', async () => {
     const wrapper = mount({
       template: /*html*/ `
           <v-tabs class-tab="my-custom-class">
@@ -60,17 +60,17 @@ describe("VTab", () => {
           </v-tabs>
         `,
       components: {
-        "v-tabs": VTabs,
-        "v-tab": VTab,
+        'v-tabs': VTabs,
+        'v-tab': VTab,
       },
     });
 
     const vuetiful = wrapper.find("[data-test='vuetiful']");
     const slotContainer = vuetiful.find("[data-test='slot-container']");
-    expect(slotContainer.classes()).toEqual(["vuetiful-tab-content", "text-base", "rounded-token", "my-custom-class"]);
+    expect(slotContainer.classes()).toEqual(['vuetiful-tab-content', 'text-base', 'rounded-token', 'my-custom-class']);
   });
 
-  test("hover/active", async () => {
+  test('hover/active', async () => {
     const wrapper = mount({
       template: /*html*/ `
           <v-tabs active="my-custom-active-class">
@@ -82,45 +82,62 @@ describe("VTab", () => {
           </v-tabs>
         `,
       components: {
-        "v-tabs": VTabs,
-        "v-tab": VTab,
+        'v-tabs': VTabs,
+        'v-tab': VTab,
       },
     });
 
-    const vuetifulSlotContainer = wrapper
-      .find("[data-test='vuetiful']")
-      .find("[data-test='slot-container']");
+    const vuetifulSlotContainer = wrapper.find("[data-test='vuetiful']").find("[data-test='slot-container']");
     const isSlotContainer = wrapper.find("[data-test='is']").find("[data-test='slot-container']");
-    const beautifulSlotContainer = wrapper
-      .find("[data-test='beautiful']")
-      .find("[data-test='slot-container']");
+    const beautifulSlotContainer = wrapper.find("[data-test='beautiful']").find("[data-test='slot-container']");
 
     expect(vuetifulSlotContainer.classes()).toEqual([
-      "vuetiful-tab-content",
-      "text-base",
-      "rounded-token",
-      "my-custom-active-class",
-      "w-full",
-      "px-4",
-      "py-2",
+      'vuetiful-tab-content',
+      'text-base',
+      'rounded-token',
+      'my-custom-active-class',
+      'w-full',
+      'px-4',
+      'py-2',
     ]);
     expect(isSlotContainer.classes()).toEqual([
-      "vuetiful-tab-content",
-      "text-base",
-      "rounded-token",
-      "hover:variant-ghost",
-      "w-full",
-      "px-4",
-      "py-2",
+      'vuetiful-tab-content',
+      'text-base',
+      'rounded-token',
+      'hover:variant-ghost',
+      'w-full',
+      'px-4',
+      'py-2',
     ]);
     expect(beautifulSlotContainer.classes()).toEqual([
-      "vuetiful-tab-content",
-      "text-base",
-      "rounded-token",
-      "hover:variant-ghost",
-      "w-full",
-      "px-4",
-      "py-2",
+      'vuetiful-tab-content',
+      'text-base',
+      'rounded-token',
+      'hover:variant-ghost',
+      'w-full',
+      'px-4',
+      'py-2',
     ]);
   });
+
+  test('unstyled', async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <v-tabs>
+            <template v-slot="tabs">
+              <v-tab unstyled data-test="vuetiful">Vuetiful</v-tab>
+            </template>
+          </v-tabs>
+        `,
+      components: {
+        'v-tabs': VTabs,
+        'v-tab': VTab,
+      },
+    });
+
+    const vuetiful = wrapper.find("[data-test='vuetiful']");
+    const slotContainer = vuetiful.find("[data-test='slot-container']");
+    expect(vuetiful.classes()).toEqual(['vuetiful-tab', 'flex', 'flex-col']);
+    expect(slotContainer.classes()).not.toContain('rounded-token');
+  });
 });

package/src/components/molecules/VTabs/VTab.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { unstyledProp } from "@/props";
-import { useSettings } from "@/services";
-import { Tab } from "@headlessui/vue";
-import { computed, inject } from "vue";
+import { unstyledProp } from '@/props';
+import { useSettings } from '@/services';
+import { Tab } from '@headlessui/vue';
+import { computed, inject } from 'vue';
 
 const props = defineProps({
   disabled: {
@@ -12,15 +12,15 @@ const props = defineProps({
   unstyled: unstyledProp,
 });
 
-const activeClass = inject("active") as string;
-const hoverClass = inject("hover") as string;
-const vertical = inject("vertical") as boolean;
-const classTab = inject("classTab") as string;
-const hideSeparator = inject("hideSeparator") as boolean;
-const classTabSeparator = inject("classTabSeparator") as string;
+const activeClass = inject('active') as string;
+const hoverClass = inject('hover') as string;
+const vertical = inject('vertical') as boolean;
+const classTab = inject('classTab') as string;
+const hideSeparator = inject('hideSeparator') as boolean;
+const classTabSeparator = inject('classTabSeparator') as string;
 
 const tabClass = computed(() => {
-  return classTab ? classTab : "w-full px-4 py-2";
+  return classTab ? classTab : 'w-full px-4 py-2';
 });
 
 const { settings } = useSettings();
@@ -37,18 +37,14 @@ const isUnstyled = settings.global.unstyled || settings.components.tab.unstyled
     <div
       data-test="slot-container"
       class="vuetiful-tab-content"
-      :class="`text-base ${isUnstyled ? '' : 'rounded-token'} ${
-        selected ? activeClass : hoverClass
-      } ${tabClass}`"
+      :class="`text-base ${isUnstyled ? '' : 'rounded-token'} ${selected ? activeClass : hoverClass} ${tabClass}`"
     >
       <slot />
     </div>
     <div
       v-show="selected && !hideSeparator"
       class="vuetiful-tab-separator"
-      :class="`z-10 ${
-        vertical ? 'mr-[-2px] h-full border-r-2' : 'mb-[-2px] w-full border-b-2'
-      } ${classTabSeparator}`"
+      :class="`z-10 ${vertical ? 'mr-[-2px] h-full border-r-2' : 'mb-[-2px] w-full border-b-2'} ${classTabSeparator}`"
     ></div>
   </Tab>
 </template>

package/src/components/molecules/VTabs/VTabPanel.test.ts

@@ -1,10 +1,10 @@
-import { TabGroup } from "@headlessui/vue";
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VTabPanel } from "..";
+import { TabGroup } from '@headlessui/vue';
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VTabPanel } from '..';
 
-describe("VTabs", () => {
-  test("default props", () => {
+describe('VTabs', () => {
+  test('default props', () => {
     const wrapper = mount({
       template: /*html*/ `
           <TabGroup>
@@ -13,11 +13,11 @@ describe("VTabs", () => {
         `,
       components: {
         TabGroup: TabGroup,
-        "v-tab-panel": VTabPanel,
+        'v-tab-panel': VTabPanel,
       },
     });
 
     const tabPanel = wrapper.find("[data-test='tab-panel']");
-    expect(tabPanel.text()).toEqual("John Duck");
+    expect(tabPanel.text()).toEqual('John Duck');
   });
 });

package/src/components/molecules/VTabs/VTabPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TabPanel } from "@headlessui/vue";
+import { TabPanel } from '@headlessui/vue';
 </script>
 
 <template>

package/src/components/molecules/VTabs/VTabs.test.ts

@@ -1,15 +1,15 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VTab, VTabPanel, VTabs } from "..";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VTab, VTabPanel, VTabs } from '..';
 
-describe("VTabs", () => {
-  test("hide separator", () => {
+describe('VTabs', () => {
+  test('hide separator', () => {
     const wrapper = mount({
       template: /*html*/ `
           <v-tabs hide-separator></v-tabs>
         `,
       components: {
-        "v-tabs": VTabs,
+        'v-tabs': VTabs,
       },
     });
 
@@ -17,7 +17,7 @@ describe("VTabs", () => {
     expect(separator.exists()).toBeFalsy();
   });
 
-  test("default props", () => {
+  test('default props', () => {
     const wrapper = mount({
       template: /*html*/ `
           <v-tabs>
@@ -28,33 +28,33 @@ describe("VTabs", () => {
           </v-tabs>
         `,
       components: {
-        "v-tabs": VTabs,
-        "v-tab": VTab,
-        "v-tab-panel": VTabPanel,
+        'v-tabs': VTabs,
+        'v-tab': VTab,
+        'v-tab-panel': VTabPanel,
       },
     });
 
     const tabList = wrapper.find("[data-test='vuetiful-tab-list']");
     expect(tabList.classes()).toEqual([
-      "vuetiful-tab-list",
-      "flex",
-      "!rounded-bl-none",
-      "!rounded-br-none",
-      "rounded-container-token",
+      'vuetiful-tab-list',
+      'flex',
+      '!rounded-bl-none',
+      '!rounded-br-none',
+      'rounded-container-token',
     ]);
-    expect(tabList.classes()).not.toContain("flex-col");
+    expect(tabList.classes()).not.toContain('flex-col');
 
     const tabPanels = wrapper.find("[data-test='vuetiful-tab-panels']");
     expect(tabPanels.classes()).toEqual([
-      "vuetiful-tab-panels",
-      "p-4",
-      "!rounded-tl-none",
-      "!rounded-tr-none",
-      "rounded-container-token",
+      'vuetiful-tab-panels',
+      'p-4',
+      '!rounded-tl-none',
+      '!rounded-tr-none',
+      'rounded-container-token',
     ]);
   });
 
-  test("vertical", () => {
+  test('vertical', () => {
     const wrapper = mount({
       template: /*html*/ `
           <v-tabs vertical>
@@ -65,28 +65,28 @@ describe("VTabs", () => {
           </v-tabs>
         `,
       components: {
-        "v-tabs": VTabs,
-        "v-tab": VTab,
-        "v-tab-panel": VTabPanel,
+        'v-tabs': VTabs,
+        'v-tab': VTab,
+        'v-tab-panel': VTabPanel,
       },
     });
     const tabList = wrapper.find("[data-test='vuetiful-tab-list']");
     expect(tabList.classes()).toEqual([
-      "vuetiful-tab-list",
-      "flex",
-      "flex-col",
-      "!rounded-br-none",
-      "!rounded-tr-none",
-      "rounded-container-token",
+      'vuetiful-tab-list',
+      'flex',
+      'flex-col',
+      '!rounded-br-none',
+      '!rounded-tr-none',
+      'rounded-container-token',
     ]);
 
     const tabPanels = wrapper.find("[data-test='vuetiful-tab-panels']");
     expect(tabPanels.classes()).toEqual([
-      "vuetiful-tab-panels",
-      "p-4",
-      "!rounded-bl-none",
-      "!rounded-tl-none",
-      "rounded-container-token",
+      'vuetiful-tab-panels',
+      'p-4',
+      '!rounded-bl-none',
+      '!rounded-tl-none',
+      'rounded-container-token',
     ]);
   });
 });

package/src/components/molecules/VTabs/VTabs.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { unstyledProp } from "@/props";
-import { useSettings } from "@/services";
-import { TabGroup, TabList, TabPanels } from "@headlessui/vue";
-import { provide } from "vue";
+import { unstyledProp } from '@/props';
+import { useSettings } from '@/services';
+import { TabGroup, TabList, TabPanels } from '@headlessui/vue';
+import { provide } from 'vue';
 
 const props = defineProps({
   hideSeparator: {
@@ -17,32 +17,32 @@ const props = defineProps({
 
   active: {
     type: String,
-    default: "",
+    default: '',
   },
   hover: {
     type: String,
-    default: "hover:variant-ghost",
+    default: 'hover:variant-ghost',
   },
 
   classPanels: {
     type: String,
-    default: "",
+    default: '',
   },
   classTabs: {
     type: String,
-    default: "",
+    default: '',
   },
   classTab: {
     type: String,
-    default: "",
+    default: '',
   },
   classSeparator: {
     type: String,
-    default: "border-surface-400-500-token",
+    default: 'border-surface-400-500-token',
   },
   classTabSeparator: {
     type: String,
-    default: "border-surface-900-50-token",
+    default: 'border-surface-900-50-token',
   },
 
   defaultIndex: {
@@ -53,12 +53,12 @@ const props = defineProps({
   unstyled: unstyledProp,
 });
 
-provide("active", props.active);
-provide("hover", props.hover);
-provide("vertical", props.vertical);
-provide("classTab", props.classTab);
-provide("hideSeparator", props.hideSeparator);
-provide("classTabSeparator", props.classTabSeparator);
+provide('active', props.active);
+provide('hover', props.hover);
+provide('vertical', props.vertical);
+provide('classTab', props.classTab);
+provide('hideSeparator', props.hideSeparator);
+provide('classTabSeparator', props.classTabSeparator);
 
 const { settings } = useSettings();
 const isUnstyled = settings.global.unstyled || settings.components.tabs.unstyled || props.unstyled;
@@ -86,11 +86,7 @@ const isUnstyled = settings.global.unstyled || settings.components.tabs.unstyled
     >
       <slot name="tabs" />
     </TabList>
-    <div
-      data-test="vuetiful-tab-separator"
-      v-if="!hideSeparator"
-      :class="`border ${classSeparator}`"
-    ></div>
+    <div data-test="vuetiful-tab-separator" v-if="!hideSeparator" :class="`border ${classSeparator}`"></div>
     <TabPanels
       data-test="vuetiful-tab-panels"
       :class="`vuetiful-tab-panels