goodteditor-ui 1.0.77 → 1.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.77",
+    "version": "1.0.79",
     "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/Datalist.vue

@@ -19,16 +19,20 @@
                     option,
                     index,
                     cursorIndex,
-                    setCursorIndex,
-                }"
-            >
-                <li
-                    :class="{ active: index == cursorIndex }"
-                    :key="index"
-                    @click="onOptionClick(option, index)"
-                >
+                    setCursorIndex
+                }">
+                <li :class="{ active: index == cursorIndex }" :key="index" @click="onOptionClick(option, index)">
                     <div class="text-truncate" style="min-height: calc(var(--line-height) * 1rem)">
-                        {{ option }}
+                        <slot
+                            name="option-label"
+                            v-bind="{
+                                option,
+                                index,
+                                cursorIndex,
+                                setCursorIndex
+                            }">
+                            {{ option }}
+                        </slot>
                     </div>
                 </li>
             </slot>
@@ -42,9 +46,11 @@
 <style lang="less" scoped>
 .dropdown {
     outline: none;
+
     ul {
         scroll-behavior: smooth;
     }
+
     &.no-scroll-animation {
         ul {
             scroll-behavior: auto;
@@ -64,7 +70,7 @@ export default {
             type: Array,
             default() {
                 return [];
-            },
+            }
         },
         /**
          * Defines the size of the component
@@ -75,22 +81,22 @@ export default {
             default: '',
             validator: function (value) {
                 return ['', 'small', 'large'].indexOf(value) >= 0;
-            },
+            }
         },
         /**
          * Defines the max-height of the dropdown list (value may be any css unit/expression)
          */
         maxHeight: {
             type: String,
-            default: '',
+            default: ''
         },
         /**
          * The current cursor index position (.sync)
          */
         cursorIndex: {
             type: Number,
-            default: -1,
-        },
+            default: -1
+        }
     },
     data() {
         return { useScrollAnimation: true };
@@ -102,7 +108,7 @@ export default {
             size && o.push(`dropdown-${this.size}`);
             !useScrollAnimation && o.push('no-scroll-animation');
             return o;
-        },
+        }
     },
     watch: {
         cursorIndex: {
@@ -114,8 +120,8 @@ export default {
                     this.useScrollAnimation = true;
                 });
             },
-            immediate: true,
-        },
+            immediate: true
+        }
     },
     methods: {
         onOptionClick(option, index) {
@@ -158,7 +164,7 @@ export default {
                  */
                 this.$emit('select-option', { option, index: this.cursorIndex });
             }
-        },
-    },
+        }
+    }
 };
 </script>

package/src/components/ui/InputAutocomplete.vue

@@ -4,8 +4,7 @@
         :class="cssClass"
         @focus="onRootFocus"
         tabindex="0"
-        :data-popover="popoverTargetId"
-    >
+        :data-popover="popoverTargetId">
         <div style="flex: 1 0 0">
             <!-- 
             @slot Custom input slot
@@ -21,8 +20,7 @@
                     type="text"
                     :value="value"
                     v-bind="inputBinds"
-                    v-on="inputEvents"
-                />
+                    v-on="inputEvents" />
             </slot>
         </div>
         <!-- 
@@ -39,8 +37,7 @@
                 @select-option="onDatalistSelectOption"
                 v-bind="{ size, maxHeight: dropdownMaxHeight, options: suggestedOptions }"
                 :cursorIndex.sync="dataListCursorIndex"
-                ref="datalist"
-            >
+                ref="datalist">
                 <template #header>
                     <!-- 
                     @slot Dropdown header content
@@ -71,9 +68,31 @@
                             valueLocal: delimitedValue,
                             cursorIndex,
                             selectOption,
-                            setCursorIndex,
-                        }"
-                    ></slot>
+                            setCursorIndex
+                        }"></slot>
+                </template>
+                <template #option-label="{ option, index, cursorIndex, setCursorIndex }">
+                    <!--
+                    @slot Dropdown option label
+                    @binding {String} option         option label
+                    @binding {Number} optionIndex    option index
+                    @binding {String} value          current value
+                    @binding {String} valueLocal     current delimited value
+                    @binding {Number} cursorIndex    current dropdown selection index
+                    @binding {Function} selectOption    function that select's the option
+                    @binding {Function} setCursorIndex  function that sets the cursor index
+                    -->
+                    <slot
+                        name="option-label"
+                        v-bind="{
+                            option: option,
+                            optionIndex: index,
+                            value,
+                            valueLocal: delimitedValue,
+                            cursorIndex,
+                            selectOption,
+                            setCursorIndex
+                        }"></slot>
                 </template>
                 <template #footer>
                     <slot name="dropdown-footer"></slot>
@@ -84,11 +103,7 @@
         @slot Custom clear btn slot
         @binding {Function} clear   function that clears the value
         -->
-        <slot
-            name="clear-btn"
-            v-if="useClearBtn && value.length > 0"
-            v-bind="{ clear: clearValue }"
-        >
+        <slot name="clear-btn" v-if="useClearBtn && value.length > 0" v-bind="{ clear: clearValue }">
             <i class="mdi mdi-close cursor-pointer" @click="clearValue"></i>
         </slot>
     </div>
@@ -97,6 +112,7 @@
 .ui-input-autocomplete {
     display: inline-flex;
     align-items: center;
+
     &-input {
         border: none;
         line-height: 1.5;
@@ -126,63 +142,63 @@ export default {
             type: Array,
             default() {
                 return [];
-            },
+            }
         },
         /**
          * Function which filters suggestions function(val, options):Promise<Array>
          */
         filter: {
             type: Function,
-            default: null,
+            default: null
         },
         /**
          * Filter debounce delay in ms
          */
         filterDebounce: {
             type: Number,
-            default: 0,
+            default: 0
         },
         /**
          * Value delimiter for multiple autocomplete suggestions
          */
         delimiter: {
             type: String,
-            default: ',',
+            default: ','
         },
         /**
          * Show suggestions on focus event
          */
         suggestOnFocus: {
             type: Boolean,
-            default: true,
+            default: true
         },
         /**
          * Min length to show suggestions
          */
         minLength: {
             type: Number,
-            default: 0,
+            default: 0
         },
         /**
          * Defines the dropdown's max-height
          */
         dropdownMaxHeight: {
-            default: '',
+            default: ''
         },
         /**
          * Auto width
          */
         autoWidth: {
             type: Boolean,
-            default: true,
+            default: true
         },
         /**
          * Clear data btn
          */
         useClearBtn: {
             type: Boolean,
-            default: false,
-        },
+            default: false
+        }
     },
     data() {
         return {
@@ -193,16 +209,16 @@ export default {
             filterTID: null,
             inputBinds: {
                 placeholder: this.placeholder,
-                readonly: this.readonly,
+                readonly: this.readonly
             },
             inputEvents: {
                 change: this.onInputChange,
                 input: this.onInputInput,
                 keydown: this.onInputKeyDown,
                 focus: this.onInputFocus,
-                blur: this.onInputBlur,
+                blur: this.onInputBlur
             },
-            delimitedValuePrev: null,
+            delimitedValuePrev: null
         };
     },
     computed: {
@@ -220,7 +236,7 @@ export default {
                 return this.value.split(this.delimiter)[this.delimitedIndex];
             }
             return this.value;
-        },
+        }
     },
     methods: {
         clearValue() {
@@ -231,8 +247,8 @@ export default {
             this.suggestedOptions = [];
         },
         defaultFilter(val, options) {
-            return new Promise(resolve => {
-                let arr = options.filter(opt => opt.toLowerCase().indexOf(val.toLowerCase()) === 0);
+            return new Promise((resolve) => {
+                let arr = options.filter((opt) => opt.toLowerCase().indexOf(val.toLowerCase()) === 0);
                 resolve(arr);
             });
         },
@@ -250,7 +266,7 @@ export default {
             this.loading = true;
             let h = this.filter ? this.filter : this.defaultFilter;
             h(val, this.options)
-                .then(arr => {
+                .then((arr) => {
                     this.suggestedOptions = arr;
                     this.dataListCursorIndex = -1;
                 })
@@ -368,7 +384,7 @@ export default {
         },
         onDatalistSelectOption({ option }) {
             this.selectOption(option);
-        },
-    },
+        }
+    }
 };
 </script>

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();