forked from verdnatura/salix-front
fix(VnTable): refs #6825 fix events and css
This commit is contained in:
parent
a3a4e9b570
commit
478fe23cec
|
|
@ -107,12 +107,17 @@ const rowClickFunction = computed(() => {
|
|||
if ($props.rowClick) return $props.rowClick;
|
||||
if ($props.redirect)
|
||||
return ({ id }) => router.push({ path: `/${$props.redirect}/${id}` });
|
||||
return null;
|
||||
return () => {};
|
||||
});
|
||||
|
||||
const stopEventPropagation = (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<QScrollArea class="fit">
|
||||
<VnFilterPanel
|
||||
:data-key="$attrs['data-key']"
|
||||
:search-button="true"
|
||||
|
|
@ -148,7 +153,7 @@ const rowClickFunction = computed(() => {
|
|||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
:grid="mode != 'table'"
|
||||
table-header-class="bg-grey-8"
|
||||
table-header-class="bg-header"
|
||||
card-container-class="grid-three"
|
||||
flat
|
||||
:style="mode == 'table' && 'max-height: 92vh'"
|
||||
|
|
@ -165,21 +170,21 @@ const rowClickFunction = computed(() => {
|
|||
<QBtn
|
||||
icon="visibility"
|
||||
title="asd"
|
||||
class="bg-dark q-mr-md"
|
||||
class="bg-vn-section-color q-mr-md"
|
||||
dense
|
||||
v-if="mode == 'table'"
|
||||
/>
|
||||
<QBtnToggle
|
||||
v-model="mode"
|
||||
toggle-color="primary"
|
||||
class="bg-dark"
|
||||
class="bg-vn-section-color"
|
||||
dense
|
||||
:options="tableModes"
|
||||
/>
|
||||
<QBtn
|
||||
icon="filter_alt"
|
||||
title="asd"
|
||||
class="bg-dark q-ml-md"
|
||||
class="bg-vn-section-color q-ml-md"
|
||||
dense
|
||||
@click="stateStore.toggleRightDrawer()"
|
||||
/>
|
||||
|
|
@ -230,6 +235,8 @@ const rowClickFunction = computed(() => {
|
|||
<span
|
||||
v-for="col of cardTemplate.chips"
|
||||
:key="col.field"
|
||||
@click="stopEventPropagation($event)"
|
||||
class="cursor-text"
|
||||
>
|
||||
<QChip
|
||||
v-if="col.chip.condition(row[col.field], row)"
|
||||
|
|
@ -260,9 +267,12 @@ const rowClickFunction = computed(() => {
|
|||
v-if="cardTemplate.title"
|
||||
class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
|
||||
>
|
||||
<span :title="row[cardTemplate.title.field]">{{
|
||||
row[cardTemplate.title.field]
|
||||
}}</span>
|
||||
<span
|
||||
:title="row[cardTemplate.title.field]"
|
||||
@click="stopEventPropagation($event)"
|
||||
class="cursor-text"
|
||||
>{{ row[cardTemplate.title.field] }}</span
|
||||
>
|
||||
</QCardSection>
|
||||
<!-- Fields -->
|
||||
<QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
|
||||
|
|
@ -273,7 +283,11 @@ const rowClickFunction = computed(() => {
|
|||
>
|
||||
<VnLv :label="`${col.label}:`">
|
||||
<template #value>
|
||||
<span
|
||||
@click="stopEventPropagation($event)"
|
||||
>
|
||||
<VnTableColumn :column="col" :row />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
</div>
|
||||
|
|
@ -283,6 +297,7 @@ const rowClickFunction = computed(() => {
|
|||
<QCardSection
|
||||
v-if="colsMap.tableActions"
|
||||
class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
|
||||
@click="stopEventPropagation($event)"
|
||||
>
|
||||
<QBtn
|
||||
v-for="(btn, index) of colsMap.tableActions.actions"
|
||||
|
|
@ -292,7 +307,7 @@ const rowClickFunction = computed(() => {
|
|||
class="q-pa-xs"
|
||||
flat
|
||||
:class="{ 'text-primary-light': btn.isPrimary }"
|
||||
@click.prevent="btn.action(row)"
|
||||
@click="btn.action(row)"
|
||||
/>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
|
|
@ -329,39 +344,29 @@ const rowClickFunction = computed(() => {
|
|||
</QDialog>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
* {
|
||||
--primary-light: #f5b351;
|
||||
}
|
||||
.bg-primary-light {
|
||||
background-color: var(--primary-light);
|
||||
color: var(--vn-section-color);
|
||||
}
|
||||
|
||||
.bg-chip-secondary {
|
||||
background-color: var(--vn-page-color);
|
||||
color: var(--vn-text-color);
|
||||
}
|
||||
.text-primary-light {
|
||||
color: var(--primary-light);
|
||||
}
|
||||
.q-checkbox {
|
||||
& .q-checkbox__label {
|
||||
color: var(--primary-light); /* use global*/
|
||||
}
|
||||
& .q-checkbox__inner {
|
||||
color: var(--primary-light); /* use global*/
|
||||
|
||||
.bg-header {
|
||||
background-color: #5d5d5d;
|
||||
color: var(--vn-page-color);
|
||||
* {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
}
|
||||
|
||||
.q-table--dark .q-table__bottom,
|
||||
.q-table--dark thead,
|
||||
.q-table--dark tr,
|
||||
.q-table--dark th,
|
||||
.q-table--dark td {
|
||||
border-color: #222222; /* use global*/
|
||||
border-color: #222222;
|
||||
}
|
||||
|
||||
.q-table__container > div:first-child {
|
||||
background-color: #222222;
|
||||
background-color: var(--vn-page-color);
|
||||
}
|
||||
|
||||
/* Works on Firefox */
|
||||
|
|
@ -382,7 +387,7 @@ const rowClickFunction = computed(() => {
|
|||
*::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
border-radius: 20px;
|
||||
border: 3px solid grey;
|
||||
border: 3px solid var(--vn-page-color);
|
||||
}
|
||||
|
||||
.grid-three {
|
||||
|
|
@ -454,6 +459,9 @@ const rowClickFunction = computed(() => {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
pointer-events: all;
|
||||
cursor: text;
|
||||
user-select: all;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -474,5 +482,6 @@ const rowClickFunction = computed(() => {
|
|||
.cursor-text {
|
||||
pointer-events: all;
|
||||
cursor: text;
|
||||
user-select: all;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -115,6 +115,13 @@ select:-webkit-autofill {
|
|||
background-color: var(--vn-accent-color);
|
||||
}
|
||||
|
||||
.text-primary-light {
|
||||
color: $primary-light !important;
|
||||
}
|
||||
.bg-primary-light {
|
||||
background: $primary-light !important;
|
||||
}
|
||||
|
||||
.fill-icon {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ $color-link: #66bfff;
|
|||
$color-spacer-light: #a3a3a31f;
|
||||
$color-spacer: #7979794d;
|
||||
$border-thin-light: 1px solid $color-spacer-light;
|
||||
$primary-light: lighten($primary, 35%);
|
||||
$primary-light: #f5b351;
|
||||
$dark-shadow-color: black;
|
||||
$layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
|
||||
$spacing-md: 16px;
|
||||
|
|
|
|||
|
|
@ -264,13 +264,6 @@ const redirectToCreateView = (row) => {
|
|||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
field: 'customerStatus',
|
||||
label: 'customerStatus',
|
||||
name: 'customerStatus',
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'id',
|
||||
|
|
@ -590,6 +583,7 @@ function handleLocation(data, location) {
|
|||
order="id DESC"
|
||||
:columns="columns"
|
||||
default-mode="table"
|
||||
redirect="customer"
|
||||
auto-load
|
||||
>
|
||||
<template #more-create-dialog="{ data }">
|
||||
|
|
|
|||
Loading…
Reference in New Issue