@xy-planning-network/trees 0.11.6-dev-4 → 0.11.6-dev-6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.11.6-dev-4",
+  "version": "0.11.6-dev-6",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",

package/src/lib-components/lists/DynamicTable.vue

@@ -45,9 +45,7 @@ const loadAndRender = (): void => {
     q: query.value,
   }
 
-  if (!selectionsPersisted.value) {
-    clearSelections()
-  }
+  clearSelections()
 
   BaseAPI.get<TrailsRespPaged<unknown>>(
     props.tableOptions.url,
@@ -140,10 +138,6 @@ const hasContent = computed((): boolean => {
   return rows.value.length ? true : false
 })
 
-const selectionsPersisted = computed(() => {
-  return props.tableBulkActions.persistent ?? false
-})
-
 const clearSelections = () => {
   selected.value = []
 }
@@ -153,6 +147,12 @@ const selected = defineModel<number[]>("selected", {
   default: [],
 })
 
+const selectedData = computed((): TableRowData[] => {
+  return tableData.value.filter((data) => {
+    return selected.value.includes(data?.id)
+  })
+})
+
 const selectedOnPage = computed(() => {
   return selected.value.filter((id) => {
     return selectable.value.includes(id)
@@ -169,7 +169,11 @@ const bulkActions = computed(() => {
         ...action,
         disabled: selected.value.length === 0 || action.disabled,
         onClick: () =>
-          action.onClick.apply(undefined, [selected.value, publicMethods]),
+          action.onClick.apply(undefined, [
+            selected.value,
+            selectedData.value,
+            publicMethods,
+          ]),
       }
     })
 })
@@ -212,21 +216,6 @@ const bulkSelectIndeterminate = computed(
 const bulkSelectOnChange = (e: Event) => {
   const isChecked = (e.target as HTMLInputElement).checked
 
-  // append all records on current page to existing selection
-  if (selectionsPersisted.value && isChecked) {
-    selected.value = [...selected.value, ...selectable.value.map((id) => id)]
-    return
-  }
-
-  // remove all records on current page from existing selection
-  if (selectionsPersisted.value && !isChecked) {
-    selected.value = selected.value.filter((id) => {
-      return !selectable.value.includes(id)
-    })
-
-    return
-  }
-
   // set all records on current page to selection
   if (isChecked) {
     selected.value = selectable.value.map((id) => id)
@@ -238,6 +227,7 @@ const bulkSelectOnChange = (e: Event) => {
 
 const publicMethods: DynamicTableAPI = {
   clearSelection: clearSelections,
+  selectedData: selectedData,
   refresh: loadAndRender,
   reset: reloadTable,
 }
@@ -431,11 +421,6 @@ loadAndRender()
                   <span class="font-medium">{{ selectedOnPage.length }}</span>
                   of
                   <span class="font-medium">{{ selectable.length }}</span>
-                  <span v-if="selectionsPersisted">
-                    /
-                    <span class="font-medium">{{ selected.length }}</span>
-                    total
-                  </span>
                 </div>
 
                 <TableActionButtons :actions="bulkActions" />

package/src/lib-components/navigation/TablePaginator.vue

@@ -85,7 +85,9 @@ const range = computed(() => {
     class="flex flex-col items-center space-y-3.5 sm:flex-row sm:space-y-0 sm:gap-x-3 sm:justify-center"
   >
     <!--Range details-->
-    <p class="text-center text-sm text-neutral-700 sm:text-left sm:mr-auto">
+    <p
+      class="text-center text-sm text-neutral-700 sm:text-left sm:mr-auto sm:w-1/3"
+    >
       Showing
       <span class="font-medium">{{ range.start }}</span>
       to
@@ -95,46 +97,50 @@ const range = computed(() => {
       results
     </p>
 
-    <!--Pager-->
-    <div class="flex gap-3 items-center justify-center shrink-0">
-      <button
-        class="xy-btn-neutral"
-        :disabled="page <= 1"
-        type="button"
-        @click.prevent="page--"
-      >
-        &larr; <span class="sr-only">Previous</span>
-      </button>
-
-      <div class="max-w-[50px]">
-        <NumberInput
-          :model-value="page"
-          :min="1"
-          :max="pagination.totalPages"
-          type="number"
-          @update:model-value="debouncePageInput"
-          @keydown.down="onDown"
-          @keydown.up="onUp"
-        />
+    <div
+      class="flex flex-col items-center space-y-3.5 sm:flex-row sm:space-y-0 sm:gap-x-3 sm:flex-1"
+    >
+      <!--Pager-->
+      <div class="flex gap-3 items-center justify-center shrink-0 md:w-1/2">
+        <button
+          class="xy-btn-neutral"
+          :disabled="page <= 1"
+          type="button"
+          @click.prevent="page--"
+        >
+          &larr; <span class="sr-only">Previous</span>
+        </button>
+
+        <div class="max-w-[50px]">
+          <NumberInput
+            :model-value="page"
+            :min="1"
+            :max="pagination.totalPages"
+            type="number"
+            @update:model-value="debouncePageInput"
+            @keydown.down.prevent="onDown"
+            @keydown.up.prevent="onUp"
+          />
+        </div>
+
+        <div class="text-sm">
+          of <span class="font-medium">{{ pagination.totalPages }}</span>
+        </div>
+
+        <button
+          class="xy-btn-neutral"
+          :disabled="page >= pagination.totalPages"
+          type="button"
+          @click.prevent="page++"
+        >
+          <span class="sr-only">Next</span> &rarr;
+        </button>
       </div>
 
-      <div class="text-sm">
-        of <span class="font-medium">{{ pagination.totalPages }}</span>
+      <!--Per Page Selector-->
+      <div class="max-w-[150px] sm:ml-auto">
+        <Select v-model="perPage" :options="pageSelectOpts" />
       </div>
-
-      <button
-        class="xy-btn-neutral"
-        :disabled="page >= pagination.totalPages"
-        type="button"
-        @click.prevent="page++"
-      >
-        <span class="sr-only">Next</span> &rarr;
-      </button>
-    </div>
-
-    <!--Per Page Selector-->
-    <div class="max-w-[150px] sm:ml-auto">
-      <Select v-model="perPage" :options="pageSelectOpts" />
     </div>
   </div>
 </template>

package/types/composables/table.d.ts

@@ -1,4 +1,4 @@
-import { VNodeChild } from "vue";
+import { VNodeChild, type ComputedRef } from "vue";
 import { ActionItem } from "../composables/nav";
 import { DateRangeProps } from "./date";
 export interface DynamicTableOptions {
@@ -10,7 +10,12 @@ export interface DynamicTableOptions {
     search?: boolean;
     url: string;
 }
-export interface DynamicTableAPI {
+export interface DynamicTableAPI<T = TableRowData> {
+    /**
+     * Clear the currently selected rows when bulk selections are enabled
+     * This method is called when refresh and reset methods are called.
+     * @returns void
+     */
     clearSelection: () => void;
     /**
      * Force refresh the table data with the current api params state
@@ -22,6 +27,10 @@ export interface DynamicTableAPI {
      * @returns void
      */
     reset: () => void;
+    /**
+     * The selected data records when bulk actions are enabled on the table
+     */
+    selectedData: ComputedRef<T[]>;
 }
 export interface TableActionItem<T = TableRowData> extends ActionItem {
     /**
@@ -49,7 +58,7 @@ export interface TableActionItem<T = TableRowData> extends ActionItem {
      */
     show?: boolean | ((rowData: T, rowIndex: number) => boolean);
 }
-export interface TableBulkActionItem extends ActionItem {
+export interface TableBulkActionItem<T = TableRowData> extends ActionItem {
     /**
      * Whether or not the bulk action item is enabled.  Disabled actions are
      * visible in the UI, but do not trigger click events.
@@ -58,10 +67,11 @@ export interface TableBulkActionItem extends ActionItem {
     /**
      * The callback method triggered by the action item buttons click event.
      * @param selected the array of selected rows by the primary key `id`
+     * @param selectedData the array of selected rows as the underlying data type T
      * @param tableAPI DynamicTableAPI
      * @returns void
      */
-    onClick: (selected: number[], tableAPI: DynamicTableAPI) => void;
+    onClick: (selected: number[], selectedData: T[], tableAPI: DynamicTableAPI) => void;
     /**
      * Whether or not to visible show the action item in the UI.  When all action items
      * on a table a hidden with show: false, bulk selections are disabled for the table.
@@ -82,11 +92,7 @@ export interface TableBulkActions<T = TableRowData> {
     /**
      * an array of TableActionItem definitions
      */
-    actions: TableBulkActionItem[];
-    /**
-     * whether to persist the selections across pagination, searching, sorting, and filtering
-     */
-    persistent?: boolean;
+    actions: TableBulkActionItem<T>[];
     /**
      * a function that determines if the row can be selected for bulk actions
      */

package/types/lib-components/lists/DynamicTable.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DynamicTableOptions, TableActions, TableBulkActions, TableColumns } from "../../composables/table";
+import type { DynamicTableOptions, TableActions, TableBulkActions, TableColumns, TableRowData } from "../../composables/table";
 type __VLS_Props = {
     tableActions?: TableActions<any>;
     tableBulkActions?: TableBulkActions<any>;
@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
     clearSelection: () => void;
     refresh: () => void;
     reset: () => void;
+    selectedData: import("vue").ComputedRef<TableRowData[]>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (value: number[]) => any;
 } & {