diff --git a/quasar.config.js b/quasar.config.js index b59c62eeb..ddfe41c82 100644 --- a/quasar.config.js +++ b/quasar.config.js @@ -29,7 +29,16 @@ module.exports = configure(function (/* ctx */) { // app boot file (/src/boot) // --> boot files are part of "main.js" // https://v2.quasar.dev/quasar-cli/boot-files - boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar', 'quasar.defaults'], + boot: [ + 'i18n', + 'axios', + 'vnDate', + 'validations', + 'quasar', + 'quasar.defaults', + 'customQTh', + 'customQInput', + ], // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css css: ['app.scss'], diff --git a/src/boot/customQInput.js b/src/boot/customQInput.js new file mode 100644 index 000000000..51dcd9179 --- /dev/null +++ b/src/boot/customQInput.js @@ -0,0 +1,77 @@ +// src/boot/customQTh.js + +import { boot } from 'quasar/wrappers'; +import { QInput } from 'quasar'; +import i18n from 'src/i18n'; +const TR_HEADER = 'tr-header'; + +export default boot((b) => { + const { app } = b; + app.use(i18n); + app.mixin({ + // mounted() { + // this.applyMixinLogic(); + // }, + mounted() { + this.applyMixinLogic(); + // if (this.$options.name === QInput.name) { + // console.table([this.$options.name]); + // if (this.label) this.label = this.$t(this.label); + // // this.addClassToQTh(this); + // } + }, + methods: { + applyMixinLogic() { + if (this.$options.name === 'QInput') { + // Traducción de la etiqueta + if (this.label) { + const el = this.$el; + // 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') + ) { + const input = child.querySelector('input'); + const filterAvailableText = (element) => + element.__vueParentComponent.type.name === 'QInput' && + element.__vueParentComponent?.attrs?.class !== + 'vn-input-date'; + + if ( + input && + input.__vueParentComponent.type.name === 'QInput' + ) { + // Añadir clase CSS + input.classList.add('input-default'); + + // Traducción de la etiqueta + const labelElement = + child.querySelector('.q-field__label'); + if (labelElement) { + const labelKey = labelElement.textContent.trim(); + labelElement.textContent = this.$t(labelKey); + } + } + } + } + // Traducción de la etiqueta + // const label = this.$el.getAttribute('label'); + // if (label) { + // this.$el = this.$el.setAttribute('label', 'sasd'); + // } + // this.$props.label = this.$t(`*${this.$props.label}`); + // this.label = this.$t(`*${this.$props.label}`); + // this.getNativeElement().ariaLabel = '++++'; + } + // // Añadir clase CSS + // if (!this.$el.classList.contains('input-default')) { + // this.$el.classList.add('input-default'); + // } + } + }, + }, + }); +}); diff --git a/src/boot/customQTh.js b/src/boot/customQTh.js new file mode 100644 index 000000000..ae3aa1011 --- /dev/null +++ b/src/boot/customQTh.js @@ -0,0 +1,34 @@ +// src/boot/customQTh.js + +import { QTable } from 'quasar'; +import { boot } from 'quasar/wrappers'; + +import i18n from 'src/i18n'; +const TR_HEADER = 'tr-header'; + +export default boot((b) => { + const { app } = b; + app.use(i18n); + app.mixin({ + mounted() { + if (this.$options.name === QTable.name) { + console.table([this.$options.name]); + this.addClassToQTh(this.columns ?? []); + } + }, + methods: { + addClassToQTh(columns) { + for (const column of columns) { + let { headerClasses, label, sortable } = column ?? []; + if (!headerClasses) headerClasses = TR_HEADER; + if (!Array.isArray(headerClasses)) headerClasses = [headerClasses]; + else headerClasses.push(TR_HEADER); + column.headerClasses = headerClasses; + if (sortable === undefined) column.sortable = true; + column.label = this.$t(label); + console.table([headerClasses, column.headerClasses]); + } + }, + }, + }); +}); diff --git a/src/boot/defaults/qTable.js b/src/boot/defaults/qTable.js index 8902d4266..23bc7d922 100644 --- a/src/boot/defaults/qTable.js +++ b/src/boot/defaults/qTable.js @@ -1,5 +1,51 @@ import { QTable } from 'quasar'; +import { QInput } from 'quasar'; import setDefault from './setDefault'; +import { QSelect } from 'quasar'; setDefault(QTable, 'pagination', { rowsPerPage: 0 }); setDefault(QTable, 'hidePagination', true); +QInput.props.outlined = { + type: QInput.props.outlined, + default: false, +}; +QInput.props.dense = { + type: QInput.props.dense, + default: false, +}; +QInput.props.stackLabel = { + type: QInput.props.stackLabel, + default: true, +}; +QSelect.props.optionLabel = { + type: QSelect.props.optionLabel, + default: 'name', +}; +QSelect.props.optionValue = { + type: QSelect.props.optionValue, + default: 'id', +}; +QInput.props.hideBottomSpace = { + type: QInput.props.hideBottomSpace, + default: true, +}; +QTable.props.columns = { + type: QTable.props.columns, + align: 'right', + format: (value) => `${value}*`, +}; +QTable.props.noDataLabel = { + default: 'asd', +}; + +setDefault(QInput, 'outlined', false); +// setDefault(QTable, "noDataLabel", t('globalfs.noResults')); +setDefault(QTable, 'gridHeader', true); +setDefault(QTable, 'color', 'red-8'); +setDefault(QTable, 'pagination', { rowsPerPage: 25 }); +setDefault(QTable, 'rowKey', 'id'); +// setDefault(QTable, 'columns', (data) => { +// console.log(this); +// }); +// setDefault(QSelect, 'optionValue', 'id'); +// setDefault(QSelect, 'optionLabel', 'name'); diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue index 8358cd6e6..67a4fd958 100644 --- a/src/components/common/VnInput.vue +++ b/src/components/common/VnInput.vue @@ -69,7 +69,6 @@ const inputRules = [ :clearable="false" :rules="inputRules" :lazy-rules="true" - hide-bottom-space >