@teammodlr/ui-kit 2.1.67 → 2.1.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.1.67",
+  "version": "2.1.68",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/colorpicker/ColorPicker.vue

@@ -1,38 +1,39 @@
 <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">
+            <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})` }">
+                        :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">
+                :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});`">
+                        :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>
+                            :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">
+                                @click="openEyeDropper">
                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
-                                     xmlns="http://www.w3.org/2000/svg">
+                                    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"/>
+                                        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"/>
+                                        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>
@@ -44,12 +45,12 @@
                             </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 v-model="hueSlider" @change="onSliderChangeComplete"
+                                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 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>
@@ -57,26 +58,26 @@
                     <div :class="style.colorActions">
                         <template v-if="rgbOrHex">
                             <MInput @keyup.enter="updateFromRGB" @blur="updateFromRGB" block ref="rInputElement"
-                                    v-model="rInput" name="r" placeholder="R"/>
+                                v-model="rInput" name="r" placeholder="R" />
                             <MInput @keyup.enter="updateFromRGB" @blur="updateFromRGB" block ref="gInputElement"
-                                    v-model="gInput" name="g" placeholder="G"/>
+                                v-model="gInput" name="g" placeholder="G" />
                             <MInput @keyup.enter="updateFromRGB" @blur="updateFromRGB" block ref="bInputElement"
-                                    v-model="bInput" name="b" placeholder="B"/>
+                                v-model="bInput" name="b" placeholder="B" />
                             <MInput @keyup.enter="updateFromRGB" @blur="updateFromRGB" block ref="aInputElement"
-                                    v-model="aInput" name="a" placeholder="A"/>
+                                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"/>
+                                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">
+                                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"/>
+                                    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>
@@ -88,14 +89,14 @@
 </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 { 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 { 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";
@@ -107,6 +108,10 @@ export default defineComponent({
             type: String,
             default: "#FFFFFF"
         },
+        modelModifiers: {
+            type: Object,
+            default: () => ({})
+        },
         transfer: {
             type: Boolean,
             default: false
@@ -129,9 +134,10 @@ export default defineComponent({
         MInput,
         MButton
     },
-    setup(props, {emit}) {
-        const {isSupported: canPickColor, open: openEyeDrop, sRGBHex: eyeDropColor} = useEyeDropper();
-        const {nextZIndex} = useZIndex();
+    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("");
@@ -139,6 +145,7 @@ export default defineComponent({
         const gInput = ref("");
         const bInput = ref("");
         const aInput = ref("");
+        const internalValue = ref(props.modelValue);
 
         const picker = ref<HTMLElement>();
         const wrapper = ref<HTMLElement>();
@@ -155,9 +162,9 @@ export default defineComponent({
         });
         const zIndex = ref(props.zIndex ?? nextZIndex());
 
-        const {elementX, elementY} = useMouseInElement(picker);
-        const {pressed} = useMousePressed();
-        const {popper, transferTo, updatePopper} = usePopper({
+        const { elementX, elementY } = useMouseInElement(picker);
+        const { pressed } = useMousePressed();
+        const { popper, transferTo, updatePopper } = usePopper({
             reference: referenceRef,
             placement,
             transfer,
@@ -181,6 +188,10 @@ export default defineComponent({
             return HueToRGBA(hueSlider.value * 3.6, opacitySlider.value / 100);
         });
 
+        const emitModelValue = () => {
+            emit('update:modelValue', hexInput.value);
+        };
+
         const setInputs = () => {
             hexInput.value = RGBAToHex(finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
             rInput.value = finalColor.value.r.toString();
@@ -188,7 +199,9 @@ export default defineComponent({
             bInput.value = finalColor.value.b.toString();
             aInput.value = finalColor.value.a.toFixed(2).toString();
 
-            emit('update:modelValue', hexInput.value);
+            if (!modelModifiers.lazy) {
+                emitModelValue();
+            }
         };
 
         watch(() => finalColor.value, () => {
@@ -206,6 +219,9 @@ export default defineComponent({
         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);
+            if (modelModifiers.lazy) {
+                emitModelValue();
+            }
         }
 
         const updateFromRGB = () => {
@@ -230,6 +246,9 @@ export default defineComponent({
             }
 
             updateFromHSV(RGBToHSV(red, green, blue), alpha);
+            if (modelModifiers.lazy) {
+                emitModelValue();
+            }
         };
 
         watch(() => pressed.value, () => {
@@ -238,6 +257,12 @@ export default defineComponent({
             }
         });
 
+        watch(() => dragging.value, (newVal, oldVal) => {
+            if (oldVal && !newVal && modelModifiers.lazy) {
+                emitModelValue();
+            }
+        });
+
         watch(() => [elementX.value, elementY.value], () => {
             if (!dragging.value) {
                 return;
@@ -246,18 +271,13 @@ export default defineComponent({
             setThumbPosition();
         });
 
-        const setDefaultColor = () => {
-            hexInput.value
-        }
-
-        watch(() => props.modelValue, (newValue) => {
+        watch(() => props.modelValue, () => {
             let val = props.modelValue;
-            if (!newValue || newValue.trim() === "") {
-                val = props.defaultColor || "#FFFFFF"
+            if (!val || val.trim() === "") {
+                val = props.defaultColor ?? "#FFFFFF"
             }
             hexInput.value = val;
             updateFromHex();
-
         });
 
         const setThumbPosition = () => {
@@ -292,6 +312,12 @@ export default defineComponent({
             }
         }
 
+        const onSliderChangeComplete = () => {
+            if (modelModifiers.lazy) {
+                emitModelValue();
+            }
+        }
+
         return {
             isOpen,
             popper,
@@ -323,7 +349,8 @@ export default defineComponent({
             zIndex,
             canPickColor,
             openEyeDropper,
-            scale
+            scale,
+            onSliderChangeComplete
         };
     }
 })

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

@@ -1,12 +1,23 @@
 <template>
-    <MColorPicker style="display: inline-block;">
-        <template #default="{r,g,b,hex, transparent}">
-            <div :class="transparent"
-                 style="width: 100px; height: 100px; border: 1px solid black; position: relative; overflow: hidden;">
-                <div style="position: absolute; inset: 0" :style="{backgroundColor: `${hex}`}">
-
+    <div>
+        <p>Selected Color: {{ colorValue }}</p>
+        <MColorPicker v-model.lazy="colorValue" style="display: inline-block;">
+            <template #default="{ r, g, b, hex, transparent }">
+                <div :class="transparent"
+                     style="width: 100px; height: 100px; border: 1px solid black; position: relative; overflow: hidden;">
+                    <div style="position: absolute; inset: 0" :style="{ backgroundColor: hex }"></div>
                 </div>
-            </div>
-        </template>
-    </MColorPicker>
+            </template>
+        </MColorPicker>
+    </div>
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            colorValue: '#FFFFFF' // Initial color value
+        };
+    }
+};
+</script>

package/src/components/slider/Slider.vue

@@ -1,76 +1,111 @@
-<template>
-    <div :class="style.slider">
-        <div :class="style.sliderTransparent">
-            <div ref="slider" @mousedown="handleMouseDown" :class="style.sliderBar" :style="{ background: background }">
-            </div>
-        </div>
-        
-        <div style="position: absolute; inset: 0px 9px;"  @mousedown="handleMouseDown">
-            <div draggable :class="style.hueSliderThumb" @mousedown="handleMouseDown" :style="{ left: `${modelValue}%` }"></div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { watch } from "vue";
-import { defineComponent, ref } from 'vue';
-import * as style from './style';
-import { useMouseInElement, useMousePressed } from '@vueuse/core';
-
-export default defineComponent({
-    name: "MSlider",
-    props: {
-        modelValue: {
-            type: Number,
-            required: true
-        },
-        background: {
-            type: String,
-            default: ""
-        }
-    },
-    components: {},
-    emits: ['update:modelValue'],
-    setup(props, { emit }) {
-        const slider = ref<HTMLElement>();
-
-        const { elementX } = useMouseInElement(slider);
-        const { pressed } = useMousePressed();
-
-        watch(() => pressed.value, () => {
-            if (!pressed.value) {
-                dragging.value = false;
-            }
-        });
-
-        watch(() => elementX.value, () => {
-            if (!dragging.value) {
-                return;
-            }
-
-            setThumbPosition();
-        });
-
-
-        const dragging = ref(false);
-
-        const setThumbPosition = () => {
-            emit('update:modelValue',  ((Math.min(Math.max(elementX.value, 0), slider.value?.clientWidth || 0) / (slider.value?.clientWidth || 0)) * 100));
-        };
-
-        const handleMouseDown = () => {
-            dragging.value = true;
-            setThumbPosition();
-        };
-
-        return {
-            setThumbPosition,
-            elementX,
-            pressed,
-            handleMouseDown,
-            slider,
-            style,
-        };
-    }
-})
-</script>
+<template>
+    <div :class="style.slider">
+        <div :class="style.sliderTransparent">
+            <div ref="slider" :class="style.sliderBar" :style="{ background: background }" @mousedown="handleMouseDown"
+                @touchstart.prevent="handleMouseDown">
+            </div>
+        </div>
+
+        <div style="position: absolute; inset: 0px 9px;" @mousedown="handleMouseDown"
+            @touchstart.prevent="handleMouseDown">
+            <div :class="style.hueSliderThumb" :style="{ left: `${modelValue}%` }"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
+import * as style from './style';
+
+export default defineComponent({
+    name: 'MSlider',
+    props: {
+        modelValue: {
+            type: Number,
+            required: true,
+        },
+        background: {
+            type: String,
+            default: '',
+        },
+    },
+    emits: ['update:modelValue', 'change'],
+    setup(props, { emit }) {
+        const slider = ref<HTMLElement | null>(null);
+        const dragging = ref(false);
+
+        const handleMouseDown = (event: MouseEvent | TouchEvent) => {
+            dragging.value = true;
+            setThumbPosition(event);
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+            document.addEventListener('touchmove', onTouchMove);
+            document.addEventListener('touchend', onTouchEnd);
+        };
+
+        const onMouseMove = (event: MouseEvent) => {
+            if (dragging.value) {
+                setThumbPosition(event);
+            }
+        };
+
+        const onMouseUp = () => {
+            if (dragging.value) {
+                dragging.value = false;
+                removeEventListeners();
+                emit('change', props.modelValue);
+            }
+        };
+
+        const onTouchMove = (event: TouchEvent) => {
+            if (dragging.value) {
+                setThumbPosition(event);
+            }
+        };
+
+        const onTouchEnd = () => {
+            if (dragging.value) {
+                dragging.value = false;
+                removeEventListeners();
+                emit('change', props.modelValue);
+            }
+        };
+
+        const setThumbPosition = (event: MouseEvent | TouchEvent) => {
+            const rect = slider.value?.getBoundingClientRect();
+            if (!rect) return;
+
+            let clientX;
+            if (event instanceof MouseEvent) {
+                clientX = event.clientX;
+            } else if (event instanceof TouchEvent) {
+                clientX = event.touches[0].clientX;
+            } else {
+                return;
+            }
+
+            const position = Math.min(Math.max(clientX - rect.left, 0), rect.width);
+            const value = (position / rect.width) * 100;
+            emit('update:modelValue', value);
+        };
+
+        const removeEventListeners = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            document.removeEventListener('touchmove', onTouchMove);
+            document.removeEventListener('touchend', onTouchEnd);
+        };
+
+        onUnmounted(() => {
+            removeEventListeners();
+        });
+
+        return {
+            handleMouseDown,
+            slider,
+            style,
+        };
+    },
+});
+</script>