forked from verdnatura/salix-front
feat: refs #6825 qchip color
This commit is contained in:
parent
ed3c9db919
commit
a75b33a824
|
|
@ -17,8 +17,8 @@ const $props = defineProps({
|
|||
default: () => [],
|
||||
},
|
||||
defaultMode: {
|
||||
type: String, // 'table', 'list', 'card 2/3'
|
||||
default: 'list',
|
||||
type: String,
|
||||
default: 'list', // 'table', 'list', 'card'
|
||||
},
|
||||
reponsive: {
|
||||
type: Boolean,
|
||||
|
|
@ -135,62 +135,70 @@ onMounted(() => {
|
|||
/>
|
||||
</QTh>
|
||||
</template>
|
||||
|
||||
<template #body-cell="{ row, col }">
|
||||
<QTd auto-width :class="`text-${col.align ?? 'left'}`">
|
||||
<VnTableColumn :column="col" :row />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #item="{ row, cols, colsMap }">
|
||||
<QCard bordered flat>
|
||||
<QCardSection horizontal>
|
||||
<span
|
||||
v-for="(prop, index) of Object.entries(row)"
|
||||
:key="index"
|
||||
>
|
||||
<QChip
|
||||
color="primary-light"
|
||||
square
|
||||
v-if="cols[index]?.isId"
|
||||
:title="t(cols[index].label)"
|
||||
class="no-margin"
|
||||
>
|
||||
{{ prop[1] }}
|
||||
</QChip>
|
||||
</span>
|
||||
</QCardSection>
|
||||
<QCardSection class="row justify-between q-pa-sm">
|
||||
<div>
|
||||
<div v-for="col of colsMap" :key="col.field">
|
||||
<div
|
||||
v-if="
|
||||
col.cardVisible &&
|
||||
!col.isId &&
|
||||
col.field != 'tableActions'
|
||||
<template #item="{ row, colsMap }">
|
||||
<TransitionGroup name="grid" tag="div" class="grid">
|
||||
<QCard bordered flat>
|
||||
<QCardSection horizontal>
|
||||
<span v-for="(col, index) of colsMap" :key="col.field">
|
||||
{{ index }}
|
||||
<QChip
|
||||
:class="
|
||||
col.color
|
||||
? col.color(row)
|
||||
: col.isId == 1
|
||||
? 'bg-primary-light'
|
||||
: 'bg-secondary'
|
||||
"
|
||||
square
|
||||
v-if="col.isId"
|
||||
:title="t(col.label)"
|
||||
class="no-margin"
|
||||
>
|
||||
<VnLv :label="`${col.label}:`">
|
||||
<template #value>
|
||||
<VnTableColumn :column="col" :row />
|
||||
</template>
|
||||
</VnLv>
|
||||
{{ row[col.field] }}
|
||||
</QChip>
|
||||
</span>
|
||||
</QCardSection>
|
||||
<QCardSection class="row justify-between q-pa-sm">
|
||||
<div>
|
||||
<div v-for="col of colsMap" :key="col.field">
|
||||
<div
|
||||
v-if="
|
||||
col.cardVisible &&
|
||||
!col.isId &&
|
||||
col.field != 'tableActions'
|
||||
"
|
||||
>
|
||||
<VnLv :label="`${col.label}:`">
|
||||
<template #value>
|
||||
<VnTableColumn :column="col" :row />
|
||||
</template>
|
||||
</VnLv>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="colsMap.tableActions" class="column">
|
||||
<QBtn
|
||||
v-for="(btn, index) of colsMap.tableActions.actions"
|
||||
:key="index"
|
||||
:title="btn.title"
|
||||
:icon="btn.icon"
|
||||
:outline="!btn.isPrimary"
|
||||
size="sm"
|
||||
class="q-pa-sm q-mb-sm"
|
||||
:class="{ 'bg-primary-light': btn.isPrimary }"
|
||||
@click.stop="btn.action(row)"
|
||||
/>
|
||||
</div>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
<div v-if="colsMap.tableActions" class="column">
|
||||
<QBtn
|
||||
v-for="(btn, index) of colsMap.tableActions
|
||||
.actions"
|
||||
:key="index"
|
||||
:title="btn.title"
|
||||
:icon="btn.icon"
|
||||
:outline="!btn.isPrimary"
|
||||
size="sm"
|
||||
class="q-pa-sm q-mb-sm"
|
||||
:class="{ 'bg-primary-light': btn.isPrimary }"
|
||||
@click.stop="btn.action(row)"
|
||||
/>
|
||||
</div>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
</TransitionGroup>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
|
|
@ -204,6 +212,11 @@ onMounted(() => {
|
|||
background-color: var(--primary-light);
|
||||
color: var(--vn-section-color);
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: var(--vn-page-color);
|
||||
color: var(--vn-text-colo);
|
||||
}
|
||||
.text-primary-light {
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
|
@ -260,6 +273,17 @@ onMounted(() => {
|
|||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
// WIP TRANSITIONS
|
||||
// .grid-item {
|
||||
// background-color: red;
|
||||
// transition: all 500ms ease;
|
||||
// }
|
||||
|
||||
// .grid-move {
|
||||
// background-color: #6b7280 !important;
|
||||
// transform: scale(0.9);
|
||||
// }
|
||||
|
||||
.divisor-line {
|
||||
height: 1px;
|
||||
background-color: var(--vn-section-color);
|
||||
|
|
|
|||
|
|
@ -192,12 +192,6 @@ defineExpose({ fetch, addFilter });
|
|||
<QSpinner color="orange" size="md" />
|
||||
</div>
|
||||
</QInfiniteScroll>
|
||||
<div
|
||||
v-if="!isLoading && store.hasMoreData"
|
||||
class="w-full flex justify-center q-mt-md"
|
||||
>
|
||||
<QBtn color="primary" :label="t('Load more data')" @click="paginate()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -271,13 +271,14 @@ const columns = computed(() => [
|
|||
field: 'id',
|
||||
label: t('customer.extendedList.tableVisibleColumns.id'),
|
||||
name: 'id',
|
||||
isId: true,
|
||||
isId: 1,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'name',
|
||||
label: t('customer.extendedList.tableVisibleColumns.name'),
|
||||
name: 'name',
|
||||
isId: 2,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
|
|
|||
Loading…
Reference in New Issue