@teammodlr/ui-kit 2.3.9 → 2.3.12

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

@@ -1,23 +1,23 @@
-<template>
-    <div>
-        <p>Selected Color: {{ colorValue }}</p>
-        <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;">
-                    <div style="position: absolute; inset: 0" :style="{ backgroundColor: hex }"></div>
-                </div>
-            </template>
-        </MColorPicker>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            colorValue: 'rgba(255 0 0 50%)' // Initial color value
-        };
-    }
-};
-</script>
+<template>
+    <div>
+        <p>Selected Color: {{ colorValue }}</p>
+        <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;">
+                    <div style="position: absolute; inset: 0" :style="{ backgroundColor: hex }"></div>
+                </div>
+            </template>
+        </MColorPicker>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            colorValue: 'rgba(0,0,0,50%)' // Initial color value
+        };
+    }
+};
+</script>

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
+    };
+};

package/src/components/select/Select.vue

@@ -671,6 +671,10 @@ export default defineComponent({
                     search.value = '';
                 }
 
+                if (value) {
+                    zIndex.value = nextZIndex();
+                }
+
                 if (props.searchable && searchRef.value) {
                     searchRef.value.focus();
                 }