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

package/package.json

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

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, toRef, watch } from "vue"
-import { ActionsDropdown } from "@/lib-components"
+import { ActionsDropdown, TablePaginator } from "@/lib-components"
 import DateRangePicker from "../forms/DateRangePicker.vue"
-import Paginator from "../navigation/Paginator.vue"
 import BaseAPI from "../../api/base"
 import type {
   DynamicTableAPI,
@@ -46,6 +45,10 @@ const loadAndRender = (): void => {
     q: query.value,
   }
 
+  if (!selectionsPersisted.value) {
+    clearSelections()
+  }
+
   BaseAPI.get<TrailsRespPaged<unknown>>(
     props.tableOptions.url,
     { skipLoader: false },
@@ -137,7 +140,11 @@ const hasContent = computed((): boolean => {
   return rows.value.length ? true : false
 })
 
-const deselectAll = () => {
+const selectionsPersisted = computed(() => {
+  return props.tableBulkActions.persistent ?? false
+})
+
+const clearSelections = () => {
   selected.value = []
 }
 
@@ -146,9 +153,9 @@ 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)
   })
 })
 
@@ -162,20 +169,21 @@ const bulkActions = computed(() => {
         ...action,
         disabled: selected.value.length === 0 || action.disabled,
         onClick: () =>
-          action.onClick.apply(undefined, [
-            selected.value,
-            selectedData.value,
-            publicMethods,
-          ]),
+          action.onClick.apply(undefined, [selected.value, publicMethods]),
       }
     })
 })
 
 const hasBulkActions = computed(() => bulkActions.value.length > 0)
 
-const selectableIds = computed(() => {
+const selectable = computed(() => {
   return tableData.value
     .filter((row) => {
+      // NOTE(spk): table data must have an "id" key for bulk actions.
+      if (row.id === undefined) {
+        return false
+      }
+
       if (props.tableBulkActions.isSelectable === undefined) {
         return true
       }
@@ -189,8 +197,47 @@ const selectableIds = computed(() => {
     .map((d) => d["id"])
 })
 
+const bulkSelectChecked = computed(
+  () =>
+    selectedOnPage.value.length > 0 &&
+    selectedOnPage.value.length === selectable.value.length
+)
+
+const bulkSelectIndeterminate = computed(
+  () =>
+    selectedOnPage.value.length > 0 &&
+    selectedOnPage.value.length < selectable.value.length
+)
+
+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)
+    return
+  }
+
+  clearSelections()
+}
+
 const publicMethods: DynamicTableAPI = {
-  deselectAll: deselectAll,
+  clearSelection: clearSelections,
   refresh: loadAndRender,
   reset: reloadTable,
 }
@@ -302,16 +349,10 @@ loadAndRender()
                   'checked:disabled:bg-xy-blue checked:disabled:border-xy-blue checked:disabled:opacity-50',
                   'border-gray-300 focus:ring-xy-blue-500',
                 ]"
-                :checked="selected.length === selectableIds.length"
-                :indeterminate="
-                  selected.length > 0 && selected.length < selectableIds.length
-                "
+                :checked="bulkSelectChecked"
+                :indeterminate="bulkSelectIndeterminate"
                 type="checkbox"
-                @change="
-                  selected = ($event.target as HTMLInputElement).checked
-                    ? selectableIds.map((id) => id)
-                    : []
-                "
+                @change="bulkSelectOnChange"
               />
             </th>
 
@@ -382,12 +423,19 @@ loadAndRender()
             />
           </tr>
 
-          <tr v-if="selected.length > 0">
-            <td colspan="100%" class="px-6 py-3 border-t bg-neutral-50">
-              <div class="flex items-center space-x-3">
-                <div class="text-sm font-semibold">
-                  {{ selected.length }}
-                  selected
+          <tr v-if="hasBulkActions && selected.length > 0">
+            <td colspan="100%" class="px-6 py-2.5 border-t bg-neutral-50">
+              <div class="flex items-center gap-x-3">
+                <div class="text-sm shrink-0">
+                  Selected
+                  <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" />
@@ -412,9 +460,9 @@ loadAndRender()
                   'checked:disabled:bg-xy-blue checked:disabled:border-xy-blue checked:disabled:opacity-50',
                   'border-gray-300 focus:ring-xy-blue-500',
                 ]"
-                :disabled="!selectableIds.includes(row.rowData.id)"
+                :disabled="!selectable.includes(row.rowData?.id)"
                 type="checkbox"
-                :value="row.rowData.id"
+                :value="row.rowData?.id"
               />
             </td>
 
@@ -461,10 +509,11 @@ loadAndRender()
       </table>
     </div>
 
-    <Paginator
-      v-if="hasContent"
-      v-model="pagination"
-      @update:model-value="loadAndRender()"
-    />
+    <div v-if="hasContent" class="mt-4">
+      <TablePaginator
+        v-model="pagination"
+        @update:model-value="loadAndRender()"
+      />
+    </div>
   </div>
 </template>

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

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { Pagination } from "@/composables/nav"
+import { debounceFn } from "@/entry"
+import { NumberInput, Select } from "@/lib-components"
+import { computed } from "vue"
+
+const props = defineProps<{
+  pageOptions?: { label: string; value: number }[]
+}>()
+
+const pagination = defineModel<Pagination>({ required: true })
+
+const page = computed({
+  get: () => pagination.value.page,
+  set: (v: number) => {
+    pagination.value = {
+      ...pagination.value,
+      page: v,
+    }
+  },
+})
+
+const perPage = computed({
+  get: () => pagination.value.perPage,
+  set: (v: number) => {
+    pagination.value = {
+      ...pagination.value,
+      perPage: v,
+    }
+  },
+})
+
+const pageSelectOpts = computed(() => {
+  if (props.pageOptions) {
+    return props.pageOptions
+  }
+
+  return [
+    { label: "5 per page", value: 5 },
+    { label: "10 per page", value: 10 },
+    { label: "20 per page", value: 20 },
+    { label: "50 per page", value: 50 },
+  ]
+})
+
+const debouncePageInput = debounceFn((val: number | null) => {
+  if (val === null) {
+    return
+  }
+
+  if (val === page.value) {
+    return
+  }
+
+  page.value = val
+}, 350)
+
+const onDown = debounceFn(() => {
+  if (page.value <= 1) {
+    return
+  }
+
+  page.value = page.value - 1
+}, 250)
+
+const onUp = debounceFn(() => {
+  if (page.value >= pagination.value.totalPages) {
+    return
+  }
+
+  page.value = page.value + 1
+}, 250)
+
+const range = computed(() => {
+  const { page, perPage, totalItems } = pagination.value
+  return {
+    start: totalItems > 0 ? (page - 1) * perPage + 1 : 0,
+    end: Math.min(page * perPage, totalItems),
+  }
+})
+</script>
+
+<template>
+  <div
+    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">
+      Showing
+      <span class="font-medium">{{ range.start }}</span>
+      to
+      <span class="font-medium">{{ range.end }}</span>
+      of
+      <span class="font-medium">{{ pagination.totalItems }}</span>
+      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>
+
+      <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>
+
+    <!--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

@@ -11,7 +11,7 @@ export interface DynamicTableOptions {
     url: string;
 }
 export interface DynamicTableAPI {
-    deselectAll: () => void;
+    clearSelection: () => void;
     /**
      * Force refresh the table data with the current api params state
      * @returns void
@@ -49,9 +49,23 @@ export interface TableActionItem<T = TableRowData> extends ActionItem {
      */
     show?: boolean | ((rowData: T, rowIndex: number) => boolean);
 }
-export interface TableBulkActionItem<T = TableRowData> extends ActionItem {
+export interface TableBulkActionItem extends ActionItem {
+    /**
+     * Whether or not the bulk action item is enabled.  Disabled actions are
+     * visible in the UI, but do not trigger click events.
+     */
     disabled?: boolean;
-    onClick: (selected: number[], selectedRows: T[], tableAPI: DynamicTableAPI) => void;
+    /**
+     * The callback method triggered by the action item buttons click event.
+     * @param selected the array of selected rows by the primary key `id`
+     * @param tableAPI DynamicTableAPI
+     * @returns void
+     */
+    onClick: (selected: number[], 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.
+     */
     show?: boolean;
 }
 export interface TableActions<T = TableRowData> {
@@ -64,11 +78,18 @@ export interface TableActions<T = TableRowData> {
      */
     type: "dropdown" | "buttons";
 }
-export interface TableBulkActions<T extends TableRowData = TableRowData> {
+export interface TableBulkActions<T = TableRowData> {
     /**
      * an array of TableActionItem definitions
      */
-    actions: TableBulkActionItem<T>[];
+    actions: TableBulkActionItem[];
+    /**
+     * whether to persist the selections across pagination, searching, sorting, and filtering
+     */
+    persistent?: boolean;
+    /**
+     * a function that determines if the row can be selected for bulk actions
+     */
     isSelectable?: (data: T) => boolean;
 }
 export interface TableColumn<T = TableRowData> {
@@ -102,12 +123,6 @@ export interface TableColumn<T = TableRowData> {
     sort?: string;
 }
 export type TableCellAlignment = "left" | "center" | "right";
-export type TableRowData<T extends {
-    [key: string]: any;
-    id: number;
-} = {
-    [key: string]: any;
-    id: number;
-}> = T;
+export type TableRowData = Record<string, any>;
 export type TableColumns<T = TableRowData> = TableColumn<T>[];
 export type TableRowsData = TableRowData[];

package/types/composables/useTable.d.ts

@@ -3,15 +3,9 @@ import { TableColumns, TableRowsData, TableActions, DynamicTableAPI } from "./ta
 export declare const useTable: (rowData: TableRowsData | Ref<TableRowsData>, cols: TableColumns | Ref<TableColumns>, acts: TableActions | Ref<TableActions>, exposedAPI?: DynamicTableAPI) => {
     columns: import("vue").ComputedRef<{
         alignment: string;
-        classNames?: string | ((rowData: {
-            [key: string]: any;
-            id: number;
-        }, rowIndex: number) => string) | undefined;
+        classNames?: string | ((rowData: import("./table").TableRowData, rowIndex: number) => string) | undefined;
         title: string;
-        render: string | number | ((rowData: {
-            [key: string]: any;
-            id: number;
-        }, rowIndex: number) => import("vue").VNodeChild);
+        render: string | ((rowData: import("./table").TableRowData, rowIndex: number) => import("vue").VNodeChild);
         show?: boolean | undefined;
         sort?: string | undefined;
     }[]>;
@@ -25,20 +19,14 @@ export declare const useTable: (rowData: TableRowsData | Ref<TableRowsData>, col
             icon?: import("vue").RenderFunction | import("vue").FunctionalComponent<{}, {}, any, {}> | undefined;
             label: string;
         }[];
-        rowData: {
-            [key: string]: any;
-            id: number;
-        };
+        rowData: import("./table").TableRowData;
         cells: {
             isComponent: boolean;
             classNames: string;
             val: any;
             alignment: string;
             title: string;
-            render: string | number | ((rowData: {
-                [key: string]: any;
-                id: number;
-            }, rowIndex: number) => import("vue").VNodeChild);
+            render: string | ((rowData: import("./table").TableRowData, rowIndex: number) => import("vue").VNodeChild);
             show?: boolean | undefined;
             sort?: string | undefined;
         }[];

package/types/lib-components/index.d.ts

@@ -19,6 +19,7 @@ import { default as Spinner } from "./overlays/Spinner.vue";
 import { default as DataTable } from "./lists/DataTable.vue";
 import { default as Steps } from "./navigation/Steps.vue";
 import { default as DynamicTable } from "./lists/DynamicTable.vue";
+import { default as TablePaginator } from "./navigation/TablePaginator.vue";
 import { default as Tabs } from "./navigation/Tabs.vue";
 import { default as Toggle } from "./forms/Toggle.vue";
 import { default as XYSpinner } from "./indicators/XYSpinner.vue";
@@ -40,7 +41,7 @@ import { default as Select } from "./forms/Select.vue";
 import { default as TextArea } from "./forms/TextArea.vue";
 import { default as YesOrNoRadio } from "./forms/YesOrNoRadio.vue";
 export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, InlineAlert, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
-Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, NumberInput, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, ProgressCircles, ProgressCirclesLabeled, };
+Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, TablePaginator, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, NumberInput, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, ProgressCircles, ProgressCirclesLabeled, };
 /**
  * declare global component types for App.use(Trees)
  */
@@ -64,6 +65,7 @@ export interface TreesComponents {
     DynamicTable: typeof DynamicTable;
     Steps: typeof Steps;
     Tabs: typeof Tabs;
+    TablePaginator: typeof TablePaginator;
     Toggle: typeof Toggle;
     Tooltip: typeof Tooltip;
     BaseInput: typeof BaseInput;

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

@@ -9,7 +9,7 @@ type __VLS_PublicProps = {
     "selected"?: number[];
 } & __VLS_Props;
 declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
-    deselectAll: () => void;
+    clearSelection: () => void;
     refresh: () => void;
     reset: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -3,9 +3,6 @@ type __VLS_Props = {
     actions?: TableActionItem[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    actions: TableActionItem<{
-        [key: string]: any;
-        id: number;
-    }>[];
+    actions: TableActionItem<import("../../composables").TableRowData>[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/types/lib-components/navigation/TablePaginator.vue.d.ts

@@ -0,0 +1,16 @@
+import { Pagination } from "../../composables/nav";
+type __VLS_Props = {
+    pageOptions?: {
+        label: string;
+        value: number;
+    }[];
+};
+type __VLS_PublicProps = {
+    modelValue: Pagination;
+} & __VLS_Props;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Pagination) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Pagination) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;