wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

feat(VnTable): refs #6825 fix ellipsis and add titles

This commit is contained in:
Alex Moreno 2024-05-17 15:13:56 +02:00
parent d00801b066
commit a3a4e9b570
2 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/common/VnTable.vue
View File

@ -221,10 +221,7 @@ const rowClickFunction = computed(() => {
} }
" "
> >
<QCardSection <QCardSection vertical class="no-margin no-padding w-80">
vertical
class="no-margin no-padding full-width"
>
<!-- Chips --> <!-- Chips -->
<QCardSection <QCardSection
v-if="cardTemplate.chips.length" v-if="cardTemplate.chips.length"
@ -261,14 +258,14 @@ const rowClickFunction = computed(() => {
<!-- Title --> <!-- Title -->
<QCardSection <QCardSection
v-if="cardTemplate.title" v-if="cardTemplate.title"
class="q-pl-sm q-py-none text-primary-light text-bold text-h6" class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
> >
{{ row[cardTemplate.title.field] }} <span :title="row[cardTemplate.title.field]">{{
row[cardTemplate.title.field]
}}</span>
</QCardSection> </QCardSection>
<!-- Fields --> <!-- Fields -->
<QCardSection <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
class="q-pl-sm q-pr-lg q-py-xs flex-one no-pointer-events"
>
<div <div
v-for="col of cardTemplate.visible" v-for="col of cardTemplate.visible"
:key="col.field" :key="col.field"
@ -304,14 +301,11 @@ const rowClickFunction = computed(() => {
</QTable> </QTable>
</template> </template>
</VnPaginate> </VnPaginate>
<!-- AÑADIR EN EL OBJETO LA POSIBILIDAD DE PONER QUE ESE CAMPO SIRVE PARA LA CREACION Y MOSTARLO EN UN POPUP-->
<!-- AÑADIR SLOT PARA AÑADIR MAS CAMPOS -->
<!-- AÑADIR SLOT SETEAR EL POPUP -->
<QPageSticky v-if="create" :offset="[20, 20]"> <QPageSticky v-if="create" :offset="[20, 20]">
<QBtn @click="showForm = !showForm" color="primary" fab icon="add" /> <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
<!-- <QTooltip> <QTooltip>
{{ t('New client') }} {{ create.title }}
</QTooltip> --> </QTooltip>
</QPageSticky> </QPageSticky>
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale"> <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
<FormModelPopup <FormModelPopup
@ -393,7 +387,7 @@ const rowClickFunction = computed(() => {
.grid-three { .grid-three {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, max-content)); grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
max-width: 100%; max-width: 100%;
grid-gap: 20px; grid-gap: 20px;
margin: 0 auto; margin: 0 auto;
@ -456,6 +450,17 @@ const rowClickFunction = computed(() => {
.vn-label-value { .vn-label-value {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.cardEllipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.w-80 { .w-80 {

2
src/components/common/VnTableColumn.vue
View File

@ -13,7 +13,7 @@
:value="value" :value="value"
v-model="model" v-model="model"
/> />
<span v-else>{{ dashIfEmpty(row[col.field]) }}</span> <span :title="row[col.field]" v-else>{{ dashIfEmpty(row[col.field]) }}</span>
<VnComponent <VnComponent
v-if="col.after" v-if="col.after"
:prop="col.after" :prop="col.after"