@xy-planning-network/trees 0.9.4 → 0.9.6-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.9.4",
+  "version": "0.9.6-rc1",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",

package/src/lib-components/layout/DateFilter.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import { DateRange } from "@/composables/date"
 import { ref } from "vue"
+import { DateRange } from "@/composables/date"
+import { SortDir } from "@/composables/list"
 import DateRangePicker from "../forms/DateRangePicker.vue"
 import Select from "@/lib-components/forms/Select.vue"
 
 const props = defineProps<{
   dateRange: DateRange
-  sortDir: string
-  title: string
+  sortDir: SortDir
 }>()
 const dateRange = ref<DateRange>(props.dateRange)
-const sortDir = ref<string>(props.sortDir)
-const sortOptions = [
-  { label: "Newest-Oldest", value: "DESC" },
-  { label: "Oldest-Newest", value: "ASC" },
+const sortDir = ref<SortDir>(props.sortDir)
+const sortOptions: { label: string; value: SortDir }[] = [
+  { label: "Newest-Oldest", value: "desc" },
+  { label: "Oldest-Newest", value: "asc" },
 ]
 
 const emits = defineEmits<{
-  (e: "sort-dir-changed", val: string): void
+  (e: "sort-dir-changed", val: SortDir): void
   (e: "date-range-changed", val: DateRange): void
 }>()
 
-const sortDirChanged = (sortDir: string) => {
+const sortDirChanged = (sortDir: SortDir) => {
   emits("sort-dir-changed", sortDir)
 }
 
@@ -30,25 +30,14 @@ const dateRangeChanged = (dateRange: DateRange) => {
 }
 </script>
 <template>
-  <div
-    class="md:flex md:items-center md:justify-between bg-white mx-auto py-4 border-t border-gray-100"
-  >
-    <div class="flex-1 min-w-0">
-      <h1 class="text-lg leading-6 font-semibold text-gray-900">
-        {{ title }}
-      </h1>
-    </div>
-    <div class="mt-4 flex md:mt-0 md:ml-4">
-      <Select
-        v-model="sortDir"
-        :options="sortOptions"
-        @update:model-value="sortDirChanged"
-      ></Select>
-      <DateRangePicker
-        v-model="dateRange"
-        class="ml-3"
-        @update:model-value="dateRangeChanged"
-      />
-    </div>
-  </div>
+  <Select
+    v-model="sortDir"
+    :options="sortOptions"
+    @update:model-value="sortDirChanged"
+  ></Select>
+  <DateRangePicker
+    v-model="dateRange"
+    class="ml-3"
+    @update:model-value="dateRangeChanged"
+  />
 </template>

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

@@ -34,12 +34,12 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
           class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg"
         >
           <table class="min-w-full divide-y divide-gray-200">
-            <thead>
+            <thead class="bg-gray-100">
               <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="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase leading-4"
                   :class="col.alignment"
                 >
                   {{ col.title }}
@@ -48,12 +48,16 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
                 <!--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"
+                  class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase leading-4"
                 />
               </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
-              <tr v-for="(row, rowIdx) in rows" :key="rowIdx">
+            <tbody class="bg-white">
+              <tr
+                v-for="(row, rowIdx) in rows"
+                :key="rowIdx"
+                class="even:bg-gray-50"
+              >
                 <template v-for="(cell, cellIdx) in row.cells" :key="cellIdx">
                   <component
                     :is="'td'"
@@ -87,7 +91,7 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
 
               <tr v-if="rows.length === 0">
                 <td
-                  :colspan="columns.length"
+                  :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/DetailList.vue

@@ -1,20 +1,58 @@
 <script setup lang="ts">
+import { computed, ref, watch } from "vue"
 import { useAppFlasher } from "@/composables"
-import { ref, watch } from "vue"
+import { SortDir, DetailListAPI } from "@/composables/list"
 import BaseAPI from "../../api/base"
 import DateFilter from "../layout/DateFilter.vue"
 import Paginator from "../navigation/Paginator.vue"
 
 const props = withDefaults(
   defineProps<{
-    refreshTrigger?: number
-    reloadTrigger?: number
-    title: string
+    /**
+     * borderless removes the default border styling applied around list items.
+     * This is useful when filters or pagination navigation components show,
+     * but less helpful when this component is dialed back in functionality.
+     */
+    borderless?: boolean
+
+    /**
+     * defaultSort overrides the default field to sort items on.
+     */
+    defaultSort?: string
+
+    /**
+     * defaultSortDir overrides the default order to sort items with.
+     */
+    defaultSortDir?: SortDir
+
+    /**
+     * disableDate turns off the date-range filter input.
+     */
+    disableDate?: boolean
+
+    /**
+     * disableNavigation hides navigation components from displaying.
+     * This makes the List as a "single-page" limiting the number of results via perPage.
+     */
+    disableNavigation?: boolean
+
+    /**
+     * perPage overrides the default number of items per page to retrieve.
+     */
+    perPage?: number
+
+    /**
+     * url is the endpoint to retrieve list data from
+     */
     url: string
   }>(),
   {
-    refreshTrigger: 0,
-    reloadTrigger: 0,
+    borderless: false,
+    disableNavigation: false,
+    disableDate: false,
+    defaultSort: "created_at",
+    defaultSortDir: "desc",
+    perPage: 10,
   }
 )
 
@@ -22,24 +60,31 @@ const dateRange = ref<{ minDate: number; maxDate: number }>({
   minDate: 0,
   maxDate: 0,
 })
-const hasContent = ref(true)
+
 const items = ref<any[]>([])
+
 const pagination = ref({
   page: 1,
-  perPage: 10,
+  perPage: props.perPage,
   totalItems: 0,
   totalPages: 0,
 })
-const sortDir = ref("DESC")
 
-const loadAndRender = (checkForContent: boolean): void => {
-  const params = {
+const sort = ref(props.defaultSort)
+const sortDir = ref(props.defaultSortDir)
+
+const loadAndRender = (): void => {
+  const params: Record<string, unknown> = {
+    maxDate: dateRange.value.maxDate,
+    minDate: dateRange.value.minDate,
     page: pagination.value.page,
     perPage: pagination.value.perPage,
+    q: "",
+    sort: sort.value,
     sortDir: sortDir.value,
   }
 
-  BaseAPI.get(props.url, {}, Object.assign(params, dateRange.value)).then(
+  BaseAPI.get(props.url, {}, params).then(
     (success: any) => {
       pagination.value = {
         page: success.data.page,
@@ -48,7 +93,6 @@ const loadAndRender = (checkForContent: boolean): void => {
         totalPages: success.data.totalPages,
       }
       items.value = success.data.items
-      if (checkForContent) hasContent.value = items.value.length != 0
     },
     () => {
       useAppFlasher.genericError()
@@ -56,39 +100,51 @@ const loadAndRender = (checkForContent: boolean): void => {
   )
 }
 
-watch([sortDir, dateRange], () => {
-  loadAndRender(false)
+const hasContent = computed((): boolean => {
+  return items.value.length ? true : false
 })
 
-watch(
-  () => props.refreshTrigger,
-  () => {
-    loadAndRender(false)
-  }
-)
+const filtersAreConfigured = computed(() => {
+  return !props.disableDate
+})
 
-watch(
-  () => props.reloadTrigger,
-  () => {
-    // This lets parent components trigger a refresh of the current page depending on external actions.
-    pagination.value.page = 1
-    loadAndRender(true)
-  }
-)
+const showPaginator = computed(() => {
+  return !props.disableNavigation && hasContent
+})
+
+const reloadTable = (): void => {
+  pagination.value.page = 1
+  loadAndRender()
+}
 
-loadAndRender(true)
+const publicMethods: DetailListAPI = {
+  refresh: loadAndRender,
+  reset: reloadTable,
+}
+
+watch([sortDir, dateRange], () => {
+  loadAndRender()
+})
+
+defineExpose(publicMethods)
+loadAndRender()
 </script>
 <template>
-  <div>
-    <DateFilter
-      :date-range="dateRange"
-      :sort-dir="sortDir"
-      :title="title"
-      @sort-dir-changed="sortDir = $event"
-      @date-range-changed="dateRange = $event"
-    />
+  <div :class="{ 'mt-4 space-y-2': filtersAreConfigured }">
+    <div v-if="!disableDate" class="flex">
+      <DateFilter
+        :date-range="dateRange"
+        :sort-dir="sortDir"
+        @sort-dir-changed="sortDir = $event"
+        @date-range-changed="dateRange = $event"
+      />
+    </div>
 
-    <div v-if="hasContent" class="shadow overflow-hidden sm:rounded-md border">
+    <div
+      v-if="hasContent"
+      class="overflow-hidden"
+      :class="{ 'shadow sm:rounded-md border': !borderless }"
+    >
       <ul>
         <li
           v-for="(item, idx) in items"
@@ -100,12 +156,12 @@ loadAndRender(true)
       </ul>
     </div>
 
-    <slot v-else name="empty"></slot>
+    <slot v-else name="empty"> No items were found! </slot>
 
     <Paginator
-      v-if="hasContent"
+      v-if="showPaginator"
       v-model="pagination"
-      @update:model-value="loadAndRender(false)"
+      @update:model-value="loadAndRender()"
     />
   </div>
 </template>

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

@@ -236,76 +236,81 @@ loadAndRender()
       class="relative z-0 min-w-full align-middle border-b border-gray-200 shadow sm:rounded-lg overflow-x-auto"
     >
       <table class="min-w-full divide-y divide-gray-200">
-        <thead>
+        <thead class="bg-gray-100">
           <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="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase leading-4"
               :class="col.alignment"
             >
-              <span v-if="col.title">{{ col.title }}</span>
-              <span
-                v-if="col.sort"
-                class="cursor-pointer"
-                @click.prevent="handleSort(col.sort as string)"
+              <div
+                class="inline-flex items-center gap-2"
+                :class="{ 'cursor-pointer': col.sort }"
+                @click.prevent="
+                  col.sort ? handleSort(col.sort as string) : undefined
+                "
               >
-                <svg
-                  v-if="currentSort !== col.sort"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  class="h-5 inline"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M8 9l4-4 4 4m0 6l-4 4-4-4"
-                  />
-                </svg>
-                <svg
-                  v-else-if="currentSortDirection == 'desc'"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                  class="h-5 inline"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-                <svg
-                  v-else
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                  class="h-5 inline"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                <span v-if="col.title">{{ col.title }}</span>
+                <span v-if="col.sort">
+                  <svg
+                    v-if="currentSort !== col.sort"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    class="h-5 inline"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M8 9l4-4 4 4m0 6l-4 4-4-4"
+                    />
+                  </svg>
+                  <svg
+                    v-else-if="currentSortDirection == 'desc'"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    class="h-5 inline"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                  <svg
+                    v-else
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    class="h-5 inline"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </div>
             </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"
+              class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase leading-4"
             />
           </tr>
         </thead>
 
-        <tbody class="bg-white divide-y divide-gray-200">
+        <tbody class="bg-white">
           <tr
             v-for="(row, rowIdx) in rows"
             :key="rowIdx"
+            class="even:bg-gray-50"
             @click="$emit('click:row', row.rowData)"
           >
             <template v-for="(cell, cellIdx) in row.cells" :key="cellIdx">
@@ -341,7 +346,7 @@ loadAndRender()
 
           <tr v-if="!hasContent">
             <td
-              :colspan="rows.length"
+              :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/navigation/ActionsDropdown.vue

@@ -29,7 +29,7 @@ const { floatingStyles } = useFloating(trigger, wrapper, {
   <Menu as="div" class="relative flex justify-end items-center">
     <MenuButton
       ref="trigger"
-      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"
+      class="w-8 h-8 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="!hasActions"
     >
       <span class="sr-only">Open options</span>

package/types/components.d.ts

@@ -1,4 +1,4 @@
-import { TreesComponents } from "./lib-components"
+import { TreesComponents } from "@/lib-components"
 
 /**
  * When using App.use(Trees) include a

package/types/composables/index.d.ts

@@ -1,7 +1,8 @@
 import { default as useBaseAPI, useBaseAPIGet, useBaseAPIPatch, useBaseAPIPut, useBaseAPIPost, useBaseAPIDelete } from "./useBaseAPI";
 import type { UseBaseAPIOptions, UseBaseAPI } from "./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, };
+import type { DetailListAPI, SortDir } from "./list";
+export type { UseBaseAPIOptions, UseBaseAPI, DetailListAPI, DynamicTableOptions, DynamicTableAPI, SortDir, TableActionItem, TableColumn, TableActions, TableCellAlignment, TableRowData, TableColumns, TableRowsData, };
 export { useBaseAPI, useBaseAPIGet, useBaseAPIPatch, useBaseAPIPut, useBaseAPIPost, useBaseAPIDelete, };
 import { useFlashes, useAppFlashes, useAppFlasher } from "./useFlashes";
 import type { FlashMessage, FlashType, FlashStore, Flasher } from "./useFlashes";

package/types/composables/list.d.ts

@@ -0,0 +1,13 @@
+export interface DetailListAPI {
+    /**
+     * 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 type SortDir = "asc" | "desc";

package/types/composables/table.d.ts

@@ -1,5 +1,5 @@
 import { VNodeChild } from "vue";
-import { ActionItem } from "../composables/nav";
+import { ActionItem } from "@/composables/nav";
 import { DateRangeProps } from "./date";
 export interface DynamicTableOptions {
     dateSearch?: boolean | DateRangeProps;

package/types/entry.d.ts

@@ -1,17 +1,17 @@
 import { Plugin } from "vue";
-import BaseAPI, { isHttpCancel, isHttpError, setBaseAPIDefaults } from "./api/base";
-import type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged } from "./api/client";
-import { emailPattern, looseToNumber, phonePattern, textInputTypes, useInputField } from "./composables/forms";
-import { useModel } from "./composables/setupHelpers";
-import { debounce as debounceFn, debounceLeading } from "./helpers/Debounce";
-import { throttle as throttleFn } from "./helpers/Throttle";
+import BaseAPI, { isHttpCancel, isHttpError, setBaseAPIDefaults } from "@/api/base";
+import type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged } from "@/api/client";
+import { emailPattern, looseToNumber, phonePattern, textInputTypes, useInputField } from "@/composables/forms";
+import { useModel } from "@/composables/setupHelpers";
+import { debounce as debounceFn, debounceLeading } from "@/helpers/Debounce";
+import { throttle as throttleFn } from "@/helpers/Throttle";
 declare const install: Exclude<Plugin["install"], undefined>;
 export default install;
-export * from "./composables/index";
-export * from "./lib-components/index";
+export * from "@/composables/index";
+export * from "@/lib-components/index";
 export { BaseAPI, isHttpCancel, isHttpError, setBaseAPIDefaults };
 export type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged, };
-export type * from "./composables/forms";
+export type * from "@/composables/forms";
 export { emailPattern, looseToNumber, phonePattern, textInputTypes, useInputField, };
 export { useModel };
 export { debounceFn, debounceLeading, throttleFn };

package/types/helpers/Slots.d.ts

@@ -0,0 +1,2 @@
+import { Slot } from "vue";
+export declare function hasSlotContent(slot: Slot | undefined, slotProps?: {}): boolean;

package/types/lib-components/forms/MultiCheckboxes.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     options: {
-        type: import("vue").PropType<import("../../composables/forms").InputOption[]>;
+        type: import("vue").PropType<import("@/composables/forms").InputOption[]>;
         required: true;
     };
     columns: {
@@ -55,7 +55,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     options: {
-        type: import("vue").PropType<import("../../composables/forms").InputOption[]>;
+        type: import("vue").PropType<import("@/composables/forms").InputOption[]>;
         required: true;
     };
     columns: {

package/types/lib-components/forms/Radio.vue.d.ts

@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     options: {
-        type: import("vue").PropType<import("../../composables/forms").InputOption[]>;
+        type: import("vue").PropType<import("@/composables/forms").InputOption[]>;
         required: true;
     };
     columns: {
@@ -43,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     options: {
-        type: import("vue").PropType<import("../../composables/forms").InputOption[]>;
+        type: import("vue").PropType<import("@/composables/forms").InputOption[]>;
         required: true;
     };
     columns: {

package/types/lib-components/forms/RadioCards.vue.d.ts

@@ -1,4 +1,4 @@
-import type { InputOption } from "../../composables/forms";
+import type { InputOption } from "@/composables/forms";
 declare const _default: <T extends InputOption>(__VLS_props: {
     label?: string | undefined;
     modelValue?: string | number | null | undefined;

package/types/lib-components/forms/Select.vue.d.ts

@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     options: {
-        type: import("vue").PropType<import("../../composables/forms").InputOption[]>;
+        type: import("vue").PropType<import("@/composables/forms").InputOption[]>;
         required: true;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -40,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     options: {
-        type: import("vue").PropType<import("../../composables/forms").InputOption[]>;
+        type: import("vue").PropType<import("@/composables/forms").InputOption[]>;
         required: true;
     };
 }>> & {