@code-coaching/vuetiful 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.9.0",
+  "version": "0.11.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.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useAttrs } from "vue";
-
 defineProps({
   icon: {
     type: Boolean as () => boolean,
@@ -11,7 +9,6 @@ defineProps({
     default: "button",
   },
 });
-const attrs = useAttrs();
 const emit = defineEmits<{ (event: "click"): void }>();
 
 const activate = () => {
@@ -41,9 +38,7 @@ const keyupHandler = (event: KeyboardEvent) => {
     tabindex="0"
     role="button"
     :is="tag"
-    :class="`vuetiful-button ${icon ? 'btn-icon' : '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"

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

@@ -61,22 +61,23 @@ const keyupHandler = (event: KeyboardEvent) => {
 </script>
 
 <template>
-  <div @click="clickHandler" @keydown="keydownHandler" @keyup="keyupHandler">
-    <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/styles/core.css

@@ -28,6 +28,7 @@
 
   ::-webkit-scrollbar {
     @apply w-2;
+    @apply h-2;
   }
   ::-webkit-scrollbar-track {
     @apply px-[1px] !bg-surface-50-900-token;

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

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { CssClasses, vClipboard } from "@/index";
+import "highlight.js/styles/github-dark.css";
+import { ref } from "vue";
+import { useHighlight } from "./highlight.service";
+
+const { highlight } = useHighlight();
+
+const props = defineProps({
+  language: {
+    type: String,
+    default: "plaintext",
+  },
+  code: {
+    type: String,
+    default: "",
+  },
+
+  headerClass: {
+    type: String as () => CssClasses,
+  },
+  preClass: {
+    type: String as () => CssClasses,
+  },
+
+  buttonClass: {
+    type: String as () => CssClasses,
+    default: "btn btn-sm variant-soft !text-white",
+  },
+  buttonText: {
+    type: String,
+    default: "Copy",
+  },
+  buttonCopiedText: {
+    type: String,
+    default: "👍",
+  },
+});
+
+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");
+}
+</script>
+
+<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>

package/src/utils/index.ts

@@ -1,7 +1,7 @@
-import CodeBlock from "./code-block/code-block.vue";
+import VCodeBlock from "./code-block/VCodeBlock.vue";
 import { useDarkMode } from "./dark-mode/dark-mode.service";
 import DarkModeSwitch from "./dark-mode/dark-mode.vue";
 import ThemeSwitcher from "./theme/theme-switcher.vue";
 import { useTheme } from "./theme/theme.service";
 
-export { DarkModeSwitch, ThemeSwitcher, useDarkMode, useTheme, CodeBlock };
+export { DarkModeSwitch, ThemeSwitcher, useDarkMode, useTheme, VCodeBlock };

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

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import { CssClasses, vClipboard } from "@/index";
-import "highlight.js/styles/github-dark.css";
-import { computed, ref, useAttrs } from "vue";
-import { useHighlight } from "./highlight.service";
-
-const { highlight } = useHighlight();
-
-const props = defineProps({
-  language: {
-    type: String,
-    default: "plaintext",
-  },
-  code: {
-    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: {
-    type: String as () => CssClasses,
-    default: "rounded-container-token",
-  },
-  shadow: {
-    type: String as () => CssClasses,
-    default: "shadow",
-  },
-
-  button: {
-    type: String as () => CssClasses,
-    default: "btn btn-sm variant-soft !text-white",
-  },
-  buttonLabel: {
-    type: String,
-    default: "Copy",
-  },
-  buttonCopied: {
-    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
-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");
-}
-
-// 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>