@xy-planning-network/trees 0.13.3 → 0.13.4-dev-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.13.3",
+  "version": "0.13.4-dev-2",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",

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

@@ -4,13 +4,15 @@ import InputHelp from "./InputHelp.vue"
 import InputError from "./InputError.vue"
 import flatpickr from "flatpickr"
 import "flatpickr/dist/flatpickr.min.css"
-import { onMounted, useTemplateRef } from "vue"
+import { onMounted, useTemplateRef, watch } from "vue"
 import {
   defaultInputProps,
   defaultModelOpts,
   useInputField,
 } from "@/composables/forms"
 import type { DateRangeInput } from "@/composables/forms"
+import { Instance } from "flatpickr/dist/types/instance"
+import { DateRange } from "@/composables/date"
 
 defineOptions({
   inheritAttrs: false,
@@ -26,23 +28,55 @@ const props = withDefaults(defineProps<DateRangeInput>(), {
   placeholder: "mm-dd-yyyy range",
   startDate: 0,
 })
+
 const modelState = defineModel<DateRangeInput["modelValue"]>({
   ...defaultModelOpts,
   default: { maxDate: 0, minDate: 0 },
 })
 
+function isValidPickerRange(val: any): val is DateRange {
+  return (
+    val?.maxDate !== undefined &&
+    val?.minDate !== undefined &&
+    val?.minDate != 0 &&
+    val?.maxDate != 0
+  )
+}
+
+// NOTE(spk): use watcher.stop() and watcher.resume() when mutating
+// state inside this component to avoid setting the picker value
+// after the state was mutated by the picker itself
+//
+// This keeps the change handling scoped to a change triggered by
+// the parent component on v-model.
+const watcher = watch(modelState, () => {
+  if (isValidPickerRange(modelState.value)) {
+    picker?.setDate(
+      [modelState.value.minDate * 1000, modelState.value.maxDate * 1000],
+      false
+    )
+    return
+  }
+
+  picker?.clear()
+})
+
 const { aria, errorState, inputID, isRequired, onInvalid, validate } =
   useInputField(props)
 
 const updateModelState = (value: { minDate: number; maxDate: number }) => {
+  watcher.stop()
   modelState.value = value
+  watcher.resume()
 }
 
 const wrapperRef = useTemplateRef("wrapper")
 
+let picker: Instance | null = null
+
 onMounted(() => {
   const opts: flatpickr.Options.Options = {
-    allowInput: true,
+    allowInput: !props.maxRange,
     appendTo: wrapperRef.value || undefined,
     dateFormat: "m-d-Y",
     mode: "range",
@@ -67,11 +101,7 @@ onMounted(() => {
   }
 
   // Handle initial values if set
-  if (
-    modelState.value && // NOTE(spk): even with a "default" value this may be a literal null
-    modelState.value.minDate != 0 &&
-    modelState.value.maxDate != 0
-  ) {
+  if (isValidPickerRange(modelState.value)) {
     opts.defaultDate = [
       modelState.value.minDate * 1000,
       modelState.value.maxDate * 1000,
@@ -99,7 +129,7 @@ onMounted(() => {
     }
   }
 
-  flatpickr(`#${inputID.value}`, opts)
+  picker = flatpickr(`#${inputID.value}`, opts) as Instance
 })
 </script>
 

package/types/lib-components/indicators/AppIcon.vue.d.ts

@@ -0,0 +1,24 @@
+import type { Component, FunctionalComponent, RenderFunction } from "vue";
+type __VLS_Props = {
+    bgColor?: `bg-${string}`;
+    iconColor?: `text-${string}`;
+    icon: FunctionalComponent | Component | RenderFunction;
+    indicator?: string | number | boolean;
+    size?: "xs" | "sm" | "base" | "lg" | "xl";
+    type?: "circle" | "square";
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "circle" | "square";
+    size: "base" | "xs" | "sm" | "lg" | "xl";
+    bgColor: `bg-${string}`;
+    iconColor: `text-${string}`;
+    indicator: string | number | boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,8 @@
+import { UserMenuItem } from "../../composables/nav";
+type __VLS_Props = {
+    menu?: UserMenuItem[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    menu: UserMenuItem[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/types/lib-components/overlays/TooltipWrapper.vue.d.ts

@@ -0,0 +1,18 @@
+import { type Placement } from "@floating-ui/vue";
+type __VLS_Props = {
+    as?: string;
+    position?: Placement | "auto";
+    tooltip: string;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+    position: Placement | "auto";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};