@xy-planning-network/trees 0.4.0-rc-7 → 0.4.2

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/src/lib-components/overlays/Tooltip.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import Popover, { PopoverPosition } from "./Popover/Popover.vue"
+import { InformationCircleIcon } from "@heroicons/vue/outline"
+
+withDefaults(
+  defineProps<{
+    as?: string
+    position?: PopoverPosition
+  }>(),
+  {
+    as: "span",
+    position: "auto",
+  }
+)
+</script>
+
+<template>
+  <Popover :position="position" :as="as">
+    <template #button>
+      <div class="leading-none w-4 h-4">
+        <InformationCircleIcon />
+        <!--creates a larger clickable surface area 40 x 40-->
+        <div
+          class="p-5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        ></div>
+      </div>
+    </template>
+    <div
+      class="w-full max-w-xs bg-white rounded-md px-3 py-2 border border-gray-100 drop-shadow-md text-xs text-gray-900 leading-snug font-medium"
+    >
+      <slot></slot>
+    </div>
+  </Popover>
+</template>

package/types/components.d.ts

@@ -1,7 +1,11 @@
 import { TreesComponents } from "./lib-components"
 
-export default TreesComponents
-
+/**
+ * When using App.use(Trees) include a
+ * /// <reference types="@xy-planning-network/trees/types/components" /> or
+ * import GlobalComponents from "@xy-planning-network/trees/types/components"
+ * in the project.
+ */
 declare module "@vue/runtime-core" {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface GlobalComponents extends TreesComponents {}

package/types/composables/date.d.ts

@@ -0,0 +1,4 @@
+export interface DateRange {
+    minDate: number;
+    maxDate: number;
+}

package/types/composables/nav.d.ts

@@ -0,0 +1,13 @@
+import { Component, RenderFunction } from "vue";
+export interface Item {
+    icon?: Component | RenderFunction;
+    name: string;
+    openInTab?: boolean;
+    url: string;
+}
+export interface Pagination {
+    page: number;
+    perPage: number;
+    totalItems: number;
+    totalPages: number;
+}

package/types/composables/overlay.d.ts

@@ -0,0 +1,4 @@
+export interface Flash {
+    type?: string;
+    message: string;
+}

package/types/composables/table.d.ts

@@ -0,0 +1,32 @@
+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?: Component;
+    items?: Array<MenuItem>;
+    sort?: string;
+}
+export interface Dynamic {
+    currentUser: User;
+    columns: Array<Column>;
+    dateSearch?: boolean;
+    defaultSort?: string;
+    defaultSortDirection?: string;
+    refreshTrigger: number;
+    reloadTrigger?: number;
+    search?: boolean;
+    url: string;
+}
+export interface MenuItem {
+    label: string;
+    event: string;
+    show?(propsData: any, currentUser: User): boolean;
+}
+export interface Static {
+    currentUser: User;
+    columns: Array<Column>;
+    items: Record<string, unknown>[];
+}

package/types/composables/user.d.ts

@@ -0,0 +1,6 @@
+export interface User {
+    id: number;
+    email: string;
+    name?: string;
+}
+export default User;

package/types/global.d.ts

@@ -1,7 +1,10 @@
 import { Emitter } from "mitt"
 
-export {}
-
+/**
+ * When using window.VueBus.emit("Flash-show-generic-error", "support@trees.com") include
+ * /// <reference types="@xy-planning-network/trees/types/global" />
+ * in the project.
+ */
 declare global {
   interface Window {
     Flashes: Array<{ type?: string; message: string }>

package/types/helpers/Debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce(func: () => void, timeout?: number): () => void;

package/types/helpers/Throttle.d.ts

@@ -0,0 +1 @@
+export declare function throttle(func: () => void, timeout?: number): (...args: any[]) => void;

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;
 }, {

package/types/lib-components/index.d.ts

@@ -7,7 +7,11 @@ import { default as DownloadCell } from "./lists/DownloadCell.vue";
 import { default as Flash } from "./overlays/Flash.vue";
 import { default as Modal } from "./overlays/Modal.vue";
 import { default as SidebarLayout } from "./layout/SidebarLayout.vue";
+import { default as Popover } from "./overlays/Popover/Popover.vue";
+import { default as PopoverPosition } from "./overlays/Popover/Popover.vue";
+import { default as PopoverContent } from "./overlays/Popover/PopoverContent.vue";
 import { default as Slideover } from "./overlays/Slideover.vue";
+import { default as Tooltip } from "./overlays/Tooltip.vue";
 import { default as StackedLayout } from "./layout/StackedLayout.vue";
 import { default as Paginator } from "./navigation/Paginator.vue";
 import { default as Spinner } from "./overlays/Spinner.vue";
@@ -26,17 +30,10 @@ import { default as Radio } from "./forms/Radio.vue";
 import { default as Select } from "./forms/Select.vue";
 import { default as TextArea } from "./forms/TextArea.vue";
 import { default as YesOrNoRadio } from "./forms/YesOrNoRadio.vue";
-export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, Modal, SidebarLayout, Slideover, StackedLayout, Paginator, Spinner, StaticTable, Steps, Table, Tabs, Toggle, BaseInput, Checkbox, DateRangePicker, InputHelp, InputLabel, MultiCheckboxes, Radio, Select, TextArea, YesOrNoRadio, };
+export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
+Paginator, Spinner, StaticTable, Steps, Table, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, InputHelp, InputLabel, MultiCheckboxes, Radio, Select, TextArea, YesOrNoRadio, };
 /**
  * declare global component types for App.use(Trees)
- *
- * apply to project with the following
-import { TreesComponents } from "@xy-planning-network/trees"
-
-declare module "@vue/runtime-core" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface GlobalComponents extends TreesComponents {}
-}
  */
 export interface TreesComponents {
     ActionsDropdown: typeof ActionsDropdown;
@@ -49,6 +46,8 @@ export interface TreesComponents {
     Modal: typeof Modal;
     SidebarLayout: typeof SidebarLayout;
     Slideover: typeof Slideover;
+    Popover: typeof Popover;
+    PopoverContent: typeof PopoverContent;
     StackedLayout: typeof StackedLayout;
     Paginator: typeof Paginator;
     Spinner: typeof Spinner;
@@ -57,6 +56,7 @@ export interface TreesComponents {
     Table: typeof Table;
     Tabs: typeof Tabs;
     Toggle: typeof Toggle;
+    Tooltip: typeof Tooltip;
     BaseInput: typeof BaseInput;
     Checkbox: typeof Checkbox;
     DateRangePicker: typeof DateRangePicker;

package/types/lib-components/layout/DateFilter.vue.d.ts

@@ -1,7 +1,4 @@
-export interface DateRange {
-    minDate: number;
-    maxDate: number;
-}
+import { DateRange } from "../../composables/date";
 declare const _default: import("vue").DefineComponent<__VLS_DefinePropsToOptions<{
     dateRange: DateRange;
     sortDir: string;

package/types/lib-components/layout/SidebarLayout.vue.d.ts

@@ -1,4 +1,4 @@
-import * as NavTypes from "../../types/nav";
+import * as NavTypes from "../../composables/nav";
 declare const _default: import("vue").DefineComponent<{
     activeURL: {
         type: import("vue").PropType<string>;

package/types/lib-components/layout/StackedLayout.vue.d.ts

@@ -1,5 +1,5 @@
-import * as NavTypes from "../../types/nav";
-import User from "../../types/users";
+import * as NavTypes from "../../composables/nav";
+import User from "../../composables/user";
 declare const _default: import("vue").DefineComponent<{
     activeURL: {
         type: import("vue").PropType<string>;

package/types/lib-components/lists/StaticTable.vue.d.ts

@@ -1,4 +1,4 @@
-import * as TableTypes from "../../types/table";
+import * as TableTypes from "../../composables/table";
 declare const _default: import("vue").DefineComponent<__VLS_DefinePropsToOptions<{
     tableData: TableTypes.Static;
 }>, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/types/lib-components/lists/Table.vue.d.ts

@@ -1,4 +1,4 @@
-import * as TableTypes from "../../types/table";
+import * as TableTypes from "../../composables/table";
 declare const _default: import("vue").DefineComponent<{
     clickable: {
         type: import("vue").PropType<boolean>;

package/types/lib-components/navigation/ActionsDropdown.vue.d.ts

@@ -1,6 +1,6 @@
 import { MenuItem } from "@headlessui/vue";
-import * as TableTypes from "../../types/table";
-import User from "../../types/users";
+import * as TableTypes from "../../composables/table";
+import User from "../../composables/user";
 declare const _default: import("vue").DefineComponent<__VLS_DefinePropsToOptions<{
     currentUser: User;
     items: TableTypes.MenuItem[];

package/types/lib-components/navigation/Paginator.vue.d.ts

@@ -1,9 +1,4 @@
-export interface Pagination {
-    page: number;
-    perPage: number;
-    totalItems: number;
-    totalPages: number;
-}
+import { Pagination } from "../../composables/nav";
 declare const _default: import("vue").DefineComponent<__VLS_DefinePropsToOptions<{
     modelValue: Pagination;
 }>, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/types/lib-components/overlays/Flash.vue.d.ts

@@ -1,6 +1,2 @@
-export interface Flash {
-    type?: string;
-    message: string;
-}
 declare const _default: import("vue").DefineComponent<{}, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
 export default _default;

package/types/lib-components/overlays/Popover/Popover.vue.d.ts

@@ -0,0 +1,23 @@
+export declare type PopoverPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left" | "right" | "auto" | "none";
+declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    position: {
+        type: import("vue").PropType<PopoverPosition>;
+    } & {
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    as?: unknown;
+    position?: unknown;
+} & {
+    as: string;
+    position: PopoverPosition;
+} & {}>, {
+    as: string;
+    position: PopoverPosition;
+}>;
+export default _default;

package/types/lib-components/overlays/Popover/PopoverContent.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/lib-components/overlays/Tooltip.vue.d.ts

@@ -0,0 +1,23 @@
+import { PopoverPosition } from "./Popover/Popover.vue";
+declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    position: {
+        type: import("vue").PropType<PopoverPosition>;
+    } & {
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    as?: unknown;
+    position?: unknown;
+} & {
+    as: string;
+    position: PopoverPosition;
+} & {}>, {
+    as: string;
+    position: PopoverPosition;
+}>;
+export default _default;

package/types/index.d.ts

@@ -1,3 +0,0 @@
-export * as NavTypes from "./nav"
-export * as TableTypes from "./table"
-export * as UserTypes from "./users"

package/types/nav.d.ts

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

package/types/table.d.ts

@@ -1,36 +0,0 @@
-import { ComponentPublicInstance, DefineComponent } from "vue"
-import User from "./users"
-
-export interface Column {
-  display: string
-  class?: string
-  key?: string
-  presenter?(row: any, instance: ComponentPublicInstance): any
-  component?: DefineComponent<unknown, unknown, any>
-  items?: Array<MenuItem>
-  sort?: string
-}
-
-export interface Dynamic {
-  currentUser: User
-  columns: Array<Column>
-  dateSearch?: boolean
-  defaultSort?: string
-  defaultSortDirection?: string
-  refreshTrigger: number
-  reloadTrigger?: number
-  search?: boolean
-  url: string
-}
-
-export interface MenuItem {
-  label: string
-  event: string
-  show?(propsData: any, currentUser: User): boolean
-}
-
-export interface Static {
-  currentUser: User
-  columns: Array<Column>
-  items: Record<string, unknown>[]
-}

package/types/users.d.ts

@@ -1,10 +0,0 @@
-export interface User {
-  accountID: number
-  accountOwner: boolean
-  archived: boolean
-  id: number
-  email: string
-  name: string
-}
-
-export default User