@xy-planning-network/trees 0.13.11 → 0.14.0-dev-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.13.11",
+  "version": "0.14.0-dev-2",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -64,7 +64,7 @@
     "@maskito/kit": "^3.5.0",
     "@maskito/vue": "^3.5.0",
     "axios": "^1.5.0",
-    "flatpickr": "^4.6.9"
+    "reka-ui": "^2.9.9"
   },
   "peerDependencies": {
     "@tailwindcss/forms": "^0.5.2",

package/src/index.css

@@ -229,9 +229,67 @@
     @apply font-medium border-b-2 border-b-xy-blue hover:border-b-transparent hover:text-xy-blue;
   }
 
-  /* Flatpickr DateRangePicker */
-  .xy-date-range-picker .flatpickr-wrapper {
-    display: block;
+  /* RangeCalendar */
+
+  /* Calendar Prev/Next navigation */
+  .xy-range-cal-nav[data-disabled] {
+    @apply cursor-not-allowed opacity-40 hover:bg-transparent;
+  }
+
+  /* Calendar Day Trigger */
+  .xy-range-cal-trigger {
+    @apply relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none;
+  }
+
+  .xy-range-cal-trigger:focus-visible {
+    @apply shadow-[0_0_0_2px] shadow-xy-blue-500;
+  }
+
+  .xy-range-cal-trigger[data-highlighted] {
+    @apply bg-neutral-100;
+  }
+
+  .xy-range-cal-trigger[data-outside-view] {
+    @apply text-black/50;
+  }
+
+  .xy-range-cal-trigger[data-unavailable] {
+    @apply pointer-events-none text-black/50 line-through;
+  }
+
+  .xy-range-cal-trigger[data-disabled] {
+    @apply cursor-not-allowed text-black/50;
+  }
+
+  .xy-range-cal-trigger[data-selected] {
+    @apply !bg-xy-blue-700 text-white;
+  }
+
+  .xy-range-cal-trigger:hover {
+    @apply bg-xy-blue-700 text-white;
+  }
+
+  .xy-range-cal-trigger[data-disabled]:hover,
+  .xy-range-cal-trigger[data-unavailable]:hover {
+    @apply bg-transparent text-black/50;
+  }
+
+  /* Today Indicator Dot */
+  .xy-range-cal-trigger::before {
+    @apply absolute bottom-[3px] hidden h-1 w-1 rounded-full bg-white;
+    content: "";
+  }
+
+  .xy-range-cal-trigger[data-today]::before {
+    @apply block bg-xy-blue-600;
+  }
+
+  .xy-range-cal-trigger[data-today][data-selected]::before,
+  .xy-range-cal-trigger[data-today][data-selection-start]::before,
+  .xy-range-cal-trigger[data-today][data-selection-end]::before,
+  .xy-range-cal-trigger[data-today][data-highlighted-start]::before,
+  .xy-range-cal-trigger[data-today][data-highlighted-end]::before {
+    @apply bg-white;
   }
 }
 

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

@@ -1,166 +1,212 @@
 <script setup lang="ts">
-import InputLabel from "./InputLabel.vue"
-import InputHelp from "./InputHelp.vue"
-import InputError from "./InputError.vue"
-import flatpickr from "flatpickr"
-import "flatpickr/dist/flatpickr.min.css"
-import { onMounted, useTemplateRef, watch } from "vue"
+import { computed, nextTick, ref, useTemplateRef } from "vue"
 import {
   defaultInputProps,
   defaultModelOpts,
   useInputField,
 } from "@/composables/forms"
 import type { DateRangeInput } from "@/composables/forms"
-import { Instance } from "flatpickr/dist/types/instance"
-import { DateRange } from "@/composables/date"
+import RangeCalendar from "@/lib-components/forms/RangeCalendar.vue"
+import { CalendarDateRangeIcon, XMarkIcon } from "@heroicons/vue/solid"
+
+import {
+  PopoverAnchor,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+} from "reka-ui"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-// maxDate/startDate should be used or maxRange.
-// The props combination of maxDate/startDate and maxRange
-// will have unexpected results.
+/**
+ * NOTE(spk): Default actions made available by Trees do not
+ * account for minValue, maxValue, and maxRange boundary restrictions.
+ *
+ * Likewise a pre-hydrated v-model that is outside those bounds also does
+ * not apply boundaries to that initial value.
+ */
 const props = withDefaults(defineProps<DateRangeInput>(), {
   ...defaultInputProps,
-  maxDate: () => new Date(),
-  maxRange: 0,
-  placeholder: "mm-dd-yyyy range",
-  startDate: 0,
+  actions: () => [],
+  maxRange: undefined,
+  maxValue: () => new Date(),
+  minValue: undefined,
+  placeholder: "mm-dd-yyyy to mm-dd-yyyy",
+  position: "bottom-start",
 })
 
 const modelState = defineModel<DateRangeInput["modelValue"]>({
   ...defaultModelOpts,
-  default: { maxDate: 0, minDate: 0 },
+  default: { maxDate: undefined, minDate: undefined },
 })
 
-function isValidPickerRange(val: any): val is DateRange {
-  return (
-    val?.maxDate !== undefined &&
-    val?.minDate !== undefined &&
-    val?.minDate != 0 &&
-    val?.maxDate != 0
-  )
-}
+const {
+  aria,
+  errorState,
+  inputID,
+  isDisabled,
+  isRequired,
+  nameAttr,
+  onInvalid,
+} = useInputField(props)
+
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+  year: "numeric",
+  month: "short",
+  day: "2-digit",
+})
+
+const display = computed(() => {
+  let out = ""
 
-// NOTE(spk): use watcher.pause() and watcher.resume() when mutating
-// state inside this component to avoid setting the picker value
-// after the state was mutated by the picker itself
-//
-// This keeps the change handling scoped to a change triggered by
-// the parent component on v-model.
-const watcher = watch(modelState, () => {
-  if (isValidPickerRange(modelState.value)) {
-    picker?.setDate(
-      [modelState.value.minDate * 1000, modelState.value.maxDate * 1000],
-      false
-    )
-    return
+  if (modelState.value?.minDate) {
+    out += `${dateFormatter.format(
+      new Date(modelState.value.minDate * 1000)
+    )} to `
   }
 
-  picker?.clear()
+  if (modelState.value?.maxDate) {
+    out += dateFormatter.format(new Date(modelState.value.maxDate * 1000))
+  }
+
+  return out
 })
 
-const { aria, errorState, inputID, isRequired, onInvalid, validate } =
-  useInputField(props)
+const reset = () => {
+  modelState.value = { maxDate: 0, minDate: 0 }
+}
 
-const updateModelState = (value: { minDate: number; maxDate: number }) => {
-  watcher.pause()
-  modelState.value = value
-  watcher.resume()
+const isValid = computed(() => {
+  return !!(modelState.value?.maxDate && modelState.value?.minDate)
+})
+
+const onUpdate = () => {
+  nextTick(() => {
+    if (isValid.value) {
+      errorState.value = ""
+      isOpen.value = false
+    }
+  })
 }
 
-const wrapperRef = useTemplateRef("wrapper")
-
-let picker: Instance | null = null
-
-onMounted(() => {
-  const opts: flatpickr.Options.Options = {
-    allowInput: !props.maxRange,
-    appendTo: wrapperRef.value || undefined,
-    dateFormat: "m-d-Y",
-    mode: "range",
-    maxDate: props.maxDate,
-    minDate: props.startDate,
-    onClose: (selectedDates) => {
-      if (selectedDates.length === 2) {
-        updateModelState({
-          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) {
-        updateModelState({
-          minDate: 0,
-          maxDate: 0,
-        })
-      }
-    },
-    static: true,
+const isOpen = ref(false)
+const onUpdateIsOpen = (open: boolean) => {
+  if (!open && !isValid.value) {
+    reset()
   }
+}
 
-  // Handle initial values if set
-  if (isValidPickerRange(modelState.value)) {
-    opts.defaultDate = [
-      modelState.value.minDate * 1000,
-      modelState.value.maxDate * 1000,
-    ]
-  }
+const calendarRef = useTemplateRef<InstanceType<typeof RangeCalendar> | null>(
+  "calendar"
+)
 
-  if (props.maxRange) {
-    // Handle onChange to dynamically adjust maxDate to x days ahead of the selected start date
-    opts.onChange = (selectedDates, _, self) => {
-      if (selectedDates.length === 1) {
-        // Clone date so as to not change selectedDates[0] value
-        var daysAhead = new Date(selectedDates[0].getTime())
-        var daysBefore = new Date(selectedDates[0].getTime())
-        daysAhead.setDate(daysAhead.getDate() + props.maxRange)
-        daysBefore.setDate(daysBefore.getDate() - props.maxRange)
-        const now = new Date()
-
-        if (daysAhead > now) {
-          daysAhead = now
-        }
-
-        self.set("minDate", daysBefore)
-        self.set("maxDate", daysAhead)
-      }
-    }
-  }
+const inputRef = useTemplateRef<HTMLInputElement | null>("input")
 
-  picker = flatpickr(`#${inputID.value}`, opts) as Instance
+defineExpose({ calendar: calendarRef, input: inputRef })
+
+const alignment = computed(() => {
+  switch (props.position) {
+    case "bottom-start":
+      return "start"
+    case "bottom-end":
+      return "end"
+    default: // bottom
+      return "center"
+  }
 })
 </script>
 
 <template>
-  <div ref="wrapper" class="xy-date-range-picker">
-    <InputLabel
-      :id="aria.labelledby"
-      class="mb-2"
-      :for="inputID"
-      :label="label"
-      :required="isRequired"
-    />
-    <input
-      :id="inputID"
-      :aria-labelledby="aria.labelledby"
-      :aria-describedby="aria.describedby"
-      :aria-errormessage="aria.errormessage"
-      :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-700 disabled:ring-gray-200',
-        errorState
-          ? 'text-red-900 ring-red-700 placeholder:text-red-300 focus:ring-red-700'
-          : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-xy-blue-500',
-      ]"
-      :placeholder="placeholder"
-      v-bind="$attrs"
-      type="text"
-      @input="validate"
-      @invalid="onInvalid"
-    />
-    <InputHelp :id="aria.describedby" class="mt-1" :text="help" />
-    <InputError :id="aria.errormessage" class="mt-0.5" :text="errorState" />
-  </div>
+  <PopoverRoot v-model:open="isOpen" @update:open="onUpdateIsOpen">
+    <div class="xy-date-range-picker">
+      <InputLabel
+        :id="aria.labelledby"
+        class="mb-2"
+        :for="inputID"
+        :label="label"
+        :required="isRequired"
+      />
+      <PopoverAnchor as="div" class="relative">
+        <input
+          :id="inputID"
+          ref="input"
+          :aria-labelledby="aria.labelledby"
+          :aria-describedby="aria.describedby"
+          :aria-errormessage="aria.errormessage"
+          :class="[
+            'block w-full rounded-md border-0 py-2 pr-9 shadow-sm ring-1 ring-inset focus:ring-2 data-[state=open]:ring-2 sm:text-sm sm:leading-6',
+            'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-700 disabled:ring-gray-200',
+            errorState
+              ? 'text-red-900 ring-red-700 placeholder:text-red-300 focus:ring-red-700 data-[state=open]:ring-red-700'
+              : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-xy-blue-500 data-[state=open]:ring-xy-blue-500',
+          ]"
+          :data-state="isOpen ? 'open' : 'closed'"
+          :placeholder="placeholder"
+          readonly
+          :value="display"
+          v-bind="$attrs"
+          type="text"
+          @focus="isOpen = true"
+        />
+
+        <div class="absolute right-0 top-1/2 -translate-y-1/2 text-neutral-400">
+          <button v-if="isValid && !isDisabled" class="p-2" @click="reset">
+            <XMarkIcon class="w-5 h-5" />
+          </button>
+
+          <PopoverTrigger class="p-2" :disabled="isDisabled" tabindex="-1">
+            <CalendarDateRangeIcon class="w-5 h-5" />
+          </PopoverTrigger>
+        </div>
+      </PopoverAnchor>
+
+      <InputHelp :id="aria.describedby" class="mt-1" :text="help" />
+      <InputError :id="aria.errormessage" class="mt-0.5" :text="errorState" />
+
+      <input
+        class="sr-only top-1 left-1"
+        aria-hidden="true"
+        :name="`${nameAttr}[minDate]`"
+        :required="isRequired"
+        :value="modelState?.minDate"
+        tabindex="-1"
+        @invalid="onInvalid"
+      />
+      <input
+        class="sr-only top-1 left-1"
+        aria-hidden="true"
+        :name="`${nameAttr}[maxDate]`"
+        :required="isRequired"
+        :value="modelState?.maxDate"
+        tabindex="-1"
+        @invalid="onInvalid"
+      />
+    </div>
+
+    <PopoverPortal disabled>
+      <PopoverContent
+        :align="alignment"
+        :align-flip="false"
+        :arrow-padding="10"
+        class="border border-neutral-100 overflow-hidden rounded-xy-lg shadow z-50"
+        side="bottom"
+        :side-flip="false"
+        :side-offset="5"
+      >
+        <RangeCalendar
+          ref="calendar"
+          v-model="modelState"
+          :actions="actions"
+          borderless
+          :max-range="maxRange"
+          :max-value="maxValue"
+          :min-value="minValue"
+          @update:model-value="onUpdate"
+        />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
 </template>

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

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import type { DateRange as RekaDateRange } from "reka-ui"
+import { getLocalTimeZone, CalendarDate } from "@internationalized/date"
+import {
+  RangeCalendarCell,
+  RangeCalendarCellTrigger,
+  RangeCalendarGrid,
+  RangeCalendarGridBody,
+  RangeCalendarGridHead,
+  RangeCalendarGridRow,
+  RangeCalendarHeadCell,
+  RangeCalendarNext,
+  RangeCalendarPrev,
+  RangeCalendarRoot,
+  useDateFormatter,
+} from "reka-ui"
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/solid"
+import { computed } from "vue"
+import { defaultModelOpts } from "@/composables/forms"
+import type { DateRangeAction, DateRangeInput } from "@/composables/forms"
+import { calendarDateToUnix } from "@/composables/dateRange"
+
+const formatter = useDateFormatter("en-US")
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+/**
+ * FIXME(spk): An oddity of Reka-UI RangeCalendar is that is applies
+ * [data-highlighted] attributes to all cells inside the range applicable
+ * to the maximum-days range, even those that are outside of min-value/max-value.
+ */
+const props = withDefaults(
+  defineProps<
+    DateRangeInput & {
+      actions?: DateRangeAction[]
+      borderless?: boolean
+      maxRange?: number
+      maxValue?: Date | null
+      minValue?: Date
+    }
+  >(),
+  {
+    actions: () => [],
+    borderless: false,
+    maxRange: undefined,
+    maxValue: undefined,
+    minValue: undefined,
+  }
+)
+
+const modelState = defineModel<DateRangeInput["modelValue"]>({
+  ...defaultModelOpts,
+  default: { maxDate: 0, minDate: 0 },
+})
+
+const selectedRange = computed<RekaDateRange>({
+  get: () => {
+    if (!modelState.value) {
+      return {
+        start: undefined,
+        end: undefined,
+      }
+    }
+
+    return {
+      start: unixToCalendarDate(modelState.value.minDate),
+      end: unixToCalendarDate(modelState.value.maxDate),
+    }
+  },
+  set: (val) => {
+    setModelState({
+      minDate: val?.start ? calendarDateToUnix(val.start) : 0,
+      maxDate: val?.end
+        ? Math.floor(
+            val.end.toDate(getLocalTimeZone()).setHours(23, 59, 59, 999) / 1000
+          )
+        : 0,
+    })
+  },
+})
+
+// NOTE(spk): guard against Reka write-back loop when modelState is set
+// to zero-values as it will trigger multiple update:model-value events.
+const setModelState = (next: NonNullable<DateRangeInput["modelValue"]>) => {
+  if (
+    modelState.value?.minDate === next.minDate &&
+    modelState.value?.maxDate === next.maxDate
+  ) {
+    return
+  }
+
+  modelState.value = next
+}
+
+const unixToCalendarDate = (
+  unixSeconds?: number | null
+): CalendarDate | undefined => {
+  if (!unixSeconds) {
+    return undefined
+  }
+
+  const localDate = new Date(unixSeconds * 1000)
+  return new CalendarDate(
+    localDate.getFullYear(),
+    localDate.getMonth() + 1,
+    localDate.getDate()
+  )
+}
+
+const bounds = computed(() => {
+  return {
+    maxValue: props.maxValue
+      ? new CalendarDate(
+          props.maxValue.getFullYear(),
+          props.maxValue.getMonth() + 1,
+          props.maxValue.getDate()
+        )
+      : undefined,
+    minValue: props.minValue
+      ? new CalendarDate(
+          props.minValue.getFullYear(),
+          props.minValue.getMonth() + 1,
+          props.minValue.getDate()
+        )
+      : undefined,
+  }
+})
+
+const quickActions = computed(() => {
+  return props.actions.map((action) => {
+    return {
+      label: action.label,
+      action: () => {
+        setModelState(action.action(props))
+      },
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="w-full flex items-start justify-start">
+    <div
+      :class="[
+        'bg-white overflow-hidden flex flex-col-reverse sm:flex-row',
+        !borderless && 'border border-neutral-100 shadow rounded-xy-lg',
+      ]"
+    >
+      <!--Quick Actions-->
+      <div
+        v-if="quickActions.length > 0"
+        class="bg-neutral-50 p-4 grid grid-cols-2 sm:grid-cols-1 lg:max-w-[160px]"
+      >
+        <button
+          v-for="option in quickActions"
+          :key="option.label"
+          class="flex w-full rounded-md bg-transparent hover:bg-gray-100 transition px-3 py-2 text-xs font-medium"
+          @click="option.action"
+        >
+          {{ option.label }}
+        </button>
+      </div>
+
+      <div>
+        <!-- Calendar Input-->
+        <RangeCalendarRoot
+          v-slot="{ weekDays, grid }"
+          v-model="selectedRange"
+          class="flex space-y-4 flex-col lg:flex-row lg:space-y-0 p-4"
+          :number-of-months="1"
+          locale="en-US"
+          :maximum-days="maxRange"
+          :max-value="bounds.maxValue"
+          :min-value="bounds.minValue"
+        >
+          <div
+            v-for="(month, index) in grid"
+            :key="month.value.toString()"
+            :class="{ 'mr-4': index === 0 }"
+          >
+            <div v-if="index === 0" class="flex items-center">
+              <RangeCalendarPrev class="xy-btn-neutral-sm xy-range-cal-nav">
+                <ChevronLeftIcon class="w-4 h-4" />
+              </RangeCalendarPrev>
+
+              <!--Left Month Date Display-->
+              <span
+                class="text-sm font-semibold text-xy-black flex-1 text-center"
+                >{{
+                  formatter.custom(month.value.toDate(getLocalTimeZone()), {
+                    month: "long",
+                    year: "numeric",
+                  })
+                }}</span
+              >
+
+              <RangeCalendarNext class="xy-btn-neutral-sm xy-range-cal-nav">
+                <ChevronRightIcon class="w-4 h-4" />
+              </RangeCalendarNext>
+            </div>
+
+            <div class="pt-4">
+              <RangeCalendarGrid class="w-full select-none space-y-1">
+                <RangeCalendarGridHead>
+                  <RangeCalendarGridRow class="mb-1 grid w-full grid-cols-7">
+                    <RangeCalendarHeadCell
+                      v-for="day in weekDays"
+                      :key="day"
+                      class="text-xs text-xy-blue-600 font-bold"
+                    >
+                      {{ day }}
+                    </RangeCalendarHeadCell>
+                  </RangeCalendarGridRow>
+                </RangeCalendarGridHead>
+
+                <RangeCalendarGridBody class="grid">
+                  <RangeCalendarGridRow
+                    v-for="(weekDates, rowIndex) in month.rows"
+                    :key="`weekDate-${rowIndex}`"
+                    class="grid grid-cols-7"
+                  >
+                    <RangeCalendarCell
+                      v-for="weekDate in weekDates"
+                      :key="weekDate.toString()"
+                      :date="weekDate"
+                      class="xy-range-calendar-cell"
+                    >
+                      <RangeCalendarCellTrigger
+                        :day="weekDate"
+                        :month="month.value"
+                        class="xy-range-cal-trigger"
+                      />
+                    </RangeCalendarCell>
+                  </RangeCalendarGridRow>
+                </RangeCalendarGridBody>
+              </RangeCalendarGrid>
+            </div>
+          </div>
+        </RangeCalendarRoot>
+      </div>
+    </div>
+  </div>
+</template>