@code-coaching/vuetiful 0.26.0 → 0.27.0

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

@@ -1,55 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import VRadioGroup from './VRadioGroup.vue';
-import VRadioLabel from './VRadioLabel.vue';
-
-test('VRadioLabel using slot', () => {
-  const wrapper = mount({
-    template: `
-      <v-radio-group>
-        <v-radio-label>John Duck</v-radio-label>
-      </v-radio-group>
-    `,
-    components: {
-      'v-radio-label': VRadioLabel,
-      'v-radio-group': VRadioGroup,
-    },
-  });
-
-  expect(wrapper.text()).toContain('John Duck');
-});
-
-describe('VRadioLabel 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': VRadioLabel,
-        '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': VRadioLabel,
-        'v-radio-group': VRadioGroup,
-      },
-    });
-
-    const label = wrapper.find("[data-test='label']");
-    expect(label.element).toBeInstanceOf(HTMLDivElement);
-  });
-});

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

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

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

@@ -1,100 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import VSwitch from './VSwitch.vue';
-
-describe('VSwitch props', () => {
-  test('defaults', () => {
-    const wrapper = mount(VSwitch);
-
-    expect(wrapper.props()).toEqual({
-      modelValue: false,
-      disabled: false,
-      size: 'md',
-      classTrack: 'variant-filled',
-      classThumb: 'bg-surface-100-800-token',
-      as: 'button',
-      name: '',
-      unstyled: false,
-    });
-  });
-
-  test('size xs', () => {
-    const wrapper = mount(VSwitch, {
-      props: {
-        size: 'xs',
-      },
-    });
-
-    const track = wrapper.find("[data-test='switch-track']");
-    expect(track.attributes('class')).toContain('w-8 h-4');
-  });
-
-  test('size sm', () => {
-    const wrapper = mount(VSwitch, {
-      props: {
-        size: 'sm',
-      },
-    });
-
-    const track = wrapper.find("[data-test='switch-track']");
-    expect(track.attributes('class')).toContain('w-12 h-6');
-  });
-
-  test('size md', () => {
-    const wrapper = mount(VSwitch, {
-      props: {
-        size: 'md',
-      },
-    });
-
-    const track = wrapper.find("[data-test='switch-track']");
-    expect(track.attributes('class')).toContain('w-16 h-8');
-  });
-
-  test('size lg', () => {
-    const wrapper = mount(VSwitch, {
-      props: {
-        size: 'lg',
-      },
-    });
-
-    const track = wrapper.find("[data-test='switch-track']");
-    expect(track.attributes('class')).toContain('w-20 h-10');
-  });
-
-  test('size xl', () => {
-    const wrapper = mount(VSwitch, {
-      props: {
-        size: 'xl',
-      },
-    });
-
-    const track = wrapper.find("[data-test='switch-track']");
-    expect(track.attributes('class')).toContain('w-24 h-12');
-  });
-});
-
-describe('VSwitch events', () => {
-  test('update:modelValue', async () => {
-    const wrapper = mount(VSwitch, {
-      props: {
-        modelValue: false,
-      },
-    });
-
-    await wrapper.setProps({ modelValue: true });
-    expect(wrapper.emitted()).toHaveProperty('update:modelValue');
-  });
-});
-
-describe('VSwitch default slot', () => {
-  test('default slot', () => {
-    const wrapper = mount(VSwitch, {
-      slots: {
-        default: 'John Duck',
-      },
-    });
-
-    expect(wrapper.text()).toContain('John Duck');
-  });
-});

package/src/components/atoms/VSwitch/VSwitch.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import { useSettings } from '@/index';
-import { sizeProp, unstyledProp } from '@/props';
-import { Switch } from '@headlessui/vue';
-import { computed, ref, watch } from 'vue';
-
-const emit = defineEmits(['update:modelValue']);
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  classTrack: {
-    type: String,
-    default: 'variant-filled',
-  },
-  classThumb: {
-    type: String,
-    default: 'bg-surface-100-800-token',
-  },
-
-  as: {
-    type: String,
-    default: 'button',
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-
-  size: sizeProp,
-  unstyled: unstyledProp,
-});
-
-const parentModelValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    parentModelValue.value = newValue;
-  },
-);
-watch(
-  () => parentModelValue.value,
-  (newValue) => {
-    emit('update:modelValue', newValue);
-  },
-);
-
-const trackSize = computed(() => {
-  switch (props.size) {
-    case 'xs':
-      return 'w-8 h-4';
-    case 'sm':
-      return 'w-12 h-6';
-    case 'md':
-      return 'w-16 h-8';
-    case 'lg':
-      return 'w-20 h-10';
-    case 'xl':
-      return 'w-24 h-12';
-  }
-});
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.switch.unstyled || props.unstyled;
-</script>
-
-<template>
-  <!-- There is some odd behavior with test coverage, v-model must be the last property in this component -->
-  <Switch
-    data-test="switch"
-    :class="`vuetiful-slide-toggle ${
-      isUnstyled ? '' : `rounded-container-token ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`
-    }`"
-    :name="name"
-    :as="as"
-    v-slot="{ checked }"
-    v-model="parentModelValue"
-  >
-    <div
-      data-test="switch-track"
-      :class="`vuetiful-slide-toggle-track flex ${
-        isUnstyled ? '' : `transition-all duration-[150ms] border-token rounded-token`
-      }
-      ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
-      ${trackSize} ${classTrack}`"
-    >
-      <template v-if="$slots.default">
-        <span class="sr-only"><slot /></span>
-      </template>
-      <div
-        data-test="switch-thumb"
-        :class="`vuetiful-slide-toggle-thumb w-[50%] scale-[0.8] ${
-          isUnstyled ? '' : `bg-opactiy-90 shadow transition-all duration-[150ms] rounded-token `
-        }
-        ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
-        ${checked ? 'translate-x-full' : `${isUnstyled ? '' : 'opacity-90'}`} ${classThumb}`"
-      ></div>
-    </div>
-  </Switch>
-</template>

package/src/components/atoms/VSwitch/VSwitchDescription.test.ts

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

package/src/components/atoms/VSwitch/VSwitchDescription.vue

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

package/src/components/atoms/VSwitch/VSwitchGroup.test.ts

@@ -1,26 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import VSwitchGroup from './VSwitchGroup.vue';
-
-test('VSwitchGroup using slot', () => {
-  const wrapper = mount(VSwitchGroup as any, {
-    slots: {
-      default: 'John Duck',
-    },
-  });
-
-  expect(wrapper.text()).toContain('John Duck');
-});
-
-describe('VSwitchGroup props', () => {
-  test("custom 'as' prop", () => {
-    const wrapper = mount(VSwitchGroup as any, {
-      props: {
-        as: 'div',
-      },
-    });
-
-    const divEl = wrapper.find('div');
-    expect(divEl).not.toBeUndefined();
-  });
-});

package/src/components/atoms/VSwitch/VSwitchGroup.vue

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

package/src/components/atoms/VSwitch/VSwitchLabel.test.ts

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

package/src/components/atoms/VSwitch/VSwitchLabel.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { SwitchLabel } from '@headlessui/vue';
-
-defineProps({
-  as: {
-    type: String,
-    default: 'p',
-  },
-  passive: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-
-<template>
-  <SwitchLabel class="vuetiful-switch-label" :as="as" :passive="passive">
-    <slot />
-  </SwitchLabel>
-</template>

package/src/components/atoms/index.ts

@@ -1,31 +0,0 @@
-import VAvatar from './VAvatar.vue';
-import VBadge from './VBadge.vue';
-import VButton from './VButton.vue';
-import VChip from './VChip.vue';
-import VLightSwitch from './VLightSwitch.vue';
-
-import VRadioDescription from './VRadio/VRadioDescription.vue';
-import VRadioGroup from './VRadio/VRadioGroup.vue';
-import VRadioItem from './VRadio/VRadioItem.vue';
-import VRadioLabel from './VRadio/VRadioLabel.vue';
-
-import VSwitch from './VSwitch/VSwitch.vue';
-import VSwitchDescription from './VSwitch/VSwitchDescription.vue';
-import VSwitchGroup from './VSwitch/VSwitchGroup.vue';
-import VSwitchLabel from './VSwitch/VSwitchLabel.vue';
-
-export {
-  VAvatar,
-  VButton,
-  VBadge,
-  VChip,
-  VLightSwitch,
-  VRadioGroup,
-  VRadioItem,
-  VRadioLabel,
-  VRadioDescription,
-  VSwitchGroup,
-  VSwitchLabel,
-  VSwitchDescription,
-  VSwitch,
-};

package/src/components/index.ts

@@ -1,2 +0,0 @@
-export * from './atoms';
-export * from './molecules';

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

@@ -1,27 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VAccordion } from '..';
-
-describe('VAccordion', () => {
-  test('defaults', async () => {
-    const wrapper = mount({
-      template: /*html*/ `<v-accordion></v-accordion>`,
-      components: {
-        'v-accordion': VAccordion,
-      },
-    });
-
-    expect(wrapper.classes()).toEqual(['vuetiful-accordion', 'flex', 'w-full', 'flex-col', 'gap-1']);
-  });
-
-  test('unstyled', async () => {
-    const wrapper = mount({
-      template: /*html*/ `<v-accordion unstyled></v-accordion>`,
-      components: {
-        'v-accordion': VAccordion,
-      },
-    });
-
-    expect(wrapper.classes()).toEqual(['vuetiful-accordion']);
-  });
-});

package/src/components/molecules/VAccordion/VAccordion.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { useSettings } from '@/services';
-import { provide } from 'vue';
-
-const props = defineProps({
-  classQuestion: {
-    type: String,
-    default: 'bg-surface-200-700-token hover:variant-soft',
-  },
-  classAnswer: {
-    type: String,
-    default: 'bg-surface-200-700-token',
-  },
-
-  unstyled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-provide('classQuestion', props.classQuestion);
-provide('classAnswer', props.classAnswer);
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.accordion.unstyled || props.unstyled;
-</script>
-
-<template>
-  <div :class="`vuetiful-accordion ${isUnstyled ? '' : 'flex w-full flex-col gap-1'}`">
-    <slot></slot>
-  </div>
-</template>