<script setup lang="ts">
import { ref } from "vue";

defineProps({
  name: String,
  modelValue: String,
  placeholder: String,
});

const emits = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();

const input = ref<HTMLInputElement | null>(null);

function focus() {
  input.value?.focus();
}

defineExpose({
  focus
});
</script>

<template>
  <a-row type="flex" style="align-items: center">
    <a-col style="width: 120px; text-align: right;">
      {{ name }}：
    </a-col>
    <a-col flex="1">
      <a-input
        :value="modelValue"
        @input="emits('update:modelValue', $event.target.value)"
        :placeholder="placeholder"
        ref="input"
      />
    </a-col>
  </a-row>
</template>