@code-coaching/vuetiful 0.26.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/click-outside-group.test.ts

@@ -1,44 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, test, vi, expect } from 'vitest'
-import { vClickOutsideGroup } from '.';
-
-interface HTMLElementWithClickOutsideHandler extends HTMLElement {
-  _clickOutsideHandler?: (event: MouseEvent) => void;
-}
-
-describe('vClickOutsideGroup Directive', () => {
-  test("should call the callback when clicking outside the element", async () => {
-    const callback = vi.fn();
-
-    const innerElement = document.createElement('div');
-    const outerElement = document.createElement('div');
-    outerElement.id = 'outer';
-    document.body.appendChild(outerElement);
-    document.body.appendChild(innerElement);
-    
-    const directiveBinding = { value: {
-      elementsInGroup: ['#outer'],
-      callback
-    } } as any;
-    vClickOutsideGroup.mounted(innerElement, directiveBinding);
-
-    innerElement.click();
-    expect(callback).not.toHaveBeenCalled();
-    outerElement.click();
-    expect(callback).not.toHaveBeenCalled();
-    document.body.click();
-    expect(callback).toHaveBeenCalled();
-  })
-
-  test("should remove _clickOutsideHandler when unmounted", async () => {
-    const callback = vi.fn();
-    const directiveBinding = { value: callback } as any;
-    const innerElement = document.createElement('div') as HTMLElementWithClickOutsideHandler;
-    document.body.appendChild(innerElement);
-    vClickOutsideGroup.mounted(innerElement, directiveBinding);
-
-    expect(innerElement._clickOutsideHandler).toBeDefined();
-    vClickOutsideGroup.beforeUnmount(innerElement);
-    expect(innerElement._clickOutsideHandler).toBeUndefined();
-  })
-});

package/src/directives/click-outside-group.ts

@@ -1,39 +0,0 @@
-import { DirectiveBinding } from 'vue';
-
-interface HTMLElementWithClickOutsideHandler extends HTMLElement {
-  _clickOutsideHandler?: (event: MouseEvent) => void;
-}
-
-const clickOutsideGroup = {
-  mounted(el: HTMLElementWithClickOutsideHandler, binding: DirectiveBinding) {
-    const { elementsInGroup = [], callback } = binding.value;
-
-    const elementsToIgnore = elementsInGroup.map((selector: string) => {
-      const allElements = document.querySelectorAll(selector);
-      const elements = Array.from(allElements) as HTMLElement[];
-      return elements;
-    });
-
-    const allElementsToIgnore = elementsToIgnore.flat();
-
-    const clickOutsideHandler = (event: MouseEvent) => {
-      const clickedIgnoreElement = allElementsToIgnore.some((el: HTMLElement) => el?.contains(event.target as Node));
-      if (!el.contains(event.target as Node) && !clickedIgnoreElement) {
-        callback();
-      }
-    };
-
-    document.addEventListener('click', clickOutsideHandler);
-
-    el._clickOutsideHandler = clickOutsideHandler;
-  },
-
-  beforeUnmount(el: HTMLElementWithClickOutsideHandler) {
-    if (el._clickOutsideHandler) {
-      document.removeEventListener('click', el._clickOutsideHandler);
-      delete el._clickOutsideHandler;
-    }
-  },
-};
-
-export default clickOutsideGroup;

package/src/directives/click-outside.test.ts

@@ -1,38 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, test, vi, expect } from 'vitest'
-import { vClickOutside } from '.';
-
-interface HTMLElementWithClickOutsideHandler extends HTMLElement {
-  _clickOutsideHandler?: (event: MouseEvent) => void;
-}
-
-describe('vClickOutside Directive', () => {
-  test("should call the callback when clicking outside the element", async () => {
-    const callback = vi.fn();
-
-    const innerElement = document.createElement('div');
-    document.body.appendChild(innerElement);
-
-    const directiveBinding = { value: callback } as any;
-    vClickOutside.mounted(innerElement, directiveBinding);
-
-    innerElement.click();
-    expect(callback).not.toHaveBeenCalled();
-    document.body.click();
-    expect(callback).toHaveBeenCalled();
-  })
-
-  test("should remove _clickOutsideHandler when unmounted", async () => {
-    const callback = vi.fn();
-
-    const innerElement = document.createElement('div') as HTMLElementWithClickOutsideHandler;
-    document.body.appendChild(innerElement);
-
-    const directiveBinding = { value: callback } as any;
-    vClickOutside.mounted(innerElement, directiveBinding);
-
-    expect(innerElement._clickOutsideHandler).toBeDefined();
-    vClickOutside.beforeUnmount(innerElement);
-    expect(innerElement._clickOutsideHandler).toBeUndefined();
-  })
-});

package/src/directives/click-outside.ts

@@ -1,28 +0,0 @@
-import { DirectiveBinding } from 'vue';
-
-interface HTMLElementWithClickOutsideHandler extends HTMLElement {
-  _clickOutsideHandler?: (event: MouseEvent) => void;
-}
-
-const clickOutside = {
-  mounted(el: HTMLElementWithClickOutsideHandler, binding: DirectiveBinding) {
-    const clickOutsideHandler = (event: MouseEvent) => {
-      if (!el.contains(event.target as Node)) {
-        binding.value();
-      }
-    };
-
-    document.addEventListener('click', clickOutsideHandler);
-
-    el._clickOutsideHandler = clickOutsideHandler;
-  },
-
-  beforeUnmount(el: HTMLElementWithClickOutsideHandler) {
-    if (el._clickOutsideHandler) {
-      document.removeEventListener('click', el._clickOutsideHandler);
-      delete el._clickOutsideHandler;
-    }
-  },
-};
-
-export default clickOutside;

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,5 +0,0 @@
-import vClickOutside from './click-outside';
-import vClickOutsideGroup from './click-outside-group';
-import vClipboard from './clipboard';
-
-export { vClickOutside, vClickOutsideGroup, 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 };