@drax/crud-vue 2.3.0 → 2.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.
Files changed (7) hide show
  1. package/package.json +4 -4
  2. package/src/components/CrudForm.vue +12 -0
  3. package/src/components/CrudFormField.vue +77 -47
  4. package/src/components/CrudFormList.vue +89 -69
  5. package/src/components/CrudList.vue +16 -3
  6. package/src/composables/UseCrud.ts +17 -2
  7. package/src/stores/UseCrudStore.ts +4 -0
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "2.3.0",
6
+ "version": "2.6.0",
7
7
  "type": "module",
8
8
  "main": "./src/index.ts",
9
9
  "module": "./src/index.ts",
@@ -24,9 +24,9 @@
24
24
  "format": "prettier --write src/"
25
25
  },
26
26
  "dependencies": {
27
- "@drax/common-front": "^2.2.0",
27
+ "@drax/common-front": "^2.6.0",
28
28
  "@drax/crud-front": "^2.0.0",
29
- "@drax/crud-share": "^2.3.0",
29
+ "@drax/crud-share": "^2.4.0",
30
30
  "@drax/media-vue": "^2.2.1"
31
31
  },
32
32
  "peerDependencies": {
@@ -50,5 +50,5 @@
50
50
  "vue-tsc": "^3.2.4",
51
51
  "vuetify": "^3.11.8"
52
52
  },
53
- "gitHead": "9f16dac55d0a7af8a2cb53230e015d24e15c9d3a"
53
+ "gitHead": "57830b50c2c9081b9d7e236d441ed9b2a3aca0ba"
54
54
  }
package/src/components/CrudForm.vue CHANGED
@@ -172,6 +172,10 @@ const rules = computed(() => {
172
172
  :preview="field?.preview"
173
173
  :previewHeight="field?.previewHeight"
174
174
  :rules="rules(field.name)"
175
+ :hint="field.hint"
176
+ :persistent-hint="field.persistentHint"
177
+ :placeholder="field.placeholder"
178
+ :persistent-placeholder="field.persistentPlaceholder"
175
179
  />
176
180
  </slot>
177
181
 
@@ -214,6 +218,10 @@ const rules = computed(() => {
214
218
  :append-icon="field?.appendIcon"
215
219
  :append-inner-icon="field?.appendInnerIcon"
216
220
  :rules="rules(field.name)"
221
+ :hint="field.hint"
222
+ :persistent-hint="field.persistentHint"
223
+ :placeholder="field.placeholder"
224
+ :persistent-placeholder="field.persistentPlaceholder"
217
225
  />
218
226
  </slot>
219
227
 
@@ -268,6 +276,10 @@ const rules = computed(() => {
268
276
  :append-icon="field?.appendIcon"
269
277
  :append-inner-icon="field?.appendInnerIcon"
270
278
  :rules="rules(field.name)"
279
+ :hint="field.hint"
280
+ :persistent-hint="field.persistentHint"
281
+ :placeholder="field.placeholder"
282
+ :persistent-placeholder="field.persistentPlaceholder"
271
283
  />
272
284
  </slot>
273
285
 
package/src/components/CrudFormField.vue CHANGED
@@ -27,6 +27,10 @@ const {index, entity, field, parentField, errorMessages, rules} = defineProps({
27
27
  appendInnerIcon: {type: String, default: ''},
28
28
  readonly: {type: Boolean, default: false},
29
29
  hideDetails: {type: Boolean, default: false},
30
+ hint: {type: String, required: false},
31
+ persistentHint: {type: Boolean, default: false},
32
+ placeholder: {type: String, required: false},
33
+ persistentPlaceholder: {type: Boolean, default: false},
30
34
  singleLine: {type: Boolean, default: false},
31
35
  multiple: {type: Boolean, default: false},
32
36
  clearable: {type: Boolean, default: false},
@@ -87,8 +91,10 @@ defineEmits(['updateValue'])
87
91
  type="text"
88
92
  :name="name"
89
93
  :label="label"
90
- :hint="field.hint"
91
- :persistent-hint="field.persistentHint"
94
+ :hint="hint ?? field.hint"
95
+ :persistent-hint="persistentHint ?? field.persistentHint"
96
+ :placeholder="placeholder ?? field.placeholder"
97
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
92
98
  v-model="valueModel"
93
99
  :readonly="readonly"
94
100
  :error-messages="inputErrors"
@@ -96,7 +102,7 @@ defineEmits(['updateValue'])
96
102
  :density="density"
97
103
  :variant="variant"
98
104
  :clearable="clearable"
99
- :hide-details="hideDetails"
105
+ :hide-details="hideDetails ?? field.hideDetails"
100
106
  :single-line="singleLine"
101
107
  :prepend-icon="prependIcon"
102
108
  :append-icon="appendIcon"
@@ -111,8 +117,10 @@ defineEmits(['updateValue'])
111
117
  type="text"
112
118
  :name="name"
113
119
  :label="label"
114
- :hint="field.hint"
115
- :persistent-hint="field.persistentHint"
120
+ :hint="hint ?? field.hint"
121
+ :persistent-hint="persistentHint ?? field.persistentHint"
122
+ :placeholder="placeholder ?? field.placeholder"
123
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
116
124
  v-model="valueModel"
117
125
  :readonly="readonly"
118
126
  :error-messages="inputErrors"
@@ -120,7 +128,7 @@ defineEmits(['updateValue'])
120
128
  :density="density"
121
129
  :variant="variant"
122
130
  :clearable="clearable"
123
- :hide-details="hideDetails"
131
+ :hide-details="hideDetails ?? field.hideDetails"
124
132
  :single-line="singleLine"
125
133
  :prepend-icon="prependIcon"
126
134
  :append-icon="appendIcon"
@@ -133,8 +141,10 @@ defineEmits(['updateValue'])
133
141
  v-if="field.type === 'password'"
134
142
  :name="name"
135
143
  :label="label"
136
- :hint="field.hint"
137
- :persistent-hint="field.persistentHint"
144
+ :hint="hint ?? field.hint"
145
+ :persistent-hint="persistentHint ?? field.persistentHint"
146
+ :placeholder="placeholder ?? field.placeholder"
147
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
138
148
  v-model="valueModel"
139
149
  :readonly="readonly"
140
150
  :error-messages="inputErrors"
@@ -142,7 +152,7 @@ defineEmits(['updateValue'])
142
152
  :density="density"
143
153
  :variant="variant"
144
154
  :clearable="clearable"
145
- :hide-details="hideDetails"
155
+ :hide-details="hideDetails ?? field.hideDetails"
146
156
  :single-line="singleLine"
147
157
  :prepend-icon="prependIcon"
148
158
  :append-icon="appendIcon"
@@ -158,8 +168,10 @@ defineEmits(['updateValue'])
158
168
  v-if="field.type === 'enum' && !field.noFilter"
159
169
  :name="name"
160
170
  :label="label"
161
- :hint="field.hint"
162
- :persistent-hint="field.persistentHint"
171
+ :hint="hint ?? field.hint"
172
+ :persistent-hint="persistentHint ?? field.persistentHint"
173
+ :placeholder="placeholder ?? field.placeholder"
174
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
163
175
  v-model="valueModel"
164
176
  :items="field.enum"
165
177
  :readonly="readonly"
@@ -167,7 +179,7 @@ defineEmits(['updateValue'])
167
179
  :density="density"
168
180
  :variant="variant"
169
181
  :clearable="clearable"
170
- :hide-details="hideDetails"
182
+ :hide-details="hideDetails ?? field.hideDetails"
171
183
  :single-line="singleLine"
172
184
  :rules="rules"
173
185
  @update:modelValue="$emit('updateValue')"
@@ -183,8 +195,10 @@ defineEmits(['updateValue'])
183
195
  v-if="field.type === 'select'"
184
196
  :name="name"
185
197
  :label="label"
186
- :hint="field.hint"
187
- :persistent-hint="field.persistentHint"
198
+ :hint="hint ?? field.hint"
199
+ :persistent-hint="persistentHint ?? field.persistentHint"
200
+ :placeholder="placeholder ?? field.placeholder"
201
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
188
202
  v-model="valueModel"
189
203
  :items="field.items"
190
204
  item-title="title"
@@ -194,7 +208,7 @@ defineEmits(['updateValue'])
194
208
  :density="density"
195
209
  :variant="variant"
196
210
  :clearable="clearable"
197
- :hide-details="hideDetails"
211
+ :hide-details="hideDetails ?? field.hideDetails"
198
212
  :single-line="singleLine"
199
213
  :rules="rules"
200
214
  @update:modelValue="$emit('updateValue')"
@@ -225,8 +239,10 @@ defineEmits(['updateValue'])
225
239
  v-if="field.type === 'enum' && field.noFilter"
226
240
  :name="name"
227
241
  :label="label"
228
- :hint="field.hint"
229
- :persistent-hint="field.persistentHint"
242
+ :hint="hint ?? field.hint"
243
+ :persistent-hint="persistentHint ?? field.persistentHint"
244
+ :placeholder="placeholder ?? field.placeholder"
245
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
230
246
  v-model="valueModel"
231
247
  :items="field.enum"
232
248
  :readonly="readonly"
@@ -234,7 +250,7 @@ defineEmits(['updateValue'])
234
250
  :density="density"
235
251
  :variant="variant"
236
252
  :clearable="clearable"
237
- :hide-details="hideDetails"
253
+ :hide-details="hideDetails ?? field.hideDetails"
238
254
  :single-line="singleLine"
239
255
  :rules="rules"
240
256
  @update:modelValue="$emit('updateValue')"
@@ -252,8 +268,10 @@ defineEmits(['updateValue'])
252
268
  type="number"
253
269
  :name="name"
254
270
  :label="label"
255
- :hint="field.hint"
256
- :persistent-hint="field.persistentHint"
271
+ :hint="hint ?? field.hint"
272
+ :persistent-hint="persistentHint ?? field.persistentHint"
273
+ :placeholder="placeholder ?? field.placeholder"
274
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
257
275
  v-model.number="valueModel"
258
276
  :readonly="readonly"
259
277
  :error-messages="inputErrors"
@@ -261,7 +279,7 @@ defineEmits(['updateValue'])
261
279
  :density="density"
262
280
  :variant="variant"
263
281
  :clearable="clearable"
264
- :hide-details="hideDetails"
282
+ :hide-details="hideDetails ?? field.hideDetails"
265
283
  :single-line="singleLine"
266
284
  @update:modelValue="$emit('updateValue')"
267
285
  :prepend-icon="prependIcon"
@@ -281,7 +299,7 @@ defineEmits(['updateValue'])
281
299
  :density="density"
282
300
  :variant="variant"
283
301
  :clearable="clearable"
284
- :hide-details="hideDetails"
302
+ :hide-details="hideDetails ?? field.hideDetails"
285
303
  :single-line="singleLine"
286
304
  @update:modelValue="$emit('updateValue')"
287
305
  :prepend-icon="prependIcon"
@@ -303,7 +321,7 @@ defineEmits(['updateValue'])
303
321
  :density="density"
304
322
  :variant="variant"
305
323
  :clearable="clearable"
306
- :hide-details="hideDetails"
324
+ :hide-details="hideDetails ?? field.hideDetails"
307
325
  :single-line="singleLine"
308
326
  @update:modelValue="$emit('updateValue')"
309
327
  :prepend-icon="prependIcon"
@@ -318,8 +336,10 @@ defineEmits(['updateValue'])
318
336
  v-if="field.type === 'boolean'"
319
337
  :name="name"
320
338
  :label="label"
321
- :hint="field.hint"
322
- :persistent-hint="field.persistentHint"
339
+ :hint="hint ?? field.hint"
340
+ :persistent-hint="persistentHint ?? field.persistentHint"
341
+ :placeholder="placeholder ?? field.placeholder"
342
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
323
343
  v-model="valueModel"
324
344
  :readonly="readonly"
325
345
  :error-messages="inputErrors"
@@ -327,7 +347,7 @@ defineEmits(['updateValue'])
327
347
  :density="density"
328
348
  :variant="variant"
329
349
  :clearable="clearable"
330
- :hide-details="hideDetails"
350
+ :hide-details="hideDetails ?? field.hideDetails"
331
351
  :single-line="singleLine"
332
352
  @update:modelValue="$emit('updateValue')"
333
353
  :prepend-icon="prependIcon"
@@ -342,8 +362,8 @@ defineEmits(['updateValue'])
342
362
  v-if="field.type === 'date'"
343
363
  :name="name"
344
364
  :label="label"
345
- :hint="field.hint"
346
- :persistent-hint="field.persistentHint"
365
+ :hint="hint ?? field.hint"
366
+ :persistent-hint="persistentHint ?? field.persistentHint" :placeholder="placeholder ?? field.placeholder" :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
347
367
  v-model="valueModel"
348
368
  :readonly="readonly"
349
369
  :error-messages="inputErrors"
@@ -351,7 +371,7 @@ defineEmits(['updateValue'])
351
371
  :density="density"
352
372
  :variant="variant"
353
373
  :clearable="clearable"
354
- :hide-details="hideDetails"
374
+ :hide-details="hideDetails ?? field.hideDetails"
355
375
  :single-line="singleLine"
356
376
  @update:modelValue="(v) => {
357
377
  if(field.endOfDay){
@@ -381,8 +401,10 @@ defineEmits(['updateValue'])
381
401
  @updateValue="$emit('updateValue')"
382
402
  :item-title="field?.refDisplay"
383
403
  :label="label"
384
- :hint="field.hint"
385
- :persistent-hint="field.persistentHint"
404
+ :hint="hint ?? field.hint"
405
+ :persistent-hint="persistentHint ?? field.persistentHint"
406
+ :placeholder="placeholder ?? field.placeholder"
407
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
386
408
  :no-filter="field.noFilter"
387
409
  :error-messages="inputErrors"
388
410
  :rules="rules"
@@ -390,7 +412,7 @@ defineEmits(['updateValue'])
390
412
  :variant="variant"
391
413
  :readonly="readonly"
392
414
  :clearable="clearable"
393
- :hide-details="hideDetails"
415
+ :hide-details="hideDetails ?? field.hideDetails"
394
416
  :single-line="singleLine"
395
417
  :prepend-icon="prependIcon"
396
418
  :append-icon="appendIcon"
@@ -412,7 +434,7 @@ defineEmits(['updateValue'])
412
434
  :density="density"
413
435
  :variant="variant"
414
436
  :clearable="clearable"
415
- :hide-details="hideDetails"
437
+ :hide-details="hideDetails ?? field.hideDetails"
416
438
  :single-line="singleLine"
417
439
  @updateValue="$emit('updateValue')"
418
440
  :prepend-icon="prependIcon"
@@ -429,8 +451,10 @@ defineEmits(['updateValue'])
429
451
  type="text"
430
452
  :name="name"
431
453
  :label="label"
432
- :hint="field.hint"
433
- :persistent-hint="field.persistentHint"
454
+ :hint="hint ?? field.hint"
455
+ :persistent-hint="persistentHint ?? field.persistentHint"
456
+ :placeholder="placeholder ?? field.placeholder"
457
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
434
458
  v-model="valueModel"
435
459
  :multiple="true"
436
460
  :chips="true"
@@ -440,7 +464,7 @@ defineEmits(['updateValue'])
440
464
  :density="density"
441
465
  :variant="variant"
442
466
  :clearable="clearable"
443
- :hide-details="hideDetails"
467
+ :hide-details="hideDetails ?? field.hideDetails"
444
468
  :single-line="singleLine"
445
469
  :rules="rules"
446
470
  @update:modelValue="$emit('updateValue')"
@@ -456,8 +480,10 @@ defineEmits(['updateValue'])
456
480
  type="text"
457
481
  :name="name"
458
482
  :label="label"
459
- :hint="field.hint"
460
- :persistent-hint="field.persistentHint"
483
+ :hint="hint ?? field.hint"
484
+ :persistent-hint="persistentHint ?? field.persistentHint"
485
+ :placeholder="placeholder ?? field.placeholder"
486
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
461
487
  v-model="valueModel"
462
488
  :items="field.enum"
463
489
  :multiple="true"
@@ -468,7 +494,7 @@ defineEmits(['updateValue'])
468
494
  :density="density"
469
495
  :variant="variant"
470
496
  :clearable="clearable"
471
- :hide-details="hideDetails"
497
+ :hide-details="hideDetails ?? field.hideDetails"
472
498
  :single-line="singleLine"
473
499
  :rules="rules"
474
500
  @update:modelValue="$emit('updateValue')"
@@ -489,15 +515,17 @@ defineEmits(['updateValue'])
489
515
  :multiple="true"
490
516
  :chips="true"
491
517
  :label="label"
492
- :hint="field.hint"
493
- :persistent-hint="field.persistentHint"
518
+ :hint="hint ?? field.hint"
519
+ :persistent-hint="persistentHint ?? field.persistentHint"
520
+ :placeholder="placeholder ?? field.placeholder"
521
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
494
522
  :no-filter="field.noFilter"
495
523
  :rules="rules"
496
524
  :error-messages="inputErrors"
497
525
  :density="density"
498
526
  :variant="variant"
499
527
  :clearable="clearable"
500
- :hide-details="hideDetails"
528
+ :hide-details="hideDetails ?? field.hideDetails"
501
529
  :single-line="singleLine"
502
530
  @updateValue="$emit('updateValue')"
503
531
  :prepend-icon="prependIcon"
@@ -513,8 +541,10 @@ defineEmits(['updateValue'])
513
541
  type="number"
514
542
  :name="name"
515
543
  :label="label"
516
- :hint="field.hint"
517
- :persistent-hint="field.persistentHint"
544
+ :hint="hint ?? field.hint"
545
+ :persistent-hint="persistentHint ?? field.persistentHint"
546
+ :placeholder="placeholder ?? field.placeholder"
547
+ :persistent-placeholder="persistentPlaceholder ?? field.persistentPlaceholder"
518
548
  v-model ="valueModel"
519
549
  :multiple="true"
520
550
  :chips="true"
@@ -523,7 +553,7 @@ defineEmits(['updateValue'])
523
553
  :density="density"
524
554
  :variant="variant"
525
555
  :clearable="clearable"
526
- :hide-details="hideDetails"
556
+ :hide-details="hideDetails ?? field.hideDetails"
527
557
  :single-line="singleLine"
528
558
  :rules="rules"
529
559
  @update:modelValue="$emit('updateValue')"
@@ -544,7 +574,7 @@ defineEmits(['updateValue'])
544
574
  :density="density"
545
575
  :variant="variant"
546
576
  :clearable="clearable"
547
- :hide-details="hideDetails"
577
+ :hide-details="hideDetails ?? field.hideDetails"
548
578
  :single-line="singleLine"
549
579
  @updateValue="$emit('updateValue')"
550
580
  />
@@ -558,7 +588,7 @@ defineEmits(['updateValue'])
558
588
  :density="density"
559
589
  :variant="variant"
560
590
  :clearable="clearable"
561
- :hide-details="hideDetails"
591
+ :hide-details="hideDetails ?? field.hideDetails"
562
592
  :single-line="singleLine"
563
593
  :error-messages="inputErrors"
564
594
  @updateValue="$emit('updateValue')"
package/src/components/CrudFormList.vue CHANGED
@@ -62,7 +62,7 @@ const label = computed(() => {
62
62
  })
63
63
 
64
64
  const hasError = computed(() => {
65
- return (index:number) => {
65
+ return (index: number) => {
66
66
  const fieldListName = field.name + '.' + index
67
67
  return store.hasFieldListInputErrors(fieldListName)
68
68
  }
@@ -92,20 +92,23 @@ const {xs} = useDisplay()
92
92
 
93
93
  <v-card-title class="text-h5">{{ label }}</v-card-title>
94
94
 
95
+ <!--ACCORDION-->
95
96
  <v-card-text v-if="field.arrayObjectUI === 'accordion' || xs">
96
97
  <v-expansion-panels>
97
98
  <v-expansion-panel v-for="(item,index) in valueModel" :key="index">
98
99
 
99
100
  <v-expansion-panel-title>
100
101
  <v-chip class="mr-2" :color="hasError(index) ? 'red':'teal'">{{ index }}</v-chip>
101
- {{//@ts-ignore
102
+ {{
103
+ //@ts-ignore
102
104
  valueModel[index][field?.arrayObjectShowField ?? Object.keys(valueModel[index] as any)[0]]
103
105
  }}
104
106
 
105
107
  <template v-slot:actions="{expanded}">
106
- <v-icon>{{expanded ? "mdi-menu-down" : "mdi-menu-up"}}</v-icon>
108
+ <v-icon>{{ expanded ? "mdi-menu-down" : "mdi-menu-up" }}</v-icon>
107
109
 
108
- <v-btn v-if="!readonly" variant="text" @click="removeItem(index)" density="compact" class="text-red text--darken-3">
110
+ <v-btn v-if="!readonly" variant="text" @click="removeItem(index)" density="compact"
111
+ class="text-red text--darken-3">
109
112
  <v-icon>mdi-close</v-icon>
110
113
  </v-btn>
111
114
  </template>
@@ -113,23 +116,28 @@ const {xs} = useDisplay()
113
116
  </v-expansion-panel-title>
114
117
 
115
118
  <v-expansion-panel-text>
116
- <template v-for="key in Object.keys(item as Record<string, any>)" :key="key">
117
- <crud-form-field
118
- v-if="hasField(key)"
119
- :entity="entity"
120
- :field="getField(key)"
121
- v-model="(valueModel[index] as any)[key]"
122
- :readonly="readonly"
123
- :parentField="field.name"
124
- :index="index"
125
- :density="density"
126
- :variant="variant"
127
- :clearable="clearable"
128
- :hide-details="hideDetails"
129
- :single-line="singleLine"
130
- @updateValue="$emit('updateValue')"
131
- />
132
- </template>
119
+ <v-row>
120
+ <template v-for="key in Object.keys(item as Record<string, any>)" :key="key">
121
+ <v-col cols="12">
122
+ <crud-form-field
123
+ v-if="hasField(key)"
124
+ :entity="entity"
125
+ :field="getField(key)"
126
+ v-model="(valueModel[index] as any)[key]"
127
+ :readonly="readonly"
128
+ :parentField="field.name"
129
+ :index="index"
130
+ :density="density"
131
+ :variant="variant"
132
+ :clearable="clearable"
133
+ :hide-details="hideDetails"
134
+ :single-line="singleLine"
135
+ @updateValue="$emit('updateValue')"
136
+ />
137
+ </v-col>
138
+ </template>
139
+ </v-row>
140
+
133
141
  </v-expansion-panel-text>
134
142
 
135
143
  </v-expansion-panel>
@@ -140,15 +148,16 @@ const {xs} = useDisplay()
140
148
  </v-expansion-panels>
141
149
  </v-card-text>
142
150
 
143
-
151
+ <!--CHIPS-->
144
152
  <v-card-text v-else-if="field.arrayObjectUI === 'chips' ">
145
153
  <v-row dense>
146
154
  <v-col cols="12" sm="12" md="12">
147
155
  <v-card variant="flat">
148
- <v-card-text >
149
- <v-btn color="primary" rounded="xl" @click="addItem"
156
+ <v-card-text>
157
+ <v-btn color="primary" rounded="xl" @click="addItem"
150
158
  class="text-blue text--darken-3 float-left mt-1 mr-2">
151
- <v-icon>mdi-plus</v-icon> {{ label }}
159
+ <v-icon>mdi-plus</v-icon>
160
+ {{ label }}
152
161
  </v-btn>
153
162
 
154
163
 
@@ -159,12 +168,13 @@ const {xs} = useDisplay()
159
168
  >
160
169
 
161
170
  <v-chip v-for="(item,index) in valueModel" :key="index"
162
- :value="index" @click="menuSelect(item, index)"
163
- label class="pr-0" :color="indexSelected === index ? 'primary' : ''"
171
+ :value="index" @click="menuSelect(item, index)"
172
+ label class="pr-0" :color="indexSelected === index ? 'primary' : ''"
164
173
  >
165
- {{//@ts-ignore
166
- valueModel[index][field?.arrayObjectShowField ?? Object.keys(valueModel[index] as any)[0]] || (index)
167
- }}
174
+ {{
175
+ //@ts-ignore
176
+ valueModel[index][field?.arrayObjectShowField ?? Object.keys(valueModel[index] as any)[0]] || (index)
177
+ }}
168
178
 
169
179
  <template v-slot:append>
170
180
  <v-btn variant="text" class="ml-2" density="compact"
@@ -181,35 +191,40 @@ const {xs} = useDisplay()
181
191
  </v-col>
182
192
  <v-col cols="12" sm="12" md="12">
183
193
  <v-card v-if="itemSelected" variant="flat">
184
- <v-card-text >
185
- <template v-for="key in Object.keys(itemSelected as Record<string, any>)" :key="key">
186
- <crud-form-field
187
- v-if="hasField(key)"
188
- :entity="entity"
189
- :field="getField(key)"
190
- v-model="(itemSelected as any)[key]"
191
- :readonly="readonly"
192
- :parentField="field.name"
193
- :index="indexSelected"
194
- :density="density"
195
- :variant="variant"
196
- :clearable="clearable"
197
- :hide-details="hideDetails"
198
- :single-line="singleLine"
199
- @updateValue="$emit('updateValue')"
200
- />
201
- </template>
194
+ <v-card-text>
195
+ <v-row>
196
+ <template v-for="key in Object.keys(itemSelected as Record<string, any>)" :key="key">
197
+ <v-col cols="12">
198
+ <crud-form-field
199
+ v-if="hasField(key)"
200
+ :entity="entity"
201
+ :field="getField(key)"
202
+ v-model="(itemSelected as any)[key]"
203
+ :readonly="readonly"
204
+ :parentField="field.name"
205
+ :index="indexSelected"
206
+ :density="density"
207
+ :variant="variant"
208
+ :clearable="clearable"
209
+ :hide-details="hideDetails"
210
+ :single-line="singleLine"
211
+ @updateValue="$emit('updateValue')"
212
+ />
213
+ </v-col>
214
+ </template>
215
+ </v-row>
202
216
  </v-card-text>
203
217
  </v-card>
204
218
  </v-col>
205
219
  </v-row>
206
220
  </v-card-text>
207
221
 
222
+ <!--MENU-->
208
223
  <v-card-text v-else>
209
224
  <v-row>
210
225
  <v-col cols="12" sm="4" md="3">
211
226
  <v-card variant="outlined">
212
- <v-card-text >
227
+ <v-card-text>
213
228
  <v-list v-model="itemSelected" :style="{ maxHeight: menuMaxHeight, overflowY: 'auto' }">
214
229
  <v-list-item v-for="(item,index) in valueModel" :key="index" rounded="shaped"
215
230
  :value="item" @click="menuSelect(item, index)"
@@ -222,8 +237,9 @@ const {xs} = useDisplay()
222
237
  </template>
223
238
  <v-list-item-title>
224
239
  <v-chip class="mr-2" :color="hasError(index) ? 'red':'teal'">{{ index }}</v-chip>
225
- {{//@ts-ignore
226
- valueModel[index][field?.arrayObjectShowField ?? Object.keys(valueModel[index] as any)[0]]
240
+ {{
241
+ //@ts-ignore
242
+ valueModel[index][field?.arrayObjectShowField ?? Object.keys(valueModel[index] as any)[0]]
227
243
  }}
228
244
  </v-list-item-title>
229
245
  </v-list-item>
@@ -238,24 +254,28 @@ const {xs} = useDisplay()
238
254
  </v-col>
239
255
  <v-col cols="12" sm="8" md="9">
240
256
  <v-card v-if="itemSelected" variant="outlined">
241
- <v-card-text >
242
- <template v-for="key in Object.keys(itemSelected as Record<string, any>)" :key="key">
243
- <crud-form-field
244
- v-if="hasField(key)"
245
- :entity="entity"
246
- :field="getField(key)"
247
- v-model="(itemSelected as any)[key]"
248
- :readonly="readonly"
249
- :parentField="field.name"
250
- :index="indexSelected"
251
- :density="density"
252
- :variant="variant"
253
- :clearable="clearable"
254
- :hide-details="hideDetails"
255
- :single-line="singleLine"
256
- @updateValue="$emit('updateValue')"
257
- />
258
- </template>
257
+ <v-card-text>
258
+ <v-row>
259
+ <template v-for="key in Object.keys(itemSelected as Record<string, any>)" :key="key">
260
+ <v-col cols="12">
261
+ <crud-form-field
262
+ v-if="hasField(key)"
263
+ :entity="entity"
264
+ :field="getField(key)"
265
+ v-model="(itemSelected as any)[key]"
266
+ :readonly="readonly"
267
+ :parentField="field.name"
268
+ :index="indexSelected"
269
+ :density="density"
270
+ :variant="variant"
271
+ :clearable="clearable"
272
+ :hide-details="hideDetails"
273
+ :single-line="singleLine"
274
+ @updateValue="$emit('updateValue')"
275
+ />
276
+ </v-col>
277
+ </template>
278
+ </v-row>
259
279
  </v-card-text>
260
280
  </v-card>
261
281
  </v-col>
package/src/components/CrudList.vue CHANGED
@@ -26,7 +26,7 @@ const {entity} = defineProps({
26
26
 
27
27
  const {
28
28
  loading, itemsPerPage, page, sortBy, search, totalItems, items,
29
- doPaginate, filters, applyFilters, clearFilters
29
+ doPaginate, filters, applyFilters, clearFilters, paginationError
30
30
  } = useCrud(entity)
31
31
 
32
32
  // Usar el composable de columnas
@@ -61,6 +61,19 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
61
61
  @update:options="doPaginate"
62
62
  >
63
63
 
64
+ <template v-slot:no-data>
65
+ <v-alert
66
+ v-if="paginationError"
67
+ variant="tonal"
68
+ class="w-100 ma-2"
69
+ style="width: 100%; min-width: 100%"
70
+ prominent
71
+ type="error"
72
+ :text="te(paginationError) ? t(paginationError) : paginationError"
73
+ />
74
+ <v-alert v-else variant="tonal" class="w-100 ma-2 " type="info" :text="te('crud.noData') ? t('crud.noData') : 'No data' " />
75
+ </template>
76
+
64
77
  <template v-slot:bottom>
65
78
  <v-data-table-footer :class="entity.footerClass"
66
79
  :items-per-page-options="[5, 10, 20, 50]"
@@ -80,12 +93,12 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
80
93
 
81
94
  <crud-import-button
82
95
  :entity="entity"
83
- @import="v => $emit('import', v)"
96
+ @import="(v:any) => $emit('import', v)"
84
97
  />
85
98
 
86
99
  <crud-export-button
87
100
  :entity="entity"
88
- @export="v => $emit('export',v)"
101
+ @export="(v:any) => $emit('export',v)"
89
102
  />
90
103
 
91
104
  <crud-group-by-button
package/src/composables/UseCrud.ts CHANGED
@@ -18,6 +18,14 @@ export function useCrud(entity: IEntityCrud) {
18
18
  }
19
19
  })
20
20
 
21
+ const paginationError = computed({
22
+ get() {
23
+ return store.paginationError
24
+ }, set(value) {
25
+ store.setPaginationError(value)
26
+ }
27
+ })
28
+
21
29
  const dialog = computed({
22
30
  get() {
23
31
  return store.dialog
@@ -148,6 +156,7 @@ export function useCrud(entity: IEntityCrud) {
148
156
 
149
157
  async function doPaginate() {
150
158
  store.setLoading(true)
159
+ store.setPaginationError("")
151
160
  try {
152
161
 
153
162
  const r: IDraxPaginateResult<any> = await entity?.provider.paginate({
@@ -160,7 +169,13 @@ export function useCrud(entity: IEntityCrud) {
160
169
  })
161
170
  store.setItems(r.items)
162
171
  store.setTotalItems(r.total)
163
- } catch (e) {
172
+ } catch (e: any) {
173
+ store.setItems([])
174
+ store.setTotalItems(0)
175
+ if(e && e.message){
176
+ store.setPaginationError(e.message)
177
+
178
+ }
164
179
  console.error("Error paginating", e)
165
180
  } finally {
166
181
  store.setLoading(false)
@@ -401,7 +416,7 @@ export function useCrud(entity: IEntityCrud) {
401
416
  return {
402
417
  doPaginate, doExport, doUpdate, doCreate, doDelete,
403
418
  onView, onCreate, onEdit, onDelete, onCancel, onSubmit, resetCrudStore,
404
- operation, dialog, form, notify, error, message, formValid,
419
+ operation, dialog, form, notify, error, paginationError, message, formValid,
405
420
  loading, itemsPerPage, page, sortBy, search, totalItems, items,
406
421
  prepareFilters, filters, clearFilters, applyFilters,
407
422
  exportFiles, exportLoading, exportListVisible, exportError,
package/src/stores/UseCrudStore.ts CHANGED
@@ -11,6 +11,7 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
11
11
  notify: false as boolean,
12
12
  message: '' as string,
13
13
  error: '' as string,
14
+ paginationError: '' as string,
14
15
  filters: [] as IDraxFieldFilter[],
15
16
  items: [] as any[],
16
17
  totalItems: 0 as number,
@@ -139,6 +140,9 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
139
140
 
140
141
  clearVisibleColumns() {
141
142
  this.visibleColumns = []
143
+ },
144
+ setPaginationError(val: string){
145
+ this.paginationError = val
142
146
  }
143
147
  }
144
148