goodteditor-ui 1.0.12 → 1.0.13

package/src/components/ui/Tooltip.md

@@ -1,52 +1,114 @@
-```vue
-<template>
-    <div class="pos-rel pad-l5">
-        <ui-select
-            class="pos-abs pos-top-left"
-            v-model="position"
-            v-bind="{ options, size: 'small' }"
-        ></ui-select>
-        <ui-tooltip :position="position">
-            <template #target="{ events, binds }">
-                <div
-                    class="pad-l2 bg-green color-white radius text-center"
-                    v-on="events"
-                    v-bind="binds"
-                >
-                    hover me
-                </div>
-            </template>
-            <div>Title</div>
-            <div>
-                I'm on the <code>{{ position }}</code> side
-            </div>
-        </ui-tooltip>
-    </div>
-</template>
-<script>
-import UiSelect from './Select.vue';
-import UiTooltip from './Tooltip.vue';
-export default {
-    components: { UiSelect, UiTooltip },
-    data() {
-        return {
-            position: 'top',
-            options: [
-                'left',
-                'left-start',
-                'left-end',
-                'top',
-                'top-start',
-                'top-end',
-                'bottom',
-                'bottom-start',
-                'bottom-end',
-                'right',
-                'right-start',
-                'right-end',
-            ],
-        };
-    },
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div class="pos-rel pad-l5">
+        <ui-select
+            class="pos-abs pos-top-left"
+            v-model="position"
+            v-bind="{ options, size: 'small' }"
+        ></ui-select>
+        <ui-tooltip :position="position">
+            <template #target="{ events, binds }">
+                <div
+                    class="pad-l2 bg-green color-white radius text-center"
+                    v-on="events"
+                    v-bind="binds"
+                >
+                    hover me
+                </div>
+            </template>
+            <div>Title</div>
+            <div>
+                I'm on the <code>{{ position }}</code> side
+            </div>
+        </ui-tooltip>
+    </div>
+</template>
+<script>
+import UiSelect from './Select.vue';
+import UiTooltip from './Tooltip.vue';
+export default {
+    components: { UiSelect, UiTooltip },
+    data() {
+        return {
+            position: 'top',
+            options: [
+                'left',
+                'left-start',
+                'left-end',
+                'top',
+                'top-start',
+                'top-end',
+                'bottom',
+                'bottom-start',
+                'bottom-end',
+                'right',
+                'right-start',
+                'right-end',
+            ],
+        };
+    },
+};
+</script>
+```
+
+Advanced example. Using cursor tracking
+
+```vue
+<template>
+    <div class="pos-rel pad-l5">
+        <ui-tooltip v-bind="options">
+            <template #target="{ binds }">
+                <div
+                    ref="target"
+                    class="pad-l2 bg-green color-white radius text-center"
+                    v-bind="binds"
+                >
+                    hover me
+                </div>
+            </template>
+            <div>
+                I follow the cursor everywhere
+            </div>
+        </ui-tooltip>
+    </div>
+</template>
+<script>
+import UiTooltip from './Tooltip.vue';
+export default {
+    components: { UiTooltip },
+    data() {
+        return {
+            options: {
+                show: false,
+                shouldFollowCursor: true,
+                cursorCoordinates: [0, 0]
+            }
+        };
+    },
+    mounted() {
+        this.$refs.target.addEventListener('mouseover', this.showTooltip);
+        this.$refs.target.addEventListener('mousemove', this.changeTooltipCoords);
+        this.$refs.target.addEventListener('mouseleave', this.hideTooltip);
+    },
+    beforeDestroy() {
+        this.$refs.target.removeEventListener('mouseover', this.showTooltip);
+        this.$refs.target.removeEventListener('mousemove', this.changeTooltipCoords);
+        this.$refs.target.removeEventListener('mouseleave', this.hideTooltip);
+
+    },
+    methods: {
+        showTooltip() {
+            this.options.show = true;
+        },
+        hideTooltip() {
+            this.options.show = false;
+        },
+        changeTooltipCoords({ clientX: x, clientY: y }) {
+            this.options.cursorCoordinates = [x, y];
+        }
+    }
+};
+</script>
+```

package/src/components/ui/Tooltip.vue

@@ -1,113 +1,113 @@
-<template>
-    <div class="ui-tooltip">
-        <slot name="target" v-bind="{ events: targetEvents, binds: targetBinds }"></slot>
-        <ui-popover
-            v-bind="popoverOptions"
-            :show.sync="popoverShow"
-            @mouseenter.native="onPopoverMouseEnter"
-            @mouseleave.native="onPopoverMouseLeave"
-        >
-            <!-- 
-            @slot Tooltip slot
-            -->
-            <slot name="tooltip">
-                <div class="tooltip">
-                    <!-- 
-                    @slot Tooltip content slot
-                    -->
-                    <slot></slot>
-                </div>
-            </slot>
-        </ui-popover>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-tooltip {
-    display: contents;
-}
-</style>
-<script>
-import UiPopover from './Popover.vue';
-import { Position } from './utils/Helpers';
-import WithPopover from './utils/WithPopover';
-
-export default {
-    components: { UiPopover },
-    mixins: [WithPopover],
-    props: {
-        /**
-         * Whether to show the tooltip
-         */
-        show: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Hide delay in ms
-         */
-        hideDelay: {
-            type: Number,
-            default: 150,
-        },
-        position: {
-            type: String,
-            default: Position.TOP,
-        },
-        positionOffset: {
-            type: Array,
-            default() {
-                return [0, 5];
-            },
-        },
-    },
-    data() {
-        return {
-            targetEvents: {
-                mouseenter: this.onTargetMouseEnter,
-                mouseleave: this.onTargetMouseLeave,
-            },
-            timeout: null,
-        };
-    },
-    computed: {
-        targetBinds() {
-            return {
-                'data-popover': this.popoverTargetId,
-            };
-        },
-    },
-    watch: {
-        show: {
-            handler(v) {
-                this.setShow(v);
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        setShow(val) {
-            const { timeout, hideDelay } = this;
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-            if (val) {
-                this.popoverShow = true;
-            } else {
-                this.timeout = setTimeout(() => (this.popoverShow = false), hideDelay);
-            }
-        },
-        onTargetMouseEnter(e) {
-            this.setShow(true);
-        },
-        onTargetMouseLeave(e) {
-            this.setShow(false);
-        },
-        onPopoverMouseEnter(e) {
-            this.setShow(true);
-        },
-        onPopoverMouseLeave(e) {
-            this.setShow(false);
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-tooltip">
+        <slot name="target" v-bind="{ events: targetEvents, binds: targetBinds }"></slot>
+        <ui-popover
+            v-bind="popoverOptions"
+            :show.sync="popoverShow"
+            @mouseenter.native="onPopoverMouseEnter"
+            @mouseleave.native="onPopoverMouseLeave"
+        >
+            <!-- 
+            @slot Tooltip slot
+            -->
+            <slot name="tooltip">
+                <div class="tooltip">
+                    <!-- 
+                    @slot Tooltip content slot
+                    -->
+                    <slot></slot>
+                </div>
+            </slot>
+        </ui-popover>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-tooltip {
+    display: contents;
+}
+</style>
+<script>
+import UiPopover from './Popover.vue';
+import { Position } from './utils/Helpers';
+import WithPopover from './utils/WithPopover';
+
+export default {
+    components: { UiPopover },
+    mixins: [WithPopover],
+    props: {
+        /**
+         * Whether to show the tooltip
+         */
+        show: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Hide delay in ms
+         */
+        hideDelay: {
+            type: Number,
+            default: 150,
+        },
+        position: {
+            type: String,
+            default: Position.TOP,
+        },
+        positionOffset: {
+            type: Array,
+            default() {
+                return [0, 5];
+            },
+        },
+    },
+    data() {
+        return {
+            targetEvents: {
+                mouseenter: this.onTargetMouseEnter,
+                mouseleave: this.onTargetMouseLeave,
+            },
+            timeout: null,
+        };
+    },
+    computed: {
+        targetBinds() {
+            return {
+                'data-popover': this.popoverTargetId,
+            };
+        },
+    },
+    watch: {
+        show: {
+            handler(v) {
+                this.setShow(v);
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        setShow(val) {
+            const { timeout, hideDelay } = this;
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+            if (val) {
+                this.popoverShow = true;
+            } else {
+                this.timeout = setTimeout(() => (this.popoverShow = false), hideDelay);
+            }
+        },
+        onTargetMouseEnter(e) {
+            this.setShow(true);
+        },
+        onTargetMouseLeave(e) {
+            this.setShow(false);
+        },
+        onPopoverMouseEnter(e) {
+            this.setShow(true);
+        },
+        onPopoverMouseLeave(e) {
+            this.setShow(false);
+        },
+    },
+};
+</script>

package/src/components/ui/utils/FormComponent.js

@@ -1,107 +1,107 @@
-const r = () =>
-    Math.random()
-        .toString(36)
-        .substr(2);
-
-export default {
-    props: {
-        /**
-         * @model
-         */
-        value: {
-            default: '',
-        },
-        /**
-         * Defines the size of the component
-         * @values '', small, large
-         */
-        size: {
-            type: String,
-            default: '',
-            validator: function(value) {
-                return ['', 'small', 'large'].indexOf(value) >= 0;
-            },
-        },
-        /**
-         * Placeholder
-         */
-        placeholder: {
-            type: String,
-            default: '',
-        },
-        /**
-         * Readonly
-         */
-        readonly: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Disabled
-         */
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            inputId: this.uid(),
-            cssClass: {},
-            rootHasFocus: false,
-        };
-    },
-    watch: {
-        size: {
-            handler(val, valOld) {
-                if (valOld) {
-                    this.$delete(this.cssClass, `form-elem-${valOld}`);
-                }
-                if (val) {
-                    this.$set(this.cssClass, `form-elem-${val}`, true);
-                }
-            },
-            immediate: true,
-        },
-        readonly: {
-            handler(val) {
-                this.$set(this.cssClass, 'events-none', val);
-            },
-            immediate: true,
-        },
-        disabled: {
-            handler(val) {
-                this.$set(this.cssClass, 'disabled', val);
-            },
-            immediate: true,
-        },
-        rootHasFocus(val) {
-            this.$set(this.cssClass, 'focus', val);
-        },
-    },
-    created() {
-        window.addEventListener('blur', this.onWinBlur);
-        document.addEventListener('mousedown', this.onDocMouseDown);
-    },
-    destroyed() {
-        window.removeEventListener('blur', this.onWinBlur);
-        document.removeEventListener('mousedown', this.onDocMouseDown);
-    },
-    methods: {
-        uid() {
-            return `${r()}-${r()}`;
-        },
-        getInputRef() {
-            return document ? document.getElementById(this.inputId) : null;
-        },
-        onWinBlur(e) {
-            this.rootHasFocus = false;
-        },
-        onDocMouseDown(e) {
-            if (this.$el.contains(e.target)) {
-                return;
-            }
-            this.rootHasFocus = false;
-        },
-    },
-};
+const r = () =>
+    Math.random()
+        .toString(36)
+        .substr(2);
+
+export default {
+    props: {
+        /**
+         * @model
+         */
+        value: {
+            default: '',
+        },
+        /**
+         * Defines the size of the component
+         * @values '', small, large
+         */
+        size: {
+            type: String,
+            default: '',
+            validator: function(value) {
+                return ['', 'small', 'large'].indexOf(value) >= 0;
+            },
+        },
+        /**
+         * Placeholder
+         */
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Readonly
+         */
+        readonly: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Disabled
+         */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            inputId: this.uid(),
+            cssClass: {},
+            rootHasFocus: false,
+        };
+    },
+    watch: {
+        size: {
+            handler(val, valOld) {
+                if (valOld) {
+                    this.$delete(this.cssClass, `form-elem-${valOld}`);
+                }
+                if (val) {
+                    this.$set(this.cssClass, `form-elem-${val}`, true);
+                }
+            },
+            immediate: true,
+        },
+        readonly: {
+            handler(val) {
+                this.$set(this.cssClass, 'events-none', val);
+            },
+            immediate: true,
+        },
+        disabled: {
+            handler(val) {
+                this.$set(this.cssClass, 'disabled', val);
+            },
+            immediate: true,
+        },
+        rootHasFocus(val) {
+            this.$set(this.cssClass, 'focus', val);
+        },
+    },
+    created() {
+        window.addEventListener('blur', this.onWinBlur);
+        document.addEventListener('mousedown', this.onDocMouseDown);
+    },
+    destroyed() {
+        window.removeEventListener('blur', this.onWinBlur);
+        document.removeEventListener('mousedown', this.onDocMouseDown);
+    },
+    methods: {
+        uid() {
+            return `${r()}-${r()}`;
+        },
+        getInputRef() {
+            return document ? document.getElementById(this.inputId) : null;
+        },
+        onWinBlur(e) {
+            this.rootHasFocus = false;
+        },
+        onDocMouseDown(e) {
+            if (this.$el.contains(e.target)) {
+                return;
+            }
+            this.rootHasFocus = false;
+        },
+    },
+};