goodteditor-ui 1.0.14 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.14",
+    "version": "1.0.16",
     "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/InputDatePicker.vue

@@ -197,25 +197,30 @@ export default {
                 readonly: this.readonly || !this.editable,
             },
             inputEvents: {
+                input: this.onInputInput,
                 change: this.onInputChange,
                 focus: this.onInputFocus,
                 blur: this.onInputBlur,
             },
+            inputValue: '',
+            inputValueRaw: '',
         };
     },
     watch: {
         value: {
             handler(val) {
+                this.inputValueRaw = val;
+
                 if (this.isRange) {
-                    let d = Array.isArray(val) ? val.map(this.toDate) : [];
-                    let [s, e] = d;
+                    const d = Array.isArray(val) ? val.map(this.toDate) : [];
+                    const [s, e] = d;
                     if (s && e && isDateValid(s) && isDateValid(e) && s < e) {
                         this.date = d;
                     } else {
                         this.date = [];
                     }
                 } else {
-                    let d = this.toDate(val);
+                    const d = this.toDate(val);
                     this.date = isDateValid(d) ? d : null;
                 }
             },
@@ -256,47 +261,31 @@ export default {
             let input = this.getInputRef();
             input && input.focus();
         },
+        onInputInput({ target }) {
+            this.inputValueRaw = target.value;
+        },
         onInputChange(e) {
-            let val = e.target.value;
-            let data = null;
-
-            if (this.isRange) {
-                let d = val.split(this.delimiter).map(this.toDate);
-                let [s, e] = d;
-                data = isDateValid(s) && isDateValid(e) && s < e ? d.map(this.toValue) : [];
-            } else {
-                let d = this.toDate(val);
-                data = isDateValid(d) ? this.toValue(d) : '';
-            }
-            /**
-             * Input event
-             * @property {String|Array} value
-             */
-            this.$emit('input', data);
-            /**
-             * Change event
-             * @property {String|Array} value
-             */
-            this.$emit('change', data);
+            this.setDateFromString(e.target.value);
         },
         onInputFocus(e) {
             this.rootHasFocus = true;
         },
         onInputBlur(e) {
             this.rootHasFocus = false;
+            this.setDateFromString(this.inputValueRaw);
         },
         onDpChange(date) {
-            let data = Array.isArray(date) ? date.map(this.toValue) : this.toValue(date);
+            const model = Array.isArray(date) ? date.map(this.toValue) : this.toValue(date);
             /**
              * Input event
-             * @property {String} date
+             * @property {String|Array} value
              */
-            this.$emit('input', data);
+            this.$emit('input', model);
             /**
              * Change event
-             * @property {String} date
+             * @property {String|Array} value
              */
-            this.$emit('change', data);
+            this.$emit('change', model);
         },
         onDpSetDate(date) {
             /**
@@ -305,6 +294,33 @@ export default {
              */
             this.$emit('set-date', date);
         },
+        setDateFromString(value) {
+            if (value == this.inputValue) {
+                return;
+            }
+            this.inputValue = value;
+
+            let model = null;
+
+            if (this.isRange) {
+                const d = value.split(this.delimiter).map(this.toDate);
+                const [s, e] = d;
+                model = isDateValid(s) && isDateValid(e) && s < e ? d.map(this.toValue) : [];
+            } else {
+                const d = this.toDate(value);
+                model = isDateValid(d) ? this.toValue(d) : '';
+            }
+            /**
+             * Input event
+             * @property {String|Array} value
+             */
+            this.$emit('input', model);
+            /**
+             * Change event
+             * @property {String|Array} value
+             */
+            this.$emit('change', model);
+        },
     },
 };
 </script>

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();