/**
 * Provides wrapper to address the limitation of vue-select^2.4.0 while waiting for its updates.
 */ import vSelect from 'vue-select' ; import { Vue , Component , Prop , Watch } from 'vue-property-decorator' ; import _ from 'lodash' ; @ Component ( { components : { vSelect } } ) export default class FormSelect extends Vue { @ Prop ( ) private options ! : SelectOption [ ] ; @ Prop ( { type : Boolean , default : false } ) private clearable ! : boolean ; @ Prop ( { default : true } ) private emitValue ! : boolean ; @ Prop ( { default : false } ) private multiple ! : boolean ; @ Prop ( { default : 'label' } ) private label ! : string ; private childSelected : SelectOption | SelectOption [ ] | null = null ; @ Prop ( { type : [ Object , Number , String , Array ] } ) private value ! : string | number | Array < string | number > | null ; private selected : string | number | Array < string | number > | null = null ; private prevSelected : string | number | Array < string | number > | null = null ; private created ( ) { this . save ( this . value , true ) ; } @ Watch ( 'value' ) private onValueChange ( ) { this . selected = this . prevSelected = this . value ; this . childSelected = this . childSelectedOption ( ) ; this . save ( this . value ) ; } private save ( value , noEvent ? ) { if ( ! _ . isEqual ( this . selected , value ) ) { this . selected = value ; this . childSelected = this . childSelectedOption ( ) ; if ( noEvent !== true && ! _ . isEqual ( this . selected , this . prevSelected ) ) { this . $emit ( 'input' , this . selected , this . prevSelected ) ; this . $emit ( 'change' , this . selected , this . prevSelected ) ; } this . prevSelected = this . selected ; } } private getValue ( option ) { if ( option instanceof Object ) { return ( option as SelectOptionObject ) . value ; } return option ; } private childSelectedOption ( ) { if ( this . selected instanceof Array ) { return this . selected . map ( value => { return _ . find ( this . options , opt => this . getValue ( opt ) === value ) as SelectOption ; } ) ; } else { return _ . find ( this . options , opt => this . getValue ( opt ) === this . selected ) as SelectOption ; } } /**
     * Handles item selection from the child <v-select>
     */ private onListSelect ( option ) { if ( ( option === null && ! this . clearable ) || ( option !== null && ( option as SelectOptionObject ) . disabled ) ) { this . $nextTick ( ( ) => this . childSelected = this . childSelectedOption ( ) ) ; this . $el . __vue__ . toggleDropdown ( { target : this . $el . __vue__ . $el } ) ; return ; } let newSelected ; if ( option instanceof Array ) { newSelected = ( this . childSelected as SelectOption [ ] ) . map ( opt => this . getValue ( opt ) ) ; } else { newSelected = this . getValue ( this . childSelected as SelectOption ) ; } this . save ( newSelected ) ; } }