@code-coaching/vuetiful 0.26.0 → 0.27.0

package/src/components/molecules/VCard/VCardFooter.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { inject, useAttrs } from 'vue';
-import { unstyledProp } from '@/props';
-import { useSettings } from '@/services';
-
-const props = defineProps({
-  classSeparator: {
-    type: String as () => string,
-    default: 'opacity-90',
-  },
-  unstyled: unstyledProp,
-});
-
-const hideSeparator = inject('hideSeparator', false);
-
-const attrs = useAttrs();
-const classAttribute = attrs.class as string;
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.cardBody.unstyled || props.unstyled;
-</script>
-
-<template>
-  <hr v-if="!hideSeparator" data-test="vuetiful-card-footer-separator" class="divider" :class="classSeparator" />
-  <div
-    data-test="vuetiful-card-footer-content"
-    :class="`vuetiful-card-footer ${isUnstyled ? '' : 'p-4'} ${classAttribute}`"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/molecules/VCard/VCardHeader.test.ts

@@ -1,86 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VCard, VCardHeader } from '..';
-
-describe('VCardHeader', () => {
-  test('unstyled', () => {
-    const wrapper = mount({
-      template: /*html*/ `
-        <v-card>
-          <v-card-header unstyled>John Duck</v-card-header>
-        </v-card>
-      `,
-      components: {
-        'v-card': VCard,
-        'v-card-header': VCardHeader,
-      },
-    });
-
-    const content = wrapper.find("[data-test='vuetiful-card-header-content']");
-    expect(content.text()).toEqual('John Duck');
-    expect(content.classes()).not.toContain('p-4');
-  });
-
-  test('defaults', async () => {
-    const wrapper = mount({
-      template: /*html*/ `
-        <v-card>
-          <v-card-header>John Duck</v-card-header>
-        </v-card>
-      `,
-      components: {
-        'v-card': VCard,
-        'v-card-header': VCardHeader,
-      },
-    });
-
-    const separator = wrapper.find("[data-test='vuetiful-card-header-separator']");
-    const content = wrapper.find("[data-test='vuetiful-card-header-content']");
-    expect(separator.element.tagName).toEqual('HR');
-    expect(content.text()).toEqual('John Duck');
-    expect(content.classes()).toContain('p-4');
-  });
-
-  describe('given hideSeparator is true', () => {
-    test('should not show separator', async () => {
-      const wrapper = mount({
-        template: /*html*/ `
-          <v-card hide-separator>
-            <v-card-header>John Duck</v-card-header>
-          </v-card>
-        `,
-        components: {
-          'v-card': VCard,
-          'v-card-header': VCardHeader,
-        },
-      });
-
-      const separator = wrapper.find("[data-test='vuetiful-card-header-separator']");
-      const content = wrapper.find("[data-test='vuetiful-card-header-content']");
-      expect(separator.exists()).toEqual(false);
-      expect(content.text()).toEqual('John Duck');
-    });
-  });
-
-  describe('given an image is present', () => {
-    test('should not have padding', async () => {
-      const wrapper = mount({
-        template: /*html*/ `
-        <v-card>
-          <v-card-header>
-            <img src="fakeUrl" />
-          </v-card-header>
-        </v-card>
-      `,
-        components: {
-          'v-card': VCard,
-          'v-card-header': VCardHeader,
-        },
-      });
-      await wrapper.vm.$nextTick();
-
-      const content = wrapper.find("[data-test='vuetiful-card-header-content']");
-      expect(content.classes()).not.toContain('p-4');
-    });
-  });
-});

package/src/components/molecules/VCard/VCardHeader.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { unstyledProp } from '@/props';
-import { useSettings } from '@/services';
-import { Ref, computed, inject, ref, useAttrs } from 'vue';
-
-const props = defineProps({
-  classSeparator: {
-    type: String as () => string,
-    default: 'opacity-90',
-  },
-  unstyled: unstyledProp,
-});
-
-const headerRef = ref() as Ref<HTMLDivElement>;
-
-const hasImageAsChild = computed(() => {
-  const children = headerRef.value?.children;
-  if (!children) return false;
-  const childrenArray = Array.from(children);
-  return childrenArray.some((child) => child.tagName === 'IMG');
-});
-
-const hideSeparator = inject('hideSeparator', false);
-
-const attrs = useAttrs();
-const classAttribute = attrs.class as string;
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.cardHeader.unstyled || props.unstyled;
-</script>
-
-<template>
-  <div
-    ref="headerRef"
-    data-test="vuetiful-card-header-content"
-    :class="`vuetiful-card-header ${hasImageAsChild ? '' : `${isUnstyled ? '' : 'p-4'}`} ${classAttribute}`"
-  >
-    <slot />
-  </div>
-  <hr v-if="!hideSeparator" data-test="vuetiful-card-header-separator" class="divider" :class="classSeparator" />
-</template>
-
-<style>
-.vuetiful-card-header {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
-.vuetiful-card-header > * {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-</style>

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

@@ -1,133 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test, vi } from 'vitest';
-import { VCodeBlock } from '../..';
-
-const clipboardMock = {
-  writeText: vi.fn(),
-};
-
-Object.defineProperty(window.navigator, 'clipboard', {
-  value: clipboardMock,
-  writable: true,
-});
-
-describe('VCodeBlock', () => {
-  test('copy button copies code to clipboard', async () => {
-    const mockClipboardDirective = {
-      mounted(el: HTMLElement, binding: any) {
-        el.addEventListener('click', () => {
-          el.dataset.copied = binding.value;
-        });
-      },
-    };
-
-    const wrapper = mount(VCodeBlock, {
-      props: {
-        code: 'John Duck',
-      },
-      global: {
-        directives: {
-          clipboard: mockClipboardDirective,
-        },
-      },
-    });
-
-    await wrapper.find('.vuetiful-code-block-button').trigger('click');
-
-    expect(clipboardMock.writeText).toHaveBeenCalledWith('John Duck');
-
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-
-    expect(wrapper.emitted('copy')).toBeTruthy();
-  });
-
-  test('renders the component with default props', () => {
-    const wrapper = mount(VCodeBlock);
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.text()).toContain('Copy');
-    expect(wrapper.find('.vuetiful-code-block-language').text()).toBe('plaintext');
-    expect(wrapper.find('.vuetiful-code-block-code').classes()).toContain('language-plaintext');
-  });
-
-  test('renders the component with custom props', () => {
-    const customProps = {
-      language: 'javascript',
-      code: 'const x = 10;',
-      buttonText: 'Copy Code',
-      buttonCopiedText: 'Copied!',
-      classButton: 'custom-button-class',
-      classLanguage: 'custom-language-class',
-      classCode: 'custom-code-class',
-      preventOverflow: true,
-    };
-
-    const wrapper = mount(VCodeBlock, {
-      props: customProps,
-    });
-
-    expect(wrapper.find('.vuetiful-code-block-button').text()).toContain('Copy Code');
-    expect(wrapper.find('.vuetiful-code-block-language').text()).toBe('javascript');
-    expect(wrapper.find('.vuetiful-code-block-code').classes()).toContain('language-javascript');
-    expect(wrapper.find('.vuetiful-code-block-pre').classes()).toContain('whitespace-pre-wrap');
-  });
-
-  test('renders the component with custom props', () => {
-    const customProps = {
-      language: 'js',
-      code: 'const x = 10;',
-      buttonText: 'Copy Code',
-      buttonCopiedText: 'Copied!',
-      classButton: 'custom-button-class',
-      classLanguage: 'custom-language-class',
-      classCode: 'custom-code-class',
-      preventOverflow: true,
-    };
-
-    const wrapper = mount(VCodeBlock, { props: customProps });
-
-    expect(wrapper.find('.vuetiful-code-block-button').text()).toContain('Copy Code');
-    expect(wrapper.find('.vuetiful-code-block-language').text()).toBe('javascript');
-    expect(wrapper.find('.vuetiful-code-block-code').classes()).toContain('language-js');
-    expect(wrapper.find('.vuetiful-code-block-pre').classes()).toContain('whitespace-pre-wrap');
-  });
-
-  test('renders the component with custom props', () => {
-    const customProps = {
-      language: 'ts',
-      code: 'const x = 10;',
-      buttonText: 'Copy Code',
-      buttonCopiedText: 'Copied!',
-      classButton: 'custom-button-class',
-      classLanguage: 'custom-language-class',
-      classCode: 'custom-code-class',
-      preventOverflow: true,
-    };
-
-    const wrapper = mount(VCodeBlock, { props: customProps });
-
-    expect(wrapper.find('.vuetiful-code-block-button').text()).toContain('Copy Code');
-    expect(wrapper.find('.vuetiful-code-block-language').text()).toBe('typescript');
-    expect(wrapper.find('.vuetiful-code-block-code').classes()).toContain('language-ts');
-    expect(wrapper.find('.vuetiful-code-block-pre').classes()).toContain('whitespace-pre-wrap');
-  });
-
-  test('renders the component with custom props', () => {
-    const customProps = {
-      language: 'sh',
-      code: 'const x = 10;',
-      buttonText: 'Copy Code',
-      buttonCopiedText: 'Copied!',
-      classButton: 'custom-button-class',
-      classLanguage: 'custom-language-class',
-      classCode: 'custom-code-class',
-      preventOverflow: true,
-    };
-
-    const wrapper = mount(VCodeBlock, { props: customProps });
-
-    expect(wrapper.find('.vuetiful-code-block-button').text()).toContain('Copy Code');
-    expect(wrapper.find('.vuetiful-code-block-language').text()).toBe('console');
-    expect(wrapper.find('.vuetiful-code-block-code').classes()).toContain('language-sh');
-    expect(wrapper.find('.vuetiful-code-block-pre').classes()).toContain('whitespace-pre-wrap');
-  });
-});

package/src/components/molecules/VCodeBlock.vue

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import { CssClasses, VButton, useSettings, vClipboard } from '@/index';
-import { unstyledProp } from '@/props';
-import { useHighlight } from '@/services/highlight.service';
-import 'highlight.js/styles/github-dark.css';
-import { ref } from 'vue';
-
-const { highlight } = useHighlight();
-
-const props = defineProps({
-  language: {
-    type: String,
-    default: 'plaintext',
-  },
-  code: {
-    type: String,
-    default: '',
-  },
-
-  preventOverflow: {
-    type: Boolean,
-    default: false,
-  },
-
-  classHeader: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-  classLanguage: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-  classPre: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-  classCode: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-
-  classButton: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-  buttonText: {
-    type: String,
-    default: 'Copy',
-  },
-  buttonCopiedText: {
-    type: String,
-    default: '👍',
-  },
-
-  unstyled: unstyledProp,
-});
-
-const emit = defineEmits<{
-  (event: 'copy'): void;
-}>();
-
-const copyState = ref(false);
-
-// Allow shorthand alias, but show full text in UI
-function languageFormatter(lang: string): string {
-  if (lang === 'js') return 'javascript';
-  if (lang === 'ts') return 'typescript';
-  if (['sh', 'bash', 'zsh', 'shell'].includes(lang)) return 'console';
-  return lang;
-}
-
-function onCopyClick() {
-  copyState.value = true;
-  setTimeout(() => {
-    copyState.value = false;
-  }, 2000);
-  emit('copy');
-}
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.codeBlock.unstyled || props.unstyled;
-</script>
-
-<template v-if="language && code">
-  <div
-    :class="`vuetiful-code-block code-block ${
-      isUnstyled ? '' : 'max-w-full bg-[#171717] text-sm text-white shadow rounded-container-token'
-    }`"
-  >
-    <header
-      :class="`vuetiful-code-block-header ${
-        isUnstyled ? '' : 'flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-[#a4a4a4]'
-      } ${classHeader}`"
-    >
-      <span :class="`vuetiful-code-block-language ${classLanguage}`">{{ languageFormatter(language) }}</span>
-      <v-button
-        size="sm"
-        :class="`vuetiful-code-block-button ${
-          classButton ? classButton : 'bg-[#171717] text-[#a4a4a4] dark:bg-[#171717] dark:text-[#a4a4a4]'
-        }`"
-        @click="onCopyClick()"
-        v-clipboard="code"
-      >
-        {{ !copyState ? buttonText : buttonCopiedText }}
-      </v-button>
-    </header>
-    <pre
-      :class="`vuetiful-code-block-pre ${isUnstyled ? '' : '!rounded-t-none bg-transparent p-4 !pt-0'} ${
-        preventOverflow ? 'whitespace-pre-wrap break-all' : 'overflow-auto'
-      } ${classPre}`"
-    ><code :class="`vuetiful-code-block-code language-${language} ${classCode}`" v-html="highlight(code, language)"></code></pre>
-  </div>
-</template>

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

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

package/src/components/molecules/VDrawer.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import type { CssClasses } from '@/index';
-import { useDrawer } from '@/services';
-import { Ref, computed, onMounted, ref, toRefs } from 'vue';
-
-const { drawer, close } = useDrawer();
-
-// #region Props
-const props = defineProps({
-  // Regions
-  regionBackdrop: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-  regionDrawer: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-
-  // a11y
-  labelledby: {
-    type: String,
-    default: '',
-  },
-  describedby: {
-    type: String,
-    default: '',
-  },
-});
-
-const { regionBackdrop, regionDrawer, labelledby, describedby } = toRefs(props);
-// prettier-ignore
-const presets = {
-	top: { alignment: 'top-0', width: 'w-full', height: 'h-[50%]', rounded: 'rounded-bl-container-token rounded-br-container-token' },
-	bottom: { alignment: 'bottom-0', width: 'w-full', height: ' h-[50%]', rounded: 'rounded-tl-container-token rounded-tr-container-token' },
-	left: { alignment: 'lef-0', width: 'w-[90%]', height: 'h-full', rounded: 'rounded-tr-container-token rounded-br-container-token' },
-	right: { alignment: 'right-0', width: 'w-[90%]', height: 'h-full', rounded: 'rounded-tl-container-token rounded-bl-container-token' }
-};
-const preset = computed(() => {
-  const position = drawer.position || 'left';
-  return presets[position];
-});
-// #endregion
-
-// #region template refs
-const elemBackdrop: Ref<HTMLElement> = ref() as Ref<HTMLElement>;
-const elemDrawer: Ref<HTMLElement> = ref() as Ref<HTMLElement>;
-// #endregion
-
-// #region Event Handlers
-const onBackdropInteraction = (event: Event) => {
-  if (event.target === elemBackdrop.value) close();
-};
-
-const onKeydownWindow = (event: KeyboardEvent) => {
-  if (event.code === 'Escape') close();
-};
-onMounted(() => {
-  window.addEventListener('keydown', onKeydownWindow);
-});
-// #endregion
-</script>
-
-<template>
-  <transition :name="`slide-${drawer.position}-${drawer.duration}`">
-    <div
-      v-if="drawer.open"
-      ref="elemDrawer"
-      :class="`drawer absolute overflow-y-auto shadow-xl transition-transform bg-surface-100-800-token ${preset.width} ${preset.height} ${preset.rounded} ${preset.alignment} z-50 ${regionDrawer}`"
-      role="dialog"
-      aria-modal="true"
-      :aria-labelledby="labelledby"
-      :aria-describedby="describedby"
-    >
-      <slot />
-    </div>
-  </transition>
-  <transition :name="`fade-${drawer.duration}`">
-    <div
-      v-if="drawer.open"
-      ref="elemBackdrop"
-      :class="`drawer-backdrop backdrop-blur-xs fixed bottom-0 left-0 right-0 top-0 z-40 flex bg-surface-backdrop-token ${regionBackdrop}`"
-      @mousedown="onBackdropInteraction"
-      @touchstart="onBackdropInteraction"
-    ></div>
-  </transition>
-</template>

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

@@ -1,146 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { ref } from 'vue';
-import { VListboxItem } from '..';
-import VListbox from './VListbox.vue';
-
-describe('VListbox', () => {
-  test('default props', () => {
-    const wrapper = mount(VListbox);
-
-    expect(wrapper.props()).toEqual({
-      modelValue: undefined,
-      classLabel: '',
-      textButton: 'Select an option',
-      classButton: '',
-      classItem: '',
-      classItems: '',
-      horizontal: false,
-      multiple: false,
-      active: 'variant-filled',
-      hover: 'hover:variant-ghost',
-      background: 'bg-surface-200-700-token',
-      text: 'text-surface-900 dark:text-surface-50',
-      unstyled: false,
-      by: undefined,
-      display: undefined,
-      textLabel: undefined,
-    });
-  });
-
-  describe('modelValue', () => {
-    test('should update modelValue', async () => {
-      const choice = ref();
-      const wrapper = mount({
-        setup() {
-          return { choice };
-        },
-        template: /*html*/ `
-          <v-listbox class="w-60" v-model="choice">
-            <v-listbox-item data-test="vuetiful" value="vuetiful">Vuetiful</v-listbox-item>
-            <v-listbox-item data-test="is" value="is">Is</v-listbox-item>
-            <v-listbox-item data-test="beautiful" value="beautiful">Beautiful</v-listbox-item>
-          </v-listbox>
-        `,
-        components: {
-          'v-listbox': VListbox,
-          'v-listbox-item': VListboxItem,
-        },
-      });
-
-      const listbox = wrapper.find("[data-test='listbox']");
-      await listbox.find("[data-test='listbox-button']").trigger('click');
-      await listbox.find("[data-test='vuetiful']").trigger('click');
-      expect(choice.value).toBe('vuetiful');
-    });
-  });
-
-  describe('object modelValue', () => {
-    test('should use display prop', async () => {
-      const choice = ref();
-      const wrapper = mount({
-        setup() {
-          return { choice };
-        },
-        template: /*html*/ `
-          <v-listbox class="w-60" v-model="choice" by="id" display="name">
-            <v-listbox-item data-test="vuetiful" :value="{ name: 'vuetiful', id: 0 }">Vuetiful</v-listbox-item>
-            <v-listbox-item data-test="is" :value="{ name: 'is', id: 1 }">Is</v-listbox-item>
-            <v-listbox-item data-test="beautiful" :value="{ name: 'Beautiful', id: 2 }">Beautiful</v-listbox-item>
-          </v-listbox>
-        `,
-        components: {
-          'v-listbox': VListbox,
-          'v-listbox-item': VListboxItem,
-        },
-      });
-
-      const listbox = wrapper.find("[data-test='listbox']");
-      const button = listbox.find("[data-test='listbox-button']");
-      expect(button.text()).toBe('Select an option');
-      await button.trigger('click');
-      await listbox.find("[data-test='vuetiful']").trigger('click');
-
-      expect(choice.value).toEqual({ name: 'vuetiful', id: 0 });
-      expect(button.text()).toBe('vuetiful');
-    });
-  });
-
-  describe('multiple', () => {
-    test('should update modelValue and button text', async () => {
-      const choice = ref([]);
-      const wrapper = mount({
-        setup() {
-          return { choice };
-        },
-        template: /*html*/ `
-          <v-listbox class="w-60" v-model="choice" multiple>
-            <v-listbox-item data-test="vuetiful" value="vuetiful">Vuetiful</v-listbox-item>
-            <v-listbox-item data-test="is" value="is">Is</v-listbox-item>
-            <v-listbox-item data-test="beautiful" value="beautiful">Beautiful</v-listbox-item>
-          </v-listbox>
-        `,
-        components: {
-          'v-listbox': VListbox,
-          'v-listbox-item': VListboxItem,
-        },
-      });
-
-      const listbox = wrapper.find("[data-test='listbox']");
-      const button = listbox.find("[data-test='listbox-button']");
-      expect(button.text()).toBe('Select an option');
-
-      await button.trigger('click');
-      await listbox.find("[data-test='vuetiful']").trigger('click');
-      expect(choice.value).toEqual(['vuetiful']);
-      expect(button.text()).toBe('vuetiful');
-
-      await listbox.find("[data-test='is']").trigger('click');
-      expect(choice.value).toEqual(['vuetiful', 'is']);
-      expect(button.text()).toBe('2 options selected');
-    });
-  });
-
-  describe('unstyled', () => {
-    test('should only have vuetiful- classes', async () => {
-      const wrapper = mount(VListbox, {
-        props: {
-          unstyled: true,
-        },
-      });
-
-      const listbox = wrapper.find("[data-test='listbox']");
-      await listbox.find("[data-test='listbox-button']").trigger('click');
-      const listboxItems = wrapper.find("[data-test='listbox-items']");
-
-      expect(listbox.classes()).toEqual(['vuetiful-listbox']);
-      expect(listboxItems.classes()).toEqual([
-        'z-10',
-        'bg-surface-200-700-token',
-        'text-surface-900',
-        'dark:text-surface-50',
-        'flex-col',
-      ]);
-    });
-  });
-});