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

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>

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

@@ -1,3 +1,42 @@
+<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
@@ -92,45 +131,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";
-import { ExclamationIcon, XIcon } from "@heroicons/vue/outline";
-
-@Options({
-  components: {
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    TransitionChild,
-    TransitionRoot,
-    ExclamationIcon,
-    XIcon,
-  },
-  name: "Modal",
-})
-export default class Modal extends Vue {
-  @Prop({ type: Boolean, required: false }) destructive?: boolean;
-  @Prop({ type: Boolean, required: false }) disabled?: boolean;
-  @Prop({ type: Boolean, required: true }) modelValue!: boolean;
-  @Prop({ type: String, required: false }) submitText?: string;
-  @Prop({ type: String, required: false }) title?: string;
-
-  @Emit()
-  submit(): void {
-    return;
-  }
-
-  @Emit("update:modelValue")
-  updateModelValue(value: boolean): boolean {
-    return value;
-  }
-}
-</script>

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

@@ -1,3 +1,33 @@
+<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
@@ -55,37 +85,3 @@
     </Dialog>
   </TransitionRoot>
 </template>
-
-<script lang="ts">
-import { Options, Emit, Prop, Vue } from "vue-property-decorator";
-import {
-  Dialog,
-  DialogOverlay,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { XIcon } from "@heroicons/vue/outline";
-
-@Options({
-  name: "Slideover",
-  components: {
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    TransitionChild,
-    TransitionRoot,
-    XIcon,
-  },
-})
-export default class Slideover extends Vue {
-  @Prop({ type: String, required: true }) header!: string;
-  @Prop({ type: String, required: true }) description!: string;
-  @Prop({ type: Boolean, required: true }) modelValue!: boolean;
-
-  @Emit()
-  close(): void {
-    return;
-  }
-}
-</script>

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

@@ -1,3 +1,51 @@
+<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"
@@ -91,59 +139,11 @@
           @after-enter="fadeOut"
           @after-leave="fadeIn"
         >
-          <div class="transition-opacity" v-show="showMsg">{{ msg }}</div>
+          <div class="text-center transition-opacity" v-show="showMsg">
+            {{ msg }}
+          </div>
         </transition>
       </div>
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Options, Vue } from "vue-property-decorator";
-
-@Options({ name: "Spinner" })
-export default class Spinner extends Vue {
-  idx = 0;
-  loading = false;
-  maxIdx = 0;
-  messages = [];
-  msg = "";
-  showMsg = false;
-
-  mounted() {
-    window.VueBus.on("Spinner-show", (messages) => {
-      if (messages) {
-        this.messages = messages;
-        this.maxIdx = this.messages.length - 1;
-        this.msg = this.messages[this.idx];
-        this.showMsg = true;
-      }
-      this.loading = true;
-    });
-
-    window.VueBus.on("Spinner-hide", () => {
-      this.idx = 0;
-      this.maxIdx = 0;
-      this.messages = [];
-      this.msg = "";
-      this.loading = false;
-    });
-  }
-
-  fadeIn(): void {
-    this.idx++;
-    if (this.idx > this.maxIdx) {
-      this.idx = 0;
-    }
-    if (this.messages) {
-      this.msg = this.messages[this.idx];
-    }
-    this.showMsg = true;
-  }
-  fadeOut(): void {
-    window.setTimeout(() => {
-      this.showMsg = false;
-    }, 2500);
-  }
-}
-</script>

package/src/types/env.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import { DefineComponent } from "vue"
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+// import.meta.env type support
+// https://vitejs.dev/guide/env-and-mode.html
+interface ImportMetaEnv {
+  readonly VITE_APP_BASE_API_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/src/types/global.d.ts

@@ -0,0 +1,10 @@
+import { Emitter } from "mitt"
+
+export {}
+
+declare global {
+  interface Window {
+    Flashes: Array<{ type?: string; message: string }>
+    VueBus: Emitter
+  }
+}

package/config/theme/fontSize.js

@@ -1,16 +0,0 @@
-module.exports = {
-  xxs: ["0.625rem", "1.4"],
-  xs: ["0.75rem", "1.333333"],
-  sm: ["0.875rem", "1.28571429"],
-  base: ["1rem", "1.5"],
-  lg: ["1.125rem", "1.55555556"],
-  xl: ["1.25rem", "1.4"],
-  "2xl": ["1.5rem", "1.33333333"],
-  "3xl": ["1.875rem", "1.2"],
-  "4xl": ["2.25rem", "1.11111111"],
-  "5xl": ["3rem", "1"],
-  "6xl": ["3.75rem", "1"],
-  "7xl": ["4.5rem", "1"],
-  "8xl": ["6rem", "1"],
-  "9xl": ["8rem", "1"],
-};

package/config/theme/fontWeight.js

@@ -1,27 +0,0 @@
-// NOTE: medium and extrabold are here for back compatibility
-let mediumWarn = false;
-let extraBoldWarn = false;
-
-module.exports = {
-  normal: 400,
-  get medium() {
-    if (!mediumWarn) {
-      mediumWarn = true;
-      console.log(
-        "warn - `font-medium` does not exist in the design library.  The font weight will resolve to `600`. Please replace instances of `font-medium` with `font-semibold`."
-      );
-    }
-    return 600;
-  },
-  semibold: 600,
-  bold: 700,
-  get extrabold() {
-    if (!extraBoldWarn) {
-      extraBoldWarn = true;
-      console.log(
-        "warn - `font-extrabold` does not exist in the design library.  The font weight will resolve to `700`.  Please replace instances of `font-extrabold` with `font-bold`."
-      );
-    }
-    return 700;
-  },
-};