goodteditor-ui 1.0.12 → 1.0.13

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

@@ -1,61 +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() };
-};
-
-export { scrollIntoView, isDateValid, nextId, Key, Position, debounce, useIntersectionObserver };
+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,81 +1,99 @@
-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;
-        },
-    },
-};
+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;
+        },
+    },
+};

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

package/.idea/codeStyles/Project.xml

@@ -1,51 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <HTMLCodeStyleSettings>
-      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-      <option name="HTML_QUOTE_STYLE" value="Single" />
-      <option name="HTML_ENFORCE_QUOTES" value="true" />
-    </HTMLCodeStyleSettings>
-    <JSCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_WITHIN_ARRAY_INITIALIZER_BRACKETS" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </TypeScriptCodeStyleSettings>
-    <VueCodeStyleSettings>
-      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
-      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
-    </VueCodeStyleSettings>
-    <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="4" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="100" />
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="100" />
-    </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="4" />
-        <option name="TAB_SIZE" value="4" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

package/.idea/goodt-ui.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/goodt-ui.iml" filepath="$PROJECT_DIR$/.idea/goodt-ui.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>