Close colour picker when clicked outside

This commit is contained in:
Jiiks 2018-02-28 07:41:57 +02:00
parent fab7371d66
commit e418964819
2 changed files with 9 additions and 1 deletions

1
.gitignore vendored
View File

@ -23,3 +23,4 @@ Installers/**/*/packages
dist/ dist/
user.config.json user.config.json
tests/data tests/data
/tests/themes/SimplerFlat

View File

@ -9,7 +9,7 @@
*/ */
<template> <template>
<div class="bd-form-colourpicker"> <div ref="root" class="bd-form-colourpicker">
<div class="bd-title"> <div class="bd-title">
<h3 v-if="setting.text">{{setting.text}}</h3> <h3 v-if="setting.text">{{setting.text}}</h3>
<div class="bd-colourpicker-wrapper"> <div class="bd-colourpicker-wrapper">
@ -59,10 +59,17 @@
methods: { methods: {
pick(c) { pick(c) {
this.change(this.rgbaString); this.change(this.rgbaString);
},
closePopup(e) {
if (!this.$refs.root.contains(e.target)) this.open = false;
} }
}, },
beforeMount() { beforeMount() {
this.colors = this.setting.value; this.colors = this.setting.value;
window.addEventListener('click', this.closePopup);
},
destroyed() {
window.removeEventListener('click', this.closePopup);
}, },
watch: { watch: {
setting(newVal, oldVal) { setting(newVal, oldVal) {