@teammodlr/ui-kit 1.0.4 → 1.0.5

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/examples/basic.vue

@@ -0,0 +1,19 @@
+<template>
+    <button @click="showMessage">Show</button>
+</template>
+
+<script lang="ts" setup>
+import { useMessage } from '../useMessage';
+
+const message = useMessage();
+
+const showMessage = () => {
+
+    const timeout = Math.floor(Math.random() * 10) + 1;
+
+    message.create(`Hello World - ${timeout}s`, {
+        timeout: timeout * 1000
+    });
+    
+};
+</script>

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

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

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

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

@@ -0,0 +1,9 @@
+<template>
+    <m-message-provider>
+        <slot />
+    </m-message-provider>
+</template> 
+
+<script lang="ts" setup>
+import MMessageProvider from '../MessageProvider.vue';
+</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;
+}

package/src/components/select/Select.css

@@ -0,0 +1,226 @@
+.m-select__container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.m-select__container:focus {
+    outline: none;
+}
+
+.m-select {
+    --select-height: 40px;
+    --select-padding: 0 8px;
+    --select-font-size: 15px;
+    --select-border-radius: 4px;
+    --select-clear-size: 1.2rem;
+    --select-background-color: var(--white);
+    --select-border-color: var(--gray-200);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: var(--select-height);
+    font-size: var(--select-font-size);
+    background-color: var(--select-background-color);
+    border: 1px solid var(--select-border-color);
+    box-shadow: none;
+    border-radius: var(--select-border-radius);
+    outline: 0;
+    cursor: text;
+    width: 100%;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-select:not(.m-select--disabled):not(.m-select--focused):hover {
+    --select-border-color: var(--gray-400);
+}
+
+.m-select:not(.m-select--disabled):focus,
+.m-select:not(.m-select--disabled):focus-within,
+.m-select:not(.m-select--disabled).m-select--focused {
+    --select-border-color: var(--blue);
+    box-shadow: 0 0 0 2px var(--blue-outline);
+    outline: none;
+}
+
+.m-select.m-select--disabled {
+    --select-border-color: var(--gray-300);
+    --select-background-color: var(--gray-100);
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.m-select__clearable {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 6px;
+}
+
+.m-select .m-select__clearable i.m-icon--close {
+    cursor: pointer;
+    width: var(--select-clear-size);
+    height: var(--select-clear-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    color: var(--gray-500);
+    background-color: transparent;
+    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-select .m-select__clearable i.m-icon--close:hover {
+    color: var(--gray-500);
+    background-color: var(--gray-150);
+}
+
+.m-select i.m-icon--close::before {
+    --close-icon-size: 16px;
+    background-color: currentColor;
+    content: "";
+    width: var(--close-icon-size);
+    height: var(--close-icon-size);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
+    -webkit-mask-position: center center;
+    mask-position: center center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: var(--close-icon-size) var(--close-icon-size);
+    mask-size: var(--close-icon-size) var(--close-icon-size);
+}
+
+.m-select--xs {
+    --select-height: 32px;
+    --select-padding: 0 8px;
+    --select-font-size: 13px;
+    --select-border-radius: 4px;
+    --select-clear-size: 1.2rem;
+}
+
+.m-select--sm {
+    --select-height: 36px;
+    --select-padding: 0 8px;
+    --select-font-size: 14px;
+    --select-border-radius: 4px;
+    --select-clear-size: 1.2rem;
+}
+
+.m-select--md {
+    --select-height: 40px;
+    --select-padding: 0 8px;
+    --select-font-size: 15px;
+    --select-border-radius: 4px;
+    --select-clear-size: 1.2rem;
+}
+
+.m-select--lg {
+    --select-height: 42px;
+    --select-padding: 0 8px;
+    --select-font-size: 16px;
+    --select-border-radius: 4px;
+    --select-clear-size: 1.2rem;
+}
+
+.m-select--xl {
+    --select-height: 46px;
+    --select-padding: 0 8px;
+    --select-font-size: 18px;
+    --select-border-radius: 6px;
+    --select-clear-size: 1.2rem;
+}
+
+.m-select__label {
+    margin-bottom: 5px;
+    color: var(--gray-600);
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.m-select__input {
+    padding: var(--select-padding);
+    font-size: 15px;
+    color: var(--gray-600);
+}
+
+.m-select__help {
+    margin-top: 4px;
+    color: var(--gray-500);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-select__error {
+    margin: 4px 0 8px 0;
+    color: var(--red);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-form .m-select__form {
+    margin-bottom: 16px;
+}
+
+.m-form .m-select__form .m-select__error {
+    margin: 4px 0 0 0;
+}
+
+.m-select__dropdown {
+    z-index: 100;
+    max-height: 400px;
+    min-width: 200px;
+    overflow-y: auto;
+    border-radius: 4px;
+    background-color: var(--white);
+    box-shadow: 0 0 0 1px var(--gray-200), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+}
+
+.m-select__dropdown[data-popper-placement^="bottom-"] {
+    margin-top: 5px!important;
+}
+
+.m-select__dropdown[data-popper-placement^="top-"] {
+    margin-bottom: 5px!important;
+}
+
+.m-select__search {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--white);
+    padding: 6px 6px 0;
+}
+
+.m-select__options {
+    padding: 4px 0;
+}
+
+.m-select__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 8px;
+    margin: 0 4px;
+    font-size: 15px;
+    color: var(--gray-600);
+    cursor: pointer;
+    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 4px;
+}
+
+.m-select__option--selected {
+    color: var(--blue)!important;
+}
+
+.m-select__option--focused {
+    background-color: var(--gray-100);
+}
+
+.m-select__placeholder-text {
+    color: var(--gray-500);
+}