@code-coaching/vuetiful 0.22.0 → 0.23.0

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useSettings } from "@/index";
 import { RadioGroup } from "@headlessui/vue";
 import { provide, ref, watch } from "vue";
 
@@ -37,6 +38,11 @@ const props = defineProps({
     default: "text-surface-900 dark:text-surface-50",
   },
 
+  classItem: {
+    type: String,
+    default: "",
+  },
+
   unstyled: {
     type: Boolean,
     default: false,
@@ -59,20 +65,25 @@ watch(
 
 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 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 -->
   <radio-group
     data-test="radio-group"
     :as="as"
     :disabled="disabled"
     :by="by"
-    :class="`${
-      unstyled
+    :class="`vuetiful-radio-group inline-flex ${
+      isUnstyled
         ? ''
-        : `radio-group ${background} ${text} inline-flex gap-1 p-1 border-token border-surface-400-500-token rounded-container-token`
-    }`"
+        : `gap-1 p-1 border-token border-surface-400-500-token rounded-container-token`
+    } ${background} ${text}`"
     v-model="parentModelValue"
   >
     <slot></slot>

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { useSettings } from "@/index";
 import { RadioGroupOption } from "@headlessui/vue";
 import { inject } from "vue";
 
-defineProps({
+const props = defineProps({
   value: {
     type: [String, Number, Boolean, Object],
     required: true,
@@ -15,19 +16,22 @@ defineProps({
 
 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="`radio-item ${
-        unstyled
-          ? ''
-          : `px-4 py-1 text-center text-base rounded-token ${checked ? active : hover} ${
-              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
-            }`
-      }`"
+      :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>

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

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

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

@@ -10,10 +10,11 @@ describe("VSwitch props", () => {
       modelValue: false,
       disabled: false,
       size: "md",
-      switchClass: "variant-filled",
-      thumbClass: "bg-surface-100-800-token",
+      classTrack: "variant-filled",
+      classThumb: "bg-surface-100-800-token",
       as: "button",
       name: "",
+      unstyled: false,
     });
   });
 
@@ -24,7 +25,7 @@ describe("VSwitch props", () => {
       },
     });
 
-    const track = wrapper.find(".slide-toggle-track");
+    const track = wrapper.find("[data-test='switch-track']");
     expect(track.attributes("class")).toContain("w-8 h-4");
   });
 
@@ -35,7 +36,7 @@ describe("VSwitch props", () => {
       },
     });
 
-    const track = wrapper.find(".slide-toggle-track");
+    const track = wrapper.find("[data-test='switch-track']");
     expect(track.attributes("class")).toContain("w-12 h-6");
   });
 
@@ -46,7 +47,7 @@ describe("VSwitch props", () => {
       },
     });
 
-    const track = wrapper.find(".slide-toggle-track");
+    const track = wrapper.find("[data-test='switch-track']");
     expect(track.attributes("class")).toContain("w-16 h-8");
   });
 
@@ -57,7 +58,7 @@ describe("VSwitch props", () => {
       },
     });
 
-    const track = wrapper.find(".slide-toggle-track");
+    const track = wrapper.find("[data-test='switch-track']");
     expect(track.attributes("class")).toContain("w-20 h-10");
   });
 
@@ -68,20 +69,9 @@ describe("VSwitch props", () => {
       },
     });
 
-    const track = wrapper.find(".slide-toggle-track");
+    const track = wrapper.find("[data-test='switch-track']");
     expect(track.attributes("class")).toContain("w-24 h-12");
   });
-
-  test("size custom", () => {
-    const wrapper = mount(VSwitch, {
-      props: {
-        size: "custom",
-      },
-    });
-
-    const track = wrapper.find(".slide-toggle-track");
-    expect(track.attributes("class")).toContain("custom");
-  });
 });
 
 describe("VSwitch events", () => {
@@ -96,3 +86,15 @@ describe("VSwitch events", () => {
     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,4 +1,6 @@
 <script setup lang="ts">
+import { useSettings } from "@/index";
+import { sizeProp, unstyledProp } from "@/props";
 import { Switch } from "@headlessui/vue";
 import { computed, ref, watch } from "vue";
 
@@ -12,16 +14,12 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  size: {
-    type: String,
-    default: "md",
-  },
 
-  switchClass: {
+  classTrack: {
     type: String,
     default: "variant-filled",
   },
-  thumbClass: {
+  classThumb: {
     type: String,
     default: "bg-surface-100-800-token",
   },
@@ -34,6 +32,9 @@ const props = defineProps({
     type: String,
     default: "",
   },
+
+  size: sizeProp,
+  unstyled: unstyledProp,
 });
 
 const parentModelValue = ref(props.modelValue);
@@ -62,17 +63,22 @@ const trackSize = computed(() => {
       return "w-20 h-10";
     case "xl":
       return "w-24 h-12";
-    default:
-      return props.size;
   }
 });
+
+const { settings } = useSettings();
+const isUnstyled =
+  settings.global.unstyled || settings.components.switch.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 -->
   <Switch
-    :class="`slide-toggle rounded-container-token ${
-      disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+    data-test="switch"
+    :class="`vuetiful-slide-toggle ${
+      isUnstyled
+        ? ''
+        : `rounded-container-token ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`
     }`"
     :name="name"
     :as="as"
@@ -80,17 +86,23 @@ const trackSize = computed(() => {
     v-model="parentModelValue"
   >
     <div
-      :class="`slide-toggle-track flex transition-all duration-[150ms] border-token rounded-token ${trackSize} ${
-        disabled ? 'cursor-not-allowed' : 'cursor-pointer'
-      } ${switchClass}`"
+      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
-        :class="`slide-toggle-thumb h-full w-[50%] scale-[0.8] shadow transition-all duration-[150ms] rounded-token ${
-          checked ? 'translate-x-full' : 'opacity-90'
-        } ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${thumbClass} bg-opacity-90`"
+        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>

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

@@ -10,7 +10,7 @@ defineProps({
 </script>
 
 <template>
-  <SwitchDescription :as="as">
+  <SwitchDescription class="vuetiful-switch-description" :as="as">
     <slot />
   </SwitchDescription>
 </template>

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

@@ -4,13 +4,13 @@ import { SwitchGroup } from "@headlessui/vue";
 defineProps({
   as: {
     type: String,
-    default: "template",
+    default: "div",
   },
 });
 </script>
 
 <template>
-  <SwitchGroup :as="as">
+  <SwitchGroup class="vuetiful-switch-group" :as="as">
     <slot />
   </SwitchGroup>
 </template>

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

@@ -14,7 +14,7 @@ defineProps({
 </script>
 
 <template>
-  <SwitchLabel :as="as" :passive="passive">
+  <SwitchLabel class="vuetiful-switch-label" :as="as" :passive="passive">
     <slot />
   </SwitchLabel>
 </template>

package/src/components/atoms/index.ts

@@ -2,7 +2,6 @@ import VAvatar from "./VAvatar.vue";
 import VBadge from "./VBadge.vue";
 import VButton from "./VButton.vue";
 import VChip from "./VChip.vue";
-import VCodeBlock from "./VCodeBlock.vue";
 import VLightSwitch from "./VLightSwitch.vue";
 
 import VRadioDescription from "./VRadio/VRadioDescription.vue";
@@ -20,7 +19,6 @@ export {
   VButton,
   VBadge,
   VChip,
-  VCodeBlock,
   VLightSwitch,
   VRadioGroup,
   VRadioItem,

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

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

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

@@ -22,11 +22,48 @@ describe("VAccordionItem", () => {
 
       const accordionItemButton = accordionItem.find(".vuetiful-accordion-item-button");
       expect(accordionItemButton.classes()).toEqual([
+        "items-center",
+        "justify-between",
+        "p-4",
+        "py-2",
+        "rounded-container-token",
+        "hover:cursor-pointer",
         "bg-surface-200-700-token",
         "hover:variant-soft",
         "vuetiful-accordion-item-button",
+        "flex",
+        "w-full",
+      ]);
+
+      const accordionItemTitle = accordionItem.find(".vuetiful-accordion-title");
+      expect(accordionItemTitle.text()).toEqual(accordionItem.props().title);
+    });
+  });
+
+  test("unstyled", async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+        <v-accordion>
+          <v-accordion-item title="Vuetiful" unstyled>John Duck</v-accordion-item>
+          <v-accordion-item title="Is" unstyled>Janine Duck</v-accordion-item>
+        </v-accordion>`,
+      components: {
+        "v-accordion": VAccordion,
+        "v-accordion-item": VAccordionItem,
+      },
+    });
+
+    const accordionItems = wrapper.findAllComponents(VAccordionItem);
+    accordionItems.forEach((accordionItem) => {
+      expect(accordionItem.classes()).toEqual(["vuetiful-accordion-item"]);
+
+      const accordionItemButton = accordionItem.find(".vuetiful-accordion-item-button");
+      expect(accordionItemButton.classes()).toEqual([
+        "bg-surface-200-700-token",
+        "hover:variant-soft",
+        "vuetiful-accordion-item-button",
+        "flex",
         "w-full",
-        "rounded-container-token",
       ]);
 
       const accordionItemTitle = accordionItem.find(".vuetiful-accordion-title");
@@ -54,32 +91,44 @@ describe("VAccordionItem", () => {
     await accordionItemButtonOne.trigger("click");
 
     expect(accordionItemButtonOne.classes()).toEqual([
-      "bg-surface-200-700-token",
-      "hover:variant-soft",
       "!rounded-bl-none",
       "!rounded-br-none",
-      "vuetiful-accordion-item-button",
-      "w-full",
+      "items-center",
+      "justify-between",
+      "p-4",
+      "py-2",
       "rounded-container-token",
-    ]);
-    expect(accordionItemButtonTwo.classes()).toEqual([
+      "hover:cursor-pointer",
       "bg-surface-200-700-token",
       "hover:variant-soft",
       "vuetiful-accordion-item-button",
+      "flex",
       "w-full",
-      "rounded-container-token",
     ]);
-
+    expect(accordionItemButtonTwo.classes()).toEqual([
+      'items-center',
+      'justify-between',
+      'p-4',
+      'py-2',
+      'rounded-container-token',
+      'hover:cursor-pointer',
+      'bg-surface-200-700-token',
+      'hover:variant-soft',
+      'vuetiful-accordion-item-button',
+      'flex',
+      'w-full'
+    ]);
+    
     const accordionItemPanelOne = accordionItems[0].find(".vuetiful-accordion-item-panel");
 
     expect(accordionItemPanelOne.classes()).toEqual([
-      "vuetiful-accordion-item-panel",
-      "p-4",
-      "pt-0",
-      "rounded-container-token",
-      "bg-surface-200-700-token",
-      "!rounded-tl-none",
-      "!rounded-tr-none",
+      'vuetiful-accordion-item-panel',
+      '!rounded-tl-none',
+      '!rounded-tr-none',
+      'p-4',
+      'py-2',
+      'rounded-container-token',
+      'bg-surface-200-700-token'
     ]);
   });
 });

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

@@ -1,52 +1,73 @@
 <script setup lang="ts">
+import { useSettings } from "@/services";
 import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
 import { inject } from "vue";
 
-defineProps({
+const props = defineProps({
   title: {
     type: String,
     required: true,
   },
+
+  unstyled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const hover = inject("hover");
-const background = inject("background");
+const classQuestion = inject("classQuestion");
+const classAnswer = inject("classAnswer");
+
+const { settings } = useSettings();
+const isUnstyled =
+  settings.global.unstyled || settings.components.accordionItem.unstyled || props.unstyled;
 </script>
 
 <template>
   <Disclosure class="vuetiful-accordion-item" as="div" v-slot="{ open }">
     <DisclosureButton
-      :class="`${background} ${hover} ${open ? '!rounded-bl-none !rounded-br-none' : ''}`"
-      class="vuetiful-accordion-item-button w-full rounded-container-token"
+      :class="`${isUnstyled ? '' : `${open ? '!rounded-bl-none !rounded-br-none' : ''}`}
+      ${
+        isUnstyled
+          ? ''
+          : 'items-center justify-between p-4 py-2 rounded-container-token hover:cursor-pointer'
+      }
+      ${classQuestion}`"
+      class="vuetiful-accordion-item-button flex w-full"
     >
-      <div
-        class="flex items-center justify-between p-4 rounded-container-token hover:cursor-pointer"
-        :class="`${background} ${hover} ${open ? '!rounded-bl-none !rounded-br-none' : ''}`"
-      >
-        <span class="vuetiful-accordion-title">{{ title }}</span>
-        <slot v-if="!open" name="open-item">
-          <!-- https://fontawesome.com/icons/plus?f=classic&s=solid -->
-          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
-            <path
-              d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
-            />
-          </svg>
-        </slot>
-        <slot v-if="open" name="close-item">
-          <!-- https://fontawesome.com/icons/minus?f=classic&s=solid -->
-          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
-            <path
-              d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
-            />
-          </svg>
-        </slot>
-      </div>
+      <span class="vuetiful-accordion-title">{{ title }}</span>
+      <slot v-if="!open" name="open-item">
+        <!-- https://fontawesome.com/icons/plus?f=classic&s=solid -->
+        <svg
+          class="vuetiful-accordion-item-icon-plus icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 448 512"
+        >
+          <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+          <path
+            d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+          />
+        </svg>
+      </slot>
+      <slot v-if="open" name="close-item">
+        <!-- https://fontawesome.com/icons/minus?f=classic&s=solid -->
+        <svg
+          class="vuetiful-accordion-item-icon-minus icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 448 512"
+        >
+          <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+          <path
+            d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
+          />
+        </svg>
+      </slot>
     </DisclosureButton>
     <DisclosurePanel
-      class="vuetiful-accordion-item-panel p-4 pt-0 rounded-container-token"
-      :class="`${open ? `${background} !rounded-tl-none !rounded-tr-none` : ''}`"
+      class="vuetiful-accordion-item-panel"
+      :class="`${open ? `${isUnstyled ? '' : '!rounded-tl-none !rounded-tr-none'}` : ''} ${
+        isUnstyled ? '' : 'p-4 py-2 rounded-container-token'
+      } ${classAnswer}`"
     >
       <slot></slot>
     </DisclosurePanel>
@@ -55,6 +76,6 @@ const background = inject("background");
 
 <style scoped>
 .icon {
-  @apply my-1 h-4 w-4 fill-current;
+  @apply my-1 h-4 min-h-[1rem] w-4 min-w-[1rem] fill-current;
 }
 </style>

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

@@ -18,7 +18,7 @@ describe("VAlert", () => {
     });
 
     const defaultAlert = wrapper.find("[data-test=default]");
-    expect(defaultAlert.classes()).toContain("variant-filled-primary");
+    expect(defaultAlert.classes()).not.toContain("variant-filled-primary");
 
     const infoAlert = wrapper.find("[data-test=info]");
     expect(infoAlert.classes()).toContain("variant-filled");
@@ -30,6 +30,16 @@ describe("VAlert", () => {
     expect(warningAlert.classes()).toContain("variant-filled-warning");
   });
 
+  test("unstyled", () => {
+    const wrapper = mount(VAlert, {
+      props: {
+        unstyled: true,
+      },
+    });
+
+    expect(wrapper.classes()).toEqual(["vuetiful-alert", "flex"]);
+  });
+
   describe("given close icon is clicked", () => {
     test("should emit close", async () => {
       const wrapper = mount(VAlert, { props: { showClose: true } });