38 lines
825 B
Vue
38 lines
825 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue?: string
|
|
size?: 'small' | 'normal' | 'large'
|
|
invalid?: boolean
|
|
type?: string
|
|
placeholder?: string
|
|
}>(),
|
|
{
|
|
modelValue: '',
|
|
size: 'normal',
|
|
invalid: false,
|
|
type: 'text',
|
|
},
|
|
)
|
|
|
|
defineEmits<{ 'update:modelValue': [value: string] }>()
|
|
|
|
const dataP = computed(() =>
|
|
[props.size === 'small' ? 'small' : props.size === 'large' ? 'large' : null, props.invalid ? 'invalid' : null]
|
|
.filter(Boolean)
|
|
.join(' '),
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<input
|
|
class="nych-input"
|
|
:data-p="dataP || undefined"
|
|
:type="type"
|
|
:placeholder="placeholder"
|
|
:value="modelValue"
|
|
@input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
|
|
/>
|
|
</template>
|