adminforth 1.3.56-next.9 → 1.3.57-next.0

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() {

package/dist/spa/src/types/AdminForthConfig.ts

@@ -916,13 +916,13 @@ export type AdminForthResource = {
     hooks?: {
       show?: {
         /**
-         * Typical usecases: 
+         * Typical use-cases: 
          * - request additional data from database before returning to frontend for soft-join 
          */
         beforeDatasourceRequest?: BeforeDataSourceRequestFunction | Array<BeforeDataSourceRequestFunction>,
 
         /**
-         * Typical usecases:
+         * Typical use-cases:
          * - Transform value for some field for record returned from database before returning to frontend (minimize, sanitize, etc)
          * - If some-why you can't use `backendOnly` you can cleanup sensitive fields here
          * - Attach additional data to record before returning to frontend 
@@ -931,21 +931,22 @@ export type AdminForthResource = {
       },
       list?: {
         /**
-         * Typical usecases:
+         * Typical use-cases:
          * - add additional filters in addition to what user selected before fetching data from database.
          * - same as hooks.show.beforeDatasourceRequest 
          */
         beforeDatasourceRequest?: BeforeDataSourceRequestFunction | Array<BeforeDataSourceRequestFunction>,
 
         /**
-         * Typical usecases:
-         * - Same as hooks.show.afterDatasourceResponse but applied for each record in list
+         * Typical use-cases:
+         * - Same as hooks.show.afterDatasourceResponse but applied for all records returned from database for 
+         * showing in list view, e.g. add new field to each record in list view
          */
         afterDatasourceResponse?: AfterDataSourceResponseFunction | Array<AfterDataSourceResponseFunction>,
       },
       create?: {
         /**
-         * Typical usecases:
+         * Typical use-cases:
          * - Validate record before saving to database and interrupt execution if validation failed (`allowedActions.create` should be preferred in most cases)
          * - fill-in adminUser as creator of record
          * - Attach additional data to record before saving to database (mostly fillOnCreate should be used instead)
@@ -953,32 +954,32 @@ export type AdminForthResource = {
         beforeSave?: BeforeSaveFunction | Array<BeforeSaveFunction>,
 
         /**
-         * Typical usecases:
+         * Typical use-cases:
          * - Initiate some trigger after record saved to database (e.g sync to another datasource)
          */
         afterSave?: AfterSaveFunction | Array<AfterSaveFunction>,
       },
       edit?: {
         /**
-         * Typical usecases:
+         * Typical use-cases:
          * - Same as hooks.create.beforeSave but for edit page
          */
         beforeSave?: BeforeSaveFunction | Array<BeforeSaveFunction>,
 
         /**
-         * Typical usecases:
+         * Typical use-cases:
          * - Same as hooks.create.afterSave but for edit page
          */
         afterSave?: AfterSaveFunction | Array<AfterSaveFunction>,
       },
       delete?: {
         /**
-         * Typical usecases:
+         * Typical use-cases:
          * - Validate that record can be deleted and interrupt execution if validation failed (`allowedActions.delete` should be preferred in most cases)
          */
         beforeSave?: BeforeSaveFunction | Array<BeforeSaveFunction>,
         /**
-         * Typical usecases:
+         * Typical use-cases:
          * - Initiate some trigger after record deleted from database (e.g sync to another datasource)
          */
         afterSave?: BeforeSaveFunction | Array<BeforeSaveFunction>,
@@ -1043,6 +1044,14 @@ export type AdminForthResource = {
        */
       allowedActions?: AllowedActions,
 
+      /** 
+       * Allows to make groups of columns in create/edit resource pages.
+       */
+      createEditGroups?: {
+        groupName: string;
+        columns: string[];
+      }[];
+
       /** 
        * Page size for list view
        */
@@ -1293,6 +1302,11 @@ export type AdminForthConfig = {
        */
       brandName?: string,
 
+      /**
+       * Slug which will be used on tech side e.g. to store cookies separately.
+       * Created automatically from brandName if not set. 
+       */
+      _brandNameSlug?: string,
 
       /**
        * Whether to show brand name in sidebar

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div class="relative w-full">
 
     <component 
       v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.beforeBreadcrumbs || []"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div class="relative w-full">
     <component 
       v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.beforeBreadcrumbs || []"
       :is="getCustomComponent(c)"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div class="relative flex flex-col max-w-full w-full">
     <Teleport to="body">
       <Filters
         :columns="coreStore.resource?.columns"
@@ -116,11 +116,10 @@ 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';
-import { initFlowbite } from 'flowbite';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 
 
@@ -183,9 +182,7 @@ async function getList() {
     return row;
   });
   totalRows.value = data.total;
-  await new Promise(resolve => setTimeout(resolve, 0));
-  initFlowbite(); // for tooltips in table
-
+  await nextTick();
 }
 
 async function startBulkAction(actionId) {
@@ -246,8 +243,6 @@ async function init() {
     resourceId: route.params.resourceId
   });
 
-  initFlowbite();
-
   // !!! clear filters should be in same tick with sort assignment so that watch can catch it as one change
 
   // try to init filters from query params

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

@@ -1,5 +1,7 @@
 <template>
-  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4">
+  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4 flex" 
+    :class="limitHeightToPage ? 'h-[calc(100vh-3.5rem)]': undefined"
+  >
     <RouterView/>
   </div>
 </template>
@@ -9,9 +11,41 @@
 
 <script setup>
 
-
 import { useCoreStore } from '@/stores/core';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 
+const route = useRoute()
 const coreStore = useCoreStore()
 
+const limitHeightToPage = computed(() => {
+  if (route.name !== 'resource-list' ) {
+    return false;
+  }
+  // for mobile phones disable shrinking table at all because of the issues with HEADER and general UX
+  // use navigator.userAgent to detect mobile phones
+  if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
+    return false;
+  }
+
+  if (!coreStore.resource?.options?.pageInjections?.list) {
+    return true;
+  }
+  const listPageInjects = coreStore.resource.options.pageInjections.list;
+  console.log('asdcoreStore.resource', JSON.stringify(listPageInjects, null, 2))
+  
+  for (const pi of [listPageInjects.beforeBreadcrumbs, listPageInjects.afterBreadcrumbs, listPageInjects.bottom]) {
+    if (pi) {
+      for (const piItem of pi) {
+        if (!piItem.meta?.thinEnoughToShrinkTable) {
+          return false;
+        }
+      }
+    }
+  }
+
+  return true;
+
+})
+
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div class="relative w-full">
     <component 
       v-if="!loading"
       v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.beforeBreadcrumbs || []"
@@ -57,22 +57,23 @@
     </div>
     <div 
       v-else-if="coreStore.record"
-      class="relative overflow-x-auto rounded-default shadow-resourseFormShadow "
+      class="relative w-full overflow-x-auto rounded-default shadow-resourseFormShadow"
     >
-     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
-        <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
-            <tr>
-                <th scope="col" class="px-6 py-3">
-                    Field
-                </th>
-                <th scope="col" class="px-6 py-3 w-5/6">
-                    Value
-                </th>
-            </tr>
+     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 table-fixed">
+      <!-- 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:w-52 md:table-cell">
+                Field
+            </th>
+            <th scope="col" class="px-6 py-3 hidden md:table-cell">
+                Value
+            </th>
+          </tr>
         </thead>
         <tbody>
             <tr v-for="column,i in coreStore.resource?.columns.filter(c => c.showIn.includes('show'))" :key="column.name"
-              class="bg-lightForm bg-darkForm odd:dark:bg-gray-900 even:dark:bg-gray-800 dark:border-gray-700"
+              class="bg-lightForm bg-darkForm odd:dark:bg-gray-900 even:dark:bg-gray-800 dark:border-gray-700 block md:table-row"
               :class="{ 'border-b': i !== coreStore.resource.columns.filter(c => c.showIn.includes('show')).length - 1 }"
             >
               <component
@@ -84,10 +85,10 @@
                   :record="coreStore.record"
               />
               <template v-else>
-                <td class="px-6 py-4 whitespace-nowrap "> <!--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/dist/types/AdminForthConfig.d.ts

@@ -883,12 +883,12 @@ export type AdminForthResource = {
     hooks?: {
         show?: {
             /**
-             * Typical usecases:
+             * Typical use-cases:
              * - request additional data from database before returning to frontend for soft-join
              */
             beforeDatasourceRequest?: BeforeDataSourceRequestFunction | Array<BeforeDataSourceRequestFunction>;
             /**
-             * Typical usecases:
+             * Typical use-cases:
              * - Transform value for some field for record returned from database before returning to frontend (minimize, sanitize, etc)
              * - If some-why you can't use `backendOnly` you can cleanup sensitive fields here
              * - Attach additional data to record before returning to frontend
@@ -897,51 +897,52 @@ export type AdminForthResource = {
         };
         list?: {
             /**
-             * Typical usecases:
+             * Typical use-cases:
              * - add additional filters in addition to what user selected before fetching data from database.
              * - same as hooks.show.beforeDatasourceRequest
              */
             beforeDatasourceRequest?: BeforeDataSourceRequestFunction | Array<BeforeDataSourceRequestFunction>;
             /**
-             * Typical usecases:
-             * - Same as hooks.show.afterDatasourceResponse but applied for each record in list
+             * Typical use-cases:
+             * - Same as hooks.show.afterDatasourceResponse but applied for all records returned from database for
+             * showing in list view, e.g. add new field to each record in list view
              */
             afterDatasourceResponse?: AfterDataSourceResponseFunction | Array<AfterDataSourceResponseFunction>;
         };
         create?: {
             /**
-             * Typical usecases:
+             * Typical use-cases:
              * - Validate record before saving to database and interrupt execution if validation failed (`allowedActions.create` should be preferred in most cases)
              * - fill-in adminUser as creator of record
              * - Attach additional data to record before saving to database (mostly fillOnCreate should be used instead)
              */
             beforeSave?: BeforeSaveFunction | Array<BeforeSaveFunction>;
             /**
-             * Typical usecases:
+             * Typical use-cases:
              * - Initiate some trigger after record saved to database (e.g sync to another datasource)
              */
             afterSave?: AfterSaveFunction | Array<AfterSaveFunction>;
         };
         edit?: {
             /**
-             * Typical usecases:
+             * Typical use-cases:
              * - Same as hooks.create.beforeSave but for edit page
              */
             beforeSave?: BeforeSaveFunction | Array<BeforeSaveFunction>;
             /**
-             * Typical usecases:
+             * Typical use-cases:
              * - Same as hooks.create.afterSave but for edit page
              */
             afterSave?: AfterSaveFunction | Array<AfterSaveFunction>;
         };
         delete?: {
             /**
-             * Typical usecases:
+             * Typical use-cases:
              * - Validate that record can be deleted and interrupt execution if validation failed (`allowedActions.delete` should be preferred in most cases)
              */
             beforeSave?: BeforeSaveFunction | Array<BeforeSaveFunction>;
             /**
-             * Typical usecases:
+             * Typical use-cases:
              * - Initiate some trigger after record deleted from database (e.g sync to another datasource)
              */
             afterSave?: BeforeSaveFunction | Array<BeforeSaveFunction>;
@@ -999,6 +1000,13 @@ export type AdminForthResource = {
          *
          */
         allowedActions?: AllowedActions;
+        /**
+         * Allows to make groups of columns in create/edit resource pages.
+         */
+        createEditGroups?: {
+            groupName: string;
+            columns: string[];
+        }[];
         /**
          * Page size for list view
          */
@@ -1221,6 +1229,11 @@ export type AdminForthConfig = {
          * Your app name
          */
         brandName?: string;
+        /**
+         * Slug which will be used on tech side e.g. to store cookies separately.
+         * Created automatically from brandName if not set.
+         */
+        _brandNameSlug?: string;
         /**
          * Whether to show brand name in sidebar
          * default is true