@teammodlr/ui-kit 2.0.24 → 2.0.27

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

@@ -1,17 +1,17 @@
-import MColorPicker from "../ColorPicker.vue";
-import {
-    MColorBasic,
-} from "./index";
-
-import {
-    createStory
-} from "../../../__storybook__";
-
-export default {
-    component: MColorPicker,
-    title: 'Components/Color Picker',
-    argTypes: {       
-    }
-}
-
-export const Basic = createStory(MColorBasic);
+import MColorPicker from "../ColorPicker.vue";
+import {
+    MColorBasic,
+} from "./index";
+
+import {
+    createStory
+} from "../../../__storybook__";
+
+export default {
+    component: MColorPicker,
+    title: 'Components/Color Picker',
+    argTypes: {       
+    }
+}
+
+export const Basic = createStory(MColorBasic);

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

@@ -1,117 +1,117 @@
-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',
-});
-
-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"
-});
-
-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',
+});
+
+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"
+});
+
+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,188 +1,188 @@
-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: number = 0, defaultG: number = 0, defaultB: number = 0, defaultA: number = 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: r,
-        g: g,
-        b: b,
-        a: a
-    };
-};
-
-export const RGBToHSV = (r: number, g: number, b: number): HSV => {
-    var max = Math.max(r, g, b);
-    var min = Math.min(r, g, b);
-
-    var delta = max - min;
-    var brightness = max;
-    var saturation = 0;
-    if (max !== 0) {
-        saturation = delta / max;
-    }
-
-    var 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: r,
-        g: g,
-        b: 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: number = 0, defaultG: number = 0, defaultB: number = 0, defaultA: number = 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: r,
+        g: g,
+        b: b,
+        a: a
+    };
+};
+
+export const RGBToHSV = (r: number, g: number, b: number): HSV => {
+    var max = Math.max(r, g, b);
+    var min = Math.min(r, g, b);
+
+    var delta = max - min;
+    var brightness = max;
+    var saturation = 0;
+    if (max !== 0) {
+        saturation = delta / max;
+    }
+
+    var 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: r,
+        g: g,
+        b: 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,
+    };
 }