feat: implement bulk actions floating bar in place of pagination for checked rows

Author: yaroslav8765

adminforth/design/system-concepts.md

@@ -48,7 +48,11 @@ Below `sm` (640px) a Dialog or Modal docks to the bottom edge as a sheet: full w
 
 A page gets less than the screen: the sidebar and the agent panel squeeze it on wide screens too. Layouts which stack follow their container with Tailwind container queries (`@container` on the parent, `@4xl:` on children), not the viewport with `md:` or `lg:`. Such a grid gets `grid-cols-1` as its base, otherwise a wide chart or table stretches its single column past the page.
 
-The header of the list page is a container named `header`. Below 896px (`@4xl/header`) components from `beforeActionButtons` take a full row under the title and the buttons, from 896px all share one row. Below 512px (`@lg/header`) Home and Filter keep only their icons. Such a component fills its row and takes a fixed width from `@4xl/header:`, like the fields of quick-filters. Bulk actions of checked rows take a row of their own above the table, so the buttons next to the title never move.
+The header of the list page is a container named `header`. Below 896px (`@4xl/header`) components from `beforeActionButtons` take a full row under the title and the buttons, from 896px all share one row. Below 512px (`@lg/header`) Home and Filter keep only their icons. Such a component fills its row and takes a fixed width from `@4xl/header:`, like the fields of quick-filters.
+
+## Bulk actions bar
+
+Checking rows never moves the table or the header and never changes the height of the table. Bulk actions of checked rows show up in a dark floating bar in place of the pagination: the pagination turns invisible and keeps its room, changing the page drops the checked rows anyway. The bar takes no room itself and sticks to the bottom of the screen over a long table. It holds the count, the actions as ghost buttons, Clear. All actions stay in sight, no sideways scroll: on a narrow screen they wrap between the count and Clear, left aligned, and the bar grows up over the last rows. The bar is an ink layer like a tooltip and takes the `Tooltip*` tokens, so it is light in the dark theme. A destructive action on it takes the `Danger` token of the opposite theme.
 
 ## Field tables
 

adminforth/design/system.html

@@ -438,6 +438,21 @@
 :where(#list) .dr>.dc:nth-child(9){flex-basis:104px}
 :where(#list) .dr>.dc:nth-child(10){flex-basis:120px}
 :where(#list) .dr>.dc:nth-child(11){flex-basis:136px}
+/* the bar takes the place of the invisible pagination: a zero-height sticky line under it, the negative margin cancels the gap of the column */
+:where(#list) .bulk-bar-wrap{position:sticky;bottom:16px;z-index:3;height:0;margin-top:-16px}
+:where(#list) .bulk-bar-row{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:0 16px}
+/* all actions stay in sight: on a narrow screen they wrap between the count and Clear, the dividers take their height */
+:where(#list) .bulk-bar{display:flex;align-items:center;gap:4px;max-width:100%;padding:4px 4px 4px 14px;border-radius:8px;background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow-pop)}
+:where(#list) .bulk-bar .count{flex:none;margin-right:6px;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
+:where(#list) .bulk-bar .vr{flex:none;align-self:stretch;width:1px;margin:4px;background:color-mix(in oklab,var(--on-ink) 20%,transparent)}
+:where(#list) .bulk-bar .acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
+:where(#list) .bulk-bar .af-bulk-actions-clear-button{flex:none}
+:where(#list) .bulk-bar .btn,:where(#list) .bulk-bar .btn:hover{color:var(--on-ink)}
+:where(#list) .bulk-bar .btn:hover{background:color-mix(in oklab,var(--on-ink) 10%,transparent)}
+:where(#list) .bulk-bar .btn .i{color:inherit}
+/* the bar inverts with the theme, a destructive action takes the danger color of the opposite one */
+:where(#list) .bulk-bar .btn.is-danger{color:#FF9592}
+:where(#list) .dark .bulk-bar .btn.is-danger{color:#B42318}
 
 :where(#create) a{color:inherit}
 :where(#create) a:hover{color:inherit}
@@ -1211,6 +1226,54 @@ <h1 class="t-title">Car - SQLite</h1>
 
 
 
+</div>
+  </div>
+  <!-- the bottom of the list with checked rows: the bar of bulk actions takes the place of the pagination, which turns invisible and keeps its room -->
+  <div class="ds-frame" style="margin-top: 16px">
+<div class="af" style="--accent: #16537E; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px">
+    <div class="tbl-box">
+      <div class="tbl-scroll">
+        <div class="dt" role="table" aria-label="Cars">
+          <div class="dbody">
+              <div class="dr is-sel" role="row">
+                <div class="dc" role="cell"><input class="cb" type="checkbox" aria-label="Select row" checked></div>
+                <div class="dc" role="cell"><span class="mono t-muted">b71e0d93</span></div>
+                <div class="dc" role="cell"><a class="link-u" href="#" style="font-weight: 500">Borealis Aurora X</a></div>
+                <div class="dc r num" role="cell" style="color: var(--text)">$8,950</div>
+                <div class="dc" role="cell">Hybrid</div>
+                <div class="dc r num" role="cell">218 hp</div>
+                <div class="dc num" role="cell">2024</div>
+                <div class="dc" role="cell"><span class="badge badge-success"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>Yes</span></div>
+                <div class="dc r num" role="cell">6,120 km</div>
+                <div class="dc t-muted" role="cell">Oct 14, 2026</div>
+                <div class="dc r" role="cell">
+                  <span class="row-actions">
+                    <a class="btn btn-ghost btn-icon btn-sm" href="#" aria-label="Show"><svg class="i af-show-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg></a>
+                    <a class="btn btn-ghost btn-icon btn-sm" href="#" aria-label="Edit"><svg class="i af-edit-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg></a>
+                    <button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Delete"><svg class="i af-delete-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg></button>
+                    <button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="More"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button>
+                  </span>
+                </div>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="af-pagination-container" style="visibility: hidden; height: 28px" aria-hidden="true"></div>
+    <div class="bulk-bar-wrap af-bulk-actions-bar-container">
+      <div class="bulk-bar-row">
+        <div class="bulk-bar af-bulk-actions-bar" role="toolbar" aria-label="Bulk actions">
+          <span class="count af-bulk-actions-count">1 selected</span>
+          <span class="vr" aria-hidden="true"></span>
+          <div class="acts">
+            <button class="btn btn-ghost btn-sm af-bulk-action-button" type="button"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path></svg>Generate description</button>
+            <button class="btn btn-ghost btn-sm af-bulk-action-button is-danger" type="button"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>Delete</button>
+          </div>
+          <span class="vr" aria-hidden="true"></span>
+          <button class="btn btn-ghost btn-sm af-bulk-actions-clear-button" type="button"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>Clear</button>
+        </div>
+      </div>
+    </div>
 </div>
   </div>
 </section>

adminforth/spa/src/components/BreadcrumbsWithButtons.vue

@@ -9,10 +9,6 @@
         <div v-if="$slots.filters" class="order-last basis-full flex flex-wrap items-center gap-2 @4xl/header:order-none @4xl/header:basis-auto @4xl/header:ms-auto">
           <slot name="filters"></slot>
         </div>
-        <!-- actions for the checked rows get a row of their own above the table, so the buttons next to the title stay in place -->
-        <div v-if="$slots.selection" class="order-last basis-full flex flex-wrap items-center gap-2">
-          <slot name="selection"></slot>
-        </div>
         <div class="flex items-center gap-2 flex-wrap">
           <slot></slot>
         </div>

adminforth/spa/src/components/ResourceListTable.vue

@@ -273,8 +273,9 @@
   </div>
   <!-- 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)
+  hidden pagination keeps its room, e.g. the bar of checked rows covers it
   -->
-  <div class="af-pagination-container flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
+  <div class="af-pagination-container flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3" :class="{ invisible: hidePagination }">
 
     <!-- one hairline frame around 26px buttons split by lighter dividers, the current page is an inset field -->
     <div class="af-pagination-buttons-container af-button-shadow inline-flex overflow-hidden rounded-default border border-lightListTablePaginationBorder bg-lightListTablePaginationBackgoround divide-x rtl:divide-x-reverse divide-lightListTablePaginationBorder/60 dark:border-darkListTablePaginationBorder dark:bg-darkListTablePaginationBackgoround dark:divide-darkListTablePaginationBorder/60"
@@ -433,6 +434,7 @@ const props = withDefaults(defineProps<{
   checkboxes: any[],
   sort: any[],
   noRoundings?: boolean,
+  hidePagination?: boolean,
   customActionsInjection?: any[],
   tableBodyStartInjection?: any[],
   containerHeight?: number,

adminforth/spa/src/views/ListView.vue

@@ -32,65 +32,6 @@
           :clearCheckboxes="clearCheckboxes"
         />
       </template>
-      <template v-if="isResourceReady && checkboxes.length" #selection>
-        <Button
-          @click="()=>{checkboxes = []}"
-          variant="secondary"
-          iconOnly
-        >
-            <Tooltip>
-              <IconBan class="w-4 h-4"/>
-                <template #tooltip >
-                    Remove selection
-                </template>
-            </Tooltip>
-        </Button>
-
-        <div 
-          v-for="(action,i) in coreStore.resource?.options?.bulkActions?.filter(a => !a.showInThreeDotsDropdown)" 
-        >
-          <Button
-            :key="action.id"
-            @click="startBulkActionInner(action.id!)"
-            class="h-[2.125rem] px-2.5"
-            :class="action.buttonCustomCssClass || ''"
-            variant="secondary"
-          >
-            <component
-              v-if="action.icon && !bulkActionLoadingStates[action.id!]"
-              :is="getIcon(action.icon)"
-              class="w-4 h-4 transition duration-75"></component>
-              <Spinner
-                v-if="bulkActionLoadingStates[action.id!]"
-                class="w-4 h-4"
-              />
-            {{ `${action.label} (${checkboxes.length})` }}
-            <div v-if="action.badge" class="inline-flex items-center h-[1.125rem] px-1.5 ml-1 rounded-full bg-purple-600 text-white text-[11px] font-semibold">
-              {{ action.badge }}
-            </div>
-          </Button>
-        </div>
-        <div
-          v-for="(action,i) in coreStore.resource?.options?.actions?.filter(a => a.showIn?.bulkButton)" 
-        >
-          <Button
-            :key="action.id"
-            @click="startCustomBulkActionInner(action.id!)"
-            class="h-[2.125rem] px-2.5"
-            variant="secondary"
-          >
-            <component
-              v-if="action.icon && !customActionLoadingStates[action.id!]"
-              :is="getIcon(action.icon)"
-              class="w-4 h-4 transition duration-75"></component>
-              <Spinner
-                v-if="customActionLoadingStates[action.id!]"
-                class="w-4 h-4"
-              />
-              {{ `${action.name} (${checkboxes.length})` }}
-          </Button>
-        </div>
-      </template>
       <template v-if="isResourceReady">
         <LinkButton v-if="coreStore.resource?.options?.allowedActions?.create"
           :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
@@ -183,8 +124,77 @@
       :item-height="52.5"
       :buffer-size="listBufferSize"
       :isVirtualScrollEnabled="isVirtualScrollEnabled"
+      :hidePagination="checkboxes.length > 0"
     />
 
+    <Transition
+      enter-from-class="opacity-0 translate-y-2"
+      enter-active-class="transition duration-150 ease-out"
+      leave-active-class="transition duration-100 ease-in"
+      leave-to-class="opacity-0 translate-y-2"
+    >
+      <!--
+        the bar of checked rows takes the place of the pagination, which keeps its room: changing the page drops the checked rows anyway.
+        So it takes no room itself and covers no rows, over a long table it sticks to the bottom of the screen.
+        All actions stay in sight: on a narrow screen they wrap between the count and Clear, and the bar grows up over the last rows
+      -->
+      <div v-if="isResourceReady && checkboxes.length" class="af-bulk-actions-bar-container sticky bottom-4 z-30 h-0">
+        <div class="absolute inset-x-0 bottom-0 flex justify-center px-4 pointer-events-none">
+          <div
+            role="toolbar"
+            :aria-label="$t('Bulk actions')"
+            class="af-bulk-actions-bar pointer-events-auto flex items-center gap-1 max-w-full p-1 ps-3.5 rounded-lg bg-lightTooltipBackground text-lightTooltipText shadow-popover dark:bg-darkTooltipBackground dark:text-darkTooltipText dark:shadow-darkPopover"
+          >
+            <span class="af-bulk-actions-count shrink-0 me-1.5 text-[13px] font-medium tabular-nums whitespace-nowrap">{{ $t('{count} selected', { count: checkboxes.length }) }}</span>
+            <!-- dividers take the height of the wrapped actions -->
+            <span class="shrink-0 self-stretch w-px my-1 mx-1 bg-lightTooltipText/20 dark:bg-darkTooltipText/20" aria-hidden="true"></span>
+            <div class="flex flex-wrap items-center gap-1">
+              <Button
+                v-for="action in coreStore.resource?.options?.bulkActions?.filter(a => !a.showInThreeDotsDropdown)"
+                :key="action.id"
+                @click="startBulkActionInner(action.id!)"
+                :loader="bulkActionLoadingStates[action.id!]"
+                variant="ghost"
+                size="sm"
+                class="af-bulk-action-button"
+                :class="[BULK_BAR_BUTTON_CLASSES, action.dangerous && BULK_BAR_DANGER_CLASSES, action.buttonCustomCssClass]"
+              >
+                <component v-if="action.icon && !bulkActionLoadingStates[action.id!]" :is="getIcon(action.icon)" class="w-4 h-4" />
+                {{ action.label }}
+                <span v-if="action.badge" class="inline-flex items-center h-[1.125rem] px-1.5 rounded-full text-[11px] font-semibold bg-lightPrimary text-lightPrimaryContrast dark:bg-darkPrimary dark:text-darkPrimaryContrast">
+                  {{ action.badge }}
+                </span>
+              </Button>
+              <Button
+                v-for="action in coreStore.resource?.options?.actions?.filter(a => a.showIn?.bulkButton)"
+                :key="action.id"
+                @click="startCustomBulkActionInner(action.id!)"
+                :loader="customActionLoadingStates[action.id!]"
+                variant="ghost"
+                size="sm"
+                class="af-bulk-action-button"
+                :class="[BULK_BAR_BUTTON_CLASSES, action.bulkDangerous && BULK_BAR_DANGER_CLASSES]"
+              >
+                <component v-if="action.icon && !customActionLoadingStates[action.id!]" :is="getIcon(action.icon)" class="w-4 h-4" />
+                {{ action.name }}
+              </Button>
+            </div>
+            <span class="shrink-0 self-stretch w-px my-1 mx-1 bg-lightTooltipText/20 dark:bg-darkTooltipText/20" aria-hidden="true"></span>
+            <Button
+              @click="clearCheckboxes"
+              variant="ghost"
+              size="sm"
+              class="af-bulk-actions-clear-button shrink-0"
+              :class="BULK_BAR_BUTTON_CLASSES"
+            >
+              <IconX class="w-4 h-4" />
+              {{ $t('Clear') }}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
     <component 
       v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.bottom as AdminForthComponentDeclaration[] || []"
       :is="getCustomComponent(formatComponent(c))"
@@ -207,12 +217,11 @@ import { computed, onMounted, onUnmounted, ref, watch, type Ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { getCustomComponent, getList, startBulkAction, lsKey } from '@/utils';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
-import { Tooltip, Spinner, Button, LinkButton } from '@/afcl'
+import { Button, LinkButton } from '@/afcl'
 import type { AdminForthComponentDeclaration, AdminForthComponentDeclarationFull, AdminForthFilterOperators, AdminForthResourceColumnCommon } from '@/types/Common';
 import { useI18n } from 'vue-i18n';
 
 import {
-  IconBan,
   IconListFilter,
   IconPlus,
   IconX
@@ -233,6 +242,11 @@ const route = useRoute();
 const isResourceReady = computed(() => coreStore.resource?.resourceId === route.params.resourceId);
 const beforeActionButtons = computed(() => (coreStore.resourceOptions?.pageInjections?.list?.beforeActionButtons || []) as AdminForthComponentDeclaration[]);
 
+// ghost buttons on the bar of checked rows take its text color, the bar is dark in the light theme and light in the dark one
+const BULK_BAR_BUTTON_CLASSES = 'text-lightTooltipText hover:bg-lightTooltipText/10 hover:text-lightTooltipText dark:text-darkTooltipText dark:hover:bg-darkTooltipText/10 dark:hover:text-darkTooltipText';
+// so a destructive action on it takes the danger color of the opposite theme
+const BULK_BAR_DANGER_CLASSES = 'text-darkDanger hover:text-darkDanger dark:text-lightDanger dark:hover:text-lightDanger';
+
 const page = ref(1);
 const columnsMinMax = ref({});
 const sort = ref();

documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -805,7 +805,7 @@ The header lays out by its own width, not by the width of the screen, because th
 - below 896px the injected components take a full row under the title and the buttons;
 - from 896px the title, the injected components and the buttons share one row, the components stand to the left of the buttons.
 
-Buttons of bulk actions show up in a row of their own above the table when rows are checked, so they never push the components or the buttons around.
+Buttons of bulk actions show up in a floating bar in place of the pagination when rows are checked, so they never push the components, the buttons or the table around.
 
 The header is a Tailwind [size container](https://github.com/tailwindlabs/tailwindcss-container-queries) named `header`, so a component can follow it with `@4xl/header:` variants. For example, a search input fills its row on a narrow header and gets a fixed width in the single row of a wide one: