@teammodlr/ui-kit 2.3.12 → 2.3.15

package/src/components/messageprovider/MessageProvider.vue

@@ -1,152 +1,152 @@
-<template>
-    <slot />
-    <template v-if="messageList.length > 0">
-        <Teleport to="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" />
-                </div>
-            </transition>
-        </Teleport>
-    </template>
-</template>
-
-<script lang="ts">
-import {
-    ref,
-    reactive,
-    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 * as style from './style';
-import { modalScale } from '../../styles/transitions.css';
-
-interface PrivateMessageReactive extends MessageReactive {
-    key: string;
-}
-
-interface PrivateMessageRef extends MessageReactive {
-    key: string;
-    hide: () => void;
-}
-
-export default defineComponent({
-    name: 'MMessageProvider',
-    components: {
-        MMessage
-    },
-    props: {
-        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 key = Math.random()
-                .toString(16)
-                .slice(2, 2 + 12);
-            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,
-                modalScale
-            },
-            api
-        );
-    }
-});
-</script>
+<template>
+    <slot />
+    <template v-if="messageList.length > 0">
+        <Teleport to="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" />
+                </div>
+            </transition>
+        </Teleport>
+    </template>
+</template>
+
+<script lang="ts">
+import {
+    ref,
+    reactive,
+    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 * as style from './style';
+import { modalScale } from '../../styles/transitions.css';
+
+interface PrivateMessageReactive extends MessageReactive {
+    key: string;
+}
+
+interface PrivateMessageRef extends MessageReactive {
+    key: string;
+    hide: () => void;
+}
+
+export default defineComponent({
+    name: 'MMessageProvider',
+    components: {
+        MMessage
+    },
+    props: {
+        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 key = Math.random()
+                .toString(16)
+                .slice(2, 2 + 12);
+            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,
+                modalScale
+            },
+            api
+        );
+    }
+});
+</script>

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

@@ -1,70 +1,70 @@
-<template>
-    <div>
-        <button @click="showSuccess">Success</button>
-        <button @click="showInfo">Info</button>
-        <button @click="showWarning">Warning</button>
-        <button @click="showError">Error</button>
-        <hr />
-
-        <div>
-            <button @click="showMessage">Success</button><br />
-
-            <button @click="updateNumber">+1</button>
-
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { MessageReactive } from '../types';
-import { useMessage } from '../useMessage';
-
-const message = useMessage();
-
-const number = ref(0);
-let msg: MessageReactive | null = null;
-
-const showMessage = () => {
-    msg = message.loading(`Loading`, {
-        timeout: 0
-    });
-};
-
-function updateNumber() {
-    if (msg) {
-        // number.value++;
-        msg.content = `Saved Successfully`;
-        msg.type = 'success';
-        msg.timeout = 3000;
-    }
-}
-
-
-const showSuccess = () => {
-    message.success(`Hello World`, {
-        timeout: 3000
-    });
-};
-
-const showInfo = () => {
-    message.info(`Hello World`, {
-        timeout: 3000
-    });
-};
-
-const showWarning = () => {
-    message.warning(`Hello World`, {
-        timeout: 3000
-    });
-};
-
-const showError = () => {
-    message.error(`Hello World`, {
-        timeout: 3000
-    });
-};
-
-
-
-</script>
+<template>
+    <div>
+        <button @click="showSuccess">Success</button>
+        <button @click="showInfo">Info</button>
+        <button @click="showWarning">Warning</button>
+        <button @click="showError">Error</button>
+        <hr />
+
+        <div>
+            <button @click="showMessage">Success</button><br />
+
+            <button @click="updateNumber">+1</button>
+
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { MessageReactive } from '../types';
+import { useMessage } from '../useMessage';
+
+const message = useMessage();
+
+const number = ref(0);
+let msg: MessageReactive | null = null;
+
+const showMessage = () => {
+    msg = message.loading(`Loading`, {
+        timeout: 0
+    });
+};
+
+function updateNumber() {
+    if (msg) {
+        // number.value++;
+        msg.content = `Saved Successfully`;
+        msg.type = 'success';
+        msg.timeout = 3000;
+    }
+}
+
+
+const showSuccess = () => {
+    message.success(`Hello World`, {
+        timeout: 3000
+    });
+};
+
+const showInfo = () => {
+    message.info(`Hello World`, {
+        timeout: 3000
+    });
+};
+
+const showWarning = () => {
+    message.warning(`Hello World`, {
+        timeout: 3000
+    });
+};
+
+const showError = () => {
+    message.error(`Hello World`, {
+        timeout: 3000
+    });
+};
+
+
+
+</script>

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

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

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

@@ -1,2 +1,2 @@
-export { default as MMessageProviderBasic } from './basic.vue';
-export { default as MMessageProviderUpdate } from './update.vue';
+export { default as MMessageProviderBasic } from './basic.vue';
+export { default as MMessageProviderUpdate } from './update.vue';

package/src/components/messageprovider/examples/update.vue

@@ -1,34 +1,34 @@
-<template>
-    <div>
-        <button @click="showMessage">Success</button><br />
-
-        <button @click="updateNumber">+1</button>
-
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { MessageReactive } from '../types';
-import { useMessage } from '../useMessage';
-
-const message = useMessage();
-
-const number = ref(0);
-let msg: MessageReactive | null = null;
-
-const showMessage = () => {
-    msg = message.success(`Hello World`, {
-        timeout: 3000
-    });
-};
-
-function updateNumber() {
-    if (msg) {
-        number.value++;
-        msg.content = `Hello World ${number.value}`;
-    }
-}
-
-
-</script>
+<template>
+    <div>
+        <button @click="showMessage">Success</button><br />
+
+        <button @click="updateNumber">+1</button>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { MessageReactive } from '../types';
+import { useMessage } from '../useMessage';
+
+const message = useMessage();
+
+const number = ref(0);
+let msg: MessageReactive | null = null;
+
+const showMessage = () => {
+    msg = message.success(`Hello World`, {
+        timeout: 3000
+    });
+};
+
+function updateNumber() {
+    if (msg) {
+        number.value++;
+        msg.content = `Hello World ${number.value}`;
+    }
+}
+
+
+</script>

package/src/components/messageprovider/examples/wrapper.vue

@@ -1,9 +1,9 @@
-<template>
-    <m-message-provider placement="top-left">
-        <slot />
-    </m-message-provider>
-</template> 
-
-<script lang="ts" setup>
-import MMessageProvider from '../MessageProvider.vue';
-</script>
+<template>
+    <m-message-provider placement="top-left">
+        <slot />
+    </m-message-provider>
+</template> 
+
+<script lang="ts" setup>
+import MMessageProvider from '../MessageProvider.vue';
+</script>