74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
|
<div class="row form-group align-items-center mt-3" :key="$attrs.key">
|
|
<label :for="localFormElement.key" class="col-auto "
|
|
>{{ localFormElement.label }}: </label
|
|
>
|
|
<div class="col-md-9">
|
|
<template v-if="isArray">
|
|
<ul class="list-unstyled col-12">
|
|
<li
|
|
v-for="(item, index) in myText"
|
|
:key="'qa_' + index"
|
|
class="mb-2 list-item"
|
|
v-html="perityHtmlText(item.title)"
|
|
|
|
>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<h6 class="form-control-plaintext text__13 label-title " style="color: var(--primary-color)" v-html="perityHtmlText(myText)">
|
|
|
|
</h6>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import formBuilderMixin from "@mixins/formBuilderMixin";
|
|
export default {
|
|
mixins: [formBuilderMixin],
|
|
computed: {
|
|
myText() {
|
|
if (this.localFormElement?.type == "date") return this.textDate;
|
|
else return this.textValue;
|
|
},
|
|
isArray() {
|
|
return Array.isArray(this.myText);
|
|
},
|
|
},
|
|
methods: {
|
|
perityHtmlText(text) {
|
|
//برای باگ text.replaceAll is not a function
|
|
text = String(text);
|
|
text = text.replaceAll('\n', '<br>')
|
|
return text;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.form-control {
|
|
height: auto !important;
|
|
}
|
|
.label-title {
|
|
font-size: 0.9rem !important;
|
|
}
|
|
.list-unstyled {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.list-item {
|
|
border: 2px solid rgb(127, 170, 170);
|
|
border-radius: 0.5em;
|
|
padding: 0.5em;
|
|
margin-left: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
color: #495057;
|
|
}
|
|
}
|
|
</style>
|