refactor: rearrange code to follow vue3 convention

tsedio · Apr 25, 2024 · b3ca41a · b3ca41a
1 parent c380807
commit b3ca41a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 148 deletions.
diff --git a/docs/.vitepress/theme/molecules/button-badge/ButtonBadge.vue b/docs/.vitepress/theme/molecules/button-badge/ButtonBadge.vue
@@ -1,5 +1,36 @@
+<script setup lang="ts">
+import Link from "../link/ExternalLink.vue";
+import type {GitHubUser} from "../../composables/api/interfaces/GithubUser";
+export interface ButtonBadgeProps {
+  showTitle: boolean;
+  width: string | number;
+  bgColor: string;
+  color: string;
+  blur: number;
+  textSize: string;
+  shadow: string;
+  padding: string | number;
+  fontWeight: string;
+}
+
+interface Props extends ButtonBadgeProps {
+  item: GitHubUser;
+}
+
+withDefaults(defineProps<Props>(), {
+  showTitle: true,
+  width: 60,
+  bgColor: "gray-lighter",
+  color: "blue",
+  blur: 0,
+  textSize: "xxs",
+  shadow: "",
+  padding: 5,
+  fontWeight: "400"
+});
+</script>
 <template>
-  <VPLink
+  <Link
     :href="item?.href"
     :outbound="false"
     :title="item?.login"
@@ -28,84 +59,5 @@
       :style="{width: `${width}px`}"
       >{{ item?.login }}</span
     >
-  </VPLink>
+  </Link>
 </template>
-
-<script setup lang="ts">
-import VPLink from "vitepress/theme";
-import type {GitHubUser} from "../../composables/api/interfaces/GithubUser";
-
-const customLazyloadDirective = {
-  mounted(el: HTMLElement) {
-    function display() {
-      const imgEl = el.querySelector("img");
-
-      if (imgEl) {
-        imgEl.addEventListener("load", () => {
-          setTimeout(() => {
-            imgEl.classList.remove("opacity-0");
-          }, 100);
-        });
-        imgEl.addEventListener("error", () => console.log("error"));
-        imgEl.src = imgEl.dataset.url;
-      } else {
-        const iframe = el.querySelector("iframe");
-
-        if (iframe) {
-          iframe.src = iframe.dataset.url;
-        }
-      }
-    }
-
-    function handleIntersect(entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          display();
-          observer.unobserve(el);
-        }
-      });
-    }
-
-    function createObserver() {
-      const options = {
-        root: null,
-        threshold: "0"
-      };
-      const observer = new IntersectionObserver(handleIntersect, options as unknown as IntersectionObserverInit);
-      observer.observe(el);
-    }
-
-    if (window["IntersectionObserver"]) {
-      createObserver();
-    } else {
-      display();
-    }
-  }
-};
-
-interface Props {
-  item: GitHubUser;
-  showTitle: boolean;
-  width: string | number;
-  bgColor: string;
-  color: string;
-  blur: string | number;
-  textSize: string;
-  shadow: string;
-  padding: string | number;
-  fontWeight: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  item: () => {},
-  showTitle: true,
-  width: 60,
-  bgColor: "gray-lighter",
-  color: "blue",
-  blur: 0,
-  textSize: "xxs",
-  shadow: "",
-  padding: 5,
-  fontWeight: "400"
-});
-</script>
diff --git a/docs/.vitepress/theme/molecules/button-badge/ButtonBadges.vue b/docs/.vitepress/theme/molecules/button-badge/ButtonBadges.vue
@@ -1,44 +1,11 @@
-<template>
-  <div :class="`-m-${padding} mb-5`">
-    <ul class="reset-list flex flex-wrap items-center">
-      <li v-for="item in items" :key="item.login" :class="`p-${padding} ${liClass}`">
-        <h4>{{ item.login }}</h4>
-        <h5>{{ item.contributions }}</h5>
-        <h5>{{ item.src }}</h5>
-        <ButtonBadge
-          :item="item"
-          :show-title="showTitle"
-          :bg-color="bgColor"
-          :color="color"
-          :text-size="textSize"
-          :blur="blur"
-          :width="width"
-          :shadow="shadow"
-          :font-weight="fontWeight"
-          :padding="innerPadding"
-        />
-      </li>
-    </ul>
-  </div>
-</template>
-
 <script setup lang="ts">
+import ButtonBadge, {type ButtonBadgeProps} from "./ButtonBadge.vue";
 import type {GitHubUser} from "../../composables/api/interfaces/GithubUser";
-import ButtonBadge from "./ButtonBadge.vue";
 
-interface Props {
+interface Props extends ButtonBadgeProps {
   items: GitHubUser[];
-  showTitle: boolean;
-  width: string | number;
-  bgColor: string;
-  color: string;
-  blur: number;
-  textSize: string;
-  shadow: string;
-  padding: string | number;
-  innerPadding: string | number;
-  fontWeight: string;
-  liClass: string;
+  innerPadding?: number;
+  liClass?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -57,3 +24,16 @@ const props = withDefaults(defineProps<Props>(), {
   liClass: ""
 });
 </script>
+
+<template>
+  <div :class="`-m-${props.padding} mb-5`">
+    <ul class="reset-list flex flex-wrap items-center">
+      <li v-for="item in props.items" :key="item.login" :class="`p-${padding} ${liClass}`">
+        <h4>{{ item.login }}</h4>
+        <h5>{{ item.contributions }}</h5>
+        <h5>{{ item.src }}</h5>
+        <ButtonBadge v-bind="props" :item="item" />
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/molecules/contributors/ContributorItems.vue b/docs/.vitepress/theme/molecules/contributors/ContributorItems.vue
@@ -1,38 +1,11 @@
-<template>
-  <ButtonBadges
-    v-if="contributors.length"
-    :items="contributors"
-    :show-title="showTitle"
-    :font-weight="fontWeight"
-    :shadow="shadow"
-    :padding="padding"
-    :inner-padding="innerPadding"
-    :bg-color="bgColor"
-    :color="color"
-    :text-size="textSize"
-    :blur="blur"
-    :width="width"
-  />
-</template>
-
 <script setup lang="ts">
-import ButtonBadges from "../button-badge/ButtonBadges.vue";
 import type {GitHubUser} from "../../composables/api/interfaces/GithubUser";
+import ButtonBadges from "../button-badge/ButtonBadges.vue";
+import type {ButtonBadgeProps} from "../button-badge/ButtonBadge.vue";
 
-interface Props {
+interface Props extends ButtonBadgeProps {
   contributors: GitHubUser[];
-  showTitle: boolean;
-  width: string | number;
-  bgColor: string;
-  color: string;
-  blur: number;
-  textSize: string;
-  shadow: string;
-  padding: string | number;
-  innerPadding: string | number;
-  fontWeight: string;
   liClass: string;
-  testUser: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -50,3 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
   liClass: ""
 });
 </script>
+
+<template>
+  <ButtonBadges v-if="contributors.length" v-bind="props" :items="contributors" />
+</template>