66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
<template>
|
|
<ColorInput
|
|
v-if="type === 'color'"
|
|
:for-id="forId"
|
|
:model-value="(value as string)"
|
|
@update:model-value="(newValue: string) => emit('setValue', newValue)"
|
|
/>
|
|
<input
|
|
v-else
|
|
:type="type"
|
|
:id="forId"
|
|
:name="name"
|
|
:value="value"
|
|
:class="inputClass"
|
|
:placeholder="placeholder"
|
|
@input="emit('input', $event)"
|
|
@change="emit('change', $event)"
|
|
@focus="emit('focus', $event)"
|
|
@blur="emit('blur', $event)"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import ColorInput from '../ColorInput.vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
type?:
|
|
| 'text'
|
|
| 'number'
|
|
| 'password'
|
|
| 'color'
|
|
| 'email'
|
|
| 'checkbox'
|
|
| 'radio';
|
|
forId: string;
|
|
name: string;
|
|
value: unknown;
|
|
invalid?: boolean;
|
|
placeholder?: string;
|
|
}>(),
|
|
{
|
|
type: 'text',
|
|
invalid: false,
|
|
}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'setValue', value: unknown): void;
|
|
(e: 'input', ev: Event): void;
|
|
(e: 'change', ev: Event): void;
|
|
(e: 'focus', ev: Event): void;
|
|
(e: 'blur', ev: Event): void;
|
|
}>();
|
|
|
|
const inputClass = computed(() => {
|
|
return [
|
|
props.invalid
|
|
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
|
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
|
|
`mt-1 block w-full rounded-md shadow-sm sm:text-sm transition-colors duration-200`,
|
|
];
|
|
});
|
|
</script>
|