<script setup lang="ts">
const props = withDefaults(defineProps<{
  modelValue: string
  label?: string
  placeholder?: string
  disabled?: boolean
}>(), {
  label: '密码',
  placeholder: '请输入密码',
  disabled: false,
})

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

const showPassword = ref(false)
</script>

<template>
  <UFormField :label="label" required>
    <div class="relative">
      <UInput
        :type="showPassword ? 'text' : 'password'"
        :model-value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        class="w-full"
        @update:model-value="emit('update:modelValue', $event)"
      />
      <UButton
        variant="link"
        color="neutral"
        size="sm"
        :icon="showPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
        :aria-label="showPassword ? '隐藏密码' : '显示密码'"
        class="absolute right-1 top-1/2 -translate-y-1/2"
        @click="showPassword = !showPassword"
      />
    </div>
  </UFormField>
</template>
