v-sistec-features 1.26.0 → 1.26.2
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
|
@@ -1,94 +1,60 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="dropdown d-flex">
|
|
3
|
-
<slot name="search-field">
|
|
4
|
-
<a v-if="item_use.includes(2)" href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown"
|
|
5
|
-
title="Pesquisas Prédefinidas">
|
|
6
|
-
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter" width="24"
|
|
7
|
-
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
|
8
|
-
stroke-linecap="round" stroke-linejoin="round">
|
|
9
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
10
|
-
<path
|
|
11
|
-
d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z">
|
|
12
|
-
</path>
|
|
13
|
-
</svg>
|
|
14
|
-
</a>
|
|
15
|
-
<div class="input-icon">
|
|
16
|
-
<input type="text" class="form-control ms-1" id="inputSearchVDataTable" v-model="modelSearch"
|
|
17
|
-
@keyup.enter="searchEnter" :placeholder="placeholder_search">
|
|
18
|
-
|
|
19
|
-
<span v-if="modelSearch" @click="cleanSearch()" class=" inputClose" title="Limpar pesquisa">
|
|
20
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
21
|
-
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
22
|
-
class="icon icon-tabler icons-tabler-outline icon-tabler-x">
|
|
23
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
24
|
-
<path d="M18 6l-12 12" />
|
|
25
|
-
<path d="M6 6l12 12" />
|
|
26
|
-
</svg>
|
|
27
|
-
</span>
|
|
28
|
-
<span v-else class="input-icon-addon">
|
|
29
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
30
|
-
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
31
|
-
class="icon">
|
|
32
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
33
|
-
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
|
|
34
|
-
<path d="M21 21l-6 -6"></path>
|
|
35
|
-
</svg>
|
|
36
|
-
</span>
|
|
37
|
-
</div>
|
|
38
|
-
<div v-if="item_use.includes(2)" class="dropdown-menu">
|
|
39
|
-
<template v-for="(filter, index) in props.list_filter" :key="index">
|
|
40
|
-
<router-link
|
|
41
|
-
v-if="('type' in filter ? filter.type === 1 : false) && ('visible' in filter ? filter.visible : true)"
|
|
42
|
-
:to="filter?.to" class="dropdown-item cursor-pointer">
|
|
43
|
-
{{ filter.text }}
|
|
44
|
-
</router-link>
|
|
45
|
-
<a v-else-if="('type' in filter ? filter.type === 2 : true) && ('visible' in filter ? filter.visible : true)"
|
|
46
|
-
@click.prevent="tradeFilter(String(filter.value))" class="dropdown-item cursor-pointer"
|
|
47
|
-
:class="modelFilter === filter?.value ? 'bg-info text-dark selected' : ''">
|
|
48
|
-
{{ filter.text }}
|
|
49
|
-
</a>
|
|
50
|
-
<a v-else-if="('type' in filter ? filter.type === 3 : true) && ('visible' in filter ? filter.visible : true)"
|
|
51
|
-
@click.prevent="clickItem(filter)" class="dropdown-item cursor-pointer"
|
|
52
|
-
:class="filter?.active ? 'bg-info text-dark selected' : ''">
|
|
53
|
-
{{ filter.text }}
|
|
54
|
-
</a>
|
|
55
|
-
</template>
|
|
56
|
-
</div>
|
|
57
2
|
|
|
58
|
-
<div v-if="use_column_manager" class="dropdown d-inline-block ms-2">
|
|
59
|
-
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"
|
|
60
|
-
title="Gerenciar Colunas visíveis">
|
|
61
|
-
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-columns" width="24"
|
|
62
|
-
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
|
63
|
-
stroke-linecap="round" stroke-linejoin="round">
|
|
64
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
65
|
-
<path d="M4 6l5.5 0" />
|
|
66
|
-
<path d="M4 10l5.5 0" />
|
|
67
|
-
<path d="M4 14l5.5 0" />
|
|
68
|
-
<path d="M4 18l5.5 0" />
|
|
69
|
-
<path d="M14.5 6l5.5 0" />
|
|
70
|
-
<path d="M14.5 10l5.5 0" />
|
|
71
|
-
<path d="M14.5 14l5.5 0" />
|
|
72
|
-
<path d="M14.5 18l5.5 0" />
|
|
73
|
-
</svg>
|
|
74
|
-
</button>
|
|
75
|
-
<div class="dropdown-menu dropdown-menu-end p-3 shadow-sm" style="min-width: 220px; z-index: 1050;">
|
|
76
|
-
<h6 class="dropdown-header text-uppercase fw-bold mb-2">Exibir Colunas</h6>
|
|
77
|
-
<div class="d-flex flex-column gap-2">
|
|
78
|
-
<label v-for="coluna in columns_list" :key="coluna.id" class="form-check cursor-pointer m-0">
|
|
79
|
-
<input class="form-check-input" type="checkbox" :checked="coluna.visible"
|
|
80
|
-
:disabled="coluna.locked" @change="toggleColumnVisibility(coluna.id)">
|
|
81
|
-
<span class="form-check-label user-select-none">{{ coluna.header }}</span>
|
|
82
|
-
</label>
|
|
83
|
-
</div>
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
</slot>
|
|
87
3
|
|
|
88
|
-
|
|
4
|
+
<a v-if="item_use.includes(2)" href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown"
|
|
5
|
+
title="Pesquisas Prédefinidas">
|
|
6
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter" width="24" height="24"
|
|
7
|
+
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
|
|
8
|
+
stroke-linejoin="round">
|
|
9
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
10
|
+
<path
|
|
11
|
+
d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z">
|
|
12
|
+
</path>
|
|
13
|
+
</svg>
|
|
14
|
+
</a>
|
|
15
|
+
<div class="input-icon">
|
|
16
|
+
<input type="text" class="form-control ms-1" id="inputSearchVDataTable" v-model="modelSearch"
|
|
17
|
+
@keyup.enter="searchEnter" :placeholder="placeholder_search">
|
|
89
18
|
|
|
90
|
-
|
|
19
|
+
<span v-if="modelSearch" @click="cleanSearch()" class=" inputClose" title="Limpar pesquisa">
|
|
20
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
21
|
+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
22
|
+
class="icon icon-tabler icons-tabler-outline icon-tabler-x">
|
|
23
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
24
|
+
<path d="M18 6l-12 12" />
|
|
25
|
+
<path d="M6 6l12 12" />
|
|
26
|
+
</svg>
|
|
27
|
+
</span>
|
|
28
|
+
<span v-else class="input-icon-addon">
|
|
29
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
30
|
+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
|
|
31
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
32
|
+
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
|
|
33
|
+
<path d="M21 21l-6 -6"></path>
|
|
34
|
+
</svg>
|
|
35
|
+
</span>
|
|
36
|
+
</div>
|
|
37
|
+
<div v-if="item_use.includes(2)" class="dropdown-menu">
|
|
38
|
+
<template v-for="(filter, index) in props.list_filter" :key="index">
|
|
39
|
+
<router-link
|
|
40
|
+
v-if="('type' in filter ? filter.type === 1 : false) && ('visible' in filter ? filter.visible : true)"
|
|
41
|
+
:to="filter?.to" class="dropdown-item cursor-pointer">
|
|
42
|
+
{{ filter.text }}
|
|
43
|
+
</router-link>
|
|
44
|
+
<a v-else-if="('type' in filter ? filter.type === 2 : true) && ('visible' in filter ? filter.visible : true)"
|
|
45
|
+
@click.prevent="tradeFilter(String(filter.value))" class="dropdown-item cursor-pointer"
|
|
46
|
+
:class="modelFilter === filter?.value ? 'bg-info text-dark selected' : ''">
|
|
47
|
+
{{ filter.text }}
|
|
48
|
+
</a>
|
|
49
|
+
<a v-else-if="('type' in filter ? filter.type === 3 : true) && ('visible' in filter ? filter.visible : true)"
|
|
50
|
+
@click.prevent="clickItem(filter)" class="dropdown-item cursor-pointer"
|
|
51
|
+
:class="filter?.active ? 'bg-info text-dark selected' : ''">
|
|
52
|
+
{{ filter.text }}
|
|
53
|
+
</a>
|
|
54
|
+
</template>
|
|
91
55
|
</div>
|
|
56
|
+
|
|
57
|
+
|
|
92
58
|
</template>
|
|
93
59
|
<script setup lang="ts">
|
|
94
60
|
import { computed, watch } from 'vue';
|
|
@@ -100,9 +66,7 @@ interface SearchProps {
|
|
|
100
66
|
placeholder_search?: string;
|
|
101
67
|
deactivate_search_on_clear?: boolean;
|
|
102
68
|
deactivate_search_empty?: boolean;
|
|
103
|
-
|
|
104
|
-
use_column_manager?: boolean;
|
|
105
|
-
toggleColumnVisibility?: (columnId: string) => void;
|
|
69
|
+
|
|
106
70
|
}
|
|
107
71
|
const props = withDefaults(defineProps<SearchProps>(), {
|
|
108
72
|
filter: "",
|
|
@@ -139,9 +103,6 @@ const props = withDefaults(defineProps<SearchProps>(), {
|
|
|
139
103
|
click: null,
|
|
140
104
|
deactivate_search_on_clear: false,
|
|
141
105
|
deactivate_search_empty: false,
|
|
142
|
-
columns_list: () => [],
|
|
143
|
-
use_column_manager: false,
|
|
144
|
-
toggleColumnVisibility: () => { }
|
|
145
106
|
});
|
|
146
107
|
|
|
147
108
|
const emit = defineEmits(['update:search', 'update:filter', "search", "clickedClearSearch"]);
|
|
@@ -21,24 +21,31 @@
|
|
|
21
21
|
</slot>
|
|
22
22
|
|
|
23
23
|
<Teleport :to="options.search_teleport || 'body'" :disabled="!options.search_teleport">
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
24
|
+
<div class="dropdown d-flex">
|
|
25
|
+
<Search v-if="!options.disable_search" v-model:search="pagination.search"
|
|
26
|
+
v-model:filter="pagination.filter" :list_filter="options.list_filter" :item_use="item_use"
|
|
27
|
+
@search="reSearch" :deactivate_search_on_clear="options.deactivate_search_on_clear"
|
|
28
|
+
:placeholder_search="options.placeholder_search"
|
|
29
|
+
:deactivate_search_empty="options.deactivate_search_empty"
|
|
30
|
+
:use_column_manager="options.use_column_manager" :toggleColumnVisibility="toggleColumnVisibility"
|
|
31
|
+
:columns_list="columns_list" @clicked-clear-search="$emit('clickedClearSearch')">
|
|
32
|
+
|
|
33
|
+
<template #search-field>
|
|
34
|
+
<slot name="search-field" :search="pagination.search" :filter="pagination.filter"
|
|
35
|
+
:reSearch="reSearch">
|
|
36
|
+
</slot>
|
|
37
|
+
</template>
|
|
38
|
+
</Search>
|
|
39
|
+
|
|
40
|
+
<VExtraActions :use_column_manager="options.use_column_manager" :columns_list="columns_list"
|
|
41
|
+
:toggleColumnVisibility="toggleColumnVisibility">
|
|
42
|
+
<template #extra-actions>
|
|
43
|
+
<slot name="extra-actions">
|
|
44
|
+
</slot>
|
|
45
|
+
</template>
|
|
46
|
+
</VExtraActions>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
42
49
|
</Teleport>
|
|
43
50
|
</div>
|
|
44
51
|
<slot name="item-selected-info" :selected_items="selected_items" :clearSelection="() => selected_items = []">
|
|
@@ -257,6 +264,7 @@ import { readonly, ref, provide, computed, watch, nextTick, inject, onMounted }
|
|
|
257
264
|
import { DATA_TABLE_CONFIG } from '@/config/datatableConfig'
|
|
258
265
|
import PaginationDatatable from '@/Pagination/Pagination.vue';
|
|
259
266
|
import Search from './SearchDatatable.vue';
|
|
267
|
+
import VExtraActions from './VExtraActions.vue';
|
|
260
268
|
import { useImagePreview } from '../composables/useImagePreview';
|
|
261
269
|
import { dataTableApiKey, type ColumnConfiguration } from '../keys';
|
|
262
270
|
import draggable from 'vuedraggable';
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
|
|
3
|
+
<div v-if="use_column_manager" class="dropdown d-inline-block ms-2">
|
|
4
|
+
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"
|
|
5
|
+
title="Gerenciar Colunas visíveis">
|
|
6
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-columns" width="24" height="24"
|
|
7
|
+
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
|
|
8
|
+
stroke-linejoin="round">
|
|
9
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
10
|
+
<path d="M4 6l5.5 0" />
|
|
11
|
+
<path d="M4 10l5.5 0" />
|
|
12
|
+
<path d="M4 14l5.5 0" />
|
|
13
|
+
<path d="M4 18l5.5 0" />
|
|
14
|
+
<path d="M14.5 6l5.5 0" />
|
|
15
|
+
<path d="M14.5 10l5.5 0" />
|
|
16
|
+
<path d="M14.5 14l5.5 0" />
|
|
17
|
+
<path d="M14.5 18l5.5 0" />
|
|
18
|
+
</svg>
|
|
19
|
+
</button>
|
|
20
|
+
<div class="dropdown-menu dropdown-menu-end p-3 shadow-sm" style="min-width: 220px; z-index: 1050;">
|
|
21
|
+
<h6 class="dropdown-header text-uppercase fw-bold mb-2">Exibir Colunas</h6>
|
|
22
|
+
<div class="d-flex flex-column gap-2">
|
|
23
|
+
<label v-for="coluna in columns_list" :key="coluna.id" class="form-check cursor-pointer m-0">
|
|
24
|
+
<input class="form-check-input" type="checkbox" :checked="coluna.visible" :disabled="coluna.locked"
|
|
25
|
+
@change="toggleColumnVisibility(coluna.id)">
|
|
26
|
+
<span class="form-check-label user-select-none">{{ coluna.header }}</span>
|
|
27
|
+
</label>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</template>
|
|
32
|
+
<script setup lang="ts">
|
|
33
|
+
interface SearchProps {
|
|
34
|
+
columns_list?: any[];
|
|
35
|
+
use_column_manager?: boolean;
|
|
36
|
+
toggleColumnVisibility?: (columnId: string) => void;
|
|
37
|
+
}
|
|
38
|
+
withDefaults(defineProps<SearchProps>(), {
|
|
39
|
+
columns_list: () => [],
|
|
40
|
+
use_column_manager: false,
|
|
41
|
+
toggleColumnVisibility: () => { }
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
</script>
|