@teammodlr/ui-kit 2.3.17 → 2.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.3.17",
+  "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;