@teammodlr/ui-kit 2.0.24 → 2.0.27

package/src/components/avatar/Avatar.vue

@@ -1,109 +1,109 @@
-<template>
-    <span 
-        :class="classes"
-        ref="avatar"
-    >
-        <MImage
-            :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
+            :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,28 +1,28 @@
-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,7 +1,7 @@
-<template>
-    <MAvatar
-        variant="rounded"
-    >
-        BV
-    </MAvatar>
-</template>
+<template>
+    <MAvatar
+        variant="rounded"
+    >
+        BV
+    </MAvatar>
+</template>

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

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

package/src/components/avatar/style/Avatar.css.ts

@@ -1,92 +1,92 @@
-import { createVar, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
-
-const sizes = {
-    xs: '16px',
-    sm: '24px',
-    md: '32px',
-    lg: '40px',
-    xl: '96px',
-};
-
-const borderRadiuses = {
-    xs: '2px',
-    sm: '3px',
-    md: '4px',
-    lg: '6px',
-    xl: '8px',
-};
-
-export const vars = {
-    size: createVar(),
-    radius: createVar(),
-};
-
-export const base = style({
-    width: vars.size,
-    height: vars.size,
-    borderRadius: vars.radius,
-    backgroundColor: themeVars.color.gray[300],
-    boxSizing: 'content-box',
-    cursor: 'inherit',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    outline: 'none',
-    overflow: 'hidden',
-    position: 'static',
-    border: 0,
-    padding: themeVars.space[0],
-    margin: themeVars.space[1],
-    color: themeVars.color.gray[500],
-    fontSize: themeVars.fontSize.small,
-    alignItems: 'center'
-});
-
-export const size = styleVariants({
-    xs: {
-        vars: {
-            [vars.size]: sizes.xs,
-            [vars.radius]: borderRadiuses.xs,
-        }
-    },
-    sm: {
-        vars: {
-            [vars.size]: sizes.sm,
-            [vars.radius]: borderRadiuses.sm,
-        },
-    },
-    md: {
-        vars: {
-            [vars.size]: sizes.md,
-            [vars.radius]: borderRadiuses.md,
-        },
-    },
-    lg: {
-        vars: {
-            [vars.size]: sizes.lg,
-            [vars.radius]: borderRadiuses.lg,
-        },
-    },
-    xl: {
-        vars: {
-            [vars.size]: sizes.xl,
-            [vars.radius]: borderRadiuses.xl,
-        },
-    },
-});
-
-export const image = style({
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    flex: '1 1 100%'
-})
-
-export const rounded = style({
-    borderRadius: '9999px',
-});
-
-export const outline = style({
-    boxShadow: '0 0 0 2px #FFF'
-});
+import { createVar, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+
+const sizes = {
+    xs: '16px',
+    sm: '24px',
+    md: '32px',
+    lg: '40px',
+    xl: '96px',
+};
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+export const vars = {
+    size: createVar(),
+    radius: createVar(),
+};
+
+export const base = style({
+    width: vars.size,
+    height: vars.size,
+    borderRadius: vars.radius,
+    backgroundColor: themeVars.color.gray[300],
+    boxSizing: 'content-box',
+    cursor: 'inherit',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    outline: 'none',
+    overflow: 'hidden',
+    position: 'static',
+    border: 0,
+    padding: themeVars.space[0],
+    margin: themeVars.space[1],
+    color: themeVars.color.gray[500],
+    fontSize: themeVars.fontSize.small,
+    alignItems: 'center'
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.size]: sizes.xs,
+            [vars.radius]: borderRadiuses.xs,
+        }
+    },
+    sm: {
+        vars: {
+            [vars.size]: sizes.sm,
+            [vars.radius]: borderRadiuses.sm,
+        },
+    },
+    md: {
+        vars: {
+            [vars.size]: sizes.md,
+            [vars.radius]: borderRadiuses.md,
+        },
+    },
+    lg: {
+        vars: {
+            [vars.size]: sizes.lg,
+            [vars.radius]: borderRadiuses.lg,
+        },
+    },
+    xl: {
+        vars: {
+            [vars.size]: sizes.xl,
+            [vars.radius]: borderRadiuses.xl,
+        },
+    },
+});
+
+export const image = style({
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    flex: '1 1 100%'
+})
+
+export const rounded = style({
+    borderRadius: '9999px',
+});
+
+export const outline = style({
+    boxShadow: '0 0 0 2px #FFF'
+});

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

@@ -1 +1 @@
-export * from './Avatar.css';
+export * from './Avatar.css';

package/src/components/avatargroup/AvatarGroup.css

@@ -1,8 +1,8 @@
-.m-avatar-group .m-avatar:not(:last-child) {
-    margin-right: calc(0px - 10px);
-}
-
-
-.m-avatar-group .m-avatar {
-    border: 2px solid var(--white);
-}
+.m-avatar-group .m-avatar:not(:last-child) {
+    margin-right: calc(0px - 10px);
+}
+
+
+.m-avatar-group .m-avatar {
+    border: 2px solid var(--white);
+}