From 9ea16a7db5474d0aed829917bc8c86c806a4e689 Mon Sep 17 00:00:00 2001
From: sevenc-nanashi <sevenc7c@sevenc7c.com>
Date: Thu, 21 Nov 2024 20:08:22 +0900
Subject: [PATCH] =?UTF-8?q?Change:=20QInput=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TimeSignatureChangeDialog.stories.ts      | 26 +++++--------------
 .../TimeSignatureChangeDialog.vue             | 19 ++++----------
 2 files changed, 11 insertions(+), 34 deletions(-)

diff --git a/src/components/Dialog/TempoOrTimeSignatureChangeDialog/TimeSignatureChangeDialog.stories.ts b/src/components/Dialog/TempoOrTimeSignatureChangeDialog/TimeSignatureChangeDialog.stories.ts
index e4441ff424..0e4437c2fb 100644
--- a/src/components/Dialog/TempoOrTimeSignatureChangeDialog/TimeSignatureChangeDialog.stories.ts
+++ b/src/components/Dialog/TempoOrTimeSignatureChangeDialog/TimeSignatureChangeDialog.stories.ts
@@ -17,16 +17,6 @@ const meta: Meta<typeof TimeSignatureChangeDialog> = {
   },
   tags: ["!autodocs"], // ダイアログ系はautodocsのプレビューが正しく表示されないので無効化
 };
-const findOption = async (
-  canvas: BoundFunctions<typeof queries>,
-  text: string,
-) => {
-  const maybeElement = await canvas
-    .findAllByRole("option")
-    .then((els) => els.find((el) => el.textContent === text));
-  if (!maybeElement) throw new Error("Element not found");
-  return maybeElement;
-};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -56,11 +46,9 @@ export const ClickOk: Story = {
   play: async ({ args }) => {
     const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
 
-    const selectRoot = canvas.getByLabelText("拍子の分子");
-    await userEvent.click(selectRoot);
-
-    const option = await findOption(canvas, "3");
-    await userEvent.click(option);
+    const input = canvas.getByLabelText("拍子の分子");
+    await userEvent.clear(input);
+    await userEvent.type(input, "3");
 
     const button = canvas.getByRole("button", { name: /追加する/ });
     await userEvent.click(button);
@@ -80,11 +68,9 @@ export const ClickDelete: Story = {
   play: async ({ args }) => {
     const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
 
-    const selectRoot = canvas.getByLabelText("拍子の分子");
-    await userEvent.click(selectRoot);
-
-    const option = await findOption(canvas, "6");
-    await userEvent.click(option);
+    const input = canvas.getByLabelText("拍子の分子");
+    await userEvent.clear(input);
+    await userEvent.type(input, "6");
 
     const button = canvas.getByRole("button", { name: /変更する/ });
     await userEvent.click(button);
diff --git a/src/components/Dialog/TempoOrTimeSignatureChangeDialog/TimeSignatureChangeDialog.vue b/src/components/Dialog/TempoOrTimeSignatureChangeDialog/TimeSignatureChangeDialog.vue
index d710bc78be..8a89d9ace5 100644
--- a/src/components/Dialog/TempoOrTimeSignatureChangeDialog/TimeSignatureChangeDialog.vue
+++ b/src/components/Dialog/TempoOrTimeSignatureChangeDialog/TimeSignatureChangeDialog.vue
@@ -7,14 +7,12 @@
     @ok="() => $emit('ok', { timeSignatureChange })"
     @hide="() => $emit('hide')"
   >
-    <QSelect
-      v-model="timeSignatureChange.beats"
-      :options="beatsOptions"
-      mapOptions
-      emitValue
+    <QInput
+      v-model.number="timeSignatureChange.beats"
+      type="number"
+      min="1"
+      max="32"
       dense
-      userInputs
-      optionsDense
       transitionShow="none"
       transitionHide="none"
       class="value-input"
@@ -61,13 +59,6 @@ const timeSignatureChange = ref(
   },
 );
 
-const beatsOptions = computed(() => {
-  return Array.from({ length: 32 }, (_, i) => ({
-    label: (i + 1).toString(),
-    value: i + 1,
-  }));
-});
-
 const beatTypeOptions = BEAT_TYPES.map((beatType) => ({
   label: beatType.toString(),
   value: beatType,