@rupe/v-datepicker 1.0.0-alpha.0

package/dist/shared/date/useDateField.js

@@ -0,0 +1,618 @@
+import { computed } from "vue";
+import { toDate, getDaysInMonth } from "../../date/comparators.js";
+import { useKbd } from "../useKbd.js";
+import { isAcceptableSegmentKey, isSegmentNavigationKey, isNumberString } from "./segment.js";
+function commonSegmentAttrs(props) {
+  return {
+    role: "spinbutton",
+    contenteditable: true,
+    tabindex: props.disabled ? void 0 : 0,
+    spellcheck: false,
+    inputmode: "numeric",
+    autocorrect: "off",
+    enterkeyhint: "next",
+    style: "caret-color: transparent;"
+  };
+}
+function daySegmentAttrs(props) {
+  const { segmentValues, placeholder } = props;
+  const isEmpty = segmentValues.day === null;
+  const date = segmentValues.day ? placeholder.set({ day: segmentValues.day }) : placeholder;
+  const valueNow = date.day;
+  const valueMin = 1;
+  const valueMax = getDaysInMonth(date);
+  const valueText = isEmpty ? "Empty" : `${valueNow}`;
+  return {
+    ...commonSegmentAttrs(props),
+    "aria-label": "day,",
+    "aria-valuemin": valueMin,
+    "aria-valuemax": valueMax,
+    "aria-valuenow": valueNow,
+    "aria-valuetext": valueText,
+    "data-placeholder": isEmpty ? "" : void 0
+  };
+}
+function monthSegmentAttrs(props) {
+  const { segmentValues, placeholder, formatter } = props;
+  const isEmpty = segmentValues.month === null;
+  const date = segmentValues.month ? placeholder.set({ month: segmentValues.month }) : placeholder;
+  const valueNow = date.month;
+  const valueMin = 1;
+  const valueMax = 12;
+  const valueText = isEmpty ? "Empty" : `${valueNow} - ${formatter.fullMonth(toDate(date))}`;
+  return {
+    ...commonSegmentAttrs(props),
+    "aria-label": "month, ",
+    contenteditable: true,
+    "aria-valuemin": valueMin,
+    "aria-valuemax": valueMax,
+    "aria-valuenow": valueNow,
+    "aria-valuetext": valueText,
+    "data-placeholder": isEmpty ? "" : void 0
+  };
+}
+function yearSegmentAttrs(props) {
+  const { segmentValues, placeholder } = props;
+  const isEmpty = segmentValues.year === null;
+  const date = segmentValues.year ? placeholder.set({ year: segmentValues.year }) : placeholder;
+  const valueMin = 1;
+  const valueMax = 9999;
+  const valueNow = date.year;
+  const valueText = isEmpty ? "Empty" : `${valueNow}`;
+  return {
+    ...commonSegmentAttrs(props),
+    "aria-label": "year, ",
+    "aria-valuemin": valueMin,
+    "aria-valuemax": valueMax,
+    "aria-valuenow": valueNow,
+    "aria-valuetext": valueText,
+    "data-placeholder": isEmpty ? "" : void 0
+  };
+}
+function hourSegmentAttrs(props) {
+  const { segmentValues, hourCycle, placeholder } = props;
+  if (!("hour" in segmentValues) || !("hour" in placeholder)) return {};
+  const isEmpty = segmentValues.hour === null;
+  const date = segmentValues.hour ? placeholder.set({ hour: segmentValues.hour }) : placeholder;
+  const valueMin = hourCycle === 12 ? 1 : 0;
+  const valueMax = hourCycle === 12 ? 12 : 23;
+  const valueNow = date.hour;
+  const valueText = isEmpty ? "Empty" : `${valueNow} ${segmentValues.dayPeriod ?? ""}`;
+  return {
+    ...commonSegmentAttrs(props),
+    "aria-label": "hour, ",
+    "aria-valuemin": valueMin,
+    "aria-valuemax": valueMax,
+    "aria-valuenow": valueNow,
+    "aria-valuetext": valueText,
+    "data-placeholder": isEmpty ? "" : void 0
+  };
+}
+function minuteSegmentAttrs(props) {
+  const { segmentValues, placeholder } = props;
+  if (!("minute" in segmentValues) || !("minute" in placeholder)) return {};
+  const isEmpty = segmentValues.minute === null;
+  const date = segmentValues.minute ? placeholder.set({ minute: segmentValues.minute }) : placeholder;
+  const valueNow = date.minute;
+  const valueMin = 0;
+  const valueMax = 59;
+  const valueText = isEmpty ? "Empty" : `${valueNow}`;
+  return {
+    ...commonSegmentAttrs(props),
+    "aria-label": "minute, ",
+    "aria-valuemin": valueMin,
+    "aria-valuemax": valueMax,
+    "aria-valuenow": valueNow,
+    "aria-valuetext": valueText,
+    "data-placeholder": isEmpty ? "" : void 0
+  };
+}
+function secondSegmentAttrs(props) {
+  const { segmentValues, placeholder } = props;
+  if (!("second" in segmentValues) || !("second" in placeholder)) return {};
+  const isEmpty = segmentValues.second === null;
+  const date = segmentValues.second ? placeholder.set({ second: segmentValues.second }) : placeholder;
+  const valueNow = date.second;
+  const valueMin = 0;
+  const valueMax = 59;
+  const valueText = isEmpty ? "Empty" : `${valueNow}`;
+  return {
+    ...commonSegmentAttrs(props),
+    "aria-label": "second, ",
+    "aria-valuemin": valueMin,
+    "aria-valuemax": valueMax,
+    "aria-valuenow": valueNow,
+    "aria-valuetext": valueText,
+    "data-placeholder": isEmpty ? "" : void 0
+  };
+}
+function dayPeriodSegmentAttrs(props) {
+  const { segmentValues } = props;
+  if (!("dayPeriod" in segmentValues)) return {};
+  const valueMin = 0;
+  const valueMax = 12;
+  const valueNow = segmentValues.hour ? segmentValues.hour > 12 ? segmentValues.hour - 12 : segmentValues.hour : 0;
+  const valueText = segmentValues.dayPeriod ?? "AM";
+  return {
+    ...commonSegmentAttrs(props),
+    inputmode: "text",
+    "aria-label": "AM/PM",
+    "aria-valuemin": valueMin,
+    "aria-valuemax": valueMax,
+    "aria-valuenow": valueNow,
+    "aria-valuetext": valueText
+  };
+}
+function literalSegmentAttrs(_props) {
+  return {
+    "aria-hidden": true,
+    "data-segment": "literal"
+  };
+}
+function timeZoneSegmentAttrs(props) {
+  return {
+    role: "textbox",
+    "aria-label": "timezone, ",
+    "data-readonly": true,
+    "data-segment": "timeZoneName",
+    tabindex: props.disabled ? void 0 : 0,
+    style: "caret-color: transparent;"
+  };
+}
+function eraSegmentAttrs(props) {
+  const { segmentValues, placeholder } = props;
+  const valueMin = 0;
+  const valueMax = 0;
+  const valueNow = 0;
+  const valueText = "era" in segmentValues ? segmentValues.era : placeholder.era;
+  return {
+    ...commonSegmentAttrs(props),
+    "aria-label": "era",
+    "aria-valuemin": valueMin,
+    "aria-valuemax": valueMax,
+    "aria-valuenow": valueNow,
+    "aria-valuetext": valueText
+  };
+}
+const segmentBuilders = {
+  day: {
+    attrs: daySegmentAttrs
+  },
+  month: {
+    attrs: monthSegmentAttrs
+  },
+  year: {
+    attrs: yearSegmentAttrs
+  },
+  hour: {
+    attrs: hourSegmentAttrs
+  },
+  minute: {
+    attrs: minuteSegmentAttrs
+  },
+  second: {
+    attrs: secondSegmentAttrs
+  },
+  dayPeriod: {
+    attrs: dayPeriodSegmentAttrs
+  },
+  literal: {
+    attrs: literalSegmentAttrs
+  },
+  timeZoneName: {
+    attrs: timeZoneSegmentAttrs
+  },
+  era: {
+    attrs: eraSegmentAttrs
+  }
+};
+function useDateField(props) {
+  const kbd = useKbd();
+  function minuteSecondIncrementation({
+    e,
+    part,
+    dateRef,
+    prevValue
+  }) {
+    const step = props.step.value[part] ?? 1;
+    const sign = e.key === kbd.ARROW_UP ? step : -step;
+    const min = 0;
+    const max = 59;
+    if (prevValue === null) return sign > 0 ? min : max;
+    const cycleArgs = [part, sign];
+    return dateRef.set({ [part]: prevValue }).cycle(...cycleArgs)[part];
+  }
+  function deleteValue(prevValue) {
+    props.hasLeftFocus.value = false;
+    if (prevValue === null) return prevValue;
+    const str = prevValue.toString();
+    if (str.length === 1) {
+      props.modelValue.value = void 0;
+      return null;
+    }
+    return Number.parseInt(str.slice(0, -1));
+  }
+  function dateTimeValueIncrementation({
+    e,
+    part,
+    dateRef,
+    prevValue,
+    hourCycle
+  }) {
+    const step = props.step.value[part] ?? 1;
+    const sign = e.key === kbd.ARROW_UP ? step : -step;
+    if (prevValue === null)
+      return dateRef[part];
+    if (part === "hour" && "hour" in dateRef) {
+      const cycleArgs2 = [part, sign, { hourCycle }];
+      return dateRef.set({ [part]: prevValue }).cycle(...cycleArgs2)[part];
+    }
+    const cycleArgs = [
+      part,
+      sign
+    ];
+    if (part === "day") {
+      return dateRef.set({
+        [part]: prevValue,
+        /**
+         * Edge case for the day field:
+         *
+         * 1. If the month is filled,
+         *   we need to ensure that the day snaps to the maximum value of that month.
+         * 2. If the month is not filled,
+         *   we default to the month with the maximum number of days (here just using January, 31 days),
+         *   so that user can input any possible day.
+         */
+        month: props.segmentValues.value.month ?? 1
+      }).cycle(...cycleArgs)[part];
+    }
+    return dateRef.set({ [part]: prevValue }).cycle(...cycleArgs)[part];
+  }
+  function updateDayOrMonth(max, num, prev) {
+    let moveToNext = false;
+    const maxStart = Math.floor(max / 10);
+    if (props.hasLeftFocus.value) {
+      props.hasLeftFocus.value = false;
+      prev = null;
+    }
+    if (prev === null) {
+      if (num === 0) {
+        props.lastKeyZero.value = true;
+        return { value: null, moveToNext };
+      }
+      if (props.lastKeyZero.value || num > maxStart) {
+        moveToNext = true;
+      }
+      props.lastKeyZero.value = false;
+      return { value: num, moveToNext };
+    }
+    const digits = prev.toString().length;
+    const total = Number.parseInt(prev.toString() + num.toString());
+    if (digits === 2 || total > max) {
+      if (num > maxStart || total > max) {
+        moveToNext = true;
+      }
+      return { value: num, moveToNext };
+    }
+    moveToNext = true;
+    return { value: total, moveToNext };
+  }
+  function updateMinuteOrSecond(num, prev) {
+    const max = 59;
+    let moveToNext = false;
+    const maxStart = Math.floor(max / 10);
+    if (props.hasLeftFocus.value) {
+      props.hasLeftFocus.value = false;
+      prev = null;
+    }
+    if (prev === null) {
+      if (num === 0) {
+        props.lastKeyZero.value = true;
+        return { value: 0, moveToNext };
+      }
+      if (props.lastKeyZero.value || num > maxStart) {
+        moveToNext = true;
+      }
+      props.lastKeyZero.value = false;
+      return { value: num, moveToNext };
+    }
+    const digits = prev.toString().length;
+    const total = Number.parseInt(prev.toString() + num.toString());
+    if (digits === 2 || total > max) {
+      if (num > maxStart) {
+        moveToNext = true;
+      }
+      return { value: num, moveToNext };
+    }
+    moveToNext = true;
+    return { value: total, moveToNext };
+  }
+  function updateHour(num, prev) {
+    const max = 24;
+    let moveToNext = false;
+    const maxStart = Math.floor(max / 10);
+    if (props.hasLeftFocus.value) {
+      props.hasLeftFocus.value = false;
+      prev = null;
+    }
+    if (prev === null) {
+      if (num === 0) {
+        props.lastKeyZero.value = true;
+        return { value: 0, moveToNext };
+      }
+      if (props.lastKeyZero.value || num > maxStart) {
+        moveToNext = true;
+      }
+      props.lastKeyZero.value = false;
+      return { value: num, moveToNext };
+    }
+    const digits = prev.toString().length;
+    const total = Number.parseInt(prev.toString() + num.toString());
+    if (digits === 2 || total > max) {
+      if (num > maxStart) {
+        moveToNext = true;
+      }
+      return { value: num, moveToNext };
+    }
+    moveToNext = true;
+    return { value: total, moveToNext };
+  }
+  function updateYear(num, prev) {
+    let moveToNext = false;
+    if (props.hasLeftFocus.value) {
+      props.hasLeftFocus.value = false;
+      prev = null;
+    }
+    if (prev === null) return { value: num === 0 ? 1 : num, moveToNext };
+    const str = prev.toString() + num.toString();
+    if (str.length > 4) return { value: num === 0 ? 1 : num, moveToNext };
+    if (str.length === 4) moveToNext = true;
+    const int = Number.parseInt(str);
+    return { value: int, moveToNext };
+  }
+  const attributes = computed(
+    () => segmentBuilders[props.part]?.attrs({
+      disabled: props.disabled.value,
+      placeholder: props.placeholder.value,
+      hourCycle: props.hourCycle,
+      segmentValues: props.segmentValues.value,
+      formatter: props.formatter
+    }) ?? {}
+  );
+  function handleDaySegmentKeydown(e) {
+    if (!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key)) return;
+    const prevValue = props.segmentValues.value.day;
+    if (e.key === kbd.ARROW_DOWN || e.key === kbd.ARROW_UP) {
+      props.segmentValues.value.day = dateTimeValueIncrementation({
+        e,
+        part: "day",
+        dateRef: props.placeholder.value,
+        prevValue
+      });
+      return;
+    }
+    if (isNumberString(e.key)) {
+      const num = Number.parseInt(e.key);
+      const segmentMonthValue = props.segmentValues.value.month;
+      const daysInMonth = segmentMonthValue ? getDaysInMonth(
+        props.placeholder.value.set({ month: segmentMonthValue })
+      ) : (
+        // if the month is not set, we default to the maximum number of days in a month
+        // so that user can input any possible day
+        31
+      );
+      const { value, moveToNext } = updateDayOrMonth(
+        daysInMonth,
+        num,
+        prevValue
+      );
+      props.segmentValues.value.day = value;
+      if (moveToNext) props.focusNext();
+    }
+    if (e.key === kbd.BACKSPACE) {
+      props.hasLeftFocus.value = false;
+      props.segmentValues.value.day = deleteValue(prevValue);
+    }
+  }
+  function handleMonthSegmentKeydown(e) {
+    if (!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key)) return;
+    const prevValue = props.segmentValues.value.month;
+    if (e.key === kbd.ARROW_DOWN || e.key === kbd.ARROW_UP) {
+      props.segmentValues.value.month = dateTimeValueIncrementation({
+        e,
+        part: "month",
+        dateRef: props.placeholder.value,
+        prevValue
+      });
+      return;
+    }
+    if (isNumberString(e.key)) {
+      const num = Number.parseInt(e.key);
+      const { value, moveToNext } = updateDayOrMonth(12, num, prevValue);
+      props.segmentValues.value.month = value;
+      if (moveToNext) props.focusNext();
+    }
+    if (e.key === kbd.BACKSPACE) {
+      props.hasLeftFocus.value = false;
+      props.segmentValues.value.month = deleteValue(prevValue);
+    }
+  }
+  function handleYearSegmentKeydown(e) {
+    if (!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key)) return;
+    const prevValue = props.segmentValues.value.year;
+    if (e.key === kbd.ARROW_DOWN || e.key === kbd.ARROW_UP) {
+      props.segmentValues.value.year = dateTimeValueIncrementation({
+        e,
+        part: "year",
+        dateRef: props.placeholder.value,
+        prevValue
+      });
+      return;
+    }
+    if (isNumberString(e.key)) {
+      const num = Number.parseInt(e.key);
+      const { value, moveToNext } = updateYear(num, prevValue);
+      props.segmentValues.value.year = value;
+      if (moveToNext) props.focusNext();
+    }
+    if (e.key === kbd.BACKSPACE) {
+      props.hasLeftFocus.value = false;
+      props.segmentValues.value.year = deleteValue(prevValue);
+    }
+  }
+  function handleHourSegmentKeydown(e) {
+    const dateRef = props.placeholder.value;
+    if (!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key) || !("hour" in dateRef) || !("hour" in props.segmentValues.value))
+      return;
+    const prevValue = props.segmentValues.value.hour;
+    const hourCycle = props.hourCycle;
+    if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN) {
+      props.segmentValues.value.hour = dateTimeValueIncrementation({
+        e,
+        part: "hour",
+        dateRef: props.placeholder.value,
+        prevValue,
+        hourCycle
+      });
+      if ("dayPeriod" in props.segmentValues.value) {
+        if (props.segmentValues.value.hour < 12)
+          props.segmentValues.value.dayPeriod = "AM";
+        else if (props.segmentValues.value.hour)
+          props.segmentValues.value.dayPeriod = "PM";
+      }
+      return;
+    }
+    if (isNumberString(e.key)) {
+      const num = Number.parseInt(e.key);
+      const { value, moveToNext } = updateHour(num, prevValue);
+      if ("dayPeriod" in props.segmentValues.value && value && value > 12)
+        props.segmentValues.value.dayPeriod = "PM";
+      else if ("dayPeriod" in props.segmentValues.value && value)
+        props.segmentValues.value.dayPeriod = "AM";
+      props.segmentValues.value.hour = value;
+      if (moveToNext) props.focusNext();
+    }
+    if (e.key === kbd.BACKSPACE) {
+      props.hasLeftFocus.value = false;
+      props.segmentValues.value.hour = deleteValue(prevValue);
+    }
+  }
+  function handleMinuteSegmentKeydown(e) {
+    const dateRef = props.placeholder.value;
+    if (!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key) || !("minute" in dateRef) || !("minute" in props.segmentValues.value))
+      return;
+    const prevValue = props.segmentValues.value.minute;
+    if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN) {
+      props.segmentValues.value.minute = minuteSecondIncrementation({
+        e,
+        part: "minute",
+        dateRef: props.placeholder.value,
+        prevValue
+      });
+    }
+    if (isNumberString(e.key)) {
+      const num = Number.parseInt(e.key);
+      const { value, moveToNext } = updateMinuteOrSecond(num, prevValue);
+      props.segmentValues.value.minute = value;
+      if (moveToNext) props.focusNext();
+    }
+    if (e.key === kbd.BACKSPACE) {
+      props.hasLeftFocus.value = false;
+      props.segmentValues.value.minute = deleteValue(prevValue);
+    }
+  }
+  function handleSecondSegmentKeydown(e) {
+    const dateRef = props.placeholder.value;
+    if (!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key) || !("second" in dateRef) || !("second" in props.segmentValues.value))
+      return;
+    const prevValue = props.segmentValues.value.second;
+    if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN) {
+      props.segmentValues.value.second = minuteSecondIncrementation({
+        e,
+        part: "second",
+        dateRef: props.placeholder.value,
+        prevValue
+      });
+    }
+    if (isNumberString(e.key)) {
+      const num = Number.parseInt(e.key);
+      const { value, moveToNext } = updateMinuteOrSecond(num, prevValue);
+      props.segmentValues.value.second = value;
+      if (moveToNext) props.focusNext();
+    }
+    if (e.key === kbd.BACKSPACE) {
+      props.hasLeftFocus.value = false;
+      props.segmentValues.value.second = deleteValue(prevValue);
+    }
+  }
+  function handleDayPeriodSegmentKeydown(e) {
+    if ((!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key)) && e.key !== "a" && e.key !== "p" || !("hour" in props.placeholder.value) || !("dayPeriod" in props.segmentValues.value))
+      return;
+    if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN) {
+      if (props.segmentValues.value.dayPeriod === "AM") {
+        props.segmentValues.value.dayPeriod = "PM";
+        props.segmentValues.value.hour = props.segmentValues.value.hour + 12;
+        return;
+      }
+      props.segmentValues.value.dayPeriod = "AM";
+      props.segmentValues.value.hour = props.segmentValues.value.hour - 12;
+      return;
+    }
+    if (["a", "A"].includes(e.key) && props.segmentValues.value.dayPeriod !== "AM") {
+      props.segmentValues.value.dayPeriod = "AM";
+      props.segmentValues.value.hour = props.segmentValues.value.hour - 12;
+      return;
+    }
+    if (["p", "P"].includes(e.key) && props.segmentValues.value.dayPeriod !== "PM") {
+      props.segmentValues.value.dayPeriod = "PM";
+      props.segmentValues.value.hour = props.segmentValues.value.hour + 12;
+    }
+  }
+  function handleSegmentClick(e) {
+    const disabled = props.disabled.value;
+    if (disabled) e.preventDefault();
+  }
+  function handleSegmentKeydown(e) {
+    const disabled = props.disabled.value;
+    const readonly = props.readonly.value;
+    if (e.key !== kbd.TAB) e.preventDefault();
+    if (disabled || readonly) return;
+    const segmentKeydownHandlers = {
+      day: handleDaySegmentKeydown,
+      month: handleMonthSegmentKeydown,
+      year: handleYearSegmentKeydown,
+      hour: handleHourSegmentKeydown,
+      minute: handleMinuteSegmentKeydown,
+      second: handleSecondSegmentKeydown,
+      dayPeriod: handleDayPeriodSegmentKeydown,
+      timeZoneName: () => {
+      }
+    };
+    segmentKeydownHandlers[props.part](
+      e
+    );
+    if (![kbd.ARROW_LEFT, kbd.ARROW_RIGHT].includes(e.key) && e.key !== kbd.TAB && e.key !== kbd.SHIFT && isAcceptableSegmentKey(e.key)) {
+      if (Object.values(props.segmentValues.value).every((item) => item !== null)) {
+        const updateObject = {
+          ...props.segmentValues.value
+        };
+        let dateRef = props.placeholder.value.copy();
+        Object.keys(updateObject).forEach((part) => {
+          const value = updateObject[part];
+          dateRef = dateRef.set({ [part]: value });
+        });
+        props.modelValue.value = dateRef.copy();
+      }
+    }
+  }
+  return {
+    handleSegmentClick,
+    handleSegmentKeydown,
+    attributes
+  };
+}
+export {
+  segmentBuilders,
+  useDateField
+};
+//# sourceMappingURL=useDateField.js.map