Merge pull request star-history#123 from bytebase/refactor/vue-code-s…

…tyle refactor: vue code style with setup
WooodHead · Jan 25, 2022 · 42b341d · 42b341d
2 parents 3585cbe + 978938d
commit 42b341d
Show file tree

Hide file tree

Showing 17 changed files with 846 additions and 1,031 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,11 +1,3 @@
 <template>
   <router-view />
 </template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "App",
-});
-</script>
diff --git a/src/components/BytebaseBanner.vue b/src/components/BytebaseBanner.vue
@@ -1,18 +1,20 @@
 <template>
-  <div class="w-full px-3 max-w-2xl mx-auto flex flex-col justify-center items-center">
+  <div
+    class="w-full px-3 max-w-2xl mx-auto flex flex-col justify-center items-center"
+  >
     <p class="mb-2 font-semibold">
       Sponsored by
       <a
         class="text-blue-500 hover:opacity-80 underline"
         href="https://bytebase.com"
         target="_blank"
-      >Bytebase</a>
+      >
+        Bytebase
+      </a>
     </p>
     <p class="mb-2 text-gray-600">
       Open source, web-based database schema change and version control for
-      <span
-        class="font-semibold"
-      >Teams</span>
+      <span class="font-semibold">Teams</span>
     </p>
     <a class="mt-2" href="https://bytebase.com/" target="_blank">
       <img class="w-auto max-w-full" src="/bytebase.webp" alt="bytebase" />

diff --git a/src/components/Charts/StarXYChart.vue b/src/components/Charts/StarXYChart.vue
@@ -7,8 +7,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUpdated, ref } from "vue";
+<script lang="ts" setup>
+import { onMounted, onUpdated, ref } from "vue";
 // For customizing multi mode chart: base on create date or timeline, we have rewrited the chart.xkcd's XY chart with TypeScript.
 // Here are some reasons about this motivation.
 //
@@ -22,63 +22,54 @@ import { defineComponent, onMounted, onUpdated, ref } from "vue";
 // 3. Totally customizable.
 import XYChart, { XYChartData } from "../../packages/xy-chart";
 
-export default defineComponent({
-  name: "StarXYChart",
-  props: {
-    classname: {
-      type: String,
-      default: "",
-    },
-    data: {
-      type: Object as () => XYChartData,
-    },
-    chartMode: String,
-    timeFormat: String,
+const props = defineProps({
+  classname: {
+    type: String,
+    default: "",
   },
-  setup(props) {
-    const svgElRef = ref<SVGSVGElement | null>(null);
-
-    const drawStarChart = (data: XYChartData) => {
-      if (svgElRef.value) {
-        svgElRef.value.innerHTML = "";
+  data: {
+    type: Object as () => XYChartData,
+  },
+  chartMode: String,
+  timeFormat: String,
+});
 
-        XYChart(
-          svgElRef.value,
-          {
-            title: "Star history",
-            xLabel: props.chartMode === "Timeline" ? "Timeline" : "Date",
-            yLabel: "GitHub Stars",
-            data: {
-              datasets: data.datasets,
-            },
-          },
-          {
-            xTickLabelType: props.chartMode === "Date" ? "Date" : "Number",
-          }
-        );
-      }
-    };
+const svgElRef = ref<SVGSVGElement | null>(null);
 
-    onMounted(() => {
-      if (props.data) {
-        drawStarChart(props.data);
-      }
-    });
+const drawStarChart = (data: XYChartData) => {
+  if (svgElRef.value) {
+    svgElRef.value.innerHTML = "";
 
-    onUpdated(() => {
-      if (props.data) {
-        drawStarChart(props.data);
+    XYChart(
+      svgElRef.value,
+      {
+        title: "Star history",
+        xLabel: props.chartMode === "Timeline" ? "Timeline" : "Date",
+        yLabel: "GitHub Stars",
+        data: {
+          datasets: data.datasets,
+        },
+      },
+      {
+        xTickLabelType: props.chartMode === "Date" ? "Date" : "Number",
       }
-    });
+    );
+  }
+};
 
-    const handleSVGElementClick = () => {
-      // Maybe we can capture the clicked svg element to expand chart functions.
-    };
+onMounted(() => {
+  if (props.data) {
+    drawStarChart(props.data);
+  }
+});
 
-    return {
-      svgElRef,
-      handleSVGElementClick,
-    };
-  },
+onUpdated(() => {
+  if (props.data) {
+    drawStarChart(props.data);
+  }
 });
+
+const handleSVGElementClick = () => {
+  // Maybe we can capture the clicked svg element to expand chart functions.
+};
 </script>
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
@@ -1,33 +1,27 @@
 <template>
   <div
     class="fixed w-full px-3 md:px-0 h-full flex flex-col justify-center items-center bg-black bg-opacity-60 z-50 top-0 left-0"
-    :class="classname"
+    :class="props.classname"
   >
     <slot></slot>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted } from "vue";
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from "vue";
 
-export default defineComponent({
-  name: "Dialog",
-  props: {
-    classname: {
-      type: String,
-      default: "",
-    },
+const props = defineProps({
+  classname: {
+    type: String,
+    default: "",
   },
-  setup() {
-    onMounted(() => {
-      document.body.classList.add("overflow-hidden");
-    });
+});
 
-    onUnmounted(() => {
-      document.body.classList.remove("overflow-hidden");
-    });
+onMounted(() => {
+  document.body.classList.add("overflow-hidden");
+});
 
-    return {};
-  },
+onUnmounted(() => {
+  document.body.classList.remove("overflow-hidden");
 });
 </script>
diff --git a/src/components/GenerateEmbedCodeDialog.vue b/src/components/GenerateEmbedCodeDialog.vue
@@ -72,8 +72,8 @@
   </Dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, reactive, watch } from "vue";
+<script lang="ts" setup>
+import { onMounted, reactive, watch } from "vue";
 import toast from "../helpers/toast";
 import utils from "../helpers/utils";
 import useAppStore from "../store";
@@ -84,55 +84,44 @@ interface State {
   token: string;
 }
 
-export default defineComponent({
-  name: "GenerateEmbedCodeDialog",
-  components: { Dialog },
-  emits: ["close"],
-  setup(_, { emit }) {
-    const store = useAppStore();
-    const state = reactive<State>({
-      embedCode: "",
-      token: store.token,
-    });
+const emit = defineEmits(["close"]);
 
-    onMounted(() => {
-      state.embedCode = `<iframe style="width:100%;height:auto;min-width:600px;min-height:400px;" src="${
-        window.location.origin
-      }/embed?secret=${btoa(state.token)}#${store.repos.join(
-        "&"
-      )}&Date" frameBorder="0"></iframe>`;
-    });
+const store = useAppStore();
+const state = reactive<State>({
+  embedCode: "",
+  token: store.token,
+});
 
-    watch(
-      () => [state.token],
-      () => {
-        state.embedCode = `<iframe style="width:100%;height:auto;min-width:600px;min-height:400px;" src="${
-          window.location.origin
-        }/embed?secret=${btoa(state.token)}#${store.repos.join(
-          "&"
-        )}&Date" frameBorder="0"></iframe>`;
-      }
-    );
+onMounted(() => {
+  state.embedCode = `<iframe style="width:100%;height:auto;min-width:600px;min-height:400px;" src="${
+    window.location.origin
+  }/embed?secret=${btoa(state.token)}#${store.repos.join(
+    "&"
+  )}&Date" frameBorder="0"></iframe>`;
+});
 
-    const handleCopyBtnClick = () => {
-      if (state.token === "") {
-        toast.warn("Please input the token");
-        return;
-      }
+watch(
+  () => [state.token],
+  () => {
+    state.embedCode = `<iframe style="width:100%;height:auto;min-width:600px;min-height:400px;" src="${
+      window.location.origin
+    }/embed?secret=${btoa(state.token)}#${store.repos.join(
+      "&"
+    )}&Date" frameBorder="0"></iframe>`;
+  }
+);
 
-      utils.copyTextToClipboard(state.embedCode);
-      toast.succeed("Embed code copied");
-    };
+const handleCopyBtnClick = () => {
+  if (state.token === "") {
+    toast.warn("Please input the token");
+    return;
+  }
 
-    const handleCloseBtnClick = () => {
-      emit("close");
-    };
+  utils.copyTextToClipboard(state.embedCode);
+  toast.succeed("Embed code copied");
+};
 
-    return {
-      state,
-      handleCloseBtnClick,
-      handleCopyBtnClick,
-    };
-  },
-});
+const handleCloseBtnClick = () => {
+  emit("close");
+};
 </script>
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -95,8 +95,8 @@
   />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, reactive } from "vue";
+<script lang="ts" setup>
+import { computed, reactive } from "vue";
 import useAppStore from "../store";
 import TokenSettingDialog from "./TokenSettingDialog.vue";
 
@@ -105,38 +105,25 @@ interface State {
   showSetTokenDialog: boolean;
 }
 
-export default defineComponent({
-  name: "Header",
-  components: { TokenSettingDialog },
-  setup() {
-    const store = useAppStore();
-    const state = reactive<State>({
-      showDropMenu: false,
-      showSetTokenDialog: false,
-    });
-    const token = computed(() => {
-      return store.token;
-    });
+const store = useAppStore();
+const state = reactive<State>({
+  showDropMenu: false,
+  showSetTokenDialog: false,
+});
 
-    const handleSetTokenBtnClick = () => {
-      state.showSetTokenDialog = true;
-    };
+const token = computed(() => {
+  return store.token;
+});
 
-    const handleSetTokenDialogClose = () => {
-      state.showSetTokenDialog = false;
-    };
+const handleSetTokenBtnClick = () => {
+  state.showSetTokenDialog = true;
+};
 
-    const handleToggleDropMenuBtnClick = () => {
-      state.showDropMenu = !state.showDropMenu;
-    };
+const handleSetTokenDialogClose = () => {
+  state.showSetTokenDialog = false;
+};
 
-    return {
-      state,
-      token,
-      handleSetTokenBtnClick,
-      handleToggleDropMenuBtnClick,
-      handleSetTokenDialogClose,
-    };
-  },
-});
+const handleToggleDropMenuBtnClick = () => {
+  state.showDropMenu = !state.showDropMenu;
+};
 </script>