@xy-planning-network/trees 0.15.1 → 0.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "",
   "license": "MIT",
   "repository": {

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useTable } from "@/composables/useTable"
+import { useBulkActions } from "@/composables/useBulkActions"
 import type {
   TableActions,
+  TableBulkActions,
   TableColumns,
   TableRowsData,
 } from "@/composables/table"
@@ -11,19 +13,44 @@ import { toRef } from "vue"
 const props = withDefaults(
   defineProps<{
     tableActions?: TableActions<any>
+    tableBulkActions?: TableBulkActions<any>
     tableColumns: TableColumns<any>
     tableData: TableRowsData
   }>(),
   {
     tableActions: () => ({ type: "dropdown", actions: [] }),
+    tableBulkActions: () => ({ actions: [] }),
   }
 )
 
+const selected = defineModel<number[]>("selected", {
+  required: false,
+  default: [],
+})
+
+const {
+  bulkActions,
+  bulkSelectChecked,
+  bulkSelectIndeterminate,
+  bulkSelectOnChange,
+  hasBulkActions,
+  publicMethods,
+  selectable,
+  selectedOnPage,
+} = useBulkActions(
+  toRef(props, "tableData"),
+  toRef(props, "tableBulkActions"),
+  selected
+)
+
 const { columns, hasActions, isEmptyCellValue, rows } = useTable(
   toRef(props, "tableData"),
   toRef(props, "tableColumns"),
-  toRef(props, "tableActions")
+  toRef(props, "tableActions"),
+  publicMethods
 )
+
+defineExpose(publicMethods)
 </script>
 <template>
   <div class="flex flex-col">
@@ -35,6 +62,25 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
           <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-100">
               <tr>
+                <th
+                  v-if="hasBulkActions"
+                  scope="col"
+                  class="pl-6 w-4 leading-none"
+                >
+                  <input
+                    :class="[
+                      'h-4 w-4 rounded cursor-pointer',
+                      'disabled:bg-gray-100 disabled:border-gray-200 disabled:cursor-not-allowed disabled:opacity-100',
+                      'checked:disabled:bg-xy-blue checked:disabled:border-xy-blue checked:disabled:opacity-50',
+                      'border-gray-300 focus:ring-xy-blue-500',
+                    ]"
+                    :checked="bulkSelectChecked"
+                    :indeterminate="bulkSelectIndeterminate"
+                    type="checkbox"
+                    @change="bulkSelectOnChange"
+                  />
+                </th>
+
                 <th
                   v-for="(col, idx) in columns"
                   :key="idx"
@@ -50,6 +96,23 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
                   class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase leading-4"
                 />
               </tr>
+
+              <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>
+                    </div>
+
+                    <ActionsButtonGroup :actions="bulkActions" />
+                  </div>
+                </td>
+              </tr>
             </thead>
             <tbody class="bg-white">
               <tr
@@ -57,6 +120,21 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
                 :key="rowIdx"
                 class="even:bg-gray-50"
               >
+                <td v-if="hasBulkActions" class="pl-6 w-4 leading-none">
+                  <input
+                    v-model="selected"
+                    :class="[
+                      'h-4 w-4 rounded cursor-pointer',
+                      'disabled:bg-gray-100 disabled:border-gray-200 disabled:cursor-not-allowed disabled:opacity-100',
+                      'checked:disabled:bg-xy-blue checked:disabled:border-xy-blue checked:disabled:opacity-50',
+                      'border-gray-300 focus:ring-xy-blue-500',
+                    ]"
+                    :disabled="!selectable.includes(row.rowData?.id)"
+                    type="checkbox"
+                    :value="row.rowData?.id"
+                  />
+                </td>
+
                 <template v-for="(cell, cellIdx) in row.cells" :key="cellIdx">
                   <component
                     :is="'td'"
@@ -89,7 +167,11 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
 
               <tr v-if="rows.length === 0">
                 <td
-                  :colspan="columns.length + (hasActions ? 1 : 0)"
+                  :colspan="
+                    columns.length +
+                    (hasActions ? 1 : 0) +
+                    (hasBulkActions ? 1 : 0)
+                  "
                   class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
                 >
                   No items were found!

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

@@ -8,7 +8,6 @@ import {
 import DateRangePicker from "../forms/DateRangePicker.vue"
 import BaseAPI from "../../api/base"
 import type {
-  DynamicTableAPI,
   DynamicTableOptions,
   TableActions,
   TableBulkActions,
@@ -19,6 +18,7 @@ import { useAppFlasher } from "@/composables/useFlashes"
 import { TrailsRespPaged } from "@/api/client"
 import { DateRange, DateRangeProps } from "@/composables/date"
 import { useTable } from "@/composables/useTable"
+import { useBulkActions } from "@/composables/useBulkActions"
 
 const props = withDefaults(
   defineProps<{
@@ -141,100 +141,25 @@ const hasContent = computed((): boolean => {
   return rows.value.length ? true : false
 })
 
-const clearSelections = () => {
-  selected.value = []
-}
-
 const selected = defineModel<number[]>("selected", {
   required: false,
   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)
-  })
-})
-
-const bulkActions = computed(() => {
-  return props.tableBulkActions.actions
-    .filter((action) => {
-      return action.show ?? true
-    })
-    .map((action) => {
-      return {
-        ...action,
-        disabled: selected.value.length === 0 || action.disabled,
-        onClick: (e?: Event) =>
-          action.onClick.apply(undefined, [
-            selected.value,
-            selectedData.value,
-            publicMethods,
-            e,
-          ]),
-      }
-    })
-})
-
-const hasBulkActions = computed(() => bulkActions.value.length > 0)
-
-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
-      }
-
-      if (props.tableBulkActions.isSelectable(row)) {
-        return true
-      }
-
-      return false
-    })
-    .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
-
-  // set all records on current page to selection
-  if (isChecked) {
-    selected.value = selectable.value.map((id) => id)
-    return
-  }
-
-  clearSelections()
-}
-
-const publicMethods: DynamicTableAPI = {
-  clearSelection: clearSelections,
-  selectedData: selectedData,
+const {
+  bulkActions,
+  bulkSelectChecked,
+  bulkSelectIndeterminate,
+  bulkSelectOnChange,
+  clearSelections,
+  hasBulkActions,
+  publicMethods,
+  selectable,
+  selectedOnPage,
+} = useBulkActions(tableData, toRef(props, "tableBulkActions"), selected, {
   refresh: loadAndRender,
   reset: reloadTable,
-}
+})
 
 const { columns, hasActions, isEmptyCellValue, rows } = useTable(
   tableData,
@@ -489,7 +414,9 @@ loadAndRender()
 
           <tr v-if="!hasContent">
             <td
-              :colspan="columns.length + (hasActions ? 1 : 0)"
+              :colspan="
+                columns.length + (hasActions ? 1 : 0) + (hasBulkActions ? 1 : 0)
+              "
               class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
             >
               No items were found!

package/types/composables/useBulkActions.d.ts

@@ -0,0 +1,25 @@
+import { type Ref } from "vue";
+import type { DynamicTableAPI, TableBulkActions, TableRowData } from "./table";
+interface UseBulkActionsOptions {
+    refresh?: () => void;
+    reset?: () => void;
+}
+export declare const useBulkActions: <T extends TableRowData>(tableData: Ref<T[]>, tableBulkActions: Ref<TableBulkActions<T>>, selected: Ref<number[]>, options?: UseBulkActionsOptions) => {
+    bulkActions: import("vue").ComputedRef<{
+        disabled: boolean | undefined;
+        onClick: (e?: Event) => void;
+        label: string;
+        icon?: import("vue").RenderFunction | import("vue").FunctionalComponent<{}, {}, any, {}> | undefined;
+        show?: boolean | undefined;
+    }[]>;
+    bulkSelectChecked: import("vue").ComputedRef<boolean>;
+    bulkSelectIndeterminate: import("vue").ComputedRef<boolean>;
+    bulkSelectOnChange: (e: Event) => void;
+    clearSelections: () => void;
+    hasBulkActions: import("vue").ComputedRef<boolean>;
+    publicMethods: DynamicTableAPI<T>;
+    selectable: import("vue").ComputedRef<any[]>;
+    selectedData: import("vue").ComputedRef<T[]>;
+    selectedOnPage: import("vue").ComputedRef<number[]>;
+};
+export {};

package/types/composables/useTable.d.ts

@@ -1,6 +1,7 @@
 import { Ref } from "vue";
 import { TableColumns, TableRowsData, TableActions, DynamicTableAPI } from "./table";
 import { ActionItemButton, ActionItemLink } from "../entry";
+export declare const tableAPIStub: DynamicTableAPI;
 export declare const useTable: (rowData: TableRowsData | Ref<TableRowsData>, cols: TableColumns | Ref<TableColumns>, acts: TableActions | Ref<TableActions>, exposedAPI?: DynamicTableAPI) => {
     columns: import("vue").ComputedRef<{
         alignment: string;

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

@@ -1,10 +1,24 @@
-import type { TableActions, TableColumns, TableRowsData } from "../../composables/table";
+import type { TableActions, TableBulkActions, TableColumns, TableRowsData } from "../../composables/table";
 type __VLS_Props = {
     tableActions?: TableActions<any>;
+    tableBulkActions?: TableBulkActions<any>;
     tableColumns: TableColumns<any>;
     tableData: TableRowsData;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+type __VLS_PublicProps = {
+    "selected"?: number[];
+} & __VLS_Props;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
+    clearSelection: () => void;
+    refresh: () => void;
+    reset: () => void;
+    selectedData: import("vue").ComputedRef<import("../../composables/table").TableRowData[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: number[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: number[]) => any) | undefined;
+}>, {
     tableActions: TableActions<any>;
+    tableBulkActions: TableBulkActions<any>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;