@code-coaching/vuetiful 0.22.0 → 0.23.0

package/src/components/molecules/VAlert.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useSettings } from "@/services";
 import { PropType, computed } from "vue";
 
 const emit = defineEmits(["close"]);
@@ -17,9 +18,27 @@ const props = defineProps({
     default: true,
   },
   type: {
-    type: String as PropType<"info" | "success" | "warning" | "error">,
+    type: String as PropType<"info" | "success" | "warning" | "error" | "">,
     default: "",
   },
+
+  classPre: {
+    type: String,
+    default: "",
+  },
+  classMessage: {
+    type: String,
+    default: "",
+  },
+  classClose: {
+    type: String,
+    default: "",
+  },
+
+  unstyled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const typeBackground = computed(() => {
@@ -32,8 +51,8 @@ const typeBackground = computed(() => {
       return "variant-filled-warning";
     case "error":
       return "variant-filled-error";
-    default:
-      return "variant-filled-primary";
+    case "":
+      return "";
   }
 });
 
@@ -43,14 +62,21 @@ const handleKeydown = (event: KeyboardEvent) => {
     close();
   }
 };
+
+const { settings } = useSettings();
+const isUnstyled = settings.global.unstyled || settings.components.alert.unstyled || props.unstyled;
 </script>
 
 <template>
   <aside
     v-if="show"
-    :class="`vuetiful-alert flex w-full flex-row items-center gap-4 p-4 border-token rounded-container-token ${typeBackground}`"
+    :class="`vuetiful-alert flex ${
+      isUnstyled
+        ? ''
+        : 'w-full items-center gap-4 p-4 border-token rounded-container-token'
+    } ${typeBackground}`"
   >
-    <div v-if="!hideIcon">
+    <div v-if="!hideIcon" :class="`vuetiful-alert-pre ${classPre}`">
       <slot v-if="$slots.pre" name="pre" />
       <template v-if="!$slots.pre">
         <!-- https://fontawesome.com/icons/circle-info?f=classic&s=solid -->
@@ -103,7 +129,7 @@ const handleKeydown = (event: KeyboardEvent) => {
       </template>
     </div>
 
-    <div class="vuetiful-alert-message flex-auto">
+    <div :class="`vuetiful-alert-message ${isUnstyled ? '' : 'flex-auto'} ${classMessage}`">
       <slot />
     </div>
 
@@ -115,7 +141,7 @@ const handleKeydown = (event: KeyboardEvent) => {
       tabindex="0"
       @keydown="handleKeydown"
       @click="close"
-      class="icon hover:cursor-pointer"
+      :class="`vuetiful-alert-close-icon icon hover:cursor-pointer ${classClose}`"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 384 512"
     >

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

@@ -9,8 +9,8 @@ describe("VCard", () => {
       background: "bg-surface-200-700-token",
       clickable: false,
       hideSeparator: false,
-      horizontal: false,
       text: "text-surface-900-50-token",
+      unstyled: false,
     });
   });
 

package/src/components/molecules/VCard/VCard.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useSettings } from "@/index";
+import { unstyledProp } from "@/props";
 import { provide } from "vue";
 
 const emit = defineEmits(["click"]);
@@ -16,14 +18,12 @@ const props = defineProps({
     type: String,
     default: "text-surface-900-50-token",
   },
-  horizontal: {
-    type: Boolean,
-    default: false,
-  },
   clickable: {
     type: Boolean,
     default: false,
   },
+
+  unstyled: unstyledProp,
 });
 
 provide("hideSeparator", props.hideSeparator);
@@ -43,6 +43,9 @@ const onKeydown = (event: KeyboardEvent) => {
     emit("click");
   }
 };
+
+const { settings } = useSettings();
+const isUnstyled = settings.global.unstyled || settings.components.card.unstyled || props.unstyled;
 </script>
 
 <template>
@@ -50,9 +53,11 @@ const onKeydown = (event: KeyboardEvent) => {
     @click="onClick"
     @keydown="onKeydown"
     :tabindex="clickable ? 0 : undefined"
-    :class="`vuetiful-card flex border-token rounded-container-token ring-outline-token ${
-      horizontal ? 'flex-row' : 'flex-col'
-    } ${background} ${text} ${clickable ? 'card-hover hover:cursor-pointer' : ''}`"
+    :class="`vuetiful-card flex flex-col ${
+      isUnstyled ? '' : 'border-token rounded-container-token ring-outline-token'
+    } ${background} ${text} ${
+      clickable ? `${isUnstyled ? '' : 'card-hover'} hover:cursor-pointer` : ''
+    }`"
   >
     <slot />
   </div>

package/src/components/molecules/VCard/VCardBody.test.ts

@@ -3,6 +3,24 @@ import { describe, expect, test } from "vitest";
 import { VCard, VCardBody } from "..";
 
 describe("VCardBody", () => {
+  test("unstyled", () => {
+    const wrapper = mount({
+      template: /*html*/ `
+        <v-card>
+          <v-card-body unstyled>John Duck</v-card-body>
+        </v-card>
+      `,
+      components: {
+        "v-card": VCard,
+        "v-card-body": VCardBody,
+      },
+    });
+
+    const content = wrapper.find("[data-test='vuetiful-card-body-content']");
+    expect(content.text()).toEqual("John Duck");
+    expect(content.classes()).not.toContain("p-4");
+  });
+
   test("defaults", async () => {
     const wrapper = mount({
       template: /*html*/ `

package/src/components/molecules/VCard/VCardBody.vue

@@ -1,5 +1,20 @@
+<script setup lang="ts">
+import { unstyledProp } from "@/props";
+import { useSettings } from "@/services";
+
+const props = defineProps({
+  unstyled: unstyledProp,
+});
+
+const { settings } = useSettings();
+const isUnstyled =
+  settings.global.unstyled || settings.components.cardBody.unstyled || props.unstyled;
+</script>
 <template>
-  <div data-test="vuetiful-card-body-content" class="vuetiful-card-body p-4">
+  <div
+    data-test="vuetiful-card-body-content"
+    :class="`vuetiful-card-body ${isUnstyled ? '' : 'p-4'}`"
+  >
     <slot />
   </div>
 </template>

package/src/components/molecules/VCard/VCardFooter.test.ts

@@ -3,6 +3,24 @@ import { describe, expect, test } from "vitest";
 import { VCard, VCardFooter } from "..";
 
 describe("VCardFooter", () => {
+  test("unstyled", () => {
+    const wrapper = mount({
+      template: /*html*/ `
+        <v-card>
+          <v-card-footer unstyled>John Duck</v-card-footer>
+        </v-card>
+      `,
+      components: {
+        "v-card": VCard,
+        "v-card-footer": VCardFooter,
+      },
+    });
+
+    const content = wrapper.find("[data-test='vuetiful-card-footer-content']");
+    expect(content.text()).toEqual("John Duck");
+    expect(content.classes()).not.toContain("p-4");
+  });
+
   test("defaults", async () => {
     const wrapper = mount({
       template: /*html*/ `

package/src/components/molecules/VCard/VCardFooter.vue

@@ -1,11 +1,29 @@
 <script setup lang="ts">
-import { inject } from "vue";
+import { inject, useAttrs } from "vue";
+import { unstyledProp } from "@/props";
+import { useSettings } from "@/services";
+
+const props = defineProps({
+  classSeparator: {
+    type: String as () => string,
+    default: "opacity-90",
+  },
+  unstyled: unstyledProp,
+});
+
 const hideSeparator = inject("hideSeparator", false);
+
+const attrs = useAttrs();
+const classAttribute = attrs.class as string;
+
+const { settings } = useSettings();
+const isUnstyled =
+  settings.global.unstyled || settings.components.cardBody.unstyled || props.unstyled;
 </script>
 
 <template>
-  <hr v-if="!hideSeparator" data-test="vuetiful-card-footer-separator" class="opacity-90" />
-  <div data-test="vuetiful-card-footer-content" class="vuetiful-card-footer p-4">
+  <hr v-if="!hideSeparator" data-test="vuetiful-card-footer-separator" class="divider" :class="classSeparator" />
+  <div data-test="vuetiful-card-footer-content" :class="`vuetiful-card-footer ${isUnstyled ? '' : 'p-4'} ${classAttribute}`">
     <slot />
   </div>
 </template>

package/src/components/molecules/VCard/VCardHeader.test.ts

@@ -3,6 +3,24 @@ import { describe, expect, test } from "vitest";
 import { VCard, VCardHeader } from "..";
 
 describe("VCardHeader", () => {
+  test("unstyled", () => {
+    const wrapper = mount({
+      template: /*html*/ `
+        <v-card>
+          <v-card-header unstyled>John Duck</v-card-header>
+        </v-card>
+      `,
+      components: {
+        "v-card": VCard,
+        "v-card-header": VCardHeader,
+      },
+    });
+
+    const content = wrapper.find("[data-test='vuetiful-card-header-content']");
+    expect(content.text()).toEqual("John Duck");
+    expect(content.classes()).not.toContain("p-4");
+  });
+
   test("defaults", async () => {
     const wrapper = mount({
       template: /*html*/ `

package/src/components/molecules/VCard/VCardHeader.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { Ref, computed, inject, ref } from 'vue';
+import { unstyledProp } from "@/props";
+import { useSettings } from "@/services";
+import { Ref, computed, inject, ref, useAttrs } from "vue";
+
+const props = defineProps({
+  classSeparator: {
+    type: String as () => string,
+    default: "opacity-90",
+  },
+  unstyled: unstyledProp,
+});
 
 const headerRef = ref() as Ref<HTMLDivElement>;
 
@@ -7,17 +17,28 @@ const hasImageAsChild = computed(() => {
   const children = headerRef.value?.children;
   if (!children) return false;
   const childrenArray = Array.from(children);
-  return childrenArray.some((child) => child.tagName === 'IMG');
+  return childrenArray.some((child) => child.tagName === "IMG");
 });
 
-const hideSeparator = inject('hideSeparator', false);
+const hideSeparator = inject("hideSeparator", false);
+
+const attrs = useAttrs();
+const classAttribute = attrs.class as string;
+
+const { settings } = useSettings();
+const isUnstyled =
+  settings.global.unstyled || settings.components.cardHeader.unstyled || props.unstyled;
 </script>
 
 <template>
-  <div ref="headerRef" data-test='vuetiful-card-header-content' :class="`vuetiful-card-header ${hasImageAsChild ? '' : 'p-4'}`">
+  <div
+    ref="headerRef"
+    data-test="vuetiful-card-header-content"
+    :class="`vuetiful-card-header ${hasImageAsChild ? '' : `${isUnstyled ? '' : 'p-4'}`} ${classAttribute}`"
+  >
     <slot />
   </div>
-  <hr v-if="!hideSeparator" data-test='vuetiful-card-header-separator' class="opacity-90" />
+  <hr v-if="!hideSeparator" data-test="vuetiful-card-header-separator" class="divider" :class="classSeparator" />
 </template>
 
 <style>

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

@@ -0,0 +1,133 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test, vi } from "vitest";
+import { VCodeBlock } from "../..";
+
+const clipboardMock = {
+  writeText: vi.fn(),
+};
+
+Object.defineProperty(window.navigator, "clipboard", {
+  value: clipboardMock,
+  writable: true,
+});
+
+describe("VCodeBlock", () => {
+  test("copy button copies code to clipboard", async () => {
+    const mockClipboardDirective = {
+      mounted(el: HTMLElement, binding: any) {
+        el.addEventListener("click", () => {
+          el.dataset.copied = binding.value;
+        });
+      },
+    };
+
+    const wrapper = mount(VCodeBlock, {
+      props: {
+        code: "John Duck",
+      },
+      global: {
+        directives: {
+          clipboard: mockClipboardDirective,
+        },
+      },
+    });
+
+    await wrapper.find(".vuetiful-code-block-button").trigger("click");
+
+    expect(clipboardMock.writeText).toHaveBeenCalledWith("John Duck");
+
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(wrapper.emitted("copy")).toBeTruthy();
+  });
+
+  test("renders the component with default props", () => {
+    const wrapper = mount(VCodeBlock);
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.text()).toContain("Copy");
+    expect(wrapper.find(".vuetiful-code-block-language").text()).toBe("plaintext");
+    expect(wrapper.find(".vuetiful-code-block-code").classes()).toContain("language-plaintext");
+  });
+
+  test("renders the component with custom props", () => {
+    const customProps = {
+      language: "javascript",
+      code: "const x = 10;",
+      buttonText: "Copy Code",
+      buttonCopiedText: "Copied!",
+      classButton: "custom-button-class",
+      classLanguage: "custom-language-class",
+      classCode: "custom-code-class",
+      preventOverflow: true,
+    };
+
+    const wrapper = mount(VCodeBlock, {
+      props: customProps,
+    });
+
+    expect(wrapper.find(".vuetiful-code-block-button").text()).toContain("Copy Code");
+    expect(wrapper.find(".vuetiful-code-block-language").text()).toBe("javascript");
+    expect(wrapper.find(".vuetiful-code-block-code").classes()).toContain("language-javascript");
+    expect(wrapper.find(".vuetiful-code-block-pre").classes()).toContain("whitespace-pre-wrap");
+  });
+
+  test("renders the component with custom props", () => {
+    const customProps = {
+      language: "js",
+      code: "const x = 10;",
+      buttonText: "Copy Code",
+      buttonCopiedText: "Copied!",
+      classButton: "custom-button-class",
+      classLanguage: "custom-language-class",
+      classCode: "custom-code-class",
+      preventOverflow: true,
+    };
+
+    const wrapper = mount(VCodeBlock, { props: customProps });
+
+    expect(wrapper.find(".vuetiful-code-block-button").text()).toContain("Copy Code");
+    expect(wrapper.find(".vuetiful-code-block-language").text()).toBe("javascript");
+    expect(wrapper.find(".vuetiful-code-block-code").classes()).toContain("language-js");
+    expect(wrapper.find(".vuetiful-code-block-pre").classes()).toContain("whitespace-pre-wrap");
+  });
+
+  test("renders the component with custom props", () => {
+    const customProps = {
+      language: "ts",
+      code: "const x = 10;",
+      buttonText: "Copy Code",
+      buttonCopiedText: "Copied!",
+      classButton: "custom-button-class",
+      classLanguage: "custom-language-class",
+      classCode: "custom-code-class",
+      preventOverflow: true,
+    };
+
+    const wrapper = mount(VCodeBlock, { props: customProps });
+
+    expect(wrapper.find(".vuetiful-code-block-button").text()).toContain("Copy Code");
+    expect(wrapper.find(".vuetiful-code-block-language").text()).toBe("typescript");
+    expect(wrapper.find(".vuetiful-code-block-code").classes()).toContain("language-ts");
+    expect(wrapper.find(".vuetiful-code-block-pre").classes()).toContain("whitespace-pre-wrap");
+  });
+
+  test("renders the component with custom props", () => {
+    const customProps = {
+      language: "sh",
+      code: "const x = 10;",
+      buttonText: "Copy Code",
+      buttonCopiedText: "Copied!",
+      classButton: "custom-button-class",
+      classLanguage: "custom-language-class",
+      classCode: "custom-code-class",
+      preventOverflow: true,
+    };
+
+    const wrapper = mount(VCodeBlock, { props: customProps });
+
+    expect(wrapper.find(".vuetiful-code-block-button").text()).toContain("Copy Code");
+    expect(wrapper.find(".vuetiful-code-block-language").text()).toBe("console");
+    expect(wrapper.find(".vuetiful-code-block-code").classes()).toContain("language-sh");
+    expect(wrapper.find(".vuetiful-code-block-pre").classes()).toContain("whitespace-pre-wrap");
+  });
+});

package/src/components/molecules/VCodeBlock.vue

@@ -0,0 +1,120 @@
+<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";
+
+const { highlight } = useHighlight();
+
+const props = defineProps({
+  language: {
+    type: String,
+    default: "plaintext",
+  },
+  code: {
+    type: String,
+    default: "",
+  },
+
+  preventOverflow: {
+    type: Boolean,
+    default: false,
+  },
+
+  classHeader: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+  classLanguage: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+  classPre: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+  classCode: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+
+  classButton: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+  buttonText: {
+    type: String,
+    default: "Copy",
+  },
+  buttonCopiedText: {
+    type: String,
+    default: "👍",
+  },
+
+  unstyled: unstyledProp,
+});
+
+const emit = defineEmits<{
+  (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";
+  return lang;
+}
+
+function onCopyClick() {
+  copyState.value = true;
+  setTimeout(() => {
+    copyState.value = false;
+  }, 2000);
+  emit("copy");
+}
+
+const { settings } = useSettings();
+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'
+    }`"
+  >
+    <header
+      :class="`vuetiful-code-block-header ${
+        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>
+      <v-button
+        size="sm"
+        :class="`vuetiful-code-block-button ${
+          classButton ? classButton : 'bg-[#171717] dark:bg-[#171717] text-[#a4a4a4] dark:text-[#a4a4a4]'
+        }`"
+        @click="onCopyClick()"
+        v-clipboard="code"
+      >
+        {{ !copyState ? buttonText : buttonCopiedText }}
+      </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}`"
+    ><code :class="`vuetiful-code-block-code language-${language} ${classCode}`" v-html="highlight(code, language)"></code></pre>
+  </div>
+</template>

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

@@ -9,18 +9,22 @@ describe("VListbox", () => {
     const wrapper = mount(VListbox);
 
     expect(wrapper.props()).toEqual({
+      modelValue: undefined,
+      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",
-      buttonText: "Select an option",
+      text: "text-surface-900 dark:text-surface-50",
+      unstyled: false,
       by: undefined,
       display: undefined,
-      horizontal: false,
-      hover: "variant-ghost",
-      labelClasses: false,
-      labelText: undefined,
-      modelValue: undefined,
-      multiple: false,
-      text: "text-surface-900 dark:text-surface-50",
+      textLabel: undefined,
     });
   });
 
@@ -44,8 +48,8 @@ describe("VListbox", () => {
         },
       });
 
-      const listbox = wrapper.find("[data-test='v-listbox']");
-      await listbox.find("[data-test='v-listbox-button']").trigger("click");
+      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");
     });
@@ -71,8 +75,8 @@ describe("VListbox", () => {
         },
       });
 
-      const listbox = wrapper.find("[data-test='v-listbox']");
-      const button = listbox.find("[data-test='v-listbox-button']");
+      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");
@@ -102,8 +106,8 @@ describe("VListbox", () => {
         },
       });
 
-      const listbox = wrapper.find("[data-test='v-listbox']");
-      const button = listbox.find("[data-test='v-listbox-button']");
+      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");
@@ -116,4 +120,27 @@ describe("VListbox", () => {
       expect(button.text()).toBe("2 options selected");
     });
   });
-});
+
+  describe("unstyled", () => {
+    test("should only have vuetiful- classes", async () => {
+      const wrapper = mount(VListbox, {
+        props: {
+          unstyled: true,
+        },
+      });
+
+      const listbox = wrapper.find("[data-test='listbox']");
+      await listbox.find("[data-test='listbox-button']").trigger("click");
+      const listboxItems = wrapper.find("[data-test='listbox-items']");
+
+      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",
+      ]);
+    });
+  });
+});