@teammodlr/ui-kit 2.3.6 → 2.3.9

package/src/components/colorpicker/ColorPicker.vue

@@ -1,438 +1,450 @@
-<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>
-                    <template v-if="modelValue === 'inherit'">
-                        <div :style="{ border: '1px dashed #999', padding: '8px', textAlign: 'center' }">Inherit</div>
-                    </template>
-                    <template v-else>
-                        <!-- Regular color display -->
-                        <div :class="style.referenceColor"
-                            :style="{ backgroundColor: `rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, ${finalColor.a})` }">
-                        </div>
-                    </template>
-                </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">
-                            <MButton icon :disabled="!canPickColor" :class="style.eyeDrop" @click="openEyeDropper">
-                                <svg width="18" height="18" 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>
-                            </MButton>
-                        </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" @change="onSliderChangeComplete"
-                                background="linear-gradient(to right, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000)">
-                            </MSlider>
-
-                            <MSlider v-model="opacitySlider" @change="onSliderChangeComplete"
-                                :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="commitHexInput"
-                                @blur="commitHexInput"
-                                v-model="hexInputUser"
-                                block
-                                ref="hexInputElement"
-                                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>
-                        <MButton icon @click.prevent="toggleInherit">
-                            <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" width="24"
-                                height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-                                stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M21 6H3" />
-                                <path d="M7 12H3" />
-                                <path d="M7 18H3" />
-                                <path d="M12 18a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L11 14" />
-                                <path d="M11 10v4h4" />
-                            </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"
-        },
-        modelModifiers: {
-            type: Object,
-            default: () => ({})
-        },
-        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 modelModifiers = props.modelModifiers;
-        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 internalValue = ref(props.modelValue);
-
-        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(() => {
-            if (hexInput.value === "inherit") {
-                return { r: 0, g: 0, b: 0, a: 0 };
-            }
-            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 emitModelValue = () => {
-            emit('update:modelValue', hexInput.value);
-        };
-
-        const setInputs = () => {
-            if (hexInput.value !== 'inherit') {
-                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();
-
-            if (!modelModifiers.lazy) {
-                emitModelValue();
-            }
-        };
-
-        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 = () => {
-            if (hexInput.value === 'inherit') {
-                if (modelModifiers.lazy) {
-                    emitModelValue();
-                }
-                return;
-            }
-            const color = hexToRGB(hexInput.value);
-            if (color.a === 0) {
-                color.a = 1;
-                opacitySlider.value = 100;
-            }
-            updateFromHSV(RGBToHSV(color.r, color.g, color.b), color.a);
-            if (modelModifiers.lazy) {
-                emitModelValue();
-            }
-        };
-
-        const toggleInherit = () => {
-            if (props.modelValue === "inherit") {
-                hexInput.value = "#FFFFFF";
-            } else {
-                hexInput.value = "inherit";
-            }
-            emitModelValue();
-        };
-
-        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);
-
-            if (hexInput.value === 'inherit') {
-                hexInput.value = RGBAToHex(red, green, blue, alpha);
-                emitModelValue();
-            } else if (modelModifiers.lazy) {
-                emitModelValue();
-            }
-        };
-
-        watch(() => pressed.value, () => {
-            if (!pressed.value) {
-                dragging.value = false;
-            }
-        });
-
-        watch(() => dragging.value, (newVal, oldVal) => {
-            if (oldVal && !newVal && modelModifiers.lazy) {
-                emitModelValue();
-            }
-        });
-
-        watch(() => [elementX.value, elementY.value], () => {
-            if (!dragging.value) {
-                return;
-            }
-
-            setThumbPosition();
-        });
-
-        watch(() => props.modelValue, () => {
-            let val = props.modelValue;
-            if (!val || val.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 = () => {
-            if (hexInput.value === 'inherit') {
-                hexInput.value = RGBAToHex(finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
-                emitModelValue();
-            }
-            dragging.value = true;
-            setThumbPosition();
-        };
-
-        onMounted(() => {
-            hexInput.value = props.modelValue;
-            updateFromHex();
-        });
-
-        onClickOutside(popper, (e) => {
-            isOpen.value = false;
-        });
-
-
-        watch(() => eyeDropColor.value, () => {
-            if (eyeDropColor.value) {
-                hexInput.value = eyeDropColor.value;
-                emitModelValue();
-                updateFromHex();
-            }
-        });
-
-        const openEyeDropper = () => {
-            try {
-                openEyeDrop();
-            } catch (e) {
-                console.log(e);
-            }
-        }
-
-        const onSliderChangeComplete = () => {
-            if (modelModifiers.lazy) {
-                emitModelValue();
-            }
-        }
-
-        const hexInputUser = ref(hexInput.value);
-
-        watch(hexInput, (newVal) => {
-            if (document.activeElement !== hexInputElement.value?.$el?.querySelector('input')) {
-                hexInputUser.value = newVal;
-            }
-        });
-
-        const commitHexInput = () => {
-            if (hexInputUser.value.trim() === '') {
-                hexInputUser.value = hexInput.value;
-                return;
-            }
-
-            hexInput.value = hexInputUser.value;
-            updateFromHex();
-        };
-
-
-        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,
-            onSliderChangeComplete,
-            hexInputUser,
-            toggleInherit,
-            commitHexInput
-        };
-    }
-})
-</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>
+                    <template v-if="modelValue === 'inherit'">
+                        <div :style="{ border: '1px dashed #999', padding: '8px', textAlign: 'center' }">Inherit</div>
+                    </template>
+                    <template v-else>
+                        <!-- Regular color display -->
+                        <div :class="style.referenceColor"
+                            :style="{ backgroundColor: `rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, ${finalColor.a})` }">
+                        </div>
+                    </template>
+                </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">
+                            <MButton icon :disabled="!canPickColor" :class="style.eyeDrop" @click="openEyeDropper">
+                                <svg width="18" height="18" 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>
+                            </MButton>
+                        </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" @change="onSliderChangeComplete"
+                                background="linear-gradient(to right, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000)">
+                            </MSlider>
+
+                            <MSlider v-model="opacitySlider" @change="onSliderChangeComplete"
+                                :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="commitHexInput" @blur="commitHexInput" v-model="hexInputUser" block
+                                ref="hexInputElement" 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>
+                        <MButton icon @click.prevent="toggleInherit">
+                            <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" width="24"
+                                height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M21 6H3" />
+                                <path d="M7 12H3" />
+                                <path d="M7 18H3" />
+                                <path d="M12 18a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L11 14" />
+                                <path d="M11 10v4h4" />
+                            </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"
+        },
+        modelModifiers: {
+            type: Object,
+            default: () => ({})
+        },
+        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 modelModifiers = props.modelModifiers;
+        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 internalValue = ref(props.modelValue);
+
+        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(() => {
+            if (hexInput.value === "inherit") {
+                return { r: 0, g: 0, b: 0, a: 0 };
+            }
+            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 emitModelValue = () => {
+            emit('update:modelValue', hexInput.value);
+        };
+
+        const setInputs = () => {
+            if (hexInput.value !== 'inherit') {
+                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();
+
+            if (!modelModifiers.lazy) {
+                emitModelValue();
+            }
+        };
+
+        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 = () => {
+            if (hexInput.value === 'inherit') {
+                if (modelModifiers.lazy) {
+                    emitModelValue();
+                }
+                return;
+            }
+
+            let hex = hexInput.value.replace("#", "");
+            if (hex.length === 3) {
+                hex = hex.split("").map(char => char + char).join("");
+            }
+            const color = hexToRGB(`#${hex}`);
+            if (color.a === 0) {
+                color.a = 1;
+                opacitySlider.value = 100;
+            }
+
+            updateFromHSV(RGBToHSV(color.r, color.g, color.b), color.a);
+            if (modelModifiers.lazy) {
+                emitModelValue();
+            }
+        };
+
+
+        const toggleInherit = () => {
+            if (props.modelValue === "inherit") {
+                hexInput.value = "#FFFFFF";
+            } else {
+                hexInput.value = "inherit";
+            }
+            emitModelValue();
+        };
+
+        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);
+
+            if (hexInput.value === 'inherit') {
+                hexInput.value = RGBAToHex(red, green, blue, alpha);
+                emitModelValue();
+            } else if (modelModifiers.lazy) {
+                emitModelValue();
+            }
+        };
+
+        watch(() => pressed.value, () => {
+            if (!pressed.value) {
+                dragging.value = false;
+            }
+        });
+
+        watch(() => dragging.value, (newVal, oldVal) => {
+            if (oldVal && !newVal && modelModifiers.lazy) {
+                emitModelValue();
+            }
+        });
+
+        watch(() => [elementX.value, elementY.value], () => {
+            if (!dragging.value) {
+                return;
+            }
+
+            setThumbPosition();
+        });
+
+        watch(() => props.modelValue, () => {
+            let val = props.modelValue;
+            if (!val || val.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 = () => {
+            if (hexInput.value === 'inherit') {
+                hexInput.value = RGBAToHex(finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
+                emitModelValue();
+            }
+            dragging.value = true;
+            setThumbPosition();
+        };
+
+        onMounted(() => {
+            const match = props.modelValue.match(/rgba?\s*\(\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*(?:[,\s]\s*([\d.]+%?))?\s*\)/i);
+
+            if (match) {
+                const [_, r, g, b, a] = match;
+                hexInput.value = RGBAToHex(parseInt(r), parseInt(g), parseInt(b), a
+                    ? a.endsWith('%')
+                        ? parseFloat(a) / 100
+                        : parseFloat(a)
+                    : 1.0);
+            } else {
+                hexInput.value = props.modelValue;
+            }
+
+            updateFromHex();
+        });
+
+        onClickOutside(popper, (e) => {
+            isOpen.value = false;
+        });
+
+
+        watch(() => eyeDropColor.value, () => {
+            if (eyeDropColor.value) {
+                hexInput.value = eyeDropColor.value;
+                emitModelValue();
+                updateFromHex();
+            }
+        });
+
+        const openEyeDropper = () => {
+            try {
+                openEyeDrop();
+            } catch (e) {
+                console.log(e);
+            }
+        }
+
+        const onSliderChangeComplete = () => {
+            if (modelModifiers.lazy) {
+                emitModelValue();
+            }
+        }
+
+        const hexInputUser = ref(hexInput.value);
+
+        watch(hexInput, (newVal) => {
+            if (document.activeElement !== hexInputElement.value?.$el?.querySelector('input')) {
+                hexInputUser.value = newVal;
+            }
+        });
+
+        const commitHexInput = () => {
+            if (hexInputUser.value.trim() === '') {
+                hexInputUser.value = hexInput.value;
+                return;
+            }
+
+            hexInput.value = hexInputUser.value;
+            updateFromHex();
+        };
+
+
+        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,
+            onSliderChangeComplete,
+            hexInputUser,
+            toggleInherit,
+            commitHexInput
+        };
+    }
+})
+</script>