🎨 Label と input を紐づけ

src/components/newTransaction/NewTransactionTarget.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toastification'
-
 import InputText from '/@/components/shared/InputText.vue'
 import { PlusIcon, TrashIcon } from '@heroicons/vue/24/outline'
 
@@ -11,8 +9,6 @@ interface Props {
 const props = defineProps<Props>()
 const emit = defineEmits<{ (e: 'input', value: string[]): void }>()
 
-const toast = useToast()
-
 function handleEditTarget(index: number, value: string) {
   emit(
     'input',
@@ -24,10 +20,6 @@ function handleAddTarget() {
   emit('input', [...props.targets, ''])
 }
 function handleRemoveTarget(index: number) {
-  if (props.targets.length === 1) {
-    toast.warning('取引相手は1人以上必要です')
-    return
-  }
   emit(
     'input',
     props.targets.filter((_, i) => i !== index)
@@ -37,18 +29,22 @@ function handleRemoveTarget(index: number) {
 
 <template>
   <div class="flex flex-col gap-3">
-    <label class="text-xl">取引相手</label>
+    <label class="text-xl" for="target">取引相手</label>
     <ul class="flex flex-col gap-2">
       <li
         v-for="(target, i) in targets"
         :key="target"
         class="flex items-center gap-3">
         <InputText
+          id="target"
           class="flex-grow"
           :model-value="target"
           placeholder="取引相手"
           @update:model-value="handleEditTarget(i, $event)" />
-        <button class="flex" @click="handleRemoveTarget(i)">
+        <button
+          v-if="props.targets.length > 1"
+          class="flex"
+          @click="handleRemoveTarget(i)">
           <TrashIcon class="w-6 text-red-400" />
         </button>
       </li>

src/components/shared/InputNumber.vue

@@ -7,6 +7,7 @@ interface Props {
   placeholder?: string
   min?: number
   autoFocus?: boolean
+  id?: string
 }
 const props = withDefaults(defineProps<Props>(), {
   required: false,
@@ -34,6 +35,7 @@ onMounted(() => {
 
 <template>
   <input
+    :id="props.id"
     ref="inputRef"
     class="bg-background rounded border border-gray-300 py-1 px-2"
     :min="props.min"

src/components/shared/InputRadioButton.vue

@@ -22,7 +22,7 @@ const value = computed({
 
 <template>
   <div class="flex flex-col gap-1">
-    <label v-for="option in options" :key="option.key" class="text-base">
+    <label v-for="option in options" :key="option.key">
       <input v-model="value" class="mr-1" type="radio" :value="option.value" />
       {{ option.key }}
     </label>

src/components/shared/InputSelectMultiple.vue

@@ -20,6 +20,7 @@ interface Props {
   isDropdownAbove?: boolean
   /* [optionsのkey, modelValueのkey] modelValueをselectedValuesに適用するときに使う*/
   uniqKeys?: [string, string]
+  id?: string
   /* デフォルト幅を設定するため */
   class?: string
 }
@@ -284,6 +285,7 @@ onUnmounted(() => {
           <button type="button" @click="removeValue(selectedValue)">×</button>
         </div>
         <input
+          :id="props.id"
           ref="inputRef"
           v-model="searchQuery"
           class="flex-grow bg-transparent pl-1 focus:outline-none"

src/components/shared/InputSelectSingle.vue

@@ -17,6 +17,7 @@ interface Props {
   disabled?: boolean
   isDropdownAbove?: boolean
   uniqKeys?: [string, string]
+  id?: string
   class?: string
 }
 
@@ -191,6 +192,7 @@ onUnmounted(() => {
           {{ selectedValue.key }}
         </span>
         <input
+          :id="props.id"
           ref="inputRef"
           v-model="searchQuery"
           class="flex-grow bg-transparent focus:outline-none"

src/components/shared/InputSelectTagWithCreation.vue

@@ -9,6 +9,7 @@ import type { Tag } from '/@/features/tag/model'
 
 interface Props {
   modelValue: Tag[]
+  id?: string
 }
 const props = defineProps<Props>()
 const emit = defineEmits<{ (e: 'update:modelValue', value: Tag[]): void }>()
@@ -24,6 +25,7 @@ const value = computed({
 
 <template>
   <InputSelectMultiple
+    :id="props.id"
     v-model="value"
     class="w-full"
     :create-option="

src/pages/NewTransactionPage.vue

@@ -47,9 +47,10 @@ if (!isTagFetched.value) {
     </div>
     <form class="flex flex-col gap-6">
       <div class="flex flex-col gap-3">
-        <label class="text-xl">金額</label>
+        <label class="text-xl" for="amount">金額</label>
         <div>
           <InputNumber
+            id="amount"
             v-model="transaction.amount"
             auto-focus
             class="mr-2"
@@ -66,20 +67,20 @@ if (!isTagFetched.value) {
         :targets="transaction.targets"
         @input="transaction.targets = $event" />
       <div class="flex flex-col gap-3">
-        <label class="text-xl">グループ</label>
+        <label class="text-xl" for="group">グループ</label>
         <InputSelectSingle
+          id="group"
           v-model="transaction.group"
           class="w-full"
           :options="groupOptions"
           placeholder="グループを選択" />
       </div>
       <div class="flex flex-col gap-3">
-        <label class="text-xl">タグ</label>
-        <InputSelectTagWithCreation v-model="transaction.tags" class="" />
+        <label class="text-xl" for="tag">タグ</label>
+        <InputSelectTagWithCreation id="tag" v-model="transaction.tags" />
       </div>
       <div class="text-right">
         <SimpleButton
-          class="!px-5"
           :disabled="isSending"
           font-size="md"
           padding="md"