@teammodlr/ui-kit 2.1.8 → 2.1.10

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

@@ -1,4 +1,4 @@
-import MAvatar from "../Avatar.vue";
+import MAvatar from '../Avatar.vue';
 
 import {
     MAvatarBasic,
@@ -6,12 +6,9 @@ import {
     MAvatarCustomSize,
     MAvatarVariant,
     MAvatarSlot
-} from "./index";
+} from './index';
 
-import {
-    colorArgType,
-    createStory, sizeArgType
-} from "../../../__storybook__";
+import { colorArgType, createStory, sizeArgType } from '../../../__storybook__';
 
 export default {
     component: MAvatar,
@@ -19,7 +16,7 @@ export default {
     argTypes: {
         ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MAvatarBasic);
 export const Sizes = createStory(MAvatarSize);

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

@@ -1,12 +1,12 @@
-import { createVar, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
+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',
+    xl: '96px'
 };
 
 const borderRadiuses = {
@@ -14,12 +14,12 @@ const borderRadiuses = {
     sm: '3px',
     md: '4px',
     lg: '6px',
-    xl: '8px',
+    xl: '8px'
 };
 
 export const vars = {
     size: createVar(),
-    radius: createVar(),
+    radius: createVar()
 };
 
 export const base = style({
@@ -47,33 +47,33 @@ export const size = styleVariants({
     xs: {
         vars: {
             [vars.size]: sizes.xs,
-            [vars.radius]: borderRadiuses.xs,
+            [vars.radius]: borderRadiuses.xs
         }
     },
     sm: {
         vars: {
             [vars.size]: sizes.sm,
-            [vars.radius]: borderRadiuses.sm,
-        },
+            [vars.radius]: borderRadiuses.sm
+        }
     },
     md: {
         vars: {
             [vars.size]: sizes.md,
-            [vars.radius]: borderRadiuses.md,
-        },
+            [vars.radius]: borderRadiuses.md
+        }
     },
     lg: {
         vars: {
             [vars.size]: sizes.lg,
-            [vars.radius]: borderRadiuses.lg,
-        },
+            [vars.radius]: borderRadiuses.lg
+        }
     },
     xl: {
         vars: {
             [vars.size]: sizes.xl,
-            [vars.radius]: borderRadiuses.xl,
-        },
-    },
+            [vars.radius]: borderRadiuses.xl
+        }
+    }
 });
 
 export const image = style({
@@ -81,10 +81,10 @@ export const image = style({
     width: '100%',
     height: '100%',
     flex: '1 1 100%'
-})
+});
 
 export const rounded = style({
-    borderRadius: '9999px',
+    borderRadius: '9999px'
 });
 
 export const outline = style({

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

@@ -1,14 +1,9 @@
-import MAvatarGroup from "../AvatarGroup.vue";
-import MAvatar from "../../avatar/Avatar.vue";
+import MAvatarGroup from '../AvatarGroup.vue';
+import MAvatar from '../../avatar/Avatar.vue';
 
-import {
-    MAvatarGroupBasic
-} from "./index";
+import { MAvatarGroupBasic } from './index';
 
-import {
-    createStory,
-    sizeArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType } from '../../../__storybook__';
 
 export default {
     component: MAvatarGroup,
@@ -19,6 +14,6 @@ export default {
     argTypes: {
         ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MAvatarGroupBasic);

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

@@ -1,12 +1,17 @@
-import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
+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',
+    xl: '96px'
 };
 
 export const base = style({
@@ -17,5 +22,5 @@ export const base = style({
 });
 
 export const item = style({
-    marginRight: '-10px',
+    marginRight: '-10px'
 });

package/src/components/avatargroup/symbol.ts

@@ -1,12 +1,11 @@
-import type {InjectionKey} from "vue";
-import type {Size} from "../../types/props";
+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;
@@ -14,4 +13,5 @@ export interface AvatarGroupState {
     rounded: boolean;
 }
 
-export const AVATAR_GROUP_STATE: InjectionKey<AvatarGroupState> = Symbol('AVATAR_GROUP_STATE');
+export const AVATAR_GROUP_STATE: InjectionKey<AvatarGroupState> =
+    Symbol('AVATAR_GROUP_STATE');

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

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

package/src/components/badge/style/Badge.css.ts

@@ -1,135 +1,135 @@
-import {createVar, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import { createVar, style, styleVariants } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const borderRadiuses = {
     xs: '2px',
     sm: '3px',
     md: '4px',
     lg: '6px',
-    xl: '8px',
+    xl: '8px'
 };
 
 const vars = {
     color: createVar(),
     backgroundColor: createVar(),
-    radius: createVar(),
+    radius: createVar()
 };
 
 export const base = style({
     vars: {
-        [vars.radius]: borderRadiuses.md,
+        [vars.radius]: borderRadiuses.md
     },
-    boxSizing: "border-box",
-    appearance: "none",
+    boxSizing: 'border-box',
+    appearance: 'none',
     border: 0,
-    display: "inline-flex",
-    position: "static",
+    display: 'inline-flex',
+    position: 'static',
     borderRadius: vars.radius,
     backgroundColor: vars.backgroundColor,
-    overflow: "hidden",
-    padding: `${themeVars.space['0.5']} ${themeVars.space[1]}`,
-})
+    overflow: 'hidden',
+    padding: `${themeVars.space['0.5']} ${themeVars.space[1]}`
+});
 
 export const text = style({
     color: vars.color,
     margin: 0,
     padding: 0,
     fontSize: themeVars.fontSize.xsmall,
-    fontWeight: "500",
+    fontWeight: '500',
     letterSpacing: '0.5px',
     textTransform: 'uppercase',
     lineHeight: themeVars.fontSize.base,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-})
+    whiteSpace: 'nowrap'
+});
 
 export const variant = styleVariants({
     primary: {
         vars: {
             [vars.backgroundColor]: themeVars.color.blue[500],
-            [vars.color]: '#FFFFFF',
+            [vars.color]: '#FFFFFF'
         }
     },
     dark: {
         vars: {
             [vars.backgroundColor]: themeVars.color.saxe[800],
-            [vars.color]: '#FFFFFF',
-        },
+            [vars.color]: '#FFFFFF'
+        }
     },
     default: {
         vars: {
             [vars.color]: 'white',
-            [vars.backgroundColor]: themeVars.color.gray[500],
-        }              
+            [vars.backgroundColor]: themeVars.color.gray[500]
+        }
     },
     tertiary: {
         vars: {
             [vars.color]: themeVars.color.gray[100],
-            [vars.backgroundColor]: themeVars.color.gray[400],
-        }   
+            [vars.backgroundColor]: themeVars.color.gray[400]
+        }
     },
     success: {
         vars: {
             [vars.backgroundColor]: themeVars.color.green[500],
-            [vars.color]: '#FFFFFF',
+            [vars.color]: '#FFFFFF'
         }
     },
     warning: {
         vars: {
             [vars.backgroundColor]: themeVars.color.amber[400],
-            [vars.color]: themeVars.color.gray[800],
+            [vars.color]: themeVars.color.gray[800]
         }
     },
     error: {
         vars: {
             [vars.backgroundColor]: themeVars.color.red[500],
-            [vars.color]: '#FFFFFF',
+            [vars.color]: '#FFFFFF'
         }
-    },
+    }
 });
 
 export const secondary = styleVariants({
     primary: {
         vars: {
             [vars.backgroundColor]: themeVars.color.blue[100],
-            [vars.color]: themeVars.color.blue[600],
+            [vars.color]: themeVars.color.blue[600]
         }
     },
     dark: {
         vars: {
             [vars.backgroundColor]: themeVars.color.saxe[100],
-            [vars.color]: themeVars.color.saxe[900],
+            [vars.color]: themeVars.color.saxe[900]
         }
     },
     default: {
         vars: {
             [vars.backgroundColor]: themeVars.color.gray[100],
-            [vars.color]: themeVars.color.gray[600],
-        }              
+            [vars.color]: themeVars.color.gray[600]
+        }
     },
     tertiary: {
         vars: {
             [vars.backgroundColor]: themeVars.color.gray[100],
-            [vars.color]: themeVars.color.gray[400],
-        }   
+            [vars.color]: themeVars.color.gray[400]
+        }
     },
     success: {
         vars: {
             [vars.backgroundColor]: themeVars.color.green[100],
-            [vars.color]: themeVars.color.green[600],
+            [vars.color]: themeVars.color.green[600]
         }
     },
     warning: {
         vars: {
             [vars.backgroundColor]: themeVars.color.amber[100],
-            [vars.color]: themeVars.color.amber[600],
+            [vars.color]: themeVars.color.amber[600]
         }
     },
     error: {
         vars: {
             [vars.backgroundColor]: themeVars.color.red[100],
-            [vars.color]: themeVars.color.red[600],
+            [vars.color]: themeVars.color.red[600]
         }
-    },
+    }
 });

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

@@ -1,20 +1,16 @@
-import MBreadcrumb from "../Breadcrumb.vue";
-import MBreadcrumbItem from "../BreadcrumbItem.vue";
+import MBreadcrumb from '../Breadcrumb.vue';
+import MBreadcrumbItem from '../BreadcrumbItem.vue';
 
-import {
-    MBreadcrumbBasic
-} from "./index";
+import { MBreadcrumbBasic } from './index';
 
-import {
-    createStory
-} from "../../../__storybook__";
+import { createStory } from '../../../__storybook__';
 
 export default {
     component: MBreadcrumb,
     subcomponents: {
         MBreadcrumbItem
     },
-    title: 'Components/Breadcrumb',
-}
+    title: 'Components/Breadcrumb'
+};
 
 export const Basic = createStory(MBreadcrumbBasic);

package/src/components/breadcrumb/style/Breadcrumb.css.ts

@@ -1,40 +1,40 @@
-import {globalStyle, style} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import { globalStyle, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 export const base = style({
-    display: "flex",
-    position: "relative",
+    display: 'flex',
+    position: 'relative',
     margin: 0,
     padding: 0,
-    listStyle: "none",
-    boxSizing: "border-box",
+    listStyle: 'none',
+    boxSizing: 'border-box'
 });
 
 export const item = style({
-    display: "flex",
-    alignItems: "center",
-    fontSize: themeVars.fontSize.base,
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: themeVars.fontSize.base
 });
 
 export const link = style({
     padding: `0 ${themeVars.space[2]}`,
     color: themeVars.color.gray[600],
-    cursor: "pointer",
-    textDecoration: "none",
+    cursor: 'pointer',
+    textDecoration: 'none',
     outline: 0,
     transition: `color 0.2s ${themeVars.transition.default}`,
-    ":hover": {
-        color: themeVars.color.blue[500],
+    ':hover': {
+        color: themeVars.color.blue[500]
     }
 });
 
 export const separator = style({
     padding: `0 ${themeVars.space[1]}`,
-    display: "inline-flex",
+    display: 'inline-flex',
     color: themeVars.color.gray[300],
-    userSelect: "none"
+    userSelect: 'none'
 });
 
 globalStyle(`${base} ${item}:last-child ${separator}`, {
-    display: "none"
-});
+    display: 'none'
+});

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

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

package/src/components/breadcrumb/symbol.ts

@@ -1,4 +1,4 @@
-import type {InjectionKey} from "vue";
+import type { InjectionKey } from 'vue';
 
 export interface BreadcrumbOptions {
     label: string;
@@ -11,7 +11,8 @@ export interface BreadcrumbItemState {
 
 export interface BreadcrumbState {
     separator: string;
-    refreshItems: () => void
+    refreshItems: () => void;
 }
 
-export const BREADCRUMB_STATE: InjectionKey<BreadcrumbState> = Symbol('BREADCRUMB_STATE');
+export const BREADCRUMB_STATE: InjectionKey<BreadcrumbState> =
+    Symbol('BREADCRUMB_STATE');

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

@@ -1,4 +1,4 @@
-import MButton from "../Button.vue";
+import MButton from '../Button.vue';
 import {
     MButtonBasic,
     MButtonSize,
@@ -8,13 +8,13 @@ import {
     MButtonDisabled,
     MButtonIconLeft,
     MButtonIcon
-} from "./index";
+} from './index';
 
 import {
     variantArgType,
     createStory,
     sizeArgType
-} from "../../../__storybook__";
+} from '../../../__storybook__';
 
 export default {
     component: MButton,
@@ -23,7 +23,7 @@ export default {
         ...variantArgType(),
         ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MButtonBasic);
 export const Size = createStory(MButtonSize);