goodteditor-ui 1.0.76 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.76",
+    "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();

package/src/components/ui/Select.vue

@@ -108,7 +108,32 @@
                 </template>
                 <template #option="{ option, index, cursorIndex }">
                     <!--
-                    @slot Label slot for single mode
+                    @slot before option slot
+                    @binding {Object} option             option
+                    @binding {any} value                 option's value
+                    @binding {String} label              option's label
+                    @binding {Number} index              option's index
+                    @binding {Boolean} isSelected        option selection status
+                    @binding {Number} cursorIndex        current cursor index
+                    @binding {Function} selectOption     function that selects option
+                    @binding {Function} deselectOption   function that deselects option
+                    @binding {Function} toggleOption     function that toggles option selection
+                    -->
+                    <slot
+                        name="option:before"
+                        v-bind="{
+                            option,
+                            value: getOptionValue(option),
+                            label: getOptionLabel(option),
+                            index,
+                            cursorIndex,
+                            isSelected: isOptionSelected(option),
+                            selectOption,
+                            deselectOption,
+                            toggleOption
+                        }"></slot>
+                    <!--
+                    @slot option slot mode
                     @binding {Object} option             option
                     @binding {any} value                 option's value
                     @binding {String} label              option's label
@@ -168,7 +193,7 @@
                             </div>
                             <div class="text-truncate" style="min-height: calc(var(--line-height) * 1rem)" v-else>
                                 <!--
-                                @slot select option label slot
+                                @slot option content slot
                                 -->
                                 <slot
                                     name="option-label"
@@ -185,6 +210,31 @@
                             </div>
                         </li>
                     </slot>
+                    <!--
+                    @slot after option slot
+                    @binding {Object} option             option
+                    @binding {any} value                 option's value
+                    @binding {String} label              option's label
+                    @binding {Number} index              option's index
+                    @binding {Boolean} isSelected        option selection status
+                    @binding {Number} cursorIndex        current cursor index
+                    @binding {Function} selectOption     function that selects option
+                    @binding {Function} deselectOption   function that deselects option
+                    @binding {Function} toggleOption     function that toggles option selection
+                    -->
+                    <slot
+                        name="option:after"
+                        v-bind="{
+                            option,
+                            value: getOptionValue(option),
+                            label: getOptionLabel(option),
+                            index,
+                            isSelected: isOptionSelected(option),
+                            cursorIndex,
+                            selectOption,
+                            deselectOption,
+                            toggleOption
+                        }"></slot>
                 </template>
                 <template #footer>
                     <!--
@@ -348,7 +398,9 @@ export default {
         importModel(model) {
             const { options, isValueOfOption } = this;
             const models = [model].flat();
-            const optionsSelected = options.filter((option) => models.some((modelItem) => isValueOfOption(option, modelItem)));
+            const optionsSelected = options.filter((option) =>
+                models.some((modelItem) => isValueOfOption(option, modelItem))
+            );
             if (optionsSelected.length > 0) {
                 this.dataListCursorIndex = this.getOptionIndex(optionsSelected[0]);
                 this.optionsSelected = this.multiple ? optionsSelected : [optionsSelected[0]];