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

package/package.json

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

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

@@ -61,6 +61,10 @@ const onInput = (e: Event) => {
     val = looseToNumber(val)
   }
 
+  if (typeof val === "string") {
+    val = val.trim()
+  }
+
   modelState.value = val
 
   inputValidation(e)

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

@@ -26,8 +26,17 @@ const {
 } = useInputField(props)
 
 const onChange = (e: Event) => {
-  modelState.value = (e.target as HTMLInputElement).value
-  validate(e)
+  // NOTE(spk): The selectedIndex references the list of options in tree order
+  // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-selectedindex
+  const selectedIndex = (e.target as HTMLSelectElement).selectedIndex
+
+  // NOTE(spk): we disable the 0 index option in the list, so there's
+  // no expectation it will trigger a change event.  Likewise, dynamic updates to
+  // a modelValue prop in a parent do not trigger the change event.
+  if (selectedIndex > 0) {
+    modelState.value = props.options[selectedIndex - 1].value
+    validate(e)
+  }
 }
 </script>
 

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

@@ -22,7 +22,7 @@ const {
 } = useInputField(props)
 
 const onInput = (e: Event) => {
-  modelState.value = (e.target as HTMLInputElement).value
+  modelState.value = (e.target as HTMLInputElement).value.trim()
   inputValidation(e)
 }
 </script>

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 reset = (): void => {
+  pagination.value.page = 1
+  loadAndRender()
+}
 
-loadAndRender(true)
+const publicMethods: DetailListAPI = {
+  refresh: loadAndRender,
+  reset: reset,
+}
+
+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/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 list data with the current api params state
+     * @returns void
+     */
+    refresh: () => void;
+    /**
+     * Reset the list data back to page 1 and load
+     * @returns void
+     */
+    reset: () => void;
+}
+export type SortDir = "asc" | "desc";

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/layout/DateFilter.vue.d.ts

@@ -1,19 +1,16 @@
 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/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/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;
+    };
+};

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

@@ -0,0 +1,39 @@
+import * as TableTypes from "../../composables/table";
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    clickable?: boolean | undefined;
+    loader?: boolean | undefined;
+    tableData: TableTypes.Dynamic;
+}>, {
+    clickable: boolean;
+    loader: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    handleClick: (v: any) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    tableData?: unknown;
+    clickable?: unknown;
+    loader?: unknown;
+} & {
+    tableData: TableTypes.Dynamic;
+    clickable: boolean;
+    loader: boolean;
+} & {}> & {
+    onHandleClick?: ((v: any) => any) | undefined;
+}, {
+    clickable: boolean;
+    loader: boolean;
+}>;
+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_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

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

@@ -0,0 +1,18 @@
+import type { ActionMenuItemCallback } from "../../composables/nav";
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    items: ActionMenuItemCallback[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    items?: unknown;
+} & {
+    items: ActionMenuItemCallback[];
+} & {}>, {}>;
+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/navigation/ActionsDropdownEmit.vue.d.ts

@@ -0,0 +1,22 @@
+import type { ActionMenuEmit } from "../../composables/nav";
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    items: ActionMenuEmit[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (v: string) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    items?: unknown;
+} & {
+    items: ActionMenuEmit[];
+} & {}> & {
+    onClick?: ((v: string) => any) | undefined;
+}, {}>;
+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;
+    };
+};