vue-laravel-crud 2.0.4 → 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.
Files changed (10) hide show
  1. package/package.json +2 -1
  2. package/src/ItemCard.vue +23 -1
  3. package/src/components/CrudCards.vue +5 -1
  4. package/src/components/CrudFilters.vue +95 -32
  5. package/src/components/kanban/KanbanBoard.vue +4 -0
  6. package/src/components/kanban/KanbanCard.vue +23 -1
  7. package/src/components/kanban/KanbanColumn.vue +5 -1
  8. package/src/components/table/TableCell.vue +29 -4
  9. package/src/components/table/TableHeader.vue +28 -19
  10. package/src/vue-laravel-crud.vue +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-laravel-crud",
3
- "version": "2.0.4",
3
+ "version": "2.0.5",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "homepage": "https://github.com/clonixdev/vue-laravel-crud",
@@ -53,6 +53,7 @@
53
53
  "cors": "^2.8.5",
54
54
  "cross-env": "^7.0.3",
55
55
  "express": "^4.18.2",
56
+ "marked": "^4.3.0",
56
57
  "minimist": "^1.2.5",
57
58
  "node-sass": "^8.0.0",
58
59
  "rollup": "^2.68.0",
package/src/ItemCard.vue CHANGED
@@ -15,7 +15,19 @@
15
15
  {{ itemValue(column, item) }}
16
16
  </span>
17
17
  <span v-else-if="column.type === 'state'">
18
- {{ getStateValue(itemValue(column, item), column.options) }}
18
+ <template v-if="getStateOptionsForColumn(column, item).length > 0">
19
+ <b-badge
20
+ v-for="(option, optIndex) in getStateOptionsForColumn(column, item)"
21
+ :key="optIndex"
22
+ :variant="getStateBadgeVariant(option)"
23
+ class="mr-1"
24
+ >
25
+ {{ option.text }}
26
+ </b-badge>
27
+ </template>
28
+ <span v-else>
29
+ {{ itemValue(column, item) }}
30
+ </span>
19
31
  </span>
20
32
  <span v-else-if="column.type === 'array'">
21
33
  {{ getArrayValue(itemValue(column, item), column.displayProp, column.options) }}
@@ -55,11 +67,21 @@
55
67
  cardHideFooter: Boolean,
56
68
  itemValue: Function,
57
69
  getStateValue: Function,
70
+ getStateOptions: Function,
71
+ getStateBadgeVariant: Function,
58
72
  getArrayValue: Function,
59
73
  showItem: Function,
60
74
  updateItem: Function,
61
75
  removeItem: Function,
62
76
  },
77
+ methods: {
78
+ getStateOptionsForColumn(column, item) {
79
+ if (column.type === 'state' && column.options) {
80
+ return this.getStateOptions(this.itemValue(column, item), column.options);
81
+ }
82
+ return [];
83
+ }
84
+ }
63
85
  };
64
86
  </script>
65
87
 
package/src/components/CrudCards.vue CHANGED
@@ -24,7 +24,9 @@
24
24
  :cardClass="cardClass"
25
25
  :cardHideFooter="cardHideFooter"
26
26
  :itemValue="itemValue"
27
- :getStateValue="getStateValue"
27
+ :getStateValue="getStateValue"
28
+ :getStateOptions="getStateOptions"
29
+ :getStateBadgeVariant="getStateBadgeVariant"
28
30
  :getArrayValue="getArrayValue"
29
31
  :showItem="showItem"
30
32
  :updateItem="updateItem"
@@ -74,6 +76,8 @@ export default {
74
76
  'cardHideFooter',
75
77
  'itemValue',
76
78
  'getStateValue',
79
+ 'getStateOptions',
80
+ 'getStateBadgeVariant',
77
81
  'getArrayValue',
78
82
  'showItem',
79
83
  'updateItem',
package/src/components/CrudFilters.vue CHANGED
@@ -3,11 +3,11 @@
3
3
  <div v-for="(column, indexc) in columns" :key="indexc">
4
4
  <div v-if="isColumnHasFilter(column)">
5
5
  <slot :name="'sidebar-filter-' + column.prop" v-bind:column="column" v-bind:filter="filter"
6
- v-bind:internalFilterByProp="internalFilterByProp" v-if="internalFilterByProp(column.prop)">
6
+ v-bind:internalFilterByProp="internalFilterByProp" v-bind:getFilterForColumn="getFilterForColumn">
7
7
  <div class="form-group" v-if="column.type == 'boolean'">
8
8
  <label>{{ column.label }}</label>
9
9
 
10
- <select class="form-control" v-model="internalFilterByProp(column.prop).value"
10
+ <select class="form-control" v-model="getFilterForColumn(column).value"
11
11
  @change="onChangeFilter($event)">
12
12
  <option value=""></option>
13
13
  <option value="1">Sí</option>
@@ -17,31 +17,49 @@
17
17
  <div class="form-group" v-else-if="column.type == 'date'">
18
18
  <div class="row">
19
19
  <div class="col-6">
20
- <b-form-datepicker v-model="internalFilterByProp(column.prop + '_from').value
20
+ <b-form-datepicker v-model="getFilterForDateFrom(column).value
21
21
  " today-button reset-button close-button locale="es"></b-form-datepicker>
22
22
  </div>
23
23
  <div class="col-6">
24
- <b-form-datepicker v-model="internalFilterByProp(column.prop + '_to').value
24
+ <b-form-datepicker v-model="getFilterForDateTo(column).value
25
25
  " today-button reset-button close-button locale="es"></b-form-datepicker>
26
26
  </div>
27
27
  </div>
28
28
  </div>
29
29
 
30
+ <div class="form-group" v-else-if="column.type == 'number' || column.type == 'money'">
31
+ <label>{{ column.label }}</label>
32
+ <div class="row">
33
+ <div class="col-6">
34
+ <input
35
+ type="number"
36
+ class="form-control"
37
+ v-model.number="getFilterForDateFrom(column).value"
38
+ :step="column.type == 'money' ? '0.01' : '1'"
39
+ @change="onChangeFilter($event)"
40
+ placeholder="Desde" />
41
+ </div>
42
+ <div class="col-6">
43
+ <input
44
+ type="number"
45
+ class="form-control"
46
+ v-model.number="getFilterForDateTo(column).value"
47
+ :step="column.type == 'money' ? '0.01' : '1'"
48
+ @change="onChangeFilter($event)"
49
+ placeholder="Hasta" />
50
+ </div>
51
+ </div>
52
+ </div>
53
+
30
54
  <div class="form-group" v-else-if="column.type == 'state'">
31
55
  <label>{{ column.label }}</label>
32
56
 
33
- <select class="form-control" v-model="internalFilterByProp(column.prop).value"
34
- @change="onChangeFilter($event)" v-if="optionsLoaded">
57
+ <select class="form-control" v-model="getFilterForColumn(column).value"
58
+ @change="onChangeFilter($event)" v-if="column.options && Array.isArray(column.options)">
35
59
  <option value=""></option>
36
- <option :value="option.id ? option.id : option.value" v-for="option in column.options"
37
- :key="option.id ? option.id : option.value">
38
- {{
39
- option.text
40
- ? option.text
41
- : option.label
42
- ? option.label
43
- : ""
44
- }}
60
+ <option :value="option.value" v-for="option in column.options"
61
+ :key="option.value || option.id">
62
+ {{ option.text }}
45
63
  </option>
46
64
  </select>
47
65
  </div>
@@ -49,28 +67,20 @@
49
67
  <div class="form-group" v-else-if="column.type == 'array'">
50
68
  <label>{{ column.label }}</label>
51
69
 
52
- <select class="form-control" v-model="internalFilterByProp(column.prop).value"
53
- @change="onChangeFilter($event)" v-if="optionsLoaded">
70
+ <select class="form-control" v-model="getFilterForColumn(column).value"
71
+ @change="onChangeFilter($event)" v-if="column.options && Array.isArray(column.options)">
54
72
  <option value=""></option>
55
- <template v-if="column.options">
56
- <option :value="option.id ? option.id : option.value" v-for="option in column.options"
57
- :key="option.id ? option.id : option.value">
58
- {{
59
- option.text
60
- ? option.text
61
- : option.label
62
- ? option.label
63
- : ""
64
- }}
65
- </option>
66
- </template>
73
+ <option :value="option.value" v-for="option in column.options"
74
+ :key="option.value || option.id">
75
+ {{ option.text }}
76
+ </option>
67
77
  </select>
68
78
  </div>
69
79
 
70
80
  <div class="form-group" v-else>
71
81
  <label>{{ column.label }}</label>
72
82
 
73
- <input class="form-control" v-model.lazy="internalFilterByProp(column.prop).value"
83
+ <input class="form-control" v-model.lazy="getFilterForColumn(column).value"
74
84
  @change="onChangeFilter($event)" />
75
85
  </div>
76
86
  </slot>
@@ -98,7 +108,60 @@ export default {
98
108
  'internalFilterByProp',
99
109
  'optionsLoaded',
100
110
  'onChangeFilter',
101
- 'resetFilters'
102
- ]
111
+ 'resetFilters',
112
+ 'setupFilters',
113
+ 'internalFilters'
114
+ ],
115
+ methods: {
116
+ // Método helper para obtener el filtro de forma segura, creándolo si no existe
117
+ getFilterForColumn(column) {
118
+ let filter = this.internalFilterByProp(column.prop);
119
+
120
+ // Si el filtro no existe, intentar inicializar los filtros
121
+ if (!filter) {
122
+ // Verificar si hay filtros inicializados
123
+ if (this.internalFilters && this.internalFilters.length === 0) {
124
+ this.setupFilters();
125
+ // Intentar obtener el filtro nuevamente después de inicializar
126
+ filter = this.internalFilterByProp(column.prop);
127
+ }
128
+ }
129
+
130
+ // Si aún no existe, crear un objeto temporal para evitar errores
131
+ if (!filter) {
132
+ return {
133
+ value: null
134
+ };
135
+ }
136
+
137
+ return filter;
138
+ },
139
+
140
+ // Método helper específico para campos de fecha (from)
141
+ getFilterForDateFrom(column) {
142
+ const filter = this.internalFilterByProp(column.prop + '_from');
143
+ if (!filter) {
144
+ if (this.internalFilters && this.internalFilters.length === 0) {
145
+ this.setupFilters();
146
+ return this.internalFilterByProp(column.prop + '_from') || { value: null };
147
+ }
148
+ return { value: null };
149
+ }
150
+ return filter;
151
+ },
152
+
153
+ // Método helper específico para campos de fecha (to)
154
+ getFilterForDateTo(column) {
155
+ const filter = this.internalFilterByProp(column.prop + '_to');
156
+ if (!filter) {
157
+ if (this.internalFilters && this.internalFilters.length === 0) {
158
+ this.setupFilters();
159
+ return this.internalFilterByProp(column.prop + '_to') || { value: null };
160
+ }
161
+ return { value: null };
162
+ }
163
+ return filter;
164
+ }
165
+ }
103
166
  };
104
167
  </script>
package/src/components/kanban/KanbanBoard.vue CHANGED
@@ -8,6 +8,8 @@
8
8
  :columns="columns"
9
9
  :itemValue="itemValue"
10
10
  :getStateValue="getStateValue"
11
+ :getStateOptions="getStateOptions"
12
+ :getStateBadgeVariant="getStateBadgeVariant"
11
13
  :getArrayValue="getArrayValue"
12
14
  :showItem="showItem"
13
15
  :updateItem="updateItem"
@@ -34,6 +36,8 @@ export default {
34
36
  'columns',
35
37
  'itemValue',
36
38
  'getStateValue',
39
+ 'getStateOptions',
40
+ 'getStateBadgeVariant',
37
41
  'getArrayValue',
38
42
  'showItem',
39
43
  'updateItem',
package/src/components/kanban/KanbanCard.vue CHANGED
@@ -22,7 +22,19 @@
22
22
  {{ itemValue(column, item) }}
23
23
  </span>
24
24
  <span v-else-if="column.type === 'state'">
25
- {{ getStateValue(itemValue(column, item), column.options) }}
25
+ <template v-if="getStateOptionsForColumn(column, item).length > 0">
26
+ <b-badge
27
+ v-for="(option, optIndex) in getStateOptionsForColumn(column, item)"
28
+ :key="optIndex"
29
+ :variant="getStateBadgeVariant(option)"
30
+ class="mr-1"
31
+ >
32
+ {{ option.text }}
33
+ </b-badge>
34
+ </template>
35
+ <span v-else>
36
+ {{ itemValue(column, item) }}
37
+ </span>
26
38
  </span>
27
39
  <span v-else-if="column.type === 'array'">
28
40
  {{ getArrayValue(itemValue(column, item), column.displayProp, column.options) }}
@@ -61,10 +73,20 @@ export default {
61
73
  cardHideFooter: Boolean,
62
74
  itemValue: Function,
63
75
  getStateValue: Function,
76
+ getStateOptions: Function,
77
+ getStateBadgeVariant: Function,
64
78
  getArrayValue: Function,
65
79
  showItem: Function,
66
80
  updateItem: Function,
67
81
  removeItem: Function,
82
+ },
83
+ methods: {
84
+ getStateOptionsForColumn(column, item) {
85
+ if (column.type === 'state' && column.options) {
86
+ return this.getStateOptions(this.itemValue(column, item), column.options);
87
+ }
88
+ return [];
89
+ }
68
90
  }
69
91
  };
70
92
  </script>
package/src/components/kanban/KanbanColumn.vue CHANGED
@@ -24,7 +24,9 @@
24
24
  :cardClass="cardClass"
25
25
  :cardHideFooter="cardHideFooter"
26
26
  :itemValue="itemValue"
27
- :getStateValue="getStateValue"
27
+ :getStateValue="getStateValue"
28
+ :getStateOptions="getStateOptions"
29
+ :getStateBadgeVariant="getStateBadgeVariant"
28
30
  :getArrayValue="getArrayValue"
29
31
  :showItem="showItem"
30
32
  :updateItem="updateItem"
@@ -53,6 +55,8 @@ export default {
53
55
  columns: Array,
54
56
  itemValue: Function,
55
57
  getStateValue: Function,
58
+ getStateOptions: Function,
59
+ getStateBadgeVariant: Function,
56
60
  getArrayValue: Function,
57
61
  showItem: Function,
58
62
  updateItem: Function,
package/src/components/table/TableCell.vue CHANGED
@@ -30,10 +30,20 @@
30
30
  <b-form-checkbox v-model="item.selected" @change="onCheckSelect($event, item)">
31
31
  </b-form-checkbox>
32
32
  </span>
33
- <span v-else-if="column.type == 'state' && optionsLoaded">
34
- {{
35
- getStateValue(itemValue(column, item), column.options)
36
- }}
33
+ <span v-else-if="column.type == 'state'">
34
+ <template v-if="stateOptions.length > 0">
35
+ <b-badge
36
+ v-for="(option, optIndex) in stateOptions"
37
+ :key="optIndex"
38
+ :variant="getStateBadgeVariant(option)"
39
+ class="mr-1"
40
+ >
41
+ {{ option.text }}
42
+ </b-badge>
43
+ </template>
44
+ <span v-else>
45
+ {{ itemValue(column, item) }}
46
+ </span>
37
47
  </span>
38
48
  <span v-else-if="column.type == 'array' && optionsLoaded">
39
49
  {{
@@ -45,6 +55,7 @@
45
55
  }}
46
56
  </span>
47
57
  <span v-else>
58
+
48
59
  {{ itemValue(column, item) }}
49
60
  </span>
50
61
  </slot>
@@ -103,6 +114,8 @@ export default {
103
114
  inject: [
104
115
  'itemValue',
105
116
  'getStateValue',
117
+ 'getStateOptions',
118
+ 'getStateBadgeVariant',
106
119
  'getArrayValue',
107
120
  'onCheckSelect',
108
121
  'showItem',
@@ -114,6 +127,18 @@ export default {
114
127
  return {
115
128
  moment: moment
116
129
  };
130
+ },
131
+ computed: {
132
+ stateOptions() {
133
+ // Permitir usar opciones incluso si optionsLoaded es false, ya que getStateOptions normaliza internamente
134
+ if (this.column.type === 'state' && this.column.options && Array.isArray(this.column.options)) {
135
+ const itemVal = this.itemValue(this.column, this.item);
136
+ const options = this.column.options;
137
+ const result = this.getStateOptions(itemVal, options);
138
+ return result;
139
+ }
140
+ return [];
141
+ }
117
142
  }
118
143
  };
119
144
  </script>
package/src/components/table/TableHeader.vue CHANGED
@@ -12,7 +12,7 @@
12
12
  v-bind:internalFilterByProp="internalFilterByProp" v-if="enableFilters &&
13
13
  filtersVisible &&
14
14
  isColumnHasFilter(column) &&
15
- internalFilterByProp(column.prop)
15
+ (internalFilterByProp(column.prop) || internalFilterByProp(column.prop + '_from'))
16
16
  ">
17
17
 
18
18
  <div class="form-group">
@@ -36,33 +36,42 @@
36
36
  </div>
37
37
  </div>
38
38
 
39
- <select v-else-if="column.type == 'state' && optionsLoaded" class="form-control form-control-md p-2"
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"
40
61
  v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)"
41
62
  :placeholder="column.label">
42
63
  <option value="">{{ column.label }}</option>
43
- <option :value="option.id" v-for="(option, indexo) in column.options" :key="indexo">
44
- {{
45
- option.text
46
- ? option.text
47
- : option.label
48
- ? option.label
49
- : ""
50
- }}
64
+ <option :value="option.value" v-for="(option, indexo) in column.options" :key="indexo">
65
+ {{ option.text }}
51
66
  </option>
52
67
  </select>
53
68
 
54
- <select v-else-if="column.type == 'array' && optionsLoaded" class="form-control form-control-md p-2"
69
+ <select v-else-if="column.type == 'array' && column.options && Array.isArray(column.options)" class="form-control form-control-md p-2"
55
70
  v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)"
56
71
  :placeholder="column.label">
57
72
  <option value="">{{ column.label }}</option>
58
- <option :value="option.id" v-for="(option, indexo) in column.options" :key="indexo">
59
- {{
60
- option.text
61
- ? option.text
62
- : option.label
63
- ? option.label
64
- : ""
65
- }}
73
+ <option :value="option.value" v-for="(option, indexo) in column.options" :key="indexo">
74
+ {{ option.text }}
66
75
  </option>
67
76
  </select>
68
77
 
package/src/vue-laravel-crud.vue CHANGED
@@ -186,6 +186,8 @@ export default /*#__PURE__*/ {
186
186
  loadOptions: this.loadOptions,
187
187
  getArrayValue: this.getArrayValue,
188
188
  getStateValue: this.getStateValue,
189
+ getStateOptions: this.getStateOptions,
190
+ getStateBadgeVariant: this.getStateBadgeVariant,
189
191
  onRowHover: this.onRowHover,
190
192
  onRowClick: this.onRowClick,
191
193
  onSort: this.onSort,