@xy-planning-network/trees 0.15.5-dev-1 → 0.16.0-dev-1

package/package.json

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

package/src/lib-components/forms/FileUpload.vue

@@ -435,7 +435,7 @@ onBeforeUnmount(() => {
           <div class="min-w-0 flex-1">
             <template v-if="item.kind === 'uploaded'">
               <span class="text-sm text-gray-800 [overflow-wrap:anywhere]">
-                {{ item.file.filename }}
+                {{ item.file.name }}
               </span>
               <p class="mt-0.5 text-xs text-gray-600">Uploaded</p>
             </template>
@@ -468,7 +468,7 @@ onBeforeUnmount(() => {
             :href="item.file.url"
             target="_blank"
             rel="noopener noreferrer"
-            :aria-label="`Open ${item.file.filename} in a new window`"
+            :aria-label="`Open ${item.file.name} in a new window`"
           >
             <ArrowTopRightOnSquareIcon class="h-5 w-5" aria-hidden="true" />
           </a>
@@ -493,9 +493,7 @@ onBeforeUnmount(() => {
             (item.kind === 'pending' && item.upload.status === 'uploading')
           "
           :aria-label="`Remove ${
-            item.kind === 'uploaded'
-              ? item.file.filename
-              : item.upload.file.name
+            item.kind === 'uploaded' ? item.file.name : item.upload.file.name
           }`"
           @click="
             item.kind === 'uploaded'

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

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { useTable } from "@/composables/useTable"
-import { useBulkActions } from "@/composables/useBulkActions"
 import type {
   TableActions,
-  TableBulkActions,
   TableColumns,
   TableRowsData,
 } from "@/composables/table"
@@ -13,44 +11,19 @@ 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"),
-  publicMethods
+  toRef(props, "tableActions")
 )
-
-defineExpose(publicMethods)
 </script>
 <template>
   <div class="flex flex-col">
@@ -62,25 +35,6 @@ defineExpose(publicMethods)
           <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"
@@ -96,23 +50,6 @@ defineExpose(publicMethods)
                   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
@@ -120,21 +57,6 @@ defineExpose(publicMethods)
                 :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'"
@@ -167,11 +89,7 @@ defineExpose(publicMethods)
 
               <tr v-if="rows.length === 0">
                 <td
-                  :colspan="
-                    columns.length +
-                    (hasActions ? 1 : 0) +
-                    (hasBulkActions ? 1 : 0)
-                  "
+                  :colspan="columns.length + (hasActions ? 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,6 +8,7 @@ import {
 import DateRangePicker from "../forms/DateRangePicker.vue"
 import BaseAPI from "../../api/base"
 import type {
+  DynamicTableAPI,
   DynamicTableOptions,
   TableActions,
   TableBulkActions,
@@ -18,7 +19,6 @@ 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,25 +141,100 @@ const hasContent = computed((): boolean => {
   return rows.value.length ? true : false
 })
 
+const clearSelections = () => {
+  selected.value = []
+}
+
 const selected = defineModel<number[]>("selected", {
   required: false,
   default: [],
 })
 
-const {
-  bulkActions,
-  bulkSelectChecked,
-  bulkSelectIndeterminate,
-  bulkSelectOnChange,
-  clearSelections,
-  hasBulkActions,
-  publicMethods,
-  selectable,
-  selectedOnPage,
-} = useBulkActions(tableData, toRef(props, "tableBulkActions"), selected, {
+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,
   refresh: loadAndRender,
   reset: reloadTable,
-})
+}
 
 const { columns, hasActions, isEmptyCellValue, rows } = useTable(
   tableData,
@@ -414,9 +489,7 @@ loadAndRender()
 
           <tr v-if="!hasContent">
             <td
-              :colspan="
-                columns.length + (hasActions ? 1 : 0) + (hasBulkActions ? 1 : 0)
-              "
+              :colspan="columns.length + (hasActions ? 1 : 0)"
               class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
             >
               No items were found!

package/types/composables/forms.d.ts

@@ -50,7 +50,7 @@ export interface DateTimeInput extends Input {
  */
 export interface UploadedFile {
     id: number;
-    filename: string;
+    name: string;
     url?: string;
 }
 export type FileUploadValue = UploadedFile | UploadedFile[] | null;

package/types/composables/useTable.d.ts

@@ -1,7 +1,6 @@
 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,24 +1,10 @@
-import type { TableActions, TableBulkActions, TableColumns, TableRowsData } from "../../composables/table";
+import type { TableActions, TableColumns, TableRowsData } from "../../composables/table";
 type __VLS_Props = {
     tableActions?: TableActions<any>;
-    tableBulkActions?: TableBulkActions<any>;
     tableColumns: TableColumns<any>;
     tableData: TableRowsData;
 };
-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;
-}>, {
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     tableActions: TableActions<any>;
-    tableBulkActions: TableBulkActions<any>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/types/composables/useBulkActions.d.ts

@@ -1,25 +0,0 @@
-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 {};