adminforth 2.4.0-next.125 → 2.4.0-next.127

package/dist/spa/src/afcl/Table.vue

@@ -44,9 +44,9 @@
     <i18n-t 
       keypath="Showing {from} to {to} of {total}" tag="span" class="afcl-table-pagination-text text-sm font-normal text-lightTablePaginationText dark:text-darkTablePaginationText mb-4 md:mb-0 block w-full md:inline md:w-auto"
     >
-      <template #from><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min((currentPage - 1) * props.pageSize + 1, props.data.length) }}</span></template>
-      <template #to><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min(currentPage * props.pageSize, props.data.length) }}</span></template>
-      <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ props.data.length }}</span></template>
+      <template #from><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min((currentPage - 1) * props.pageSize + 1, dataResult.total) }}</span></template>
+      <template #to><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min(currentPage * props.pageSize, dataResult.total) }}</span></template>
+      <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ dataResult.total }}</span></template>
     </i18n-t>
 
     <ul class="afcl-table-pagination-list inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
@@ -74,6 +74,8 @@
 
 <script setup lang="ts">
   import { ref, type Ref, computed } from 'vue';
+  import { asyncComputed } from '@vueuse/core';
+  import { IconArrowRightOutline, IconArrowLeftOutline } from '@iconify-prerendered/vue-flowbite';
 
   const props = withDefaults(
     defineProps<{
@@ -83,7 +85,7 @@
       }[],
       data: {
         [key: string]: any,
-      }[],
+      }[] | ((offset: number, limit: number) => Promise<{data: {[key: string]: any}[], total: number}>),
       evenHighlights?: boolean,
       pageSize?: number,
     }>(), {
@@ -94,14 +96,21 @@
 
   const currentPage = ref(1);
 
+  const dataResult = asyncComputed( async() => {
+    if (typeof props.data === 'function') {
+      return await props.data(currentPage.value, props.pageSize);
+    }
+    const start = (currentPage.value - 1) * props.pageSize;
+    const end = start + props.pageSize;
+    return { data: props.data.slice(start, end), total: props.data.length };
+  });
+
   const totalPages = computed(() => {
-    return Math.ceil(props.data.length / props.pageSize);
+    return dataResult.value?.total ? Math.ceil(dataResult.value.total / props.pageSize) : 1;
   });
 
-  const dataPage = computed(() => {
-    const start = (currentPage.value - 1) * props.pageSize;
-    const end = start + props.pageSize;
-    return props.data.slice(start, end);
+  const dataPage = asyncComputed( async() => {
+    return dataResult.value.data;
   });
 
   function switchPage(p: number) {

package/dist/spa/src/components/ThreeDotsMenu.vue

@@ -21,8 +21,9 @@
                 'pointer-events-none': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
                 'opacity-50': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
                 'cursor-not-allowed': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
-              }">
-              <component :is="getCustomComponent(item)" 
+              }"
+              @click="injectedComponentClick(i)">
+              <component :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)" 
                 :meta="item.meta" 
                 :resource="coreStore.resource" 
                 :adminUser="coreStore.adminUser"
@@ -75,10 +76,12 @@ import adminforth from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import type { AdminForthComponentDeclarationFull, AdminForthBulkActionCommon, AdminForthActionInput } from '@/types/Common.js';
+import { ref, type ComponentPublicInstance } from 'vue';
 
 const route = useRoute();
 const coreStore = useCoreStore();
 const router = useRouter();
+const threeDotsDropdownItemsRefs = ref<Array<ComponentPublicInstance | null>>([]);
 
 const props = defineProps({
   threeDotsDropdownItems: Array<AdminForthComponentDeclarationFull>,
@@ -95,6 +98,12 @@ const props = defineProps({
 
 const emit = defineEmits(['startBulkAction']);
 
+function setComponentRef(el: ComponentPublicInstance | null, index: number) {
+  if (el) {
+    threeDotsDropdownItemsRefs.value[index] = el;
+  }
+}
+
 async function handleActionClick(action: AdminForthActionInput) {
   adminforth.list.closeThreeDotsDropdown();
   
@@ -151,4 +160,11 @@ function startBulkAction(actionId: string) {
   adminforth.list.closeThreeDotsDropdown();
   emit('startBulkAction', actionId);
 }
+
+async function injectedComponentClick(index: number) {
+  const componentRef = threeDotsDropdownItemsRefs.value[index];
+  if (componentRef && 'click' in componentRef) {
+    (componentRef as any).click?.();
+  }
+}
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.4.0-next.125",
+  "version": "2.4.0-next.127",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",