@xy-planning-network/trees 0.11.5 → 0.11.6-dev-2

package/package.json

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

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

@@ -8,7 +8,9 @@ import type {
   DynamicTableAPI,
   DynamicTableOptions,
   TableActions,
+  TableBulkActions,
   TableColumns,
+  TableRowData,
 } from "@/composables/table"
 import { useAppFlasher } from "@/composables/useFlashes"
 import { TrailsRespPaged } from "@/api/client"
@@ -19,11 +21,13 @@ import TableActionButtons from "./TableActionButtons.vue"
 const props = withDefaults(
   defineProps<{
     tableActions?: TableActions<any>
+    tableBulkActions?: TableBulkActions<any>
     tableColumns: TableColumns<any>
     tableOptions: DynamicTableOptions
   }>(),
   {
     tableActions: () => ({ type: "dropdown", actions: [] }),
+    tableBulkActions: () => ({ actions: [] }),
   }
 )
 
@@ -42,6 +46,10 @@ const loadAndRender = (): void => {
     q: query.value,
   }
 
+  if (!selectionsPersisted.value) {
+    clearSelections()
+  }
+
   BaseAPI.get<TrailsRespPaged<unknown>>(
     props.tableOptions.url,
     { skipLoader: false },
@@ -54,7 +62,7 @@ const loadAndRender = (): void => {
         totalItems: success.data.totalItems,
         totalPages: success.data.totalPages,
       }
-      tableData.value = success.data.items as Record<string, any>[]
+      tableData.value = success.data.items as TableRowData[]
     },
     () => {
       useAppFlasher.genericError()
@@ -81,19 +89,7 @@ const setDateRange = (): void => {
   }
 }
 
-const tableData = ref<Record<string, any>[]>([])
-
-const publicMethods: DynamicTableAPI = {
-  refresh: loadAndRender,
-  reset: reloadTable,
-}
-
-const { columns, hasActions, isEmptyCellValue, rows } = useTable(
-  tableData,
-  toRef(props, "tableColumns"),
-  toRef(props, "tableActions"),
-  publicMethods
-)
+const tableData = ref<TableRowData[]>([])
 
 const currentSort = ref(
   props.tableOptions.defaultSort ? props.tableOptions.defaultSort : ""
@@ -145,6 +141,120 @@ const hasContent = computed((): boolean => {
   return rows.value.length ? true : false
 })
 
+const selectionsPersisted = computed(() => {
+  return props.tableBulkActions.persistent ?? 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 selectableIds.value.includes(id)
+  }).length
+})
+
+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: () =>
+          action.onClick.apply(undefined, [
+            selected.value,
+            selectedData.value,
+            publicMethods,
+          ]),
+      }
+    })
+})
+
+const hasBulkActions = computed(() => bulkActions.value.length > 0)
+
+const selectableIds = computed(() => {
+  return tableData.value
+    .filter((row) => {
+      if (props.tableBulkActions.isSelectable === undefined) {
+        return true
+      }
+
+      if (props.tableBulkActions.isSelectable(row)) {
+        return true
+      }
+
+      return false
+    })
+    .map((d) => d["id"])
+})
+
+const bulkSelectChecked = computed(
+  () =>
+    selected.value.length > 0 &&
+    selected.value.length === selectableIds.value.length
+)
+
+const bulkSelectIndeterminate = computed(
+  () =>
+    selected.value.length > 0 &&
+    selected.value.length < selectableIds.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, ...selectableIds.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 !selectableIds.value.includes(id)
+    })
+
+    return
+  }
+
+  // set all records on current page to selection
+  if (isChecked) {
+    selected.value = selectableIds.value.map((id) => id)
+    return
+  }
+
+  clearSelections()
+}
+
+const publicMethods: DynamicTableAPI = {
+  clearSelection: clearSelections,
+  refresh: loadAndRender,
+  reset: reloadTable,
+}
+
+const { columns, hasActions, isEmptyCellValue, rows } = useTable(
+  tableData,
+  toRef(props, "tableColumns"),
+  toRef(props, "tableActions"),
+  publicMethods
+)
+
 watch(
   () => props.tableOptions.refreshTrigger,
   () => {
@@ -237,6 +347,21 @@ loadAndRender()
       <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"
@@ -303,6 +428,23 @@ loadAndRender()
               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-3 border-t bg-neutral-50">
+              <div class="flex items-center space-x-3">
+                <div v-if="selectionsPersisted" class="text-sm font-semibold">
+                  Selected: {{ selectedOnPage }} ({{ selected.length }} total)
+                </div>
+
+                <div v-else class="text-sm font-semibold">
+                  {{ selected.length }}
+                  selected
+                </div>
+
+                <TableActionButtons :actions="bulkActions" />
+              </div>
+            </td>
+          </tr>
         </thead>
 
         <tbody class="bg-white">
@@ -312,6 +454,21 @@ loadAndRender()
             class="even:bg-gray-50"
             @click="$emit('click:row', row.rowData)"
           >
+            <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="!selectableIds.includes(row.rowData.id)"
+                type="checkbox"
+                :value="row.rowData.id"
+              />
+            </td>
+
             <template v-for="(cell, cellIdx) in row.cells" :key="cellIdx">
               <component
                 :is="'td'"

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

@@ -5,13 +5,16 @@ import type { ActionItem } from "@/composables/nav"
 import { useActionItems } from "@/composables/useActionItems"
 import { toRef, useTemplateRef } from "vue"
 import { useFloating, autoUpdate } from "@floating-ui/vue"
+import type { Placement } from "@floating-ui/vue"
 
 const props = withDefaults(
   defineProps<{
     actions?: ActionItem[]
+    placement?: Placement
   }>(),
   {
     actions: () => [],
+    placement: "bottom-end",
   }
 )
 
@@ -22,7 +25,7 @@ const { actions, hasActions } = useActionItems(toRef(props, "actions"))
 const triggerRef = useTemplateRef<InstanceType<typeof MenuButton>>("trigger")
 const wrapperRef = useTemplateRef<HTMLElement | null>("wrapper")
 const { floatingStyles } = useFloating(triggerRef, wrapperRef, {
-  placement: "bottom-end",
+  placement: props.placement,
   strategy: "fixed",
   whileElementsMounted: autoUpdate,
 })

package/types/composables/table.d.ts

@@ -11,6 +11,7 @@ export interface DynamicTableOptions {
     url: string;
 }
 export interface DynamicTableAPI {
+    clearSelection: () => void;
     /**
      * Force refresh the table data with the current api params state
      * @returns void
@@ -48,6 +49,11 @@ export interface TableActionItem<T = TableRowData> extends ActionItem {
      */
     show?: boolean | ((rowData: T, rowIndex: number) => boolean);
 }
+export interface TableBulkActionItem<T = TableRowData> extends ActionItem {
+    disabled?: boolean;
+    onClick: (selected: number[], selectedRows: T[], tableAPI: DynamicTableAPI) => void;
+    show?: boolean;
+}
 export interface TableActions<T = TableRowData> {
     /**
      * an array of TableActionItem definitions
@@ -58,6 +64,14 @@ export interface TableActions<T = TableRowData> {
      */
     type: "dropdown" | "buttons";
 }
+export interface TableBulkActions<T extends TableRowData = TableRowData> {
+    /**
+     * an array of TableActionItem definitions
+     */
+    actions: TableBulkActionItem<T>[];
+    persistent?: boolean;
+    isSelectable?: (data: T) => boolean;
+}
 export interface TableColumn<T = TableRowData> {
     /**
      * The alignment the table cell should have
@@ -89,6 +103,12 @@ export interface TableColumn<T = TableRowData> {
     sort?: string;
 }
 export type TableCellAlignment = "left" | "center" | "right";
-export type TableRowData = Record<string, any>;
+export type TableRowData<T extends {
+    [key: string]: any;
+    id: number;
+} = {
+    [key: string]: any;
+    id: number;
+}> = T;
 export type TableColumns<T = TableRowData> = TableColumn<T>[];
 export type TableRowsData = TableRowData[];

package/types/composables/useTable.d.ts

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

package/types/lib-components/indicators/AppIcon.vue.d.ts

@@ -0,0 +1,24 @@
+import type { Component, FunctionalComponent, RenderFunction } from "vue";
+type __VLS_Props = {
+    bgColor?: `bg-${string}`;
+    iconColor?: `text-${string}`;
+    icon: FunctionalComponent | Component | RenderFunction;
+    indicator?: string | number | boolean;
+    size?: "xs" | "sm" | "base" | "lg" | "xl";
+    type?: "circle" | "square";
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "circle" | "square";
+    size: "base" | "xs" | "sm" | "lg" | "xl";
+    bgColor: `bg-${string}`;
+    iconColor: `text-${string}`;
+    indicator: string | number | boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/lib-components/layout/UserMenu.vue.d.ts

@@ -0,0 +1,8 @@
+import { UserMenuItem } from "../../composables/nav";
+type __VLS_Props = {
+    menu?: UserMenuItem[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    menu: UserMenuItem[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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

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

@@ -3,6 +3,9 @@ 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<import("../../composables").TableRowData>[];
+    actions: TableActionItem<{
+        [key: string]: any;
+        id: number;
+    }>[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,8 +1,11 @@
 import type { ActionItem } from "../../composables/nav";
+import type { Placement } from "@floating-ui/vue";
 type __VLS_Props = {
     actions?: ActionItem[];
+    placement?: Placement;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     actions: ActionItem[];
+    placement: Placement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/types/lib-components/overlays/TooltipWrapper.vue.d.ts

@@ -0,0 +1,18 @@
+import { type Placement } from "@floating-ui/vue";
+type __VLS_Props = {
+    as?: string;
+    position?: Placement | "auto";
+    tooltip: string;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+    position: Placement | "auto";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};