@code-coaching/vuetiful 0.22.0 → 0.23.0

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

@@ -1,12 +1,16 @@
 <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,
   },
@@ -14,20 +18,32 @@ const props = defineProps({
     type: String,
   },
 
-  labelText: {
+  textLabel: {
     type: String,
   },
-  labelClasses: {
-    type: Boolean,
-    default: false,
+  classLabel: {
+    type: String as () => CssClasses,
+    default: "",
   },
 
-  buttonText: {
+  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: "",
+  },
 
-  modelValue: Listbox.props["modelValue"],
   horizontal: {
     type: Boolean,
     default: false,
@@ -43,7 +59,7 @@ const props = defineProps({
   },
   hover: {
     type: String,
-    default: "variant-ghost",
+    default: "hover:variant-ghost",
   },
 
   background: {
@@ -54,6 +70,8 @@ const props = defineProps({
     type: String,
     default: "text-surface-900 dark:text-surface-50",
   },
+
+  unstyled: unstyledProp,
 });
 
 const parentModelValue = ref(props.modelValue);
@@ -75,33 +93,40 @@ 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.buttonText;
+  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.buttonText;
+  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 coverge, v-model must be the last property in this component -->
+  <!-- There is some odd behavior with test coverage, v-model must be the last property in this component -->
   <Listbox
-    data-test="v-listbox"
+    data-test="listbox"
     as="div"
     :by="by"
     :multiple="multiple"
-    class="vuetiful-listbox relative rounded-container-token"
+    :class="`vuetiful-listbox ${isUnstyled ? '' : 'relative rounded-container-token'}`"
     v-model="parentModelValue"
   >
-    <v-listbox-label v-if="labelText" :class="labelClasses">{{ labelText }}</v-listbox-label>
-    <v-listbox-button data-test="v-listbox-button" :class="`${background} ${text}`">
+    <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 -->
@@ -113,7 +138,11 @@ const showText = computed(() => {
       leave-from-class="opacity-100"
       leave-to-class="opacity-0"
     >
-      <v-listbox-items class="absolute mt-1 min-w-full">
+      <v-listbox-items
+        data-test="listbox-items"
+        :unstyled="unstyled"
+        :class="`${isUnstyled ? '' : 'absolute mt-1 min-w-full'}`"
+      >
         <slot />
       </v-listbox-items>
     </transition>

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

@@ -6,9 +6,12 @@ import VListboxButton from "./VListboxButton.vue";
 describe("VListboxButton props", () => {
   test("defaults", () => {
     const wrapper = mount({
+      provide: {
+        unstyled: false,
+      },
       template: /* html */ `
         <Listbox>
-          <v-listbox-button data-test="v-listbox-button">John Duck</v-listbox-button>
+          <v-listbox-button data-test="listbox-button">John Duck</v-listbox-button>
         </Listbox>
       `,
       components: {
@@ -17,15 +20,18 @@ describe("VListboxButton props", () => {
       },
     });
 
-    const listboxButton = wrapper.find("[data-test='v-listbox-button']");
+    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="v-listbox-button">John Duck</v-listbox-button>
+          <v-listbox-button as="div" data-test="listbox-button">John Duck</v-listbox-button>
         </Listbox>
       `,
       components: {
@@ -34,15 +40,18 @@ describe("VListboxButton props", () => {
       },
     });
 
-    const listboxButton = wrapper.find("[data-test='v-listbox-button']");
+    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="v-listbox-button">John Duck</v-listbox-button>
+          <v-listbox-button hide-icon data-test="listbox-button">John Duck</v-listbox-button>
         </Listbox>
       `,
       components: {
@@ -51,7 +60,7 @@ describe("VListboxButton props", () => {
       },
     });
 
-    const listboxButton = wrapper.find("[data-test='v-listbox-button']");
+    const listboxButton = wrapper.find("[data-test='listbox-button']");
     expect(listboxButton.find("svg").exists()).toBe(false);
   });
 });

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { useSettings } from "@/index";
 import { ListboxButton } from "@headlessui/vue";
+import { inject } from "vue";
 
 defineProps({
   as: {
@@ -11,13 +13,20 @@ defineProps({
     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="variant-filled btn flex w-full justify-between active:scale-[100%]"
+    :class="`vuetiful-listbox-button ${
+      isUnstyled ? 'flex' : 'variant-filled btn flex w-full justify-between active:scale-[100%]'
+    }`"
   >
     <slot />
     <span v-if="!hideIcon">

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

@@ -23,10 +23,10 @@ describe("VListboxItem props", () => {
       },
     });
 
-    const listbox = wrapper.find("[data-test='v-listbox']");
+    const listbox = wrapper.find("[data-test='listbox']");
     await listbox.find("button").trigger("click");
 
-    const listboxItems = listbox.findAll("[data-test='v-listbox-item']");
+    const listboxItems = listbox.findAll("[data-test='listbox-item']");
     const selectedItem = listboxItems[0];
     const normalItem = listboxItems[1];
     expect(selectedItem.classes()).toEqual([

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

@@ -1,27 +1,38 @@
 <script setup lang="ts">
+import { useSettings } from "@/services";
 import { ListboxOption } from "@headlessui/vue";
 import { inject } from "vue";
 
-defineProps({
+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="v-listbox-item"
-      :class="`vuetiful-listbox-item px-4 py-1 text-base rounded-token ${
-        selected ? activeClass : `hover:${hoverClass}`
-      } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${
-        active && !selected ? hoverClass : ''
-      }`"
+      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>

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

@@ -16,7 +16,7 @@ test("VListboxItems defaults", async () => {
     },
   });
 
-  const listbox = wrapper.find("[data-test='v-listbox']");
+  const listbox = wrapper.find("[data-test='listbox']");
   await listbox.find("button").trigger("click");
 
   const listboxItems = listbox.find("[data-test='listbox-items']");
@@ -36,7 +36,7 @@ test("VListboxItems horizontal", async () => {
     },
   });
 
-  const listbox = wrapper.find("[data-test='v-listbox']");
+  const listbox = wrapper.find("[data-test='listbox']");
   await listbox.find("button").trigger("click");
 
   const listboxItems = listbox.find("[data-test='listbox-items']");

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { useSettings } from "@/index";
 import { ListboxOptions } from "@headlessui/vue";
 import { inject } from "vue";
 
-defineProps({
+const props = defineProps({
   as: {
     type: String,
     default: "ul",
@@ -11,21 +12,33 @@ defineProps({
     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="`p-4 border-token border-surface-400-500-token rounded-container-token ${background} ${text}`"
+    :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"
   >
-    <div data-test="listbox-items" :class="`flex ${horizontal ? 'flex' : 'flex-col'} gap-1`">
-      <slot />
-    </div>
+    <slot />
   </ListboxOptions>
 </template>

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

@@ -1,6 +1,5 @@
 import { mount } from "@vue/test-utils";
 import { expect, test } from "vitest";
-import { ref } from "vue";
 import VListbox from "./VListbox.vue";
 
 test("VListboxLabel using slot", () => {
@@ -19,7 +18,7 @@ test("VListboxLabel using slot", () => {
 test("VListboxLabel custom label", () => {
   const wrapper = mount({
     template: `
-      <v-listbox label-text="John Duck"></v-listbox>
+      <v-listbox text-label="John Duck"></v-listbox>
     `,
     components: {
       "v-listbox": VListbox,

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

@@ -10,5 +10,5 @@ defineProps({
 </script>
 
 <template>
-  <ListboxLabel :as="as"><slot /></ListboxLabel>
+  <ListboxLabel class="vuetiful-listbox-label" :as="as"><slot /></ListboxLabel>
 </template>

package/src/components/molecules/VPreview.vue

@@ -135,9 +135,13 @@ const toggleSwatches = () => (swatches.value = !swatches.value);
       <v-button
         v-if="!hideSwatches"
         data-test="swatch-button"
-        :class="`${
-          swatches ? 'variant-filled' : 'variant-ghost'
-        } px-4 py-1 border-token border-surface-400-500-token`"
+        :variant="swatches ? 'filled' : ''"
+        class="px-4 py-1 border-token border-surface-400-500-token"
+        :class="
+          swatches
+            ? ''
+            : 'text-center text-base rounded-token hover:variant-ghost hover:text-surface-900 dark:hover:text-surface-50'
+        "
         @click="toggleSwatches"
         title="Backgrounds"
       >
@@ -152,7 +156,7 @@ const toggleSwatches = () => (swatches.value = !swatches.value);
       </v-button>
     </header>
 
-    <!-- There is some odd behavior with test coverge, v-model must be the last property in this component -->
+    <!-- There is some odd behavior with test coverage, v-model must be the last property in this component -->
     <v-radio-group
       v-if="swatches"
       data-test="swatches"
@@ -216,7 +220,7 @@ const toggleSwatches = () => (swatches.value = !swatches.value);
     <template v-if="tabView === 'code'">
       <div
         data-test="previewer-source"
-        :class="`vuetiful-previewer-source p-4 ${backgrounds['neutral']} ${regionSource}`"
+        :class="`vuetiful-previewer-source p-4 md:p-10 ${backgrounds['neutral']} ${regionSource}`"
       >
         <slot name="source">(source)</slot>
       </div>

package/src/components/molecules/{VRail.test.ts → VRail/VRail.test.ts}

@@ -1,6 +1,6 @@
+import { VRail } from "@/index";
 import { mount } from "@vue/test-utils";
 import { expect, test } from "vitest";
-import { VRail } from ".";
 
 test("VRail", () => {
   expect(VRail).toBeTruthy();

package/src/components/molecules/{VRail.vue → VRail/VRail.vue}

@@ -16,17 +16,17 @@ const props = defineProps({
   },
 });
 
-provide("active", props.active);
-provide("hover", props.hover);
+provide("activeRail", props.active);
+provide("hoverRail", props.hover);
 </script>
 
 <template>
   <v-radio-group
-    unstyled
-    :active="active"
-    :hover="hover"
     v-model="selectedRailTile"
-    class="vuetiful-rail flex h-full w-[70px] flex-col overflow-y-auto sm:w-20"
+    unstyled
+    hover=""
+    active=""
+    class="flex h-full w-[70px] flex-col overflow-y-auto"
   >
     <slot />
   </v-radio-group>

package/src/components/molecules/VRail/VRailTile.test.ts

@@ -0,0 +1,99 @@
+import { mount } from "@vue/test-utils";
+import { expect, test, describe } from "vitest";
+import { VRadioGroup, VRail, VRailTile, useRail } from "@/index";
+
+
+describe("VRailTile", () => {
+  // TODO: add tests
+  test("default slot", () => {
+    const wrapper = mount({
+      provide: {
+        activeRail: null,
+        hoverRail: null,
+      },
+      template: /*html*/`
+        <v-radio-group>
+          <v-rail-tile>John Duck</v-rail-tile>
+        </v-radio-group>
+      `,
+      components: {
+        "v-rail-tile": VRailTile,
+        "v-radio-group": VRadioGroup,
+      },
+    });
+  
+    expect(wrapper).toBeTruthy();
+  });
+
+  test("label prop", () => {
+    const wrapper = mount({
+      provide: {
+        activeRail: null,
+        hoverRail: null,
+      },
+      template: /*html*/`
+        <v-radio-group>
+          <v-rail-tile label="John Duck label">
+            John Duck
+          </v-rail-tile>
+        </v-radio-group>
+      `,
+      components: {
+        "v-rail-tile": VRailTile,
+        "v-radio-group": VRadioGroup,
+      },
+    });
+
+    const label = wrapper.find('.vuetiful-rail-tile-label');
+    expect(label.text()).toContain('John Duck label');
+  })
+
+  test("no default slot", () => {
+    const wrapper = mount({
+      provide: {
+        activeRail: null,
+        hoverRail: null,
+      },
+      template: /*html*/`
+        <v-radio-group>
+          <v-rail-tile label="John Duck label">
+          </v-rail-tile>
+        </v-radio-group>
+      `,
+      components: {
+        "v-rail-tile": VRailTile,
+        "v-radio-group": VRadioGroup,
+      },
+    });
+
+    const icon = wrapper.find('.vuetiful-rail-tile-icon');
+    expect(icon.exists()).toBeFalsy();
+  })
+
+  test("selected rail tile", async () => {
+    const wrapper = mount({
+      provide: {
+        activeRail: 'fake-active-class',
+        hoverRail: null,
+      },
+      template: /*html*/`
+        <v-rail data-test="rail">
+          <v-rail-tile data-test='rail-tile' label="John Duck label" value="John Duck">
+            John Duck
+          </v-rail-tile>
+        </v-rail>
+      `,
+      components: {
+        "v-rail-tile": VRailTile,
+        "v-rail": VRail,
+      },
+    });
+
+    const { selectedRailTile } = useRail();
+    expect(selectedRailTile.value).toBe("");
+    const railTile = wrapper.find('.vuetiful-rail-tile');
+    await railTile.trigger('click');
+    expect(selectedRailTile.value).toBe('John Duck');
+  })
+})
+

package/src/components/molecules/{VRailTile.vue → VRail/VRailTile.vue}

@@ -25,17 +25,15 @@ defineProps({
 });
 
 const { selectedRailTile } = useRail();
-const active = inject("active");
-const hover = inject("hover");
+const activeRail = inject("activeRail");
+const hoverRail = inject("hoverRail");
 </script>
 
 <template>
   <v-radio-item
-    :value="value"
     unstyled
-    :class="`vuetiful-rail-tile grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${hover} ${
-      selectedRailTile === value ? `${active}` : ''
-    }`"
+    :value="value"
+    :class="`vuetiful-rail-tile grid aspect-square w-full cursor-pointer place-content-center place-items-center ${ selectedRailTile === value ? `${activeRail}` : `${hoverRail}` }`"
   >
     <template v-if="$slots.default">
       <div :class="`vuetiful-rail-tile-icon ${regionIcon}`"><slot /></div>

package/src/components/molecules/VTabs/VTab.test.ts

@@ -20,8 +20,9 @@ describe("VTab", () => {
 
     const vuetiful = wrapper.find("[data-test='vuetiful']");
     const slotContainer = vuetiful.find("[data-test='slot-container']");
-    expect(vuetiful.classes()).toEqual(["flex", "flex-col"]);
+    expect(vuetiful.classes()).toEqual(["vuetiful-tab", "flex", "flex-col"]);
     expect(slotContainer.classes()).toEqual([
+      "vuetiful-tab-content",
       "text-base",
       "rounded-token",
       "w-full",
@@ -46,7 +47,7 @@ describe("VTab", () => {
     });
 
     const vuetiful = wrapper.find("[data-test='vuetiful']");
-    expect(vuetiful.classes()).toEqual(["flex", "flex-row", "justify-between"]);
+    expect(vuetiful.classes()).toEqual(["vuetiful-tab", "flex", "flex-row", "justify-between"]);
   });
 
   test("class-tab", async () => {
@@ -66,7 +67,7 @@ describe("VTab", () => {
 
     const vuetiful = wrapper.find("[data-test='vuetiful']");
     const slotContainer = vuetiful.find("[data-test='slot-container']");
-    expect(slotContainer.classes()).toEqual(["text-base", "rounded-token", "my-custom-class"]);
+    expect(slotContainer.classes()).toEqual(["vuetiful-tab-content", "text-base", "rounded-token", "my-custom-class"]);
   });
 
   test("hover/active", async () => {
@@ -95,6 +96,7 @@ describe("VTab", () => {
       .find("[data-test='slot-container']");
 
     expect(vuetifulSlotContainer.classes()).toEqual([
+      "vuetiful-tab-content",
       "text-base",
       "rounded-token",
       "my-custom-active-class",
@@ -103,6 +105,7 @@ describe("VTab", () => {
       "py-2",
     ]);
     expect(isSlotContainer.classes()).toEqual([
+      "vuetiful-tab-content",
       "text-base",
       "rounded-token",
       "hover:variant-ghost",
@@ -111,6 +114,7 @@ describe("VTab", () => {
       "py-2",
     ]);
     expect(beautifulSlotContainer.classes()).toEqual([
+      "vuetiful-tab-content",
       "text-base",
       "rounded-token",
       "hover:variant-ghost",