@code-coaching/vuetiful 0.26.0 → 0.27.0

package/src/components/molecules/VPreview.vue

@@ -1,230 +0,0 @@
-<script setup lang="ts">
-import { VButton, VRadioGroup, VRadioItem } from '@/index';
-import { ref } from 'vue';
-
-const backgrounds: Record<string, string> = {
-  'bg-transparent': 'bg-transparent',
-  'neutral-opaque': 'bg-white/50 dark:bg-black/50',
-  neutral: 'bg-surface-100-800-token',
-
-  'variant-filled-surface': 'variant-filled-surface',
-  'variant-filled-primary': 'variant-filled-primary',
-  'variant-filled-secondary': 'variant-filled-secondary',
-  'variant-filled-tertiary': 'variant-filled-tertiary',
-  'variant-filled-success': 'variant-filled-success',
-  'variant-filled-warning': 'variant-filled-warning',
-  'variant-filled-error': 'variant-filled-error',
-
-  // TODO: implement gradient backgrounds
-  // 'primary-to-secondary': 'bg-gradient-to-br variant-gradient-primary-secondary',
-  // 'secondary-to-tertiary': 'bg-gradient-to-br variant-gradient-secondary-tertiary',
-  // 'tertiary-to-primary': 'bg-gradient-to-br variant-gradient-tertiary-primary',
-  // 'secondary-to-primary': 'bg-gradient-to-br variant-gradient-secondary-primary',
-  // 'tertiary-to-secondary': 'bg-gradient-to-br variant-gradient-tertiary-secondary',
-  // 'primary-to-tertiary': 'bg-gradient-to-br variant-gradient-primary-tertiary',
-  // 'success-to-warning': 'bg-gradient-to-br variant-gradient-success-warning',
-  // 'warning-to-error': 'bg-gradient-to-br variant-gradient-warning-error',
-  // 'error-to-success': 'bg-gradient-to-br variant-gradient-error-success',
-  // 'warning-to-success': 'bg-gradient-to-br variant-gradient-warning-success',
-  // 'error-to-warning': 'bg-gradient-to-br variant-gradient-error-warning',
-  // 'success-to-error': 'bg-gradient-to-br variant-gradient-success-error',
-};
-
-const props = defineProps({
-  hideMobileToggle: {
-    type: Boolean,
-    default: false,
-  },
-  hideSwatches: {
-    type: Boolean,
-    default: false,
-  },
-  background: {
-    type: String,
-    default: 'neutral',
-  },
-
-  // Props (regions)
-  regionHeader: {
-    type: String,
-    default: '',
-  },
-  regionViewport: {
-    type: String,
-    default: '',
-  },
-  regionPreview: {
-    type: String,
-    default: '',
-  },
-  regionFooter: {
-    type: String,
-    default: '',
-  },
-  regionSource: {
-    type: String,
-    default: '',
-  },
-});
-
-const chosenBackground = ref(props.background);
-const tabView = ref('preview');
-const radioSize = ref('full');
-const swatches = ref(false);
-
-const toggleSwatches = () => (swatches.value = !swatches.value);
-</script>
-
-<template>
-  <div
-    class="vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10"
-  >
-    <header
-      :class="`vuetiful-previewer-header flex items-center justify-between gap-4 p-4 bg-surface-200-700-token ${regionHeader}`"
-    >
-      <div class="flex items-center gap-2">
-        <v-radio-group v-model="tabView">
-          <v-radio-item data-test="radio-item-preview" value="preview" title="Preview">
-            <slot name="preview-item">
-              <!-- https://fontawesome.com/icons/eye?f=classic&s=solid -->
-              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-                <path
-                  d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"
-                />
-              </svg>
-            </slot>
-          </v-radio-item>
-          <v-radio-item data-test="radio-item-code" value="code" title="Code">
-            <slot name="code-item">
-              <!-- https://fontawesome.com/icons/code?f=classic&s=solid -->
-              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-                <path
-                  d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"
-                />
-              </svg>
-            </slot>
-          </v-radio-item>
-        </v-radio-group>
-        <v-radio-group
-          class="hidden sm:!inline-flex"
-          v-if="!hideMobileToggle && tabView === 'preview'"
-          v-model="radioSize"
-        >
-          <v-radio-item data-test="radio-item-mobile" value="mobile">
-            <slot name="mobile-item">
-              <!-- https://fontawesome.com/icons/mobile-screen?f=classic&s=solid -->
-              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
-                <path
-                  d="M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z"
-                />
-              </svg>
-            </slot>
-          </v-radio-item>
-          <v-radio-item value="full">
-            <slot name="desktop-item">
-              <!-- https://fontawesome.com/icons/display?f=classic&s=solid -->
-              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-                <path
-                  d="M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V352H64V64H512z"
-                />
-              </svg>
-            </slot>
-          </v-radio-item>
-        </v-radio-group>
-      </div>
-      <v-button
-        v-if="!hideSwatches"
-        data-test="swatch-button"
-        :variant="swatches ? 'filled' : ''"
-        class="px-4 py-1 border-token border-surface-400-500-token"
-        :class="
-          swatches
-            ? ''
-            : 'text-center text-base rounded-token hover:variant-ghost hover:text-surface-900 dark:hover:text-surface-50'
-        "
-        @click="toggleSwatches"
-        title="Backgrounds"
-      >
-        <slot name="swatchbook-item">
-          <!-- https://fontawesome.com/icons/swatchbook?f=classic&s=solid -->
-          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-            <path
-              d="M0 32C0 14.3 14.3 0 32 0H160c17.7 0 32 14.3 32 32V416c0 53-43 96-96 96s-96-43-96-96V32zM223.6 425.9c.3-3.3 .4-6.6 .4-9.9V154l75.4-75.4c12.5-12.5 32.8-12.5 45.3 0l90.5 90.5c12.5 12.5 12.5 32.8 0 45.3L223.6 425.9zM182.8 512l192-192H480c17.7 0 32 14.3 32 32V480c0 17.7-14.3 32-32 32H182.8zM128 64H64v64h64V64zM64 192v64h64V192H64zM96 440a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"
-            />
-          </svg>
-        </slot>
-      </v-button>
-    </header>
-
-    <!-- There is some odd behavior with test coverage, v-model must be the last property in this component -->
-    <v-radio-group
-      v-if="swatches"
-      data-test="swatches"
-      :class="`vuetiful-previewer-swatches variant-soft grid grid-cols-6 gap-2 !rounded-none p-4 sm:grid-cols-12`"
-      active="bg-transparent"
-      hover="bg-transparent"
-      v-model="chosenBackground"
-    >
-      <v-radio-item
-        v-for="([key, value], index) in Object.entries(backgrounds)"
-        :value="key"
-        :key="index"
-        :class="`${value} flex aspect-square cursor-pointer items-center justify-center rounded ring-[1px] ring-surface-500/50`"
-        :title="key"
-      >
-        <slot v-if="index === 0 && chosenBackground !== key" name="cancel-item">
-          <!-- https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
-          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-            <path
-              d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
-            />
-          </svg>
-        </slot>
-
-        <slot v-if="chosenBackground === key" name="selected-item">
-          <!-- https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
-          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-            <path
-              d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
-            />
-          </svg>
-        </slot>
-      </v-radio-item>
-    </v-radio-group>
-
-    <template v-if="tabView === 'preview'">
-      <div :class="`vuetiful-previewer-viewport p-4 md:p-10 ${backgrounds[chosenBackground]} ${regionViewport}`">
-        <!-- <div v-if="$slots.lead" class="vuetiful-previewer-lead"><slot name="lead" /></div> -->
-        <div
-          data-test="previewer-preview"
-          :class="`vuetiful-previewer-preview mx-auto flex duration-300 ${
-            radioSize === 'mobile'
-              ? 'mobile-screen flex h-[812px] max-w-[375px] flex-col overflow-hidden rounded-3xl border-8 border-black/50 p-2 shadow-2xl dark:border-white/50'
-              : 'w-full items-center justify-center'
-          } ${regionPreview}`"
-        >
-          <slot name="preview">(preview)</slot>
-        </div>
-        <!-- <div v-if="$slots.trail" class="vuetiful-previewer-trail"><slot name="trail" /></div> -->
-      </div>
-      <footer v-if="$slots.footer" :class="`vuetiful-previewer-footer variant-soft p-4 ${regionFooter}`">
-        <slot name="footer" />
-      </footer>
-    </template>
-
-    <template v-if="tabView === 'code'">
-      <div
-        data-test="previewer-source"
-        :class="`vuetiful-previewer-source p-4 md:p-10 ${backgrounds['neutral']} ${regionSource}`"
-      >
-        <slot name="source">(source)</slot>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.icon {
-  @apply my-1 h-4 w-4 fill-current;
-}
-</style>

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

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

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

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { CssClasses } from '@/index';
-import { VRadioGroup, useRail } from '@/index';
-import { provide } from 'vue';
-
-const { selectedRailTile } = useRail();
-
-const props = defineProps({
-  active: {
-    type: String as () => CssClasses,
-    default: 'variant-filled',
-  },
-  hover: {
-    type: String as () => CssClasses,
-    default: 'hover:variant-ghost hover:text-surface-900 dark:hover:text-surface-50',
-  },
-});
-
-provide('activeRail', props.active);
-provide('hoverRail', props.hover);
-</script>
-
-<template>
-  <v-radio-group
-    v-model="selectedRailTile"
-    unstyled
-    hover=""
-    active=""
-    class="flex h-full w-[70px] flex-col overflow-y-auto"
-  >
-    <slot />
-  </v-radio-group>
-</template>

package/src/components/molecules/VRail/VRailTile.test.ts

@@ -1,97 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { expect, test, describe } from 'vitest';
-import { VRadioGroup, VRail, VRailTile, useRail } from '@/index';
-
-describe('VRailTile', () => {
-  // TODO: add tests
-  test('default slot', () => {
-    const wrapper = mount({
-      provide: {
-        activeRail: null,
-        hoverRail: null,
-      },
-      template: /*html*/ `
-        <v-radio-group>
-          <v-rail-tile>John Duck</v-rail-tile>
-        </v-radio-group>
-      `,
-      components: {
-        'v-rail-tile': VRailTile,
-        'v-radio-group': VRadioGroup,
-      },
-    });
-
-    expect(wrapper).toBeTruthy();
-  });
-
-  test('label prop', () => {
-    const wrapper = mount({
-      provide: {
-        activeRail: null,
-        hoverRail: null,
-      },
-      template: /*html*/ `
-        <v-radio-group>
-          <v-rail-tile label="John Duck label">
-            John Duck
-          </v-rail-tile>
-        </v-radio-group>
-      `,
-      components: {
-        'v-rail-tile': VRailTile,
-        'v-radio-group': VRadioGroup,
-      },
-    });
-
-    const label = wrapper.find('.vuetiful-rail-tile-label');
-    expect(label.text()).toContain('John Duck label');
-  });
-
-  test('no default slot', () => {
-    const wrapper = mount({
-      provide: {
-        activeRail: null,
-        hoverRail: null,
-      },
-      template: /*html*/ `
-        <v-radio-group>
-          <v-rail-tile label="John Duck label">
-          </v-rail-tile>
-        </v-radio-group>
-      `,
-      components: {
-        'v-rail-tile': VRailTile,
-        'v-radio-group': VRadioGroup,
-      },
-    });
-
-    const icon = wrapper.find('.vuetiful-rail-tile-icon');
-    expect(icon.exists()).toBeFalsy();
-  });
-
-  test('selected rail tile', async () => {
-    const wrapper = mount({
-      provide: {
-        activeRail: 'fake-active-class',
-        hoverRail: null,
-      },
-      template: /*html*/ `
-        <v-rail data-test="rail">
-          <v-rail-tile data-test='rail-tile' label="John Duck label" value="John Duck">
-            John Duck
-          </v-rail-tile>
-        </v-rail>
-      `,
-      components: {
-        'v-rail-tile': VRailTile,
-        'v-rail': VRail,
-      },
-    });
-
-    const { selectedRailTile } = useRail();
-    expect(selectedRailTile.value).toBe('');
-    const railTile = wrapper.find('.vuetiful-rail-tile');
-    await railTile.trigger('click');
-    expect(selectedRailTile.value).toBe('John Duck');
-  });
-});

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

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import type { CssClasses } from '@/index';
-import { VRadioItem } from '@/index';
-import { useRail } from '@/services';
-import { inject } from 'vue';
-
-defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String as () => string,
-    default: '',
-  },
-
-  regionIcon: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-  regionLabel: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-});
-
-const { selectedRailTile } = useRail();
-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}`
-    }`"
-  >
-    <template v-if="$slots.default">
-      <div :class="`vuetiful-rail-tile-icon ${regionIcon}`"><slot /></div>
-    </template>
-    <template v-if="label">
-      <div :class="`vuetiful-rail-tile-label text-center text-xs font-bold ${regionLabel}`">
-        {{ label }}
-      </div>
-    </template>
-  </v-radio-item>
-</template>

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

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

package/src/components/molecules/VShell.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-/**
- * @slot fixedHeader - Insert fixed header content, such as Skeleton's App Bar component.
- * @slot sidebarLeft - Hidden when empty. Allows you to set fixed left sidebar content.
- * @slot sidebarRight - Hidden when empty. Allows you to set fixed right sidebar content.
- * @slot pageHeader - Insert content that resides above your page content. Great for global alerts.
- * @slot pageFooter - Insert content that resides below your page content. Recommended for most layouts.
- * @slot fixedFooter - Insert fixed footer content. Not recommended for most layouts.
- */
-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: '' },
-});
-</script>
-
-<template>
-  <div class="vuetiful-shell flex h-full w-full flex-col overflow-hidden">
-    <header v-if="$slots.fixedHeader" :class="`vuetiful-fixed-header ${slotFixedHeader}`">
-      <slot name="fixedHeader" />
-    </header>
-
-    <div class="vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden">
-      <aside
-        v-if="$slots.sidebarLeft"
-        :class="`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${slotSidebarLeft}`"
-      >
-        <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}`">
-          <slot name="pageHeader" />
-        </header>
-
-        <main :class="`vuetiful-page-content flex-auto ${slotPageContent}`">
-          <slot />
-        </main>
-
-        <footer v-if="$slots.pageFooter" :class="`vuetiful-page-footer flex-none ${slotPageFooter}`">
-          <slot name="pageFooter" />
-        </footer>
-      </div>
-
-      <aside
-        v-if="$slots.sidebarRight"
-        :class="`vuetiful-sidebar-right flex-none overflow-y-auto overflow-x-hidden ${slotSidebarRight}`"
-      >
-        <slot name="sidebarRight" />
-      </aside>
-    </div>
-
-    <footer v-if="$slots.fixedFooter" :class="`vuetiful-fixed-footer ${slotFixedFooter}`">
-      <slot name="fixedFooter" />
-    </footer>
-  </div>
-</template>

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

@@ -1,143 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VTab, VTabs } from '..';
-
-describe('VTab', () => {
-  test('defaults', async () => {
-    const wrapper = mount({
-      template: /*html*/ `
-          <v-tabs>
-            <template v-slot="tabs">
-              <v-tab 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()).toEqual([
-      'vuetiful-tab-content',
-      'text-base',
-      'rounded-token',
-      'w-full',
-      'px-4',
-      'py-2',
-    ]);
-  });
-
-  test('vertical', async () => {
-    const wrapper = mount({
-      template: /*html*/ `
-          <v-tabs vertical>
-            <template v-slot="tabs">
-              <v-tab data-test="vuetiful">Vuetiful</v-tab>
-            </template>
-          </v-tabs>
-        `,
-      components: {
-        'v-tabs': VTabs,
-        'v-tab': VTab,
-      },
-    });
-
-    const vuetiful = wrapper.find("[data-test='vuetiful']");
-    expect(vuetiful.classes()).toEqual(['vuetiful-tab', 'flex', 'flex-row', 'justify-between']);
-  });
-
-  test('class-tab', async () => {
-    const wrapper = mount({
-      template: /*html*/ `
-          <v-tabs class-tab="my-custom-class">
-            <template v-slot="tabs">
-              <v-tab 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(slotContainer.classes()).toEqual(['vuetiful-tab-content', 'text-base', 'rounded-token', 'my-custom-class']);
-  });
-
-  test('hover/active', async () => {
-    const wrapper = mount({
-      template: /*html*/ `
-          <v-tabs active="my-custom-active-class">
-            <template v-slot="tabs">
-              <v-tab data-test="vuetiful">Vuetiful</v-tab>
-              <v-tab data-test="is">Is</v-tab>
-              <v-tab data-test="beautiful">Beautiful</v-tab>
-            </template>
-          </v-tabs>
-        `,
-      components: {
-        'v-tabs': VTabs,
-        'v-tab': VTab,
-      },
-    });
-
-    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']");
-
-    expect(vuetifulSlotContainer.classes()).toEqual([
-      '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',
-    ]);
-    expect(beautifulSlotContainer.classes()).toEqual([
-      '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');
-  });
-});