@teammodlr/ui-kit 2.3.12 → 2.3.15

package/lib/nuxt.js

@@ -1,35 +1,35 @@
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit';
-import { fileURLToPath } from 'node:url';
-
-export default defineNuxtModule({
-    meta: {
-        name: '@teammodlr/ui-kit',
-        configKey: 'modlr',
-        compatibility: {
-            nuxt: '^3.0.0-rc.1'
-        }
-    },
-    defaults: {
-        prefix: 'M'
-    },
-    async setup(options, nuxt) {
-        // Create resolver to resolve relative paths
-        const { resolve } = createResolver(import.meta.url);
-
-        nuxt.options.runtimeConfig.public.modlrUiOptions = options;
-
-        // plugin install
-        addPlugin(resolve('./nuxt.plugin.js'));
-
-        // nuxt install
-        nuxt.hook('components:dirs', dirs => {
-            dirs.push({
-                path: fileURLToPath(
-                    new URL('../src/components', import.meta.url)
-                ),
-                extensions: ['vue', 'tsx'],
-                prefix: options?.prefix ? options?.prefix : 'M'
-            });
-        });
-    }
-});
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit';
+import { fileURLToPath } from 'node:url';
+
+export default defineNuxtModule({
+    meta: {
+        name: '@teammodlr/ui-kit',
+        configKey: 'modlr',
+        compatibility: {
+            nuxt: '^3.0.0-rc.1'
+        }
+    },
+    defaults: {
+        prefix: 'M'
+    },
+    async setup(options, nuxt) {
+        // Create resolver to resolve relative paths
+        const { resolve } = createResolver(import.meta.url);
+
+        nuxt.options.runtimeConfig.public.modlrUiOptions = options;
+
+        // plugin install
+        addPlugin(resolve('./nuxt.plugin.js'));
+
+        // nuxt install
+        nuxt.hook('components:dirs', dirs => {
+            dirs.push({
+                path: fileURLToPath(
+                    new URL('../src/components', import.meta.url)
+                ),
+                extensions: ['vue', 'tsx'],
+                prefix: options?.prefix ? options?.prefix : 'M'
+            });
+        });
+    }
+});

package/lib/nuxt.plugin.js

@@ -1,8 +1,8 @@
-import { defineNuxtPlugin } from '#app';
-import create from '../create';
-
-export default defineNuxtPlugin(nuxtApp => {
-    const UI = create(nuxtApp.$config.modlrUiOptions);
-
-    nuxtApp.vueApp.use(UI);
-});
+import { defineNuxtPlugin } from '#app';
+import create from '../create';
+
+export default defineNuxtPlugin(nuxtApp => {
+    const UI = create(nuxtApp.$config.modlrUiOptions);
+
+    nuxtApp.vueApp.use(UI);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.3.12",
+  "version": "2.3.15",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/__storybook__/argTypes.ts

@@ -1,53 +1,53 @@
-import { placementWhileList } from '../composables/usePopper';
-
-export const sizeArgType = () => ({
-    size: {
-        options: ['xs', 'sm', 'md', 'lg', 'xl'],
-        control: {
-            type: 'select',
-            labels: {
-                ['Extra Small']: 'xs',
-                ['Small']: 'sm',
-                ['Medium']: 'md',
-                ['Large']: 'lg',
-                ['Extra Large']: 'xl'
-            }
-        }
-    }
-});
-
-export const colorArgType = () => ({
-    color: {
-        options: ['white', 'black', 'green', 'red', 'yellow', 'blue'],
-        control: {
-            type: 'select'
-        }
-    }
-});
-
-export const variantArgType = () => ({
-    variant: {
-        options: [
-            'default',
-            'tertiary',
-            'primary',
-            'dark',
-            'success',
-            'warning',
-            'error'
-        ],
-        control: {
-            type: 'select',
-            default: 'default'
-        }
-    }
-});
-
-export const popperPositionArgType = () => ({
-    placement: {
-        options: placementWhileList,
-        control: {
-            type: 'select'
-        }
-    }
-});
+import { placementWhileList } from '../composables/usePopper';
+
+export const sizeArgType = () => ({
+    size: {
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+        control: {
+            type: 'select',
+            labels: {
+                ['Extra Small']: 'xs',
+                ['Small']: 'sm',
+                ['Medium']: 'md',
+                ['Large']: 'lg',
+                ['Extra Large']: 'xl'
+            }
+        }
+    }
+});
+
+export const colorArgType = () => ({
+    color: {
+        options: ['white', 'black', 'green', 'red', 'yellow', 'blue'],
+        control: {
+            type: 'select'
+        }
+    }
+});
+
+export const variantArgType = () => ({
+    variant: {
+        options: [
+            'default',
+            'tertiary',
+            'primary',
+            'dark',
+            'success',
+            'warning',
+            'error'
+        ],
+        control: {
+            type: 'select',
+            default: 'default'
+        }
+    }
+});
+
+export const popperPositionArgType = () => ({
+    placement: {
+        options: placementWhileList,
+        control: {
+            type: 'select'
+        }
+    }
+});

package/src/__storybook__/createStory.ts

@@ -1,15 +1,15 @@
-import { h } from 'vue';
-import type { Component } from 'vue';
-
-export const createStory =
-    (component: Component, storyArgs: { classes?: string } = {}) =>
-    (args: any) => ({
-        setup: () => () =>
-            h(
-                'div',
-                {
-                    class: `storybook-example ${storyArgs.classes || ''}`
-                },
-                [h(component, args)]
-            )
-    });
+import { h } from 'vue';
+import type { Component } from 'vue';
+
+export const createStory =
+    (component: Component, storyArgs: { classes?: string } = {}) =>
+    (args: any) => ({
+        setup: () => () =>
+            h(
+                'div',
+                {
+                    class: `storybook-example ${storyArgs.classes || ''}`
+                },
+                [h(component, args)]
+            )
+    });

package/src/__storybook__/index.ts

@@ -1,2 +1,2 @@
-export * from './createStory';
-export * from './argTypes';
+export * from './createStory';
+export * from './argTypes';

package/src/components/avatar/Avatar.vue

@@ -1,110 +1,110 @@
-<template>
-    <span
-        :class="classes"
-        ref="avatar"
-    >
-        <MImage
-            v-bind="$attrs"
-            :class="imageClass"
-            v-if="(src || srcSet) && imageExists"
-            :src="src"
-            :alt="src"
-            :srcset="srcSet"
-            @error="handleImageLoadError"
-            />
-        <slot v-else />
-    </span>
-</template>
-
-<script lang="ts">
-import type {PropType} from 'vue';
-import {computed, defineComponent, inject, onMounted, ref} from 'vue';
-import MImage from '../image/Image.vue';
-import * as style from "./style";
-import type {Size} from "../../types/props";
-import {AVATAR_GROUP_STATE} from "../avatargroup/symbol";
-
-export default defineComponent({
-    name: "MAvatar",
-    components: {
-        MImage,
-    },
-    props: {
-        src: {
-            type: String,
-            default: ""
-        },
-        srcSet: {
-            type: String,
-            default: ""
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        },
-        rounded: {
-            type: Boolean,
-            default: false
-        }
-    },
-    emits: {
-        error: (e: Event) => true
-    },
-    setup(props, { emit }) {
-        const avatarGroup = inject(AVATAR_GROUP_STATE, undefined);
-        const avatar = ref<HTMLElement | null>(null);
-        const imageExists = ref(true);
-        const sizeValue = ref<Size>('md');
-
-        const groupSize = computed(() => {
-            return avatarGroup?.size
-        });
-
-        const groupRounded = computed(() => {
-            return avatarGroup?.rounded
-        });
-
-        const inGroup = computed(() => {
-            return !!avatarGroup
-        });
-
-        const size = computed<Size>(() => {
-            return groupSize.value || props.size
-        });
-
-        const rounded = computed(() => {
-            return groupRounded.value || props.rounded
-        })
-
-        const classes = computed(() => {
-            return [
-                style.base,
-                [style.size[size.value]],
-                {
-                    [style.outline]: inGroup.value,
-                    [style.rounded]: rounded.value,
-                }
-            ]
-        });
-
-        const handleImageLoadError = (e: Event) => {
-            imageExists.value = false;
-            emit('error', e);
-        };
-
-        onMounted(() => {
-            sizeValue.value = groupSize.value || props.size;
-        });
-
-        return {
-            avatar,
-            avatarGroup,
-            classes,
-            imageExists,
-            imageClass: style.image,
-
-            handleImageLoadError
-        }
-    }
-})
-</script>
+<template>
+    <span
+        :class="classes"
+        ref="avatar"
+    >
+        <MImage
+            v-bind="$attrs"
+            :class="imageClass"
+            v-if="(src || srcSet) && imageExists"
+            :src="src"
+            :alt="src"
+            :srcset="srcSet"
+            @error="handleImageLoadError"
+            />
+        <slot v-else />
+    </span>
+</template>
+
+<script lang="ts">
+import type {PropType} from 'vue';
+import {computed, defineComponent, inject, onMounted, ref} from 'vue';
+import MImage from '../image/Image.vue';
+import * as style from "./style";
+import type {Size} from "../../types/props";
+import {AVATAR_GROUP_STATE} from "../avatargroup/symbol";
+
+export default defineComponent({
+    name: "MAvatar",
+    components: {
+        MImage,
+    },
+    props: {
+        src: {
+            type: String,
+            default: ""
+        },
+        srcSet: {
+            type: String,
+            default: ""
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: {
+        error: (e: Event) => true
+    },
+    setup(props, { emit }) {
+        const avatarGroup = inject(AVATAR_GROUP_STATE, undefined);
+        const avatar = ref<HTMLElement | null>(null);
+        const imageExists = ref(true);
+        const sizeValue = ref<Size>('md');
+
+        const groupSize = computed(() => {
+            return avatarGroup?.size
+        });
+
+        const groupRounded = computed(() => {
+            return avatarGroup?.rounded
+        });
+
+        const inGroup = computed(() => {
+            return !!avatarGroup
+        });
+
+        const size = computed<Size>(() => {
+            return groupSize.value || props.size
+        });
+
+        const rounded = computed(() => {
+            return groupRounded.value || props.rounded
+        })
+
+        const classes = computed(() => {
+            return [
+                style.base,
+                [style.size[size.value]],
+                {
+                    [style.outline]: inGroup.value,
+                    [style.rounded]: rounded.value,
+                }
+            ]
+        });
+
+        const handleImageLoadError = (e: Event) => {
+            imageExists.value = false;
+            emit('error', e);
+        };
+
+        onMounted(() => {
+            sizeValue.value = groupSize.value || props.size;
+        });
+
+        return {
+            avatar,
+            avatarGroup,
+            classes,
+            imageExists,
+            imageClass: style.image,
+
+            handleImageLoadError
+        }
+    }
+})
+</script>

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

@@ -1,6 +1,6 @@
-<template>
-    <MAvatar
-        src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
-        variant="rounded"
-        />
-</template>
+<template>
+    <MAvatar
+        src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+        variant="rounded"
+        />
+</template>

package/src/components/avatar/examples/custom-size.vue

@@ -1,7 +1,7 @@
-<template>
-    <MAvatar
-        src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
-        variant="rounded"
-        size="100px"
-        />
-</template>
+<template>
+    <MAvatar
+        src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+        variant="rounded"
+        size="100px"
+        />
+</template>

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

@@ -1,25 +1,25 @@
-import MAvatar from '../Avatar.vue';
-
-import {
-    MAvatarBasic,
-    MAvatarSize,
-    MAvatarCustomSize,
-    MAvatarVariant,
-    MAvatarSlot
-} from './index';
-
-import { colorArgType, createStory, sizeArgType } from '../../../__storybook__';
-
-export default {
-    component: MAvatar,
-    title: 'Components/Avatar',
-    argTypes: {
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MAvatarBasic);
-export const Sizes = createStory(MAvatarSize);
-export const CustomSize = createStory(MAvatarCustomSize);
-export const Variants = createStory(MAvatarVariant);
-export const Slots = createStory(MAvatarSlot);
+import MAvatar from '../Avatar.vue';
+
+import {
+    MAvatarBasic,
+    MAvatarSize,
+    MAvatarCustomSize,
+    MAvatarVariant,
+    MAvatarSlot
+} from './index';
+
+import { colorArgType, createStory, sizeArgType } from '../../../__storybook__';
+
+export default {
+    component: MAvatar,
+    title: 'Components/Avatar',
+    argTypes: {
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MAvatarBasic);
+export const Sizes = createStory(MAvatarSize);
+export const CustomSize = createStory(MAvatarCustomSize);
+export const Variants = createStory(MAvatarVariant);
+export const Slots = createStory(MAvatarSlot);

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

@@ -1,5 +1,5 @@
-export { default as MAvatarBasic } from './basic.vue';
-export { default as MAvatarSize } from './sizes.vue';
-export { default as MAvatarCustomSize } from './custom-size.vue';
-export { default as MAvatarVariant } from './variants.vue';
-export { default as MAvatarSlot } from './slots.vue';
+export { default as MAvatarBasic } from './basic.vue';
+export { default as MAvatarSize } from './sizes.vue';
+export { default as MAvatarCustomSize } from './custom-size.vue';
+export { default as MAvatarVariant } from './variants.vue';
+export { default as MAvatarSlot } from './slots.vue';

package/src/components/avatar/examples/sizes.vue

@@ -1,33 +1,33 @@
-<template>
-    <div>
-        <MAvatar
-            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
-            variant="rounded"
-            size="xs"
-            /><br /><br />
-
-        <MAvatar
-            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
-            variant="rounded"
-            size="sm"
-            /><br /><br />
-
-        <MAvatar
-            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
-            variant="rounded"
-            size="md"
-            /><br /><br />
-
-        <MAvatar
-            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
-            variant="rounded"
-            size="lg"
-            /><br /><br />
-
-        <MAvatar
-            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
-            variant="rounded"
-            size="xl"
-            /><br /><br />
-    </div>
-</template>
+<template>
+    <div>
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="xs"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="sm"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="md"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="lg"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="xl"
+            /><br /><br />
+    </div>
+</template>

package/src/components/avatar/examples/slots.vue

@@ -1,8 +1,8 @@
-<template>
-    <MAvatar
-        variant="rounded"
-        style="background-color: red; color: white;"
-    >
-        BV
-    </MAvatar>
-</template>
+<template>
+    <MAvatar
+        variant="rounded"
+        style="background-color: red; color: white;"
+    >
+        BV
+    </MAvatar>
+</template>