@webitel/ui-sdk 3.0.6 → 3.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -18,6 +18,7 @@
     "src/locale/*",
     "src/css/*",
     "src/components/*",
+    "src/directives/*",
     "src/enums/*",
     "src/mixins/*",
     "src/scripts/*",

package/src/directives/clickaway/clickaway.js

@@ -0,0 +1,52 @@
+ /* eslint-disable */
+
+const HANDLER = '_vue_clickaway_handler';
+
+function bind(el, binding, vnode) {
+    unbind(el);
+
+    const vm = vnode.context;
+    const callback = binding.value;
+
+    // @NOTE: Vue binds directives in microtasks, while UI events are dispatched
+    //        in macrotasks. This causes the listener to be set up before
+    //        the "origin" click event (the event that lead to the binding of
+    //        the directive) arrives at the document root. To work around that,
+    //        we ignore events until the end of the "initial" macrotask.
+    // @REFERENCE: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
+    // @REFERENCE: https://github.com/simplesmiler/vue-clickaway/issues/8
+    let initialMacrotaskEnded = false;
+    setTimeout(function() {
+        initialMacrotaskEnded = true;
+    }, 0);
+
+    el[HANDLER] = function(ev) {
+        // @NOTE: this test used to be just `el.contains`, but working with path is better,
+        //        because it tests whether the element was there at the time of
+        //        the click, not whether it is there now, that the event has arrived
+        //        to the top.
+        // @NOTE: `.path` is non-standard, the standard way is `.composedPath()`
+        const path = ev.path || (ev.composedPath ? ev.composedPath() : undefined);
+        if (initialMacrotaskEnded && (path ? path.indexOf(el) < 0 : !el.contains(ev.target))) {
+            return callback.call(vm, ev);
+        }
+    };
+
+    document.documentElement.addEventListener('click', el[HANDLER], false);
+}
+
+function unbind(el) {
+    document.documentElement.removeEventListener('click', el[HANDLER], false);
+    delete el[HANDLER];
+}
+
+const clickaway = {
+    bind,
+    update (el, binding) {
+        if (binding.value === binding.oldValue) return;
+        bind(el, binding);
+    },
+    unbind,
+};
+
+export default clickaway;

package/src/directives/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import clickaway from './clickaway/clickaway';
+
+const Directives = {
+  clickaway,
+};
+
+export default Directives;