@teammodlr/ui-kit 2.3.7 → 2.3.10

package/package.json

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

package/src/components/colorpicker/ColorPicker.vue

@@ -72,15 +72,8 @@
                                 v-model="aInput" name="a" placeholder="A" />
                         </template>
                         <template v-else>
-                            <MInput
-                                @keyup.enter="commitHexInput"
-                                @blur="commitHexInput"
-                                v-model="hexInputUser"
-                                block
-                                ref="hexInputElement"
-                                name="hex"
-                                placeholder="#00000000"
-                            />
+                            <MInput @keyup.enter="commitHexInput" @blur="commitHexInput" v-model="hexInputUser" block
+                                ref="hexInputElement" name="hex" placeholder="#00000000" />
                         </template>
 
                         <MButton icon @click.prevent="rgbOrHex = !rgbOrHex">
@@ -253,13 +246,14 @@ export default defineComponent({
             }
 
             let hex = hexInput.value.replace("#", "");
+            debugger;
             if (hex.length === 3) {
                 hex = hex.split("").map(char => char + char).join("");
             }
             const color = hexToRGB(`#${hex}`);
             if (color.a === 0) {
-                color.a = 1;
-                opacitySlider.value = 100;
+                color.a = 0;
+                opacitySlider.value = 0;
             }
 
             updateFromHSV(RGBToHSV(color.r, color.g, color.b), color.a);
@@ -353,10 +347,26 @@ export default defineComponent({
         };
 
         onMounted(() => {
-            hexInput.value = props.modelValue;
+            const match = props.modelValue.match(/rgba?\s*\(\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*(?:[,\s]\s*([\d.]+%?))?\s*\)/i);
+
+            if (match) {
+                const [_, r, g, b, a] = match;
+                const alpha = a !== undefined
+                    ? a.endsWith('%')
+                        ? parseFloat(a) / 100
+                        : parseFloat(a)
+                    : 1.0;
+
+                hexInput.value = RGBAToHex(parseInt(r), parseInt(g), parseInt(b), alpha);
+
+            } else {
+                hexInput.value = props.modelValue;
+            }
+
             updateFromHex();
         });
 
+
         onClickOutside(popper, (e) => {
             isOpen.value = false;
         });

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

@@ -4,7 +4,7 @@
         <MColorPicker v-model.lazy="colorValue" style="display: inline-block;">
             <template #default="{ r, g, b, hex, transparent }">
                 <div :class="transparent"
-                     style="width: 100px; height: 100px; border: 1px solid black; position: relative; overflow: hidden;">
+                    style="width: 100px; height: 100px; border: 1px solid black; position: relative; overflow: hidden;">
                     <div style="position: absolute; inset: 0" :style="{ backgroundColor: hex }"></div>
                 </div>
             </template>
@@ -16,7 +16,7 @@
 export default {
     data() {
         return {
-            colorValue: '#FFFFFF' // Initial color value
+            colorValue: 'rgba(0,0,0,50%)' // Initial color value
         };
     }
 };

package/src/components/colorpicker/utils.ts

@@ -1,206 +1,205 @@
-export interface Color {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-}
-
-export interface HSV {
-    h: number;
-    s: number;
-    v: number;
-}
-
-export const RGBAToHex = (
-    r: number,
-    g: number,
-    b: number,
-    a: number
-): string => {
-    const hexR: string = r.toString(16).padStart(2, '0');
-    const hexG: string = g.toString(16).padStart(2, '0');
-    const hexB: string = b.toString(16).padStart(2, '0');
-    const hexA: string = Math.round(a * 255)
-        .toString(16)
-        .padStart(2, '0');
-
-    return `#${hexR}${hexG}${hexB}${a >= 1 ? '' : hexA}`;
-};
-
-export const hexToRGB = (
-    hexColor: string,
-    defaultR = 0,
-    defaultG = 0,
-    defaultB = 0,
-    defaultA = 0
-): Color => {
-    hexColor = hexColor.replace('#', '');
-
-    let r = defaultR;
-    let g = defaultG;
-    let b = defaultB;
-    let a = defaultA;
-
-    if (hexColor.length >= 2) {
-        r = parseInt(hexColor.substring(0, 2), 16);
-    }
-
-    if (hexColor.length >= 4) {
-        g = parseInt(hexColor.substring(2, 4), 16);
-    } else {
-        g = 0;
-    }
-
-    if (hexColor.length >= 6) {
-        b = parseInt(hexColor.substring(4, 6), 16);
-    } else {
-        b = 0;
-    }
-
-    if (hexColor.length >= 8) {
-        a = parseInt(hexColor.substring(6, 8), 16) / 255;
-    } else {
-        a = 1;
-    }
-
-    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) {
-        r = 0;
-        b = 0;
-        g = 0;
-        a = 1;
-    }
-
-    return {
-        r,
-        g,
-        b,
-        a
-    };
-};
-
-export const RGBToHSV = (r: number, g: number, b: number): HSV => {
-    const max = Math.max(r, g, b);
-    const min = Math.min(r, g, b);
-
-    const delta = max - min;
-    const brightness = max;
-    let saturation = 0;
-    if (max !== 0) {
-        saturation = delta / max;
-    }
-
-    let hue = 0;
-    if (delta !== 0) {
-        if (max === r) {
-            hue = ((g - b) / delta) % 6;
-        } else if (max === g) {
-            hue = (b - r) / delta + 2;
-        } else {
-            hue = (r - g) / delta + 4;
-        }
-
-        hue *= 60;
-        if (hue < 0) {
-            hue += 360;
-        }
-    }
-
-    return {
-        h: hue,
-        s: saturation,
-        v: brightness / 255
-    };
-};
-
-export const HSVToRGBA = (
-    hue: number,
-    brightness: number,
-    saturation: number,
-    alpha: number
-): Color => {
-    const hueInDegrees = hue;
-    const chroma = brightness * saturation;
-    const hue1 = hueInDegrees / 60;
-    const x = chroma * (1 - Math.abs((hue1 % 2) - 1));
-    let r1 = 0;
-    let g1 = 0;
-    let b1 = 0;
-    if (hue1 >= 0 && hue1 < 1) {
-        r1 = chroma;
-        g1 = x;
-    } else if (hue1 >= 1 && hue1 < 2) {
-        r1 = x;
-        g1 = chroma;
-    } else if (hue1 >= 2 && hue1 < 3) {
-        g1 = chroma;
-        b1 = x;
-    } else if (hue1 >= 3 && hue1 < 4) {
-        g1 = x;
-        b1 = chroma;
-    } else if (hue1 >= 4 && hue1 < 5) {
-        r1 = x;
-        b1 = chroma;
-    } else {
-        r1 = chroma;
-        b1 = x;
-    }
-    const m = brightness - chroma;
-    const r = Math.round((r1 + m) * 255);
-    const g = Math.round((g1 + m) * 255);
-    const b = Math.round((b1 + m) * 255);
-
-    return {
-        r,
-        g,
-        b,
-        a: alpha
-    };
-};
-
-export const HueToRGBA = (hue: number, alpha: number): Color => {
-    const chroma = 1 - Math.abs(2 * 0.5 - 1);
-    const huePrime = (hue / 360) * 6;
-    const intermediateValue = chroma * (1 - Math.abs((huePrime % 2) - 1));
-    let red = 0;
-    let green = 0;
-    let blue = 0;
-
-    if (huePrime >= 0 && huePrime < 1) {
-        red = chroma;
-        green = intermediateValue;
-        blue = 0;
-    } else if (huePrime >= 1 && huePrime < 2) {
-        red = intermediateValue;
-        green = chroma;
-        blue = 0;
-    } else if (huePrime >= 2 && huePrime < 3) {
-        red = 0;
-        green = chroma;
-        blue = intermediateValue;
-    } else if (huePrime >= 3 && huePrime < 4) {
-        red = 0;
-        green = intermediateValue;
-        blue = chroma;
-    } else if (huePrime >= 4 && huePrime < 5) {
-        red = intermediateValue;
-        green = 0;
-        blue = chroma;
-    } else {
-        red = chroma;
-        green = 0;
-        blue = intermediateValue;
-    }
-
-    const lightnessDecimal = 0.5;
-    const lightnessAdjustment = (1 - chroma) * (lightnessDecimal - 0.5);
-    const finalRed = Math.round((red + lightnessAdjustment) * 255);
-    const finalGreen = Math.round((green + lightnessAdjustment) * 255);
-    const finalBlue = Math.round((blue + lightnessAdjustment) * 255);
-
-    return {
-        r: finalRed,
-        g: finalGreen,
-        b: finalBlue,
-        a: alpha
-    };
-};
+export interface Color {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+
+export interface HSV {
+    h: number;
+    s: number;
+    v: number;
+}
+
+export const RGBAToHex = (
+    r: number,
+    g: number,
+    b: number,
+    a: number
+): string => {
+    const hexR = r.toString(16).padStart(2, '0');
+    const hexG = g.toString(16).padStart(2, '0');
+    const hexB = b.toString(16).padStart(2, '0');
+    const hexA = Math.round(a * 255).toString(16).padStart(2, '0');
+
+    return a === 1 ? `#${hexR}${hexG}${hexB}` : `#${hexR}${hexG}${hexB}${hexA}`;
+};
+
+
+export const hexToRGB = (
+    hexColor: string,
+    defaultR = 0,
+    defaultG = 0,
+    defaultB = 0,
+    defaultA = 0
+): Color => {
+    hexColor = hexColor.replace('#', '');
+
+    let r = defaultR;
+    let g = defaultG;
+    let b = defaultB;
+    let a = defaultA;
+
+    if (hexColor.length >= 2) {
+        r = parseInt(hexColor.substring(0, 2), 16);
+    }
+
+    if (hexColor.length >= 4) {
+        g = parseInt(hexColor.substring(2, 4), 16);
+    } else {
+        g = 0;
+    }
+
+    if (hexColor.length >= 6) {
+        b = parseInt(hexColor.substring(4, 6), 16);
+    } else {
+        b = 0;
+    }
+
+    if (hexColor.length >= 8) {
+        a = parseInt(hexColor.substring(6, 8), 16) / 255;
+    } else {
+        a = 1;
+    }
+
+    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) {
+        r = 0;
+        b = 0;
+        g = 0;
+        a = 1;
+    }
+
+    return {
+        r,
+        g,
+        b,
+        a
+    };
+};
+
+export const RGBToHSV = (r: number, g: number, b: number): HSV => {
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+
+    const delta = max - min;
+    const brightness = max;
+    let saturation = 0;
+    if (max !== 0) {
+        saturation = delta / max;
+    }
+
+    let hue = 0;
+    if (delta !== 0) {
+        if (max === r) {
+            hue = ((g - b) / delta) % 6;
+        } else if (max === g) {
+            hue = (b - r) / delta + 2;
+        } else {
+            hue = (r - g) / delta + 4;
+        }
+
+        hue *= 60;
+        if (hue < 0) {
+            hue += 360;
+        }
+    }
+
+    return {
+        h: hue,
+        s: saturation,
+        v: brightness / 255
+    };
+};
+
+export const HSVToRGBA = (
+    hue: number,
+    brightness: number,
+    saturation: number,
+    alpha: number
+): Color => {
+    const hueInDegrees = hue;
+    const chroma = brightness * saturation;
+    const hue1 = hueInDegrees / 60;
+    const x = chroma * (1 - Math.abs((hue1 % 2) - 1));
+    let r1 = 0;
+    let g1 = 0;
+    let b1 = 0;
+    if (hue1 >= 0 && hue1 < 1) {
+        r1 = chroma;
+        g1 = x;
+    } else if (hue1 >= 1 && hue1 < 2) {
+        r1 = x;
+        g1 = chroma;
+    } else if (hue1 >= 2 && hue1 < 3) {
+        g1 = chroma;
+        b1 = x;
+    } else if (hue1 >= 3 && hue1 < 4) {
+        g1 = x;
+        b1 = chroma;
+    } else if (hue1 >= 4 && hue1 < 5) {
+        r1 = x;
+        b1 = chroma;
+    } else {
+        r1 = chroma;
+        b1 = x;
+    }
+    const m = brightness - chroma;
+    const r = Math.round((r1 + m) * 255);
+    const g = Math.round((g1 + m) * 255);
+    const b = Math.round((b1 + m) * 255);
+
+    return {
+        r,
+        g,
+        b,
+        a: alpha
+    };
+};
+
+export const HueToRGBA = (hue: number, alpha: number): Color => {
+    const chroma = 1 - Math.abs(2 * 0.5 - 1);
+    const huePrime = (hue / 360) * 6;
+    const intermediateValue = chroma * (1 - Math.abs((huePrime % 2) - 1));
+    let red = 0;
+    let green = 0;
+    let blue = 0;
+
+    if (huePrime >= 0 && huePrime < 1) {
+        red = chroma;
+        green = intermediateValue;
+        blue = 0;
+    } else if (huePrime >= 1 && huePrime < 2) {
+        red = intermediateValue;
+        green = chroma;
+        blue = 0;
+    } else if (huePrime >= 2 && huePrime < 3) {
+        red = 0;
+        green = chroma;
+        blue = intermediateValue;
+    } else if (huePrime >= 3 && huePrime < 4) {
+        red = 0;
+        green = intermediateValue;
+        blue = chroma;
+    } else if (huePrime >= 4 && huePrime < 5) {
+        red = intermediateValue;
+        green = 0;
+        blue = chroma;
+    } else {
+        red = chroma;
+        green = 0;
+        blue = intermediateValue;
+    }
+
+    const lightnessDecimal = 0.5;
+    const lightnessAdjustment = (1 - chroma) * (lightnessDecimal - 0.5);
+    const finalRed = Math.round((red + lightnessAdjustment) * 255);
+    const finalGreen = Math.round((green + lightnessAdjustment) * 255);
+    const finalBlue = Math.round((blue + lightnessAdjustment) * 255);
+
+    return {
+        r: finalRed,
+        g: finalGreen,
+        b: finalBlue,
+        a: alpha
+    };
+};