@code-coaching/vuetiful 0.0.3 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
     "prebuild": "node 'scripts/intellisense.js'",
@@ -13,6 +13,9 @@
   "peerDependencies": {
     "vue": "^3.2.25"
   },
+  "dependencies": {
+    "highlight.js": "^11.7.0"
+  },
   "devDependencies": {
     "@types/node": "^17.0.14",
     "@vitejs/plugin-vue": "^2.0.0",

package/src/directives/clipboard.ts

@@ -0,0 +1,9 @@
+import { DirectiveBinding } from "vue";
+
+const clipboard = (el: HTMLElement, binding: DirectiveBinding) => {
+  el.addEventListener("click", () => {
+    navigator.clipboard.writeText(binding.value);
+  });
+};
+
+export default clipboard;

package/src/directives/index.ts

@@ -0,0 +1,5 @@
+import vClipboard from './clipboard'
+
+export {
+  vClipboard
+}

package/src/index.ts

@@ -15,6 +15,7 @@ export default { install };
 export * from "./components";
 export * from "./constants";
 export * from "./utils";
+export * from "./directives";
 
 // This type alias is to identify CSS classes within component props, which enables Tailwind IntelliSense
 export type CssClasses = string;

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

@@ -0,0 +1,106 @@
+<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";
+
+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",
+  },
+  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>

package/src/utils/code-block/highlight.ts

@@ -0,0 +1,19 @@
+import hljs from "highlight.js";
+
+const highlighter = hljs;
+
+const useHighlight = () => {
+  const highlight = (code: string, lang: string) => {
+    if (lang && highlighter.getLanguage(lang)) {
+      return highlighter.highlight(lang, code).value;
+    } else {
+      return highlighter.highlightAuto(code).value;
+    }
+  };
+
+  return {
+    highlight,
+  };
+};
+
+export { useHighlight };

package/src/utils/index.ts

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

package/dist/types/utils/MyUtil.d.ts

@@ -1,5 +0,0 @@
-declare function add(a: number, b: number): number;
-declare const _default: {
-    add: typeof add;
-};
-export default _default;

package/src/utils/MyUtil.ts

@@ -1,7 +0,0 @@
-function add(a: number, b: number): number {
-  return a + b;
-}
-
-export default {
-  add,
-};