core/client/components/form/KTextField.vue

Summary

Maintainability
Test Coverage
<template>
<div v-if="readOnly" :id="properties.name + '-field'">
<div v-html="text" />
</div>
<q-input v-else
:for="properties.name + '-field'"
:id="properties.name + '-field'"
type="text"
v-model="model"
:label="label"
:input-class="inputClass()"
clearable
:disable="disabled"
:error="hasError"
:error-message="errorLabel"
bottom-slots
@blur="onChanged"
@update:model-value='onChanged'
>
<!-- Helper -->
<template v-if="hasHelper" v-slot:append>
<k-action
:id="properties.name + '-helper'"
:label="helperLabel"
:icon="helperIcon"
:tooltip="helperTooltip"
:url="helperUrl"
:dialog="helperDialog"
:context="helperContext"
@dialog-confirmed="onHelperDialogConfirmed"
color="primary"
/>
</template>
</q-input>
</template>
 
<script>
import _ from 'lodash'
import { baseField } from '../../mixins'
 
export default {
mixins: [baseField],
computed: {
text () {
if (_.startsWith(this.model, 'http://') || _.startsWith(this.model, 'https://')) {
return `<a href='${this.model}' target="_blank">${this.model}</a>`
} else {
return this.model
}
}
},
methods: {
inputClass () {
return _.get(this.properties, 'field.inputClass', 'text-weight-regular')
}
}
}
</script>