feat: #8110 apply mixin in quasar components

src/boot/mainShortcutMixin.js

@@ -0,0 +1,39 @@
+import routes from 'src/router/modules';
+import { useRouter } from 'vue-router';
+
+let isNotified = false;
+
+export default {
+    created: function () {
+        console.error('mainShortcutMixin created');
+        const router = useRouter();
+        const keyBindingMap = routes
+            .filter((route) => route.meta.keyBinding)
+            .reduce((map, route) => {
+                map['Key' + route.meta.keyBinding.toUpperCase()] = route.path;
+                return map;
+            }, {});
+
+        const handleKeyDown = (event) => {
+            const { ctrlKey, altKey, code } = event;
+
+            if (ctrlKey && altKey && keyBindingMap[code] && !isNotified) {
+                event.preventDefault();
+                router.push(keyBindingMap[code]);
+                isNotified = true;
+            }
+        };
+
+        const handleKeyUp = (event) => {
+            const { ctrlKey, altKey } = event;
+
+            // Resetea la bandera cuando se sueltan las teclas ctrl o alt
+            if (!ctrlKey || !altKey) {
+                isNotified = false;
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+    },
+};

src/boot/qformMixin.js

@@ -2,29 +2,26 @@ import { getCurrentInstance } from 'vue';
 
 export default {
     mounted: function () {
-        const vm = getCurrentInstance();
+        console.error('qformMixin mounted');
-        if (vm.type.name === 'QForm') {
+        const that = this;
-            if (!['searchbarForm', 'filterPanelForm'].includes(this.$el?.id)) {
+        const form = document.querySelector('.q-form#formModel');
-                // TODO: AUTOFOCUS IS NOT FOCUSING
+        if (!form) return;
-                const that = this;
+        form.addEventListener('keyup', function (evt) {
-                this.$el.addEventListener('keyup', function (evt) {
+            if (evt.key === 'Enter') {
-                    if (evt.key === 'Enter') {
+                const input = evt.target;
-                        const input = evt.target;
+                if (input.type == 'textarea' && evt.shiftKey) {
-                        if (input.type == 'textarea' && evt.shiftKey) {
+                    evt.preventDefault();
-                            evt.preventDefault();
+                    let { selectionStart, selectionEnd } = input;
-                            let { selectionStart, selectionEnd } = input;
+                    input.value =
-                            input.value =
+                        input.value.substring(0, selectionStart) +
-                                input.value.substring(0, selectionStart) +
+                        '\n' +
-                                '\n' +
+                        input.value.substring(selectionEnd);
-                                input.value.substring(selectionEnd);
+                    selectionStart = selectionEnd = selectionStart + 1;
-                            selectionStart = selectionEnd = selectionStart + 1;
+                    return;
-                            return;
+                }
-                        }
+                evt.preventDefault();
-                        evt.preventDefault();
+                that.onSubmit();
-                        that.onSubmit();
-                    }
-                });
             }
-        }
+        });
     },
 };

src/boot/quasar.js

@@ -3,11 +3,16 @@ import qFormMixin from './qformMixin';
 import keyShortcut from './keyShortcut';
 import useNotify from 'src/composables/useNotify.js';
 import { CanceledError } from 'axios';
+import { QForm } from 'quasar';
+import { QLayout } from 'quasar';
+import mainShortcutMixin from './mainShortcutMixin';
 
 const { notify } = useNotify();
 
 export default boot(({ app }) => {
-    app.mixin(qFormMixin);
+    QForm.mixins = [qFormMixin];
+    QLayout.mixins = [mainShortcutMixin];
+
     app.directive('shortcut', keyShortcut);
     app.config.errorHandler = (error) => {
         let message;