@code-coaching/vuetiful 0.26.0 → 0.27.0

package/src/components/molecules/VListbox/VListbox.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { CssClasses, useSettings } from '@/index';
-import { Listbox } from '@headlessui/vue';
-import { computed, provide, ref, watch } from 'vue';
-import VListboxButton from './VListboxButton.vue';
-import VListboxItems from './VListboxItems.vue';
-import VListboxLabel from './VListboxLabel.vue';
-import { unstyledProp } from '@/props';
-
-const emit = defineEmits(['update:modelValue']);
-const props = defineProps({
-  modelValue: Listbox.props['modelValue'],
-
-  by: {
-    type: String,
-  },
-  display: {
-    type: String,
-  },
-
-  textLabel: {
-    type: String,
-  },
-  classLabel: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-
-  textButton: {
-    type: String,
-    default: 'Select an option',
-  },
-  classButton: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-
-  classItem: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-  classItems: {
-    type: String as () => CssClasses,
-    default: '',
-  },
-
-  horizontal: {
-    type: Boolean,
-    default: false,
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-
-  active: {
-    type: String,
-    default: 'variant-filled',
-  },
-  hover: {
-    type: String,
-    default: 'hover:variant-ghost',
-  },
-
-  background: {
-    type: String,
-    default: 'bg-surface-200-700-token',
-  },
-  text: {
-    type: String,
-    default: 'text-surface-900 dark:text-surface-50',
-  },
-
-  unstyled: unstyledProp,
-});
-
-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('background', props.background);
-provide('text', props.text);
-provide('horizontal', props.horizontal);
-provide('unstyled', props.unstyled);
-provide('classItem', props.classItem);
-provide('classItems', props.classItems);
-
-const showText = computed(() => {
-  if (props.display && parentModelValue.value) return parentModelValue.value[props.display];
-
-  const length = parentModelValue.value?.length;
-  if (props.multiple && length === 0) return props.textButton;
-  if (props.multiple && length === 1) return parentModelValue.value[0];
-  if (props.multiple && length > 1) return `${length} options selected`; // TODO: i18n
-
-  if (parentModelValue.value) return parentModelValue.value;
-
-  return props.textButton;
-});
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.listbox.unstyled || props.unstyled;
-</script>
-
-<template>
-  <!-- There is some odd behavior with test coverage, v-model must be the last property in this component -->
-  <Listbox
-    data-test="listbox"
-    as="div"
-    :by="by"
-    :multiple="multiple"
-    :class="`vuetiful-listbox ${isUnstyled ? '' : 'relative rounded-container-token'}`"
-    v-model="parentModelValue"
-  >
-    <v-listbox-label v-if="textLabel" :class="classLabel">{{ textLabel }}</v-listbox-label>
-    <v-listbox-button data-test="listbox-button" :class="`${background} ${text} ${classButton}`">
-      {{ showText }}
-    </v-listbox-button>
-    <!-- TODO: Add configurable transition -->
-    <transition
-      enter-active-class="transition duration-150 ease-in-out"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="transition duration-150 ease-in-out"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <v-listbox-items
-        data-test="listbox-items"
-        :unstyled="unstyled"
-        :class="`${isUnstyled ? '' : 'absolute mt-1 min-w-full'}`"
-      >
-        <slot />
-      </v-listbox-items>
-    </transition>
-  </Listbox>
-</template>

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

@@ -1,66 +0,0 @@
-import { Listbox } from '@headlessui/vue';
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import VListboxButton from './VListboxButton.vue';
-
-describe('VListboxButton props', () => {
-  test('defaults', () => {
-    const wrapper = mount({
-      provide: {
-        unstyled: false,
-      },
-      template: /* html */ `
-        <Listbox>
-          <v-listbox-button data-test="listbox-button">John Duck</v-listbox-button>
-        </Listbox>
-      `,
-      components: {
-        'v-listbox-button': VListboxButton,
-        Listbox: Listbox,
-      },
-    });
-
-    const listboxButton = wrapper.find("[data-test='listbox-button']");
-    expect(listboxButton.element.tagName).toBe('BUTTON');
-  });
-
-  test("custom 'as' prop", () => {
-    const wrapper = mount({
-      provide: {
-        unstyled: false,
-      },
-      template: /* html */ `
-        <Listbox>
-          <v-listbox-button as="div" data-test="listbox-button">John Duck</v-listbox-button>
-        </Listbox>
-      `,
-      components: {
-        'v-listbox-button': VListboxButton,
-        Listbox: Listbox,
-      },
-    });
-
-    const listboxButton = wrapper.find("[data-test='listbox-button']");
-    expect(listboxButton.element.tagName).toBe('DIV');
-  });
-
-  test('should hide icon', () => {
-    const wrapper = mount({
-      provide: {
-        unstyled: false,
-      },
-      template: /* html */ `
-        <Listbox>
-          <v-listbox-button hide-icon data-test="listbox-button">John Duck</v-listbox-button>
-        </Listbox>
-      `,
-      components: {
-        'v-listbox-button': VListboxButton,
-        Listbox: Listbox,
-      },
-    });
-
-    const listboxButton = wrapper.find("[data-test='listbox-button']");
-    expect(listboxButton.find('svg').exists()).toBe(false);
-  });
-});

package/src/components/molecules/VListbox/VListboxButton.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { useSettings } from '@/index';
-import { ListboxButton } from '@headlessui/vue';
-import { inject } from 'vue';
-
-defineProps({
-  as: {
-    type: String,
-    default: 'button',
-  },
-  hideIcon: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const unstyled = inject('unstyled') as boolean;
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.listbox.unstyled || unstyled;
-</script>
-
-<template>
-  <ListboxButton
-    v-slot="{ open }"
-    :as="as"
-    :class="`vuetiful-listbox-button ${
-      isUnstyled ? 'flex' : 'variant-filled btn flex w-full justify-between active:scale-[100%]'
-    }`"
-  >
-    <slot />
-    <span v-if="!hideIcon">
-      <slot v-if="!open" name="open-icon">
-        <!-- https://fontawesome.com/icons/chevron-down?f=classic&s=solid -->
-        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path
-            d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
-          />
-        </svg>
-      </slot>
-      <slot v-if="open" name="close-icon">
-        <!-- https://fontawesome.com/icons/chevron-up?f=classic&s=solid -->
-        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path
-            d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
-          />
-        </svg>
-      </slot>
-    </span>
-  </ListboxButton>
-</template>
-
-<style scoped>
-.icon {
-  @apply my-1 h-4 w-4 fill-current;
-}
-</style>

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

@@ -1,51 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { ref } from 'vue';
-import VListbox from './VListbox.vue';
-import VListboxItem from './VListboxItem.vue';
-
-describe('VListboxItem props', () => {
-  test('defaults', async () => {
-    const listboxValue = ref('John');
-    const wrapper = mount({
-      setup() {
-        return { listboxValue };
-      },
-      template: /* html */ `
-        <v-listbox v-model="listboxValue">
-          <v-listbox-item value="John">John Duck</v-listbox-item>
-          <v-listbox-item value="Jane">Jane Duck</v-listbox-item>
-        </v-listbox>
-      `,
-      components: {
-        'v-listbox': VListbox,
-        'v-listbox-item': VListboxItem,
-      },
-    });
-
-    const listbox = wrapper.find("[data-test='listbox']");
-    await listbox.find('button').trigger('click');
-
-    const listboxItems = listbox.findAll("[data-test='listbox-item']");
-    const selectedItem = listboxItems[0];
-    const normalItem = listboxItems[1];
-    expect(selectedItem.classes()).toEqual([
-      'vuetiful-listbox-item',
-      'px-4',
-      'py-1',
-      'text-base',
-      'rounded-token',
-      'variant-filled',
-      'cursor-pointer',
-    ]);
-    expect(normalItem.classes()).toEqual([
-      'vuetiful-listbox-item',
-      'px-4',
-      'py-1',
-      'text-base',
-      'rounded-token',
-      'hover:variant-ghost',
-      'cursor-pointer',
-    ]);
-  });
-});

package/src/components/molecules/VListbox/VListboxItem.vue

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

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

@@ -1,44 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { expect, test } from 'vitest';
-import VListbox from './VListbox.vue';
-import VListboxItem from './VListboxItem.vue';
-
-test('VListboxItems defaults', async () => {
-  const wrapper = mount({
-    template: /*html*/ `
-      <v-listbox>
-        <v-listbox-item value="John">John Duck</v-listbox-item>
-      </v-listbox>
-    `,
-    components: {
-      'v-listbox': VListbox,
-      'v-listbox-item': VListboxItem,
-    },
-  });
-
-  const listbox = wrapper.find("[data-test='listbox']");
-  await listbox.find('button').trigger('click');
-
-  const listboxItems = listbox.find("[data-test='listbox-items']");
-  expect(listboxItems.classes()).toContain('flex-col');
-});
-
-test('VListboxItems horizontal', async () => {
-  const wrapper = mount({
-    template: /*html*/ `
-      <v-listbox horizontal>
-        <v-listbox-item value="John">John Duck</v-listbox-item>
-      </v-listbox>
-    `,
-    components: {
-      'v-listbox': VListbox,
-      'v-listbox-item': VListboxItem,
-    },
-  });
-
-  const listbox = wrapper.find("[data-test='listbox']");
-  await listbox.find('button').trigger('click');
-
-  const listboxItems = listbox.find("[data-test='listbox-items']");
-  expect(listboxItems.classes()).not.toContain('flex-col');
-});

package/src/components/molecules/VListbox/VListboxItems.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { useSettings } from '@/index';
-import { ListboxOptions } from '@headlessui/vue';
-import { inject } from 'vue';
-
-const props = defineProps({
-  as: {
-    type: String,
-    default: 'ul',
-  },
-  static: {
-    type: Boolean,
-    default: false,
-  },
-
-  unstyled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const background = inject('background') as string;
-const text = inject('text') as string;
-const horizontal = inject('horizontal') as boolean;
-const classItems = inject('classItems') as string;
-
-const { settings } = useSettings();
-const isUnstyled = settings.global.unstyled || settings.components.listbox.unstyled || props.unstyled;
-</script>
-
-<template>
-  <ListboxOptions
-    :as="as"
-    :static="static"
-    :class="`z-10 ${
-      isUnstyled ? '' : `rounded-container-token' gap-1 p-4 border-token border-surface-400-500-token`
-    } ${background} ${text} ${horizontal ? 'flex' : 'flex-col'} ${classItems}`"
-    data-test="listbox-items"
-  >
-    <slot />
-  </ListboxOptions>
-</template>

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

@@ -1,30 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { expect, test } from 'vitest';
-import VListbox from './VListbox.vue';
-
-test('VListboxLabel using slot', () => {
-  const wrapper = mount({
-    template: `
-      <v-listbox></v-listbox>
-    `,
-    components: {
-      'v-listbox': VListbox,
-    },
-  });
-
-  expect(wrapper.text()).toBe('Select an option');
-});
-
-test('VListboxLabel custom label', () => {
-  const wrapper = mount({
-    template: `
-      <v-listbox text-label="John Duck"></v-listbox>
-    `,
-    components: {
-      'v-listbox': VListbox,
-    },
-  });
-
-  const label = wrapper.find('label');
-  expect(label.text()).toBe('John Duck');
-});

package/src/components/molecules/VListbox/VListboxLabel.vue

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

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

@@ -1,73 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, test } from 'vitest';
-import { VPreview } from '.';
-
-test('VPreview', () => {
-  expect(VPreview).toBeTruthy();
-});
-
-describe('VPreview', () => {
-  test('defaults', () => {
-    const wrapper = mount(VPreview);
-
-    expect(wrapper.props()).toEqual({
-      background: 'neutral',
-      hideSwatches: false,
-      regionFooter: '',
-      regionHeader: '',
-      regionPreview: '',
-      regionSource: '',
-      regionViewport: '',
-      hideMobileToggle: false,
-    });
-  });
-
-  describe('given code radio item is selected', () => {
-    test('renders source code', async () => {
-      const wrapper = mount(VPreview, {
-        props: {
-          regionSource: 'source',
-        },
-      });
-
-      expect(wrapper.find("[data-test='previewer-source']").exists()).toBe(false);
-      expect(wrapper.find("[data-test='previewer-preview']").exists()).toBe(true);
-
-      const radioItemCode = wrapper.find("[data-test='radio-item-code']");
-      await radioItemCode.trigger('click');
-
-      expect(wrapper.find("[data-test='previewer-source']").exists()).toBe(true);
-      expect(wrapper.find("[data-test='previewer-preview']").exists()).toBe(false);
-    });
-  });
-
-  describe('given the swatch button is clicked', () => {
-    test('renders swatches', async () => {
-      const wrapper = mount(VPreview);
-
-      expect(wrapper.find("[data-test='swatches']").exists()).toBe(false);
-
-      const swatchButton = wrapper.find("[data-test='swatch-button']");
-      await swatchButton.trigger('click');
-
-      expect(wrapper.find("[data-test='swatches']").exists()).toBe(true);
-    });
-  });
-
-  describe('given the mobile toggle button is clicked', () => {
-    test('renders mobile preview', async () => {
-      const wrapper = mount(VPreview);
-
-      const before = wrapper.find("[data-test='previewer-preview']");
-      expect(before.classes()).not.toContain('mobile-screen');
-      expect(before.classes()).toContain('w-full');
-
-      const radioItemMobile = wrapper.find("[data-test='radio-item-mobile']");
-      await radioItemMobile.trigger('click');
-
-      const after = wrapper.find("[data-test='previewer-preview']");
-      expect(after.classes()).toContain('mobile-screen');
-      expect(after.classes()).not.toContain('w-full');
-    });
-  });
-});