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

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import Uniques from "@/helpers/Uniques"
 import {
   RadioGroup,
   RadioGroupDescription,
@@ -7,10 +6,15 @@ import {
   RadioGroupOption,
 } from "@headlessui/vue"
 import { CheckCircleIcon } from "@heroicons/vue/solid"
-import { computed, ref, useAttrs } from "vue"
+import { computed, ref } from "vue"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
 import FieldsetLegend from "./FieldsetLegend.vue"
+import { useInputField } from "@/composables/forms"
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 /*
  * NOTE (spk) headless UI introduced a "name" prop that includes a hidden field
@@ -35,14 +39,14 @@ const props = withDefaults(
   defineProps<{
     columns?: 2 | 3
     help?: string
-    legend?: string
+    label?: string
     modelValue?: ModelValue
     options: RadioCard[]
   }>(),
   {
     columns: undefined,
     help: "",
-    legend: "",
+    label: "",
     modelValue: undefined,
   }
 )
@@ -51,8 +55,7 @@ const emit = defineEmits<{
   (e: "update:modelValue", modelValue: ModelValue): void
 }>()
 
-const attrs = useAttrs()
-const uuid = Uniques.CreateIdAttribute()
+const { inputID, isDisabled, isRequired, nameAttr } = useInputField()
 
 // tracking internal state separate from modelValue
 // allows v-model to be undefined by the consumer but still supports
@@ -74,27 +77,25 @@ const onChange = (val: ModelValue) => {
   invalid.value = false
   emit("update:modelValue", val)
 }
-
-const nameAttr = computed(() => {
-  return typeof attrs.name === "string" && attrs.name !== "" ? attrs.name : uuid
-})
 </script>
 
 <template>
   <RadioGroup
     :model-value="checkedState"
-    :disabled="typeof attrs.disabled === 'boolean' ? attrs.disabled : false"
+    :disabled="isDisabled"
     :aria-invalid="invalid === true ? 'true' : null"
-    :aria-errormessage="invalid === true ? `error-${uuid}` : null"
+    :aria-errormessage="invalid === true ? `error-${inputID}` : null"
     @update:model-value="onChange"
   >
-    <RadioGroupLabel v-if="legend" class="block">
-      <FieldsetLegend tag="div">{{ legend }}</FieldsetLegend>
+    <RadioGroupLabel v-if="label" class="block">
+      <FieldsetLegend tag="div" :label="label" />
     </RadioGroupLabel>
+
     <RadioGroupDescription v-if="help">
       <InputHelp :text="help" />
     </RadioGroupDescription>
-    <div v-if="invalid === true" :id="`error-${uuid}`" class="sr-only">
+
+    <div v-if="invalid === true" :id="`error-${inputID}`" class="sr-only">
       Please select one of these options.
     </div>
 
@@ -108,17 +109,27 @@ const nameAttr = computed(() => {
       <RadioGroupOption
         v-for="option in options"
         :key="option.value"
-        v-slot="{ active, checked, disabled }"
+        v-slot="{
+          active,
+          checked,
+          disabled,
+        }: {
+          active: boolean,
+          checked: boolean,
+          disabled: boolean,
+        }"
         as="template"
-        :disabled="option?.disabled ? option.disabled : false"
+        :disabled="isDisabled || option.disabled"
         :value="option.value"
       >
         <div
-          class="relative bg-white border rounded-lg shadow-sm p-4 flex cursor-pointer focus:outline-none"
+          class="relative border rounded-lg shadow-sm p-4 flex focus:outline-none"
           :class="[
-            checked ? 'border-transparent' : 'border-gray-300',
+            disabled
+              ? 'cursor-not-allowed bg-gray-50 border-gray-200 opacity-90'
+              : 'cursor-pointer bg-white border-gray-300',
+            checked ? 'border-transparent' : '',
             active ? 'border-xy-blue ring-2 ring-xy-blue-500' : '',
-            disabled ? 'cursor-not-allowed opacity-75' : '',
           ]"
         >
           <div class="flex-1 flex pr-1">
@@ -130,16 +141,18 @@ const nameAttr = computed(() => {
                   :label="option.label"
                 />
               </RadioGroupLabel>
+
               <RadioGroupDescription v-if="option.help" as="div">
                 <InputHelp tag="div" class="mt-auto" :text="option.help" />
               </RadioGroupDescription>
+
               <div
                 v-if="option.sublabel || $slots.sublabel"
                 class="mt-auto mb-0"
               >
                 <RadioGroupDescription
                   as="div"
-                  class="font-semibold leading-snug mt-4 text-gray-900 text-sm"
+                  class="text-sm/5 font-medium mt-4 text-gray-800"
                 >
                   <slot
                     name="sublabel"
@@ -165,12 +178,13 @@ const nameAttr = computed(() => {
             ]"
             aria-hidden="true"
           />
+
           <input
             class="sr-only top-1 left-1"
             aria-hidden="true"
             :checked="checked"
             :name="nameAttr"
-            :required="attrs.required !== undefined && attrs.required !== false"
+            :required="isRequired"
             tabindex="-1"
             type="radio"
             :value="option.value"

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

@@ -1,12 +1,14 @@
 <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 props = withDefaults(
+defineOptions({
+  inheritAttrs: false,
+})
+
+withDefaults(
   defineProps<{
-    design?: "standard" | "compressed"
     label?: string
     help?: string
     placeholder?: string
@@ -14,7 +16,6 @@ const props = withDefaults(
     modelValue: string | number | undefined
   }>(),
   {
-    design: "standard",
     label: "",
     help: "",
     placeholder: "Select an option",
@@ -22,44 +23,49 @@ const props = withDefaults(
 )
 
 const emit = defineEmits(["update:modelValue"])
-const attrs = useAttrs()
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
-
-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 { inputID, isValid } = useInputField()
 </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="{
+  <div>
+    <div class="mb-1">
+      <InputLabel :id="`${inputID}-label`" :for="inputID" :label="label" />
+    </div>
+    <select
+      :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 pl-3 pr-10',
+        'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-600 disabled:ring-gray-200 disabled:opacity-100',
+        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',
+      ]"
+      :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>
+    >
+      <option
+        v-if="placeholder"
+        value=""
+        disabled
+        selected
+        v-text="placeholder"
+      />
+      <option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+        v-text="option.label"
+      />
+    </select>
+    <div class="mt-1">
+      <InputHelp :id="`${inputID}-help`" :text="help" />
+    </div>
+  </div>
 </template>

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

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import Uniques from "@/helpers/Uniques"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
-import { useAttrs } from "vue"
+import { useInputField } from "@/composables/forms"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
 withDefaults(
   defineProps<{
     help?: string
@@ -15,40 +19,35 @@ withDefaults(
     modelValue: "",
   }
 )
-const attrs = useAttrs()
+
 const emit = defineEmits(["update:modelValue"])
-const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+const { inputID, isValid } = useInputField()
 </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>
+    <div class="mb-1">
+      <InputLabel :id="`${inputID}-label`" :for="inputID" :label="label" />
+    </div>
+    <textarea
+      :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',
+      ]"
+      :value="modelValue"
+      v-bind="$attrs"
+      @input="
+        emit('update:modelValue', ($event.target as HTMLInputElement).value)
+      "
+    />
+    <div class="mt-1">
+      <InputHelp :id="`${inputID}-help`" :text="help"></InputHelp>
+    </div>
+  </div>
 </template>

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

@@ -1,27 +1,67 @@
 <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 { useInputField } from "@/composables/forms"
 
-// TODO: disabled support, possibly label and help support - determine current usage first
+defineOptions({
+  inheritAttrs: false,
+})
+
+withDefaults(
+  defineProps<{
+    modelValue?: boolean | undefined
+    label?: string
+    help?: string
+  }>(),
+  {
+    modelValue: undefined,
+    label: "",
+    help: "",
+  }
+)
 
-withDefaults(defineProps<{ modelValue: boolean }>(), { modelValue: false })
 const emits = defineEmits(["update:modelValue"])
+const { isDisabled } = useInputField()
 </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">
+      <SwitchLabel v-if="label">
+        <InputLabel
+          :label="label"
+          :class="isDisabled && 'cursor-not-allowed'"
+        />
+      </SwitchLabel>
+
+      <SwitchDescription v-if="help">
+        <InputHelp :text="help" />
+      </SwitchDescription>
+    </div>
+  </SwitchGroup>
 </template>

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

@@ -1,58 +1,60 @@
 <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 } from "@/composables/forms"
 
-const props = withDefaults(
+defineOptions({
+  inheritAttrs: false,
+})
+
+withDefaults(
   defineProps<{
     modelValue?: boolean
     help?: string
-    legend?: string
-    name?: string
+    label?: string
   }>(),
   {
     modelValue: undefined,
     help: "",
-    legend: "",
-    name: "",
+    label: "",
   }
 )
+
 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 !== ""
-})
+const { inputID, isDisabled, nameAttr } = useInputField()
+
 const onChange = (e: Event) => {
   emits("update:modelValue", (e.target as HTMLInputElement).value === "true")
 }
 </script>
+
 <template>
   <fieldset
     class="space-y-3"
-    :aria-labelledby="legend ? `${uuid}-legend` : undefined"
-    :aria-describedby="help ? `${uuid}-help` : undefined"
+    :aria-labelledby="label ? `${inputID}-legend` : undefined"
+    :aria-describedby="help ? `${inputID}-help` : undefined"
   >
-    <div v-if="legend || help" class="space-y-0.5">
-      <InputLabel
-        class="block my-auto"
-        :label="legend"
-        tag="legend"
-      ></InputLabel>
-      <InputHelp :id="`${uuid}-help`" tag="p" :text="help" />
+    <div v-if="label">
+      <InputLabel class="block my-auto" :label="label" tag="legend" />
+      <InputHelp v-if="help" :id="`${inputID}-help`" tag="p" :text="help" />
     </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'"
+        :for="`${nameAttr}-true`"
       >
         <input
-          :id="`${hasNameAttr ? name : uuid}-true`"
+          :id="`${nameAttr}-true`"
           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',
+            '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',
+          ]"
+          :name="nameAttr"
           :value="true"
           :checked="modelValue === true"
           v-bind="{
@@ -60,25 +62,24 @@ const onChange = (e: Event) => {
             onChange: onChange,
           }"
         />
-        <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'"
+        :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',
+            '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',
+          ]"
+          :name="nameAttr"
           :value="false"
           :checked="modelValue === false"
           v-bind="{
@@ -86,14 +87,7 @@ const onChange = (e: Event) => {
             onChange: onChange,
           }"
         />
-        <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/types/composables/forms.d.ts

@@ -1,8 +1,10 @@
-export type RadioModelValue = string | number;
-export interface RadioCardOption {
-    disabled?: boolean;
-    help?: string;
-    label: string;
-    sublabel?: string;
-    value: RadioModelValue;
-}
+export declare const useInputField: () => {
+    attrs: {
+        [x: string]: unknown;
+    };
+    inputID: import("vue").ComputedRef<string>;
+    isDisabled: import("vue").ComputedRef<boolean>;
+    isRequired: import("vue").ComputedRef<boolean>;
+    isValid: import("vue").ComputedRef<boolean>;
+    nameAttr: import("vue").ComputedRef<string>;
+};

package/types/helpers/Debounce.d.ts

@@ -1,2 +1,2 @@
-export declare function debounce(func: () => void, timeout?: number): () => void;
+export declare function debounce(fn: (...args: any[]) => void, wait?: number): (...args: any[]) => void;
 export declare function debounceLeading(func: () => void, timeout?: number): (...args: any[]) => void;

package/types/lib-components/forms/BaseInput.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    type: string;
+    type: "number" | "search" | "time" | "text" | "date" | "datetime-local" | "email" | "month" | "password" | "tel" | "url" | "week";
     help?: string | undefined;
     label?: string | undefined;
     modelValue?: string | number | undefined;
@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     label: string;
     modelValue: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    type: string;
+    type: "number" | "search" | "time" | "text" | "date" | "datetime-local" | "email" | "month" | "password" | "tel" | "url" | "week";
     help?: string | undefined;
     label?: string | undefined;
     modelValue?: string | number | undefined;

package/types/lib-components/forms/FieldsetLegend.vue.d.ts

@@ -1,16 +1,19 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    label?: string | undefined;
     tag?: string | undefined;
 }>, {
+    label: string;
     tag: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    label?: string | undefined;
     tag?: string | undefined;
 }>, {
+    label: string;
     tag: string;
 }>>>, {
+    label: string;
     tag: string;
-}, {}>, {
-    default: (_: {}) => any;
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -26,8 +29,3 @@ type __VLS_WithDefaults<P, D> = {
         default: D[K];
     } : P[K];
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};