@code-coaching/vuetiful 0.25.0 → 0.27.0

package/src/assets/main.css

@@ -1,17 +0,0 @@
-@font-face {
-  font-family: 'myfont';
-  src: url('fonts/myfont.woff');
-}
-
-[class^='icon-'],
-[class*=' icon-'] {
-  font-family: 'myfont' !important;
-}
-
-.icon-heart:before {
-  content: '\e9da';
-}
-
-.global-example {
-  color: red;
-}

package/src/components/VBootstrap.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import { Variant } from '@/types';
-import { PropType } from 'vue';
-
-/**
- * VBoostrap is a component that should not be used directly.
- * It is used to make sure that the variant-classes are bundled with the application.
- * This allows us to use `variant-${variant}` in the template.
- *
- * In the future it might be a good idea to just add .filled, .ringed, etc. as alternatives for .variant-filled, .variant-ringed, etc. and remove this component.
- */
-
-defineProps({
-  variant: {
-    // explicit string union because TypeScript type won't throw error if invalid value is passed
-    type: String as PropType<
-      | ''
-      | 'variant-filled'
-      | 'variant-filled-primary'
-      | 'variant-filled-secondary'
-      | 'variant-filled-tertiary'
-      | 'variant-filled-success'
-      | 'variant-filled-warning'
-      | 'variant-filled-error'
-      | 'variant-filled-surface'
-      | 'variant-ringed'
-      | 'variant-ringed-primary'
-      | 'variant-ringed-secondary'
-      | 'variant-ringed-tertiary'
-      | 'variant-ringed-success'
-      | 'variant-ringed-warning'
-      | 'variant-ringed-error'
-      | 'variant-ringed-surface'
-      | 'variant-ghost'
-      | 'variant-ghost-primary'
-      | 'variant-ghost-secondary'
-      | 'variant-ghost-tertiary'
-      | 'variant-ghost-success'
-      | 'variant-ghost-warning'
-      | 'variant-ghost-error'
-      | 'variant-ghost-surface'
-      | 'variant-soft'
-      | 'variant-soft-primary'
-      | 'variant-soft-secondary'
-      | 'variant-soft-tertiary'
-      | 'variant-soft-success'
-      | 'variant-soft-warning'
-      | 'variant-soft-error'
-      | 'variant-soft-surface'
-      | 'variant-glass'
-      | 'variant-glass-primary'
-      | 'variant-glass-secondary'
-      | 'variant-glass-tertiary'
-      | 'variant-glass-success'
-      | 'variant-glass-warning'
-      | 'variant-glass-error'
-      | 'variant-glass-surface'
-    >,
-    default: Variant.Filled,
-  },
-});
-</script>

package/src/components/atoms/VAvatar.test.ts

@@ -1,175 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VAvatar } from '.';
-
-describe('VAvatar', () => {
-  test('defaults', () => {
-    const wrapper = mount(VAvatar);
-
-    expect(wrapper.classes()).toContain('vuetiful-avatar');
-    expect(wrapper.classes()).toContain('w-16');
-    expect(wrapper.classes()).toContain('rounded-token');
-
-    const avatarText = wrapper.find('.vuetiful-avatar-text');
-    expect(avatarText.exists()).toBe(true);
-    expect(avatarText.text()).toBe('');
-    expect(avatarText.classes()).toEqual(['vuetiful-avatar-text', 'fill-white', 'dark:fill-black']);
-  });
-
-  test('custom variant', () => {
-    const wrapper = mount(VAvatar, {
-      props: {
-        variant: 'ghost',
-      },
-    });
-
-    const avatarText = wrapper.find('.vuetiful-avatar-text');
-    expect(avatarText.classes()).toEqual(['vuetiful-avatar-text', 'fill-black', 'dark:fill-white']);
-  });
-
-  test('variant with hyphen', () => {
-    const wrapper = mount(VAvatar, {
-      props: {
-        variant: 'filled-primary',
-      },
-    });
-
-    expect(wrapper.classes()).toContain('variant-filled-primary');
-  });
-
-  test('initials', () => {
-    const wrapper = mount(VAvatar, {
-      props: {
-        initials: 'JD',
-        variant: 'filled',
-      },
-    });
-
-    expect(wrapper.classes()).toContain('vuetiful-avatar');
-    expect(wrapper.classes()).toContain('w-16');
-    expect(wrapper.classes()).toContain('rounded-token');
-
-    const avatarText = wrapper.find('.vuetiful-avatar-text');
-    expect(avatarText.exists()).toBe(true);
-    expect(avatarText.text()).toBe('JD');
-    expect(avatarText.classes()).toEqual(['vuetiful-avatar-text', 'fill-white', 'dark:fill-black']);
-
-    const avatarImage = wrapper.find('.vuetiful-avatar-image');
-    expect(avatarImage.exists()).toBe(false);
-  });
-
-  test('initials fill', () => {
-    const wrapper = mount(VAvatar, {
-      props: {
-        initials: 'JD',
-        fill: 'custom-fill-class',
-      },
-    });
-
-    expect(wrapper.classes()).toContain('vuetiful-avatar');
-    expect(wrapper.classes()).toContain('w-16');
-    expect(wrapper.classes()).toContain('rounded-token');
-
-    const avatarText = wrapper.find('.vuetiful-avatar-text');
-    expect(avatarText.exists()).toBe(true);
-    expect(avatarText.text()).toBe('JD');
-    expect(avatarText.classes()).toContain('custom-fill-class');
-  });
-
-  test('image', () => {
-    const wrapper = mount(VAvatar, {
-      props: {
-        src: 'https://via.placeholder.com/150',
-      },
-    });
-
-    expect(wrapper.classes()).toContain('vuetiful-avatar');
-    expect(wrapper.classes()).toContain('w-16');
-    expect(wrapper.classes()).toContain('rounded-token');
-
-    const avatarText = wrapper.find('.vuetiful-avatar-text');
-    expect(avatarText.exists()).toBe(false);
-
-    const avatarImage = wrapper.find('.vuetiful-avatar-image');
-    expect(avatarImage.exists()).toBe(true);
-    expect(avatarImage.attributes('src')).toBe('https://via.placeholder.com/150');
-  });
-
-  test('image fallback', async () => {
-    const wrapper = mount(VAvatar, {
-      props: {
-        src: 'https://via.placeholder.com/150',
-        fallback: '/image/john-duck.png',
-      },
-    });
-
-    expect(wrapper.classes()).toContain('vuetiful-avatar');
-    expect(wrapper.classes()).toContain('w-16');
-    expect(wrapper.classes()).toContain('rounded-token');
-
-    const avatarText = wrapper.find('.vuetiful-avatar-text');
-    expect(avatarText.exists()).toBe(false);
-
-    const avatarImage = wrapper.find('.vuetiful-avatar-image');
-    avatarImage.trigger('error');
-    await wrapper.vm.$nextTick();
-
-    expect(avatarImage.exists()).toBe(true);
-    expect(avatarImage.attributes('src')).toBe('/image/john-duck.png');
-  });
-
-  test('size xs', () => {
-    const wrapper = mount(VAvatar, {
-      props: {
-        size: 'xs',
-      },
-    });
-
-    const avatar = wrapper.find("[data-test='avatar']");
-    expect(avatar.attributes('class')).toContain('w-8');
-  });
-
-  test('size sm', () => {
-    const wrapper = mount(VAvatar, {
-      props: {
-        size: 'sm',
-      },
-    });
-
-    const avatar = wrapper.find("[data-test='avatar']");
-    expect(avatar.attributes('class')).toContain('w-12');
-  });
-
-  test('size md', () => {
-    const wrapper = mount(VAvatar, {
-      props: {
-        size: 'md',
-      },
-    });
-
-    const avatar = wrapper.find("[data-test='avatar']");
-    expect(avatar.attributes('class')).toContain('w-16');
-  });
-
-  test('size lg', () => {
-    const wrapper = mount(VAvatar, {
-      props: {
-        size: 'lg',
-      },
-    });
-
-    const avatar = wrapper.find("[data-test='avatar']");
-    expect(avatar.attributes('class')).toContain('w-20');
-  });
-
-  test('size xl', () => {
-    const wrapper = mount(VAvatar, {
-      props: {
-        size: 'xl',
-      },
-    });
-
-    const avatar = wrapper.find("[data-test='avatar']");
-    expect(avatar.attributes('class')).toContain('w-24');
-  });
-});

package/src/components/atoms/VAvatar.vue

@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { CssClasses, useSettings } from '@/index';
-import { sizeProp, unstyledProp, variantProp } from '@/props';
-import { Size } from '@/types';
-import { computed, ref } from 'vue';
-
-const props = defineProps({
-  // Initials
-  initials: { type: String, default: '' },
-  fill: { type: String as () => CssClasses, default: '' },
-  classInitials: { type: String, default: '' },
-
-  // Image
-  src: { type: String, default: '' },
-  alt: { type: String, default: '' },
-  fallback: { type: String, default: '' },
-  classImage: { type: String, default: '' },
-
-  size: sizeProp,
-  variant: variantProp,
-  unstyled: unstyledProp,
-});
-
-const imgSrc = ref(props.src);
-const fillInitials = computed(() => {
-  if (props.fill) return props.fill;
-
-  const variantString = props.variant as string | undefined;
-  const type = variantString?.split('-')[1];
-  if (variantString?.includes('filled')) {
-    if (!type) return 'fill-white dark:fill-black';
-    return 'fill-white';
-  }
-  return 'fill-black dark:fill-white';
-});
-
-const avatarSize = computed(() => {
-  switch (props.size) {
-    case Size.XS:
-      return 'w-8';
-    case Size.SM:
-      return 'w-12';
-    case Size.MD:
-      return 'w-16';
-    case Size.LG:
-      return 'w-20';
-    case Size.XL:
-      return 'w-24';
-  }
-});
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.avatar.unstyled || props.unstyled;
-</script>
-<template>
-  <figure
-    data-test="avatar"
-    :class="`vuetiful-avatar ${
-      isUnstyled
-        ? ''
-        : 'isolate flex aspect-square items-center justify-center overflow-hidden font-semibold rounded-token'
-    } ${avatarSize} variant-${variant}`"
-  >
-    <img
-      :class="`vuetiful-avatar-image ${classImage}`"
-      v-if="src"
-      :src="imgSrc"
-      :alt="alt"
-      @error="() => (imgSrc = fallback)"
-    />
-    <svg
-      v-else
-      :class="`vuetiful-avatar-initials ${isUnstyled ? '' : 'h-full w-full'} ${classInitials}`"
-      viewBox="0 0 512 512"
-    >
-      <text
-        x="50%"
-        y="50%"
-        dominant-baseline="central"
-        text-anchor="middle"
-        font-weight="bold"
-        :font-size="150"
-        :class="`vuetiful-avatar-text ${fillInitials}`"
-      >
-        {{ String(initials).substring(0, 2).toUpperCase() }}
-      </text>
-    </svg>
-  </figure>
-</template>

package/src/components/atoms/VBadge.test.ts

@@ -1,28 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { expect, test } from 'vitest';
-import { VBadge } from '.';
-
-test('VBadge', () => {
-  expect(VBadge).toBeTruthy();
-});
-
-test('VBadge using slot', () => {
-  const wrapper = mount(VBadge, {
-    slots: {
-      default: 'John Duck',
-    },
-  });
-
-  expect(wrapper.text()).toContain('John Duck');
-  expect(wrapper.classes()).toContain('badge');
-});
-
-test('VBadge unstyled', () => {
-  const wrapper = mount(VBadge, {
-    props: {
-      unstyled: true,
-    },
-  });
-
-  expect(wrapper.classes()).not.toContain('badge');
-});

package/src/components/atoms/VBadge.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { unstyledProp, variantProp } from '@/props';
-import { useSettings } from '@/services';
-
-const props = defineProps({
-  variant: variantProp,
-  unstyled: unstyledProp,
-});
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.badge.unstyled || props.unstyled;
-</script>
-<template>
-  <div :class="`vuetiful-badge ${isUnstyled ? '' : 'badge'} variant-${variant}`">
-    <slot />
-  </div>
-</template>

package/src/components/atoms/VButton.test.ts

@@ -1,180 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test, vi } from 'vitest';
-import { VButton } from '.';
-
-test('VButton', () => {
-  expect(VButton).toBeTruthy();
-});
-
-test('VButton using slot', () => {
-  const wrapper = mount(VButton, {
-    slots: {
-      default: 'John Duck',
-    },
-  });
-
-  expect(wrapper.text()).toContain('John Duck');
-});
-
-describe('VButton props', () => {
-  describe('size', () => {
-    test('xs', () => {
-      const wrapper = mount(VButton, {
-        props: {
-          size: 'xs',
-        },
-      });
-      expect(wrapper.classes()).toContain('px-2.5');
-      expect(wrapper.classes()).toContain('py-1.5');
-      expect(wrapper.classes()).toContain('text-xs');
-    });
-
-    test('sm', () => {
-      const wrapper = mount(VButton, {
-        props: {
-          size: 'sm',
-        },
-      });
-      expect(wrapper.classes()).toContain('px-3');
-      expect(wrapper.classes()).toContain('py-2');
-      expect(wrapper.classes()).toContain('text-sm');
-      expect(wrapper.classes()).toContain('leading-4');
-    });
-
-    test('md', () => {
-      const wrapper = mount(VButton, {
-        props: {
-          size: 'md',
-        },
-      });
-      expect(wrapper.classes()).toContain('px-4');
-      expect(wrapper.classes()).toContain('py-2');
-      expect(wrapper.classes()).toContain('text-sm');
-    });
-
-    test('lg', () => {
-      const wrapper = mount(VButton, {
-        props: {
-          size: 'lg',
-        },
-      });
-      expect(wrapper.classes()).toContain('px-4');
-      expect(wrapper.classes()).toContain('py-2');
-      expect(wrapper.classes()).toContain('text-base');
-    });
-
-    test('xl', () => {
-      const wrapper = mount(VButton, {
-        props: {
-          size: 'xl',
-        },
-      });
-      expect(wrapper.classes()).toContain('px-6');
-      expect(wrapper.classes()).toContain('py-3');
-      expect(wrapper.classes()).toContain('text-base');
-    });
-  });
-
-  describe('given icon is true', () => {
-    test('should have btn-icon class, not have btn class', () => {
-      const wrapper = mount(VButton, {
-        props: {
-          icon: true,
-        },
-      });
-      expect(wrapper.classes()).toContain('btn-icon');
-      expect(wrapper.classes()).not.toContain('btn');
-    });
-  });
-  describe('given icon is false', () => {
-    test('should have btn class, not have btn-icon class', () => {
-      const wrapper = mount(VButton, {
-        props: {
-          icon: false,
-        },
-      });
-      expect(wrapper.classes()).not.toContain('btn-icon');
-      expect(wrapper.classes()).toContain('btn');
-    });
-  });
-});
-
-describe('VButton events', () => {
-  describe('given click event', () => {
-    test('should preventDefault and emit click event', async () => {
-      const wrapper = mount(VButton);
-      const clickEvent = { preventDefault: () => {} };
-      const preventDefaultSpy = vi.spyOn(clickEvent, 'preventDefault');
-      wrapper.trigger('click', clickEvent);
-      await wrapper.vm.$nextTick();
-      expect(preventDefaultSpy).toHaveBeenCalled();
-      expect(wrapper.emitted('click')).toBeTruthy();
-    });
-  });
-});
-
-describe('VButton a11y', () => {
-  describe('a11y role', () => {
-    test('should have role button', () => {
-      const wrapper = mount(VButton);
-      expect(wrapper.attributes('role')).toBe('button');
-    });
-  });
-  describe('a11y tabindex', () => {
-    test('should have tabindex 0', () => {
-      const wrapper = mount(VButton);
-      expect(wrapper.attributes('tabindex')).toBe('0');
-    });
-  });
-  describe('given keydown event', () => {
-    describe('given key is Enter', () => {
-      test('should preventDefault and emit click event', async () => {
-        const wrapper = mount(VButton);
-        const keydownEvent = { key: 'Enter', preventDefault: () => {} };
-        const preventDefaultSpy = vi.spyOn(keydownEvent, 'preventDefault');
-        wrapper.trigger('keydown', keydownEvent);
-        await wrapper.vm.$nextTick();
-        expect(preventDefaultSpy).toHaveBeenCalled();
-        expect(wrapper.emitted('click')).toBeTruthy();
-      });
-    });
-
-    describe('given key is Space', () => {
-      test('should preventDefault and not emit click event', async () => {
-        const wrapper = mount(VButton);
-        const keydownEvent = { key: ' ', preventDefault: () => {} };
-        const preventDefaultSpy = vi.spyOn(keydownEvent, 'preventDefault');
-        wrapper.trigger('keydown', keydownEvent);
-        await wrapper.vm.$nextTick();
-        expect(preventDefaultSpy).toHaveBeenCalled();
-        expect(wrapper.emitted('click')).toBeFalsy();
-      });
-    });
-
-    describe('given key is not Enter or Space', () => {
-      test('should not preventDefault and not emit click event', async () => {
-        const wrapper = mount(VButton);
-        const keydownEvent = { key: 'a', preventDefault: () => {} };
-        const preventDefaultSpy = vi.spyOn(keydownEvent, 'preventDefault');
-        wrapper.trigger('keydown', keydownEvent);
-        await wrapper.vm.$nextTick();
-        expect(preventDefaultSpy).not.toHaveBeenCalled();
-        expect(wrapper.emitted('click')).toBeFalsy();
-      });
-    });
-  });
-
-  describe('given keyup event', () => {
-    describe('given key is Space', () => {
-      test('should preventDefault and emit click event', async () => {
-        const wrapper = mount(VButton);
-        const keyupEvent = { key: ' ', preventDefault: () => {} };
-        const preventDefaultSpy = vi.spyOn(keyupEvent, 'preventDefault');
-        wrapper.trigger('keyup', keyupEvent);
-        await wrapper.vm.$nextTick();
-        expect(preventDefaultSpy).toHaveBeenCalled();
-        expect(wrapper.emitted('click')).toBeTruthy();
-      });
-    });
-  });
-});

package/src/components/atoms/VButton.vue

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import { sizeProp, unstyledProp, variantProp } from '@/props';
-import { useSettings } from '@/services';
-import { computed } from 'vue';
-
-const props = defineProps({
-  icon: {
-    type: Boolean as () => boolean,
-    default: false,
-  },
-  tag: {
-    type: String as () => string,
-    default: 'button',
-  },
-
-  size: sizeProp,
-  variant: variantProp,
-  unstyled: unstyledProp,
-});
-const emit = defineEmits<{ (event: 'click'): void }>();
-
-const activate = () => {
-  emit('click');
-};
-
-const clickHandler = (event: MouseEvent) => {
-  event.preventDefault();
-  activate();
-};
-
-const keydownHandler = (event: KeyboardEvent) => {
-  if (['Enter', ' '].includes(event.key)) event.preventDefault();
-  if (event.key === 'Enter') activate();
-};
-
-const keyupHandler = (event: KeyboardEvent) => {
-  if (event.key === ' ') {
-    event.preventDefault();
-    activate();
-  }
-};
-
-const btnSize = computed(() => {
-  switch (props.size) {
-    case 'xs':
-      return 'px-2.5 py-1.5 text-xs';
-    case 'sm':
-      return 'px-3 py-2 text-sm leading-4';
-    case 'md':
-      return 'px-4 py-2 text-sm';
-    case 'lg':
-      return 'px-4 py-2 text-base';
-    case 'xl':
-      return 'px-6 py-3 text-base';
-  }
-});
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.button.unstyled || props.unstyled;
-</script>
-
-<template>
-  <component
-    tabindex="0"
-    role="button"
-    :is="tag"
-    :class="`vuetiful-button ${
-      isUnstyled ? '' : `${icon ? 'btn-icon' : 'btn'} border-token hover:cursor-pointer`
-    } ${btnSize} variant-${variant}`"
-    @click="clickHandler"
-    @keydown="keydownHandler"
-    @keyup="keyupHandler"
-  >
-    <slot />
-  </component>
-</template>

package/src/components/atoms/VChip.test.ts

@@ -1,33 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VChip } from '.';
-
-describe('VChip', () => {
-  test('default slot', () => {
-    const wrapper = mount({
-      template: `<v-chip>John Duck</v-chip>`,
-      components: { VChip },
-    });
-
-    expect(wrapper.text()).toContain('John Duck');
-    expect(wrapper.classes()).toContain('chip');
-  });
-
-  test('unstyled', () => {
-    const wrapper = mount({
-      template: `<v-chip unstyled>John Duck</v-chip>`,
-      components: { VChip },
-    });
-
-    expect(wrapper.classes()).not.toContain('chip');
-  });
-
-  test('variant', () => {
-    const wrapper = mount({
-      template: `<v-chip variant="primary">John Duck</v-chip>`,
-      components: { VChip },
-    });
-
-    expect(wrapper.classes()).toContain('variant-primary');
-  });
-});