@xy-planning-network/trees 0.11.6-dev-5 → 0.11.6-dev-7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.11.6-dev-5",
+  "version": "0.11.6-dev-7",
   "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,
@@ -105,7 +103,7 @@ const dateRange = ref({
 
 const pagination = ref({
   page: 1,
-  perPage: 10,
+  perPage: props.tableOptions?.perPage || 10,
   totalItems: 0,
   totalPages: 0,
 })
@@ -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)
@@ -171,7 +171,7 @@ const bulkActions = computed(() => {
         onClick: () =>
           action.onClick.apply(undefined, [
             selected.value,
-            undefined,
+            selectedData.value,
             publicMethods,
           ]),
       }
@@ -216,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)
@@ -242,6 +227,7 @@ const bulkSelectOnChange = (e: Event) => {
 
 const publicMethods: DynamicTableAPI = {
   clearSelection: clearSelections,
+  selectedData: selectedData,
   refresh: loadAndRender,
   reset: reloadTable,
 }
@@ -435,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" />
@@ -516,6 +497,7 @@ loadAndRender()
     <div v-if="hasContent" class="mt-4">
       <TablePaginator
         v-model="pagination"
+        :page-options="tableOptions?.pageOptions"
         @update:model-value="loadAndRender()"
       />
     </div>

package/types/composables/table.d.ts

@@ -1,16 +1,26 @@
-import { VNodeChild } from "vue";
+import { VNodeChild, type ComputedRef } from "vue";
 import { ActionItem } from "../composables/nav";
 import { DateRangeProps } from "./date";
 export interface DynamicTableOptions {
     dateSearch?: boolean | DateRangeProps;
     defaultSort?: string;
     defaultSortDirection?: string;
+    pageOptions?: {
+        label: string;
+        value: number;
+    }[];
+    perPage?: number;
     refreshTrigger: number;
     reloadTrigger?: number;
     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 +32,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 +63,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,11 +72,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 _ NOTE(spk): Holding for T[]
+     * @param selectedData the array of selected rows as the underlying data type T
      * @param tableAPI DynamicTableAPI
      * @returns void
      */
-    onClick: (selected: number[], _: undefined, 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.
@@ -83,11 +97,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;
 } & {