@teammodlr/ui-kit 2.0.29 → 2.0.31

package/src/components/avatargroup/AvatarGroup.vue

@@ -1,71 +1,72 @@
-<template>
-    <ul :class="style.base">
-        <li v-for="(option, index) in avatars" :key="index" :class="style.item">
-            <div style="display: inline-block; position: relative; outline: 0;" :style="{ zIndex: (avatars.length - index)}">
-                <MAvatar :src="option.src" :srcSet="option.srcSet" :alt="option.alt" />
-            </div>
-        </li>
-        <li v-if="options && options.length > max">
-            <MAvatar>
-                +{{ remaining }}
-            </MAvatar>
-        </li>
-    </ul>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent, type PropType, provide, reactive, toRef} from 'vue';
-import * as style from './style';
-import type {AvatarGroupState, Options} from './symbol';
-import type {Size} from "../../types/props";
-import {AVATAR_GROUP_STATE} from "./symbol";
-
-export default defineComponent({
-    name: "MAvatarGroup",
-    components: {
-        MAvatar: () => import('../avatar/Avatar.vue')
-    },
-    props: {
-        options: {
-            type: Array as PropType<Options[]>,
-            default: () => []
-        },
-        max: {
-            type: Number,
-            default: 5
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        },
-        rounded: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup(props) {
-        const state: AvatarGroupState = reactive({
-            size: toRef(props, 'size'),
-            rounded: toRef(props, 'rounded'),
-            max: toRef(props, 'max')
-        })
-        provide(AVATAR_GROUP_STATE, state);
-
-        const avatars = computed(() => {
-            return props.options.slice(0, props.max);
-        });
-
-        const remaining = computed(() => {
-            return props.options.length - props.max;
-        });
-
-        return {
-            style,
-            avatars,
-            remaining
-        }
-    }
-});
-
-
-</script>
+<template>
+    <ul :class="style.base">
+        <li v-for="(option, index) in avatars" :key="index" :class="style.item">
+            <div style="display: inline-block; position: relative; outline: 0;" :style="{ zIndex: (avatars.length - index)}">
+                <MAvatar :src="option.src" :srcSet="option.srcSet" :alt="option.alt" />
+            </div>
+        </li>
+        <li v-if="options && options.length > max">
+            <MAvatar>
+                +{{ remaining }}
+            </MAvatar>
+        </li>
+    </ul>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, type PropType, provide, reactive, toRef} from 'vue';
+import * as style from './style';
+import type {AvatarGroupState, Options} from './symbol';
+import type {Size} from "../../types/props";
+import {AVATAR_GROUP_STATE} from "./symbol";
+import MAvatar from "../avatar/Avatar.vue";
+
+export default defineComponent({
+    name: "MAvatarGroup",
+    components: {
+        MAvatar
+    },
+    props: {
+        options: {
+            type: Array as PropType<Options[]>,
+            default: () => []
+        },
+        max: {
+            type: Number,
+            default: 5
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props) {
+        const state: AvatarGroupState = reactive({
+            size: toRef(props, 'size'),
+            rounded: toRef(props, 'rounded'),
+            max: toRef(props, 'max')
+        })
+        provide(AVATAR_GROUP_STATE, state);
+
+        const avatars = computed(() => {
+            return props.options.slice(0, props.max);
+        });
+
+        const remaining = computed(() => {
+            return props.options.length - props.max;
+        });
+
+        return {
+            style,
+            avatars,
+            remaining
+        }
+    }
+});
+
+
+</script>

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

@@ -1,37 +1,37 @@
-
-
-<template>
-    <MAvatarGroup size="lg" :options="options" rounded />
-</template>
-
-<script setup lang="ts">
-
-const options = [
-    {
-        src: "https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp",
-        srcSet: "",
-        alt: "Avatar"
-    },
-    {
-        src: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
-        srcSet: "",
-        alt: "Avatar"
-    },
-    {
-        src: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
-        srcSet: "",
-        alt: "Avatar"
-    },
-    {
-        src: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
-        srcSet: "",
-        alt: "Avatar"
-    },
-    {
-        src: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
-        srcSet: "",
-        alt: "Avatar"
-    }
-]
-
-</script>
+
+
+<template>
+    <MAvatarGroup size="lg" :options="options" rounded />
+</template>
+
+<script setup lang="ts">
+
+const options = [
+    {
+        src: "https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp",
+        srcSet: "",
+        alt: "Avatar"
+    },
+    {
+        src: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
+        srcSet: "",
+        alt: "Avatar"
+    },
+    {
+        src: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
+        srcSet: "",
+        alt: "Avatar"
+    },
+    {
+        src: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
+        srcSet: "",
+        alt: "Avatar"
+    },
+    {
+        src: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
+        srcSet: "",
+        alt: "Avatar"
+    }
+]
+
+</script>

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

@@ -1,24 +1,24 @@
-import MAvatarGroup from "../AvatarGroup.vue";
-import MAvatar from "../../avatar/Avatar.vue";
-
-import {
-    MAvatarGroupBasic
-} from "./index";
-
-import {
-    createStory,
-    sizeArgType
-} from "../../../__storybook__";
-
-export default {
-    component: MAvatarGroup,
-    subcomponents: {
-        MAvatar
-    },
-    title: 'Components/Avatar Group',
-    argTypes: {
-        ...sizeArgType()
-    }
-}
-
-export const Basic = createStory(MAvatarGroupBasic);
+import MAvatarGroup from "../AvatarGroup.vue";
+import MAvatar from "../../avatar/Avatar.vue";
+
+import {
+    MAvatarGroupBasic
+} from "./index";
+
+import {
+    createStory,
+    sizeArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MAvatarGroup,
+    subcomponents: {
+        MAvatar
+    },
+    title: 'Components/Avatar Group',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MAvatarGroupBasic);

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

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

package/src/components/avatargroup/style/AvatarGroup.css.ts

@@ -1,21 +1,21 @@
-import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
-
-const sizes = {
-    xs: '16px',
-    sm: '24px',
-    md: '32px',
-    lg: '40px',
-    xl: '96px',
-};
-
-export const base = style({
-    display: 'flex',
-    lineHeight: 1,
-    listStyle: 'none',
-    padding: 0
-});
-
-export const item = style({
-    marginRight: '-10px',
-});
+import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+
+const sizes = {
+    xs: '16px',
+    sm: '24px',
+    md: '32px',
+    lg: '40px',
+    xl: '96px',
+};
+
+export const base = style({
+    display: 'flex',
+    lineHeight: 1,
+    listStyle: 'none',
+    padding: 0
+});
+
+export const item = style({
+    marginRight: '-10px',
+});

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

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

package/src/components/avatargroup/symbol.ts

@@ -1,17 +1,17 @@
-import type {InjectionKey} from "vue";
-import type {Size} from "../../types/props";
-
-export type Options = {
-    src: string;
-    srcSet: string;
-    alt: string;
-}
-
-
-export interface AvatarGroupState {
-    max: number;
-    size: Size;
-    rounded: boolean;
-}
-
+import type {InjectionKey} from "vue";
+import type {Size} from "../../types/props";
+
+export type Options = {
+    src: string;
+    srcSet: string;
+    alt: string;
+}
+
+
+export interface AvatarGroupState {
+    max: number;
+    size: Size;
+    rounded: boolean;
+}
+
 export const AVATAR_GROUP_STATE: InjectionKey<AvatarGroupState> = Symbol('AVATAR_GROUP_STATE');

package/src/components/badge/Badge.vue

@@ -1,43 +1,43 @@
-<template>
-    <span :class="baseClass" >
-        <span :class="textClass" secondary>
-            <slot />
-        </span>
-    </span>
-</template>
-
-<script lang="ts">
-import type { Variant } from '../../types/props';
-import { computed, defineComponent, type PropType } from 'vue';
-import * as style from "./style";
-
-export default defineComponent({
-    name: "MBadge",
-    props: {
-        variant: {
-            type: String as PropType<Variant>,
-            default: 'default'
-        },
-        secondary: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup(props) {
-        const baseClass = computed(() => {
-            return [
-                style.base,
-                style.variant[props.variant],
-                {
-                    [style.secondary[props.variant]]: props.secondary
-                }
-            ]
-        });
-
-        return {
-            textClass: style.text,
-            baseClass
-        }
-    }
-})
-</script>
+<template>
+    <span :class="baseClass" >
+        <span :class="textClass" secondary>
+            <slot />
+        </span>
+    </span>
+</template>
+
+<script lang="ts">
+import type { Variant } from '../../types/props';
+import { computed, defineComponent, type PropType } from 'vue';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "MBadge",
+    props: {
+        variant: {
+            type: String as PropType<Variant>,
+            default: 'default'
+        },
+        secondary: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props) {
+        const baseClass = computed(() => {
+            return [
+                style.base,
+                style.variant[props.variant],
+                {
+                    [style.secondary[props.variant]]: props.secondary
+                }
+            ]
+        });
+
+        return {
+            textClass: style.text,
+            baseClass
+        }
+    }
+})
+</script>

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

@@ -1,10 +1,10 @@
-<template>
-    <MBadge secondary>default</MBadge>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const badgeValue = ref(0);
-
-</script>
+<template>
+    <MBadge secondary>default</MBadge>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const badgeValue = ref(0);
+
+</script>

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

@@ -1,21 +1,21 @@
-import MBadge from "../Badge.vue";
-
-import {
-    MBadgeBasic,
-} from "./index";
-
-import {
-    variantArgType,
-    createStory,
-    sizeArgType
-} from "../../../__storybook__";
-
-export default {
-    component: MBadge,
-    title: 'Components/Badge',
-    argTypes: {
-        ...variantArgType()
-    }
-}
-
-export const Basic = createStory(MBadgeBasic);
+import MBadge from "../Badge.vue";
+
+import {
+    MBadgeBasic,
+} from "./index";
+
+import {
+    variantArgType,
+    createStory,
+    sizeArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MBadge,
+    title: 'Components/Badge',
+    argTypes: {
+        ...variantArgType()
+    }
+}
+
+export const Basic = createStory(MBadgeBasic);

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

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