@code-coaching/vuetiful 0.8.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
     "prebuild": "node 'scripts/intellisense.js'",

package/src/components/atoms/VBadge.vue

@@ -1,10 +1,5 @@
-<script setup lang="ts">
-import { useAttrs } from "vue";
-const attrs = useAttrs();
-</script>
-
 <template>
-  <div :class="`vuetiful-badge badge ${attrs.class ?? ''}`">
+  <div :class="`vuetiful-badge badge`">
     <slot />
   </div>
 </template>

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

@@ -1,10 +1,12 @@
 import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import { VButton } from ".";
 
-test("VButton using slot", async () => {
+test("VButton", () => {
   expect(VButton).toBeTruthy();
+});
 
+test("VButton using slot", () => {
   const vButtonElement = mount(VButton, {
     slots: {
       default: "John Duck",
@@ -13,3 +15,108 @@ test("VButton using slot", async () => {
 
   expect(vButtonElement.text()).toContain("John Duck");
 });
+
+describe("VButton props", () => {
+  describe("given icon is true", () => {
+    test("should have btn-icon class, not have btn class", () => {
+      const vButtonElement = mount(VButton, {
+        props: {
+          icon: true,
+        },
+      });
+      expect(vButtonElement.classes()).toContain("btn-icon");
+      expect(vButtonElement.classes()).not.toContain("btn");
+    });
+  });
+  describe("given icon is false", () => {
+    test("should have btn class, not have btn-icon class", () => {
+      const vButtonElement = mount(VButton, {
+        props: {
+          icon: false,
+        },
+      });
+      expect(vButtonElement.classes()).not.toContain("btn-icon");
+      expect(vButtonElement.classes()).toContain("btn");
+    });
+  });
+});
+
+describe("VButton events", () => {
+  describe("given click event", () => {
+    test("should preventDefault and emit click event", async () => {
+      const vButtonElement = mount(VButton);
+      const clickEvent = { preventDefault: () => {} };
+      const preventDefaultSpy = vi.spyOn(clickEvent, "preventDefault");
+      vButtonElement.trigger("click", clickEvent);
+      await vButtonElement.vm.$nextTick();
+      expect(preventDefaultSpy).toHaveBeenCalled();
+      expect(vButtonElement.emitted("click")).toBeTruthy();
+    });
+  });
+});
+
+describe("VButton a11y", () => {
+  describe("a11y role", () => {
+    test("should have role button", () => {
+      const vButtonElement = mount(VButton);
+      expect(vButtonElement.attributes("role")).toBe("button");
+    });
+  });
+  describe("a11y tabindex", () => {
+    test("should have tabindex 0", () => {
+      const vButtonElement = mount(VButton);
+      expect(vButtonElement.attributes("tabindex")).toBe("0");
+    });
+  });
+  describe("given keydown event", () => {
+    describe("given key is Enter", () => {
+      test("should preventDefault and emit click event", async () => {
+        const vButtonElement = mount(VButton);
+        const keydownEvent = { key: "Enter", preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
+        vButtonElement.trigger("keydown", keydownEvent);
+        await vButtonElement.vm.$nextTick();
+        expect(preventDefaultSpy).toHaveBeenCalled();
+        expect(vButtonElement.emitted("click")).toBeTruthy();
+      });
+    });
+
+    describe("given key is Space", () => {
+      test("should preventDefault and not emit click event", async () => {
+        const vButtonElement = mount(VButton);
+        const keydownEvent = { key: " ", preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
+        vButtonElement.trigger("keydown", keydownEvent);
+        await vButtonElement.vm.$nextTick();
+        expect(preventDefaultSpy).toHaveBeenCalled();
+        expect(vButtonElement.emitted("click")).toBeFalsy();
+      });
+    });
+
+    describe("given key is not Enter or Space", () => {
+      test("should not preventDefault and not emit click event", async () => {
+        const vButtonElement = mount(VButton);
+        const keydownEvent = { key: "a", preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
+        vButtonElement.trigger("keydown", keydownEvent);
+        await vButtonElement.vm.$nextTick();
+        expect(preventDefaultSpy).not.toHaveBeenCalled();
+        expect(vButtonElement.emitted("click")).toBeFalsy();
+      });
+    });
+  });
+
+  describe("given keyup event", () => {
+    describe("given key is Space", () => {
+      test("should preventDefault and emit click event", async () => {
+        const vButtonElement = mount(VButton);
+        const keyupEvent = { key: " ", preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keyupEvent, "preventDefault");
+        vButtonElement.trigger("keyup", keyupEvent);
+        await vButtonElement.vm.$nextTick();
+        expect(preventDefaultSpy).toHaveBeenCalled();
+        expect(vButtonElement.emitted("click")).toBeTruthy();
+      });
+    });
+  });
+});

package/src/components/atoms/VButton.vue

@@ -1,20 +1,47 @@
 <script setup lang="ts">
-import { useAttrs } from "vue";
-
 defineProps({
+  icon: {
+    type: Boolean as () => boolean,
+    default: false,
+  },
   tag: {
     type: String as () => string,
     default: "button",
   },
 });
-const attrs = useAttrs();
-defineEmits(["click"]);
+const emit = defineEmits<{ (event: "click"): void }>();
+
+const activate = () => {
+  emit("click");
+};
+
+const clickHandler = (event: MouseEvent) => {
+  event.preventDefault();
+  activate();
+};
+
+const keydownHandler = (event: KeyboardEvent) => {
+  if (["Enter", " "].includes(event.key)) event.preventDefault();
+  if (event.key === "Enter") activate();
+};
+
+const keyupHandler = (event: KeyboardEvent) => {
+  if (event.key === " ") {
+    event.preventDefault();
+    activate();
+  }
+};
 </script>
 
 <template>
   <component
+    tabindex="0"
+    role="button"
     :is="tag"
-    :class="`vuetiful-button btn border-token hover:cursor-pointer ${attrs.class ?? ''}`"
+    :class="`vuetiful-button ${icon ? 'btn-icon' : 'btn'} border-token hover:cursor-pointer`"
+    @click="clickHandler"
+    @keydown="keydownHandler"
+    @keyup="keyupHandler"
   >
     <slot />
   </component>

package/src/components/atoms/VChip.vue

@@ -1,10 +1,5 @@
-<script setup lang="ts">
-import { useAttrs } from "vue";
-const attrs = useAttrs();
-</script>
-
 <template>
-  <div :class="`vuetiful-chip chip ${attrs.class ?? ''}`">
+  <div :class="`vuetiful-chip chip`">
     <slot />
   </div>
 </template>

package/src/components/molecules/VDrawer.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import type { CssClasses } from "@/index";
 import { useDrawer } from "@/services";
-import { Ref, computed, onMounted, ref, toRefs, useAttrs } from "vue";
+import { Ref, computed, onMounted, ref, toRefs } from "vue";
 
 const { drawer, close } = useDrawer();
-const attrs = useAttrs();
 
 // #region Props
 const props = defineProps({
@@ -29,7 +28,6 @@ const props = defineProps({
   },
 });
 
-// prettier-ignore
 const { regionBackdrop, regionDrawer, labelledby, describedby } = toRefs(props);
 // prettier-ignore
 const presets = {
@@ -81,9 +79,7 @@ onMounted(() => {
     <div
       v-if="drawer.open"
       ref="elemBackdrop"
-      :class="`drawer-backdrop backdrop-blur-xs fixed bottom-0 left-0 right-0 top-0 flex bg-surface-backdrop-token ${regionBackdrop} z-40 ${
-        attrs.class ?? ''
-      }`"
+      :class="`drawer-backdrop backdrop-blur-xs fixed bottom-0 left-0 right-0 top-0 flex bg-surface-backdrop-token z-40 ${regionBackdrop}`"
       @mousedown="onBackdropInteraction"
       @touchstart="onBackdropInteraction"
     ></div>

package/src/components/molecules/VRail.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CssClasses } from "@/index";
-import { defineProps, provide, useAttrs } from "vue";
+import { defineProps, provide } from "vue";
 
 const props = defineProps({
   active: {
@@ -26,19 +26,12 @@ const props = defineProps({
   },
 });
 
-const attrs = useAttrs();
-
 provide("active", props.active);
 provide("hover", props.hover);
 </script>
 
 <template>
-  <div
-    class="v-rail"
-    :class="`grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20 ${
-      attrs.class || ''
-    }`"
-  >
+  <div class="v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20">
     <div class="v-bar-lead" :class="regionLead"><slot name="lead" /></div>
     <div class="v-bar-default" :class="regionDefault"><slot /></div>
     <div class="v-bar-trail" :class="regionTrail"><slot name="trail" /></div>

package/src/components/molecules/VRailTile.vue

@@ -37,36 +37,47 @@ const { selectedRailTile } = useRail();
 const active = inject("active");
 const hover = inject("hover");
 
-const onClickHandler = () => {
-  if (!props.value) return;
+const activate = () => {
   selectedRailTile.value = props.value;
   emit("click");
 };
-const onKeyHandler = (event: KeyboardEvent) => {
-  if (!props.value) return;
-  if (!["Enter", "Space"].includes(event.key)) return;
-  selectedRailTile.value = props.value;
-  emit("click");
+
+const clickHandler = (event: MouseEvent) => {
+  event.preventDefault();
+  activate();
+};
+
+const keydownHandler = (event: KeyboardEvent) => {
+  if (["Enter", " "].includes(event.key)) event.preventDefault();
+  if (event.key === "Enter") activate();
+};
+
+const keyupHandler = (event: KeyboardEvent) => {
+  if (event.key === " ") {
+    event.preventDefault();
+    activate();
+  }
 };
 </script>
 
 <template>
-  <div @click="onClickHandler" @keydown="onKeyHandler">
-    <component
-      :is="tag"
-      v-bind="attrs"
-      :class="`app-rail-tile unstyled grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${hover} ${
-        selectedRailTile === value ? `${active}` : ''
-      } ${attrs.class || ''}`"
-    >
-      <template v-if="$slots.default">
-        <div :class="`app-rail-tile-icon ${regionIcon}`"><slot /></div>
-      </template>
-      <template v-if="label">
-        <div :class="`app-rail-tile-label text-center text-xs font-bold ${regionLabel}`">
-          {{ label }}
-        </div>
-      </template>
-    </component>
-  </div>
+  <component
+    @click="clickHandler"
+    @keydown="keydownHandler"
+    @keyup="keyupHandler"
+    :is="tag"
+    v-bind="attrs"
+    :class="`app-rail-tile unstyled grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${hover} ${
+      selectedRailTile === value ? `${active}` : ''
+    }`"
+  >
+    <template v-if="$slots.default">
+      <div :class="`app-rail-tile-icon ${regionIcon}`"><slot /></div>
+    </template>
+    <template v-if="label">
+      <div :class="`app-rail-tile-label text-center text-xs font-bold ${regionLabel}`">
+        {{ label }}
+      </div>
+    </template>
+  </component>
 </template>

package/src/components/molecules/VShell.vue

@@ -7,7 +7,6 @@
  * @slot pageFooter - Insert content that resides below your page content. Recommended for most layouts.
  * @slot fixedFooter - Insert fixed footer content. Not recommended for most layouts.
  */
-import { useAttrs } from "vue";
 export type CssClasses = string;
 defineProps({
   regionPage: { type: String as () => CssClasses, default: "" },
@@ -19,11 +18,10 @@ defineProps({
   slotPageFooter: { type: String as () => CssClasses, default: "" },
   slotFixedFooter: { type: String as () => CssClasses, default: "" },
 });
-const attrs = useAttrs();
 </script>
 
 <template>
-  <div :class="`vuetiful-shell flex h-full w-full flex-col overflow-hidden ${attrs.class ?? ''}`">
+  <div class="vuetiful-shell flex h-full w-full flex-col overflow-hidden">
     <header v-if="$slots.fixedHeader" :class="`vuetiful-fixed-header ${slotFixedHeader}`">
       <slot name="fixedHeader" />
     </header>

package/src/services/rail.service.test.ts

@@ -1,11 +1,13 @@
-import { describe, expect } from "vitest";
+import { describe, expect, it } from "vitest";
 import { useRail } from "./rail.service";
 
 const { selectedRailTile } = useRail();
 
 describe("useRail", () => {
   describe("selectedRailTile", () => {
-    selectedRailTile.value = "John Duck";
-    expect(selectedRailTile.value).toBe("John Duck");
+    it("should expose selectedRailTile", () => {
+      selectedRailTile.value = "John Duck";
+      expect(selectedRailTile.value).toBe("John Duck");
+    });
   });
 });

package/src/utils/code-block/code-block.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { CssClasses, vClipboard } from "@/index";
 import "highlight.js/styles/github-dark.css";
-import { computed, ref, useAttrs } from "vue";
+import { ref } from "vue";
 import { useHighlight } from "./highlight.service";
 
 const { highlight } = useHighlight();
@@ -15,54 +15,32 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  background: {
-    type: String as () => CssClasses,
-    default: "bg-neutral-900/90",
-  },
-  blur: {
-    type: String as () => CssClasses,
-    default: "",
-  },
-  text: {
-    type: String as () => CssClasses,
-    default: "text-sm",
-  },
-  color: {
-    type: String as () => CssClasses,
-    default: "text-white",
-  },
-  rounded: {
+
+  headerClass: {
     type: String as () => CssClasses,
-    default: "rounded-container-token",
   },
-  shadow: {
+  preClass: {
     type: String as () => CssClasses,
-    default: "shadow",
   },
 
-  button: {
+  buttonClass: {
     type: String as () => CssClasses,
     default: "btn btn-sm variant-soft !text-white",
   },
-  buttonLabel: {
+  buttonText: {
     type: String,
     default: "Copy",
   },
-  buttonCopied: {
+  buttonCopiedText: {
     type: String,
     default: "👍",
   },
 });
 
-const attrs = useAttrs();
 const emit = defineEmits<{
   (event: "copy"): void;
 }>();
 
-const cBase = "overflow-hidden shadow";
-const cHeader = "text-xs text-white/50 uppercase flex justify-between items-center p-2 pl-4 pb-0";
-const cPre = "whitespace-pre-wrap break-all p-4 pt-1";
-
 const copyState = ref(false);
 
 // Allow shorthand alias, but show full text in UI
@@ -80,27 +58,24 @@ function onCopyClick() {
   }, 2000);
   emit("copy");
 }
-
-// Reactive
-const classesBase = computed(
-  () =>
-    `${cBase} ${props.background} ${props.blur} ${props.text} ${props.color} ${props.rounded} ${
-      props.shadow
-    } ${attrs.class ?? ""}`
-);
 </script>
 
-<!-- prettier-ignore -->
-<template>
-	<div v-if="language && code">
-		<div :class="`code-block ${classesBase}`" data-testid="code-block">
-			<header :class="`code-block-header ${cHeader}`">
-				<span :class="`code-block-language`">{{languageFormatter(language)}}</span>
-				<button :class="`code-block-btn ${button}`" @click="onCopyClick()" v-clipboard="props.code">
-					{{!copyState ? buttonLabel : buttonCopied}}
-				</button>
-			</header>
-			<pre :class="`code-block-pre ${cPre}`"><code :class="`code-block-code language-${language}`" v-html="highlight(props.code, props.language)"></code></pre>
-		</div>
-	</div>
+<template v-if="language && code">
+  <div class="code-block bg-neutral-900/90 text-sm text-white shadow rounded-container-token">
+    <header
+      :class="`code-block-header flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-white/50 ${headerClass}`"
+    >
+      <span :class="`code-block-language`">{{ languageFormatter(language) }}</span>
+      <button
+        :class="`code-block-btn ${buttonClass}`"
+        @click="onCopyClick()"
+        v-clipboard="props.code"
+      >
+        {{ !copyState ? buttonText : buttonCopiedText }}
+      </button>
+    </header>
+    <pre
+      :class="`code-block-pre whitespace-pre-wrap break-all p-4 pt-1 ${preClass}`"
+    ><code :class="`code-block-code language-${language}`" v-html="highlight(props.code, props.language)"></code></pre>
+  </div>
 </template>