vue-laravel-crud 2.0.1 → 2.0.5
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/README.md +344 -148
- package/dist/vue-laravel-crud.esm.js +363 -124
- package/dist/vue-laravel-crud.min.js +3 -3
- package/dist/vue-laravel-crud.ssr.js +402 -143
- package/package.json +5 -2
- package/src/ItemCard.vue +23 -1
- package/src/components/CrudCards.vue +5 -1
- package/src/components/CrudFilters.vue +95 -32
- package/src/components/CrudPagination.vue +87 -20
- package/src/components/kanban/KanbanBoard.vue +4 -0
- package/src/components/kanban/KanbanCard.vue +23 -1
- package/src/components/kanban/KanbanColumn.vue +5 -1
- package/src/components/table/TableCell.vue +81 -6
- package/src/components/table/TableHeader.vue +54 -24
- package/src/vue-laravel-crud.vue +697 -688
|
@@ -3,14 +3,16 @@
|
|
|
3
3
|
<tr>
|
|
4
4
|
<slot name="rowHead">
|
|
5
5
|
<th v-for="(column, indexc) in columns" :key="indexc"
|
|
6
|
-
:style="{ width: column.width ? column.width : 'inherit' }"
|
|
6
|
+
:style="{ width: column.width ? column.width : (column.type == 'actions' ? '1%' : 'inherit') }"
|
|
7
|
+
:class="{ 'actions-header': column.type == 'actions' }"
|
|
8
|
+
scope="col"
|
|
7
9
|
@mouseenter="hoveredColumn = column.prop"
|
|
8
10
|
@mouseleave="hoveredColumn = null">
|
|
9
11
|
<slot :name="'filter-' + column.prop" v-bind:column="column" v-bind:filter="filter"
|
|
10
12
|
v-bind:internalFilterByProp="internalFilterByProp" v-if="enableFilters &&
|
|
11
13
|
filtersVisible &&
|
|
12
14
|
isColumnHasFilter(column) &&
|
|
13
|
-
internalFilterByProp(column.prop)
|
|
15
|
+
(internalFilterByProp(column.prop) || internalFilterByProp(column.prop + '_from'))
|
|
14
16
|
">
|
|
15
17
|
|
|
16
18
|
<div class="form-group">
|
|
@@ -34,41 +36,53 @@
|
|
|
34
36
|
</div>
|
|
35
37
|
</div>
|
|
36
38
|
|
|
37
|
-
<
|
|
39
|
+
<div class="row" v-else-if="column.type == 'number' || column.type == 'money'">
|
|
40
|
+
<div class="col-6">
|
|
41
|
+
<input
|
|
42
|
+
type="number"
|
|
43
|
+
class="form-control form-control-md p-2"
|
|
44
|
+
v-model.number="internalFilterByProp(column.prop + '_from').value"
|
|
45
|
+
:step="column.type == 'money' ? '0.01' : '1'"
|
|
46
|
+
@change="onChangeFilter($event)"
|
|
47
|
+
placeholder="Desde" />
|
|
48
|
+
</div>
|
|
49
|
+
<div class="col-6">
|
|
50
|
+
<input
|
|
51
|
+
type="number"
|
|
52
|
+
class="form-control form-control-md p-2"
|
|
53
|
+
v-model.number="internalFilterByProp(column.prop + '_to').value"
|
|
54
|
+
:step="column.type == 'money' ? '0.01' : '1'"
|
|
55
|
+
@change="onChangeFilter($event)"
|
|
56
|
+
placeholder="Hasta" />
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<select v-else-if="column.type == 'state' && column.options && Array.isArray(column.options)" class="form-control form-control-md p-2"
|
|
38
61
|
v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)"
|
|
39
62
|
:placeholder="column.label">
|
|
40
63
|
<option value="">{{ column.label }}</option>
|
|
41
|
-
<option :value="option.
|
|
42
|
-
{{
|
|
43
|
-
option.text
|
|
44
|
-
? option.text
|
|
45
|
-
: option.label
|
|
46
|
-
? option.label
|
|
47
|
-
: ""
|
|
48
|
-
}}
|
|
64
|
+
<option :value="option.value" v-for="(option, indexo) in column.options" :key="indexo">
|
|
65
|
+
{{ option.text }}
|
|
49
66
|
</option>
|
|
50
67
|
</select>
|
|
51
68
|
|
|
52
|
-
<select v-else-if="column.type == 'array' &&
|
|
69
|
+
<select v-else-if="column.type == 'array' && column.options && Array.isArray(column.options)" class="form-control form-control-md p-2"
|
|
53
70
|
v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)"
|
|
54
71
|
:placeholder="column.label">
|
|
55
72
|
<option value="">{{ column.label }}</option>
|
|
56
|
-
<option :value="option.
|
|
57
|
-
{{
|
|
58
|
-
option.text
|
|
59
|
-
? option.text
|
|
60
|
-
: option.label
|
|
61
|
-
? option.label
|
|
62
|
-
: ""
|
|
63
|
-
}}
|
|
73
|
+
<option :value="option.value" v-for="(option, indexo) in column.options" :key="indexo">
|
|
74
|
+
{{ option.text }}
|
|
64
75
|
</option>
|
|
65
76
|
</select>
|
|
66
77
|
|
|
67
78
|
<b-form-checkbox v-else-if="column.type == 'checkbox'" name="select-all"
|
|
68
|
-
|
|
79
|
+
:checked="isAllSelected"
|
|
80
|
+
@change="toggleAll">
|
|
69
81
|
</b-form-checkbox>
|
|
70
82
|
|
|
71
|
-
<b-form-checkbox v-else-if="column.type == 'select'" name="select-all"
|
|
83
|
+
<b-form-checkbox v-else-if="column.type == 'select'" name="select-all"
|
|
84
|
+
:checked="isAllSelected"
|
|
85
|
+
@change="toggleAll">
|
|
72
86
|
</b-form-checkbox>
|
|
73
87
|
|
|
74
88
|
<input v-else class="form-control form-control-md p-2"
|
|
@@ -78,7 +92,14 @@
|
|
|
78
92
|
</div>
|
|
79
93
|
</slot>
|
|
80
94
|
<span v-else-if="column.type == 'select'">
|
|
81
|
-
<b-form-checkbox name="select-all"
|
|
95
|
+
<b-form-checkbox name="select-all"
|
|
96
|
+
:checked="isAllSelected"
|
|
97
|
+
@change="toggleAll"></b-form-checkbox>
|
|
98
|
+
</span>
|
|
99
|
+
<span v-else-if="column.type == 'checkbox'">
|
|
100
|
+
<b-form-checkbox name="select-all"
|
|
101
|
+
:checked="isAllSelected"
|
|
102
|
+
@change="toggleAll"></b-form-checkbox>
|
|
82
103
|
</span>
|
|
83
104
|
<span v-else>{{ column.label }}</span>
|
|
84
105
|
|
|
@@ -109,7 +130,8 @@ export default {
|
|
|
109
130
|
'toggleAll',
|
|
110
131
|
'toggleSortFilter',
|
|
111
132
|
'sortable',
|
|
112
|
-
'optionsLoaded'
|
|
133
|
+
'optionsLoaded',
|
|
134
|
+
'isAllSelected'
|
|
113
135
|
],
|
|
114
136
|
data() {
|
|
115
137
|
return {
|
|
@@ -143,3 +165,11 @@ export default {
|
|
|
143
165
|
}
|
|
144
166
|
};
|
|
145
167
|
</script>
|
|
168
|
+
|
|
169
|
+
<style scoped>
|
|
170
|
+
/* Fijar ancho de la columna de acciones en el header */
|
|
171
|
+
.actions-header {
|
|
172
|
+
width: 1%;
|
|
173
|
+
white-space: nowrap;
|
|
174
|
+
}
|
|
175
|
+
</style>
|