goodteditor-ui 1.0.14 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.14",
+    "version": "1.0.15",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {
@@ -10,7 +10,8 @@
         "dev": "vue-styleguidist server",
         "docs:build": "set NODE_ENV=development && vue-styleguidist build",
         "docs:deploy": "npx netlify deploy --dir=docs --prod",
-        "notify": "node ./ci/teams-notify.js"
+        "notify": "node ./ci/teams-notify.js",
+        "publish": "npm run docs:build && npm run docs:deploy && npm run notify"
     },
     "devDependencies": {
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",

package/src/components/ui/Popover.vue

@@ -23,6 +23,19 @@ import { Position, generateGetBoundingClientRect } from './utils/Helpers';
 
 const isElem = el => el instanceof HTMLElement;
 
+const isCoordinates = (target) => {
+    if (Array.isArray(target) === false) {
+        return false;
+    }
+    if (target.length !== 2) {
+        return false;
+    }
+    if (target.some((item) => Number.isNaN(Number(item)))) {
+        return false;
+    }
+    return true;
+}
+
 const Strategy = Object.freeze({
     ABSOLUTE: 'absolute',
     FIXED: 'fixed'
@@ -51,7 +64,7 @@ export default {
     },
     props: {
         /**
-         * Target HTMLElement or selector used for positioning
+         * Target HTMLElement|selector|array of coordinates used for positioning
          */
         target: { default: null },
         /**
@@ -107,25 +120,11 @@ export default {
             default: false,
         },
         /**
-         * Should follow the cursor
-         */
-        shouldFollowCursor: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Cursor coordinates [ x, y ]
-         */
-        cursorCoordinates: {
-            type: Array,
-            default: () => [0, 0]
-        },
-        /**
-         * Whether handle events to control visibility
+         * Should respond to pointer events
          */
-        isManualControlMode: {
+        shouldRespondToPointerEvents: {
             type: Boolean,
-            default: false
+            default: true
         }
     },
     data() {
@@ -172,7 +171,7 @@ export default {
                         return;
                     }
 
-                    if (this.isManualControlMode === false) {
+                    if (isCoordinates(this.target) === false) {
                         this.addEventListeners();
                     }
 
@@ -198,46 +197,51 @@ export default {
             document.removeEventListener('mousedown', this.onDocMouseDown);
         },
         calcStyle() {
-            const { zIndex, autoWidth } = this;
+            const { zIndex, autoWidth, shouldRespondToPointerEvents } = this;
             const target = this.getTarget();
             const style = { zIndex };
             if (autoWidth && target) {
                 const b = target.getBoundingClientRect();
                 style.width = `${b.width}px`;
             }
+            if (shouldRespondToPointerEvents === false) {
+                style.pointerEvents = 'none';
+            }
             this.cssStyle = style;
         },
         getTarget() {
-            let { target } = this;
-            return isElem(target) ? target : document.querySelector(target);
+            const { target } = this;
+            return isCoordinates(target) ? null : isElem(target) ? target : document.querySelector(target);
         },
         setShow(val) {
             this.$nextTick(() => this.$emit('update:show', val));
         },
         createPopper() {
-            const { shouldFollowCursor, options, $el: popper, cursorCoordinates } = this;
+            const { options, $el: popper } = this;
             const target = this.getTarget();
 
-            if (shouldFollowCursor) {
-                const [x, y] = cursorCoordinates;
+            if (target != null) {
+                this.popper = createPopper(target, popper, options);
+                this.$nextTick(this.updatePopper);
+                return;
+            }
+
+            if (isCoordinates(this.target)) {
+                const [x, y] = this.target;
                 const virtualElem = {
                     getBoundingClientRect: generateGetBoundingClientRect(x, y),
-                    contextElement: target
-                }
-
+                };
                 this.popper = createPopper(virtualElem, popper, options);
-                this.unwatchCursorCoordinates = this.$watch('cursorCoordinates', ([x, y]) => {
+                this.$nextTick(this.updatePopper);
+                this.unwatchCursorCoordinates = this.$watch('target', ([x, y]) => {
                     virtualElem.getBoundingClientRect = generateGetBoundingClientRect(x, y);
                     this.popper?.update();
-                })
-            } else {
-                this.popper = createPopper(target, popper, options);
+                });
             }
-
-            this.$nextTick(() => {
-                this.calcStyle();
-                this.popper.update();
-            });
+        },
+        updatePopper() {
+            this.calcStyle();
+            this.popper.update();
         },
         destroyPopper() {
             this.popper?.destroy();
@@ -245,7 +249,7 @@ export default {
         },
         handleReset() {
             this.unwatchCursorCoordinates?.();
-            if (this.isManualControlMode === false) {
+            if (isCoordinates(this.target) === false) {
                 this.removeEventListeners();
             }
             this.destroyPopper();