@xy-planning-network/trees 0.7.5-rc2 → 0.7.5-rc3

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

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { computed, ref } from "vue"
+
+import {
+  CheckCircleIcon,
+  InformationCircleIcon,
+  ExclamationIcon,
+  XCircleIcon,
+} from "@heroicons/vue/solid"
+
+import { XIcon } from "@heroicons/vue/outline"
+
+const props = withDefaults(
+  defineProps<{
+    btnLink?: string
+    btnText?: string
+    content: string | string[]
+    dismissable?: boolean
+    secondaryBtnLink?: string
+    secondaryBtnText?: string
+    title?: string
+    kind: "alert" | "warn" | "info" | "success"
+  }>(),
+  {
+    btnLink: "",
+    btnText: "",
+    dismissable: false,
+    secondaryBtnLink: "",
+    secondaryBtnText: "",
+    title: "",
+  }
+)
+
+const emit = defineEmits<{
+  close: [closed: true]
+  click: [e: Event]
+  "click:secondary": [e: Event]
+}>()
+
+const visible = ref(true)
+const close = () => {
+  visible.value = false
+  emit("close", true)
+}
+
+const display = computed(() => {
+  const display = {
+    bgColor: "",
+    btnAction: "",
+    btnClose: "",
+    contentColor: "",
+    iconColor: "",
+  }
+
+  switch (props.kind) {
+    case "alert":
+      display.bgColor = "bg-red-50"
+      display.btnAction =
+        "bg-red-50 text-red-900 hover:bg-red-100 focus:ring-red-600 focus:ring-offset-red-50"
+      display.btnClose =
+        "bg-red-50 text-red-600 hover:bg-red-100 focus:ring-red-600 focus:ring-offset-red-50"
+      display.contentColor = "text-red-800"
+      display.iconColor = "text-red-400"
+      break
+    case "info":
+      display.bgColor = "bg-blue-50"
+      display.btnAction =
+        "bg-blue-50 text-blue-900 hover:bg-blue-100 focus:ring-blue-600 focus:ring-offset-blue-50"
+      display.btnClose =
+        "bg-blue-50 text-blue-600 hover:bg-blue-100 focus:ring-blue-600 focus:ring-offset-blue-50"
+      display.contentColor = "text-blue-800"
+      display.iconColor = "text-blue-400"
+      break
+    case "success":
+      display.bgColor = "bg-emerald-50"
+      display.btnAction =
+        "bg-emerald-50 text-emerald-900 hover:bg-emerald-100 focus:ring-emerald-600 focus:ring-offset-emerald-50"
+      display.btnClose =
+        "bg-emerald-50 text-emerald-600 hover:bg-emerald-100 focus:ring-emerald-600 focus:ring-offset-emerald-50"
+      display.contentColor = "text-emerald-800"
+      display.iconColor = "text-emerald-400"
+      break
+    case "warn":
+      display.bgColor = "bg-amber-50"
+      display.btnAction =
+        "bg-amber-50 text-amber-900 hover:bg-amber-100 focus:ring-amber-600 focus:ring-offset-amber-50"
+      display.btnClose =
+        "bg-amber-50 text-amber-600 hover:bg-amber-100 focus:ring-amber-600 focus:ring-offset-amber-50"
+      display.contentColor = "text-amber-800"
+      display.iconColor = "text-amber-400"
+      break
+  }
+
+  return display
+})
+
+const icon = computed(() => {
+  let icon = null
+  switch (props.kind) {
+    case "alert":
+      icon = XCircleIcon
+      break
+    case "info":
+      icon = InformationCircleIcon
+      break
+    case "success":
+      icon = CheckCircleIcon
+      break
+    case "warn":
+      icon = ExclamationIcon
+      break
+  }
+
+  return icon
+})
+</script>
+
+<template>
+  <div v-if="visible" class="rounded-lg p-4" :class="display.bgColor">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <component
+          :is="icon"
+          class="h-5 w-5"
+          :class="display.iconColor"
+          aria-hidden="true"
+        />
+      </div>
+      <div class="ml-2.5">
+        <h3
+          v-if="title"
+          class="text-sm leading-snug font-semibold mb-1.5"
+          :class="display.contentColor"
+        >
+          {{ title }}
+        </h3>
+
+        <div class="text-sm" :class="display.contentColor">
+          <ul
+            v-if="Array.isArray(content)"
+            role="list"
+            class="list-disc space-y-1 pl-5"
+          >
+            <li v-for="(item, index) in content" :key="index">{{ item }}</li>
+          </ul>
+          <p v-else>{{ content }}</p>
+        </div>
+
+        <div v-if="btnText || secondaryBtnText" class="mt-4">
+          <div
+            class="flex flex-col gap-y-1.5 -mx-2 sm:flex-row sm:gap-x-3 sm:items-center"
+          >
+            <div v-if="btnText">
+              <a
+                class="inline-flex rounded-md px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
+                :class="display.btnAction"
+                :href="btnLink"
+                :role="btnLink ? 'link' : 'button'"
+                @click="$emit('click', $event)"
+              >
+                {{ btnText }}
+              </a>
+            </div>
+            <div v-if="secondaryBtnText">
+              <a
+                class="inline-flex rounded-md px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
+                :class="display.btnAction"
+                :href="secondaryBtnLink"
+                :role="secondaryBtnLink ? 'link' : 'button'"
+                @click="$emit('click:secondary', $event)"
+              >
+                {{ secondaryBtnText }}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="dismissable" class="ml-auto pl-3">
+        <div class="-mx-1.5 -my-1.5">
+          <button
+            class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2"
+            :class="display.btnClose"
+            type="button"
+            @click="close"
+          >
+            <span class="sr-only">close</span>
+            <XIcon class="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/types/composables/forms.d.ts

@@ -1,7 +1,5 @@
-import { Ref } from "vue";
 export interface Input {
     modelValue?: any;
-    error?: string;
     label?: string;
     help?: string;
     placeholder?: string;
@@ -45,24 +43,24 @@ export interface ColumnedInput {
     columns?: 2 | 3;
 }
 export declare const defaultInputProps: {
-    error: string;
     help: string;
     label: string;
     modelValue: undefined;
     placeholder: string;
 };
 export type TextInputType = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
-interface UseInputFieldConfig<T extends Input> {
-    props: T;
-    targetInput: Ref<HTMLInputElement | null>;
-}
 /**
  * useInputField provides a number of computed values, refs, and methods to support
  * wiring up reactive inputs.
  *
  * @param config UseInputFieldConfig
  */
-export declare const useInputField: <T extends Input>(config: UseInputFieldConfig<T>) => {
+export declare const useInputField: <T extends Input>(props: T) => {
+    aria: import("vue").ComputedRef<{
+        labelledby: string | undefined;
+        describedby: string | undefined;
+        errormessage: string | undefined;
+    }>;
     attrs: {
         [x: string]: unknown;
     };
@@ -70,8 +68,8 @@ export declare const useInputField: <T extends Input>(config: UseInputFieldConfi
     isDisabled: import("vue").ComputedRef<boolean>;
     isRequired: import("vue").ComputedRef<boolean>;
     nameAttr: import("vue").ComputedRef<string>;
-    modelState: Ref<T["modelValue"]>;
-    errorState: Ref<T["error"]>;
+    modelState: import("vue").Ref<T["modelValue"]>;
+    errorState: import("vue").Ref<string>;
     onInvalid: (e: Event) => void;
     validate: (e: Event) => void;
     inputValidation: (...args: any[]) => void;
@@ -89,12 +87,6 @@ export declare const hasAttribute: (attrs: Record<string, unknown>, name: string
  * exported as a raw string to support the escape backslash characters
  */
 export declare const emailPattern: string;
-/**
- * password validation regex pattern
- * used with input type="password" in the pattern attribute for html5 validation
- * exported as a raw string to support the escape backslash characters
- */
-export declare const passwordPattern: string;
 /**
  * phone number validation regex pattern
  * used with input type="tel" in the pattern attribute for html5 validation
@@ -104,15 +96,3 @@ export declare const phonePattern: string;
  * This is used for the .number modifier in v-model
  */
 export declare const looseToNumber: (val: any) => any;
-/**
- * useLocalModel supports a two-way binding between a reactive prop and
- * a local ref.  It effectively allows you to do prop mutations in a way that
- * vue considers safe.
- *
- * vue/core has a version of this in it's experimental mode called useModel
- *
- * @param props component props
- * @param name component prop name to sync
- */
-export declare const useLocalModel: <T extends Record<string, any>, K extends keyof T>(props: T, name: K) => Ref<T[K]>;
-export {};

package/types/composables/setupHelpers.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from "vue";
+/**
+ * useModel supports a two-way binding between a reactive prop and
+ * a local ref.  It effectively allows you to do prop mutations in a way that
+ * vue considers safe.
+ *
+ * This is effectveily a copy of useModel from vuejs/core which is currently an experimental opt-in
+ *
+ * @param props component props
+ * @param name component prop name to sync
+ * @param options - local determines the reactivity pattern used when the prop you are tracking is optional, use local:true.
+ */
+export declare const useModel: <T extends Record<string, any>, K extends keyof T>(props: T, name: K, options?: {
+    local?: boolean;
+}) => Ref<T[K]>;

package/types/entry.d.ts

@@ -1,9 +1,16 @@
 import { Plugin } from "vue";
 import BaseAPI, { isHttpCancel, isHttpError, setBaseAPIDefaults } from "./api/base";
 import type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged } from "./api/client";
+import { emailPattern, looseToNumber, phonePattern, useInputField } from "./composables/forms";
+import { useModel } from "./composables/setupHelpers";
+import { debounce as debounceFn, debounceLeading } from "./helpers/Debounce";
+import { throttle as throttleFn } from "./helpers/Throttle";
 declare const install: Exclude<Plugin["install"], undefined>;
 export default install;
 export * from "./composables/index";
 export * from "./lib-components/index";
 export { BaseAPI, isHttpCancel, isHttpError, setBaseAPIDefaults };
 export type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged, };
+export { emailPattern, looseToNumber, phonePattern, useInputField };
+export { useModel };
+export { debounceFn, debounceLeading, throttleFn };

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

@@ -11,10 +11,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string | number | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -41,10 +37,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string | number | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -59,7 +51,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     label: string;
     modelValue: string | number | null;
-    error: string;
     help: string;
     placeholder: string;
 }, {}>;

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

@@ -7,10 +7,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<boolean | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -31,10 +27,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<boolean | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -49,7 +41,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     label: string;
     modelValue: boolean | null;
-    error: string;
     help: string;
     placeholder: string;
 }, {}>;

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

@@ -14,10 +14,6 @@ declare const _default: import("vue").DefineComponent<{
             minDate: number;
         };
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -49,10 +45,6 @@ declare const _default: import("vue").DefineComponent<{
             minDate: number;
         };
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -75,7 +67,6 @@ declare const _default: import("vue").DefineComponent<{
         minDate: number;
         maxDate: number;
     };
-    error: string;
     help: string;
     placeholder: string;
     maxRange: number;

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

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    text: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    text: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>>, {
+    text: string;
+}, {}>;
+export default _default;

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

@@ -13,10 +13,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<(string | number)[] | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -50,10 +46,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<(string | number)[] | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -75,7 +67,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     label: string;
     modelValue: (string | number)[] | null;
-    error: string;
     help: string;
     placeholder: string;
 }, {}>;

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

@@ -7,10 +7,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string | number | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -38,10 +34,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string | number | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -63,7 +55,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     label: string;
     modelValue: string | number | null;
-    error: string;
     help: string;
     placeholder: string;
 }, {}>;

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

@@ -2,7 +2,6 @@ import type { InputOption } from "../../composables/forms";
 declare const _default: <T extends InputOption>(__VLS_props: {
     label?: string | undefined;
     modelValue?: string | number | null | undefined;
-    error?: string | undefined;
     help?: string | undefined;
     placeholder?: string | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -24,7 +23,6 @@ declare const _default: <T extends InputOption>(__VLS_props: {
     props: {
         label?: string | undefined;
         modelValue?: string | number | null | undefined;
-        error?: string | undefined;
         help?: string | undefined;
         placeholder?: string | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -50,7 +48,6 @@ declare const _default: <T extends InputOption>(__VLS_props: {
         props: {
             label?: string | undefined;
             modelValue?: string | number | null | undefined;
-            error?: string | undefined;
             help?: string | undefined;
             placeholder?: string | undefined;
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;

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

@@ -7,10 +7,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string | number | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -35,10 +31,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string | number | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -57,7 +49,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     label: string;
     modelValue: string | number | null;
-    error: string;
     help: string;
     placeholder: string;
 }, {}>;

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

@@ -7,10 +7,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string | number | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -31,10 +27,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string | number | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -49,7 +41,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     label: string;
     modelValue: string | number | null;
-    error: string;
     help: string;
     placeholder: string;
 }, {}>;

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

@@ -7,10 +7,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<boolean | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -31,10 +27,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<boolean | null>;
         default: undefined;
     };
-    error: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     help: {
         type: import("vue").PropType<string>;
         default: string;
@@ -49,7 +41,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     label: string;
     modelValue: boolean | null;
-    error: string;
     help: string;
     placeholder: string;
 }, {}>;

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

@@ -5,6 +5,7 @@ import { default as DateFilter } from "./layout/DateFilter.vue";
 import { default as DetailList } from "./lists/DetailList.vue";
 import { default as DownloadCell } from "./lists/DownloadCell.vue";
 import { default as Flash } from "./overlays/Flash.vue";
+import { default as InlineAlert } from "./indicators/InlineAlert.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";
@@ -24,6 +25,7 @@ import { default as XYSpinner } from "./indicators/XYSpinner.vue";
 import { default as BaseInput } from "./forms/BaseInput.vue";
 import { default as Checkbox } from "./forms/Checkbox.vue";
 import { default as DateRangePicker } from "./forms/DateRangePicker.vue";
+import { default as InputError } from "./forms/InputError.vue";
 import { default as InputHelp } from "./forms/InputHelp.vue";
 import { default as InputLabel } from "./forms/InputLabel.vue";
 import { default as FieldsetLegend } from "./forms/FieldsetLegend.vue";
@@ -33,8 +35,8 @@ 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, DataTable, Steps, DynamicTable, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, };
+export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, InlineAlert, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
+Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, };
 /**
  * declare global component types for App.use(Trees)
  */
@@ -63,6 +65,7 @@ export interface TreesComponents {
     BaseInput: typeof BaseInput;
     Checkbox: typeof Checkbox;
     DateRangePicker: typeof DateRangePicker;
+    InputError: typeof InputError;
     InputHelp: typeof InputHelp;
     InputLabel: typeof InputLabel;
     FieldsetLegend: typeof FieldsetLegend;