@code-coaching/vuetiful 0.22.0 → 0.23.1

package/src/utils/theme/theme-switcher.vue

@@ -1,150 +1,80 @@
 <template>
-  <div class="cc-theme-switcher">
-    <VButton :class="`cc-theme-switcher__button ${buttonClasses}`" @click="showPopup = !showPopup">
+  <div class="vuetiful-theme-switcher">
+    <v-button
+      :class="`vuetiful-theme-switcher__button ${classButton}`"
+      @click="showPopup = !showPopup"
+    >
       Theme
-    </VButton>
+    </v-button>
 
     <div
       v-if="showPopup"
-      class="cc-theme-switcher__popup absolute z-10 mt-1 p-4 shadow-xl"
-      :class="classes"
+      class="vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token"
+      :class="`${background} ${text} ${widthPopup} ${classList}`"
     >
-      <div class="space-y-4">
-        <section class="flex items-center justify-between">
-          <h6>Mode</h6>
-          <v-light-switch />
-        </section>
-        <nav class="list-nav -m-4 overflow-y-auto p-4" :class="listClasses">
-          <ul class="flex flex-col gap-4">
-            <li
-              class="h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900"
-              :class="`${listItemClasses} ${
-                chosenTheme === theme.name
-                  ? 'bg-primary-50 text-primary-900'
-                  : 'bg-surface-200 text-surface-900'
-              }`"
-              v-for="(theme, index) in themes"
-              :key="index"
-              @click="loadTheme(theme.name)"
-            >
-              {{ theme.name }}
-            </li>
-          </ul>
-        </nav>
-      </div>
+      <section class="flex items-center justify-between">
+        <div class="text-lg">Mode</div>
+        <v-light-switch />
+      </section>
+      <nav
+        class="vuetiful-theme-switcher__popup-list -m-4 flex flex-col gap-4 overflow-y-auto p-4"
+        :class="`${heightList} ${classList}`"
+      >
+        <v-button
+          class="vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer"
+          v-for="(theme, index) in themes"
+          :class="`${classListItem} ${chosenTheme === theme.name ? 'variant-filled-surface' : ''}`"
+          :key="index"
+          @click="loadTheme(theme.name)"
+        >
+          {{ theme.name }}
+        </v-button>
+      </nav>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { CssClasses, useDarkMode, useTheme, VButton, VLightSwitch } from "@/index";
-import { computed, defineComponent, onMounted, ref } from "vue";
+<script setup lang="ts">
+import { CssClasses, useTheme, VButton, VLightSwitch } from "@/index";
+import { onMounted, ref } from "vue";
 
-export default defineComponent({
-  components: {
-    VLightSwitch,
-    VButton,
+defineProps({
+  background: {
+    type: String as () => CssClasses,
+    default: "bg-surface-50-900-token",
   },
-  props: {
-    bgLight: {
-      type: String as () => CssClasses,
-      default: "bg-surface-50",
-    },
-    bgDark: {
-      type: String as () => CssClasses,
-      default: "bg-surface-900",
-    },
-    textOnLight: {
-      type: String as () => CssClasses,
-      default: "text-surface-900",
-    },
-    textOnDark: {
-      type: String as () => CssClasses,
-      default: "text-surface-50",
-    },
-    width: {
-      type: String as () => CssClasses,
-      default: "w-60",
-    },
-    height: {
-      type: String as () => CssClasses,
-      default: "max-h-64 lg:max-h-[500px]",
-    },
-    ring: {
-      type: String as () => CssClasses,
-      default: "ring-[1px] ring-surface-500/30",
-    },
-    rounded: {
-      type: String as () => CssClasses,
-      default: "rounded-token",
-    },
-    roundedContainer: {
-      type: String as () => CssClasses,
-      default: "rounded-container-token",
-    },
-    buttonClasses: {
-      type: String as () => CssClasses,
-      default: "w-24",
-    },
+  text: {
+    type: String as () => CssClasses,
+    default: "text-surface-900-50-token",
   },
-  setup(props) {
-    const { initializeTheme, loadTheme, themes, chosenTheme } = useTheme();
-    const { currentMode, MODE } = useDarkMode();
-
-    const showPopup = ref(false);
-    onMounted(() => {
-      initializeTheme();
-    });
-
-    const cTransition = `transition-all duration-[200ms]`;
-
-    type OnKeyDownEvent = KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement };
-    function onKeyDown(event: KeyboardEvent): void {
-      if (["Enter", "Space"].includes(event.code)) {
-        event.preventDefault();
-        (event as OnKeyDownEvent).currentTarget.click();
-      }
-    }
 
-    const background = computed(() => {
-      return currentMode.value === MODE.LIGHT ? props.bgLight : props.bgDark;
-    });
-
-    const text = computed(() => {
-      return currentMode.value === MODE.LIGHT ? props.textOnLight : props.textOnDark;
-    });
-
-    const classes = computed(() => {
-      return `${cTransition} 
-      ${background.value} 
-      ${text.value} 
-      ${props.width} 
-      ${props.ring}
-      ${props.roundedContainer}`;
-    });
+  widthPopup: {
+    type: String as () => CssClasses,
+    default: "w-60",
+  },
+  heightList: {
+    type: String as () => CssClasses,
+    default: "max-h-64 lg:max-h-[500px]",
+  },
 
-    const listClasses = computed(() => {
-      return `${cTransition} 
-      ${props.height}`;
-    });
+  classButton: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+  classList: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+  classListItem: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+});
 
-    const listItemClasses = computed(() => {
-      return `${cTransition} 
-      ${props.ring} 
-      ${props.rounded}`;
-    });
+const { initializeTheme, loadTheme, themes, chosenTheme } = useTheme();
 
-    return {
-      onKeyDown,
-      loadTheme,
-      currentMode,
-      classes,
-      chosenTheme,
-      themes,
-      showPopup,
-      listClasses,
-      listItemClasses,
-    };
-  },
+const showPopup = ref(false);
+onMounted(() => {
+  initializeTheme();
 });
 </script>

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

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

package/src/components/atoms/VCodeBlock.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { CssClasses, VButton, vClipboard } from "@/index";
-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,
-  },
-
-  headerClass: {
-    type: String as () => CssClasses,
-    default: "",
-  },
-  preClass: {
-    type: String as () => CssClasses,
-    default: "",
-  },
-
-  buttonClass: {
-    type: String as () => CssClasses,
-    default: "btn-sm",
-  },
-  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 max-w-full 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>
-      <v-button
-        :class="`code-block-btn ${buttonClass}`"
-        @click="onCopyClick()"
-        v-clipboard="props.code"
-      >
-        {{ !copyState ? buttonText : buttonCopiedText }}
-      </v-button>
-    </header>
-    <pre
-      :class="`code-block-pre ${
-        preventOverflow ? 'whitespace-pre-wrap break-all' : 'overflow-auto'
-      } 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/components/molecules/VRailTile.test.ts

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