@xy-planning-network/trees 0.13.12 → 0.13.13

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

@@ -113,9 +113,9 @@ const pagination = ref({
 const query = ref("")
 
 const dateRangeChanged = (newDateRange: DateRange | undefined): void => {
-  if (newDateRange) {
+  // NOTE(spk): DateRangePicker emits update:model-value events on both minDate and maxDate mutations.
+  if (!newDateRange?.maxDate === !newDateRange?.minDate) {
     pagination.value.page = 1
-    dateRange.value = newDateRange
     loadAndRender()
   }
 }
@@ -322,6 +322,7 @@ loadAndRender()
             <DateRangePicker
               id="table-date-range"
               v-model="dateRange"
+              position="bottom-end"
               v-bind="{ ...dateSearchProps }"
               @update:model-value="dateRangeChanged"
             />

package/types/composables/date.d.ts

@@ -1,11 +1,11 @@
+import { DateRangeAction } from "../entry";
 export interface DateRange {
     minDate: number;
     maxDate: number;
 }
 export interface DateRangeProps {
-    help?: string;
-    label?: string;
-    maxDate?: Date | string | number;
+    actions?: DateRangeAction[];
     maxRange?: number;
-    startDate?: Date | string | number;
+    maxValue?: Date | null;
+    minValue?: Date;
 }

package/types/composables/dateRange.d.ts

@@ -0,0 +1,16 @@
+/**
+ * This file contains a collection of "Quick Actions" that can be used
+ * with DateRangePicker, so offer convenience ranges that a user can select at
+ * the click of a button.
+ */
+import { DateRangeAction } from "../entry";
+import type { DateValue } from "reka-ui";
+export declare const calendarDateToUnix: (date: DateValue) => number;
+export declare const dateRangeLast7Days: DateRangeAction;
+export declare const dateRangeLast30Days: DateRangeAction;
+export declare const dateRangeThisMonth: DateRangeAction;
+export declare const dateRangeLastMonth: DateRangeAction;
+export declare const dateRangeThisYear: DateRangeAction;
+export declare const dateRangeLastYear: DateRangeAction;
+export declare const dateRangeClear: DateRangeAction;
+export declare const dateRangeActions: DateRangeAction[];

package/types/composables/forms.d.ts

@@ -1,3 +1,4 @@
+import { DateRange } from "../composables/date";
 export interface Input {
     modelValue?: any;
     label?: string;
@@ -14,6 +15,10 @@ export interface InputOption {
 export interface BooleanInput extends Input {
     modelValue?: boolean | null;
 }
+export interface DateRangeAction {
+    label: string;
+    action: (props: DateRangeInput) => DateRange;
+}
 /**
  * DateRangeInput allows a max range to be applied to the datepicker
  * such that selecting the first date will then apply a max/min of +/- maxRange.
@@ -23,13 +28,15 @@ export interface BooleanInput extends Input {
  * dates prior to Jan 1 given the handling of maxRange being adjusted on the fly.
  */
 export interface DateRangeInput extends Input {
+    actions?: DateRangeAction[];
     modelValue?: {
         minDate: number;
         maxDate: number;
     };
-    maxDate?: Date | string | number;
     maxRange?: number;
-    startDate?: Date | string | number;
+    maxValue?: Date | null;
+    minValue?: Date;
+    position?: "bottom" | "bottom-start" | "bottom-end";
 }
 export interface DateTimeInput extends Input {
     modelValue?: string | null;

package/types/composables/index.d.ts

@@ -4,6 +4,8 @@ import type { DynamicTableOptions, DynamicTableAPI, TableActionButton, TableActi
 import type { DetailListAPI, SortDir } from "./list";
 export type { UseBaseAPIOptions, UseBaseAPI, DetailListAPI, DynamicTableOptions, DynamicTableAPI, SortDir, TableActionButton, TableActionItem, TableActionLink, TableActions, TableBulkActions, TableBulkActionItem, TableColumn, TableColumns, TableCellAlignment, TableRowData, TableRowsData, };
 export { useBaseAPI, useBaseAPIGet, useBaseAPIPatch, useBaseAPIPut, useBaseAPIPost, useBaseAPIDelete, };
+import { calendarDateToUnix, dateRangeActions, dateRangeLast7Days, dateRangeLast30Days, dateRangeThisMonth, dateRangeLastMonth, dateRangeThisYear, dateRangeLastYear, dateRangeClear } from "./dateRange";
+export { calendarDateToUnix, dateRangeActions, dateRangeLast7Days, dateRangeLast30Days, dateRangeThisMonth, dateRangeLastMonth, dateRangeThisYear, dateRangeLastYear, dateRangeClear, };
 import { useFlashes, useAppFlashes, useAppFlasher } from "./useFlashes";
 import type { FlashMessage, FlashType, FlashStore, Flasher } from "./useFlashes";
 export type { FlashMessage, FlashType, FlashStore, Flasher };

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

@@ -1,10 +1,75 @@
-import "flatpickr/dist/flatpickr.min.css";
 import type { DateRangeInput } from "../../composables/forms";
+/**
+ * NOTE(spk): Default actions made available by Trees do not
+ * account for minValue, maxValue, and maxRange boundary restrictions.
+ *
+ * Likewise a pre-hydrated v-model that is outside those bounds also does
+ * not apply boundaries to that initial value.
+ */
 type __VLS_Props = DateRangeInput;
 type __VLS_PublicProps = {
     modelValue?: DateRangeInput["modelValue"];
 } & __VLS_Props;
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
+    calendar: Readonly<import("vue").ShallowRef<import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+        modelValue?: {
+            minDate: number;
+            maxDate: number;
+        } | undefined;
+    } & DateRangeInput & {
+        actions?: import("../../composables/forms").DateRangeAction[] | undefined;
+        borderless?: boolean | undefined;
+        maxRange?: number | undefined;
+        maxValue?: Date | null | undefined;
+        minValue?: Date | undefined;
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: {
+            minDate: number;
+            maxDate: number;
+        } | undefined) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:modelValue": (value: {
+            minDate: number;
+            maxDate: number;
+        } | undefined) => any;
+    }, import("vue").PublicProps, {
+        actions: import("../../composables/forms").DateRangeAction[];
+        borderless: boolean;
+        maxRange: number;
+        maxValue: Date | null;
+        minValue: Date;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        modelValue?: {
+            minDate: number;
+            maxDate: number;
+        } | undefined;
+    } & DateRangeInput & {
+        actions?: import("../../composables/forms").DateRangeAction[] | undefined;
+        borderless?: boolean | undefined;
+        maxRange?: number | undefined;
+        maxValue?: Date | null | undefined;
+        minValue?: Date | undefined;
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: {
+            minDate: number;
+            maxDate: number;
+        } | undefined) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        actions: import("../../composables/forms").DateRangeAction[];
+        borderless: boolean;
+        maxRange: number;
+        maxValue: Date | null;
+        minValue: Date;
+    }> | null>>;
+    input: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
         minDate: number;
         maxDate: number;
@@ -16,16 +81,16 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     } | undefined) => any) | undefined;
 }>, {
     label: string;
+    actions: import("../../composables/forms").DateRangeAction[];
+    position: "bottom" | "bottom-start" | "bottom-end";
     modelValue: {
         minDate: number;
         maxDate: number;
     };
-    maxDate: string | number | Date;
-    maxRange: number;
-    startDate: string | number | Date;
     help: string;
     placeholder: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
-    wrapper: HTMLDivElement;
-}, any>;
+    maxRange: number;
+    maxValue: Date | null;
+    minValue: Date;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,34 @@
+import type { DateRangeAction, DateRangeInput } from "../../composables/forms";
+/**
+ * FIXME(spk): An oddity of Reka-UI RangeCalendar is that is applies
+ * [data-highlighted] attributes to all cells inside the range applicable
+ * to the maximum-days range, even those that are outside of min-value/max-value.
+ */
+type __VLS_Props = DateRangeInput & {
+    actions?: DateRangeAction[];
+    borderless?: boolean;
+    maxRange?: number;
+    maxValue?: Date | null;
+    minValue?: Date;
+};
+type __VLS_PublicProps = {
+    modelValue?: DateRangeInput["modelValue"];
+} & __VLS_Props;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        minDate: number;
+        maxDate: number;
+    } | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        minDate: number;
+        maxDate: number;
+    } | undefined) => any) | undefined;
+}>, {
+    actions: DateRangeAction[];
+    borderless: boolean;
+    maxRange: number;
+    maxValue: Date | null;
+    minValue: Date;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/types/lib-components/index.d.ts

@@ -38,11 +38,12 @@ import { default as MultiCheckboxes } from "./forms/MultiCheckboxes.vue";
 import { default as NumberInput } from "./forms/NumberInput.vue";
 import { default as Radio } from "./forms/Radio.vue";
 import { default as RadioCards } from "./forms/RadioCards.vue";
+import { default as RangeCalendar } from "./forms/RangeCalendar.vue";
 import { default as Select } from "./forms/Select.vue";
 import { default as TextArea } from "./forms/TextArea.vue";
 import { default as YesOrNoRadio } from "./forms/YesOrNoRadio.vue";
 export { ActionsButtonGroup, ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, InlineAlert, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
-Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, TablePaginator, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, NumberInput, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, ProgressCircles, ProgressCirclesLabeled, };
+Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, TablePaginator, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, NumberInput, Radio, RadioCards, RangeCalendar, Select, TextArea, YesOrNoRadio, XYSpinner, ProgressCircles, ProgressCirclesLabeled, };
 /**
  * declare global component types for App.use(Trees)
  */
@@ -82,6 +83,7 @@ export interface TreesComponents {
     NumberInput: typeof NumberInput;
     Radio: typeof Radio;
     RadioCards: typeof RadioCards;
+    RangeCalendar: typeof RangeCalendar;
     Select: typeof Select;
     TextArea: typeof TextArea;
     YesOrNoRadio: typeof YesOrNoRadio;