goodteditor-ui 1.0.10 → 1.0.11

package/index.js

@@ -16,6 +16,7 @@ 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';
@@ -40,8 +41,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.11",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

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>