43 lines
1.3 KiB
Vue
43 lines
1.3 KiB
Vue
<script setup>
|
|
const value = defineModel({ type: String, default: '' })
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
error: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-white border border-complement-50 rounded-2xl p-4 flex flex-col gap-3">
|
|
<h2 class="flex items-center gap-2 text-[12px] font-bold text-[#3E4C63]">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-[#7A1419]"></span>
|
|
{{ title }}
|
|
</h2>
|
|
<textarea
|
|
v-if="editable"
|
|
v-model="value"
|
|
rows="6"
|
|
:placeholder="placeholder"
|
|
class="w-full bg-[#F8FAFC] border border-[#DEE3EB] rounded-xl p-4 text-[12px] font-normal text-[#3E4C63] leading-6 outline-none focus:border-[#C1D0E8] resize-y"
|
|
></textarea>
|
|
<div v-else class="w-full min-h-[7rem] bg-[#F8FAFC] border border-[#DEE3EB] rounded-xl p-4 text-[12px] font-normal text-[#3E4C63] leading-6 whitespace-pre-line">
|
|
{{ value || 'موردی ثبت نشده است.' }}
|
|
</div>
|
|
<p v-if="error" class="text-[11px] text-[#7A1419]">{{ error }}</p>
|
|
</section>
|
|
</template>
|