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

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

@@ -1,75 +1,122 @@
 <script setup lang="ts">
-import Uniques from "@/helpers/Uniques"
-import { computed, useAttrs, useSlots } from "vue"
 import FieldsetLegend from "./FieldsetLegend.vue"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
+import { useInputField, defaultInputProps } from "@/composables/forms"
+import type { MultiChoiceInput, ColumnedInput } from "@/composables/forms"
+import { computed, ref } from "vue"
 
-type CheckboxValue = string | number
-type ModelValue = CheckboxValue[]
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = withDefaults(
-  defineProps<{
-    options: {
-      disabled?: boolean
-      help?: string
-      label: string
-      value: CheckboxValue
-    }[]
-    help?: string
-    legend?: string
-    modelValue: ModelValue
-    columns?: 2 | 3 | 4
-  }>(),
-  {
-    help: "",
-    legend: "",
-    columns: undefined,
-  }
+  defineProps<MultiChoiceInput & ColumnedInput>(),
+  defaultInputProps
 )
 
-const emit = defineEmits<{
-  (e: "update:modelValue", modelValue: ModelValue): void
-}>()
-const attrs = useAttrs()
-const slots = useSlots()
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
-const hasLegend = computed(() => {
-  return props.legend !== "" || slots.legend !== undefined
-})
-const onChange = (checked: boolean, val: CheckboxValue) => {
-  let updateModelValue = [...props.modelValue]
+defineEmits(["update:modelValue", "update:error"])
+const targetInput = ref<HTMLInputElement | null>(null)
+const { inputID, isDisabled, modelState, errorState, validate } = useInputField(
+  { props, targetInput }
+)
+
+const onChange = (e: Event, val: string | number) => {
+  const checked = (e.target as HTMLInputElement).checked
+
+  if (!Array.isArray(modelState.value)) {
+    modelState.value = []
+  }
 
   if (checked) {
-    updateModelValue.push(val)
+    modelState.value.push(val)
   } else {
-    updateModelValue.splice(updateModelValue.indexOf(val), 1)
+    modelState.value.splice(modelState.value.indexOf(val), 1)
+  }
+
+  validate(e)
+}
+
+const selectionCount = computed(() => {
+  if (Array.isArray(modelState.value)) {
+    return modelState.value.length
+  }
+
+  return 0
+})
+
+const minCount = computed(() => {
+  return props.min || 0
+})
+
+const maxCount = computed(() => {
+  return (
+    props.max ||
+    props.options.filter((opt) => {
+      return !opt.disabled
+    }).length
+  )
+})
+
+const countError = computed(() => {
+  if (selectionCount.value < minCount.value) {
+    return `Please select ${minCount.value} of these option${
+      minCount.value > 1 ? "s" : ""
+    }.`
+  }
+
+  if (selectionCount.value > maxCount.value) {
+    return `Please select only ${maxCount.value} of these option${
+      maxCount.value > 1 ? "s" : ""
+    }.`
   }
 
-  emit("update:modelValue", updateModelValue)
+  return ""
+})
+
+const setValidationError = () => {
+  if (!errorState.value) {
+    errorState.value = countError.value
+  }
 }
 </script>
+
 <template>
   <fieldset
-    class="space-y-5"
-    :aria-labelledby="hasLegend ? `${uuid}-legend` : undefined"
-    :aria-describedby="help ? `${uuid}-help` : undefined"
+    class="relative space-y-4"
+    :aria-labelledby="label ? `${inputID}-legend` : undefined"
+    :aria-describedby="help ? `${inputID}-help` : undefined"
   >
-    <div v-if="hasLegend || help" class="space-y-0.5">
-      <FieldsetLegend :id="`${uuid}-legend`">
-        <div v-if="legend">{{ legend }}</div>
-        <slot v-if="$slots.legend" name="legend"></slot>
-      </FieldsetLegend>
-      <InputHelp :id="`${uuid}-help`" tag="p" :text="help" />
+    <div v-if="label">
+      <FieldsetLegend
+        :id="`${inputID}-legend`"
+        :label="label"
+        :required="minCount > 0"
+      />
+      <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>
+
+    <input
+      v-if="countError || errorState"
+      ref="targetInput"
+      required
+      class="sr-only top-1 left-1"
+      aria-hidden
+      type="checkbox"
+      @invalid="setValidationError"
+    />
+
     <div class="flex">
       <div
-        class="grid gap-4"
+        class="grid gap-y-6"
         :class="{
-          'sm:grid sm:gap-y-4 sm:gap-x-5 sm:space-y-0': columns !== undefined,
+          'sm:grid sm:gap-x-5 sm:space-y-0': columns !== undefined,
           'sm:grid-cols-2': columns === 2,
           'sm:grid-cols-3': columns === 3,
-          'sm:grid-cols-4': columns === 4,
         }"
       >
         <div
@@ -79,42 +126,38 @@ const onChange = (checked: boolean, val: CheckboxValue) => {
         >
           <div class="flex items-center h-5">
             <input
-              :id="`${uuid}-${index}`"
-              :aria-labelledby="`${uuid}-${index}-label`"
+              :id="`${inputID}-${index}`"
+              :aria-labelledby="`${inputID}-${index}-label`"
               :aria-describedby="
-                option?.help && option.help
-                  ? `${uuid}-${index}-help`
-                  : undefined
+                option.help ? `${inputID}-${index}-help` : undefined
               "
-              :checked="modelValue.includes(option.value)"
-              :disabled="option.disabled === true ? true : undefined"
-              class="focus:ring-xy-blue-500 h-4 w-4 text-xy-blue border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+              :checked="modelValue?.includes(option.value)"
+              :disabled="option.disabled"
+              :class="[
+                'h-4 w-4 rounded 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',
+              ]"
               type="checkbox"
-              v-bind="{
-              onChange: ($event) => { 
-                onChange(($event.target as HTMLInputElement).checked, option.value)
-              },
-              ...$attrs,
-            }"
+              v-bind="$attrs"
+              @change="onChange($event, option.value)"
             />
           </div>
           <div class="ml-3">
             <InputLabel
-              :id="`${uuid}-${index}-label`"
-              class="mt-auto"
-              :disabled="
-                ($attrs.hasOwnProperty('disabled') &&
-                  $attrs.disabled !== false) ||
-                option.disabled === true
-              "
-              :for="`${uuid}-${index}`"
+              :id="`${inputID}-${index}-label`"
+              :for="`${inputID}-${index}`"
               :label="option.label"
+              :class="
+                isDisabled || option.disabled
+                  ? 'cursor-not-allowed'
+                  : 'cursor-pointer'
+              "
             />
-            <InputHelp
-              :id="`${uuid}-${index}-help`"
-              class="-mt-1"
-              :text="option.help"
-            />
+            <InputHelp :id="`${inputID}-${index}-help`" :text="option.help" />
           </div>
         </div>
       </div>

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

@@ -1,59 +1,74 @@
 <script setup lang="ts">
-import Uniques from "@/helpers/Uniques"
-import { computed, useAttrs, useSlots } from "vue"
+import { computed, ref } from "vue"
 import FieldsetLegend from "./FieldsetLegend.vue"
 import InputHelp from "./InputHelp.vue"
 import InputLabel from "./InputLabel.vue"
+import { useInputField, defaultInputProps } from "@/composables/forms"
+import type { OptionsInput, ColumnedInput } from "@/composables/forms"
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = withDefaults(
-  defineProps<{
-    options: {
-      disabled?: boolean
-      help?: string
-      label: string
-      value: string | number
-    }[]
-    help?: string
-    legend?: string
-    modelValue?: string | number
-    columns?: 2 | 3 | 4
-  }>(),
-  {
-    help: "",
-    legend: "",
-    modelValue: undefined,
-    columns: undefined,
-  }
+  defineProps<OptionsInput & ColumnedInput>(),
+  defaultInputProps
 )
-const emits = defineEmits(["update:modelValue"])
-const attrs = useAttrs()
-const slots = useSlots()
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
-const hasLegend = computed(() => {
-  return props.legend !== "" || slots.legend !== undefined
+
+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"
-    :aria-labelledby="hasLegend ? `${uuid}-legend` : undefined"
-    :aria-describedby="help ? `${uuid}-help` : undefined"
+    class="space-y-4"
+    :aria-labelledby="label ? `${inputID}-legend` : undefined"
+    :aria-describedby="help ? `${inputID}-help` : undefined"
   >
-    <div v-if="hasLegend || help" class="space-y-0.5">
-      <FieldsetLegend :id="`${uuid}-legend`">
-        <div v-if="legend">{{ legend }}</div>
-        <slot v-if="$slots.legend" name="legend"></slot>
-      </FieldsetLegend>
-      <InputHelp :id="`${uuid}-help`" tag="p" :text="help" />
+    <div v-if="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-4"
+        class="grid gap-y-6"
         :class="{
-          'sm:grid sm:gap-y-4 sm:gap-x-5 sm:space-y-0': columns !== undefined,
+          'sm:grid sm:gap-x-5 sm:space-y-0': columns !== undefined,
           'sm:grid-cols-2': columns === 2,
           'sm:grid-cols-3': columns === 3,
-          'sm:grid-cols-4': columns === 4,
         }"
       >
         <div
@@ -63,44 +78,42 @@ const hasLegend = computed(() => {
         >
           <div class="flex items-center h-5">
             <input
-              :id="`${uuid}-${index}`"
+              :id="`${inputID}-${index}`"
+              ref="radios"
               :aria-describedby="
-                option?.help && option.help
-                  ? `${uuid}-${index}-help`
-                  : undefined
+                option.help ? `${inputID}-${index}-help` : undefined
               "
-              :aria-labelledby="`${uuid}-${index}-label`"
-              :checked="modelValue === option.value"
-              class="w-4 h-4 border-gray-600 focus:ring-xy-blue-500 text-xy-blue disabled:opacity-50 disabled:cursor-not-allowed"
-              :disabled="option.disabled === true ? true : undefined"
-              :name="uuid"
+              :aria-labelledby="`${inputID}-${index}-label`"
+              :checked="modelState === option.value"
+              :class="[
+                '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">
             <InputLabel
-              :id="`${uuid}-${index}-label`"
-              class="mt-auto"
-              :disabled="
-                ($attrs.hasOwnProperty('disabled') &&
-                  $attrs.disabled !== false) ||
-                option.disabled === true
-              "
-              :for="`${uuid}-${index}`"
+              :id="`${inputID}-${index}-label`"
+              :for="`${inputID}-${index}`"
               :label="option.label"
+              :class="
+                isDisabled || option.disabled
+                  ? 'cursor-not-allowed'
+                  : 'cursor-pointer'
+              "
             />
-            <InputHelp
-              :id="`${uuid}-${index}-help`"
-              class="-mt-1"
-              :text="option.help"
-            />
+            <InputHelp :id="`${inputID}-${index}-help`" :text="option.help" />
           </div>
         </div>
       </div>

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

@@ -1,5 +1,4 @@
-<script setup lang="ts">
-import Uniques from "@/helpers/Uniques"
+<script setup lang="ts" generic="T extends InputOption">
 import {
   RadioGroup,
   RadioGroupDescription,
@@ -7,95 +6,82 @@ import {
   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"
+import { defaultInputProps, useInputField } from "@/composables/forms"
+import type {
+  ColumnedInput,
+  InputOption,
+  OptionsInput,
+} from "@/composables/forms"
+import { computed, ref } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 /*
  * 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
-    legend?: string
-    modelValue?: ModelValue
-    options: RadioCard[]
-  }>(),
-  {
-    columns: undefined,
-    help: "",
-    legend: "",
-    modelValue: undefined,
-  }
+  defineProps<RadioCards & ColumnedInput>(),
+  defaultInputProps
 )
 
-const emit = defineEmits<{
-  (e: "update:modelValue", modelValue: ModelValue): void
-}>()
-
-const attrs = useAttrs()
-const uuid = 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 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 {
+  inputID,
+  isDisabled,
+  isRequired,
+  nameAttr,
+  modelState,
+  errorState,
+  onInvalid,
+} = useInputField({ props, targetInput })
 
-const onChange = (val: ModelValue) => {
-  internalState.value = val
-  invalid.value = false
-  emit("update:modelValue", val)
+const onUpdate = (val: unknown) => {
+  if (val) {
+    errorState.value = ""
+  }
 }
-
-const nameAttr = computed(() => {
-  return typeof attrs.name === "string" && attrs.name !== "" ? attrs.name : uuid
-})
 </script>
 
 <template>
   <RadioGroup
-    :model-value="checkedState"
-    :disabled="typeof attrs.disabled === 'boolean' ? attrs.disabled : false"
-    :aria-invalid="invalid === true ? 'true' : null"
-    :aria-errormessage="invalid === true ? `error-${uuid}` : null"
-    @update:model-value="onChange"
+    v-model="modelState"
+    :disabled="isDisabled"
+    :aria-invalid="errorState ? 'true' : null"
+    :aria-errormessage="errorState ? `error-${inputID}` : null"
+    @update:model-value="onUpdate"
   >
-    <RadioGroupLabel v-if="legend" class="block">
-      <FieldsetLegend tag="div">{{ legend }}</FieldsetLegend>
+    <RadioGroupLabel v-if="label" class="block">
+      <FieldsetLegend tag="div" :label="label" :required="isRequired" />
     </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 v-if="errorState" :id="`error-${inputID}`">
+      <p class="text-sm text-red-700">{{ errorState }}</p>
     </div>
 
     <div
@@ -108,17 +94,28 @@ const nameAttr = computed(() => {
       <RadioGroupOption
         v-for="option in options"
         :key="option.value"
-        v-slot="{ active, checked, disabled }"
+        v-slot="{
+          active,
+          checked,
+          disabled,
+        }: {
+          active: boolean,
+          checked: boolean,
+          disabled: boolean,
+        }"
         as="template"
-        :disabled="option?.disabled ? option.disabled : false"
+        :disabled="isDisabled || option.disabled"
         :value="option.value"
       >
         <div
-          class="relative bg-white border rounded-lg shadow-sm p-4 flex cursor-pointer focus:outline-none"
+          class="relative border rounded-lg shadow-sm p-4 flex focus:outline-none"
           :class="[
-            checked ? 'border-transparent' : 'border-gray-300',
+            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' : '',
-            disabled ? 'cursor-not-allowed opacity-75' : '',
           ]"
         >
           <div class="flex-1 flex pr-1">
@@ -130,16 +127,18 @@ const nameAttr = computed(() => {
                   :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"
+                  class="text-sm/5 font-medium mt-4 text-gray-800"
                 >
                   <slot
                     name="sublabel"
@@ -165,16 +164,19 @@ const nameAttr = computed(() => {
             ]"
             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"
             :name="nameAttr"
-            :required="attrs.required !== undefined && attrs.required !== false"
+            :required="isRequired"
             tabindex="-1"
             type="radio"
             :value="option.value"
-            @invalid="invalid = true"
+            @invalid="onInvalid"
           />
         </div>
       </RadioGroupOption>