47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
modelValue?: any
|
|
size?: 'xs' | 'sm' | 'md' | 'lg'
|
|
color?: 'regular' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 'md',
|
|
color: 'regular'
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: any]
|
|
}>()
|
|
|
|
const styleClass = computed(() => {
|
|
const sizeVariants = {
|
|
xs: 'dui-input-xs',
|
|
sm: 'dui-input-sm',
|
|
md: 'dui-input-md',
|
|
lg: 'dui-input-lg'
|
|
}
|
|
const colorVariants = {
|
|
regular: '',
|
|
primary: 'dui-input-primary',
|
|
secondary: 'dui-input-secondary',
|
|
info: 'dui-input-info',
|
|
success: 'dui-input-success',
|
|
warning: 'dui-input-warning',
|
|
error: 'dui-input-error'
|
|
}
|
|
const sizeClass = sizeVariants[props.size]
|
|
const colorClass = colorVariants[props.color]
|
|
return [sizeClass, colorClass]
|
|
})
|
|
</script>
|
|
<template>
|
|
<input
|
|
type="text"
|
|
:value="props.modelValue"
|
|
@input="emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
|
|
class="dui-input-bordered dui-input my-1 ml-auto mr-1 max-w-xs flex-grow"
|
|
:class="styleClass"
|
|
/>
|
|
</template>
|