@xy-planning-network/trees 0.13.4-dev-3 → 0.13.5-dev-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.13.4-dev-3",
+  "version": "0.13.5-dev-1",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
-    "@headlessui/vue": "^1.4.2",
+    "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^1.0.5",
     "@maskito/core": "^3.5.0",
     "@maskito/kit": "^3.5.0",

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

@@ -11,7 +11,7 @@ import {
   useInputField,
 } from "@/composables/forms"
 import type { DateRangeInput } from "@/composables/forms"
-import { Instance } from "flatpickr/dist/types/instance"
+import type { Instance } from "flatpickr/dist/types/instance"
 import { DateRange } from "@/composables/date"
 
 defineOptions({

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

@@ -38,7 +38,21 @@ const props = withDefaults(
   defineProps<RadioCards & ColumnedInput>(),
   defaultInputProps
 )
-const modelState = defineModel<RadioCards["modelValue"]>(defaultModelOpts)
+const modelState = defineModel<
+  RadioCards["modelValue"],
+  "modelValue",
+  string | number | undefined
+>({
+  ...defaultModelOpts,
+  get: (v) => {
+    // NOTE(spk): HeadlessUI RadioGroup does not support "null" values
+    if (v === null) {
+      return undefined
+    }
+
+    return v
+  },
+})
 
 const { aria, isDisabled, isRequired, nameAttr, errorState, onInvalid } =
   useInputField(props)

package/src/lib-components/overlays/Popover/Popover.vue

@@ -4,7 +4,7 @@ import {
   PopoverButton as HeadlessPopoverButton,
   PopoverPanel as HeadlessPopoverPanel,
 } from "@headlessui/vue"
-import { computed, useTemplateRef } from "vue"
+import { computed, onMounted, ref, useTemplateRef } from "vue"
 import {
   useFloating,
   offset,
@@ -12,7 +12,7 @@ import {
   autoUpdate,
   shift,
 } from "@floating-ui/vue"
-import type { Placement } from "@floating-ui/vue"
+import type { Placement, UseFloatingReturn } from "@floating-ui/vue"
 
 const props = withDefaults(
   defineProps<{
@@ -51,11 +51,14 @@ const placement = computed(() => {
   return props.position
 })
 
-const { floatingStyles } = useFloating(triggerRef, wrapperRef, {
-  middleware: middleware,
-  placement: placement,
-  strategy: "fixed",
-  whileElementsMounted: autoUpdate,
+const floating = ref<UseFloatingReturn | null>(null)
+onMounted(() => {
+  floating.value = useFloating(triggerRef, wrapperRef, {
+    middleware: middleware,
+    placement: placement,
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+  })
 })
 </script>
 
@@ -65,7 +68,11 @@ const { floatingStyles } = useFloating(triggerRef, wrapperRef, {
       <slot name="button" :open="open" :close="close"></slot>
     </HeadlessPopoverButton>
 
-    <div ref="wrapper" class="z-[5]" :style="floatingStyles">
+    <div
+      ref="wrapper"
+      class="z-[5]"
+      :style="floating ? floating.floatingStyles : undefined"
+    >
       <HeadlessPopoverPanel>
         <slot :open="open" :close="close"></slot>
       </HeadlessPopoverPanel>

package/src/lib-components/overlays/Tooltip.vue

@@ -16,10 +16,14 @@ withDefaults(
 )
 
 // data
-var popoverHover = false
-var popoverTimeout: null | NodeJS.Timeout = null
+let popoverHover: boolean = false
+let popoverTimeout: null | NodeJS.Timeout = null
 
 // functions
+const openPopover = () => {
+  popoverHover = true
+}
+
 const closePopover = (close: () => void): void => {
   popoverHover = false
   if (popoverTimeout) clearTimeout(popoverTimeout)
@@ -52,7 +56,7 @@ const hoverPopover = (e: MouseEvent, open: boolean): void => {
     <template #default="{ close }: { close: () => void }">
       <div
         class="sm:min-w-max bg-white rounded-xy px-3.5 py-2.5 border border-gray-100 drop-shadow-md text-xs text-gray-900 leading-snug font-medium"
-        @mouseover.prevent="popoverHover = true"
+        @mouseover.prevent="openPopover"
         @mouseleave.prevent="closePopover(close)"
       >
         <div class="max-w-xs">

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

@@ -2,6 +2,7 @@ import type { InputOption } from "../../composables/forms";
 declare const _default: <T extends InputOption>(__VLS_props: {
     readonly "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
     modelValue?: string | number | null | undefined;
+    modelModifiers?: Record<"modelValue", true> | undefined;
     options: T[];
     label?: string | undefined;
     help?: string | undefined;
@@ -22,6 +23,7 @@ declare const _default: <T extends InputOption>(__VLS_props: {
     props: {
         readonly "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
         modelValue?: string | number | null | undefined;
+        modelModifiers?: Record<"modelValue", true> | undefined;
         options: T[];
         label?: string | undefined;
         help?: string | undefined;
@@ -46,6 +48,7 @@ declare const _default: <T extends InputOption>(__VLS_props: {
         props: {
             readonly "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
             modelValue?: string | number | null | undefined;
+            modelModifiers?: Record<"modelValue", true> | undefined;
             options: T[];
             label?: string | undefined;
             help?: string | undefined;