From 54ace8c682c4155a88e7f9182f7ab0c88d5f8d2b Mon Sep 17 00:00:00 2001 From: pablone Date: Wed, 23 Oct 2024 10:47:44 +0200 Subject: [PATCH] refactor: refs #6897 refactor vnTable for non input editable table --- src/boot/quasar.js | 6 +- src/components/VnColor.vue | 27 +-- src/components/VnTable/VnColumn.vue | 35 +++- src/components/VnTable/VnTable.vue | 199 ++++++++++++++++---- src/components/common/VnComponent.vue | 3 + src/components/common/VnInput.vue | 2 + src/components/common/VnInputDate.vue | 2 + src/components/common/VnInputNumber.vue | 3 +- src/components/common/VnInputTime.vue | 2 + src/components/common/VnSelect.vue | 3 +- src/components/common/VnSelectCache.vue | 4 +- src/css/app.scss | 6 - src/pages/Entry/Card/.html | 68 +++++++ src/pages/Entry/Card/EntryBasicData.vue | 1 + src/pages/Entry/Card/EntryBuys.vue | 40 ++-- src/pages/Entry/Card/EntrySummary.vue | 61 ------ src/pages/Item/Card/ItemDescriptorProxy.vue | 3 +- 17 files changed, 320 insertions(+), 145 deletions(-) create mode 100644 src/pages/Entry/Card/.html diff --git a/src/boot/quasar.js b/src/boot/quasar.js index 5db6edd24..98efda032 100644 --- a/src/boot/quasar.js +++ b/src/boot/quasar.js @@ -6,11 +6,11 @@ import useNotify from 'src/composables/useNotify.js'; const { notify } = useNotify(); export default boot(({ app }) => { - app.mixin(qFormMixin); - app.mixin(mainShortcutMixin); - app.directive('shortcut', keyShortcut); app.config.errorHandler = function (err) { console.error(err); notify('globals.error', 'negative', 'error'); }; + app.directive('shortcut', keyShortcut); + app.mixin(qFormMixin); + app.mixin(mainShortcutMixin); }); diff --git a/src/components/VnColor.vue b/src/components/VnColor.vue index 57cbe3090..677da4d65 100644 --- a/src/components/VnColor.vue +++ b/src/components/VnColor.vue @@ -8,36 +8,27 @@ const props = defineProps({ validator: (value) => value.length <= 3, }, }); - const sectionHeight = computed(() => `${100 / props.colors.length}%`); - -const divStyle = computed(() => ({ - display: 'flex', - flexDirection: 'column', - width: '100%', - height: '100%', -})); - diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue index ed34e9eee..dbbb7bf46 100644 --- a/src/components/VnTable/VnColumn.vue +++ b/src/components/VnTable/VnColumn.vue @@ -14,6 +14,7 @@ import VnComponent from 'components/common/VnComponent.vue'; import VnUserLink from 'components/ui/VnUserLink.vue'; const model = defineModel(undefined, { required: true }); +const emit = defineEmits(['blur']); const $props = defineProps({ column: { type: Object, @@ -39,6 +40,10 @@ const $props = defineProps({ type: Object, default: null, }, + autofocus: { + type: Boolean, + default: false, + }, showLabel: { type: Boolean, default: null, @@ -99,6 +104,7 @@ const defaultComponents = { }, }, checkbox: { + ref: 'checkbox', component: markRaw(QCheckbox), attrs: ({ model }) => { const defaultAttrs = { @@ -115,6 +121,10 @@ const defaultComponents = { }, forceAttrs: { label: $props.showLabel && $props.column.label, + autofocus: true, + }, + events: { + blur: () => emit('blur'), }, }, select: { @@ -160,7 +170,27 @@ const col = computed(() => { return newColumn; }); -const components = computed(() => $props.components ?? defaultComponents); +const components = computed(() => { + const sourceComponents = $props.components ?? defaultComponents; + + return Object.keys(sourceComponents).reduce((acc, key) => { + const component = sourceComponents[key]; + + if (!component || typeof component !== 'object') { + acc[key] = component; + return acc; + } + + acc[key] = { + ...component, + attrs: { + ...(component.attrs || {}), + autofocus: $props.autofocus, + }, + }; + return acc; + }, {}); +}); diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue index 7d1996a38..cd04aa4af 100644 --- a/src/components/VnTable/VnTable.vue +++ b/src/components/VnTable/VnTable.vue @@ -1,5 +1,5 @@ +