goodteditor-ui 1.0.10 → 1.0.13

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';
@@ -16,12 +17,14 @@ import Pagination from './src/components/ui/Pagination.vue';
 import Paginator from './src/components/ui/Paginator.vue';
 import Popover from './src/components/ui/Popover.vue';
 import Popup from './src/components/ui/Popup.vue';
+import ResponsiveContainer from './src/components/ui/ResponsiveContainer.vue';
 import Select from './src/components/ui/Select.vue';
 import TimePicker from './src/components/ui/TimePicker.vue';
 import Tooltip from './src/components/ui/Tooltip.vue';
 import Grid from './src/components/ui/Grid.vue';
 
 export {
+    Avatar,
     Badge,
     Collapse,
     ColorPicker,
@@ -40,8 +43,9 @@ export {
     Paginator,
     Popover,
     Popup,
+    ResponsiveContainer,
     Select,
     TimePicker,
     Tooltip,
-    Grid
+    Grid,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.10",
+    "version": "1.0.13",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

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,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 { cssStyle: {} };
@@ -114,39 +138,35 @@ 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 === true) {
                         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();
+                        return;
                     }
+
+                    this.handleReset();
                 });
             },
             immediate: true,
@@ -156,8 +176,7 @@ export default {
         this.popper = null;
     },
     destroyed() {
-        this.removeEventListeners();
-        this.destroyPopper();
+        this.handleReset();
     },
     methods: {
         addEventListeners() {
@@ -185,10 +204,40 @@ 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?.();
+            this.removeEventListeners();
+            this.destroyPopper();
+        },
         onWinBlur(e) {
             if (this.show) {
                 this.setShow(false);

package/src/components/ui/ResponsiveContainer.md

@@ -0,0 +1,58 @@
+```vue
+<template>
+    <div class="pad-l5">
+        <div class="p">
+            <div class="form-label form-label-small">Tile width:</div>
+            <input class="input input-small" type="number" min="0" step="10" v-model.number="tileWidth">
+        </div>
+
+        <ui-responsive-container v-bind="binds" v-slot="{ breakpoint, width, height }">
+            <!-- {demo-tile} -->
+            <div class="tile" :class="[`tile--${breakpoint}`]" :style="tileStyle">
+                <div class="tile-body">
+                    <div class="row">
+                        <div class="col col-auto tile__avatar">
+                            <img class="avatar avatar-4 round" src="https://picsum.photos/150/150" >
+                        </div>
+                        <div class="col">
+                            <div class="text-bold">John Wick</div> 
+                            <div class="text-xsmall">john.wick@site.com</div>
+                            <code>{{breakpoint}}</code> | <code>{{width}}&times;{{height}}</code>
+                        </div>
+                    </div>
+                </div>
+                <!-- {/demo-tile} -->
+            </div>
+        </ui-responsive-container>
+    </div>
+</template>
+<script>
+import UiResponsiveContainer from './ResponsiveContainer.vue';
+
+export default {
+    components: { UiResponsiveContainer },
+    data: () => ({ 
+        binds: {
+            breakpoints: {
+                's': 450,
+                'm': 550,
+                'l': 650,
+            }
+        },
+        tileWidth: ''
+    }),
+    computed: {
+        tileStyle() {
+            return { width: `${this.tileWidth}px` }
+        }
+    }
+};
+</script>
+<style scoped>
+.tile { min-width: 150px; }
+.tile--s { color: red; }
+.tile--s .tile__avatar { display:none; }
+.tile--m { color: orange; }
+.tile--l { color: green; }
+</style>
+```

package/src/components/ui/ResponsiveContainer.vue

@@ -0,0 +1,99 @@
+<script>
+import { debounce } from './utils/Helpers';
+
+const ObserverManager = {
+    observer: null,
+    records: new Map(),
+    register({ fn, el }) {
+        const { records } = this;
+        if (!records.size) {
+            this.createObserver();
+        }
+        records.set(el, fn);
+        this.observer.observe(el);
+    },
+    unregister(el) {
+        const { records } = this;
+        records.delete(el);
+        this.observer.unobserve(el);
+        if (!records.size) {
+            this.destroyObserver();
+        }
+    },
+    createObserver() {
+        const { records } = this;
+        const callback = entries => {
+            entries.forEach(entry => {
+                const fn = records.get(entry.target);
+                fn && fn(entry);
+            });
+        };
+        this.observer = new ResizeObserver(debounce(callback, 50));
+    },
+    destroyObserver() {
+        this.observer.disconnect();
+        this.observer = null;
+    },
+};
+
+export default {
+    props: {
+        /**
+         * Breakpoints hash { '<name>': '<max-width-in-px>' }<br>
+         * example:
+         * <pre>{ 'mobile': 400, 'tablet': 800 }</pre>
+         */
+        breakpoints: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+    data: () => ({ width: 0, height: 0 }),
+    computed: {
+        /**
+         * @return {[string, number][]}
+         */
+        breakpointEntries() {
+            return Object.entries(this.breakpoints).sort(([, aVal], [, bVal]) => aVal - bVal);
+        },
+        /**
+         * @return {string}
+         */
+        breakpoint() {
+            const { breakpointEntries, width } = this;
+            if (width === 0) {
+                return null;
+            }
+            const match = breakpointEntries.find(([, value]) => width < value);
+            return match?.[0] ?? null;
+        },
+    },
+    mounted() {
+        const { $el: el } = this;
+        const fn = ({ contentRect }) => {
+            this.width = contentRect.width | 0;
+            this.height = contentRect.height | 0;
+        };
+        ObserverManager.register({ fn, el });
+    },
+    beforeDestroy() {
+        ObserverManager.unregister(this.$el);
+    },
+    render(h) {
+        const { breakpoint, width, height } = this;
+        /*
+        @slot Page data slot
+        @binding {string} breakpoint    breakpoint name 
+        @binding {number} width         current container width (px)    
+        @binding {number} height        current container height (px)
+        */
+        const content = this.$scopedSlots.default
+            ? this.$scopedSlots.default({ breakpoint, width, height })
+            : null;
+        if (content.length > 1) {
+            return h('div', 'Slot content should have one child');
+        }
+        return content;
+    },
+};
+</script>

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
             };
         },
     },