@code-coaching/vuetiful 0.26.0 → 0.27.0

package/src/components/atoms/VChip.vue

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

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

@@ -1,69 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test, vi } from 'vitest';
-import { ref } from 'vue';
-import { VLightSwitch } from '.';
-
-const applyMode = vi.fn();
-const chosenMode = ref('dark');
-const MODE = {
-  LIGHT: 'light',
-  DARK: 'dark',
-};
-vi.mock('../../services/dark-mode.service', () => ({
-  useDarkMode: () => ({
-    applyMode,
-    chosenMode,
-    MODE,
-  }),
-}));
-
-describe('VLightSwitch', () => {
-  test('toggle dark to light', async () => {
-    const wrapper = mount(VLightSwitch);
-    await wrapper.trigger('click');
-    expect(applyMode).toHaveBeenCalledWith(MODE.LIGHT);
-  });
-
-  test('toggle light to dark', async () => {
-    chosenMode.value = 'light';
-    const wrapper = mount(VLightSwitch);
-    await wrapper.trigger('click');
-    expect(applyMode).toHaveBeenCalledWith(MODE.DARK);
-  });
-
-  test('svg dark/light', async () => {
-    chosenMode.value = MODE.DARK;
-    const wrapper = mount(VLightSwitch);
-    const path = wrapper.find('path');
-    expect(path.attributes().d).toBe(wrapper.vm.svgPath.moon);
-
-    chosenMode.value = MODE.LIGHT;
-    await wrapper.vm.$nextTick();
-    expect(path.attributes().d).toBe(wrapper.vm.svgPath.sun);
-  });
-
-  test('keydown Enter', async () => {
-    const wrapper = mount(VLightSwitch);
-    const preventDefaultSpy = vi.fn();
-    const event = { code: 'Enter', preventDefault: preventDefaultSpy };
-    await wrapper.trigger('keydown', event);
-    expect(applyMode).toHaveBeenCalledWith(MODE.LIGHT);
-    expect(preventDefaultSpy).toHaveBeenCalled();
-  });
-
-  test('keydown Space', async () => {
-    const wrapper = mount(VLightSwitch);
-    const preventDefaultSpy = vi.fn();
-    const event = { code: 'Space', preventDefault: preventDefaultSpy };
-    await wrapper.trigger('keydown', event);
-    expect(applyMode).toHaveBeenCalledWith(MODE.LIGHT);
-    expect(preventDefaultSpy).toHaveBeenCalled();
-  });
-
-  test('keydown other', async () => {
-    applyMode.mockClear();
-    const wrapper = mount(VLightSwitch);
-    await wrapper.trigger('keydown', { key: 'a' });
-    expect(applyMode).not.toHaveBeenCalled();
-  });
-});

package/src/components/atoms/VLightSwitch.vue

@@ -1,121 +0,0 @@
-<template>
-  <div
-    :class="`lightswitch-track ${classesTrack}`"
-    @click="onToggleHandler"
-    @keydown="onKeyDown"
-    role="switch"
-    aria-label="Light Switch"
-    :aria-checked="chosenMode === MODE.LIGHT"
-    :title="`Toggle ${chosenMode === MODE.DARK ? 'Dark' : 'Light'} Mode`"
-    tabindex="0"
-  >
-    <div :class="`lightswitch-thumb ${classesThumb}`">
-      <svg
-        :class="`lightswitch-icon ${classesIcon} ${iconFill}`"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 512 512"
-      >
-        <path fill="currentColor" :d="chosenMode === MODE.LIGHT  ? svgPath.sun : svgPath.moon" />
-      </svg>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { CssClasses, useDarkMode } from '@/index';
-import { ComputedRef, computed, defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    bgLight: {
-      type: String as () => CssClasses,
-      default: 'bg-surface-50',
-    },
-    bgDark: {
-      type: String as () => CssClasses,
-      default: 'bg-surface-900',
-    },
-    textLight: {
-      type: String as () => CssClasses,
-      default: 'text-surface-50',
-    },
-    textDark: {
-      type: String as () => CssClasses,
-      default: 'text-surface-900',
-    },
-    width: {
-      type: String as () => CssClasses,
-      default: 'w-12',
-    },
-    height: {
-      type: String as () => CssClasses,
-      default: 'h-6',
-    },
-    ring: {
-      type: String as () => CssClasses,
-      default: 'ring-[1px] ring-surface-500/30',
-    },
-    rounded: {
-      type: String as () => CssClasses,
-      default: 'rounded-token',
-    },
-  },
-  setup(props, { attrs }) {
-    const { applyMode, chosenMode, MODE } = useDarkMode();
-
-    const cTransition = `transition-all duration-[200ms]`;
-    const cTrack = 'cursor-pointer';
-    const cThumb = 'aspect-square scale-[0.8] flex justify-center items-center';
-    const cIcon = 'w-[70%] aspect-square';
-
-    const svgPath = {
-      sun: 'M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z',
-      moon: 'M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z',
-    };
-
-    const onToggleHandler = () => {
-      const toggle = chosenMode.value === MODE.LIGHT ? MODE.DARK : MODE.LIGHT;
-      applyMode(toggle);
-    };
-
-    type OnKeyDownEvent = KeyboardEvent & {
-      currentTarget: EventTarget & HTMLDivElement;
-    };
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (['Enter', 'Space'].includes(event.code)) {
-        event.preventDefault();
-        (event as OnKeyDownEvent).currentTarget.click();
-      }
-    };
-
-    const trackBg = computed(() => (chosenMode.value === MODE.LIGHT ? props.bgLight : props.bgDark));
-    const thumbBg = computed(() => (chosenMode.value === MODE.LIGHT ? props.bgDark : props.bgLight));
-    const thumbPosition = computed(() => (chosenMode.value === MODE.LIGHT ? 'translate-x-[100%]' : ''));
-    const iconFill = computed(() => {
-      return chosenMode.value === MODE.LIGHT ? props.textLight : props.textDark;
-    });
-
-    const classesTrack: ComputedRef<string> = computed(() => {
-      return `${cTrack} ${cTransition} ${props.width} ${props.height} ${props.ring} ${props.rounded} ${trackBg.value} ${
-        attrs.class ?? ''
-      }`;
-    });
-    const classesThumb: ComputedRef<string> = computed(
-      () => `${cThumb} ${cTransition} ${props.height} ${props.rounded} ${thumbBg.value} ${thumbPosition.value}`,
-    );
-    const classesIcon: ComputedRef<string> = computed(() => `${cIcon}`);
-
-    return {
-      classesTrack,
-      classesThumb,
-      classesIcon,
-      svgPath,
-      onToggleHandler,
-      onKeyDown,
-      chosenMode,
-      iconFill,
-      MODE,
-    };
-  },
-});
-</script>

package/src/components/atoms/VRadio/VRadioDescription.test.ts

@@ -1,55 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import VRadioGroup from './VRadioGroup.vue';
-import VRadioDescription from './VRadioDescription.vue';
-
-test('VRadioDescription using slot', () => {
-  const wrapper = mount({
-    template: `
-      <v-radio-group>
-        <v-radio-description>John Duck</v-radio-description>
-      </v-radio-group>
-    `,
-    components: {
-      'v-radio-description': VRadioDescription,
-      'v-radio-group': VRadioGroup,
-    },
-  });
-
-  expect(wrapper.text()).toContain('John Duck');
-});
-
-describe('VRadioDescription props', () => {
-  test("default 'as' prop", () => {
-    const wrapper = mount({
-      template: `
-        <v-radio-group>
-          <v-radio-label data-test="label">John Duck</v-radio-label>
-        </v-radio-group>
-      `,
-      components: {
-        'v-radio-label': VRadioDescription,
-        'v-radio-group': VRadioGroup,
-      },
-    });
-
-    const label = wrapper.find("[data-test='label']");
-    expect(label.element).toBeInstanceOf(HTMLParagraphElement);
-  });
-  test("custom 'as' prop", () => {
-    const wrapper = mount({
-      template: `
-        <v-radio-group>
-          <v-radio-label as="div" data-test="label">John Duck</v-radio-label>
-        </v-radio-group>
-      `,
-      components: {
-        'v-radio-label': VRadioDescription,
-        'v-radio-group': VRadioGroup,
-      },
-    });
-
-    const label = wrapper.find("[data-test='label']");
-    expect(label.element).toBeInstanceOf(HTMLDivElement);
-  });
-});

package/src/components/atoms/VRadio/VRadioDescription.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { RadioGroupDescription } from '@headlessui/vue';
-
-defineProps({
-  as: {
-    type: String,
-    default: 'p',
-  },
-});
-</script>
-
-<template>
-  <RadioGroupDescription :as="as" class="vuetiful-radio-group-description"><slot /></RadioGroupDescription>
-</template>

package/src/components/atoms/VRadio/VRadioGroup.test.ts

@@ -1,81 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import VRadioGroup from './VRadioGroup.vue';
-
-test('VRadioGroup using slot', () => {
-  const wrapper = mount(VRadioGroup, {
-    slots: {
-      default: 'John Duck',
-    },
-  });
-
-  expect(wrapper.text()).toContain('John Duck');
-});
-
-test('VRadioGroup default props', () => {
-  const wrapper = mount(VRadioGroup);
-  const radioGroupEl = wrapper.find('div');
-  expect(radioGroupEl.classes()).toEqual([
-    'vuetiful-radio-group',
-    'inline-flex',
-    'gap-1',
-    'p-1',
-    'border-token',
-    'border-surface-400-500-token',
-    'rounded-container-token',
-    'bg-surface-200-700-token',
-    'text-surface-900',
-    'dark:text-surface-50',
-  ]);
-
-  const radioGroup = wrapper.find("[data-test='radio-group']");
-  expect(radioGroup.element.tagName).toBe('DIV');
-});
-
-test('VRadioGroup custom class props', () => {
-  const wrapper = mount(VRadioGroup, {
-    props: {
-      background: 'custom-background-class',
-      text: 'custom-text-class',
-    },
-  });
-  const radioGroupEl = wrapper.find('div');
-  expect(radioGroupEl.classes()).toEqual([
-    'vuetiful-radio-group',
-    'inline-flex',
-    'gap-1',
-    'p-1',
-    'border-token',
-    'border-surface-400-500-token',
-    'rounded-container-token',
-    'custom-background-class',
-    'custom-text-class',
-  ]);
-});
-
-test("VRadioGroup custom 'as' prop", () => {
-  const wrapper = mount(VRadioGroup, {
-    props: {
-      as: 'span',
-    },
-  });
-
-  const radioGroup = wrapper.find("[data-test='radio-group']");
-  expect(radioGroup.element.tagName).toBe('SPAN');
-});
-
-describe('VRadioGroup v-model', () => {
-  describe('given value changes', () => {
-    test('should emit update:modelValue', async () => {
-      const wrapper = mount(VRadioGroup, {
-        props: {
-          modelValue: 'John Duck',
-        },
-      });
-
-      wrapper.setProps({ modelValue: 'Jane Duck' });
-      await wrapper.vm.$nextTick();
-      expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['Jane Duck']);
-    });
-  });
-});

package/src/components/atoms/VRadio/VRadioGroup.vue

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { useSettings } from '@/index';
-import { RadioGroup } from '@headlessui/vue';
-import { provide, ref, watch } from 'vue';
-
-const emit = defineEmits(['update:modelValue']);
-const props = defineProps({
-  as: {
-    type: String,
-    default: 'div',
-  },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  by: {
-    type: [String, Function],
-  },
-
-  modelValue: RadioGroup.props['modelValue'],
-
-  active: {
-    type: String,
-    default: 'variant-filled',
-  },
-  hover: {
-    type: String,
-    default: 'hover:variant-ghost hover:text-surface-900 dark:hover:text-surface-50',
-  },
-
-  background: {
-    type: String,
-    default: 'bg-surface-200-700-token',
-  },
-  text: {
-    type: String,
-    default: 'text-surface-900 dark:text-surface-50',
-  },
-
-  classItem: {
-    type: String,
-    default: '',
-  },
-
-  unstyled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const parentModelValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    parentModelValue.value = newValue;
-  },
-);
-watch(
-  () => parentModelValue.value,
-  (newValue) => {
-    emit('update:modelValue', newValue);
-  },
-);
-
-provide('active', props.active);
-provide('hover', props.hover);
-provide('classItem', props.classItem);
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.radioGroup.unstyled || props.unstyled;
-</script>
-l
-<template>
-  <!-- There is some odd behavior with test coverage, v-model must be the last property in this component -->
-  <radio-group
-    data-test="radio-group"
-    :as="as"
-    :disabled="disabled"
-    :by="by"
-    :class="`vuetiful-radio-group inline-flex ${
-      isUnstyled ? '' : `gap-1 p-1 border-token border-surface-400-500-token rounded-container-token`
-    } ${background} ${text}`"
-    v-model="parentModelValue"
-  >
-    <slot></slot>
-  </radio-group>
-</template>

package/src/components/atoms/VRadio/VRadioItem.test.ts

@@ -1,183 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { ref } from 'vue';
-import VRadioGroup from './VRadioGroup.vue';
-import VRadioItem from './VRadioItem.vue';
-
-test('VRadioItem using slot', () => {
-  const wrapper = mount({
-    template: `
-      <v-radio-group>
-        <v-radio-item data-test="item" value="'John Duck'">John Duck</v-radio-item>
-      </v-radio-group>
-    `,
-    components: {
-      'v-radio-item': VRadioItem,
-      'v-radio-group': VRadioGroup,
-    },
-  });
-
-  const itemEl = wrapper.find("[data-test='item']").element;
-  expect(itemEl.textContent).toBe('John Duck');
-});
-
-describe('VRadioItem slot states', () => {
-  describe('given no injected provide', () => {
-    test('should have the default active class', () => {
-      const wrapper = mount({
-        setup() {
-          const value = ref('John Duck');
-          return { value };
-        },
-        template: `
-          <v-radio-group v-model="value">
-            <v-radio-item data-test="item" :value="'John Duck'">John Duck</v-radio-item>
-          </v-radio-group>
-        `,
-        components: {
-          'v-radio-item': VRadioItem,
-          'v-radio-group': VRadioGroup,
-        },
-      });
-
-      const itemEl = wrapper.find("[data-test='item']").find('div');
-      expect(itemEl.element.classList.contains('variant-filled')).toBe(true);
-      expect(itemEl.element.classList.contains('hover:variant-ghost')).toBe(false);
-    });
-
-    test('should have the default hover class', () => {
-      const wrapper = mount({
-        setup() {
-          const value = ref('not John Duck');
-          return { value };
-        },
-        template: `
-          <v-radio-group v-model="value">
-            <v-radio-item data-test="item" :value="'John Duck'">John Duck</v-radio-item>
-          </v-radio-group>
-        `,
-        components: {
-          'v-radio-item': VRadioItem,
-          'v-radio-group': VRadioGroup,
-        },
-      });
-
-      const itemEl = wrapper.find("[data-test='item']").find('div');
-      expect(itemEl.element.classList.contains('variant-filled')).toBe(false);
-      expect(itemEl.element.classList.contains('hover:variant-ghost')).toBe(true);
-    });
-  });
-  describe('given v-slot checked is true', () => {
-    test('should have the active class', () => {
-      const wrapper = mount({
-        setup() {
-          const value = ref('John Duck');
-          return { value };
-        },
-        template: `
-          <v-radio-group hover="custom-hover-class" active="custom-active-class" v-model="value">
-            <v-radio-item data-test="item" :value="'John Duck'">John Duck</v-radio-item>
-          </v-radio-group>
-        `,
-        components: {
-          'v-radio-item': VRadioItem,
-          'v-radio-group': VRadioGroup,
-        },
-        provide: {
-          active: 'custom-active-class',
-          hover: 'custom-hover-class',
-        },
-      });
-
-      const itemEl = wrapper.find("[data-test='item']").find('div');
-      expect(itemEl.element.classList.contains('custom-active-class')).toBe(true);
-      expect(itemEl.element.classList.contains('custom-hover-class')).toBe(false);
-    });
-  });
-
-  describe('given v-slot checked is false', () => {
-    test('should have the hover class', () => {
-      const wrapper = mount({
-        setup() {
-          const value = ref('not John Duck');
-          return { value };
-        },
-        template: `
-          <v-radio-group hover="custom-hover-class" active="custom-active-class" v-model="value">
-            <v-radio-item data-test="item" :value="'John Duck'">John Duck</v-radio-item>
-          </v-radio-group>
-        `,
-        components: {
-          'v-radio-item': VRadioItem,
-          'v-radio-group': VRadioGroup,
-        },
-        provide: {
-          active: 'custom-active-class',
-          hover: 'custom-hover-class',
-        },
-      });
-
-      const itemEl = wrapper.find("[data-test='item']").find('div');
-      expect(itemEl.element.classList.contains('custom-active-class')).toBe(false);
-      expect(itemEl.element.classList.contains('custom-hover-class')).toBe(true);
-    });
-  });
-
-  describe('given v-slot disabled is false', () => {
-    test('should not have the disabled classes', () => {
-      const wrapper = mount({
-        setup() {
-          const value = ref('John Duck');
-          return { value };
-        },
-        template: `
-          <v-radio-group hover="custom-hover-class" active="custom-active-class" v-model="value">
-            <v-radio-item data-test="item" :value="'not John Duck'">John Duck</v-radio-item>
-          </v-radio-group>
-        `,
-        components: {
-          'v-radio-item': VRadioItem,
-          'v-radio-group': VRadioGroup,
-        },
-        provide: {
-          active: 'custom-active-class',
-          hover: 'custom-hover-class',
-        },
-      });
-
-      const itemEl = wrapper.find("[data-test='item']").find('div');
-      expect(itemEl.element.classList.contains('cursor-pointer')).toBe(true);
-      expect(itemEl.element.classList.contains('cursor-not-allowed')).toBe(false);
-      expect(itemEl.element.classList.contains('opacity-50')).toBe(false);
-    });
-  });
-
-  describe('given v-slot disabled is true', () => {
-    test('should have the disabled classes', () => {
-      const wrapper = mount({
-        setup() {
-          const value = ref('John Duck');
-          return { value };
-        },
-        template: `
-          <v-radio-group hover="custom-hover-class" active="custom-active-class" v-model="value">
-            <v-radio-item disabled data-test="item" :value="'not John Duck'">John Duck</v-radio-item>
-          </v-radio-group>
-        `,
-        components: {
-          'v-radio-item': VRadioItem,
-          'v-radio-group': VRadioGroup,
-        },
-        provide: {
-          active: 'custom-active-class',
-          hover: 'custom-hover-class',
-        },
-      });
-
-      const itemEl = wrapper.find("[data-test='item']").find('div');
-      expect(itemEl.element.classList.contains('cursor-pointer')).toBe(false);
-      expect(itemEl.element.classList.contains('cursor-not-allowed')).toBe(true);
-      expect(itemEl.element.classList.contains('opacity-50')).toBe(true);
-    });
-  });
-});

package/src/components/atoms/VRadio/VRadioItem.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { useSettings } from '@/index';
-import { RadioGroupOption } from '@headlessui/vue';
-import { inject } from 'vue';
-
-const props = defineProps({
-  value: {
-    type: [String, Number, Boolean, Object],
-    required: true,
-  },
-  unstyled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const active = inject('active') as string;
-const hover = inject('hover') as string;
-const classItem = inject('classItem') as string;
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.radioItem.unstyled || props.unstyled;
-</script>
-
-<template>
-  <RadioGroupOption v-slot="{ checked, disabled }" :value="value">
-    <div
-      data-test="radio-item"
-      :class="`vuetiful-radio-item ${isUnstyled ? '' : `px-4 py-1 text-center text-base rounded-token`} ${
-        checked ? active : hover
-      } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${classItem}`"
-    >
-      <slot />
-    </div>
-  </RadioGroupOption>
-</template>