@xy-planning-network/trees 0.4.5 → 0.4.8-rc-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.4.5",
+  "version": "0.4.8-rc-1",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -58,7 +58,7 @@
   "dependencies": {
     "@headlessui/vue": "^1.4.2",
     "@heroicons/vue": "^1.0.5",
-    "axios": "^0.21.4",
+    "axios": "^0.27.2",
     "flatpickr": "^4.6.9"
   },
   "peerDependencies": {

package/src/lib-components/forms/MultiCheckboxes.vue

@@ -62,54 +62,60 @@ const onChange = (checked: boolean, val: CheckboxValue) => {
       </FieldsetLegend>
       <InputHelp tag="p" :text="help" :id="`${uuid}-help`" />
     </div>
-    <div
-      class="grid gap-4"
-      :class="{
-        'sm:grid sm:gap-y-4 sm:gap-x-5 sm:space-y-0': columns !== undefined,
-        'sm:grid-cols-2': columns === 2,
-        'sm:grid-cols-3': columns === 3,
-        'sm:grid-cols-4': columns === 4,
-      }"
-    >
+    <div class="flex">
       <div
-        v-for="(option, index) in options"
-        :key="option.value"
-        class="flex items-start"
+        class="grid gap-4"
+        :class="{
+          'sm:grid sm:gap-y-4 sm:gap-x-5 sm:space-y-0': columns !== undefined,
+          'sm:grid-cols-2': columns === 2,
+          'sm:grid-cols-3': columns === 3,
+          'sm:grid-cols-4': columns === 4,
+        }"
       >
-        <div class="flex items-center h-5">
-          <input
-            :id="uuid"
-            :aria-labelledby="`${uuid}-${index}-label`"
-            :aria-describedby="
-              option?.help && option.help ? `${uuid}-${index}-help` : undefined
-            "
-            :checked="modelValue.includes(option.value)"
-            :disabled="option.disabled === true ? true : undefined"
-            class="focus:ring-blue-500 h-4 w-4 text-blue-500 border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-            type="checkbox"
-            v-bind="{
-              onChange: ($event) => { onChange(($event.target as HTMLInputElement).checked, option.value) },
+        <div
+          v-for="(option, index) in options"
+          :key="option.value"
+          class="flex items-start"
+        >
+          <div class="flex items-center h-5">
+            <input
+              :id="`${uuid}-${index}`"
+              :aria-labelledby="`${uuid}-${index}-label`"
+              :aria-describedby="
+                option?.help && option.help
+                  ? `${uuid}-${index}-help`
+                  : undefined
+              "
+              :checked="modelValue.includes(option.value)"
+              :disabled="option.disabled === true ? true : undefined"
+              class="focus:ring-blue-500 h-4 w-4 text-blue-500 border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+              type="checkbox"
+              v-bind="{
+              onChange: ($event) => { 
+                onChange(($event.target as HTMLInputElement).checked, option.value)
+              },
               ...$attrs,
             }"
-          />
-        </div>
-        <div class="ml-3">
-          <InputLabel
-            class="mt-auto"
-            :disabled="
-              ($attrs.hasOwnProperty('disabled') &&
-                $attrs.disabled !== false) ||
-              option.disabled === true
-            "
-            :id="`${uuid}-${index}-label`"
-            :for="uuid"
-            :label="option.label"
-          />
-          <InputHelp
-            class="-mt-1"
-            :id="`${uuid}-${index}-help`"
-            :text="option.help"
-          />
+            />
+          </div>
+          <div class="ml-3">
+            <InputLabel
+              class="mt-auto"
+              :disabled="
+                ($attrs.hasOwnProperty('disabled') &&
+                  $attrs.disabled !== false) ||
+                option.disabled === true
+              "
+              :id="`${uuid}-${index}-label`"
+              :for="`${uuid}-${index}`"
+              :label="option.label"
+            />
+            <InputHelp
+              class="-mt-1"
+              :id="`${uuid}-${index}-help`"
+              :text="option.help"
+            />
+          </div>
         </div>
       </div>
     </div>

package/src/lib-components/forms/Radio.vue

@@ -46,58 +46,62 @@ const hasLegend = computed(() => {
       </FieldsetLegend>
       <InputHelp tag="p" :text="help" :id="`${uuid}-help`" />
     </div>
-    <div
-      class="grid gap-4"
-      :class="{
-        'sm:grid sm:gap-y-4 sm:gap-x-5 sm:space-y-0': columns !== undefined,
-        'sm:grid-cols-2': columns === 2,
-        'sm:grid-cols-3': columns === 3,
-        'sm:grid-cols-4': columns === 4,
-      }"
-    >
+    <div class="">
       <div
-        v-for="(option, index) in options"
-        :key="option.value"
-        class="flex items-start"
+        class="grid gap-4"
+        :class="{
+          'sm:grid sm:gap-y-4 sm:gap-x-5 sm:space-y-0': columns !== undefined,
+          'sm:grid-cols-2': columns === 2,
+          'sm:grid-cols-3': columns === 3,
+          'sm:grid-cols-4': columns === 4,
+        }"
       >
-        <div class="flex items-center h-5">
-          <input
-            :aria-describedby="
-              option?.help && option.help ? `${uuid}-${index}-help` : undefined
-            "
-            :aria-labelledby="`${uuid}-${index}-label`"
-            :checked="modelValue === option.value"
-            class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue disabled:opacity-50 disabled:cursor-not-allowed"
-            :disabled="option.disabled === true ? true : undefined"
-            :id="`${uuid}-${index}`"
-            :name="uuid"
-            type="radio"
-            :value="option.value"
-            v-bind="{
-              onChange: () => {
-                emits('update:modelValue', option.value)
-              },
-              ...$attrs,
-            }"
-          />
-        </div>
-        <div class="ml-3">
-          <InputLabel
-            class="mt-auto"
-            :disabled="
-              ($attrs.hasOwnProperty('disabled') &&
-                $attrs.disabled !== false) ||
-              option.disabled === true
-            "
-            :id="`${uuid}-${index}-label`"
-            :for="uuid"
-            :label="option.label"
-          />
-          <InputHelp
-            class="-mt-1"
-            :id="`${uuid}-${index}-help`"
-            :text="option.help"
-          />
+        <div
+          v-for="(option, index) in options"
+          :key="option.value"
+          class="flex items-start"
+        >
+          <div class="flex items-center h-5">
+            <input
+              :aria-describedby="
+                option?.help && option.help
+                  ? `${uuid}-${index}-help`
+                  : undefined
+              "
+              :aria-labelledby="`${uuid}-${index}-label`"
+              :checked="modelValue === option.value"
+              class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue disabled:opacity-50 disabled:cursor-not-allowed"
+              :disabled="option.disabled === true ? true : undefined"
+              :id="`${uuid}-${index}`"
+              :name="uuid"
+              type="radio"
+              :value="option.value"
+              v-bind="{
+                onChange: () => {
+                  emits('update:modelValue', option.value)
+                },
+                ...$attrs,
+              }"
+            />
+          </div>
+          <div class="ml-3">
+            <InputLabel
+              class="mt-auto"
+              :disabled="
+                ($attrs.hasOwnProperty('disabled') &&
+                  $attrs.disabled !== false) ||
+                option.disabled === true
+              "
+              :id="`${uuid}-${index}-label`"
+              :for="`${uuid}-${index}`"
+              :label="option.label"
+            />
+            <InputHelp
+              class="-mt-1"
+              :id="`${uuid}-${index}-help`"
+              :text="option.help"
+            />
+          </div>
         </div>
       </div>
     </div>

package/types/api/base.d.ts

@@ -1,12 +1,14 @@
-import { AxiosPromise, AxiosRequestConfig } from "axios";
+import { AxiosRequestConfig } from "axios";
+export declare type RequestMethod = "GET" | "get" | "PUT" | "put" | "POST" | "post" | "DELETE" | "delete";
 export interface RequestOptions {
     skipLoader?: boolean;
+    withDelay?: number;
 }
 declare const BaseAPI: {
-    makeRequest(config: AxiosRequestConfig, opts: RequestOptions): AxiosPromise;
-    get(path: string, opts: RequestOptions, params?: Record<string, unknown> | undefined): AxiosPromise;
-    delete(path: string, opts: RequestOptions): AxiosPromise;
-    post(path: string, data: Record<string, unknown>, opts: RequestOptions): AxiosPromise;
-    put(path: string, data: Record<string, unknown>, opts: RequestOptions): AxiosPromise;
+    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>, opts: RequestOptions): Promise<T_3>;
+    put<T_4 = any>(path: string, data: Record<string, unknown>, opts: RequestOptions): Promise<T_4>;
 };
 export default BaseAPI;

package/types/composables/index.d.ts

@@ -0,0 +1,4 @@
+import { default as useBaseAPI, useBaseAPIGet, useBaseAPIPut, useBaseAPIPost, useBaseAPIDelete } from "./useBaseAPI";
+import type { UseBaseAPIOptions, UseBaseAPI } from "./useBaseAPI";
+export type { UseBaseAPIOptions, UseBaseAPI };
+export { useBaseAPI, useBaseAPIGet, useBaseAPIPut, useBaseAPIPost, useBaseAPIDelete, };

package/types/composables/useBaseAPI.d.ts

@@ -0,0 +1,105 @@
+import { AxiosError, AxiosRequestConfig } from "axios";
+import { Ref, ShallowRef } from "vue";
+import type { RequestMethod, RequestOptions } from "../api/base";
+/**
+ * UseBaseAPIOptions extends Trees/RequestOptions
+ * these options are used only in the instantiation
+ * of a new UseBaseAPI composable
+ */
+export interface UseBaseAPIOptions extends RequestOptions {
+    /**
+     * Whether to immediately fire the execute function during instantiation
+     */
+    immediate?: boolean;
+}
+/**
+ * UseBaseAPI is a composable the wraps up the
+ * usage of Trees/BaseAPI and returns reactive
+ * state variables along with reusaable execute and abort functions
+ */
+export interface UseBaseAPI<T> {
+    /**
+     * Axios response data
+     */
+    result: Ref<T | undefined>;
+    /**
+     * Any errors that may have occurred
+     */
+    error: ShallowRef<Error | AxiosError<T> | undefined>;
+    /**
+     * Indicates if the request has finished
+     */
+    isFinished: Ref<boolean>;
+    /**
+     * Indicates if the request is currently loading
+     */
+    isLoading: Ref<boolean>;
+    /**
+     * Indicates if the request was canceled
+     */
+    isAborted: Ref<boolean>;
+    /**
+     * Indicates if a first request has completed
+     */
+    hasFetched: Ref<boolean>;
+    /**
+     * Aborts the current request
+     * can be used multiple times
+     */
+    abort: () => void;
+    /**
+     * Manually call the axios request
+     * can be used multiple times
+     */
+    execute: (data?: Record<string, unknown>, opts?: RequestOptions, config?: AxiosRequestConfig) => Promise<T>;
+}
+/**
+ * useBaseAPI is a composable wrapper of BaseAPI
+ * @param path {string} the api path or full url for the
+ * @param method {RequestMethod} the initial request type
+ * @param initOpts {UseBaseAPIOptions}
+ * @param initConfig {AxiosRequestConfig}
+ * @returns {UseBaseAPI<T>}
+ */
+export default function useBaseAPI<T = any>(path: string, method?: RequestMethod, initOpts?: UseBaseAPIOptions, initConfig?: AxiosRequestConfig): {
+    result: Ref<T | undefined>;
+    error: ShallowRef<Error | AxiosError<T, any> | undefined>;
+    isFinished: Ref<boolean>;
+    isLoading: Ref<boolean>;
+    isAborted: Ref<boolean>;
+    hasFetched: Ref<boolean>;
+    abort: () => void;
+    execute: (data?: Record<string, unknown>, execOpts?: RequestOptions, execConfig?: AxiosRequestConfig) => Promise<T>;
+};
+/**
+ * useBaseAPIGet is a convenience function for useBaseAPI
+ * @param path {string} the api path or full url for the
+ * @param initOpts {UseBaseAPIOptions}
+ * @param initConfig {AxiosRequestConfig}
+ * @returns {UseBaseAPI<T>}
+ */
+export declare function useBaseAPIGet<T = any>(url: string, initOpts?: UseBaseAPIOptions, initConfig?: AxiosRequestConfig): UseBaseAPI<T>;
+/**
+ * useBaseAPIDelete is a convenience function for useBaseAPI
+ * @param path {string} the api path or full url for the
+ * @param initOpts {UseBaseAPIOptions}
+ * @param initConfig {AxiosRequestConfig}
+ * @returns {UseBaseAPI<T>}
+ */
+export declare function useBaseAPIDelete<T = any>(url: string, initOpts?: UseBaseAPIOptions, initConfig?: AxiosRequestConfig): UseBaseAPI<T>;
+/**
+ * useBaseAPIPost is a convenience function for useBaseAPI
+ * @param path {string} the api path or full url for the
+ * @param initOpts {UseBaseAPIOptions}
+ * @param initConfig {AxiosRequestConfig}
+ * @returns {UseBaseAPI<T>}
+ */
+export declare function useBaseAPIPost<T = any>(url: string, initOpts?: UseBaseAPIOptions, initConfig?: AxiosRequestConfig): UseBaseAPI<T>;
+/**
+ * useBaseAPIPut is a convenience function for useBaseAPI
+ * @param path {string} the api path or full url for the
+ * @param initOpts {UseBaseAPIOptions}
+ * @param initConfig {AxiosRequestConfig}
+ * @returns {UseBaseAPI<T>}
+ */
+export declare function useBaseAPIPut<T = any>(url: string, initOpts?: UseBaseAPIOptions, initConfig?: AxiosRequestConfig): UseBaseAPI<T>;

package/types/entry.d.ts

@@ -2,5 +2,6 @@ import { Plugin } from "vue";
 import BaseAPI from "./api/base";
 declare const install: Exclude<Plugin["install"], undefined>;
 export default install;
+export * from "./composables/index";
 export * from "./lib-components/index";
 export { BaseAPI };

package/types/helpers/Debounce.d.ts

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

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>;
+}