goodteditor-ui 1.0.25 → 1.0.27

package/src/components/ui/WysiwygEditor/renders/Link.vue

@@ -1,87 +1,82 @@
-<template>
-    <div :data-popover="popoverTargetId" :title="title">
-        <button class="btn btn-small btn-outline btn-icon" @click="togglePopover">
-            <div class="icon">
-                <i class="mdi" :class="icon"></i>
-            </div>
-        </button>
-        <popover :show="popoverShow" v-bind="popoverOptions">
-            <div class="dropdown pad-l1 pad-top-l2">
-                <div class="close pos-abs pos-top-right mar-2" @click="togglePopover">
-                    <i class="mdi mdi-close color-grey" />
-                </div>
-                <div class="row row-hgap-3 mar-bot-l1">
-                    <div class="col col-vmid text-truncate">
-                        <div class="form-label form-label-xsmall text-truncate">Url</div>
-                    </div>
-                    <div class="col col-vmid col-12-12">
-                        <input-autocomplete v-model="url" class="w-100" size="small" />
-                    </div>
-                </div>
-                <div class="row row-hgap-3 mar-bot-l1">
-                    <div class="col col-vmid text-truncate">
-                        <div class="form-label form-label-xsmall text-truncate">Target</div>
-                    </div>
-                    <div class="col col-vmid col-12-12">
-                        <ui-select
-                            v-model="target"
-                            :options="$options.static.TargetTypeOptions"
-                            class="w-100"
-                            size="small" />
-                    </div>
-                </div>
-                <button class="btn btn-outline btn-small w-100" @click="execute">Применить</button>
-            </div>
-        </popover>
-    </div>
-</template>
-
-<script>
-import Popover from '../../Popover.vue';
-import InputAutocomplete from '../../InputAutocomplete.vue';
-import UiSelect from '../../Select.vue';
-import WithPopover from '../../utils/WithPopover';
-import { useRender } from './mixins';
-
-const TargetType = {
-    BLANK: '_blank',
-    SELF: '_self'
-}
-
-export default {
-    components: {
-        Popover,
-        InputAutocomplete,
-        UiSelect
-    },
-    mixins: [useRender(), WithPopover],
-    data: () => ({
-        url: '',
-        target: null
-    }),
-    static: {
-        TargetTypeOptions: [
-            { label: 'blank', value: TargetType.BLANK },
-            { label: 'self', value: TargetType.SELF }
-        ]
-    },
-    watch: {
-        popoverShow(isShown) {
-            if (isShown) {
-                const { url = '', target = TargetType.BLANK } = this.tool.getValue();
-                this.url = url;
-                this.target = target;
-            }
-        }
-    },
-    methods: {
-        execute() {
-            const { tool, url, target } = this;
-            tool.exec({ url, target });
-
-            this.popoverShow = false;
-            this.emitExecuted();
-        }
-    }
-};
-</script>
+<template>
+    <with-popover :show.sync="isPopoverShown">
+        <template #button="{ togglePopover }">
+            <button :title="title" class="btn btn-small btn-outline btn-icon" @click="togglePopover">
+                <div class="icon">
+                    <i class="mdi" :class="icon"></i>
+                </div>
+            </button>
+        </template>
+        <div class="row row-hgap-3 mar-bot-l1">
+            <div class="col col-vmid text-truncate">
+                <div class="form-label form-label-xsmall text-truncate">Url</div>
+            </div>
+            <div class="col col-vmid col-12-12">
+                <input-autocomplete v-model="url" class="w-100" size="small" />
+            </div>
+        </div>
+        <div class="row row-hgap-3 mar-bot-l1">
+            <div class="col col-vmid text-truncate">
+                <div class="form-label form-label-xsmall text-truncate">Target</div>
+            </div>
+            <div class="col col-vmid col-12-12">
+                <ui-select
+                    v-model="target"
+                    :options="$options.static.TargetTypeOptions"
+                    class="w-100"
+                    size="small" />
+            </div>
+        </div>
+        <button class="btn btn-outline btn-small w-100" @click="execute">Применить</button>
+    </with-popover>
+</template>
+
+<script>
+import InputAutocomplete from '../../InputAutocomplete.vue';
+import UiSelect from '../../Select.vue';
+import WithPopover from './components/WithPopover.vue';
+import { useRender } from './mixins';
+
+const TargetType = {
+    BLANK: '_blank',
+    SELF: '_self'
+};
+
+export default {
+    components: {
+        WithPopover,
+        InputAutocomplete,
+        UiSelect
+    },
+    mixins: [useRender()],
+    data: () => ({
+        url: '',
+        target: null,
+        isPopoverShown: false
+    }),
+    static: {
+        TargetTypeOptions: [
+            { label: 'blank', value: TargetType.BLANK },
+            { label: 'self', value: TargetType.SELF }
+        ]
+    },
+    watch: {
+        isPopoverShown(isShown) {
+            if (isShown) {
+                const { url = '', target = TargetType.BLANK } = this.tool.getValue();
+                this.url = url;
+                this.target = target;
+            }
+        }
+    },
+    methods: {
+        execute() {
+            const { tool, url, target } = this;
+            tool.exec({ url, target });
+
+            this.isPopoverShown = false;
+            this.emitExecuted();
+        }
+    }
+};
+</script>

package/src/components/ui/WysiwygEditor/renders/Select.vue

@@ -1,47 +1,47 @@
-<template>
-    <div :title="title" class="select-tool">
-        <ui-select
-            v-bind="{ value, options, valueObjects, disabled: !isEnabled, size: 'small' }"
-            class="w-100"
-            @change="onChange" />
-    </div>
-</template>
-
-<script>
-import UiSelect from '../../Select.vue';
-import { useRender } from './mixins';
-
-export default {
-    components: { UiSelect },
-    mixins: [useRender()],
-    computed: {
-        value() {
-            return this.tool.getValue(this.options);
-        },
-        options() {
-            const { options = [] } = this.tool;
-
-            return options.map((option) => typeof option === 'string'
-                ? { value: option, label: option }
-                : { value: option, label: option.title }
-            );
-        },
-        valueObjects() {
-            const [option] = this.options;
-            return typeof option.value === 'object';
-        }
-    },
-    methods: {
-        onChange(option) {
-            this.tool.exec(this.valueObjects ? option.value : option);
-            this.emitExecuted();
-        }
-    }
-};
-</script>
-
-<style scoped>
-.select-tool {
-    width: 7.5rem;
-}
-</style>
+<template>
+    <div :title="title" class="select-tool">
+        <ui-select
+            v-bind="{ value, options, valueObjects, disabled: !isEnabled, size: 'small' }"
+            class="w-100"
+            @change="onChange" />
+    </div>
+</template>
+
+<script>
+import UiSelect from '../../Select.vue';
+import { useRender } from './mixins';
+
+export default {
+    components: { UiSelect },
+    mixins: [useRender()],
+    computed: {
+        value() {
+            return this.tool.getValue(this.options);
+        },
+        options() {
+            const { options = [] } = this.tool;
+
+            return options.map((option) => typeof option === 'string'
+                ? { value: option, label: option }
+                : { value: option, label: option.title }
+            );
+        },
+        valueObjects() {
+            const [option] = this.options;
+            return typeof option.value === 'object';
+        }
+    },
+    methods: {
+        onChange(option) {
+            this.tool.exec(this.valueObjects ? option.value : option);
+            this.emitExecuted();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.select-tool {
+    width: 7.5rem;
+}
+</style>

package/src/components/ui/WysiwygEditor/renders/ToolbarPopover.vue

@@ -1,49 +1,49 @@
-<template>
-    <div :data-popover="popoverTargetId" :title="title">
-        <button
-            class="btn btn-small btn-outline btn-icon"
-            @click="togglePopover">
-            <div class="icon">
-                <i class="mdi" :class="icon"></i>
-            </div>
-        </button>
-        <popover :show.sync="popoverShow" v-bind="popoverOptions">
-            <ui-datalist
-                class="w-100 pull-left"
-                v-bind="{ size: 'small', options: tool.options }"
-                @click.native.stop>
-                <template #option="{ option, index }">
-                    <li :key="index" class="list-item" >
-                        <component :is="option.render" :tool="option" @command-executed="onCommandExecuted" />
-                    </li>
-                </template>
-            </ui-datalist>
-        </popover>
-    </div>
-</template>
-
-<script>
-import Popover from '../../Popover.vue';
-import UiDatalist from '../../Datalist.vue';
-import WithPopover from '../../utils/WithPopover';
-import { useRender } from './mixins';
-
-export default {
-    components: { Popover, UiDatalist },
-    mixins: [useRender(), WithPopover],
-    methods: {
-        onCommandExecuted() {
-            this.popoverShow = false;
-            this.emitExecuted();
-        }
-    }
-};
-</script>
-
-<style>
-.list-item {
-    display: inline-block !important;
-    padding: 0.25rem !important;
-    min-height: calc(var(--line-height)*1rem);
-}
-</style>
+<template>
+    <div :data-popover="popoverTargetId" :title="title">
+        <button
+            class="btn btn-small btn-outline btn-icon"
+            @click="togglePopover">
+            <div class="icon">
+                <i class="mdi" :class="icon"></i>
+            </div>
+        </button>
+        <popover :show.sync="popoverShow" v-bind="popoverOptions">
+            <ui-datalist
+                class="w-100 pull-left"
+                v-bind="{ size: 'small', options: tool.options }"
+                @click.native.stop>
+                <template #option="{ option, index }">
+                    <li :key="index" class="list-item" >
+                        <component :is="option.render" :tool="option" @command-executed="onCommandExecuted" />
+                    </li>
+                </template>
+            </ui-datalist>
+        </popover>
+    </div>
+</template>
+
+<script>
+import Popover from '../../Popover.vue';
+import UiDatalist from '../../Datalist.vue';
+import WithPopover from '../../utils/WithPopover';
+import { useRender } from './mixins';
+
+export default {
+    components: { Popover, UiDatalist },
+    mixins: [useRender(), WithPopover],
+    methods: {
+        onCommandExecuted() {
+            this.popoverShow = false;
+            this.emitExecuted();
+        }
+    }
+};
+</script>
+
+<style>
+.list-item {
+    display: inline-block !important;
+    padding: 0.25rem !important;
+    min-height: calc(var(--line-height)*1rem);
+}
+</style>

package/src/components/ui/WysiwygEditor/renders/components/Popover.vue

@@ -0,0 +1,15 @@
+<script>
+import Popover from '../../../Popover.vue';
+
+export default {
+    extends: Popover,
+    methods: {
+        addEventListeners() {
+            window.addEventListener('blur', this.onWinBlur);
+        },
+        removeEventListeners() {
+            window.removeEventListener('blur', this.onWinBlur);
+        }
+    }
+};
+</script>

package/src/components/ui/WysiwygEditor/renders/components/WithPopover.vue

@@ -0,0 +1,35 @@
+<template>
+    <div :data-popover="popoverTargetId">
+        <slot name="button" v-bind="{ togglePopover }"></slot>
+
+        <popover :show.sync="popoverShow" v-bind="popoverOptions">
+            <div class="dropdown pad-l1 pad-top-l2">
+                <div class="close pos-abs pos-top-right mar-2" @click="togglePopover">
+                    <i class="mdi mdi-close color-grey" />
+                </div>
+                <slot v-bind="{ togglePopover }"></slot>
+            </div>
+        </popover>
+    </div>
+</template>
+
+<script>
+import WithPopover from '../../../utils/WithPopover';
+import Popover from './Popover.vue';
+
+export default {
+    components: { Popover },
+    mixins: [WithPopover],
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        }
+    },
+    watch: {
+        popoverShow(val) {
+            this.$nextTick(() => this.$emit('update:show', val));
+        }
+    }
+};
+</script>

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

@@ -1,8 +1,8 @@
-export { default as Button } from './Button.vue';
-export { default as Select } from './Select.vue';
-export { default as InputUnits } from './InputUnits.vue';
-export { default as ColorPicker } from './ColorPicker.vue';
-export { default as ToolbarPopover } from './ToolbarPopover.vue';
-export { default as InputAuto } from './InputAuto.vue';
-export { default as InputBrowse } from './InputBrowse.vue';
-export { default as Link } from './Link.vue';
+export { default as Button } from './Button.vue';
+export { default as Select } from './Select.vue';
+export { default as InputUnits } from './InputUnits.vue';
+export { default as ColorPicker } from './ColorPicker.vue';
+export { default as ToolbarPopover } from './ToolbarPopover.vue';
+export { default as InputAuto } from './InputAuto.vue';
+export { default as Link } from './Link.vue';
+export { default as Image } from './Image.vue';

package/src/components/ui/WysiwygEditor/renders/index.js

@@ -1,8 +1,8 @@
-export { default as Button } from './Button.vue';
-export { default as Select } from './Select.vue';
-export { default as InputUnits } from './InputUnits.vue';
-export { default as ColorPicker } from './ColorPicker.vue';
-export { default as ToolbarPopover } from './ToolbarPopover.vue';
-export { default as InputAuto } from './InputAuto.vue';
-export { default as InputBrowse } from './InputBrowse.vue';
-export { default as Link } from './Link.vue';
+export { default as Button } from './Button.vue';
+export { default as Select } from './Select.vue';
+export { default as InputUnits } from './InputUnits.vue';
+export { default as ColorPicker } from './ColorPicker.vue';
+export { default as ToolbarPopover } from './ToolbarPopover.vue';
+export { default as InputAuto } from './InputAuto.vue';
+export { default as Link } from './Link.vue';
+export { default as Image } from './Image.vue';

package/src/components/ui/WysiwygEditor/renders/mixins/RenderMixin.js

@@ -1,39 +1,39 @@
-export const useRender = () => ({
-    props: {
-        tool: {
-            type: Object,
-            default: null
-        }
-    },
-    computed: {
-        icon() {
-            const { tool } = this;
-            
-            if (tool == null) {
-                return 'mdi-help-box';
-            }
-    
-            return [null, undefined, ''].includes(tool.icon) ? 'mdi-help-box' : `mdi-${tool.icon}`;
-        },
-        title() {
-            const { tool } = this;
-    
-            if (tool == null) {
-                return 'Unknown tool';
-            }
-            
-            return tool.title ?? tool.name ?? 'Unknown tool';
-        },
-        isActive() {
-            return this.tool.isActive();
-        },
-        isEnabled() {
-            return this.tool.isEnabled();
-        }
-    },
-    methods: {
-        emitExecuted() {
-            this.$emit('command-executed');
-        }
-    }
-})
+export const useRender = () => ({
+    props: {
+        tool: {
+            type: Object,
+            default: null
+        }
+    },
+    computed: {
+        icon() {
+            const { tool } = this;
+            
+            if (tool == null) {
+                return 'mdi-help-box';
+            }
+    
+            return [null, undefined, ''].includes(tool.icon) ? 'mdi-help-box' : `mdi-${tool.icon}`;
+        },
+        title() {
+            const { tool } = this;
+    
+            if (tool == null) {
+                return 'Unknown tool';
+            }
+            
+            return tool.title ?? tool.name ?? 'Unknown tool';
+        },
+        isActive() {
+            return this.tool.isActive();
+        },
+        isEnabled() {
+            return this.tool.isEnabled();
+        }
+    },
+    methods: {
+        emitExecuted() {
+            this.$emit('command-executed');
+        }
+    }
+})

package/src/components/ui/WysiwygEditor/renders/mixins/index.js

@@ -1 +1 @@
-export { useRender } from './RenderMixin';
+export { useRender } from './RenderMixin';