@xy-planning-network/trees 0.6.5 → 0.6.6-rc-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.6.5",
+  "version": "0.6.6-rc-2",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -48,7 +48,6 @@
     "deepmerge": "^4.3.1",
     "eslint": "^8.38.0",
     "eslint-plugin-vue": "^9.10.0",
-    "mitt": "^2.1.0",
     "postcss": "^8.4.21",
     "prettier": "^2.8.7",
     "tailwindcss": "^3.2.1",

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useTable } from "@/composables/useTable"
+import { TableActions, TableColumns, TableRowsData } from "@/composables/table"
+import { ActionsDropdown } from "@/lib-components"
+
+const props = withDefaults(
+  defineProps<{
+    tableActions?: TableActions<any>
+    tableColumns: TableColumns<any>
+    tableData: TableRowsData
+  }>(),
+  {
+    tableActions: () => [],
+  }
+)
+
+const { columns, hasActions, isEmptyCellValue, rows } = useTable(
+  props.tableData,
+  props.tableColumns,
+  props.tableActions
+)
+</script>
+<template>
+  <div class="flex flex-col">
+    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+        <div
+          class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg"
+        >
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead>
+              <tr>
+                <th
+                  v-for="(col, idx) in columns"
+                  :key="idx"
+                  class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase bg-gray-50 leading-4"
+                  :class="{
+                    'text-left': col.alignment === 'left',
+                    'text-right': col.alignment === 'right',
+                    'text-center': col.alignment === 'center',
+                  }"
+                >
+                  {{ col.title }}
+                </th>
+
+                <!--Table Actions Header-->
+                <th
+                  v-if="hasActions"
+                  class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase bg-gray-50 leading-4"
+                >
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <tr v-for="(row, rowIdx) in rows" :key="rowIdx">
+                <template v-for="(cell, cellIdx) in row.cells" :key="cellIdx">
+                  <component
+                    :is="'td'"
+                    class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
+                    :class="{
+                      'text-left': cell.alignment === 'left',
+                      'text-right': cell.alignment === 'right',
+                      'text-center': cell.alignment === 'center',
+                    }"
+                  >
+                    <template v-if="cell.isComponent">
+                      <component :is="cell.val" />
+                    </template>
+
+                    <span v-else :class="cell.classNames">
+                      {{ isEmptyCellValue(cell.val) ? "-" : String(cell.val) }}
+                    </span>
+                  </component>
+                </template>
+
+                <!--Table Actions Cell-->
+                <td
+                  v-if="hasActions"
+                  class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
+                >
+                  <ActionsDropdown :items="row.actions" />
+                </td>
+              </tr>
+
+              <tr v-if="rows.length === 0">
+                <td
+                  :colspan="columns.length"
+                  class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
+                >
+                  No items were found!
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -2,11 +2,13 @@
 import { DownloadIcon } from "@heroicons/vue/solid"
 defineProps<{
   propsData: Record<string, unknown>
-  attribute: string
 }>()
 </script>
 <template>
-  <a :href="propsData[attribute] as string">
-    <DownloadIcon class="h-6 w-6 group-hover:text-gray-500 transition" />
+  <a href="#">
+    <DownloadIcon
+      class="h-6 w-6 group-hover:text-gray-500 transition text-right"
+      text-anchor="end"
+    />
   </a>
 </template>

package/src/lib-components/lists/{Table.vue → DynamicTable.vue}

@@ -1,47 +1,63 @@
 <script setup lang="ts">
-import {
-  ComponentPublicInstance,
-  computed,
-  getCurrentInstance,
-  ref,
-  watch,
-} from "vue"
+import { computed, ref, watch } from "vue"
+import { ActionsDropdown } from "@/lib-components"
 import DateRangePicker from "../forms/DateRangePicker.vue"
 import Paginator from "../navigation/Paginator.vue"
 import BaseAPI from "../../api/base"
-import * as TableTypes from "@/composables/table"
+import {
+  DynamicTableAPI,
+  DynamicTableOptions,
+  TableActions,
+  TableColumns,
+} from "@/composables/table"
 import { useAppFlasher } from "@/composables/useFlashes"
 import { TrailsRespPaged } from "@/api/client"
+import { useTable } from "@/composables/useTable"
 
 const props = withDefaults(
   defineProps<{
     clickable?: boolean
     loader?: boolean
-    tableData: TableTypes.Dynamic
+    tableActions?: TableActions<any>
+    tableColumns: TableColumns<any>
+    tableOptions: DynamicTableOptions
   }>(),
   {
     clickable: false,
     loader: true,
+    tableActions: () => [],
   }
 )
 
 defineEmits<{
-  (e: "handleClick", v: any): void
+  (
+    e: "click:row",
+    v: (typeof tableData.value)[number],
+    c: typeof publicMethods
+  ): void
 }>()
 
+const tableData = ref<Record<string, any>[]>([])
+
+const { columns, hasActions, isEmptyCellValue, rows } = useTable(
+  tableData,
+  props.tableColumns,
+  props.tableActions
+)
+
 const currentSort = ref(
-  props.tableData.defaultSort ? props.tableData.defaultSort : ""
+  props.tableOptions.defaultSort ? props.tableOptions.defaultSort : ""
 )
 const currentSortDirection = ref(
-  props.tableData.defaultSortDirection
-    ? props.tableData.defaultSortDirection
+  props.tableOptions.defaultSortDirection
+    ? props.tableOptions.defaultSortDirection
     : "desc"
 )
 const dateRange = ref({
   minDate: 0,
   maxDate: 0,
 })
-const items = ref<any[]>([])
+
 const pagination = ref({
   page: 1,
   perPage: 10,
@@ -49,27 +65,7 @@ const pagination = ref({
   totalPages: 0,
 })
 const query = ref("")
-const cellValue = (
-  item: Record<string, any>,
-  col: TableTypes.Column
-): string => {
-  if (col.key) {
-    // NOTE(dlk): supports dot notation for nested keys
-    return col.key.split(".").reduce((o, i) => o[i], item as any)
-  }
-
-  if (col.presenter) {
-    // TODO: discuss this pattern.  Current usage can be replaced with modules.
-    // https://v3.vuejs.org/api/composition-api.html#getcurrentinstance
-    const internalInstance = getCurrentInstance()
-    return col.presenter(
-      item,
-      internalInstance?.proxy as ComponentPublicInstance
-    )
-  }
 
-  return ""
-}
 const dateRangeChanged = (newDateRange: {
   minDate: number
   maxDate: number
@@ -101,7 +97,7 @@ const loadAndRender = (): void => {
   }
 
   BaseAPI.get<TrailsRespPaged<unknown>>(
-    props.tableData.url,
+    props.tableOptions.url,
     { skipLoader: !props.loader },
     params
   ).then(
@@ -112,7 +108,7 @@ const loadAndRender = (): void => {
         totalItems: success.data.totalItems,
         totalPages: success.data.totalPages,
       }
-      items.value = success.data.items
+      tableData.value = success.data.items as Record<string, any>[]
     },
     () => {
       useAppFlasher.genericError()
@@ -126,11 +122,11 @@ const reloadTable = (): void => {
 }
 
 const hasContent = computed((): boolean => {
-  return items.value.length ? true : false
+  return rows.value.length ? true : false
 })
 
 watch(
-  () => props.tableData.refreshTrigger,
+  () => props.tableOptions.refreshTrigger,
   () => {
     // This lets parent components trigger a refresh of the current page depending on external actions.
     loadAndRender()
@@ -138,13 +134,20 @@ watch(
 )
 
 watch(
-  () => props.tableData.reloadTrigger,
+  () => props.tableOptions.reloadTrigger,
   () => {
     // This lets parent components trigger a reload of page 1 depending on external actions.
     reloadTable()
   }
 )
 
+const publicMethods: DynamicTableAPI = {
+  refresh: loadAndRender,
+  reset: reloadTable,
+}
+
+defineExpose(publicMethods)
+
 // onCreated
 loadAndRender()
 </script>
@@ -153,7 +156,7 @@ loadAndRender()
     <div
       class="flex flex-col mb-4 space-y-4 lg:space-y-0 lg:flex-row lg:justify-between"
     >
-      <div v-if="tableData.search" class="w-full max-w-lg lg:max-w-xs">
+      <div v-if="tableOptions.search" class="w-full max-w-lg lg:max-w-xs">
         <label for="search" class="sr-only">Search</label>
         <div class="relative">
           <div
@@ -180,7 +183,7 @@ loadAndRender()
           />
         </div>
       </div>
-      <div v-if="tableData.dateSearch" class="w-full max-w-lg lg:max-w-xs">
+      <div v-if="tableOptions.dateSearch" class="w-full max-w-lg lg:max-w-xs">
         <DateRangePicker
           v-model="dateRange"
           @update:model-value="dateRangeChanged"
@@ -195,11 +198,16 @@ loadAndRender()
         <thead>
           <tr>
             <th
-              v-for="(col, idx) in tableData.columns"
+              v-for="(col, idx) in columns"
               :key="idx"
-              class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-900 uppercase border-b border-gray-200 bg-gray-50 leading-4"
+              class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase border-b border-gray-200 bg-gray-50 leading-4"
+              :class="{
+                'text-left': col.alignment === 'left',
+                'text-right': col.alignment === 'right',
+                'text-center': col.alignment === 'center',
+              }"
             >
-              <span v-if="!!col.display.length">{{ col.display }}</span>
+              <span v-if="col.title">{{ col.title }}</span>
               <span
                 v-if="col.sort"
                 class="cursor-pointer"
@@ -248,37 +256,56 @@ loadAndRender()
                 </svg>
               </span>
             </th>
+
+            <!--Table Actions Header-->
+            <th
+              v-if="hasActions"
+              class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase bg-gray-50 leading-4"
+            >
+              Actions
+            </th>
           </tr>
         </thead>
 
         <tbody class="bg-white">
           <tr
-            v-for="(item, rowIdx) in items"
-            :key="item.id ? item.id : rowIdx"
+            v-for="(row, rowIdx) in rows"
+            :key="rowIdx"
             :class="{ 'cursor-pointer': clickable }"
-            @click="$emit('handleClick', item)"
+            @click="$emit('click:row', row.rowData, publicMethods)"
           >
+            <template v-for="(cell, cellIdx) in row.cells" :key="cellIdx">
+              <component
+                :is="'td'"
+                class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
+                :class="{
+                  'text-left': cell.alignment === 'left',
+                  'text-right': cell.alignment === 'right',
+                  'text-center': cell.alignment === 'center',
+                }"
+              >
+                <template v-if="cell.isComponent">
+                  <component :is="cell.val" />
+                </template>
+
+                <span v-else :class="cell.classNames">
+                  {{ isEmptyCellValue(cell.val) ? "-" : String(cell.val) }}
+                </span>
+              </component>
+            </template>
+
+            <!--Table Actions Cell-->
             <td
-              v-for="(col, colIdx) in tableData.columns"
-              :key="rowIdx + '-' + colIdx"
-              class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap border-b border-gray-200 leading-5"
-              :class="col.class"
+              v-if="hasActions"
+              class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
             >
-              <component
-                :is="col.component"
-                v-if="col.component"
-                :props-data="item"
-                :current-user="tableData.currentUser"
-                :attribute="col.key"
-                :items="col.items"
-              ></component>
-              <div v-else v-text="cellValue(item, col)"></div>
+              <ActionsDropdown :items="row.actions" />
             </td>
           </tr>
 
           <tr v-if="!hasContent">
             <td
-              :colspan="tableData.columns.length"
+              :colspan="rows.length"
               class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap border-b border-gray-200 leading-5"
             >
               No items were found!

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

@@ -1,47 +1,36 @@
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue"
 import { DotsVerticalIcon } from "@heroicons/vue/solid"
-import { onMounted, ref } from "vue"
-import * as TableTypes from "@/composables/table"
-import User from "@/composables/user"
+import { computed, isRef } from "vue"
+import type { ActionMenuItem } from "@/composables/nav"
 
 const props = defineProps<{
-  currentUser: User
-  items: TableTypes.MenuItem[]
-  propsData: any
+  items: ActionMenuItem[]
 }>()
 
-const hasActionItems = ref(false)
-
-const emitEvent = (event: string): void => {
-  window.VueBus.emit(event, props.propsData)
-}
-
-const show = (item: TableTypes.MenuItem): boolean => {
-  if (!item.show) return true
-  return item.show(props.propsData, props.currentUser)
-}
+const menuItems = computed(() => {
+  return props.items.filter((item) => {
+    if (item.show === undefined) {
+      return true
+    }
 
-onMounted(() => {
-  for (let item of props.items) {
-    if (!item.show) {
-      hasActionItems.value = true
-      return
+    if (isRef<boolean>(item.show)) {
+      return item.show.value
     }
 
-    const showActionItem = item.show(props.propsData, props.currentUser)
-    if (showActionItem) {
-      hasActionItems.value = true
-      return
+    if (typeof item.show === "boolean") {
+      return item.show
     }
-  }
+
+    return item.show()
+  })
 })
 </script>
 <template>
   <Menu as="div" class="relative flex justify-end items-center">
     <MenuButton
       class="w-8 h-8 bg-white inline-flex items-center justify-center text-gray-700 rounded-full hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-      :disabled="!hasActionItems"
+      :disabled="menuItems.length === 0"
     >
       <span class="sr-only">Open options</span>
       <DotsVerticalIcon class="w-5 h-5" aria-hidden="true" />
@@ -58,17 +47,18 @@ onMounted(() => {
         class="z-10 mx-3 origin-top-right absolute right-7 top-0 w-48 mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none"
       >
         <div class="py-1">
-          <template v-for="(item, idx) in items" :key="idx">
-            <MenuItem v-if="show(item)" v-slot="{ active }" as="div">
+          <template v-for="(item, idx) in menuItems" :key="idx">
+            <MenuItem v-slot="{ active }: { active: boolean }" as="div">
               <button
                 type="submit"
                 :class="[
                   active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                   'block w-full text-left px-4 py-2 text-sm font-semibold',
                 ]"
-                @click="emitEvent(item.event)"
-                v-text="item.label"
-              ></button>
+                @click="item.callback"
+              >
+                {{ item.label }}
+              </button>
             </MenuItem>
           </template>
         </div>

package/types/composables/index.d.ts

@@ -1,6 +1,7 @@
 import { default as useBaseAPI, useBaseAPIGet, useBaseAPIPut, useBaseAPIPost, useBaseAPIDelete } from "./useBaseAPI";
 import type { UseBaseAPIOptions, UseBaseAPI } from "./useBaseAPI";
-export type { UseBaseAPIOptions, UseBaseAPI };
+import type { DynamicTableOptions, DynamicTableAPI, TableActionItem, TableColumn, TableActions, TableCellAlignment, TableRowData, TableColumns, TableRowsData } from "./table";
+export type { UseBaseAPIOptions, UseBaseAPI, DynamicTableOptions, DynamicTableAPI, TableActionItem, TableColumn, TableActions, TableCellAlignment, TableRowData, TableColumns, TableRowsData, };
 export { useBaseAPI, useBaseAPIGet, useBaseAPIPut, useBaseAPIPost, useBaseAPIDelete, };
 import { useFlashes, useAppFlashes, useAppFlasher } from "./useFlashes";
 import type { FlashMessage, FlashType, FlashStore, Flasher } from "./useFlashes";

package/types/composables/nav.d.ts

@@ -1,3 +1,5 @@
+import { ComputedRef } from "vue";
+import { Ref } from "vue";
 import { Component, RenderFunction } from "vue";
 export interface Item {
     icon?: Component | RenderFunction;
@@ -11,3 +13,13 @@ export interface Pagination {
     totalItems: number;
     totalPages: number;
 }
+export interface ActionMenuItem {
+    label: string;
+    callback: (...args: any[]) => void;
+    show?: ((...args: any[]) => boolean) | Ref<boolean> | ComputedRef<boolean> | boolean;
+}
+export interface ActionMenuEmit {
+    id: string;
+    label: string;
+    show?: ((...args: any[]) => boolean) | Ref<boolean> | ComputedRef<boolean> | boolean;
+}

package/types/composables/table.d.ts

@@ -1,17 +1,6 @@
-import { Component, ComponentPublicInstance } from "vue";
-import User from "../composables/user";
-export interface Column {
-    display: string;
-    class?: string;
-    key?: string;
-    presenter?(row: any, instance: ComponentPublicInstance): any;
-    component?: Component;
-    items?: Array<MenuItem>;
-    sort?: string;
-}
-export interface Dynamic {
-    currentUser: User;
-    columns: Array<Column>;
+import { ComputedRef, Ref, VNodeChild } from "vue";
+import { ActionMenuItem } from "../composables/nav";
+export interface DynamicTableOptions {
     dateSearch?: boolean;
     defaultSort?: string;
     defaultSortDirection?: string;
@@ -20,13 +9,54 @@ export interface Dynamic {
     search?: boolean;
     url: string;
 }
-export interface MenuItem {
-    label: string;
-    event: string;
-    show?(propsData: any, currentUser: User): boolean;
+export interface DynamicTableAPI {
+    /**
+     * Force refresh the table data with the current api params state
+     * @returns void
+     */
+    refresh: () => void;
+    /**
+     * Reset the table data back to page 1 and load
+     * @returns void
+     */
+    reset: () => void;
 }
-export interface Static {
-    currentUser: User;
-    columns: Array<Column>;
-    items: Record<string, unknown>[];
+export interface TableActionItem<T = TableRowData> extends ActionMenuItem {
+    callback: (rowData: T, rowIndex: number) => void;
+    show?: ((rowData: T, rowIndex: number) => boolean) | Ref<boolean> | ComputedRef<boolean> | boolean;
+}
+export interface TableColumn<T = TableRowData> {
+    actions?: TableActions<T>;
+    /**
+     * The alignment the table cell should have
+     */
+    alignment?: TableCellAlignment;
+    /**
+     * Class names to wrap your column data in
+     * This field is ignored when a render method is defined
+     */
+    classNames?: string;
+    /**
+     * The text to display as the column header
+     */
+    title: string;
+    /**
+     * The property key your column data maps to
+     */
+    key: keyof T;
+    /**
+     * A render method for formatting the output of your columns data
+     * This may include returning a custom component using the vue h method
+     */
+    render?: (rowData: T, rowIndex: number) => string | number | boolean | VNodeChild;
+    /**
+     * A sorting identifier
+     * Only used on DynamicTable
+     */
+    sort?: string;
 }
+export type TableActions<T = TableRowData> = TableActionItem<T>[];
+export type TableCellAlignment = "left" | "center" | "right";
+export type TableRowData = Record<string, any>;
+export type TableColumns<T = TableRowData> = TableColumn<T>[];
+export type TableRowsData = TableRowData[];

package/types/composables/useFlashes.d.ts

@@ -1,4 +1,9 @@
 import { Ref } from "vue";
+declare global {
+    interface Window {
+        Flashes: FlashMessage[];
+    }
+}
 /**
  * FlashMessage represents the shape of an on screen notification
  * to a user.

package/types/composables/useTable.d.ts

@@ -0,0 +1,42 @@
+import { Ref } from "vue";
+import { TableColumns, TableRowsData, TableActions } from "./table";
+export declare const useTable: (rowData: TableRowsData | Ref<TableRowsData>, cols: TableColumns, acts: TableActions) => {
+    columns: import("vue").ComputedRef<{
+        alignment: import("./table").TableCellAlignment;
+        actions?: {
+            callback: (rowData: import("./table").TableRowData, rowIndex: number) => void;
+            show?: boolean | ((rowData: import("./table").TableRowData, rowIndex: number) => boolean) | undefined;
+            label: string;
+        }[] | undefined;
+        classNames?: string | undefined;
+        title: string;
+        key: string;
+        render?: ((rowData: import("./table").TableRowData, rowIndex: number) => import("vue").VNodeChild) | undefined;
+        sort?: string | undefined;
+    }[]>;
+    hasActions: import("vue").ComputedRef<boolean>;
+    isEmptyCellValue: (v: unknown) => boolean;
+    rows: import("vue").ComputedRef<{
+        actions: {
+            callback: () => void;
+            show: boolean | undefined;
+            label: string;
+        }[];
+        rowData: import("./table").TableRowData;
+        cells: {
+            isComponent: boolean;
+            val: any;
+            alignment: import("./table").TableCellAlignment;
+            actions?: {
+                callback: (rowData: import("./table").TableRowData, rowIndex: number) => void;
+                show?: boolean | ((rowData: import("./table").TableRowData, rowIndex: number) => boolean) | undefined;
+                label: string;
+            }[] | undefined;
+            classNames?: string | undefined;
+            title: string;
+            key: string;
+            render?: ((rowData: import("./table").TableRowData, rowIndex: number) => import("vue").VNodeChild) | undefined;
+            sort?: string | undefined;
+        }[];
+    }[]>;
+};