@teammodlr/ui-kit 2.1.8 → 2.1.10

package/src/components/input/style/Input.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: '26px',
     sm: '30px',
     md: '38px',
     lg: '42px',
-    xl: '48px',
+    xl: '48px'
 };
 
 const borderRadiuses = {
@@ -14,7 +14,7 @@ const borderRadiuses = {
     sm: '3px',
     md: '4px',
     lg: '6px',
-    xl: '8px',
+    xl: '8px'
 };
 
 export const vars = {
@@ -25,8 +25,8 @@ export const vars = {
     borderColor: createVar(),
     backgroundColor: createVar(),
     color: createVar(),
-    cursor: createVar(),
-}
+    cursor: createVar()
+};
 
 export const wrapper = style({
     position: 'relative'
@@ -41,7 +41,7 @@ export const base = style({
         [vars.borderColor]: themeVars.color.gray[300],
         [vars.color]: themeVars.color.font.text,
         [vars.backgroundColor]: '#FFFFFF',
-        [vars.cursor]: 'text',
+        [vars.cursor]: 'text'
     },
     height: vars.height,
     minHeight: vars.height,
@@ -67,15 +67,15 @@ export const base = style({
         border-color .3s ${themeVars.transition.default}`,
     ':hover': {
         vars: {
-            [vars.borderColor]: themeVars.color.blue[400],
+            [vars.borderColor]: themeVars.color.blue[400]
         }
     },
     ':focus-within': {
         vars: {
-            [vars.borderColor]: themeVars.color.blue[500],
+            [vars.borderColor]: themeVars.color.blue[500]
         },
         outline: 'none',
-        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
+        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
     }
 });
 
@@ -105,44 +105,44 @@ export const size = styleVariants({
         vars: {
             [vars.height]: sizes.xs,
             [vars.radius]: borderRadiuses.xs,
-            [vars.paddingX]: themeVars.space[1],
+            [vars.paddingX]: themeVars.space[1]
         },
-        fontSize: themeVars.fontSize.small,
+        fontSize: themeVars.fontSize.small
     },
     sm: {
         vars: {
             [vars.height]: sizes.sm,
             [vars.radius]: borderRadiuses.sm,
-            [vars.paddingX]: themeVars.space[1.5],
+            [vars.paddingX]: themeVars.space[1.5]
         },
-        fontSize: themeVars.fontSize.small,
+        fontSize: themeVars.fontSize.small
     },
     md: {
         vars: {
             [vars.height]: sizes.md,
             [vars.radius]: borderRadiuses.md
-        },
+        }
     },
     lg: {
         vars: {
             [vars.height]: sizes.lg,
             [vars.radius]: borderRadiuses.lg,
-            [vars.paddingX]: themeVars.space[2.5],
+            [vars.paddingX]: themeVars.space[2.5]
         },
-        fontSize: themeVars.fontSize.large,
+        fontSize: themeVars.fontSize.large
     },
     xl: {
         vars: {
             [vars.height]: sizes.xl,
             [vars.radius]: borderRadiuses.xl,
-            [vars.paddingX]: themeVars.space[3],
+            [vars.paddingX]: themeVars.space[3]
         },
-        fontSize: themeVars.fontSize.large,
-    },
+        fontSize: themeVars.fontSize.large
+    }
 });
 
 export const block = style({
-    width: '100%',
+    width: '100%'
 });
 
 export const disabled = style({
@@ -150,18 +150,18 @@ export const disabled = style({
         [vars.borderColor]: themeVars.color.gray[200],
         [vars.color]: themeVars.color.gray[500],
         [vars.backgroundColor]: themeVars.color.gray[50],
-        [vars.cursor]: 'not-allowed',
+        [vars.cursor]: 'not-allowed'
     },
     ':focus': {
-        boxShadow: 'none',
+        boxShadow: 'none'
     },
     ':hover': {
-        cursor: 'not-allowed',
+        cursor: 'not-allowed'
     }
 });
 
 export const label = style({
-    fontWeight: "500",
+    fontWeight: '500',
     display: 'inline-block',
     fontSize: themeVars.fontSize.base,
     wordBreak: 'break-word',
@@ -177,7 +177,7 @@ export const description = style({
     color: themeVars.color.gray[600],
     lineHeight: themeVars.fontSize.large,
     wordBreak: 'break-word',
-    marginBottom: themeVars.space[1.5],
+    marginBottom: themeVars.space[1.5]
 });
 
 export const errorMessage = style({
@@ -186,7 +186,7 @@ export const errorMessage = style({
     fontSize: themeVars.fontSize.base,
     color: themeVars.color.red[600],
     wordBreak: 'break-word',
-    marginTop: themeVars.space[1.5],
+    marginTop: themeVars.space[1.5]
 });
 
 export const helpMessage = style({
@@ -195,24 +195,24 @@ export const helpMessage = style({
     fontSize: themeVars.fontSize.base,
     color: themeVars.color.gray[600],
     wordBreak: 'break-word',
-    marginTop: themeVars.space[1.5],
+    marginTop: themeVars.space[1.5]
 });
 
 export const error = style({
     vars: {
-        [vars.borderColor]: themeVars.color.red[500],
+        [vars.borderColor]: themeVars.color.red[500]
     },
     ':hover': {
         vars: {
-            [vars.borderColor]: themeVars.color.red[500],
+            [vars.borderColor]: themeVars.color.red[500]
         }
     },
     ':focus-within': {
         boxShadow: `0 0 0 2px ${themeVars.color.red[200]}`,
         vars: {
-            [vars.borderColor]: themeVars.color.red[500],
+            [vars.borderColor]: themeVars.color.red[500]
         }
-    },
+    }
 });
 
 export const leftIcon = style({
@@ -225,12 +225,12 @@ export const leftIcon = style({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: "2.25rem",
-    color: themeVars.color.gray[400],
+    width: '2.25rem',
+    color: themeVars.color.gray[400]
 });
 
 export const hasLeftIcon = style({
-    paddingLeft: "2.25rem",
+    paddingLeft: '2.25rem'
 });
 
 export const rightIcon = style({
@@ -243,17 +243,14 @@ export const rightIcon = style({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: "2.25rem",
-    color: themeVars.color.gray[400],
+    width: '2.25rem',
+    color: themeVars.color.gray[400]
 });
 
 export const hasRightIcon = style({
-    paddingRight: "2.25rem",
+    paddingRight: '2.25rem'
 });
 
-
-
-
 export const prefix = style({
     pointerEvents: 'none',
     marginRight: themeVars.space[3],
@@ -270,7 +267,7 @@ export const prefix = style({
         transform: 'translateY(-50%)',
         width: '1px',
         height: '16px',
-        backgroundColor: themeVars.color.gray[300],
+        backgroundColor: themeVars.color.gray[300]
     }
 });
 
@@ -290,6 +287,6 @@ export const suffix = style({
         transform: 'translateY(-50%)',
         width: '1px',
         height: '16px',
-        backgroundColor: themeVars.color.gray[300],
+        backgroundColor: themeVars.color.gray[300]
     }
 });

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

@@ -1,13 +1,8 @@
-import MLink from "../Link.vue";
+import MLink from '../Link.vue';
 
-import {
-    MLinkBasic
-} from "./index";
+import { MLinkBasic } from './index';
 
-import {
-    createStory,
-    colorArgType
-} from "../../../__storybook__";
+import { createStory, colorArgType } from '../../../__storybook__';
 
 export default {
     component: MLink,
@@ -15,6 +10,6 @@ export default {
     argTypes: {
         ...colorArgType()
     }
-}
+};
 
 export const Basic = createStory(MLinkBasic);

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

@@ -1,7 +1,5 @@
-import MMessageProvider from "../MessageProvider.vue";
-import {
-    MMessageProviderBasic,
-} from "./index";
+import MMessageProvider from '../MessageProvider.vue';
+import { MMessageProviderBasic } from './index';
 
 const Template = (args: any) => ({
     components: {
@@ -9,9 +7,8 @@ const Template = (args: any) => ({
         MMessageProviderBasic
     },
     setup() {
-
         return {
-            args,
+            args
         };
     },
     template: `
@@ -19,11 +16,11 @@ const Template = (args: any) => ({
             <MMessageProviderBasic />
         </m-message-provider>
     `
-})
+});
 
 export default {
     component: MMessageProvider,
     title: 'Components/MessageProvider'
-}
+};
 
 export const Primary = Template.bind({});

package/src/components/messageprovider/style/Message.css.ts

@@ -1,64 +1,65 @@
-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';
 
 export const vars = {
     top: createVar(),
     left: createVar(),
     right: createVar(),
-    iconColor: createVar(),
-}
+    iconColor: createVar()
+};
 
 export const wrapper = style({
-    position: "fixed",
+    position: 'fixed',
     zIndex: 5000,
     height: 0,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
     gap: themeVars.space['2.5'],
     top: vars.top,
     left: vars.left,
     right: vars.right,
-    transformOrigin: 'top center',
+    transformOrigin: 'top center'
 });
 
 export const base = style({
-    position: "relative",
-    display: "flex",
+    position: 'relative',
+    display: 'flex',
     gap: themeVars.space['2'],
-    background: "#FFF",
+    background: '#FFF',
     boxShadow: themeVars.shadow.sm,
     border: `1px solid ${themeVars.color.gray[300]}`,
-    borderRadius: "6px",
-    padding: "9px 12px",
-    pointerEvents: "all",
+    borderRadius: '6px',
+    padding: '9px 12px',
+    pointerEvents: 'all',
     fontSize: themeVars.fontSize.base,
     color: themeVars.color.font.text,
-    alignItems: "center",
-    willChange: "top, bottom, width",
-    transition: "top 0.3s ease-out 0.5s, bottom 0.3s ease-out 0.5s, width 0.3s ease-out 0.5s",
-})
+    alignItems: 'center',
+    willChange: 'top, bottom, width',
+    transition:
+        'top 0.3s ease-out 0.5s, bottom 0.3s ease-out 0.5s, width 0.3s ease-out 0.5s'
+});
 
 export const placement = styleVariants({
     top: {
         vars: {
             [vars.top]: '12px',
             [vars.left]: '0',
-            [vars.right]: '0',
+            [vars.right]: '0'
         }
     },
     ['top-left']: {
         vars: {
             [vars.top]: '12px',
             [vars.left]: '12px',
-            [vars.right]: 'unset',
+            [vars.right]: 'unset'
         }
     },
     ['top-right']: {
         vars: {
             [vars.top]: '12px',
             [vars.left]: 'unset',
-            [vars.right]: '12px',
+            [vars.right]: '12px'
         }
     }
 });
@@ -68,44 +69,43 @@ export const icon = style({
     gridArea: '1 / 1 / 3',
     width: '22px',
     height: '22px',
-    color: vars.iconColor,
+    color: vars.iconColor
 });
 
 export const message = style({
     alignSelf: 'center',
-    gridArea: '1 / 2 / 3',
+    gridArea: '1 / 2 / 3'
 });
 
-
 export const variant = styleVariants({
     info: {
         vars: {
-            [vars.iconColor]: themeVars.color.blue[500],
+            [vars.iconColor]: themeVars.color.blue[500]
         }
     },
     success: {
         vars: {
-            [vars.iconColor]: themeVars.color.green[500],
+            [vars.iconColor]: themeVars.color.green[500]
         }
     },
     warning: {
         vars: {
-            [vars.iconColor]: themeVars.color.amber[500],
+            [vars.iconColor]: themeVars.color.amber[500]
         }
     },
     error: {
         vars: {
-            [vars.iconColor]: themeVars.color.red[500],
+            [vars.iconColor]: themeVars.color.red[500]
         }
     },
     default: {
         vars: {
-            [vars.iconColor]: themeVars.color.gray[500],
+            [vars.iconColor]: themeVars.color.gray[500]
         }
     },
     loading: {
         vars: {
-            [vars.iconColor]: themeVars.color.gray[500],
+            [vars.iconColor]: themeVars.color.gray[500]
         }
     }
 });

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

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

package/src/components/messageprovider/types.ts

@@ -7,41 +7,50 @@ export type MessageType =
     | 'warning'
     | 'error'
     | 'default'
-    | 'loading'
+    | 'loading';
 
-export type MessagePlacement = 
+export type MessagePlacement =
     | 'top'
     | 'top-left'
     | 'top-right'
     | 'bottom'
     | 'bottom-left'
-    | 'bottom-right'
+    | 'bottom-right';
 
-export type MessageRenderMessage = (props: any) => VNodeChild
+export type MessageRenderMessage = (props: any) => VNodeChild;
 
 export interface MessageOptions {
-    type?: MessageType
-    render?: MessageRenderMessage
-    timeout?: number
-    closable?: boolean
-    onClose?: () => void
+    type?: MessageType;
+    render?: MessageRenderMessage;
+    timeout?: number;
+    closable?: boolean;
+    onClose?: () => void;
 }
 
 export interface MessageReactive {
-    content: ContentType
-    timeout?: number
-    closable?: boolean
-    type: MessageType
-    onClose?: () => void
-    destroy: () => void
+    content: ContentType;
+    timeout?: number;
+    closable?: boolean;
+    type: MessageType;
+    onClose?: () => void;
+    destroy: () => void;
 }
 
 export interface MessageApiInjection {
-    create: (content: ContentType, options?: MessageOptions) => MessageReactive
-    info: (content: ContentType, options?: MessageOptions) => MessageReactive
-    success: (content: ContentType, options?: MessageOptions) => MessageReactive
-    warning: (content: ContentType, options?: MessageOptions) => MessageReactive
-    error: (content: ContentType, options?: MessageOptions) => MessageReactive
-    loading: (content: ContentType, options?: MessageOptions) => MessageReactive
-    destroyAll: () => void
+    create: (content: ContentType, options?: MessageOptions) => MessageReactive;
+    info: (content: ContentType, options?: MessageOptions) => MessageReactive;
+    success: (
+        content: ContentType,
+        options?: MessageOptions
+    ) => MessageReactive;
+    warning: (
+        content: ContentType,
+        options?: MessageOptions
+    ) => MessageReactive;
+    error: (content: ContentType, options?: MessageOptions) => MessageReactive;
+    loading: (
+        content: ContentType,
+        options?: MessageOptions
+    ) => MessageReactive;
+    destroyAll: () => void;
 }

package/src/components/messageprovider/useMessage.ts

@@ -1,11 +1,13 @@
-import { inject } from 'vue'
-import type { MessageApiInjection } from './types'
+import { inject } from 'vue';
+import type { MessageApiInjection } from './types';
 
 export function useMessage(): MessageApiInjection {
     const api = inject('m-message', null);
 
-    if(api === null) {
-        throw new Error('m-message api is not provided, ensure the component is wrapped in <m-message-provider />.');
+    if (api === null) {
+        throw new Error(
+            'm-message api is not provided, ensure the component is wrapped in <m-message-provider />.'
+        );
     }
 
     return api;