feat(toggle directives): allow simple elements to use directive (#651)

* [Toggle directive] allow simple elements to use directive * [Modal directive] modified according to _target helper changes * [Toggle directive] Some more refactoring
bootstrap-vue · Jul 6, 2017 · 3361911 · 3361911
1 parent e13e093
commit 3361911
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/lib/directives/_target.js b/lib/directives/_target.js
@@ -1,12 +1,6 @@
 const all_listen_types = {hover: true, click: true, focus: true};
 
-export default function targets(el, binding, listen_types, fn) {
-    const vm = el.__vue__;
-
-    if (!vm) {
-        console.warn('__vue__ is not available on element', el);
-        return [];
-    }
+export default function targets (vnode, binding, listen_types, fn) {
 
     const targets = Object.keys(binding.modifiers || {})
         .filter(t => !all_listen_types[t]);
@@ -16,15 +10,15 @@ export default function targets(el, binding, listen_types, fn) {
     }
 
     const listener = () => {
-        fn({targets, vm});
+        fn({targets, vnode});
     };
 
     Object.keys(all_listen_types).forEach(type => {
         if (listen_types[type] || binding.modifiers[type]) {
-            el.addEventListener(type, listener);
+            vnode.elm.addEventListener(type, listener);
         }
     });
-    
+
     // Return the list of targets
     return targets;
 }
diff --git a/lib/directives/modal.js b/lib/directives/modal.js
@@ -3,10 +3,11 @@ import target from './_target';
 const listen_types = {click: true};
 
 export default {
-    bind(el, binding) {
-        target(el, binding, listen_types, ({targets, vm}) => {
+// eslint-disable-next-line no-shadow-restricted-names
+    bind(undefined, binding, vnode) {
+        target(vnode, binding, listen_types, ({targets, vnode}) => {
             targets.forEach(target => {
-                vm.$root.$emit('show::modal', target, el);
+                vnode.context.$root.$emit('show::modal', target, vnode.elm);
             });
         });
     }

diff --git a/lib/directives/toggle.js b/lib/directives/toggle.js
@@ -1,20 +1,23 @@
 const inBrowser = typeof window !== 'undefined';
 
 import target from './_target';
-
 const listen_types = {click: true};
 
 export default {
-    bind(el, binding) {
-        const targets = target(el, binding, listen_types, ({targets, vm}) => {
+
+    bind(el, binding, vnode) {
+
+        const targets = target(vnode, binding, listen_types, ({targets, vnode}) => {
             targets.forEach(target => {
-                vm.$root.$emit('collapse::toggle', target);
+                vnode.context.$root.$emit('collapse::toggle', target);
             });
         });
-        if (inBrowser && el.__vue__ && targets.length > 0) {
+
+        if (inBrowser && vnode.context && targets.length > 0) {
             el.setAttribute('aria-controls', targets.join(' '));
             el.setAttribute('aria-expanded', 'false');
-            el.__vue__.$root.$on('collapse::toggle::state', (id, state) => {
+
+            vnode.context.$root.$on('collapse::toggle::state', (id, state) => {
                 if (targets.indexOf(id) !== -1) {
                     el.setAttribute('aria-expanded', state ? 'true' : 'false');
                 }