@teammodlr/ui-kit 1.0.2 → 1.0.4

package/src/components/link/Link.css

@@ -1,147 +0,0 @@
-.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

@@ -1,54 +0,0 @@
-<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

@@ -1,76 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-.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

@@ -1,142 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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;
-}