@xy-planning-network/trees 0.7.5-dev → 0.7.5-rc1

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

@@ -1,91 +1,105 @@
 <script setup lang="ts">
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
-import { useInputField } from "@/composables/forms"
+import { useInputField, defaultInputProps } from "@/composables/forms"
+import type { BooleanInput } from "@/composables/forms"
+import { ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-withDefaults(
-  defineProps<{
-    modelValue?: boolean
-    help?: string
-    label?: string
-  }>(),
-  {
-    modelValue: undefined,
-    help: "",
-    label: "",
-  }
-)
+const props = withDefaults(defineProps<BooleanInput>(), defaultInputProps)
 
-const emits = defineEmits(["update:modelValue"])
-const { inputID, isDisabled, nameAttr } = useInputField()
+defineEmits(["update:modelValue", "update:error"])
+const targetInput = ref<HTMLInputElement | null>(null)
+const {
+  inputID,
+  isDisabled,
+  isRequired,
+  nameAttr,
+  modelState,
+  errorState,
+  onInvalid,
+  validate,
+} = useInputField({ props, targetInput })
 
-const onChange = (e: Event) => {
-  emits("update:modelValue", (e.target as HTMLInputElement).value === "true")
+const onChange = (e: Event, val: boolean) => {
+  modelState.value = val
+  validate(e)
 }
 </script>
 
 <template>
   <fieldset
-    class="space-y-3"
+    class="space-y-4"
     :aria-labelledby="label ? `${inputID}-legend` : undefined"
     :aria-describedby="help ? `${inputID}-help` : undefined"
   >
     <div v-if="label">
-      <InputLabel class="block my-auto" :label="label" tag="legend" />
+      <InputLabel
+        class="block my-auto"
+        :label="label"
+        tag="legend"
+        :required="isRequired"
+      />
       <InputHelp v-if="help" :id="`${inputID}-help`" tag="p" :text="help" />
     </div>
 
+    <div v-if="errorState" class="mt-0.5">
+      <p class="text-sm text-red-700">{{ errorState }}</p>
+    </div>
+
     <div>
       <label
         class="inline-flex items-center group"
-        :class="isDisabled && 'cursor-not-allowed'"
+        :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
         :for="`${nameAttr}-true`"
       >
         <input
           :id="`${nameAttr}-true`"
+          rel="targetInput"
           type="radio"
           :class="[
-            'h-4 w-4',
-            'border-gray-300 text-xy-blue focus:ring-xy-blue-500',
+            'h-4 w-4 text-xy-blue cursor-pointer',
             'disabled:bg-gray-100 disabled:border-gray-200  disabled:cursor-not-allowed disabled:opacity-100',
             'checked:disabled:bg-xy-blue checked:disabled:border-xy-blue checked:disabled:opacity-50',
+            errorState
+              ? 'border-red-700 focus:ring-red-700'
+              : 'border-gray-300  focus:ring-xy-blue-500',
           ]"
           :name="nameAttr"
           :value="true"
-          :checked="modelValue === true"
-          v-bind="{
-            ...$attrs,
-            onChange: onChange,
-          }"
+          :checked="modelState === true"
+          v-bind="$attrs"
+          @change="onChange($event, true)"
+          @invalid="onInvalid"
         />
         <InputLabel class="ml-3" label="Yes" tag="span" />
       </label>
 
       <label
         class="inline-flex items-center ml-6"
-        :class="isDisabled && 'cursor-not-allowed'"
+        :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
         :for="`${nameAttr}-false`"
       >
         <input
           :id="`${nameAttr}-false`"
           type="radio"
           :class="[
-            'h-4 w-4',
-            'border-gray-300 text-xy-blue focus:ring-xy-blue-500',
+            'h-4 w-4 text-xy-blue cursor-pointer',
             'disabled:bg-gray-100 disabled:border-gray-200  disabled:cursor-not-allowed disabled:opacity-100',
             'checked:disabled:bg-xy-blue checked:disabled:border-xy-blue checked:disabled:opacity-50',
+            errorState
+              ? 'border-red-700 focus:ring-red-700'
+              : 'border-gray-300  focus:ring-xy-blue-500',
           ]"
           :name="nameAttr"
           :value="false"
-          :checked="modelValue === false"
-          v-bind="{
-            ...$attrs,
-            onChange: onChange,
-          }"
+          :checked="modelState === false"
+          v-bind="$attrs"
+          @change="onChange($event, false)"
+          @invalid="onInvalid"
         />
         <InputLabel class="ml-3" label="No" tag="span" />
       </label>

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

@@ -174,16 +174,13 @@ loadAndRender()
       class="flex flex-col mb-4 space-y-4 lg:space-y-0 lg:flex-row lg:justify-between"
     >
       <div v-if="tableOptions.search" class="w-full max-w-lg lg:max-w-xs">
-        <label for="search" class="sr-only">Search</label>
-        <div class="relative">
+        <label for="table-search" class="sr-only">Search</label>
+        <div class="flex items-center gap-x-2">
           <div
-            class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
+            aria-hidden="true"
+            class="shrink-0 aspect-square rounded-full bg-gray-50 text-gray-400 h-10 w-10 flex items-center justify-center pointer-events-none"
           >
-            <svg
-              class="w-5 h-5 text-gray-400"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
               <path
                 fill-rule="evenodd"
                 d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
@@ -191,21 +188,47 @@ loadAndRender()
               />
             </svg>
           </div>
-          <input
-            v-model.trim="query"
-            class="pl-10"
-            type="search"
-            placeholder="Search"
-            @change="reloadTable()"
-          />
+          <div class="flex-1">
+            <BaseInput
+              id="table-search"
+              v-model.trim="query"
+              type="search"
+              placeholder="Search"
+              @change="reloadTable()"
+            />
+          </div>
         </div>
       </div>
       <div v-if="tableOptions.dateSearch" class="w-full max-w-lg lg:max-w-xs">
-        <DateRangePicker
-          v-model="dateRange"
-          v-bind="{ ...dateSearchProps }"
-          @update:model-value="dateRangeChanged"
-        />
+        <label for="table-date-range" class="sr-only">Date Range</label>
+        <div class="flex items-center gap-x-2">
+          <div
+            aria-hidden="true"
+            class="shrink-0 aspect-square rounded-full bg-gray-50 text-gray-400 h-10 w-10 flex items-center justify-center pointer-events-none"
+          >
+            <svg
+              class="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+          <div class="flex-1">
+            <DateRangePicker
+              id="table-date-range"
+              v-model="dateRange"
+              v-bind="{ ...dateSearchProps }"
+              @update:model-value="dateRangeChanged"
+            />
+          </div>
+        </div>
       </div>
     </div>
 

package/types/composables/forms.d.ts

@@ -1,10 +1,118 @@
-export declare const useInputField: () => {
+import { Ref } from "vue";
+export interface Input {
+    modelValue?: any;
+    error?: string;
+    label?: string;
+    help?: string;
+    placeholder?: string;
+}
+export interface InputOption {
+    disabled?: boolean;
+    help?: string;
+    label: string;
+    sublabel?: string;
+    value: string | number;
+}
+export interface BooleanInput extends Input {
+    modelValue?: boolean | null;
+}
+export interface DateRangeInput extends Input {
+    modelValue?: {
+        minDate: number;
+        maxDate: number;
+    };
+    maxRange?: number;
+    startDate?: number;
+}
+export interface TextLikeInput extends Input {
+    modelValue?: string | number | null;
+    type: TextInputType;
+}
+export interface TextareaInput extends Input {
+    modelValue?: string | number | null;
+}
+export interface OptionsInput extends Input {
+    modelValue?: string | number | null;
+    options: InputOption[];
+}
+export interface MultiChoiceInput extends Input {
+    max?: number;
+    min?: number;
+    modelValue?: (string | number)[] | null;
+    options: InputOption[];
+}
+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>) => {
     attrs: {
         [x: string]: unknown;
     };
     inputID: import("vue").ComputedRef<string>;
     isDisabled: import("vue").ComputedRef<boolean>;
     isRequired: import("vue").ComputedRef<boolean>;
-    isValid: import("vue").ComputedRef<boolean>;
     nameAttr: import("vue").ComputedRef<string>;
+    modelState: Ref<T["modelValue"]>;
+    errorState: Ref<T["error"]>;
+    onInvalid: (e: Event) => void;
+    validate: (e: Event) => void;
+    inputValidation: (...args: any[]) => void;
 };
+/**
+ * hasAttribute determines if an HTML attribute value exists.  The conditions are based on
+ * whether or not the attribute will be set on the HTML element.
+ * @param attrs
+ * @param name
+ */
+export declare const hasAttribute: (attrs: Record<string, unknown>, name: string) => boolean;
+/**
+ * email validation regex pattern
+ * used with input type="email" in the pattern attribute for html5 validation
+ * 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
+ */
+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/lib-components/forms/BaseInput.vue.d.ts

@@ -1,40 +1,64 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    type: "number" | "search" | "time" | "text" | "date" | "datetime-local" | "email" | "month" | "password" | "tel" | "url" | "week";
-    help?: string | undefined;
-    label?: string | undefined;
-    modelValue?: string | number | undefined;
-}>, {
-    help: string;
-    label: string;
-    modelValue: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    type: "number" | "search" | "time" | "text" | "date" | "datetime-local" | "email" | "month" | "password" | "tel" | "url" | "week";
-    help?: string | undefined;
-    label?: string | undefined;
-    modelValue?: string | number | undefined;
-}>, {
-    help: string;
-    label: string;
-    modelValue: string;
-}>>> & {
+declare const _default: import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    type: {
+        type: import("vue").PropType<import("../../composables/forms").TextInputType>;
+        required: true;
+    };
+    modelValue: {
+        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;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    "update:error": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    type: {
+        type: import("vue").PropType<import("../../composables/forms").TextInputType>;
+        required: true;
+    };
+    modelValue: {
+        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;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:error"?: ((...args: any[]) => any) | undefined;
 }, {
     label: string;
+    modelValue: string | number | null;
+    error: string;
     help: string;
-    modelValue: string | number;
+    placeholder: string;
 }, {}>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};

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

@@ -1,35 +1,56 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    label?: string | undefined;
-    help?: string | undefined;
-    modelValue: boolean;
-}>, {
-    label: string;
-    help: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    label?: string | undefined;
-    help?: string | undefined;
-    modelValue: boolean;
-}>, {
-    label: string;
-    help: string;
-}>>> & {
+declare const _default: import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<boolean | null>;
+        default: undefined;
+    };
+    error: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    help: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    "update:error": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<boolean | null>;
+        default: undefined;
+    };
+    error: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    help: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:error"?: ((...args: any[]) => any) | undefined;
 }, {
     label: string;
+    modelValue: boolean | null;
+    error: string;
     help: string;
+    placeholder: string;
 }, {}>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};

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

@@ -1,52 +1,84 @@
 import "flatpickr/dist/flatpickr.min.css";
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     modelValue: {
-        minDate: number;
-        maxDate: number;
+        type: import("vue").PropType<{
+            minDate: number;
+            maxDate: number;
+        }>;
+        default: () => {
+            maxDate: number;
+            minDate: number;
+        };
     };
-    maxRange?: number | undefined;
-    startDate?: number | undefined;
-    label?: string | undefined;
-    help?: string | undefined;
-}>, {
-    maxRange: number;
-    startDate: number;
+    error: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    help: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    maxRange: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    startDate: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<{
+            minDate: number;
+            maxDate: number;
+        }>;
+        default: () => {
+            maxDate: number;
+            minDate: number;
+        };
+    };
+    error: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    help: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    maxRange: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    startDate: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}>>, {
     label: string;
-    help: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue: {
         minDate: number;
         maxDate: number;
     };
-    maxRange?: number | undefined;
-    startDate?: number | undefined;
-    label?: string | undefined;
-    help?: string | undefined;
-}>, {
-    maxRange: number;
-    startDate: number;
-    label: string;
-    help: string;
-}>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
-    label: string;
+    error: string;
     help: string;
+    placeholder: string;
     maxRange: number;
     startDate: number;
 }, {}>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};