@teammodlr/ui-kit 2.0.32 → 2.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.0.32",
+  "version": "2.0.34",
   "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/table/Table.vue

@@ -20,6 +20,7 @@
                     v-for="(item, index) in items"
                     v-if="items.length > 0"
                     :key="index"
+                    #default="{ onHover }"
                 >
                     <TableCell
                         v-for="(header, index) in headers"
@@ -27,7 +28,7 @@
                         :style="{ textAlign: header.align}"
                         @click.self="$emit('onClick', item)"
                     >
-                        <slot :name="header.key" :item="item">
+                        <slot :name="header.key" :item="item" :onHover="onHover">
                             {{//@ts-ignore
                             item[header.key] }}
                         </slot>

package/src/components/table/TableRow.vue

@@ -1,13 +1,19 @@
 <template>
-    <tr>
-        <slot />
+    <tr @mouseenter="hover = true" @mouseleave="hover = false">
+        <slot :onHover="hover" />
     </tr>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 
 export default defineComponent({
-    name: "TableRow"
+    name: "TableRow",
+    setup(props) {
+        const hover = ref(false);
+        return {
+            hover
+        }
+    }
 });
 </script>

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

@@ -4,7 +4,8 @@
         :items="items"
         @onClick="handleClick"
     >
-        <template #actions="{ item }">
+        <template #actions="{ item, onHover }">
+            {{ onHover }}
             <MButton
                 color="blue"
                 secondary