@teammodlr/ui-kit 2.3.16 → 2.3.18

package/package.json

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

package/src/components/confirm/Confirm.vue

@@ -11,10 +11,10 @@
 
             <template #footer>
                 <div style="display: flex; flex-grow: 1; justify-content: end">
-                    <MButton :variant="okVariant" @click="handleOk">
+                    <MButton ref="actionButton" :variant="okVariant" @click="handleOk">
                         {{ okText ?? 'Okay' }}
                     </MButton>
-                    <MButton style="margin-left: 8px" @click="handleCancel">
+                    <MButton ref="cancelButton" style="margin-left: 8px" @click="handleCancel">
                         {{ cancelText ?? 'Cancel' }}
                     </MButton>
                 </div>
@@ -24,8 +24,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
-import { useZIndex } from '../../composables/useZIndex';
+import { defineComponent, onMounted, ref, nextTick } from 'vue';
 import { confirmProps } from './props';
 import MModal from '../modal/Modal.vue';
 import MButton from '../button/Button.vue';
@@ -33,10 +32,10 @@ import MButton from '../button/Button.vue';
 export default defineComponent({
     name: 'Confirm',
     props: confirmProps,
-    setup(props, { slots }) {
+    setup(props) {
         const modal = ref();
-
-        const { nextZIndex } = useZIndex();
+        const actionButton = ref();
+        const cancelButton = ref();
 
         async function handleCancel(event: MouseEvent) {
             modal.value?.close();
@@ -48,14 +47,24 @@ export default defineComponent({
         async function handleOk(event: MouseEvent) {
             modal.value?.close();
             if (props.onOk) {
-                props.onOk(event);
+                await props.onOk(event);
             }
         }
-        onMounted(() => {
+        onMounted(async () => {
             modal.value?.open(null);
+            await nextTick();
+            setTimeout(() => {
+                if (props.focusAction) {
+                    actionButton.value.$el.focus();
+                    return;
+                }
+                cancelButton.value.$el.focus();
+            }, 100);
         });
         return {
             modal,
+            actionButton,
+            cancelButton,
             handleOk,
             handleCancel
         };

package/src/components/confirm/props.ts

@@ -18,6 +18,10 @@ export const confirmProps = {
     okVariant: {
         type: String as PropType<Variant>,
         default: 'primary'
+    },
+    focusAction: {
+        type: Boolean,
+        default: false
     }
 } as const;
 

package/src/components/dialogprovider/DialogProvider.vue

@@ -13,7 +13,7 @@
     </template>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, provide, ref, nextTick } from 'vue';
+import { defineComponent, reactive, provide, ref, nextTick, computed } from 'vue';
 import type { DialogApiInjection, DialogOptions, DialogReactive } from './types';
 import MDialog from '../dialog/Dialog.vue';
 import MRenderer from '../renderer/renderer';
@@ -103,9 +103,26 @@ export default defineComponent({
             remove(key);
         }
 
+        const hasOpenDialog = computed(() => {
+            return Object.values(dialogMap).some(dialog => dialog.options.open === true);
+        });
+
+        const openDialogCount = computed(() => {
+            return Object.values(dialogMap).filter(dialog => dialog.options.open === true).length;
+        });
+
+        const openDialogKeys = computed(() => {
+            return Object.values(dialogMap)
+                .filter(dialog => dialog.options.open === true)
+                .map(dialog => dialog.key);
+        });
+
         const api: DialogApiInjection = {
             create,
             remove,
+            hasOpenDialog: () => hasOpenDialog.value,
+            openDialogCount: () => openDialogCount.value,
+            openDialogKeys: () => openDialogKeys.value
         };
 
         provide('m-dialog', api);

package/src/components/dialogprovider/types.ts

@@ -23,4 +23,7 @@ export interface DialogReactive {
 export interface DialogApiInjection {
     create: (key: string, options?: DialogOptions) => DialogReactive;
     remove: (key: string) => void;
+    hasOpenDialog: () => boolean;
+    openDialogCount: () => number;
+    openDialogKeys: () => string[];
 }