From 48df2adeb167ace235208d913717f1170d105e03 Mon Sep 17 00:00:00 2001
From: takejohn <takejohn@takejohn.jp>
Date: Sat, 4 Jan 2025 07:26:31 +0000
Subject: [PATCH] =?UTF-8?q?type=E3=82=92=E3=82=B8=E3=82=A7=E3=83=8D?=
 =?UTF-8?q?=E3=83=AA=E3=83=83=E3=82=AF=E5=9E=8B=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkInput.vue | 49 ++++++++++++++------
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/MkInput.vue b/packages/frontend/src/components/MkInput.vue
index 08817fd6a8..446768c24e 100644
--- a/packages/frontend/src/components/MkInput.vue
+++ b/packages/frontend/src/components/MkInput.vue
@@ -43,17 +43,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 </template>
 
-<script lang="ts" setup>
-import { onMounted, onUnmounted, nextTick, ref, shallowRef, watch, computed, toRefs, InputHTMLAttributes } from 'vue';
+<script lang="ts" setup generic="T extends InputTypeHTMLAttribute">
+import { onMounted, onUnmounted, nextTick, ref, shallowRef, watch, computed, toRefs, InputTypeHTMLAttribute, InputHTMLAttributes } from 'vue';
 import { debounce } from 'throttle-debounce';
-import MkButton from '@/components/MkButton.vue';
 import { useInterval } from '@@/js/use-interval.js';
+import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import { Autocomplete, SuggestionType } from '@/scripts/autocomplete.js';
 
-const props = defineProps<{
+interface MkInputProps {
 	modelValue: string | number | null;
-	type?: InputHTMLAttributes['type'];
+	type?: T;
 	required?: boolean;
 	readonly?: boolean;
 	disabled?: boolean;
@@ -74,17 +74,40 @@ const props = defineProps<{
 	manualSave?: boolean;
 	small?: boolean;
 	large?: boolean;
-}>();
+}
+
+type MkInputValue = T extends 'number' ? number : string;
+
+const props = defineProps<MkInputProps>();
 
 const emit = defineEmits<{
 	(ev: 'change', _ev: KeyboardEvent): void;
 	(ev: 'keydown', _ev: KeyboardEvent): void;
 	(ev: 'enter', _ev: KeyboardEvent): void;
-	(ev: 'update:modelValue', value: string | number): void;
+	(ev: 'update:modelValue', value: MkInputValue): void;
 }>();
 
-const { modelValue, type, autofocus } = toRefs(props);
-const v = ref(modelValue.value);
+const {
+	modelValue,
+	type,
+	required,
+	readonly,
+	disabled,
+	pattern,
+	placeholder,
+	autofocus,
+	autocomplete,
+	autocapitalize,
+	spellcheck,
+	inputmode,
+	step,
+	datalist,
+	min,
+	max,
+	inline,
+	manualSave,
+} = toRefs<MkInputProps>(props);
+const v = ref<string | number | null>(modelValue.value);
 const id = Math.random().toString(); // TODO: uuid?
 const focused = ref(false);
 const changed = ref(false);
@@ -117,10 +140,10 @@ const onKeydown = (ev: KeyboardEvent) => {
 
 const updated = () => {
 	changed.value = false;
-	if (type.value === 'number') {
-		emit('update:modelValue', typeof v.value === 'number' ? v.value : parseFloat(v.value ?? '0'));
+	if (type?.value === 'number') {
+		emit('update:modelValue', (typeof v.value === 'number' ? v.value : parseFloat((v.value as string | null) ?? '0')) as MkInputValue);
 	} else {
-		emit('update:modelValue', v.value ?? '');
+		emit('update:modelValue', (v.value ?? '') as MkInputValue);
 	}
 };
 
@@ -164,7 +187,7 @@ useInterval(() => {
 
 onMounted(() => {
 	nextTick(() => {
-		if (autofocus.value) {
+		if (autofocus?.value) {
 			focus();
 		}
 	});