[pull] dev from buefy:dev

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Buefy Changelog
 
+## 0.8.15
+
+### Fixes
+
+* Fix check whitelist on fixed sidebar
+* Fix static sidebar on esc key
+
 ## 0.8.14
 
 ### New features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "buefy",
-  "version": "0.8.14",
+  "version": "0.8.15",
   "homepage": "https://buefy.org",
   "description": "Lightweight UI components for Vue.js based on Bulma",
   "author": "Rafael Beraldo <rafael.pimpa@gmail.com>",

src/components/sidebar/Sidebar.vue

@@ -1,29 +1,24 @@
 <template>
-    <div class="b-sidebar">
+    <div class="b-sidebar" @click="clickedOutside">
         <div
             class="sidebar-background"
             v-if="overlay && isOpen"
         />
         <transition :name="transitionName">
             <div
                 v-show="isOpen"
+                ref="sidebarContent"
                 class="sidebar-content"
-                :class="rootClasses"
-                v-click-outside="clickOutside">
+                :class="rootClasses">
                 <slot />
             </div>
         </transition>
     </div>
 </template>
 
 <script>
-import clickOutside from '../../directives/clickOutside'
-
 export default {
     name: 'BSidebar',
-    directives: {
-        clickOutside
-    },
     props: {
         open: Boolean,
         type: [String, Object],
@@ -59,7 +54,8 @@ export default {
     data() {
         return {
             isOpen: this.open,
-            transitionName: null
+            transitionName: null,
+            animating: true
         }
     },
     computed: {
@@ -93,6 +89,22 @@ export default {
         },
         isAbsolute() {
             return this.position === 'absolute'
+        },
+        /**
+         * White-listed items to not close when clicked.
+         * Add sidebar content and all children.
+         */
+        whiteList() {
+            const whiteList = []
+            whiteList.push(this.$refs.sidebarContent)
+            // Add all chidren from dropdown
+            if (this.$refs.sidebarContent !== undefined) {
+                const children = this.$refs.sidebarContent.querySelectorAll('*')
+                for (const child of children) {
+                    whiteList.push(child)
+                }
+            }
+            return whiteList
         }
     },
     watch: {
@@ -112,7 +124,9 @@ export default {
         */
         keyPress(event) {
             // Esc key
-            if (this.isOpen && event.keyCode === 27) this.cancel('escape')
+            if (this.isFixed) {
+                if (this.isOpen && event.keyCode === 27) this.cancel('escape')
+            }
         },
 
         /**
@@ -135,9 +149,14 @@ export default {
             this.$emit('update:open', false)
         },
 
-        clickOutside() {
-            if (this.isFixed && this.isOpen) {
-                this.cancel('outside')
+        /**
+         * Close fixed sidebar if clicked outside.
+         */
+        clickedOutside(event) {
+            if (this.isFixed) {
+                if (this.whiteList.indexOf(event.target) < 0) {
+                    this.cancel('outside')
+                }
             }
         }
     },