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

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