Skip to content

Commit 7d33eb6

Browse files
graphierosgraphieros
committed
Improvement - VueUiTable - Add config options to customize header action buttons
1 parent 026f07b commit 7d33eb6

File tree

4 files changed

+188
-47
lines changed

4 files changed

+188
-47
lines changed

‎TestingArena/ArenaVueUiTable.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,33 @@ const config = ref({
257257
bold: true,
258258
}
259259
},
260+
th: {
261+
buttons: {
262+
filter: {
263+
active: {
264+
backgroundColor: '#FF0000',
265+
color: '#FFAA00'
266+
},
267+
inactive: {
268+
backgroundColor: '#00FF00',
269+
color: '#FF0000'
270+
}
271+
},
272+
cancel: {
273+
active: {
274+
backgroundColor: '#0000FF',
275+
color: 'red'
276+
},
277+
inactive: {
278+
backgroundColor: '#FFBBDD',
279+
color: '#6376DD'
280+
}
281+
}
282+
}
283+
},
284+
rows: {
285+
outline: '1px solid red'
286+
},
260287
exportMenu: {
261288
show: true,
262289
}

‎src/components/vue-ui-table.vue‎

Lines changed: 74 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -182,16 +182,18 @@
182182
<div class="date-wrapper--button">
183183
<button v-if="th.isSort" @click="sortTh(i, $event)"
184184
:class="{ 'th-button-active': [constants.DESC, constants.ASC].includes(sorts[i]) }"
185-
:style="`background:${[constants.DESC, constants.ASC].includes(sorts[i]) ? '' : FINAL_CONFIG.style.pagination.buttons.backgroundColor};color:${[constants.DESC, constants.ASC].includes(sorts[i]) ? '' : FINAL_CONFIG.style.pagination.buttons.color}`">
185+
:style="`background:${[constants.DESC, constants.ASC].includes(sorts[i]) ? '' : FINAL_CONFIG.style.th.buttons.filter.inactive.backgroundColor};color:${[constants.DESC, constants.ASC].includes(sorts[i]) ? '' : FINAL_CONFIG.style.th.buttons.filter.inactive.color}`">
186186
<span v-if="sorts[i] === constants.ASC"
187187
v-html="[constants.DATE].includes(th.type) ? icons.sort09 : icons.sortAZ" />
188188
<span v-else-if="sorts[i] === constants.DESC"
189189
v-html="[constants.DATE].includes(th.type) ? icons.sort90 : icons.sortZA" />
190190
<span v-else v-html="icons.arrowSort" />
191191
</button>
192-
<button @click="resetDates(i); resetFilter(i, th, $event)"
192+
<button
193+
@click="resetDates(i); resetFilter(i, th, $event)"
193194
:disabled="!filteredDatesIndexes[i] && isResetDisabled(i, th)"
194-
class="th-reset">
195+
class="th-reset"
196+
>
195197
✖
196198
</button>
197199
</div>
@@ -206,7 +208,7 @@
206208
<button v-if="!hasNaN[i] && th.isSort && th.type !== constants.DATE"
207209
@click="sortTh(i, $event)"
208210
:class="{ 'th-button-active': [constants.DESC, constants.ASC].includes(sorts[i]) }"
209-
:style="`background:${[constants.DESC, constants.ASC].includes(sorts[i]) ? '' : FINAL_CONFIG.style.pagination.buttons.backgroundColor};color:${[constants.DESC, constants.ASC].includes(sorts[i]) ? '' : FINAL_CONFIG.style.pagination.buttons.color}`">
211+
:style="`background:${[constants.DESC, constants.ASC].includes(sorts[i]) ? '' : FINAL_CONFIG.style.th.buttons.filter.inactive.backgroundColor};color:${[constants.DESC, constants.ASC].includes(sorts[i]) ? '' : FINAL_CONFIG.style.th.buttons.filter.inactive.color}`">
210212
<span v-if="sorts[i] === constants.ASC"
211213
v-html="[constants.NUMERIC].includes(th.type) ? icons.sort09 : icons.sortZA" />
212214
<span v-else-if="sorts[i] === constants.DESC"
@@ -218,13 +220,15 @@
218220
<button v-if="th.isMultiselect" @click="toggleMultiselect(i, th, $event)"
219221
v-html="icons.filter"
220222
:class="{ 'th-button-active': multiselects[i] && multiselects[i].length !== getDropdownOptions(i).length }"
221-
:style="`background:${multiselects[i] && multiselects[i].length !== getDropdownOptions(i).length ? '' : FINAL_CONFIG.style.pagination.buttons.backgroundColor};color:${multiselects[i] && multiselects[i].length !== getDropdownOptions(i).length ? '' : FINAL_CONFIG.style.pagination.buttons.color}`" />
223+
:style="`background:${multiselects[i] && multiselects[i].length !== getDropdownOptions(i).length ? '' : FINAL_CONFIG.style.th.buttons.filter.inactive.backgroundColor};color:${multiselects[i] && multiselects[i].length !== getDropdownOptions(i).length ? '' : FINAL_CONFIG.style.th.buttons.filter.inactive.color}`" />
222224

223225
<!-- SHOW CHART -->
224-
<button v-if="currentSelectionSpan.col === i && canChart"
225-
@click="showChart = !showChart" v-html="icons.chart"
226+
<button
227+
v-if="currentSelectionSpan.col === i && canChart"
228+
@click="showChart = !showChart"
229+
v-html="icons.chart"
226230
:class="{ 'th-button-active': showChart }"
227-
:style="`background:${showChart ? '' : FINAL_CONFIG.style.pagination.buttons.backgroundColor};color:${showChart ? '' : FINAL_CONFIG.style.pagination.buttons.color}`" />
231+
:style="`background:${showChart ? '' : FINAL_CONFIG.style.th.buttons.filter.inactive.backgroundColor};color:${showChart ? '' : FINAL_CONFIG.style.th.buttons.filter.inactive.color}`" />
228232

229233
<div v-if="th.rangeFilter && rangeFilters[i] && !hasNaN[i]" class="th-range-filter">
230234
<label :for="`rangeMin${i}`"><span style="color:grey">ᒥ</span> min <span
@@ -242,8 +246,12 @@
242246
</div>
243247

244248
<!-- RESET -->
245-
<button v-if="canResetColumn(i, th)" @click="resetFilter(i, th, $event)"
246-
:disabled="isResetDisabled(i, th)" class="th-reset">
249+
<button
250+
v-if="canResetColumn(i, th)"
251+
@click="resetFilter(i, th, $event)"
252+
:disabled="isResetDisabled(i, th)"
253+
class="th-reset"
254+
>
247255
✖
248256
</button>
249257

@@ -300,10 +308,20 @@
300308
<tr v-for="(tr, i) in visibleRows" :key="`tbody_${i}`" :data-row="i % 2 === 0 ? 'odd' : 'even'"
301309
:class="`tr_${uid}`"
302310
:style="`${i % 2 === 0 ? `background:${FINAL_CONFIG.style.rows.odd.backgroundColor};color:${FINAL_CONFIG.style.rows.odd.color}` : `background:${FINAL_CONFIG.style.rows.even.backgroundColor};color:${FINAL_CONFIG.style.rows.even.color}`}`">
303-
<td class="vue-ui-table-td-iteration" :data-row="i % 2 === 0 ? 'odd' : 'even'">{{
304-
tr.absoluteIndex + 1 }}</td>
305-
<td :data-row="i % 2 === 0 ? 'odd' : 'even'" v-for="(td, j) in tr.td" :key="`td_${i}_${j}`"
306-
:style="isNumeric(td) || dataset.header[j].type === constants.DATE ? `text-align:right;font-variant-numeric: tabular-nums;` : ''"
311+
<td
312+
class="vue-ui-table-td-iteration"
313+
:data-row="i % 2 === 0 ? 'odd' : 'even'"
314+
:style="{
315+
outline: FINAL_CONFIG.style.rows.outline
316+
}"
317+
>
318+
{{ tr.absoluteIndex + 1 }}
319+
</td>
320+
<td
321+
:data-row="i % 2 === 0 ? 'odd' : 'even'"
322+
v-for="(td, j) in tr.td"
323+
:key="`td_${i}_${j}`"
324+
:style="isNumeric(td) || dataset.header[j].type === constants.DATE ? `text-align:right;font-variant-numeric: tabular-nums;outline:${FINAL_CONFIG.style.rows.outline}` : `outline:${FINAL_CONFIG.style.rows.outline}`"
307325
@click="selectTd({
308326
td,
309327
rowIndex: i,
@@ -606,6 +624,7 @@ import {
606624
lightenHexColor,
607625
palette,
608626
treeShake,
627+
setOpacity,
609628
} from "../lib";
610629
import { useConfig } from "../useConfig";
611630
import VueUiXy from "./vue-ui-xy.vue";
@@ -845,6 +864,36 @@ export default {
845864
}
846865
},
847866
computed: {
867+
colorCancelInactive() {
868+
return this.FINAL_CONFIG.style.th.buttons.cancel.inactive.backgroundColor;
869+
},
870+
textColorCancelInactive() {
871+
return this.FINAL_CONFIG.style.th.buttons.cancel.inactive.color;
872+
},
873+
colorCancelActive() {
874+
return this.FINAL_CONFIG.style.th.buttons.cancel.active.backgroundColor;
875+
},
876+
colorCancelActiveLight() {
877+
return lightenHexColor(this.colorCancelActive, 0.33);
878+
},
879+
colorCancelActiveOutline() {
880+
return setOpacity(this.colorCancelActive, 33);
881+
},
882+
colorButtonSortActive() {
883+
return this.FINAL_CONFIG.style.th.buttons.filter.active.backgroundColor;
884+
},
885+
colorButtonSortActiveLight() {
886+
return lightenHexColor(this.colorButtonSortActive, 0.33);
887+
},
888+
colorButtonSortActiveOutline() {
889+
return setOpacity(this.colorButtonSortActive, 33);
890+
},
891+
colorButtonSortInactive() {
892+
return this.FINAL_CONFIG.style.th.buttons.filter.inactive.backgroundColor;
893+
},
894+
colorButtonSortActiveColorText() {
895+
return this.FINAL_CONFIG.style.th.buttons.filter.active.color;
896+
},
848897
dateHeaders() {
849898
return [...this.tableHead].filter(th => th.type === this.constants.DATE);
850899
},
@@ -1939,10 +1988,6 @@ export default {
19391988
padding: 3px 8px;
19401989
}
19411990
1942-
.vue-ui-table-main tr td {
1943-
outline: 1px solid white;
1944-
}
1945-
19461991
.vue-ui-table-main .th-numeric {
19471992
text-align: right;
19481993
font-variant-numeric: tabular-nums;
@@ -2000,15 +2045,20 @@ export default {
20002045
outline: none;
20012046
}
20022047
2048+
button.th-reset:disabled {
2049+
background: v-bind(colorCancelInactive);
2050+
color: v-bind(textColorCancelInactive);
2051+
}
2052+
20032053
button.th-reset:not(:disabled) {
2004-
background: radial-gradient(at top, #f19a71, #F17171);
2005-
border: 1px solid #F17171;
2054+
background: radial-gradient(at top, v-bind(colorCancelActiveLight), v-bind(colorCancelActive));
2055+
border: 1px solid v-bind(colorCancelActive);
20062056
color: white;
20072057
}
20082058
20092059
.vue-ui-table-main button.th-reset:not(:disabled):hover,
20102060
.vue-ui-table-main button.th-reset:not(:disabled):focus {
2011-
outline: 3px solid #f171717e;
2061+
outline: 3px solid v-bind(colorCancelActiveOutline);
20122062
}
20132063
20142064
.vue-ui-table-main [data-is-open="false"] {
@@ -2077,13 +2127,13 @@ button.th-reset:not(:disabled) {
20772127
}
20782128
20792129
.vue-ui-table-main .th-button-active {
2080-
background: radial-gradient(at top, #62b5f0, #1f77b4);
2081-
color: white;
2130+
background: radial-gradient(at top, v-bind(colorButtonSortActiveLight), v-bind(colorButtonSortActive));
2131+
color: v-bind(colorButtonSortActiveColorText);
20822132
}
20832133
20842134
.vue-ui-table-main .th-button-active:hover,
20852135
.vue-ui-table-main .th-button-active:focus {
2086-
outline: 3px solid #1f77b47a;
2136+
outline: 3px solid v-bind(colorButtonSortActiveOutline);
20872137
}
20882138
20892139
.vue-ui-table-main .th-date {
@@ -2276,16 +2326,6 @@ button.th-reset:not(:disabled) {
22762326
width: 100%;
22772327
}
22782328
2279-
.vue-ui-table-main th.col-selector--selected {
2280-
background: radial-gradient(at top left, #62b5f0, #1f77b4);
2281-
color: white;
2282-
}
2283-
2284-
.vue-ui-table-main th.col-selector--selected div {
2285-
background: transparent;
2286-
color: white;
2287-
}
2288-
22892329
.vue-ui-table-main .vue-ui-table-chart-modal {
22902330
align-items: center;
22912331
border-radius: 8px;

‎src/useConfig.js‎

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4396,18 +4396,19 @@ export function useConfig() {
43964396
hideUnderXLength: 20,
43974397
position: 'middle' // 'start'
43984398
},
4399-
timeLabels: {
4400-
show: true,
4401-
showMarker: true,
4402-
fontSizeRatio: 0.8,
4403-
values: [],
4404-
datetimeFormatter: AXIS_DATE_FORMATTER,
4405-
rotation: 0,
4406-
offsetY: 30,
4407-
color: COLOR_BLACK,
4408-
modulo: 12,
4409-
bold: false,
4410-
}
4399+
// Moved to x (at last...)
4400+
// timeLabels: {
4401+
// show: true,
4402+
// showMarker: true,
4403+
// fontSizeRatio: 0.8,
4404+
// values: [],
4405+
// datetimeFormatter: AXIS_DATE_FORMATTER,
4406+
// rotation: 0,
4407+
// offsetY: 30,
4408+
// color: COLOR_BLACK,
4409+
// modulo: 12,
4410+
// bold: false,
4411+
// }
44114412
},
44124413
x: {
44134414
showAxis: true,
@@ -4420,6 +4421,18 @@ export function useConfig() {
44204421
alternate: true,
44214422
opacity: 20
44224423
},
4424+
timeLabels: {
4425+
show: true,
4426+
showMarker: true,
4427+
fontSizeRatio: 0.8,
4428+
values: [],
4429+
datetimeFormatter: AXIS_DATE_FORMATTER,
4430+
rotation: 0,
4431+
offsetY: 30,
4432+
color: COLOR_BLACK,
4433+
modulo: 12,
4434+
bold: false,
4435+
}
44234436
},
44244437
zeroLine: {
44254438
show: true,
@@ -5295,9 +5308,32 @@ export function useConfig() {
52955308
selected: {
52965309
backgroundColor: COLOR_BLUE,
52975310
color: COLOR_WHITE
5311+
},
5312+
buttons: {
5313+
filter: {
5314+
inactive: {
5315+
backgroundColor: COLOR_GREY_LIGHT,
5316+
color: COLOR_BLACK
5317+
},
5318+
active: {
5319+
backgroundColor: COLOR_BLUE,
5320+
color: COLOR_WHITE
5321+
}
5322+
},
5323+
cancel: {
5324+
inactive: {
5325+
backgroundColor: COLOR_GREY_LIGHT,
5326+
color: COLOR_BLACK
5327+
},
5328+
active: {
5329+
backgroundColor: '#F17171',
5330+
color: COLOR_WHITE
5331+
}
5332+
}
52985333
}
52995334
},
53005335
rows: {
5336+
outline: `1px solid ${COLOR_WHITE}`,
53015337
even: {
53025338
backgroundColor: '#f3f5f7',
53035339
color: COLOR_BLACK,

‎types/vue-data-ui.d.ts‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5572,8 +5572,31 @@ declare module "vue-data-ui" {
55725572
backgroundColor?: string;
55735573
color?: string;
55745574
};
5575+
buttons?: {
5576+
filter?: {
5577+
inactive?: {
5578+
backgroundColor?: string;
5579+
color?: string;
5580+
};
5581+
active?: {
5582+
backgroundColor?: string;
5583+
color?: string;
5584+
};
5585+
};
5586+
cancel?: {
5587+
inactive?: {
5588+
backgroundColor?: string;
5589+
color?: string;
5590+
};
5591+
active?: {
5592+
backgroundColor?: string;
5593+
color?: string;
5594+
};
5595+
};
5596+
};
55755597
};
55765598
rows?: {
5599+
outline?: string;
55775600
even?: {
55785601
backgroundColor?: string;
55795602
color?: string;
@@ -7024,7 +7047,9 @@ declare module "vue-data-ui" {
70247047
hideUnderXLength?: number;
70257048
position?: "start" | "middle";
70267049
};
7027-
timeLabels?: { // Oversight! TODO: in v3 move to x (breaking change)
7050+
// LEGACY: time labels were placed wrongly under Y
7051+
// Type def is kept here for backwards compatibility
7052+
timeLabels?: {
70287053
show?: boolean;
70297054
fontSizeRatio?: number;
70307055
values?: Array<string | number>;
@@ -7049,6 +7074,19 @@ declare module "vue-data-ui" {
70497074
alternate?: boolean;
70507075
opacity?: number;
70517076
};
7077+
timeLabels?: {
7078+
show?: boolean;
7079+
fontSizeRatio?: number;
7080+
values?: Array<string | number>;
7081+
datetimeFormatter?: AxisDateFormatter;
7082+
rotation?: number;
7083+
offsetY?: number;
7084+
color?: string;
7085+
showOnlyAtModulo?: boolean;
7086+
modulo?: number;
7087+
showMarker?: boolean;
7088+
bold?: boolean;
7089+
};
70527090
};
70537091
zeroLine?: {
70547092
show?: boolean;

0 commit comments

Comments
 (0)