goodteditor-ui 1.0.12 → 1.0.13

package/src/components/ui/Popup.vue

@@ -1,150 +1,150 @@
-<template>
-    <div
-        class="ui-popup popup popup-fixed"
-        :class="{ fullscreen: fullscreen }"
-        @click="onClick"
-        v-if="visible"
-    >
-        <div class="popup-dialog" v-bind="dialog">
-            <!-- 
-            @slot Custom close slot
-            @binding {Function} close    closes the popup
-            -->
-            <slot name="close" v-bind="{ close }" v-if="showCloseButton">
-                <div class="icon close" @click="close">
-                    <i class="mdi mdi-close" style="font-size: 1.25rem"></i>
-                </div>
-            </slot>
-            <div class="popup-dialog-body" :class="{ 'pad-none': !usePadding }">
-                <!-- 
-                @slot Custom body slot
-                @binding {Function} close    closes the popup
-                -->
-                <slot name="body" v-bind="{ close }"></slot>
-            </div>
-            <div
-                class="popup-dialog-footer"
-                :class="{ 'pad-none': !usePadding }"
-                v-if="$scopedSlots.footer"
-            >
-                <!-- 
-                @slot Custom footer slot
-                @binding {Function} close    closes the popup
-                -->
-                <slot name="footer" v-bind="{ close }"></slot>
-            </div>
-        </div>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-popup {
-    &.fullscreen {
-        .popup-dialog {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            height: 100%;
-            min-height: 100%;
-            border-radius: 0;
-            overflow: auto;
-            &-body {
-                flex: 1;
-                height: 0;
-            }
-        }
-    }
-}
-</style>
-<script>
-export default {
-    props: {
-        /**
-         * Whether the popup is visible (.sync supported)
-         */
-        visible: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Whether the popup is modal (clicking outside closes the popup)
-         */
-        modal: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Whether the popup is fullscreen
-         */
-        fullscreen: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Popup dialog options for styling css/style
-         * { class:any style:any }
-         */
-        dialog: {
-            type: Object,
-            default() {
-                return { class: {}, style: {} };
-            },
-        },
-        /**
-         * Whether to show the close button
-         */
-        showCloseButton: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Whether the popup body/footer should have padding
-         */
-        usePadding: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Css class which applies on 'body' node when the popup is visible
-         */
-        visibleBodyClass: {
-            type: String,
-            default: 'scroll-hide',
-        },
-    },
-    watch: {
-        visible: {
-            handler(val) {
-                if (!this.visibleBodyClass) {
-                    return;
-                }
-                let m = val ? 'add' : 'remove';
-                document.body.classList[m](this.visibleBodyClass);
-            },
-            immediate: true,
-        },
-    },
-    beforeDestroy() {
-        if (this.visibleBodyClass) {
-            document.body.classList.remove(this.visibleBodyClass);
-        }
-    },
-    methods: {
-        close() {
-            /**
-             * Close event
-             */
-            this.$emit('close');
-            /**
-             * Visibility update event (visible.sync compatibility)
-             * @property {Boolean} visible
-             */
-            this.$emit('update:visible', false);
-        },
-        onClick(e) {
-            if (!this.modal && e.target == this.$el) {
-                this.close();
-            }
-        },
-    },
-};
-</script>
+<template>
+    <div
+        class="ui-popup popup popup-fixed"
+        :class="{ fullscreen: fullscreen }"
+        @click="onClick"
+        v-if="visible"
+    >
+        <div class="popup-dialog" v-bind="dialog">
+            <!-- 
+            @slot Custom close slot
+            @binding {Function} close    closes the popup
+            -->
+            <slot name="close" v-bind="{ close }" v-if="showCloseButton">
+                <div class="icon close" @click="close">
+                    <i class="mdi mdi-close" style="font-size: 1.25rem"></i>
+                </div>
+            </slot>
+            <div class="popup-dialog-body" :class="{ 'pad-none': !usePadding }">
+                <!-- 
+                @slot Custom body slot
+                @binding {Function} close    closes the popup
+                -->
+                <slot name="body" v-bind="{ close }"></slot>
+            </div>
+            <div
+                class="popup-dialog-footer"
+                :class="{ 'pad-none': !usePadding }"
+                v-if="$scopedSlots.footer"
+            >
+                <!-- 
+                @slot Custom footer slot
+                @binding {Function} close    closes the popup
+                -->
+                <slot name="footer" v-bind="{ close }"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-popup {
+    &.fullscreen {
+        .popup-dialog {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            min-height: 100%;
+            border-radius: 0;
+            overflow: auto;
+            &-body {
+                flex: 1;
+                height: 0;
+            }
+        }
+    }
+}
+</style>
+<script>
+export default {
+    props: {
+        /**
+         * Whether the popup is visible (.sync supported)
+         */
+        visible: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Whether the popup is modal (clicking outside closes the popup)
+         */
+        modal: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Whether the popup is fullscreen
+         */
+        fullscreen: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Popup dialog options for styling css/style
+         * { class:any style:any }
+         */
+        dialog: {
+            type: Object,
+            default() {
+                return { class: {}, style: {} };
+            },
+        },
+        /**
+         * Whether to show the close button
+         */
+        showCloseButton: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Whether the popup body/footer should have padding
+         */
+        usePadding: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Css class which applies on 'body' node when the popup is visible
+         */
+        visibleBodyClass: {
+            type: String,
+            default: 'scroll-hide',
+        },
+    },
+    watch: {
+        visible: {
+            handler(val) {
+                if (!this.visibleBodyClass) {
+                    return;
+                }
+                let m = val ? 'add' : 'remove';
+                document.body.classList[m](this.visibleBodyClass);
+            },
+            immediate: true,
+        },
+    },
+    beforeDestroy() {
+        if (this.visibleBodyClass) {
+            document.body.classList.remove(this.visibleBodyClass);
+        }
+    },
+    methods: {
+        close() {
+            /**
+             * Close event
+             */
+            this.$emit('close');
+            /**
+             * Visibility update event (visible.sync compatibility)
+             * @property {Boolean} visible
+             */
+            this.$emit('update:visible', false);
+        },
+        onClick(e) {
+            if (!this.modal && e.target == this.$el) {
+                this.close();
+            }
+        },
+    },
+};
+</script>

package/src/components/ui/ResponsiveContainer.md

@@ -1,58 +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>
-```
+```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

@@ -1,99 +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>
+<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>