@code-coaching/vuetiful 0.23.0 → 0.23.2

package/src/components/molecules/VCodeBlock.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { CssClasses, VButton, useSettings, vClipboard } from "@/index";
-import { unstyledProp } from "@/props";
-import { useHighlight } from "@/services/highlight.service";
-import "highlight.js/styles/github-dark.css";
-import { ref } from "vue";
+import { CssClasses, VButton, useSettings, vClipboard } from '@/index';
+import { unstyledProp } from '@/props';
+import { useHighlight } from '@/services/highlight.service';
+import 'highlight.js/styles/github-dark.css';
+import { ref } from 'vue';
 
 const { highlight } = useHighlight();
 
 const props = defineProps({
   language: {
     type: String,
-    default: "plaintext",
+    default: 'plaintext',
   },
   code: {
     type: String,
-    default: "",
+    default: '',
   },
 
   preventOverflow: {
@@ -24,48 +24,48 @@ const props = defineProps({
 
   classHeader: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
   classLanguage: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
   classPre: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
   classCode: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
 
   classButton: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
   buttonText: {
     type: String,
-    default: "Copy",
+    default: 'Copy',
   },
   buttonCopiedText: {
     type: String,
-    default: "👍",
+    default: '👍',
   },
 
   unstyled: unstyledProp,
 });
 
 const emit = defineEmits<{
-  (event: "copy"): void;
+  (event: 'copy'): void;
 }>();
 
 const copyState = ref(false);
 
 // Allow shorthand alias, but show full text in UI
 function languageFormatter(lang: string): string {
-  if (lang === "js") return "javascript";
-  if (lang === "ts") return "typescript";
-  if (["sh", "bash", "zsh", "shell"].includes(lang)) return "console";
+  if (lang === 'js') return 'javascript';
+  if (lang === 'ts') return 'typescript';
+  if (['sh', 'bash', 'zsh', 'shell'].includes(lang)) return 'console';
   return lang;
 }
 
@@ -74,36 +74,29 @@ function onCopyClick() {
   setTimeout(() => {
     copyState.value = false;
   }, 2000);
-  emit("copy");
+  emit('copy');
 }
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.codeBlock.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.codeBlock.unstyled || props.unstyled;
 </script>
 
 <template v-if="language && code">
   <div
     :class="`vuetiful-code-block code-block ${
-      isUnstyled
-        ? ''
-        : 'max-w-full bg-[#171717] text-sm text-white shadow rounded-container-token'
+      isUnstyled ? '' : 'max-w-full bg-[#171717] text-sm text-white shadow rounded-container-token'
     }`"
   >
     <header
       :class="`vuetiful-code-block-header ${
-        isUnstyled
-          ? ''
-          : 'flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-[#a4a4a4]'
+        isUnstyled ? '' : 'flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-[#a4a4a4]'
       } ${classHeader}`"
     >
-      <span :class="`vuetiful-code-block-language ${classLanguage}`">{{
-        languageFormatter(language)
-      }}</span>
+      <span :class="`vuetiful-code-block-language ${classLanguage}`">{{ languageFormatter(language) }}</span>
       <v-button
         size="sm"
         :class="`vuetiful-code-block-button ${
-          classButton ? classButton : 'bg-[#171717] dark:bg-[#171717] text-[#a4a4a4] dark:text-[#a4a4a4]'
+          classButton ? classButton : 'bg-[#171717] text-[#a4a4a4] dark:bg-[#171717] dark:text-[#a4a4a4]'
         }`"
         @click="onCopyClick()"
         v-clipboard="code"
@@ -112,9 +105,9 @@ const isUnstyled =
       </v-button>
     </header>
     <pre
-      :class="`vuetiful-code-block-pre ${
-        isUnstyled ? '' : '!rounded-t-none bg-transparent p-4 !pt-0'
-      } ${preventOverflow ? 'whitespace-pre-wrap break-all' : 'overflow-auto'} ${classPre}`"
+      :class="`vuetiful-code-block-pre ${isUnstyled ? '' : '!rounded-t-none bg-transparent p-4 !pt-0'} ${
+        preventOverflow ? 'whitespace-pre-wrap break-all' : 'overflow-auto'
+      } ${classPre}`"
     ><code :class="`vuetiful-code-block-code language-${language} ${classCode}`" v-html="highlight(code, language)"></code></pre>
   </div>
 </template>

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

@@ -1,13 +1,13 @@
-import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
-import { VDrawer } from ".";
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { VDrawer } from '.';
 
-test("VDrawer", () => {
+test('VDrawer', () => {
   expect(VDrawer).toBeTruthy();
 });
 
 // TODO: add tests
-test("VDrawer using slot", () => {
+test('VDrawer using slot', () => {
   const wrapper = mount(VDrawer);
 
   expect(wrapper).toBeTruthy();

package/src/components/molecules/VDrawer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { CssClasses } from "@/index";
-import { useDrawer } from "@/services";
-import { Ref, computed, onMounted, ref, toRefs } from "vue";
+import type { CssClasses } from '@/index';
+import { useDrawer } from '@/services';
+import { Ref, computed, onMounted, ref, toRefs } from 'vue';
 
 const { drawer, close } = useDrawer();
 
@@ -10,21 +10,21 @@ const props = defineProps({
   // Regions
   regionBackdrop: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
   regionDrawer: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
 
   // a11y
   labelledby: {
     type: String,
-    default: "",
+    default: '',
   },
   describedby: {
     type: String,
-    default: "",
+    default: '',
   },
 });
 
@@ -37,7 +37,7 @@ const presets = {
 	right: { alignment: 'right-0', width: 'w-[90%]', height: 'h-full', rounded: 'rounded-tl-container-token rounded-bl-container-token' }
 };
 const preset = computed(() => {
-  const position = drawer.position || "left";
+  const position = drawer.position || 'left';
   return presets[position];
 });
 // #endregion
@@ -53,10 +53,10 @@ const onBackdropInteraction = (event: Event) => {
 };
 
 const onKeydownWindow = (event: KeyboardEvent) => {
-  if (event.code === "Escape") close();
+  if (event.code === 'Escape') close();
 };
 onMounted(() => {
-  window.addEventListener("keydown", onKeydownWindow);
+  window.addEventListener('keydown', onKeydownWindow);
 });
 // #endregion
 </script>

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

@@ -1,26 +1,26 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { ref } from "vue";
-import { VListboxItem } from "..";
-import VListbox from "./VListbox.vue";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { ref } from 'vue';
+import { VListboxItem } from '..';
+import VListbox from './VListbox.vue';
 
-describe("VListbox", () => {
-  test("default props", () => {
+describe('VListbox', () => {
+  test('default props', () => {
     const wrapper = mount(VListbox);
 
     expect(wrapper.props()).toEqual({
       modelValue: undefined,
-      classLabel: "",
-      textButton: "Select an option",
-      classButton: "",
-      classItem: "",
-      classItems: "",
+      classLabel: '',
+      textButton: 'Select an option',
+      classButton: '',
+      classItem: '',
+      classItems: '',
       horizontal: false,
       multiple: false,
-      active: "variant-filled",
-      hover: "hover:variant-ghost",
-      background: "bg-surface-200-700-token",
-      text: "text-surface-900 dark:text-surface-50",
+      active: 'variant-filled',
+      hover: 'hover:variant-ghost',
+      background: 'bg-surface-200-700-token',
+      text: 'text-surface-900 dark:text-surface-50',
       unstyled: false,
       by: undefined,
       display: undefined,
@@ -28,8 +28,8 @@ describe("VListbox", () => {
     });
   });
 
-  describe("modelValue", () => {
-    test("should update modelValue", async () => {
+  describe('modelValue', () => {
+    test('should update modelValue', async () => {
       const choice = ref();
       const wrapper = mount({
         setup() {
@@ -43,20 +43,20 @@ describe("VListbox", () => {
           </v-listbox>
         `,
         components: {
-          "v-listbox": VListbox,
-          "v-listbox-item": VListboxItem,
+          'v-listbox': VListbox,
+          'v-listbox-item': VListboxItem,
         },
       });
 
       const listbox = wrapper.find("[data-test='listbox']");
-      await listbox.find("[data-test='listbox-button']").trigger("click");
-      await listbox.find("[data-test='vuetiful']").trigger("click");
-      expect(choice.value).toBe("vuetiful");
+      await listbox.find("[data-test='listbox-button']").trigger('click');
+      await listbox.find("[data-test='vuetiful']").trigger('click');
+      expect(choice.value).toBe('vuetiful');
     });
   });
 
-  describe("object modelValue", () => {
-    test("should use display prop", async () => {
+  describe('object modelValue', () => {
+    test('should use display prop', async () => {
       const choice = ref();
       const wrapper = mount({
         setup() {
@@ -70,24 +70,24 @@ describe("VListbox", () => {
           </v-listbox>
         `,
         components: {
-          "v-listbox": VListbox,
-          "v-listbox-item": VListboxItem,
+          'v-listbox': VListbox,
+          'v-listbox-item': VListboxItem,
         },
       });
 
       const listbox = wrapper.find("[data-test='listbox']");
       const button = listbox.find("[data-test='listbox-button']");
-      expect(button.text()).toBe("Select an option");
-      await button.trigger("click");
-      await listbox.find("[data-test='vuetiful']").trigger("click");
+      expect(button.text()).toBe('Select an option');
+      await button.trigger('click');
+      await listbox.find("[data-test='vuetiful']").trigger('click');
 
-      expect(choice.value).toEqual({ name: "vuetiful", id: 0 });
-      expect(button.text()).toBe("vuetiful");
+      expect(choice.value).toEqual({ name: 'vuetiful', id: 0 });
+      expect(button.text()).toBe('vuetiful');
     });
   });
 
-  describe("multiple", () => {
-    test("should update modelValue and button text", async () => {
+  describe('multiple', () => {
+    test('should update modelValue and button text', async () => {
       const choice = ref([]);
       const wrapper = mount({
         setup() {
@@ -101,28 +101,28 @@ describe("VListbox", () => {
           </v-listbox>
         `,
         components: {
-          "v-listbox": VListbox,
-          "v-listbox-item": VListboxItem,
+          'v-listbox': VListbox,
+          'v-listbox-item': VListboxItem,
         },
       });
 
       const listbox = wrapper.find("[data-test='listbox']");
       const button = listbox.find("[data-test='listbox-button']");
-      expect(button.text()).toBe("Select an option");
+      expect(button.text()).toBe('Select an option');
 
-      await button.trigger("click");
-      await listbox.find("[data-test='vuetiful']").trigger("click");
-      expect(choice.value).toEqual(["vuetiful"]);
-      expect(button.text()).toBe("vuetiful");
+      await button.trigger('click');
+      await listbox.find("[data-test='vuetiful']").trigger('click');
+      expect(choice.value).toEqual(['vuetiful']);
+      expect(button.text()).toBe('vuetiful');
 
-      await listbox.find("[data-test='is']").trigger("click");
-      expect(choice.value).toEqual(["vuetiful", "is"]);
-      expect(button.text()).toBe("2 options selected");
+      await listbox.find("[data-test='is']").trigger('click');
+      expect(choice.value).toEqual(['vuetiful', 'is']);
+      expect(button.text()).toBe('2 options selected');
     });
   });
 
-  describe("unstyled", () => {
-    test("should only have vuetiful- classes", async () => {
+  describe('unstyled', () => {
+    test('should only have vuetiful- classes', async () => {
       const wrapper = mount(VListbox, {
         props: {
           unstyled: true,
@@ -130,16 +130,16 @@ describe("VListbox", () => {
       });
 
       const listbox = wrapper.find("[data-test='listbox']");
-      await listbox.find("[data-test='listbox-button']").trigger("click");
+      await listbox.find("[data-test='listbox-button']").trigger('click');
       const listboxItems = wrapper.find("[data-test='listbox-items']");
 
-      expect(listbox.classes()).toEqual(["vuetiful-listbox"]);
+      expect(listbox.classes()).toEqual(['vuetiful-listbox']);
       expect(listboxItems.classes()).toEqual([
-        "z-10",
-        "bg-surface-200-700-token",
-        "text-surface-900",
-        "dark:text-surface-50",
-        "flex-col",
+        'z-10',
+        'bg-surface-200-700-token',
+        'text-surface-900',
+        'dark:text-surface-50',
+        'flex-col',
       ]);
     });
   });

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

@@ -1,15 +1,15 @@
 <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"]);
+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"],
+  modelValue: Listbox.props['modelValue'],
 
   by: {
     type: String,
@@ -23,25 +23,25 @@ const props = defineProps({
   },
   classLabel: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
 
   textButton: {
     type: String,
-    default: "Select an option",
+    default: 'Select an option',
   },
   classButton: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
 
   classItem: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
   classItems: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
 
   horizontal: {
@@ -55,20 +55,20 @@ const props = defineProps({
 
   active: {
     type: String,
-    default: "variant-filled",
+    default: 'variant-filled',
   },
   hover: {
     type: String,
-    default: "hover:variant-ghost",
+    default: 'hover:variant-ghost',
   },
 
   background: {
     type: String,
-    default: "bg-surface-200-700-token",
+    default: 'bg-surface-200-700-token',
   },
   text: {
     type: String,
-    default: "text-surface-900 dark:text-surface-50",
+    default: 'text-surface-900 dark:text-surface-50',
   },
 
   unstyled: unstyledProp,
@@ -79,23 +79,23 @@ watch(
   () => props.modelValue,
   (newValue) => {
     parentModelValue.value = newValue;
-  }
+  },
 );
 watch(
   () => parentModelValue.value,
   (newValue) => {
-    emit("update:modelValue", 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);
+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];
@@ -111,8 +111,7 @@ const showText = computed(() => {
 });
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.listbox.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.listbox.unstyled || props.unstyled;
 </script>
 
 <template>

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

@@ -1,10 +1,10 @@
-import { Listbox } from "@headlessui/vue";
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import VListboxButton from "./VListboxButton.vue";
+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", () => {
+describe('VListboxButton props', () => {
+  test('defaults', () => {
     const wrapper = mount({
       provide: {
         unstyled: false,
@@ -15,13 +15,13 @@ describe("VListboxButton props", () => {
         </Listbox>
       `,
       components: {
-        "v-listbox-button": VListboxButton,
+        'v-listbox-button': VListboxButton,
         Listbox: Listbox,
       },
     });
 
     const listboxButton = wrapper.find("[data-test='listbox-button']");
-    expect(listboxButton.element.tagName).toBe("BUTTON");
+    expect(listboxButton.element.tagName).toBe('BUTTON');
   });
 
   test("custom 'as' prop", () => {
@@ -35,16 +35,16 @@ describe("VListboxButton props", () => {
         </Listbox>
       `,
       components: {
-        "v-listbox-button": VListboxButton,
+        'v-listbox-button': VListboxButton,
         Listbox: Listbox,
       },
     });
 
     const listboxButton = wrapper.find("[data-test='listbox-button']");
-    expect(listboxButton.element.tagName).toBe("DIV");
+    expect(listboxButton.element.tagName).toBe('DIV');
   });
 
-  test("should hide icon", () => {
+  test('should hide icon', () => {
     const wrapper = mount({
       provide: {
         unstyled: false,
@@ -55,12 +55,12 @@ describe("VListboxButton props", () => {
         </Listbox>
       `,
       components: {
-        "v-listbox-button": VListboxButton,
+        'v-listbox-button': VListboxButton,
         Listbox: Listbox,
       },
     });
 
     const listboxButton = wrapper.find("[data-test='listbox-button']");
-    expect(listboxButton.find("svg").exists()).toBe(false);
+    expect(listboxButton.find('svg').exists()).toBe(false);
   });
 });

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useSettings } from "@/index";
-import { ListboxButton } from "@headlessui/vue";
-import { inject } from "vue";
+import { useSettings } from '@/index';
+import { ListboxButton } from '@headlessui/vue';
+import { inject } from 'vue';
 
 defineProps({
   as: {
     type: String,
-    default: "button",
+    default: 'button',
   },
   hideIcon: {
     type: Boolean,
@@ -14,7 +14,7 @@ defineProps({
   },
 });
 
-const unstyled = inject("unstyled") as boolean;
+const unstyled = inject('unstyled') as boolean;
 
 const { settings } = useSettings();
 const isUnstyled = settings.global.unstyled || settings.components.listbox.unstyled || unstyled;