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

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

@@ -1,65 +1,68 @@
 <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 { defaultInputProps, useInputField } from "@/composables/forms"
+import type { OptionsInput } from "@/composables/forms"
+import { ref } from "vue"
 
-const props = withDefaults(
-  defineProps<{
-    design?: "standard" | "compressed"
-    label?: string
-    help?: string
-    placeholder?: string
-    options: { label: string; value: string | number }[]
-    modelValue: string | number | undefined
-  }>(),
-  {
-    design: "standard",
-    label: "",
-    help: "",
-    placeholder: "Select an option",
-  }
-)
-
-const emit = defineEmits(["update:modelValue"])
-const attrs = useAttrs()
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+defineOptions({
+  inheritAttrs: false,
+})
 
-const classes = computed((): string => {
-  return (
-    {
-      standard:
-        "mt-1 block w-full border border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-xy-blue-500 focus:border-xy-blue sm:text-sm disabled:opacity-70 disabled:cursor-not-allowed",
-      compressed:
-        "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-600 text-gray-900 focus:outline-none focus:ring-xy-blue-500 focus:border-xy-blue focus:z-10 sm:text-sm  disabled:opacity-70 disabled:cursor-not-allowed",
-    } as any
-  )[props.design]
+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 onChange = (e: Event) => {
+  modelState.value = (e.target as HTMLInputElement).value
+  validate(e)
+}
 </script>
+
 <template>
-  <InputLabel :id="`${uuid}-label`" :for="uuid" :label="label"></InputLabel>
-  <select
-    :id="uuid"
-    :aria-labelledby="label ? `${uuid}-label` : undefined"
-    :aria-describedby="help ? `${uuid}-help` : undefined"
-    :class="classes"
-    :value="modelValue"
-    v-bind="{
-      ...$attrs,
-      onChange: ($event) => {
-        emit('update:modelValue', ($event.target as HTMLInputElement).value)
-      },
-    }"
-  >
-    <option v-if="placeholder" value="" disabled selected>
-      {{ placeholder }}
-    </option>
-    <option
-      v-for="option in options"
-      :key="option.value"
-      :value="option.value"
-      v-text="option.label"
-    ></option>
-  </select>
-  <InputHelp :id="`${uuid}-help`" :text="help"></InputHelp>
+  <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-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="modelState"
+      v-bind="$attrs"
+      @change="onChange"
+      @invalid="onInvalid"
+    >
+      <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>
+    <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,54 +1,61 @@
 <script setup lang="ts">
-import Uniques from "@/helpers/Uniques"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
-import { useAttrs } from "vue"
-withDefaults(
-  defineProps<{
-    help?: string
-    label?: string
-    modelValue?: string | number
-  }>(),
-  {
-    help: "",
-    label: "",
-    modelValue: "",
-  }
-)
-const attrs = useAttrs()
-const emit = defineEmits(["update:modelValue"])
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+import { useInputField, defaultInputProps } from "@/composables/forms"
+import type { TextareaInput } from "@/composables/forms"
+import { ref } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+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 onInput = (e: Event) => {
+  modelState.value = (e.target as HTMLInputElement).value
+  inputValidation(e)
+}
 </script>
 
 <template>
-  <InputLabel
-    :id="`${uuid}-label`"
-    class="block"
-    :for="uuid"
-    :label="label"
-  ></InputLabel>
-  <textarea
-    :id="uuid"
-    :aria-labelledby="label ? `${uuid}-label` : undefined"
-    :aria-describedby="help ? `${uuid}-help` : undefined"
-    :class="[
-      'mt-1',
-      'sm:text-sm',
-      'block',
-      'shadow-sm',
-      'focus:ring-xy-blue-500',
-      'focus:border-xy-blue',
-      'border-gray-600',
-      'rounded-md',
-      'w-full',
-      'disabled:opacity-70',
-      'disabled:cursor-not-allowed',
-    ]"
-    :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"
+    />
+    <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-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="modelState || undefined"
+      v-bind="$attrs"
+      @input="onInput"
+      @invalid="onInvalid"
+    />
+    <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

@@ -1,27 +1,70 @@
 <script setup lang="ts">
-import { Switch } from "@headlessui/vue"
+import {
+  Switch,
+  SwitchGroup,
+  SwitchLabel,
+  SwitchDescription,
+} from "@headlessui/vue"
+import InputLabel from "@/lib-components/forms/InputLabel.vue"
+import InputHelp from "@/lib-components/forms/InputHelp.vue"
+import { hasAttribute } from "@/composables/forms"
+import { computed, useAttrs } from "vue"
 
-// TODO: disabled support, possibly label and help support - determine current usage first
+defineOptions({
+  inheritAttrs: false,
+})
+
+withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    label?: string
+    help?: string
+  }>(),
+  {
+    label: "",
+    help: "",
+  }
+)
 
-withDefaults(defineProps<{ modelValue: boolean }>(), { modelValue: false })
 const emits = defineEmits(["update:modelValue"])
+const attrs = useAttrs()
+const isDisabled = computed(() => {
+  return hasAttribute(attrs, "disabled")
+})
 </script>
 <template>
-  <Switch
-    :class="[
-      modelValue ? 'bg-xy-blue' : 'bg-gray-200',
-      'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500',
-    ]"
-    :model-value="modelValue"
-    @update:model-value="emits('update:modelValue', $event)"
-  >
-    <span class="sr-only">Use</span>
-    <span
-      aria-hidden="true"
+  <SwitchGroup as="div" class="flex items-start">
+    <Switch
       :class="[
-        modelValue ? 'translate-x-5' : 'translate-x-0',
-        'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
+        modelValue ? 'bg-xy-blue' : 'bg-gray-200',
+        isDisabled ? 'opacity-75 cursor-not-allowed' : 'cursor-pointer',
+        'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500',
       ]"
-    />
-  </Switch>
+      :disabled="isDisabled"
+      :model-value="modelValue"
+      @update:model-value="emits('update:modelValue', $event)"
+    >
+      <span v-if="!label" class="sr-only">Use</span>
+      <span
+        aria-hidden="true"
+        :class="[
+          modelValue ? 'translate-x-5' : 'translate-x-0',
+          'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
+        ]"
+      />
+    </Switch>
+
+    <div class="ml-3 mt-0.5">
+      <SwitchLabel v-if="label">
+        <InputLabel
+          :label="label"
+          :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+        />
+      </SwitchLabel>
+
+      <SwitchDescription v-if="help">
+        <InputHelp :text="help" />
+      </SwitchDescription>
+    </div>
+  </SwitchGroup>
 </template>

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

@@ -1,99 +1,107 @@
 <script setup lang="ts">
-import Uniques from "@/helpers/Uniques"
-import { computed, useAttrs } from "vue"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
+import { useInputField, defaultInputProps } from "@/composables/forms"
+import type { BooleanInput } from "@/composables/forms"
+import { ref } from "vue"
 
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean
-    help?: string
-    legend?: string
-    name?: string
-  }>(),
-  {
-    modelValue: undefined,
-    help: "",
-    legend: "",
-    name: "",
-  }
-)
-const emits = defineEmits(["update:modelValue"])
-const attrs = useAttrs()
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
-const hasNameAttr = computed((): boolean => {
-  return typeof props.name === "string" && props.name !== ""
+defineOptions({
+  inheritAttrs: false,
 })
-const onChange = (e: Event) => {
-  emits("update:modelValue", (e.target as HTMLInputElement).value === "true")
+
+const props = withDefaults(defineProps<BooleanInput>(), defaultInputProps)
+
+defineEmits(["update:modelValue", "update:error"])
+const targetInput = ref<HTMLInputElement | null>(null)
+const {
+  inputID,
+  isDisabled,
+  isRequired,
+  nameAttr,
+  modelState,
+  errorState,
+  onInvalid,
+  validate,
+} = useInputField({ props, targetInput })
+
+const onChange = (e: Event, val: boolean) => {
+  modelState.value = val
+  validate(e)
 }
 </script>
+
 <template>
   <fieldset
-    class="space-y-3"
-    :aria-labelledby="legend ? `${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="legend || help" class="space-y-0.5">
+    <div v-if="label">
       <InputLabel
         class="block my-auto"
-        :label="legend"
+        :label="label"
         tag="legend"
-      ></InputLabel>
-      <InputHelp :id="`${uuid}-help`" tag="p" :text="help" />
+        :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>
       <label
-        class="inline-flex items-center"
-        :class="{ 'cursor-not-allowed': $attrs.disabled }"
-        :for="`${hasNameAttr ? name : uuid}-true`"
+        class="inline-flex items-center group"
+        :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+        :for="`${nameAttr}-true`"
       >
         <input
-          :id="`${hasNameAttr ? name : uuid}-true`"
+          :id="`${nameAttr}-true`"
+          rel="targetInput"
           type="radio"
-          class="w-4 h-4 border-gray-600 focus:ring-xy-blue-500 text-xy-blue disabled:opacity-50 disabled:cursor-not-allowed"
-          :name="hasNameAttr ? name : uuid"
+          :class="[
+            'h-4 w-4 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',
+          ]"
+          :name="nameAttr"
           :value="true"
-          :checked="modelValue === true"
-          v-bind="{
-            ...$attrs,
-            onChange: onChange,
-          }"
+          :checked="modelState === true"
+          v-bind="$attrs"
+          @change="onChange($event, true)"
+          @invalid="onInvalid"
         />
-        <InputLabel
-          class="ml-2"
-          :disabled="
-            $attrs.hasOwnProperty('disabled') && $attrs.disabled !== false
-          "
-          label="Yes"
-          tag="span"
-        ></InputLabel>
+        <InputLabel class="ml-3" label="Yes" tag="span" />
       </label>
+
       <label
         class="inline-flex items-center ml-6"
-        :class="{ 'cursor-not-allowed': $attrs.disabled }"
-        :for="`${hasNameAttr ? name : uuid}-false`"
+        :class="isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+        :for="`${nameAttr}-false`"
       >
         <input
-          :id="`${hasNameAttr ? name : uuid}-false`"
+          :id="`${nameAttr}-false`"
           type="radio"
-          class="w-4 h-4 border-gray-600 focus:ring-xy-blue-500 text-xy-blue disabled:opacity-50 disabled:cursor-not-allowed"
-          :name="hasNameAttr ? name : uuid"
+          :class="[
+            'h-4 w-4 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',
+          ]"
+          :name="nameAttr"
           :value="false"
-          :checked="modelValue === false"
-          v-bind="{
-            ...$attrs,
-            onChange: onChange,
-          }"
+          :checked="modelState === false"
+          v-bind="$attrs"
+          @change="onChange($event, false)"
+          @invalid="onInvalid"
         />
-        <InputLabel
-          class="ml-2"
-          :disabled="
-            $attrs.hasOwnProperty('disabled') && $attrs.disabled !== false
-          "
-          label="No"
-          tag="span"
-        ></InputLabel>
+        <InputLabel class="ml-3" label="No" tag="span" />
       </label>
     </div>
   </fieldset>

package/src/lib-components/lists/DynamicTable.vue

@@ -174,16 +174,13 @@ loadAndRender()
       class="flex flex-col mb-4 space-y-4 lg:space-y-0 lg:flex-row lg:justify-between"
     >
       <div v-if="tableOptions.search" class="w-full max-w-lg lg:max-w-xs">
-        <label for="search" class="sr-only">Search</label>
-        <div class="relative">
+        <label for="table-search" class="sr-only">Search</label>
+        <div class="flex items-center gap-x-2">
           <div
-            class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
+            aria-hidden="true"
+            class="shrink-0 aspect-square rounded-full bg-gray-50 text-gray-400 h-10 w-10 flex items-center justify-center pointer-events-none"
           >
-            <svg
-              class="w-5 h-5 text-gray-400"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
               <path
                 fill-rule="evenodd"
                 d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
@@ -191,21 +188,47 @@ loadAndRender()
               />
             </svg>
           </div>
-          <input
-            v-model.trim="query"
-            class="pl-10"
-            type="search"
-            placeholder="Search"
-            @change="reloadTable()"
-          />
+          <div class="flex-1">
+            <BaseInput
+              id="table-search"
+              v-model.trim="query"
+              type="search"
+              placeholder="Search"
+              @change="reloadTable()"
+            />
+          </div>
         </div>
       </div>
       <div v-if="tableOptions.dateSearch" class="w-full max-w-lg lg:max-w-xs">
-        <DateRangePicker
-          v-model="dateRange"
-          v-bind="{ ...dateSearchProps }"
-          @update:model-value="dateRangeChanged"
-        />
+        <label for="table-date-range" class="sr-only">Date Range</label>
+        <div class="flex items-center gap-x-2">
+          <div
+            aria-hidden="true"
+            class="shrink-0 aspect-square rounded-full bg-gray-50 text-gray-400 h-10 w-10 flex items-center justify-center pointer-events-none"
+          >
+            <svg
+              class="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+          <div class="flex-1">
+            <DateRangePicker
+              id="table-date-range"
+              v-model="dateRange"
+              v-bind="{ ...dateSearchProps }"
+              @update:model-value="dateRangeChanged"
+            />
+          </div>
+        </div>
       </div>
     </div>