goodteditor-ui 1.0.20 → 1.0.23

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

@@ -1,107 +1,107 @@
-const r = () =>
-    Math.random()
-        .toString(36)
-        .substr(2);
-
-export default {
-    props: {
-        /**
-         * @model
-         */
-        value: {
-            default: '',
-        },
-        /**
-         * Defines the size of the component
-         * @values '', small, large
-         */
-        size: {
-            type: String,
-            default: '',
-            validator: function(value) {
-                return ['', 'small', 'large'].indexOf(value) >= 0;
-            },
-        },
-        /**
-         * Placeholder
-         */
-        placeholder: {
-            type: String,
-            default: '',
-        },
-        /**
-         * Readonly
-         */
-        readonly: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Disabled
-         */
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            inputId: this.uid(),
-            cssClass: {},
-            rootHasFocus: false,
-        };
-    },
-    watch: {
-        size: {
-            handler(val, valOld) {
-                if (valOld) {
-                    this.$delete(this.cssClass, `form-elem-${valOld}`);
-                }
-                if (val) {
-                    this.$set(this.cssClass, `form-elem-${val}`, true);
-                }
-            },
-            immediate: true,
-        },
-        readonly: {
-            handler(val) {
-                this.$set(this.cssClass, 'events-none', val);
-            },
-            immediate: true,
-        },
-        disabled: {
-            handler(val) {
-                this.$set(this.cssClass, 'disabled', val);
-            },
-            immediate: true,
-        },
-        rootHasFocus(val) {
-            this.$set(this.cssClass, 'focus', val);
-        },
-    },
-    created() {
-        window.addEventListener('blur', this.onWinBlur);
-        document.addEventListener('mousedown', this.onDocMouseDown);
-    },
-    destroyed() {
-        window.removeEventListener('blur', this.onWinBlur);
-        document.removeEventListener('mousedown', this.onDocMouseDown);
-    },
-    methods: {
-        uid() {
-            return `${r()}-${r()}`;
-        },
-        getInputRef() {
-            return document ? document.getElementById(this.inputId) : null;
-        },
-        onWinBlur(e) {
-            this.rootHasFocus = false;
-        },
-        onDocMouseDown(e) {
-            if (this.$el.contains(e.target)) {
-                return;
-            }
-            this.rootHasFocus = false;
-        },
-    },
-};
+const r = () =>
+    Math.random()
+        .toString(36)
+        .substr(2);
+
+export default {
+    props: {
+        /**
+         * @model
+         */
+        value: {
+            default: '',
+        },
+        /**
+         * Defines the size of the component
+         * @values '', small, large
+         */
+        size: {
+            type: String,
+            default: '',
+            validator: function(value) {
+                return ['', 'small', 'large'].indexOf(value) >= 0;
+            },
+        },
+        /**
+         * Placeholder
+         */
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Readonly
+         */
+        readonly: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Disabled
+         */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            inputId: this.uid(),
+            cssClass: {},
+            rootHasFocus: false,
+        };
+    },
+    watch: {
+        size: {
+            handler(val, valOld) {
+                if (valOld) {
+                    this.$delete(this.cssClass, `form-elem-${valOld}`);
+                }
+                if (val) {
+                    this.$set(this.cssClass, `form-elem-${val}`, true);
+                }
+            },
+            immediate: true,
+        },
+        readonly: {
+            handler(val) {
+                this.$set(this.cssClass, 'events-none', val);
+            },
+            immediate: true,
+        },
+        disabled: {
+            handler(val) {
+                this.$set(this.cssClass, 'disabled', val);
+            },
+            immediate: true,
+        },
+        rootHasFocus(val) {
+            this.$set(this.cssClass, 'focus', val);
+        },
+    },
+    created() {
+        window.addEventListener('blur', this.onWinBlur);
+        document.addEventListener('mousedown', this.onDocMouseDown);
+    },
+    destroyed() {
+        window.removeEventListener('blur', this.onWinBlur);
+        document.removeEventListener('mousedown', this.onDocMouseDown);
+    },
+    methods: {
+        uid() {
+            return `${r()}-${r()}`;
+        },
+        getInputRef() {
+            return document ? document.getElementById(this.inputId) : null;
+        },
+        onWinBlur(e) {
+            this.rootHasFocus = false;
+        },
+        onDocMouseDown(e) {
+            if (this.$el.contains(e.target)) {
+                return;
+            }
+            this.rootHasFocus = false;
+        },
+    },
+};

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

@@ -1,84 +1,84 @@
-const scrollIntoView = c => {
-    if (!c || !c.parentNode) {
-        return;
-    }
-    let p = c.parentNode;
-    let ph = p.offsetHeight;
-    let py = p.scrollTop;
-    let ch = c.offsetHeight;
-    let cy = c.offsetTop;
-    if (cy < py) {
-        p.scrollTop = cy;
-    } else if (cy > py + ph - ch) {
-        p.scrollTop = cy - ph + ch;
-    }
-};
-
-let ID = 1;
-const nextId = prefix => `${prefix}-${ID++}`;
-const isDateValid = d => d instanceof Date && !isNaN(d.getTime());
-
-const Key = {
-    UP: 'ArrowUp',
-    DOWN: 'ArrowDown',
-    ENTER: 'Enter',
-    ESC: 'Escape',
-};
-
-const Position = {
-    LEFT: 'left',
-    RIGHT: 'right',
-    TOP: 'top',
-    BOTTOM: 'bottom',
-    START: 'start',
-    END: 'end',
-};
-
-const debounce = (func, delay) => {
-    let timeout;
-    return function executedFunction(...args) {
-        const later = () => {
-            clearTimeout(timeout);
-            func(...args);
-        };
-        clearTimeout(timeout);
-        timeout = setTimeout(later, delay);
-    };
-};
-
-/**
- * @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() };
-};
-
-/**
- * @param {number} x - x-axis coordinate
- * @param {number} y - y-axis coordinate
- * @return {function: DOMRect}
- */
-const generateGetBoundingClientRect = (x = 0, y = 0) => () => ({
-    width: 0,
-    height: 0,
-    top: y,
-    right: x,
-    bottom: y,
-    left: x,
-});
-
-export {
-    scrollIntoView,
-    isDateValid,
-    nextId,
-    Key,
-    Position,
-    debounce,
-    useIntersectionObserver,
-    generateGetBoundingClientRect,
-};
+const scrollIntoView = c => {
+    if (!c || !c.parentNode) {
+        return;
+    }
+    let p = c.parentNode;
+    let ph = p.offsetHeight;
+    let py = p.scrollTop;
+    let ch = c.offsetHeight;
+    let cy = c.offsetTop;
+    if (cy < py) {
+        p.scrollTop = cy;
+    } else if (cy > py + ph - ch) {
+        p.scrollTop = cy - ph + ch;
+    }
+};
+
+let ID = 1;
+const nextId = prefix => `${prefix}-${ID++}`;
+const isDateValid = d => d instanceof Date && !isNaN(d.getTime());
+
+const Key = {
+    UP: 'ArrowUp',
+    DOWN: 'ArrowDown',
+    ENTER: 'Enter',
+    ESC: 'Escape',
+};
+
+const Position = {
+    LEFT: 'left',
+    RIGHT: 'right',
+    TOP: 'top',
+    BOTTOM: 'bottom',
+    START: 'start',
+    END: 'end',
+};
+
+const debounce = (func, delay) => {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, delay);
+    };
+};
+
+/**
+ * @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() };
+};
+
+/**
+ * @param {number} x - x-axis coordinate
+ * @param {number} y - y-axis coordinate
+ * @return {function: DOMRect}
+ */
+const generateGetBoundingClientRect = (x = 0, y = 0) => () => ({
+    width: 0,
+    height: 0,
+    top: y,
+    right: x,
+    bottom: y,
+    left: x,
+});
+
+export {
+    scrollIntoView,
+    isDateValid,
+    nextId,
+    Key,
+    Position,
+    debounce,
+    useIntersectionObserver,
+    generateGetBoundingClientRect,
+};

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

@@ -1,99 +1,81 @@
-import { nextId, Position } from './Helpers';
-
-export default {
-    props: {
-        /**
-         * z-index
-         */
-        zIndex: {
-            type: Number,
-            default: 1010,
-        },
-        /**
-         * Dropdown append to body
-         */
-        appendToBody: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Position, values of the popover:
-         * bl, br, tl, tr - bottom-left, bottom-right, top-left, top-right
-         * @values bl, br, tl, tr, top, top-start, top-end, left, left-start, left-end, right, right-start, right-end, bottom, bottom-start, bottom-end
-         */
-        position: {
-            type: String,
-            default: `${Position.BOTTOM}-${Position.START}`,
-        },
-        /**
-         * Position offset [ x, y ] where:
-         * x - skidding (offset along target)
-         * y - distance (offset away from target)
-         */
-        positionOffset: {
-            type: Array,
-            default() {
-                return [1, 1];
-            },
-        },
-        /**
-         * Auto width
-         */
-        autoWidth: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Should follow the cursor
-         */
-        shouldFollowCursor: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Cursor coordinates [ x, y ]
-         */
-        cursorCoordinates: {
-            type: Array,
-            default: () => [0, 0]
-        }
-    },
-    data() {
-        return {
-            popoverShow: false,
-            popoverTargetId: nextId('popover-target'),
-        };
-    },
-    computed: {
-        popoverTarget() {
-            return `[data-popover=${this.popoverTargetId}]`;
-        },
-        popoverOptions() {
-            let {
-                zIndex,
-                appendToBody,
-                position,
-                positionOffset,
-                autoWidth,
-                popoverTarget: target,
-                shouldFollowCursor,
-                cursorCoordinates
-            } = this;
-            return {
-                zIndex,
-                appendToBody,
-                position,
-                positionOffset,
-                autoWidth,
-                target,
-                shouldFollowCursor,
-                cursorCoordinates
-            };
-        },
-    },
-    methods: {
-        togglePopover() {
-            this.popoverShow = !this.popoverShow;
-        },
-    },
-};
+import { nextId, Position } from './Helpers';
+
+export default {
+    props: {
+        /**
+         * z-index
+         */
+        zIndex: {
+            type: Number,
+            default: 1010,
+        },
+        /**
+         * Dropdown append to body
+         */
+        appendToBody: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Position, values of the popover:
+         * bl, br, tl, tr - bottom-left, bottom-right, top-left, top-right
+         * @values bl, br, tl, tr, top, top-start, top-end, left, left-start, left-end, right, right-start, right-end, bottom, bottom-start, bottom-end
+         */
+        position: {
+            type: String,
+            default: `${Position.BOTTOM}-${Position.START}`,
+        },
+        /**
+         * Position offset [ x, y ] where:
+         * x - skidding (offset along target)
+         * y - distance (offset away from target)
+         */
+        positionOffset: {
+            type: Array,
+            default() {
+                return [1, 1];
+            },
+        },
+        /**
+         * Auto width
+         */
+        autoWidth: {
+            type: Boolean,
+            default: false,
+        }
+    },
+    data() {
+        return {
+            popoverShow: false,
+            popoverTargetId: nextId('popover-target'),
+        };
+    },
+    computed: {
+        popoverTarget() {
+            return `[data-popover=${this.popoverTargetId}]`;
+        },
+        popoverOptions() {
+            let {
+                zIndex,
+                appendToBody,
+                position,
+                positionOffset,
+                autoWidth,
+                popoverTarget: target
+            } = this;
+            return {
+                zIndex,
+                appendToBody,
+                position,
+                positionOffset,
+                autoWidth,
+                target
+            };
+        },
+    },
+    methods: {
+        togglePopover() {
+            this.popoverShow = !this.popoverShow;
+        },
+    },
+};

package/src/main.js

@@ -1,8 +1,8 @@
-import Vue from 'vue';
-import App from './App.vue';
-
-Vue.config.productionTip = false;
-
-new Vue({
-    render: h => h(App)
-}).$mount('#app');
+import Vue from 'vue';
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+    render: h => h(App)
+}).$mount('#app');

package/styleguide.config.js

@@ -1,37 +1,37 @@
-const path = require('path');
-const { version } = require('./package.json');
-
-module.exports = {
-    components: 'src/components/ui/[A-Z]*.vue',
-    require: ['goodt-framework-css'],
-    title: 'UI',
-    version,
-    styleguideDir: 'docs',
-    getComponentPathLine(componentPath) {
-        const name = path.basename(componentPath, '.vue');
-        return `import { ${name} } from 'goodteditor-ui';`;
-    },
-    template: {
-        head: {
-            links: [
-                {
-                    rel: 'stylesheet',
-                    href:
-                        'https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css',
-                    crossorigin: 'anonymous',
-                },
-                {
-                    rel: 'stylesheet',
-                    href:
-                        'https://materialdesignicons.com/cdn/light/0.2.63/css/materialdesignicons-light.min.css',
-                    crossorigin: 'anonymous',
-                },
-            ],
-        },
-        body: {
-            raw: `<script src="https://unpkg.com/dayjs@1.9.6/dayjs.min.js"></script>
-<script src="https://unpkg.com/dayjs@1.9.6/locale/ru.js"></script>
-<script src="https://unpkg.com/dayjs@1.9.6/plugin/customParseFormat.js"></script>`,
-        },
-    },
-};
+const path = require('path');
+const { version } = require('./package.json');
+
+module.exports = {
+    components: 'src/components/ui/[A-Z]*.vue',
+    require: ['goodt-framework-css'],
+    title: 'UI',
+    version,
+    styleguideDir: 'docs',
+    getComponentPathLine(componentPath) {
+        const name = path.basename(componentPath, '.vue');
+        return `import { ${name} } from 'goodteditor-ui';`;
+    },
+    template: {
+        head: {
+            links: [
+                {
+                    rel: 'stylesheet',
+                    href:
+                        'https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css',
+                    crossorigin: 'anonymous',
+                },
+                {
+                    rel: 'stylesheet',
+                    href:
+                        'https://materialdesignicons.com/cdn/light/0.2.63/css/materialdesignicons-light.min.css',
+                    crossorigin: 'anonymous',
+                },
+            ],
+        },
+        body: {
+            raw: `<script src="https://unpkg.com/dayjs@1.9.6/dayjs.min.js"></script>
+<script src="https://unpkg.com/dayjs@1.9.6/locale/ru.js"></script>
+<script src="https://unpkg.com/dayjs@1.9.6/plugin/customParseFormat.js"></script>`,
+        },
+    },
+};

package/vue.config.js

@@ -1,8 +1,8 @@
-/* eslint-disable */
-module.exports = {
-    devServer: {
-        port: 3000
-    },
-    filenameHashing: true,
-    lintOnSave: true
-};
+/* eslint-disable */
+module.exports = {
+    devServer: {
+        port: 3000
+    },
+    filenameHashing: true,
+    lintOnSave: true
+};