@xy-planning-network/trees 0.12.2 → 0.12.4

package/package.json

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

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

@@ -4,7 +4,7 @@ import InputHelp from "./InputHelp.vue"
 import InputError from "./InputError.vue"
 import flatpickr from "flatpickr"
 import "flatpickr/dist/flatpickr.min.css"
-import { onMounted } from "vue"
+import { onMounted, useTemplateRef } from "vue"
 import {
   defaultInputProps,
   defaultModelOpts,
@@ -17,7 +17,7 @@ defineOptions({
 })
 
 // maxDate/startDate should be used or maxRange.
-// The props combination of maxDate/startDate and maxRange 
+// The props combination of maxDate/startDate and maxRange
 // will have unexpected results.
 const props = withDefaults(defineProps<DateRangeInput>(), {
   ...defaultInputProps,
@@ -38,9 +38,12 @@ const updateModelState = (value: { minDate: number; maxDate: number }) => {
   modelState.value = value
 }
 
+const wrapper = useTemplateRef("wrapper")
+
 onMounted(() => {
   const opts: flatpickr.Options.Options = {
     allowInput: true,
+    appendTo: wrapper.value || undefined,
     dateFormat: "m-d-Y",
     mode: "range",
     maxDate: props.maxDate,
@@ -60,6 +63,7 @@ onMounted(() => {
         })
       }
     },
+    static: true,
   }
 
   // Handle initial values if set
@@ -100,7 +104,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div ref="wrapper">
     <InputLabel
       :id="aria.labelledby"
       class="mb-2"
@@ -130,3 +134,9 @@ onMounted(() => {
     <InputError :id="aria.errormessage" class="mt-0.5" :text="errorState" />
   </div>
 </template>
+
+<style lang="postcss">
+.flatpickr-wrapper {
+  display: block;
+}
+</style>

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

@@ -75,8 +75,8 @@ const sortDir = ref(props.defaultSortDir)
 
 const loadAndRender = (): void => {
   const params: Record<string, unknown> = {
-    maxDate: dateRange.value.maxDate,
-    minDate: dateRange.value.minDate,
+    maxDate: dateRange.value.maxDate || null,
+    minDate: dateRange.value.minDate || null,
     page: pagination.value.page,
     perPage: pagination.value.perPage,
     q: "",

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

@@ -36,8 +36,8 @@ defineEmits<{
 
 const loadAndRender = (): void => {
   const params = {
-    minDate: dateRange.value.minDate,
-    maxDate: dateRange.value.maxDate,
+    minDate: dateRange.value.minDate || null,
+    maxDate: dateRange.value.maxDate || null,
     page: pagination.value.page,
     perPage: pagination.value.perPage,
     sort: currentSort.value,

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

@@ -25,5 +25,7 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     startDate: string | number | Date;
     help: string;
     placeholder: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+    wrapper: HTMLDivElement;
+}, any>;
 export default _default;