goodteditor-ui 1.0.23 → 1.0.25

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>

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

@@ -1,113 +1,113 @@
-<template>
-    <div class="ui-color-picker-hue" @mousedown.prevent.stop="selectHue">
-        <canvas ref="canvasHue" />
-        <div class="slide" :style="slideHueStyle" />
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-color-picker-hue {
-    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>
-export default {
-    props: {
-        hsv: {
-            type: Object,
-            default: null,
-        },
-        width: {
-            type: Number,
-            default: 15,
-        },
-        height: {
-            type: Number,
-            default: 152,
-        },
-    },
-    data() {
-        return {
-            slideHueStyle: {},
-        };
-    },
-    // 不能监听，否则操作saturation时，这里的slide会抖动
-    // watch: {
-    //     'hsv.h'() {
-    //         this.renderSlide()
-    //     }
-    // },
-    mounted() {
-        this.renderColor();
-        this.renderSlide();
-    },
-    methods: {
-        renderColor() {
-            const canvas = this.$refs.canvasHue;
-            const width = this.width;
-            const height = this.height;
-            const ctx = canvas.getContext('2d');
-            canvas.width = width;
-            canvas.height = height;
-
-            const gradient = ctx.createLinearGradient(0, 0, 0, height);
-            gradient.addColorStop(0, '#FF0000'); // 红
-            gradient.addColorStop(0.17 * 1, '#FF00FF'); // 紫
-            gradient.addColorStop(0.17 * 2, '#0000FF'); // 蓝
-            gradient.addColorStop(0.17 * 3, '#00FFFF'); // 青
-            gradient.addColorStop(0.17 * 4, '#00FF00'); // 绿
-            gradient.addColorStop(0.17 * 5, '#FFFF00'); // 黄
-            gradient.addColorStop(1, '#FF0000'); // 红
-            ctx.fillStyle = gradient;
-            ctx.fillRect(0, 0, width, height);
-        },
-        renderSlide() {
-            this.slideHueStyle = {
-                top: (1 - this.hsv.h / 360) * this.height - 2 + 'px',
-            };
-        },
-        selectHue(e) {
-            const { top: hueTop } = this.$el.getBoundingClientRect();
-            const ctx = e.target.getContext('2d');
-
-            const mousemove = e => {
-                let y = e.clientY - hueTop;
-
-                if (y < 0) {
-                    y = 0;
-                }
-                if (y > this.height) {
-                    y = this.height;
-                }
-
-                this.slideHueStyle = {
-                    top: y - 2 + 'px',
-                };
-                const imgData = ctx.getImageData(0, Math.min(y, this.height - 1), 1, 1);
-                const [r, g, b] = imgData.data;
-                this.$emit('selectHue', { r, g, b });
-            };
-
-            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-hue" @mousedown.prevent.stop="selectHue">
+        <canvas ref="canvasHue" />
+        <div class="slide" :style="slideHueStyle" />
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-color-picker-hue {
+    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>
+export default {
+    props: {
+        hsv: {
+            type: Object,
+            default: null,
+        },
+        width: {
+            type: Number,
+            default: 15,
+        },
+        height: {
+            type: Number,
+            default: 152,
+        },
+    },
+    data() {
+        return {
+            slideHueStyle: {},
+        };
+    },
+    // 不能监听，否则操作saturation时，这里的slide会抖动
+    // watch: {
+    //     'hsv.h'() {
+    //         this.renderSlide()
+    //     }
+    // },
+    mounted() {
+        this.renderColor();
+        this.renderSlide();
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$refs.canvasHue;
+            const width = this.width;
+            const height = this.height;
+            const ctx = canvas.getContext('2d');
+            canvas.width = width;
+            canvas.height = height;
+
+            const gradient = ctx.createLinearGradient(0, 0, 0, height);
+            gradient.addColorStop(0, '#FF0000'); // 红
+            gradient.addColorStop(0.17 * 1, '#FF00FF'); // 紫
+            gradient.addColorStop(0.17 * 2, '#0000FF'); // 蓝
+            gradient.addColorStop(0.17 * 3, '#00FFFF'); // 青
+            gradient.addColorStop(0.17 * 4, '#00FF00'); // 绿
+            gradient.addColorStop(0.17 * 5, '#FFFF00'); // 黄
+            gradient.addColorStop(1, '#FF0000'); // 红
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, width, height);
+        },
+        renderSlide() {
+            this.slideHueStyle = {
+                top: (1 - this.hsv.h / 360) * this.height - 2 + 'px',
+            };
+        },
+        selectHue(e) {
+            const { top: hueTop } = this.$el.getBoundingClientRect();
+            const ctx = e.target.getContext('2d');
+
+            const mousemove = e => {
+                let y = e.clientY - hueTop;
+
+                if (y < 0) {
+                    y = 0;
+                }
+                if (y > this.height) {
+                    y = this.height;
+                }
+
+                this.slideHueStyle = {
+                    top: y - 2 + 'px',
+                };
+                const imgData = ctx.getImageData(0, Math.min(y, this.height - 1), 1, 1);
+                const [r, g, b] = imgData.data;
+                this.$emit('selectHue', { r, g, b });
+            };
+
+            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/Preview.vue

@@ -1,55 +1,55 @@
-<template>
-    <canvas />
-</template>
-<script>
-import mixin from './mixin';
-export default {
-    mixins: [mixin],
-    props: {
-        color: {
-            type: String,
-            default: '#000000'
-        },
-        width: {
-            type: Number,
-            default: 100
-        },
-        height: {
-            type: Number,
-            default: 30
-        }
-    },
-    data() {
-        return {
-            alphaSize: 5
-        };
-    },
-    watch: {
-        color() {
-            this.renderColor();
-        }
-    },
-    mounted() {
-        this.renderColor();
-    },
-    methods: {
-        renderColor() {
-            const canvas = this.$el;
-            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);
-
-            ctx.fillStyle = this.color;
-            ctx.fillRect(0, 0, width, height);
-        }
-    }
-};
-</script>
+<template>
+    <canvas />
+</template>
+<script>
+import mixin from './mixin';
+export default {
+    mixins: [mixin],
+    props: {
+        color: {
+            type: String,
+            default: '#000000'
+        },
+        width: {
+            type: Number,
+            default: 100
+        },
+        height: {
+            type: Number,
+            default: 30
+        }
+    },
+    data() {
+        return {
+            alphaSize: 5
+        };
+    },
+    watch: {
+        color() {
+            this.renderColor();
+        }
+    },
+    mounted() {
+        this.renderColor();
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$el;
+            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);
+
+            ctx.fillStyle = this.color;
+            ctx.fillRect(0, 0, width, height);
+        }
+    }
+};
+</script>