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
vertical
class="no-margin no-padding full-width"
>
<QCardSection vertical class="no-margin no-padding w-80">
<!-- Chips -->
<QCardSection
v-if="cardTemplate.chips.length"
@ -261,14 +258,14 @@ const rowClickFunction = computed(() => {
<!-- Title -->
<QCardSection
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>
<!-- Fields -->
<QCardSection
class="q-pl-sm q-pr-lg q-py-xs flex-one no-pointer-events"
>
<QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
<div
v-for="col of cardTemplate.visible"
:key="col.field"
@ -304,14 +301,11 @@ const rowClickFunction = computed(() => {
</QTable>
</template>
</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]">
<QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
<!-- <QTooltip>
{{ t('New client') }}
</QTooltip> -->
<QTooltip>
{{ create.title }}
</QTooltip>
</QPageSticky>
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
<FormModelPopup
@ -393,7 +387,7 @@ const rowClickFunction = computed(() => {
.grid-three {
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%;
grid-gap: 20px;
margin: 0 auto;
@ -456,6 +450,17 @@ const rowClickFunction = computed(() => {
.vn-label-value {
display: flex;
flex-direction: row;
.value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.cardEllipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.w-80 {

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

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