@xy-planning-network/trees 0.6.0 → 0.6.2-rc-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.6.0",
+  "version": "0.6.2-rc-1",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -28,7 +28,9 @@
     "lint": "eslint --ext .js,.ts,.vue src",
     "lint:fix": "eslint --fix --ext .js,.ts,.vue src dev && prettier -w -u src dev",
     "preview": "vite preview --config vite.docs.config.ts",
-    "typecheck": "vue-tsc -p src --noEmit"
+    "typecheck": "npm run typecheck:src && npm run typecheck:docs",
+    "typecheck:src": "vue-tsc -p src --noEmit",
+    "typecheck:docs": "vue-tsc -p dev --noEmit"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",

package/src/lib-components/indicators/XYSpinner.vue

@@ -15,7 +15,7 @@ const attrs = useAttrs()
         <p class="sr-only">
           <slot></slot>
         </p>
-        <div class="animate-spin-gear">
+        <div class="animate-spin-gear drop-shadow-md">
           <svg
             width="100%"
             height="100%"

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

@@ -40,7 +40,7 @@ const isActive = (url: string): boolean => {
       <Dialog
         as="div"
         static
-        class="fixed inset-0 flex z-40 md:hidden"
+        class="fixed inset-0 flex z-10 md:hidden"
         @close="sidebarOpen = false"
         :open="sidebarOpen"
       >

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { AxiosResponse } from "axios"
 import {
   ComponentPublicInstance,
   computed,
@@ -12,6 +11,7 @@ import Paginator from "../navigation/Paginator.vue"
 import BaseAPI from "../../api/base"
 import * as TableTypes from "@/composables/table"
 import { useAppFlasher } from "@/composables/useFlashes"
+import { TrailsResponsePaged } from "@/api/client"
 
 const props = withDefaults(
   defineProps<{
@@ -96,8 +96,12 @@ const loadAndRender = (): void => {
     q: query.value,
   }
 
-  BaseAPI.get(props.tableData.url, { skipLoader: !props.loader }, params).then(
-    (success: AxiosResponse) => {
+  BaseAPI.get<TrailsResponsePaged<unknown>>(
+    props.tableData.url,
+    { skipLoader: !props.loader },
+    params
+  ).then(
+    (success) => {
       pagination.value = {
         page: success.data.page,
         perPage: success.data.perPage,

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

@@ -30,7 +30,7 @@ const updateModelValue = (value: boolean) => {
     <Dialog
       as="div"
       static
-      class="fixed z-10 inset-0 overflow-y-auto"
+      class="fixed z-30 inset-0 overflow-y-auto"
       @close="updateModelValue(false)"
       :open="modelValue"
     >

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

@@ -5,6 +5,7 @@ import {
   loadWindowFlashes,
 } from "@/composables/useFlashes"
 import { onMounted } from "vue"
+import { Portal } from "@headlessui/vue"
 
 const { flasher, flashes } = useAppFlashes()
 
@@ -28,56 +29,62 @@ onMounted(() => {
 })
 </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"
-  >
-    <transition-group
-      tag="div"
-      class="max-w-sm space-y-2 w-full"
-      enter-active-class="ease-out duration-300"
-      enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-      enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-      leave-active-class="ease-in duration-100"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
+  <Portal>
+    <div
+      class="fixed inset-0 flex flex-col items-end justify-end px-4 py-6 pointer-events-none sm:p-6 z-[45]"
     >
-      <div
-        v-for="[id, flash] in flashes"
-        :key="flash.message"
-        class="bg-white shadow-lg rounded-lg pointer-events-auto border-t-4 transform"
-        :class="[getFlashClass(flash.type)]"
+      <transition-group
+        tag="div"
+        class="max-w-sm space-y-2 w-full"
+        enter-active-class="ease-out duration-300"
+        enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+        leave-active-class="ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
       >
         <div
-          class="rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden"
+          v-for="[id, flash] in flashes"
+          :key="flash.message"
+          class="bg-white shadow-lg rounded-lg pointer-events-auto border-t-4 transform z-10"
+          :class="[getFlashClass(flash.type)]"
         >
-          <div class="p-4">
-            <div class="flex items-center">
-              <div class="w-0 flex-1 flex justify-between">
-                <p
-                  class="w-0 flex-1 text-sm leading-5 font-medium text-gray-900"
-                  v-html="flash.message"
-                ></p>
-              </div>
-              <div class="ml-4 shrink-0 flex">
-                <button
-                  @click="flasher.remove(id)"
-                  class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150"
-                >
-                  <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                    <path
-                      fill-rule="evenodd"
-                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </button>
+          <div
+            class="rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden"
+          >
+            <div class="p-4">
+              <div class="flex items-center">
+                <div class="w-0 flex-1 flex justify-between">
+                  <p
+                    class="w-0 flex-1 text-sm leading-5 font-medium text-gray-900"
+                    v-html="flash.message"
+                  ></p>
+                </div>
+                <div class="ml-4 shrink-0 flex">
+                  <button
+                    @click="flasher.remove(id)"
+                    class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150"
+                  >
+                    <svg
+                      class="h-5 w-5"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </transition-group>
-  </div>
+      </transition-group>
+    </div>
+  </Portal>
 </template>
 
 <style>

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

@@ -42,7 +42,7 @@ const updateModelValue = (value: boolean) => {
     <Dialog
       as="div"
       static
-      class="fixed z-10 inset-0 overflow-y-auto"
+      class="fixed z-30 inset-0 overflow-y-auto"
       @close="updateModelValue(false)"
       :open="modelValue"
     >

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

@@ -33,7 +33,7 @@ const close = () => {
     <Dialog
       as="div"
       static
-      class="fixed inset-0 z-40 overflow-hidden bg-black bg-opacity-50"
+      class="fixed inset-0 z-20 overflow-hidden bg-black bg-opacity-50"
       @close="close()"
       :open="modelValue"
     >

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Portal } from "@headlessui/vue"
 import XYSpinner from "../indicators/XYSpinner.vue"
 import { useAppSpinnerDisplay } from "@/composables/useSpinner"
 
@@ -22,30 +23,32 @@ const fadeOut = (): void => {
 }
 </script>
 <template>
-  <div
-    class="fixed top-0 left-0 flex flex-col items-center justify-center w-full h-full cursor-not-allowed z-50 bg-gray-50 bg-opacity-50"
-    v-if="loading"
-  >
-    <XYSpinner class="w-32 h-32" />
-    <div class="mt-2" 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="container font-medium text-lg leading-snug text-center transition-opacity"
-          v-show="showMsg"
+  <Portal>
+    <div
+      class="fixed top-0 left-0 flex flex-col items-center justify-center w-full h-full cursor-not-allowed z-40 bg-gray-50 bg-opacity-50"
+      v-if="loading"
+    >
+      <XYSpinner class="w-32 h-32" />
+      <div class="mt-2" 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"
         >
-          {{ msg }}
-        </div>
-      </transition>
+          <div
+            class="container font-medium text-lg leading-snug text-center transition-opacity"
+            v-show="showMsg"
+          >
+            {{ msg }}
+          </div>
+        </transition>
+      </div>
     </div>
-  </div>
+  </Portal>
 </template>

package/types/api/base.d.ts

@@ -1,10 +1,22 @@
+import { Pagination } from "../composables/nav";
 import { AxiosRequestConfig } from "axios";
-export declare type RequestMethod = "GET" | "get" | "PUT" | "put" | "POST" | "post" | "DELETE" | "delete";
-export interface RequestOptions {
+export interface Paginated<T> extends Pagination {
+    items: T[];
+}
+export interface TreesResponse<T = any> {
+    /**
+     * response data as T
+     */
+    data: T;
     /**
-     * returns the nested data key inside the AxiosResponse data when true
+     * http status code
      */
-    dataIntercept?: boolean;
+    status: number;
+}
+export interface TreesPromise<T = any> extends Promise<TreesResponse<T>> {
+}
+export declare type RequestMethod = "GET" | "get" | "PUT" | "put" | "POST" | "post" | "DELETE" | "delete";
+export interface RequestOptions {
     /**
      * disables the full screen loading interface during the request when true
      */
@@ -15,10 +27,10 @@ export interface RequestOptions {
     withDelay?: number;
 }
 declare const BaseAPI: {
-    makeRequest<T = any>(config: AxiosRequestConfig, opts: RequestOptions): Promise<T>;
-    get<T_1 = any>(path: string, opts: RequestOptions, params?: Record<string, unknown> | undefined): Promise<T_1>;
-    delete<T_2 = any>(path: string, opts: RequestOptions): Promise<T_2>;
-    post<T_3 = any>(path: string, data: Record<string, unknown> | FormData, opts: RequestOptions): Promise<T_3>;
-    put<T_4 = any>(path: string, data: Record<string, unknown> | FormData, opts: RequestOptions): Promise<T_4>;
+    makeRequest<T = any>(config: AxiosRequestConfig, opts: RequestOptions): TreesPromise<T>;
+    get<T_1 = any>(path: string, opts: RequestOptions, params?: Record<string, unknown> | undefined): TreesPromise<T_1>;
+    delete<T_2 = any>(path: string, opts: RequestOptions): TreesPromise<T_2>;
+    post<T_3 = any>(path: string, data: Record<string, unknown> | FormData, opts: RequestOptions): TreesPromise<T_3>;
+    put<T_4 = any>(path: string, data: Record<string, unknown> | FormData, opts: RequestOptions): TreesPromise<T_4>;
 };
 export default BaseAPI;

package/types/api/url.d.ts

@@ -0,0 +1 @@
+export declare function getBaseUrl(): string;

package/types/composables/useBaseAPI.d.ts

@@ -1,5 +1,6 @@
 import { AxiosError } from "axios";
 import { Ref, ShallowRef } from "vue";
+import { TreesPromise } from "../api/base";
 import type { RequestMethod, RequestOptions } from "../api/base";
 /**
  * UseBaseAPIOptions extends Trees/RequestOptions
@@ -19,13 +20,17 @@ export interface UseBaseAPIOptions extends RequestOptions {
  */
 export interface UseBaseAPI<T> {
     /**
-     * Axios response data
+     * Promise response data
      */
     result: Ref<T | undefined>;
     /**
-     * Any errors that may have occurred
+     * Promise response http status code
      */
-    error: ShallowRef<Error | AxiosError<T> | undefined>;
+    status: Ref<number | undefined>;
+    /**
+     * Any errors or rejections that may have occurred
+     */
+    error: ShallowRef<AxiosError | Error | undefined>;
     /**
      * Indicates if the request has finished
      */
@@ -51,7 +56,7 @@ export interface UseBaseAPI<T> {
      * Manually call the axios request
      * can be used multiple times
      */
-    execute: (data?: Record<string, unknown> | FormData, opts?: RequestOptions) => Promise<T>;
+    execute: (data?: Record<string, unknown> | FormData, opts?: RequestOptions) => TreesPromise<T>;
 }
 /**
  * useBaseAPI is a composable wrapper of BaseAPI
@@ -63,13 +68,14 @@ export interface UseBaseAPI<T> {
  */
 export default function useBaseAPI<T = any>(path: string, method?: RequestMethod, initOpts?: UseBaseAPIOptions): {
     result: Ref<T | undefined>;
-    error: ShallowRef<Error | AxiosError<T, any> | undefined>;
+    status: Ref<number | undefined>;
+    error: ShallowRef<AxiosError<unknown, any> | Error | undefined>;
     isFinished: Ref<boolean>;
     isLoading: Ref<boolean>;
     isAborted: Ref<boolean>;
     hasFetched: Ref<boolean>;
     abort: () => void;
-    execute: (data?: Record<string, unknown> | FormData, opts?: RequestOptions) => Promise<T>;
+    execute: (data?: Record<string, unknown> | FormData, opts?: RequestOptions) => TreesPromise<T>;
 };
 /**
  * useBaseAPIGet is a convenience function for useBaseAPI

package/types/composables/usePopper.d.ts

@@ -0,0 +1,19 @@
+import { VNode } from "vue";
+import { Options, Placement } from "@popperjs/core";
+export declare type PopperPosition = Placement;
+export declare const offsetModifier: (skidding: number, distance: number) => {
+    options: {
+        offset: () => number[];
+    };
+    name: "offset";
+    enabled: boolean;
+    phase: import("@popperjs/core").ModifierPhases;
+    requires?: string[] | undefined;
+    requiresIfExists?: string[] | undefined;
+    fn: (arg0: import("@popperjs/core").ModifierArguments<import("@popperjs/core/lib/modifiers/offset").Options>) => void | import("@popperjs/core").State;
+    effect?: ((arg0: import("@popperjs/core").ModifierArguments<import("@popperjs/core/lib/modifiers/offset").Options>) => void | (() => void)) | undefined;
+    data?: import("@popperjs/core").Obj | undefined;
+};
+export declare function usePopper(opts: Partial<Options>): import("vue").Ref<VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | HTMLElement | undefined>[];

package/types/entry.d.ts

@@ -1,9 +1,10 @@
 import { Plugin } from "vue";
 import BaseAPI from "./api/base";
-import type { RequestOptions } from "./api/base";
+import type { Paginated, RequestOptions, TreesPromise, TreesResponse } from "./api/base";
+import type { Pagination } from "./composables/nav";
 declare const install: Exclude<Plugin["install"], undefined>;
 export default install;
 export * from "./composables/index";
 export * from "./lib-components/index";
 export { BaseAPI };
-export type { RequestOptions };
+export type { Paginated, Pagination, RequestOptions, TreesPromise, TreesResponse, };

package/types/types/lists.d.ts

@@ -0,0 +1,12 @@
+export interface Pagination {
+    page: number;
+    perPage: number;
+    totalItems: number;
+    totalPages: number;
+}
+export interface PaginationItems<T = any> {
+    items: T[];
+}
+export interface PaginationData<T = any> {
+    data: Pagination & PaginationItems<T>;
+}