adminforth 3.35.0 → 4.0.0

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

@@ -1,7 +1,7 @@
 <template>
   <!-- table -->
-  <div class="relative shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-auto overscroll-x-contain border dark:border-gray-700"
-    :class="{'rounded-default': !noRoundings}"
+  <div class="relative shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-auto overscroll-x-contain border border-lightListBorder bg-lightListTable dark:border-darkListBorder dark:bg-darkListTable"
+    :class="{'rounded-lg': !noRoundings}"
     :style="isVirtualScrollEnabled ? { maxHeight: `${containerHeight}px` } : {}"
     @scroll="handleScroll"
     ref="containerRef"
@@ -25,7 +25,7 @@
       <tbody>
         <!-- table header -->
         <tr :class="HEADER_ROW_CLASSES">
-          <td scope="col" class="list-table-header-cell p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
+          <td scope="col" class="list-table-header-cell px-4 py-2.5 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
             <Checkbox
               :modelValue="allFromThisPageChecked"
               :disabled="!rows || !rows.length"
@@ -39,33 +39,26 @@
             v-for="c in columnsListed"
             ref="headerRefs"
             scope="col"
-            class="list-table-header-cell px-2 md:px-3 lg:px-6 py-3"
+            class="list-table-header-cell px-2 md:px-3 lg:px-4 py-2.5"
             :class="[c.listCssClass, {'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}]"
           >
           
             <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
-                class="flex items-center font-semibold" :class="{'cursor-pointer':c.sortable}">
+                class="flex items-center font-medium whitespace-nowrap" :class="{'cursor-pointer':c.sortable}">
               {{ c.label }}
 
               <div v-if="c.sortable">
-                <svg 
-                  v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3 h-3 ms-1.5"
-                  fill='currentColor'
-                  :class="{'rotate-180':descArr.includes(c.name)}" viewBox="0 0 24 24"
-                >
-                  <path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 0z"/>
-                </svg>
-                <svg 
-                  v-else class="w-3 h-3 ms-1.5 opacity-30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-                  fill='currentColor'
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
-                </svg>
+                <IconArrowUp
+                  v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3.5 h-3.5 ms-1"
+                  :class="{'rotate-180':descArr.includes(c.name)}" aria-hidden="true"
+                />
+                <IconChevronsUpDown
+                  v-else class="w-3.5 h-3.5 ms-1 opacity-40" aria-hidden="true"
+                />
               </div>
 
               <span
-                class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
+                class="inline-flex items-center justify-center min-w-[1rem] h-4 ms-1 px-1 rounded-full text-[10px] font-semibold tabular-nums bg-lightButtonGroupActiveBackground text-lightButtonGroupActiveText dark:bg-darkButtonGroupActiveBackground dark:text-darkButtonGroupActiveText"
                 v-if="sort.findIndex((s: any) => s.field === c.name) !== -1 && sort?.length > 1"
               >
                 {{ sort.findIndex((s: any) => s.field === c.name) + 1 }}
@@ -74,7 +67,7 @@
             </div>
           </td>
 
-          <td scope="col" class="px-6 py-3 font-semibold">
+          <td scope="col" class="px-2 md:px-3 lg:px-4 py-2.5 font-medium">
             {{ $t('Actions') }}
           </td>
         </tr>
@@ -94,11 +87,11 @@
           <td :colspan="resource?.columns.length + 2">
             <div 
               id="toast-simple"
-              class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 divide-x rtl:divide-x-reverse divide-gray-200  dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
+              class=" mx-auto my-8 flex items-center justify-center w-full max-w-xs p-4 gap-2.5 text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText"
               role="alert"
             >
-              <IconInboxOutline class="w-6 h-6 text-gray-500 dark:text-gray-400"/>
-              <div class="ps-4 text-sm font-normal">{{ $t('No items here yet') }}</div>
+              <IconInbox class="w-5 h-5"/>
+              <div class="text-sm font-normal">{{ $t('No items here yet') }}</div>
             </div>
           </td>
         </tr>
@@ -118,11 +111,11 @@
           :meta="tableRowReplaceInjection ? formatComponent(tableRowReplaceInjection).meta : undefined"
           @click="onClick($event, row)"
           ref="rowRefs"
-          class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
+          class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder/60 dark:border-darkListBorder hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
           :class="{'border-b': rowI !== rowsToRender.length - 1, 'cursor-pointer': row._clickUrl !== null}"
           @mounted="(el: any) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
         >
-          <td class="w-4 p-4 cursor-default sticky-column bg-lightListTable dark:bg-darkListTable" @click="(e)=>e.stopPropagation()">
+          <td class="w-4 px-4 py-3 cursor-default sticky-column bg-lightListTable dark:bg-darkListTable" @click="(e)=>e.stopPropagation()">
             <Checkbox
               :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
               @change="(e: any)=>{addToCheckedValues(row._primaryKeyValue)}"
@@ -134,7 +127,7 @@
 
           <td
             v-for="c in columnsListed"
-            class="px-2 md:px-3 lg:px-6 py-4"
+            class="px-2 md:px-3 lg:px-4 py-3"
             :class="[c.listCssClass, {'sticky-column bg-lightListTable dark:bg-darkListTable': c.listSticky}]"
           >
             <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
@@ -147,10 +140,10 @@
               :resource="resource"
             />
           </td>
-          <td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
-            <div class="flex text-lightPrimary dark:text-darkPrimary items-center gap-2">
+          <td class=" items-center px-2 md:px-3 lg:px-4 py-2 cursor-default" @click="(e)=>{e.stopPropagation()}">
+            <div class="flex text-lightInputIconColor dark:text-darkInputIconColor items-center gap-0.5">
               <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('show')">
-                <RouterLink
+                <LinkButton
                   v-if="resource.options?.allowedActions?.show"
                   :to="{ 
                     name: 'resource-show', 
@@ -159,16 +152,19 @@
                       primaryKey: row._primaryKeyValue,
                     }
                   }"
+                  variant="ghost"
+                  size="sm"
+                  iconOnly
                 >
-                  <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
-                </RouterLink>
+                  <IconEye class="af-show-icon"/>
+                </LinkButton>
 
                 <template v-slot:tooltip>
                   {{ $t('Show item') }}
                 </template>
               </Tooltip>
               <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('edit')" >
-                <RouterLink
+                <LinkButton
                   v-if="resource.options?.allowedActions?.edit"
                   :to="{ 
                     name: 'resource-edit', 
@@ -177,20 +173,26 @@
                       primaryKey: row._primaryKeyValue,
                     }
                   }"
+                  variant="ghost"
+                  size="sm"
+                  iconOnly
                 >
-                  <IconPenSolid class="af-edit-icon w-5 h-5 me-2"/>
-                </RouterLink>
+                  <IconPencil class="af-edit-icon"/>
+                </LinkButton>
                 <template v-slot:tooltip>
                   {{ $t('Edit item') }}
                 </template>
               </Tooltip>
               <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('delete')">
-                <button
+                <Button
                   v-if="resource.options?.allowedActions?.delete"
                   @click="deleteRecord(row)"
+                  variant="ghost"
+                  size="sm"
+                  iconOnly
                 >
-                  <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
-                </button>
+                  <IconTrash2 class="af-delete-icon"/>
+                </Button>
 
                 <template v-slot:tooltip>
                   {{ $t('Delete item') }}
@@ -222,22 +224,23 @@
                       :adminUser="coreStore.adminUser"
                       @callAction="(payload? : Object) => startCustomAction(action.id as string | number, row, payload)"
                     >
-                      <button
+                      <Button
                         type="button"
-                        class="border border-gray-300 dark:border-gray-700 dark:border-opacity-0 border-opacity-0 hover:border-opacity-100 dark:hover:border-opacity-100 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
+                        variant="ghost"
+                        size="sm"
+                        iconOnly
                         :disabled="!!actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]"
                       >
                         <component
                           v-if="action.icon && !actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]"
                           :is="getIcon(action.icon)"
-                          class="w-6 h-6 text-lightPrimary dark:text-darkPrimary dark:brightness-150"
                         />
                         <Spinner
                           v-if="actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]"
-                          class="w-5 h-5 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300"
+                          class="w-4 h-4 text-lightSkeletonBackgroundColor dark:text-darkSkeletonBackgroundColor fill-lightListTableText dark:fill-darkListTableText"
                         />
                         <span v-if="actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]" class="sr-only">Loading...</span>
-                      </button>
+                      </Button>
                     </component>
 
                   <template #tooltip>
@@ -278,19 +281,17 @@
     >
       <!-- Buttons -->
       <button
-        class="af-pagination-prev-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 rounded-s border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-20 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        class="af-pagination-prev-button flex items-center h-7 px-2.5 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 rounded-s-default border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus-visible:z-20 focus-visible:ring-[3px] focus-visible:ring-lightListTablePaginationFocusRing dark:focus-visible:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
         @click="page--; pageInput = page.toString();" 
         :disabled="page <= 1"
       >
-        <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/>
-        </svg>
+        <IconChevronLeft class="w-4 h-4 rtl:rotate-180" aria-hidden="true" />
         <span class="hidden sm:inline">
           {{ $t('Prev') }}
         </span>
       </button>
       <button
-        class="af-pagination-first-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover z-10 focus:z-20 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        class="af-pagination-first-page-button flex items-center h-7 px-3 tabular-nums text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover z-10 focus-visible:z-20 focus-visible:ring-[3px] focus-visible:ring-lightListTablePaginationFocusRing dark:focus-visible:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
         @click="page = 1; 
         pageInput = page.toString();" 
         :disabled="page <= 1"
@@ -301,28 +302,26 @@
         type="text"
         v-model="pageInput"
         :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
-        class="af-pagination-input z-10 min-w-10 outline-none inline-block py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround"
+        class="af-pagination-input z-10 min-w-10 outline-none inline-block h-7 px-3 text-sm font-medium tabular-nums text-center text-lightListTablePaginationCurrentPageText bg-lightPrimaryOpacity border border-lightPrimary dark:border-darkPrimary dark:text-darkListTablePaginationCurrentPageText dark:bg-darkPrimaryOpacity focus:ring-[3px] focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing"
         @keydown="onPageKeydown($event)"
         @blur="validatePageInput()"
       />
 
       <button
-        class="af-pagination-last-page-button z-10 flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:ring-4 focus:z-20 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        class="af-pagination-last-page-button z-10 flex items-center h-7 px-3 tabular-nums text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus-visible:ring-[3px] focus-visible:z-20 focus-visible:ring-lightListTablePaginationFocusRing dark:focus-visible:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
         @click="page = totalPages; pageInput = page.toString();" :disabled="page >= totalPages">
         {{ totalPages }}
       </button>
       <button
-        class="af-pagination-next-button  flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0 rounded-e border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        class="af-pagination-next-button  flex items-center h-7 px-2.5 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0 rounded-e-default border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-lightListTablePaginationFocusRing dark:focus-visible:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
         @click="page++; pageInput = page.toString();" :disabled="page >= totalPages">
         <span class="hidden sm:inline">{{ $t('Next') }}</span>
-        <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
-        </svg>
+        <IconChevronRight class="w-4 h-4 rtl:rotate-180" aria-hidden="true" />
       </button>
     </div>
 
     <!-- Help text -->
-    <span class="ml-4 text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText">
+    <span class="ml-2 text-[13px] text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText [&_strong]:font-medium [&_strong]:text-lightListTablePaginationCurrentPageText dark:[&_strong]:text-darkListTablePaginationCurrentPageText">
       <span v-if="((((page || 1) - 1) * pageSize + 1 > totalRows) && totalRows > 0)">{{ $t('Wrong Page') }} </span>
       <template v-else-if="resource && totalRows > 0">
         
@@ -356,7 +355,7 @@
     </span>
     <div v-if="totalRows > 0 && resource?.options?.listPageSizeOptions?.length" 
       class="flex items-center gap-2 ml-auto" > 
-      <span class="text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText whitespace-nowrap"> 
+      <span class="text-[13px] text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText whitespace-nowrap"> 
         {{ $t('Rows per page') }} 
       </span> 
       <Select 
@@ -368,7 +367,7 @@
         :placeholder="pageSizeInternal?.toString()"        
         class="text-sm min-w-20 af-page-size-button" 
         classesForInput="
-        af-page-size-btn h-[2.125rem] min-h-0 py-1 pl-2 pr-6 text-left text-sm font-medium transition-all 
+        af-page-size-btn h-7 min-h-0 py-1 pl-2.5 pr-7 text-left text-sm font-medium transition-all 
         outline-none cursor-pointer af-button-shadow rounded-default bg-lightListViewButtonBackground 
         text-lightListViewButtonText border-lightListViewButtonBorder 
         dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder 
@@ -392,13 +391,17 @@ import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
 import { getIcon } from '@/utils';
 import {
-  IconEyeSolid,
-  IconPenSolid,
-  IconTrashBinSolid,
-  IconInboxOutline
-} from '@iconify-prerendered/vue-flowbite';
+  IconEye,
+  IconPencil,
+  IconTrash2,
+  IconInbox,
+  IconArrowUp,
+  IconChevronsUpDown,
+  IconChevronLeft,
+  IconChevronRight
+} from '@iconify-prerendered/vue-lucide';
 import router from '@/router';
-import { Tooltip, Spinner } from '@/afcl';
+import { Tooltip, Spinner, Button, LinkButton } from '@/afcl';
 import type { AdminForthResourceFrontend, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull, AdminForthComponentDeclaration } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
@@ -406,8 +409,8 @@ import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 import { Select } from '@/afcl';
 
-const TABLE_CLASSES = 'w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default';
-const HEADER_ROW_CLASSES = 'border-b dark:border-gray-700 t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText';
+const TABLE_CLASSES = 'w-full text-[13px] text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default';
+const HEADER_ROW_CLASSES = 'border-b border-lightListBorder dark:border-darkListBorder t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText';
 const SKELETON_COLUMNS_COUNT = 5;
 
 const coreStore = useCoreStore();

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

@@ -1,17 +1,17 @@
 <template>
-      <div class="overflow-x-auto overscroll-x-contain shadow-resourseFormShadow dark:shadow-darkResourseFormShadow border dark:border-gray-700"
-        :class="{'rounded-default' : isRounded}"
+      <div class="overflow-x-auto overscroll-x-contain shadow-resourseFormShadow dark:shadow-darkResourseFormShadow border border-lightFormBorder dark:border-darkFormBorder"
+        :class="{'rounded-lg' : isRounded}"
       >
-        <div v-if="groupName && !noTitle"  class="text-md font-semibold px-6 py-3 flex flex-1 items-center text-lightShowTableHeadingText bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground  dark:text-darkShowTableHeadingText rounded-t-lg">
+        <div v-if="groupName && !noTitle"  class="text-sm font-semibold px-5 py-3 flex flex-1 items-center text-lightShowTableHeadingText bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground  dark:text-darkShowTableHeadingText rounded-t-lg">
         {{ groupName }}
         </div>
       <table class="w-full text-sm text-left rtl:text-right text-lightShowTableBodyText dark:text-darkShowTableBodyText table-fixed">
         <thead v-if="!allColumnsHaveCustomComponent"  class="text-lightShowTableUnderHeadingText dark:text-darkShowTableUnderHeadingText bg-lightShowTableUnderHeadingBackground dark:bg-darkShowTableUnderHeadingBackground dark:border-darkFormBorder block md:table-row-group">
           <tr>
-            <th scope="col" class="px-6 py-3 text-xs uppercase hidden md:w-52 md:table-cell">
+            <th scope="col" class="px-5 py-2.5 text-xs font-medium hidden md:w-56 md:table-cell">
               {{ $t('Field') }}
             </th>
-            <th scope="col" class="px-6 py-3 text-xs uppercase hidden md:table-cell">
+            <th scope="col" class="px-5 py-2.5 text-xs font-medium hidden md:table-cell">
               {{ $t('Value') }}
             </th>
           </tr>
@@ -32,12 +32,12 @@
                   :record="coreStore.record"
               />
             <template v-else-if="checkShowIf(column, record, resource?.columns || [])">
-              <td class="px-6 py-4 relative block flex justify-start font-bold md:font-normal pb-0 md:pb-4 relative md:table-cell">
-                <div class="absolute inset-0 flex items-center overflow-hidden px-6 py-4 max-h-32">
+              <td class="px-5 py-3 relative block flex justify-start font-medium text-lightFormFieldTextColor dark:text-darkFormFieldTextColor pb-0 md:pb-3 relative md:table-cell">
+                <div class="absolute inset-0 flex items-center overflow-hidden px-5 py-3 max-h-32">
                   {{ column.label }}
                 </div>
               </td>
-              <td class="px-6 py-4 whitespace-pre-wrap" :data-af-column="column.name">
+              <td class="px-5 py-3 whitespace-pre-wrap" :data-af-column="column.name">
                 <component
                   v-if="column?.components?.show"
                   :is="getCustomComponent(column?.components?.show)"

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

@@ -46,38 +46,38 @@
         </div>
         <div class="absolute top-1.5 -right-4 z-10 hidden sm:block" v-if="!forceIconOnly && iconOnlySidebarEnabled && (!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))">
           <button class="text-sm text-lightSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" @click="toggleSidebar">
-            <IconCloseSidebarSolid v-if="!isSidebarIconOnly" class="w-5 h-5 active:scale-95 transition-all duration-200 hover:text-lightSidebarIconsHover dark:hover:text-darkSidebarIconsHover" />
-            <IconOpenSidebarSolid v-else class="w-5 h-5 active:scale-95 transition-all duration-200 hover:text-lightSidebarIconsHover dark:hover:text-darkSidebarIconsHover" />
-          </button> 
+            <IconPanelLeftClose v-if="!isSidebarIconOnly" class="w-4 h-4 active:scale-95 transition-all duration-200 hover:text-lightSidebarIconsHover dark:hover:text-darkSidebarIconsHover" />
+            <IconPanelLeftOpen v-else class="w-4 h-4 active:scale-95 transition-all duration-200 hover:text-lightSidebarIconsHover dark:hover:text-darkSidebarIconsHover" />
+          </button>
         </div>
       </div>
 
      <div
       v-if="coreStore?.config?.defaultUserExists && !isLocalhost"
-      class="mb-4 text-white rounded-lg bg-red-700/80 fill-white text-sm"
-      :class="iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering ? 'flex w-10 h-10 ml-1 items-center justify-center' : 'p-4'"
+      class="mb-4 rounded-lg border border-lightInputErrorColor/30 bg-lightInputErrorColor/10 text-lightInputErrorColor dark:border-darkInputErrorColor/30 dark:bg-darkInputErrorColor/10 dark:text-darkInputErrorColor text-sm"
+      :class="iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering ? 'flex w-10 h-10 ml-1 items-center justify-center' : 'p-3'"
     >
-      <IconExclamationCircleOutline class="inline-block align-text-bottom w-5 h-5 shrink-0" />
+      <IconCircleAlert class="inline-block align-text-bottom w-4 h-4 shrink-0" />
       <template v-if="!iconOnlySidebarEnabled || !isSidebarIconOnly || isSidebarHovering">
         {{ $t('Default user') }} <strong>"adminforth"</strong> {{ $t('detected. Delete it and create your own account.') }}
       </template>
     </div>
 
-      <ul class="af-sidebar-container space-y-2 font-medium" >
+      <ul class="af-sidebar-container space-y-0.5 text-sm" >
       <template v-if="!iconOnlySidebarEnabled || !isSidebarIconOnly" v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
-          <div v-if="item.type === 'divider'" class="border-t border-lightSidebarDevider dark:border-darkSidebarDevider"></div>
-          <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
-          <div v-else-if="item.type === 'heading'" class="flex items-center justify-left pl-2 h-8 text-lightSidebarHeading dark:text-darkSidebarHeading
+          <div v-if="item.type === 'divider'" class="my-2 mx-2 border-t border-lightSidebarDevider dark:border-darkSidebarDevider"></div>
+          <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-4"></div>
+          <div v-else-if="item.type === 'heading'" class="flex items-center justify-left px-3 pt-3 pb-1 text-xs font-medium tracking-wide text-lightSidebarHeading dark:text-darkSidebarHeading
           ">{{ item.label }}</div>
           <li v-else-if="item.children" class="af-sidebar-expand-container">
-            <button @click="clickOnMenuItem(i)" type="button" class="af-sidebar-expand-button flex items-center w-full px-3.5 py-2 text-base text-lightSidebarText rounded-default transition duration-75  group hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:text-darkSidebarText dark:hover:bg-darkSidebarHover dark:hover:text-darkSidebarTextHover"
+            <button @click="clickOnMenuItem(i)" type="button" class="af-sidebar-expand-button flex items-center w-full px-3 py-1.5 text-sm text-lightSidebarText rounded-default transition duration-75  group hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:text-darkSidebarText dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover"
                 :class="opened.includes(i) ? 'af-sidebar-dropdown-expanded' : 'af-sidebar-dropdown-collapsed'"
                 :aria-controls="`dropdown-example${i}`"
             >
-              <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
+              <component v-if="item.icon" :is="getIcon(item.icon)" class="w-4 h-4 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
               <span class="overflow-hidden flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}
-                <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
-                  fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
+                <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 ms-2 text-[11px] font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG
+                  fill-lightAnnouncementText dark:fill-darkAnnouncementText text-lightAnnouncementText dark:text-darkAnnouncementText">
                   <Tooltip v-if="item.badgeTooltip">
                     {{ item.badge }}
                     <template #tooltip>
@@ -90,13 +90,11 @@
                 </span>
               </span>
 
-              <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
-              </svg>
+              <IconChevronDown :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3 text-lightSidebarIcons dark:text-darkSidebarIcons transition-transform duration-200" aria-hidden="true" />
             </button>
 
             <transition name="slow-drop">
-              <ul v-show="opened.includes(i)" :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown pt-1 space-y-1 overflow-hidden">              
+              <ul v-show="opened.includes(i)" :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown mt-0.5 ml-[1.25rem] pl-2 border-l border-lightSidebarDevider dark:border-darkSidebarDevider space-y-0.5 overflow-hidden">              
                 <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
                   <li class="af-sidebar-menu-link">
                       <MenuLink :item="child" isChild="true" @click="$emit('hideSidebar')"/>
@@ -110,20 +108,20 @@
       </li>
       </template>
       <template v-if="iconOnlySidebarEnabled && isSidebarIconOnly" v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
-            <div v-if="item.type === 'divider'" class="border-t border-lightSidebarDevider dark:border-darkSidebarDevider"></div>
-            <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
-            <div v-else-if="item.type === 'heading' && isSidebarHovering" class="flex items-center justify-left pl-2 h-8 text-lightSidebarHeading dark:text-darkSidebarHeading
+            <div v-if="item.type === 'divider'" class="my-2 mx-2 border-t border-lightSidebarDevider dark:border-darkSidebarDevider"></div>
+            <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-4"></div>
+            <div v-else-if="item.type === 'heading' && isSidebarHovering" class="flex items-center justify-left px-3 h-8 text-xs font-medium tracking-wide text-lightSidebarHeading dark:text-darkSidebarHeading
             ">{{ item.label }}</div>
             <div v-else-if="item.type === 'heading' && !isSidebarHovering" class="opacity-0 w-1 h-8">{{ item.label }}</div>
             <li v-else-if="item.children" class="af-sidebar-expand-container">
-                <button @click="clickOnMenuItem(i)" type="button" class="af-sidebar-expand-button relative flex items-center h-10 py-2 text-base text-lightSidebarText rounded-default group hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:text-darkSidebarText dark:hover:bg-darkSidebarHover dark:hover:text-darkSidebarTextHover"
+                <button @click="clickOnMenuItem(i)" type="button" class="af-sidebar-expand-button relative flex items-center h-9 py-2 text-sm text-lightSidebarText rounded-default group hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:text-darkSidebarText dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover"
                     :class="[
                       opened.includes(i) ? 'af-sidebar-dropdown-expanded' : 'af-sidebar-dropdown-collapsed',
-                      isSidebarIconOnly && !isSidebarHovering ? 'w-10 ml-1 px-2.5' : 'w-full px-3.5'
+                      isSidebarIconOnly && !isSidebarHovering ? 'w-10 ml-1 px-3' : 'w-full px-3'
                     ]"
                     :aria-controls="`dropdown-example${i}`"
                 >
-                    <component v-if="item.icon" :is="getIcon(item.icon)" class="min-w-5 min-h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75    dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
+                    <component v-if="item.icon" :is="getIcon(item.icon)" class="min-w-4 w-4 h-4 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75    dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
 
                     <span 
                       class="overflow-hidden block ms-3 text-left rtl:text-right transition-all duration-200 ease-in-out"
@@ -133,13 +131,13 @@
                         'opacity-100 ms-3 translate-x-0 flex-1': !isSidebarIconOnly
                       }"
                       :style="isSidebarIconOnly ? { 
-                        minWidth: `calc(${expandedWidth} - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)`,
-                        width: `calc(${expandedWidth} - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)`
+                        minWidth: `calc(${expandedWidth} - 0.75rem*2 - 0.75rem*2 - 1rem - 0.75rem)`,
+                        width: `calc(${expandedWidth} - 0.75rem*2 - 0.75rem*2 - 1rem - 0.75rem)`
                       } : {}"
                     >{{ item.label }}
 
-                        <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
-                        fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
+                        <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 ms-2 text-[11px] font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+                        fill-lightAnnouncementText dark:fill-darkAnnouncementText text-lightAnnouncementText dark:text-darkAnnouncementText">
                         <Tooltip v-if="item.badgeTooltip">
                             {{ item.badge }}
                             <template #tooltip>
@@ -152,12 +150,10 @@
                         </span>
                     </span>
 
-                    <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3 ml-2 absolute right-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
-                    </svg>
+                    <IconChevronDown :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3 ml-2 absolute right-3 text-lightSidebarIcons dark:text-darkSidebarIcons transition-transform duration-200" aria-hidden="true" />
                 </button>
 
-                <ul :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown pt-1 space-y-1" :class="{ 'hidden': !opened.includes(i), 'relative after:absolute after:-left-3 after:inset-y-0 after:w-0.5 after:bg-lightSidebarIcons/50 dark:after:bg-darkSidebarIcons/50 after:rounded-full': isSidebarIconOnly && !isSidebarHovering && opened.includes(i) }">
+                <ul :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown pt-0.5 space-y-0.5" :class="{ 'hidden': !opened.includes(i) }">
                     <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
                         <li class="af-sidebar-menu-link">
                             <MenuLink :item="child" isChild="true" @click="$emit('hideSidebar')" :isSidebarIconOnly="isSidebarIconOnly" :isSidebarHovering="isSidebarHovering"/>
@@ -173,7 +169,7 @@
 
 
       <div id="dropdown-cta" class="p-4 mt-6 w-[14.375rem] rounded-lg bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
-        fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent text-sm" role="alert"
+        fill-lightAnnouncementText dark:fill-darkAnnouncementText text-lightAnnouncementText dark:text-darkAnnouncementText text-sm" role="alert"
         v-if="(ctaBadge && !isSidebarIconOnly) || (ctaBadge && isSidebarIconOnly && isSidebarHovering)"
       >
         <div class="flex items-center mb-3" :class="!ctaBadge.title ? 'float-right' : ''">
@@ -190,9 +186,7 @@
             v-if="ctaBadge?.closable" @click="closeCTA"
           >
             <span class="sr-only">Close</span>
-            <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-            </svg>
+            <IconX class="w-3.5 h-3.5" aria-hidden="true" />
           </button>
         </div>
         <p class="mb-3 text-sm" v-if="ctaBadge.html" v-html="ctaBadge.html"></p>
@@ -332,12 +326,11 @@
 import { computed, ref, watch, nextTick, onMounted, onUnmounted, type Ref } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import MenuLink from './MenuLink.vue';
-import { IconCloseSidebarSolid, IconOpenSidebarSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconPanelLeftClose, IconPanelLeftOpen, IconChevronDown, IconX, IconCircleAlert } from '@iconify-prerendered/vue-lucide';
 import { getIcon, verySimpleHash, loadFile, getCustomComponent } from '@/utils';
 import { Tooltip } from '@/afcl';
 import type { AnnouncementBadgeResponse } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
-import { IconExclamationCircleOutline} from '@iconify-prerendered/vue-flowbite';
 import { useI18n } from 'vue-i18n';
 
 const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' || window.location.hostname === '::1';