@teammodlr/ui-kit 1.0.7 → 2.0.0

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

@@ -1,19 +1,70 @@
 <template>
-    <button @click="showMessage">Show</button>
+    <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 timeout = Math.floor(Math.random() * 10) + 1;
+const showSuccess = () => {
+    message.success(`Hello World`, {
+        timeout: 3000
+    });
+};
 
-    message.create(`Hello World - ${timeout}s`, {
-        timeout: timeout * 1000
+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,7 +1,6 @@
 import MMessageProvider from "../MessageProvider.vue";
 import {
     MMessageProviderBasic,
-
 } from "./index";
 
 const Template = (args: any) => ({

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

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

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

@@ -0,0 +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>

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

@@ -1,5 +1,5 @@
 <template>
-    <m-message-provider>
+    <m-message-provider placement="top-left">
         <slot />
     </m-message-provider>
 </template> 

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

@@ -0,0 +1,109 @@
+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[100]}`,
+    borderRadius: "6px",
+    padding: "9px 12px",
+    pointerEvents: "all",
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.gray[800],
+    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

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

package/src/components/messageprovider/types.ts

@@ -6,8 +6,16 @@ export type MessageType =
     | 'success'
     | 'warning'
     | 'error'
-    | 'loading'
     | 'default'
+    | 'loading'
+
+export type MessagePlacement = 
+    | 'top'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom'
+    | 'bottom-left'
+    | 'bottom-right'
 
 export type MessageRenderMessage = (props: any) => VNodeChild
 

package/src/components/modal/Modal.vue

@@ -0,0 +1,126 @@
+<template>
+    <Teleport :to="'body'">
+        <Transition name="fade-out" mode="out-in" :enter-active-class="style.fadeBackgroundEnter"
+                    :leave-active-class="style.fadeBackgroundLeave">
+
+            <div v-show="isOpen" :class="style.background" :style="{zIndex: zIndex}" @click="closeOutside">
+                <Transition name="fade-out" mode="out-in" :enter-active-class="style.fadeEnter"
+                            :leave-active-class="style.fadeLeave" :enter-from-class="style.fadeEnterFrom">
+
+                    <div v-if="isOpen" :class="containerClasses" @click.stop ref="target">
+                        <div :class="style.header">
+                            <div :class="style.title">
+                                <div>
+                                    {{ title }}
+                                </div>
+                            </div>
+                            <button :class="style.close" @click="close">
+                            </button>
+                        </div>
+                        <div :class="style.body">
+                            <slot name="body"></slot>
+                        </div>
+                        <div :class="style.footer">
+                            <slot name="footer"></slot>
+                        </div>
+                    </div>
+
+
+                </Transition>
+            </div>
+
+        </Transition>
+    </Teleport>
+</template>
+
+<script lang="ts">
+import type {PropType} from "vue";
+import type {Size} from "../../types/props";
+import {defineComponent, ref, computed, watch, nextTick} from 'vue';
+import {useFocusTrap} from '@vueuse/integrations/useFocusTrap'
+import * as style from './style';
+import {useZIndex} from "../../composables/useZIndex";
+
+export default defineComponent({
+    name: "MModal",
+    props: {
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        title: {
+            type: String,
+            default: ""
+        },
+        // TODO: if we add more transitions, we can add a prop to select which one to use.
+        // transition: {
+        //     type: String,
+        //     default: "scale",
+        // },
+        canClickOutside: {
+            type: Boolean,
+            default: true
+        },
+        zIndex: {
+            type: Number
+        }
+    },
+    emits: ['open'],
+    setup(props, {emit}) {
+        const {nextZIndex} = useZIndex();
+        const isOpen = ref(false);
+        const target = ref();
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+        const {hasFocus, activate, deactivate} = useFocusTrap(target, {
+            immediate: true,
+            escapeDeactivates: false,
+            allowOutsideClick: true
+        });
+
+        const containerClasses = computed(() => {
+            return [
+                style.container,
+                style.size[props.size],
+            ];
+        });
+
+
+        const closeOutside = () => {
+            if (props.canClickOutside) {
+                isOpen.value = false;
+            }
+        };
+
+        const close = () => {
+            isOpen.value = false;
+        };
+
+        const open = (element: HTMLElement | null) => {
+            isOpen.value = true;
+        };
+
+        watch(() => isOpen.value, (value) => {
+            if (value) {
+                zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
+                emit('open');
+                nextTick(() => {
+                    activate()
+                })
+            } else {
+                deactivate()
+            }
+        });
+
+        return {
+            close,
+            closeOutside,
+            open,
+            target,
+            style,
+            isOpen,
+            containerClasses,
+            zIndex
+        };
+    }
+})
+</script>

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

@@ -0,0 +1,40 @@
+<template>
+    <MModal ref="modal" title="I am a modal" size="md" :canClickOutside="true" :canBounceOnOpen="false" :canSlideIn="true">
+        <template #body>
+            <div>
+                I am a body..
+            </div>
+        </template>
+        <template #footer>
+            <div style="display: flex; flex-grow: 1; justify-content: end;">
+                <MButton variant="primary" @click="modal?.close()">
+                    Okay
+                </MButton>
+                <MButton style="margin-left: 8px;" @click="modal?.close()">
+                    Cancel
+                </MButton>
+            </div>
+        </template>
+    </MModal>
+
+    <div style="position: relative; width: 100%; height: 1000px;">
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; left: 0;">Top Left</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; right: 0;">Top Right</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; left: 0;">Bottom
+            Left</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; right: 0;">Bottom
+            Right</button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { MButton } from '@/components';
+import { ref } from 'vue'
+
+const modal = ref<any>(null);
+
+const open = (event: MouseEvent) => {
+    modal.value.open(event.target);
+};
+
+</script>

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

@@ -0,0 +1,20 @@
+import MModal from "../Modal.vue";
+import {
+    MModalBasic,
+    MModalForm
+} from "./index";
+
+import {
+    createStory, sizeArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MModal,
+    title: 'Components/Modal',
+    argTypes: {
+        ...sizeArgType(),
+    }
+}
+
+export const Basic = createStory(MModalBasic);
+export const ModalForm = createStory(MModalForm);

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

@@ -0,0 +1,2 @@
+export { default as MModalBasic } from './basic.vue';
+export { default as MModalForm } from './modal-form.vue';

package/src/components/modal/examples/modal-form.vue

@@ -0,0 +1,99 @@
+<template>
+    <MModal ref="modal" title="I am a modal" size="md" :canClickOutside="true" :canBounceOnOpen="false"
+            :canSlideIn="true">
+        <template #body>
+            <MForm @submit="onSubmit" :loading="loading" style="display: flex; flex-direction: column; gap: 10px;">
+                <MInput
+                        label="Email"
+                        placeholder="Email Address"
+                        name="email"
+                        v-model="email"
+                        :rules="[rules.isRequired, rules.isEmail]"
+                />
+
+                <MInput
+                        label="Name"
+                        placeholder="Name"
+                        name="name"
+                        v-model="name"
+                        :rules="[rules.isRequired]"
+                />
+
+                <MSelect
+                        label="Option"
+                        v-model="option"
+                        :options="options"
+                        :option-value="'id'"
+                        :option-label="'name'"
+                        :rules="[rules.isRequired]"
+                />
+
+                <MCheckbox
+                        label="Agree to terms"
+                        v-model="agree"
+                        :rules="[rules.isRequired]"
+                >
+                    Something here!
+                </MCheckbox>
+
+                <MColorPicker/>
+
+            </MForm>
+        </template>
+        <template #footer>
+            <div style="display: flex; flex-grow: 1; justify-content: end;">
+                <MButton variant="primary" @click="modal?.close()">
+                    Okay
+                </MButton>
+                <MButton style="margin-left: 8px;" @click="modal?.close()">
+                    Cancel
+                </MButton>
+            </div>
+        </template>
+    </MModal>
+
+    <div style="position: relative; width: 100%; height: 1000px;">
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; left: 0;">Top Left</button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {MCheckbox, MSelect, MColorPicker} from '@/components';
+import type {MButton} from '@/components';
+import {ref} from 'vue'
+
+const modal = ref<any>(null);
+
+const open = (event: MouseEvent) => {
+    modal.value.open(event.target);
+};
+
+const rules = {
+    isEmail: (v: any) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid',
+    isRequired: (v: any) => !!v || 'Field is required',
+}
+
+const options = Array.from({length: 50}, (_, i) => ({
+    id: i + 1,
+    name: `Option ${i + 1}`
+}));
+
+const loading = ref(false);
+const email = ref('');
+const name = ref('');
+const option = ref('');
+const agree = ref(false);
+
+
+function onSubmit(valid: boolean) {
+    if (valid) {
+        loading.value = true;
+        setTimeout(() => {
+            console.log('submit', {email: email.value, name: name.value});
+            loading.value = false;
+        }, 3000);
+    } else {
+        console.log('invalid');
+    }
+}
+</script>