goodteditor-ui 1.0.12 → 1.0.13

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

@@ -1,123 +1,123 @@
-<template>
-    <div class="ui-color-picker-saturation" @mousedown.prevent.stop="selectSaturation">
-        <canvas ref="canvasSaturation" />
-        <div class="slide" :style="slideSaturationStyle" />
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-color-picker-saturation {
-    position: relative;
-    cursor: pointer;
-    .slide {
-        position: absolute;
-        left: 100px;
-        top: 0;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        border: 1px solid #fff;
-        box-shadow: 0 0 1px 1px 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',
-        },
-        hsv: {
-            type: Object,
-            default: null,
-        },
-        size: {
-            type: Number,
-            default: 150,
-        },
-    },
-    data() {
-        return {
-            slideSaturationStyle: {},
-        };
-    },
-    created() {
-        this._color = { r: 0, g: 0, b: 0 };
-    },
-    mounted() {
-        this.renderColor();
-        this.renderSlide();
-    },
-    methods: {
-        renderColor() {
-            const canvas = this.$refs.canvasSaturation;
-            const size = this.size;
-            const ctx = canvas.getContext('2d');
-            canvas.width = size;
-            canvas.height = size;
-
-            ctx.fillStyle = this.color;
-            ctx.fillRect(0, 0, size, size);
-
-            this.createLinearGradient('l', ctx, size, size, '#FFFFFF', 'rgba(255,255,255,0)');
-            this.createLinearGradient('p', ctx, size, size, 'rgba(0,0,0,0)', '#000000');
-        },
-        renderSlide() {
-            this.slideSaturationStyle = {
-                left: this.hsv.s * this.size - 5 + 'px',
-                top: (1 - this.hsv.v) * this.size - 5 + 'px',
-            };
-        },
-        selectSaturation(e) {
-            const { top: saturationTop, left: saturationLeft } = this.$el.getBoundingClientRect();
-            const ctx = e.target.getContext('2d');
-
-            const mousemove = e => {
-                let x = e.clientX - saturationLeft;
-                let y = e.clientY - saturationTop;
-
-                if (x < 0) {
-                    x = 0;
-                }
-                if (y < 0) {
-                    y = 0;
-                }
-                if (x > this.size) {
-                    x = this.size;
-                }
-                if (y > this.size) {
-                    y = this.size;
-                }
-
-                this.slideSaturationStyle = {
-                    left: x - 5 + 'px',
-                    top: y - 5 + 'px',
-                };
-                const imgData = ctx.getImageData(
-                    Math.min(x, this.size - 1),
-                    Math.min(y, this.size - 1),
-                    1,
-                    1
-                );
-                const [r, g, b] = imgData.data;
-                this._color = { r, g, b };
-                this.$emit('changeSaturation', this._color);
-            };
-
-            mousemove(e);
-
-            const mouseup = () => {
-                document.removeEventListener('mousemove', mousemove);
-                document.removeEventListener('mouseup', mouseup);
-                this.$emit('selectSaturation', this._color);
-            };
-
-            document.addEventListener('mousemove', mousemove);
-            document.addEventListener('mouseup', mouseup);
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-color-picker-saturation" @mousedown.prevent.stop="selectSaturation">
+        <canvas ref="canvasSaturation" />
+        <div class="slide" :style="slideSaturationStyle" />
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-color-picker-saturation {
+    position: relative;
+    cursor: pointer;
+    .slide {
+        position: absolute;
+        left: 100px;
+        top: 0;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        border: 1px solid #fff;
+        box-shadow: 0 0 1px 1px 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',
+        },
+        hsv: {
+            type: Object,
+            default: null,
+        },
+        size: {
+            type: Number,
+            default: 150,
+        },
+    },
+    data() {
+        return {
+            slideSaturationStyle: {},
+        };
+    },
+    created() {
+        this._color = { r: 0, g: 0, b: 0 };
+    },
+    mounted() {
+        this.renderColor();
+        this.renderSlide();
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$refs.canvasSaturation;
+            const size = this.size;
+            const ctx = canvas.getContext('2d');
+            canvas.width = size;
+            canvas.height = size;
+
+            ctx.fillStyle = this.color;
+            ctx.fillRect(0, 0, size, size);
+
+            this.createLinearGradient('l', ctx, size, size, '#FFFFFF', 'rgba(255,255,255,0)');
+            this.createLinearGradient('p', ctx, size, size, 'rgba(0,0,0,0)', '#000000');
+        },
+        renderSlide() {
+            this.slideSaturationStyle = {
+                left: this.hsv.s * this.size - 5 + 'px',
+                top: (1 - this.hsv.v) * this.size - 5 + 'px',
+            };
+        },
+        selectSaturation(e) {
+            const { top: saturationTop, left: saturationLeft } = this.$el.getBoundingClientRect();
+            const ctx = e.target.getContext('2d');
+
+            const mousemove = e => {
+                let x = e.clientX - saturationLeft;
+                let y = e.clientY - saturationTop;
+
+                if (x < 0) {
+                    x = 0;
+                }
+                if (y < 0) {
+                    y = 0;
+                }
+                if (x > this.size) {
+                    x = this.size;
+                }
+                if (y > this.size) {
+                    y = this.size;
+                }
+
+                this.slideSaturationStyle = {
+                    left: x - 5 + 'px',
+                    top: y - 5 + 'px',
+                };
+                const imgData = ctx.getImageData(
+                    Math.min(x, this.size - 1),
+                    Math.min(y, this.size - 1),
+                    1,
+                    1
+                );
+                const [r, g, b] = imgData.data;
+                this._color = { r, g, b };
+                this.$emit('changeSaturation', this._color);
+            };
+
+            mousemove(e);
+
+            const mouseup = () => {
+                document.removeEventListener('mousemove', mousemove);
+                document.removeEventListener('mouseup', mouseup);
+                this.$emit('selectSaturation', this._color);
+            };
+
+            document.addEventListener('mousemove', mousemove);
+            document.addEventListener('mouseup', mouseup);
+        },
+    },
+};
+</script>

package/src/components/ui/ColorPicker/mixin.js

@@ -1,105 +1,105 @@
-export default {
-    methods: {
-        setColorValue(color) {
-            let rgba = { r: 0, g: 0, b: 0, a: 1 };
-            if (/#/.test(color)) {
-                rgba = this.hex2rgb(color);
-            } else if (/rgb/.test(color)) {
-                rgba = this.rgb2rgba(color);
-            } else if (typeof color === 'string') {
-                rgba = this.rgb2rgba(`rgba(${color})`);
-            } else if (Object.prototype.toString.call(color) === '[object Object]') {
-                rgba = color;
-            }
-            let fix = c => (c < 0 ? 0 : c > 255 ? 255 : c);
-            ['r', 'g', 'b'].forEach(c => (rgba[c] = fix(rgba[c])));
-            const { r, g, b, a } = rgba;
-            const { h, s, v } = this.rgb2hsv(rgba);
-            return {
-                r,
-                g,
-                b,
-                a: a === undefined ? 1 : a,
-                h,
-                s,
-                v,
-            };
-        },
-        createAlphaSquare(size) {
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
-            const doubleSize = size * 2;
-            canvas.width = doubleSize;
-            canvas.height = doubleSize;
-
-            ctx.fillStyle = '#ffffff';
-            ctx.fillRect(0, 0, doubleSize, doubleSize);
-            ctx.fillStyle = '#ccd5db';
-            ctx.fillRect(0, 0, size, size);
-            ctx.fillRect(size, size, size, size);
-
-            return canvas;
-        },
-        createLinearGradient(direction, ctx, width, height, color1, color2) {
-            const isL = direction === 'l';
-            const gradient = ctx.createLinearGradient(0, 0, isL ? width : 0, isL ? 0 : height);
-            gradient.addColorStop(0.01, color1);
-            gradient.addColorStop(0.99, color2);
-            ctx.fillStyle = gradient;
-            ctx.fillRect(0, 0, width, height);
-        },
-        rgb2hex({ r, g, b }, toUpper) {
-            const change = val => ('0' + Number(val).toString(16)).slice(-2);
-            const color = `#${change(r)}${change(g)}${change(b)}`;
-            return toUpper ? color.toUpperCase() : color;
-        },
-        hex2rgb(hex) {
-            hex = hex.slice(1);
-            const change = val => parseInt(val, 16) || 0;
-            return {
-                r: change(hex.slice(0, 2)),
-                g: change(hex.slice(2, 4)),
-                b: change(hex.slice(4, 6)),
-            };
-        },
-        rgb2rgba(rgba) {
-            if (typeof rgba === 'string') {
-                rgba = (/rgba?\((.*?)\)/.exec(rgba) || ['', '0,0,0,1'])[1].split(',');
-                return {
-                    r: Number(rgba[0]) || 0,
-                    g: Number(rgba[1]) || 0,
-                    b: Number(rgba[2]) || 0,
-                    a: Number(rgba[3] ? rgba[3] : 1),
-                };
-            } else {
-                return rgba;
-            }
-        },
-        rgb2hsv({ r, g, b }) {
-            r = r / 255;
-            g = g / 255;
-            b = b / 255;
-            const max = Math.max(r, g, b);
-            const min = Math.min(r, g, b);
-            const delta = max - min;
-            let h = 0;
-            if (max === min) {
-                h = 0;
-            } else if (max === r) {
-                if (g >= b) {
-                    h = (60 * (g - b)) / delta;
-                } else {
-                    h = (60 * (g - b)) / delta + 360;
-                }
-            } else if (max === g) {
-                h = (60 * (b - r)) / delta + 120;
-            } else if (max === b) {
-                h = (60 * (r - g)) / delta + 240;
-            }
-            h = Math.floor(h);
-            let s = parseFloat((max === 0 ? 0 : 1 - min / max).toFixed(2));
-            let v = parseFloat(max.toFixed(2));
-            return { h, s, v };
-        },
-    },
-};
+export default {
+    methods: {
+        setColorValue(color) {
+            let rgba = { r: 0, g: 0, b: 0, a: 1 };
+            if (/#/.test(color)) {
+                rgba = this.hex2rgb(color);
+            } else if (/rgb/.test(color)) {
+                rgba = this.rgb2rgba(color);
+            } else if (typeof color === 'string') {
+                rgba = this.rgb2rgba(`rgba(${color})`);
+            } else if (Object.prototype.toString.call(color) === '[object Object]') {
+                rgba = color;
+            }
+            let fix = c => (c < 0 ? 0 : c > 255 ? 255 : c);
+            ['r', 'g', 'b'].forEach(c => (rgba[c] = fix(rgba[c])));
+            const { r, g, b, a } = rgba;
+            const { h, s, v } = this.rgb2hsv(rgba);
+            return {
+                r,
+                g,
+                b,
+                a: a === undefined ? 1 : a,
+                h,
+                s,
+                v,
+            };
+        },
+        createAlphaSquare(size) {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            const doubleSize = size * 2;
+            canvas.width = doubleSize;
+            canvas.height = doubleSize;
+
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(0, 0, doubleSize, doubleSize);
+            ctx.fillStyle = '#ccd5db';
+            ctx.fillRect(0, 0, size, size);
+            ctx.fillRect(size, size, size, size);
+
+            return canvas;
+        },
+        createLinearGradient(direction, ctx, width, height, color1, color2) {
+            const isL = direction === 'l';
+            const gradient = ctx.createLinearGradient(0, 0, isL ? width : 0, isL ? 0 : height);
+            gradient.addColorStop(0.01, color1);
+            gradient.addColorStop(0.99, color2);
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, width, height);
+        },
+        rgb2hex({ r, g, b }, toUpper) {
+            const change = val => ('0' + Number(val).toString(16)).slice(-2);
+            const color = `#${change(r)}${change(g)}${change(b)}`;
+            return toUpper ? color.toUpperCase() : color;
+        },
+        hex2rgb(hex) {
+            hex = hex.slice(1);
+            const change = val => parseInt(val, 16) || 0;
+            return {
+                r: change(hex.slice(0, 2)),
+                g: change(hex.slice(2, 4)),
+                b: change(hex.slice(4, 6)),
+            };
+        },
+        rgb2rgba(rgba) {
+            if (typeof rgba === 'string') {
+                rgba = (/rgba?\((.*?)\)/.exec(rgba) || ['', '0,0,0,1'])[1].split(',');
+                return {
+                    r: Number(rgba[0]) || 0,
+                    g: Number(rgba[1]) || 0,
+                    b: Number(rgba[2]) || 0,
+                    a: Number(rgba[3] ? rgba[3] : 1),
+                };
+            } else {
+                return rgba;
+            }
+        },
+        rgb2hsv({ r, g, b }) {
+            r = r / 255;
+            g = g / 255;
+            b = b / 255;
+            const max = Math.max(r, g, b);
+            const min = Math.min(r, g, b);
+            const delta = max - min;
+            let h = 0;
+            if (max === min) {
+                h = 0;
+            } else if (max === r) {
+                if (g >= b) {
+                    h = (60 * (g - b)) / delta;
+                } else {
+                    h = (60 * (g - b)) / delta + 360;
+                }
+            } else if (max === g) {
+                h = (60 * (b - r)) / delta + 120;
+            } else if (max === b) {
+                h = (60 * (r - g)) / delta + 240;
+            }
+            h = Math.floor(h);
+            let s = parseFloat((max === 0 ? 0 : 1 - min / max).toFixed(2));
+            let v = parseFloat(max.toFixed(2));
+            return { h, s, v };
+        },
+    },
+};

package/src/components/ui/ColorPicker.md

@@ -1,17 +1,17 @@
-```vue
-<template>
-    <div class="pad-l5">
-        <p>model: {{ model }}</p>
-        <color-picker v-model="model"></color-picker>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            model: '#ff00ff',
-        };
-    },
-};
-</script>
-```
+```vue
+<template>
+    <div class="pad-l5">
+        <p>model: {{ model }}</p>
+        <color-picker v-model="model"></color-picker>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            model: '#ff00ff',
+        };
+    },
+};
+</script>
+```