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

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,38 +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")
-  @Emit("update:modelValue")
-  close(): boolean {
-    return false;
-  }
-}
-</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
+  }
+}