@xy-planning-network/trees 0.4.0-rc-8 → 0.4.0

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/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>

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

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue"
+// TODO: spk this may benefit from composition api
+
+const idx = ref(0)
+const loading = ref(false)
+const maxIdx = ref(0)
+const messages = ref<string[]>([])
+const msg = ref("")
+const showMsg = ref(false)
+
+const fadeIn = (): void => {
+  idx.value++
+  if (idx.value > maxIdx.value) {
+    idx.value = 0
+  }
+  if (messages.value) {
+    msg.value = messages.value[idx.value]
+  }
+  showMsg.value = true
+}
+
+const fadeOut = (): void => {
+  window.setTimeout(() => {
+    showMsg.value = false
+  }, 2500)
+}
+
+onMounted(() => {
+  window.VueBus.on("Spinner-show", (spinMessages) => {
+    if (spinMessages) {
+      messages.value = spinMessages
+      maxIdx.value = spinMessages.length - 1
+      msg.value = messages.value[idx.value]
+      showMsg.value = true
+    }
+    loading.value = true
+  })
+
+  window.VueBus.on("Spinner-hide", () => {
+    idx.value = 0
+    maxIdx.value = 0
+    messages.value = []
+    msg.value = ""
+    loading.value = false
+  })
+})
+</script>
+<template>
+  <div
+    class="fixed top-0 left-0 flex items-center justify-center w-full h-full cursor-not-allowed z-50 bg-gray-50 bg-opacity-50"
+    v-if="loading"
+  >
+    <div>
+      <div class="flex justify-center">
+        <div class="animate-spin-gear">
+          <svg
+            width="129px"
+            height="129px"
+            viewBox="0 0 129 129"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+          >
+            <title>Group 6 Copy 3</title>
+            <defs>
+              <polygon
+                id="path-1"
+                points="0.000248076923 0.48676924 128.472837 0.48676924 128.472837 128.800648 0.000248076923 128.800648"
+              ></polygon>
+            </defs>
+            <g
+              id="Page-1"
+              stroke="none"
+              stroke-width="1"
+              fill="none"
+              fill-rule="evenodd"
+            >
+              <g id="Group-6-Copy-3">
+                <g id="Group-3">
+                  <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                  </mask>
+                  <g id="Clip-2"></g>
+                  <path
+                    d="M86.3955173,100.279324 C86.3955173,100.279324 79.4778923,106.213874 64.2360462,106.755809 C48.9954404,106.213874 42.0778154,100.279324 42.0778154,100.279324 C11.8756904,81.4963011 25.2309115,49.088357 25.2309115,49.088357 C36.5680269,24.1350542 59.1839596,22.5554236 63.8105942,22.4983139 L63.8105942,22.5043894 C63.8105942,22.5043894 63.9681231,22.4983139 64.2360462,22.4958837 C64.5052096,22.4983139 64.6627385,22.5043894 64.6627385,22.5043894 L64.6627385,22.4983139 C69.2881327,22.5554236 91.9053058,24.1350542 103.241181,49.088357 C103.241181,49.088357 116.596402,81.4963011 86.3955173,100.279324 L86.3955173,100.279324 Z M128.473085,68.8191581 L128.473085,60.4677727 L117.036738,58.80187 L115.10794,49.3726905 L124.970238,43.4186983 L121.675777,35.7307578 L110.49619,38.6214817 L106.161046,32.1486416 L113.220075,23.080347 L107.361738,17.0716753 L97.9645846,23.7437918 L89.14545,17.842049 L91.8693346,6.72144964 L84.04995,3.59378109 L78.2114596,13.4628269 L69.5907865,11.8127205 L67.908825,0.48676924 L64.6627385,0.48676924 L63.8105942,0.48676924 L60.5645077,0.48676924 L58.8813058,11.8127205 L50.2618731,13.4628269 L44.4233827,3.59378109 L36.6039981,6.72144964 L39.3278827,17.842049 L30.5087481,23.7437918 L21.1103538,17.0716753 L15.2520173,23.080347 L22.3122865,32.1486416 L17.9771423,38.6214817 L6.79755577,35.7307578 L3.50185385,43.4186983 L13.3641519,49.3726905 L11.4365942,58.80187 L0.000248076923,60.4677727 L0.000248076923,68.8191581 L11.4365942,70.4850608 L13.1036712,79.0223566 L3.13718077,84.8050196 L6.29644038,92.5488548 L17.5244019,89.8513318 L23.4832096,98.5854738 L16.7466808,107.893143 L22.8134019,113.695248 L31.9699212,106.70356 L38.5067481,110.99651 L35.5881231,122.068505 L43.35045,125.332265 L49.3625942,115.565287 L58.8813058,117.47421 L60.5645077,128.801377 L63.6927577,128.801377 L64.780575,128.801377 L67.908825,128.801377 L69.5907865,117.47421 L79.1107385,115.565287 L85.1228827,125.332265 L92.8852096,122.068505 L89.9665846,110.99651 L96.5034115,106.70356 L105.659931,113.695248 L111.725412,107.893143 L104.988883,98.5854738 L110.94769,89.8513318 L122.175652,92.5488548 L125.334912,84.8050196 L115.369662,79.0223566 L117.035498,70.4850608 L128.473085,68.8191581 Z"
+                    id="Fill-1"
+                    fill="#51A749"
+                    mask="url(#mask-2)"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </div>
+        <div class="absolute">
+          <svg
+            class="mt-8"
+            width="70px"
+            height="70px"
+            viewBox="0 0 53 32"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+          >
+            <title>Group 3 Copy</title>
+            <g
+              id="Page-1"
+              stroke="none"
+              stroke-width="1"
+              fill="none"
+              fill-rule="evenodd"
+            >
+              <g id="Group-3-Copy">
+                <polygon
+                  id="Fill-1"
+                  fill="#1F6DF4"
+                  points="0.7994 0.3999 11.2214 16.0009 0.7994 31.5999 11.2214 31.5999 16.4004 24.0149 21.1934 31.5999 31.9994 31.5999 21.4254 15.7449 26.0064 9.1719 20.6194 1.3729 16.1554 7.9149 11.2214 0.3999"
+                ></polygon>
+                <polygon
+                  id="Fill-2"
+                  fill="#51A749"
+                  points="41.978 0.3999 36.799 7.6269 32.006 0.3999 21.2 0.3999 31.775 15.5069 27.194 21.7689 32.27 29.1999 52.4 0.3999"
+                ></polygon>
+              </g>
+            </g>
+          </svg>
+        </div>
+      </div>
+      <div v-show="messages">
+        <transition
+          appear
+          enter-active-class="ease-out duration-1000"
+          enter-from-class="opacity-0"
+          enter-to-class="opacity-100"
+          leave-active-class="ease-in duration-500"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+          @after-enter="fadeOut"
+          @after-leave="fadeIn"
+        >
+          <div class="text-center transition-opacity" v-show="showMsg">
+            {{ msg }}
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>

package/types/composables/nav.d.ts

@@ -1,6 +1,6 @@
-import { DefineComponent, RenderFunction } from "vue";
+import { Component, RenderFunction } from "vue";
 export interface Item {
-    icon?: DefineComponent<unknown, unknown, any> | RenderFunction;
+    icon?: Component | RenderFunction;
     name: string;
     openInTab?: boolean;
     url: string;

package/types/composables/table.d.ts

@@ -1,11 +1,11 @@
-import { ComponentPublicInstance, DefineComponent } from "vue";
+import { Component, ComponentPublicInstance } from "vue";
 import User from "../composables/user";
 export interface Column {
     display: string;
     class?: string;
     key?: string;
     presenter?(row: any, instance: ComponentPublicInstance): any;
-    component?: DefineComponent<unknown, unknown, any>;
+    component?: Component;
     items?: Array<MenuItem>;
     sort?: string;
 }

package/types/composables/user.d.ts

@@ -1,9 +1,6 @@
 export interface User {
-    accountID: number;
-    accountOwner: boolean;
-    archived: boolean;
     id: number;
     email: string;
-    name: string;
+    name?: string;
 }
 export default User;

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

@@ -41,12 +41,12 @@ declare const _default: import("vue").DefineComponent<{
     modelValue: string | number | undefined;
     label: string;
     help: string;
+    design: "standard" | "compressed";
+    placeholder: string;
     options: {
         label: string;
         value: string | number;
     }[];
-    design: "standard" | "compressed";
-    placeholder: string;
 } & {}> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {