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

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

@@ -1,3 +1,42 @@
+<script setup lang="ts">
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue"
+import { DotsVerticalIcon } from "@heroicons/vue/solid"
+import { onMounted, ref } from "vue"
+import * as TableTypes from "../../types/table"
+import User from "../../types/users"
+
+const props = defineProps<{
+  currentUser: User
+  items: TableTypes.MenuItem[]
+  propsData: any
+}>()
+
+const hasActionItems = ref(false)
+
+const emitEvent = (event: string): void => {
+  window.VueBus.emit(event, props.propsData)
+}
+
+const show = (item: TableTypes.MenuItem): boolean => {
+  if (!item.show) return true
+  return item.show(props.propsData, props.currentUser)
+}
+
+onMounted(() => {
+  for (let item of props.items) {
+    if (!item.show) {
+      hasActionItems.value = true
+      return
+    }
+
+    const showActionItem = item.show(props.propsData, props.currentUser)
+    if (showActionItem) {
+      hasActionItems.value = true
+      return
+    }
+  }
+})
+</script>
 <template>
   <Menu as="div" class="relative flex justify-end items-center">
     <MenuButton
@@ -37,46 +76,3 @@
     </transition>
   </Menu>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
-import { DotsVerticalIcon } from "@heroicons/vue/solid";
-import TableTypes from "../../types/table";
-import UserTypes from "../../types/users";
-
-@Options({
-  components: { DotsVerticalIcon, Menu, MenuButton, MenuItem, MenuItems },
-  name: "ActionsDropdown",
-})
-export default class ActionsDropdown extends Vue {
-  @Prop({ type: Object, required: true }) currentUser!: UserTypes.User;
-  @Prop({ type: Array, required: true }) items!: Array<TableTypes.MenuItem>;
-  @Prop({ type: Object, required: true }) propsData!: any;
-
-  hasActionItems = false;
-
-  mounted(): void {
-    for (let item of this.items) {
-      if (!item.show) {
-        this.hasActionItems = true;
-        return;
-      }
-
-      const showActionItem = item.show(this.propsData, this.currentUser);
-      if (showActionItem) {
-        this.hasActionItems = true;
-        return;
-      }
-    }
-  }
-
-  emitEvent(event: string): void {
-    window.VueBus.emit(event, this.propsData);
-  }
-  show(item: TableTypes.MenuItem): boolean {
-    if (!item.show) return true;
-    return item.show(this.propsData, this.currentUser);
-  }
-}
-</script>

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

@@ -1,12 +1,72 @@
+<script lang="ts">
+// TODO: explore this further as a pattern for exporting commonly used types
+export interface Pagination {
+  page: number
+  perPage: number
+  totalItems: number
+  totalPages: number
+}
+</script>
+<script setup lang="ts">
+import { computed, ref } from "vue"
+
+const props = defineProps<{
+  modelValue: Pagination
+}>()
+
+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()
+}
+
+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++) {
+      shortcuts.push(i + 1)
+    }
+    return shortcuts
+  }
+
+  // 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
+  if (pagesLeft >= 3) {
+    for (let i = 0; i < 4; i++) {
+      shortcuts.push(pagination.value.page + i)
+    }
+    return shortcuts
+  }
+
+  // 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)
+  }
+  return shortcuts
+})
+</script>
 <template>
   <div class="px-4 flex items-center justify-between sm:px-0">
     <div class="w-0 flex-1 flex">
       <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(modelValue.page - 1)"
+        @click.prevent="changePage(pagination.page - 1)"
         :class="
-          modelValue.page == 1
+          pagination.page == 1
             ? 'text-gray-500 cursor-not-allowed pointer-events-none'
             : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "
@@ -30,7 +90,7 @@
         :key="i"
         v-text="i"
         :class="
-          modelValue.page === i
+          pagination.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'
         "
@@ -42,9 +102,9 @@
       <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(modelValue.page + 1)"
+        @click.prevent="changePage(pagination.page + 1)"
         :class="
-          modelValue.page >= modelValue.totalPages
+          pagination.page >= pagination.totalPages
             ? 'text-gray-500 cursor-not-allowed pointer-events-none'
             : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "
@@ -61,78 +121,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Emit, Options, Prop, Vue } from "vue-property-decorator";
-
-@Options({ name: "Paginator" })
-export default class Paginator extends Vue {
-  @Prop({ type: Object, required: true }) modelValue!: {
-    page: number;
-    perPage: number;
-    totalItems: number;
-    totalPages: number;
-  };
-
-  @Emit("update:modelValue")
-  updateModelValue(): {
-    page: number;
-    perPage: number;
-    totalItems: number;
-    totalPages: number;
-  } {
-    return this.modelValue;
-  }
-
-  changePage(page: number): void {
-    this.modelValue.page = page;
-    this.updateModelValue();
-  }
-  changePerPage(parent: HTMLElement, perPage: number): void {
-    parent.blur();
-    this.modelValue.page = 1;
-    this.modelValue.perPage = perPage;
-    this.updateModelValue();
-  }
-
-  get endingItem(): number {
-    const end = this.modelValue.page * this.modelValue.perPage;
-    return end > this.modelValue.totalItems ? this.modelValue.totalItems : end;
-  }
-  get pageShortcuts(): number[] {
-    const shortcuts: number[] = [];
-
-    // If total pages is less than or equal to 4, just return 1, 2, 3, 4
-    if (this.modelValue.totalPages <= 4) {
-      for (let i = 0; i < this.modelValue.totalPages; i++) {
-        shortcuts.push(i + 1);
-      }
-      return shortcuts;
-    }
-
-    // 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 = this.modelValue.totalPages - this.modelValue.page;
-    if (pagesLeft >= 3) {
-      for (let i = 0; i < 4; i++) {
-        shortcuts.push(this.modelValue.page + i);
-      }
-      return shortcuts;
-    }
-
-    // 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(this.modelValue.totalPages - i);
-    }
-    return shortcuts;
-  }
-  get startingItem(): number {
-    const start =
-      this.modelValue.page * this.modelValue.perPage -
-      this.modelValue.perPage +
-      1;
-    return this.modelValue.totalItems === 0 ? 0 : start;
-  }
-}
-</script>

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

@@ -1,3 +1,34 @@
+<script setup lang="ts">
+// TODO: think about whether there is value in updating and emiting step with next/previous
+// TODO: add to docs
+
+withDefaults(
+  defineProps<{
+    hideActions?: boolean
+    hidePrevious?: boolean
+    nextText?: string
+    previousText?: string
+    step: number
+    total: number
+  }>(),
+  {
+    hideActions: false,
+    hidePrevious: false,
+    nextText: "Next",
+    previousText: "Back",
+  }
+)
+
+const emit = defineEmits(["next", "previous"])
+
+const next = (): void => {
+  emit("next")
+}
+
+const previous = (): void => {
+  emit("previous")
+}
+</script>
 <template>
   <div>
     <nav class="flex items-center justify-center space-x-8">
@@ -32,41 +63,21 @@
 
     <div class="flex flex-shrink-0" v-if="!hideActions">
       <span class="inline-flex rounded-md shadow-sm" v-if="!hidePrevious">
-        <button type="button" class="xy-btn-white" @click="previous">
-          Back
-        </button>
+        <button
+          type="button"
+          class="xy-btn-white"
+          @click="previous"
+          v-text="previousText"
+        ></button>
       </span>
       <span class="ml-3 inline-flex rounded-md shadow-sm">
         <button
           type="button"
           class="xy-btn"
           @click="next"
-          v-text="nextText ? nextText : 'Next'"
+          v-text="nextText"
         ></button>
       </span>
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Options, Emit, Prop, Vue } from "vue-property-decorator";
-
-@Options({ name: "Steps" })
-export default class Steps extends Vue {
-  @Prop({ type: Boolean, required: false }) hideActions?: boolean;
-  @Prop({ type: Boolean, required: false }) hidePrevious?: boolean;
-  @Prop({ type: String, required: false }) nextText?: string;
-  @Prop({ type: Number, required: true }) step!: number;
-  @Prop({ type: Number, required: true }) total!: number;
-
-  @Emit()
-  next(): void {
-    return;
-  }
-
-  @Emit()
-  previous(): void {
-    return;
-  }
-}
-</script>

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

@@ -1,3 +1,67 @@
+<script setup lang="ts">
+import { computed } from "vue"
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    pillDesign?: boolean
+    tabs: Array<{
+      label: string
+      value: string
+    }>
+  }>(),
+  {
+    pillDesign: false,
+  }
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", val: string): void
+}>()
+
+const updateModelValue = (modelValue: string): void => {
+  emit("update:modelValue", modelValue)
+}
+
+const classes = (currentTab: string, pastFirstTab: boolean): string => {
+  let c = ""
+
+  if (props.pillDesign) {
+    c =
+      "px-12 py-2 font-semibold text-md leading-5 rounded-t-md focus:outline-none "
+
+    if (props.modelValue === currentTab) {
+      c = c + "focus:bg-white text-gray-700 bg-white border-b-2 border-blue-500"
+    } else {
+      c =
+        c +
+        "text-gray-700 hover:text-gray-900 focus:text-gray-900 focus:bg-gray-100 border border-gray-200"
+    }
+
+    return c
+  }
+
+  c =
+    "px-1 py-4 text-sm font-semibold border-b-2 whitespace-nowrap leading-5 focus:outline-none "
+  if (props.modelValue === currentTab) {
+    c =
+      c +
+      "border-blue-500 text-xy-blue focus:text-blue-800 focus:border-blue-700"
+  } else {
+    c =
+      c +
+      "border-transparent text-gray-700 hover:text-gray-900 hover:border-gray-300 focus:text-gray-900 focus:border-gray-300"
+  }
+
+  if (pastFirstTab) c = c + " ml-8"
+
+  return c
+}
+
+const notPillDesign = computed((): boolean => {
+  return !props.pillDesign
+})
+</script>
 <template>
   <div>
     <div class="sm:hidden" :class="{ 'mb-4': pillDesign }">
@@ -26,63 +90,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Emit, Options, Prop, Vue } from "vue-property-decorator";
-
-@Options({ name: "Tabs" })
-export default class Tabs extends Vue {
-  @Prop({ type: String, required: true }) modelValue!: string;
-  @Prop({ type: Boolean, required: true }) pillDesign?: boolean;
-  @Prop({ type: Array, required: true }) tabs!: Array<{
-    label: string;
-    value: string;
-  }>;
-
-  @Emit("update:modelValue")
-  updateModelValue(modelValue: string): string {
-    return modelValue;
-  }
-
-  classes(currentTab: string, pastFirstTab: boolean): string {
-    let c = "";
-
-    if (this.pillDesign) {
-      c =
-        "px-12 py-2 font-semibold text-md leading-5 rounded-t-md focus:outline-none ";
-
-      if (this.modelValue === currentTab) {
-        c =
-          c +
-          "focus:bg-white text-gray-700 bg-white border-b-2 border-blue-500";
-      } else {
-        c =
-          c +
-          "text-gray-700 hover:text-gray-900 focus:text-gray-900 focus:bg-gray-100 border border-gray-200";
-      }
-
-      return c;
-    }
-
-    c =
-      "px-1 py-4 text-sm font-semibold border-b-2 whitespace-nowrap leading-5 focus:outline-none ";
-    if (this.modelValue === currentTab) {
-      c =
-        c +
-        "border-blue-500 text-xy-blue focus:text-blue-800 focus:border-blue-700";
-    } else {
-      c =
-        c +
-        "border-transparent text-gray-700 hover:text-gray-900 hover:border-gray-300 focus:text-gray-900 focus:border-gray-300";
-    }
-
-    if (pastFirstTab) c = c + " ml-8";
-
-    return c;
-  }
-
-  get notPillDesign(): boolean {
-    return !this.pillDesign;
-  }
-}
-</script>

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

@@ -1,3 +1,30 @@
+<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
@@ -66,34 +93,3 @@
     </Dialog>
   </TransitionRoot>
 </template>
-
-<script lang="ts">
-import { Emit, Options, Prop, Vue } from "vue-property-decorator";
-import {
-  Dialog,
-  DialogOverlay,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
-
-@Options({
-  components: {
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    TransitionChild,
-    TransitionRoot,
-  },
-  name: "ContentModal",
-})
-export default class ContentModal extends Vue {
-  @Prop({ type: Boolean, required: true }) modelValue!: boolean;
-  @Prop({ type: String, required: false }) title?: string;
-
-  @Emit("update:modelValue")
-  updateModelValue(value: boolean): boolean {
-    return value;
-  }
-}
-</script>

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

@@ -1,3 +1,87 @@
+<script lang="ts">
+export interface Flash {
+  type?: string
+  message: string
+}
+</script>
+<script setup lang="ts">
+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"
@@ -16,7 +100,7 @@
         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 }, flashTypeBorderClass[flash.type]]"
+        :class="[{ 'mt-2': idx > 0 }, getFlashClass(flash)]"
       >
         <div
           class="rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden"
@@ -50,72 +134,3 @@
     </transition-group>
   </div>
 </template>
-
-<script lang="ts">
-import { Options, Vue } from "vue-property-decorator";
-
-@Options({ name: "Flash" })
-export default class Flash extends Vue {
-  flashes: Array<{ type: string; message: string }> = [];
-  flashTypeBorderClass = {
-    warning: "border-orange-500",
-    error: "border-red-500",
-    info: "border-blue-500",
-    success: "border-green-500",
-  };
-
-  mounted(): void {
-    window.VueBus.on("Flash-show-message", (flash) => {
-      this.renderFlash(flash);
-    });
-
-    window.VueBus.on("Flash-show-generic-error", (email) => {
-      this.renderGenericError(email);
-    });
-
-    if (window.Flashes) {
-      for (const flash of window.Flashes) {
-        if (typeof flash.type === "undefined") {
-          const values: string[] = flash.message.split(": ");
-          this.renderFlash({ type: values[0], message: values[1] });
-          return;
-        }
-        this.renderFlash({ type: flash.type, message: flash.message });
-      }
-    }
-  }
-
-  remove(flash: { type: string; message: string }): void {
-    let index = 0;
-    for (const f of this.flashes) {
-      if (flash.message === f.message) {
-        this.flashes.splice(index, 1);
-        return;
-      }
-      index++;
-    }
-  }
-  renderFlash(flash: { type: string; message: string }): void {
-    this.flashes.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: Array<{ type: string; message: string }>) => {
-        flashes.pop();
-      },
-      10000,
-      this.flashes
-    );
-  }
-  renderGenericError(email: string): void {
-    this.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.",
-    });
-  }
-}
-</script>