@xy-planning-network/trees 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Pagination } from "@/composables/nav"
-import { computed, ref } from "vue"
+import { computed } from "vue"
 
 const props = defineProps<{
   modelValue: Pagination
@@ -10,23 +10,19 @@ const emit = defineEmits<{
   (e: "update:modelValue", pagination: Pagination): void
 }>()
 
-const pagination = ref<Pagination>(props.modelValue)
-
-const updateModelValue = () => {
-  emit("update:modelValue", pagination.value)
-}
-
 const changePage = (page: number): void => {
-  pagination.value.page = page
-  updateModelValue()
+  emit("update:modelValue", {
+    ...props.modelValue,
+    page: page,
+  })
 }
 
 const pageShortcuts = computed((): number[] => {
   const shortcuts: number[] = []
 
   // If total pages is less than or equal to 4, just return 1, 2, 3, 4
-  if (pagination.value.totalPages <= 4) {
-    for (let i = 0; i < pagination.value.totalPages; i++) {
+  if (props.modelValue.totalPages <= 4) {
+    for (let i = 0; i < props.modelValue.totalPages; i++) {
       shortcuts.push(i + 1)
     }
     return shortcuts
@@ -34,10 +30,10 @@ const pageShortcuts = computed((): number[] => {
 
   // If there are more than 3 pages left, show these
   // e.g. [4, 5, 6, 7] when there are 8 total pages and the current page is 4
-  const pagesLeft: number = pagination.value.totalPages - pagination.value.page
+  const pagesLeft: number = props.modelValue.totalPages - props.modelValue.page
   if (pagesLeft >= 3) {
     for (let i = 0; i < 4; i++) {
-      shortcuts.push(pagination.value.page + i)
+      shortcuts.push(props.modelValue.page + i)
     }
     return shortcuts
   }
@@ -45,7 +41,7 @@ const pageShortcuts = computed((): number[] => {
   // If there are less than 3 pages left, count backwards from the last page
   // e.g. [5, 6, 7, 8] when on page 5, 6, 7, and 8 and there are 8 total pages
   for (let i = 0; i < 4; i++) {
-    shortcuts.unshift(pagination.value.totalPages - i)
+    shortcuts.unshift(props.modelValue.totalPages - i)
   }
   return shortcuts
 })
@@ -56,9 +52,9 @@ const pageShortcuts = computed((): number[] => {
       <a
         href="#"
         class="-mt-px border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm leading-5 font-medium focus:outline-none focus:text-gray-700 focus:border-gray-400"
-        @click.prevent="changePage(pagination.page - 1)"
+        @click.prevent="changePage(modelValue.page - 1)"
         :class="
-          pagination.page == 1
+          modelValue.page == 1
             ? 'text-gray-500 cursor-not-allowed pointer-events-none'
             : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "
@@ -82,7 +78,7 @@ const pageShortcuts = computed((): number[] => {
         :key="i"
         v-text="i"
         :class="
-          pagination.page === i
+          modelValue.page === i
             ? 'border-blue-500 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700'
             : 'border-transparent text-gray-700 hover:text-gray-900 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-400'
         "
@@ -94,9 +90,9 @@ const pageShortcuts = computed((): number[] => {
       <a
         href="#"
         class="-mt-px border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm leading-5 font-medium focus:outline-none focus:text-gray-700 focus:border-gray-400"
-        @click.prevent="changePage(pagination.page + 1)"
+        @click.prevent="changePage(modelValue.page + 1)"
         :class="
-          pagination.page >= pagination.totalPages
+          modelValue.page >= modelValue.totalPages
             ? 'text-gray-500 cursor-not-allowed pointer-events-none'
             : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "

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

@@ -8,62 +8,102 @@ export type PopoverPosition =
   | "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 } from "vue"
+import { computed, onMounted, onUnmounted, ref } from "vue"
 
 const props = withDefaults(
   defineProps<{
+    as?: string
     position?: PopoverPosition
   }>(),
   {
-    position: "top-center",
+    as: "div",
+    position: "auto",
   }
 )
 
-const positionClasses = computed(() => {
-  // NOTE: by always pushing the screen width wrapper classes to the left we can avoid overflow scrolling
+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
+  }
+
+  // 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
+})
+
+const staticPosition = computed(() => {
   let wrapperClasses = ""
   let contentClasses = ""
 
   switch (props.position) {
     case "top-left":
-      wrapperClasses =
-        "top-0 left-0 -translate-y-full -translate-x-full justify-end"
+      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 = "translate-x-1/2"
+      contentClasses = "bottom-full translate-x-1/2"
       break
     case "top-right":
-      wrapperClasses = "top-0 -translate-y-full right-0 justify-end"
-      contentClasses = "translate-x-full"
+      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 left-0 -translate-x-full justify-end"
+      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 = "translate-x-1/2"
+      contentClasses = "top-full translate-x-1/2"
       break
     case "bottom-right":
-      wrapperClasses = "top-full right-0 justify-end"
-      contentClasses = "translate-x-full"
+      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"
+      contentClasses = "translate-x-full -translate-y-1/2"
       break
   }
 
@@ -73,37 +113,117 @@ const positionClasses = computed(() => {
   }
 })
 
-// TODO: maybe auto positioning - dynamic based on button location and closed overflow hidden container?
+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)`,
+    },
+  }
+})
+
+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>
-  <div class="flex">
-    <HeadlessPopover v-slot="{ open, close }" class="relative leading-none">
-      <HeadlessPopoverButton>
-        <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-faster ease-in-quad"
-        enter-from-class="opacity-0"
-        enter-to-class="opacity-100"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
+  <HeadlessPopover v-slot="{ open, close }" class="relative" :as="as">
+    <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 : {}"
       >
-        <!--NOTE: use prop "static" for dev work to keep the tooptip visible-->
-        <HeadlessPopoverPanel>
-          <!--positioning wrappers-->
-          <div
-            class="absolute z-10 transform w-screen flex"
-            :class="positionClasses.wrapper"
-          >
-            <div :class="positionClasses.content">
-              <slot :open="open" :close="close"></slot>
-            </div>
-          </div>
-        </HeadlessPopoverPanel>
-      </transition>
-    </HeadlessPopover>
-  </div>
+        <div
+          :class="classes.content"
+          :style="position === 'auto' ? autoPosition.content : {}"
+        >
+          <slot :open="open" :close="close"></slot>
+        </div>
+      </HeadlessPopoverPanel>
+    </transition>
+  </HeadlessPopover>
 </template>

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

@@ -1,7 +1,7 @@
 <template>
   <!--styling wrapper - top level element will merge attrs for class overrides -->
   <div
-    class="max-w-xs bg-white rounded-md p-2 border border-gray-100 shadow-md"
+    class="w-full max-w-xs bg-white rounded-md p-2 border border-gray-100 shadow-md"
   >
     <slot></slot>
   </div>

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

@@ -1,31 +1,34 @@
 <script lang="ts" setup>
 import Popover, { PopoverPosition } from "./Popover/Popover.vue"
 import { InformationCircleIcon } from "@heroicons/vue/outline"
-import PopoverContent from "./Popover/PopoverContent.vue"
 
 withDefaults(
   defineProps<{
-    position: PopoverPosition
+    as?: string
+    position?: PopoverPosition
   }>(),
   {
-    position: "top-center",
+    as: "span",
+    position: "auto",
   }
 )
 </script>
 
 <template>
-  <Popover :position="position">
+  <Popover :position="position" :as="as">
     <template #button>
-      <div class="relative">
-        <!--creates a larger clickable surface area-->
+      <div class="leading-none w-4 h-4">
+        <InformationCircleIcon />
+        <!--creates a larger clickable surface area 40 x 40-->
         <div
-          class="p-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          class="p-5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
         ></div>
-        <InformationCircleIcon class="w-4 h-4" />
       </div>
     </template>
-    <PopoverContent class="text-xs leading-tight font-medium">
+    <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>
-    </PopoverContent>
+    </div>
   </Popover>
 </template>

package/types/helpers/Debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce(func: () => void, timeout?: number): () => void;

package/types/helpers/Throttle.d.ts

@@ -0,0 +1 @@
+export declare function throttle(func: () => void, timeout?: number): (...args: any[]) => void;

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

@@ -1,15 +1,23 @@
-export declare type PopoverPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left" | "right";
+export declare type PopoverPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left" | "right" | "auto" | "none";
 declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     position: {
         type: import("vue").PropType<PopoverPosition>;
     } & {
         default: string;
     };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    as?: unknown;
     position?: unknown;
 } & {
+    as: string;
     position: PopoverPosition;
 } & {}>, {
+    as: string;
     position: PopoverPosition;
 }>;
 export default _default;

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

@@ -1,16 +1,23 @@
 import { PopoverPosition } from "./Popover/Popover.vue";
 declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     position: {
         type: import("vue").PropType<PopoverPosition>;
-        required: true;
     } & {
         default: string;
     };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    as?: unknown;
     position?: unknown;
 } & {
+    as: string;
     position: PopoverPosition;
 } & {}>, {
+    as: string;
     position: PopoverPosition;
 }>;
 export default _default;