modal.vue

mosinve · mosinve · commit ce3bfc3116b1 · 2017-03-22T14:12:16.000+03:00
moved onclick handler "onlickOut" from modal to modal-backdrop as it more logical place IMHO dropdown-item.vue link.vue changes to make possible attach @click handlers nav-item-dropdown API changes
diff --git a/lib/components/dropdown-item.vue b/lib/components/dropdown-item.vue
@@ -1,5 +1,5 @@
 <template>
-    <a :is="componentType" class="dropdown-item" :to="toObject" :href="hrefString">
+    <a :is="componentType" class="dropdown-item" :to="to" :href="hrefString"  @click="click">
         <slot></slot>
     </a>
 </template>
diff --git a/lib/components/link.vue b/lib/components/link.vue
@@ -1,5 +1,5 @@
 <template>
-    <a :is="componentType" :active-class="activeClass" :to="to" :href="hrefString" :exact="exact">
+    <a :is="componentType" :active-class="activeClass" :to="to" :href="hrefString" :exact="exact" @click="click">
         <slot></slot>
     </a>
 </template>
@@ -33,6 +33,11 @@
                 type: Boolean,
                 default: false
             }
+        },
+        methods: {
+            click() {
+                this.$emit('click')
+            }
         }
     };
 </script>
diff --git a/lib/components/modal.vue b/lib/components/modal.vue
@@ -11,7 +11,6 @@
             <div key="modal" :id="id"
                  v-show="visible"
                  :class="['modal',{fade :fade}]"
-                 @click="onClickOut($event)"
             >
 
                 <div :class="['modal-dialog','modal-'+size]">
@@ -43,7 +42,11 @@
                 </div>
             </div>
 
-            <div key="modal-backdrop" :class="['modal-backdrop',{fade: fade}]" v-if="visible"></div>
+            <div key="modal-backdrop"
+                 :class="['modal-backdrop',{fade: fade}]"
+                 v-if="visible"
+                 @click="onClickOut($event)"
+            ></div>
         </transition-group>
     </div>
 </template>
diff --git a/lib/components/nav-item-dropdown.vue b/lib/components/nav-item-dropdown.vue
@@ -1,9 +1,9 @@
 <template>
-    <li :class="{'nav-item': true, show: show,dropdown: !dropup, dropup: dropup}">
+    <li :class="{'nav-item': true, show: visible,dropdown: !dropup, dropup: dropup}">
         <a @click.stop.prevent="toggle($event)"
            :class="['nav-link', dropdownToggle]"
            href="" aria-haspopup="true"
-           :aria-expanded="show"
+           :aria-expanded="visible"
            :disabled="disabled">
             <slot name="text">{{ text }}</slot>
         </a>
@@ -14,10 +14,15 @@
 </template>
 
 <script>
+    import clickOut from '../mixins/clickout';
+
     export default {
+        mixins: [
+            clickOut
+        ],
         data() {
             return {
-                show: false
+                visible: false
             };
         },
         computed: {
@@ -49,41 +54,39 @@
             class: ['class']
         },
         created() {
+            // to keep one dropdown opened at page
             this.$root.$on('shown::dropdown', el => {
                 if (el !== this) {
-                    this.clickOut();
+                    this.close()
                 }
             });
         },
-        mounted() {
-            if (typeof document !== 'undefined') {
-                document.documentElement.addEventListener('click', this.clickOut);
-            }
-        },
-        destroyed() {
-            if (typeof document !== 'undefined') {
-                document.removeEventListener('click', this.clickOut);
-            }
-        },
-        methods: {
-            setShow(state) {
-                if (this.show === state) {
+        watch: {
+            visible(state, old) {
+                if (state === old) {
                     return; // Avoid duplicated emits
                 }
-                this.show = state;
 
-                if (this.show) {
+                if (state) {
                     this.$root.$emit('shown::dropdown', this);
                 } else {
                     this.$root.$emit('hidden::dropdown', this);
                 }
-            },
+            }
+        },
+        methods: {
             toggle() {
-                this.setShow(!this.show);
+                this.visible = !this.visible;
+            },
+            open() {
+                this.visible = true
+            },
+            close() {
+                this.visible = false
+            },
+            clickOutListener() {
+                this.close()
             },
-            clickOut() {
-                this.setShow(false);
-            }
         }
     };
 </script>
