goodteditor-ui 1.0.12 → 1.0.13

package/src/components/ui/Lazy.vue

@@ -1,92 +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>
+<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/Pagination.md

@@ -1,74 +1,74 @@
-Simple example
-
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-pagination v-bind="props" @select="n => (props.page = n)"></ui-pagination>
-    </div>
-</template>
-<script>
-import UiPagination from './Pagination.vue';
-
-export default {
-    components: { UiPagination },
-    data() {
-        return {
-            props: {
-                page: 1,
-                pages: 25,
-            },
-        };
-    },
-};
-</script>
-```
-
-Advance example. Slots, sync
-
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-pagination :page.sync="props.page" :pages="props.pages">
-            <template #before="{ page, prev }">
-                <div class="btn btn-inline" :class="{ disabled: page <= 1 }" @click="prev">
-                    prev
-                </div>
-            </template>
-            <template #default="{ page, currentPage, index, selectPage }">
-                <div
-                    class="pad-2 text-center cursor-pointer"
-                    @click="selectPage(page)"
-                    style="width:3em"
-                >
-                    <template v-if="page">
-                        <div class="d-block" :class="[page == currentPage ? 'mark' : 'code']">
-                            {{ page }}
-                        </div>
-                    </template>
-                    <template v-else>...</template>
-                </div>
-            </template>
-            <template #after="{ page, pages, next }">
-                <div class="btn btn-inline" :class="{ disabled: page >= pages }" @click="next">
-                    next
-                </div>
-            </template>
-        </ui-pagination>
-    </div>
-</template>
-<script>
-import UiPagination from './Pagination.vue';
-
-export default {
-    components: { UiPagination },
-    data() {
-        return {
-            props: {
-                page: 1,
-                pages: 25,
-            },
-        };
-    },
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-pagination v-bind="props" @select="n => (props.page = n)"></ui-pagination>
+    </div>
+</template>
+<script>
+import UiPagination from './Pagination.vue';
+
+export default {
+    components: { UiPagination },
+    data() {
+        return {
+            props: {
+                page: 1,
+                pages: 25,
+            },
+        };
+    },
+};
+</script>
+```
+
+Advance example. Slots, sync
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-pagination :page.sync="props.page" :pages="props.pages">
+            <template #before="{ page, prev }">
+                <div class="btn btn-inline" :class="{ disabled: page <= 1 }" @click="prev">
+                    prev
+                </div>
+            </template>
+            <template #default="{ page, currentPage, index, selectPage }">
+                <div
+                    class="pad-2 text-center cursor-pointer"
+                    @click="selectPage(page)"
+                    style="width:3em"
+                >
+                    <template v-if="page">
+                        <div class="d-block" :class="[page == currentPage ? 'mark' : 'code']">
+                            {{ page }}
+                        </div>
+                    </template>
+                    <template v-else>...</template>
+                </div>
+            </template>
+            <template #after="{ page, pages, next }">
+                <div class="btn btn-inline" :class="{ disabled: page >= pages }" @click="next">
+                    next
+                </div>
+            </template>
+        </ui-pagination>
+    </div>
+</template>
+<script>
+import UiPagination from './Pagination.vue';
+
+export default {
+    components: { UiPagination },
+    data() {
+        return {
+            props: {
+                page: 1,
+                pages: 25,
+            },
+        };
+    },
+};
+</script>
+```

package/src/components/ui/Pagination.vue

@@ -1,138 +1,138 @@
-<template>
-    <div class="ui-pagination">
-        <!-- 
-        @slot Custom before slot
-        @binding {Number} page    page
-        @binding {Number} pages   pages
-        @binding {Function} prev    selects prev page
-        @binding {Function} next    selects next page
-        -->
-        <slot name="before" v-bind="{ page, pages, prev, next }"></slot>
-        <!-- 
-        @slot Page item slot
-        @binding {Number} page    page
-        @binding {Number} index   index
-        @binding {Function} selectPage   function that selects the page
-        -->
-        <slot
-            v-for="(i, index) in pagesComputed"
-            v-bind="{ page: i, index, currentPage: page, selectPage }"
-        >
-            <div :key="index">
-                <div v-if="i == null">...</div>
-                <div
-                    class="btn btn-small"
-                    :class="[i == page ? 'btn-primary' : 'btn-ghost']"
-                    @click="selectPage(i)"
-                    v-else
-                >
-                    {{ i.toLocaleString() }}
-                </div>
-            </div>
-        </slot>
-        <!-- 
-        @slot Custom after slot
-        @binding {Number} page    page
-        @binding {Number} pages   pages
-        @binding {Function} prev    selects prev page
-        @binding {Function} next    selects next page
-        -->
-        <slot name="after" v-bind="{ page, pages, prev, next }"></slot>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-pagination {
-    display: flex;
-    align-items: center;
-}
-</style>
-<script>
-export default {
-    props: {
-        /**
-         * Current page
-         */
-        page: {
-            type: Number,
-            default: 1,
-        },
-        /**
-         * Total pages
-         */
-        pages: {
-            type: Number,
-            default: 1,
-        },
-        /**
-         * Number of pages to display
-         */
-        numItems: {
-            type: Number,
-            default: 7,
-        },
-    },
-    computed: {
-        pagesComputed() {
-            let arr = [];
-            let i = Math.min(
-                this.pages + 1 - this.numItems,
-                Math.max(1, this.page - ((this.numItems / 2) | 0))
-            );
-            i = i < 1 ? 1 : i;
-            let end = i + this.numItems;
-            end = end > this.pages ? this.pages : end;
-            while (i < end) {
-                arr.push(i++);
-            }
-            if (arr[0] > 1) {
-                if (arr[0] > 2) {
-                    arr.unshift(null);
-                }
-                arr.unshift(1);
-            }
-            if (arr[arr.length - 1] < this.pages) {
-                if (arr[arr.length - 1] < this.pages - 1) {
-                    arr.push(null);
-                }
-                arr.push(this.pages);
-            }
-            return arr;
-        },
-        pageFirst() {
-            return this.pagesComputed[0];
-        },
-        pageLast() {
-            return this.pagesComputed[this.pagesComputed.length - 1];
-        },
-    },
-    methods: {
-        selectPage(page) {
-            /**
-             * Select page event
-             * @property {Number} page
-             */
-            this.$emit('select', page);
-            /**
-             * Change page event
-             * @property {Number} page
-             */
-            this.$emit('change', page);
-            /**
-             * Update page event (for .sync usage)
-             * @property {Number} page
-             */
-            this.$emit('update:page', page);
-        },
-        prev() {
-            if (this.page > 1) {
-                this.selectPage(this.page - 1);
-            }
-        },
-        next() {
-            if (this.page < this.pages) {
-                this.selectPage(this.page + 1);
-            }
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-pagination">
+        <!-- 
+        @slot Custom before slot
+        @binding {Number} page    page
+        @binding {Number} pages   pages
+        @binding {Function} prev    selects prev page
+        @binding {Function} next    selects next page
+        -->
+        <slot name="before" v-bind="{ page, pages, prev, next }"></slot>
+        <!-- 
+        @slot Page item slot
+        @binding {Number} page    page
+        @binding {Number} index   index
+        @binding {Function} selectPage   function that selects the page
+        -->
+        <slot
+            v-for="(i, index) in pagesComputed"
+            v-bind="{ page: i, index, currentPage: page, selectPage }"
+        >
+            <div :key="index">
+                <div v-if="i == null">...</div>
+                <div
+                    class="btn btn-small"
+                    :class="[i == page ? 'btn-primary' : 'btn-ghost']"
+                    @click="selectPage(i)"
+                    v-else
+                >
+                    {{ i.toLocaleString() }}
+                </div>
+            </div>
+        </slot>
+        <!-- 
+        @slot Custom after slot
+        @binding {Number} page    page
+        @binding {Number} pages   pages
+        @binding {Function} prev    selects prev page
+        @binding {Function} next    selects next page
+        -->
+        <slot name="after" v-bind="{ page, pages, prev, next }"></slot>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-pagination {
+    display: flex;
+    align-items: center;
+}
+</style>
+<script>
+export default {
+    props: {
+        /**
+         * Current page
+         */
+        page: {
+            type: Number,
+            default: 1,
+        },
+        /**
+         * Total pages
+         */
+        pages: {
+            type: Number,
+            default: 1,
+        },
+        /**
+         * Number of pages to display
+         */
+        numItems: {
+            type: Number,
+            default: 7,
+        },
+    },
+    computed: {
+        pagesComputed() {
+            let arr = [];
+            let i = Math.min(
+                this.pages + 1 - this.numItems,
+                Math.max(1, this.page - ((this.numItems / 2) | 0))
+            );
+            i = i < 1 ? 1 : i;
+            let end = i + this.numItems;
+            end = end > this.pages ? this.pages : end;
+            while (i < end) {
+                arr.push(i++);
+            }
+            if (arr[0] > 1) {
+                if (arr[0] > 2) {
+                    arr.unshift(null);
+                }
+                arr.unshift(1);
+            }
+            if (arr[arr.length - 1] < this.pages) {
+                if (arr[arr.length - 1] < this.pages - 1) {
+                    arr.push(null);
+                }
+                arr.push(this.pages);
+            }
+            return arr;
+        },
+        pageFirst() {
+            return this.pagesComputed[0];
+        },
+        pageLast() {
+            return this.pagesComputed[this.pagesComputed.length - 1];
+        },
+    },
+    methods: {
+        selectPage(page) {
+            /**
+             * Select page event
+             * @property {Number} page
+             */
+            this.$emit('select', page);
+            /**
+             * Change page event
+             * @property {Number} page
+             */
+            this.$emit('change', page);
+            /**
+             * Update page event (for .sync usage)
+             * @property {Number} page
+             */
+            this.$emit('update:page', page);
+        },
+        prev() {
+            if (this.page > 1) {
+                this.selectPage(this.page - 1);
+            }
+        },
+        next() {
+            if (this.page < this.pages) {
+                this.selectPage(this.page + 1);
+            }
+        },
+    },
+};
+</script>