generated from corrad-software/corrad-af-2024
105 lines
2.3 KiB
Vue
105 lines
2.3 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
error: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
rows: {
|
|
type: Number,
|
|
default: 4
|
|
},
|
|
resize: {
|
|
type: String,
|
|
default: 'vertical' // none, both, horizontal, vertical
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const updateValue = (event) => {
|
|
emit('update:modelValue', event.target.value);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="rs-textarea-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>
|
|
|
|
<textarea
|
|
:value="modelValue"
|
|
@input="updateValue"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
:required="required"
|
|
:rows="rows"
|
|
class="rs-textarea"
|
|
:class="{
|
|
'rs-textarea-error': error,
|
|
'rs-textarea-disabled': disabled,
|
|
'resize-none': resize === 'none',
|
|
'resize-both': resize === 'both',
|
|
'resize-x': resize === 'horizontal',
|
|
'resize-y': resize === 'vertical'
|
|
}"
|
|
></textarea>
|
|
|
|
<div v-if="error" class="rs-textarea-error-message">
|
|
{{ error }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rs-textarea-wrapper {
|
|
@apply w-full;
|
|
}
|
|
|
|
.rs-textarea {
|
|
@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));
|
|
min-height: 2.5rem;
|
|
}
|
|
|
|
.rs-textarea:hover {
|
|
@apply border-gray-400 dark:border-gray-500;
|
|
}
|
|
|
|
.rs-textarea:focus {
|
|
@apply outline-none ring-2 ring-blue-500 border-blue-500;
|
|
}
|
|
|
|
.rs-textarea-error {
|
|
@apply border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500;
|
|
}
|
|
|
|
.rs-textarea-disabled {
|
|
@apply bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed;
|
|
}
|
|
|
|
.rs-textarea-error-message {
|
|
@apply text-sm text-red-500 mt-1;
|
|
}
|
|
</style> |