Change: QInputにする

VOICEVOX · Nov 21, 2024 · 9ea16a7 · 9ea16a7
1 parent dc08dc1
commit 9ea16a7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 34 deletions.
diff --git 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
@@ -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,