Add: BPM・拍子変更機能を追加

package.json

@@ -135,6 +135,7 @@
     "vite-plugin-node-polyfills": "0.22.0",
     "vite-tsconfig-paths": "5.1.2",
     "vitest": "2.1.2",
+    "vue-component-type-helpers": "2.1.6",
     "vue-tsc": "2.1.10",
     "yargs": "17.2.1"
   }

src/components/Dialog/TempoOrTimeSignatureChangeDialog/CommonDialog.vue

@@ -0,0 +1,89 @@
+<template>
+  <QDialog ref="dialogRef" v-model="modelValue">
+    <QCard class="q-py-sm q-px-md dialog-card">
+      <QCardSection>
+        <div class="text-h5">
+          {{ props.title }}
+        </div>
+      </QCardSection>
+
+      <QSeparator />
+
+      <QCardSection>
+        <QCardActions>
+          <div>{{ props.name }}</div>
+          <QSpace />
+          <slot />
+        </QCardActions>
+      </QCardSection>
+
+      <QSeparator />
+
+      <QCardActions>
+        <QSpace />
+        <QBtn
+          unelevated
+          label="キャンセル"
+          color="toolbar-button"
+          textColor="toolbar-button-display"
+          class="text-no-wrap text-bold q-mr-sm"
+          @click="handleCancel"
+        />
+        <QBtn
+          unelevated
+          :label="okText"
+          color="primary"
+          textColor="display-on-primary"
+          class="text-no-wrap text-bold q-mr-sm"
+          @click="handleOk"
+        />
+      </QCardActions>
+    </QCard>
+  </QDialog>
+</template>
+
+<script setup lang="ts">
+import { useDialogPluginComponent } from "quasar";
+import { computed } from "vue";
+
+const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+
+const modelValue = defineModel<boolean>();
+const props = defineProps<{
+  title: string;
+  mode: "add" | "edit";
+  name: string;
+}>();
+defineSlots<{
+  default(props: Record<string, never>): void;
+}>();
+
+defineEmits({
+  ...useDialogPluginComponent.emitsObject,
+});
+
+const okText = computed(() =>
+  props.mode === "edit" ? "変更する" : "追加する",
+);
+
+const handleOk = () => {
+  onDialogOK();
+};
+
+// キャンセルボタンクリック時
+const handleCancel = () => {
+  onDialogCancel();
+  modelValue.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.dialog-card {
+  width: 700px;
+  max-width: 80vw;
+}
+
+.value-input {
+  width: 60px;
+}
+</style>

src/components/Dialog/TempoOrTimeSignatureChangeDialog/TempoChangeDialog.stories.ts

@@ -0,0 +1,101 @@
+import { userEvent, within, expect, fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/vue3";
+
+import TempoChangeDialog from "./TempoChangeDialog.vue";
+
+const meta: Meta<typeof TempoChangeDialog> = {
+  component: TempoChangeDialog,
+  args: {
+    modelValue: true,
+    tempoChange: undefined,
+    mode: "add",
+
+    onOk: fn(),
+    onHide: fn(),
+  },
+  tags: ["!autodocs"], // ダイアログ系はautodocsのプレビューが正しく表示されないので無効化
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const CreateOpened: Story = {
+  name: "開いている：追加",
+  args: {
+    modelValue: true,
+    mode: "add",
+  },
+};
+export const ChangeOpened: Story = {
+  name: "開いている：変更",
+  args: {
+    modelValue: true,
+    tempoChange: {
+      bpm: 120,
+    },
+    mode: "edit",
+  },
+};
+
+export const ClickOk: Story = {
+  name: "OKボタンを押す：追加",
+  args: { ...CreateOpened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const input = canvas.getByLabelText("テンポ");
+    await userEvent.clear(input);
+    await userEvent.type(input, "100");
+
+    const button = canvas.getByRole("button", { name: /追加する/ });
+    await userEvent.click(button);
+
+    await expect(args["onOk"]).toBeCalledWith({
+      tempoChange: {
+        bpm: 100,
+      },
+    });
+  },
+};
+
+export const ClickDelete: Story = {
+  name: "OKボタンを押す：編集",
+  args: { ...ChangeOpened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const input = canvas.getByLabelText("テンポ");
+    await userEvent.clear(input);
+    await userEvent.type(input, "100");
+
+    const button = canvas.getByRole("button", { name: /変更する/ });
+    await userEvent.click(button);
+
+    await expect(args["onOk"]).toBeCalledWith({
+      tempoChange: {
+        bpm: 100,
+      },
+    });
+  },
+};
+
+export const CancelClose: Story = {
+  name: "キャンセルボタンを押す",
+  args: { ...ChangeOpened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const button = canvas.getByRole("button", { name: /キャンセル/ });
+    await userEvent.click(button);
+
+    await expect(args["onOk"]).not.toBeCalled();
+  },
+};
+
+export const Closed: Story = {
+  name: "閉じている",
+  tags: ["skip-screenshot"],
+  args: {
+    modelValue: false,
+  },
+};

src/components/Dialog/TempoOrTimeSignatureChangeDialog/TempoChangeDialog.vue

@@ -0,0 +1,54 @@
+<template>
+  <CommonDialog
+    v-model="modelValue"
+    title="テンポの変更"
+    name="テンポ"
+    :mode="props.mode"
+    @ok="() => $emit('ok', { tempoChange })"
+    @hide="() => $emit('hide')"
+  >
+    <QInput
+      v-model.number="tempoChange.bpm"
+      type="number"
+      dense
+      hideBottomSpace
+      class="value-input"
+      aria-label="テンポ"
+    />
+  </CommonDialog>
+</template>
+
+<script setup lang="ts">
+import { QInput, useDialogPluginComponent } from "quasar";
+import { ref } from "vue";
+import CommonDialog from "./CommonDialog.vue";
+import { Tempo } from "@/store/type";
+import { DEFAULT_BPM } from "@/sing/domain";
+import { cloneWithUnwrapProxy } from "@/helpers/cloneWithUnwrapProxy";
+
+const modelValue = defineModel<boolean>();
+const props = defineProps<{
+  tempoChange: Omit<Tempo, "position"> | undefined;
+  mode: "add" | "edit";
+}>();
+defineEmits({
+  ...useDialogPluginComponent.emitsObject,
+});
+
+const tempoChange = ref(
+  cloneWithUnwrapProxy(props.tempoChange) || {
+    bpm: DEFAULT_BPM,
+  },
+);
+</script>
+
+<style scoped lang="scss">
+.dialog-card {
+  width: 700px;
+  max-width: 80vw;
+}
+
+.value-input {
+  width: 60px;
+}
+</style>