@teammodlr/ui-kit 1.0.2

package/src/components/link/Link.css

@@ -0,0 +1,147 @@
+.m-link {
+    --link-color: var(--blue);
+    --link-color-hover: var(--blue-hover);
+    --link-color-focus: var(--blue-focus);
+    --link-color-visited: var(--blue-focus);
+    color: var(--link-color);
+    text-decoration: none;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-link--underline {
+    text-decoration: underline;
+}
+
+.m-link--block {
+    display: flex;
+}
+
+.m-link:visited {
+    color: var(--link-color-visited);
+}
+
+.m-link:hover {
+    color: var(--link-color-hover);
+    text-decoration: underline;
+}
+
+.m-link:focus,
+.m-link:active {
+    color: var(--link-color-focus);
+}
+
+.m-link--blue {
+    --link-color: var(--blue);
+    --link-color-hover: var(--blue-hover);
+    --link-color-focus: var(--blue-focus);
+    --link-color-visited: var(--blue-focus);
+}
+
+.m-link--blue:visited {
+    --link-color: var(--blue);
+    --link-color-hover: var(--blue-hover);
+    --link-color-focus: var(--blue-focus);
+    --link-color-visited: var(--blue-focus);
+}
+
+.m-link--blue:hover {
+    --link-color: var(--blue-hover);
+    --link-color-hover: var(--blue-hover);
+    --link-color-focus: var(--blue-focus);
+    --link-color-visited: var(--blue-focus);
+}
+
+.m-link--blue:focus,
+.m-link--blue:active {
+    --link-color: var(--blue-focus);
+    --link-color-hover: var(--blue-focus);
+    --link-color-focus: var(--blue-focus);
+    --link-color-visited: var(--blue-focus);
+}
+
+.m-link--green {
+    --link-color: var(--green);
+    --link-color-hover: var(--green-hover);
+    --link-color-focus: var(--green-focus);
+    --link-color-visited: var(--green-focus);
+}
+
+.m-link--green:visited {
+    --link-color: var(--green);
+    --link-color-hover: var(--green-hover);
+    --link-color-focus: var(--green-focus);
+    --link-color-visited: var(--green-focus);
+}
+
+.m-link--green:hover {
+    --link-color: var(--green-hover);
+    --link-color-hover: var(--green-hover);
+    --link-color-focus: var(--green-focus);
+    --link-color-visited: var(--green-focus);
+}
+
+.m-link--green:focus,
+.m-link--green:active {
+    --link-color: var(--green-focus);
+    --link-color-hover: var(--green-focus);
+    --link-color-focus: var(--green-focus);
+    --link-color-visited: var(--green-focus);
+}
+
+.m-link--red {
+    --link-color: var(--red);
+    --link-color-hover: var(--red-hover);
+    --link-color-focus: var(--red-focus);
+    --link-color-visited: var(--red-focus);
+}
+
+.m-link--red:visited {
+    --link-color: var(--red);
+    --link-color-hover: var(--red-hover);
+    --link-color-focus: var(--red-focus);
+    --link-color-visited: var(--red-focus);
+}
+
+.m-link--red:hover {
+    --link-color: var(--red-hover);
+    --link-color-hover: var(--red-hover);
+    --link-color-focus: var(--red-focus);
+    --link-color-visited: var(--red-focus);
+}
+
+.m-link--red:focus,
+.m-link--red:active {
+    --link-color: var(--red-focus);
+    --link-color-hover: var(--red-focus);
+    --link-color-focus: var(--red-focus);
+    --link-color-visited: var(--red-focus);
+}
+
+.m-link--yellow {
+    --link-color: var(--yellow);
+    --link-color-hover: var(--yellow-hover);
+    --link-color-focus: var(--yellow-focus);
+    --link-color-visited: var(--yellow-focus);
+}
+
+.m-link--yellow:visited {
+    --link-color: var(--yellow);
+    --link-color-hover: var(--yellow-hover);
+    --link-color-focus: var(--yellow-focus);
+    --link-color-visited: var(--yellow-focus);
+}
+
+.m-link--yellow:hover {
+    --link-color: var(--yellow-hover);
+    --link-color-hover: var(--yellow-hover);
+    --link-color-focus: var(--yellow-focus);
+    --link-color-visited: var(--yellow-focus);
+}
+
+.m-link--yellow:focus,
+.m-link--yellow:active {
+    --link-color: var(--yellow-focus);
+    --link-color-hover: var(--yellow-focus);
+    --link-color-focus: var(--yellow-focus);
+    --link-color-visited: var(--yellow-focus);
+}

package/src/components/link/Link.vue

@@ -0,0 +1,54 @@
+<template>
+    <component :is="tag" :to="to" :class="computedClasses" :disabled="disabled">
+        <slot />
+    </component>
+</template>
+  
+<script lang="ts">
+import type { Color } from "@/types/props";
+import { computed, defineComponent, type PropType } from "vue";
+
+export default defineComponent({
+    name: "MLink",
+    props: {
+        color: {
+            type: String as PropType<Color>
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        block: {
+            type: Boolean,
+            default: false
+        },
+        underline: {
+            type: Boolean,
+            default: false
+        },
+        to: [String, Object]
+    },
+    setup(props) {
+        const computedClasses = computed(() => {
+            return [
+                'm-link',
+                {
+                    [`m-link--${props.color}`]: props.color,
+                    'm-link--underline': props.underline,
+                    'm-link--block': props.block,
+                    'm-link--disabled': props.disabled,
+                    'm-link--external': tag.value === 'a'
+                }
+            ]
+        });
+
+        const tag = computed(() => (props.to ? 'router-link' : 'a'));
+
+        return {
+            computedClasses,
+            tag
+        }
+    }
+})
+</script>
+  

package/src/components/messageprovider/Message.vue

@@ -0,0 +1,76 @@
+<template>
+    <div 
+        v-if="show"
+        class="m-message__wrapper"
+    >
+        <div class="m-message">
+            {{ content }}
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import type { PropType } from 'vue';
+
+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'
+        },
+        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)
+                }
+            }
+        }
+
+        return {
+            show: showRef,
+            hide,
+        }
+    }
+})
+</script>

package/src/components/messageprovider/MessageProvider.css

@@ -0,0 +1,36 @@
+.m-message-provider__container {
+    z-index: 5000;
+    position: fixed;
+    height: 0;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.m-message-provider__container--top {
+    top: 12px;
+    left: 0;
+    right: 0;
+}
+
+.m-message__wrapper {
+    margin: 0 0 8px 0;
+    z-index: 0;
+    transform-origin: top center;
+    display: flex;
+    align-items: center;
+}
+
+.m-message {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    border-radius: 3px;
+    flex-wrap: nowrap;
+    max-width: 720px;
+    color: var(--gray-700);
+    background-color: var(--white);
+    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}

package/src/components/messageprovider/MessageProvider.vue

@@ -0,0 +1,142 @@
+<template>
+    <slot />
+    <template v-if="messageList.length">
+        <Teleport :to="teleportTo ?? 'body'">
+            <div :class="[
+                `m-message-provider__container`,
+                `m-message-provider__container--${placement}`
+            ]">
+                <MMessage v-for="message in messageList" 
+                    :key="message.key" 
+                    :internalKey="message.key"
+                    :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
+} from 'vue';
+import type { MessageType, MessageReactive, MessageOptions, MessageApiInjection, ContentType } from './types';
+import type { PropType } from 'vue';
+import MMessage from './Message.vue';
+import { useCachedUid } from '@/composables/useCachedUid';
+
+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<
+                | 'top'
+                | 'top-left'
+                | 'top-right'
+                | 'bottom'
+                | 'bottom-left'
+                | 'bottom-right'
+            >,
+            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];
+        }
+
+        return Object.assign(
+            {
+                messageRefs,
+                messageList: messageListRef,
+                onInternalAfterLeave
+            },
+            api
+        )
+    }
+});
+</script>

package/src/components/messageprovider/types.ts

@@ -0,0 +1,39 @@
+import type { VNodeChild } from 'vue';
+
+export type ContentType = string;
+export type MessageType =
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'loading'
+    | 'default'
+
+export type MessageRenderMessage = (props: any) => VNodeChild
+
+export interface MessageOptions {
+    type?: MessageType
+    render?: MessageRenderMessage
+    timeout?: number
+    closable?: boolean
+    onClose?: () => void
+}
+
+export interface MessageReactive {
+    content: ContentType
+    timeout?: number
+    closable?: boolean
+    type: MessageType
+    onClose?: () => void
+    destroy: () => void
+}
+
+export interface MessageApiInjection {
+    create: (content: ContentType, options?: MessageOptions) => MessageReactive
+    info: (content: ContentType, options?: MessageOptions) => MessageReactive
+    success: (content: ContentType, options?: MessageOptions) => MessageReactive
+    warning: (content: ContentType, options?: MessageOptions) => MessageReactive
+    error: (content: ContentType, options?: MessageOptions) => MessageReactive
+    loading: (content: ContentType, options?: MessageOptions) => MessageReactive
+    destroyAll: () => void
+}

package/src/components/messageprovider/useMessage.ts

@@ -0,0 +1,12 @@
+import { inject } from 'vue'
+import type { MessageApiInjection } from './types'
+
+export function useMessage(): MessageApiInjection {
+    const api = inject('m-message', null);
+
+    if(api === null) {
+        throw new Error('m-message api is not provided, ensure the component is wrapped in <m-message-provider />.');
+    }
+
+    return api;
+}