@teammodlr/ui-kit 2.0.29 → 2.0.31

package/src/components/messageprovider/examples/basic.vue

@@ -1,70 +1,70 @@
-<template>
-    <div>
-        <button @click="showSuccess">Success</button>
-        <button @click="showInfo">Info</button>
-        <button @click="showWarning">Warning</button>
-        <button @click="showError">Error</button>
-        <hr />
-
-        <div>
-            <button @click="showMessage">Success</button><br />
-
-            <button @click="updateNumber">+1</button>
-
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { MessageReactive } from '../types';
-import { useMessage } from '../useMessage';
-
-const message = useMessage();
-
-const number = ref(0);
-let msg: MessageReactive | null = null;
-
-const showMessage = () => {
-    msg = message.loading(`Loading`, {
-        timeout: 0
-    });
-};
-
-function updateNumber() {
-    if (msg) {
-        // number.value++;
-        msg.content = `Saved Successfully`;
-        msg.type = 'success';
-        msg.timeout = 3000;
-    }
-}
-
-
-const showSuccess = () => {
-    message.success(`Hello World`, {
-        timeout: 3000
-    });
-};
-
-const showInfo = () => {
-    message.info(`Hello World`, {
-        timeout: 3000
-    });
-};
-
-const showWarning = () => {
-    message.warning(`Hello World`, {
-        timeout: 3000
-    });
-};
-
-const showError = () => {
-    message.error(`Hello World`, {
-        timeout: 3000
-    });
-};
-
-
-
-</script>
+<template>
+    <div>
+        <button @click="showSuccess">Success</button>
+        <button @click="showInfo">Info</button>
+        <button @click="showWarning">Warning</button>
+        <button @click="showError">Error</button>
+        <hr />
+
+        <div>
+            <button @click="showMessage">Success</button><br />
+
+            <button @click="updateNumber">+1</button>
+
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { MessageReactive } from '../types';
+import { useMessage } from '../useMessage';
+
+const message = useMessage();
+
+const number = ref(0);
+let msg: MessageReactive | null = null;
+
+const showMessage = () => {
+    msg = message.loading(`Loading`, {
+        timeout: 0
+    });
+};
+
+function updateNumber() {
+    if (msg) {
+        // number.value++;
+        msg.content = `Saved Successfully`;
+        msg.type = 'success';
+        msg.timeout = 3000;
+    }
+}
+
+
+const showSuccess = () => {
+    message.success(`Hello World`, {
+        timeout: 3000
+    });
+};
+
+const showInfo = () => {
+    message.info(`Hello World`, {
+        timeout: 3000
+    });
+};
+
+const showWarning = () => {
+    message.warning(`Hello World`, {
+        timeout: 3000
+    });
+};
+
+const showError = () => {
+    message.error(`Hello World`, {
+        timeout: 3000
+    });
+};
+
+
+
+</script>

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

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

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

@@ -1,2 +1,2 @@
-export { default as MMessageProviderBasic } from './basic.vue';
-export { default as MMessageProviderUpdate } from './update.vue';
+export { default as MMessageProviderBasic } from './basic.vue';
+export { default as MMessageProviderUpdate } from './update.vue';

package/src/components/messageprovider/examples/update.vue

@@ -1,34 +1,34 @@
-<template>
-    <div>
-        <button @click="showMessage">Success</button><br />
-
-        <button @click="updateNumber">+1</button>
-
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { MessageReactive } from '../types';
-import { useMessage } from '../useMessage';
-
-const message = useMessage();
-
-const number = ref(0);
-let msg: MessageReactive | null = null;
-
-const showMessage = () => {
-    msg = message.success(`Hello World`, {
-        timeout: 3000
-    });
-};
-
-function updateNumber() {
-    if (msg) {
-        number.value++;
-        msg.content = `Hello World ${number.value}`;
-    }
-}
-
-
-</script>
+<template>
+    <div>
+        <button @click="showMessage">Success</button><br />
+
+        <button @click="updateNumber">+1</button>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { MessageReactive } from '../types';
+import { useMessage } from '../useMessage';
+
+const message = useMessage();
+
+const number = ref(0);
+let msg: MessageReactive | null = null;
+
+const showMessage = () => {
+    msg = message.success(`Hello World`, {
+        timeout: 3000
+    });
+};
+
+function updateNumber() {
+    if (msg) {
+        number.value++;
+        msg.content = `Hello World ${number.value}`;
+    }
+}
+
+
+</script>

package/src/components/messageprovider/examples/wrapper.vue

@@ -1,9 +1,9 @@
-<template>
-    <m-message-provider placement="top-left">
-        <slot />
-    </m-message-provider>
-</template> 
-
-<script lang="ts" setup>
-import MMessageProvider from '../MessageProvider.vue';
-</script>
+<template>
+    <m-message-provider placement="top-left">
+        <slot />
+    </m-message-provider>
+</template> 
+
+<script lang="ts" setup>
+import MMessageProvider from '../MessageProvider.vue';
+</script>

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

@@ -1,109 +1,110 @@
-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,
-});
-
-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",
-    transition: "top 0.3s ease-out 0.5s, bottom 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",
+    transition: "top 0.3s ease-out 0.5s, bottom 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,47 +1,47 @@
-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,12 +1,12 @@
-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;
+}