@teammodlr/ui-kit 2.1.19 → 2.1.21

package/package.json

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

package/src/components/messageprovider/MessageProvider.vue

@@ -1,26 +1,25 @@
 <template>
     <slot />
-    <template>
+    <template v-if="!isServer">
         <Teleport :to="teleportTo ?? 'body'">
             <transition
                 type="animation"
                 :enter-active-class="modalScale.enterActive"
                 :leave-active-class="modalScale.leaveActive"
                 :enter-from-class="modalScale.enterFrom"
-                :leave-to-class="modalScale.leaveTo"
-            >
-            <div :class="classes">
-                <MMessage v-for="message in messageList" 
-                    :key="message.key" 
-                    :internalKey="message.key"
-                    :variant="message.type"
-                    :content="message.content" 
-                    :timeout="message.timeout ?? timeout"
-                    ref="messageRefs" 
-                    :on-internal-after-leave="onInternalAfterLeave" />
+                :leave-to-class="modalScale.leaveTo">
+                <div :class="classes">
+                    <MMessage
+                        v-for="message in messageList"
+                        :key="message.key"
+                        :internalKey="message.key"
+                        :variant="message.type"
+                        :content="message.content"
+                        :timeout="message.timeout ?? timeout"
+                        ref="messageRefs"
+                        :on-internal-after-leave="onInternalAfterLeave" />
                 </div>
             </transition>
-
         </Teleport>
     </template>
 </template>
@@ -34,21 +33,29 @@ import {
     provide,
     computed
 } from 'vue';
-import type { MessageType, MessageReactive, MessageOptions, MessageApiInjection, ContentType, MessagePlacement } from './types';
+import type {
+    MessageType,
+    MessageReactive,
+    MessageOptions,
+    MessageApiInjection,
+    ContentType,
+    MessagePlacement
+} from './types';
 import type { PropType } from 'vue';
 import MMessage from './Message.vue';
 import { useCachedUid } 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
+    key: string;
 }
 
 interface PrivateMessageRef extends MessageReactive {
-    key: string
-    hide: () => void
+    key: string;
+    hide: () => void;
 }
 
 export default defineComponent({
@@ -71,26 +78,27 @@ export default defineComponent({
         }
     },
     setup(props, { slots }) {
+        const isServer = useIsServer();
         const messageListRef = ref<PrivateMessageReactive[]>([]);
         const messageRefs = ref<Record<string, PrivateMessageRef>>({});
         const api: MessageApiInjection = {
             create(content: ContentType, options?: MessageOptions) {
-                return create(content, { type: 'default', ...options })
+                return create(content, { type: 'default', ...options });
             },
             info(content: ContentType, options?: MessageOptions) {
-                return create(content, { ...options, type: 'info' })
+                return create(content, { ...options, type: 'info' });
             },
             success(content: ContentType, options?: MessageOptions) {
-                return create(content, { ...options, type: 'success' })
+                return create(content, { ...options, type: 'success' });
             },
             warning(content: ContentType, options?: MessageOptions) {
-                return create(content, { ...options, type: 'warning' })
+                return create(content, { ...options, type: 'warning' });
             },
             error(content: ContentType, options?: MessageOptions) {
-                return create(content, { ...options, type: 'error' })
+                return create(content, { ...options, type: 'error' });
             },
             loading(content: ContentType, options?: MessageOptions) {
-                return create(content, { ...options, type: 'loading' })
+                return create(content, { ...options, type: 'loading' });
             },
             destroyAll
         };
@@ -118,14 +126,14 @@ export default defineComponent({
 
         function destroyAll(): void {
             //@ts-ignore
-            Object.values(messageRefs.value).forEach((messageRef) => {
+            Object.values(messageRefs.value).forEach(messageRef => {
                 messageRef.hide();
             });
         }
 
         function onInternalAfterLeave(key: string): void {
             messageListRef.value = messageListRef.value.filter(
-                (message) => message.key !== key
+                message => message.key !== key
             );
             delete messageRefs.value[key];
         }
@@ -135,19 +143,20 @@ export default defineComponent({
                 style.wrapper,
                 // @ts-ignore
                 [style.placement[props.placement]]
-            ]
+            ];
         });
 
         return Object.assign(
             {
                 messageRefs,
                 messageList: messageListRef,
+                isServer,
                 onInternalAfterLeave,
                 classes,
                 modalScale
             },
-            api,
-        )
+            api
+        );
     }
 });
 </script>

package/src/components/modal/Modal.vue

@@ -8,7 +8,7 @@
             :leave-to-class="fade.leaveTo">
             <div
                 :class="style.mask"
-                :style="{ zIndex: nextZIndex() }"
+                :style="{ zIndex: zIndex }"
                 v-if="isOpen"></div>
             <div
                 tabIndex="-1"
@@ -192,7 +192,7 @@ export default defineComponent({
 
         const computedWrapperStyles = computed(() => {
             return {
-                zIndex: nextZIndex()
+                zIndex: zIndex.value
             };
         });
 
@@ -267,20 +267,20 @@ export default defineComponent({
             }, 250);
         }
 
-        watch(
-            () => isOpen.value,
-            value => {
-                if (value) {
-                    zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
-                    emit('open');
-                    nextTick(() => {
-                        // activate()
-                    });
-                } else {
-                    // deactivate()
-                }
-            }
-        );
+        // watch(
+        //     () => isOpen.value,
+        //     value => {
+        //         if (value) {
+        //             zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
+        //             emit('open');
+        //             nextTick(() => {
+        //                 // activate()
+        //             });
+        //         } else {
+        //             // deactivate()
+        //         }
+        //     }
+        // );
 
         return {
             close,