adminforth 2.27.0-next.8 → 2.27.0-test.1

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 (52) hide show
  1. package/commands/callTsProxy.js +10 -5
  2. package/commands/proxy.ts +18 -10
  3. package/dist/commands/proxy.js +14 -10
  4. package/dist/commands/proxy.js.map +1 -1
  5. package/dist/dataConnectors/baseConnector.d.ts.map +1 -1
  6. package/dist/dataConnectors/baseConnector.js +8 -1
  7. package/dist/dataConnectors/baseConnector.js.map +1 -1
  8. package/dist/dataConnectors/clickhouse.js +1 -1
  9. package/dist/dataConnectors/clickhouse.js.map +1 -1
  10. package/dist/dataConnectors/mysql.js +1 -1
  11. package/dist/dataConnectors/mysql.js.map +1 -1
  12. package/dist/dataConnectors/sqlite.d.ts.map +1 -1
  13. package/dist/dataConnectors/sqlite.js +2 -0
  14. package/dist/dataConnectors/sqlite.js.map +1 -1
  15. package/dist/modules/configValidator.d.ts.map +1 -1
  16. package/dist/modules/configValidator.js +16 -9
  17. package/dist/modules/configValidator.js.map +1 -1
  18. package/dist/modules/restApi.d.ts.map +1 -1
  19. package/dist/modules/restApi.js +77 -4
  20. package/dist/modules/restApi.js.map +1 -1
  21. package/dist/modules/styles.js +1 -1
  22. package/dist/spa/package-lock.json +41 -0
  23. package/dist/spa/package.json +3 -0
  24. package/dist/spa/pnpm-lock.yaml +38 -0
  25. package/dist/spa/src/afcl/Select.vue +5 -1
  26. package/dist/spa/src/components/CallActionWrapper.vue +1 -1
  27. package/dist/spa/src/components/ColumnValueInput.vue +16 -3
  28. package/dist/spa/src/components/ColumnValueInputWrapper.vue +25 -2
  29. package/dist/spa/src/components/Filters.vue +23 -2
  30. package/dist/spa/src/components/GroupsTable.vue +9 -6
  31. package/dist/spa/src/components/ResourceForm.vue +100 -6
  32. package/dist/spa/src/components/ResourceListTable.vue +15 -2
  33. package/dist/spa/src/components/ShowTable.vue +1 -1
  34. package/dist/spa/src/components/ThreeDotsMenu.vue +20 -3
  35. package/dist/spa/src/types/Back.ts +16 -1
  36. package/dist/spa/src/types/Common.ts +19 -4
  37. package/dist/spa/src/utils/createEditUtils.ts +65 -0
  38. package/dist/spa/src/utils/index.ts +2 -1
  39. package/dist/spa/src/utils/utils.ts +38 -5
  40. package/dist/spa/src/utils.ts +2 -1
  41. package/dist/spa/src/views/CreateView.vue +22 -49
  42. package/dist/spa/src/views/EditView.vue +20 -38
  43. package/dist/spa/src/views/ListView.vue +9 -2
  44. package/dist/spa/src/views/ShowView.vue +62 -12
  45. package/dist/spa/tsconfig.app.json +1 -0
  46. package/dist/types/Back.d.ts +16 -1
  47. package/dist/types/Back.d.ts.map +1 -1
  48. package/dist/types/Back.js.map +1 -1
  49. package/dist/types/Common.d.ts +24 -4
  50. package/dist/types/Common.d.ts.map +1 -1
  51. package/dist/types/Common.js.map +1 -1
  52. package/package.json +4 -3
@@ -8,7 +8,7 @@ import { Dropdown } from 'flowbite';
8
8
  import adminforth, { useAdminforth } from '../adminforth';
9
9
  import sanitizeHtml from 'sanitize-html'
10
10
  import debounce from 'debounce';
11
- import type { AdminForthResourceColumnInputCommon, Predicate } from '@/types/Common';
11
+ import type { AdminForthActionFront, AdminForthResourceColumnInputCommon, AdminForthResourceCommon, Predicate } from '@/types/Common';
12
12
  import { i18nInstance } from '../i18n'
13
13
  import { useI18n } from 'vue-i18n';
14
14
  import { onBeforeRouteLeave } from 'vue-router';
@@ -193,7 +193,8 @@ export function applyRegexValidation(value: any, validation: ValidationObject[]
193
193
  if ( validation?.length ) {
194
194
  const validationArray = validation;
195
195
  for (let i = 0; i < validationArray.length; i++) {
196
- if (validationArray[i].regExp) {
196
+ const regExpPattern = validationArray[i].regExp;
197
+ if (regExpPattern) {
197
198
  let flags = '';
198
199
  if (validationArray[i].caseSensitive) {
199
200
  flags += 'i';
@@ -205,7 +206,7 @@ export function applyRegexValidation(value: any, validation: ValidationObject[]
205
206
  flags += 'g';
206
207
  }
207
208
 
208
- const regExp = new RegExp(validationArray[i].regExp, flags);
209
+ const regExp = new RegExp(regExpPattern, flags);
209
210
  if (value === undefined || value === null) {
210
211
  value = '';
211
212
  }
@@ -768,6 +769,7 @@ export async function executeCustomBulkAction({
768
769
  onError,
769
770
  setLoadingState,
770
771
  confirmMessage,
772
+ resource,
771
773
  }: {
772
774
  actionId: string | number | undefined,
773
775
  resourceId: string,
@@ -777,6 +779,7 @@ export async function executeCustomBulkAction({
777
779
  onError?: (error: string) => void,
778
780
  setLoadingState?: (loading: boolean) => void,
779
781
  confirmMessage?: string,
782
+ resource?: AdminForthResourceCommon,
780
783
  }): Promise<any> {
781
784
  if (!recordIds || recordIds.length === 0) {
782
785
  if (onError) {
@@ -798,7 +801,38 @@ export async function executeCustomBulkAction({
798
801
  setLoadingState?.(true);
799
802
 
800
803
  try {
801
- // Execute action for all records in parallel using Promise.all
804
+ const action = resource?.options?.actions?.find((a: any) => a.id === actionId) as AdminForthActionFront | undefined;
805
+
806
+ if (action?.hasBulkHandler && action?.showIn?.bulkButton) {
807
+ const result = await callAdminForthApi({
808
+ path: '/start_custom_bulk_action',
809
+ method: 'POST',
810
+ body: {
811
+ resourceId,
812
+ actionId,
813
+ recordIds,
814
+ extra: extra || {},
815
+ }
816
+ });
817
+
818
+ if (result?.ok) {
819
+ if (onSuccess) {
820
+ await onSuccess([result]);
821
+ }
822
+ return { ok: true, results: [result] };
823
+ }
824
+
825
+ if (result?.error) {
826
+ if (onError) {
827
+ onError(result.error);
828
+ }
829
+ return { error: result.error };
830
+ }
831
+
832
+ return result;
833
+ }
834
+
835
+ // Per-record parallel calls (legacy path)
802
836
  const results = await Promise.all(
803
837
  recordIds.map(recordId =>
804
838
  callAdminForthApi({
@@ -813,7 +847,6 @@ export async function executeCustomBulkAction({
813
847
  })
814
848
  )
815
849
  );
816
-
817
850
  const lastResult = results[results.length - 1];
818
851
  if (lastResult?.redirectUrl) {
819
852
  if (lastResult.redirectUrl.includes('target=_blank')) {
@@ -1,2 +1,3 @@
1
1
  export * from './utils/utils';
2
- export * from './utils/listUtils';
2
+ export * from './utils/listUtils';
3
+ export * from './utils/createEditUtils';
@@ -20,11 +20,9 @@
20
20
  <button
21
21
  @click="() => saveRecord()"
22
22
  class="af-save-button h-[34px] af-button-shadow flex items-center py-1 px-3 text-sm font-medium rounded-default text-lightCreateViewSaveButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewSaveButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewSaveButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover disabled:opacity-50 gap-1"
23
- :disabled="saving || (validating && !isValid)"
23
+ :disabled="saving || (validatingMode && !isValid) || resourceFormRef?.isValidating"
24
24
  >
25
- <svg v-if="saving"
26
- aria-hidden="true" class="w-4 h-4 mr-1 text-gray-200 animate-spin dark:text-gray-600 fill-lightCreateViewSaveButtonText" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/></svg>
27
-
25
+ <Spinner v-if="saving || resourceFormRef?.isValidating" class="w-4 h-4" />
28
26
  <IconFloppyDiskSolid v-else class="w-4 h-4" />
29
27
  {{ $t('Save') }}
30
28
  </button>
@@ -54,7 +52,7 @@
54
52
  :resource="coreStore.resource!"
55
53
  @update:record="onUpdateRecord"
56
54
  @update:isValid="isValid = $event"
57
- :validating="validating"
55
+ :validatingMode="validatingMode"
58
56
  :source="'create'"
59
57
  :readonlyColumns="readonlyColumns"
60
58
  >
@@ -81,18 +79,18 @@ import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
81
79
  import { useCoreStore } from '@/stores/core';
82
80
  import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf, compareOldAndNewRecord, onBeforeRouteLeaveCreateEditViewGuard, leaveGuardActiveClass, formatComponent } from '@/utils';
83
81
  import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
84
- import { onMounted, onBeforeMount, onBeforeUnmount, ref, watch, nextTick } from 'vue';
85
- import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
86
- import { computed } from 'vue';
82
+ import { onMounted, onBeforeMount, onBeforeUnmount, ref } from 'vue';
83
+ import { useRoute, useRouter } from 'vue-router';
87
84
  import { showErrorTost } from '@/composables/useFrontendApi';
88
85
  import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
89
86
  import { useAdminforth } from '@/adminforth';
90
87
  import { useI18n } from 'vue-i18n';
91
88
  import { type AdminForthComponentDeclaration, type AdminForthComponentDeclarationFull } from '@/types/Common.js';
92
- import type { AdminForthResourceColumn } from '@/types/Back';
89
+ import { saveRecordPreparations } from '@/utils';
90
+ import { Spinner } from '@/afcl'
93
91
 
94
92
  const isValid = ref(false);
95
- const validating = ref(false);
93
+ const validatingMode = ref(false);
96
94
 
97
95
  const loading = ref(true);
98
96
  const saving = ref(false);
@@ -195,28 +193,22 @@ onMounted(async () => {
195
193
  });
196
194
 
197
195
  async function saveRecord() {
198
- if (!isValid.value) {
199
- validating.value = true;
200
- await nextTick();
201
- scrollToInvalidField();
202
- return;
203
- } else {
204
- validating.value = false;
205
- }
196
+ const interceptorsResult = await saveRecordPreparations(
197
+ 'create',
198
+ validatingMode,
199
+ resourceFormRef,
200
+ isValid,
201
+ t,
202
+ saving,
203
+ runSaveInterceptors,
204
+ record,
205
+ coreStore,
206
+ route
207
+ );
208
+
206
209
  const requiredColumns = coreStore.resource?.columns.filter(c => c.required?.create === true) || [];
207
210
  const requiredColumnsToSkip = requiredColumns.filter(c => checkShowIf(c, record.value, coreStore.resource?.columns || []) === false);
208
- saving.value = true;
209
- const interceptorsResult = await runSaveInterceptors({
210
- action: 'create',
211
- values: record.value,
212
- resource: coreStore.resource,
213
- resourceId: route.params.resourceId as string,
214
- });
215
- if (!interceptorsResult.ok) {
216
- saving.value = false;
217
- if (interceptorsResult.error) showErrorTost(interceptorsResult.error);
218
- return;
219
- }
211
+
220
212
  const interceptorConfirmationResult = (interceptorsResult.extra as Record<string, any>)?.confirmationResult;
221
213
  const response = await callAdminForthApi({
222
214
  method: 'POST',
@@ -254,23 +246,4 @@ async function saveRecord() {
254
246
  saving.value = false;
255
247
  }
256
248
 
257
- function scrollToInvalidField() {
258
- let columnsWithErrors: {column: AdminForthResourceColumn, error: string}[] = [];
259
- for (const column of resourceFormRef.value?.editableColumns || []) {
260
- const error = resourceFormRef.value?.columnError(column);
261
- if (error) {
262
- columnsWithErrors.push({column, error});
263
- }
264
- }
265
- const errorMessage = t('Failed to save. Please fix errors for the following fields:') + '<ul class="mt-2 list-disc list-inside">' + columnsWithErrors.map(c => `<li><strong>${c.column.label || c.column.name}</strong>: ${c.error}</li>`).join('') + '</ul>';
266
- alert({
267
- messageHtml: errorMessage,
268
- variant: 'danger'
269
- });
270
- const firstInvalidElement = document.querySelector('.af-invalid-field-message');
271
- if (firstInvalidElement) {
272
- firstInvalidElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
273
- }
274
- }
275
-
276
249
  </script>
@@ -19,9 +19,10 @@
19
19
  <button
20
20
  @click="() => saveRecord()"
21
21
  class="flex items-center h-[34px] af-button-shadow py-1 px-3 text-sm font-medium rounded-default text-lightEditViewSaveButtonText focus:outline-none bg-lightEditViewButtonBackground rounded border border-lightEditViewButtonBorder hover:bg-lightEditViewButtonBackgroundHover hover:text-lightEditViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewButtonFocusRing dark:focus:ring-darkEditViewButtonFocusRing dark:bg-darkEditViewButtonBackground dark:text-darkEditViewSaveButtonText dark:border-darkEditViewButtonBorder dark:hover:text-darkEditViewSaveButtonTextHover dark:hover:bg-darkEditViewButtonBackgroundHover disabled:opacity-50 gap-1"
22
- :disabled="saving || (validating && !isValid)"
22
+ :disabled="saving || (validatingMode && !isValid) || resourceFormRef?.isValidating"
23
23
  >
24
- <IconFloppyDiskSolid class="w-4 h-4" />
24
+ <Spinner v-if="saving || resourceFormRef?.isValidating" class="w-4 h-4" />
25
+ <IconFloppyDiskSolid v-else class="w-4 h-4" />
25
26
  {{ $t('Save') }}
26
27
  </button>
27
28
 
@@ -50,7 +51,7 @@
50
51
  :adminUser="coreStore.adminUser"
51
52
  @update:record="onUpdateRecord"
52
53
  @update:isValid="isValid = $event"
53
- :validating="validating"
54
+ :validatingMode="validatingMode"
54
55
  :source="'edit'"
55
56
  >
56
57
  </ResourceForm>
@@ -85,13 +86,15 @@ import { useI18n } from 'vue-i18n';
85
86
  import { formatComponent } from '@/utils';
86
87
  import { type AdminForthComponentDeclaration, type AdminForthComponentDeclarationFull } from '@/types/Common.js';
87
88
  import type { AdminForthResourceColumn } from '@/types/Back';
89
+ import { scrollToInvalidField, saveRecordPreparations } from '@/utils';
90
+ import { Spinner } from '@/afcl'
88
91
 
89
92
  const { t } = useI18n();
90
93
  const coreStore = useCoreStore();
91
94
  const { clearSaveInterceptors, runSaveInterceptors, alert, confirm } = useAdminforth();
92
95
 
93
96
  const isValid = ref(false);
94
- const validating = ref(false);
97
+ const validatingMode = ref(false);
95
98
 
96
99
  const route = useRoute();
97
100
  const router = useRouter();
@@ -180,22 +183,20 @@ onMounted(async () => {
180
183
  });
181
184
 
182
185
  async function saveRecord() {
183
- if (!isValid.value) {
184
- validating.value = true;
185
- await nextTick();
186
- scrollToInvalidField();
187
- return;
188
- } else {
189
- validating.value = false;
190
- }
191
186
 
192
- saving.value = true;
193
- const interceptorsResult = await runSaveInterceptors({
194
- action: 'edit',
195
- values: record.value,
196
- resource: coreStore.resource,
197
- resourceId: route.params.resourceId as string,
198
- });
187
+ const interceptorsResult = await saveRecordPreparations(
188
+ 'edit',
189
+ validatingMode,
190
+ resourceFormRef,
191
+ isValid,
192
+ t,
193
+ saving,
194
+ runSaveInterceptors,
195
+ record,
196
+ coreStore,
197
+ route
198
+ );
199
+
199
200
  if (!interceptorsResult.ok) {
200
201
  saving.value = false;
201
202
  if (interceptorsResult.error) showErrorTost(interceptorsResult.error);
@@ -256,23 +257,4 @@ async function saveRecord() {
256
257
  saving.value = false;
257
258
  }
258
259
 
259
- function scrollToInvalidField() {
260
- let columnsWithErrors: {column: AdminForthResourceColumn, error: string}[] = [];
261
- for (const column of resourceFormRef.value?.editableColumns || []) {
262
- const error = resourceFormRef.value?.columnError(column);
263
- if (error) {
264
- columnsWithErrors.push({column, error});
265
- }
266
- }
267
- const errorMessage = t('Failed to save. Please fix errors for the following fields:') + '<ul class="mt-2 list-disc list-inside">' + columnsWithErrors.map(c => `<li><strong>${c.column.label || c.column.name}</strong>: ${c.error}</li>`).join('') + '</ul>';
268
- alert({
269
- messageHtml: errorMessage,
270
- variant: 'danger'
271
- });
272
- const firstInvalidElement = document.querySelector('.af-invalid-field-message');
273
- if (firstInvalidElement) {
274
- firstInvalidElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
275
- }
276
- }
277
-
278
260
  </script>
@@ -98,7 +98,13 @@
98
98
  <button
99
99
  :key="action.id"
100
100
  @click="startCustomBulkActionInner(action.id!)"
101
- class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-lightListViewButtonText focus:outline-none bg-lightListViewButtonBackground rounded-default border border-lightListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover"
101
+ class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-lightListViewButtonText
102
+ focus:outline-none bg-lightListViewButtonBackground rounded-default border h-[34px]
103
+ border-lightListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover
104
+ hover:text-lightListViewButtonTextHover focus:z-10 focus:ring-4 af-button-shadow
105
+ focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing
106
+ dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder
107
+ dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover"
102
108
  >
103
109
  <component
104
110
  v-if="action.icon && !customActionLoadingStates[action.id!]"
@@ -344,6 +350,7 @@ async function startCustomBulkActionInner(actionId: string | number) {
344
350
  resourceId: route.params.resourceId as string,
345
351
  recordIds: checkboxes.value,
346
352
  confirmMessage: action?.bulkConfirmationMessage,
353
+ resource: coreStore.resource!,
347
354
  setLoadingState: (loading: boolean) => {
348
355
  customActionLoadingStates.value[actionId] = loading;
349
356
  },
@@ -354,7 +361,7 @@ async function startCustomBulkActionInner(actionId: string | number) {
354
361
  const successResults = results.filter(r => r?.successMessage);
355
362
  if (successResults.length > 0) {
356
363
  alert({
357
- message: action?.bulkSuccessMessage || `${successResults.length} out of ${results.length} items processed successfully`,
364
+ message: action?.bulkSuccessMessage ? action.bulkSuccessMessage : action?.hasBulkHandler ? successResults[0].successMessage : `${successResults.length} out of ${results.length} items processed successfully`,
358
365
  variant: 'success'
359
366
  });
360
367
  }
@@ -12,7 +12,7 @@
12
12
  <BreadcrumbsWithButtons>
13
13
  <template v-if="coreStore.resource?.options?.actions">
14
14
 
15
- <template v-for="action in coreStore.resource.options.actions.filter(a => a.showIn?.showButton)" :key="action.id">
15
+ <div class="flex gap-1" v-for="action in coreStore.resource.options.actions.filter(a => a.showIn?.showButton)" :key="action.id">
16
16
  <component
17
17
  :is="action?.customComponent ? getCustomComponent(formatComponent(action.customComponent)) : CallActionWrapper"
18
18
  :meta="action.customComponent ? formatComponent(action.customComponent).meta : undefined"
@@ -45,7 +45,7 @@
45
45
  {{ action.name }}
46
46
  </button>
47
47
  </component>
48
- </template>
48
+ </div>
49
49
  </template>
50
50
  <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
51
51
  :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
@@ -85,14 +85,52 @@
85
85
  :adminUser="coreStore.adminUser"
86
86
  />
87
87
 
88
- <div v-if="loading" role="status" class="max-w-sm animate-pulse">
89
- <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
90
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
91
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
92
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[330px] mb-2.5"></div>
93
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[300px] mb-2.5"></div>
94
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
95
- <span class="sr-only">{{ $t('Loading...') }}</span>
88
+ <div
89
+ v-if="loading"
90
+ role="status"
91
+ class="animate-pulse overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow"
92
+ >
93
+ <div
94
+ v-if="groups && groups.length > 0"
95
+ class="text-md font-semibold px-6 py-3 flex flex-1 items-center bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground dark:text-darkShowTableHeadingText rounded-t-lg border-b border-lightShowTableBodyBorder dark:border-darkShowTableBodyBorder"
96
+ >
97
+ <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded-full w-32"></div>
98
+ </div>
99
+
100
+ <table class="w-full text-sm text-left table-fixed">
101
+ <thead class="bg-lightShowTableUnderHeadingBackground dark:bg-darkShowTableUnderHeadingBackground block md:table-row-group">
102
+ <tr>
103
+ <th scope="col" class="px-6 py-3 text-xs uppercase hidden md:w-52 md:table-cell text-lightShowTableUnderHeadingText dark:text-darkShowTableUnderHeadingText">
104
+ {{ $t('Field') }}
105
+ </th>
106
+ <th scope="col" class="px-6 py-3 text-xs uppercase hidden md:table-cell text-lightShowTableUnderHeadingText dark:text-darkShowTableUnderHeadingText">
107
+ {{ $t('Value') }}
108
+ </th>
109
+ </tr>
110
+ </thead>
111
+
112
+ <tbody>
113
+ <tr
114
+ v-for="i in skeletonRowsCount"
115
+ :key="i"
116
+ class="bg-lightShowTablesBodyBackground border-t border-lightShowTableBodyBorder dark:bg-darkShowTablesBodyBackground dark:border-darkShowTableBodyBorder block md:table-row"
117
+ >
118
+ <td class="px-6 py-[15.5px] relative block md:table-cell pb-0 md:pb-[15.5px]">
119
+ <div class="md:absolute md:inset-0 flex items-center px-6 py-[15.5px]">
120
+ <div class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full w-24"></div>
121
+ </div>
122
+ </td>
123
+
124
+ <td class="px-6 py-[15.5px] whitespace-pre-wrap block md:table-cell">
125
+ <div class="flex items-center h-full min-h-[21px]">
126
+ <div class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full w-full max-w-[280px]"></div>
127
+ </div>
128
+ </td>
129
+ </tr>
130
+ </tbody>
131
+ </table>
132
+
133
+ <span class="sr-only">{{ $t('Loading...') }}</span>
96
134
  </div>
97
135
  <div
98
136
  v-else-if="coreStore.record"
@@ -161,7 +199,7 @@ import ShowTable from '@/components/ShowTable.vue';
161
199
  import { useAdminforth } from '@/adminforth';
162
200
  import { useI18n } from 'vue-i18n';
163
201
  import { getIcon } from '@/utils';
164
- import { type AdminForthComponentDeclarationFull, type AdminForthResourceColumnCommon, type FieldGroup } from '@/types/Common.js';
202
+ import { type AdminForthComponentDeclarationFull, type AdminForthResourceColumnCommon, type FieldGroup} from '@/types/Common.js';
165
203
  import CallActionWrapper from '@/components/CallActionWrapper.vue'
166
204
 
167
205
  const route = useRoute();
@@ -177,6 +215,18 @@ const customActions = computed(() => {
177
215
  return coreStore.resource?.options?.actions?.filter((a: any) => a.showIn?.showThreeDotsMenu) || [];
178
216
  });
179
217
 
218
+ const skeletonRowsCount = computed(() => {
219
+ const allCols = coreStore.resource?.columns || [];
220
+
221
+ const isEnabledInConfig = (col: any) => {
222
+ return col.showIn?.list !== false;
223
+ };
224
+
225
+ const finalCount = allCols.filter(isEnabledInConfig).length;
226
+
227
+ return finalCount > 0 ? finalCount : 10;
228
+ });
229
+
180
230
  onMounted(async () => {
181
231
  loading.value = true;
182
232
  await coreStore.fetchResourceFull({
@@ -216,7 +266,7 @@ const groups = computed(() => {
216
266
  });
217
267
 
218
268
  const allColumns = computed(() => {
219
- return coreStore.resource?.columns.filter(col => col.showIn?.show);
269
+ return coreStore.resource?.columns?.filter(col => col.showIn?.show);
220
270
  });
221
271
 
222
272
  const otherColumns = computed(() => {
@@ -7,6 +7,7 @@
7
7
  "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
8
8
  "ignoreDeprecations": "6.0",
9
9
  "baseUrl": ".",
10
+ "ignoreDeprecations": "6.0",
10
11
  "paths": {
11
12
  "@/*": ["./src/*"]
12
13
  }
@@ -1205,6 +1205,19 @@ export interface AdminForthActionInput {
1205
1205
  standardAllowedActions: AllowedActions;
1206
1206
  }) => boolean;
1207
1207
  url?: string;
1208
+ bulkHandler?: (params: {
1209
+ adminforth: IAdminForth;
1210
+ resource: AdminForthResource;
1211
+ recordIds: (string | number)[];
1212
+ adminUser: AdminUser;
1213
+ response: IAdminForthHttpResponse;
1214
+ extra?: HttpExtra;
1215
+ tr: ITranslateFunction;
1216
+ }) => Promise<{
1217
+ ok: boolean;
1218
+ error?: string;
1219
+ successMessage?: string;
1220
+ }>;
1208
1221
  action?: (params: {
1209
1222
  adminforth: IAdminForth;
1210
1223
  resource: AdminForthResource;
@@ -1212,7 +1225,7 @@ export interface AdminForthActionInput {
1212
1225
  adminUser: AdminUser;
1213
1226
  response: IAdminForthHttpResponse;
1214
1227
  extra?: HttpExtra;
1215
- tr: Function;
1228
+ tr: ITranslateFunction;
1216
1229
  }) => Promise<{
1217
1230
  ok: boolean;
1218
1231
  error?: string;
@@ -1597,6 +1610,8 @@ export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourc
1597
1610
  /**
1598
1611
  * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
1599
1612
  * using checkboxes.
1613
+ * @deprecated Since 2.26.5. Will be removed in 3.0.0. Use `actions` instead.
1614
+
1600
1615
  */
1601
1616
  bulkActions?: Array<AdminForthBulkAction>;
1602
1617
  /**