@teammodlr/ui-kit 2.1.41 → 2.1.44

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

@@ -1,3 +1,3 @@
-<template>
-    <MColorPicker />
+<template>
+    <MColorPicker />
 </template>

package/src/components/colorpicker/examples/index.ts

@@ -1 +1 @@
-export { default as MColorBasic } from './basic.vue';
+export { default as MColorBasic } from './basic.vue';

package/src/components/colorpicker/style/ColorPicker.css.ts

@@ -1,127 +1,127 @@
-import {
-    createVar,
-    globalKeyframes,
-    globalStyle,
-    style,
-    styleVariants
-} from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-export const container = style({
-    display: 'flex',
-    flexDirection: 'column',
-    width: '280px',
-    alignItems: 'center',
-    gap: '10px',
-    userSelect: 'none',
-    zIndex: 100,
-    backgroundColor: '#FFF',
-    borderRadius: '5px',
-    padding: themeVars.space[3],
-    border: `1px solid ${themeVars.color.gray[200]}`,
-    boxShadow: themeVars.shadow.md
-});
-export const sliderThumb = style({
-    transform: 'translate(-50%, -50%)',
-    position: 'absolute',
-    width: '14px',
-    height: '14px',
-    borderRadius: '50%',
-    backgroundColor: 'transparent',
-    border: '2px solid white',
-    boxShadow: themeVars.shadow.sm,
-    cursor: 'crosshair',
-    userSelect: 'none'
-});
-
-export const eyeDrop = style({
-    backgroundColor: 'transparent',
-    outline: 'none',
-    border: 0,
-    color: themeVars.color.gray[600],
-    width: '32px',
-    height: '32px',
-    borderRadius: themeVars.rounded.default,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    cursor: 'pointer',
-    selectors: {
-        '&:hover': {
-            backgroundColor: themeVars.color.gray[100],
-            color: themeVars.color.gray[700]
-        }
-    }
-});
-
-export const preview = style({
-    backgroundImage:
-        'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
-    backgroundSize: '12px 12px',
-    backgroundPosition: '0 0, 0 6px, 6px -6px, -6px 0px',
-    overflow: 'hidden',
-    minWidth: '32px',
-    minHeight: '32px',
-    width: '32px',
-    height: '32px',
-    borderRadius: '100%',
-    border: `1px solid ${themeVars.color.gray[200]}`
-});
-
-export const colours = style({
-    position: 'relative',
-    height: '160px',
-    width: '100%',
-    cursor: 'crosshair'
-});
-
-export const reference = style({
-    backgroundImage:
-        'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
-    backgroundSize: '12px 12px',
-    backgroundPosition: '0 0, 0 6px, 6px -6px, -6px 0px',
-    overflow: 'hidden',
-    minWidth: '28px',
-    minHeight: '28px',
-    width: '28px',
-    height: '28px',
-    borderRadius: themeVars.rounded.default,
-    position: 'relative',
-    cursor: 'pointer',
-    userSelect: 'none'
-});
-
-export const referenceColor = style({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-});
-
-export const colorActions = style({
-    display: 'flex',
-    gap: themeVars.space[2],
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-});
-
-export const whiteGradient = style({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    background: 'linear-gradient(90deg, #FFF, rgba(255, 255, 255, 0))'
-});
-
-export const blackGradient = style({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    background: 'linear-gradient(0deg, #000, transparent)'
-});
+import {
+    createVar,
+    globalKeyframes,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const container = style({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '280px',
+    alignItems: 'center',
+    gap: '10px',
+    userSelect: 'none',
+    zIndex: 100,
+    backgroundColor: '#FFF',
+    borderRadius: '5px',
+    padding: themeVars.space[3],
+    border: `1px solid ${themeVars.color.gray[200]}`,
+    boxShadow: themeVars.shadow.md
+});
+export const sliderThumb = style({
+    transform: 'translate(-50%, -50%)',
+    position: 'absolute',
+    width: '14px',
+    height: '14px',
+    borderRadius: '50%',
+    backgroundColor: 'transparent',
+    border: '2px solid white',
+    boxShadow: themeVars.shadow.sm,
+    cursor: 'crosshair',
+    userSelect: 'none'
+});
+
+export const eyeDrop = style({
+    backgroundColor: 'transparent',
+    outline: 'none',
+    border: 0,
+    color: themeVars.color.gray[600],
+    width: '32px',
+    height: '32px',
+    borderRadius: themeVars.rounded.default,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    cursor: 'pointer',
+    selectors: {
+        '&:hover': {
+            backgroundColor: themeVars.color.gray[100],
+            color: themeVars.color.gray[700]
+        }
+    }
+});
+
+export const preview = style({
+    backgroundImage:
+        'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
+    backgroundSize: '12px 12px',
+    backgroundPosition: '0 0, 0 6px, 6px -6px, -6px 0px',
+    overflow: 'hidden',
+    minWidth: '32px',
+    minHeight: '32px',
+    width: '32px',
+    height: '32px',
+    borderRadius: '100%',
+    border: `1px solid ${themeVars.color.gray[200]}`
+});
+
+export const colours = style({
+    position: 'relative',
+    height: '160px',
+    width: '100%',
+    cursor: 'crosshair'
+});
+
+export const reference = style({
+    backgroundImage:
+        'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
+    backgroundSize: '12px 12px',
+    backgroundPosition: '0 0, 0 6px, 6px -6px, -6px 0px',
+    overflow: 'hidden',
+    minWidth: '28px',
+    minHeight: '28px',
+    width: '28px',
+    height: '28px',
+    borderRadius: themeVars.rounded.default,
+    position: 'relative',
+    cursor: 'pointer',
+    userSelect: 'none'
+});
+
+export const referenceColor = style({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+});
+
+export const colorActions = style({
+    display: 'flex',
+    gap: themeVars.space[2],
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+});
+
+export const whiteGradient = style({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: 'linear-gradient(90deg, #FFF, rgba(255, 255, 255, 0))'
+});
+
+export const blackGradient = style({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: 'linear-gradient(0deg, #000, transparent)'
+});

package/src/components/colorpicker/style/index.ts

@@ -1 +1 @@
-export * from './ColorPicker.css';
+export * from './ColorPicker.css';

package/src/components/colorpicker/utils.ts

@@ -1,206 +1,206 @@
-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: 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
+    };
+};