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

package/src/lib-components/layout/SidebarLayout.vue

@@ -1,3 +1,39 @@
+<script setup lang="ts">
+import Flash from "../overlays/Flash.vue"
+import Spinner from "../overlays/Spinner.vue"
+import {
+  Dialog,
+  DialogOverlay,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue"
+import { MenuAlt2Icon, XIcon } from "@heroicons/vue/outline"
+import { CogIcon } from "@heroicons/vue/solid"
+import * as NavTypes from "../../types/nav"
+import { ref } from "vue"
+
+const props = withDefaults(
+  defineProps<{
+    activeURL?: string
+    iconURL: string
+    navigation: NavTypes.Item[]
+    userNavigation: NavTypes.Item[]
+  }>(),
+  {
+    activeURL: "",
+  }
+)
+
+const sidebarOpen = ref<boolean>(true)
+
+const isActive = (url: string): boolean => {
+  return props.activeURL === url
+}
+</script>
 <template>
   <div class="h-screen flex overflow-hidden bg-gray-100">
     <TransitionRoot as="template" :show="sidebarOpen">
@@ -201,54 +237,3 @@
   <Flash />
   <Spinner />
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-import Flash from "../overlays/Flash.vue";
-import Spinner from "../overlays/Spinner.vue";
-import {
-  Dialog,
-  DialogOverlay,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuItems,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { MenuAlt2Icon, UserCircleIcon, XIcon } from "@heroicons/vue/outline";
-import { CogIcon } from "@heroicons/vue/solid";
-import NavTypes from "../../types/nav";
-
-@Options({
-  components: {
-    Flash,
-    Spinner,
-    Dialog,
-    DialogOverlay,
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-    TransitionChild,
-    TransitionRoot,
-    CogIcon,
-    MenuAlt2Icon,
-    UserCircleIcon,
-    XIcon,
-  },
-  name: "SidebarLayout",
-})
-export default class SidebarLayout extends Vue {
-  @Prop({ type: String, required: false }) activeURL?: string;
-  @Prop({ type: String, required: true }) iconURL!: string;
-  @Prop({ type: Array, required: true }) navigation!: NavTypes.Item[];
-  @Prop({ type: Array, required: true }) userNavigation!: NavTypes.Item[];
-
-  sidebarOpen = false;
-
-  isActive(url: string): boolean {
-    return this.activeURL === url;
-  }
-}
-</script>

package/src/lib-components/layout/StackedLayout.vue

@@ -1,3 +1,35 @@
+<script setup lang="ts">
+import Flash from "../overlays/Flash.vue"
+import Spinner from "../overlays/Spinner.vue"
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+} from "@headlessui/vue"
+import { MenuIcon, UserCircleIcon, XIcon } from "@heroicons/vue/outline"
+import * as NavTypes from "../../types/nav"
+import User from "../../types/users"
+
+const props = withDefaults(
+  defineProps<{
+    activeURL?: string
+    currentUser: User
+    iconURL: string
+    navigation: NavTypes.Item[]
+    userNavigation: NavTypes.Item[]
+  }>(),
+  {
+    activeURL: "",
+  }
+)
+const isActive = (url: string): boolean => {
+  return props.activeURL === url
+}
+</script>
 <template>
   <div class="min-h-screen bg-gray-100">
     <Disclosure as="nav" class="bg-white shadow-sm" v-slot="{ open }">
@@ -137,58 +169,3 @@
   <Flash />
   <Spinner />
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-import Flash from "../overlays/Flash.vue";
-import Spinner from "../overlays/Spinner.vue";
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuItems,
-} from "@headlessui/vue";
-import {
-  BellIcon,
-  MenuIcon,
-  UserCircleIcon,
-  XIcon,
-} from "@heroicons/vue/outline";
-import NavTypes from "../../types/nav";
-import UserTypes from "../../types/users";
-
-@Options({
-  components: {
-    Flash,
-    Spinner,
-    Disclosure,
-    DisclosureButton,
-    DisclosurePanel,
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-    BellIcon,
-    MenuIcon,
-    UserCircleIcon,
-    XIcon,
-  },
-  name: "StackedLayout",
-})
-export default class StackedLayout extends Vue {
-  @Prop({ type: String, required: false }) activeURL?: string;
-  @Prop({ type: Object, required: true }) currentUser!: UserTypes.User;
-  @Prop({ type: String, required: true }) iconURL!: string;
-  @Prop({ type: Array, required: true }) navigation!: NavTypes.Item[];
-  @Prop({ type: Array, required: true }) userNavigation!: NavTypes.Item[];
-
-  sidebarOpen = false;
-
-  isActive(url: string): boolean {
-    return this.activeURL === url;
-  }
-}
-</script>

package/src/lib-components/lists/Cards.vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  cards: {
+    primary: string
+    secondary: string
+  }[]
+}>()
+</script>
 <template>
   <div
     class="mt-5 grid grid-cols-1 gap-5"
@@ -23,15 +31,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-
-@Options({ name: "Cards" })
-export default class Cards extends Vue {
-  @Prop({ type: Array, required: true }) cards!: {
-    primary: string;
-    secondary: string;
-  }[];
-}
-</script>

package/src/lib-components/lists/DetailList.vue

@@ -1,3 +1,86 @@
+<script setup lang="ts">
+import { ref, watch } from "vue"
+import BaseAPI from "../../api/base"
+import DateFilter from "../layout/DateFilter.vue"
+import Paginator from "../navigation/Paginator.vue"
+
+const props = withDefaults(
+  defineProps<{
+    refreshTrigger?: number
+    reloadTrigger?: number
+    title: string
+    url: string
+  }>(),
+  {
+    refreshTrigger: 0,
+    reloadTrigger: 0,
+  }
+)
+
+const dateRange = ref<{ minDate: number; maxDate: number }>({
+  minDate: 0,
+  maxDate: 0,
+})
+const hasContent = ref(true)
+const items = ref<any[]>([])
+const pagination = ref({
+  page: 1,
+  perPage: 10,
+  totalItems: 0,
+  totalPages: 0,
+})
+const sortDir = ref("DESC")
+
+const loadAndRender = (checkForContent: boolean): void => {
+  const params = {
+    page: pagination.value.page,
+    perPage: pagination.value.perPage,
+    sortDir: sortDir.value,
+  }
+
+  BaseAPI.get(props.url, {}, Object.assign(params, dateRange.value)).then(
+    (success: any) => {
+      pagination.value = {
+        page: success.data.page,
+        perPage: success.data.perPage,
+        totalItems: success.data.totalItems,
+        totalPages: success.data.totalPages,
+      }
+      items.value = success.data.items
+      if (checkForContent) hasContent.value = items.value.length != 0
+    },
+    () => {
+      // TODO: let's make this really generic or configurable
+      window.VueBus.emit(
+        "Flash-show-generic-error",
+        "archive@xyplanningnetwork.com"
+      )
+    }
+  )
+}
+
+watch([sortDir, dateRange], () => {
+  loadAndRender(false)
+})
+
+watch(
+  () => props.refreshTrigger,
+  () => {
+    loadAndRender(false)
+  }
+)
+
+watch(
+  () => props.reloadTrigger,
+  () => {
+    // This lets parent components trigger a refresh of the current page depending on external actions.
+    pagination.value.page = 1
+    loadAndRender(true)
+  }
+)
+
+loadAndRender(true)
+</script>
 <template>
   <div>
     <DateFilter
@@ -29,86 +112,3 @@
     />
   </div>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue, Watch } from "vue-property-decorator";
-import BaseAPI from "../../api/base";
-import DateFilter from "../layout/DateFilter.vue";
-import Paginator from "../navigation/Paginator.vue";
-
-@Options({ components: { DateFilter, Paginator }, name: "DetailList" })
-export default class DetailList extends Vue {
-  @Prop({ type: Number, required: false }) refreshTrigger?: number;
-  @Prop({ type: Number, required: false }) reloadTrigger?: number;
-  @Prop({ type: String, required: true }) title!: string;
-  @Prop({ type: String, required: true }) url!: string;
-
-  @Watch("sortDir")
-  onSortDir(): void {
-    this.loadAndRender(false);
-  }
-
-  @Watch("dateRange")
-  onDateRange(): void {
-    this.loadAndRender(false);
-  }
-
-  @Watch("refreshTrigger")
-  onRefreshTrigger(): void {
-    // This lets parent components trigger a refresh of the current page depending on external actions.
-    this.loadAndRender(false);
-  }
-
-  @Watch("reloadTrigger")
-  onReloadTrigger(): void {
-    // This lets parent components trigger a refresh of the current page depending on external actions.
-    this.pagination.page = 1;
-    this.loadAndRender(true);
-  }
-
-  dateRange: { minDate: number; maxDate: number } = {
-    minDate: 0,
-    maxDate: 0,
-  };
-  hasContent = true;
-  items: any[] = [];
-  pagination = {
-    page: 1,
-    perPage: 10,
-    totalItems: 0,
-    totalPages: 0,
-  };
-  sortDir = "DESC";
-
-  created() {
-    this.loadAndRender(true);
-  }
-
-  loadAndRender(checkForContent: boolean): void {
-    const params = {
-      page: this.pagination.page,
-      perPage: this.pagination.perPage,
-      sortDir: this.sortDir,
-    };
-
-    BaseAPI.get(this.url, {}, Object.assign(params, this.dateRange)).then(
-      (success: any) => {
-        this.pagination = {
-          page: success.data.page,
-          perPage: success.data.perPage,
-          totalItems: success.data.totalItems,
-          totalPages: success.data.totalPages,
-        };
-        this.items = success.data.items;
-        if (checkForContent) this.hasContent = this.items.length != 0;
-      },
-      () => {
-        window.VueBus.emit(
-          "Flash-show-generic-error",
-          "archive@xyplanningnetwork.com"
-        );
-      }
-    );
-  }
-}
-</script>

package/src/lib-components/lists/DownloadCell.vue

@@ -1,16 +1,12 @@
+<script setup lang="ts">
+import { DownloadIcon } from "@heroicons/vue/solid"
+defineProps<{
+  propsData: Record<string, unknown>
+  attribute: string
+}>()
+</script>
 <template>
-  <a :href="propsData[attribute]">
+  <a :href="propsData[attribute] as string">
     <DownloadIcon class="h-6 w-6 group-hover:text-gray-500 transition" />
   </a>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-import { DownloadIcon } from "@heroicons/vue/solid";
-
-@Options({ name: "DownloadCell", components: { DownloadIcon } })
-export default class DownloadCell extends Vue {
-  @Prop({ type: Object, required: true }) propsData!: Record<string, unknown>;
-  @Prop({ type: String, required: true }) attribute!: string;
-}
-</script>

package/src/lib-components/lists/StaticTable.vue

@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import { ComponentPublicInstance, getCurrentInstance } from "vue"
+import * as TableTypes from "../../types/table"
+
+defineProps<{
+  tableData: TableTypes.Static
+}>()
+
+const cellValue = (
+  item: Record<string, any>,
+  col: TableTypes.Column
+): string => {
+  if (col.key) {
+    return item[col.key]
+  }
+
+  if (col.presenter) {
+    // TODO: discuss this pattern.  Current usage can be replaced with modules.
+    // https://v3.vuejs.org/api/composition-api.html#getcurrentinstance
+    const internalInstance = getCurrentInstance()
+    return col.presenter(
+      item,
+      internalInstance?.proxy as ComponentPublicInstance
+    )
+  }
+
+  return ""
+}
+</script>
 <template>
   <div class="flex flex-col">
     <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
@@ -19,7 +48,7 @@
             <tbody class="bg-white divide-y divide-gray-200">
               <tr
                 v-for="(item, rowIdx) in tableData.items"
-                :key="item.id ? item.id : rowIdx"
+                :key="item.id ? (item.id as string) : rowIdx"
               >
                 <td
                   class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
@@ -52,25 +81,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-import TableTypes from "../../types/table";
-
-@Options({ name: "StaticTable" })
-export default class StaticTable extends Vue {
-  @Prop({ type: Object, required: true }) tableData!: TableTypes.Static;
-
-  cellValue(item: Record<string, any>, col: TableTypes.Column): string {
-    if (col.key) {
-      return item[col.key];
-    }
-
-    if (col.presenter) {
-      return col.presenter(item, this);
-    }
-
-    return "";
-  }
-}
-</script>