goodteditor-ui 1.0.21 → 1.0.23

package/src/components/ui/Tooltip.md

@@ -1,114 +1,54 @@
-Simple example
-
-```vue
-<template>
-    <div class="pos-rel pad-l5">
-        <ui-select
-            class="pos-abs pos-top-left"
-            v-model="position"
-            v-bind="{ options, size: 'small' }"
-        ></ui-select>
-        <ui-tooltip :position="position">
-            <template #target="{ events, binds }">
-                <div
-                    class="pad-l2 bg-green color-white radius text-center"
-                    v-on="events"
-                    v-bind="binds"
-                >
-                    hover me
-                </div>
-            </template>
-            <div>Title</div>
-            <div>
-                I'm on the <code>{{ position }}</code> side
-            </div>
-        </ui-tooltip>
-    </div>
-</template>
-<script>
-import UiSelect from './Select.vue';
-import UiTooltip from './Tooltip.vue';
-export default {
-    components: { UiSelect, UiTooltip },
-    data() {
-        return {
-            position: 'top',
-            options: [
-                'left',
-                'left-start',
-                'left-end',
-                'top',
-                'top-start',
-                'top-end',
-                'bottom',
-                'bottom-start',
-                'bottom-end',
-                'right',
-                'right-start',
-                'right-end',
-            ],
-        };
-    },
-};
-</script>
-```
-
-Advanced example. Using cursor tracking
-
-```vue
-<template>
-    <div class="pos-rel pad-l5">
-        <ui-tooltip v-bind="options">
-            <template #target="{ binds }">
-                <div
-                    ref="target"
-                    class="pad-l2 bg-green color-white radius text-center"
-                    v-bind="binds"
-                >
-                    hover me
-                </div>
-            </template>
-            <div>
-                I follow the cursor everywhere
-            </div>
-        </ui-tooltip>
-    </div>
-</template>
-<script>
-import UiTooltip from './Tooltip.vue';
-export default {
-    components: { UiTooltip },
-    data() {
-        return {
-            options: {
-                show: false,
-                shouldFollowCursor: true,
-                cursorCoordinates: [0, 0]
-            }
-        };
-    },
-    mounted() {
-        this.$refs.target.addEventListener('mouseover', this.showTooltip);
-        this.$refs.target.addEventListener('mousemove', this.changeTooltipCoords);
-        this.$refs.target.addEventListener('mouseleave', this.hideTooltip);
-    },
-    beforeDestroy() {
-        this.$refs.target.removeEventListener('mouseover', this.showTooltip);
-        this.$refs.target.removeEventListener('mousemove', this.changeTooltipCoords);
-        this.$refs.target.removeEventListener('mouseleave', this.hideTooltip);
-
-    },
-    methods: {
-        showTooltip() {
-            this.options.show = true;
-        },
-        hideTooltip() {
-            this.options.show = false;
-        },
-        changeTooltipCoords({ clientX: x, clientY: y }) {
-            this.options.cursorCoordinates = [x, y];
-        }
-    }
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div class="pos-rel pad-l5">
+        <ui-select
+            class="pos-abs pos-top-left"
+            v-model="position"
+            v-bind="{ options, size: 'small' }"
+        ></ui-select>
+        <ui-tooltip :position="position">
+            <template #target="{ events, binds }">
+                <div
+                    class="pad-l2 bg-green color-white radius text-center"
+                    v-on="events"
+                    v-bind="binds"
+                >
+                    hover me
+                </div>
+            </template>
+            <div>Title</div>
+            <div>
+                I'm on the <code>{{ position }}</code> side
+            </div>
+        </ui-tooltip>
+    </div>
+</template>
+<script>
+import UiSelect from './Select.vue';
+import UiTooltip from './Tooltip.vue';
+export default {
+    components: { UiSelect, UiTooltip },
+    data() {
+        return {
+            position: 'top',
+            options: [
+                'left',
+                'left-start',
+                'left-end',
+                'top',
+                'top-start',
+                'top-end',
+                'bottom',
+                'bottom-start',
+                'bottom-end',
+                'right',
+                'right-start',
+                'right-end',
+            ],
+        };
+    },
+};
+</script>
+```

package/src/components/ui/Tooltip.vue

@@ -1,113 +1,113 @@
-<template>
-    <div class="ui-tooltip">
-        <slot name="target" v-bind="{ events: targetEvents, binds: targetBinds }"></slot>
-        <ui-popover
-            v-bind="popoverOptions"
-            :show.sync="popoverShow"
-            @mouseenter.native="onPopoverMouseEnter"
-            @mouseleave.native="onPopoverMouseLeave"
-        >
-            <!-- 
-            @slot Tooltip slot
-            -->
-            <slot name="tooltip">
-                <div class="tooltip">
-                    <!-- 
-                    @slot Tooltip content slot
-                    -->
-                    <slot></slot>
-                </div>
-            </slot>
-        </ui-popover>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-tooltip {
-    display: contents;
-}
-</style>
-<script>
-import UiPopover from './Popover.vue';
-import { Position } from './utils/Helpers';
-import WithPopover from './utils/WithPopover';
-
-export default {
-    components: { UiPopover },
-    mixins: [WithPopover],
-    props: {
-        /**
-         * Whether to show the tooltip
-         */
-        show: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Hide delay in ms
-         */
-        hideDelay: {
-            type: Number,
-            default: 150,
-        },
-        position: {
-            type: String,
-            default: Position.TOP,
-        },
-        positionOffset: {
-            type: Array,
-            default() {
-                return [0, 5];
-            },
-        },
-    },
-    data() {
-        return {
-            targetEvents: {
-                mouseenter: this.onTargetMouseEnter,
-                mouseleave: this.onTargetMouseLeave,
-            },
-            timeout: null,
-        };
-    },
-    computed: {
-        targetBinds() {
-            return {
-                'data-popover': this.popoverTargetId,
-            };
-        },
-    },
-    watch: {
-        show: {
-            handler(v) {
-                this.setShow(v);
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        setShow(val) {
-            const { timeout, hideDelay } = this;
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-            if (val) {
-                this.popoverShow = true;
-            } else {
-                this.timeout = setTimeout(() => (this.popoverShow = false), hideDelay);
-            }
-        },
-        onTargetMouseEnter(e) {
-            this.setShow(true);
-        },
-        onTargetMouseLeave(e) {
-            this.setShow(false);
-        },
-        onPopoverMouseEnter(e) {
-            this.setShow(true);
-        },
-        onPopoverMouseLeave(e) {
-            this.setShow(false);
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-tooltip">
+        <slot name="target" v-bind="{ events: targetEvents, binds: targetBinds }"></slot>
+        <ui-popover
+            v-bind="popoverOptions"
+            :show.sync="popoverShow"
+            @mouseenter.native="onPopoverMouseEnter"
+            @mouseleave.native="onPopoverMouseLeave"
+        >
+            <!-- 
+            @slot Tooltip slot
+            -->
+            <slot name="tooltip">
+                <div class="tooltip">
+                    <!-- 
+                    @slot Tooltip content slot
+                    -->
+                    <slot></slot>
+                </div>
+            </slot>
+        </ui-popover>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-tooltip {
+    display: contents;
+}
+</style>
+<script>
+import UiPopover from './Popover.vue';
+import { Position } from './utils/Helpers';
+import WithPopover from './utils/WithPopover';
+
+export default {
+    components: { UiPopover },
+    mixins: [WithPopover],
+    props: {
+        /**
+         * Whether to show the tooltip
+         */
+        show: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Hide delay in ms
+         */
+        hideDelay: {
+            type: Number,
+            default: 150,
+        },
+        position: {
+            type: String,
+            default: Position.TOP,
+        },
+        positionOffset: {
+            type: Array,
+            default() {
+                return [0, 5];
+            },
+        },
+    },
+    data() {
+        return {
+            targetEvents: {
+                mouseenter: this.onTargetMouseEnter,
+                mouseleave: this.onTargetMouseLeave,
+            },
+            timeout: null,
+        };
+    },
+    computed: {
+        targetBinds() {
+            return {
+                'data-popover': this.popoverTargetId,
+            };
+        },
+    },
+    watch: {
+        show: {
+            handler(v) {
+                this.setShow(v);
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        setShow(val) {
+            const { timeout, hideDelay } = this;
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+            if (val) {
+                this.popoverShow = true;
+            } else {
+                this.timeout = setTimeout(() => (this.popoverShow = false), hideDelay);
+            }
+        },
+        onTargetMouseEnter(e) {
+            this.setShow(true);
+        },
+        onTargetMouseLeave(e) {
+            this.setShow(false);
+        },
+        onPopoverMouseEnter(e) {
+            this.setShow(true);
+        },
+        onPopoverMouseLeave(e) {
+            this.setShow(false);
+        },
+    },
+};
+</script>

package/src/components/ui/WysiwygEditor/WysiwygEditor.d.ts

@@ -1,119 +1,119 @@
-import { Button, Select, InputUnits, ColorPicker, ToolbarPopover, InputAuto, InputBrowse, Link } from './renders';
-
-export type Render = Readonly<{
-    BUTTON: Button;
-    COLOR_PICKER: ColorPicker;
-    INPUT_UNITS: InputUnits;
-    SELECT: Select;
-    TOOLBAR_POPOVER: ToolbarPopover;
-    INPUT_AUTO: InputAuto;
-    INPUT_BROWSE: InputBrowse;
-    LINK: Link;
-}>;
-
-export type CommandDef = {
-    name: String;
-    title: String;
-    exec: () => void;
-    isActive: () => Boolean;
-    isEnabled: () => Boolean;
-};
-
-export type ToolDef = {
-    name: String;
-    render: Render;
-    title: String;
-    icon: String;
-    exec: (value?: String | Record<String, any>) => void;
-    isActive: () => Boolean;
-    isEnabled: () => Boolean;
-    getValue?: () => String | Record<String, any>;
-    options?: Array<String | ToolDef | CommandDef>;
-    units?: Array<String>
-};
-
-export type NodeType = Readonly<{
-    BLOCKQUOTE: 'blockquote',
-    BULLET_LIST: 'bulletList',
-    CODE_BLOCK: 'codeBlock',
-    DOCUMENT: 'document',
-    HARD_BREAK: 'hardBreak',
-    HEADING: 'heading',
-    HORIZONTAL_RULE: 'horizontalRule',
-    IMAGE: 'image',
-    LIST_ITEM: 'listItem',
-    ORDERED_LIST: 'orderedList',
-    PARAGRAPH: 'paragraph',
-    TABLE: 'table',
-    TABLE_ROW: 'tableRow',
-    TABLE_CELL: 'tableCell',
-    TEXT: 'text'
-}>;
-
-export type MarkType = Readonly<{
-    BOLD: 'bold',
-    CODE: 'code',
-    ITALIC: 'italic',
-    LINK: 'link',
-    STRIKE: 'strike',
-    UNDERLINE: 'underline',
-    TEXT_STYLE: 'textStyle'
-}>;
-
-export type CommandType = Readonly<{
-    PARAGRAPH: 'paragraph',
-    HEADING_1: 'heading1',
-    HEADING_2: 'heading2',
-    HEADING_3: 'heading3',
-    HEADING_4: 'heading4',
-    TEXT_SMALL: 'textSmall',
-    TEXT_XSMALL: 'textXsmall',
-    CODE_BLOCK: 'codeBlock',
-    SINK_LIST_ITEM: 'sinkListItem',
-    LIFT_LIST_ITEM: 'liftListItem'
-}>;
-
-export type ToolType = Readonly<{
-    PARAGRAPH_STYLE: 'paragraphStyle',
-    FONT_SIZE: 'fontSize',
-    FONT_FAMILY: 'fontFamily',
-    TEXT_COLOR: 'textColor',
-    BLOCKQUOTE: 'blockquote',
-    ORDERED_LIST: 'orderedList',
-    BULLET_LIST: 'bulletList',
-    TEXT_ALIGN_LEFT: 'textAlignLeft',
-    TEXT_ALIGN_RIGHT: 'textAlignRight',
-    TEXT_ALIGN_CENTER: 'textAlignCenter',
-    HORIZONTAL_RULE: 'horizontalRule',
-    LINK: 'link',
-    IMAGE: 'image',
-    TABLE: 'table',
-    BOLD: 'bold',
-    CODE: 'code',
-    ITALIC: 'italic',
-    STRIKE: 'strike',
-    UNDERLINE: 'underline',
-    UNDO: 'undo',
-    REDO: 'redo',
-    SAVE: 'save',
-    CLEAR_FORMATTING: 'clearFormatting',
-    HARD_BREAK: 'hardBreak',
-    INSERT_TABLE: 'insertTable',
-    DELETE_TABLE: 'deleteTable',
-    ADD_COLUMN_BEFORE: 'addColumnBefore',
-    ADD_COLUMN_AFTER: 'addColumnAfter',
-    DELETE_COLUMN: 'deleteColumn',
-    ADD_ROW_BEFORE: 'addRowBefore',
-    ADD_ROW_AFTER: 'addRowAfter',
-    DELETE_ROW: 'deleteRow',
-    MERGE_CELLS: 'mergeCells',
-    SPLIT_CELL: 'splitCell',
-    TOGGLE_HEADER_COLUMN: 'toggleHeaderColumn',
-    TOGGLE_HEADER_ROW: 'toggleHeaderRow',
-    ALIGN_V_TOP: 'alignVTop',
-    ALIGN_V_MID: 'alignVMid',
-    ALIGN_V_BOT: 'alignVBot',
-    TOGGLE_BORDERS: 'toggleBorders',
-    TOGGLE_ZEBRA: 'toggleZebra',
-    INSERT_IMAGE: 'insertImage'
-}>;
+import { Button, Select, InputUnits, ColorPicker, ToolbarPopover, InputAuto, InputBrowse, Link } from './renders';
+
+export type Render = Readonly<{
+    BUTTON: Button;
+    COLOR_PICKER: ColorPicker;
+    INPUT_UNITS: InputUnits;
+    SELECT: Select;
+    TOOLBAR_POPOVER: ToolbarPopover;
+    INPUT_AUTO: InputAuto;
+    INPUT_BROWSE: InputBrowse;
+    LINK: Link;
+}>;
+
+export type CommandDef = {
+    name: String;
+    title: String;
+    exec: () => void;
+    isActive: () => Boolean;
+    isEnabled: () => Boolean;
+};
+
+export type ToolDef = {
+    name: String;
+    render: Render;
+    title: String;
+    icon: String;
+    exec: (value?: String | Record<String, any>) => void;
+    isActive: () => Boolean;
+    isEnabled: () => Boolean;
+    getValue?: () => String | Record<String, any>;
+    options?: Array<String | ToolDef | CommandDef>;
+    units?: Array<String>
+};
+
+export type NodeType = Readonly<{
+    BLOCKQUOTE: 'blockquote',
+    BULLET_LIST: 'bulletList',
+    CODE_BLOCK: 'codeBlock',
+    DOCUMENT: 'document',
+    HARD_BREAK: 'hardBreak',
+    HEADING: 'heading',
+    HORIZONTAL_RULE: 'horizontalRule',
+    IMAGE: 'image',
+    LIST_ITEM: 'listItem',
+    ORDERED_LIST: 'orderedList',
+    PARAGRAPH: 'paragraph',
+    TABLE: 'table',
+    TABLE_ROW: 'tableRow',
+    TABLE_CELL: 'tableCell',
+    TEXT: 'text'
+}>;
+
+export type MarkType = Readonly<{
+    BOLD: 'bold',
+    CODE: 'code',
+    ITALIC: 'italic',
+    LINK: 'link',
+    STRIKE: 'strike',
+    UNDERLINE: 'underline',
+    TEXT_STYLE: 'textStyle'
+}>;
+
+export type CommandType = Readonly<{
+    PARAGRAPH: 'paragraph',
+    HEADING_1: 'heading1',
+    HEADING_2: 'heading2',
+    HEADING_3: 'heading3',
+    HEADING_4: 'heading4',
+    TEXT_SMALL: 'textSmall',
+    TEXT_XSMALL: 'textXsmall',
+    CODE_BLOCK: 'codeBlock',
+    SINK_LIST_ITEM: 'sinkListItem',
+    LIFT_LIST_ITEM: 'liftListItem'
+}>;
+
+export type ToolType = Readonly<{
+    PARAGRAPH_STYLE: 'paragraphStyle',
+    FONT_SIZE: 'fontSize',
+    FONT_FAMILY: 'fontFamily',
+    TEXT_COLOR: 'textColor',
+    BLOCKQUOTE: 'blockquote',
+    ORDERED_LIST: 'orderedList',
+    BULLET_LIST: 'bulletList',
+    TEXT_ALIGN_LEFT: 'textAlignLeft',
+    TEXT_ALIGN_RIGHT: 'textAlignRight',
+    TEXT_ALIGN_CENTER: 'textAlignCenter',
+    HORIZONTAL_RULE: 'horizontalRule',
+    LINK: 'link',
+    IMAGE: 'image',
+    TABLE: 'table',
+    BOLD: 'bold',
+    CODE: 'code',
+    ITALIC: 'italic',
+    STRIKE: 'strike',
+    UNDERLINE: 'underline',
+    UNDO: 'undo',
+    REDO: 'redo',
+    SAVE: 'save',
+    CLEAR_FORMATTING: 'clearFormatting',
+    HARD_BREAK: 'hardBreak',
+    INSERT_TABLE: 'insertTable',
+    DELETE_TABLE: 'deleteTable',
+    ADD_COLUMN_BEFORE: 'addColumnBefore',
+    ADD_COLUMN_AFTER: 'addColumnAfter',
+    DELETE_COLUMN: 'deleteColumn',
+    ADD_ROW_BEFORE: 'addRowBefore',
+    ADD_ROW_AFTER: 'addRowAfter',
+    DELETE_ROW: 'deleteRow',
+    MERGE_CELLS: 'mergeCells',
+    SPLIT_CELL: 'splitCell',
+    TOGGLE_HEADER_COLUMN: 'toggleHeaderColumn',
+    TOGGLE_HEADER_ROW: 'toggleHeaderRow',
+    ALIGN_V_TOP: 'alignVTop',
+    ALIGN_V_MID: 'alignVMid',
+    ALIGN_V_BOT: 'alignVBot',
+    TOGGLE_BORDERS: 'toggleBorders',
+    TOGGLE_ZEBRA: 'toggleZebra',
+    INSERT_IMAGE: 'insertImage'
+}>;