feat: QBtn

quasar.config.js

@@ -39,6 +39,10 @@ module.exports = configure(function (/* ctx */) {
             'customQTh',
             // 'customQInput',
             // 'customQSelect',
+
+            'customQBtn',
+            'customQBtnGroup',
+
             'vnTranslate',
         ],
 

src/boot/customQBtn.js

@@ -0,0 +1,51 @@
+import { boot } from 'quasar/wrappers';
+import i18n from 'src/i18n';
+
+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.styleBtn(this.$el);
+        },
+        methods: {
+            styleBtn(el) {
+                if (!el) return;
+                if (this.$el?.__vueParentComponent?.type?.name === 'QBtn') {
+                    // Recorrer los elementos hijos
+                    const _children = el.children || [];
+                    const childrens = Array.from(_children).filter((child) =>
+                        child.classList.contains('q-btn')
+                    );
+                    for (const btn of childrens) {
+                        btn.classList.add();
+                    }
+                    /* 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/boot/customQBtnGroup.js

@@ -0,0 +1,48 @@
+import { boot } from 'quasar/wrappers';
+import i18n from 'src/i18n';
+
+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.styleBtnGroup(this.$el);
+        },
+        methods: {
+            styleBtnGroup(el) {
+                if (!el) return;
+                if (this.$el?.__vueParentComponent?.type?.name === 'QBtnGroup') {
+                    // Recorrer los elementos hijos
+
+                    this.$el.classList.add('q-gutter-x-sm');
+                    this.$el.style.columnGap = '10px';
+
+                    /*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/boot/defaults/qBtn.js

@@ -0,0 +1,30 @@
+import { QBtn } from 'quasar';
+import { QBtnGroup } from 'quasar';
+QBtn.props.size = {
+    type: QBtn.props.size,
+    default: 'md',
+};
+// QBtn.props.flat = {
+//     type: QBtn.props.flat,
+//     default: false,
+// };
+// QBtnGroup.props.class = {
+//     type: QBtn.props.class,
+//     default: ['q-gutter-x-sm'],
+// };
+// QBtnGroup.props.style = {
+//     type: QBtn.props.style,
+//     default: 'column-gap: 10px',
+// };
+QBtnGroup.props.push = {
+    type: QBtn.props.push,
+    default: true,
+};
+// QTable.props.columns = {
+//     type: QTable.props.columns,
+//     align: 'right',
+//     format: (value) => `${value}*`,
+// };
+// QTable.props.noDataLabel = {
+//     default: 'asd',
+// };

src/boot/quasar.defaults.js

@@ -1,3 +1,4 @@
 export * from './defaults/qTable';
 export * from './defaults/qInput';
 export * from './defaults/qSelect';
+export * from './defaults/qBtn';

src/boot/vnTranslate.js

@@ -2,8 +2,17 @@ import { boot } from 'quasar/wrappers';
 import i18n from 'src/i18n';
 import { QInput, QSelect } from 'quasar';
 import VnLv from 'src/components/ui/VnLv.vue';
+import { QBtn } from 'quasar';
+import { QBtnGroup } from 'quasar';
+import { QBtnDropdown } from 'quasar';
 
-const VALID_QUASAR_ELEMENTS = [QSelect.name, QInput.name];
+const VALID_QUASAR_ELEMENTS = [
+    QSelect.name,
+    QInput.name,
+    QBtn.name,
+    QBtnGroup.name,
+    QBtnDropdown.name,
+];
 const VALID_VN_ELEMENTS = [VnLv.__name];
 export default boot(({ app }) => {
     // Usar vue-i18n en la aplicación

src/components/CrudModel.vue

@@ -288,7 +288,7 @@ watch(formUrl, async () => {
     </VnPaginate>
     <SkeletonTable v-if="!formData" />
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtnGroup push style="column-gap: 10px">
+        <QBtnGroup push>
             <slot name="moreBeforeActions" />
             <QBtn
                 :label="tMobile('globals.remove')"

src/components/FormModel.vue

@@ -262,13 +262,13 @@ defineExpose({
         v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
     >
         <div v-if="$props.defaultActions">
-            <QBtnGroup push class="q-gutter-x-sm">
+            <QBtnGroup>
                 <slot name="moreActions" />
                 <QBtn
                     :label="tMobile(defaultButtons.reset.label)"
                     :color="defaultButtons.reset.color"
                     :icon="defaultButtons.reset.icon"
-                    flat
+                    flat="false"
                     @click="reset"
                     :disable="!hasChanges"
                     :title="t(defaultButtons.reset.label)"