You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.6 KiB
67 lines
1.6 KiB
<script setup lang="ts">
|
|
import type { HTMLAttributes, InputHTMLAttributes } from 'vue'
|
|
import type { InputVariants } from '.'
|
|
import { computed } from 'vue'
|
|
import { cn } from '~/lib/utils'
|
|
import { inputVariants } from '.'
|
|
|
|
/**
|
|
* Input component - Text input field with variants and two-way binding
|
|
* Supports all native input attributes and custom styling variants
|
|
*/
|
|
|
|
interface Props {
|
|
/** The input value */
|
|
modelValue?: string | number
|
|
/** Input type (text, email, password, etc.) */
|
|
type?: InputHTMLAttributes['type']
|
|
/** Placeholder text */
|
|
placeholder?: string
|
|
/** Whether the input is disabled */
|
|
disabled?: boolean
|
|
/** Whether the input is required */
|
|
required?: boolean
|
|
/** Input name attribute */
|
|
name?: string
|
|
/** Input ID attribute */
|
|
id?: string
|
|
/** Autocomplete attribute */
|
|
autocomplete?: string
|
|
/** Input variant */
|
|
variant?: InputVariants['variant']
|
|
/** Input size */
|
|
size?: InputVariants['size']
|
|
/** Custom CSS class */
|
|
class?: HTMLAttributes['class']
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
type: 'text',
|
|
variant: 'default',
|
|
size: 'default',
|
|
})
|
|
|
|
const emits = defineEmits<{
|
|
'update:modelValue': [value: string | number]
|
|
}>()
|
|
|
|
// Two-way binding support using computed property
|
|
const modelValue = computed({
|
|
get: () => props.modelValue ?? '',
|
|
set: (value) => emits('update:modelValue', value),
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<input
|
|
v-model="modelValue"
|
|
:type="type"
|
|
:class="cn(inputVariants({ variant, size }), props.class)"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
:required="required"
|
|
:name="name"
|
|
:id="id"
|
|
:autocomplete="autocomplete"
|
|
/>
|
|
</template>
|
|
|