@xy-planning-network/trees 0.4.0-rc-7 → 0.4.2

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

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogOverlay,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue"
+
+withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title?: string
+  }>(),
+  {
+    title: "",
+  }
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", val: boolean): void
+}>()
+
+const updateModelValue = (value: boolean) => {
+  emit("update:modelValue", value)
+}
+</script>
+<template>
+  <TransitionRoot as="template" :show="modelValue">
+    <Dialog
+      as="div"
+      static
+      class="fixed z-10 inset-0 overflow-y-auto"
+      @close="updateModelValue(false)"
+      :open="modelValue"
+    >
+      <div
+        class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      >
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <DialogOverlay
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          />
+        </TransitionChild>
+
+        <!-- This element is to trick the browser into centering the modal contents. -->
+        <span
+          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+          >&#8203;</span
+        >
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enter-to="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100 translate-y-0 sm:scale-100"
+          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <div
+            class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+          >
+            <div>
+              <slot name="icon"></slot>
+              <div class="mt-3 text-center sm:mt-5">
+                <DialogTitle as="h3" v-text="title"></DialogTitle>
+                <div class="mt-2">
+                  <slot></slot>
+                </div>
+              </div>
+            </div>
+            <div class="mt-5 sm:mt-6">
+              <button
+                type="button"
+                class="inline-flex justify-center w-full xy-btn"
+                @click="updateModelValue(false)"
+              >
+                Go back
+              </button>
+            </div>
+          </div>
+        </TransitionChild>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { Flash } from "@/composables/overlay"
+import { onMounted, ref } from "vue"
+
+// TODO: spk this might benefit from the composition api to avoid race conditions where a flash is requested before the component is mounted.
+
+const flashes = ref<Flash[]>([])
+const flashTypeBorderClass = {
+  warning: "border-orange-500",
+  error: "border-red-500",
+  info: "border-blue-500",
+  success: "border-green-500",
+}
+
+const getFlashClass = (flash: Flash): string => {
+  const availableTypes = Object.keys(flashTypeBorderClass)
+  // default the flash type to "info" if no flash type or an unsupported flash.type is found
+  const type =
+    flash?.type && availableTypes.includes(flash.type)
+      ? (flash.type as "warning" | "error" | "info" | "success")
+      : "info"
+  return flashTypeBorderClass[type]
+}
+
+const remove = (flash: Flash): void => {
+  let index = 0
+  for (const f of flashes.value) {
+    if (flash.message === f.message) {
+      flashes.value.splice(index, 1)
+      return
+    }
+    index++
+  }
+}
+const renderFlash = (flash: Flash): void => {
+  flashes.value.push(flash)
+  // Super simple flash implementation. This could get "smarter" by adding an
+  // id to the flash object, and then searching for the specific flash in the
+  // array and splicing, instead of simply doing a pop().
+  setTimeout(
+    (flashes: Flash[]) => {
+      flashes.pop()
+    },
+    10000,
+    flashes.value
+  )
+}
+
+const renderGenericError = (email: string): void => {
+  renderFlash({
+    type: "error",
+    message:
+      "Whoops! Something went wrong, please reach out to " +
+      `<a class="underline text-xy-blue" href="mailto:${email}">${email}</a>` +
+      " if the issue persists.",
+  })
+}
+
+onMounted(() => {
+  window.VueBus.on("Flash-show-message", (flash) => {
+    renderFlash(flash)
+  })
+
+  window.VueBus.on("Flash-show-generic-error", (email) => {
+    renderGenericError(email)
+  })
+
+  if (window.Flashes) {
+    for (const flash of window.Flashes) {
+      if (typeof flash.type === "undefined") {
+        const values: string[] = flash.message.split(": ")
+        renderFlash({ type: values[0], message: values[1] })
+        return
+      }
+      renderFlash({ type: flash.type, message: flash.message })
+    }
+  }
+})
+</script>
+<template>
+  <div
+    class="fixed inset-0 flex flex-col items-end justify-end px-4 py-6 pointer-events-none sm:p-6 z-40"
+  >
+    <transition-group
+      tag="div"
+      class="max-w-sm w-full"
+      enter-active-class="ease-out duration-300"
+      enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+      enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+      leave-active-class="ease-in duration-100"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-for="(flash, idx) in flashes"
+        :key="flash.message"
+        class="bg-white shadow-lg rounded-lg pointer-events-auto border-t-4 transform"
+        :class="[{ 'mt-2': idx > 0 }, getFlashClass(flash)]"
+      >
+        <div
+          class="rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden"
+        >
+          <div class="p-4">
+            <div class="flex items-center">
+              <div class="w-0 flex-1 flex justify-between">
+                <p
+                  class="w-0 flex-1 text-sm leading-5 font-medium text-gray-900"
+                  v-html="flash.message"
+                ></p>
+              </div>
+              <div class="ml-4 flex-shrink-0 flex">
+                <button
+                  @click="remove(flash)"
+                  class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150"
+                >
+                  <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                      fill-rule="evenodd"
+                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition-group>
+  </div>
+</template>

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

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogOverlay,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue"
+import { XIcon } from "@heroicons/vue/outline"
+
+withDefaults(
+  defineProps<{
+    destructive?: boolean
+    disabled?: boolean
+    modelValue: boolean
+    submitText?: string
+    title?: string
+  }>(),
+  {
+    destructive: false,
+    disabled: false,
+    submitText: "",
+    title: "",
+  }
+)
+
+const emit = defineEmits<{
+  (e: "submit"): void
+  (e: "update:modelValue", val: boolean): void
+}>()
+
+const submit = () => {
+  emit("submit")
+}
+
+const updateModelValue = (value: boolean) => {
+  emit("update:modelValue", value)
+}
+</script>
+<template>
+  <TransitionRoot as="template" :show="modelValue">
+    <Dialog
+      as="div"
+      static
+      class="fixed z-10 inset-0 overflow-y-auto"
+      @close="updateModelValue(false)"
+      :open="modelValue"
+    >
+      <div
+        class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      >
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <DialogOverlay
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          />
+        </TransitionChild>
+
+        <!-- This element is to trick the browser into centering the modal contents. -->
+        <span
+          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+          >&#8203;</span
+        >
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enter-to="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100 translate-y-0 sm:scale-100"
+          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <div
+            class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-full"
+          >
+            <div class="block absolute top-0 right-0 pt-4 pr-4">
+              <button
+                type="button"
+                class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                @click="updateModelValue(false)"
+              >
+                <span class="sr-only">Close</span>
+                <XIcon class="h-6 w-6" aria-hidden="true" />
+              </button>
+            </div>
+            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <div class="mt-3 sm:mt-0 sm:text-left">
+                <DialogTitle
+                  as="h3"
+                  class="text-center text-lg leading-6 font-medium text-gray-900"
+                  v-text="title"
+                ></DialogTitle>
+                <div class="mt-2">
+                  <slot></slot>
+                </div>
+              </div>
+            </div>
+            <div
+              class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
+              v-if="submitText"
+            >
+              <button
+                type="button"
+                class="xy-btn w-full sm:ml-3 sm:w-auto sm:text-sm"
+                @click="submit()"
+                v-text="submitText"
+                :class="[destructive ? 'xy-btn-red' : 'xy-btn']"
+                :disabled="disabled"
+              ></button>
+              <button
+                type="button"
+                class="xy-btn-white mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                @click="updateModelValue(false)"
+                ref="cancelButtonRef"
+              >
+                Cancel
+              </button>
+            </div>
+            <slot name="buttons"></slot>
+          </div>
+        </TransitionChild>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

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

@@ -0,0 +1,229 @@
+<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"
+
+const props = withDefaults(
+  defineProps<{
+    as?: string
+    position?: PopoverPosition
+  }>(),
+  {
+    as: "div",
+    position: "auto",
+  }
+)
+
+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 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
+  }
+
+  return {
+    wrapper: wrapperClasses,
+    content: contentClasses,
+  }
+})
+
+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>
+  <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 : {}"
+      >
+        <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

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

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogOverlay,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue"
+import { XIcon } from "@heroicons/vue/outline"
+import { ref } from "vue"
+
+const props = defineProps<{
+  header: string
+  description: string
+  modelValue: boolean
+}>()
+
+const open = ref(props.modelValue)
+
+const emit = defineEmits<{
+  (e: "close", val: boolean): void
+  (e: "update:modelValue", val: boolean): void
+}>()
+
+const close = () => {
+  open.value = false
+  emit("close", open.value)
+  emit("update:modelValue", open.value)
+}
+</script>
+<template>
+  <TransitionRoot as="template" :show="modelValue">
+    <Dialog
+      as="div"
+      static
+      class="fixed inset-0 z-40 overflow-hidden bg-black bg-opacity-50"
+      @close="close()"
+      :open="modelValue"
+    >
+      <div class="absolute inset-0 overflow-hidden">
+        <DialogOverlay class="absolute inset-0" />
+
+        <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
+          <TransitionChild
+            as="template"
+            enter="transform transition ease-in-out duration-500 sm:duration-700"
+            enter-from="translate-x-full"
+            enter-to="translate-x-0"
+            leave="transform transition ease-in-out duration-500 sm:duration-700"
+            leave-from="translate-x-0"
+            leave-to="translate-x-full"
+          >
+            <div class="w-screen max-w-md">
+              <div
+                class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll"
+              >
+                <div class="py-6 px-4 bg-blue-700 sm:px-6">
+                  <div class="flex items-center justify-between">
+                    <DialogTitle as="h3" class="text-white" v-text="header">
+                    </DialogTitle>
+                    <div class="ml-3 h-7 flex items-center">
+                      <button
+                        class="bg-blue-700 rounded-md text-blue-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
+                        @click="close()"
+                      >
+                        <span class="sr-only">Close panel</span>
+                        <XIcon class="h-6 w-6" aria-hidden="true" />
+                      </button>
+                    </div>
+                  </div>
+                  <div class="mt-1">
+                    <p class="text-blue-300" v-text="description"></p>
+                  </div>
+                </div>
+                <div class="relative flex-1 py-6 px-4 sm:px-6">
+                  <slot></slot>
+                </div>
+
+                <slot name="footer"></slot>
+              </div>
+            </div>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>