@teammodlr/ui-kit 2.1.68 → 2.1.69

package/package.json

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

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';