goodteditor-ui 1.0.77 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.77",
+    "version": "1.0.78",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/components/ui/ColorPicker.vue

@@ -31,7 +31,7 @@
                     :color="previewRgbaString"
                     :width="previewWidth"
                     :height="previewHeight" />
-                <div class="d-flex mar-top-2">
+                <div class="footer d-flex mar-top-2">
                     <input
                         class="input input-small text-xsmall flex-grow"
                         type="text"
@@ -44,12 +44,12 @@
                         :value="modelHex"
                         @input="({ target }) => inputHex(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">
+                    <button class="btn btn-outline btn-small" :title="nextModelMode" @click="toggleModelMode">
+                        <span class="text-xsmall text-upper">{{ nextModelMode[0] }}</span>
+                    </button>
+                    <button class="btn btn-outline btn-small" @click="submit" v-if="showSubmit">
                         <i class="mdi mdi-check"></i>
-                    </div>
+                    </button>
                 </div>
                 <cp-colors
                     class="mar-top-2"
@@ -72,6 +72,10 @@
         min-width: 0;
     }
 
+    .footer {
+        gap: var(--spacer2);
+    }
+
     .btn {
         min-height: 0;
         width: 2.25em;
@@ -153,16 +157,28 @@ export default {
         };
     },
     computed: {
+        /**
+         * @return {string}
+         */
         nextModelMode() {
             let { HEX, RGBA } = MODEL_MODE;
-            return (this.modelMode === HEX ? RGBA : HEX)[0];
+            return this.modelMode === HEX ? RGBA : HEX;
         },
+        /**
+         * @return {number}
+         */
         totalWidth() {
             return this.hueHeight + (this.hueWidth + 4) * 2;
         },
+        /**
+         * @return {number}
+         */
         previewWidth() {
             return this.totalWidth;
         },
+        /**
+         * @return {{a: number, r: number, b: number, g: number}}
+         */
         rgba() {
             return {
                 r: this.r,
@@ -171,6 +187,9 @@ export default {
                 a: this.a
             };
         },
+        /**
+         * @return {{s: number, v: number, h: number}}
+         */
         hsv() {
             return {
                 h: this.h,
@@ -178,20 +197,43 @@ export default {
                 v: this.v
             };
         },
+        /**
+         * @return {string}
+         */
         rgbString() {
             return `rgb(${this.r}, ${this.g}, ${this.b})`;
         },
+        /**
+         * @return {string}
+         */
         rgbaStringShort() {
             return `${this.r}, ${this.g}, ${this.b}, ${this.a}`;
         },
+        /**
+         * @return {string}
+         */
         rgbaString() {
             return `rgba(${this.rgbaStringShort})`;
         },
+        /**
+         * @return {string}
+         */
         hexString() {
             return rgb2hex(this.rgba, true);
         },
+        /**
+         * @return {string}
+         */
         previewRgbaString() {
             return this.rgbaString;
+        },
+        /**
+         * @return {string}
+         */
+        modelModeValue() {
+            const { modelMode, modelHex, rgbaString } = this;
+            const { RGBA } = MODEL_MODE;
+            return modelMode === RGBA ? rgbaString : modelHex;
         }
     },
     watch: {
@@ -206,21 +248,13 @@ export default {
             },
             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
-            });
+        modelModeValue() {
+            this.emitDetails('changeColor');
             /**
              * Triggers when the color changes
              * @property {Number} rgbaString color rgba string
              */
-            this.$emit('input', this.rgbaString);
+            this.$emit('input', this.modelModeValue);
         }
     },
     created() {
@@ -230,20 +264,29 @@ export default {
         document.removeEventListener('keydown', this.onDocKeydown);
     },
     methods: {
-        submit() {
+        /**
+         * Triggers when the color changes
+         * @property {Object} color color object
+         */
+        emitDetails(eventName) {
+            const { modelMode, modelModeValue, modelHex, rgba, hsv } = this;
             /**
              * Triggers when the color changes
              * @property {Object} color color object
              */
-            this.$emit('submit', {
-                rgba: this.rgba,
-                hsv: this.hsv,
-                hex: this.modelHex,
-                mode: this.modelMode
+            this.$emit(eventName, {
+                value: modelModeValue,
+                rgba,
+                hsv,
+                hex: modelHex,
+                mode: modelMode
             });
         },
+        submit() {
+            this.emitDetails('submit');
+        },
         toggleModelMode() {
-            let { HEX, RGBA } = MODEL_MODE;
+            const { HEX, RGBA } = MODEL_MODE;
             this.modelMode = this.modelMode === HEX ? RGBA : HEX;
         },
         selectSaturation(color) {

package/src/components/ui/InputColorPicker.vue

@@ -94,7 +94,7 @@
 }
 </style>
 <script>
-import { MODEL_MODE, isValidColorString } from './ColorPicker/utils';
+import { isValidColorString } from './ColorPicker/utils';
 import ColorPicker from './ColorPicker.vue';
 import UiPopover from './Popover.vue';
 import { Key } from './utils/Helpers';
@@ -192,19 +192,10 @@ export default {
         onInputBlur(e) {
             this.rootHasFocus = false;
         },
-        onColorPickerSubmit({ mode, ...profiles }) {
+        onColorPickerSubmit({ value: colorString }) {
             if (this.readonly || this.disabled) {
                 return;
             }
-            const value = profiles[mode];
-            let colorString;
-            if (mode === MODEL_MODE.RGBA) {
-                let { r, g, b, a } = value;
-                colorString = `rgba(${r}, ${g}, ${b}, ${a})`;
-            }
-            if (mode === MODEL_MODE.HEX) {
-                colorString = value;
-            }
             this.inputColor(colorString);
             this.changeColor(colorString);
             this.onColorPickerClose();