feat: QSelect

quasar.config.js

@@ -38,6 +38,7 @@ module.exports = configure(function (/* ctx */) {
             'quasar.defaults',
             'customQTh',
             'customQInput',
+            'customQSelect',
         ],
 
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css

src/boot/customQInput.js

@@ -13,7 +13,7 @@ export default boot((b) => {
         //     this.applyMixinLogic();
         // },
         mounted() {
-            this.applyMixinLogic();
+            this.mixinQInput();
             // if (this.$options.name === QInput.name) {
             //     console.table([this.$options.name]);
             //     if (this.label) this.label = this.$t(this.label);
@@ -21,7 +21,7 @@ export default boot((b) => {
             // }
         },
         methods: {
-            applyMixinLogic() {
+            mixinQInput() {
                 if (this.$options.name === 'QInput') {
                     // Traducción de la etiqueta
                     if (this.label) {

src/boot/customQSelect.js

@@ -0,0 +1,46 @@
+import { boot } from 'quasar/wrappers';
+import i18n from 'src/i18n';
+import { QInput, QSelect } from 'quasar';
+
+export default boot(({ app }) => {
+    // Usar vue-i18n en la aplicación
+    app.use(i18n);
+
+    // Mixin global para añadir la clase CSS y traducir etiquetas QInput y QSelect
+    app.mixin({
+        mounted() {
+            this.mixinQSelect(this.$el);
+        },
+        methods: {
+            mixinQSelect(el) {
+                if (!el) return;
+                if (this.$options.name === 'QSelect') {
+                    // Recorrer los elementos hijos
+                    const children = el.children || [];
+                    for (let i = 0; i < children.length; i++) {
+                        const child = children[i];
+                        if (
+                            child.tagName === 'DIV' &&
+                            child.classList.contains('q-field__inner')
+                        ) {
+                            // Detectar si es un QInput o QSelect
+                            const input = child.querySelector('input');
+
+                            if (input?.__vueParentComponent?.type?.name === 'QSelect') {
+                                // Traducción de la etiqueta
+                                const labelElement =
+                                    child.querySelector('.q-field__label');
+                                if (labelElement) {
+                                    const labelKey = labelElement.textContent.trim();
+                                    labelElement.textContent = this.$t(labelKey);
+                                }
+                            }
+                        }
+                        // Aplicar la lógica a los elementos hijos recursivamente
+                        this.mixinQSelect(child);
+                    }
+                }
+            },
+        },
+    });
+});

src/pages/Department/Card/DepartmentBasicData.vue

@@ -31,7 +31,7 @@ const clientsOptions = ref([]);
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnInput
-                    :label="t('department.name')"
+                    :label="'department.name'"
                     v-model="data.name"
                     :rules="validate('department.name')"
                     clearable
@@ -60,7 +60,7 @@ const clientsOptions = ref([]);
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnSelect
-                    :label="t('department.bossDepartment')"
+                    :label="'department.bossDepartment'"
                     v-model="data.workerFk"
                     :options="workersOptions"
                     option-value="id"

src/pages/Department/Card/DepartmentSummary.vue

@@ -44,11 +44,7 @@ onMounted(async () => {
                 />
                 <div class="full-width row wrap justify-between content-between">
                     <div class="column" style="min-width: 50%">
-                        <VnLv
-                            :label="t('department.name')"
-                            :value="department.name"
-                            dash
-                        />
+                        <VnLv label="department.name" :value="department.name" dash />
                         <VnLv
                             :label="t('department.code')"
                             :value="department.code"