@teammodlr/ui-kit 2.3.12 → 2.3.14

package/src/components/link/Link.vue

@@ -1,54 +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>
+<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/link/examples/basic.vue

@@ -1,3 +1,3 @@
-<template>
-    <MLink href="https://www.google.com">Google</MLink>
-</template>
+<template>
+    <MLink href="https://www.google.com">Google</MLink>
+</template>

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

@@ -1,15 +1,15 @@
-import MLink from '../Link.vue';
-
-import { MLinkBasic } from './index';
-
-import { createStory, colorArgType } from '../../../__storybook__';
-
-export default {
-    component: MLink,
-    title: 'Components/Link',
-    argTypes: {
-        ...colorArgType()
-    }
-};
-
-export const Basic = createStory(MLinkBasic);
+import MLink from '../Link.vue';
+
+import { MLinkBasic } from './index';
+
+import { createStory, colorArgType } from '../../../__storybook__';
+
+export default {
+    component: MLink,
+    title: 'Components/Link',
+    argTypes: {
+        ...colorArgType()
+    }
+};
+
+export const Basic = createStory(MLinkBasic);

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

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

package/src/components/messageprovider/Message.vue

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