147 lines
3.0 KiB
Vue
147 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="row form-group mt-3" :key="$attrs.key">
|
||
|
|
<label :for="localFormElement.key" :class="'col-md-12'"
|
||
|
|
>{{ getLabel() }}:</label
|
||
|
|
>
|
||
|
|
<div class="mt-2" :class="'col-md-12'">
|
||
|
|
<textarea
|
||
|
|
:ref="localFormElement.key"
|
||
|
|
class="form-control"
|
||
|
|
@focus="clearErrors"
|
||
|
|
@blur="validate"
|
||
|
|
@change="validate"
|
||
|
|
@paste="validate"
|
||
|
|
:placeholder="localFormElement.placeholder"
|
||
|
|
:id="localFormElement.key"
|
||
|
|
:name="localFormElement.key"
|
||
|
|
v-model="textValue"
|
||
|
|
cols="40"
|
||
|
|
:rows="getRows()"
|
||
|
|
>
|
||
|
|
</textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import formBuilderMixin from "@mixins/formBuilderMixin";
|
||
|
|
// import HttpService from "@services/httpService";
|
||
|
|
// import VueTribute from "vue-tribute";
|
||
|
|
// import borhanApi from "@apis/borhanApi.js";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
enableSuggestion: {
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
contextMenu: {
|
||
|
|
default() {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mixins: [formBuilderMixin],
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// httpService: undefined,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// this.httpService = new HttpService();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getRows() {
|
||
|
|
if (this.localFormElement?.rows) return this.localFormElement?.rows;
|
||
|
|
return "5";
|
||
|
|
},
|
||
|
|
// noMatchFound(args) {
|
||
|
|
// console.info(args);
|
||
|
|
// },
|
||
|
|
// textReplaced(args) {
|
||
|
|
// console.info(args);
|
||
|
|
// },
|
||
|
|
// methodName(action, index = 0) {
|
||
|
|
// try {
|
||
|
|
// this[action](index);
|
||
|
|
// } catch (err) {
|
||
|
|
// this.$emit(action, index);
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// remoteSearch(input, callback) {
|
||
|
|
// console.info(input);
|
||
|
|
|
||
|
|
// return this.httpService
|
||
|
|
// .getRequest(borhanApi.concept.annotations.read + "?ontology_id=" + input)
|
||
|
|
// .then((res) => {
|
||
|
|
// callback(res.data);
|
||
|
|
// })
|
||
|
|
// .catch((e) => {
|
||
|
|
// callback([]);
|
||
|
|
// })
|
||
|
|
// .finally(() => {
|
||
|
|
// this.fetchingData = false;
|
||
|
|
// });
|
||
|
|
// },
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
// VueTribute: () =>
|
||
|
|
// import( "vue-tribute"),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.form-control {
|
||
|
|
height: auto !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.tribute-container {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
height: auto;
|
||
|
|
overflow: auto;
|
||
|
|
max-height: 25em;
|
||
|
|
overflow: auto;
|
||
|
|
display: block;
|
||
|
|
z-index: 999999;
|
||
|
|
|
||
|
|
transform: translate(-80px, 7px);
|
||
|
|
box-shadow: 0 9px 8px -3px rgba(64, 60, 67, 0.24),
|
||
|
|
8px 0 8px -7px rgba(64, 60, 67, 0.24),
|
||
|
|
-8px 0 8px -7px rgba(64, 60, 67, 0.24);
|
||
|
|
|
||
|
|
box-shadow: 0px 0px 14px 0px #eee;
|
||
|
|
|
||
|
|
border-radius: 0.3em;
|
||
|
|
background: #ededed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tribute-container ul {
|
||
|
|
margin: 0;
|
||
|
|
margin-top: 2px;
|
||
|
|
padding: 0;
|
||
|
|
list-style: none;
|
||
|
|
/* background: #efefef; */
|
||
|
|
}
|
||
|
|
.tribute-container li {
|
||
|
|
padding: 0.5em 1em;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.tribute-container li.highlight {
|
||
|
|
/* background: #ddd; */
|
||
|
|
}
|
||
|
|
.tribute-container li span {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.tribute-container li.no-match {
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
.tribute-container .menu-highlighted {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
</style>
|