adminforth 1.3.56-next.26 → 1.3.56-next.27

package/dist/spa/package-lock.json

@@ -15,6 +15,7 @@
         "debounce": "^2.1.0",
         "flowbite": "^2.3.0",
         "flowbite-datepicker": "^1.2.6",
+        "javascript-time-ago": "^2.5.11",
         "pinia": "^2.1.7",
         "sanitize-html": "^2.13.0",
         "unhead": "^1.9.12",
@@ -2841,6 +2842,15 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/javascript-time-ago": {
+      "version": "2.5.11",
+      "resolved": "https://registry.npmjs.org/javascript-time-ago/-/javascript-time-ago-2.5.11.tgz",
+      "integrity": "sha512-Zeyf5R7oM1fSMW9zsU3YgAYwE0bimEeF54Udn2ixGd8PUwu+z1Yc5t4Y8YScJDMHD6uCx6giLt3VJR5K4CMwbg==",
+      "license": "MIT",
+      "dependencies": {
+        "relative-time-format": "^1.1.6"
+      }
+    },
     "node_modules/jiti": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
@@ -3633,6 +3643,12 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/relative-time-format": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/relative-time-format/-/relative-time-format-1.1.6.tgz",
+      "integrity": "sha512-aCv3juQw4hT1/P/OrVltKWLlp15eW1GRcwP1XdxHrPdZE9MtgqFpegjnTjLhi2m2WI9MT/hQQtE+tjEWG1hgkQ==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",

package/dist/spa/package.json

@@ -19,6 +19,7 @@
     "debounce": "^2.1.0",
     "flowbite": "^2.3.0",
     "flowbite-datepicker": "^1.2.6",
+    "javascript-time-ago": "^2.5.11",
     "pinia": "^2.1.7",
     "sanitize-html": "^2.13.0",
     "unhead": "^1.9.12",

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

@@ -45,7 +45,7 @@
   </div>
 </template>
 <script setup>
-import {ref, computed, onMounted, watch, onBeforeUnmount} from 'vue';
+import {ref, computed, onMounted, watch, onBeforeUnmount, nextTick} from 'vue';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 
@@ -105,7 +105,7 @@ async function updateFromProps() {
     startTime.value = '';
   } else {
     // wait ref to initialize
-    await (new Promise(resolve => setTimeout(resolve, 0)));
+    await nextTick();
     datepickerObject.value.setDate(dayjs(props.valueStart).format('DD MMM YYYY'));
     startTime.value = dayjs(props.valueStart).format('HH:mm:ss')
   }

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

@@ -6,10 +6,10 @@
     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
       <thead class="text-xs text-gray-700 uppercase dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group ">
         <tr>
-          <th scope="col" class="px-6 py-3 hidden md:table-cell">
+          <th scope="col" class="px-6 py-3 hidden md:w-52 md:table-cell">
               Field
           </th>
-          <th scope="col" class="px-6 py-3 w-5/6 hidden md:table-cell">
+          <th scope="col" class="px-6 py-3 hidden md:table-cell">
               Value
           </th>
         </tr>
@@ -22,7 +22,8 @@
           class="bg-ligftForm dark:bg-gray-800 dark:border-gray-700 block md:table-row"
           :class="{ 'border-b': i !== group.columns.length - 1 }"
         >
-          <td class="px-6 py-4 whitespace-nowrap flex items-center block md:table-cell" :class="{'rounded-bl-lg border-b-none': i === group.columns.length - 1}"> <!--align-top-->
+          <td class="px-6 py-4 flex items-center block md:table-cell pb-0 md:pb-4" 
+              :class="{'rounded-bl-lg border-b-none': i === group.columns.length - 1}"> <!--align-top-->
             <span class="flex items-center gap-1">                     
               {{ column.label }}
               <AfTooltip v-if="column.required[mode]">
@@ -39,7 +40,8 @@
             
             
           </td>
-          <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative block md:table-cell rounded-br-lg" :class="{'rounded-br-lg': i === group.columns.length - 1}">
+          <td class="px-6 py-4  whitespace-pre-wrap relative block md:table-cell rounded-br-lg " 
+              :class="{'rounded-br-lg': i === group.columns.length - 1}">
             <template v-if="column?.components?.[props.source]?.file">
               <component
                 :is="getCustomComponent(column.components[props.source])"

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

@@ -16,7 +16,7 @@
       <tbody>
 
         <!-- table header -->
-        <tr class="t-header sticky z-1 top-0 text-xs  bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
+        <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()" 

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

@@ -11,10 +11,11 @@
 </template>
 
 <script setup>  
-import { computed, ref, onMounted } from 'vue';
+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];
@@ -38,7 +39,7 @@ function copyToCB() {
 
 onMounted(async () => {
   id.value = Math.random().toString(36).substring(7);
-  await new Promise(resolve => setTimeout(resolve, 0));
+  await nextTick();
 });
 
 </script>

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

@@ -11,10 +11,11 @@
 </template>
 
 <script setup>  
-import { computed, ref, onMounted } from 'vue';
+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];
@@ -38,7 +39,7 @@ function copyToCB() {
 
 onMounted(async () => {
   id.value = Math.random().toString(36).substring(7);
-  await new Promise(resolve => setTimeout(resolve, 0));
+  await nextTick();
 });
 
 </script>

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

@@ -8,7 +8,7 @@
   </template>
   
   <script setup>
-  import { computed, ref, onMounted } from 'vue';
+  import { computed, ref, onMounted, nextTick } from 'vue';
   import AfTooltip from '@/components/AfTooltip.vue';
   
   const props = defineProps(['column', 'record']);
@@ -46,12 +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));
+    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/views/ListView.vue

@@ -116,7 +116,7 @@ import ResourceListTable from '@/components/ResourceListTable.vue';
 import { useCoreStore } from '@/stores/core';
 import { useFiltersStore } from '@/stores/filters';
 import { callAdminForthApi, currentQuery, getIcon, setQuery } from '@/utils';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi'
 import { getCustomComponent, initThreeDotsDropdown } from '@/utils';
@@ -182,7 +182,7 @@ async function getList() {
     return row;
   });
   totalRows.value = data.total;
-  await new Promise(resolve => setTimeout(resolve, 0));
+  await nextTick();
 }
 
 async function startBulkAction(actionId) {

package/dist/spa/src/views/ShowView.vue

@@ -63,10 +63,10 @@
       <!-- table fixed layour used to prevent double scroll in inline list plugins -->
         <thead class="text-xs text-gray-700 uppercase dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group ">
           <tr>
-            <th scope="col" class="px-6 py-3 hidden md:table-cell">
+            <th scope="col" class="px-6 py-3 hidden md:w-52 md:table-cell">
                 Field
             </th>
-            <th scope="col" class="px-6 py-3 w-5/6 hidden md:table-cell">
+            <th scope="col" class="px-6 py-3 hidden md:table-cell">
                 Value
             </th>
           </tr>
@@ -85,10 +85,10 @@
                   :record="coreStore.record"
               />
               <template v-else>
-                <td class="px-6 py-4 whitespace-nowrap relative block md:table-cell"> <!--align-top-->
+                <td class="px-6 py-4 relative block md:table-cell font-bold md:font-normal pb-0 md:pb-4"> <!--align-top-->
                   {{ column.label }}
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap" :data-af-column="column.name">
+                <td class="px-6 py-4 whitespace-pre-wrap" :data-af-column="column.name">
                   <component
                     v-if="column?.components?.show"
                     :is="getCustomComponent(column?.components?.show)"

package/package.json

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