2021-02-21 01:06:21 +13:00
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div class="flex justify-start items-center text-weight-bolder q-mb-sm q-mt-md">
|
|
|
|
<q-icon v-if="inputIcon" :name="inputIcon" :size="inputIcon.includes('fas')? '15px': '20px'" class="q-mr-md" min="1"/>
|
|
|
|
{{inputDataBluePrint.name}}
|
|
|
|
<q-icon v-if="toolTip" name="mdi-help-circle" size="16px" class="q-ml-md">
|
2021-02-26 14:50:46 +13:00
|
|
|
<q-tooltip :delay="500">
|
2021-02-21 01:06:21 +13:00
|
|
|
<span v-html="toolTip"/>
|
|
|
|
</q-tooltip>
|
|
|
|
</q-icon>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<q-list
|
|
|
|
v-if="!editMode"
|
|
|
|
dense>
|
|
|
|
<q-item>
|
|
|
|
<q-item-section>
|
|
|
|
<div class="colorIndicatorWrapper">
|
|
|
|
<div class="colorIndicator" :style="`background-color: ${localInput}`">
|
|
|
|
</div>
|
2021-03-08 11:07:40 +13:00
|
|
|
<span class="text-weight-medium">
|
|
|
|
{{localInput}}
|
|
|
|
</span>
|
2021-02-21 01:06:21 +13:00
|
|
|
</div>
|
|
|
|
|
|
|
|
</q-item-section>
|
|
|
|
</q-item>
|
|
|
|
</q-list>
|
|
|
|
|
|
|
|
<q-input
|
|
|
|
v-if="editMode"
|
|
|
|
v-model.number="localInput"
|
|
|
|
type="text"
|
|
|
|
@keyup="signalInput"
|
|
|
|
outlined
|
|
|
|
dense
|
|
|
|
>
|
|
|
|
<template v-slot:prepend>
|
|
|
|
<div class="colorIndicator" :style="`background-color: ${localInput}`">
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template v-slot:append>
|
|
|
|
<q-icon name="colorize" class="cursor-pointer">
|
|
|
|
<q-popup-proxy transition-show="scale" transition-hide="scale">
|
|
|
|
<q-color
|
|
|
|
@input="signalInput"
|
|
|
|
v-model="localInput"
|
|
|
|
/>
|
|
|
|
</q-popup-proxy>
|
|
|
|
</q-icon>
|
|
|
|
</template>
|
|
|
|
</q-input>
|
|
|
|
|
|
|
|
<div class="separatorWrapper">
|
2021-03-08 11:07:40 +13:00
|
|
|
<q-separator color="grey q-mt-md" />
|
2021-02-21 01:06:21 +13:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { Component, Emit, Prop, Watch } from "vue-property-decorator"
|
|
|
|
|
|
|
|
import BaseClass from "src/BaseClass"
|
|
|
|
|
|
|
|
import { I_ExtraFields } from "src/interfaces/I_Blueprint"
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
components: { }
|
|
|
|
})
|
|
|
|
export default class Field_ColorPicker extends BaseClass {
|
|
|
|
@Prop({ default: [] }) readonly inputDataBluePrint!: I_ExtraFields
|
2021-03-08 15:08:17 +13:00
|
|
|
@Prop({ default: null }) readonly inputDataValue!: string
|
2021-02-21 01:06:21 +13:00
|
|
|
@Prop() readonly editMode!: boolean
|
|
|
|
@Prop() readonly isNew!: boolean
|
|
|
|
|
|
|
|
changedInput = false
|
2021-03-08 15:08:17 +13:00
|
|
|
localInput = ""
|
2021-02-21 01:06:21 +13:00
|
|
|
|
|
|
|
@Emit()
|
|
|
|
signalInput () {
|
|
|
|
this.changedInput = true
|
2021-03-08 15:08:17 +13:00
|
|
|
return this.localInput.trim()
|
2021-02-21 01:06:21 +13:00
|
|
|
}
|
|
|
|
|
|
|
|
get inputIcon () {
|
|
|
|
return this.inputDataBluePrint?.icon
|
|
|
|
}
|
|
|
|
|
|
|
|
get toolTip () {
|
|
|
|
return this.inputDataBluePrint?.tooltip
|
|
|
|
}
|
|
|
|
|
|
|
|
@Watch("inputDataValue", { deep: true, immediate: true })
|
|
|
|
reactToInputChanges () {
|
|
|
|
this.localInput = this.inputDataValue
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.colorIndicator {
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
|
|
|
|
.colorIndicatorWrapper {
|
|
|
|
display: flex;
|
|
|
|
margin-left: -15px;
|
|
|
|
|
|
|
|
.colorIndicator {
|
|
|
|
margin-right: 15px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|