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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.7.5-dev",
+  "version": "0.7.5-rc2",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -52,7 +52,7 @@
     "tsc-alias": "^1.8.5",
     "typescript": "^5.0.4",
     "vite": "^4.3.9",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.8.18"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",

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

@@ -1,69 +1,107 @@
 <script setup lang="ts">
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
-import { useInputField } from "@/composables/forms"
+import {
+  useInputField,
+  defaultInputProps,
+  emailPattern,
+  looseToNumber,
+  passwordPattern,
+  phonePattern,
+} from "@/composables/forms"
+import type { TextLikeInput } from "@/composables/forms"
+import { computed, ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-type TextLikeInputs =
-  | "date"
-  | "datetime-local"
-  | "email"
-  | "month"
-  | "number"
-  | "password"
-  | "search"
-  | "tel"
-  | "text"
-  | "time"
-  | "url"
-  | "week"
+const props = withDefaults(defineProps<TextLikeInput>(), defaultInputProps)
 
-withDefaults(
-  defineProps<{
-    type: TextLikeInputs
-    help?: string
-    label?: string
-    modelValue?: string | number
-  }>(),
-  {
-    help: "",
-    label: "",
-    modelValue: "",
+defineEmits(["update:modelValue", "update:error"])
+const targetInput = ref<HTMLInputElement | null>(null)
+const {
+  errorState,
+  modelState,
+  inputID,
+  isRequired,
+  onInvalid,
+  inputValidation,
+} = useInputField({ props, targetInput })
+
+// A wrapper component may need to have direct access
+// to the underlying HTMLInputElement that BaseInput binds to
+// example: GoogleMaps Autocomplete inputs
+defineExpose({ input: targetInput })
+
+const typeAttributes = computed(() => {
+  switch (props.type) {
+    case "number":
+      return {
+        max: Number.MAX_SAFE_INTEGER,
+        min: Number.MIN_SAFE_INTEGER,
+      }
+    case "email":
+      return {
+        pattern: emailPattern,
+      }
+    case "password":
+      return {
+        pattern: passwordPattern,
+      }
+    case "tel":
+      return {
+        pattern: phonePattern,
+      }
+    default:
+      return {}
   }
-)
+})
 
-const emit = defineEmits(["update:modelValue"])
-const { inputID, isValid } = useInputField()
+const onInput = (e: Event) => {
+  let val = (e.target as HTMLInputElement).value
+
+  if (props.type === "number") {
+    val = looseToNumber(val)
+  }
+
+  modelState.value = val
+
+  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"
+    />
     <input
       :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',
       ]"
+      :placeholder="placeholder"
       :type="type"
-      :value="modelValue"
-      v-bind="$attrs"
-      @input="
-        emit('update:modelValue', ($event.target as HTMLInputElement).value)
-      "
+      :value="modelState"
+      v-bind="{ ...typeAttributes, ...$attrs }"
+      @input="onInput"
+      @invalid="onInvalid"
     />
-    <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/Checkbox.vue

@@ -1,49 +1,55 @@
 <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<{
-    label?: string
-    help?: string
-    modelValue: boolean
-  }>(),
-  {
-    label: "",
-    help: "",
-  }
-)
-const emits = defineEmits(["update:modelValue"])
-const { inputID, isDisabled, isValid } = useInputField()
+const props = withDefaults(defineProps<BooleanInput>(), defaultInputProps)
+
+defineEmits(["update:modelValue", "update:error"])
+const targetInput = ref<HTMLInputElement | null>(null)
+const {
+  inputID,
+  isDisabled,
+  isRequired,
+  errorState,
+  modelState,
+  validate,
+  onInvalid,
+} = useInputField({ props, targetInput })
+
+const onChange = (e: Event) => {
+  modelState.value = (e.target as HTMLInputElement).checked
+  validate(e)
+}
 </script>
 
 <template>
   <div class="relative flex items-start">
-    <div class="flex items-center h-6">
+    <div class="flex items-center h-5">
       <input
         :id="inputID"
+        ref="targetInput"
         :aria-labelledby="label ? `${inputID}-label` : undefined"
         :aria-describedby="help ? `${inputID}-help` : undefined"
-        :checked="modelValue"
+        :checked="modelState || undefined"
         :class="[
-          'h-4 w-4 rounded',
-          'border-gray-300 text-xy-blue',
+          'h-4 w-4 rounded 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',
-          isValid ? 'focus:ring-xy-blue-500' : 'focus:ring-red-700',
+          errorState
+            ? 'border-red-700 focus:ring-red-700'
+            : 'border-gray-300 focus:ring-xy-blue-500',
         ]"
         type="checkbox"
-        v-bind="{
-          onChange: ($event) => {
-            emits('update:modelValue', ($event.target as HTMLInputElement).checked)
-          },
-          ...$attrs,
-        }"
+        v-bind="$attrs"
+        @change="onChange"
+        @invalid="onInvalid"
       />
     </div>
     <div class="ml-3">
@@ -51,9 +57,13 @@ const { inputID, isDisabled, isValid } = useInputField()
         :id="`${inputID}-label`"
         :for="inputID"
         :label="label"
-        :class="isDisabled && 'cursor-not-allowed'"
+        :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>
     </div>
   </div>
 </template>

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

@@ -1,42 +1,38 @@
 <script setup lang="ts">
 import flatpickr from "flatpickr"
 import "flatpickr/dist/flatpickr.min.css"
-import { onMounted } from "vue"
-import BaseInput from "./BaseInput.vue"
-import { useInputField } from "@/composables/forms"
+import { onMounted, ref } from "vue"
+import { defaultInputProps, useInputField } from "@/composables/forms"
+import type { DateRangeInput } from "@/composables/forms"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: {
-      minDate: number
-      maxDate: number
+const props = withDefaults(defineProps<DateRangeInput>(), {
+  ...defaultInputProps,
+  maxRange: 0,
+  modelValue: () => {
+    return {
+      maxDate: 0,
+      minDate: 0,
     }
-    maxRange?: number
-    startDate?: number
-    label?: string
-    help?: string
-  }>(),
-  {
-    maxRange: 0,
-    startDate: 0,
-    label: "",
-    help: "",
-  }
-)
+  },
+  placeholder: "mm-dd-yyyy range",
+  startDate: 0,
+})
 
-const emits = defineEmits(["update:modelValue"])
-const { inputID } = useInputField()
+const targetInput = ref<HTMLInputElement | null>(null)
+const { errorState, modelState, inputID, isRequired, onInvalid, validate } =
+  useInputField({ props, targetInput })
 
 const updateModelValue = (value: { minDate: number; maxDate: number }) => {
-  emits("update:modelValue", value)
+  modelState.value = value
 }
 
 onMounted(() => {
   const opts: flatpickr.Options.Options = {
+    allowInput: true,
     dateFormat: "m-d-Y",
     mode: "range",
     maxDate: new Date(), // So far, we cannot have options past today for ranges
@@ -92,11 +88,35 @@ onMounted(() => {
 </script>
 
 <template>
-  <BaseInput
-    :id="inputID"
-    type="text"
-    placeholder="mm-dd-yyyy range"
-    :label="label"
-    :help="help"
-  />
+  <div>
+    <InputLabel
+      :id="`${inputID}-label`"
+      class="mb-2"
+      :for="inputID"
+      :label="label"
+      :required="isRequired"
+    />
+    <input
+      :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-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',
+      ]"
+      :placeholder="placeholder"
+      v-bind="$attrs"
+      type="text"
+      @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>
+  </div>
 </template>

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

@@ -1,23 +1,43 @@
 <script setup lang="ts">
-withDefaults(
+import { computed } from "vue"
+
+const props = withDefaults(
   defineProps<{
     label?: string
+    required?: boolean
     tag?: string
   }>(),
   {
     label: "",
+    required: false,
     tag: "legend",
   }
 )
+
+const labelDisplay = computed((): string => {
+  if (!props.required) {
+    return props.label
+  }
+
+  // remove trailing * on the existing label
+  const regex = /\*$/gm
+
+  if (regex.exec(props.label) !== null) {
+    return props.label.substring(0, props.label.length - 1)
+  }
+
+  return props.label
+})
 </script>
 
 <template>
   <component
     :is="tag"
     v-if="label"
-    class="block text-base/6 font-medium text-gray-800"
+    class="block text-base leading-snug font-medium text-gray-800"
     v-bind="$attrs"
   >
-    {{ label }}
+    {{ labelDisplay }}
+    <span v-if="props.required" class="text-red-700/80">*</span>
   </component>
 </template>

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

@@ -14,7 +14,7 @@ withDefaults(
   <component
     :is="tag"
     v-if="text"
-    class="text-sm leading-6 font-normal text-gray-600"
+    class="text-sm leading-snug font-normal text-gray-600"
     v-bind="$attrs"
   >
     {{ text }}

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

@@ -1,23 +1,43 @@
 <script setup lang="ts">
-withDefaults(
+import { computed } from "vue"
+
+const props = withDefaults(
   defineProps<{
     label?: string
+    required?: boolean
     tag?: string
   }>(),
   {
     label: "",
+    required: false,
     tag: "label",
   }
 )
+
+const labelDisplay = computed((): string => {
+  if (!props.required) {
+    return props.label
+  }
+
+  // remove trailing * on the existing label
+  const regex = /\*$/gm
+
+  if (regex.exec(props.label) !== null) {
+    return props.label.substring(0, props.label.length - 1)
+  }
+
+  return props.label
+})
 </script>
 
 <template>
   <component
     :is="tag"
-    v-if="label"
-    class="block text-sm/6 font-medium text-gray-800"
+    v-if="labelDisplay"
+    class="block text-sm leading-snug font-medium text-gray-800"
     v-bind="$attrs"
   >
-    {{ label }}
+    {{ labelDisplay }}
+    <span v-if="props.required" class="text-red-700/80">*</span>
   </component>
 </template>

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

@@ -2,68 +2,117 @@
 import FieldsetLegend from "./FieldsetLegend.vue"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
-import { useInputField } from "@/composables/forms"
+import { useInputField, defaultInputProps } from "@/composables/forms"
+import type { MultiChoiceInput, ColumnedInput } from "@/composables/forms"
+import { computed, ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-type CheckboxValue = string | number
-type ModelValue = CheckboxValue[]
-
 const props = withDefaults(
-  defineProps<{
-    options: {
-      disabled?: boolean
-      help?: string
-      label: string
-      value: CheckboxValue
-    }[]
-    help?: string
-    label?: string
-    modelValue: ModelValue
-    columns?: 2 | 3
-  }>(),
-  {
-    help: "",
-    label: "",
-    columns: undefined,
-  }
+  defineProps<MultiChoiceInput & ColumnedInput>(),
+  defaultInputProps
 )
 
-const emit = defineEmits<{
-  (e: "update:modelValue", modelValue: ModelValue): void
-}>()
+defineEmits(["update:modelValue", "update:error"])
+const targetInput = ref<HTMLInputElement | null>(null)
+const { inputID, isDisabled, modelState, errorState, validate } = useInputField(
+  { props, targetInput }
+)
 
-const { inputID, isDisabled } = useInputField()
+const onChange = (e: Event, val: string | number) => {
+  const checked = (e.target as HTMLInputElement).checked
 
-const onChange = (checked: boolean, val: CheckboxValue) => {
-  let updateModelValue = [...props.modelValue]
+  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)
   }
 
-  emit("update:modelValue", updateModelValue)
+  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" : ""
+    }.`
+  }
+
+  return ""
+})
+
+const setValidationError = () => {
+  if (!errorState.value) {
+    errorState.value = countError.value
+  }
 }
 </script>
 
 <template>
   <fieldset
-    class="space-y-5"
+    class="relative 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="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-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,
@@ -75,28 +124,26 @@ const onChange = (checked: boolean, val: CheckboxValue) => {
           :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}`"
               :aria-labelledby="`${inputID}-${index}-label`"
               :aria-describedby="
                 option.help ? `${inputID}-${index}-help` : undefined
               "
-              :checked="modelValue.includes(option.value)"
+              :checked="modelValue?.includes(option.value)"
               :disabled="option.disabled"
               :class="[
-                'h-4 w-4 rounded',
-                'border-gray-300 text-xy-blue focus:ring-xy-blue-500',
+                '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">
@@ -104,7 +151,11 @@ const onChange = (checked: boolean, val: CheckboxValue) => {
               :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>