core/client/components/form/KIconField.vue

Summary

Maintainability
Test Coverage
<template>
<div v-if="readOnly && model" :id="properties.name + '-field'">
<q-icon :name="model.name" :color="model.color" />
</div>
<div v-else>
<q-field
:for="properties.name + '-field'"
:id="properties.name + '-field'"
v-model="model"
:label="label"
clearable
:error-message="errorLabel"
:error="hasError"
:disable="disabled"
bottom-slots
@clear="onCleared">
<!-- Icon chooser -->
<template v-slot:prepend>
<q-btn
id="icon-chooser-button"
round
flat
icon="las la-icons"
@click="onIconClicked" />
<k-icon-chooser
id="icon-chooser"
ref="iconChooser"
:icon-set="iconSet"
:palette="color"
@icon-choosed="onIconChoosed" />
</template>
<!-- Content -->
<template v-slot:default>
<q-icon
class="q-pt-xs"
size="sm"
id="choosed-icon"
:name="iconName"
:color="iconColor" />
</template>
<!-- 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-field>
</div>
</template>
 
<script>
import { KIconChooser } from '../input'
import { baseField } from '../../mixins'
import { getIconName } from '../../utils'
import _ from 'lodash'
 
export default {
components: {
KIconChooser
},
mixins: [baseField],
computed: {
hasIcon () {
return !this.isEmpty()
},
iconName () {
return getIconName(this.model, 'name')
},
iconColor () {
// We support icon without a color
return _.get(this.model, 'color', 'dark')
}
},
data () {
return {
iconSet: _.get(this.properties.field, 'iconSet', 'font-awesome'),
color: _.get(this.properties.field, 'color', true),
inverted: _.get(this.properties.field, 'inverted', false)
}
},
methods: {
emptyModel () {
// We support icon without a color, in this case we have a string as model
return (this.color ? { name: '', color: '' } : '')
},
onFocused () {
if (this.isEmpty()) this.$refs.iconChooser.open(this.model)
},
onCleared () {
this.model = this.emptyModel()
this.onChanged()
},
onIconClicked () {
this.$refs.iconChooser.open(this.model)
},
onIconChoosed (icon) {
// We support icon without a color, in this case we have a string as model
this.model = (this.color ? Object.assign({}, icon) : icon)
this.onChanged()
}
}
}
</script>