@teammodlr/ui-kit 2.0.24 → 2.0.27

package/src/components/avatargroup/AvatarGroup.vue

@@ -1,71 +1,71 @@
-<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";
+
+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>

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.css

@@ -1,128 +1,128 @@
-.m-badge__wrapper {
-    position: relative;
-}
-
-.m-badge {
-    --badge-border-color: var(--white);
-    --badge-background-color: var(--red);
-    --badge-color: var(--white);
-    --badge-line-height: 15px;
-    --badge-font-size: 10px;
-    --badge-padding: 0px 6px;
-    --badge-border-radius: 8px;
-    --badge-translate-x: 45%;
-    --badge-translate-y: -50%;
-    
-    position: absolute;
-    display: inline-block;
-    border: 1px solid var(--badge-border-color);
-    background-color: var(--badge-background-color);
-    color: var(--badge-color);
-    line-height: var(--badge-line-height);
-    font-size: var(--badge-font-size);
-    padding: var(--badge-padding);
-    border-radius: var(--badge-border-radius);
-}
-
-.m-badge__top-right {
-    --badge-translate-x: 45%;
-    --badge-translate-y: -50%;
-    top: 0;
-    right: 0;
-    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
-}
-
-.m-badge__top-left {
-    --badge-translate-x: -45%;
-    --badge-translate-y: -50%;
-    top: 0;
-    left: 0;
-    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
-}
-
-.m-badge__bottom-right {
-    --badge-translate-x: 50%;
-    --badge-translate-y: 45%;
-    bottom: 0;
-    right: 0;
-    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
-}
-
-.m-badge__bottom-left {
-    --badge-translate-x: -50%;
-    --badge-translate-y: 45%;
-    bottom: 0;
-    left: 0;
-    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
-}
-
-.m-badge--blue {
-    --badge-border-color: var(--blue);
-    --badge-background-color: var(--blue);
-    --badge-color: var(--white);
-}
-
-.m-badge--red {
-    --badge-border-color: var(--red);
-    --badge-background-color: var(--red);
-    --badge-color: var(--white);
-}
-
-.m-badge--green {
-    --badge-border-color: var(--green);
-    --badge-background-color: var(--green);
-    --badge-color: var(--white);
-}
-
-.m-badge--yellow {
-    --badge-border-color: var(--yellow);
-    --badge-background-color: var(--yellow);
-    --badge-color: var(--gray-900);
-}
-
-.m-badge--black {
-    --badge-border-color: var(--gray-900);
-    --badge-background-color: var(--gray-900);
-    --badge-color: var(--white);
-}
-
-.m-badge--white {
-    --badge-border-color: var(--gray-300);
-    --badge-background-color: var(--white);
-    --badge-color: var(--gray-900);
-}
-
-.m-badge--xs {
-    --badge-line-height: 10px;
-    --badge-font-size: 8px;
-    --badge-padding: 0px 4px;
-    --badge-border-radius: 5px;
-}
-
-.m-badge--sm {
-    --badge-line-height: 12px;
-    --badge-font-size: 9px;
-    --badge-padding: 0px 5px;
-    --badge-border-radius: 6px;
-}
-
-.m-badge--md {
-    --badge-line-height: 15px;
-    --badge-font-size: 10px;
-    --badge-padding: 0px 6px;
-    --badge-border-radius: 8px;
-}
-
-.m-badge--lg {
-    --badge-line-height: 18px;
-    --badge-font-size: 12px;
-    --badge-padding: 0px 8px;
-    --badge-border-radius: 10px;
-}
-
-.m-badge--xl {
-    --badge-line-height: 20px;
-    --badge-font-size: 14px;
-    --badge-padding: 0px 10px;
-    --badge-border-radius: 12px;
-}
+.m-badge__wrapper {
+    position: relative;
+}
+
+.m-badge {
+    --badge-border-color: var(--white);
+    --badge-background-color: var(--red);
+    --badge-color: var(--white);
+    --badge-line-height: 15px;
+    --badge-font-size: 10px;
+    --badge-padding: 0px 6px;
+    --badge-border-radius: 8px;
+    --badge-translate-x: 45%;
+    --badge-translate-y: -50%;
+    
+    position: absolute;
+    display: inline-block;
+    border: 1px solid var(--badge-border-color);
+    background-color: var(--badge-background-color);
+    color: var(--badge-color);
+    line-height: var(--badge-line-height);
+    font-size: var(--badge-font-size);
+    padding: var(--badge-padding);
+    border-radius: var(--badge-border-radius);
+}
+
+.m-badge__top-right {
+    --badge-translate-x: 45%;
+    --badge-translate-y: -50%;
+    top: 0;
+    right: 0;
+    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
+}
+
+.m-badge__top-left {
+    --badge-translate-x: -45%;
+    --badge-translate-y: -50%;
+    top: 0;
+    left: 0;
+    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
+}
+
+.m-badge__bottom-right {
+    --badge-translate-x: 50%;
+    --badge-translate-y: 45%;
+    bottom: 0;
+    right: 0;
+    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
+}
+
+.m-badge__bottom-left {
+    --badge-translate-x: -50%;
+    --badge-translate-y: 45%;
+    bottom: 0;
+    left: 0;
+    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
+}
+
+.m-badge--blue {
+    --badge-border-color: var(--blue);
+    --badge-background-color: var(--blue);
+    --badge-color: var(--white);
+}
+
+.m-badge--red {
+    --badge-border-color: var(--red);
+    --badge-background-color: var(--red);
+    --badge-color: var(--white);
+}
+
+.m-badge--green {
+    --badge-border-color: var(--green);
+    --badge-background-color: var(--green);
+    --badge-color: var(--white);
+}
+
+.m-badge--yellow {
+    --badge-border-color: var(--yellow);
+    --badge-background-color: var(--yellow);
+    --badge-color: var(--gray-900);
+}
+
+.m-badge--black {
+    --badge-border-color: var(--gray-900);
+    --badge-background-color: var(--gray-900);
+    --badge-color: var(--white);
+}
+
+.m-badge--white {
+    --badge-border-color: var(--gray-300);
+    --badge-background-color: var(--white);
+    --badge-color: var(--gray-900);
+}
+
+.m-badge--xs {
+    --badge-line-height: 10px;
+    --badge-font-size: 8px;
+    --badge-padding: 0px 4px;
+    --badge-border-radius: 5px;
+}
+
+.m-badge--sm {
+    --badge-line-height: 12px;
+    --badge-font-size: 9px;
+    --badge-padding: 0px 5px;
+    --badge-border-radius: 6px;
+}
+
+.m-badge--md {
+    --badge-line-height: 15px;
+    --badge-font-size: 10px;
+    --badge-padding: 0px 6px;
+    --badge-border-radius: 8px;
+}
+
+.m-badge--lg {
+    --badge-line-height: 18px;
+    --badge-font-size: 12px;
+    --badge-padding: 0px 8px;
+    --badge-border-radius: 10px;
+}
+
+.m-badge--xl {
+    --badge-line-height: 20px;
+    --badge-font-size: 14px;
+    --badge-padding: 0px 10px;
+    --badge-border-radius: 12px;
+}