import { Vue , Component , Prop , Watch } from 'vue-property-decorator' ; import { Chrome as VueColor } from 'vue-color' ; import GlobalClick from '@/directives/global-click' ; import FormInput from '@/components/form-input/form-input' ; import { VueClass } from 'vue-class-component/lib/declarations' ; interface SelectedColor { hex : string ; a : number ; } @ Component ( { components : { FormInput , VueColor : VueColor as VueClass < Vue > } , directives : { GlobalClick } } ) export default class ColorInput extends Vue { @ Prop ( { type : String , default : '' } ) private value ! : string ; private text : string = '' ; private color : string = '' ; private prevColor : string = '' ; private isFocused = false ; @ Watch ( 'value' ) private onValueChange ( ) { this . color = this . text = this . value || '' ; } private created ( ) { this . text = this . prevColor = this . color = this . value || '' ; } private toggleFocused ( value ? ) { const newValue = value !== undefined ? value : ! this . isFocused ; if ( ! newValue && newValue !== this . isFocused ) { this . save ( ) ; } this . isFocused = newValue ; } private onTextClick ( ) { this . toggleFocused ( ) ; } private onTextInput ( ) { this . $emit ( 'input' , this . text , this . prevColor ) ; } private onTextChange ( ) { this . color = this . text ; this . save ( ) ; } private onPaletteInput ( newColor ) { const hex = newColor . hex . toLowerCase ( ) ; this . text = this . color = hex ; this . $emit ( 'input' , hex , this . prevColor ) ; } private globalClick ( evt ) { const target = evt . target as Element ; if ( ( this . $refs . vueColor as Vue ) . $el . contains ( target ) || ( this . $refs . textInput as Vue ) . $el . contains ( target ) || ( this . $refs . colorDisplay as Element ) . contains ( target ) ) { return ; } this . toggleFocused ( false ) ; } private save ( ) { if ( this . color !== this . prevColor ) { this . $emit ( 'input' , this . color === '' ? null : this . color , this . prevColor ) ; this . $emit ( 'change' , this . color === '' ? null : this . color , this . prevColor ) ; this . prevColor = this . color ; } } private destroyed ( ) { this . save ( ) ; } }