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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.7.4-dev",
+  "version": "0.7.5-dev",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",

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,13 +1,29 @@
 <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 } from "@/composables/forms"
 
-const attrs = useAttrs()
-const props = withDefaults(
+defineOptions({
+  inheritAttrs: false,
+})
+
+type TextLikeInputs =
+  | "date"
+  | "datetime-local"
+  | "email"
+  | "month"
+  | "number"
+  | "password"
+  | "search"
+  | "tel"
+  | "text"
+  | "time"
+  | "url"
+  | "week"
+
+withDefaults(
   defineProps<{
-    type: string
+    type: TextLikeInputs
     help?: string
     label?: string
     modelValue?: string | number
@@ -20,68 +36,34 @@ const props = withDefaults(
 )
 
 const emit = defineEmits(["update:modelValue"])
-
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
-
-/**
- * common text based inputs
- */
-const textInputTypes = [
-  "date",
-  "datetime-local",
-  "email",
-  "month",
-  "number",
-  "password",
-  "search",
-  "tel",
-  "text",
-  "time",
-  "url",
-  "week",
-]
-
-/**
- * determine if this input is a common text based input
- */
-const isTextType = computed((): boolean => {
-  return typeof props.type === "string" && textInputTypes.includes(props.type)
-})
+const { inputID, isValid } = useInputField()
 </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>
+    <div class="mb-1">
+      <InputLabel :id="`${inputID}-label`" :for="inputID" :label="label" />
+    </div>
+    <input
+      :id="inputID"
+      :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',
+      ]"
+      :type="type"
+      :value="modelValue"
+      v-bind="$attrs"
+      @input="
+        emit('update:modelValue', ($event.target as HTMLInputElement).value)
+      "
+    />
+    <div class="mt-1">
+      <InputHelp :id="`${inputID}-help`" :text="help" />
+    </div>
+  </div>
 </template>

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

@@ -1,8 +1,11 @@
 <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 } from "@/composables/forms"
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 withDefaults(
   defineProps<{
@@ -16,18 +19,24 @@ withDefaults(
   }
 )
 const emits = defineEmits(["update:modelValue"])
-const attrs = useAttrs()
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+const { inputID, isDisabled, isValid } = useInputField()
 </script>
+
 <template>
   <div class="relative flex items-start">
-    <div class="flex items-center h-5">
+    <div class="flex items-center h-6">
       <input
-        :id="uuid"
-        :aria-labelledby="label ? `${uuid}-label` : undefined"
-        :aria-describedby="help ? `${uuid}-help` : undefined"
+        :id="inputID"
+        :aria-labelledby="label ? `${inputID}-label` : undefined"
+        :aria-describedby="help ? `${inputID}-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"
+        :class="[
+          'h-4 w-4 rounded',
+          'border-gray-300 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',
+          isValid ? 'focus:ring-xy-blue-500' : 'focus:ring-red-700',
+        ]"
         type="checkbox"
         v-bind="{
           onChange: ($event) => {
@@ -39,15 +48,12 @@ const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
     </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'"
       />
-      <InputHelp :id="`${uuid}-help`" class="-mt-1" :text="help"></InputHelp>
+      <InputHelp :id="`${inputID}-help`" :text="help"></InputHelp>
     </div>
   </div>
 </template>

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

@@ -1,9 +1,13 @@
 <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 { onMounted } from "vue"
 import BaseInput from "./BaseInput.vue"
+import { useInputField } from "@/composables/forms"
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = withDefaults(
   defineProps<{
@@ -25,8 +29,7 @@ const props = withDefaults(
 )
 
 const emits = defineEmits(["update:modelValue"])
-const attrs = useAttrs()
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+const { inputID } = useInputField()
 
 const updateModelValue = (value: { minDate: number; maxDate: number }) => {
   emits("update:modelValue", value)
@@ -84,15 +87,16 @@ onMounted(() => {
     }
   }
 
-  flatpickr(`#${uuid}`, opts)
+  flatpickr(`#${inputID.value}`, opts)
 })
 </script>
+
 <template>
   <BaseInput
-    :id="uuid"
+    :id="inputID"
     type="text"
     placeholder="mm-dd-yyyy range"
     :label="label"
     :help="help"
-  ></BaseInput>
+  />
 </template>

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

@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { hasSlotContent } from "@/helpers/Slots"
 withDefaults(
   defineProps<{
+    label?: string
     tag?: string
   }>(),
   {
+    label: "",
     tag: "legend",
   }
 )
 </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/6 font-medium text-gray-800"
+    v-bind="$attrs"
   >
-    <slot />
+    {{ label }}
   </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-6 font-normal text-gray-600"
+    v-bind="$attrs"
   >
     {{ text }}
   </component>

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

@@ -1,28 +1,23 @@
 <script setup lang="ts">
 withDefaults(
   defineProps<{
-    disabled?: boolean
     label?: string
     tag?: string
   }>(),
   {
-    disabled: false,
     label: "",
     tag: "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
+    class="block text-sm/6 font-medium text-gray-800"
+    v-bind="$attrs"
   >
+    {{ label }}
+  </component>
 </template>

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

@@ -1,9 +1,12 @@
 <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 } from "@/composables/forms"
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 type CheckboxValue = string | number
 type ModelValue = CheckboxValue[]
@@ -17,13 +20,13 @@ const props = withDefaults(
       value: CheckboxValue
     }[]
     help?: string
-    legend?: string
+    label?: string
     modelValue: ModelValue
-    columns?: 2 | 3 | 4
+    columns?: 2 | 3
   }>(),
   {
     help: "",
-    legend: "",
+    label: "",
     columns: undefined,
   }
 )
@@ -31,12 +34,9 @@ const props = withDefaults(
 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 { inputID, isDisabled } = useInputField()
+
 const onChange = (checked: boolean, val: CheckboxValue) => {
   let updateModelValue = [...props.modelValue]
 
@@ -49,27 +49,25 @@ const onChange = (checked: boolean, val: CheckboxValue) => {
   emit("update:modelValue", updateModelValue)
 }
 </script>
+
 <template>
   <fieldset
     class="space-y-5"
-    :aria-labelledby="hasLegend ? `${uuid}-legend` : undefined"
-    :aria-describedby="help ? `${uuid}-help` : undefined"
+    :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" />
+      <InputHelp v-if="help" :id="`${inputID}-help`" tag="p" :text="help" />
     </div>
+
     <div class="flex">
       <div
-        class="grid gap-4"
+        class="grid gap-y-5"
         :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
@@ -77,18 +75,21 @@ const onChange = (checked: boolean, val: CheckboxValue) => {
           :key="option.value"
           class="flex items-start"
         >
-          <div class="flex items-center h-5">
+          <div class="flex items-center h-6">
             <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"
+              :disabled="option.disabled"
+              :class="[
+                'h-4 w-4 rounded',
+                'border-gray-300 text-xy-blue focus:ring-xy-blue-500',
+                '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',
+              ]"
               type="checkbox"
               v-bind="{
               onChange: ($event) => { 
@@ -100,21 +101,12 @@ const onChange = (checked: boolean, val: CheckboxValue) => {
           </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'"
             />
-            <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,11 +1,14 @@
 <script setup lang="ts">
-import Uniques from "@/helpers/Uniques"
-import { computed, useAttrs, useSlots } from "vue"
 import FieldsetLegend from "./FieldsetLegend.vue"
 import InputHelp from "./InputHelp.vue"
 import InputLabel from "./InputLabel.vue"
+import { useInputField } from "@/composables/forms"
 
-const props = withDefaults(
+defineOptions({
+  inheritAttrs: false,
+})
+
+withDefaults(
   defineProps<{
     options: {
       disabled?: boolean
@@ -14,46 +17,39 @@ const props = withDefaults(
       value: string | number
     }[]
     help?: string
-    legend?: string
+    label?: string
     modelValue?: string | number
-    columns?: 2 | 3 | 4
+    columns?: 2 | 3
   }>(),
   {
     help: "",
-    legend: "",
+    label: "",
     modelValue: undefined,
     columns: undefined,
   }
 )
 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
-})
+const { inputID, isDisabled } = useInputField()
 </script>
+
 <template>
   <fieldset
     class="space-y-5"
-    :aria-labelledby="hasLegend ? `${uuid}-legend` : undefined"
-    :aria-describedby="help ? `${uuid}-help` : undefined"
+    :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" />
+      <InputHelp v-if="help" :id="`${inputID}-help`" tag="p" :text="help" />
     </div>
+
     <div class="flex">
       <div
-        class="grid gap-4"
+        class="grid gap-y-5"
         :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
@@ -61,19 +57,22 @@ const hasLegend = computed(() => {
           :key="option.value"
           class="flex items-start"
         >
-          <div class="flex items-center h-5">
+          <div class="flex items-center h-6">
             <input
-              :id="`${uuid}-${index}`"
+              :id="`${inputID}-${index}`"
               :aria-describedby="
-                option?.help && option.help
-                  ? `${uuid}-${index}-help`
-                  : undefined
+                option.help ? `${inputID}-${index}-help` : undefined
               "
-              :aria-labelledby="`${uuid}-${index}-label`"
+              :aria-labelledby="`${inputID}-${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"
+              :class="[
+                'h-4 w-4',
+                'border-gray-300 text-xy-blue focus:ring-xy-blue-500',
+                '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',
+              ]"
+              :disabled="option.disabled"
+              :name="inputID"
               type="radio"
               :value="option.value"
               v-bind="{
@@ -86,21 +85,13 @@ const hasLegend = computed(() => {
           </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'"
             />
-            <InputHelp
-              :id="`${uuid}-${index}-help`"
-              class="-mt-1"
-              :text="option.help"
-            />
+
+            <InputHelp :id="`${inputID}-${index}-help`" :text="option.help" />
           </div>
         </div>
       </div>