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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.13.5-dev-1",
+  "version": "0.13.6",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
-    "@headlessui/vue": "^1.7.23",
+    "@headlessui/vue": "^1.4.2",
     "@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 type { Instance } from "flatpickr/dist/types/instance"
+import { Instance } from "flatpickr/dist/types/instance"
 import { DateRange } from "@/composables/date"
 
 defineOptions({

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

@@ -38,21 +38,7 @@ const props = withDefaults(
   defineProps<RadioCards & ColumnedInput>(),
   defaultInputProps
 )
-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 modelState = defineModel<RadioCards["modelValue"]>(defaultModelOpts)
 
 const { aria, isDisabled, isRequired, nameAttr, errorState, onInvalid } =
   useInputField(props)

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

@@ -44,6 +44,7 @@ const { aria, inputID, isRequired, errorState, onInvalid, inputValidation } =
           : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-xy-blue-500',
       ]"
       :placeholder="placeholder"
+      :rows="rows"
       v-bind="$attrs"
       @input="inputValidation"
       @invalid="onInvalid"

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

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

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

@@ -7,12 +7,38 @@ import {
   TransitionRoot,
 } from "@headlessui/vue"
 import { XIcon } from "@heroicons/vue/outline"
-import { watch } from "vue"
+import { computed, watch } from "vue"
 
-defineProps<{
-  header: string
-  description: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    header: string
+    description: string
+    size?: "sm" | "md" | "lg"
+  }>(),
+  {
+    size: "sm",
+  }
+)
+
+const layout = computed(() => {
+  switch (props.size) {
+    case "lg":
+      return {
+        maxWidth: "max-w-6xl",
+        padding: "py-6 px-4 sm:px-20 sm:py-14",
+      }
+    case "md":
+      return {
+        maxWidth: "max-w-4xl",
+        padding: "py-6 px-4 sm:px-16 sm:py-12",
+      }
+    default: // span="sm"
+      return {
+        maxWidth: "max-w-md",
+        padding: "py-6 px-4 sm:px-6 sm:py-4",
+      }
+  }
+})
 
 const open = defineModel<boolean>({ required: true })
 
@@ -48,11 +74,11 @@ watch(open, (isOpen) => {
             leave-from="translate-x-0"
             leave-to="translate-x-full"
           >
-            <div class="w-screen max-w-md">
+            <div :class="['w-screen', layout.maxWidth]">
               <div
                 class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll"
               >
-                <div class="py-6 px-4 bg-xy-blue-700 sm:px-6">
+                <div :class="['bg-xy-blue-700', layout.padding]">
                   <div class="flex items-center justify-between">
                     <DialogTitle as="h3" class="text-white">
                       {{ header }}
@@ -74,7 +100,7 @@ watch(open, (isOpen) => {
                     ></p>
                   </div>
                 </div>
-                <div class="relative flex-1 py-6 px-4 sm:px-6">
+                <div :class="['relative flex-1', layout.padding]">
                   <slot></slot>
                 </div>
 

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

@@ -16,14 +16,10 @@ withDefaults(
 )
 
 // data
-let popoverHover: boolean = false
-let popoverTimeout: null | NodeJS.Timeout = null
+var popoverHover = false
+var popoverTimeout: null | NodeJS.Timeout = null
 
 // functions
-const openPopover = () => {
-  popoverHover = true
-}
-
 const closePopover = (close: () => void): void => {
   popoverHover = false
   if (popoverTimeout) clearTimeout(popoverTimeout)
@@ -56,7 +52,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="openPopover"
+        @mouseover.prevent="popoverHover = true"
         @mouseleave.prevent="closePopover(close)"
       >
         <div class="max-w-xs">

package/types/composables/forms.d.ts

@@ -47,6 +47,7 @@ export interface NumericInput extends Input {
 }
 export interface TextareaInput extends Input {
     modelValue?: string | number | null;
+    rows?: number;
 }
 export interface OptionsInput extends Input {
     modelValue?: string | number | null;

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

@@ -2,7 +2,6 @@ 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;
@@ -23,7 +22,6 @@ 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;
@@ -48,7 +46,6 @@ 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/overlays/Slideover.vue.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     header: string;
     description: string;
+    size?: "sm" | "md" | "lg";
 };
 type __VLS_PublicProps = {
     modelValue: boolean;
@@ -12,7 +13,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}>, {
+    size: "sm" | "md" | "lg";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
     footer?(_: {}): any;
 }>;

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

@@ -1,24 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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;
-    };
-};