nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/form/fields/date-family/component.vue

@@ -1,119 +1,524 @@
 <script setup>
+import { Time } from "@internationalized/date";
 import UButton from "@nuxt/ui/components/Button.vue";
+import UCalendar from "@nuxt/ui/components/Calendar.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
-import { computed, useId } from "vue";
+import UInputTime from "@nuxt/ui/components/InputTime.vue";
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import { computed, ref, shallowRef, watch } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { isNullish } from "../../../shared/utils/predicate";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { isNumber, isString } from "../../utils/predicate";
+import {
+  applyDateManualMask,
+  calendarRangeFromCanonical,
+  calendarSeedFromValue,
+  calendarValueFromCanonical,
+  canonicalDateFromValue,
+  canonicalDateToJsDate,
+  dateFamilyCalendarType,
+  dateManualPlaceholder,
+  defaultDateManualFormat,
+  formatDateManualValue,
+  hasDateFamilyTime,
+  isDateFamilyRange,
+  parseDateManualValue,
+  serializeCalendarValue,
+  serializeTimeValue,
+  timeRangeFromCanonical,
+  timeValueFromCanonical
+} from "./utils";
 const props = defineProps({
   field: { type: null, required: true },
   path: { type: Array, required: true }
 });
-const { t } = useUiToolsLocale();
-const rangeId = useId();
-const { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
+const { locale, t } = useUiToolsLocale();
+const {
+  fieldProps,
+  form,
+  controlProps,
+  controlSize,
+  disabled,
+  handleBlur,
+  interactionOwnerClass,
+  placeholder: fieldPlaceholder
+} = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  {
+    omit: [
+      "min",
+      "max",
+      "clearable",
+      "outputFormat",
+      "previewFormat",
+      "manualInput",
+      "manualInputFormat",
+      "calendar",
+      "minuteStep"
+    ]
+  }
 );
-const range = computed(
-  () => ["daterange", "monthrange", "datetimerange"].includes(props.field.type)
-);
-const inputType = computed(() => {
-  if (props.field.type === "datetime" || props.field.type === "datetimerange")
-    return "datetime-local";
-  if (props.field.type === "month" || props.field.type === "monthrange") return "month";
-  if (props.field.type === "year") return "number";
-  return "date";
+const root = ref(null);
+const open = ref(false);
+const manualEditing = ref(false);
+const inputValue = ref("");
+const draftRange = shallowRef(null);
+const type = computed(() => props.field.type);
+const isRange = computed(() => isDateFamilyRange(type.value));
+const hasTime = computed(() => hasDateFamilyTime(type.value));
+const calendarType = computed(() => dateFamilyCalendarType(type.value));
+const value = computed(() => form.getValue(props.path));
+const selectedValues = computed(() => {
+  if (!isRange.value) {
+    return [canonicalDateFromFormValue(value.value), ""];
+  }
+  if (!Array.isArray(value.value)) {
+    return ["", ""];
+  }
+  return [canonicalDateFromFormValue(value.value[0]), canonicalDateFromFormValue(value.value[1])];
 });
-const singleModel = computed({
-  get: () => {
-    const value = form.getValue(props.path);
-    return typeof value === "string" ? value : "";
-  },
-  set: (value) => form.setValue(props.path, value || null)
+const manualInput = computed(() => {
+  const configured = fieldProps.value.manualInput;
+  if (configured === false) {
+    return { enabled: false, mask: true };
+  }
+  if (configured === true || configured === void 0) {
+    return { enabled: true, mask: true };
+  }
+  return {
+    ...configured,
+    enabled: configured.enabled !== false,
+    mask: configured.mask !== false
+  };
 });
-const startModel = computed({
-  get: () => rangeValue(0),
-  set: (value) => setRangeValue(0, value)
+const manualFormat = computed(
+  () => manualInput.value.format ?? fieldProps.value.manualInputFormat ?? defaultDateManualFormat(type.value, locale.value.code)
+);
+const placeholder = computed(() => {
+  const explicitlyConfigured = Object.getOwnPropertyDescriptor(props.field, "placeholder")?.value;
+  if (explicitlyConfigured !== void 0) {
+    return fieldPlaceholder.value;
+  }
+  return manualInput.value.placeholder ?? dateManualPlaceholder(manualFormat.value, isRange.value);
 });
-const endModel = computed({
-  get: () => rangeValue(1),
-  set: (value) => setRangeValue(1, value)
+const previewValue = computed(() => {
+  if (!isRange.value) {
+    return formatPreviewPart(selectedValues.value[0]);
+  }
+  const start = formatPreviewPart(selectedValues.value[0]);
+  const end = formatPreviewPart(selectedValues.value[1]);
+  if (!start && !end) {
+    return "";
+  }
+  return `${start || t("form.fields.date.start")} \u2013 ${end || t("form.fields.date.end")}`;
+});
+const manualValue = computed(
+  () => formatDateManualValue(selectedValues.value, manualFormat.value, type.value)
+);
+const singleCalendarValue = computed(
+  () => calendarValueFromCanonical(type.value, selectedValues.value[0])
+);
+const committedRangeValue = computed(
+  () => calendarRangeFromCanonical(type.value, selectedValues.value)
+);
+const rangeCalendarValue = computed(
+  () => draftRange.value ?? committedRangeValue.value
+);
+const minCanonical = computed(() => resolveCalendarBound("min"));
+const maxCanonical = computed(() => resolveCalendarBound("max"));
+const minCalendarValue = computed(
+  () => calendarValueFromCanonical(type.value, minCanonical.value)
+);
+const maxCalendarValue = computed(
+  () => calendarValueFromCanonical(type.value, maxCanonical.value)
+);
+const singleTimeValue = computed(
+  () => timeValueFromCanonical(selectedValues.value[0])
+);
+const rangeTimeValue = computed(
+  () => timeRangeFromCanonical(selectedValues.value)
+);
+const minuteStep = computed(() => {
+  if (!("minuteStep" in fieldProps.value) || !isNumber(fieldProps.value.minuteStep)) {
+    return 1;
+  }
+  return Math.min(60, Math.max(1, Math.round(fieldProps.value.minuteStep)));
 });
-const min = computed(() => props.field.min);
-const max = computed(() => props.field.max);
-function rangeValue(index) {
-  const value = form.getValue(props.path);
-  if (!Array.isArray(value)) return "";
-  return typeof value[index] === "string" ? value[index] : "";
-}
-function setRangeValue(index, value) {
-  const current = form.getValue(props.path);
-  const next = Array.isArray(current) ? [stringValue(current[0]), stringValue(current[1])] : ["", ""];
-  next[index] = value;
-  form.setValue(props.path, next[0] || next[1] ? next : null);
-}
-function stringValue(value) {
-  return typeof value === "string" ? value : "";
-}
-async function clear() {
+const timeStep = computed(() => ({ minute: minuteStep.value }));
+const calendarUi = computed(() => ({ heading: "min-w-0", root: "p-2" }));
+watch(
+  selectedValues,
+  () => {
+    if (!manualEditing.value) {
+      inputValue.value = previewValue.value;
+    }
+  },
+  { immediate: true }
+);
+function handleFocus() {
+  if (manualInput.value.enabled) {
+    manualEditing.value = true;
+    inputValue.value = manualValue.value;
+  }
+  open.value = true;
+}
+function handleClick() {
+  open.value = true;
+}
+function handleInput(next) {
+  if (!manualInput.value.enabled) {
+    return;
+  }
+  const raw = String(next);
+  inputValue.value = manualInput.value.mask ? applyDateManualMask(raw, manualFormat.value, isRange.value) : raw;
+  if (!inputValue.value.trim()) {
+    clearValue();
+    return;
+  }
+  commitManualInput(inputValue.value);
+}
+function handleInputBlur(event) {
+  if (manualInput.value.enabled) {
+    commitManualInput(inputValue.value);
+  }
+  manualEditing.value = false;
+  inputValue.value = previewValue.value;
+  handleBlur(event);
+}
+function handleManualConfirm() {
+  if (manualInput.value.enabled) {
+    commitManualInput(inputValue.value);
+  }
+  manualEditing.value = false;
+  inputValue.value = previewValue.value;
+  open.value = false;
+}
+function handleOpenUpdate(next) {
+  open.value = next;
+  if (next) {
+    return;
+  }
+  draftRange.value = null;
+  if (root.value?.contains(document.activeElement)) {
+    return;
+  }
+  manualEditing.value = false;
+  inputValue.value = previewValue.value;
+}
+function handlePopoverEscape() {
+  const input = root.value?.querySelector("input");
+  if (input && document.activeElement === input) {
+    input.blur();
+  }
+  manualEditing.value = false;
+  inputValue.value = previewValue.value;
+}
+function updateSingleCalendar(next) {
+  if (!next || Array.isArray(next) || isCalendarRangeValue(next)) {
+    return;
+  }
+  const canonical = serializeCalendarValue(type.value, next, selectedValues.value[0]);
+  if (!isWithinBounds(canonical)) {
+    return;
+  }
+  setStoredPart(0, canonical);
+  if (!hasTime.value) {
+    open.value = false;
+  }
+}
+function updateRangeCalendar(next) {
+  draftRange.value = next;
+  if (!next?.start || !next.end) {
+    return;
+  }
+  const start = serializeCalendarValue(type.value, next.start, selectedValues.value[0]);
+  const end = serializeCalendarValue(type.value, next.end, selectedValues.value[1]);
+  if (start > end || !isWithinBounds(start) || !isWithinBounds(end)) {
+    return;
+  }
+  setStoredRange(start, end);
+  draftRange.value = null;
+  if (!hasTime.value) {
+    open.value = false;
+  }
+}
+function updateSingleTime(next) {
+  if (!next || "start" in next || !selectedValues.value[0]) {
+    return;
+  }
+  setStoredPart(0, serializeTimeValue(selectedValues.value[0], next));
+}
+function updateRangeTime(next) {
+  if (!next?.start || !next.end || !selectedValues.value[0] || !selectedValues.value[1]) {
+    return;
+  }
+  setStoredRange(
+    serializeTimeValue(selectedValues.value[0], next.start),
+    serializeTimeValue(selectedValues.value[1], next.end)
+  );
+}
+function commitManualInput(raw) {
+  const parsed = parseDateManualValue(raw, manualFormat.value, type.value);
+  if (!parsed) {
+    return false;
+  }
+  if (!isString(parsed)) {
+    if (!isWithinBounds(parsed[0]) || !isWithinBounds(parsed[1])) {
+      return false;
+    }
+    setStoredRange(parsed[0], parsed[1]);
+    return true;
+  }
+  if (!isWithinBounds(parsed)) {
+    return false;
+  }
+  setStoredPart(0, parsed);
+  return true;
+}
+function setStoredPart(part, canonical) {
+  if (isRange.value) {
+    const next = [selectedValues.value[0], selectedValues.value[1]];
+    next[part] = canonical;
+    if (next[0] && next[1]) {
+      setStoredRange(next[0], next[1]);
+    }
+    return;
+  }
+  if (props.field.type === "date" && fieldProps.value.outputFormat === "date") {
+    const date = canonicalDateToJsDate(canonical);
+    if (date) {
+      form.setValue(props.path, date);
+    }
+    return;
+  }
+  form.setValue(props.path, canonical || null);
+}
+function setStoredRange(start, end) {
+  form.setValue(props.path, [start, end]);
+}
+function clearValue() {
   form.setValue(props.path, null);
-  await handleBlur();
+  draftRange.value = null;
+  inputValue.value = "";
+}
+function canonicalDateFromFormValue(fieldValue) {
+  if (fieldValue instanceof Date || isString(fieldValue) || isNumber(fieldValue) || isNullish(fieldValue)) {
+    return canonicalDateFromValue(fieldValue);
+  }
+  return "";
+}
+function resolveCalendarBound(edge) {
+  const configured = edge === "min" ? fieldProps.value.min : fieldProps.value.max;
+  const direct = calendarSeedFromValue(configured, type.value);
+  if (direct) {
+    return normalizeCalendarBound(direct, edge);
+  }
+  const yearRange = fieldProps.value.calendar?.yearRange;
+  if (!yearRange) {
+    return "";
+  }
+  const year = edge === "min" ? yearRange[0] : yearRange[1];
+  if (type.value === "year") {
+    return String(year);
+  }
+  if (type.value === "month" || type.value === "monthrange") {
+    return `${year}-${edge === "min" ? "01" : "12"}`;
+  }
+  return normalizeCalendarBound(`${year}-${edge === "min" ? "01-01" : "12-31"}`, edge);
+}
+function normalizeCalendarBound(bound, edge) {
+  if (!hasTime.value || bound.includes("T")) {
+    return bound;
+  }
+  return `${bound}T${edge === "min" ? "00:00" : "23:59"}`;
+}
+function isWithinBounds(canonical) {
+  if (minCanonical.value && canonical < minCanonical.value) {
+    return false;
+  }
+  if (maxCanonical.value && canonical > maxCanonical.value) {
+    return false;
+  }
+  return true;
+}
+function formatPreviewPart(canonical) {
+  if (!canonical) {
+    return "";
+  }
+  if (type.value === "year") {
+    return canonical.slice(0, 4);
+  }
+  const date = canonicalDateToJsDate(canonical);
+  if (!date) {
+    return canonical;
+  }
+  if (type.value === "month" || type.value === "monthrange") {
+    return new Intl.DateTimeFormat(locale.value.code, {
+      month: "long",
+      year: "numeric"
+    }).format(date);
+  }
+  const options = resolvePreviewFormat();
+  return new Intl.DateTimeFormat(locale.value.code, options).format(date);
+}
+function resolvePreviewFormat() {
+  if (props.field.type === "date" && fieldProps.value.previewFormat) {
+    return fieldProps.value.previewFormat;
+  }
+  if (hasTime.value) {
+    return { dateStyle: "medium", timeStyle: "short" };
+  }
+  return { dateStyle: "medium" };
+}
+function preventPopoverAutoFocus(event) {
+  event.preventDefault();
+}
+function isCalendarRangeValue(candidate) {
+  return "start" in candidate || "end" in candidate;
 }
 </script>
 
 <template>
   <FormFieldShell :field="field" :path="path">
-    <div class="flex items-center gap-2">
-      <template v-if="range">
-        <UInput
-          v-model="startModel"
-          v-bind="controlProps"
-          :id="`${rangeId}-start`"
-          class="min-w-0 flex-1"
-          :type="inputType"
-          :min="min"
-          :max="max"
-          :disabled="disabled"
-          :aria-label="t('form.fields.date.start')"
-          @blur="handleBlur"
-        />
-        <span class="text-sm text-muted" aria-hidden="true">–</span>
-        <UInput
-          v-model="endModel"
-          v-bind="controlProps"
-          :id="`${rangeId}-end`"
-          class="min-w-0 flex-1"
-          :type="inputType"
-          :min="startModel || min"
-          :max="max"
-          :disabled="disabled"
-          :aria-label="t('form.fields.date.end')"
-          @blur="handleBlur"
-        />
-      </template>
-      <UInput
-        v-else
-        v-model="singleModel"
-        v-bind="controlProps"
-        class="min-w-0 flex-1"
-        :type="inputType"
-        :min="min"
-        :max="max"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        @blur="handleBlur"
-      />
-      <UButton
-        v-if="field.clearable === true && form.getValue(path)"
-        icon="i-lucide-x"
-        color="neutral"
-        variant="ghost"
-        size="xs"
-        :disabled="disabled"
-        :aria-label="t('form.fields.date.clear')"
-        @click="clear"
-      />
+    <div ref="root" class="w-full">
+      <UPopover
+        :open="open"
+        :content="{
+  side: 'bottom',
+  align: 'start',
+  sideOffset: 8,
+  collisionPadding: 12,
+  avoidCollisions: true,
+  onOpenAutoFocus: preventPopoverAutoFocus,
+  onCloseAutoFocus: preventPopoverAutoFocus,
+  onEscapeKeyDown: handlePopoverEscape
+}"
+        :ui="{ content: `${interactionOwnerClass} data-[state=closed]:hidden` }"
+        @update:open="handleOpenUpdate"
+      >
+        <template #anchor>
+          <UInput
+            :model-value="inputValue"
+            v-bind="controlProps"
+            class="w-full"
+            inputmode="numeric"
+            autocomplete="off"
+            leading-icon="i-lucide-calendar-days"
+            :readonly="!manualInput.enabled"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            @update:model-value="handleInput"
+            @focus="handleFocus"
+            @click="handleClick"
+            @blur="handleInputBlur"
+            @keydown.enter.prevent="handleManualConfirm"
+          >
+            <template v-if="fieldProps.clearable === true && value" #trailing>
+              <UButton
+                type="button"
+                icon="i-lucide-x"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                :disabled="disabled"
+                :aria-label="t('form.fields.date.clear')"
+                @mousedown.prevent
+                @click.stop="clearValue"
+              />
+            </template>
+          </UInput>
+        </template>
+
+        <template #content>
+          <div class="grid gap-3 p-1">
+            <UCalendar
+              v-if="isRange"
+              :model-value="rangeCalendarValue"
+              range
+              :type="calendarType"
+              :size="controlSize"
+              :min-value="minCalendarValue"
+              :max-value="maxCalendarValue"
+              :month-controls="fieldProps.calendar?.monthControls ?? true"
+              :year-controls="fieldProps.calendar?.yearControls ?? true"
+              :week-numbers="fieldProps.calendar?.weekNumbers ?? false"
+              :number-of-months="fieldProps.calendar?.numberOfMonths"
+              :view-control="{ trailingIcon: 'i-lucide-chevron-down', class: 'font-medium' }"
+              :ui="calendarUi"
+              @update:model-value="updateRangeCalendar"
+            />
+            <UCalendar
+              v-else
+              :model-value="singleCalendarValue"
+              :type="calendarType"
+              :size="controlSize"
+              :min-value="minCalendarValue"
+              :max-value="maxCalendarValue"
+              :month-controls="fieldProps.calendar?.monthControls ?? true"
+              :year-controls="fieldProps.calendar?.yearControls ?? true"
+              :week-numbers="fieldProps.calendar?.weekNumbers ?? false"
+              :number-of-months="fieldProps.calendar?.numberOfMonths"
+              :view-control="{ trailingIcon: 'i-lucide-chevron-down', class: 'font-medium' }"
+              :ui="calendarUi"
+              @update:model-value="updateSingleCalendar"
+            />
+
+            <div v-if="hasTime" class="grid gap-3 border-t border-default p-2">
+              <UInputTime
+                v-if="isRange"
+                :model-value="rangeTimeValue"
+                range
+                granularity="minute"
+                :hour-cycle="24"
+                :step="timeStep"
+                step-snapping
+                :locale="locale.code"
+                :size="controlSize"
+                :disabled="disabled || !selectedValues[0] || !selectedValues[1]"
+                @update:model-value="updateRangeTime"
+              />
+              <UInputTime
+                v-else
+                :model-value="singleTimeValue"
+                granularity="minute"
+                :hour-cycle="24"
+                :step="timeStep"
+                step-snapping
+                :locale="locale.code"
+                :size="controlSize"
+                :disabled="disabled || !selectedValues[0]"
+                @update:model-value="updateSingleTime"
+              />
+
+              <div class="flex items-center justify-end gap-2">
+                <UButton
+                  v-if="fieldProps.clearable === true && value"
+                  type="button"
+                  color="neutral"
+                  variant="ghost"
+                  :size="controlSize"
+                  @click="clearValue"
+                >
+                  {{ t("form.fields.date.clear") }}
+                </UButton>
+                <UButton
+                  type="button"
+                  color="neutral"
+                  variant="soft"
+                  :size="controlSize"
+                  :disabled="!value"
+                  @click="handleManualConfirm"
+                >
+                  {{ t("form.fields.date.confirm") }}
+                </UButton>
+              </div>
+            </div>
+          </div>
+        </template>
+      </UPopover>
     </div>
   </FormFieldShell>
 </template>

package/dist/runtime/form/fields/date-family/component.vue.d.ts

@@ -1,6 +1,7 @@
+import type { FormDateField } from '../date/types.js';
 import type { FormDateFamilyField } from './types.js';
 type __VLS_Props = {
-    field: FormDateFamilyField;
+    field: FormDateField | FormDateFamilyField;
     path: readonly string[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;