@teammodlr/ui-kit 2.0.29 → 2.0.30

package/src/components/messageprovider/Message.vue

@@ -1,123 +1,135 @@
-<template>
-    <div v-if="show" :class="classes">
-        <span :class="iconClasses">
-            <svg v-if="variant == 'info'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd"
-                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
-                    clip-rule="evenodd" />
-            </svg>
-
-            <svg v-else-if="variant == 'success'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
-            </svg>
-
-            <svg v-else-if="variant == 'warning'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
-            </svg>
-
-            <svg v-else-if="variant == 'error'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
-            </svg>
-
-            <svg v-else-if="variant == 'loading'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z" clip-rule="evenodd" />
-            </svg>
-        </span>
-
-        <div class="m-message">
-            {{ content }}
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, ref, computed, watch } from 'vue';
-import type { PropType } from 'vue';
-import * as style from './style';
-
-type Variant = 'info' | 'success' | 'warning' | 'error' | 'default' | 'loading'
-
-export default defineComponent({
-    name: 'MMessage',
-    props: {
-        onInternalAfterLeave: Function as PropType<(key: string) => void>,
-        internalKey: {
-            type: String,
-            required: true
-        },
-        content: {
-            type: [String]
-        },
-        type: {
-            type: String,
-            default: 'default'
-        },
-        variant: {
-            type: String as PropType<Variant>,
-            default: 'default'
-        },
-        timeout: {
-            type: Number,
-            default: 10000
-        },
-        showClose: {
-            type: Boolean,
-            default: true
-        },
-        onClose: {
-            type: Function,
-            default: () => { }
-        }
-    },
-    setup(props) {
-        let timerId: number | null = null;
-        const showRef = ref<boolean>(true);
-
-        onMounted(() => {
-            setHideTimeout();
-        });
-
-        function setHideTimeout(): void {
-            const { timeout } = props;
-            if (timeout) {
-                timerId = window.setTimeout(hide, timeout);
-            }
-        }
-
-        function hide(): void {
-            showRef.value = false
-            if (timerId) {
-                window.clearTimeout(timerId)
-                timerId = null
-                if (props.onInternalAfterLeave) {
-                    props.onInternalAfterLeave(props.internalKey)
-                }
-            }
-        }
-
-        const classes = computed(() => {
-            return [
-                style.base,
-                [style.variant[props.variant]]
-            ]
-        })
-
-        const iconClasses = computed(() => {
-            return [
-                style.icon
-            ]
-        })
-
-        watch(() => props.timeout, () => {
-            setHideTimeout();
-        })
-
-        return {
-            show: showRef,
-            hide,
-            classes,
-            iconClasses
-        }
-    }
-})
-</script>
+<template>
+    <transition
+        type="animation"
+        :enter-active-class="scale.enterActive"
+        :leave-active-class="scale.leaveActive"
+        :enter-from-class="scale.enterFrom"
+        :leave-to-class="scale.leaveTo"
+        appear
+        mode="out-in"
+    >
+        <div v-if="show" :class="classes">
+            <span :class="iconClasses">
+                <svg v-if="variant == 'info'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd"
+                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+                        clip-rule="evenodd" />
+                </svg>
+
+                <svg v-else-if="variant == 'success'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+                </svg>
+
+                <svg v-else-if="variant == 'warning'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                </svg>
+
+                <svg v-else-if="variant == 'error'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                </svg>
+
+                <svg v-else-if="variant == 'loading'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z" clip-rule="evenodd" />
+                </svg>
+            </span>
+
+            <div class="m-message">
+                {{ content }}
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, computed, watch } from 'vue';
+import type { PropType } from 'vue';
+import * as style from './style';
+import { scale } from '../../styles/transitions.css';
+
+type Variant = 'info' | 'success' | 'warning' | 'error' | 'default' | 'loading'
+
+export default defineComponent({
+    name: 'MMessage',
+    props: {
+        onInternalAfterLeave: Function as PropType<(key: string) => void>,
+        internalKey: {
+            type: String,
+            required: true
+        },
+        content: {
+            type: [String]
+        },
+        type: {
+            type: String,
+            default: 'default'
+        },
+        variant: {
+            type: String as PropType<Variant>,
+            default: 'default'
+        },
+        timeout: {
+            type: Number,
+            default: 10000
+        },
+        showClose: {
+            type: Boolean,
+            default: true
+        },
+        onClose: {
+            type: Function,
+            default: () => { }
+        }
+    },
+    setup(props) {
+        let timerId: number | null = null;
+        const showRef = ref<boolean>(true);
+
+        onMounted(() => {
+            setHideTimeout();
+        });
+
+        function setHideTimeout(): void {
+            const { timeout } = props;
+            if (timeout) {
+                timerId = window.setTimeout(hide, timeout);
+            }
+        }
+
+        function hide(): void {
+            showRef.value = false
+            if (timerId) {
+                window.clearTimeout(timerId)
+                timerId = null
+                if (props.onInternalAfterLeave) {
+                    props.onInternalAfterLeave(props.internalKey)
+                }
+            }
+        }
+
+        const classes = computed(() => {
+            return [
+                style.base,
+                [style.variant[props.variant]]
+            ]
+        })
+
+        const iconClasses = computed(() => {
+            return [
+                style.icon
+            ]
+        })
+
+        watch(() => props.timeout, () => {
+            setHideTimeout();
+        })
+
+        return {
+            show: showRef,
+            hide,
+            classes,
+            iconClasses,
+            scale
+        }
+    }
+})
+</script>

package/src/components/messageprovider/MessageProvider.vue

@@ -1,144 +1,153 @@
-<template>
-    <slot />
-    <template v-if="messageList.length">
-        <Teleport :to="teleportTo ?? 'body'">
-            <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>
-
-        </Teleport>
-    </template>
-</template>
-
-<script lang="ts">
-import {
-    ref,
-    reactive,
-    Teleport,
-    defineComponent,
-    provide,
-computed
-} from 'vue';
-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';
-
-export type MessageProviderInst = MessageApiInjection;
-
-interface PrivateMessageReactive extends MessageReactive {
-    key: string
-}
-
-interface PrivateMessageRef extends MessageReactive {
-    key: string
-    hide: () => void
-}
-
-export default defineComponent({
-    name: 'MMessageProvider',
-    components: {
-        MMessage
-    },
-    props: {
-        teleportTo: {
-            type: String,
-            default: 'body'
-        },
-        placement: {
-            type: String as PropType<MessagePlacement>,
-            default: 'top'
-        },
-        timeout: {
-            type: Number,
-            default: 3000
-        }
-    },
-    setup(props, { slots }) {
-        const messageListRef = ref<PrivateMessageReactive[]>([]);
-        const messageRefs = ref<Record<string, PrivateMessageRef>>({});
-        const api: MessageApiInjection = {
-            create(content: ContentType, options?: MessageOptions) {
-                return create(content, { type: 'default', ...options })
-            },
-            info(content: ContentType, options?: MessageOptions) {
-                return create(content, { ...options, type: 'info' })
-            },
-            success(content: ContentType, options?: MessageOptions) {
-                return create(content, { ...options, type: 'success' })
-            },
-            warning(content: ContentType, options?: MessageOptions) {
-                return create(content, { ...options, type: 'warning' })
-            },
-            error(content: ContentType, options?: MessageOptions) {
-                return create(content, { ...options, type: 'error' })
-            },
-            loading(content: ContentType, options?: MessageOptions) {
-                return create(content, { ...options, type: 'loading' })
-            },
-            destroyAll
-        };
-
-        provide('m-message', api);
-
-        function create(
-            content: ContentType,
-            options: MessageOptions & { type: MessageType }
-        ): MessageReactive {
-            const { id } = useCachedUid('m-message');
-            const key = id.value;
-            const messageReactive = reactive({
-                ...options,
-                content,
-                key,
-                destroy: () => {
-                    messageRefs.value[key].hide();
-                }
-            });
-
-            messageListRef.value.push(messageReactive);
-            return messageReactive;
-        }
-
-        function destroyAll(): void {
-            //@ts-ignore
-            Object.values(messageRefs.value).forEach((messageRef) => {
-                messageRef.hide();
-            });
-        }
-
-        function onInternalAfterLeave(key: string): void {
-            messageListRef.value = messageListRef.value.filter(
-                (message) => message.key !== key
-            );
-            delete messageRefs.value[key];
-        }
-
-        const classes = computed(() => {
-            return [
-                style.wrapper,
-                // @ts-ignore
-                [style.placement[props.placement]]
-            ]
-        });
-
-        return Object.assign(
-            {
-                messageRefs,
-                messageList: messageListRef,
-                onInternalAfterLeave,
-                classes
-            },
-            api,
-        )
-    }
-});
-</script>
+<template>
+    <slot />
+    <template v-if="messageList.length">
+        <Teleport :to="teleportTo ?? 'body'">
+            <transition
+                type="animation"
+                :enter-active-class="scale.enterActive"
+                :leave-active-class="scale.leaveActive"
+                :enter-from-class="scale.enterFrom"
+                :leave-to-class="scale.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>
+
+<script lang="ts">
+import {
+    ref,
+    reactive,
+    Teleport,
+    defineComponent,
+    provide,
+    computed
+} from 'vue';
+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 { scale } from '../../styles/transitions.css';
+export type MessageProviderInst = MessageApiInjection;
+
+interface PrivateMessageReactive extends MessageReactive {
+    key: string
+}
+
+interface PrivateMessageRef extends MessageReactive {
+    key: string
+    hide: () => void
+}
+
+export default defineComponent({
+    name: 'MMessageProvider',
+    components: {
+        MMessage
+    },
+    props: {
+        teleportTo: {
+            type: String,
+            default: 'body'
+        },
+        placement: {
+            type: String as PropType<MessagePlacement>,
+            default: 'top'
+        },
+        timeout: {
+            type: Number,
+            default: 3000
+        }
+    },
+    setup(props, { slots }) {
+        const messageListRef = ref<PrivateMessageReactive[]>([]);
+        const messageRefs = ref<Record<string, PrivateMessageRef>>({});
+        const api: MessageApiInjection = {
+            create(content: ContentType, options?: MessageOptions) {
+                return create(content, { type: 'default', ...options })
+            },
+            info(content: ContentType, options?: MessageOptions) {
+                return create(content, { ...options, type: 'info' })
+            },
+            success(content: ContentType, options?: MessageOptions) {
+                return create(content, { ...options, type: 'success' })
+            },
+            warning(content: ContentType, options?: MessageOptions) {
+                return create(content, { ...options, type: 'warning' })
+            },
+            error(content: ContentType, options?: MessageOptions) {
+                return create(content, { ...options, type: 'error' })
+            },
+            loading(content: ContentType, options?: MessageOptions) {
+                return create(content, { ...options, type: 'loading' })
+            },
+            destroyAll
+        };
+
+        provide('m-message', api);
+
+        function create(
+            content: ContentType,
+            options: MessageOptions & { type: MessageType }
+        ): MessageReactive {
+            const { id } = useCachedUid('m-message');
+            const key = id.value;
+            const messageReactive = reactive({
+                ...options,
+                content,
+                key,
+                destroy: () => {
+                    messageRefs.value[key].hide();
+                }
+            });
+
+            messageListRef.value.push(messageReactive);
+            return messageReactive;
+        }
+
+        function destroyAll(): void {
+            //@ts-ignore
+            Object.values(messageRefs.value).forEach((messageRef) => {
+                messageRef.hide();
+            });
+        }
+
+        function onInternalAfterLeave(key: string): void {
+            messageListRef.value = messageListRef.value.filter(
+                (message) => message.key !== key
+            );
+            delete messageRefs.value[key];
+        }
+
+        const classes = computed(() => {
+            return [
+                style.wrapper,
+                // @ts-ignore
+                [style.placement[props.placement]]
+            ]
+        });
+
+        return Object.assign(
+            {
+                messageRefs,
+                messageList: messageListRef,
+                onInternalAfterLeave,
+                classes,
+                scale
+            },
+            api,
+        )
+    }
+});
+</script>