@xy-planning-network/trees 0.10.4 → 0.10.6-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.10.4",
+  "version": "0.10.6-rc1",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -38,7 +38,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.7",
     "@types/node": "^18.15.11",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@vue/eslint-config-prettier": "~8.0.0",
     "@vue/eslint-config-typescript": "~13.0.0",
     "autoprefixer": "^10.4.14",
@@ -53,8 +53,8 @@
     "typescript": "~5.4.5",
     "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-markdown": "^0.25.2",
-    "vite": "^4.3.9",
-    "vue-tsc": "^2.0.29"
+    "vite": "^5.4.10",
+    "vue-tsc": "^2.1.6"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
@@ -69,7 +69,7 @@
     "autoprefixer": "^10.4.7",
     "postcss": "^8.4.14",
     "tailwindcss": "^3.1.4",
-    "vue": "^3.3.4"
+    "vue": "^3.5.12"
   },
   "engines": {
     "node": ">=20"

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

@@ -5,29 +5,34 @@ import InputError from "./InputError.vue"
 import {
   useInputField,
   defaultInputProps,
+  defaultModelOpts,
   emailPattern,
   looseToNumber,
   phonePattern,
 } from "@/composables/forms"
 import type { TextLikeInput } from "@/composables/forms"
-import { computed, ref } from "vue"
+import { computed, useTemplateRef } from "vue"
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(defineProps<TextLikeInput>(), defaultInputProps)
+const modelState = defineModel<TextLikeInput["modelValue"]>({
+  ...defaultModelOpts,
+  set: (v) => {
+    if (props.type === "number") {
+      return looseToNumber(v)
+    }
 
-defineEmits(["update:modelValue", "update:error"])
-const input = ref<HTMLInputElement | null>(null)
-const {
-  errorState,
-  modelState,
-  inputID,
-  isRequired,
-  onInvalid,
-  inputValidation,
-} = useInputField(props)
+    if (typeof v === "string") {
+      return v.trim()
+    }
+  },
+})
+const input = useTemplateRef("input")
+const { errorState, inputID, isRequired, onInvalid, inputValidation } =
+  useInputField(props)
 
 // A wrapper component may need to have direct access
 // to the underlying HTMLInputElement that BaseInput binds to
@@ -53,22 +58,6 @@ const typeAttributes = computed(() => {
       return {}
   }
 })
-
-const onInput = (e: Event) => {
-  let val = (e.target as HTMLInputElement).value
-
-  if (props.type === "number") {
-    val = looseToNumber(val)
-  }
-
-  if (typeof val === "string") {
-    val = val.trim()
-  }
-
-  modelState.value = val
-
-  inputValidation(e)
-}
 </script>
 
 <template>
@@ -83,6 +72,7 @@ const onInput = (e: Event) => {
     <input
       :id="inputID"
       ref="input"
+      v-model="modelState"
       :aria-labelledby="label ? `${inputID}-label` : undefined"
       :aria-describedby="help ? `${inputID}-help` : undefined"
       :aria-errormessage="errorState ? `${inputID}-error` : undefined"
@@ -95,9 +85,8 @@ const onInput = (e: Event) => {
       ]"
       :placeholder="placeholder"
       :type="type"
-      :value="modelState"
       v-bind="{ ...typeAttributes, ...$attrs }"
-      @input="onInput"
+      @input="inputValidation"
       @invalid="onInvalid"
     />
     <InputHelp :id="`${inputID}-help`" class="mt-1" :text="help" />

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

@@ -2,7 +2,11 @@
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
 import InputError from "./InputError.vue"
-import { useInputField, defaultInputProps } from "@/composables/forms"
+import {
+  useInputField,
+  defaultInputProps,
+  defaultModelOpts,
+} from "@/composables/forms"
 import type { BooleanInput } from "@/composables/forms"
 
 defineOptions({
@@ -10,23 +14,17 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<BooleanInput>(), defaultInputProps)
+const modelState = defineModel<BooleanInput["modelValue"]>(defaultModelOpts)
 
-defineEmits(["update:modelValue", "update:error"])
 const {
   aria,
   inputID,
   isDisabled,
   isRequired,
   errorState,
-  modelState,
   validate,
   onInvalid,
 } = useInputField(props)
-
-const onChange = (e: Event) => {
-  modelState.value = (e.target as HTMLInputElement).checked
-  validate(e)
-}
 </script>
 
 <template>
@@ -34,6 +32,7 @@ const onChange = (e: Event) => {
     <div class="flex items-center h-5">
       <input
         :id="inputID"
+        v-model="modelState"
         :aria-labelledby="aria.labelledby"
         :aria-describedby="aria.describedby"
         :aria-errormessage="aria.errormessage"
@@ -48,7 +47,7 @@ const onChange = (e: Event) => {
         ]"
         type="checkbox"
         v-bind="$attrs"
-        @change="onChange"
+        @change="validate"
         @invalid="onInvalid"
       />
     </div>

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

@@ -5,7 +5,11 @@ import InputError from "./InputError.vue"
 import flatpickr from "flatpickr"
 import "flatpickr/dist/flatpickr.min.css"
 import { onMounted } from "vue"
-import { defaultInputProps, useInputField } from "@/composables/forms"
+import {
+  defaultInputProps,
+  defaultModelOpts,
+  useInputField,
+} from "@/composables/forms"
 import type { DateRangeInput } from "@/composables/forms"
 
 defineOptions({
@@ -15,27 +19,18 @@ defineOptions({
 const props = withDefaults(defineProps<DateRangeInput>(), {
   ...defaultInputProps,
   maxRange: 0,
-  modelValue: () => {
-    return {
-      maxDate: 0,
-      minDate: 0,
-    }
-  },
   placeholder: "mm-dd-yyyy range",
   startDate: 0,
 })
+const modelState = defineModel<DateRangeInput["modelValue"]>({
+  ...defaultModelOpts,
+  default: { maxDate: 0, minDate: 0 },
+})
 
-const {
-  aria,
-  errorState,
-  modelState,
-  inputID,
-  isRequired,
-  onInvalid,
-  validate,
-} = useInputField(props)
+const { aria, errorState, inputID, isRequired, onInvalid, validate } =
+  useInputField(props)
 
-const updateModelValue = (value: { minDate: number; maxDate: number }) => {
+const updateModelState = (value: { minDate: number; maxDate: number }) => {
   modelState.value = value
 }
 
@@ -48,14 +43,14 @@ onMounted(() => {
     minDate: props.startDate,
     onClose: (selectedDates) => {
       if (selectedDates.length === 2) {
-        updateModelValue({
+        updateModelState({
           minDate: selectedDates[0].setUTCHours(0, 0, 0, 0) / 1000,
           maxDate: Math.floor(
             selectedDates[1].setUTCHours(23, 59, 59, 999) / 1000
           ),
         })
       } else if (selectedDates.length === 0) {
-        updateModelValue({
+        updateModelState({
           minDate: 0,
           maxDate: 0,
         })
@@ -64,10 +59,14 @@ onMounted(() => {
   }
 
   // Handle initial values if set
-  if (props.modelValue.minDate != 0 && props.modelValue.maxDate != 0) {
+  if (
+    modelState.value && // NOTE(spk): even with a "default" value this may be a literal null
+    modelState.value.minDate != 0 &&
+    modelState.value.maxDate != 0
+  ) {
     opts.defaultDate = [
-      props.modelValue.minDate * 1000,
-      props.modelValue.maxDate * 1000,
+      modelState.value.minDate * 1000,
+      modelState.value.maxDate * 1000,
     ]
   }
 

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

@@ -6,36 +6,27 @@ import {
   useInputField,
   defaultInputProps,
   toDatetimeLocal,
+  defaultModelOpts,
 } from "@/composables/forms"
 import type { DateTimeInput } from "@/composables/forms"
-import { computed, ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(defineProps<DateTimeInput>(), defaultInputProps)
+const modelState = defineModel<DateTimeInput["modelValue"]>({
+  ...defaultModelOpts,
+  get: (v) => {
+    return v ? toDatetimeLocal(v) : v
+  },
+  set: (v) => {
+    return v ? new Date(v).toISOString() : v
+  },
+})
 
-defineEmits(["update:modelValue", "update:error"])
-const input = ref<HTMLInputElement | null>(null)
-const {
-  errorState,
-  modelState,
-  inputID,
-  isRequired,
-  onInvalid,
-  inputValidation,
-} = useInputField(props)
-
-const inputValue = computed(() => toDatetimeLocal(modelState.value))
-
-const onInput = (e: Event) => {
-  let val = (e.target as HTMLInputElement).value
-
-  modelState.value = val ? new Date(val).toISOString() : val
-
-  inputValidation(e)
-}
+const { errorState, inputID, isRequired, onInvalid, inputValidation } =
+  useInputField(props)
 </script>
 
 <template>
@@ -49,7 +40,7 @@ const onInput = (e: Event) => {
     />
     <input
       :id="inputID"
-      ref="input"
+      v-model="modelState"
       :aria-labelledby="label ? `${inputID}-label` : undefined"
       :aria-describedby="help ? `${inputID}-help` : undefined"
       :aria-errormessage="errorState ? `${inputID}-error` : undefined"
@@ -62,9 +53,8 @@ const onInput = (e: Event) => {
       ]"
       :placeholder="placeholder"
       type="datetime-local"
-      :value="inputValue"
       v-bind="$attrs"
-      @input="onInput"
+      @input="inputValidation"
       @invalid="onInvalid"
     />
     <InputHelp :id="`${inputID}-help`" class="mt-1" :text="help" />

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

@@ -4,8 +4,12 @@ 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"
+import {
+  MultiChoiceInput,
+  ColumnedInput,
+  defaultModelOpts,
+} from "@/composables/forms"
+import { computed, useTemplateRef } from "vue"
 
 defineOptions({
   inheritAttrs: false,
@@ -16,62 +20,52 @@ const props = withDefaults(
   defaultInputProps
 )
 
-defineEmits(["update:modelValue", "update:error"])
-const { aria, inputID, isDisabled, modelState, errorState, validate } =
-  useInputField(props)
-
-const onChange = (e: Event, val: string | number) => {
-  const checked = (e.target as HTMLInputElement).checked
-
-  if (!Array.isArray(modelState.value)) {
-    modelState.value = []
-  }
-
-  if (checked) {
-    modelState.value.push(val)
-  } else {
-    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 modelState = defineModel<MultiChoiceInput["modelValue"]>({
+  ...defaultModelOpts,
+  // NOTE(spk): Vue handling of explicit null props values vs undefined props values
+  // means we can't rely on the the "default" param of defineModel here.  Ensuring the
+  // getter returns an array type allows for a consistent checkbox v-model binding similar to
+  // the example in the official Vue docs.
+  //
+  // When a parent component passes a null v-model the parent ref stays null until a mutation occurs
+  // this is consistent with current input components.
+  get: (v) => {
+    if (!Array.isArray(v)) {
+      return []
+    }
+
+    return v
+  },
 })
 
+const { aria, inputID, isDisabled, errorState, validate } = useInputField(props)
+
 const minCount = computed(() => {
-  return props.min || 0
+  return props.min || null
 })
 
 const maxCount = computed(() => {
-  return (
-    props.max ||
-    props.options.filter((opt) => {
-      return !opt.disabled
-    }).length
-  )
+  return props.max || null
 })
 
 const countError = computed(() => {
+  const count = modelState.value?.length || 0
+
   // min not reached, no max is set
-  if (selectionCount.value < minCount.value && !props.max) {
+  if (minCount.value !== null && count < minCount.value) {
     return `Please select at least ${minCount.value} of these options.`
   }
 
   // max is reached, no min set
-  if (selectionCount.value > maxCount.value && !props.min) {
+  if (maxCount.value !== null && count > maxCount.value) {
     return `Please limit your selection to ${maxCount.value} of these options.`
   }
 
-  // min and max are both set and out of range
+  // min and max are both set and at least on of them is out of range
   if (
-    selectionCount.value < minCount.value ||
-    selectionCount.value > maxCount.value
+    minCount.value !== null &&
+    maxCount.value !== null &&
+    (count < minCount.value || count > maxCount.value)
   ) {
     return `Please select between ${minCount.value} and ${maxCount.value} of these options.`
   }
@@ -79,7 +73,7 @@ const countError = computed(() => {
   return ""
 })
 
-const errorInput = ref<HTMLInputElement | null>(null)
+const errorInput = useTemplateRef("errorInput")
 const setValidationError = () => {
   if (!errorState.value) {
     errorState.value = countError.value
@@ -100,7 +94,7 @@ const setValidationError = () => {
       <FieldsetLegend
         :id="aria.labelledby"
         :label="label"
-        :required="minCount > 0"
+        :required="minCount ? true : false"
       />
       <InputHelp
         v-if="help"
@@ -129,11 +123,11 @@ const setValidationError = () => {
           <div class="flex items-center h-5">
             <input
               :id="`${inputID}-${index}`"
+              v-model="modelState"
               :aria-labelledby="`${inputID}-${index}-label`"
               :aria-describedby="
                 option.help ? `${inputID}-${index}-help` : undefined
               "
-              :checked="modelValue?.includes(option.value)"
               :disabled="option.disabled"
               :class="[
                 'h-4 w-4 rounded cursor-pointer',
@@ -144,8 +138,9 @@ const setValidationError = () => {
                   : 'border-gray-300 focus:ring-xy-blue-500',
               ]"
               type="checkbox"
+              :value="option.value"
               v-bind="$attrs"
-              @change="onChange($event, option.value)"
+              @change="validate"
             />
           </div>
           <div class="ml-3">

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

@@ -3,7 +3,11 @@ 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 {
+  useInputField,
+  defaultInputProps,
+  defaultModelOpts,
+} from "@/composables/forms"
 import type { OptionsInput, ColumnedInput } from "@/composables/forms"
 
 defineOptions({
@@ -14,24 +18,17 @@ const props = withDefaults(
   defineProps<OptionsInput & ColumnedInput>(),
   defaultInputProps
 )
-
-defineEmits(["update:modelValue", "update:error"])
+const modelState = defineModel<OptionsInput["modelValue"]>(defaultModelOpts)
 
 const {
   aria,
   errorState,
-  modelState,
   inputID,
   isDisabled,
   isRequired,
   onInvalid,
   validate,
 } = useInputField(props)
-
-const onChange = (e: Event, val: string | number) => {
-  modelState.value = val
-  validate(e)
-}
 </script>
 
 <template>
@@ -74,11 +71,11 @@ const onChange = (e: Event, val: string | number) => {
           <div class="flex items-center h-5">
             <input
               :id="`${inputID}-${index}`"
+              v-model="modelState"
               :aria-describedby="
                 option.help ? `${inputID}-${index}-help` : undefined
               "
               :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',
@@ -92,7 +89,7 @@ const onChange = (e: Event, val: string | number) => {
               type="radio"
               :value="option.value"
               v-bind="$attrs"
-              @change="onChange($event, option.value)"
+              @change="validate"
               @invalid="onInvalid"
             />
           </div>

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

@@ -10,7 +10,11 @@ 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 {
+  defaultInputProps,
+  defaultModelOpts,
+  useInputField,
+} from "@/composables/forms"
 import type {
   ColumnedInput,
   InputOption,
@@ -26,7 +30,6 @@ defineOptions({
  * 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.
  */
-
 interface RadioCards extends OptionsInput {
   options: T[]
 }
@@ -35,17 +38,10 @@ const props = withDefaults(
   defineProps<RadioCards & ColumnedInput>(),
   defaultInputProps
 )
+const modelState = defineModel<RadioCards["modelValue"]>(defaultModelOpts)
 
-defineEmits(["update:modelValue", "update:error"])
-const {
-  aria,
-  isDisabled,
-  isRequired,
-  nameAttr,
-  modelState,
-  errorState,
-  onInvalid,
-} = useInputField(props)
+const { aria, isDisabled, isRequired, nameAttr, errorState, onInvalid } =
+  useInputField(props)
 
 const onUpdate = (val: unknown) => {
   if (val) {

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

@@ -2,7 +2,11 @@
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
 import InputError from "./InputError.vue"
-import { defaultInputProps, useInputField } from "@/composables/forms"
+import {
+  defaultInputProps,
+  defaultModelOpts,
+  useInputField,
+} from "@/composables/forms"
 import type { OptionsInput } from "@/composables/forms"
 
 defineOptions({
@@ -14,30 +18,10 @@ const props = withDefaults(defineProps<OptionsInput>(), {
   placeholder: "Select an option",
 })
 
-defineEmits(["update:modelValue", "update:error"])
-const {
-  aria,
-  inputID,
-  isRequired,
-  validate,
-  modelState,
-  errorState,
-  onInvalid,
-} = useInputField(props)
+const modelState = defineModel<OptionsInput["modelValue"]>(defaultModelOpts)
 
-const onChange = (e: Event) => {
-  // NOTE(spk): The selectedIndex references the list of options in tree order
-  // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-selectedindex
-  const selectedIndex = (e.target as HTMLSelectElement).selectedIndex
-
-  // NOTE(spk): we disable the 0 index option in the list, so there's
-  // no expectation it will trigger a change event.  Likewise, dynamic updates to
-  // a modelValue prop in a parent do not trigger the change event.
-  if (selectedIndex > 0) {
-    modelState.value = props.options[selectedIndex - 1].value
-    validate(e)
-  }
-}
+const { aria, inputID, isRequired, validate, errorState, onInvalid } =
+  useInputField(props)
 </script>
 
 <template>
@@ -51,6 +35,7 @@ const onChange = (e: Event) => {
     />
     <select
       :id="inputID"
+      v-model="modelState"
       :aria-labelledby="aria.labelledby"
       :aria-describedby="aria.describedby"
       :aria-errormessage="aria.errormessage"
@@ -61,9 +46,8 @@ const onChange = (e: Event) => {
           ? '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="modelState"
       v-bind="$attrs"
-      @change="onChange"
+      @change="validate"
       @invalid="onInvalid"
     >
       <option value="" disabled selected v-text="placeholder" />