@teammodlr/ui-kit 2.3.12 → 2.3.14

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

@@ -1,111 +1,111 @@
-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()
-};
-
-export const wrapper = style({
-    position: 'fixed',
-    zIndex: 5000,
-    height: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: themeVars.space['2.5'],
-    top: vars.top,
-    left: vars.left,
-    right: vars.right,
-    transformOrigin: 'top center'
-});
-
-export const base = style({
-    position: 'relative',
-    display: 'flex',
-    gap: themeVars.space['2'],
-    background: '#FFF',
-    boxShadow: themeVars.shadow.sm,
-    border: `1px solid ${themeVars.color.gray[300]}`,
-    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'
-});
-
-export const placement = styleVariants({
-    top: {
-        vars: {
-            [vars.top]: '12px',
-            [vars.left]: '0',
-            [vars.right]: '0'
-        }
-    },
-    ['top-left']: {
-        vars: {
-            [vars.top]: '12px',
-            [vars.left]: '12px',
-            [vars.right]: 'unset'
-        }
-    },
-    ['top-right']: {
-        vars: {
-            [vars.top]: '12px',
-            [vars.left]: 'unset',
-            [vars.right]: '12px'
-        }
-    }
-});
-
-export const icon = style({
-    alignSelf: 'center',
-    gridArea: '1 / 1 / 3',
-    width: '22px',
-    height: '22px',
-    color: vars.iconColor
-});
-
-export const message = style({
-    alignSelf: 'center',
-    gridArea: '1 / 2 / 3'
-});
-
-export const variant = styleVariants({
-    info: {
-        vars: {
-            [vars.iconColor]: themeVars.color.blue[500]
-        }
-    },
-    success: {
-        vars: {
-            [vars.iconColor]: themeVars.color.green[500]
-        }
-    },
-    warning: {
-        vars: {
-            [vars.iconColor]: themeVars.color.amber[500]
-        }
-    },
-    error: {
-        vars: {
-            [vars.iconColor]: themeVars.color.red[500]
-        }
-    },
-    default: {
-        vars: {
-            [vars.iconColor]: themeVars.color.gray[500]
-        }
-    },
-    loading: {
-        vars: {
-            [vars.iconColor]: themeVars.color.gray[500]
-        }
-    }
-});
+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()
+};
+
+export const wrapper = style({
+    position: 'fixed',
+    zIndex: 5000,
+    height: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: themeVars.space['2.5'],
+    top: vars.top,
+    left: vars.left,
+    right: vars.right,
+    transformOrigin: 'top center'
+});
+
+export const base = style({
+    position: 'relative',
+    display: 'flex',
+    gap: themeVars.space['2'],
+    background: '#FFF',
+    boxShadow: themeVars.shadow.sm,
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    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'
+});
+
+export const placement = styleVariants({
+    top: {
+        vars: {
+            [vars.top]: '12px',
+            [vars.left]: '0',
+            [vars.right]: '0'
+        }
+    },
+    ['top-left']: {
+        vars: {
+            [vars.top]: '12px',
+            [vars.left]: '12px',
+            [vars.right]: 'unset'
+        }
+    },
+    ['top-right']: {
+        vars: {
+            [vars.top]: '12px',
+            [vars.left]: 'unset',
+            [vars.right]: '12px'
+        }
+    }
+});
+
+export const icon = style({
+    alignSelf: 'center',
+    gridArea: '1 / 1 / 3',
+    width: '22px',
+    height: '22px',
+    color: vars.iconColor
+});
+
+export const message = style({
+    alignSelf: 'center',
+    gridArea: '1 / 2 / 3'
+});
+
+export const variant = styleVariants({
+    info: {
+        vars: {
+            [vars.iconColor]: themeVars.color.blue[500]
+        }
+    },
+    success: {
+        vars: {
+            [vars.iconColor]: themeVars.color.green[500]
+        }
+    },
+    warning: {
+        vars: {
+            [vars.iconColor]: themeVars.color.amber[500]
+        }
+    },
+    error: {
+        vars: {
+            [vars.iconColor]: themeVars.color.red[500]
+        }
+    },
+    default: {
+        vars: {
+            [vars.iconColor]: themeVars.color.gray[500]
+        }
+    },
+    loading: {
+        vars: {
+            [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

@@ -1,56 +1,56 @@
-import type { VNodeChild } from 'vue';
-
-export type ContentType = string;
-export type MessageType =
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'error'
-    | 'default'
-    | 'loading';
-
-export type MessagePlacement =
-    | 'top'
-    | 'top-left'
-    | 'top-right'
-    | 'bottom'
-    | 'bottom-left'
-    | 'bottom-right';
-
-export type MessageRenderMessage = (props: any) => VNodeChild;
-
-export interface MessageOptions {
-    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;
-}
-
-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;
-}
+import type { VNodeChild } from 'vue';
+
+export type ContentType = string;
+export type MessageType =
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'default'
+    | 'loading';
+
+export type MessagePlacement =
+    | 'top'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom'
+    | 'bottom-left'
+    | 'bottom-right';
+
+export type MessageRenderMessage = (props: any) => VNodeChild;
+
+export interface MessageOptions {
+    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;
+}
+
+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;
+}

package/src/components/messageprovider/useMessage.ts

@@ -1,14 +1,14 @@
-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 />.'
-        );
-    }
-
-    return api;
-}
+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 />.'
+        );
+    }
+
+    return api;
+}