Merge pull request #189 from ogu-kazemiya/refactor/defineModel

defineModelに書き換え

src/components/shared/InputNumber.vue

@@ -2,26 +2,22 @@
 import { ref, onMounted } from 'vue'
 
 interface Props {
-  modelValue: number
   required?: boolean
   placeholder?: string
   min?: number
   autoFocus?: boolean
 }
+const model = defineModel<number>({ required: true })
 const props = withDefaults(defineProps<Props>(), {
   required: false,
   placeholder: '',
   min: 0,
   autoFocus: false
 })
-const emit = defineEmits<{
-  (e: 'input', value: number): void
-  (e: 'update:modelValue', modelValue: number): void
-}>()
 const inputRef = ref<HTMLInputElement | null>(null)
 
 function handleInput(value: string) {
-  emit('update:modelValue', Number(value))
+  model.value = Number(value)
 }
 
 onMounted(() => {
@@ -40,6 +36,6 @@ onMounted(() => {
     :placeholder="props.placeholder"
     :required="props.required"
     type="number"
-    :value="props.modelValue"
+    :value="model"
     @input="handleInput(($event.target as HTMLInputElement).value)" />
 </template>

src/components/shared/InputRadioButton.vue

@@ -1,29 +1,19 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-
 interface Props {
-  modelValue: string
   options: Option[]
 }
 interface Option {
   key: string
   value: string
 }
+const model = defineModel<string>({ required: true })
 const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
-
-const value = computed({
-  get: () => props.modelValue,
-  set: v => emit('update:modelValue', v)
-})
 </script>
 
 <template>
   <div class="space-x-4">
-    <label v-for="option in options" :key="option.key">
-      <input v-model="value" type="radio" :value="option.value" />
+    <label v-for="option in props.options" :key="option.key">
+      <input v-model="model" type="radio" :value="option.value" />
       {{ option.key }}
     </label>
   </div>

src/components/shared/InputSelectTagWithCreation.vue

@@ -1,30 +1,20 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
 
 import { useTagStore } from '/@/stores/tag'
 
 import InputSelectMultiple from '/@/components/shared/InputSelectMultiple.vue'
 import type { Tag } from '/@/features/tag/model'
 
-interface Props {
-  modelValue: Tag[]
-}
-const props = defineProps<Props>()
-const emit = defineEmits<{ (e: 'update:modelValue', value: Tag[]): void }>()
+const model = defineModel<Tag[]>({ required: true })
 
 const tagStore = useTagStore()
 const { tagOptions } = storeToRefs(tagStore)
-
-const value = computed({
-  get: () => props.modelValue,
-  set: v => emit('update:modelValue', v)
-})
 </script>
 
 <template>
   <InputSelectMultiple
-    v-model="value"
+    v-model="model"
     :create-option="
       (tag: string) => ({ name: tag, id: '', created_at: '', updated_at: '' })
     "

src/components/shared/InputText.vue

@@ -2,25 +2,21 @@
 import { onMounted, ref } from 'vue'
 
 interface Props {
-  modelValue: string
   required?: boolean
   placeholder?: string
   autoFocus?: boolean
 }
 
+const model = defineModel<string>({ required: true })
 const props = withDefaults(defineProps<Props>(), {
   required: false,
   placeholder: '',
   autoFocus: false
 })
 const inputRef = ref<HTMLInputElement | null>(null)
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', modelValue: string): void
-}>()
-
 function handleInput(value: string) {
-  emit('update:modelValue', value)
+  model.value = value
 }
 
 onMounted(() => {
@@ -37,6 +33,6 @@ onMounted(() => {
     class="bg-white rounded border border-gray-300 py-1 px-2"
     :placeholder="props.placeholder"
     :required="props.required"
-    :value="props.modelValue"
-    @change="handleInput(($event.target as HTMLInputElement).value)" />
+    :value="model"
+    @input="handleInput(($event.target as HTMLInputElement).value)" />
 </template>

src/components/shared/InputTextarea.vue

@@ -2,25 +2,22 @@
 import { ref, onMounted } from 'vue'
 
 interface Props {
-  modelValue: string
   required?: boolean
   placeholder?: string
   autoFocus?: boolean
 }
 
+const model = defineModel<string>({ required: true })
 const props = withDefaults(defineProps<Props>(), {
   required: false,
   placeholder: '',
   autoFocus: false
 })
-const emit = defineEmits<{
-  (e: 'update:modelValue', modelValue: string): void
-}>()
 
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
 
 function handleInput(value: string) {
-  emit('update:modelValue', value)
+  model.value = value
 }
 
 onMounted(() => {
@@ -37,6 +34,6 @@ onMounted(() => {
     class="bg-background min-h-32 rounded border border-gray-300 px-3 py-2"
     :placeholder="props.placeholder"
     :required="required"
-    :value="props.modelValue"
+    :value="model"
     @input="handleInput(($event.target as HTMLTextAreaElement).value)" />
 </template>

src/components/shared/MarkdownTextarea.vue

@@ -10,16 +10,15 @@ type TabType = 'input' | 'preview'
 
 interface Props {
   placeholder?: string
-  modelValue: string
   templates?: readonly { name: string; value: string }[]
   autoFocus?: boolean
 }
 
+const model = defineModel<string>({ required: true })
 const props = withDefaults(defineProps<Props>(), {
   placeholder: '',
   autoFocus: false
 })
-const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
 
 const currentTab = ref<TabType>('input')
 const selectedTemplate = ref('')
@@ -34,10 +33,14 @@ const templateOptions = computed(
     }) ?? []
 )
 
-function setTemplate(template: string) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- FIXME: InputSelectSingleを直す
+function setTemplate(template: Record<string, any> | string | null) {
+  if (typeof template !== 'string') {
+    return
+  }
   const foundTemplate = props.templates?.find(t => t.name === template)
   if (foundTemplate !== undefined) {
-    emit('update:modelValue', foundTemplate.value)
+    model.value = foundTemplate.value
   }
 }
 
@@ -72,25 +75,25 @@ function changeCurrentTab(tab: TabType) {
       </div>
       <InputSelectSingle
         v-if="props.templates !== undefined"
-        v-model="selectedTemplate"
         class="inline-block"
+        :model-value="selectedTemplate"
         :options="templateOptions"
         placeholder="テンプレートを選択"
-        @option:selected="setTemplate(selectedTemplate)">
+        @update:model-value="setTemplate($event)">
       </InputSelectSingle>
     </div>
     <div class="px-5 py-3">
       <InputTextarea
         v-if="currentTab === 'input'"
         :auto-focus="autoFocus"
         class="min-h-40 w-full"
-        :model-value="modelValue"
+        :model-value="model"
         :placeholder="placeholder"
-        @update:model-value="emit('update:modelValue', $event)" />
+        @update:model-value="model = $event" />
       <MarkdownIt
         v-if="currentTab === 'preview'"
         class="min-h-40 w-full overflow-y-scroll rounded border border-gray-300 px-3 py-2"
-        :text="modelValue" />
+        :text="model" />
       <div class="flex justify-end pt-3">
         <slot />
       </div>