adminforth 1.3.56-next.8 → 1.3.56

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

@@ -1,6 +1,6 @@
 <template>
   <!-- table -->
-  <div class="relative overflow-x-auto shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-y-hidden"
+  <div class="relative shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-auto "
     :class="{'rounded-default': !noRoundings}"
   >
     <!-- skelet loader -->
@@ -11,53 +11,55 @@
             <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
         </div>      
     </div>
+    <table v-else class=" w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
 
-    <table v-else class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
-      <thead class="text-xs text-view-table-heading-text bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
-      <tr>
-        <th scope="col" class="p-4">
-          <div v-if="rows && rows.length" class="flex items-center">
-            <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()" 
-                  class="w-4 h-4 cursor-pointer text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-            <label for="checkbox-all-search" class="sr-only">checkbox</label>
-          </div>
-        </th>
-
-        <th v-for="c in columnsListed" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
-         
-          <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
-              class="flex items-center " :class="{'cursor-pointer':c.sortable}">
-            {{ c.label }}
-
-            <div v-if="c.sortable"
-                :style="{ 'color':ascArr.includes(c.name)?'green':descArr.includes(c.name)?'red':'currentColor'}">
-              <svg v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3 h-3 ms-1.5"
-                  :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"/>
-              </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>
-            </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"
-             v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
-            {{ sort.findIndex((s) => s.field === c.name) + 1 }}
-            </span>
-
-          </div>
-        </th>
-
-        <th scope="col" class="px-6 py-3">
-          Actions
-        </th>
-      </tr>
-      </thead>
       <tbody>
+
+        <!-- table header -->
+        <tr class="t-header sticky z-10 top-0 text-xs  bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
+          <td scope="col" class="p-4">
+            <div v-if="rows && rows.length" class="flex items-center">
+              <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()" 
+                    class="w-4 h-4 cursor-pointer text-blue-600 bg-gray-100 border-gray-300 rounded
+                    focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+              <label for="checkbox-all-search" class="sr-only">checkbox</label>
+            </div>
+          </td>
+
+          <td v-for="c in columnsListed" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
+          
+            <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
+                class="flex items-center " :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"/>
+                </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>
+              </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"
+                v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
+                {{ sort.findIndex((s) => s.field === c.name) + 1 }}
+              </span>
+
+            </div>
+          </td>
+
+          <td scope="col" class="px-6 py-3">
+            Actions
+          </td>
+        </tr>
+        <!-- table header end -->
         <SkeleteLoader 
           v-if="!rows" 
           :columns="resource?.columns.filter(c => c.showIn.includes('list')).length + 2"
@@ -106,65 +108,57 @@
             />
           </td>
           <td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
-            <div class="flex">
-              <RouterLink
-                v-if="resource.options?.allowedActions.show"
-                :to="{ 
-                  name: 'resource-show', 
-                  params: { 
-                    resourceId: resource.resourceId, 
-                    primaryKey: row._primaryKeyValue,
-                  }
-                }"
-                class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline"
-                :data-tooltip-target="`tooltip-show-${rowI}`"
-              >
-                <IconEyeSolid class="w-5 h-5 me-2"/>
-              </RouterLink>
-
-              <div :id="`tooltip-show-${rowI}`"
-                  role="tooltip"
-                  class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                Show item
-                <div class="tooltip-arrow" data-popper-arrow></div>
-              </div>
-
-              <RouterLink v-if="resource.options?.allowedActions.edit"
-                :to="{
-                  name: 'resource-edit',
-                  params: { 
-                    resourceId: resource.resourceId,
-                    primaryKey: row._primaryKeyValue 
-                  } 
-                }"
-                class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
-                :data-tooltip-target="`tooltip-edit-${rowI}`"
-              >
-                <IconPenSolid class="w-5 h-5 me-2"/>
-              </RouterLink>
-
-              <div :id="`tooltip-edit-${rowI}`"
-                  role="tooltip"
-                  class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                Edit
-                <div class="tooltip-arrow" data-popper-arrow></div>
-              </div>
-
-              <button v-if="resource.options?.allowedActions.delete"
-                      class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
-                      :data-tooltip-target="`tooltip-delete-${rowI}`"
-                      @click="deleteRecord(row)"
-              >
-                <IconTrashBinSolid class="w-5 h-5 me-2"/>
-              </button>
-
-              <div :id="`tooltip-delete-${rowI}`"
-                  role="tooltip"
-                  class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                Delete
-                <div class="tooltip-arrow" data-popper-arrow></div>
-              </div>
-
+            <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
+              <AfTooltip>
+                <RouterLink
+                  v-if="resource.options?.allowedActions.show"
+                  :to="{ 
+                    name: 'resource-show', 
+                    params: { 
+                      resourceId: resource.resourceId, 
+                      primaryKey: row._primaryKeyValue,
+                    }
+                  }"
+
+                >
+                  <IconEyeSolid class="w-5 h-5 me-2"/>
+                </RouterLink>
+
+                <template v-slot:tooltip>
+                  Show item
+                </template>
+              </AfTooltip>
+
+              <AfTooltip>
+                <RouterLink
+                  v-if="resource.options?.allowedActions.edit"
+                  :to="{ 
+                    name: 'resource-edit', 
+                    params: { 
+                      resourceId: resource.resourceId, 
+                      primaryKey: row._primaryKeyValue,
+                    }
+                  }"
+                >
+                  <IconPenSolid class="w-5 h-5 me-2"/>
+                </RouterLink>
+                <template v-slot:tooltip>
+                  Edit item
+                </template>
+              </AfTooltip>
+
+              <AfTooltip>
+                <button
+                  v-if="resource.options?.allowedActions.delete"
+                  @click="deleteRecord(row)"
+                >
+                  <IconTrashBinSolid class="w-5 h-5 me-2"/>
+                </button>
+
+                <template v-slot:tooltip>
+                  Delete item
+                </template>
+              </AfTooltip>
                 
               <template v-if="coreStore.resourceOptions?.pageInjections?.list?.customActionIcons">
                 <component 
@@ -185,30 +179,23 @@
   <!-- pagination
   totalRows in v-if is used to not hide page input during loading when user puts cursor into it and edit directly (rows gets null there during edit)
   -->
-  <div class="flex flex-col items-center mt-4 mb-4 xs:flex-row xs:justify-between xs:items-center"
+  <div class="flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3"
     v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
   >
-    <!-- Help text -->
-    <span class="text-sm text-gray-700 dark:text-gray-400">
-          Showing <span class="font-semibold text-gray-900 dark:text-white">
-            {{ ((page || 1) - 1) * pageSize + 1 }}
-          </span> to <span class="font-semibold text-gray-900 dark:text-white">
-            {{ Math.min((page || 1) * pageSize, totalRows) }}
-          </span> of <span class="font-semibold text-gray-900 dark:text-white">{{
-        totalRows
-      }}</span> Entries
-      </span>
-    <div class="inline-flex mt-2 xs:mt-0">
+    
+    <div class="inline-flex ">
         <!-- Buttons -->
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page--" :disabled="page <= 1">
-          <svg class="w-3.5 h-3.5 me-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+          <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>
-          Prev
+          <span class="hidden sm:inline">
+            Prev
+          </span>
         </button>
         <button
           class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
@@ -232,11 +219,10 @@
           <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
         </button>
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
-
+          class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page++" :disabled="page >= totalPages">
-          Next
-          <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+          <span class="hidden sm:inline">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"/>
@@ -244,6 +230,15 @@
         </button>
     </div>
 
+    <!-- Help text -->
+    <span class="text-sm text-gray-700 dark:text-gray-400">
+        Showing <span class="font-semibold text-gray-900 dark:text-white">
+          {{ ((page || 1) - 1) * pageSize + 1 }}
+        </span> to <span class="font-semibold text-gray-900 dark:text-white">
+          {{ Math.min((page || 1) * pageSize, totalRows) }}
+        </span> of <span class="font-semibold text-gray-900 dark:text-white">{{
+          totalRows }}</span> <span class="hidden sm:inline">Entries</span>
+    </span>
   </div>
 </template>
 
@@ -269,9 +264,11 @@ import {
   IconTrashBinSolid
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
+import AfTooltip from './AfTooltip.vue';
 
 const coreStore = useCoreStore();
 
+
 const props = defineProps([
   'page',
   'resource', 

package/dist/spa/src/renderers/CompactField.vue

@@ -0,0 +1,45 @@
+<template>
+  <AfTooltip>
+    <span class="flex items-center">
+      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
+    </span>
+    <template #tooltip v-if="visualValue">
+      {{ props.record[props.column.name] }}
+    </template>
+  </AfTooltip>
+  
+</template>
+
+<script setup>  
+import { computed, ref, onMounted, nextTick } from 'vue';
+import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
+import AfTooltip from '@/components/AfTooltip.vue';
+
+
+const visualValue = computed(() => {
+  // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
+  const val = props.record[props.column.name];
+  if (val && val.length > 8) {
+    return `${val.substr(0, 4)}...${val.substr(val.length - 4)}`;
+  }
+  return val;
+});
+
+const props = defineProps(['column', 'record', 'meta']);
+
+const id = ref();
+
+function copyToCB() {
+  navigator.clipboard.writeText(props.record[props.column.name]);
+  window.adminforth.alert({
+    message: 'ID copied to clipboard',
+    variant: 'success',
+  })
+}
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+  await nextTick();
+});
+
+</script>

package/dist/spa/src/renderers/CompactUUID.vue

@@ -1,22 +1,20 @@
 <template>
-  <span class="flex items-center"  
-    :data-tooltip-target="visualValue && `tooltip-${id}`"
-    data-tooltip-placement="top"
-  >
-    {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
-
-    <div :id="`tooltip-${id}`" role="tooltip" v-if="visualValue"
-          class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+  <AfTooltip>
+    <span class="flex items-center">
+      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
+    </span>
+    <template #tooltip v-if="visualValue">
       {{ props.record[props.column.name] }}
-      <div class="tooltip-arrow" data-popper-arrow></div>
-    </div>
-  </span>
+    </template>
+  </AfTooltip>
+  
 </template>
 
 <script setup>  
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, nextTick } from 'vue';
 import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
-import { initFlowbite } from 'flowbite';
+import AfTooltip from '@/components/AfTooltip.vue';
+
 
 const visualValue = computed(() => {
   // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
@@ -41,8 +39,7 @@ function copyToCB() {
 
 onMounted(async () => {
   id.value = Math.random().toString(36).substring(7);
-  await new Promise(resolve => setTimeout(resolve, 0));
-  initFlowbite();
+  await nextTick();
 });
 
 </script>

package/dist/spa/src/renderers/CountryFlag.vue

@@ -1,31 +1,25 @@
 <template>
-  <span class="flex items-center">
-    <span 
-      :class="{[`fi-${countryIsoLow}`]: true, 'flag-icon': countryName}"
-      :data-tooltip-target="`tooltip-${id}`"
-    ></span>
-
-    <span v-if="meta.showCountryName" class="ms-2">{{ countryName }}</span>
-    
-    <div 
-      v-if="!meta.showCountryName && countryName"
-      :id="`tooltip-${id}`" role="tooltip"
-      class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
-    >
-      {{ countryName }}
-      <div class="tooltip-arrow" data-popper-arrow></div>
-    </div>
-  </span>
-  
+    <AfTooltip>
+      <span class="flex items-center">
+        <span 
+          :class="{[`fi-${countryIsoLow}`]: true, 'flag-icon': countryName}"
+        ></span>
+        <span v-if="meta.showCountryName" class="ms-2">{{ countryName }}</span>
+      </span>
+      
+      <template v-if="shouldShowTooltip" #tooltip>
+        {{ countryName }}
+      </template>
+    </AfTooltip>
 </template>
 
 <script setup>  
 
 import { computed, ref, onMounted } from 'vue';
-import { initFlowbite } from 'flowbite';
 import 'flag-icons/css/flag-icons.min.css';
 import isoCountries from 'i18n-iso-countries';
 import enLocal from 'i18n-iso-countries/langs/en.json';
+import AfTooltip from '@/components/AfTooltip.vue';
 
 isoCountries.registerLocale(enLocal);
 
@@ -33,11 +27,12 @@ const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser'])
 
 const id = ref();
 
+const shouldShowTooltip = computed(() => {
+  return !props.meta.showCountryName && countryName.value;
+});
 
 onMounted(async () => {
   id.value = Math.random().toString(36).substring(7);
-  await new Promise(resolve => setTimeout(resolve, 0));
-  initFlowbite();
 });
 
 const countryIsoLow = computed(() => {

package/dist/spa/src/renderers/HumanNumber.vue

@@ -1,19 +1,15 @@
 <template>
-    <span class="flex items-center"  
-          :data-tooltip-target="formattedValue && `tooltip-${id}`"
-          data-tooltip-placement="left">
+    <AfTooltip class="flex items-center" >
       {{ formattedValue }} 
-      <div :id="`tooltip-${id}`" role="tooltip" v-if="formattedValue"
-           class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+      <template #tooltip v-if="formattedValue">
         {{ formattedTooltipValue }}
-        <div class="tooltip-arrow" data-popper-arrow></div>
-      </div>
-    </span>
+      </template>
+    </AfTooltip>
   </template>
   
   <script setup>
-  import { computed, ref, onMounted } from 'vue';
-  import { initFlowbite } from 'flowbite';
+  import { computed, ref, onMounted, nextTick } from 'vue';
+  import AfTooltip from '@/components/AfTooltip.vue';
   
   const props = defineProps(['column', 'record']);
   const id = ref();
@@ -50,13 +46,12 @@
   return new Intl.NumberFormat(locale).format(num);
 }
 
-function formatNumberUsingIntl(num, locale) {
-    return new Intl.NumberFormat(locale).format(num);
-}
+  function formatNumberUsingIntl(num, locale) {
+      return new Intl.NumberFormat(locale).format(num);
+  }
 
   onMounted(async () => {
     id.value = Math.random().toString(36).substring(7);
-    await new Promise(resolve => setTimeout(resolve, 0));
-    initFlowbite();
+    await nextTick();
   });
-  </script>
+</script>

package/dist/spa/src/renderers/RelativeTime.vue

@@ -0,0 +1,41 @@
+<template>
+  <AfTooltip class="flex items-center">
+    {{ relativeTime }}
+    <template #tooltip v-if="relativeTime">
+        {{ fullTime }}
+    </template>
+  </AfTooltip>
+</template>
+
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import AfTooltip from '@/components/AfTooltip.vue';
+import en from 'javascript-time-ago/locale/en';
+import TimeAgo from 'javascript-time-ago';
+import dayjs from 'dayjs';
+
+const id = ref();
+
+TimeAgo.addLocale(en);
+
+const props = defineProps(['column', 'record']);
+
+const userLocale = ref(navigator.language || 'en-US');
+const timeAgoFormatter = new TimeAgo(userLocale.value);
+const relativeTime = computed(() => {
+  const value = props.record[props.column.name];
+  const date = new Date(value);
+  return timeAgoFormatter.format(date);
+});
+
+const fullTime = computed(() => {
+  const value = props.record[props.column.name];  
+  const date = dayjs(new Date(value));
+  return date.format('DD MMM HH:mm');
+});
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+});
+
+</script>

package/dist/spa/src/renderers/URL.vue

@@ -0,0 +1,18 @@
+<template>
+  <a v-if='record[column.name]' :href="record[column.name]"
+    class="text-blue-500 hover:underline overflow-ellipsis overflow-hidden whitespace-nowrap inline-block max-w-full"
+  >{{ record[column.name] }}</a>
+</template>
+
+<script setup>
+
+defineProps({
+  record: Object,
+  resource: Object,
+  adminUser: Object,
+  meta: Object,
+  column: Object
+});
+
+
+</script>

package/dist/spa/src/stores/user.ts

@@ -1,8 +1,6 @@
 import { ref } from 'vue';
 import { defineStore } from 'pinia';
 import { callAdminForthApi } from '@/utils';
-import { initFlowbite } from 'flowbite'
-import { useRouter } from 'vue-router';
 import { useCoreStore } from './core';
 import router from '@/router';
 
@@ -27,9 +25,6 @@ export const useUserStore = defineStore('user', () => {
         await router.push('/');
         await router.isReady();
         await coreStore.fetchMenuAndResource();
-        setTimeout(() => {
-            initFlowbite();
-        }); 
     }
 
     async function logout() {