@teammodlr/ui-kit 2.1.0 → 2.1.1

package/package.json

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

package/src/components/modal/Modal.vue

@@ -7,7 +7,7 @@
             :enter-from-class="fade.enterFrom"
             :leave-to-class="fade.leaveTo"
         >
-            <div v-show="isOpen" :class="style.background" :style="{zIndex: zIndex}" @click="closeOutside">
+            <div v-show="isOpen" :class="style.background" :style="{zIndex: zIndex}" @mousedown="closeOutside">
                 <Transition
                     type="animation"
                     :enter-active-class="modalScale.enterActive"
@@ -46,11 +46,10 @@
 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 { modalScale, fade } from "../../styles/transitions.css";
 import {useZIndex} from "../../composables/useZIndex";
-import { useMagicKeys, watchOnce } from "@vueuse/core";
+import { useEventListener, useMagicKeys } from "@vueuse/core";
 
 export default defineComponent({
     name: "MModal",
@@ -81,6 +80,8 @@ export default defineComponent({
         const isOpen = ref(false);
         const target = ref();
         const zIndex = ref(props.zIndex ?? nextZIndex());
+
+        const clickInside = ref(false);
         // const {hasFocus, activate, deactivate} = useFocusTrap(target, {
         //     immediate: true,
         //     escapeDeactivates: false,
@@ -102,8 +103,11 @@ export default defineComponent({
             ];
         });
 
+        useEventListener(target, 'mousedown', handleMouseDown);
+        useEventListener(document, 'mouseup', handleMouseUp);
+
         const closeOutside = () => {
-            if (props.canClickOutside) {
+            if (props.canClickOutside && !clickInside.value) {
                 close();
             }
         };
@@ -122,6 +126,18 @@ export default defineComponent({
             isOpen.value = true;
         };
 
+        function handleMouseUp(event: MouseEvent) {
+            nextTick(() => {
+                if (clickInside.value) {
+                    clickInside.value = false;
+                }
+            });
+        }
+
+        function handleMouseDown(event: MouseEvent) {
+            clickInside.value = true;
+        }
+
         function ownerScrollbarOpen() {
             let ownerWindow = window;
             let documentElement = ownerWindow.document.documentElement;
@@ -161,6 +177,8 @@ export default defineComponent({
         return {
             close,
             closeOutside,
+            handleMouseUp,
+            handleMouseDown,
             open,
             target,
             style,