@teammodlr/ui-kit 2.1.41 → 2.1.44

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

@@ -1,72 +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";
-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>
+<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.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,26 +1,26 @@
-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;
-}
-
-export const AVATAR_GROUP_STATE: InjectionKey<AvatarGroupState> =
-    Symbol('AVATAR_GROUP_STATE');
+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.ts

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