therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved ColorInput to showcase transparent color, improved global input styles

Browse source 
a bit
This commit is contained in:
Henry Jameson 2020-01-02 23:48:52 +02:00
parent c7e9f21da0
commit a2f676d317
3 changed files with 48 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/color_input/color_input.vue
View file

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