script setup：マークダウン系のコンポーネントを移行 (#1093)

* Update: vueとquasarを更新 * Delete: @vue/compiler-sfcを削除 * Migrate: AcceptRetrieveTelemetryDialog.vueを移行 * Migrate: AcceptTermsDialog.vueを移行 * Migrate: HelpPolicy.vueを移行 * Migrate: HowToUse.vueを移行 * Migrate: OssComunityInfo.vueを移行 * Migrate: QAndA.vueを移行
VOICEVOX · Jan 7, 2023 · 9869e23 · 9869e23
1 parent 82599ef
commit 9869e23
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 140 deletions.
diff --git a/src/components/AcceptRetrieveTelemetryDialog.vue b/src/components/AcceptRetrieveTelemetryDialog.vue
@@ -63,53 +63,41 @@
   </q-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, ref, onMounted } from "vue";
+<script setup lang="ts">
+import { computed, ref, onMounted } from "vue";
 import { useStore } from "@/store";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 
-export default defineComponent({
-  name: "AcceptRetrieveTelemetryDialog",
+const props =
+  defineProps<{
+    modelValue: boolean;
+  }>();
+const emit =
+  defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+  }>();
 
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-  },
+const store = useStore();
 
-  setup(props, { emit }) {
-    const store = useStore();
-
-    const modelValueComputed = computed({
-      get: () => props.modelValue,
-      set: (val) => emit("update:modelValue", val),
-    });
-
-    const handler = (acceptRetrieveTelemetry: boolean) => {
-      store.dispatch("SET_ACCEPT_RETRIEVE_TELEMETRY", {
-        acceptRetrieveTelemetry: acceptRetrieveTelemetry
-          ? "Accepted"
-          : "Refused",
-      });
+const modelValueComputed = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
 
-      modelValueComputed.value = false;
-    };
+const handler = (acceptRetrieveTelemetry: boolean) => {
+  store.dispatch("SET_ACCEPT_RETRIEVE_TELEMETRY", {
+    acceptRetrieveTelemetry: acceptRetrieveTelemetry ? "Accepted" : "Refused",
+  });
 
-    const md = useMarkdownIt();
-    const privacyPolicy = ref("");
-    onMounted(async () => {
-      privacyPolicy.value = md.render(
-        await store.dispatch("GET_PRIVACY_POLICY_TEXT")
-      );
-    });
+  modelValueComputed.value = false;
+};
 
-    return {
-      modelValueComputed,
-      handler,
-      privacyPolicy,
-    };
-  },
+const md = useMarkdownIt();
+const privacyPolicy = ref("");
+onMounted(async () => {
+  privacyPolicy.value = md.render(
+    await store.dispatch("GET_PRIVACY_POLICY_TEXT")
+  );
 });
 </script>
 

diff --git a/src/components/AcceptTermsDialog.vue b/src/components/AcceptTermsDialog.vue
@@ -60,50 +60,40 @@
   </q-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, ref, onMounted } from "vue";
+<script setup lang="ts">
+import { computed, ref, onMounted } from "vue";
 import { useStore } from "@/store";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 
-export default defineComponent({
-  name: "AcceptTermsDialog",
+const props =
+  defineProps<{
+    modelValue: boolean;
+  }>();
+const emit =
+  defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+  }>();
 
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-  },
+const store = useStore();
 
-  setup(props, { emit }) {
-    const store = useStore();
-
-    const modelValueComputed = computed({
-      get: () => props.modelValue,
-      set: (val) => emit("update:modelValue", val),
-    });
-
-    const handler = (acceptTerms: boolean) => {
-      store.dispatch("SET_ACCEPT_TERMS", {
-        acceptTerms: acceptTerms ? "Accepted" : "Rejected",
-      });
-      !acceptTerms ? store.dispatch("CHECK_EDITED_AND_NOT_SAVE") : undefined;
+const modelValueComputed = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
 
-      modelValueComputed.value = false;
-    };
+const handler = (acceptTerms: boolean) => {
+  store.dispatch("SET_ACCEPT_TERMS", {
+    acceptTerms: acceptTerms ? "Accepted" : "Rejected",
+  });
+  !acceptTerms ? store.dispatch("CHECK_EDITED_AND_NOT_SAVE") : undefined;
 
-    const md = useMarkdownIt();
-    const terms = ref("");
-    onMounted(async () => {
-      terms.value = md.render(await store.dispatch("GET_POLICY_TEXT"));
-    });
+  modelValueComputed.value = false;
+};
 
-    return {
-      modelValueComputed,
-      handler,
-      terms,
-    };
-  },
+const md = useMarkdownIt();
+const terms = ref("");
+onMounted(async () => {
+  terms.value = md.render(await store.dispatch("GET_POLICY_TEXT"));
 });
 </script>
 

diff --git a/src/components/HelpPolicy.vue b/src/components/HelpPolicy.vue
@@ -4,30 +4,20 @@
   </q-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 
-export default defineComponent({
-  props: {
-    policy: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const policyHtml = ref("");
+const props =
+  defineProps<{
+    policy: string;
+  }>();
+const policyHtml = ref("");
 
-    const md = useMarkdownIt();
+const md = useMarkdownIt();
 
-    onMounted(async () => {
-      policyHtml.value = md.render(props.policy);
-    });
-
-    return {
-      policyHtml,
-    };
-  },
+onMounted(async () => {
+  policyHtml.value = md.render(props.policy);
 });
 </script>
 

diff --git a/src/components/HowToUse.vue b/src/components/HowToUse.vue
@@ -4,22 +4,16 @@
   </q-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
 import { useStore } from "@/store";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-export default defineComponent({
-  setup() {
-    const store = useStore();
-    const howToUse = ref("");
-    const md = useMarkdownIt();
-    onMounted(async () => {
-      howToUse.value = md.render(await store.dispatch("GET_HOW_TO_USE_TEXT"));
-    });
-    return {
-      howToUse,
-    };
-  },
+
+const store = useStore();
+const howToUse = ref("");
+const md = useMarkdownIt();
+onMounted(async () => {
+  howToUse.value = md.render(await store.dispatch("GET_HOW_TO_USE_TEXT"));
 });
 </script>
 

diff --git a/src/components/OssCommunityInfo.vue b/src/components/OssCommunityInfo.vue
@@ -4,24 +4,18 @@
   </q-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
 import { useStore } from "@/store";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-export default defineComponent({
-  setup() {
-    const store = useStore();
-    const ossCommunityInfos = ref("");
-    const md = useMarkdownIt();
-    onMounted(async () => {
-      ossCommunityInfos.value = md.render(
-        await store.dispatch("GET_OSS_COMMUNITY_INFOS")
-      );
-    });
-    return {
-      ossCommunityInfos,
-    };
-  },
+
+const store = useStore();
+const ossCommunityInfos = ref("");
+const md = useMarkdownIt();
+onMounted(async () => {
+  ossCommunityInfos.value = md.render(
+    await store.dispatch("GET_OSS_COMMUNITY_INFOS")
+  );
 });
 </script>
 

diff --git a/src/components/QAndA.vue b/src/components/QAndA.vue
@@ -4,26 +4,18 @@
   </q-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
 import { useStore } from "@/store";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 
-export default defineComponent({
-  setup() {
-    const store = useStore();
-    const qAndA = ref("");
+const store = useStore();
+const qAndA = ref("");
 
-    const md = useMarkdownIt();
+const md = useMarkdownIt();
 
-    onMounted(async () => {
-      qAndA.value = md.render(await store.dispatch("GET_Q_AND_A_TEXT"));
-    });
-
-    return {
-      qAndA,
-    };
-  },
+onMounted(async () => {
+  qAndA.value = md.render(await store.dispatch("GET_Q_AND_A_TEXT"));
 });
 </script>