goodteditor-ui 1.0.12 → 1.0.13

package/src/components/ui/Popover.vue

@@ -1,209 +1,258 @@
-<template>
-    <transition name="transition" appear>
-        <div :style="cssStyle" v-if="show" v-append-body>
-            <slot></slot>
-        </div>
-    </transition>
-</template>
-<style lang="less" scoped>
-.transition {
-    &-enter,
-    &-leave-to {
-        opacity: 0;
-    }
-    &-enter-active,
-    &-leave-active {
-        transition: opacity 0.15s ease;
-    }
-}
-</style>
-<script>
-import { createPopper } from '@popperjs/core';
-import { Position } from './utils/Helpers';
-
-const isElem = el => el instanceof HTMLElement;
-
-export default {
-    directives: {
-        'append-body': {
-            inserted(el, bindings, { context }) {
-                let { appendToBody } = context;
-                if (!appendToBody) {
-                    return;
-                }
-                const nt = context.$nextTick;
-                nt(() => nt(() => document.body.appendChild(el)));
-            },
-            unbind(el, bindings, { context }) {
-                el.parentNode && el.parentNode.removeChild(el);
-            },
-        },
-    },
-    props: {
-        /**
-         * Target HTMLElement or selector used for positioning
-         */
-        target: { default: null },
-        /**
-         * Whether to show popover
-         */
-        show: { type: Boolean, default: false },
-        /**
-         * z-index
-         */
-        zIndex: {
-            type: Number,
-            default: 1010,
-        },
-        /**
-         * Whether to append popover to body
-         */
-        appendToBody: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Position, values of the popover:
-         * bl, br, tl, tr - bottom-left, bottom-right, top-left, top-right
-         * @values bl, br, tl, tr, top, top-start, top-end, left, left-start, left-end, right, right-start, right-end, bottom, bottom-start, bottom-end
-         */
-        position: {
-            type: String,
-            default: `${Position.BOTTOM}-${Position.START}`,
-        },
-        /**
-         * Position offset [ x, y ] where:
-         * x - skidding (offset along target)
-         * y - distance (offset away from target)
-         */
-        positionOffset: {
-            type: Array,
-            default() {
-                return [1, 1];
-            },
-        },
-        /**
-         * Whether to flip position if out of viewport
-         */
-        positionFlip: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Auto width
-         */
-        autoWidth: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return { cssStyle: {} };
-    },
-    computed: {
-        placement() {
-            const { position } = this;
-            const map = { t: Position.TOP, l: Position.START, r: Position.END, b: Position.BOTTOM };
-            // t-b-l-r mode
-            if (position.length == 2) {
-                return position
-                    .split('')
-                    .map(k => map[k])
-                    .filter(v => !!v)
-                    .join('-');
-            }
-            return position;
-        },
-    },
-    watch: {
-        show: {
-            handler(val) {
-                const { appendToBody, placement, positionFlip, positionOffset } = this;
-                const strategy = appendToBody ? 'fixed' : 'absolute';
-                this.$nextTick(() => {
-                    if (val) {
-                        this.addEventListeners();
-                        this.popper = createPopper(this.getTarget(), this.$el, {
-                            placement,
-                            strategy,
-                            modifiers: [
-                                {
-                                    name: 'flip',
-                                    enabled: positionFlip,
-                                },
-                                {
-                                    name: 'offset',
-                                    options: {
-                                        offset: positionOffset,
-                                    },
-                                },
-                            ],
-                        });
-                        this.$nextTick(() => {
-                            this.calcStyle();
-                            this.popper.update();
-                        });
-                    } else {
-                        this.removeEventListeners();
-                        this.destroyPopper();
-                    }
-                });
-            },
-            immediate: true,
-        },
-    },
-    created() {
-        this.popper = null;
-    },
-    destroyed() {
-        this.removeEventListeners();
-        this.destroyPopper();
-    },
-    methods: {
-        addEventListeners() {
-            window.addEventListener('blur', this.onWinBlur);
-            document.addEventListener('mousedown', this.onDocMouseDown);
-        },
-        removeEventListeners() {
-            window.removeEventListener('blur', this.onWinBlur);
-            document.removeEventListener('mousedown', this.onDocMouseDown);
-        },
-        calcStyle() {
-            const { zIndex, autoWidth } = this;
-            const target = this.getTarget();
-            const style = { zIndex };
-            if (autoWidth && target) {
-                const b = target.getBoundingClientRect();
-                style.width = `${b.width}px`;
-            }
-            this.cssStyle = style;
-        },
-        getTarget() {
-            let { target } = this;
-            return isElem(target) ? target : document.querySelector(target);
-        },
-        setShow(val) {
-            this.$nextTick(() => this.$emit('update:show', val));
-        },
-        destroyPopper() {
-            this.popper && this.popper.destroy();
-            this.popper = null;
-        },
-        onWinBlur(e) {
-            if (this.show) {
-                this.setShow(false);
-            }
-        },
-        onDocMouseDown(e) {
-            let target = this.getTarget();
-            let root = this.$el && isElem(this.$el) ? this.$el : null;
-            if ((root && root.contains(e.target)) || (target && target.contains(e.target))) {
-                return;
-            }
-            if (this.show) {
-                this.setShow(false);
-            }
-        },
-    },
-};
-</script>
+<template>
+    <transition name="transition" appear>
+        <div :style="cssStyle" v-if="show" v-append-body>
+            <slot></slot>
+        </div>
+    </transition>
+</template>
+<style lang="less" scoped>
+.transition {
+    &-enter,
+    &-leave-to {
+        opacity: 0;
+    }
+    &-enter-active,
+    &-leave-active {
+        transition: opacity 0.15s ease;
+    }
+}
+</style>
+<script>
+import { createPopper } from '@popperjs/core';
+import { Position, generateGetBoundingClientRect } from './utils/Helpers';
+
+const isElem = el => el instanceof HTMLElement;
+
+const Strategy = Object.freeze({
+    ABSOLUTE: 'absolute',
+    FIXED: 'fixed'
+});
+
+const Modifier = Object.freeze({
+    FLIP: 'flip',
+    OFFSET: 'offset'
+});
+
+export default {
+    directives: {
+        'append-body': {
+            inserted(el, bindings, { context }) {
+                let { appendToBody } = context;
+                if (!appendToBody) {
+                    return;
+                }
+                const nt = context.$nextTick;
+                nt(() => nt(() => document.body.appendChild(el)));
+            },
+            unbind(el, bindings, { context }) {
+                el.parentNode && el.parentNode.removeChild(el);
+            },
+        },
+    },
+    props: {
+        /**
+         * Target HTMLElement or selector used for positioning
+         */
+        target: { default: null },
+        /**
+         * Whether to show popover
+         */
+        show: { type: Boolean, default: false },
+        /**
+         * z-index
+         */
+        zIndex: {
+            type: Number,
+            default: 1010,
+        },
+        /**
+         * Whether to append popover to body
+         */
+        appendToBody: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Position, values of the popover:
+         * bl, br, tl, tr - bottom-left, bottom-right, top-left, top-right
+         * @values bl, br, tl, tr, top, top-start, top-end, left, left-start, left-end, right, right-start, right-end, bottom, bottom-start, bottom-end
+         */
+        position: {
+            type: String,
+            default: `${Position.BOTTOM}-${Position.START}`,
+        },
+        /**
+         * Position offset [ x, y ] where:
+         * x - skidding (offset along target)
+         * y - distance (offset away from target)
+         */
+        positionOffset: {
+            type: Array,
+            default() {
+                return [1, 1];
+            },
+        },
+        /**
+         * Whether to flip position if out of viewport
+         */
+        positionFlip: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Auto width
+         */
+        autoWidth: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Should follow the cursor
+         */
+        shouldFollowCursor: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Cursor coordinates [ x, y ]
+         */
+        cursorCoordinates: {
+            type: Array,
+            default: () => [0, 0]
+        }
+    },
+    data() {
+        return { cssStyle: {} };
+    },
+    computed: {
+        placement() {
+            const { position } = this;
+            const map = { t: Position.TOP, l: Position.START, r: Position.END, b: Position.BOTTOM };
+            // t-b-l-r mode
+            if (position.length == 2) {
+                return position
+                    .split('')
+                    .map(k => map[k])
+                    .filter(v => !!v)
+                    .join('-');
+            }
+            return position;
+        },
+        options() {
+            const { appendToBody, placement, positionFlip, positionOffset } = this;
+            const strategy = appendToBody ? Strategy.FIXED : Strategy.ABSOLUTE;
+            const modifiers = [
+                {
+                    name: Modifier.FLIP,
+                    enabled: positionFlip,
+                },
+                {
+                    name: Modifier.OFFSET,
+                    options: {
+                        offset: positionOffset,
+                    },
+                },
+            ]
+            return { placement, strategy, modifiers };
+        }
+    },
+    watch: {
+        show: {
+            handler(val) {
+                this.$nextTick(() => {
+                    if (val === true) {
+                        this.addEventListeners();
+                        this.createPopper();
+                        return;
+                    }
+
+                    this.handleReset();
+                });
+            },
+            immediate: true,
+        },
+    },
+    created() {
+        this.popper = null;
+    },
+    destroyed() {
+        this.handleReset();
+    },
+    methods: {
+        addEventListeners() {
+            window.addEventListener('blur', this.onWinBlur);
+            document.addEventListener('mousedown', this.onDocMouseDown);
+        },
+        removeEventListeners() {
+            window.removeEventListener('blur', this.onWinBlur);
+            document.removeEventListener('mousedown', this.onDocMouseDown);
+        },
+        calcStyle() {
+            const { zIndex, autoWidth } = this;
+            const target = this.getTarget();
+            const style = { zIndex };
+            if (autoWidth && target) {
+                const b = target.getBoundingClientRect();
+                style.width = `${b.width}px`;
+            }
+            this.cssStyle = style;
+        },
+        getTarget() {
+            let { target } = this;
+            return isElem(target) ? target : document.querySelector(target);
+        },
+        setShow(val) {
+            this.$nextTick(() => this.$emit('update:show', val));
+        },
+        createPopper() {
+            const { shouldFollowCursor, options, $el: popper, cursorCoordinates } = this;
+            const target = this.getTarget();
+
+            if (shouldFollowCursor) {
+                const [x, y] = cursorCoordinates;
+                const virtualElem = {
+                    getBoundingClientRect: generateGetBoundingClientRect(x, y),
+                    contextElement: target
+                }
+
+                this.popper = createPopper(virtualElem, popper, options);
+                this.unwatchCursorCoordinates = this.$watch('cursorCoordinates', ([x, y]) => {
+                    virtualElem.getBoundingClientRect = generateGetBoundingClientRect(x, y);
+                    this.popper?.update();
+                })
+            } else {
+                this.popper = createPopper(target, popper, options);
+            }
+
+            this.$nextTick(() => {
+                this.calcStyle();
+                this.popper.update();
+            });
+        },
+        destroyPopper() {
+            this.popper?.destroy();
+            this.popper = null;
+        },
+        handleReset() {
+            this.unwatchCursorCoordinates?.();
+            this.removeEventListeners();
+            this.destroyPopper();
+        },
+        onWinBlur(e) {
+            if (this.show) {
+                this.setShow(false);
+            }
+        },
+        onDocMouseDown(e) {
+            let target = this.getTarget();
+            let root = this.$el && isElem(this.$el) ? this.$el : null;
+            if ((root && root.contains(e.target)) || (target && target.contains(e.target))) {
+                return;
+            }
+            if (this.show) {
+                this.setShow(false);
+            }
+        },
+    },
+};
+</script>

package/src/components/ui/Popup.md

@@ -1,59 +1,59 @@
-Simple example
-
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-popup :visible.sync="visible" v-bind="props">
-            <template #body>
-                <div style="height:100%; max-width:30vw">
-                    <h3>Popup title</h3>
-                    <div>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam nesciunt
-                        suscipit porro alias rem consequuntur veritatis iusto accusantium cumque
-                        assumenda.
-                    </div>
-                </div>
-            </template>
-            <template #footer="{ close }">
-                <div class="text-right">
-                    <div class="btn btn-primary" @click="close">close</div>
-                </div>
-            </template>
-        </ui-popup>
-        <div class="p" v-for="k in bools" :key="k">
-            <label>
-                <input class="checkbox checkbox-small" type="checkbox" v-model="props[k]" />
-                <span class="pad-left-2 v-mid">{{ k }}</span>
-            </label>
-        </div>
-        <div class="btn btn-primary" @click="visible = true">open popup</div>
-    </div>
-</template>
-<script>
-import UiPopup from './Popup.vue';
-
-export default {
-    components: { UiPopup },
-    data() {
-        return {
-            visible: false,
-            props: {
-                modal: false,
-                fullscreen: false,
-                usePadding: true,
-                showCloseButton: true,
-                dialog: {
-                    class: {},
-                    style: {},
-                },
-            },
-        };
-    },
-    computed: {
-        bools() {
-            return Object.keys(this.props).filter(p => typeof this.props[p] == 'boolean');
-        },
-    },
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-popup :visible.sync="visible" v-bind="props">
+            <template #body>
+                <div style="height:100%; max-width:30vw">
+                    <h3>Popup title</h3>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam nesciunt
+                        suscipit porro alias rem consequuntur veritatis iusto accusantium cumque
+                        assumenda.
+                    </div>
+                </div>
+            </template>
+            <template #footer="{ close }">
+                <div class="text-right">
+                    <div class="btn btn-primary" @click="close">close</div>
+                </div>
+            </template>
+        </ui-popup>
+        <div class="p" v-for="k in bools" :key="k">
+            <label>
+                <input class="checkbox checkbox-small" type="checkbox" v-model="props[k]" />
+                <span class="pad-left-2 v-mid">{{ k }}</span>
+            </label>
+        </div>
+        <div class="btn btn-primary" @click="visible = true">open popup</div>
+    </div>
+</template>
+<script>
+import UiPopup from './Popup.vue';
+
+export default {
+    components: { UiPopup },
+    data() {
+        return {
+            visible: false,
+            props: {
+                modal: false,
+                fullscreen: false,
+                usePadding: true,
+                showCloseButton: true,
+                dialog: {
+                    class: {},
+                    style: {},
+                },
+            },
+        };
+    },
+    computed: {
+        bools() {
+            return Object.keys(this.props).filter(p => typeof this.props[p] == 'boolean');
+        },
+    },
+};
+</script>
+```