@code-coaching/vuetiful 0.25.0 → 0.27.0

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

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { unstyledProp } from '@/props';
-import { useSettings } from '@/services';
-import { Tab } from '@headlessui/vue';
-import { computed, inject } from 'vue';
-
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  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 tabClass = computed(() => {
-  return classTab ? classTab : 'w-full px-4 py-2';
-});
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.tab.unstyled || props.unstyled;
-</script>
-
-<template>
-  <Tab
-    :disabled="disabled"
-    v-slot="{ selected }"
-    class="vuetiful-tab"
-    :class="`flex ${vertical ? 'flex-row justify-between' : 'flex-col'}`"
-  >
-    <div
-      data-test="slot-container"
-      class="vuetiful-tab-content"
-      :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}`"
-    ></div>
-  </Tab>
-</template>

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

@@ -1,24 +0,0 @@
-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', () => {
-    const wrapper = mount({
-      template: /*html*/ `
-          <TabGroup>
-            <v-tab-panel data-test='tab-panel'>John Duck</v-tab-panel>
-          </TabGroup>
-        `,
-      components: {
-        TabGroup: TabGroup,
-        'v-tab-panel': VTabPanel,
-      },
-    });
-
-    const tabPanel = wrapper.find("[data-test='tab-panel']");
-    expect(tabPanel.text()).toEqual('John Duck');
-    expect(tabPanel.attributes('tabindex')).toEqual('-1');
-  });
-});

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

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { TabPanel } from '@headlessui/vue';
-</script>
-
-<template>
-  <TabPanel tabindex="-1" class="vuetiful-tab-panel">
-    <slot />
-  </TabPanel>
-</template>

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

@@ -1,92 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VTab, VTabPanel, VTabs } from '..';
-
-describe('VTabs', () => {
-  test('hide separator', () => {
-    const wrapper = mount({
-      template: /*html*/ `
-          <v-tabs hide-separator></v-tabs>
-        `,
-      components: {
-        'v-tabs': VTabs,
-      },
-    });
-
-    const separator = wrapper.find("[data-test='vuetiful-separator']");
-    expect(separator.exists()).toBeFalsy();
-  });
-
-  test('default props', () => {
-    const wrapper = mount({
-      template: /*html*/ `
-          <v-tabs>
-            <template v-slot:tabs>
-              <v-tab>John Duck</v-tab>
-            </template>
-            <v-tab-panel>John Duck Panel</v-tab-panel>
-          </v-tabs>
-        `,
-      components: {
-        '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',
-    ]);
-    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',
-    ]);
-  });
-
-  test('vertical', () => {
-    const wrapper = mount({
-      template: /*html*/ `
-          <v-tabs vertical>
-            <template v-slot:tabs>
-              <v-tab>Tab 1</v-tab>
-            </template>
-            <v-tab-panel>Panel 1</v-tab-panel>
-          </v-tabs>
-        `,
-      components: {
-        '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',
-    ]);
-
-    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',
-    ]);
-  });
-});

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

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { unstyledProp } from '@/props';
-import { useSettings } from '@/services';
-import { TabGroup, TabList, TabPanels } from '@headlessui/vue';
-import { provide } from 'vue';
-
-const props = defineProps({
-  hideSeparator: {
-    type: Boolean,
-    default: false,
-  },
-
-  vertical: {
-    type: Boolean,
-    default: false,
-  },
-
-  active: {
-    type: String,
-    default: '',
-  },
-  hover: {
-    type: String,
-    default: 'hover:variant-ghost',
-  },
-
-  classPanels: {
-    type: String,
-    default: '',
-  },
-  classTabs: {
-    type: String,
-    default: '',
-  },
-  classTab: {
-    type: String,
-    default: '',
-  },
-  classSeparator: {
-    type: String,
-    default: 'border-surface-400-500-token',
-  },
-  classTabSeparator: {
-    type: String,
-    default: 'border-surface-900-50-token',
-  },
-
-  defaultIndex: {
-    type: Number,
-    default: 0,
-  },
-
-  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);
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.tabs.unstyled || props.unstyled;
-</script>
-
-<template>
-  <TabGroup
-    as="div"
-    :vertical="vertical"
-    :defaultIndex="defaultIndex"
-    class="vuetiful-tab-group"
-    :class="`${vertical ? 'flex' : ''}`"
-  >
-    <TabList
-      data-test="vuetiful-tab-list"
-      :class="`vuetiful-tab-list flex ${vertical ? 'flex-col' : ''}
-      ${
-        isUnstyled
-          ? ''
-          : `${
-              vertical ? '!rounded-br-none !rounded-tr-none' : '!rounded-bl-none !rounded-br-none'
-            } rounded-container-token `
-      } 
-      ${classTabs}`"
-    >
-      <slot name="tabs" />
-    </TabList>
-    <div data-test="vuetiful-tab-separator" v-if="!hideSeparator" :class="`border ${classSeparator}`"></div>
-    <TabPanels
-      data-test="vuetiful-tab-panels"
-      :class="`vuetiful-tab-panels
-      ${
-        isUnstyled
-          ? ''
-          : `p-4 ${
-              vertical ? '!rounded-bl-none !rounded-tl-none' : '!rounded-tl-none !rounded-tr-none'
-            } rounded-container-token`
-      } ${classPanels}`"
-    >
-      <slot />
-    </TabPanels>
-  </TabGroup>
-</template>

package/src/components/molecules/index.ts

@@ -1,51 +0,0 @@
-import VDrawer from './VDrawer.vue';
-import VPreview from './VPreview.vue';
-import VRail from './VRail/VRail.vue';
-import VRailTile from './VRail/VRailTile.vue';
-import VShell from './VShell.vue';
-
-import VListbox from './VListbox/VListbox.vue';
-import VListboxButton from './VListbox/VListboxButton.vue';
-import VListboxItem from './VListbox/VListboxItem.vue';
-import VListboxItems from './VListbox/VListboxItems.vue';
-import VListboxLabel from './VListbox/VListboxLabel.vue';
-
-import VTab from './VTabs/VTab.vue';
-import VTabPanel from './VTabs/VTabPanel.vue';
-import VTabs from './VTabs/VTabs.vue';
-
-import VAccordion from './VAccordion/VAccordion.vue';
-import VAccordionItem from './VAccordion/VAccordionItem.vue';
-
-import VAlert from './VAlert.vue';
-
-import VCard from './VCard/VCard.vue';
-import VCardBody from './VCard/VCardBody.vue';
-import VCardFooter from './VCard/VCardFooter.vue';
-import VCardHeader from './VCard/VCardHeader.vue';
-
-import VCodeBlock from './VCodeBlock.vue';
-
-export {
-  VAccordion,
-  VAccordionItem,
-  VAlert,
-  VCard,
-  VCardBody,
-  VCardFooter,
-  VCardHeader,
-  VCodeBlock,
-  VDrawer,
-  VListbox,
-  VListboxButton,
-  VListboxItem,
-  VListboxItems,
-  VListboxLabel,
-  VPreview,
-  VRail,
-  VRailTile,
-  VShell,
-  VTab,
-  VTabPanel,
-  VTabs,
-};

package/src/directives/clipboard.test.ts

@@ -1,26 +0,0 @@
-import { afterEach, describe, expect, vi, test } from 'vitest';
-import { DirectiveBinding } from 'vue';
-import { vClipboard } from '.';
-
-const navigatorMock = {
-  clipboard: {
-    writeText: vi.fn(),
-  } as any,
-} as any;
-
-describe('clipboard', () => {
-  afterEach(() => {
-    vi.resetAllMocks();
-  });
-  describe('given the v-clipboard directive is used', () => {
-    test('should copy text to the clipboard on click', () => {
-      window.navigator = navigatorMock;
-
-      const el = document.createElement('div');
-      vClipboard(el, { value: 'John Duck' } as DirectiveBinding);
-      el.click();
-
-      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('John Duck');
-    });
-  });
-});

package/src/directives/clipboard.ts

@@ -1,9 +0,0 @@
-import { DirectiveBinding } from 'vue';
-
-const clipboard = (el: HTMLElement, binding: DirectiveBinding) => {
-  el.addEventListener('click', () => {
-    navigator.clipboard.writeText(binding.value);
-  });
-};
-
-export default clipboard;

package/src/directives/index.ts

@@ -1,3 +0,0 @@
-import vClipboard from './clipboard';
-
-export { vClipboard };

package/src/env.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}

package/src/index.ts

@@ -1,21 +0,0 @@
-import * as components from './components';
-
-function install(app: any) {
-  for (const key in components) {
-    // @ts-expect-error
-    app.component(key, components[key]);
-  }
-}
-
-import './assets/main.css';
-import './styles/tailwind.css';
-
-export default { install };
-
-export * from './components';
-export * from './utils';
-export * from './directives';
-export * from './services';
-
-// This type alias is to identify CSS classes within component props, which enables Tailwind IntelliSense
-export type CssClasses = string;

package/src/props/index.ts

@@ -1 +0,0 @@
-export * from './props';

package/src/props/props.ts

@@ -1,62 +0,0 @@
-import { Size, Variant } from '@/types';
-import { PropType } from 'vue';
-
-const sizeProp = {
-  type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
-  default: Size.MD,
-};
-
-const unstyledProp = {
-  type: Boolean,
-  default: false,
-};
-
-const variantProp = {
-  // explicit string union because TypeScript type won't throw error if invalid value is passed
-  type: String as PropType<
-    | ''
-    | 'filled'
-    | 'filled-primary'
-    | 'filled-secondary'
-    | 'filled-tertiary'
-    | 'filled-success'
-    | 'filled-warning'
-    | 'filled-error'
-    | 'filled-surface'
-    | 'ringed'
-    | 'ringed-primary'
-    | 'ringed-secondary'
-    | 'ringed-tertiary'
-    | 'ringed-success'
-    | 'ringed-warning'
-    | 'ringed-error'
-    | 'ringed-surface'
-    | 'ghost'
-    | 'ghost-primary'
-    | 'ghost-secondary'
-    | 'ghost-tertiary'
-    | 'ghost-success'
-    | 'ghost-warning'
-    | 'ghost-error'
-    | 'ghost-surface'
-    | 'soft'
-    | 'soft-primary'
-    | 'soft-secondary'
-    | 'soft-tertiary'
-    | 'soft-success'
-    | 'soft-warning'
-    | 'soft-error'
-    | 'soft-surface'
-    | 'glass'
-    | 'glass-primary'
-    | 'glass-secondary'
-    | 'glass-tertiary'
-    | 'glass-success'
-    | 'glass-warning'
-    | 'glass-error'
-    | 'glass-surface'
-  >,
-  default: Variant.Filled,
-};
-
-export { sizeProp, unstyledProp, variantProp };

package/src/services/dark-mode.service.test.ts

@@ -1,104 +0,0 @@
-import { afterEach, describe, expect, vi, test } from 'vitest';
-
-const localStorageMock = {
-  getItem: vi.fn(),
-  setItem: vi.fn(),
-};
-const matchMediaMock = (matches: boolean) => vi.fn(() => ({ matches, onchange: vi.fn() }));
-
-describe('useDarkMode', () => {
-  afterEach(() => {
-    vi.resetModules();
-  });
-
-  describe('applyMode', () => {
-    test('light mode set', async () => {
-      const { useDarkMode } = await import('./dark-mode.service');
-      const { applyMode, chosenMode, MODE } = useDarkMode();
-
-      applyMode(MODE.LIGHT);
-      expect(chosenMode.value).toBe(MODE.LIGHT);
-      expect(document.documentElement.classList.contains('dark')).toBe(false);
-    });
-    test('dark mode set', async () => {
-      const { useDarkMode } = await import('./dark-mode.service');
-      const { applyMode, chosenMode, MODE } = useDarkMode();
-
-      applyMode(MODE.DARK);
-      expect(chosenMode.value).toBe(MODE.DARK);
-      expect(document.documentElement.classList.contains('dark')).toBe(true);
-    });
-  });
-
-  describe('autoModeWatcher', () => {
-    describe('given mode changes', () => {
-      test('should set modeCurrent', async () => {
-        const { useDarkMode } = await import('./dark-mode.service');
-        const darkMode = useDarkMode();
-
-        const mql = {
-          matches: true,
-          onchange: () => {
-            const mode = mql.matches ? darkMode.MODE.LIGHT : darkMode.MODE.DARK;
-            darkMode.applyMode(mode);
-          },
-        };
-        vi.spyOn(window, 'matchMedia').mockReturnValueOnce(mql as any);
-
-        darkMode.autoModeWatcher();
-
-        mql.matches = false;
-        mql.onchange?.();
-        expect(darkMode.chosenMode.value).toBe('dark');
-
-        mql.matches = true;
-        mql.onchange?.();
-        expect(darkMode.chosenMode.value).toBe('light');
-      });
-    });
-  });
-
-  describe('applyModeSSR', () => {
-    test('should add dark class to html tag', async () => {
-      const { useDarkMode } = await import('./dark-mode.service');
-      const darkMode = useDarkMode();
-
-      const html = '<html>';
-      const mode = darkMode.MODE.DARK;
-      const result = darkMode.applyModeSSR(html, mode);
-      expect(result).toBe('<html class="dark">');
-    });
-  });
-
-  describe('getModeFromCookie', () => {
-    test('should return default mode if cookie is not set', async () => {
-      const { useDarkMode } = await import('./dark-mode.service');
-      const darkMode = useDarkMode();
-
-      const cookies = '';
-      const result = darkMode.getModeFromCookie(cookies);
-      expect(result).toBe('dark');
-    });
-    test('should return mode from cookie', async () => {
-      const { useDarkMode } = await import('./dark-mode.service');
-      const darkMode = useDarkMode();
-
-      const cookies = 'vuetiful-mode=light';
-      const result = darkMode.getModeFromCookie(cookies);
-      expect(result).toBe('light');
-    });
-  });
-
-  describe('initializeMode', () => {
-    test('should set mode from cookie', async () => {
-      const { useDarkMode } = await import('./dark-mode.service');
-      const darkMode = useDarkMode();
-
-      const cookies = 'vuetiful-mode=dark';
-      vi.spyOn(document, 'cookie', 'get').mockReturnValueOnce(cookies);
-
-      darkMode.initializeMode();
-      expect(darkMode.chosenMode.value).toBe('dark');
-    });
-  });
-});

package/src/services/dark-mode.service.ts

@@ -1,75 +0,0 @@
-import { computed, readonly, ref } from 'vue';
-import { usePlatform } from '../utils/platform/platform.service';
-
-const { isBrowser } = usePlatform();
-
-const MODE = {
-  LIGHT: 'light',
-  DARK: 'dark',
-};
-export type Mode = (typeof MODE)[keyof typeof MODE];
-
-const defaultMode = MODE.DARK;
-const chosenMode = ref(defaultMode);
-const isDark = computed(() => chosenMode.value === MODE.DARK);
-
-const useDarkMode = () => {
-  const getModeFromCookie = (cookies: string) => {
-    const cookie = cookies.split(';').find((c) => c.trim().startsWith('vuetiful-mode='));
-    if (cookie) {
-      const value = cookie.split('=')[1];
-      return value;
-    }
-    return defaultMode;
-  };
-
-  const applyModeSSR = (html: string, mode: Mode): string => {
-    if (mode === MODE.DARK) html = html.replace('<html', '<html class="dark"');
-    return html;
-  };
-
-  const initializeMode = () => {
-    if (isBrowser) {
-      const mode = getModeFromCookie(document.cookie);
-      applyMode(mode);
-    }
-  };
-
-  const applyMode = (value: Mode) => {
-    const elemHtmlClasses = document.documentElement.classList;
-    const classDark = 'dark';
-    value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-    if (isBrowser) {
-      document.cookie = `vuetiful-mode=${value};path=/;max-age=31536000;SameSite=Lax`;
-    }
-    chosenMode.value = value;
-  };
-
-  const autoModeWatcher = (): void => {
-    const mql = window.matchMedia('(prefers-color-scheme: light)');
-    const setMode = (value: boolean) => {
-      const elemHtmlClasses = document.documentElement.classList;
-      const classDark = `dark`;
-      const mode = value ? MODE.LIGHT : MODE.DARK;
-      mode === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-      applyMode(mode);
-    };
-    setMode(mql.matches);
-    mql.onchange = () => {
-      setMode(mql.matches);
-    };
-  };
-
-  return {
-    chosenMode,
-    isDark: readonly(isDark),
-    initializeMode,
-    applyMode,
-    autoModeWatcher,
-    applyModeSSR,
-    getModeFromCookie,
-    MODE,
-  };
-};
-
-export { useDarkMode };