goodteditor-ui 1.0.26 → 1.0.27

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

@@ -1,162 +1,200 @@
-<template>
-    <with-popover :show.sync="isPopoverShown" auto-width>
-        <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="w-f2">
-            <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">
-                    <div class="form-control form-control-icon-right w-12-12">
-                        <input-autocomplete v-model.trim.lazy="image.url" size="small" @change="onChange" />
-                        <div class="icon">
-                            <i class="mdi mdi-folder cursor-pointer color-grey" @click="browse" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="row row-hgap-3 mar-bot-l1">
-                <div class="col col-vmid text-truncate">
-                    <label for="resp" class="form-label form-label-small text-truncate">
-                        Отзывчивое изображение
-                    </label>
-                </div>
-                <div class="col col-vmid col-auto">
-                    <input
-                        id="resp"
-                        v-model="image.isResponsive"
-                        type="checkbox"
-                        class="switch switch-small pull-right">
-                </div>
-            </div>
-
-            <div class="row row-hgap-l1 mar-bot-l1">
-                <div class="col">
-                    <div class="row row-hgap-3">
-                        <div class="col col-vmid text-truncate">
-                            <div class="form-label form-label-xsmall text-truncate">Ширина</div>
-                        </div>
-                        <div class="col col-vmid col-12-12">
-                            <input-units
-                                v-model="image.width"
-                                :units="$options.static.SizeUnits"
-                                :disabled="image.isResponsive"
-                                size="small"
-                                @change="onChange">
-                            </input-units>
-                        </div>
-                    </div>
-                </div>
-                <div class="col">
-                    <div class="row row-hgap-3">
-                        <div class="col col-vmid text-truncate">
-                            <div class="form-label form-label-xsmall text-truncate">Высота</div>
-                        </div>
-                        <div class="col col-vmid col-12-12">
-                            <input-units
-                                v-model="image.height"
-                                :units="$options.static.SizeUnits"
-                                :disabled="image.isResponsive"
-                                size="small"
-                                @change="onChange">
-                            </input-units>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </with-popover>
-</template>
-
-<script>
-import InputAutocomplete from '../../InputAutocomplete.vue';
-import InputUnits from '../../InputUnits.vue';
-import WithPopover from './components/WithPopover.vue';
-import { useRender } from './mixins';
-
-const SizeUnits = ["rem", "em", "%", "px", "vh", "vw"];
-
-const defaultImgSettings = {
-    url: '',
-    isResponsive: true,
-    height: '100%',
-    width: '100%'
-};
-
-const cssStrToObj = (str) => {
-    if (str == null) {
-        return {};
-    }
-    return str.split(';').reduce((obj, style) => {
-        const [name, val] = style.split(':').map((el) => el.trim());
-        if (name != null && val != null) {
-            obj[name] = val;
-        }
-        return obj;
-    }, {});
-}
-
-export default {
-    components: {
-        InputAutocomplete,
-        InputUnits,
-        WithPopover
-    },
-    mixins: [useRender()],
-    data: () => ({
-        isPopoverShown: false,
-        image: { ...defaultImgSettings }
-    }),
-    watch: {
-        isPopoverShown(isShown) {
-            if (isShown === false) {
-                this.image = { ...defaultImgSettings };
-                return;
-            }
-
-            this.setImageSettings();
-        }
-    },
-    static: {
-      SizeUnits
-    },
-    methods: {
-        setImageSettings() {
-            const attrs = this.tool.getValue();
-
-            if (JSON.stringify(attrs) === '{}') {
-                return;
-            }
-
-            const { src: url, class: className, style } = attrs;
-            const { width, height } = cssStrToObj(style);
-
-            this.image = {
-                ...defaultImgSettings,
-                url,
-                isResponsive: className?.includes?.('responsive') ?? false,
-                ...(width && { width }),
-                ...(height && { height })
-            };
-        },
-        async browse() {
-            await this.tool.exec(this.image);
-            const { src: url } = this.tool.getValue();
-
-            this.image = { ...this.image, url };
-            this.emitExecuted();
-        },
-        onChange() {
-            this.tool.exec(this.image);
-            this.emitExecuted();
-        }
-    }
-};
-</script>
+<template>
+    <with-popover :show.sync="isPopoverShown" auto-width>
+        <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>
+        <template #default="{ togglePopover }">
+            <div class="w-f2">
+                <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">
+                        <div class="form-control form-control-icon-right w-12-12">
+                            <input-autocomplete
+                                v-model.trim.lazy="image.url"
+                                size="small"
+                                @change="onChange" />
+                            <div class="icon" @click="($event) => browse(togglePopover)">
+                                <i class="mdi mdi-folder cursor-pointer color-grey" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="row row-hgap-3 mar-bot-l1">
+                    <div class="col col-vmid text-truncate">
+                        <label for="resp" class="form-label form-label-small text-truncate">
+                            Отзывчивое изображение
+                        </label>
+                    </div>
+                    <div class="col col-vmid col-auto">
+                        <input
+                            id="resp"
+                            v-model="image.isResponsive"
+                            type="checkbox"
+                            class="switch switch-small pull-right"
+                            @change="onChange">
+                    </div>
+                </div>
+
+                <div class="row row-hgap-3 mar-bot-l1">
+                    <div class="col col-vmid text-truncate">
+                        <label class="form-label form-label-xsmall text-truncate">
+                            Выровнять изображение
+                        </label>
+                    </div>
+                    <div class="col col-vmid col-12-12">
+                        <ui-select
+                            v-model="image.align"
+                            :options="$options.static.AlignOptions"
+                            size="small"
+                            class="w-100"
+                            @change="onChange" />
+                    </div>
+                </div>
+
+                <div class="row row-hgap-l1 mar-bot-l1">
+                    <div class="col">
+                        <div class="row row-hgap-3">
+                            <div class="col col-vmid text-truncate">
+                                <div class="form-label form-label-xsmall text-truncate">Ширина</div>
+                            </div>
+                            <div class="col col-vmid col-12-12">
+                                <input-units
+                                    v-model="image.width"
+                                    :units="$options.static.SizeUnits"
+                                    :disabled="image.isResponsive"
+                                    size="small"
+                                    @change="onChange">
+                                </input-units>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="row row-hgap-3">
+                            <div class="col col-vmid text-truncate">
+                                <div class="form-label form-label-xsmall text-truncate">Высота</div>
+                            </div>
+                            <div class="col col-vmid col-12-12">
+                                <input-units
+                                    v-model="image.height"
+                                    :units="$options.static.SizeUnits"
+                                    :disabled="image.isResponsive"
+                                    size="small"
+                                    @change="onChange">
+                                </input-units>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </with-popover>
+</template>
+
+<script>
+import InputAutocomplete from '../../InputAutocomplete.vue';
+import InputUnits from '../../InputUnits.vue';
+import UiSelect from '../../Select.vue';
+import WithPopover from './components/WithPopover.vue';
+import { useRender } from './mixins';
+
+const SizeUnits = ["rem", "em", "%", "px", "vh", "vw"];
+const AlignOptions = [
+    { value: null, label: 'По левому краю' },
+    { value: 'mar-h-auto', label: 'По центру' },
+    { value: 'mar-left-auto', label: 'По правому краю' }
+];
+
+const defaultImgSettings = {
+    url: '',
+    isResponsive: true,
+    align: null,
+    height: '100%',
+    width: '100%',
+};
+
+const cssStrToObj = (str) => {
+    if (str == null) {
+        return {};
+    }
+    return str.split(';').reduce((obj, style) => {
+        const [name, val] = style.split(':').map((el) => el.trim());
+        if (name != null && val != null) {
+            obj[name] = val;
+        }
+        return obj;
+    }, {});
+}
+
+export default {
+    components: {
+        InputAutocomplete,
+        InputUnits,
+        UiSelect,
+        WithPopover
+    },
+    mixins: [useRender()],
+    data: () => ({
+        isPopoverShown: false,
+        image: { ...defaultImgSettings }
+    }),
+    watch: {
+        isPopoverShown(isShown) {
+            if (isShown === false) {
+                this.image = { ...defaultImgSettings };
+                return;
+            }
+
+            this.setImageSettings();
+        }
+    },
+    static: {
+        SizeUnits,
+        AlignOptions
+    },
+    methods: {
+        setImageSettings() {
+            const attrs = this.tool.getValue();
+
+            if (JSON.stringify(attrs) === '{}') {
+                return;
+            }
+
+            const { src: url, class: className, style } = attrs;
+            const { width, height } = cssStrToObj(style);
+            const align = className.match(/mar-\w+-\w+/);
+
+            this.image = {
+                ...defaultImgSettings,
+                url,
+                isResponsive: className?.includes('responsive') ?? false,
+                align: align?.[0] ?? null,
+                ...(width && { width }),
+                ...(height && { height })
+            };
+        },
+        async browse(togglePopover) {
+            /* to avoid overlap with FileManager's popup */
+            togglePopover();
+
+            await this.tool.exec(this.image);
+            const { src: url } = this.tool.getValue();
+
+            this.image = { ...this.image, url };
+            this.emitExecuted();
+
+            togglePopover();
+        },
+        onChange() {
+            this.tool.exec(this.image);
+            this.emitExecuted();
+        }
+    }
+};
+</script>

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

@@ -1,34 +1,34 @@
-<template>
-    <div :title="title" class="autocomplete-tool">
-        <input-autocomplete
-            v-bind="{ value, options: tool.options, disabled: !isEnabled, size: 'small' }"
-            @input="onInput" />
-    </div>
-</template>
-
-<script>
-import InputAutocomplete from '../../InputAutocomplete.vue';
-import { useRender } from './mixins';
-
-export default {
-    components: { InputAutocomplete },
-    mixins: [useRender()],
-    computed: {
-        value() {
-            return this.tool.getValue() ?? '';
-        }
-    },
-    methods: {
-        onInput(value) {
-            this.tool.exec(value);
-            this.emitExecuted();
-        }
-    }
-};
-</script>
-
-<style scoped>
-.autocomplete-tool {
-    width: 10rem;
-}
-</style>
+<template>
+    <div :title="title" class="autocomplete-tool">
+        <input-autocomplete
+            v-bind="{ value, options: tool.options, disabled: !isEnabled, size: 'small' }"
+            @input="onInput" />
+    </div>
+</template>
+
+<script>
+import InputAutocomplete from '../../InputAutocomplete.vue';
+import { useRender } from './mixins';
+
+export default {
+    components: { InputAutocomplete },
+    mixins: [useRender()],
+    computed: {
+        value() {
+            return this.tool.getValue() ?? '';
+        }
+    },
+    methods: {
+        onInput(value) {
+            this.tool.exec(value);
+            this.emitExecuted();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.autocomplete-tool {
+    width: 10rem;
+}
+</style>

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

@@ -1,37 +1,37 @@
-<template>
-    <div :title="title" class="input-units-tool">
-        <input-units
-            v-bind="{ value, units, size: 'small', disabled: !isEnabled }"
-            @change="onChange" />
-    </div>
-</template>
-
-<script>
-import InputUnits from '../../InputUnits.vue';
-import { useRender } from './mixins';
-
-export default {
-    components: { InputUnits },
-    mixins: [useRender()],
-    computed: {
-        value() {
-            return this.tool.getValue();
-        },
-        units() {
-            return this.tool?.units ?? [];
-        }
-    },
-    methods: {
-        onChange(value) {
-            this.tool.exec(value);
-            this.emitExecuted();
-        }
-    }
-};
-</script>
-
-<style scoped>
-.input-units-tool {
-    width: 4rem;
-}
-</style>
+<template>
+    <div :title="title" class="input-units-tool">
+        <input-units
+            v-bind="{ value, units, size: 'small', disabled: !isEnabled }"
+            @change="onChange" />
+    </div>
+</template>
+
+<script>
+import InputUnits from '../../InputUnits.vue';
+import { useRender } from './mixins';
+
+export default {
+    components: { InputUnits },
+    mixins: [useRender()],
+    computed: {
+        value() {
+            return this.tool.getValue();
+        },
+        units() {
+            return this.tool?.units ?? [];
+        }
+    },
+    methods: {
+        onChange(value) {
+            this.tool.exec(value);
+            this.emitExecuted();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.input-units-tool {
+    width: 4rem;
+}
+</style>