@teammodlr/ui-kit 2.3.2 → 2.3.4

package/src/components/dialogprovider/DialogProvider.vue

@@ -1,33 +1,24 @@
 <template>
-    <slot/>
+    <slot />
     <template v-if="Object.keys(dialogMap).length > 0">
-        <template v-for="dialog in Object.values(dialogMap)">
-            <MDialog
-                v-if="dialog.options.open"
-                :key="dialog.key"
-                v-bind="filteredOptions(dialog.options)"
-                ref="setDialogRef(dialog.key)"
-                @close="remove(dialog.key)"
-                @on-close="handleClose(dialog.key)"
-                @on-open="handleOpen(dialog.key)"
-            >
+        <template v-for="dialog in Object.values(dialogMap)" :key="dialog.key">
+            <MDialog v-model:open="dialog.options.open" v-bind="filteredOptions(dialog.options)"
+                ref="setDialogRef(dialog.key)" @close="remove(dialog.key)" @on-close="handleClose(dialog.key)"
+                @on-open="handleOpen(dialog.key)">
                 <template #default>
-                    <MRenderer
-                        v-if="dialog.options.render"
-                        :h="dialog.options.render"
-                        :props="dialog.options.props"
-                    />
+                    <MRenderer v-if="dialog.options.render" :h="dialog.options.render" :props="dialog.options.props" />
                 </template>
             </MDialog>
         </template>
     </template>
 </template>
 <script lang="ts">
-import {defineComponent, reactive, provide, ref} from 'vue';
-import type {DialogApiInjection, DialogOptions, DialogReactive} from './types';
+import { defineComponent, reactive, provide, ref, nextTick } 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: {
@@ -61,20 +52,23 @@ export default defineComponent({
             const dialog: DialogReactive = {
                 key,
                 options: reactiveOptions,
-                open: () => {
+                open: async () => {
                     const dialogComponent = dialogRefs.value[key];
                     if (dialogComponent && dialogComponent.open) {
                         dialogComponent.open();
                     } else {
+                        await nextTick();
                         dialog.options.open = true;
                         handleOpen(key);
                     }
                 },
-                close: () => {
+                close: async () => {
                     const dialogComponent = dialogRefs.value[key];
                     if (dialogComponent && dialogComponent.close) {
                         dialogComponent.close();
                     } else {
+                        await nextTick();
+                        dialog.options.open = false;
                         handleClose(key);
                     }
                 },

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

@@ -1,54 +1,55 @@
-<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: false,
-        onOpen: () => {
-            console.log('hello world')
-        }
-    });
-
-    setTimeout(() => {
-        testTitle.value = 'changed again';
-    }, 4000);
-}
-</script>
+<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() {
+    const dlg = dialog.create('hello', {
+        title: testTitle,
+        render: renderMessage,
+        props: {message: testTitle},
+    });
+
+    dlg.open();
+
+    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: false,
+        onOpen: () => {
+            console.log('hello world')
+        }
+    });
+
+    setTimeout(() => {
+        testTitle.value = 'changed again';
+    }, 4000);
+}
+</script>

package/src/styles/transitions.css.ts

@@ -1,97 +1,98 @@
-import { style, globalKeyframes } from '@vanilla-extract/css';
-import { themeVars } from './theme.css';
-
-const FADE_NAME = 'fade';
-const FADE_DURATION = 0.2;
-globalKeyframes(FADE_NAME, {
-    from: {
-        opacity: 0
-    },
-    to: {
-        opacity: 1
-    }
-});
-
-export const fade = {
-    enterActive: style({
-        animation: `${FADE_DURATION}s ${FADE_NAME} ${themeVars.transition.default}`
-    }),
-
-    leaveActive: style({
-        animation: `${FADE_DURATION}s ${FADE_NAME} ${themeVars.transition.default} reverse`
-    }),
-
-    enterFrom: style({
-        opacity: 0
-    }),
-
-    leaveTo: style({
-        opacity: 0
-    })
-};
-
-const SCALE_NAME = 'scale';
-const SCALE_DURATION = 0.12;
-globalKeyframes(SCALE_NAME, {
-    '0%': {
-        opacity: 0,
-        scale: 0.95
-    },
-    '100%': {
-        opacity: 1,
-        scale: 1
-    }
-});
-
-export const scale = {
-    enterActive: style({
-        animation: `${SCALE_DURATION}s ${SCALE_NAME} ${themeVars.transition.default}`
-    }),
-
-    leaveActive: style({
-        animation: `${SCALE_DURATION}s ${SCALE_NAME} ${themeVars.transition.default} reverse`
-    }),
-
-    enterFrom: style({
-        opacity: 0
-    }),
-
-    leaveTo: style({
-        opacity: 0
-    })
-};
-
-const MODAL_NAME = 'modal';
-const MODAL_DURATION = 0.5;
-globalKeyframes(MODAL_NAME, {
-    '0%': {
-        opacity: 0,
-        scale: 0.95,
-        // offset bottom
-        transformOrigin: 'bottom',
-        transform: `translateY(10%)`
-    },
-    '100%': {
-        opacity: 1,
-        scale: 1,
-        transform: `translateY(0%)`
-    }
-});
-
-export const modalScale = {
-    enterActive: style({
-        animation: `${MODAL_DURATION}s ${MODAL_NAME} ${themeVars.transition.default}`
-    }),
-
-    leaveActive: style({
-        animation: `${MODAL_DURATION}s ${MODAL_NAME} ${themeVars.transition.default}  reverse`
-    }),
-
-    enterFrom: style({
-        opacity: 0
-    }),
-
-    leaveTo: style({
-        opacity: 0
-    })
-};
+import { style, globalKeyframes } from '@vanilla-extract/css';
+import { themeVars } from './theme.css';
+
+const FADE_NAME = 'fade';
+const FADE_DURATION = 0.2;
+globalKeyframes(FADE_NAME, {
+    from: {
+        opacity: 0
+    },
+    to: {
+        opacity: 1
+    }
+});
+
+export const fade = {
+    enterActive: style({
+        animation: `${FADE_DURATION}s ${FADE_NAME} ${themeVars.transition.default}`
+    }),
+
+    leaveActive: style({
+        animation: `${FADE_DURATION}s ${FADE_NAME} ${themeVars.transition.default} reverse`
+    }),
+
+    enterFrom: style({
+        opacity: 0
+    }),
+
+    leaveTo: style({
+        opacity: 0
+    })
+};
+
+const SCALE_NAME = 'scale';
+const SCALE_DURATION = 0.12;
+globalKeyframes(SCALE_NAME, {
+    '0%': {
+        opacity: 0,
+        scale: 0.95
+    },
+    '100%': {
+        opacity: 1,
+        scale: 1
+    }
+});
+
+export const scale = {
+    enterActive: style({
+        animation: `${SCALE_DURATION}s ${SCALE_NAME} ${themeVars.transition.default}`
+    }),
+
+    leaveActive: style({
+        animation: `${SCALE_DURATION}s ${SCALE_NAME} ${themeVars.transition.default} reverse`
+    }),
+
+    enterFrom: style({
+        opacity: 0
+    }),
+
+    leaveTo: style({
+        opacity: 0
+    })
+};
+
+const MODAL_NAME = 'modal';
+const MODAL_DURATION = 0.5;
+globalKeyframes(MODAL_NAME, {
+    '0%': {
+        opacity: 0,
+        scale: 0.95,
+        // offset bottom
+        transformOrigin: 'bottom',
+        transform: `translateY(10%)`
+    },
+    '100%': {
+        opacity: 1,
+        scale: 1,
+        transform: `translateY(0%)`
+    }
+});
+
+export const modalScale = {
+    enterActive: style({
+        animation: `${MODAL_DURATION}s ${MODAL_NAME} ${themeVars.transition.default}`,
+        willChange: 'transform, opacity'
+    }),
+
+    leaveActive: style({
+        animation: `${MODAL_DURATION}s ${MODAL_NAME} ${themeVars.transition.default}  reverse`
+    }),
+
+    enterFrom: style({
+        opacity: 0
+    }),
+
+    leaveTo: style({
+        opacity: 0
+    })
+};