@teammodlr/ui-kit 2.1.63 → 2.1.65

package/src/components/colorpicker/ColorPicker.vue

@@ -1,333 +1,330 @@
-<template>
-    <div ref="wrapper" class="m-color-picker">
-        <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">
-            <transition
-                :enter-active-class="scale.enterActive"
-                :leave-active-class="scale.leaveActive"
-                :enter-from-class="scale.enterFrom"
-                :leave-to-class="scale.leaveTo"
-            >
-                <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 :class="style.sliderThumb" @mousedown="handleMouseDown" @dragover.prevent=""
-                            :style="{ left: `${position.x * 100}%`, top: `${position.y * 100}%` }"></div>
-                    </div>
-
-                    <div :class="style.colorActions">
-                        <template v-if="canPickColor">
-                            <button role="button" :disabled="!canPickColor" :class="style.eyeDrop" @click="openEyeDropper">
-                                <svg
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path
-                                            d="M20.3847 2.87868C19.2132 1.70711 17.3137 1.70711 16.1421 2.87868L14.0202 5.00052L13.313 4.29332C12.9225 3.9028 12.2894 3.9028 11.8988 4.29332C11.5083 4.68385 11.5083 5.31701 11.8988 5.70754L17.5557 11.3644C17.9462 11.7549 18.5794 11.7549 18.9699 11.3644C19.3604 10.9739 19.3604 10.3407 18.9699 9.95018L18.2629 9.24316L20.3847 7.12132C21.5563 5.94975 21.5563 4.05025 20.3847 2.87868Z"
-                                            fill="currentColor"
-                                    />
-                                    <path
-                                            fill-rule="evenodd"
-                                            clip-rule="evenodd"
-                                            d="M11.9297 7.09116L4.1515 14.8693C3.22786 15.793 3.03239 17.169 3.5651 18.2842L1.99994 19.8493L3.41415 21.2635L4.97931 19.6984C6.09444 20.2311 7.4705 20.0356 8.39414 19.112L16.1723 11.3338L11.9297 7.09116ZM13.3439 11.3338L11.9297 9.91959L5.56571 16.2835C5.17518 16.6741 5.17518 17.3072 5.56571 17.6978C5.95623 18.0883 6.5894 18.0883 6.97992 17.6978L13.3439 11.3338Z"
-                                            fill="currentColor"
-                                    />
-                                </svg>
-                            </button>
-                        </template>
-                        <template v-else>
-                            <div :class="style.preview">
-                                <div
-                                        :style="`width: 100%; height: 100%; background-color: rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, ${finalColor.a});`">
-                                </div>
-                            </div>
-                        </template>
-                        <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>
-            </transition>
-        </Teleport>
-    </div>
-</template>
-
-<script lang="ts">
-import {onClickOutside, useEyeDropper, useMouseInElement, useMousePressed} from '@vueuse/core';
-import {computed, defineComponent, onMounted, type PropType, reactive, ref, toRef, watch} from "vue";
-import * as style from './style';
-import { scale } from "../../styles/transitions.css";
-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 MSlider from "../../components/slider/Slider.vue";
-import MButton from "../../components/button/Button.vue";
-import MInput from "../../components/input/Input.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 {isSupported: canPickColor, open: openEyeDrop, sRGBHex: eyeDropColor} = useEyeDropper();
-        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;
-        });
-
-        watch(() => eyeDropColor.value, () => {
-            hexInput.value = eyeDropColor.value;
-            updateFromHex();
-        });
-
-        const openEyeDropper = () => {
-            try {
-                openEyeDrop();
-            } catch (e) {
-                console.log(e);
-            }
-        }
-
-        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,
-            canPickColor,
-            openEyeDropper,
-            scale
-        };
-    }
-})
-</script>
+<template>
+    <div ref="wrapper" class="m-color-picker">
+        <div ref="referenceRef" @click="isOpen = !isOpen">
+            <slot :r="finalColor.r" :g="finalColor.g" :b="finalColor.b" :a="finalColor.a" :hex="hexInput" :transparent="style.transparent">
+                <div>
+                    <div :class="style.referenceColor"
+                         :style="{ backgroundColor: `rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, ${finalColor.a})` }">
+                    </div>
+                </div>
+            </slot>
+        </div>
+        <Teleport to="body">
+            <transition :enter-active-class="scale.enterActive" :leave-active-class="scale.leaveActive"
+                        :enter-from-class="scale.enterFrom" :leave-to-class="scale.leaveTo">
+                <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 :class="style.sliderThumb" @mousedown="handleMouseDown" @dragover.prevent=""
+                             :style="{ left: `${position.x * 100}%`, top: `${position.y * 100}%` }"></div>
+                    </div>
+
+                    <div :class="style.colorActions">
+                        <template v-if="canPickColor">
+                            <button role="button" :disabled="!canPickColor" :class="style.eyeDrop"
+                                    @click="openEyeDropper">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                                     xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M20.3847 2.87868C19.2132 1.70711 17.3137 1.70711 16.1421 2.87868L14.0202 5.00052L13.313 4.29332C12.9225 3.9028 12.2894 3.9028 11.8988 4.29332C11.5083 4.68385 11.5083 5.31701 11.8988 5.70754L17.5557 11.3644C17.9462 11.7549 18.5794 11.7549 18.9699 11.3644C19.3604 10.9739 19.3604 10.3407 18.9699 9.95018L18.2629 9.24316L20.3847 7.12132C21.5563 5.94975 21.5563 4.05025 20.3847 2.87868Z"
+                                        fill="currentColor"/>
+                                    <path fill-rule="evenodd" clip-rule="evenodd"
+                                          d="M11.9297 7.09116L4.1515 14.8693C3.22786 15.793 3.03239 17.169 3.5651 18.2842L1.99994 19.8493L3.41415 21.2635L4.97931 19.6984C6.09444 20.2311 7.4705 20.0356 8.39414 19.112L16.1723 11.3338L11.9297 7.09116ZM13.3439 11.3338L11.9297 9.91959L5.56571 16.2835C5.17518 16.6741 5.17518 17.3072 5.56571 17.6978C5.95623 18.0883 6.5894 18.0883 6.97992 17.6978L13.3439 11.3338Z"
+                                          fill="currentColor"/>
+                                </svg>
+                            </button>
+                        </template>
+                        <template v-else>
+                            <div :class="style.preview">
+                                <div
+                                    :style="`width: 100%; height: 100%; background-color: rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, ${finalColor.a});`">
+                                </div>
+                            </div>
+                        </template>
+                        <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>
+            </transition>
+        </Teleport>
+    </div>
+</template>
+
+<script lang="ts">
+import {onClickOutside, useEyeDropper, useMouseInElement, useMousePressed} from '@vueuse/core';
+import {computed, defineComponent, onMounted, type PropType, reactive, ref, toRef, watch} from "vue";
+import * as style from './style';
+import {scale} from "../../styles/transitions.css";
+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 MSlider from "../../components/slider/Slider.vue";
+import MButton from "../../components/button/Button.vue";
+import MInput from "../../components/input/Input.vue";
+
+export default defineComponent({
+    name: "MColorPicker",
+    props: {
+        modelValue: {
+            type: String,
+            default: "#FFFFFF"
+        },
+        transfer: {
+            type: Boolean,
+            default: false
+        },
+        placement: {
+            type: String as PropType<Placement>,
+            default: "bottom-start"
+        },
+        zIndex: {
+            type: Number
+        },
+        defaultColor: {
+            type: String,
+            default: "#FFFFFF"
+        }
+    },
+    emits: ['update:modelValue'],
+    components: {
+        MSlider,
+        MInput,
+        MButton
+    },
+    setup(props, {emit}) {
+        const {isSupported: canPickColor, open: openEyeDrop, sRGBHex: eyeDropColor} = useEyeDropper();
+        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 = () => {
+            let 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 = () => {
+            let red = parseInt(rInput.value);
+            if (isNaN(red) || red > 255 || red < 0) {
+                red = finalColor.value.r;
+            }
+
+            let green = parseInt(gInput.value);
+            if (isNaN(green) || green > 255 || green < 0) {
+                green = finalColor.value.g;
+            }
+
+            let blue = parseInt(bInput.value);
+            if (isNaN(blue) || blue > 255 || blue < 0) {
+                blue = finalColor.value.b;
+            }
+
+            let 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();
+        });
+
+        const setDefaultColor = () => {
+            hexInput.value
+        }
+
+        watch(() => props.modelValue, (newValue) => {
+            let val = props.modelValue;
+            if (!newValue || newValue.trim() === "") {
+                val = props.defaultColor || "#FFFFFF"
+            }
+            hexInput.value = val;
+            updateFromHex();
+
+        });
+
+        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;
+        });
+
+        watch(() => eyeDropColor.value, () => {
+            hexInput.value = eyeDropColor.value;
+            updateFromHex();
+        });
+
+        const openEyeDropper = () => {
+            try {
+                openEyeDrop();
+            } catch (e) {
+                console.log(e);
+            }
+        }
+
+        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,
+            canPickColor,
+            openEyeDropper,
+            scale
+        };
+    }
+})
+</script>