@teammodlr/ui-kit 1.0.7 → 2.0.0

package/src/components/colorpicker/ColorPicker.vue

@@ -0,0 +1,283 @@
+<template>
+    <div ref="wrapper">
+        <div ref="referenceRef"
+             @click="isOpen = !isOpen"
+             :class="style.reference"
+        >
+            <div :class="style.referenceColor"
+                 :style="{ backgroundColor: `rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, ${finalColor.a})` }">
+            </div>
+        </div>
+        <Teleport to="body">
+            <div :class="style.container" v-if="isOpen" ref="popper" :style="{zIndex: zIndex}">
+                <div ref="picker" @mousedown="handleMouseDown" :class="style.colours"
+                     :style="`background: rgb(${mainColor.r}, ${mainColor.g}, ${mainColor.b});` ">
+                    <div :class="style.whiteGradient"></div>
+                    <div :class="style.blackGradient"></div>
+                    <div draggable="true" :class="style.sliderThumb" @mousedown="handleMouseDown"
+                         :style="{ left: `${position.x * 100}%`, top: `${position.y * 100}%` }"></div>
+                </div>
+
+                <div :class="style.colorActions">
+                    <div :class="style.preview">
+                        <div
+                                :style="`width: 100%; height: 100%; background-color: rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, ${finalColor.a});`">
+                        </div>
+                    </div>
+                    <div style="width: 100%; display: flex; flex-direction: column; gap: 10px;">
+                        <MSlider v-model="hueSlider"
+                                 background="linear-gradient(to right, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000)">
+                        </MSlider>
+
+                        <MSlider v-model="opacitySlider"
+                                 :background="`linear-gradient(to right, rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, 0), rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, 1))`">
+                        </MSlider>
+                    </div>
+                </div>
+
+                <div
+                        :class="style.colorActions">
+                    <template v-if="rgbOrHex">
+                        <MInput @keyup.enter="updateFromRGB" @blur="updateFromRGB" block ref="rInputElement"
+                                v-model="rInput"
+                                name="r" placeholder="R"/>
+                        <MInput @keyup.enter="updateFromRGB" @blur="updateFromRGB" block ref="gInputElement"
+                                v-model="gInput"
+                                name="g" placeholder="G"/>
+                        <MInput @keyup.enter="updateFromRGB" @blur="updateFromRGB" block ref="bInputElement"
+                                v-model="bInput"
+                                name="b" placeholder="B"/>
+                        <MInput @keyup.enter="updateFromRGB" @blur="updateFromRGB" block ref="aInputElement"
+                                v-model="aInput"
+                                name="a" placeholder="A"/>
+                    </template>
+                    <template v-else>
+                        <MInput @keyup.enter="updateFromHex" @blur="updateFromHex" block
+                                ref="hexInputElement"
+                                v-model="hexInput" name="hex" placeholder="#00000000"/>
+                    </template>
+
+                    <MButton icon @click.prevent="rgbOrHex = !rgbOrHex">
+                        <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                             fill="currentColor" class="w-5 h-5">
+                            <path fill-rule="evenodd"
+                                  d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+                                  clip-rule="evenodd"/>
+                        </svg>
+                    </MButton>
+                </div>
+            </div>
+        </Teleport>
+    </div>
+</template>
+
+<script lang="ts">
+import {onClickOutside, useMouseInElement, useMousePressed} from '@vueuse/core';
+import {computed, defineComponent, onMounted, type PropType, reactive, ref, toRef, watch} from "vue";
+import * as style from './style';
+import {hexToRGB, type HSV, HSVToRGBA, HueToRGBA, RGBAToHex, RGBToHSV} from './utils';
+import {usePopper} from "../../composables/usePopper";
+import type {Placement} from "@popperjs/core";
+import {useZIndex} from "../../composables/useZIndex";
+import {MButton, MInput} from "../../components";
+import MSlider from "../../components/slider/Slider.vue";
+
+export default defineComponent({
+    name: "MColorPicker",
+    props: {
+        modelValue: {
+            type: String,
+            default: "#FF00FF"
+        },
+        transfer: {
+            type: Boolean,
+            default: false
+        },
+        placement: {
+            type: String as PropType<Placement>,
+            default: "bottom-start"
+        },
+        zIndex: {
+            type: Number
+        }
+    },
+    emits: ['update:modelValue'],
+    components: {
+        MSlider,
+        MInput,
+        MButton
+    },
+    setup(props, {emit}) {
+        const {nextZIndex} = useZIndex();
+        const isOpen = ref(false);
+        const rgbOrHex = ref<boolean>(false);
+        const hexInput = ref("");
+        const rInput = ref("");
+        const gInput = ref("");
+        const bInput = ref("");
+        const aInput = ref("");
+
+        const picker = ref<HTMLElement>();
+        const wrapper = ref<HTMLElement>();
+        const referenceRef = ref<HTMLElement>();
+        const transfer = toRef(props, 'transfer');
+        const placement = toRef(props, 'placement');
+        const hexInputElement = ref();
+        const hueSlider = ref(0);
+        const opacitySlider = ref(100);
+        const dragging = ref(false);
+        const position = reactive({
+            x: 0,
+            y: 0
+        });
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+
+        const {elementX, elementY} = useMouseInElement(picker);
+        const {pressed} = useMousePressed();
+        const {popper, transferTo, updatePopper} = usePopper({
+            reference: referenceRef,
+            placement,
+            transfer,
+            wrapper,
+            isDrop: false,
+            offset: [-2, 2]
+        });
+        const brightness = computed(() => {
+            return 1 - position.y;
+        })
+
+        const saturation = computed(() => {
+            return position.x;
+        })
+
+        const finalColor = computed(() => {
+            return HSVToRGBA(hueSlider.value * 3.6, brightness.value, saturation.value, opacitySlider.value / 100);
+        });
+
+        const mainColor = computed(() => {
+            return HueToRGBA(hueSlider.value * 3.6, opacitySlider.value / 100);
+        });
+
+        const setInputs = () => {
+            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();
+            aInput.value = finalColor.value.a.toFixed(2).toString();
+
+            emit('update:modelValue', hexInput.value);
+        };
+
+        watch(() => finalColor.value, () => {
+            setInputs();
+        });
+
+        const updateFromHSV = (hsv: HSV, alpha: number) => {
+            position.x = hsv.s;
+            position.y = 1 - hsv.v;
+            hueSlider.value = ((1 / 360) * hsv.h) * 100;
+            opacitySlider.value = alpha * 100;
+            setInputs();
+        }
+
+        const updateFromHex = () => {
+            var color = hexToRGB(hexInput.value, finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
+            updateFromHSV(RGBToHSV(color.r, color.g, color.b), color.a);
+        }
+
+        const updateFromRGB = () => {
+            var red = parseInt(rInput.value);
+            if (isNaN(red) || red > 255 || red < 0) {
+                red = finalColor.value.r;
+            }
+
+            var green = parseInt(gInput.value);
+            if (isNaN(green) || green > 255 || green < 0) {
+                green = finalColor.value.g;
+            }
+
+            var blue = parseInt(bInput.value);
+            if (isNaN(blue) || blue > 255 || blue < 0) {
+                blue = finalColor.value.b;
+            }
+
+            var alpha = parseFloat(aInput.value);
+            if (isNaN(alpha) || alpha > 1 || alpha < 0) {
+                alpha = finalColor.value.a;
+            }
+
+            updateFromHSV(RGBToHSV(red, green, blue), alpha);
+        };
+
+        watch(() => pressed.value, () => {
+            if (!pressed.value) {
+                dragging.value = false;
+            }
+        });
+
+        watch(() => [elementX.value, elementY.value], () => {
+            if (!dragging.value) {
+                return;
+            }
+
+            setThumbPosition();
+        });
+
+        watch(() => props.modelValue, () => {
+            hexInput.value = props.modelValue;
+            updateFromHex();
+            console.log('hi');
+        });
+
+        const setThumbPosition = () => {
+            position.x = ((Math.min(Math.max(elementX.value, 0), picker.value?.clientWidth || 0) / (picker.value?.clientWidth || 0)));
+            position.y = ((Math.min(Math.max(elementY.value, 0), picker.value?.clientHeight || 0) / (picker.value?.clientHeight || 0)));
+        };
+
+        const handleMouseDown = () => {
+            dragging.value = true;
+            setThumbPosition();
+        };
+
+        onMounted(() => {
+            hexInput.value = props.modelValue;
+            updateFromHex();
+        });
+
+        onClickOutside(popper, (e) => {
+            isOpen.value = false;
+        });
+
+        return {
+            isOpen,
+            popper,
+            transferTo,
+            wrapper,
+            referenceRef,
+            updateFromRGB,
+            updateFromHex,
+            setInputs,
+            rgbOrHex,
+            hexInputElement,
+            hexInput,
+            rInput,
+            gInput,
+            bInput,
+            aInput,
+            finalColor,
+            hueSlider,
+            opacitySlider,
+            dragging,
+            setThumbPosition,
+            position,
+            elementX,
+            pressed,
+            handleMouseDown,
+            picker,
+            style,
+            mainColor,
+            zIndex
+        };
+    }
+})
+</script>

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

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

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

@@ -0,0 +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);

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

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

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

@@ -0,0 +1,97 @@
+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 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: '16px 16px',
+    backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 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: '16px 16px',
+    backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
+    overflow: 'hidden',
+    minWidth: '28px',
+    minHeight: '28px',
+    width: '28px',
+    height: '28px',
+    borderRadius: '5px',
+    border: `1px solid ${themeVars.color.gray[200]}`,
+    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

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

package/src/components/colorpicker/utils.ts

@@ -0,0 +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,
+    };
+}