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

#6825 - VnTable V1 #396

Merged
alexm merged 73 commits from 6825-vnTable into dev 2024-06-20 13:08:55 +00:00
Conversation 0 Commits 73 Files Changed 35 +23 -27
3 changed files with 23 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 702b031650 - Show all commits

3
src/components/VnTable/VnChip.vue
View File

@ -16,10 +16,11 @@ function stopEventPropagation(event) {
}
</script>
<template>
<slot name="beforeChip" :row="row"></slot>
<span
v-for="col of columns"
:key="col.name"
alexm marked this conversation as resolved Outdated
jsegarra commented 2024-06-19 08:01:13 +00:00
Outdated
Review
Copy Link

Si quitas $event, se le pasa igualmente

Si quitas $event, se le pasa igualmente
@click="stopEventPropagation($event)"
@click="stopEventPropagation"
class="cursor-text"
>
<QChip

45
src/components/VnTable/VnFilter.vue
View File

@ -36,45 +36,44 @@ const enterEvent = {
'keyup.enter': () => addFilter(model.value),
remove: () => addFilter(null),
};
alexm marked this conversation as resolved Outdated
jsegarra commented 2024-06-19 08:53:35 +00:00
Outdated
Review
Copy Link

Hay muchas lineas/props repetidas

Mi propuesta es definir un componente base donde se añadan atributos que sean genericos

const baseComponent = (component, event) => ({
    component: markRaw(component),
    event,
    forceAttrs: {
        label: $props.showTitle ? '' : $props.column.label,
    },
    attrs: {
        class: 'q-px-sm q-pb-xs q-pt-none',
        dense: true,
        filled: !$props.showTitle,
    },
});

Para input quedaría algo así:

  input: {
        ...baseComponent(VnInput),
        attrs: {
            clearable: true,
        },
    },
Hay muchas lineas/props repetidas Mi propuesta es definir un componente base donde se añadan atributos que sean genericos ``` const baseComponent = (component, event) => ({ component: markRaw(component), event, forceAttrs: { label: $props.showTitle ? '' : $props.column.label, }, attrs: { class: 'q-px-sm q-pb-xs q-pt-none', dense: true, filled: !$props.showTitle, }, }); ``` Para input quedaría algo así: ``` input: { ...baseComponent(VnInput), attrs: { clearable: true, }, }, ```
alexm commented 2024-06-19 13:11:49 +00:00
Outdated
Review
Copy Link

Lo he probado y no funciona pq al fusionar objetos se fusionan de manera superficial. es decir los objetos anidados no se fusionan se machacan.
Quedando input como:

  attrs: {
            clearable: true,
        },

Habría que hacerlo a nivel de attrs, forceAttrs, etc

Lo he probado y no funciona pq al fusionar objetos se fusionan de manera superficial. es decir los objetos anidados no se fusionan se machacan. Quedando input como: ``` attrs: { clearable: true, }, ``` Habría que hacerlo a nivel de attrs, forceAttrs, etc
const defaultAttrs = {
filled: !$props.showTitle,
class: 'q-px-sm q-pb-xs q-pt-none',
dense: true,
};
const forceAttrs = {
label: $props.showTitle ? '' : $props.column.label,
};
const components = {
input: {
component: markRaw(VnInput),
event: enterEvent,
attrs: {
class: 'q-px-sm q-pb-xs q-pt-none',
dense: true,
filled: !$props.showTitle,
...defaultAttrs,
clearable: true,
},
forceAttrs: {
label: $props.showTitle ? '' : $props.column.label,
},
forceAttrs,
},
number: {
component: markRaw(VnInput),
event: enterEvent,
attrs: {
dense: true,
class: 'q-px-sm q-pb-xs q-pt-none',
...defaultAttrs,
clearable: true,
filled: !$props.showTitle,
},
forceAttrs: {
label: $props.showTitle ? '' : $props.column.label,
},
forceAttrs,
},
date: {
component: markRaw(VnInputDate),
event: updateEvent,
attrs: {
dense: true,
class: 'q-px-sm q-pb-xs q-pt-none',
filled: !$props.showTitle,
...defaultAttrs,
style: 'min-width: 150px',
},
forceAttrs: {
label: $props.showTitle ? '' : $props.column.label,
},
forceAttrs,
},
checkbox: {
component: markRaw(QCheckbox),
@ -84,9 +83,7 @@ const components = {
class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs',
'toggle-indeterminate': true,
},
forceAttrs: {
label: $props.showTitle ? '' : $props.column.label,
},
forceAttrs,
},
select: {
component: markRaw(VnSelect),
@ -96,12 +93,10 @@ const components = {
dense: true,
filled: !$props.showTitle,
},
forceAttrs: {
label: $props.showTitle ? '' : $props.column.label,
},
forceAttrs,
},
};
console.log(components);
async function addFilter(value) {
value ??= undefined;
if (value && typeof value === 'object') value = model.value;

2
src/pages/Customer/Card/CustomerCard.vue
View File

@ -5,7 +5,7 @@ import CustomerFilter from '../CustomerFilter.vue';
</script>
<template>
<VnCard
data-key="Customer"
data-key="Client"
base-url="Clients"
:descriptor="CustomerDescriptor"
:filter-panel="CustomerFilter"