@teammodlr/ui-kit 2.1.65 → 2.1.68

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/dialog/Dialog.vue

@@ -1,118 +1,180 @@
-<template>
-    <Teleport to="body">
-        <div :class="style.root">
-            <div :class="backdropClasses">
-            </div>
-            <div ref="wrapper" :class="style.wrapper">
-                <div ref="dialog" :class="style.dialog" :style="{
-                    // top: y + 'px',
-                    // left: x + 'px',
-                    zIndex: zIndex,
-                    width: width
-                }">
-                    <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
-                    <div :class="style.content">
-                        <button role="button" :class="style.close">x</button>
-                        <div :class="style.header" ref="handle">
-                            <div :class="style.title">
-                                <slot name="title">
-                                    Title
-                                </slot>
-                            </div>
-                        </div>
-                        <div>
-                            <slot></slot>
-                        </div>
-                        <div :class="style.footer">
-                            <slot name="footer"></slot>
-                        </div>
-                    </div>
-                    <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
-                </div>
-            </div>
-        </div>
-
-    </Teleport>
-</template>
-<script lang="ts">
-import {computed, defineComponent, type PropType, ref} from "vue";
-import {useZIndex} from "../../composables/useZIndex";
-import {useDraggable} from "@vueuse/core";
-import * as style from "./style";
-
-export default defineComponent({
-    name: "Dialog",
-    props: {
-        title: {
-            type: String,
-            default: ""
-        },
-        draggable: {
-            type: Boolean,
-            default: true
-        },
-        backdrop: {
-            type: Boolean,
-            default: false,
-        },
-        onClose: {
-            type: Function as PropType<() => void>,
-            default: () => {
-            }
-        },
-        zIndex: {
-            type: Number
-        },
-        width: {
-            type: [Number, String],
-            default: "500px"
-        },
-        transformOrigin: {
-            type: String as PropType<'center' | 'mouse'>,
-            default: 'mouse'
-        },
-        focusTrap: {
-            type: Boolean,
-            default: true
-        }
-    },
-    emits: ['onOpen', 'onClose'],
-    setup(props, {slots}) {
-        const wrapper = ref<HTMLElement | null>(null);
-        const dialog = ref<HTMLElement | null>(null);
-        const handle = ref<HTMLElement | null>(null);
-        const {x, y} = useDraggable(dialog, {
-            handle: handle,
-            preventDefault: true,
-            // containerElement: wrapper,
-        });
-        const {nextZIndex} = useZIndex();
-
-        const backdropClasses = computed(() => {
-            return {
-                [style.backdrop]: true,
-                [style.backdropColor]: props.backdrop === true
-            }
-        });
-
-        const width = computed(() => {
-            return typeof props.width === "number" ? props.width + "px" : props.width;
-        });
-
-        const zIndex = ref(props.zIndex ?? nextZIndex());
-        return {
-            slots,
-            wrapper,
-            dialog,
-            handle,
-            zIndex,
-            width,
-            x,
-            y,
-            style,
-            backdropClasses,
-            nextZIndex
-        };
-    }
-});
-</script>
+<template>
+    <Teleport to="body">
+        <TransitionGroup
+            type="animation"
+            :enter-active-class="fade.enterActive"
+            :leave-active-class="fade.leaveActive"
+            :enter-from-class="fade.enterFrom"
+            :leave-to-class="fade.leaveTo">
+            <div :class="style.root" v-if="open">
+                <div :class="backdropClasses" v-if="modal"></div>
+                <div ref="wrapper" :class="wrapperClasses">
+                    <Transition
+                        type="animation"
+                        :enter-active-class="modalScale.enterActive"
+                        :leave-active-class="modalScale.leaveActive"
+                        :enter-from-class="modalScale.enterFrom"
+                        :leave-to-class="modalScale.leaveTo"
+                        @enter="onEnter"
+                    >
+                        <div ref="dialog" :style="computedStyle">
+                            <div tabindex="0" aria-hidden="true"
+                                 style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
+                            <slot v-if="$slots.container" name="container" :close="close"></slot>
+                            <template v-else>
+                                <div :class="style.content">
+                                    <button role="button" :class="style.close" @click="close"></button>
+                                    <div :class="style.header" ref="handle">
+                                        <div :class="style.title">
+                                            <slot name="title">
+                                                {{ title }}
+                                            </slot>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <slot></slot>
+                                    </div>
+                                    <div v-if="$slots.footer" :class="style.footer">
+                                        <slot name="footer"></slot>
+                                    </div>
+                                </div>
+                            </template>
+                            <div tabindex="0" aria-hidden="true"
+                                 style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
+                        </div>
+                    </Transition>
+                </div>
+            </div>
+        </TransitionGroup>
+    </Teleport>
+</template>
+
+<script lang="ts">
+import { fade, modalScale } from '../../styles/transitions.css';
+import {computed, defineComponent, ref, watch, nextTick, type CSSProperties} from "vue";
+import type { ComputedRef } from "vue";
+
+import { useZIndex } from "../../composables/useZIndex";
+import { useDraggable } from "@vueuse/core";
+import * as style from "./style";
+
+export default defineComponent({
+    name: "Dialog",
+    props: {
+        title: {
+            type: String,
+            default: ""
+        },
+        draggable: {
+            type: Boolean,
+            default: true
+        },
+        modal: {
+            type: Boolean,
+            default: false,
+        },
+        onClose: {
+            type: Function,
+            default: () => {}
+        },
+        zIndex: {
+            type: Number
+        },
+        width: {
+            type: [Number, String],
+            default: "500px"
+        },
+        focusTrap: {
+            type: Boolean,
+            default: true
+        },
+        open: {
+            type: Boolean
+        }
+    },
+    emits: ['onOpen', 'onClose', 'update:open'],
+    setup(props, { slots, emit }) {
+        const wrapper = ref<HTMLElement | null>(null);
+        const dialog = ref<HTMLElement | null>(null);
+        const handle = ref<HTMLElement | null>(null);
+        const { nextZIndex } = useZIndex();
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+
+        const { x, y } = useDraggable(dialog, {
+            handle,
+            preventDefault: true,
+            containerElement: wrapper,
+            disabled: computed(() => !props.draggable),
+            onStart: onDragStart,
+        });
+
+        const backdropClasses = computed(() => ({
+            [style.backdrop]: true,
+            [style.backdropColor]: props.modal === true,
+        }));
+
+        const wrapperClasses = computed(() => ({
+            [style.wrapper]: true,
+            [style.notModal]: !props.modal,
+        }));
+
+        const width = computed(() => (
+            typeof props.width === "number" ? `${props.width}px` : props.width
+        ));
+
+        const computedStyle: ComputedRef<CSSProperties> = computed(() => ({
+            position: 'fixed',
+            left: `${x.value}px`,
+            top: `${y.value}px`,
+            width: width.value,
+            zIndex: zIndex.value
+        }));
+
+        function close() {
+            emit('update:open', false);
+            emit('onClose');
+        }
+
+        function onEnter() {
+            emit('onOpen');
+            zIndex.value = nextZIndex();
+        }
+
+                function onDragStart() {
+                    zIndex.value = nextZIndex();
+                }
+
+                function centerDialog() {
+                    if (dialog.value) {
+                        const boundingRect = dialog.value.getBoundingClientRect();
+                        x.value = (window.innerWidth - boundingRect.width) / 2;
+                        y.value = (window.innerHeight - boundingRect.height) / 2;
+                    }
+                }
+
+                watch(() => props.open, async (newVal) => {
+                    if (newVal) {
+                        await nextTick();
+                        centerDialog();
+                    }
+                }, { immediate: true });
+
+                return {
+                    slots,
+                    wrapper,
+                    dialog,
+                    handle,
+                    zIndex,
+                    fade,
+                    modalScale,
+                    style,
+                    computedStyle,
+                    backdropClasses,
+                    wrapperClasses,
+                    close,
+                    onEnter,
+                };
+            }
+        });
+        </script>
+

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

@@ -1,16 +1,23 @@
 <template>
     <div>
-        <MDialog :draggable="true">
+        <MDialog :draggable="true" v-model:open="open" width="1000px" title="Hello World" @onClose="closed">
             <input type="text" />
             <input type="text" />
             <template #footer>
                 Bootom
             </template>
         </MDialog>
+
+        <button @click="open = true">Open</button>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 
+const open = ref(false);
+
+function closed() {
+    console.log('closed');
+}
 </script>