@teammodlr/ui-kit 2.1.8 → 2.1.10

package/src/components/modal/Modal.vue

@@ -5,54 +5,63 @@
             :enter-active-class="fade.enterActive"
             :leave-active-class="fade.leaveActive"
             :enter-from-class="fade.enterFrom"
-            :leave-to-class="fade.leaveTo"
-        >
-            <div v-show="isOpen" :class="style.background" :style="{zIndex: zIndex}" @mousedown="closeOutside">
+            :leave-to-class="fade.leaveTo">
+            <div
+                v-show="isOpen"
+                :class="style.background"
+                :style="{ zIndex: zIndex }"
+                @mousedown="closeOutside">
                 <Transition
                     type="animation"
                     :enter-active-class="modalScale.enterActive"
                     :leave-active-class="modalScale.leaveActive"
                     :enter-from-class="modalScale.enterFrom"
-                    :leave-to-class="modalScale.leaveTo"
-                >
-
-                    <div v-if="isOpen" :class="containerClasses" @click.stop ref="target">
-                        <div :class="style.header">
-                            <div :class="style.title">
-                                <div>
-                                    {{ title }}
+                    :leave-to-class="modalScale.leaveTo">
+                    <div
+                        v-if="isOpen"
+                        :class="containerClasses"
+                        @click.stop
+                        ref="target">
+                        <div :class="style.sidebar" v-if="hasSidebar">
+                            <slot name="sidebar"></slot>
+                        </div>
+                        <div :class="style.content">
+                            <div :class="style.header">
+                                <div :class="style.title" v-if="title">
+                                    <div>
+                                        {{ title }}
+                                    </div>
                                 </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>
+                            <button
+                                :class="style.close"
+                                @click="close"></button>
+                            <div :class="style.body">
+                                <slot name="body"></slot>
+                                <slot></slot>
+                            </div>
+                            <div :class="style.footer">
+                                <slot name="footer"></slot>
+                            </div>
                         </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 type { PropType } from 'vue';
+import type { Size } from '../../types/props';
+import { defineComponent, ref, computed, watch, nextTick } from 'vue';
 import * as style from './style';
-import { modalScale, fade } from "../../styles/transitions.css";
-import {useZIndex} from "../../composables/useZIndex";
-import { useEventListener, useMagicKeys } from "@vueuse/core";
+import { modalScale, fade } from '../../styles/transitions.css';
+import { useZIndex } from '../../composables/useZIndex';
+import { useEventListener, useMagicKeys } from '@vueuse/core';
 
 export default defineComponent({
-    name: "MModal",
+    name: 'MModal',
     props: {
         size: {
             type: String as PropType<Size>,
@@ -60,7 +69,7 @@ export default defineComponent({
         },
         title: {
             type: String,
-            default: ""
+            default: ''
         },
         canClickOutside: {
             type: Boolean,
@@ -75,12 +84,12 @@ export default defineComponent({
         }
     },
     emits: ['open'],
-    setup(props, {emit}) {
-        const {nextZIndex} = useZIndex();
+    setup(props, { emit, slots }) {
+        const { nextZIndex } = useZIndex();
         const isOpen = ref(false);
         const target = ref();
         const zIndex = ref(props.zIndex ?? nextZIndex());
-
+        const hasSidebar = computed(() => !!slots.sidebar);
         const clickInside = ref(false);
         // const {hasFocus, activate, deactivate} = useFocusTrap(target, {
         //     immediate: true,
@@ -88,18 +97,21 @@ export default defineComponent({
         //     allowOutsideClick: true
         // });
 
-        const { escape } = useMagicKeys()
+        const { escape } = useMagicKeys();
 
-        watch(escape, (v) => {
+        watch(escape, v => {
             if (v && isOpen.value) {
-                close()
+                close();
             }
-        })
+        });
 
         const containerClasses = computed(() => {
             return [
                 style.container,
                 style.size[props.size],
+                {
+                    [style.hasSidebar]: hasSidebar.value
+                }
             ];
         });
 
@@ -142,13 +154,15 @@ export default defineComponent({
             let ownerWindow = window;
             let documentElement = ownerWindow.document.documentElement;
 
-            let scrollbarWidthBefore = ownerWindow.innerWidth - documentElement.clientWidth;
+            let scrollbarWidthBefore =
+                ownerWindow.innerWidth - documentElement.clientWidth;
             documentElement.style.overflow = 'hidden';
 
             if (scrollbarWidthBefore > 0) {
-                let scrollbarWidthAfter = documentElement.clientWidth - documentElement.offsetWidth;
+                let scrollbarWidthAfter =
+                    documentElement.clientWidth - documentElement.offsetWidth;
                 let scrollbarWidth = scrollbarWidthBefore - scrollbarWidthAfter;
-                documentElement.style.paddingRight = `${scrollbarWidth}px`
+                documentElement.style.paddingRight = `${scrollbarWidth}px`;
             }
         }
 
@@ -157,22 +171,25 @@ export default defineComponent({
                 let ownerWindow = window;
                 let documentElement = ownerWindow.document.documentElement;
 
-                documentElement.style.overflow = 'visible'
-                documentElement.style.paddingRight = '0px'
+                documentElement.style.overflow = 'visible';
+                documentElement.style.paddingRight = '0px';
             }, 250);
         }
 
-        watch(() => isOpen.value, (value) => {
-            if (value) {
-                zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
-                emit('open');
-                nextTick(() => {
-                    // activate()
-                })
-            } else {
-                // deactivate()
+        watch(
+            () => isOpen.value,
+            value => {
+                if (value) {
+                    zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
+                    emit('open');
+                    nextTick(() => {
+                        // activate()
+                    });
+                } else {
+                    // deactivate()
+                }
             }
-        });
+        );
 
         return {
             close,
@@ -186,8 +203,9 @@ export default defineComponent({
             containerClasses,
             zIndex,
             modalScale,
-            fade
+            fade,
+            hasSidebar
         };
     }
-})
+});
 </script>

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

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

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

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

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

@@ -0,0 +1,75 @@
+<template>
+    <MModal ref="modal" size="md">
+        <template #sidebar> I AM SIDEBAR </template>
+        <div>
+            <MInput />
+        </div>
+        <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 { ref } from 'vue';
+
+const modal = ref<any>(null);
+
+const open = (event: MouseEvent) => {
+    modal.value.open(event.target);
+};
+</script>

package/src/components/modal/style/Modal.css.ts

@@ -1,12 +1,17 @@
-import {createVar, globalKeyframes, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import {
+    createVar,
+    globalKeyframes,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const sizes = {
     xs: '300px',
     sm: '400px',
     md: '640px',
     lg: '800px',
-    xl: '1140px',
+    xl: '1140px'
 };
 
 export const vars = {
@@ -14,77 +19,82 @@ export const vars = {
     backgroundColor: createVar(),
     borderColor: createVar(),
     initialLeft: createVar(),
-    initialTop: createVar(),
-}
+    initialTop: createVar()
+};
 
 export const size = styleVariants({
     xs: {
         vars: {
-            [vars.maxWidth]: sizes.xs,
-        },
+            [vars.maxWidth]: sizes.xs
+        }
     },
     sm: {
         vars: {
-            [vars.maxWidth]: sizes.sm,
-        },
+            [vars.maxWidth]: sizes.sm
+        }
     },
     md: {
         vars: {
-            [vars.maxWidth]: sizes.md,
-        },
+            [vars.maxWidth]: sizes.md
+        }
     },
     lg: {
         vars: {
-            [vars.maxWidth]: sizes.lg,
-        },
+            [vars.maxWidth]: sizes.lg
+        }
     },
     xl: {
         vars: {
-            [vars.maxWidth]: sizes.xl,
-        },
-    },
+            [vars.maxWidth]: sizes.xl
+        }
+    }
 });
 
-
 export const background = style({
     zIndex: 100,
     backgroundColor: 'hsla(0,0%,45.1%,0.7)',
-    position: "fixed",
+    position: 'fixed',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
 });
 
 export const container = style({
-    backgroundColor: "#fff",
-    width: "100%",
+    backgroundColor: '#fff',
+    width: '100%',
     maxWidth: vars.maxWidth,
     borderRadius: themeVars.rounded.medium,
-    boxShadow: "0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04)",
+    boxShadow:
+        '0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04)',
     border: `1px solid rgba(0, 0, 0, 0.45)`,
-    display: "flex",
-    flexDirection: "column",
-    position: "relative",
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    gap: themeVars.space[2]
+});
+
+export const hasSidebar = style({
+    flexDirection: 'row'
 });
 
 export const header = style({
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "flex-start",
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
     padding: `${themeVars.space[4]} ${themeVars.space[4]} 0 ${themeVars.space[4]}`,
-    flexShrink: "0",
+    flexShrink: '0'
 });
 
 export const title = style({
     margin: 0,
     fontSize: `${themeVars.fontSize.xlarge}`,
-    fontWeight: "500",
-    display: "flex",
-    alignItems: "center",
+    fontWeight: '500',
+    display: 'flex',
+    alignItems: 'center',
     color: themeVars.color.font.default
 });
 
@@ -92,7 +102,9 @@ export const close = style([
     {
         outline: `none ${themeVars.color.gray[300]}`,
         display: 'inline-block',
-        position: 'relative',
+        position: 'absolute',
+        top: themeVars.space[3],
+        right: themeVars.space[3],
         width: '1.5rem',
         height: '1.5rem',
         backgroundColor: 'transparent',
@@ -103,7 +115,7 @@ export const close = style([
         borderRadius: themeVars.rounded.full,
         marginLeft: themeVars.space[2],
         ':hover': {
-            backgroundColor: themeVars.color.gray[150],
+            backgroundColor: themeVars.color.gray[150]
         },
         ':focus': {
             backgroundColor: themeVars.color.gray[150]
@@ -130,59 +142,59 @@ export const close = style([
             height: '2px',
             backgroundColor: themeVars.color.gray[500],
             transformOrigin: 'center',
-            transition: 'all 0.2s',
+            transition: 'all 0.2s'
         }
     }
 ]);
 
 export const body = style({
     padding: `${themeVars.space[4]}`,
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: "1",
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: '1',
     color: themeVars.color.font.text
 });
 
 export const footer = style({
-    display: "flex",
-    width: "100%",
-    alignItems: "center",
-    padding: `0 ${themeVars.space[4]} ${themeVars.space[4]} ${themeVars.space[4]}`,
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    padding: `0 ${themeVars.space[4]} ${themeVars.space[4]} ${themeVars.space[4]}`
 });
 
-const fadeOutBackgroundAnimation = "fade-out-background-animation";
+const fadeOutBackgroundAnimation = 'fade-out-background-animation';
 globalKeyframes(fadeOutBackgroundAnimation, {
-    'from': {
-        opacity: 1,
+    from: {
+        opacity: 1
     },
-    'to': {
-        opacity: 0,
+    to: {
+        opacity: 0
     }
 });
 
-const fadeInBackgroundAnimation = "fade-in-background-animation";
+const fadeInBackgroundAnimation = 'fade-in-background-animation';
 globalKeyframes(fadeInBackgroundAnimation, {
-    'from': {
-        opacity: 0,
+    from: {
+        opacity: 0
     },
-    'to': {
-        opacity: 1,
+    to: {
+        opacity: 1
     }
 });
 
-const fadeOutAnimation = "fade-out-animation";
+const fadeOutAnimation = 'fade-out-animation';
 globalKeyframes(fadeOutAnimation, {
-    'from': {
+    from: {
         opacity: 1,
         transform: 'scale(1)'
     },
-    'to': {
+    to: {
         opacity: 0,
         transform: 'scale(0.8)'
     }
 });
 
-const fadeInAnimation = "fade-in-animation";
+const fadeInAnimation = 'fade-in-animation';
 globalKeyframes(fadeInAnimation, {
     '0%': {
         opacity: 0,
@@ -198,11 +210,11 @@ globalKeyframes(fadeInAnimation, {
     },
     '100%': {
         opacity: 1,
-        transform: 'scale(1)',
+        transform: 'scale(1)'
     }
 });
 
-const fadeInAnimationNoBounce = "fade-in-animation-no-bounce";
+const fadeInAnimationNoBounce = 'fade-in-animation-no-bounce';
 globalKeyframes(fadeInAnimationNoBounce, {
     '0%': {
         opacity: 0,
@@ -211,7 +223,7 @@ globalKeyframes(fadeInAnimationNoBounce, {
         top: vars.initialTop
     },
     '60%': {
-        opacity: 1,
+        opacity: 1
     },
     '100%': {
         opacity: 1,
@@ -225,34 +237,41 @@ export const fadeEnterNoBounce = style({
     animationName: fadeInAnimationNoBounce,
     animationDuration: '0.2s',
     animationTimingFunction: 'ease-in-out',
-    transition: "transform 0.3s ease-out",
-})
+    transition: 'transform 0.3s ease-out'
+});
 
 export const fadeEnter = style({
     animationName: fadeInAnimation,
     animationDuration: '0.25s',
     animationTimingFunction: 'ease-in-out',
-    transition: themeVars.transition.default,
-})
+    transition: themeVars.transition.default
+});
 
 export const fadeLeave = style({
     animationName: fadeOutAnimation,
     animationDuration: '0.2s',
-    animationTimingFunction: 'ease-in-out',
-})
+    animationTimingFunction: 'ease-in-out'
+});
 
 export const fadeBackgroundEnter = style({
     animationName: fadeInBackgroundAnimation,
     animationDuration: '0.1s',
-    animationTimingFunction: 'ease-in-out',
-})
+    animationTimingFunction: 'ease-in-out'
+});
 
 export const fadeBackgroundLeave = style({
     animationName: fadeOutBackgroundAnimation,
     animationDuration: '0.2s',
-    animationTimingFunction: 'ease-in-out',
-})
+    animationTimingFunction: 'ease-in-out'
+});
 
-export const fadeEnterFrom = style({
+export const fadeEnterFrom = style({});
+
+export const sidebar = style({
+    borderRadius: `0 ${themeVars.rounded.medium} ${themeVars.rounded.medium} 0`
+});
 
+export const content = style({
+    flex: 1,
+    width: '100%'
 });

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

@@ -1,15 +1,11 @@
-import MPagination from "../Pagination.vue";
-import {
-    MPaginationBasic
-} from "./index";
+import MPagination from '../Pagination.vue';
+import { MPaginationBasic } from './index';
 
-import {
-    createStory
-} from "../../../__storybook__";
+import { createStory } from '../../../__storybook__';
 
 export default {
     component: MPagination,
     title: 'Components/Pagination'
-}
+};
 
-export const Basic = createStory(MPaginationBasic)
+export const Basic = createStory(MPaginationBasic);

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

@@ -1 +1 @@
-export { default as MPaginationBasic } from './basic.vue';
+export { default as MPaginationBasic } from './basic.vue';