@xy-planning-network/trees 0.4.0 → 0.4.3

package/package.json

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

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

@@ -69,6 +69,8 @@ const isTextType = computed((): boolean => {
             'border-gray-600',
             'rounded-md',
             'w-full',
+            'disabled:opacity-70',
+            'disabled:cursor-not-allowed',
           ]
         : []),
     ]"

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

@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import InputLabel from "./InputLabel.vue"
+import InputHelp from "./InputHelp.vue"
 import Uniques from "@/helpers/Uniques"
 import { useAttrs } from "vue"
 
-// TODO: checkbox should support the help text prop - possibly as a tooltip
-// TODO: aria-labelledby may be superfluous here since the input is wrapped in a label
 withDefaults(
   defineProps<{
     label?: string
+    help?: string
     modelValue: boolean
   }>(),
   {
     label: "",
+    help: "",
   }
 )
 const emits = defineEmits(["update:modelValue"])
@@ -19,28 +20,34 @@ const attrs = useAttrs()
 const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
 </script>
 <template>
-  <div>
-    <label class="inline-flex items-center">
+  <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-blue-500 h-4 w-4 text-blue-500 border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-        :id="uuid"
         type="checkbox"
         v-bind="{
-          ...$attrs,
           onChange: ($event) => {
             emits('update:modelValue', ($event.target as HTMLInputElement).checked)
           },
+          ...$attrs,
         }"
       />
+    </div>
+    <div class="ml-3">
       <InputLabel
-        class="ml-2"
+        class="mt-auto"
+        :disabled="
+          $attrs.hasOwnProperty('disabled') && $attrs.disabled !== false
+        "
         :id="`${uuid}-label`"
         :for="uuid"
         :label="label"
-        tag="span"
-      ></InputLabel>
-    </label>
+      />
+      <InputHelp class="-mt-1" :id="`${uuid}-help`" :text="help"></InputHelp>
+    </div>
   </div>
 </template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { hasSlotContent } from "@/helpers/Slots"
+</script>
+<template>
+  <legend
+    v-if="hasSlotContent($slots.default)"
+    v-bind="{
+      ...$attrs,
+      class: 'text-base font-medium leading-tight text-gray-900',
+    }"
+  >
+    <slot />
+  </legend>
+</template>

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

@@ -16,7 +16,7 @@ withDefaults(
     v-if="text"
     v-bind="{
       ...$attrs,
-      class: 'mt-2 text-sm leading-snug font-semibold text-gray-700',
+      class: 'mt-1 text-sm leading-snug font-normal text-gray-700',
     }"
   >
     {{ text }}

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 withDefaults(
   defineProps<{
+    disabled?: boolean
     label?: string
     tag?: string
   }>(),
   {
+    disabled: false,
     label: "",
     tag: "label",
   }
@@ -14,9 +16,12 @@ withDefaults(
   <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,
-      class: 'block my-1 text-sm font-semibold leading-snug text-gray-900',
     }"
     >{{ label }}</component
   >

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

@@ -1,55 +1,117 @@
 <script setup lang="ts">
 import Uniques from "@/helpers/Uniques"
-import { ref, useAttrs } from "vue"
+import { computed, useAttrs, useSlots } from "vue"
+import FieldsetLegend from "./FieldsetLegend.vue"
 import InputLabel from "./InputLabel.vue"
+import InputHelp from "./InputHelp.vue"
 
-// TODO: checkbox should support the help text prop - possibly as a tooltip
-// TODO: aria-labelledby may be superfluous here since the input is wrapped in a label
+type CheckboxValue = string | number
+type ModelValue = CheckboxValue[]
 
 const props = withDefaults(
   defineProps<{
     options: {
+      disabled?: boolean
+      help?: string
       label: string
-      value: string
+      value: CheckboxValue
     }[]
+    help?: string
     legend?: string
-    modelValue: string[]
+    modelValue: ModelValue
+    columns?: 2 | 3 | 4
   }>(),
   {
+    help: "",
     legend: "",
+    columns: undefined,
   }
 )
 
-const emits = defineEmits(["update:modelValue"])
+const emit = defineEmits<{
+  (e: "update:modelValue", modelValue: ModelValue): void
+}>()
 const attrs = useAttrs()
+const slots = useSlots()
 const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
-const model = ref<string[]>(props.modelValue)
+const hasLegend = computed(() => {
+  return props.legend !== "" || slots.legend !== undefined
+})
+const onChange = (checked: boolean, val: CheckboxValue) => {
+  let updateModelValue = [...props.modelValue]
+
+  if (checked) {
+    updateModelValue.push(val)
+  } else {
+    updateModelValue.splice(updateModelValue.indexOf(val), 1)
+  }
+
+  emit("update:modelValue", updateModelValue)
+}
 </script>
 <template>
-  <fieldset>
-    <InputLabel class="block mb-0" :label="legend" tag="legend"></InputLabel>
-    <div class="mt-4" v-for="(option, index) in options" :key="option.value">
-      <label class="inline-flex items-center">
-        <input
-          type="checkbox"
-          class="focus:ring-blue-500 h-4 w-4 text-xy-blue border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-          :id="`${uuid}-${index}`"
-          :value="option.value"
-          v-model="model"
-          v-bind="{
-            ...$attrs,
-            onChange: () => {
-              emits('update:modelValue', model)
-            },
-          }"
-        />
-        <InputLabel
-          class="ml-2"
-          :for="`${uuid}-${index}`"
-          :label="option.label"
-          tag="span"
-        ></InputLabel>
-      </label>
+  <fieldset
+    class="space-y-5"
+    :aria-labelledby="hasLegend ? `${uuid}-legend` : undefined"
+    :aria-describedby="help ? `${uuid}-help` : undefined"
+  >
+    <div 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 tag="p" :text="help" :id="`${uuid}-help`" />
+    </div>
+    <div
+      class="grid gap-4"
+      :class="{
+        'sm:grid sm:gap-y-4 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
+        v-for="(option, index) in options"
+        :key="option.value"
+        class="flex items-start"
+      >
+        <div class="flex items-center h-5">
+          <input
+            :id="uuid"
+            :aria-labelledby="`${uuid}-${index}-label`"
+            :aria-describedby="
+              option?.help && option.help ? `${uuid}-${index}-help` : undefined
+            "
+            :checked="modelValue.includes(option.value)"
+            :disabled="option.disabled === true ? true : undefined"
+            class="focus:ring-blue-500 h-4 w-4 text-blue-500 border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+            type="checkbox"
+            v-bind="{
+              onChange: ($event) => { onChange(($event.target as HTMLInputElement).checked, option.value) },
+              ...$attrs,
+            }"
+          />
+        </div>
+        <div class="ml-3">
+          <InputLabel
+            class="mt-auto"
+            :disabled="
+              ($attrs.hasOwnProperty('disabled') &&
+                $attrs.disabled !== false) ||
+              option.disabled === true
+            "
+            :id="`${uuid}-${index}-label`"
+            :for="uuid"
+            :label="option.label"
+          />
+          <InputHelp
+            class="-mt-1"
+            :id="`${uuid}-${index}-help`"
+            :text="option.help"
+          />
+        </div>
+      </div>
     </div>
   </fieldset>
 </template>

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

@@ -1,58 +1,105 @@
 <script setup lang="ts">
 import Uniques from "@/helpers/Uniques"
-import { useAttrs } from "vue"
+import { computed, useAttrs, useSlots } from "vue"
+import FieldsetLegend from "./FieldsetLegend.vue"
+import InputHelp from "./InputHelp.vue"
 import InputLabel from "./InputLabel.vue"
 
-// TODO: add horizontal layout support
 const props = withDefaults(
   defineProps<{
     options: {
+      disabled?: boolean
+      help?: string
       label: string
-      value: string
+      value: string | number
     }[]
+    help?: string
     legend?: string
-    modelValue?: string
-    vertical?: boolean
+    modelValue?: string | number
+    columns?: 2 | 3 | 4
   }>(),
   {
+    help: "",
     legend: "",
-    modelValue: "",
-    vertical: true,
+    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
+})
 </script>
 <template>
-  <fieldset class="mt-1 space-y-2">
-    <InputLabel class="block" :label="legend" tag="legend"></InputLabel>
-    <component
-      v-for="(option, index) in options"
-      :key="option.value"
-      :is="props.vertical ? 'div' : 'span'"
+  <fieldset
+    class="space-y-5"
+    :aria-labelledby="hasLegend ? `${uuid}-legend` : undefined"
+    :aria-describedby="help ? `${uuid}-help` : undefined"
+  >
+    <div 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 tag="p" :text="help" :id="`${uuid}-help`" />
+    </div>
+    <div
+      class="grid gap-4"
+      :class="{
+        'sm:grid sm:gap-y-4 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,
+      }"
     >
-      <label
-        class="inline-flex items-center"
-        :class="{ 'cursor-not-allowed': $attrs.disabled }"
-        :for="`${uuid}-${index}`"
+      <div
+        v-for="(option, index) in options"
+        :key="option.value"
+        class="flex items-start"
       >
-        <input
-          :checked="modelValue === option.value"
-          class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue"
-          :id="`${uuid}-${index}`"
-          :name="uuid"
-          type="radio"
-          :value="option.value"
-          v-bind="{
-            ...$attrs,
-            onChange: ($event) => {
-              emits('update:modelValue', ($event.target as HTMLInputElement).value)
-            },
-          }"
-        />
-        <InputLabel class="ml-2" :label="option.label" tag="span"></InputLabel>
-      </label>
-    </component>
+        <div class="flex items-center h-5">
+          <input
+            :aria-describedby="
+              option?.help && option.help ? `${uuid}-${index}-help` : undefined
+            "
+            :aria-labelledby="`${uuid}-${index}-label`"
+            :checked="modelValue === option.value"
+            class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue disabled:opacity-50 disabled:cursor-not-allowed"
+            :disabled="option.disabled === true ? true : undefined"
+            :id="`${uuid}-${index}`"
+            :name="uuid"
+            type="radio"
+            :value="option.value"
+            v-bind="{
+              onChange: () => {
+                emits('update:modelValue', option.value)
+              },
+              ...$attrs,
+            }"
+          />
+        </div>
+        <div class="ml-3">
+          <InputLabel
+            class="mt-auto"
+            :disabled="
+              ($attrs.hasOwnProperty('disabled') &&
+                $attrs.disabled !== false) ||
+              option.disabled === true
+            "
+            :id="`${uuid}-${index}-label`"
+            :for="uuid"
+            :label="option.label"
+          />
+          <InputHelp
+            class="-mt-1"
+            :id="`${uuid}-${index}-help`"
+            :text="option.help"
+          />
+        </div>
+      </div>
+    </div>
   </fieldset>
 </template>

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

@@ -29,9 +29,9 @@ 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-blue-500 focus:border-blue-500 sm:text-sm",
+        "mt-1 block w-full border border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 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-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm",
+        "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-600 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm  disabled:opacity-70 disabled:cursor-not-allowed",
     } as any
   )[props.design]
 })

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

@@ -40,6 +40,8 @@ const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
       'border-gray-600',
       'rounded-md',
       'w-full',
+      'disabled:opacity-70',
+      'disabled:cursor-not-allowed',
     ]"
     :id="uuid"
     :value="modelValue"

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Switch } from "@headlessui/vue"
 
+// TODO: disabled support, possibly label and help support - determine current usage first
+
 withDefaults(defineProps<{ modelValue: boolean }>(), { modelValue: false })
 const emits = defineEmits(["update:modelValue"])
 </script>

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

@@ -6,11 +6,13 @@ import InputLabel from "./InputLabel.vue"
 const props = withDefaults(
   defineProps<{
     modelValue?: boolean
+    help?: string
     legend?: string
     name?: string
   }>(),
   {
     modelValue: undefined,
+    help: "",
     legend: "",
     name: "",
   }
@@ -26,45 +28,72 @@ const onChange = (e: Event) => {
 }
 </script>
 <template>
-  <fieldset>
-    <InputLabel class="block" :label="legend" tag="legend"></InputLabel>
-    <label
-      class="inline-flex items-center"
-      :class="{ 'cursor-not-allowed': $attrs.disabled }"
-      :for="`${hasNameAttr ? name : uuid}-true`"
-    >
-      <input
-        type="radio"
-        class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue"
-        :id="`${hasNameAttr ? name : uuid}-true`"
-        :name="hasNameAttr ? name : uuid"
-        :value="true"
-        :checked="modelValue === true"
-        v-bind="{
-          ...$attrs,
-          onChange: onChange,
-        }"
-      />
-      <InputLabel class="ml-2" label="Yes" tag="span"></InputLabel>
-    </label>
-    <label
-      class="inline-flex items-center ml-6"
-      :class="{ 'cursor-not-allowed': $attrs.disabled }"
-      :for="`${hasNameAttr ? name : uuid}-false`"
-    >
-      <input
-        type="radio"
-        class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue"
-        :id="`${hasNameAttr ? name : uuid}-false`"
-        :name="hasNameAttr ? name : uuid"
-        :value="false"
-        :checked="modelValue === false"
-        v-bind="{
-          ...$attrs,
-          onChange: onChange,
-        }"
-      />
-      <InputLabel class="ml-2" label="No" tag="span"></InputLabel>
-    </label>
+  <fieldset
+    class="space-y-3"
+    :aria-labelledby="legend ? `${uuid}-legend` : undefined"
+    :aria-describedby="help ? `${uuid}-help` : undefined"
+  >
+    <div class="space-y-0.5">
+      <InputLabel
+        class="block my-auto"
+        :label="legend"
+        tag="legend"
+      ></InputLabel>
+      <InputHelp tag="p" :text="help" :id="`${uuid}-help`" />
+    </div>
+    <div>
+      <label
+        class="inline-flex items-center"
+        :class="{ 'cursor-not-allowed': $attrs.disabled }"
+        :for="`${hasNameAttr ? name : uuid}-true`"
+      >
+        <input
+          type="radio"
+          class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue disabled:opacity-50 disabled:cursor-not-allowed"
+          :id="`${hasNameAttr ? name : uuid}-true`"
+          :name="hasNameAttr ? name : uuid"
+          :value="true"
+          :checked="modelValue === true"
+          v-bind="{
+            ...$attrs,
+            onChange: onChange,
+          }"
+        />
+        <InputLabel
+          class="ml-2"
+          :disabled="
+            $attrs.hasOwnProperty('disabled') && $attrs.disabled !== false
+          "
+          label="Yes"
+          tag="span"
+        ></InputLabel>
+      </label>
+      <label
+        class="inline-flex items-center ml-6"
+        :class="{ 'cursor-not-allowed': $attrs.disabled }"
+        :for="`${hasNameAttr ? name : uuid}-false`"
+      >
+        <input
+          type="radio"
+          class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue disabled:opacity-50 disabled:cursor-not-allowed"
+          :id="`${hasNameAttr ? name : uuid}-false`"
+          :name="hasNameAttr ? name : uuid"
+          :value="false"
+          :checked="modelValue === false"
+          v-bind="{
+            ...$attrs,
+            onChange: onChange,
+          }"
+        />
+        <InputLabel
+          class="ml-2"
+          :disabled="
+            $attrs.hasOwnProperty('disabled') && $attrs.disabled !== false
+          "
+          label="No"
+          tag="span"
+        ></InputLabel>
+      </label>
+    </div>
   </fieldset>
 </template>