script setup：Audio系を移行

src/components/AudioAccent.vue

@@ -22,9 +22,7 @@
           @update:model-value="
             previewAccentSlider.qSliderProps['onUpdate:modelValue']
           "
-          @click.stop="
-            undefined; // クリックでアクセント句が選択されないように
-          "
+          @click.stop="stopPropagation"
           @change="previewAccentSlider.qSliderProps.onChange"
           @wheel="previewAccentSlider.qSliderProps.onWheel"
           @pan="previewAccentSlider.qSliderProps.onPan"
@@ -61,58 +59,52 @@
   </template>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { previewSliderHelper } from "@/helpers/previewSliderHelper";
 import { AccentPhrase } from "@/openapi";
-import { defineComponent, computed, PropType } from "vue";
-
-export default defineComponent({
-  name: "AudioAccent",
-
-  props: {
-    accentPhrase: { type: Object as PropType<AccentPhrase>, required: true },
-    accentPhraseIndex: { type: Number, required: true },
-    uiLocked: { type: Boolean, required: true },
-    shiftKeyFlag: { type: Boolean, default: false },
-    onChangeAccent: {
-      type: Function as PropType<
-        (accentPhraseIndex: number, accent: number) => Promise<void>
-      >,
-      required: true,
-    },
-  },
+import { computed } from "vue";
 
-  setup(props) {
-    const changeAccent = (accent: number) =>
-      props.onChangeAccent(props.accentPhraseIndex, accent);
+const props = withDefaults(
+  defineProps<{
+    accentPhrase: AccentPhrase;
+    accentPhraseIndex: number;
+    uiLocked: boolean;
+    shiftKeyFlag?: boolean;
+    onChangeAccent: (
+      accentPhraseIndex: number,
+      accent: number
+    ) => Promise<void>;
+  }>(),
+  {
+    shiftKeyFlag: false,
+  }
+);
 
-    const previewAccentSlider = previewSliderHelper({
-      onChange: changeAccent,
-      modelValue: () => props.accentPhrase.accent,
-      disable: () => props.uiLocked,
-      disableScroll: () => props.shiftKeyFlag,
-      max: () => props.accentPhrase.moras.length,
-      min: () => 1,
-      step: () => 1,
-    });
+const changeAccent = (accent: number) =>
+  props.onChangeAccent(props.accentPhraseIndex, accent);
 
-    const accentLine = computed(() => {
-      const accent = previewAccentSlider.state.currentValue.value ?? 0;
-      return [...Array(props.accentPhrase.moras.length).keys()].map(
-        (index) =>
-          `${index * 40 + 10} ${
-            index + 1 == accent || (index != 0 && index < accent) ? 5 : 45
-          }`
-      );
-    });
+const previewAccentSlider = previewSliderHelper({
+  onChange: changeAccent,
+  modelValue: () => props.accentPhrase.accent,
+  disable: () => props.uiLocked,
+  disableScroll: () => props.shiftKeyFlag,
+  max: () => props.accentPhrase.moras.length,
+  min: () => 1,
+  step: () => 1,
+});
 
-    return {
-      previewAccentSlider,
-      changeAccent,
-      accentLine,
-    };
-  },
+const accentLine = computed(() => {
+  const accent = previewAccentSlider.state.currentValue.value ?? 0;
+  return [...Array(props.accentPhrase.moras.length).keys()].map(
+    (index) =>
+      `${index * 40 + 10} ${
+        index + 1 == accent || (index != 0 && index < accent) ? 5 : 45
+      }`
+  );
 });
+
+// クリックでアクセント句が選択されないように、@click.stopに渡す
+const stopPropagation = undefined;
 </script>
 
 <style scoped lang="scss">