adminforth 2.17.0-next.9 → 2.17.1

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

@@ -119,8 +119,8 @@
             />
           </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">
-              <Tooltip>
+            <div class="flex text-lightPrimary dark:text-darkPrimary items-center gap-2">
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('show')">
                 <RouterLink
                   v-if="resource.options?.allowedActions?.show"
                   :to="{ 
@@ -139,8 +139,7 @@
                   {{ $t('Show item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('edit')" >
                 <RouterLink
                   v-if="resource.options?.allowedActions?.edit"
                   :to="{ 
@@ -157,8 +156,7 @@
                   {{ $t('Edit item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('delete')">
                 <button
                   v-if="resource.options?.allowedActions?.delete"
                   @click="deleteRecord(row)"
@@ -170,7 +168,6 @@
                   {{ $t('Delete item') }}
                 </template>
               </Tooltip>
-                
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -185,7 +182,7 @@
 
               <template v-if="resource.options?.actions">
                 <Tooltip
-                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)"
                   :key="action.id"
                 >
                     <component
@@ -198,12 +195,13 @@
                     >
                       <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"
                         :disabled="rowActionLoadingStates?.[action.id]"
                       >
                         <component
                           v-if="action.icon"
                           :is="getIcon(action.icon)"
-                          class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"
+                          class="w-6 h-6 text-lightPrimary dark:text-darkPrimary"
                         />
                       </button>
                     </component>
@@ -213,6 +211,16 @@
                   </template>
                 </Tooltip>
               </template>
+              <ListActionsThreeDots
+                v-if="showListActionsThreeDots"
+                :resourceOptions="resource?.options"
+                :record="row"
+                :updateRecords="()=>emits('update:records', true)"
+                :deleteRecord="deleteRecord"
+                :resourceId="resource.resourceId"
+                :startCustomAction="startCustomAction"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+              />
             </div>
             
           </td>
@@ -323,24 +331,23 @@ import { useCoreStore } from '@/stores/core';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
 import { getIcon } from '@/utils';
-import {
-  IconInboxOutline,
-} from '@iconify-prerendered/vue-flowbite';
-
 import {
   IconEyeSolid,
   IconPenSolid,
   IconTrashBinSolid,
+  IconInboxOutline
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
 import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
+import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const coreStore = useCoreStore();
 const { t } = useI18n();
+const { alert, confirm } = useAdminforth();
 const props = defineProps<{
   page: number,
   resource: AdminForthResourceCommon | null,
@@ -352,6 +359,7 @@ const props = defineProps<{
   noRoundings?: boolean,
   customActionsInjection?: any[],
   tableBodyStartInjection?: any[],
+  customActionIconsThreeDotsMenuItems?: any[]
   tableRowReplaceInjection?: AdminForthComponentDeclaration,
 }>();
 
@@ -369,6 +377,12 @@ const pageInput = ref('1');
 const page = ref(1);
 const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 
+const showListActionsThreeDots = computed(() => {
+  return  props.resource?.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) // show if any action is set to show in three dots menu
+    || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) // or if there are custom action icons for three dots menu
+    || !props.resource?.options.baseActionsAsQuickIcons // or if there is no baseActionsAsQuickIcons
+    || (props.resource?.options.baseActionsAsQuickIcons && props.resource?.options.baseActionsAsQuickIcons.length < 3) // if there all 3 base actions are shown as quick icons - hide three dots icon
+})
 
 const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
 const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.totalRows));
@@ -530,7 +544,7 @@ async function onClick(e: any, row: any) {
 }
 
 async function deleteRecord(row: any) {
-  const data = await adminforth.confirm({
+  const data = await confirm({
     message: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
     no: t('Cancel'),
@@ -596,7 +610,7 @@ async function startCustomAction(actionId: string, row: any, extraData: Record<s
     emits('update:records', true);
 
     if (data.successMessage) {
-      adminforth.alert({
+      alert({
         message: data.successMessage,
         variant: 'success'
       });

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

@@ -129,8 +129,8 @@
             />
           </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">
-              <Tooltip>
+            <div class="flex text-lightPrimary dark:text-darkPrimary items-center gap-2">
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('show')">
                 <RouterLink
                   v-if="resource.options?.allowedActions?.show"
                   :to="{ 
@@ -142,15 +142,14 @@
                   }"
 
                 >
-                  <IconEyeSolid class="w-5 h-5 me-2"/>
+                  <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
                 </RouterLink>
 
                 <template v-slot:tooltip>
                   {{ $t('Show item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('edit')" >
                 <RouterLink
                   v-if="resource.options?.allowedActions?.edit"
                   :to="{ 
@@ -161,26 +160,24 @@
                     }
                   }"
                 >
-                  <IconPenSolid class="w-5 h-5 me-2"/>
+                  <IconPenSolid class="af-edit-icon w-5 h-5 me-2"/>
                 </RouterLink>
                 <template v-slot:tooltip>
                   {{ $t('Edit item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('delete')">
                 <button
                   v-if="resource.options?.allowedActions?.delete"
                   @click="deleteRecord(row)"
                 >
-                  <IconTrashBinSolid class="w-5 h-5 me-2"/>
+                  <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
                 </button>
 
                 <template v-slot:tooltip>
                   {{ $t('Delete item') }}
                 </template>
-              </Tooltip>
-                
+              </Tooltip>                
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -192,10 +189,9 @@
                   :updateRecords="()=>emits('update:records', true)"
                 />
               </template>
-
-                            <template v-if="resource.options?.actions">
+              <template v-if="resource.options?.actions">
                 <Tooltip
-                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)"
                   :key="action.id"
                 >
                   <CallActionWrapper
@@ -212,12 +208,13 @@
                     >
                       <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"
                         :disabled="rowActionLoadingStates?.[action.id]"
                       >
                         <component
                           v-if="action.icon"
                           :is="getIcon(action.icon)"
-                          class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"
+                          class="w-6 h-6 text-lightPrimary dark:text-darkPrimary"
                         />
                       </button>
                     </component>
@@ -228,6 +225,16 @@
                   </template>
                 </Tooltip>
               </template>
+              <ListActionsThreeDots
+                v-if="showListActionsThreeDots"
+                :resourceOptions="resource?.options"
+                :record="row"
+                :updateRecords="()=>emits('update:records', true)"
+                :deleteRecord="deleteRecord"
+                :resourceId="resource.resourceId"
+                :startCustomAction="startCustomAction"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+              />
             </div>
           </td>
         </component>
@@ -357,12 +364,14 @@ import {
 import router from '@/router';
 import { Tooltip } from '@/afcl';
 import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
+import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const coreStore = useCoreStore();
 const { t } = useI18n();
+const { alert, confirm } = useAdminforth();
 const props = defineProps<{
   page: number,
   resource: AdminForthResourceCommon | null,
@@ -377,6 +386,7 @@ const props = defineProps<{
   containerHeight?: number,
   itemHeight?: number,
   bufferSize?: number,
+  customActionIconsThreeDotsMenuItems?: any[]
   tableRowReplaceInjection?: AdminForthComponentDeclaration
 }>();
 
@@ -394,6 +404,12 @@ const pageInput = ref('1');
 const page = ref(1);
 const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 
+const showListActionsThreeDots = computed(() => {
+  return  props.resource?.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) // show if any action is set to show in three dots menu
+    || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) // or if there are custom action icons for three dots menu
+    || !props.resource?.options.baseActionsAsQuickIcons // or if there is no baseActionsAsQuickIcons
+    || (props.resource?.options.baseActionsAsQuickIcons && props.resource?.options.baseActionsAsQuickIcons.length < 3) // if there all 3 base actions are shown as quick icons - hide three dots icon
+})
 
 const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
 const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.totalRows));
@@ -555,7 +571,7 @@ async function onClick(e: any,row: any) {
 }
 
 async function deleteRecord(row: any) {
-  const data = await adminforth.confirm({
+  const data = await confirm({
     message: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
     no: t('Cancel'),
@@ -620,7 +636,7 @@ async function startCustomAction(actionId: string, row: any, extraData: Record<s
     emits('update:records', true);
 
     if (data.successMessage) {
-      adminforth.alert({
+      alert({
         message: data.successMessage,
         variant: 'success'
       });

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

@@ -299,7 +299,9 @@ import { IconCloseSidebarSolid, IconOpenSidebarSolid } from '@iconify-prerendere
 import { getIcon, verySimpleHash, loadFile, getCustomComponent } from '@/utils';
 import { Tooltip } from '@/afcl';
 import type { AnnouncementBadgeResponse } from '@/types/Common';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
+const { menu } = useAdminforth();
 
 interface Props {
   sideBarOpen: boolean;
@@ -424,7 +426,7 @@ function closeCTA() {
   nextTick( async() => {
     emit('loadMenu');
     await coreStore.fetchMenuBadges();
-    adminforth.menu.refreshMenuBadges();
+    menu.refreshMenuBadges();
   })
 }
 

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

@@ -13,27 +13,35 @@
     <!-- Dropdown menu -->
     <div 
       ref="dropdownRef"
-      :class="{'hidden': !showDropdown, 'block': showDropdown }"
-      class="absolute z-30 right-0 mt-3 bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600">
+      :class="{
+        'block': showDropdown,
+        'hidden': !showDropdown,
+        'left-0 md:left-auto': checkboxes && checkboxes.length > 0
+      }"
+      class="absolute z-30 mt-3 bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600 right-0">
         <ul class="py-2 text-sm text-lightThreeDotsMenuBodyText dark:text-darkThreeDotsMenuBodyText" aria-labelledby="dropdownMenuIconButton">
           <li v-for="(item, i) in threeDotsDropdownItems" :key="`dropdown-item-${i}`">
-            <a  href="#" 
-              class="block px-4 py-2 hover:bg-lightThreeDotsMenuBodyBackgroundHover hover:text-lightThreeDotsMenuBodyTextHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
+            <div  
+              class="block hover:bg-lightThreeDotsMenuBodyBackgroundHover hover:text-lightThreeDotsMenuBodyTextHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
               :class="{
                 'pointer-events-none': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
                 'opacity-50': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
                 'cursor-not-allowed': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
               }"
-              @click="injectedComponentClick(i)">
-              <component :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)"
-                :meta="item.meta" 
-                :resource="coreStore.resource" 
-                :adminUser="coreStore.adminUser"
-                :checkboxes="checkboxes"
-                :updateList="props.updateList"
-                :clearCheckboxes="clearCheckboxes"
-              />
-            </a>
+              @click="injectedComponentClick(i)"
+            >
+              <div class="wrapper">
+                <component 
+                  :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)"
+                  :meta="item.meta" 
+                  :resource="coreStore.resource" 
+                  :adminUser="coreStore.adminUser"
+                  :checkboxes="checkboxes"
+                  :updateList="props.updateList"
+                  :clearCheckboxes="clearCheckboxes"
+                />
+              </div>
+            </div>
           </li>
           <li v-for="action in customActions" :key="action.id">
             <component
@@ -80,7 +88,7 @@
 <script setup lang="ts">
 import { getCustomComponent, getIcon } from '@/utils';
 import { useCoreStore } from '@/stores/core';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
@@ -88,7 +96,7 @@ import { ref, type ComponentPublicInstance, onMounted, onUnmounted } from 'vue';
 import type { AdminForthBulkActionCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
 import type { AdminForthActionInput } from '@/types/Back';
 
-
+const { list, alert} = useAdminforth();
 const route = useRoute();
 const coreStore = useCoreStore();
 const router = useRouter();
@@ -119,7 +127,7 @@ function setComponentRef(el: ComponentPublicInstance | null, index: number) {
 }
 
 async function handleActionClick(action: AdminForthActionInput, payload: any) {
-  adminforth.list.closeThreeDotsDropdown();
+  list.closeThreeDotsDropdown();
   
   const actionId = action.id;
   const data = await callAdminForthApi({
@@ -156,7 +164,7 @@ async function handleActionClick(action: AdminForthActionInput, payload: any) {
     });
 
     if (data.successMessage) {
-      adminforth.alert({
+      alert({
         message: data.successMessage,
         variant: 'success'
       });
@@ -164,7 +172,7 @@ async function handleActionClick(action: AdminForthActionInput, payload: any) {
   }
   
   if (data?.error) {
-    adminforth.alert({
+    alert({
       message: data.error,
       variant: 'danger'
     });
@@ -172,7 +180,7 @@ async function handleActionClick(action: AdminForthActionInput, payload: any) {
 }
 
 function startBulkAction(actionId: string) {
-  adminforth.list.closeThreeDotsDropdown();
+  list.closeThreeDotsDropdown();
   emit('startBulkAction', actionId);
   showDropdown.value = false;
 }
@@ -206,3 +214,10 @@ onUnmounted(() => {
 })
 
 </script>
+
+<style lang="scss" scoped>
+  .wrapper > * {
+    @apply px-4 py-2;
+  }
+</style>
+

package/dist/spa/src/composables/useFrontendApi.ts

@@ -1,17 +1,21 @@
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
 
 export function showSuccesTost(message: string) {
-  adminforth.alert({ message, variant: 'success' });  
+  const { alert } = useAdminforth();
+  alert({ message, variant: 'success' });  
   return message;
 }
 
 export function showWarningTost(message: string) {
-  adminforth.alert({ message, variant: 'warning' });  
+  const { alert } = useAdminforth();
+  alert({ message, variant: 'warning' });  
   return message;
 }
 
 export function showErrorTost(message: string, timeout?: number) {
-  adminforth.alert({ message, variant: 'danger', timeout: timeout || 30});  
+  const { alert } = useAdminforth();
+  alert({ message, variant: 'danger', timeout: timeout || 30});  
   return message;
 }
 

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

@@ -15,10 +15,11 @@
 import { computed, ref, onMounted, nextTick } from 'vue';
 import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
 import Tooltip from '@/afcl/Tooltip.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
+const { alert } = useAdminforth();
 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];
@@ -34,7 +35,7 @@ const id = ref();
 
 function copyToCB() {
   navigator.clipboard.writeText(props.record[props.column.name]);
-  adminforth.alert({
+  alert({
     message: t('ID copied to clipboard'),
     variant: 'success',
   })

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

@@ -15,10 +15,11 @@
 import { computed, ref, onMounted, nextTick } from 'vue';
 import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
 import Tooltip from '@/afcl/Tooltip.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
+const { alert } = useAdminforth();
 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];
@@ -34,7 +35,7 @@ const id = ref();
 
 function copyToCB() {
   navigator.clipboard.writeText(props.record[props.column.name]);
-  adminforth.alert({
+  alert({
     message: t('ID copied to clipboard'),
     variant: 'success',
   })

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

@@ -2,12 +2,13 @@ import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { callAdminForthApi } from '@/utils';
 import websocket from '@/websocket';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 
 import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, GetBaseConfigResponse, ResourceVeryShort, AdminUser, UserData, AdminForthConfigMenuItem, AdminForthConfigForFrontend } from '@/types/Common';
 import type { Ref } from 'vue'
 
 export const useCoreStore = defineStore('core', () => {
+  const { alert } = useAdminforth();
   const resourceById: Ref<Record<string, ResourceVeryShort>> = ref({});
   const theme: Ref<'light'| 'dark'> = ref(window.localStorage.getItem('af__theme') as ('light'|'dark') || 'light');
 
@@ -157,7 +158,7 @@ export const useCoreStore = defineStore('core', () => {
     });
 
     if (respData.error) {
-      adminforth.alert({
+      alert({
         message: respData.error,
         variant: 'danger',
         timeout: 30,