goodteditor-ui 1.0.3 → 1.0.7

package/index.js

@@ -11,6 +11,7 @@ import InputDatePicker from './src/components/ui/InputDatePicker.vue';
 import InputTags from './src/components/ui/InputTags.vue';
 import InputTimePicker from './src/components/ui/InputTimePicker.vue';
 import InputUnits from './src/components/ui/InputUnits.vue';
+import Lazy from './src/components/ui/Lazy.vue';
 import Pagination from './src/components/ui/Pagination.vue';
 import Paginator from './src/components/ui/Paginator.vue';
 import Popover from './src/components/ui/Popover.vue';
@@ -33,6 +34,7 @@ export {
     InputTags,
     InputTimePicker,
     InputUnits,
+    Lazy,
     Pagination,
     Paginator,
     Popover,

package/package.json

@@ -1,20 +1,24 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.3",
+    "version": "1.0.7",
     "main": "index.js",
+    "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {
         "serve": "vue-cli-service serve",
         "build": "vue-cli-service build",
         "lint": "vue-cli-service lint",
-        "styleguide": "vue-styleguidist server",
-        "styleguide:build": "set NODE_ENV=development && vue-styleguidist build",
-        "deploy:docs": "npx netlify deploy --dir=docs --prod"
+        "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"
     },
     "devDependencies": {
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@vue/cli-plugin-babel": "^4.5.11",
         "@vue/cli-plugin-eslint": "^4.5.11",
         "@vue/cli-service": "^4.5.11",
+        "axios": "^0.24.0",
         "babel-eslint": "^10.1.0",
         "eslint": "^6.7.2",
         "eslint-plugin-vue": "^6.2.2",

package/src/components/ui/FileSelector.vue

@@ -21,6 +21,7 @@
     &-input {
         cursor: pointer;
         overflow: hidden;
+        opacity: 0;
         &::file-selector-button {
             width: 100%;
             height: 100%;

package/src/components/ui/InputUnits.vue

@@ -6,7 +6,7 @@
         @focus="onRootFocus"
         tabindex="0"
     >
-        <!-- 
+        <!--
         @slot Custom input slot
         @binding {String} id            input id attribute value
         @binding {String} value         input value
@@ -36,7 +36,7 @@
                 @select-option="onUnitChange"
             >
                 <template #header>
-                    <!-- 
+                    <!--
                     @slot Dropdown header content
                     -->
                     <slot name="dropdown-header"></slot>
@@ -49,12 +49,12 @@
                         setCursorIndex,
                     }"
                 >
-                    <!-- 
+                    <!--
                     @slot Dropdown option
                     @binding {String} option         option
                     @binding {Number} index          option index
                     @binding {String} selectedOption current selected option
-                    @binding {Number} cursorIndex    current dropdown selection index 
+                    @binding {Number} cursorIndex    current dropdown selection index
                     @binding {Function} selectOption    function that select's the option
                     @binding {Function} setCursorIndex  function that sets the cursor index
                     -->
@@ -121,7 +121,7 @@ import UiDatalist from './Datalist.vue';
 import UiPopover from './Popover.vue';
 import { Key, Position } from './utils/Helpers';
 
-const withUnitRegExp = /^([\d.]*)(\D+)$/i;
+const withUnitRegExp = /^(-?[\d.]*)(\D+)$/i;
 
 export default {
     mixins: [FormComponent, WithPopover],

package/src/components/ui/Lazy.md

@@ -0,0 +1,37 @@
+```vue
+<template>
+    <div class="pad-l5">
+        <p>Lazy list: {{ numItems }} items (see devtools)</p>
+        <div id="lazy-container" class="tile">
+            <ui-lazy v-bind="props" v-for="i in numItems" :key="`lazy` + i">
+                <test-component>lazy #{{ i }}</test-component>
+            </ui-lazy>
+        </div>
+    </div>
+</template>
+<script>
+import UiLazy from './Lazy.vue';
+
+const TestComponent = {
+    template: `<div class="pad-h-l1 pad-v-3"><slot></slot></div>`,
+};
+export default {
+    components: { UiLazy, TestComponent },
+    data() {
+        return {
+            props: {
+                root: '#lazy-container',
+                minHeight: '2rem',
+            },
+            numItems: 1000,
+        };
+    },
+};
+</script>
+<style scoped>
+#lazy-container {
+    overflow: auto;
+    max-height: 10rem;
+}
+</style>
+```

package/src/components/ui/Lazy.vue

@@ -0,0 +1,92 @@
+<script>
+import { useIntersectionObserver } from './utils/Helpers';
+
+export default {
+    props: {
+        /** which tag name to use when wrapping slot */
+        tag: { type: String, default: 'div' },
+        /** viewport element selector/reference or null for 'viewport' */
+        root: { type: [String, Element], default: null },
+        /** viewport margins */
+        rootMargin: { type: String, default: '300px' },
+        /** target's visibility ratios */
+        threshold: { type: [Number, Array], default: 0 },
+        /** defered rendering delay (ms) */
+        renderDelay: { type: Number, default: 100 },
+        /** defered rendering delay (ms) */
+        unrenderDelay: { type: Number, default: 500 },
+        /** default initial min-height of the lazy content */
+        minHeight: { type: String, default: '' },
+    },
+    data: () => ({ shouldRender: false, minHeightCalc: 0 }),
+    created() {
+        /** @type {Function} */
+        this.stopObserver = null;
+        /** @type {number} */
+        this.renderTimeout = null;
+    },
+    computed: {
+        /** @return {object} */
+        cssStyle() {
+            const { minHeight, minHeightCalc } = this;
+            const mh = minHeightCalc ? `${minHeightCalc}px` : minHeight;
+            return { minHeight: mh };
+        },
+    },
+    mounted() {
+        const { root: rootSelector, rootMargin, threshold } = this;
+        const root =
+            rootSelector instanceof Element ? rootSelector : document.querySelector(rootSelector);
+        const { stop } = useIntersectionObserver(
+            this.$el,
+            ([{ isIntersecting }]) => this.handleIntersection(isIntersecting),
+            { root, rootMargin, threshold }
+        );
+        this.stopObserver = stop;
+        this.calcMinHeight();
+    },
+    beforeDestroy() {
+        if (this.stopObserver) {
+            this.stopObserver();
+        }
+        this.calcMinHeight();
+    },
+    methods: {
+        /**
+         * @param {boolean} shouldRender
+         * @effect shouldRender, renderTimeout
+         */
+        handleIntersection(shouldRender) {
+            const { renderTimeout, renderDelay, unrenderDelay } = this;
+            // clear prev render/unrender if any
+            if (renderTimeout) {
+                clearTimeout(renderTimeout);
+            }
+            const delay = shouldRender ? renderDelay : unrenderDelay;
+            this.renderTimeout = setTimeout(() => {
+                this.$nextTick(() => {
+                    this.shouldRender = shouldRender;
+                    if (shouldRender) {
+                        this.calcMinHeight();
+                    }
+                });
+            }, delay);
+        },
+        /**
+         * Recalcs min-height
+         * @effect minHeightCalc
+         */
+        calcMinHeight() {
+            this.$nextTick(() => {
+                this.minHeightCalc = this.$el.clientHeight;
+            });
+        },
+    },
+    render(h) {
+        const { tag, shouldRender, cssStyle: style } = this;
+        const { default: defaultSlot } = this.$scopedSlots;
+        const children = shouldRender && defaultSlot ? defaultSlot() : [];
+        return h(tag, { style }, children);
+    },
+};
+</script>

package/src/components/ui/Popover.vue

@@ -97,17 +97,10 @@ export default {
             default: false,
         },
     },
+    data() {
+        return { cssStyle: {} };
+    },
     computed: {
-        cssStyle() {
-            const { zIndex, autoWidth } = this;
-            const obj = { zIndex };
-            const target = this.getTarget();
-            if (autoWidth && target) {
-                const b = target.getBoundingClientRect();
-                obj.width = `${b.width}px`;
-            }
-            return obj;
-        },
         placement() {
             const { position } = this;
             const map = { t: Position.TOP, l: Position.START, r: Position.END, b: Position.BOTTOM };
@@ -146,7 +139,10 @@ export default {
                                 },
                             ],
                         });
-                        this.$nextTick(() => this.popper.update());
+                        this.$nextTick(() => {
+                            this.calcStyle();
+                            this.popper.update();
+                        });
                     } else {
                         this.removeEventListeners();
                         this.destroyPopper();
@@ -172,6 +168,16 @@ export default {
             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);

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

@@ -1,4 +1,4 @@
-let scrollIntoView = c => {
+const scrollIntoView = c => {
     if (!c || !c.parentNode) {
         return;
     }
@@ -15,8 +15,8 @@ let scrollIntoView = c => {
 };
 
 let ID = 1;
-let nextId = prefix => `${prefix}-${ID++}`;
-let isDateValid = d => d instanceof Date && !isNaN(d.getTime());
+const nextId = prefix => `${prefix}-${ID++}`;
+const isDateValid = d => d instanceof Date && !isNaN(d.getTime());
 
 const Key = {
     UP: 'ArrowUp',
@@ -34,7 +34,7 @@ const Position = {
     END: 'end',
 };
 
-const debounce = (func, wait) => {
+const debounce = (func, delay) => {
     let timeout;
     return function executedFunction(...args) {
         const later = () => {
@@ -42,8 +42,20 @@ const debounce = (func, wait) => {
             func(...args);
         };
         clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
+        timeout = setTimeout(later, delay);
     };
 };
 
-export { scrollIntoView, isDateValid, nextId, Key, Position, debounce };
+/**
+ * @param {Element} target
+ * @param {IntersectionObserverCallback} callback
+ * @param {IntersectionObserverInit} options
+ * @return {{ observer:IntersectionObserver, stop:Function }}
+ */
+const useIntersectionObserver = (target, callback, options) => {
+    const observer = new IntersectionObserver(callback, options);
+    observer.observe(target);
+    return { observer, stop: () => observer.disconnect() };
+};
+
+export { scrollIntoView, isDateValid, nextId, Key, Position, debounce, useIntersectionObserver };

package/public/index.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-        <link rel="stylesheet" href="https://goodt-css.netlify.app/css/all.css" />
-        <link
-            rel="stylesheet"
-            href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"
-        />
-        <link
-            rel="stylesheet"
-            href="http://cdn.materialdesignicons.com/light/0.2.63/css/materialdesignicons-light.min.css"
-        />
-        <title><%= htmlWebpackPlugin.options.title %></title>
-    </head>
-
-    <body>
-        <noscript>
-            <strong
-                >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly
-                without JavaScript enabled. Please enable it to continue.</strong
-            >
-        </noscript>
-        <div id="app"></div>
-        <!-- built files will be auto injected -->
-    </body>
-</html>