goodteditor-ui 1.0.9 → 1.0.12

package/src/components/ui/ColorPicker.vue

@@ -1,314 +1,314 @@
-<template>
-    <div class="ui-color-picker">
-        <div class="panel pad-2 d-inline-flex">
-            <div :style="{ width: `${totalWidth}px` }">
-                <div class="d-flex">
-                    <cp-saturation
-                        ref="saturation"
-                        :color="rgbString"
-                        :hsv="hsv"
-                        :size="hueHeight"
-                        @changeSaturation="changeSaturation"
-                        @selectSaturation="selectSaturation"
-                    />
-                    <cp-hue
-                        class="mar-left-2"
-                        ref="hue"
-                        :hsv="hsv"
-                        :width="hueWidth"
-                        :height="hueHeight"
-                        @selectHue="selectHue"
-                    />
-                    <cp-alpha
-                        class="mar-left-2"
-                        ref="alpha"
-                        :color="rgbString"
-                        :rgba="rgba"
-                        :width="hueWidth"
-                        :height="hueHeight"
-                        @selectAlpha="selectAlpha"
-                    />
-                </div>
-                <cp-preview
-                    class="mar-top-2"
-                    :color="previewRgbaString"
-                    :width="previewWidth"
-                    :height="previewHeight"
-                />
-                <div class="d-flex mar-top-2">
-                    <input
-                        class="input input-small text-xsmall flex-grow"
-                        type="text"
-                        :value="modelRgba"
-                        @change="e => inputRgba(e.target.value)"
-                        v-if="modelMode == modelModes.RGBA"
-                    />
-                    <input
-                        class="input input-small text-xsmall flex-grow"
-                        type="text"
-                        :value="modelHex"
-                        @change="e => inputHex(e.target.value)"
-                        v-else
-                    />
-                    <div class="btn btn-outline btn-small mar-left-2" @click="toggleModelMode">
-                        <span class="text-xsmall text-upper">{{ nextModelMode }}</span>
-                    </div>
-                    <div
-                        class="btn btn-outline btn-small mar-left-2"
-                        @click="submit"
-                        v-if="showSubmit"
-                    >
-                        <i class="mdi mdi-check"></i>
-                    </div>
-                </div>
-                <cp-colors
-                    class="mar-top-2"
-                    :color="rgbaString"
-                    :colors-default="colorsDefault"
-                    :colors-history-key="colorsHistoryKey"
-                    @selectColor="selectColor"
-                    v-if="colorsDefault.length || colorsHistoryKey"
-                />
-            </div>
-        </div>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-color-picker {
-    canvas {
-        display: block;
-    }
-    input {
-        min-width: 0;
-    }
-    .btn {
-        min-height: 0;
-        width: 2.25em;
-        padding: 0;
-    }
-    .text-upper {
-        text-transform: uppercase;
-    }
-}
-</style>
-<script>
-import mixin from './ColorPicker/mixin';
-import CpSaturation from './ColorPicker/Saturation.vue';
-import CpHue from './ColorPicker/Hue.vue';
-import CpAlpha from './ColorPicker/Alpha.vue';
-import CpPreview from './ColorPicker/Preview.vue';
-import CpColors from './ColorPicker/Colors.vue';
-
-let MODEL_MODE = {
-    HEX: 'h',
-    RGBA: 'r',
-};
-export default {
-    components: {
-        CpSaturation,
-        CpHue,
-        CpAlpha,
-        CpPreview,
-        CpColors,
-    },
-    mixins: [mixin],
-    props: {
-        /**
-         * @model
-         */
-        value: {
-            type: String,
-            default: '#000000',
-        },
-        /**
-         * Default colors palette
-         */
-        colorsDefault: {
-            type: Array,
-            default: () => [],
-        },
-        /**
-         * LocalStorage key for saving used colors
-         */
-        colorsHistoryKey: {
-            type: String,
-            default: '',
-        },
-        /**
-         * Show submit button
-         */
-        showSubmit: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            hueWidth: 15,
-            hueHeight: 150,
-            previewHeight: 15,
-            modelRgba: '',
-            modelHex: '',
-            modelMode: MODEL_MODE.RGBA,
-            modelModes: MODEL_MODE,
-            r: 0,
-            g: 0,
-            b: 0,
-            a: 1,
-            h: 0,
-            s: 0,
-            v: 0,
-        };
-    },
-    computed: {
-        nextModelMode() {
-            let { HEX, RGBA } = MODEL_MODE;
-            return this.modelMode == HEX ? RGBA : HEX;
-        },
-        totalWidth() {
-            return this.hueHeight + (this.hueWidth + 4) * 2;
-        },
-        previewWidth() {
-            return this.totalWidth;
-        },
-        rgba() {
-            return {
-                r: this.r,
-                g: this.g,
-                b: this.b,
-                a: this.a,
-            };
-        },
-        hsv() {
-            return {
-                h: this.h,
-                s: this.s,
-                v: this.v,
-            };
-        },
-        rgbString() {
-            return `rgb(${this.r}, ${this.g}, ${this.b})`;
-        },
-        rgbaStringShort() {
-            return `${this.r}, ${this.g}, ${this.b}, ${this.a}`;
-        },
-        rgbaString() {
-            return `rgba(${this.rgbaStringShort})`;
-        },
-        hexString() {
-            return this.rgb2hex(this.rgba, true);
-        },
-        previewRgbaString() {
-            return this.rgbaString;
-        },
-    },
-    watch: {
-        value: {
-            handler(v) {
-                Object.assign(this, this.setColorValue(this.value));
-                this.setText();
-            },
-            immediate: true,
-        },
-        rgba() {
-            /**
-             * Triggers when the color changes
-             * @property {Object} color color object
-             */
-            this.$emit('changeColor', {
-                rgba: this.rgba,
-                hsv: this.hsv,
-                hex: this.modelHex,
-            });
-            /**
-             * Triggers when the color changes
-             * @property {Number} rgbaString color rgba string
-             */
-            this.$emit('input', this.rgbaString);
-        },
-    },
-    /*created() {
-        Object.assign(this, this.setColorValue(this.value));
-        this.setText();
-    },*/
-    methods: {
-        submit() {
-            /**
-             * Triggers when the color changes
-             * @property {Object} color color object
-             */
-            this.$emit('submit', {
-                rgba: this.rgba,
-                hsv: this.hsv,
-                hex: this.modelHex,
-            });
-        },
-        toggleModelMode() {
-            let { HEX, RGBA } = MODEL_MODE;
-            this.modelMode = this.modelMode == HEX ? RGBA : HEX;
-        },
-        selectSaturation(color) {
-            const { r, g, b, h, s, v } = this.setColorValue(color);
-            Object.assign(this, { r, g, b, h, s, v });
-            this.setText();
-        },
-        changeSaturation(color) {
-            //const { r, g, b } = this.setColorValue(color);
-            //const { a } = this;
-            //this.previewRgbaString = `rgba(${r},${g},${b},${a})`;
-            const { r, g, b, h, s, v } = this.setColorValue(color);
-            Object.assign(this, { r, g, b, h, s, v });
-            this.setText();
-        },
-        selectHue(color) {
-            const { r, g, b, h, s, v } = this.setColorValue(color);
-            Object.assign(this, { r, g, b, h, s, v });
-            this.setText();
-            this.$nextTick(() => {
-                this.$refs.saturation.renderColor();
-                this.$refs.saturation.renderSlide();
-            });
-        },
-        selectAlpha(a) {
-            this.a = a;
-            this.setText();
-        },
-        inputHex(color) {
-            const { r, g, b, a, h, s, v } = this.setColorValue(color);
-            Object.assign(this, { r, g, b, a, h, s, v });
-            this.modelHex = color;
-            this.modelRgba = this.rgbaStringShort;
-            this.$nextTick(() => {
-                this.$refs.saturation.renderColor();
-                this.$refs.saturation.renderSlide();
-                this.$refs.hue.renderSlide();
-            });
-        },
-        inputRgba(color) {
-            const { r, g, b, a, h, s, v } = this.setColorValue(color);
-            Object.assign(this, { r, g, b, a, h, s, v });
-            this.modelHex = this.hexString;
-            this.modelRgba = color;
-            this.$nextTick(() => {
-                this.$refs.saturation.renderColor();
-                this.$refs.saturation.renderSlide();
-                this.$refs.hue.renderSlide();
-            });
-        },
-        setText() {
-            this.modelHex = this.hexString;
-            this.modelRgba = this.rgbaStringShort;
-        },
-        selectColor(color) {
-            const { r, g, b, a, h, s, v } = this.setColorValue(color);
-            Object.assign(this, { r, g, b, a, h, s, v });
-            this.setText();
-            this.$nextTick(() => {
-                this.$refs.saturation.renderColor();
-                this.$refs.saturation.renderSlide();
-                this.$refs.hue.renderSlide();
-            });
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-color-picker">
+        <div class="panel pad-2 d-inline-flex">
+            <div :style="{ width: `${totalWidth}px` }">
+                <div class="d-flex">
+                    <cp-saturation
+                        ref="saturation"
+                        :color="rgbString"
+                        :hsv="hsv"
+                        :size="hueHeight"
+                        @changeSaturation="changeSaturation"
+                        @selectSaturation="selectSaturation"
+                    />
+                    <cp-hue
+                        class="mar-left-2"
+                        ref="hue"
+                        :hsv="hsv"
+                        :width="hueWidth"
+                        :height="hueHeight"
+                        @selectHue="selectHue"
+                    />
+                    <cp-alpha
+                        class="mar-left-2"
+                        ref="alpha"
+                        :color="rgbString"
+                        :rgba="rgba"
+                        :width="hueWidth"
+                        :height="hueHeight"
+                        @selectAlpha="selectAlpha"
+                    />
+                </div>
+                <cp-preview
+                    class="mar-top-2"
+                    :color="previewRgbaString"
+                    :width="previewWidth"
+                    :height="previewHeight"
+                />
+                <div class="d-flex mar-top-2">
+                    <input
+                        class="input input-small text-xsmall flex-grow"
+                        type="text"
+                        :value="modelRgba"
+                        @change="e => inputRgba(e.target.value)"
+                        v-if="modelMode == modelModes.RGBA"
+                    />
+                    <input
+                        class="input input-small text-xsmall flex-grow"
+                        type="text"
+                        :value="modelHex"
+                        @change="e => inputHex(e.target.value)"
+                        v-else
+                    />
+                    <div class="btn btn-outline btn-small mar-left-2" @click="toggleModelMode">
+                        <span class="text-xsmall text-upper">{{ nextModelMode }}</span>
+                    </div>
+                    <div
+                        class="btn btn-outline btn-small mar-left-2"
+                        @click="submit"
+                        v-if="showSubmit"
+                    >
+                        <i class="mdi mdi-check"></i>
+                    </div>
+                </div>
+                <cp-colors
+                    class="mar-top-2"
+                    :color="rgbaString"
+                    :colors-default="colorsDefault"
+                    :colors-history-key="colorsHistoryKey"
+                    @selectColor="selectColor"
+                    v-if="colorsDefault.length || colorsHistoryKey"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-color-picker {
+    canvas {
+        display: block;
+    }
+    input {
+        min-width: 0;
+    }
+    .btn {
+        min-height: 0;
+        width: 2.25em;
+        padding: 0;
+    }
+    .text-upper {
+        text-transform: uppercase;
+    }
+}
+</style>
+<script>
+import mixin from './ColorPicker/mixin';
+import CpSaturation from './ColorPicker/Saturation.vue';
+import CpHue from './ColorPicker/Hue.vue';
+import CpAlpha from './ColorPicker/Alpha.vue';
+import CpPreview from './ColorPicker/Preview.vue';
+import CpColors from './ColorPicker/Colors.vue';
+
+let MODEL_MODE = {
+    HEX: 'h',
+    RGBA: 'r',
+};
+export default {
+    components: {
+        CpSaturation,
+        CpHue,
+        CpAlpha,
+        CpPreview,
+        CpColors,
+    },
+    mixins: [mixin],
+    props: {
+        /**
+         * @model
+         */
+        value: {
+            type: String,
+            default: '#000000',
+        },
+        /**
+         * Default colors palette
+         */
+        colorsDefault: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         * LocalStorage key for saving used colors
+         */
+        colorsHistoryKey: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Show submit button
+         */
+        showSubmit: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            hueWidth: 15,
+            hueHeight: 150,
+            previewHeight: 15,
+            modelRgba: '',
+            modelHex: '',
+            modelMode: MODEL_MODE.RGBA,
+            modelModes: MODEL_MODE,
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 1,
+            h: 0,
+            s: 0,
+            v: 0,
+        };
+    },
+    computed: {
+        nextModelMode() {
+            let { HEX, RGBA } = MODEL_MODE;
+            return this.modelMode == HEX ? RGBA : HEX;
+        },
+        totalWidth() {
+            return this.hueHeight + (this.hueWidth + 4) * 2;
+        },
+        previewWidth() {
+            return this.totalWidth;
+        },
+        rgba() {
+            return {
+                r: this.r,
+                g: this.g,
+                b: this.b,
+                a: this.a,
+            };
+        },
+        hsv() {
+            return {
+                h: this.h,
+                s: this.s,
+                v: this.v,
+            };
+        },
+        rgbString() {
+            return `rgb(${this.r}, ${this.g}, ${this.b})`;
+        },
+        rgbaStringShort() {
+            return `${this.r}, ${this.g}, ${this.b}, ${this.a}`;
+        },
+        rgbaString() {
+            return `rgba(${this.rgbaStringShort})`;
+        },
+        hexString() {
+            return this.rgb2hex(this.rgba, true);
+        },
+        previewRgbaString() {
+            return this.rgbaString;
+        },
+    },
+    watch: {
+        value: {
+            handler(v) {
+                Object.assign(this, this.setColorValue(this.value));
+                this.setText();
+            },
+            immediate: true,
+        },
+        rgba() {
+            /**
+             * Triggers when the color changes
+             * @property {Object} color color object
+             */
+            this.$emit('changeColor', {
+                rgba: this.rgba,
+                hsv: this.hsv,
+                hex: this.modelHex,
+            });
+            /**
+             * Triggers when the color changes
+             * @property {Number} rgbaString color rgba string
+             */
+            this.$emit('input', this.rgbaString);
+        },
+    },
+    /*created() {
+        Object.assign(this, this.setColorValue(this.value));
+        this.setText();
+    },*/
+    methods: {
+        submit() {
+            /**
+             * Triggers when the color changes
+             * @property {Object} color color object
+             */
+            this.$emit('submit', {
+                rgba: this.rgba,
+                hsv: this.hsv,
+                hex: this.modelHex,
+            });
+        },
+        toggleModelMode() {
+            let { HEX, RGBA } = MODEL_MODE;
+            this.modelMode = this.modelMode == HEX ? RGBA : HEX;
+        },
+        selectSaturation(color) {
+            const { r, g, b, h, s, v } = this.setColorValue(color);
+            Object.assign(this, { r, g, b, h, s, v });
+            this.setText();
+        },
+        changeSaturation(color) {
+            //const { r, g, b } = this.setColorValue(color);
+            //const { a } = this;
+            //this.previewRgbaString = `rgba(${r},${g},${b},${a})`;
+            const { r, g, b, h, s, v } = this.setColorValue(color);
+            Object.assign(this, { r, g, b, h, s, v });
+            this.setText();
+        },
+        selectHue(color) {
+            const { r, g, b, h, s, v } = this.setColorValue(color);
+            Object.assign(this, { r, g, b, h, s, v });
+            this.setText();
+            this.$nextTick(() => {
+                this.$refs.saturation.renderColor();
+                this.$refs.saturation.renderSlide();
+            });
+        },
+        selectAlpha(a) {
+            this.a = a;
+            this.setText();
+        },
+        inputHex(color) {
+            const { r, g, b, a, h, s, v } = this.setColorValue(color);
+            Object.assign(this, { r, g, b, a, h, s, v });
+            this.modelHex = color;
+            this.modelRgba = this.rgbaStringShort;
+            this.$nextTick(() => {
+                this.$refs.saturation.renderColor();
+                this.$refs.saturation.renderSlide();
+                this.$refs.hue.renderSlide();
+            });
+        },
+        inputRgba(color) {
+            const { r, g, b, a, h, s, v } = this.setColorValue(color);
+            Object.assign(this, { r, g, b, a, h, s, v });
+            this.modelHex = this.hexString;
+            this.modelRgba = color;
+            this.$nextTick(() => {
+                this.$refs.saturation.renderColor();
+                this.$refs.saturation.renderSlide();
+                this.$refs.hue.renderSlide();
+            });
+        },
+        setText() {
+            this.modelHex = this.hexString;
+            this.modelRgba = this.rgbaStringShort;
+        },
+        selectColor(color) {
+            const { r, g, b, a, h, s, v } = this.setColorValue(color);
+            Object.assign(this, { r, g, b, a, h, s, v });
+            this.setText();
+            this.$nextTick(() => {
+                this.$refs.saturation.renderColor();
+                this.$refs.saturation.renderSlide();
+                this.$refs.hue.renderSlide();
+            });
+        },
+    },
+};
+</script>