@teammodlr/ui-kit 2.0.31 → 2.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.0.31",
+  "version": "2.0.33",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/modal/Modal.vue

@@ -40,6 +40,7 @@ import {defineComponent, ref, computed, watch, nextTick} from 'vue';
 import {useFocusTrap} from '@vueuse/integrations/useFocusTrap'
 import * as style from './style';
 import {useZIndex} from "../../composables/useZIndex";
+import { useMagicKeys, watchOnce } from "@vueuse/core";
 
 export default defineComponent({
     name: "MModal",
@@ -72,6 +73,14 @@ export default defineComponent({
             allowOutsideClick: true
         });
 
+        const { escape } = useMagicKeys()
+
+        watch(escape, (v) => {
+            if (v && isOpen.value) {
+                close()
+            }
+        })
+
         const containerClasses = computed(() => {
             return [
                 style.container,
@@ -79,7 +88,6 @@ export default defineComponent({
             ];
         });
 
-
         const closeOutside = () => {
             if (props.canClickOutside) {
                 isOpen.value = false;

package/src/components/tooltip/Tooltip.vue

@@ -2,8 +2,8 @@
     <span
         v-bind="$attrs"
         style="display: inline-flex"
-        @mouseenter="toggle"
-        @mouseleave="toggle"
+        @mouseenter="show"
+        @mouseleave="hide"
         ref="wrapper"
     >
         <span ref="reference">
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, type PropType, computed, watch } from 'vue';
+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";
@@ -132,12 +132,43 @@ export default defineComponent({
             }
         }
 
+        function show() {
+            if (timeout.value) {
+                clearTimeout(timeout.value);
+            }
+
+            if (props.delay) {
+                timeout.value = setTimeout(() => {
+                    isOpen.value = true;
+                }, props.delay);
+            } else {
+                isOpen.value = true;
+            }
+        }
+
+        function hide() {
+            if (timeout.value) {
+                clearTimeout(timeout.value);
+            }
+
+            isOpen.value = false;
+        }
+
+        onUnmounted(() => {
+            isOpen.value = false;
+            if (timeout.value) {
+                clearTimeout(timeout.value);
+            }
+            timeout.value = null;
+        });
+        
         return {
             reference,
             popper,
             transferTo,
             isOpen,
-            toggle,
+            show,
+            hide,
             computedClasses,
             zIndex,
             style,