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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.7.5-rc2",
+  "version": "0.7.5-rc4",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
+import InputError from "./InputError.vue"
 import {
   useInputField,
   defaultInputProps,
   emailPattern,
   looseToNumber,
-  passwordPattern,
   phonePattern,
 } from "@/composables/forms"
 import type { TextLikeInput } from "@/composables/forms"
@@ -19,7 +19,7 @@ defineOptions({
 const props = withDefaults(defineProps<TextLikeInput>(), defaultInputProps)
 
 defineEmits(["update:modelValue", "update:error"])
-const targetInput = ref<HTMLInputElement | null>(null)
+const input = ref<HTMLInputElement | null>(null)
 const {
   errorState,
   modelState,
@@ -27,12 +27,12 @@ const {
   isRequired,
   onInvalid,
   inputValidation,
-} = useInputField({ props, targetInput })
+} = useInputField(props)
 
 // A wrapper component may need to have direct access
 // to the underlying HTMLInputElement that BaseInput binds to
 // example: GoogleMaps Autocomplete inputs
-defineExpose({ input: targetInput })
+defineExpose({ input: input })
 
 const typeAttributes = computed(() => {
   switch (props.type) {
@@ -45,10 +45,6 @@ const typeAttributes = computed(() => {
       return {
         pattern: emailPattern,
       }
-    case "password":
-      return {
-        pattern: passwordPattern,
-      }
     case "tel":
       return {
         pattern: phonePattern,
@@ -82,9 +78,10 @@ const onInput = (e: Event) => {
     />
     <input
       :id="inputID"
-      ref="targetInput"
+      ref="input"
       :aria-labelledby="label ? `${inputID}-label` : undefined"
       :aria-describedby="help ? `${inputID}-help` : undefined"
+      :aria-errormessage="errorState ? `${inputID}-error` : undefined"
       :class="[
         'block w-full rounded-md border-0 py-2 shadow-sm ring-1 ring-inset focus:ring-2 sm:text-sm sm:leading-6',
         'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-700 disabled:ring-gray-200',
@@ -100,8 +97,6 @@ const onInput = (e: Event) => {
       @invalid="onInvalid"
     />
     <InputHelp :id="`${inputID}-help`" class="mt-1" :text="help" />
-    <div v-if="errorState" class="mt-0.5">
-      <p class="text-sm text-red-700">{{ errorState }}</p>
-    </div>
+    <InputError :id="`${inputID}-error`" class="mt-0.5" :text="errorState" />
   </div>
 </template>

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
+import InputError from "./InputError.vue"
 import { useInputField, defaultInputProps } from "@/composables/forms"
 import type { BooleanInput } from "@/composables/forms"
-import { ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
@@ -12,8 +12,8 @@ defineOptions({
 const props = withDefaults(defineProps<BooleanInput>(), defaultInputProps)
 
 defineEmits(["update:modelValue", "update:error"])
-const targetInput = ref<HTMLInputElement | null>(null)
 const {
+  aria,
   inputID,
   isDisabled,
   isRequired,
@@ -21,7 +21,7 @@ const {
   modelState,
   validate,
   onInvalid,
-} = useInputField({ props, targetInput })
+} = useInputField(props)
 
 const onChange = (e: Event) => {
   modelState.value = (e.target as HTMLInputElement).checked
@@ -34,9 +34,9 @@ const onChange = (e: Event) => {
     <div class="flex items-center h-5">
       <input
         :id="inputID"
-        ref="targetInput"
-        :aria-labelledby="label ? `${inputID}-label` : undefined"
-        :aria-describedby="help ? `${inputID}-help` : undefined"
+        :aria-labelledby="aria.labelledby"
+        :aria-describedby="aria.describedby"
+        :aria-errormessage="aria.errormessage"
         :checked="modelState || undefined"
         :class="[
           'h-4 w-4 rounded text-xy-blue cursor-pointer',
@@ -54,16 +54,14 @@ const onChange = (e: Event) => {
     </div>
     <div class="ml-3">
       <InputLabel
-        :id="`${inputID}-label`"
+        :id="aria.labelledby"
         :for="inputID"
         :label="label"
         :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
         :required="isRequired"
       />
-      <InputHelp :id="`${inputID}-help`" :text="help"></InputHelp>
-      <div v-if="errorState" class="mt-0.5">
-        <p class="text-sm text-red-700">{{ errorState }}</p>
-      </div>
+      <InputHelp :id="aria.describedby" :text="help"></InputHelp>
+      <InputError :id="aria.errormessage" class="mt-0.5" :text="errorState" />
     </div>
   </div>
 </template>

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import InputLabel from "./InputLabel.vue"
+import InputHelp from "./InputHelp.vue"
+import InputError from "./InputError.vue"
 import flatpickr from "flatpickr"
 import "flatpickr/dist/flatpickr.min.css"
-import { onMounted, ref } from "vue"
+import { onMounted } from "vue"
 import { defaultInputProps, useInputField } from "@/composables/forms"
 import type { DateRangeInput } from "@/composables/forms"
 
@@ -22,9 +25,15 @@ const props = withDefaults(defineProps<DateRangeInput>(), {
   startDate: 0,
 })
 
-const targetInput = ref<HTMLInputElement | null>(null)
-const { errorState, modelState, inputID, isRequired, onInvalid, validate } =
-  useInputField({ props, targetInput })
+const {
+  aria,
+  errorState,
+  modelState,
+  inputID,
+  isRequired,
+  onInvalid,
+  validate,
+} = useInputField(props)
 
 const updateModelValue = (value: { minDate: number; maxDate: number }) => {
   modelState.value = value
@@ -90,7 +99,7 @@ onMounted(() => {
 <template>
   <div>
     <InputLabel
-      :id="`${inputID}-label`"
+      :id="aria.labelledby"
       class="mb-2"
       :for="inputID"
       :label="label"
@@ -98,9 +107,9 @@ onMounted(() => {
     />
     <input
       :id="inputID"
-      ref="targetInput"
-      :aria-labelledby="label ? `${inputID}-label` : undefined"
-      :aria-describedby="help ? `${inputID}-help` : undefined"
+      :aria-labelledby="aria.labelledby"
+      :aria-describedby="aria.describedby"
+      :aria-errormessage="aria.errormessage"
       :class="[
         'block w-full rounded-md border-0 py-2 shadow-sm ring-1 ring-inset focus:ring-2 sm:text-sm sm:leading-6',
         'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-700 disabled:ring-gray-200',
@@ -114,9 +123,7 @@ onMounted(() => {
       @input="validate"
       @invalid="onInvalid"
     />
-    <InputHelp :id="`${inputID}-help`" class="mt-1" :text="help" />
-    <div v-if="errorState" class="mt-0.5">
-      <p class="text-sm text-red-700">{{ errorState }}</p>
-    </div>
+    <InputHelp :id="aria.describedby" class="mt-1" :text="help" />
+    <InputError :id="aria.errormessage" class="mt-0.5" :text="errorState" />
   </div>
 </template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    text?: string
+  }>(),
+  {
+    text: "",
+  }
+)
+</script>
+
+<template>
+  <p v-if="text" class="text-sm text-red-700">{{ text }}</p>
+</template>

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

@@ -2,6 +2,7 @@
 import FieldsetLegend from "./FieldsetLegend.vue"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
+import InputError from "./InputError.vue"
 import { useInputField, defaultInputProps } from "@/composables/forms"
 import type { MultiChoiceInput, ColumnedInput } from "@/composables/forms"
 import { computed, ref } from "vue"
@@ -16,10 +17,8 @@ const props = withDefaults(
 )
 
 defineEmits(["update:modelValue", "update:error"])
-const targetInput = ref<HTMLInputElement | null>(null)
-const { inputID, isDisabled, modelState, errorState, validate } = useInputField(
-  { props, targetInput }
-)
+const { aria, inputID, isDisabled, modelState, errorState, validate } =
+  useInputField(props)
 
 const onChange = (e: Event, val: string | number) => {
   const checked = (e.target as HTMLInputElement).checked
@@ -74,9 +73,12 @@ const countError = computed(() => {
   return ""
 })
 
+const errorInput = ref<HTMLInputElement | null>(null)
 const setValidationError = () => {
   if (!errorState.value) {
     errorState.value = countError.value
+    // ensure the browser tooltip contains our error message
+    errorInput.value?.setCustomValidity(countError.value)
   }
 }
 </script>
@@ -84,25 +86,25 @@ const setValidationError = () => {
 <template>
   <fieldset
     class="relative space-y-4"
-    :aria-labelledby="label ? `${inputID}-legend` : undefined"
-    :aria-describedby="help ? `${inputID}-help` : undefined"
+    :aria-labelledby="aria.labelledby"
+    :aria-describedby="aria.describedby"
+    :aria-errormessage="aria.errormessage"
   >
     <div v-if="label">
       <FieldsetLegend
-        :id="`${inputID}-legend`"
+        :id="aria.labelledby"
         :label="label"
         :required="minCount > 0"
       />
-      <InputHelp v-if="help" :id="`${inputID}-help`" tag="p" :text="help" />
+      <InputHelp v-if="help" :id="aria.describedby" tag="p" :text="help" />
     </div>
 
-    <div v-if="errorState" class="mt-0.5">
-      <p class="text-sm text-red-700">{{ errorState }}</p>
-    </div>
+    <InputError :id="aria.errormessage" :text="errorState" />
 
+    <!--Hidden input for custom validation-->
     <input
-      v-if="countError || errorState"
-      ref="targetInput"
+      v-if="countError"
+      ref="errorInput"
       required
       class="sr-only top-1 left-1"
       aria-hidden

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, ref } from "vue"
 import FieldsetLegend from "./FieldsetLegend.vue"
-import InputHelp from "./InputHelp.vue"
 import InputLabel from "./InputLabel.vue"
+import InputHelp from "./InputHelp.vue"
+import InputError from "./InputError.vue"
 import { useInputField, defaultInputProps } from "@/composables/forms"
 import type { OptionsInput, ColumnedInput } from "@/composables/forms"
 
@@ -17,17 +17,8 @@ const props = withDefaults(
 
 defineEmits(["update:modelValue", "update:error"])
 
-const radios = ref<HTMLInputElement[]>([])
-// there are multiple radio buttons that could be the target
-// for validation set to the first input
-const targetInput = computed(() => {
-  if (radios.value.length === 0) {
-    return null
-  }
-
-  return radios.value[0]
-})
 const {
+  aria,
   errorState,
   modelState,
   inputID,
@@ -35,7 +26,7 @@ const {
   isRequired,
   onInvalid,
   validate,
-} = useInputField({ props, targetInput })
+} = useInputField(props)
 
 const onChange = (e: Event, val: string | number) => {
   modelState.value = val
@@ -46,21 +37,20 @@ const onChange = (e: Event, val: string | number) => {
 <template>
   <fieldset
     class="space-y-4"
-    :aria-labelledby="label ? `${inputID}-legend` : undefined"
-    :aria-describedby="help ? `${inputID}-help` : undefined"
+    :aria-labelledby="aria.labelledby"
+    :aria-describedby="aria.describedby"
+    :aria-errormessage="aria.errormessage"
   >
     <div v-if="label">
       <FieldsetLegend
-        :id="`${inputID}-legend`"
+        :id="aria.labelledby"
         :label="label"
         :required="isRequired"
       />
-      <InputHelp v-if="help" :id="`${inputID}-help`" tag="p" :text="help" />
+      <InputHelp v-if="help" :id="aria.describedby" tag="p" :text="help" />
     </div>
 
-    <div v-if="errorState" class="mt-0.5">
-      <p class="text-sm text-red-700">{{ errorState }}</p>
-    </div>
+    <InputError :id="aria.errormessage" :text="errorState" />
 
     <div class="flex">
       <div
@@ -79,7 +69,6 @@ const onChange = (e: Event, val: string | number) => {
           <div class="flex items-center h-5">
             <input
               :id="`${inputID}-${index}`"
-              ref="radios"
               :aria-describedby="
                 option.help ? `${inputID}-${index}-help` : undefined
               "

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

@@ -8,6 +8,7 @@ import {
 import { CheckCircleIcon } from "@heroicons/vue/solid"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
+import InputError from "./InputError.vue"
 import FieldsetLegend from "./FieldsetLegend.vue"
 import { defaultInputProps, useInputField } from "@/composables/forms"
 import type {
@@ -15,7 +16,6 @@ import type {
   InputOption,
   OptionsInput,
 } from "@/composables/forms"
-import { computed, ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
@@ -37,25 +37,15 @@ const props = withDefaults(
 )
 
 defineEmits(["update:modelValue", "update:error"])
-const hiddenRadios = ref<HTMLInputElement[]>([])
-// there are multiple radio buttons that could be the target
-// for validation set to the first input
-const targetInput = computed(() => {
-  if (hiddenRadios.value.length === 0) {
-    return null
-  }
-
-  return hiddenRadios.value[0]
-})
 const {
-  inputID,
+  aria,
   isDisabled,
   isRequired,
   nameAttr,
   modelState,
   errorState,
   onInvalid,
-} = useInputField({ props, targetInput })
+} = useInputField(props)
 
 const onUpdate = (val: unknown) => {
   if (val) {
@@ -69,7 +59,7 @@ const onUpdate = (val: unknown) => {
     v-model="modelState"
     :disabled="isDisabled"
     :aria-invalid="errorState ? 'true' : null"
-    :aria-errormessage="errorState ? `error-${inputID}` : null"
+    :aria-errormessage="aria.errormessage"
     @update:model-value="onUpdate"
   >
     <RadioGroupLabel v-if="label" class="block">
@@ -80,9 +70,7 @@ const onUpdate = (val: unknown) => {
       <InputHelp :text="help" />
     </RadioGroupDescription>
 
-    <div v-if="errorState" :id="`error-${inputID}`">
-      <p class="text-sm text-red-700">{{ errorState }}</p>
-    </div>
+    <InputError :id="aria.errormessage" :text="errorState" />
 
     <div
       class="mt-4 grid grid-cols-1 gap-y-5 gap-x-4 relative"
@@ -167,7 +155,6 @@ const onUpdate = (val: unknown) => {
 
           <!--TODO: (spk) ideally this would trigger a change event -->
           <input
-            ref="hiddenRadios"
             class="sr-only top-1 left-1"
             aria-hidden="true"
             :checked="checked"

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
+import InputError from "./InputError.vue"
 import { defaultInputProps, useInputField } from "@/composables/forms"
 import type { OptionsInput } from "@/composables/forms"
-import { ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
@@ -15,9 +15,15 @@ const props = withDefaults(defineProps<OptionsInput>(), {
 })
 
 defineEmits(["update:modelValue", "update:error"])
-const targetInput = ref<HTMLInputElement | null>(null)
-const { inputID, isRequired, validate, modelState, errorState, onInvalid } =
-  useInputField({ props, targetInput })
+const {
+  aria,
+  inputID,
+  isRequired,
+  validate,
+  modelState,
+  errorState,
+  onInvalid,
+} = useInputField(props)
 
 const onChange = (e: Event) => {
   modelState.value = (e.target as HTMLInputElement).value
@@ -28,7 +34,7 @@ const onChange = (e: Event) => {
 <template>
   <div>
     <InputLabel
-      :id="`${inputID}-label`"
+      :id="aria.labelledby"
       class="mb-2"
       :for="inputID"
       :label="label"
@@ -36,9 +42,9 @@ const onChange = (e: Event) => {
     />
     <select
       :id="inputID"
-      ref="targetInput"
-      :aria-labelledby="label ? `${inputID}-label` : undefined"
-      :aria-describedby="help ? `${inputID}-help` : undefined"
+      :aria-labelledby="aria.labelledby"
+      :aria-describedby="aria.describedby"
+      :aria-errormessage="aria.errormessage"
       :class="[
         'block w-full rounded-md border-0 py-2 shadow-sm ring-1 ring-inset focus:ring-2 sm:text-sm sm:leading-6 pl-3 pr-10',
         'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-700 disabled:ring-gray-200 disabled:opacity-100',
@@ -60,9 +66,7 @@ const onChange = (e: Event) => {
         v-text="option.label"
       />
     </select>
-    <InputHelp :id="`${inputID}-help`" class="mt-1" :text="help" />
-    <div v-if="errorState" class="mt-0.5">
-      <p class="text-sm text-red-700">{{ errorState }}</p>
-    </div>
+    <InputHelp :id="aria.describedby" class="mt-1" :text="help" />
+    <InputError :id="aria.errormessage" class="mt-0.5" :text="errorState" />
   </div>
 </template>

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
+import InputError from "./InputError.vue"
 import { useInputField, defaultInputProps } from "@/composables/forms"
 import type { TextareaInput } from "@/composables/forms"
-import { ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
@@ -11,15 +11,15 @@ defineOptions({
 
 const props = withDefaults(defineProps<TextareaInput>(), defaultInputProps)
 defineEmits(["update:modelValue", "update:error"])
-const targetInput = ref<HTMLInputElement | null>(null)
 const {
+  aria,
   inputID,
   isRequired,
   modelState,
   errorState,
   onInvalid,
   inputValidation,
-} = useInputField({ props, targetInput })
+} = useInputField(props)
 
 const onInput = (e: Event) => {
   modelState.value = (e.target as HTMLInputElement).value
@@ -30,7 +30,7 @@ const onInput = (e: Event) => {
 <template>
   <div>
     <InputLabel
-      :id="`${inputID}-label`"
+      :id="aria.labelledby"
       class="mb-2"
       :for="inputID"
       :label="label"
@@ -38,9 +38,9 @@ const onInput = (e: Event) => {
     />
     <textarea
       :id="inputID"
-      ref="targetInput"
-      :aria-labelledby="label ? `${inputID}-label` : undefined"
-      :aria-describedby="help ? `${inputID}-help` : undefined"
+      :aria-labelledby="aria.labelledby"
+      :aria-describedby="aria.describedby"
+      :aria-errormessage="aria.errormessage"
       :class="[
         'block w-full rounded-md border-0 py-2 shadow-sm ring-1 ring-inset focus:ring-2 sm:text-sm sm:leading-6',
         'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-700 disabled:ring-gray-200',
@@ -53,9 +53,7 @@ const onInput = (e: Event) => {
       @input="onInput"
       @invalid="onInvalid"
     />
-    <InputHelp :id="`${inputID}-help`" class="mb-1" :text="help"></InputHelp>
-    <div v-if="errorState" class="mt-0.5">
-      <p class="text-sm text-red-700">{{ errorState }}</p>
-    </div>
+    <InputHelp :id="aria.describedby" class="mb-1" :text="help"></InputHelp>
+    <InputError :id="aria.errormessage" class="mt-0.5" :text="errorState" />
   </div>
 </template>

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import FieldsetLegend from "./FieldsetLegend.vue"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
+import InputError from "./InputError.vue"
 import { useInputField, defaultInputProps } from "@/composables/forms"
 import type { BooleanInput } from "@/composables/forms"
-import { ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
@@ -12,9 +13,8 @@ defineOptions({
 const props = withDefaults(defineProps<BooleanInput>(), defaultInputProps)
 
 defineEmits(["update:modelValue", "update:error"])
-const targetInput = ref<HTMLInputElement | null>(null)
 const {
-  inputID,
+  aria,
   isDisabled,
   isRequired,
   nameAttr,
@@ -22,7 +22,7 @@ const {
   errorState,
   onInvalid,
   validate,
-} = useInputField({ props, targetInput })
+} = useInputField(props)
 
 const onChange = (e: Event, val: boolean) => {
   modelState.value = val
@@ -33,22 +33,22 @@ const onChange = (e: Event, val: boolean) => {
 <template>
   <fieldset
     class="space-y-4"
-    :aria-labelledby="label ? `${inputID}-legend` : undefined"
-    :aria-describedby="help ? `${inputID}-help` : undefined"
+    :aria-labelledby="aria.labelledby"
+    :aria-describedby="aria.describedby"
+    :aria-errormessage="aria.errormessage"
   >
     <div v-if="label">
-      <InputLabel
+      <FieldsetLegend
+        :id="aria.labelledby"
         class="block my-auto"
         :label="label"
-        tag="legend"
         :required="isRequired"
+        tag="legend"
       />
-      <InputHelp v-if="help" :id="`${inputID}-help`" tag="p" :text="help" />
+      <InputHelp v-if="help" :id="aria.describedby" tag="p" :text="help" />
     </div>
 
-    <div v-if="errorState" class="mt-0.5">
-      <p class="text-sm text-red-700">{{ errorState }}</p>
-    </div>
+    <InputError :id="aria.errormessage" :text="errorState" />
 
     <div>
       <label
@@ -58,7 +58,6 @@ const onChange = (e: Event, val: boolean) => {
       >
         <input
           :id="`${nameAttr}-true`"
-          rel="targetInput"
           type="radio"
           :class="[
             'h-4 w-4 text-xy-blue cursor-pointer',