v-sistec-features 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -20,6 +20,10 @@ interface VColumnProps {
|
|
|
20
20
|
click?: Function | null;
|
|
21
21
|
// bloqueia a coluna para não ser movida
|
|
22
22
|
locked?: boolean;
|
|
23
|
+
use_ordering?: boolean;
|
|
24
|
+
param_ordering?: string;
|
|
25
|
+
decreasing_value?: string;
|
|
26
|
+
increasing_value?: string;
|
|
23
27
|
}
|
|
24
28
|
const props = withDefaults(defineProps<VColumnProps>(), {
|
|
25
29
|
field: null,
|
|
@@ -46,6 +50,11 @@ const props = withDefaults(defineProps<VColumnProps>(), {
|
|
|
46
50
|
transform_function: null ,
|
|
47
51
|
click: null,
|
|
48
52
|
locked: false,
|
|
53
|
+
|
|
54
|
+
use_ordering: false,
|
|
55
|
+
param_ordering: '',
|
|
56
|
+
decreasing_value: '',
|
|
57
|
+
increasing_value: '',
|
|
49
58
|
});
|
|
50
59
|
|
|
51
60
|
const slots = useSlots();
|
|
@@ -91,6 +100,10 @@ onMounted(() => {
|
|
|
91
100
|
click: props.click,
|
|
92
101
|
transform_function: props.transform_function,
|
|
93
102
|
locked: props.locked,
|
|
103
|
+
use_ordering: props.use_ordering,
|
|
104
|
+
param_ordering: props.param_ordering,
|
|
105
|
+
decreasing_value: props.decreasing_value,
|
|
106
|
+
increasing_value: props.increasing_value,
|
|
94
107
|
|
|
95
108
|
bodySlot: slots.body,
|
|
96
109
|
...(props.type === 'text' && { limite_text: Number(props.limite_text) }),
|
|
@@ -156,16 +156,110 @@
|
|
|
156
156
|
</template>
|
|
157
157
|
|
|
158
158
|
<template #item="{ element: col }">
|
|
159
|
-
<
|
|
160
|
-
|
|
161
|
-
|
|
159
|
+
<template v-if="col.use_ordering">
|
|
160
|
+
<th class="header-draggable" :class="col.class_column">
|
|
161
|
+
<div class="header-ordering">
|
|
162
|
+
<span>{{ col.header }}</span>
|
|
163
|
+
|
|
164
|
+
<span @click="() => toggleOrderingState(col.header)" class="ms-2 cursor-pointer">
|
|
165
|
+
<svg v-if="!orderings_state[col.header] || orderings_state[col.header] === 'none'"
|
|
166
|
+
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
|
167
|
+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
168
|
+
<path d="m3 8 4-4 4 4"></path>
|
|
169
|
+
<path d="m11 16-4 4-4-4"></path>
|
|
170
|
+
<path d="M7 4v16"></path>
|
|
171
|
+
<path d="M15 8h6"></path>
|
|
172
|
+
<path d="M15 16h6"></path>
|
|
173
|
+
<path d="M13 12h8"></path>
|
|
174
|
+
</svg>
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
<svg v-else-if="orderings_state[col.header] === 'decreasing'"
|
|
178
|
+
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
|
179
|
+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
180
|
+
<path d="m3 16 4 4 4-4"></path>
|
|
181
|
+
<path d="M7 20V4"></path>
|
|
182
|
+
<path d="M11 4h10"></path>
|
|
183
|
+
<path d="M11 8h7"></path>
|
|
184
|
+
<path d="M11 12h4"></path>
|
|
185
|
+
</svg>
|
|
186
|
+
|
|
187
|
+
<svg v-else-if="orderings_state[col.header] === 'increasing'"
|
|
188
|
+
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
|
189
|
+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
190
|
+
<path d="m3 8 4-4 4 4"></path>
|
|
191
|
+
<path d="M7 4v16"></path>
|
|
192
|
+
<path d="M11 12h4"></path>
|
|
193
|
+
<path d="M11 16h7"></path>
|
|
194
|
+
<path d="M11 20h10"></path>
|
|
195
|
+
</svg>
|
|
196
|
+
|
|
197
|
+
</span>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
</th>
|
|
201
|
+
</template>
|
|
202
|
+
<template v-else>
|
|
203
|
+
<th class="header-draggable" :class="col.class_column">
|
|
204
|
+
{{ col.header }}
|
|
205
|
+
</th>
|
|
206
|
+
</template>
|
|
207
|
+
|
|
162
208
|
</template>
|
|
163
209
|
|
|
164
210
|
<template #footer>
|
|
165
211
|
<template v-for="col in lockedColumns" :key="col.field || col.header">
|
|
166
|
-
<
|
|
167
|
-
|
|
168
|
-
|
|
212
|
+
<template v-if="col.use_ordering">
|
|
213
|
+
<th class="header-locked header-ordering" :class="col.class_column">
|
|
214
|
+
<div class="header-ordering">
|
|
215
|
+
<span>{{ col.header }}</span>
|
|
216
|
+
|
|
217
|
+
<span @click="() => toggleOrderingState(col.header)" class="ms-2 cursor-pointer">
|
|
218
|
+
<svg v-if="!orderings_state[col.header] || orderings_state[col.header] === 'none'"
|
|
219
|
+
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
|
220
|
+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
221
|
+
stroke-linejoin="round">
|
|
222
|
+
<path d="m3 8 4-4 4 4"></path>
|
|
223
|
+
<path d="m11 16-4 4-4-4"></path>
|
|
224
|
+
<path d="M7 4v16"></path>
|
|
225
|
+
<path d="M15 8h6"></path>
|
|
226
|
+
<path d="M15 16h6"></path>
|
|
227
|
+
<path d="M13 12h8"></path>
|
|
228
|
+
</svg>
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
<svg v-else-if="orderings_state[col.header] === 'decreasing'"
|
|
232
|
+
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
|
233
|
+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
234
|
+
stroke-linejoin="round">
|
|
235
|
+
<path d="m3 16 4 4 4-4"></path>
|
|
236
|
+
<path d="M7 20V4"></path>
|
|
237
|
+
<path d="M11 4h10"></path>
|
|
238
|
+
<path d="M11 8h7"></path>
|
|
239
|
+
<path d="M11 12h4"></path>
|
|
240
|
+
</svg>
|
|
241
|
+
|
|
242
|
+
<svg v-else-if="orderings_state[col.header] === 'increasing'"
|
|
243
|
+
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
|
244
|
+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
245
|
+
stroke-linejoin="round">
|
|
246
|
+
<path d="m3 8 4-4 4 4"></path>
|
|
247
|
+
<path d="M7 4v16"></path>
|
|
248
|
+
<path d="M11 12h4"></path>
|
|
249
|
+
<path d="M11 16h7"></path>
|
|
250
|
+
<path d="M11 20h10"></path>
|
|
251
|
+
</svg>
|
|
252
|
+
</span>
|
|
253
|
+
</div>
|
|
254
|
+
</th>
|
|
255
|
+
</template>
|
|
256
|
+
|
|
257
|
+
<template v-else>
|
|
258
|
+
<th class="header-locked" :class="col.class_column">
|
|
259
|
+
{{ col.header }}
|
|
260
|
+
</th>
|
|
261
|
+
</template>
|
|
262
|
+
|
|
169
263
|
</template>
|
|
170
264
|
</template>
|
|
171
265
|
</draggable>
|
|
@@ -367,6 +461,7 @@ const props = withDefaults(defineProps<VDataTableProps>(), {
|
|
|
367
461
|
// =======================================================
|
|
368
462
|
|
|
369
463
|
|
|
464
|
+
const orderings_state = ref<Record<string, 'none' | 'increasing' | 'decreasing'>>({});
|
|
370
465
|
const columns = ref<ColumnConfiguration[]>([]);
|
|
371
466
|
const items = ref<T[]>([]) as Ref<T[]>;
|
|
372
467
|
const totalItems = ref<number>(0);
|
|
@@ -390,24 +485,29 @@ const pagination = ref<PaginationObject>({
|
|
|
390
485
|
// =======================================================
|
|
391
486
|
const { data: response, pending, error, execute, attempt } = props.fetch(props.endpoint, {
|
|
392
487
|
params: () => {
|
|
393
|
-
|
|
394
488
|
if (props.deactivate_default_params) {
|
|
395
489
|
if (props.add_params && typeof props.add_params === 'function') {
|
|
396
|
-
return
|
|
490
|
+
return {
|
|
491
|
+
...props.add_params(),
|
|
492
|
+
...params_ordering.value
|
|
493
|
+
};
|
|
397
494
|
}
|
|
398
495
|
return {
|
|
399
496
|
...props.add_params,
|
|
497
|
+
...params_ordering.value
|
|
400
498
|
};
|
|
401
499
|
}
|
|
402
500
|
else if (props.add_params && typeof props.add_params === 'function') {
|
|
403
501
|
return {
|
|
404
502
|
...default_params.value,
|
|
405
503
|
...props.add_params(),
|
|
504
|
+
...params_ordering.value
|
|
406
505
|
}
|
|
407
506
|
}
|
|
408
507
|
return {
|
|
409
508
|
...default_params.value,
|
|
410
509
|
...props.add_params,
|
|
510
|
+
...params_ordering.value
|
|
411
511
|
};
|
|
412
512
|
},
|
|
413
513
|
retry: props.retry_attempts,
|
|
@@ -446,6 +546,24 @@ const item_use = computed<number[]>(() => {
|
|
|
446
546
|
}
|
|
447
547
|
return use;
|
|
448
548
|
});
|
|
549
|
+
const params_ordering = computed(() => {
|
|
550
|
+
const objectOrdering: Record<string, any> = {};
|
|
551
|
+
for (const col of columns.value) {
|
|
552
|
+
if (col.use_ordering) {
|
|
553
|
+
if (orderings_state.value[col.header] === 'increasing') {
|
|
554
|
+
objectOrdering[col.param_ordering] = col.increasing_value || 'increasing';
|
|
555
|
+
} else if (orderings_state.value[col.header] === 'decreasing') {
|
|
556
|
+
objectOrdering[col.param_ordering] = col.decreasing_value || 'decreasing';
|
|
557
|
+
} else {
|
|
558
|
+
continue;
|
|
559
|
+
}
|
|
560
|
+
} else {
|
|
561
|
+
continue;
|
|
562
|
+
}
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
return objectOrdering;
|
|
566
|
+
});
|
|
449
567
|
|
|
450
568
|
const default_params = computed<Record<string, any>>(() => ({
|
|
451
569
|
[props.page_param_name]: pagination.value.current_page + 1,
|
|
@@ -617,6 +735,27 @@ function limiteText(text: string | null, limite: number | null): string | null {
|
|
|
617
735
|
return text;
|
|
618
736
|
}
|
|
619
737
|
|
|
738
|
+
function toggleOrderingState(header: string) {
|
|
739
|
+
// desabilita todos que não são o header clicado
|
|
740
|
+
for (const key in orderings_state.value) {
|
|
741
|
+
if (key !== header) {
|
|
742
|
+
orderings_state.value[key] = 'none';
|
|
743
|
+
}
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
const currentState = orderings_state.value[header] || 'none';
|
|
747
|
+
if (currentState === 'none') {
|
|
748
|
+
orderings_state.value[header] = 'increasing';
|
|
749
|
+
} else if (currentState === 'increasing') {
|
|
750
|
+
orderings_state.value[header] = 'decreasing';
|
|
751
|
+
} else {
|
|
752
|
+
orderings_state.value[header] = 'none';
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
reSearch();
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
|
|
620
759
|
// =======================================================
|
|
621
760
|
// 7. EXPOSE E CICLO DE VIDA
|
|
622
761
|
// =======================================================
|
|
@@ -835,6 +974,7 @@ $max-width-preview: 250px;
|
|
|
835
974
|
cursor: grab;
|
|
836
975
|
}
|
|
837
976
|
|
|
977
|
+
|
|
838
978
|
/*
|
|
839
979
|
Animações para movimentação de colunas
|
|
840
980
|
*/
|
|
@@ -846,4 +986,10 @@ $max-width-preview: 250px;
|
|
|
846
986
|
.column-move-leave-active {
|
|
847
987
|
transition: all 0.4s ease;
|
|
848
988
|
}
|
|
989
|
+
|
|
990
|
+
|
|
991
|
+
.header-ordering {
|
|
992
|
+
display: flex;
|
|
993
|
+
justify-content: space-between;
|
|
994
|
+
}
|
|
849
995
|
</style>
|
package/src/DatatableVue/keys.ts
CHANGED
|
@@ -15,6 +15,10 @@ export interface ColumnConfiguration {
|
|
|
15
15
|
format?: 'complete' | 'simple';
|
|
16
16
|
click: Function | null;
|
|
17
17
|
locked: boolean;
|
|
18
|
+
use_ordering: boolean;
|
|
19
|
+
param_ordering: string;
|
|
20
|
+
decreasing_value: string;
|
|
21
|
+
increasing_value: string;
|
|
18
22
|
}
|
|
19
23
|
|
|
20
24
|
// A API que o VDataTable "fornece" para os filhos
|