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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.9.5",
+  "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/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/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;
     };
 }>> & {

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

@@ -1,19 +1,16 @@
-import { DateRange } from "../../composables/date";
+import { DateRange } from "@/composables/date";
+import { SortDir } from "@/composables/list";
 declare const _default: import("vue").DefineComponent<{
     dateRange: {
         type: import("vue").PropType<DateRange>;
         required: true;
     };
     sortDir: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    title: {
-        type: import("vue").PropType<string>;
+        type: import("vue").PropType<SortDir>;
         required: true;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "sort-dir-changed": (val: string) => void;
+    "sort-dir-changed": (val: SortDir) => void;
     "date-range-changed": (val: DateRange) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     dateRange: {
@@ -21,15 +18,11 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     sortDir: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    title: {
-        type: import("vue").PropType<string>;
+        type: import("vue").PropType<SortDir>;
         required: true;
     };
 }>> & {
-    "onSort-dir-changed"?: ((val: string) => any) | undefined;
+    "onSort-dir-changed"?: ((val: SortDir) => any) | undefined;
     "onDate-range-changed"?: ((val: DateRange) => any) | undefined;
 }, {}, {}>;
 export default _default;

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

@@ -1,4 +1,4 @@
-import * as NavTypes from "../../composables/nav";
+import * as NavTypes from "@/composables/nav";
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     activeUrl: {
         type: import("vue").PropType<string>;

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

@@ -1,5 +1,5 @@
-import * as NavTypes from "../../composables/nav";
-import User from "../../composables/user";
+import * as NavTypes from "@/composables/nav";
+import User from "@/composables/user";
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     activeUrl: {
         type: import("vue").PropType<string>;

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

@@ -1,4 +1,4 @@
-import type { TableActions, TableColumns, TableRowsData } from "../../composables/table";
+import type { TableActions, TableColumns, TableRowsData } from "@/composables/table";
 declare const _default: import("vue").DefineComponent<{
     tableActions: {
         type: import("vue").PropType<TableActions<any>>;

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

@@ -1,40 +1,72 @@
+import { SortDir } from "@/composables/list";
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    title: {
+    url: {
         type: import("vue").PropType<string>;
         required: true;
     };
-    url: {
+    borderless: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    defaultSort: {
         type: import("vue").PropType<string>;
-        required: true;
+        default: string;
     };
-    refreshTrigger: {
-        type: import("vue").PropType<number>;
-        default: number;
+    defaultSortDir: {
+        type: import("vue").PropType<SortDir>;
+        default: string;
+    };
+    disableDate: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    disableNavigation: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
     };
-    reloadTrigger: {
+    perPage: {
         type: import("vue").PropType<number>;
         default: number;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
+}, {
+    refresh: () => void;
+    reset: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    url: {
         type: import("vue").PropType<string>;
         required: true;
     };
-    url: {
+    borderless: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    defaultSort: {
         type: import("vue").PropType<string>;
-        required: true;
+        default: string;
     };
-    refreshTrigger: {
-        type: import("vue").PropType<number>;
-        default: number;
+    defaultSortDir: {
+        type: import("vue").PropType<SortDir>;
+        default: string;
+    };
+    disableDate: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    disableNavigation: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
     };
-    reloadTrigger: {
+    perPage: {
         type: import("vue").PropType<number>;
         default: number;
     };
 }>>, {
-    refreshTrigger: number;
-    reloadTrigger: number;
+    borderless: boolean;
+    defaultSort: string;
+    defaultSortDir: SortDir;
+    disableDate: boolean;
+    disableNavigation: boolean;
+    perPage: number;
 }, {}>, {
     default?(_: {
         item: any;

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

@@ -1,4 +1,4 @@
-import type { DynamicTableOptions, TableActions, TableColumns } from "../../composables/table";
+import type { DynamicTableOptions, TableActions, TableColumns } from "@/composables/table";
 declare const _default: import("vue").DefineComponent<{
     tableActions: {
         type: import("vue").PropType<TableActions<any>>;

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

@@ -0,0 +1,21 @@
+import type { TableColumn, TableRow } from "../../composables/table";
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    columns: TableColumn<TableRow>[];
+    rows: TableRow[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    columns?: unknown;
+    rows?: unknown;
+} & {
+    columns: TableColumn<TableRow>[];
+    rows: TableRow[];
+} & {}>, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -0,0 +1,27 @@
+import * as TableTypes from "../../composables/table";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    tableData: Omit<TableTypes.Static, "currentUser">;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    tableData?: unknown;
+} & {
+    tableData: Omit<TableTypes.Static, "currentUser">;
+} & {}>, {}>, {
+    actions: (_: {
+        row: Record<string, unknown>;
+    }) => any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};