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

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

@@ -1,51 +1,70 @@
 <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 { useInputField } from "@/composables/forms"
+import { useInputField, defaultInputProps } from "@/composables/forms"
+import type { OptionsInput, ColumnedInput } from "@/composables/forms"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-withDefaults(
-  defineProps<{
-    options: {
-      disabled?: boolean
-      help?: string
-      label: string
-      value: string | number
-    }[]
-    help?: string
-    label?: string
-    modelValue?: string | number
-    columns?: 2 | 3
-  }>(),
-  {
-    help: "",
-    label: "",
-    modelValue: undefined,
-    columns: undefined,
-  }
+const props = withDefaults(
+  defineProps<OptionsInput & ColumnedInput>(),
+  defaultInputProps
 )
-const emits = defineEmits(["update:modelValue"])
-const { inputID, isDisabled } = useInputField()
+
+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 {
+  errorState,
+  modelState,
+  inputID,
+  isDisabled,
+  isRequired,
+  onInvalid,
+  validate,
+} = useInputField({ props, targetInput })
+
+const onChange = (e: Event, val: string | number) => {
+  modelState.value = val
+  validate(e)
+}
 </script>
 
 <template>
   <fieldset
-    class="space-y-5"
+    class="space-y-4"
     :aria-labelledby="label ? `${inputID}-legend` : undefined"
     :aria-describedby="help ? `${inputID}-help` : undefined"
   >
     <div v-if="label">
-      <FieldsetLegend :id="`${inputID}-legend`" :label="label" />
+      <FieldsetLegend
+        :id="`${inputID}-legend`"
+        :label="label"
+        :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 class="flex">
       <div
-        class="grid gap-y-5"
+        class="grid gap-y-6"
         :class="{
           'sm:grid sm:gap-x-5 sm:space-y-0': columns !== undefined,
           'sm:grid-cols-2': columns === 2,
@@ -57,30 +76,30 @@ const { inputID, isDisabled } = useInputField()
           :key="option.value"
           class="flex items-start"
         >
-          <div class="flex items-center h-6">
+          <div class="flex items-center h-5">
             <input
               :id="`${inputID}-${index}`"
+              ref="radios"
               :aria-describedby="
                 option.help ? `${inputID}-${index}-help` : undefined
               "
               :aria-labelledby="`${inputID}-${index}-label`"
-              :checked="modelValue === option.value"
+              :checked="modelState === option.value"
               :class="[
-                'h-4 w-4',
-                'border-gray-300 text-xy-blue focus:ring-xy-blue-500',
+                'h-4 w-4 cursor-pointer text-xy-blue',
                 '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',
               ]"
               :disabled="option.disabled"
               :name="inputID"
               type="radio"
               :value="option.value"
-              v-bind="{
-                onChange: () => {
-                  emits('update:modelValue', option.value)
-                },
-                ...$attrs,
-              }"
+              v-bind="$attrs"
+              @change="onChange($event, option.value)"
+              @invalid="onInvalid"
             />
           </div>
           <div class="ml-3">
@@ -88,9 +107,12 @@ const { inputID, isDisabled } = useInputField()
               :id="`${inputID}-${index}-label`"
               :for="`${inputID}-${index}`"
               :label="option.label"
-              :class="(isDisabled || option.disabled) && 'cursor-not-allowed'"
+              :class="
+                isDisabled || option.disabled
+                  ? 'cursor-not-allowed'
+                  : 'cursor-pointer'
+              "
             />
-
             <InputHelp :id="`${inputID}-${index}-help`" :text="option.help" />
           </div>
         </div>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends InputOption">
 import {
   RadioGroup,
   RadioGroupDescription,
@@ -6,11 +6,16 @@ import {
   RadioGroupOption,
 } from "@headlessui/vue"
 import { CheckCircleIcon } from "@heroicons/vue/solid"
-import { computed, ref } from "vue"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
 import FieldsetLegend from "./FieldsetLegend.vue"
-import { useInputField } from "@/composables/forms"
+import { defaultInputProps, useInputField } from "@/composables/forms"
+import type {
+  ColumnedInput,
+  InputOption,
+  OptionsInput,
+} from "@/composables/forms"
+import { computed, ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
@@ -20,83 +25,63 @@ defineOptions({
  * 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
+interface RadioCards extends OptionsInput {
+  options: T[]
 }
 
 const props = withDefaults(
-  defineProps<{
-    columns?: 2 | 3
-    help?: string
-    label?: string
-    modelValue?: ModelValue
-    options: RadioCard[]
-  }>(),
-  {
-    columns: undefined,
-    help: "",
-    label: "",
-    modelValue: undefined,
-  }
+  defineProps<RadioCards & ColumnedInput>(),
+  defaultInputProps
 )
 
-const emit = defineEmits<{
-  (e: "update:modelValue", modelValue: ModelValue): void
-}>()
-
-const { inputID, isDisabled, isRequired, nameAttr } = useInputField()
-
-// 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 checkedState = computed(() => {
-  if (props.modelValue === undefined) {
-    return internalState.value
+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 props.modelValue
+  return hiddenRadios.value[0]
 })
-
-const onChange = (val: ModelValue) => {
-  internalState.value = val
-  invalid.value = false
-  emit("update:modelValue", val)
+const {
+  inputID,
+  isDisabled,
+  isRequired,
+  nameAttr,
+  modelState,
+  errorState,
+  onInvalid,
+} = useInputField({ props, targetInput })
+
+const onUpdate = (val: unknown) => {
+  if (val) {
+    errorState.value = ""
+  }
 }
 </script>
 
 <template>
   <RadioGroup
-    :model-value="checkedState"
+    v-model="modelState"
     :disabled="isDisabled"
-    :aria-invalid="invalid === true ? 'true' : null"
-    :aria-errormessage="invalid === true ? `error-${inputID}` : null"
-    @update:model-value="onChange"
+    :aria-invalid="errorState ? 'true' : null"
+    :aria-errormessage="errorState ? `error-${inputID}` : null"
+    @update:model-value="onUpdate"
   >
     <RadioGroupLabel v-if="label" class="block">
-      <FieldsetLegend tag="div" :label="label" />
+      <FieldsetLegend tag="div" :label="label" :required="isRequired" />
     </RadioGroupLabel>
 
     <RadioGroupDescription v-if="help">
       <InputHelp :text="help" />
     </RadioGroupDescription>
 
-    <div v-if="invalid === true" :id="`error-${inputID}`" class="sr-only">
-      Please select one of these options.
+    <div v-if="errorState" :id="`error-${inputID}`">
+      <p class="text-sm text-red-700">{{ errorState }}</p>
     </div>
 
     <div
@@ -128,6 +113,7 @@ const onChange = (val: ModelValue) => {
             disabled
               ? 'cursor-not-allowed bg-gray-50 border-gray-200 opacity-90'
               : 'cursor-pointer bg-white border-gray-300',
+            errorState && !disabled ? 'border-red-700' : '',
             checked ? 'border-transparent' : '',
             active ? 'border-xy-blue ring-2 ring-xy-blue-500' : '',
           ]"
@@ -179,7 +165,9 @@ const onChange = (val: ModelValue) => {
             aria-hidden="true"
           />
 
+          <!--TODO: (spk) ideally this would trigger a change event -->
           <input
+            ref="hiddenRadios"
             class="sr-only top-1 left-1"
             aria-hidden="true"
             :checked="checked"
@@ -188,7 +176,7 @@ const onChange = (val: ModelValue) => {
             tabindex="-1"
             type="radio"
             :value="option.value"
-            @invalid="invalid = true"
+            @invalid="onInvalid"
           />
         </div>
       </RadioGroupOption>

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

@@ -1,71 +1,68 @@
 <script setup lang="ts">
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
-import { useInputField } from "@/composables/forms"
+import { defaultInputProps, useInputField } from "@/composables/forms"
+import type { OptionsInput } from "@/composables/forms"
+import { ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-withDefaults(
-  defineProps<{
-    label?: string
-    help?: string
-    placeholder?: string
-    options: { label: string; value: string | number }[]
-    modelValue: string | number | undefined
-  }>(),
-  {
-    label: "",
-    help: "",
-    placeholder: "Select an option",
-  }
-)
+const props = withDefaults(defineProps<OptionsInput>(), {
+  ...defaultInputProps,
+  placeholder: "Select an option",
+})
+
+defineEmits(["update:modelValue", "update:error"])
+const targetInput = ref<HTMLInputElement | null>(null)
+const { inputID, isRequired, validate, modelState, errorState, onInvalid } =
+  useInputField({ props, targetInput })
 
-const emit = defineEmits(["update:modelValue"])
-const { inputID, isValid } = useInputField()
+const onChange = (e: Event) => {
+  modelState.value = (e.target as HTMLInputElement).value
+  validate(e)
+}
 </script>
 
 <template>
   <div>
-    <div class="mb-1">
-      <InputLabel :id="`${inputID}-label`" :for="inputID" :label="label" />
-    </div>
+    <InputLabel
+      :id="`${inputID}-label`"
+      class="mb-2"
+      :for="inputID"
+      :label="label"
+      :required="isRequired"
+    />
     <select
       :id="inputID"
+      ref="targetInput"
       :aria-labelledby="label ? `${inputID}-label` : undefined"
       :aria-describedby="help ? `${inputID}-help` : 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 pl-3 pr-10',
-        'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-600 disabled:ring-gray-200 disabled:opacity-100',
-        isValid
-          ? 'text-gray-800 ring-gray-300 placeholder:text-gray-400 focus:ring-xy-blue-500'
-          : 'text-red-900 ring-red-700 placeholder:text-red-300 focus:ring-red-700',
+        'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-700 disabled:ring-gray-200 disabled:opacity-100',
+        errorState
+          ? 'text-red-900 ring-red-700 placeholder:text-red-300 focus:ring-red-700'
+          : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-xy-blue-500',
       ]"
-      :value="modelValue"
-      v-bind="{
-      ...$attrs,
-      onChange: ($event) => {
-        emit('update:modelValue', ($event.target as HTMLInputElement).value)
-      },
-    }"
+      :value="modelState"
+      v-bind="$attrs"
+      @change="onChange"
+      @invalid="onInvalid"
     >
-      <option
-        v-if="placeholder"
-        value=""
-        disabled
-        selected
-        v-text="placeholder"
-      />
+      <option value="" disabled selected v-text="placeholder" />
       <option
         v-for="option in options"
         :key="option.value"
         :value="option.value"
+        :disabled="option.disabled"
         v-text="option.label"
       />
     </select>
-    <div class="mt-1">
-      <InputHelp :id="`${inputID}-help`" :text="help" />
+    <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>
   </div>
 </template>

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

@@ -1,53 +1,61 @@
 <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 { TextareaInput } from "@/composables/forms"
+import { ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-withDefaults(
-  defineProps<{
-    help?: string
-    label?: string
-    modelValue?: string | number
-  }>(),
-  {
-    help: "",
-    label: "",
-    modelValue: "",
-  }
-)
+const props = withDefaults(defineProps<TextareaInput>(), defaultInputProps)
+defineEmits(["update:modelValue", "update:error"])
+const targetInput = ref<HTMLInputElement | null>(null)
+const {
+  inputID,
+  isRequired,
+  modelState,
+  errorState,
+  onInvalid,
+  inputValidation,
+} = useInputField({ props, targetInput })
 
-const emit = defineEmits(["update:modelValue"])
-const { inputID, isValid } = useInputField()
+const onInput = (e: Event) => {
+  modelState.value = (e.target as HTMLInputElement).value
+  inputValidation(e)
+}
 </script>
 
 <template>
   <div>
-    <div class="mb-1">
-      <InputLabel :id="`${inputID}-label`" :for="inputID" :label="label" />
-    </div>
+    <InputLabel
+      :id="`${inputID}-label`"
+      class="mb-2"
+      :for="inputID"
+      :label="label"
+      :required="isRequired"
+    />
     <textarea
       :id="inputID"
+      ref="targetInput"
       :aria-labelledby="label ? `${inputID}-label` : undefined"
       :aria-describedby="help ? `${inputID}-help` : 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-600 disabled:ring-gray-200',
-        isValid
-          ? 'text-gray-800 ring-gray-300 placeholder:text-gray-400 focus:ring-xy-blue-500'
-          : 'text-red-900 ring-red-700 placeholder:text-red-300 focus:ring-red-700',
+        'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-700 disabled:ring-gray-200',
+        errorState
+          ? 'text-red-900 ring-red-700 placeholder:text-red-300 focus:ring-red-700'
+          : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-xy-blue-500',
       ]"
-      :value="modelValue"
+      :value="modelState || undefined"
       v-bind="$attrs"
-      @input="
-        emit('update:modelValue', ($event.target as HTMLInputElement).value)
-      "
+      @input="onInput"
+      @invalid="onInvalid"
     />
-    <div class="mt-1">
-      <InputHelp :id="`${inputID}-help`" :text="help"></InputHelp>
+    <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>
   </div>
 </template>

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

@@ -7,7 +7,8 @@ import {
 } from "@headlessui/vue"
 import InputLabel from "@/lib-components/forms/InputLabel.vue"
 import InputHelp from "@/lib-components/forms/InputHelp.vue"
-import { useInputField } from "@/composables/forms"
+import { hasAttribute } from "@/composables/forms"
+import { computed, useAttrs } from "vue"
 
 defineOptions({
   inheritAttrs: false,
@@ -15,19 +16,21 @@ defineOptions({
 
 withDefaults(
   defineProps<{
-    modelValue?: boolean | undefined
+    modelValue?: boolean
     label?: string
     help?: string
   }>(),
   {
-    modelValue: undefined,
     label: "",
     help: "",
   }
 )
 
 const emits = defineEmits(["update:modelValue"])
-const { isDisabled } = useInputField()
+const attrs = useAttrs()
+const isDisabled = computed(() => {
+  return hasAttribute(attrs, "disabled")
+})
 </script>
 <template>
   <SwitchGroup as="div" class="flex items-start">
@@ -51,11 +54,11 @@ const { isDisabled } = useInputField()
       />
     </Switch>
 
-    <div class="ml-3">
+    <div class="ml-3 mt-0.5">
       <SwitchLabel v-if="label">
         <InputLabel
           :label="label"
-          :class="isDisabled && 'cursor-not-allowed'"
+          :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
         />
       </SwitchLabel>