@xy-planning-network/trees 0.4.0-rc-7 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.4.0-rc-7",
+  "version": "0.4.2",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -8,6 +8,7 @@
     "config/*",
     "dist/*",
     "src/**/*.css",
+    "src/**/*.vue",
     "types/*"
   ],
   "main": "dist/trees.es.js",
@@ -21,12 +22,13 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vue-tsc -p src && npm run copy:types && tsc-alias -p src/tsconfig.json",
+    "build": "vite build && vue-tsc -p src --emitDeclarationOnly && npm run copy:types && tsc-alias -p src/tsconfig.json",
     "build:docs": "vue-tsc -p dev --noEmit && vite build --config vite.docs.config.ts",
-    "copy:types": "copyfiles -f ./src/types/**/*.d.ts ./types",
+    "copy:types": "copyfiles -f ./src/*.d.ts ./types",
     "lint": "eslint --ext .js,.ts,.vue src",
     "lint:fix": "eslint --fix --ext .js,.ts,.vue src dev && prettier -w -u src dev",
-    "preview": "vite preview --config vite.docs.config.ts"
+    "preview": "vite preview --config vite.docs.config.ts",
+    "typecheck": "vue-tsc -p src --noEmit"
   },
   "devDependencies": {
     "@types/node": "^16.11.13",

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

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import Uniques from "@/helpers/Uniques"
+import InputLabel from "./InputLabel.vue"
+import InputHelp from "./InputHelp.vue"
+import { computed, useAttrs } from "vue"
+
+const attrs = useAttrs()
+const props = withDefaults(
+  defineProps<{
+    type: string
+    help?: string
+    label?: string
+    modelValue?: string | number
+  }>(),
+  {
+    help: "",
+    label: "",
+    modelValue: "",
+  }
+)
+
+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)
+})
+</script>
+<template>
+  <InputLabel
+    class="block"
+    :id="`${uuid}-label`"
+    :for="uuid"
+    :label="label"
+  ></InputLabel>
+  <input
+    :aria-labelledby="label ? `${uuid}-label` : undefined"
+    :aria-describedby="help ? `${uuid}-help` : undefined"
+    :class="[
+      ...['mt-1', 'sm:text-sm'],
+      ...(isTextType
+        ? [
+            'block',
+            'shadow-sm',
+            'focus:ring-blue-500',
+            'focus:border-blue-500',
+            'border-gray-600',
+            'rounded-md',
+            'w-full',
+          ]
+        : []),
+    ]"
+    :id="uuid"
+    :placeholder="label"
+    :type="type"
+    :value="modelValue"
+    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    v-bind="$attrs"
+  />
+  <InputHelp :id="`${uuid}-help`" :text="help"></InputHelp>
+</template>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import InputLabel from "./InputLabel.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
+    modelValue: boolean
+  }>(),
+  {
+    label: "",
+  }
+)
+const emits = defineEmits(["update:modelValue"])
+const attrs = useAttrs()
+const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+</script>
+<template>
+  <div>
+    <label class="inline-flex items-center">
+      <input
+        :aria-labelledby="label ? `${uuid}-label` : 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)
+          },
+        }"
+      />
+      <InputLabel
+        class="ml-2"
+        :id="`${uuid}-label`"
+        :for="uuid"
+        :label="label"
+        tag="span"
+      ></InputLabel>
+    </label>
+  </div>
+</template>

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

@@ -0,0 +1,65 @@
+<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"
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: {
+      minDate: number
+      maxDate: number
+    }
+    startDate?: number
+    label?: string
+    help?: string
+  }>(),
+  {
+    startDate: 0,
+    label: "",
+    help: "",
+  }
+)
+
+const emits = defineEmits(["update:modelValue"])
+const attrs = useAttrs()
+const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+
+const updateModelValue = (value: { minDate: number; maxDate: number }) => {
+  emits("update:modelValue", value)
+}
+
+onMounted(() => {
+  flatpickr(`#${uuid}`, {
+    dateFormat: "m-d-Y",
+    mode: "range",
+    maxDate: new Date(), // So far, we cannot have options past today for ranges
+    minDate: props.startDate,
+    onClose: (selectedDates) => {
+      if (selectedDates.length === 2) {
+        updateModelValue({
+          minDate: selectedDates[0].setUTCHours(0, 0, 0, 0) / 1000,
+          maxDate: Math.floor(
+            selectedDates[1].setUTCHours(23, 59, 59, 999) / 1000
+          ),
+        })
+      } else if (selectedDates.length === 0) {
+        updateModelValue({
+          minDate: 0,
+          maxDate: 0,
+        })
+      }
+    },
+  })
+})
+</script>
+<template>
+  <BaseInput
+    type="text"
+    placeholder="mm-dd-yyyy range"
+    :id="uuid"
+    :label="label"
+    :help="help"
+  ></BaseInput>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    tag?: string
+    text?: string
+  }>(),
+  {
+    tag: "div",
+    text: "",
+  }
+)
+</script>
+<template>
+  <component
+    :is="tag"
+    v-if="text"
+    v-bind="{
+      ...$attrs,
+      class: 'mt-2 text-sm leading-snug font-semibold text-gray-700',
+    }"
+  >
+    {{ text }}
+  </component>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label?: string
+    tag?: string
+  }>(),
+  {
+    label: "",
+    tag: "label",
+  }
+)
+</script>
+<template>
+  <component
+    :is="tag"
+    v-if="label"
+    v-bind="{
+      ...$attrs,
+      class: 'block my-1 text-sm font-semibold leading-snug text-gray-900',
+    }"
+    >{{ label }}</component
+  >
+</template>

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import Uniques from "@/helpers/Uniques"
+import { ref, useAttrs } from "vue"
+import InputLabel from "./InputLabel.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
+
+const props = withDefaults(
+  defineProps<{
+    options: {
+      label: string
+      value: string
+    }[]
+    legend?: string
+    modelValue: string[]
+  }>(),
+  {
+    legend: "",
+  }
+)
+
+const emits = defineEmits(["update:modelValue"])
+const attrs = useAttrs()
+const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+const model = ref<string[]>(props.modelValue)
+</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>
+    </div>
+  </fieldset>
+</template>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import Uniques from "@/helpers/Uniques"
+import { useAttrs } from "vue"
+import InputLabel from "./InputLabel.vue"
+
+// TODO: add horizontal layout support
+const props = withDefaults(
+  defineProps<{
+    options: {
+      label: string
+      value: string
+    }[]
+    legend?: string
+    modelValue?: string
+    vertical?: boolean
+  }>(),
+  {
+    legend: "",
+    modelValue: "",
+    vertical: true,
+  }
+)
+const emits = defineEmits(["update:modelValue"])
+const attrs = useAttrs()
+const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+</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'"
+    >
+      <label
+        class="inline-flex items-center"
+        :class="{ 'cursor-not-allowed': $attrs.disabled }"
+        :for="`${uuid}-${index}`"
+      >
+        <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>
+  </fieldset>
+</template>

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import Uniques from "@/helpers/Uniques"
+import InputLabel from "./InputLabel.vue"
+import InputHelp from "./InputHelp.vue"
+import { computed, useAttrs } 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()
+
+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",
+      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",
+    } as any
+  )[props.design]
+})
+</script>
+<template>
+  <InputLabel :id="`${uuid}-label`" :for="uuid" :label="label"></InputLabel>
+  <select
+    :aria-labelledby="label ? `${uuid}-label` : undefined"
+    :aria-describedby="help ? `${uuid}-help` : undefined"
+    :class="classes"
+    :id="uuid"
+    :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"
+      :value="option.value"
+      v-text="option.label"
+      :key="option.value"
+    ></option>
+  </select>
+  <InputHelp :id="`${uuid}-help`" :text="help"></InputHelp>
+</template>

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

@@ -0,0 +1,50 @@
+<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()
+</script>
+
+<template>
+  <InputLabel
+    class="block"
+    :id="`${uuid}-label`"
+    :for="uuid"
+    :label="label"
+  ></InputLabel>
+  <textarea
+    :aria-labelledby="label ? `${uuid}-label` : undefined"
+    :aria-describedby="help ? `${uuid}-help` : undefined"
+    :class="[
+      'mt-1',
+      'sm:text-sm',
+      'block',
+      'shadow-sm',
+      'focus:ring-blue-500',
+      'focus:border-blue-500',
+      'border-gray-600',
+      'rounded-md',
+      'w-full',
+    ]"
+    :id="uuid"
+    :value="modelValue"
+    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    v-bind="$attrs"
+  />
+  <InputHelp :id="`${uuid}-help`" :text="help"></InputHelp>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Switch } from "@headlessui/vue"
+
+withDefaults(defineProps<{ modelValue: boolean }>(), { modelValue: false })
+const emits = defineEmits(["update:modelValue"])
+</script>
+<template>
+  <Switch
+    :class="[
+      modelValue ? 'bg-blue-600' : 'bg-gray-200',
+      'relative inline-flex 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-blue-500',
+    ]"
+    :modelValue="modelValue"
+    @update:modelValue="emits('update:modelValue', $event)"
+  >
+    <span 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>
+</template>

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

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import Uniques from "@/helpers/Uniques"
+import { computed, useAttrs } from "vue"
+import InputLabel from "./InputLabel.vue"
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    legend?: string
+    name?: string
+  }>(),
+  {
+    modelValue: undefined,
+    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 !== ""
+})
+const onChange = (e: Event) => {
+  emits("update:modelValue", (e.target as HTMLInputElement).value === "true")
+}
+</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>
+</template>

package/src/lib-components/layout/DateFilter.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { DateRange } from "@/composables/date"
+import { ref } from "vue"
+import DateRangePicker from "../forms/DateRangePicker.vue"
+import Select from "@/lib-components/forms/Select.vue"
+
+const props = defineProps<{
+  dateRange: DateRange
+  sortDir: string
+  title: string
+}>()
+const dateRange = ref<DateRange>(props.dateRange)
+const sortDir = ref<string>(props.sortDir)
+const sortOptions = [
+  { label: "Newest-Oldest", value: "DESC" },
+  { label: "Oldest-Newest", value: "ASC" },
+]
+
+const emits = defineEmits<{
+  (e: "sort-dir-changed", val: string): void
+  (e: "date-range-changed", val: DateRange): void
+}>()
+
+const sortDirChanged = (sortDir: string) => {
+  emits("sort-dir-changed", sortDir)
+}
+
+const dateRangeChanged = (dateRange: DateRange) => {
+  emits("date-range-changed", dateRange)
+}
+</script>
+<template>
+  <div
+    class="md:flex md:items-center md:justify-between bg-white mx-auto py-4 border-t border-gray-100"
+  >
+    <div class="flex-1 min-w-0">
+      <h1 class="text-lg leading-6 font-semibold text-gray-900">
+        {{ title }}
+      </h1>
+    </div>
+    <div class="mt-4 flex md:mt-0 md:ml-4">
+      <Select
+        v-model="sortDir"
+        :options="sortOptions"
+        @update:modelValue="sortDirChanged"
+      ></Select>
+      <DateRangePicker
+        v-model="dateRange"
+        @update:modelValue="dateRangeChanged"
+        class="ml-3"
+      />
+    </div>
+  </div>
+</template>