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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.13.4",
+  "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;

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;
+    };
+};