vue-laravel-crud 2.0.6 → 2.0.8

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 (13) hide show
  1. package/dist/vue-laravel-crud.esm.js +244 -131
  2. package/dist/vue-laravel-crud.min.js +3 -3
  3. package/dist/vue-laravel-crud.ssr.js +245 -137
  4. package/package.json +1 -1
  5. package/src/components/CrudCards.vue +131 -114
  6. package/src/components/CrudCustom.vue +58 -41
  7. package/src/components/CrudFilters.vue +319 -319
  8. package/src/components/CrudHeader.vue +154 -152
  9. package/src/components/CrudKanban.vue +36 -36
  10. package/src/components/CrudModals.vue +98 -15
  11. package/src/components/CrudPagination.vue +207 -200
  12. package/src/components/CrudTable.vue +103 -86
  13. package/src/vue-laravel-crud.vue +718 -718
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-laravel-crud",
3
- "version": "2.0.6",
3
+ "version": "2.0.8",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "homepage": "https://github.com/clonixdev/vue-laravel-crud",
package/src/components/CrudCards.vue CHANGED
@@ -1,114 +1,131 @@
1
- <template>
2
- <div v-if="currentDisplayMode == displayModes.MODE_CARDS">
3
- <draggable
4
- v-model="items"
5
- :group="draggableGroup"
6
- :draggable="orderable ? '.item' : '.none'"
7
- @start="drag = true"
8
- @end="drag = false"
9
- @sort="onSort()"
10
- @add="onDraggableAdded($event)"
11
- @change="onDraggableChange($event)"
12
- :options="draggableOptions"
13
- >
14
- <masonry
15
- :cols="{ default: 12 / colLg, 1400: 12 / colXl, 1200: 12 / colLg, 1000: 12 / colMd, 700: 12 / colSm, 400: 12 / colXs }"
16
- :gutter="{ default: '15px', 700: '15px' }"
17
- >
18
- <div v-for="(item, itemIndex) in itemsList" v-bind:key="itemIndex" class="item">
19
- <slot name="card" v-bind:item="item">
20
- <ItemCard
21
- :item="item"
22
- :columns="columns"
23
- :index="itemIndex"
24
- :cardClass="cardClass"
25
- :cardHideFooter="cardHideFooter"
26
- :itemValue="itemValue"
27
- :getStateValue="getStateValue"
28
- :getStateOptions="getStateOptions"
29
- :getStateBadgeVariant="getStateBadgeVariant"
30
- :getArrayValue="getArrayValue"
31
- :showItem="showItem"
32
- :updateItem="updateItem"
33
- :removeItem="removeItem"
34
- >
35
- <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="slotProps">
36
- <slot :name="name" v-bind="slotProps" />
37
- </template>
38
- </ItemCard>
39
- </slot>
40
- </div>
41
- </masonry>
42
- </draggable>
43
-
44
- <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
45
- {{ messageEmptyResults }}
46
- </p>
47
- </div>
48
- </template>
49
-
50
- <script>
51
- import Vue from 'vue';
52
- import draggable from "vuedraggable";
53
- import VueMasonry from 'vue-masonry-css';
54
- import ItemCard from '../ItemCard.vue';
55
-
56
- // Registrar el componente masonry usando el Plugin
57
- Vue.use(VueMasonry);
58
-
59
- export default {
60
- name: 'CrudCards',
61
- components: {
62
- draggable,
63
- ItemCard
64
- },
65
- inject: [
66
- 'displayMode',
67
- 'displayModes',
68
- 'items',
69
- 'draggableGroup',
70
- 'orderable',
71
- 'draggableOptions',
72
- 'itemsList',
73
- 'colLg',
74
- 'colXl',
75
- 'colMd',
76
- 'colSm',
77
- 'colXs',
78
- 'columns',
79
- 'cardClass',
80
- 'cardHideFooter',
81
- 'itemValue',
82
- 'getStateValue',
83
- 'getStateOptions',
84
- 'getStateBadgeVariant',
85
- 'getArrayValue',
86
- 'showItem',
87
- 'updateItem',
88
- 'removeItem',
89
- 'loading',
90
- 'infiniteScroll',
91
- 'messageEmptyResults',
92
- 'onSort',
93
- 'onDraggableAdded',
94
- 'onDraggableChange'
95
- ],
96
- data() {
97
- return {
98
- drag: false
99
- };
100
- },
101
- computed: {
102
- currentDisplayMode() {
103
- if (!this.displayMode) return 1;
104
- if (this.displayMode.value !== undefined) {
105
- return this.displayMode.value;
106
- }
107
- if (typeof this.displayMode === 'function') {
108
- return this.displayMode();
109
- }
110
- return this.displayMode;
111
- }
112
- }
113
- };
114
- </script>
1
+ <template>
2
+ <div v-if="currentDisplayMode == displayModes.MODE_CARDS">
3
+ <!-- Spinner durante la carga inicial -->
4
+ <div v-if="loadingValue || !firstLoadValue" class="text-center p-5">
5
+ <b-spinner variant="primary" label="Cargando..."></b-spinner>
6
+ <p class="mt-2">{{ messageLoading }}</p>
7
+ </div>
8
+
9
+ <!-- Cards con datos -->
10
+ <template v-else>
11
+ <draggable
12
+ v-model="items"
13
+ :group="draggableGroup"
14
+ :draggable="orderable ? '.item' : '.none'"
15
+ @start="drag = true"
16
+ @end="drag = false"
17
+ @sort="onSort()"
18
+ @add="onDraggableAdded($event)"
19
+ @change="onDraggableChange($event)"
20
+ :options="draggableOptions"
21
+ >
22
+ <masonry
23
+ :cols="{ default: 12 / colLg, 1400: 12 / colXl, 1200: 12 / colLg, 1000: 12 / colMd, 700: 12 / colSm, 400: 12 / colXs }"
24
+ :gutter="{ default: '15px', 700: '15px' }"
25
+ >
26
+ <div v-for="(item, itemIndex) in itemsList" v-bind:key="itemIndex" class="item">
27
+ <slot name="card" v-bind:item="item">
28
+ <ItemCard
29
+ :item="item"
30
+ :columns="columns"
31
+ :index="itemIndex"
32
+ :cardClass="cardClass"
33
+ :cardHideFooter="cardHideFooter"
34
+ :itemValue="itemValue"
35
+ :getStateValue="getStateValue"
36
+ :getStateOptions="getStateOptions"
37
+ :getStateBadgeVariant="getStateBadgeVariant"
38
+ :getArrayValue="getArrayValue"
39
+ :showItem="showItem"
40
+ :updateItem="updateItem"
41
+ :removeItem="removeItem"
42
+ >
43
+ <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="slotProps">
44
+ <slot :name="name" v-bind="slotProps" />
45
+ </template>
46
+ </ItemCard>
47
+ </slot>
48
+ </div>
49
+ </masonry>
50
+ </draggable>
51
+
52
+ <p v-if="firstLoadValue && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
53
+ {{ messageEmptyResults }}
54
+ </p>
55
+ </template>
56
+ </div>
57
+ </template>
58
+
59
+ <script>
60
+ import Vue from 'vue';
61
+ import draggable from "vuedraggable";
62
+ import VueMasonry from 'vue-masonry-css';
63
+ import ItemCard from '../ItemCard.vue';
64
+
65
+ // Registrar el componente masonry usando el Plugin
66
+ Vue.use(VueMasonry);
67
+
68
+ export default {
69
+ name: 'CrudCards',
70
+ components: {
71
+ draggable,
72
+ ItemCard
73
+ },
74
+ inject: [
75
+ 'displayMode',
76
+ 'displayModes',
77
+ 'items',
78
+ 'draggableGroup',
79
+ 'orderable',
80
+ 'draggableOptions',
81
+ 'itemsList',
82
+ 'colLg',
83
+ 'colXl',
84
+ 'colMd',
85
+ 'colSm',
86
+ 'colXs',
87
+ 'columns',
88
+ 'cardClass',
89
+ 'cardHideFooter',
90
+ 'itemValue',
91
+ 'getStateValue',
92
+ 'getStateOptions',
93
+ 'getStateBadgeVariant',
94
+ 'getArrayValue',
95
+ 'showItem',
96
+ 'updateItem',
97
+ 'removeItem',
98
+ 'loading',
99
+ 'firstLoad',
100
+ 'infiniteScroll',
101
+ 'messageEmptyResults',
102
+ 'messageLoading',
103
+ 'onSort',
104
+ 'onDraggableAdded',
105
+ 'onDraggableChange'
106
+ ],
107
+ data() {
108
+ return {
109
+ drag: false
110
+ };
111
+ },
112
+ computed: {
113
+ currentDisplayMode() {
114
+ if (!this.displayMode) return 1;
115
+ if (this.displayMode.value !== undefined) {
116
+ return this.displayMode.value;
117
+ }
118
+ if (typeof this.displayMode === 'function') {
119
+ return this.displayMode();
120
+ }
121
+ return this.displayMode;
122
+ },
123
+ loadingValue() {
124
+ return this.loading && this.loading.value !== undefined ? this.loading.value : this.loading;
125
+ },
126
+ firstLoadValue() {
127
+ return this.firstLoad && this.firstLoad.value !== undefined ? this.firstLoad.value : this.firstLoad;
128
+ }
129
+ }
130
+ };
131
+ </script>
package/src/components/CrudCustom.vue CHANGED
@@ -1,41 +1,58 @@
1
- <template>
2
- <div v-if="currentDisplayMode == displayModes.MODE_CUSTOM">
3
- <div :class="listContainerClass">
4
- <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
5
- {{ messageEmptyResults }}
6
- </p>
7
- <div :class="listItemClass" v-for="(item, index) in itemsList" v-bind:key="index">
8
- <slot name="card" v-bind:item="item"> </slot>
9
- </div>
10
- </div>
11
- </div>
12
- </template>
13
-
14
- <script>
15
- export default {
16
- name: 'CrudCustom',
17
- inject: [
18
- 'displayMode',
19
- 'displayModes',
20
- 'listContainerClass',
21
- 'listItemClass',
22
- 'loading',
23
- 'items',
24
- 'infiniteScroll',
25
- 'messageEmptyResults',
26
- 'itemsList'
27
- ],
28
- computed: {
29
- currentDisplayMode() {
30
- if (!this.displayMode) return 1;
31
- if (this.displayMode.value !== undefined) {
32
- return this.displayMode.value;
33
- }
34
- if (typeof this.displayMode === 'function') {
35
- return this.displayMode();
36
- }
37
- return this.displayMode;
38
- }
39
- }
40
- };
41
- </script>
1
+ <template>
2
+ <div v-if="currentDisplayMode == displayModes.MODE_CUSTOM">
3
+ <div :class="listContainerClass">
4
+ <!-- Spinner durante la carga inicial -->
5
+ <div v-if="loadingValue || !firstLoadValue" class="text-center p-5">
6
+ <b-spinner variant="primary" label="Cargando..."></b-spinner>
7
+ <p class="mt-2">{{ messageLoading }}</p>
8
+ </div>
9
+
10
+ <!-- Contenido con datos -->
11
+ <template v-else>
12
+ <p v-if="firstLoadValue && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
13
+ {{ messageEmptyResults }}
14
+ </p>
15
+ <div :class="listItemClass" v-for="(item, index) in itemsList" v-bind:key="index">
16
+ <slot name="card" v-bind:item="item"> </slot>
17
+ </div>
18
+ </template>
19
+ </div>
20
+ </div>
21
+ </template>
22
+
23
+ <script>
24
+ export default {
25
+ name: 'CrudCustom',
26
+ inject: [
27
+ 'displayMode',
28
+ 'displayModes',
29
+ 'listContainerClass',
30
+ 'listItemClass',
31
+ 'loading',
32
+ 'firstLoad',
33
+ 'items',
34
+ 'infiniteScroll',
35
+ 'messageEmptyResults',
36
+ 'messageLoading',
37
+ 'itemsList'
38
+ ],
39
+ computed: {
40
+ currentDisplayMode() {
41
+ if (!this.displayMode) return 1;
42
+ if (this.displayMode.value !== undefined) {
43
+ return this.displayMode.value;
44
+ }
45
+ if (typeof this.displayMode === 'function') {
46
+ return this.displayMode();
47
+ }
48
+ return this.displayMode;
49
+ },
50
+ loadingValue() {
51
+ return this.loading && this.loading.value !== undefined ? this.loading.value : this.loading;
52
+ },
53
+ firstLoadValue() {
54
+ return this.firstLoad && this.firstLoad.value !== undefined ? this.firstLoad.value : this.firstLoad;
55
+ }
56
+ }
57
+ };
58
+ </script>