@teammodlr/ui-kit 2.1.70 → 2.1.71

package/package.json

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

package/src/components/colorpicker/ColorPicker.vue

@@ -198,7 +198,7 @@ export default defineComponent({
 
         const finalColor = computed(() => {
             if (hexInput.value === "inherit") {
-                return { r: 0, g: 0, b: 0, a: 1 };
+                return { r: 0, g: 0, b: 0, a: 0 };
             }
             return HSVToRGBA(hueSlider.value * 3.6, brightness.value, saturation.value, opacitySlider.value / 100);
         });
@@ -212,11 +212,9 @@ export default defineComponent({
         };
 
         const setInputs = () => {
-            if (hexInput.value === "inherit") {
-                return;
+            if (hexInput.value !== 'inherit') {
+                hexInput.value = RGBAToHex(finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
             }
-
-            hexInput.value = RGBAToHex(finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
             rInput.value = finalColor.value.r.toString();
             gInput.value = finalColor.value.g.toString();
             bInput.value = finalColor.value.b.toString();
@@ -240,10 +238,17 @@ export default defineComponent({
         }
 
         const updateFromHex = () => {
-            if (hexInput.value === "inherit") {
+            if (hexInput.value === 'inherit') {
+                if (modelModifiers.lazy) {
+                    emitModelValue();
+                }
                 return;
             }
             const color = hexToRGB(hexInput.value);
+            if (color.a === 0) {
+                color.a = 1;
+                opacitySlider.value = 100;
+            }
             updateFromHSV(RGBToHSV(color.r, color.g, color.b), color.a);
             if (modelModifiers.lazy) {
                 emitModelValue();
@@ -281,7 +286,11 @@ export default defineComponent({
             }
 
             updateFromHSV(RGBToHSV(red, green, blue), alpha);
-            if (modelModifiers.lazy) {
+
+            if (hexInput.value === 'inherit') {
+                hexInput.value = RGBAToHex(red, green, blue, alpha);
+                emitModelValue();
+            } else if (modelModifiers.lazy) {
                 emitModelValue();
             }
         };
@@ -321,6 +330,10 @@ export default defineComponent({
         };
 
         const handleMouseDown = () => {
+            if (hexInput.value === 'inherit') {
+                hexInput.value = RGBAToHex(finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
+                emitModelValue();
+            }
             dragging.value = true;
             setThumbPosition();
         };
@@ -338,7 +351,7 @@ export default defineComponent({
         watch(() => eyeDropColor.value, () => {
             if (eyeDropColor.value) {
                 hexInput.value = eyeDropColor.value;
-                emit('update:modelValue', eyeDropColor.value);
+                emitModelValue();
                 updateFromHex();
             }
         });