goodteditor-ui 1.0.11 → 1.0.14

package/index.js

@@ -1,3 +1,4 @@
+import Avatar from './src/components/ui/Avatar.vue';
 import Badge from './src/components/ui/Badge.vue';
 import Collapse from './src/components/ui/Collapse.vue';
 import ColorPicker from './src/components/ui/ColorPicker.vue';
@@ -23,6 +24,7 @@ import Tooltip from './src/components/ui/Tooltip.vue';
 import Grid from './src/components/ui/Grid.vue';
 
 export {
+    Avatar,
     Badge,
     Collapse,
     ColorPicker,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.11",
+    "version": "1.0.14",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {
@@ -10,8 +10,7 @@
         "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",
-        "publish": "npm run docs:build && npm run docs:deploy && npm run notify"
+        "notify": "node ./ci/teams-notify.js"
     },
     "devDependencies": {
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",

package/src/components/ui/Avatar.md

@@ -0,0 +1,68 @@
+```vue
+<template>
+    <div class="pad-l5">
+        <div class="p">
+            <!-- default -->
+            <ui-avatar v-bind="props" @load="onLoad" @error="onError"></ui-avatar>
+            
+            <!-- custom slots -->
+            <ui-avatar v-bind="props">
+                <template v-slot="{abbr}">
+                    <code>{{abbr}}</code>
+                </template>
+                <template #loading>loading</template>
+            </ui-avatar>
+        </div>
+        <div class="row">
+            <div class="col">
+                <template v-for="key in Object.keys(props)">
+                    <label class="text-small " v-if="isBool(key)">                
+                        <input class="checkbox checkbox-small" type="checkbox" v-model="props[key]">
+                        <span class="v-mid">{{key}}</span>
+                    </label>
+                    <div :key="key" v-else>
+                        <label class="text-xsmall">{{key}}</label>
+                        <input class="input input-small d-block" type="text" v-model="props[key]">
+                    </div>
+                </template>
+            </div>
+            <div class="col">
+                <pre class="text-xsmall" style="max-height:10rem">{{logStr}}</pre>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import UiAvatar from './Avatar.vue';
+
+export default {
+    components: { UiAvatar },
+    data() {
+        return { 
+            props: { 
+                round: true,
+                src:'https://picsum.photos/150/150',
+                size: '4rem',
+                alt: 'John Wick', 
+                color: '#ffffff',
+                background:'#fca522',
+            },
+            log:[]
+        }
+    },
+    computed: {
+        logStr() {
+            return this.log.reverse().join("\n")
+        }
+    },
+    methods: {
+        isBool(key) {
+            return key === 'round'
+        },
+        addLog(n,e) { this.log.push(`event: ${n}`) },
+        onLoad(e) { this.addLog('load') },
+        onError(e) { this.addLog('error') },
+    }
+};
+</script>
+```

package/src/components/ui/Avatar.vue

@@ -0,0 +1,177 @@
+<template>
+    <div class="ui-avatar" :style="cssStyle">
+        <img
+            class="ui-avatar__img"
+            :src="src"
+            :alt="isDoneState ? alt : ''"
+            @error="onImageError"
+            @load="onImageLoad"
+            v-if="isLoadingState || isDoneState"
+        />
+        <div class="ui-avatar__alt" v-if="isErrorState">
+            <!--
+            @slot Alternative content slot (displayed if no image provided)
+            @binding {string} alt       alternative text
+            @binding {string} abbr      alternative text abbr
+            -->
+            <slot v-bind="{ alt, abbr }">
+                <b class="ui-avatar__abbr">{{ abbr }}</b>
+            </slot>
+        </div>
+        <div class="ui-avatar__loading" v-else-if="isLoadingState">
+            <!--
+            @slot Loading content slot 
+            -->
+            <slot name="loading">
+                <div class="preloader color-inherit"></div>
+            </slot>
+        </div>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-avatar {
+    --size: 2rem;
+    --alt-scale: 0.4;
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    &__abbr {
+        font-size: calc(var(--size) * var(--alt-scale));
+        line-height: 1;
+    }
+    &__img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    &__alt,
+    &__loading {
+        position: absolute;
+    }
+}
+</style>
+<script>
+const State = {
+    LOADING: 'loading',
+    ERROR: 'error',
+    DONE: 'done',
+};
+export default {
+    props: {
+        /**
+         * Avatar src url
+         */
+        src: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Alternative text
+         */
+        alt: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Color (any web color format)
+         */
+        color: {
+            type: String,
+            default: '#fff',
+        },
+        /**
+         * Background color (any web color format)
+         */
+        background: {
+            type: String,
+            default: '#999',
+        },
+        /**
+         * Whether the avatar should be around
+         */
+        round: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Defines avatar's size (any web size)
+         */
+        size: {
+            type: String,
+            default: '2rem',
+        },
+    },
+    data: () => ({ state: State.LOADING }),
+    computed: {
+        /**
+         * @return {boolean}
+         */
+        isLoadingState() {
+            return this.state === State.LOADING;
+        },
+        /**
+         * @return {boolean}
+         */
+        isErrorState() {
+            return this.state === State.ERROR;
+        },
+        /**
+         * @return {boolean}
+         */
+        isDoneState() {
+            return this.state === State.DONE;
+        },
+        /**
+         * @return {object}
+         */
+        cssClass() {
+            return { 'ui-avatar--round': this.round };
+        },
+        /**
+         * @return {object}
+         */
+        cssStyle() {
+            const { size, color, round, background } = this;
+            const borderRadius = round ? '50%' : 0;
+            return { '--size': size, height: size, color, background, borderRadius };
+        },
+        /**
+         * @return {string}
+         */
+        abbr() {
+            const str = this.alt ?? '';
+            return str
+                .split(' ')
+                .map(s => (s.length ? s[0].toUpperCase() : ''))
+                .join('');
+        },
+    },
+    watch: {
+        src() {
+            this.state = State.LOADING;
+        },
+    },
+    methods: {
+        onImageError(event) {
+            this.state = State.ERROR;
+            /**
+             * Error event
+             * @property {Event} event
+             */
+            this.$emit('error', event);
+        },
+        onImageLoad(event) {
+            this.state = State.DONE;
+            /**
+             * Load event
+             * @property {Event} event
+             */
+            this.$emit('load', event);
+        },
+    },
+};
+</script>

package/src/components/ui/Popover.vue

@@ -19,10 +19,20 @@
 </style>
 <script>
 import { createPopper } from '@popperjs/core';
-import { Position } from './utils/Helpers';
+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': {
@@ -96,6 +106,27 @@ export default {
             type: Boolean,
             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
+         */
+        isManualControlMode: {
+            type: Boolean,
+            default: false
+        }
     },
     data() {
         return { cssStyle: {} };
@@ -114,39 +145,38 @@ export default {
             }
             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) {
-                const { appendToBody, placement, positionFlip, positionOffset } = this;
-                const strategy = appendToBody ? 'fixed' : 'absolute';
                 this.$nextTick(() => {
-                    if (val) {
+                    if (val === false) {
+                        this.handleReset();
+                        return;
+                    }
+
+                    if (this.isManualControlMode === false) {
                         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();
                     }
+
+                    this.createPopper();
                 });
             },
             immediate: true,
@@ -156,8 +186,7 @@ export default {
         this.popper = null;
     },
     destroyed() {
-        this.removeEventListeners();
-        this.destroyPopper();
+        this.handleReset();
     },
     methods: {
         addEventListeners() {
@@ -185,10 +214,42 @@ export default {
         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 && this.popper.destroy();
+            this.popper?.destroy();
             this.popper = null;
         },
+        handleReset() {
+            this.unwatchCursorCoordinates?.();
+            if (this.isManualControlMode === false) {
+                this.removeEventListeners();
+            }
+            this.destroyPopper();
+        },
         onWinBlur(e) {
             if (this.show) {
                 this.setShow(false);

package/src/components/ui/Tooltip.md

@@ -1,3 +1,5 @@
+Simple example
+
 ```vue
 <template>
     <div class="pos-rel pad-l5">
@@ -50,3 +52,63 @@ export default {
 };
 </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/utils/Helpers.js

@@ -58,4 +58,27 @@ const useIntersectionObserver = (target, callback, options) => {
     return { observer, stop: () => observer.disconnect() };
 };
 
-export { scrollIntoView, isDateValid, nextId, Key, Position, debounce, useIntersectionObserver };
+/**
+ * @param {number} x - x-axis coordinate
+ * @param {number} y - y-axis coordinate
+ * @return {function: DOMRect}
+ */
+const generateGetBoundingClientRect = (x = 0, y = 0) => () => ({
+    width: 0,
+    height: 0,
+    top: y,
+    right: x,
+    bottom: y,
+    left: x,
+});
+
+export {
+    scrollIntoView,
+    isDateValid,
+    nextId,
+    Key,
+    Position,
+    debounce,
+    useIntersectionObserver,
+    generateGetBoundingClientRect,
+};

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

@@ -43,6 +43,20 @@ export default {
             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 {
@@ -62,6 +76,8 @@ export default {
                 positionOffset,
                 autoWidth,
                 popoverTarget: target,
+                shouldFollowCursor,
+                cursorCoordinates
             } = this;
             return {
                 zIndex,
@@ -70,6 +86,8 @@ export default {
                 positionOffset,
                 autoWidth,
                 target,
+                shouldFollowCursor,
+                cursorCoordinates
             };
         },
     },