diff --git a/quasar.config.js b/quasar.config.js
index d3a373942..558b02a12 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -39,6 +39,10 @@ module.exports = configure(function (/* ctx */) {
'customQTh',
// 'customQInput',
// 'customQSelect',
+
+ 'customQBtn',
+ 'customQBtnGroup',
+
'vnTranslate',
],
diff --git a/src/boot/customQBtn.js b/src/boot/customQBtn.js
new file mode 100644
index 000000000..4a5ba44e0
--- /dev/null
+++ b/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);
+ }*/
+ }
+ },
+ },
+ });
+});
diff --git a/src/boot/customQBtnGroup.js b/src/boot/customQBtnGroup.js
new file mode 100644
index 000000000..70cbc484f
--- /dev/null
+++ b/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);
+ }*/
+ }
+ },
+ },
+ });
+});
diff --git a/src/boot/defaults/qBtn.js b/src/boot/defaults/qBtn.js
new file mode 100644
index 000000000..a51b68ebc
--- /dev/null
+++ b/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',
+// };
diff --git a/src/boot/quasar.defaults.js b/src/boot/quasar.defaults.js
index 9638e2057..870be314d 100644
--- a/src/boot/quasar.defaults.js
+++ b/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';
diff --git a/src/boot/vnTranslate.js b/src/boot/vnTranslate.js
index 4ffc618ac..45cd0bd68 100644
--- a/src/boot/vnTranslate.js
+++ b/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
diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 000de4336..280750242 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -288,7 +288,7 @@ watch(formUrl, async () => {
-
+
-
+