@xy-planning-network/trees 0.3.3 → 0.4.0-rc-2

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

@@ -1,3 +1,59 @@
+<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"
@@ -7,59 +63,3 @@
     :help="help"
   ></BaseInput>
 </template>
-
-<script lang="ts">
-import Uniques from "@/helpers/Uniques";
-import { Emit, Options, Prop, Vue } from "vue-property-decorator";
-import flatpickr from "flatpickr";
-import "flatpickr/dist/flatpickr.min.css";
-import BaseInput from "./BaseInput.vue";
-
-@Options({
-  name: "DateRangePicker",
-  components: { BaseInput },
-})
-export default class DateRangePicker extends Vue {
-  @Prop({ type: Object, required: true }) modelValue!: {
-    minDate: number;
-    maxDate: number;
-  };
-  @Prop({ type: Number, required: false }) startDate?: number;
-  @Prop({ type: String, required: false }) label?: string;
-  @Prop({ type: String, required: false }) help?: string;
-
-  uuid = (this.$attrs.id as string) || Uniques.CreateIdAttribute();
-
-  @Emit("update:modelValue")
-  updateModelValue(value: {
-    minDate: number;
-    maxDate: number;
-  }): { minDate: number; maxDate: number } {
-    return value;
-  }
-
-  mounted() {
-    flatpickr(`#${this.uuid}`, {
-      dateFormat: "m-d-Y",
-      mode: "range",
-      maxDate: new Date(), // So far, we cannot have options past today for ranges
-      minDate: this.startDate,
-      onClose: (selectedDates) => {
-        if (selectedDates.length === 2) {
-          this.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) {
-          this.updateModelValue({
-            minDate: 0,
-            maxDate: 0,
-          });
-        }
-      },
-    });
-  }
-}
-</script>

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

@@ -1,3 +1,15 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    tag?: string
+    text?: string
+  }>(),
+  {
+    tag: "div",
+    text: "",
+  }
+)
+</script>
 <template>
   <component
     :is="tag"
@@ -10,12 +22,3 @@
     {{ text }}
   </component>
 </template>
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-
-@Options({ name: "InputHelp" })
-export default class InputHelp extends Vue {
-  @Prop({ type: String, required: false }) text?: string;
-  @Prop({ type: String, required: false, default: "div" }) tag?: string;
-}
-</script>

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

@@ -1,3 +1,15 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label?: string
+    tag?: string
+  }>(),
+  {
+    label: "",
+    tag: "label",
+  }
+)
+</script>
 <template>
   <component
     :is="tag"
@@ -9,12 +21,3 @@
     >{{ label }}</component
   >
 </template>
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-
-@Options({ name: "InputLabel" })
-export default class InputLabel extends Vue {
-  @Prop({ type: String, required: false }) label?: string;
-  @Prop({ type: String, required: false, default: "label" }) tag?: string;
-}
-</script>

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

@@ -1,51 +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">
-      <div class="flex items-start">
-        <div class="flex items-center h-5">
-          <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"
-          />
-        </div>
-        <div class="ml-3 text-sm font-semibold leading-snug text-gray-900">
-          <label :for="`${uuid}-${index}`" v-text="option.label"></label>
-        </div>
-      </div>
+      <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>
-
-<script lang="ts">
-import Uniques from "@/helpers/Uniques";
-import { Options, Prop, Vue, Watch } from "vue-property-decorator";
-import InputLabel from "./InputLabel.vue";
-
-@Options({ name: "MultiCheckboxes", components: { InputLabel } })
-export default class MultiCheckboxes extends Vue {
-  @Prop({ type: Array, required: true }) options!: Array<{
-    label: string;
-    value: string;
-  }>;
-  @Prop({ type: String, required: false }) legend?: string;
-  @Prop({ type: Array, required: true }) modelValue!: string[];
-
-  model: string[] = [];
-
-  uuid = (this.$attrs.id as string) || Uniques.CreateIdAttribute();
-
-  @Watch("model")
-  onModelChanged(val: string[]): void {
-    this.$emit("update:modelValue", val);
-  }
-
-  mounted() {
-    this.model = this.modelValue;
-  }
-}
-</script>

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

@@ -1,7 +1,37 @@
+<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>
-    <div v-for="(option, index) in options" :key="option.value">
+    <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 }"
@@ -17,32 +47,12 @@
           v-bind="{
             ...$attrs,
             onChange: ($event) => {
-              $emit('update:modelValue', $event.target.value);
+              emits('update:modelValue', ($event.target as HTMLInputElement).value)
             },
           }"
         />
-        <span class="block ml-2 text-sm font-semibold text-gray-900">
-          {{ option.label }}
-        </span>
+        <InputLabel class="ml-2" :label="option.label" tag="span"></InputLabel>
       </label>
-    </div>
+    </component>
   </fieldset>
 </template>
-
-<script lang="ts">
-import Uniques from "@/helpers/Uniques";
-import { Options, Prop, Vue } from "vue-property-decorator";
-import InputLabel from "./InputLabel.vue";
-
-@Options({ name: "Radio", components: { InputLabel } })
-export default class Radio extends Vue {
-  @Prop({ type: Array, required: true }) options!: Array<{
-    label: string;
-    value: string;
-  }>;
-  @Prop({ type: String, required: false }) legend?: string;
-  @Prop({ type: String, required: false }) modelValue?: string;
-
-  uuid = (this.$attrs.id as string) || Uniques.CreateIdAttribute();
-}
-</script>

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

@@ -1,3 +1,41 @@
+<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 // TODO: spk 4.0-rc test usage of undefined initial model value here.
+  }>(),
+  {
+    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
@@ -9,17 +47,11 @@
     v-bind="{
       ...$attrs,
       onChange: ($event) => {
-        $emit('update:modelValue', $event.target.value);
+        emit('update:modelValue', ($event.target as HTMLInputElement).value)
       },
     }"
   >
-    <option
-      value=""
-      disabled
-      selected
-      v-if="placeholder"
-      :placeholder="placeholder"
-    >
+    <option v-if="placeholder" value="" disabled selected>
       {{ placeholder }}
     </option>
     <option
@@ -31,41 +63,3 @@
   </select>
   <InputHelp :id="`${uuid}-help`" :text="help"></InputHelp>
 </template>
-
-<script lang="ts">
-import Uniques from "@/helpers/Uniques";
-import { Options, Prop, Vue } from "vue-property-decorator";
-import InputLabel from "./InputLabel.vue";
-import InputHelp from "./InputHelp.vue";
-
-@Options({ name: "Select", components: { InputLabel, InputHelp } })
-export default class Select extends Vue {
-  @Prop({ type: String, required: false }) design?: string;
-  @Prop({ type: String, required: false }) label?: string;
-  @Prop({ type: String, required: false }) help?: string;
-  @Prop({ type: Array, required: true }) options!: Array<{
-    label: string;
-    value: string | number;
-  }>;
-  @Prop({ type: String, required: false, default: "Select an option" })
-  placeholder?: string;
-  @Prop({ type: [String, Number], required: true }) modelValue!:
-    | string
-    | number
-    | undefined;
-
-  uuid = (this.$attrs.id as string) || Uniques.CreateIdAttribute();
-
-  get classes(): string {
-    const design = this.design ? this.design : "undefined";
-    return ({
-      undefined:
-        "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",
-      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)[design];
-  }
-}
-</script>

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

@@ -1,3 +1,25 @@
+<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"
@@ -21,24 +43,8 @@
     ]"
     :id="uuid"
     :value="modelValue"
-    @input="$emit('update:modelValue', $event.target.value)"
+    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     v-bind="$attrs"
   />
   <InputHelp :id="`${uuid}-help`" :text="help"></InputHelp>
 </template>
-
-<script lang="ts">
-import Uniques from "@/helpers/Uniques";
-import { Options, Prop, Vue } from "vue-property-decorator";
-import InputLabel from "./InputLabel.vue";
-import InputHelp from "./InputHelp.vue";
-
-@Options({ name: "TextArea", components: { InputLabel, InputHelp } })
-export default class TextArea extends Vue {
-  @Prop({ type: String, required: false }) label?: string;
-  @Prop({ type: String, required: false }) help?: string;
-  @Prop({ type: [String, Number], required: false }) modelValue?: string;
-
-  uuid = (this.$attrs.id as string) || Uniques.CreateIdAttribute();
-}
-</script>

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

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { Switch } from "@headlessui/vue"
+
+withDefaults(defineProps<{ modelValue: boolean }>(), { modelValue: false })
+const emits = defineEmits(["update:modelValue"])
+</script>
 <template>
   <Switch
     :class="[
@@ -5,7 +11,7 @@
       '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="$emit('update:modelValue', $event)"
+    @update:modelValue="emits('update:modelValue', $event)"
   >
     <span class="sr-only">Use</span>
     <span
@@ -17,13 +23,3 @@
     />
   </Switch>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-import { Switch } from "@headlessui/vue";
-
-@Options({ name: "Toggle", components: { Switch } })
-export default class Toggle extends Vue {
-  @Prop({ type: Boolean, required: false }) modelValue?: boolean;
-}
-</script>

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

@@ -1,3 +1,30 @@
+<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>
@@ -15,12 +42,10 @@
         :checked="modelValue === true"
         v-bind="{
           ...$attrs,
-          onChange: ($event) => {
-            $emit('update:modelValue', $event.target.value === 'true');
-          },
+          onChange: onChange,
         }"
       />
-      <span class="block ml-2 text-sm font-semibold text-gray-900">Yes</span>
+      <InputLabel class="ml-2" label="Yes" tag="span"></InputLabel>
     </label>
     <label
       class="inline-flex items-center ml-6"
@@ -36,31 +61,10 @@
         :checked="modelValue === false"
         v-bind="{
           ...$attrs,
-          onChange: ($event) => {
-            $emit('update:modelValue', $event.target.value === 'true');
-          },
+          onChange: onChange,
         }"
       />
-      <span class="block ml-2 text-sm font-semibold text-gray-900">No</span>
+      <InputLabel class="ml-2" label="No" tag="span"></InputLabel>
     </label>
   </fieldset>
 </template>
-
-<script lang="ts">
-import Uniques from "@/helpers/Uniques";
-import { Options, Prop, Vue } from "vue-property-decorator";
-import InputLabel from "./InputLabel.vue";
-
-@Options({ name: "YesOrNoRadio", components: { InputLabel } })
-export default class YesOrNoRadio extends Vue {
-  @Prop({ type: Boolean, required: false }) modelValue?: boolean;
-  @Prop({ type: String, required: false }) legend?: string;
-  @Prop({ type: String, required: false, default: "" }) name?: string;
-
-  uuid = (this.$attrs.id as string) || Uniques.CreateIdAttribute();
-
-  get hasNameAttr(): boolean {
-    return typeof this.name === "string" && this.name !== "";
-  }
-}
-</script>

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

@@ -1,3 +1,33 @@
+<script lang="ts">
+export interface DateRange {
+  minDate: number
+  maxDate: number
+}
+</script>
+<script setup lang="ts">
+import { ref } from "vue"
+import DateRangePicker from "../forms/DateRangePicker.vue"
+
+const props = defineProps<{
+  dateRange: DateRange
+  sortDir: string
+  title: string
+}>()
+const dateRange = ref<DateRange>(props.dateRange)
+
+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"
@@ -9,7 +39,7 @@
     </div>
     <div class="mt-4 flex md:mt-0 md:ml-4">
       <select
-        @change="sortDirChanged($event.target.value)"
+        @change="sortDirChanged(($event.target as HTMLInputElement).value)"
         class="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"
       >
         <option value="DESC">Newest-Oldest</option>
@@ -24,32 +54,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Emit, Options, Prop, Vue } from "vue-property-decorator";
-import DateRangePicker from "../forms/DateRangePicker.vue";
-
-@Options({ components: { DateRangePicker }, name: "DateFilter" })
-export default class DateFilter extends Vue {
-  // TODO: sort select should use built in select component
-  @Prop({ type: Object, required: true }) dateRange!: {
-    minDate: number;
-    maxDate: number;
-  };
-  @Prop({ type: String, required: true }) sortDir!: string;
-  @Prop({ type: String, required: true }) title!: string;
-
-  @Emit()
-  sortDirChanged(sortDir: string): string {
-    return sortDir;
-  }
-
-  @Emit()
-  dateRangeChanged(dateRange: {
-    minDate: number;
-    maxDate: number;
-  }): { minDate: number; maxDate: number } {
-    return dateRange;
-  }
-}
-</script>