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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.7.4",
+  "version": "0.7.5-rc1",
   "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/index.css

@@ -32,17 +32,6 @@
   h6 {
     @apply text-xs leading-4 font-semibold;
   }
-
-  /* Forms: here for backward compatibility.  Use <BaseInput> instead. */
-  [type="text"],
-  [type="email"],
-  [type="password"],
-  [type="number"],
-  [type="search"],
-  [type="tel"],
-  textarea {
-    @apply mt-1 shadow-sm focus:ring-xy-blue-500 focus:border-xy-blue block w-full sm:text-sm border-gray-600 rounded-md;
-  }
 }
 
 @layer components {
@@ -131,9 +120,4 @@
   .max-h-screen-1\/2 {
     max-height: 50vh;
   }
-
-  /* Forms */
-  .xy-input-error {
-    @apply focus:ring-red-700 focus:border-red-700 text-red-900 placeholder-red-700 placeholder-opacity-75 border-red-700;
-  }
 }

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

@@ -1,87 +1,102 @@
 <script setup lang="ts">
-import Uniques from "@/helpers/Uniques"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
-import { computed, useAttrs } from "vue"
+import {
+  useInputField,
+  defaultInputProps,
+  emailPattern,
+  looseToNumber,
+  passwordPattern,
+  phonePattern,
+} from "@/composables/forms"
+import type { TextLikeInput } from "@/composables/forms"
+import { computed, ref } from "vue"
 
-const attrs = useAttrs()
-const props = withDefaults(
-  defineProps<{
-    type: string
-    help?: string
-    label?: string
-    modelValue?: string | number
-  }>(),
-  {
-    help: "",
-    label: "",
-    modelValue: "",
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TextLikeInput>(), defaultInputProps)
+
+defineEmits(["update:modelValue", "update:error"])
+const targetInput = ref<HTMLInputElement | null>(null)
+const {
+  errorState,
+  modelState,
+  inputID,
+  isRequired,
+  onInvalid,
+  inputValidation,
+} = useInputField({ props, 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 onInput = (e: Event) => {
+  let val = (e.target as HTMLInputElement).value
 
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+  if (props.type === "number") {
+    val = looseToNumber(val)
+  }
 
-/**
- * common text based inputs
- */
-const textInputTypes = [
-  "date",
-  "datetime-local",
-  "email",
-  "month",
-  "number",
-  "password",
-  "search",
-  "tel",
-  "text",
-  "time",
-  "url",
-  "week",
-]
+  modelState.value = val
 
-/**
- * determine if this input is a common text based input
- */
-const isTextType = computed((): boolean => {
-  return typeof props.type === "string" && textInputTypes.includes(props.type)
-})
+  inputValidation(e)
+}
 </script>
+
 <template>
-  <InputLabel
-    :id="`${uuid}-label`"
-    class="block"
-    :for="uuid"
-    :label="label"
-  ></InputLabel>
-  <input
-    :id="uuid"
-    :aria-labelledby="label ? `${uuid}-label` : undefined"
-    :aria-describedby="help ? `${uuid}-help` : undefined"
-    :class="[
-      ...['mt-1', 'sm:text-sm'],
-      ...(isTextType
-        ? [
-            'block',
-            'shadow-sm',
-            'focus:xy-blue-500',
-            'focus:border-xy-blue ',
-            'border-gray-600',
-            'rounded-md',
-            'w-full',
-            'disabled:opacity-70',
-            'disabled:cursor-not-allowed',
-          ]
-        : []),
-    ]"
-    :placeholder="label"
-    :type="type"
-    :value="modelValue"
-    v-bind="$attrs"
-    @input="
-      emit('update:modelValue', ($event.target as HTMLInputElement).value)
-    "
-  />
-  <InputHelp :id="`${uuid}-help`" :text="help"></InputHelp>
+  <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"
+      :type="type"
+      :value="modelState"
+      v-bind="{ ...typeAttributes, ...$attrs }"
+      @input="onInput"
+      @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/Checkbox.vue

@@ -1,53 +1,69 @@
 <script setup lang="ts">
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
-import Uniques from "@/helpers/Uniques"
-import { useAttrs } from "vue"
+import { useInputField, defaultInputProps } from "@/composables/forms"
+import type { BooleanInput } from "@/composables/forms"
+import { ref } from "vue"
 
-withDefaults(
-  defineProps<{
-    label?: string
-    help?: string
-    modelValue: boolean
-  }>(),
-  {
-    label: "",
-    help: "",
-  }
-)
-const emits = defineEmits(["update:modelValue"])
-const attrs = useAttrs()
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+defineOptions({
+  inheritAttrs: false,
+})
+
+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-5">
       <input
-        :id="uuid"
-        :aria-labelledby="label ? `${uuid}-label` : undefined"
-        :aria-describedby="help ? `${uuid}-help` : undefined"
-        :checked="modelValue"
-        class="focus:ring-xy-blue-500 h-4 w-4 text-xy-blue border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+        :id="inputID"
+        ref="targetInput"
+        :aria-labelledby="label ? `${inputID}-label` : undefined"
+        :aria-describedby="help ? `${inputID}-help` : undefined"
+        :checked="modelState || undefined"
+        :class="[
+          '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',
+          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">
       <InputLabel
-        :id="`${uuid}-label`"
-        class="mt-auto"
-        :disabled="
-          $attrs.hasOwnProperty('disabled') && $attrs.disabled !== false
-        "
-        :for="uuid"
+        :id="`${inputID}-label`"
+        :for="inputID"
         :label="label"
+        :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+        :required="isRequired"
       />
-      <InputHelp :id="`${uuid}-help`" class="-mt-1" :text="help"></InputHelp>
+      <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,39 +1,38 @@
 <script setup lang="ts">
-import Uniques from "@/helpers/Uniques"
 import flatpickr from "flatpickr"
 import "flatpickr/dist/flatpickr.min.css"
-import { onMounted, useAttrs } from "vue"
-import BaseInput from "./BaseInput.vue"
+import { onMounted, ref } from "vue"
+import { defaultInputProps, useInputField } from "@/composables/forms"
+import type { DateRangeInput } from "@/composables/forms"
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: {
-      minDate: number
-      maxDate: number
+defineOptions({
+  inheritAttrs: false,
+})
+
+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 attrs = useAttrs()
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+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
@@ -84,15 +83,40 @@ onMounted(() => {
     }
   }
 
-  flatpickr(`#${uuid}`, opts)
+  flatpickr(`#${inputID.value}`, opts)
 })
 </script>
+
 <template>
-  <BaseInput
-    :id="uuid"
-    type="text"
-    placeholder="mm-dd-yyyy range"
-    :label="label"
-    :help="help"
-  ></BaseInput>
+  <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">
-import { hasSlotContent } from "@/helpers/Slots"
-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="hasSlotContent($slots.default)"
-    v-bind="{
-      ...$attrs,
-      class: 'text-sm font-semibold leading-snug text-gray-900',
-    }"
+    v-if="label"
+    class="block text-base leading-snug font-medium text-gray-800"
+    v-bind="$attrs"
   >
-    <slot />
+    {{ labelDisplay }}
+    <span v-if="props.required" class="text-red-700/80">*</span>
   </component>
 </template>

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

@@ -14,10 +14,8 @@ withDefaults(
   <component
     :is="tag"
     v-if="text"
-    v-bind="{
-      ...$attrs,
-      class: 'mt-1 text-sm leading-snug font-normal text-gray-700',
-    }"
+    class="text-sm leading-snug font-normal text-gray-600"
+    v-bind="$attrs"
   >
     {{ text }}
   </component>

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

@@ -1,28 +1,43 @@
 <script setup lang="ts">
-withDefaults(
+import { computed } from "vue"
+
+const props = withDefaults(
   defineProps<{
-    disabled?: boolean
     label?: string
+    required?: boolean
     tag?: string
   }>(),
   {
-    disabled: false,
     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 my-1 text-sm font-semibold leading-snug text-gray-900': true,
-      'opacity-75': disabled,
-    }"
-    v-bind="{
-      ...$attrs,
-    }"
-    >{{ label }}</component
+    v-if="labelDisplay"
+    class="block text-sm leading-snug font-medium text-gray-800"
+    v-bind="$attrs"
   >
+    {{ labelDisplay }}
+    <span v-if="props.required" class="text-red-700/80">*</span>
+  </component>
 </template>