|
|
@ -1,6 +1,6 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="color-control style-control"
|
|
|
|
class="color-input style-control"
|
|
|
|
:class="{ disabled: !present || disabled }"
|
|
|
|
:class="{ disabled: !present || disabled }"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<label
|
|
|
|
<label
|
|
|
@ -16,27 +16,35 @@
|
|
|
|
@change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
|
|
|
|
@change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
|
|
|
|
class="opt"
|
|
|
|
class="opt"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<input
|
|
|
|
<div class="input color-input-field">
|
|
|
|
:id="name"
|
|
|
|
<input
|
|
|
|
class="color-input"
|
|
|
|
:id="name + '-t'"
|
|
|
|
type="color"
|
|
|
|
class="textColor unstyled"
|
|
|
|
:value="value || fallback"
|
|
|
|
type="text"
|
|
|
|
:disabled="!present || disabled"
|
|
|
|
:value="value || fallback"
|
|
|
|
@input="$emit('input', $event.target.value)"
|
|
|
|
:disabled="!present || disabled"
|
|
|
|
>
|
|
|
|
@input="$emit('input', $event.target.value)"
|
|
|
|
<input
|
|
|
|
>
|
|
|
|
:id="name + '-t'"
|
|
|
|
<input
|
|
|
|
class="text-input"
|
|
|
|
v-if="validColor"
|
|
|
|
type="text"
|
|
|
|
:id="name"
|
|
|
|
:value="value || fallback"
|
|
|
|
class="nativeColor unstyled"
|
|
|
|
:disabled="!present || disabled"
|
|
|
|
type="color"
|
|
|
|
@input="$emit('input', $event.target.value)"
|
|
|
|
:value="value || fallback"
|
|
|
|
>
|
|
|
|
:disabled="!present || disabled"
|
|
|
|
|
|
|
|
@input="$emit('input', $event.target.value)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
v-if="transparentColor"
|
|
|
|
|
|
|
|
class="transparentIndicator"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<style lang="scss" src="./color_input.scss"></style>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import Checkbox from '../checkbox/checkbox.vue'
|
|
|
|
import Checkbox from '../checkbox/checkbox.vue'
|
|
|
|
|
|
|
|
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
// Name of color, used for identifying
|
|
|
|
// Name of color, used for identifying
|
|
|
@ -81,6 +89,12 @@ export default {
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
present () {
|
|
|
|
present () {
|
|
|
|
return typeof this.value !== 'undefined'
|
|
|
|
return typeof this.value !== 'undefined'
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
validColor () {
|
|
|
|
|
|
|
|
return hex2rgb(this.value || this.fallback)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
transparentColor () {
|
|
|
|
|
|
|
|
return this.value === 'transparent'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|