<script setup>
// 常用属性：
//   size <string|number> - "small" | "large" | 1, 2, ... 如果是数字则表示是宽度
//   invalid - 显示非可用状态
//   v-tooltip - 显示Tooltip
//   v-tooltip.focus - Focus时才显示的Tooltip
//
// 由于使用了 <input/> 作为根元素，所以可以正常使用以下属性：
//   name - 字段名
//   type - 类型：text, password, number等等，默认为text
//   maxlength - 最大输入长度（type不等于number时）
//   placeholder - 占位文字

import InputText from "primevue/inputtext";
import {ref} from "vue";

const props = defineProps(["size", "value"])
const numberSize = ref()
if (typeof props.size === "number") {
	numberSize.value = props.size.toString()
} else if (typeof props.size === "string" && props.size.match(/^\d+$/)) {
	numberSize.value = props.size
}

const rootRef = ref()
defineExpose({
	focus() {
		rootRef.value.$el.focus()
	},
	get value() {
		return rootRef.value.modelValue
	},
	set value(v) {
		modelValue.value = v
	}
})

const modelValue = ref("")
if (props.value != null) {
	modelValue.value = props.value
}

</script>

<template>
	<InputText ref="rootRef" :pt="{ root: { size: numberSize } }" v-model="modelValue"></InputText>
</template>

<style scoped>

</style>