@xy-planning-network/trees 0.6.7 → 0.6.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -40,24 +40,25 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.7",
     "@types/node": "^18.15.11",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/eslint-config-typescript": "^11.0.3",
     "autoprefixer": "^10.4.14",
     "copyfiles": "^2.4.1",
     "deepmerge": "^4.3.1",
-    "eslint": "^8.38.0",
-    "eslint-plugin-vue": "^9.10.0",
+    "eslint": "^8.42.0",
+    "eslint-plugin-vue": "^9.14.1",
     "postcss": "^8.4.21",
     "prettier": "^2.8.7",
     "tailwindcss": "^3.2.1",
     "tsc-alias": "^1.8.5",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
+    "vite": "^4.3.9",
     "vite-plugin-environment": "^1.1.3",
     "vue-tsc": "^1.2.0"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.0.1",
     "@headlessui/vue": "^1.4.2",
     "@heroicons/vue": "^1.0.5",
     "axios": "^0.27.2",
@@ -70,7 +71,7 @@
     "autoprefixer": "^10.4.7",
     "postcss": "^8.4.14",
     "tailwindcss": "^3.1.4",
-    "vue": "^3.2.0"
+    "vue": "^3.3.4"
   },
   "engines": {
     "node": ">=12"

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

@@ -11,11 +11,13 @@ const props = withDefaults(
       minDate: number
       maxDate: number
     }
+    maxRange?: number
     startDate?: number
     label?: string
     help?: string
   }>(),
   {
+    maxRange: 0,
     startDate: 0,
     label: "",
     help: "",
@@ -31,7 +33,7 @@ const updateModelValue = (value: { minDate: number; maxDate: number }) => {
 }
 
 onMounted(() => {
-  flatpickr(`#${uuid}`, {
+  const opts: flatpickr.Options.Options = {
     dateFormat: "m-d-Y",
     mode: "range",
     maxDate: new Date(), // So far, we cannot have options past today for ranges
@@ -51,7 +53,40 @@ onMounted(() => {
         })
       }
     },
-  })
+  }
+
+  if (props.maxRange) {
+    // Set the range to a prefilled value given the allowed range
+    const daysAgo = new Date()
+    const minDate = daysAgo.setDate(daysAgo.getDate() - props.maxRange)
+    const maxDate = new Date()
+    opts.defaultDate = [minDate, maxDate]
+    updateModelValue({
+      minDate: Math.floor(minDate / 1000),
+      maxDate: Math.floor(maxDate.getTime() / 1000),
+    })
+
+    // Handle onChange to dynamically adjust maxDate to x days ahead of the selected start date
+    opts.onChange = (selectedDates, _, self) => {
+      if (selectedDates.length === 1) {
+        // Clone date so as to not change selectedDates[0] value
+        var daysAhead = new Date(selectedDates[0].getTime())
+        var daysBefore = new Date(selectedDates[0].getTime())
+        daysAhead.setDate(daysAhead.getDate() + props.maxRange)
+        daysBefore.setDate(daysBefore.getDate() - props.maxRange)
+        const now = new Date()
+
+        if (daysAhead > now) {
+          daysAhead = now
+        }
+
+        self.set("minDate", daysBefore)
+        self.set("maxDate", daysAhead)
+      }
+    }
+  }
+
+  flatpickr(`#${uuid}`, opts)
 })
 </script>
 <template>

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

@@ -73,7 +73,7 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
                 <!--Table Actions Cell-->
                 <td
                   v-if="hasActions"
-                  class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
+                  class="px-6 py-2 text-sm text-gray-700 whitespace-nowrap leading-5"
                 >
                   <ActionsDropdown
                     v-if="tableActions.type === 'dropdown'"

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

@@ -12,6 +12,7 @@ import type {
 } from "@/composables/table"
 import { useAppFlasher } from "@/composables/useFlashes"
 import { TrailsRespPaged } from "@/api/client"
+import { DateRangeProps } from "@/composables/date"
 import { useTable } from "@/composables/useTable"
 import TableActionButtons from "./TableActionButtons.vue"
 
@@ -121,6 +122,12 @@ const handleSort = (selectedSort: string): void => {
   loadAndRender()
 }
 
+const dateSearchProps = computed((): DateRangeProps => {
+  if (typeof props.tableOptions.dateSearch === "object")
+    return props.tableOptions.dateSearch
+  return {}
+})
+
 const hasContent = computed((): boolean => {
   return rows.value.length ? true : false
 })
@@ -181,6 +188,7 @@ loadAndRender()
       <div v-if="tableOptions.dateSearch" class="w-full max-w-lg lg:max-w-xs">
         <DateRangePicker
           v-model="dateRange"
+          v-bind="{ ...dateSearchProps }"
           @update:model-value="dateRangeChanged"
         />
       </div>
@@ -281,7 +289,7 @@ loadAndRender()
             <!--Table Actions Cell-->
             <td
               v-if="hasActions"
-              class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
+              class="px-6 py-2 text-sm text-gray-700 whitespace-nowrap leading-5"
             >
               <ActionsDropdown
                 v-if="tableActions.type === 'dropdown'"

package/src/lib-components/navigation/ActionsDropdown.vue

@@ -3,7 +3,8 @@ import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue"
 import { DotsVerticalIcon } from "@heroicons/vue/solid"
 import type { ActionItem } from "@/composables/nav"
 import { useActionItems } from "@/composables/useActionItems"
-import { toRef } from "vue"
+import { ref, toRef } from "vue"
+import { useFloating, autoUpdate } from "@floating-ui/vue"
 
 const props = withDefaults(
   defineProps<{
@@ -15,10 +16,19 @@ const props = withDefaults(
 )
 
 const { actions, hasActions } = useActionItems(toRef(props, "actions"))
+
+const trigger = ref<HTMLElement | null>(null)
+const wrapper = ref<HTMLElement | null>(null)
+const { floatingStyles } = useFloating(trigger, wrapper, {
+  placement: "bottom-end",
+  strategy: "fixed",
+  whileElementsMounted: autoUpdate,
+})
 </script>
 <template>
   <Menu as="div" class="relative flex justify-end items-center">
     <MenuButton
+      ref="trigger"
       class="w-8 h-8 bg-white inline-flex items-center justify-center text-gray-700 rounded-full hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
       :disabled="!hasActions"
     >
@@ -33,35 +43,37 @@ const { actions, hasActions } = useActionItems(toRef(props, "actions"))
       leave-from-class="transform opacity-100 scale-100"
       leave-to-class="transform opacity-0 scale-95"
     >
-      <MenuItems
-        class="z-10 mx-3 origin-top-right absolute right-7 top-0 w-48 mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none"
-      >
-        <div class="py-1">
-          <template v-for="(action, idx) in actions" :key="idx">
-            <MenuItem v-slot="{ active }: { active: boolean }" as="div">
-              <button
-                type="submit"
-                :disabled="action.disabled"
-                :class="[
-                  active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                  'block w-full text-left px-4 py-2 text-sm font-semibold disabled:cursor-not-allowed',
-                ]"
-                @click="action.onClick"
-              >
-                <span class="relative inline-flex items-center gap-x-1.5">
-                  <component
-                    :is="action.icon"
-                    v-if="action.icon"
-                    class="-ml-0.5 h-4 w-4 text-gray-400"
-                    aria-hidden="true"
-                  />
-                  {{ action.label }}
-                </span>
-              </button>
-            </MenuItem>
-          </template>
-        </div>
-      </MenuItems>
+      <div ref="wrapper" class="z-[5]" :style="floatingStyles">
+        <MenuItems
+          class="w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none"
+        >
+          <div class="py-1">
+            <template v-for="(action, idx) in actions" :key="idx">
+              <MenuItem v-slot="{ active }: { active: boolean }" as="div">
+                <button
+                  type="submit"
+                  :disabled="action.disabled"
+                  :class="[
+                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                    'block w-full text-left px-4 py-2 text-sm font-semibold disabled:cursor-not-allowed',
+                  ]"
+                  @click="action.onClick"
+                >
+                  <span class="relative inline-flex items-center gap-x-1.5">
+                    <component
+                      :is="action.icon"
+                      v-if="action.icon"
+                      class="-ml-0.5 h-4 w-4 text-gray-400"
+                      aria-hidden="true"
+                    />
+                    {{ action.label }}
+                  </span>
+                </button>
+              </MenuItem>
+            </template>
+          </div>
+        </MenuItems>
+      </div>
     </transition>
   </Menu>
 </template>

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

@@ -1,29 +1,23 @@
-<script lang="ts">
-export type PopoverPosition =
-  | "top-left"
-  | "top-center"
-  | "top-right"
-  | "bottom-left"
-  | "bottom-center"
-  | "bottom-right"
-  | "left"
-  | "right"
-  | "auto"
-  | "none"
-</script>
 <script lang="ts" setup>
-import { throttle } from "@/helpers/Throttle"
 import {
   Popover as HeadlessPopover,
   PopoverButton as HeadlessPopoverButton,
   PopoverPanel as HeadlessPopoverPanel,
 } from "@headlessui/vue"
-import { computed, onMounted, onUnmounted, ref } from "vue"
+import { computed, ref } from "vue"
+import {
+  useFloating,
+  offset,
+  autoPlacement,
+  autoUpdate,
+  shift,
+} from "@floating-ui/vue"
+import type { Placement } from "@floating-ui/vue"
 
 const props = withDefaults(
   defineProps<{
     as?: string
-    position?: PopoverPosition
+    position?: Placement | "auto"
   }>(),
   {
     as: "div",
@@ -31,199 +25,47 @@ const props = withDefaults(
   }
 )
 
-const getViewportDimensions = () => {
-  return {
-    vw: document.documentElement.clientWidth,
-    vh: document.documentElement.clientHeight,
-  }
-}
-
-const trigger = ref<typeof HeadlessPopoverButton>()
-const wrapper = ref<typeof HeadlessPopoverPanel>()
-const viewport = ref<{ vw: number; vh: number }>(getViewportDimensions())
-
-const classes = computed(() => {
-  const classes = {
-    wrapper: "",
-    content: "",
-  }
-
-  if (props.position === "none") {
-    return classes
+const trigger = ref<HTMLElement | null>(null)
+const wrapper = ref<HTMLElement | null>(null)
+const middleware = computed(() => {
+  const middleware = [offset(5), shift()]
+  if (props.position === "auto") {
+    middleware.push(autoPlacement())
   }
 
-  // defaults classes when positioning
-  classes.wrapper = "h-0 flex w-screen"
-  classes.content = "absolute"
-
-  // merge static positioning classes
-  if (props.position !== "auto") {
-    classes.wrapper += ` ${staticPosition.value.wrapper}`
-    classes.content += ` ${staticPosition.value.content}`
-  }
-
-  return classes
+  return middleware
 })
 
-const staticPosition = computed(() => {
-  let wrapperClasses = ""
-  let contentClasses = ""
-
-  switch (props.position) {
-    case "top-left":
-      wrapperClasses = "top-0 right-0 -translate-y-full justify-end"
-      contentClasses = "bottom-full"
-      break
-    case "top-center":
-      wrapperClasses =
-        "top-0 -translate-y-full -translate-x-full left-1/2 justify-end"
-      contentClasses = "bottom-full translate-x-1/2"
-      break
-    case "top-right":
-      wrapperClasses =
-        "top-0 -translate-y-full left-0 -translate-x-full justify-end"
-      contentClasses = "bottom-full translate-x-full"
-      break
-    case "bottom-left":
-      wrapperClasses = "top-full right-0 justify-end"
-      contentClasses = "top-full"
-      break
-    case "bottom-center":
-      wrapperClasses = "top-full -translate-x-full left-1/2 justify-end"
-      contentClasses = "top-full translate-x-1/2"
-      break
-    case "bottom-right":
-      wrapperClasses = "top-full left-0 -translate-x-full justify-end"
-      contentClasses = "top-full translate-x-full"
-      break
-    case "left":
-      wrapperClasses =
-        "top-1/2 left-0 -translate-y-1/2 -translate-x-full justify-end"
-      contentClasses = "-translate-y-1/2"
-      break
-    case "right":
-      wrapperClasses = "top-1/2 -translate-y-1/2 right-0 justify-end"
-      contentClasses = "translate-x-full -translate-y-1/2"
-      break
+/**
+ * floating-ui's placement property does not support a direct "auto"
+ * mode. Passing undefined is expected when auto position is used.
+ */
+const placement = computed(() => {
+  if (props.position === "auto") {
+    return undefined
   }
 
-  return {
-    wrapper: wrapperClasses,
-    content: contentClasses,
-  }
+  return props.position
 })
 
-const autoPosition = computed(() => {
-  if (!wrapper?.value?.el || !trigger?.value?.el) {
-    return {}
-  }
-
-  const { vw, vh } = viewport.value
-
-  // avoid bumping up against the edge of the browser when possible
-  const offset = 10
-
-  // base the anchor rectangle off of the entire trigger dom element to move around it
-  const anchorRect: DOMRect = trigger.value.el.getBoundingClientRect()
-  // the content rectangle is best calculated by our first child (content) element inside the wrapper
-  const contentRect: DOMRect =
-    wrapper.value.el.firstChild.getBoundingClientRect()
-  const distToBottom = vh - anchorRect.bottom
-  // NOTE: edge case - there may be more space below in the viewport
-  // but less document space for display
-  // the inverse could also be true - but will be very rare
-  // occurring with unreasonably large popover content
-  const positionAbove = anchorRect.top > distToBottom
-  const distToRight = vw - anchorRect.left
-  const flowLeft = anchorRect.left > distToRight
-
-  // translate the content container on the x axis to the correct position
-  // considering the flow the content should take
-  let xPos = 0
-  if (flowLeft) {
-    if (contentRect.width > anchorRect.right) {
-      xPos =
-        anchorRect.right -
-        contentRect.width +
-        (contentRect.width - anchorRect.right)
-    } else {
-      xPos = anchorRect.right - contentRect.width
-    }
-
-    if (vw > contentRect.width + offset) {
-      xPos = xPos + offset
-    }
-  } else {
-    if (contentRect.width > distToRight) {
-      xPos = anchorRect.left - (contentRect.width - distToRight)
-    } else {
-      xPos = anchorRect.left
-    }
-
-    if (vw > contentRect.width + offset) {
-      xPos = xPos - offset
-    }
-  }
-
-  return {
-    wrapper: {
-      top: positionAbove ? "auto" : `100%`,
-      bottom: positionAbove ? "100%" : `auto`,
-      transform: `translate(${anchorRect.left * -1}px, 0)`, // pin to left of window
-      width: `${vw}px`,
-    },
-    content: {
-      top: positionAbove ? "auto" : `100%`,
-      bottom: positionAbove ? "100%" : `auto`,
-      transform: `translate(${xPos}px, 0)`,
-    },
-  }
+const { floatingStyles } = useFloating(trigger, wrapper, {
+  middleware: middleware,
+  placement: placement,
+  strategy: "fixed",
+  whileElementsMounted: autoUpdate,
 })
-
-if (props.position === "auto") {
-  const throttledSetPositions = throttle(() => {
-    viewport.value = getViewportDimensions()
-  })
-
-  onMounted(() => {
-    window.addEventListener("resize", throttledSetPositions)
-    window.addEventListener("scroll", throttledSetPositions)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener("resize", throttledSetPositions)
-    window.removeEventListener("scroll", throttledSetPositions)
-  })
-}
 </script>
 
 <template>
-  <HeadlessPopover v-slot="{ open, close }" class="relative flex" :as="as">
+  <HeadlessPopover v-slot="{ open, close }" :as="as" class="relative">
     <HeadlessPopoverButton ref="trigger">
       <slot name="button" :open="open" :close="close"></slot>
     </HeadlessPopoverButton>
 
-    <transition
-      enter-active-class="transition-opacity transition-faster ease-out-quad"
-      leave-active-class="transition-opacity transition-fastest ease-in-quad"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <HeadlessPopoverPanel
-        ref="wrapper"
-        class="absolute z-10"
-        :class="classes.wrapper"
-        :style="position === 'auto' ? autoPosition.wrapper : {}"
-      >
-        <div
-          :class="classes.content"
-          :style="position === 'auto' ? autoPosition.content : {}"
-        >
-          <slot :open="open" :close="close"></slot>
-        </div>
+    <div ref="wrapper" class="z-[5]" :style="floatingStyles">
+      <HeadlessPopoverPanel>
+        <slot :open="open" :close="close"></slot>
       </HeadlessPopoverPanel>
-    </transition>
+    </div>
   </HeadlessPopover>
 </template>

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

@@ -1,23 +1,47 @@
 <script lang="ts" setup>
-import Popover, { PopoverPosition } from "./Popover/Popover.vue"
+import Popover from "./Popover/Popover.vue"
 import { InformationCircleIcon } from "@heroicons/vue/outline"
+import type { Placement } from "@floating-ui/vue"
 
+// props
 withDefaults(
   defineProps<{
     as?: string
-    position?: PopoverPosition
+    position?: Placement | "auto"
   }>(),
   {
     as: "span",
     position: "auto",
   }
 )
+
+// data
+var popoverHover = false
+var popoverTimeout: null | NodeJS.Timeout = null
+
+// functions
+const closePopover = (close: () => void): void => {
+  popoverHover = false
+  if (popoverTimeout) clearTimeout(popoverTimeout)
+  popoverTimeout = setTimeout(() => {
+    if (!popoverHover) close()
+  }, 100)
+}
+
+const hoverPopover = (e: MouseEvent, open: boolean): void => {
+  popoverHover = true
+  if (!open && e.target) (e.target as HTMLElement).click()
+}
 </script>
 
 <template>
   <Popover :position="position" :as="as">
-    <template #button>
-      <div class="leading-none w-4 h-4">
+    <template #button="{ open, close }: { open: boolean, close: () => void }">
+      <div
+        class="leading-none relative w-4 h-4"
+        @mouseover="hoverPopover($event, open)"
+        @mouseleave="closePopover(close)"
+      >
         <InformationCircleIcon />
         <!--creates a larger clickable surface area 40 x 40-->
         <div
@@ -25,10 +49,16 @@ withDefaults(
         ></div>
       </div>
     </template>
-    <div
-      class="w-full max-w-xs bg-white rounded-md px-3 py-2 border border-gray-100 drop-shadow-md text-xs text-gray-900 leading-snug font-medium"
-    >
-      <slot></slot>
-    </div>
+    <template #default="{ close }: { close: () => void }">
+      <div
+        class="sm:min-w-max bg-white rounded-md px-3 py-2 border border-gray-100 drop-shadow-md text-xs text-gray-900 leading-snug font-medium"
+        @mouseover.prevent="popoverHover = true"
+        @mouseleave.prevent="closePopover(close)"
+      >
+        <div class="max-w-xs">
+          <slot></slot>
+        </div>
+      </div>
+    </template>
   </Popover>
 </template>

package/types/composables/date.d.ts

@@ -2,3 +2,9 @@ export interface DateRange {
     minDate: number;
     maxDate: number;
 }
+export interface DateRangeProps {
+    help?: string;
+    label?: string;
+    maxRange?: number;
+    startDate?: number;
+}

package/types/composables/table.d.ts

@@ -1,7 +1,8 @@
 import { VNodeChild } from "vue";
 import { ActionItem } from "../composables/nav";
+import { DateRangeProps } from "./date";
 export interface DynamicTableOptions {
-    dateSearch?: boolean;
+    dateSearch?: boolean | DateRangeProps;
     defaultSort?: string;
     defaultSortDirection?: string;
     refreshTrigger: number;

package/types/composables/useActionItems.d.ts

@@ -5,7 +5,7 @@ export declare const useActionItems: (items: ActionItem[] | Ref<ActionItem[]>) =
         disabled: boolean;
         show: boolean;
         onClick: (...args: any[]) => void;
-        icon?: import("vue").RenderFunction | import("vue").FunctionalComponent<{}, {}> | undefined;
+        icon?: import("vue").RenderFunction | import("vue").FunctionalComponent<{}, {}, any> | undefined;
         label: string;
     }[]>;
     hasActions: import("vue").ComputedRef<boolean>;

package/types/composables/useTable.d.ts

@@ -15,7 +15,7 @@ export declare const useTable: (rowData: TableRowsData | Ref<TableRowsData>, col
             disabled: boolean | undefined;
             onClick: () => void;
             show: boolean | undefined;
-            icon?: import("vue").RenderFunction | import("vue").FunctionalComponent<{}, {}> | undefined;
+            icon?: import("vue").RenderFunction | import("vue").FunctionalComponent<{}, {}, any> | undefined;
             label: string;
         }[];
         rowData: import("./table").TableRowData;

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

@@ -7,23 +7,22 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     help: string;
     label: string;
     modelValue: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    label?: unknown;
-    type?: unknown;
-    help?: unknown;
-    modelValue?: unknown;
-} & {
-    label: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     type: string;
+    help?: string | undefined;
+    label?: string | undefined;
+    modelValue?: string | number | undefined;
+}>, {
     help: string;
-    modelValue: string | number;
-} & {}> & {
+    label: string;
+    modelValue: string;
+}>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     label: string;
     help: string;
     modelValue: string | number;
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {