@teammodlr/ui-kit 2.3.14 → 2.3.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.3.14",
+  "version": "2.3.16",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/colorpicker/ColorPicker.vue

@@ -212,10 +212,9 @@ export default defineComponent({
 
         const emitModelValue = () => {
             emit('update:modelValue', hexInput.value);
-            emit('onColorChange', hexInput.value);
         };
 
-        const setInputs = () => {
+        const setInputs = (shouldEmit: boolean = true) => {
             if (hexInput.value !== 'inherit') {
                 hexInput.value = RGBAToHex(finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
             }
@@ -224,13 +223,13 @@ export default defineComponent({
             bInput.value = finalColor.value.b.toString();
             aInput.value = finalColor.value.a.toFixed(2).toString();
 
-            if (!modelModifiers.lazy) {
+            if (shouldEmit && !modelModifiers.lazy) {
                 emitModelValue();
             }
         };
 
         watch(() => finalColor.value, () => {
-            setInputs();
+            setInputs(false);
         });
 
         watch(() => props.color, (newColor) => {
@@ -240,24 +239,23 @@ export default defineComponent({
             }
         });
 
-        const updateFromHSV = (hsv: HSV, alpha: number) => {
+        const updateFromHSV = (hsv: HSV, alpha: number, shouldEmit: boolean = true) => {
             position.x = hsv.s;
             position.y = 1 - hsv.v;
             hueSlider.value = ((1 / 360) * hsv.h) * 100;
             opacitySlider.value = alpha * 100;
-            setInputs();
+            setInputs(shouldEmit);
         }
 
-        const updateFromHex = () => {
+        const updateFromHex = (shouldEmit = true) => {
             if (hexInput.value === 'inherit') {
-                if (modelModifiers.lazy) {
+                if (shouldEmit && modelModifiers.lazy) {
                     emitModelValue();
                 }
                 return;
             }
 
             let hex = hexInput.value.replace("#", "");
-            debugger;
             if (hex.length === 3) {
                 hex = hex.split("").map(char => char + char).join("");
             }
@@ -267,8 +265,8 @@ export default defineComponent({
                 opacitySlider.value = 0;
             }
 
-            updateFromHSV(RGBToHSV(color.r, color.g, color.b), color.a);
-            if (modelModifiers.lazy) {
+            updateFromHSV(RGBToHSV(color.r, color.g, color.b), color.a, shouldEmit);
+            if (shouldEmit && modelModifiers.lazy) {
                 emitModelValue();
             }
         };
@@ -340,7 +338,7 @@ export default defineComponent({
                 val = props.defaultColor ?? "#FFFFFF";
             }
             hexInput.value = val;
-            updateFromHex();
+            updateFromHex(false);
         });
 
         const setThumbPosition = () => {
@@ -374,12 +372,13 @@ export default defineComponent({
                 hexInput.value = props.color || props.modelValue;
             }
 
-            updateFromHex();
+            updateFromHex(false);
         });
 
 
         onClickOutside(popper, (e) => {
             isOpen.value = false;
+            emit('onColorChange', hexInput.value);
         });
 
 

package/src/components/colorpicker/examples/basic.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <p>Selected Color: {{ colorValue }}</p>
-        <MColorPicker v-model.lazy="colorValue" style="display: inline-block;">
+        <MColorPicker color="#FF0000" style="display: inline-block;" @on-color-change="updateColor">
             <template #default="{ r, g, b, hex, transparent }">
                 <div :class="transparent"
                     style="width: 100px; height: 100px; border: 1px solid black; position: relative; overflow: hidden;">
@@ -18,6 +18,16 @@ export default {
         return {
             colorValue: 'rgba(0,0,0,50%)' // Initial color value
         };
+    },
+    setup() {
+        const updateColor = (color) => {
+            console.log(color);
+            debugger;
+        }
+
+        return {
+            updateColor
+        }
     }
 };
 </script>