verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 72 Releases Wiki Activity

#7124 - First Input Autofocus without property #251

Merged
jsegarra merged 5 commits from 7124_autofocus_first_input into dev 2024-03-25 07:17:04 +00:00
Conversation 0 Commits 5 Files Changed 5 +30 -3
5 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
quasar.config.js
View File

@ -29,7 +29,7 @@ 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'],
boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar'],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.scss'],

21
src/boot/qformMixin.js Normal file
View File

@ -0,0 +1,21 @@
import { getCurrentInstance } from 'vue';
const filterAvailableInput = element => element.classList.contains('q-field__native') && !element.disabled
const filterAvailableText = element => element.__vueParentComponent.type.name === 'QInput' && element.__vueParentComponent?.attrs?.class !== 'vn-input-date';
export default {
mounted: function () {
const vm = getCurrentInstance();
if (vm.type.name === 'QForm')
jsegarra marked this conversation as resolved Outdated
alexm commented 2024-03-22 06:54:03 +00:00
Outdated
Review
Copy Link

Justo he probado en claimBasicData (ejemplo: http://localhost:9000/#/claim/1/basic-data) y es curioso pq no funciona. Dado que el primer elemento si es un input pero esta disabled. Igual se podría añadir que comprobase que no tenga la clase .disabled

Justo he probado en claimBasicData (ejemplo: http://localhost:9000/#/claim/1/basic-data) y es curioso pq no funciona. Dado que el primer elemento si es un input pero esta disabled. Igual se podría añadir que comprobase que no tenga la clase `.disabled`
jsegarra commented 2024-03-22 06:57:32 +00:00
Outdated
Review
Copy Link

Si, es una posibilidad que había visto pero no contemplado.
Lo tengo en cuenta para mas cambios

Si, es una posibilidad que había visto pero no contemplado. Lo tengo en cuenta para mas cambios
jgallego commented 2024-03-22 07:08:05 +00:00
Outdated
Review
Copy Link

me parece muy interesante que obvie los disables

me parece muy interesante que obvie los disables
🚀 1
if (!['searchbarForm','filterPanelForm'].includes(this.$el?.id)) {
// AUTOFOCUS
const elementsArray = Array.from(this.$el.elements);
jsegarra marked this conversation as resolved
alexm commented 2024-03-22 06:05:06 +00:00
Review
Copy Link

No usar una variable si luego solo se usa una vez. Igual se te ha quedado de antes

No usar una variable si luego solo se usa una vez. Igual se te ha quedado de antes
😆 1
jsegarra commented 2024-03-22 06:34:19 +00:00
Review
Copy Link

Si que se usaba en el evento key, pero eso pertenece a otra rama

Si que se usaba en el evento key, pero eso pertenece a otra rama
const firstInputElement = elementsArray.filter(filterAvailableInput).find(filterAvailableText);
if (firstInputElement) {
firstInputElement.focus();
jsegarra marked this conversation as resolved
jgallego commented 2024-03-21 14:24:41 +00:00
Review
Copy Link

refactor de chatGpt para no usar -1
const firstInputElement = elementsArray.find(element => element.classList.contains('q-field__native'));

if (firstInputElement) {

refactor de chatGpt para no usar -1 const firstInputElement = elementsArray.find(element => element.classList.contains('q-field__native')); if (firstInputElement) {
👀 1
}
}
},
};

6
src/boot/quasar.js Normal file
View File

@ -0,0 +1,6 @@
import { boot } from 'quasar/wrappers';
import qFormMixin from './qformMixin';
export default boot(({ app }) => {
app.mixin(qFormMixin);
});

2
src/components/ui/VnFilterPanel.vue
View File

@ -164,7 +164,7 @@ function formatValue(value) {
</script>
<template>
<QForm @submit="search">
<QForm @submit="search" id="filterPanelForm">
<QList dense>
<QItem class="q-mt-xs">
<QItemSection top>

2
src/components/ui/VnSearchbar.vue
View File

@ -108,7 +108,7 @@ async function search() {
</script>
<template>
<QForm @submit="search">
<QForm @submit="search" id="searchbarForm">
<VnInput
id="searchbar"
v-model="searchText"