@teammodlr/ui-kit 2.1.68 → 2.1.70

package/package.json

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

package/src/components/colorpicker/ColorPicker.vue

@@ -4,9 +4,15 @@
             <slot :r="finalColor.r" :g="finalColor.g" :b="finalColor.b" :a="finalColor.a" :hex="hexInput"
                 :transparent="style.transparent">
                 <div>
-                    <div :class="style.referenceColor"
-                        :style="{ backgroundColor: `rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, ${finalColor.a})` }">
-                    </div>
+                    <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>
@@ -24,9 +30,8 @@
 
                     <div :class="style.colorActions">
                         <template v-if="canPickColor">
-                            <button role="button" :disabled="!canPickColor" :class="style.eyeDrop"
-                                @click="openEyeDropper">
-                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            <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"
@@ -35,7 +40,7 @@
                                         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>
+                            </MButton>
                         </template>
                         <template v-else>
                             <div :class="style.preview">
@@ -81,6 +86,17 @@
                             </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>
@@ -181,6 +197,9 @@ export default defineComponent({
         })
 
         const finalColor = computed(() => {
+            if (hexInput.value === "inherit") {
+                return { r: 0, g: 0, b: 0, a: 1 };
+            }
             return HSVToRGBA(hueSlider.value * 3.6, brightness.value, saturation.value, opacitySlider.value / 100);
         });
 
@@ -193,6 +212,10 @@ export default defineComponent({
         };
 
         const setInputs = () => {
+            if (hexInput.value === "inherit") {
+                return;
+            }
+
             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();
@@ -217,12 +240,24 @@ export default defineComponent({
         }
 
         const updateFromHex = () => {
-            let color = hexToRGB(hexInput.value, finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
+            if (hexInput.value === "inherit") {
+                return;
+            }
+            const color = hexToRGB(hexInput.value);
             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);
@@ -274,7 +309,7 @@ export default defineComponent({
         watch(() => props.modelValue, () => {
             let val = props.modelValue;
             if (!val || val.trim() === "") {
-                val = props.defaultColor ?? "#FFFFFF"
+                val = props.defaultColor ?? "#FFFFFF";
             }
             hexInput.value = val;
             updateFromHex();
@@ -299,9 +334,13 @@ export default defineComponent({
             isOpen.value = false;
         });
 
+
         watch(() => eyeDropColor.value, () => {
-            hexInput.value = eyeDropColor.value;
-            updateFromHex();
+            if (eyeDropColor.value) {
+                hexInput.value = eyeDropColor.value;
+                emit('update:modelValue', eyeDropColor.value);
+                updateFromHex();
+            }
         });
 
         const openEyeDropper = () => {
@@ -350,7 +389,8 @@ export default defineComponent({
             canPickColor,
             openEyeDropper,
             scale,
-            onSliderChangeComplete
+            onSliderChangeComplete,
+            toggleInherit
         };
     }
 })

package/src/components/dialog/Dialog.vue

@@ -5,8 +5,9 @@
             :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">
+            :leave-to-class="fade.leaveTo"
+            >
+            <div :class="style.root" v-if="open" :style="{ zIndex: zIndex, position: 'fixed', inset: '0', pointerEvents: modal ? 'all' : 'none' }">
                 <div :class="backdropClasses" v-if="modal"></div>
                 <div ref="wrapper" :class="wrapperClasses">
                     <Transition
@@ -27,7 +28,7 @@
                                     <div :class="style.header" ref="handle">
                                         <div :class="style.title">
                                             <slot name="title">
-                                                {{ title }}
+                                                {{ resolvedTitle }}
                                             </slot>
                                         </div>
                                     </div>
@@ -48,26 +49,33 @@
         </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 {fade, modalScale} from '../../styles/transitions.css';
+import {
+    computed,
+    defineComponent,
+    ref,
+    watch,
+    nextTick,
+    isRef,
+    type CSSProperties, type PropType, type Ref,
+} from 'vue';
+import type {ComputedRef} from 'vue';
 
-import { useZIndex } from "../../composables/useZIndex";
-import { useDraggable } from "@vueuse/core";
-import * as style from "./style";
+import {useZIndex} from '../../composables/useZIndex';
+import {useDraggable} from '@vueuse/core';
+import * as style from './style';
 
 export default defineComponent({
-    name: "Dialog",
+    name: 'Dialog',
     props: {
         title: {
-            type: String,
-            default: ""
+            type: [String, Object] as PropType<string | Ref<string>>,
+            default: '',
         },
         draggable: {
             type: Boolean,
-            default: true
+            default: true,
         },
         modal: {
             type: Boolean,
@@ -75,32 +83,36 @@ export default defineComponent({
         },
         onClose: {
             type: Function,
-            default: () => {}
+            default: () => {
+            },
         },
         zIndex: {
-            type: Number
+            type: Number,
         },
         width: {
             type: [Number, String],
-            default: "500px"
+            default: '500px',
         },
         focusTrap: {
             type: Boolean,
-            default: true
+            default: true,
         },
         open: {
-            type: Boolean
-        }
+            type: Boolean,
+            default: false,
+        },
     },
     emits: ['onOpen', 'onClose', 'update:open'],
-    setup(props, { slots, emit }) {
+    setup(props, {emit, expose}) {
         const wrapper = ref<HTMLElement | null>(null);
         const dialog = ref<HTMLElement | null>(null);
         const handle = ref<HTMLElement | null>(null);
-        const { nextZIndex } = useZIndex();
+        const {nextZIndex} = useZIndex();
         const zIndex = ref(props.zIndex ?? nextZIndex());
 
-        const { x, y } = useDraggable(dialog, {
+        const isOpen = ref<boolean>(props.open);
+
+        const {x, y} = useDraggable(dialog, {
             handle,
             preventDefault: true,
             containerElement: wrapper,
@@ -108,6 +120,10 @@ export default defineComponent({
             onStart: onDragStart,
         });
 
+        const resolvedTitle = computed(() =>
+            isRef(props.title) ? props.title.value : props.title
+        );
+
         const backdropClasses = computed(() => ({
             [style.backdrop]: true,
             [style.backdropColor]: props.modal === true,
@@ -118,21 +134,25 @@ export default defineComponent({
             [style.notModal]: !props.modal,
         }));
 
-        const width = computed(() => (
-            typeof props.width === "number" ? `${props.width}px` : props.width
-        ));
+        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
+            zIndex: zIndex.value,
         }));
 
         function close() {
+            isOpen.value = false;
             emit('update:open', false);
             emit('onClose');
+            if (props.onClose) {
+                props.onClose();
+            }
         }
 
         function onEnter() {
@@ -140,41 +160,51 @@ export default defineComponent({
             zIndex.value = nextZIndex();
         }
 
-                function onDragStart() {
-                    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;
+            }
+        }
 
-                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) => {
+                isOpen.value = newVal;
+                if (newVal) {
+                    await nextTick();
+                    centerDialog();
                 }
+            },
+            {immediate: true},
+        );
 
-                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,
-                };
-            }
+        // Expose methods to parent components
+        expose({
+            close,
         });
-        </script>
 
+        return {
+            wrapper,
+            dialog,
+            handle,
+            zIndex,
+            fade,
+            modalScale,
+            style,
+            computedStyle,
+            backdropClasses,
+            resolvedTitle,
+            wrapperClasses,
+            isOpen,
+            close,
+            onEnter,
+        };
+    },
+});
+</script>

package/src/components/dialogprovider/DialogProvider.vue

@@ -0,0 +1,97 @@
+<template>
+    <slot/>
+    <template v-if="Object.keys(dialogMap).length > 0">
+        <Teleport to="body">
+            <MDialog
+                v-for="dialog in Object.values(dialogMap)"
+                :key="dialog.key"
+                v-bind="dialog.options"
+                ref="setDialogRef(dialog.key)"
+                @close="remove(dialog.key)"
+            >
+                <MRenderer v-if="dialog.options.render" :h="dialog.options.render" :props="dialog.options.props" />
+            </MDialog>
+        </Teleport>
+    </template>
+</template>
+<script lang="ts">
+import {defineComponent, reactive, provide, ref} from 'vue';
+import type {DialogApiInjection, DialogOptions, DialogReactive} from './types';
+import MDialog from '../dialog/Dialog.vue';
+import MRenderer from '../renderer/renderer';
+
+export default defineComponent({
+    name: 'DialogProvider',
+    components: {
+        MDialog,
+        MRenderer,
+    },
+    setup() {
+        const dialogMap = reactive<Record<string, DialogReactive>>({});
+        const dialogRefs = ref<Record<string, any>>({});
+
+        function setDialogRef(key: string) {
+            return (el: any) => {
+                if (el) {
+                    dialogRefs.value[key] = el;
+                } else {
+                    delete dialogRefs.value[key];
+                }
+            };
+        }
+
+        function create(key: string, options: DialogOptions = {}): DialogReactive {
+            if (dialogMap[key]) {
+                // Merge new options into existing reactive options
+                Object.assign(dialogMap[key].options, options);
+                return dialogMap[key];
+            }
+
+            // Make options reactive
+            const reactiveOptions = reactive(options);
+
+            const dialog: DialogReactive = {
+                key,
+                options: reactiveOptions,
+                open: () => {
+                    const dialogComponent = dialogRefs.value[key];
+                    if (dialogComponent && dialogComponent.open) {
+                        dialogComponent.open();
+                    } else {
+                        dialog.options.open = true;
+                    }
+                },
+                close: () => {
+                    const dialogComponent = dialogRefs.value[key];
+                    if (dialogComponent && dialogComponent.close) {
+                        dialogComponent.close();
+                    } else {
+                        remove(key);
+                    }
+                },
+            };
+
+            dialogMap[key] = dialog;
+            return dialog;
+        }
+
+        function remove(key: string) {
+            delete dialogMap[key];
+            delete dialogRefs.value[key];
+        }
+
+        const api: DialogApiInjection = {
+            create,
+            remove,
+        };
+
+        provide('m-dialog', api);
+
+        return {
+            dialogMap,
+            remove,
+            setDialogRef,
+        };
+    },
+});
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <button @click="showDialog">Show Dialog</button>
+        <button @click="showDialog2">Show Dialog 2</button>
+        {{ testTitle }}
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, h} from 'vue';
+import {useDialog} from '../useDialog';
+
+const dialog = useDialog();
+const testTitle = ref('This is a test');
+
+function renderMessage({message}: { message: string }) {
+    return h('p', [
+        'Here are ',
+        h('span', {style: 'color: red'}, [message]),
+        ' that using render function',
+    ]);
+}
+
+function showDialog() {
+    dialog.create('hello', {
+        title: testTitle,
+        render: renderMessage,
+        props: {message: testTitle},
+        open: true,
+    });
+
+    setTimeout(() => {
+        testTitle.value = 'changed';
+    }, 4000);
+}
+
+function showDialog2() {
+    dialog.create('hello-two', {
+        title: "Hello Second Dialog",
+        render: renderMessage,
+        props: {message: testTitle},
+        open: true,
+        modal: false,
+        draggable: true
+    });
+
+    setTimeout(() => {
+        testTitle.value = 'changed again';
+    }, 4000);
+}
+</script>

package/src/components/dialogprovider/examples/index.stories.ts

@@ -0,0 +1,26 @@
+import MDialogProvider from '../DialogProvider.vue';
+import { MDialogProviderBasic } from './index';
+
+const Template = (args: any) => ({
+    components: {
+        MDialogProvider,
+        MDialogProviderBasic
+    },
+    setup() {
+        return {
+            args
+        }
+    },
+    template: `
+        <m-dialog-provider v-bind="args">
+            <MDialogProviderBasic />
+        </m-dialog-provider>
+    `
+});
+
+export default {
+    component: MDialogProvider,
+    title: 'Components/DialogProvider'
+};
+
+export const Primary = Template.bind({});

package/src/components/dialogprovider/examples/index.ts

@@ -0,0 +1 @@
+export { default as MDialogProviderBasic } from './basic.vue';

package/src/components/dialogprovider/types.ts

@@ -0,0 +1,25 @@
+import type { Ref, VNodeChild } from 'vue';
+
+export type DialogContent = VNodeChild;
+
+export interface DialogOptions {
+    title?: string | Ref<string>;
+    render?: (props: any) => VNodeChild;
+    props?: { [key: string]: any };
+    onClose?: () => void;
+    open?: boolean;
+    draggable?: boolean;
+    modal?: boolean;
+}
+
+export interface DialogReactive {
+    key: string;
+    options: DialogOptions;
+    open: () => void;
+    close: () => void;
+}
+
+export interface DialogApiInjection {
+    create: (key: string, options?: DialogOptions) => DialogReactive;
+    remove: (key: string) => void;
+}

package/src/components/dialogprovider/useDialog.ts

@@ -0,0 +1,14 @@
+import { inject } from 'vue';
+import type { DialogApiInjection} from "./types";
+
+export function useDialog(): DialogApiInjection {
+    const api = inject('m-dialog', null);
+
+    if (api === null) {
+        throw new Error(
+            `m-dialog api is not provided, ensure component is wrapped in <m-dialog-provider />`
+        )
+    }
+
+    return api;
+}

package/src/components/index.ts

@@ -48,4 +48,5 @@ export { default as MVirtualScroll } from './virtualscroll/VirtualScroll.vue';
 export { default as MConfirm } from './confirm/Confirm.vue';
 export { default as MConfirmProvider } from './confirm/ConfirmProvider.vue';
 export { default as MDialog } from './dialog/Dialog.vue';
+export { default as MDialogProvider } from './dialogprovider/DialogProvider.vue';
 export { default as MTree } from './tree/Tree.vue';

package/src/components/messageprovider/MessageProvider.vue

@@ -28,7 +28,6 @@
 import {
     ref,
     reactive,
-    Teleport,
     defineComponent,
     provide,
     computed
@@ -43,11 +42,8 @@ import type {
 } from './types';
 import type { PropType } from 'vue';
 import MMessage from './Message.vue';
-import { useId } from '../../composables/useCachedUid';
 import * as style from './style';
 import { modalScale } from '../../styles/transitions.css';
-import { useIsServer } from '../../composables/useIsServer';
-export type MessageProviderInst = MessageApiInjection;
 
 interface PrivateMessageReactive extends MessageReactive {
     key: string;

package/src/composables/index.ts

@@ -1,4 +1,5 @@
 export { useMessage } from '../components/messageprovider/useMessage';
+export { useDialog } from '../components/dialogprovider/useDialog';
 export { useConfirm } from '../components/confirm/useConfirm';
 export { usePopper } from './usePopper';
 export { useZIndex } from './useZIndex';