diff --git a/src/boot/qformMixin.js b/src/boot/qformMixin.js index 97d80c670..cb31391b3 100644 --- a/src/boot/qformMixin.js +++ b/src/boot/qformMixin.js @@ -9,19 +9,19 @@ export default { if (!form) return; try { const inputsFormCard = form.querySelectorAll( - `input:not([disabled]):not([type="checkbox"])` + `input:not([disabled]):not([type="checkbox"])`, ); if (inputsFormCard.length) { focusFirstInput(inputsFormCard[0]); } const textareas = document.querySelectorAll( - 'textarea:not([disabled]), [contenteditable]:not([disabled])' + 'textarea:not([disabled]), [contenteditable]:not([disabled])', ); if (textareas.length) { focusFirstInput(textareas[textareas.length - 1]); } const inputs = document.querySelectorAll( - 'form#formModel input:not([disabled]):not([type="checkbox"])' + 'form#formModel input:not([disabled]):not([type="checkbox"])', ); const input = inputs[0]; if (!input) return; diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue index 59141d374..5a59f301e 100644 --- a/src/components/FormModel.vue +++ b/src/components/FormModel.vue @@ -113,7 +113,7 @@ const defaultButtons = computed(() => ({ color: 'primary', icon: 'save', label: 'globals.save', - click: () => myForm.value.submit(), + click: () => myForm.value.onSubmit(false), type: 'submit', }, reset: { @@ -207,7 +207,8 @@ async function fetch() { } } -async function save() { +async function save(prevent = false) { + if (prevent) return; if ($props.observeFormChanges && !hasChanges.value) return notify('globals.noChanges', 'negative'); @@ -293,7 +294,7 @@ defineExpose({ -import { ref, computed, onMounted } from 'vue'; +import { ref, computed } from 'vue'; import { useI18n } from 'vue-i18n'; import FormModel from 'components/FormModel.vue'; @@ -58,19 +58,6 @@ defineExpose({

{{ subtitle }}

- +
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue index 7e0757f6c..80de93001 100644 --- a/src/components/VnTable/VnTable.vue +++ b/src/components/VnTable/VnTable.vue @@ -340,8 +340,9 @@ const clickHandler = async (event) => { const isDateElement = event.target.closest('.q-date'); const isTimeElement = event.target.closest('.q-time'); + const isQselectDropDown = event.target.closest('.q-select__dropdown-icon'); - if (isDateElement || isTimeElement) return; + if (isDateElement || isTimeElement || isQselectDropDown) return; if (clickedElement === null) { destroyInput(editingRow.value, editingField.value); @@ -411,7 +412,7 @@ async function renderInput(rowId, field, clickedElement) { focusOnMount: true, eventHandlers: { 'update:modelValue': async (value) => { - if (isSelect) { + if (isSelect && value) { row[column.name] = value[column.attrs?.optionValue ?? 'id']; row[column?.name + 'TextValue'] = value[column.attrs?.optionLabel ?? 'name']; @@ -448,8 +449,11 @@ async function renderInput(rowId, field, clickedElement) { node.appContext = app._context; render(node, clickedElement); - if (['checkbox', 'toggle', undefined].includes(column?.component)) + if (['toggle'].includes(column?.component)) node.el?.querySelector('span > div').focus(); + + if (['checkbox', undefined].includes(column?.component)) + node.el?.querySelector('span > div > div').focus(); } function destroyInput(rowIndex, field, clickedElement) { @@ -530,6 +534,9 @@ function formatColumnValue(col, row, dashIfEmpty) { } } const checkbox = ref(null); +function cardClick(_, row) { + if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` }); +}