@teammodlr/ui-kit 2.1.64 → 2.1.67

package/src/components/colorpicker/ColorPicker.vue

@@ -1,38 +1,38 @@
 <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">
-                <div :class="style.reference">
+            <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>
@@ -45,11 +45,11 @@
                         </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)">
+                                     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))`">
+                                     :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 +57,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 +88,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";
@@ -105,7 +105,7 @@ export default defineComponent({
     props: {
         modelValue: {
             type: String,
-            default: "#FF00FF"
+            default: "#FFFFFF"
         },
         transfer: {
             type: Boolean,
@@ -117,6 +117,10 @@ export default defineComponent({
         },
         zIndex: {
             type: Number
+        },
+        defaultColor: {
+            type: String,
+            default: "#FFFFFF"
         }
     },
     emits: ['update:modelValue'],
@@ -125,9 +129,9 @@ export default defineComponent({
         MInput,
         MButton
     },
-    setup(props, { emit }) {
-        const { isSupported: canPickColor, open: openEyeDrop, sRGBHex: eyeDropColor } = useEyeDropper();
-        const { nextZIndex } = useZIndex();
+    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("");
@@ -151,9 +155,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,
@@ -200,27 +204,27 @@ export default defineComponent({
         }
 
         const updateFromHex = () => {
-            var color = hexToRGB(hexInput.value, finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
+            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 = () => {
-            var red = parseInt(rInput.value);
+            let red = parseInt(rInput.value);
             if (isNaN(red) || red > 255 || red < 0) {
                 red = finalColor.value.r;
             }
 
-            var green = parseInt(gInput.value);
+            let green = parseInt(gInput.value);
             if (isNaN(green) || green > 255 || green < 0) {
                 green = finalColor.value.g;
             }
 
-            var blue = parseInt(bInput.value);
+            let blue = parseInt(bInput.value);
             if (isNaN(blue) || blue > 255 || blue < 0) {
                 blue = finalColor.value.b;
             }
 
-            var alpha = parseFloat(aInput.value);
+            let alpha = parseFloat(aInput.value);
             if (isNaN(alpha) || alpha > 1 || alpha < 0) {
                 alpha = finalColor.value.a;
             }
@@ -242,8 +246,16 @@ export default defineComponent({
             setThumbPosition();
         });
 
-        watch(() => props.modelValue, () => {
-            hexInput.value = props.modelValue;
+        const setDefaultColor = () => {
+            hexInput.value
+        }
+
+        watch(() => props.modelValue, (newValue) => {
+            let val = props.modelValue;
+            if (!newValue || newValue.trim() === "") {
+                val = props.defaultColor || "#FFFFFF"
+            }
+            hexInput.value = val;
             updateFromHex();
 
         });

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

@@ -1,7 +1,12 @@
 <template>
-    <MColorPicker>
-        <template #default="{r,g,b,hex}">
-            <div style="width: 100px; height: 100px;" :style="{backgroundColor: `${hex}`}"></div>
+    <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>
+            </div>
         </template>
     </MColorPicker>
 </template>

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

@@ -92,6 +92,16 @@ export const reference = style({
     userSelect: 'none'
 });
 
+export const transparent = style({
+    backgroundImage:
+        'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
+    backgroundSize: '12px 12px',
+    backgroundPosition: '0 0, 0 6px, 6px -6px, -6px 0px',
+    overflow: 'hidden',
+    cursor: 'pointer',
+    userSelect: 'none',
+})
+
 export const referenceColor = style({
     position: 'absolute',
     top: 0,

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: false
-        },
-        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>
+        <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>