goodteditor-ui 1.0.9 → 1.0.12

package/src/components/ui/Collapse.vue

@@ -1,86 +1,86 @@
-<template>
-    <div class="ui-collapse">
-        <!-- 
-        @slot Heading slot contains <mark>header</mark>, <mark>icon-open</mark>, <mark>icon-close</mark> slots
-        @binding {boolean} isOpen   open flag
-        @binding {function} toggle  function which toggles the visibility of the content 
-        -->
-        <slot name="heading" v-bind="{ isOpen: show, toggle }">
-            <div class="row row-collapse u-select-none">
-                <div class="col col-vmid">
-                    <!-- 
-                    @slot Header content
-                    @binding {function} toggle  function which toggles the visibility of the content 
-                    -->
-                    <slot name="header" :toggle="toggle">
-                        <span class="cursor-pointer u-select-none text-bold" @click="toggle">
-                            Header
-                        </span>
-                    </slot>
-                </div>
-                <div class="col col-auto col-vmid" v-if="icon">
-                    <div class="cursor-pointer" @click="toggle">
-                        <!-- 
-                        @slot Custom slot for the 'open' state
-                        -->
-                        <slot name="icon-open" v-if="show">
-                            <div class="icon">
-                                <i class="color-primary mdil mdil-24px mdil-minus"></i>
-                            </div>
-                        </slot>
-                        <!-- 
-                        @slot Custom slot for the 'close' state
-                        -->
-                        <slot name="icon-close" v-else>
-                            <div class="icon">
-                                <i class="color-primary mdil mdil-24px mdil-plus"></i>
-                            </div>
-                        </slot>
-                    </div>
-                </div>
-            </div>
-        </slot>
-        <!-- 
-        @slot Content 
-        -->
-        <slot v-if="show">Content</slot>
-    </div>
-</template>
-<script>
-export default {
-    props: {
-        /**
-         * Whether the content is visible
-         */
-        visible: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Whether the icons are visible
-         */
-        icon: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    data() {
-        return {
-            show: false,
-        };
-    },
-    watch: {
-        visible: {
-            handler(val) {
-                this.show = val;
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        toggle() {
-            this.show = !this.show;
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-collapse">
+        <!-- 
+        @slot Heading slot contains <mark>header</mark>, <mark>icon-open</mark>, <mark>icon-close</mark> slots
+        @binding {boolean} isOpen   open flag
+        @binding {function} toggle  function which toggles the visibility of the content 
+        -->
+        <slot name="heading" v-bind="{ isOpen: show, toggle }">
+            <div class="row row-collapse u-select-none">
+                <div class="col col-vmid">
+                    <!-- 
+                    @slot Header content
+                    @binding {function} toggle  function which toggles the visibility of the content 
+                    -->
+                    <slot name="header" :toggle="toggle">
+                        <span class="cursor-pointer u-select-none text-bold" @click="toggle">
+                            Header
+                        </span>
+                    </slot>
+                </div>
+                <div class="col col-auto col-vmid" v-if="icon">
+                    <div class="cursor-pointer" @click="toggle">
+                        <!-- 
+                        @slot Custom slot for the 'open' state
+                        -->
+                        <slot name="icon-open" v-if="show">
+                            <div class="icon">
+                                <i class="color-primary mdil mdil-24px mdil-minus"></i>
+                            </div>
+                        </slot>
+                        <!-- 
+                        @slot Custom slot for the 'close' state
+                        -->
+                        <slot name="icon-close" v-else>
+                            <div class="icon">
+                                <i class="color-primary mdil mdil-24px mdil-plus"></i>
+                            </div>
+                        </slot>
+                    </div>
+                </div>
+            </div>
+        </slot>
+        <!-- 
+        @slot Content 
+        -->
+        <slot v-if="show">Content</slot>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        /**
+         * Whether the content is visible
+         */
+        visible: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Whether the icons are visible
+         */
+        icon: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            show: false,
+        };
+    },
+    watch: {
+        visible: {
+            handler(val) {
+                this.show = val;
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        toggle() {
+            this.show = !this.show;
+        },
+    },
+};
+</script>

package/src/components/ui/ColorPicker/Alpha.vue

@@ -1,114 +1,114 @@
-<template>
-    <div class="ui-color-picker-color-alpha" @mousedown.prevent.stop="selectAlpha">
-        <canvas ref="canvasAlpha" />
-        <div :style="slideAlphaStyle" class="slide" />
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-color-picker-color-alpha {
-    position: relative;
-    cursor: pointer;
-    .slide {
-        position: absolute;
-        left: 0;
-        top: 100px;
-        width: 100%;
-        height: 4px;
-        background: #fff;
-        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
-        pointer-events: none;
-    }
-}
-</style>
-<script>
-import mixin from './mixin';
-export default {
-    mixins: [mixin],
-    props: {
-        color: {
-            type: String,
-            default: '#000000',
-        },
-        rgba: {
-            type: Object,
-            default: null,
-        },
-        width: {
-            type: Number,
-            default: 15,
-        },
-        height: {
-            type: Number,
-            default: 152,
-        },
-    },
-    data() {
-        return {
-            slideAlphaStyle: {},
-            alphaSize: 5,
-        };
-    },
-    watch: {
-        color() {
-            this.renderColor();
-        },
-        'rgba.a'() {
-            this.renderSlide();
-        },
-    },
-    mounted() {
-        this.renderColor();
-        this.renderSlide();
-    },
-    methods: {
-        renderColor() {
-            const canvas = this.$refs.canvasAlpha;
-            const width = this.width;
-            const height = this.height;
-            const size = this.alphaSize;
-            const canvasSquare = this.createAlphaSquare(size);
-
-            const ctx = canvas.getContext('2d');
-            canvas.width = width;
-            canvas.height = height;
-
-            ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat');
-            ctx.fillRect(0, 0, width, height);
-
-            this.createLinearGradient('p', ctx, width, height, 'rgba(255,255,255,0)', this.color);
-        },
-        renderSlide() {
-            this.slideAlphaStyle = {
-                top: this.rgba.a * this.height - 2 + 'px',
-            };
-        },
-        selectAlpha(e) {
-            const { top: hueTop } = this.$el.getBoundingClientRect();
-
-            const mousemove = e => {
-                let y = e.clientY - hueTop;
-
-                if (y < 0) {
-                    y = 0;
-                }
-                if (y > this.height) {
-                    y = this.height;
-                }
-
-                let a = parseFloat((y / this.height).toFixed(2));
-                this.$emit('selectAlpha', a);
-            };
-
-            mousemove(e);
-
-            const mouseup = () => {
-                document.removeEventListener('mousemove', mousemove);
-                document.removeEventListener('mouseup', mouseup);
-            };
-
-            document.addEventListener('mousemove', mousemove);
-            document.addEventListener('mouseup', mouseup);
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-color-picker-color-alpha" @mousedown.prevent.stop="selectAlpha">
+        <canvas ref="canvasAlpha" />
+        <div :style="slideAlphaStyle" class="slide" />
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-color-picker-color-alpha {
+    position: relative;
+    cursor: pointer;
+    .slide {
+        position: absolute;
+        left: 0;
+        top: 100px;
+        width: 100%;
+        height: 4px;
+        background: #fff;
+        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
+        pointer-events: none;
+    }
+}
+</style>
+<script>
+import mixin from './mixin';
+export default {
+    mixins: [mixin],
+    props: {
+        color: {
+            type: String,
+            default: '#000000',
+        },
+        rgba: {
+            type: Object,
+            default: null,
+        },
+        width: {
+            type: Number,
+            default: 15,
+        },
+        height: {
+            type: Number,
+            default: 152,
+        },
+    },
+    data() {
+        return {
+            slideAlphaStyle: {},
+            alphaSize: 5,
+        };
+    },
+    watch: {
+        color() {
+            this.renderColor();
+        },
+        'rgba.a'() {
+            this.renderSlide();
+        },
+    },
+    mounted() {
+        this.renderColor();
+        this.renderSlide();
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$refs.canvasAlpha;
+            const width = this.width;
+            const height = this.height;
+            const size = this.alphaSize;
+            const canvasSquare = this.createAlphaSquare(size);
+
+            const ctx = canvas.getContext('2d');
+            canvas.width = width;
+            canvas.height = height;
+
+            ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat');
+            ctx.fillRect(0, 0, width, height);
+
+            this.createLinearGradient('p', ctx, width, height, 'rgba(255,255,255,0)', this.color);
+        },
+        renderSlide() {
+            this.slideAlphaStyle = {
+                top: this.rgba.a * this.height - 2 + 'px',
+            };
+        },
+        selectAlpha(e) {
+            const { top: hueTop } = this.$el.getBoundingClientRect();
+
+            const mousemove = e => {
+                let y = e.clientY - hueTop;
+
+                if (y < 0) {
+                    y = 0;
+                }
+                if (y > this.height) {
+                    y = this.height;
+                }
+
+                let a = parseFloat((y / this.height).toFixed(2));
+                this.$emit('selectAlpha', a);
+            };
+
+            mousemove(e);
+
+            const mouseup = () => {
+                document.removeEventListener('mousemove', mousemove);
+                document.removeEventListener('mouseup', mouseup);
+            };
+
+            document.addEventListener('mousemove', mousemove);
+            document.addEventListener('mouseup', mouseup);
+        },
+    },
+};
+</script>

package/src/components/ui/ColorPicker/Colors.vue

@@ -1,117 +1,117 @@
-<template>
-    <div class="ui-color-picker-colors">
-        <div class="colors">
-            <div
-                class="item shadow"
-                v-for="item in colorsDefault"
-                :key="item"
-                @click="selectColor(item)"
-            >
-                <div
-                    class="alpha"
-                    :style="{ background: `url(${imgAlphaBase64})` }"
-                />
-                <div class="color" :style="{ background: item }" />
-            </div>
-        </div>
-        <template v-if="colorsHistory.length">
-            <hr class="mar-top-3 mar-bot-3" />
-            <div class="colors">
-                <div
-                    class="item shadow"
-                    v-for="item in colorsHistory"
-                    :key="item"
-                    @click="selectColor(item)"
-                >
-                    <div
-                        class="alpha"
-                        :style="{ background: `url(${imgAlphaBase64})` }"
-                    />
-                    <div class="color" :style="{ background: item }" />
-                </div>
-            </div>
-        </template>
-    </div>
-</template>
-<style lang="less" scoped>
-.colors {
-    display: grid;
-    gap: 0.25em;
-    grid-template-columns: repeat(auto-fill, minmax(1em, 1fr));
-
-    .item {
-        position: relative;
-        width: 100%;
-        height: 1em;
-        transition: all 0.1s;
-        cursor: pointer;
-        &:hover {
-            transform: scale(1.25);
-        }
-        .alpha,
-        .color {
-            height: 100%;
-        }
-        .alpha {
-            position: absolute;
-        }
-        .color {
-            position: relative;
-        }
-    }
-}
-</style>
-<script>
-import mixin from './mixin';
-export default {
-    mixins: [mixin],
-    props: {
-        color: {
-            type: String,
-            default: '#000000'
-        },
-        colorsDefault: {
-            type: Array,
-            default: () => []
-        },
-        colorsHistoryKey: {
-            type: String,
-            default: ''
-        }
-    },
-    data() {
-        return {
-            imgAlphaBase64: '',
-            colorsHistory:
-                JSON.parse(localStorage.getItem(this.colorsHistoryKey)) || []
-        };
-    },
-    created() {
-        this.imgAlphaBase64 = this.createAlphaSquare(4).toDataURL();
-    },
-    destroyed() {
-        this.setColorsHistory(this.color);
-    },
-    methods: {
-        selectColor(color) {
-            this.$emit('selectColor', color);
-        },
-        setColorsHistory(color) {
-            if (!color) {
-                return;
-            }
-            const colors = this.colorsHistory;
-            const index = colors.indexOf(color);
-            if (index >= 0) {
-                colors.splice(index, 1);
-            }
-            if (colors.length >= 8) {
-                colors.length = 7;
-            }
-            colors.unshift(color);
-            this.colorsHistory = colors;
-            localStorage.setItem(this.colorsHistoryKey, JSON.stringify(colors));
-        }
-    }
-};
-</script>
+<template>
+    <div class="ui-color-picker-colors">
+        <div class="colors">
+            <div
+                class="item shadow"
+                v-for="item in colorsDefault"
+                :key="item"
+                @click="selectColor(item)"
+            >
+                <div
+                    class="alpha"
+                    :style="{ background: `url(${imgAlphaBase64})` }"
+                />
+                <div class="color" :style="{ background: item }" />
+            </div>
+        </div>
+        <template v-if="colorsHistory.length">
+            <hr class="mar-top-3 mar-bot-3" />
+            <div class="colors">
+                <div
+                    class="item shadow"
+                    v-for="item in colorsHistory"
+                    :key="item"
+                    @click="selectColor(item)"
+                >
+                    <div
+                        class="alpha"
+                        :style="{ background: `url(${imgAlphaBase64})` }"
+                    />
+                    <div class="color" :style="{ background: item }" />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+<style lang="less" scoped>
+.colors {
+    display: grid;
+    gap: 0.25em;
+    grid-template-columns: repeat(auto-fill, minmax(1em, 1fr));
+
+    .item {
+        position: relative;
+        width: 100%;
+        height: 1em;
+        transition: all 0.1s;
+        cursor: pointer;
+        &:hover {
+            transform: scale(1.25);
+        }
+        .alpha,
+        .color {
+            height: 100%;
+        }
+        .alpha {
+            position: absolute;
+        }
+        .color {
+            position: relative;
+        }
+    }
+}
+</style>
+<script>
+import mixin from './mixin';
+export default {
+    mixins: [mixin],
+    props: {
+        color: {
+            type: String,
+            default: '#000000'
+        },
+        colorsDefault: {
+            type: Array,
+            default: () => []
+        },
+        colorsHistoryKey: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            imgAlphaBase64: '',
+            colorsHistory:
+                JSON.parse(localStorage.getItem(this.colorsHistoryKey)) || []
+        };
+    },
+    created() {
+        this.imgAlphaBase64 = this.createAlphaSquare(4).toDataURL();
+    },
+    destroyed() {
+        this.setColorsHistory(this.color);
+    },
+    methods: {
+        selectColor(color) {
+            this.$emit('selectColor', color);
+        },
+        setColorsHistory(color) {
+            if (!color) {
+                return;
+            }
+            const colors = this.colorsHistory;
+            const index = colors.indexOf(color);
+            if (index >= 0) {
+                colors.splice(index, 1);
+            }
+            if (colors.length >= 8) {
+                colors.length = 7;
+            }
+            colors.unshift(color);
+            this.colorsHistory = colors;
+            localStorage.setItem(this.colorsHistoryKey, JSON.stringify(colors));
+        }
+    }
+};
+</script>