@xy-planning-network/trees 0.4.8 → 0.4.9-rc-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.4.8",
+  "version": "0.4.9-rc-3",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",

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

@@ -1,14 +1,23 @@
 <script setup lang="ts">
 import { hasSlotContent } from "@/helpers/Slots"
+withDefaults(
+  defineProps<{
+    tag?: string
+  }>(),
+  {
+    tag: "legend",
+  }
+)
 </script>
 <template>
-  <legend
+  <component
+    :is="tag"
     v-if="hasSlotContent($slots.default)"
     v-bind="{
       ...$attrs,
-      class: 'text-base font-medium leading-tight text-gray-900',
+      class: 'text-sm font-semibold leading-snug text-gray-900',
     }"
   >
     <slot />
-  </legend>
+  </component>
 </template>

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

@@ -46,7 +46,7 @@ const hasLegend = computed(() => {
       </FieldsetLegend>
       <InputHelp tag="p" :text="help" :id="`${uuid}-help`" />
     </div>
-    <div class="">
+    <div class="flex">
       <div
         class="grid gap-4"
         :class="{

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

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import Uniques from "@/helpers/Uniques"
+import {
+  RadioGroup,
+  RadioGroupDescription,
+  RadioGroupLabel,
+  RadioGroupOption,
+} from "@headlessui/vue"
+import { CheckCircleIcon } from "@heroicons/vue/solid"
+import { computed, ref, useAttrs } from "vue"
+import InputLabel from "./InputLabel.vue"
+import InputHelp from "./InputHelp.vue"
+import FieldsetLegend from "./FieldsetLegend.vue"
+
+/*
+ * NOTE (spk) headless UI introduced a "name" prop that includes a hidden field
+ * to use the modelValue inside of forms.  It does not however resolve the issue of
+ * supporting HTML5 form validation, so we'll add our own hidden radio buttons to support both.
+ *
+ * The headless technique does include supporting complex modelValues such as objects, which we may
+ * need in the future.  We can revist required validation at that time using a singular hidden checkbox.
+ */
+
+type ModelValue = string | number
+
+type RadioCard = {
+  disabled?: boolean
+  help?: string
+  label: string
+  sublabel?: string
+  value: ModelValue
+}
+
+const props = withDefaults(
+  defineProps<{
+    columns?: 2 | 3
+    help?: string
+    legend?: string
+    modelValue?: ModelValue
+    options: RadioCard[]
+  }>(),
+  {
+    columns: undefined,
+    help: "",
+    legend: "",
+    modelValue: undefined,
+  }
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", modelValue: ModelValue): void
+}>()
+
+const attrs = useAttrs()
+const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+
+// tracking internal state separate from modelValue
+// allows v-model to be undefined by the consumer but still supports
+// the display requirements of the component.
+// this is usful when the component is used inside a form element and
+// tracking v-model isn't required.
+const internalState = ref()
+const invalid = ref<boolean>()
+const checked = computed(() => {
+  if (props.modelValue === undefined) {
+    return internalState.value
+  }
+
+  return props.modelValue
+})
+
+const onChange = (val: ModelValue) => {
+  internalState.value = val
+  invalid.value = false
+  emit("update:modelValue", val)
+}
+
+const nameAttr = computed(() => {
+  return typeof attrs.name === "string" && attrs.name !== "" ? attrs.name : uuid
+})
+</script>
+
+<template>
+  <RadioGroup
+    :modelValue="checked"
+    @update:model-value="onChange"
+    :disabled="typeof attrs.disabled === 'boolean' ? attrs.disabled : false"
+    :aria-invalid="invalid === true ? 'true' : null"
+    :aria-errormessage="invalid === true ? `error-${uuid}` : null"
+  >
+    <RadioGroupLabel v-if="legend" class="block">
+      <FieldsetLegend tag="div">{{ legend }}</FieldsetLegend>
+    </RadioGroupLabel>
+    <RadioGroupDescription v-if="help">
+      <InputHelp :text="help" />
+    </RadioGroupDescription>
+    <div v-if="invalid === true" :id="`error-${uuid}`" class="sr-only">
+      Please select one of these options.
+    </div>
+
+    <div
+      class="mt-4 grid grid-cols-1 gap-y-5 gap-x-4 relative"
+      :class="{
+        'sm:grid-cols-2': columns === 2,
+        'sm:grid-cols-3': columns === 3,
+      }"
+    >
+      <RadioGroupOption
+        as="template"
+        v-for="option in options"
+        :disabled="option?.disabled ? option.disabled : false"
+        :key="option.value"
+        :value="option.value"
+        v-slot="{ active, checked, disabled }"
+      >
+        <div
+          :class="[
+            checked ? 'border-transparent' : 'border-gray-300',
+            active ? 'border-blue-500 ring-2 ring-blue-500' : '',
+            'relative bg-white border rounded-lg shadow-sm p-4 flex cursor-pointer focus:outline-none',
+            disabled ? 'opacity-75' : '',
+          ]"
+        >
+          <div class="flex-1 flex pr-1">
+            <div class="flex flex-col">
+              <RadioGroupLabel as="div">
+                <InputLabel
+                  tag="div"
+                  class="mt-auto mb-auto"
+                  :label="option.label"
+                />
+              </RadioGroupLabel>
+              <RadioGroupDescription v-if="option.help" as="div">
+                <InputHelp tag="div" class="mt-auto" :text="option.help" />
+              </RadioGroupDescription>
+              <div
+                v-if="option.sublabel || $slots.sublabel"
+                class="mt-auto mb-0"
+              >
+                <RadioGroupDescription
+                  as="div"
+                  class="font-semibold leading-snug mt-4 text-gray-900 text-sm"
+                >
+                  {{ option.sublabel }}
+                  <slot
+                    name="sublabel"
+                    :active="active"
+                    :checked="checked"
+                    :disabled="disabled"
+                    :option="option"
+                  />
+                </RadioGroupDescription>
+              </div>
+            </div>
+          </div>
+          <CheckCircleIcon
+            :class="[!checked ? 'invisible' : '', 'h-5 w-5 text-blue-600']"
+            aria-hidden="true"
+          />
+          <div
+            :class="[
+              active ? 'border' : 'border-2',
+              checked ? 'border-blue-500' : 'border-transparent',
+              'absolute -inset-px rounded-lg pointer-events-none',
+            ]"
+            aria-hidden="true"
+          />
+          <input
+            class="sr-only top-1 left-1"
+            aria-hidden="true"
+            :checked="checked"
+            :name="nameAttr"
+            :required="attrs.required !== undefined && attrs.required !== false"
+            tabindex="-1"
+            type="radio"
+            :value="option.value"
+            @invalid="invalid = true"
+          />
+        </div>
+      </RadioGroupOption>
+    </div>
+  </RadioGroup>
+</template>

package/types/api/base.d.ts

@@ -1,6 +1,6 @@
 import { AxiosRequestConfig } from "axios";
 export declare type RequestMethod = "GET" | "get" | "PUT" | "put" | "POST" | "post" | "DELETE" | "delete";
-export interface RequestOptions extends AxiosRequestConfig {
+export interface RequestOptions {
     /**
      * returns the nested data key inside the AxiosResponse data when true
      */
@@ -15,10 +15,10 @@ export interface RequestOptions extends AxiosRequestConfig {
     withDelay?: number;
 }
 declare const BaseAPI: {
-    makeRequest<T = any>(opts: RequestOptions): Promise<T>;
+    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>;
+    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>;
 };
 export default BaseAPI;

package/types/composables/useBaseAPI.d.ts

@@ -51,7 +51,7 @@ export interface UseBaseAPI<T> {
      * Manually call the axios request
      * can be used multiple times
      */
-    execute: (data?: Record<string, unknown>, opts?: RequestOptions) => Promise<T>;
+    execute: (data?: Record<string, unknown> | FormData, opts?: RequestOptions) => Promise<T>;
 }
 /**
  * useBaseAPI is a composable wrapper of BaseAPI
@@ -69,7 +69,7 @@ export default function useBaseAPI<T = any>(path: string, method?: RequestMethod
     isAborted: Ref<boolean>;
     hasFetched: Ref<boolean>;
     abort: () => void;
-    execute: (data?: Record<string, unknown>, opts?: RequestOptions) => Promise<T>;
+    execute: (data?: Record<string, unknown> | FormData, opts?: RequestOptions) => Promise<T>;
 };
 /**
  * useBaseAPIGet is a convenience function for useBaseAPI

package/types/composables/useFlashes.d.ts

@@ -0,0 +1,100 @@
+import { Ref } from "vue";
+/**
+ * FlashMessage represents the shape of an on screen notification
+ * to a user.
+ */
+export interface FlashMessage {
+    /**
+     * The primary body text of the flash.  It supports HTML.
+     */
+    message: string;
+    /**
+     * Allow the flash to stay on the screen until the user removes it.
+     */
+    persistent?: boolean;
+    /**
+     * Determines the style of the flash.
+     */
+    type: FlashType;
+}
+/**
+ * FlashType is used to set the style of the flash that is displayed.
+ */
+export declare type FlashType = "warning" | "error" | "info" | "success";
+/**
+ * The FlasherAPI offers a simple set of methods for adding and removing flash messages.
+ * The implementor of the FlasherAPI is responsible for determining where flashes are stored.
+ */
+export interface FlasherAPI {
+    add(flash: FlashMessage): string;
+    remove(id: string): void;
+    error(msg: string, persistent?: boolean): string;
+    info(msg: string, persistent?: boolean): string;
+    success(msg: string, persistent?: boolean): string;
+    warning(msg: string, persistent?: boolean): string;
+    genericError(email?: string, persistent?: boolean): string;
+    setConfig(config: FlasherConfig): void;
+}
+/**
+ * A storage type for flash management.
+ */
+declare type FlashStore = Map<string, FlashMessage>;
+/**
+ *
+ */
+interface FlasherConfig {
+    removeDelay?: number;
+    email?: string;
+}
+/**
+ * newFlasher implements the FlasherAPI interface on the FlashStore it recieves
+ * the flash remove delay and a default email address for generic flashes is configurable
+ */
+export declare const newFlasher: (flashStore: FlashStore, flasherConfig?: FlasherConfig | undefined) => {
+    add(flash: FlashMessage): string;
+    remove(id: string): void;
+    flash(flash: FlashMessage): string;
+    error(message: string, persistent?: boolean): string;
+    info(message: string, persistent?: boolean): string;
+    success(message: string, persistent?: boolean): string;
+    warning(message: string, persistent?: boolean): string;
+    genericError(email?: string, persistent?: boolean): string;
+    setConfig: (newConfig: FlasherConfig) => void;
+};
+declare const flasher: {
+    add(flash: FlashMessage): string;
+    remove(id: string): void;
+    flash(flash: FlashMessage): string;
+    error(message: string, persistent?: boolean): string;
+    info(message: string, persistent?: boolean): string;
+    success(message: string, persistent?: boolean): string;
+    warning(message: string, persistent?: boolean): string;
+    genericError(email?: string, persistent?: boolean): string;
+    setConfig: (newConfig: FlasherConfig) => void;
+};
+export default flasher;
+/**
+ * useFlashes exposes the module level global flashes and flasher for shared access to
+ * the a flash queue when a flashStore isn't provided
+ * @returns UseFlashes
+ */
+export declare function useFlashes(flashStore?: Ref<FlashStore>): {
+    flasher: {
+        add(flash: FlashMessage): string;
+        remove(id: string): void;
+        flash(flash: FlashMessage): string;
+        error(message: string, persistent?: boolean): string;
+        info(message: string, persistent?: boolean): string;
+        success(message: string, persistent?: boolean): string;
+        warning(message: string, persistent?: boolean): string;
+        genericError(email?: string, persistent?: boolean): string;
+        setConfig: (newConfig: FlasherConfig) => void;
+    };
+    flashes: Ref<Map<string, FlashMessage>>;
+};
+/**
+ * A helper method to load any flashes on the global Window.Flashes into the flashes ref.
+ * The flasher argument ultimately determines what flashes ref they should be added to.
+ * @param flasher FlashAPI
+ */
+export declare const loadWindowFlashes: (flasher: FlasherAPI) => void;

package/types/lib-components/forms/FieldsetLegend.vue.d.ts

@@ -1,2 +1,14 @@
-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<{} & {} & {}>, {}>;
+declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    tag?: unknown;
+} & {
+    tag: string;
+} & {}>, {
+    tag: string;
+}>;
 export default _default;

package/types/lib-components/forms/RadioCards.vue.d.ts

@@ -0,0 +1,57 @@
+declare type ModelValue = string | number;
+declare type RadioCard = {
+    disabled?: boolean;
+    help?: string;
+    label: string;
+    sublabel?: string;
+    value: ModelValue;
+};
+declare const _default: import("vue").DefineComponent<{
+    columns: {
+        type: import("vue").PropType<2 | 3>;
+    } & {
+        default: undefined;
+    };
+    help: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    legend: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<ModelValue>;
+    } & {
+        default: undefined;
+    };
+    options: {
+        type: import("vue").PropType<RadioCard[]>;
+        required: true;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: ModelValue) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    columns?: unknown;
+    help?: unknown;
+    legend?: unknown;
+    modelValue?: unknown;
+    options?: unknown;
+} & {
+    help: string;
+    options: RadioCard[];
+    legend: string;
+} & {
+    modelValue?: ModelValue | undefined;
+    columns?: 2 | 3 | undefined;
+}> & {
+    "onUpdate:modelValue"?: ((modelValue: ModelValue) => any) | undefined;
+}, {
+    modelValue: ModelValue;
+    help: string;
+    legend: string;
+    columns: 2 | 3;
+}>;
+export default _default;

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

@@ -28,11 +28,12 @@ import { default as InputLabel } from "./forms/InputLabel.vue";
 import { default as FieldsetLegend } from "./forms/FieldsetLegend.vue";
 import { default as MultiCheckboxes } from "./forms/MultiCheckboxes.vue";
 import { default as Radio } from "./forms/Radio.vue";
+import { default as RadioCards } from "./forms/RadioCards.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, Popover, PopoverContent, PopoverPosition, // Type export
-Paginator, Spinner, StaticTable, Steps, Table, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, Select, TextArea, YesOrNoRadio, };
+Paginator, Spinner, StaticTable, Steps, Table, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, RadioCards, Select, TextArea, YesOrNoRadio, };
 /**
  * declare global component types for App.use(Trees)
  */
@@ -66,6 +67,7 @@ export interface TreesComponents {
     FieldsetLegend: typeof FieldsetLegend;
     MultiCheckboxes: typeof MultiCheckboxes;
     Radio: typeof Radio;
+    RadioCards: typeof RadioCards;
     Select: typeof Select;
     TextArea: typeof TextArea;
     YesOrNoRadio: typeof YesOrNoRadio;

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