@teammodlr/ui-kit 2.1.14 → 2.1.16

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

@@ -50,17 +50,55 @@ export const size = styleVariants({
     }
 });
 
-export const background = style({
-    zIndex: 100,
-    backgroundColor: 'hsla(0,0%,45.1%,0.7)',
+export const wrapper = style({
     position: 'fixed',
     top: 0,
+    insetInlineEnd: 0,
     bottom: 0,
-    left: 0,
-    right: 0,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
+    insetInlineStart: 0,
+    overflow: 'auto',
+    outline: 0
+});
+
+export const mask = style({
+    position: 'fixed',
+    top: 0,
+    insetInlineEnd: 0,
+    bottom: 0,
+    insetInlineStart: 0,
+    height: '100%',
+    backgroundColor: 'hsla(0,0%,45.1%,0.7)'
+});
+
+export const modal = style({
+    margin: `0 auto`,
+    padding: 0,
+    boxSizing: 'border-box',
+    position: 'relative',
+    width: 'auto',
+    top: 100,
+    paddingBottom: '24px',
+    maxWidth: `calc(100vw - 32px)`,
+    pointerEvents: 'none'
+});
+
+export const centeredWrapper = style({
+    textAlign: 'center',
+    '::before': {
+        display: 'inline-block',
+        width: 0,
+        height: '100%',
+        verticalAlign: 'middle',
+        content: '""'
+    }
+});
+
+export const centeredModal = style({
+    top: 0,
+    display: 'inline-block',
+    paddingBottom: 0,
+    textAlign: 'start',
+    verticalAlign: 'middle'
 });
 
 export const container = style({
@@ -74,7 +112,8 @@ export const container = style({
     display: 'flex',
     flexDirection: 'column',
     position: 'relative',
-    gap: themeVars.space[2]
+    gap: themeVars.space[2],
+    pointerEvents: 'auto'
 });
 
 export const hasSidebar = style({

package/src/components/tooltip/Tooltip.vue

@@ -4,24 +4,24 @@
         style="display: inline-flex"
         @mouseenter="show"
         @mouseleave="hide"
-        ref="wrapper"
-    >
+        ref="wrapper">
         <span ref="reference">
             <slot />
         </span>
 
         <Teleport :to="transferTo">
-            <Transition 
+            <Transition
                 :enter-active-class="fade.enterActive"
                 :leave-active-class="fade.leaveActive"
                 :enter-from-class="fade.enterFrom"
-                :leave-to-class="fade.leaveTo"
-            >
-                <div role="tooltip" :class="computedClasses" ref="popper" v-show="isOpen" :style="{zIndex: zIndex}">
-                    <slot
-                        :text="text"
-                        name="content"
-                    >
+                :leave-to-class="fade.leaveTo">
+                <div
+                    role="tooltip"
+                    :class="computedClasses"
+                    ref="popper"
+                    v-if="isOpen"
+                    :style="{ zIndex: zIndex }">
+                    <slot :text="text" name="content">
                         {{ text }}
                     </slot>
                 </div>
@@ -31,18 +31,30 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, type PropType, computed, watch, onUnmounted } from 'vue';
-import { type Placement, placementWhileList, usePopper } from "../../composables/usePopper";
-import { fade } from "../../styles/transitions.css";
-import * as style from "./style";
-import {useZIndex} from "../../composables/useZIndex";
+import {
+    defineComponent,
+    ref,
+    toRef,
+    type PropType,
+    computed,
+    watch,
+    onUnmounted
+} from 'vue';
+import {
+    type Placement,
+    placementWhileList,
+    usePopper
+} from '../../composables/usePopper';
+import { fade } from '../../styles/transitions.css';
+import * as style from './style';
+import { useZIndex } from '../../composables/useZIndex';
 
 export default defineComponent({
-    name: "MTooltip",
+    name: 'MTooltip',
     props: {
         text: {
             type: String,
-            default: ""
+            default: ''
         },
         placement: {
             type: String as PropType<Placement>,
@@ -70,7 +82,7 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const {nextZIndex} = useZIndex();
+        const { nextZIndex } = useZIndex();
         const placement = toRef(props, 'placement');
         // @ts-ignore
         const transfer = toRef(props, 'transfer');
@@ -80,7 +92,7 @@ export default defineComponent({
         const zIndex = ref(props.zIndex ?? nextZIndex());
         const timeout = ref<ReturnType<typeof setTimeout> | null>(null);
         const offset = computed(() => {
-            switch(placement.value) {
+            switch (placement.value) {
                 case 'top':
                     return [0, 8];
                 case 'bottom':
@@ -89,7 +101,7 @@ export default defineComponent({
                     return [8, 0];
                 case 'right':
                     return [-8, 0];
-                default: 
+                default:
                     return [0, 0];
             }
         });
@@ -109,14 +121,17 @@ export default defineComponent({
                 {
                     [style.reverse]: props.reverse
                 }
-            ]
+            ];
         });
 
-        watch(() => isOpen.value, (value: boolean) => {
-            if (value) {
-                updatePopper();
+        watch(
+            () => isOpen.value,
+            (value: boolean) => {
+                if (value) {
+                    updatePopper();
+                }
             }
-        });
+        );
 
         const toggle = () => {
             if (timeout.value) {
@@ -130,7 +145,7 @@ export default defineComponent({
             } else {
                 isOpen.value = !isOpen.value;
             }
-        }
+        };
 
         function show() {
             if (timeout.value) {
@@ -161,7 +176,7 @@ export default defineComponent({
             }
             timeout.value = null;
         });
-        
+
         return {
             reference,
             popper,
@@ -173,10 +188,9 @@ export default defineComponent({
             zIndex,
             style,
             fade
-        }
+        };
     }
-})
+});
 </script>
 
-
 <style scoped></style>

package/src/styles/transitions.css.ts

@@ -62,7 +62,7 @@ export const scale = {
 };
 
 const MODAL_NAME = 'modal';
-const MODAL_DURATION = 0.18;
+const MODAL_DURATION = 0.5;
 globalKeyframes(MODAL_NAME, {
     '0%': {
         opacity: 0,