generated from corrad-software/corrad-af-2024
115 lines
2.3 KiB
Vue
115 lines
2.3 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'text'
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
error: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'md'
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const updateValue = (event) => {
|
|
emit('update:modelValue', event.target.value);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="rs-input-wrapper">
|
|
<label v-if="label" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{{ label }}
|
|
<span v-if="required" class="text-red-500">*</span>
|
|
</label>
|
|
|
|
<input
|
|
:value="modelValue"
|
|
@input="updateValue"
|
|
:type="type"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
:required="required"
|
|
class="rs-input"
|
|
:class="{
|
|
'rs-input-sm': size === 'sm',
|
|
'rs-input-md': size === 'md',
|
|
'rs-input-lg': size === 'lg',
|
|
'rs-input-error': error,
|
|
'rs-input-disabled': disabled
|
|
}"
|
|
/>
|
|
|
|
<div v-if="error" class="rs-input-error-message">
|
|
{{ error }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rs-input-wrapper {
|
|
@apply w-full;
|
|
}
|
|
|
|
.rs-input {
|
|
@apply w-full px-3 py-2 border rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
|
|
border-color: rgb(var(--fk-border-color));
|
|
}
|
|
|
|
.rs-input:hover {
|
|
@apply border-gray-400 dark:border-gray-500;
|
|
}
|
|
|
|
.rs-input:focus {
|
|
@apply outline-none ring-2 ring-blue-500 border-blue-500;
|
|
}
|
|
|
|
.rs-input-sm {
|
|
@apply px-2 py-1 text-sm;
|
|
}
|
|
|
|
.rs-input-md {
|
|
@apply px-3 py-2 text-sm;
|
|
}
|
|
|
|
.rs-input-lg {
|
|
@apply px-4 py-3 text-base;
|
|
}
|
|
|
|
.rs-input-error {
|
|
@apply border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500;
|
|
}
|
|
|
|
.rs-input-disabled {
|
|
@apply bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed;
|
|
}
|
|
|
|
.rs-input-error-message {
|
|
@apply text-sm text-red-500 mt-1;
|
|
}
|
|
</style> |