nuxt-ui-tools 0.1.3 → 1.0.1

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

@@ -1,28 +1,44 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { NullableValue } from '../../types/field-output-utils.js';
-export interface FormDateFamilyOptions {
+export interface FormDateFamilyCalendarOptions {
+    monthControls?: boolean;
+    yearControls?: boolean;
+    weekNumbers?: boolean;
+    numberOfMonths?: number;
+    yearRange?: readonly [number, number];
+}
+export interface FormDateManualInputOptions {
+    enabled?: boolean;
+    mask?: boolean;
+    format?: string;
+    placeholder?: string;
+}
+export type FormDateManualInput = boolean | FormDateManualInputOptions;
+export interface FormDateFamilyProps {
     min?: string;
     max?: string;
     clearable?: boolean;
+    manualInput?: FormDateManualInput;
+    manualInputFormat?: string;
+    calendar?: FormDateFamilyCalendarOptions;
 }
-export interface FormDateTimeField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'datetime', string | null, TContext, TDeps>, FormDateFamilyOptions {
-}
-export interface FormDateRangeField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'daterange', readonly [string, string] | null, TContext, TDeps>, FormDateFamilyOptions {
-}
-export interface FormMonthRangeField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'monthrange', readonly [string, string] | null, TContext, TDeps>, FormDateFamilyOptions {
-}
-export interface FormDateTimeRangeField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'datetimerange', readonly [string, string] | null, TContext, TDeps>, FormDateFamilyOptions {
-}
-export interface FormMonthField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'month', string | null, TContext, TDeps>, FormDateFamilyOptions {
+export interface FormDateTimeProps extends FormDateFamilyProps {
+    minuteStep?: number;
 }
-export interface FormYearField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'year', string | null, TContext, TDeps>, Pick<FormDateFamilyOptions, 'clearable'> {
+export interface FormYearProps extends Pick<FormDateFamilyProps, 'clearable' | 'manualInput' | 'manualInputFormat' | 'calendar'> {
     min?: number;
     max?: number;
 }
+export type FormDateTimeField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'datetime', string | null, TContext, TDeps, FormDateTimeProps>;
+export type FormDateRangeField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'daterange', readonly [string, string] | null, TContext, TDeps, FormDateFamilyProps>;
+export type FormMonthRangeField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'monthrange', readonly [string, string] | null, TContext, TDeps, FormDateFamilyProps>;
+export type FormDateTimeRangeField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'datetimerange', readonly [string, string] | null, TContext, TDeps, FormDateTimeProps>;
+export type FormMonthField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'month', string | null, TContext, TDeps, FormDateFamilyProps>;
+export type FormYearField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'year', string | null, TContext, TDeps, FormYearProps>;
 export type DateTimeFieldOutput = string | NullableValue;
 export type DateRangeFieldOutput = readonly [string, string] | NullableValue;
 export type MonthRangeFieldOutput = readonly [string, string] | NullableValue;
 export type DateTimeRangeFieldOutput = readonly [string, string] | NullableValue;
 export type MonthFieldOutput = string | NullableValue;
 export type YearFieldOutput = string | NullableValue;
-export type FormDateFamilyField<TContext = {}, TDeps = {}> = FormDateTimeField<TContext, TDeps> | FormDateRangeField<TContext, TDeps> | FormMonthRangeField<TContext, TDeps> | FormDateTimeRangeField<TContext, TDeps> | FormMonthField<TContext, TDeps> | FormYearField<TContext, TDeps>;
+export type FormDateFamilyField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormDateTimeField<TContext, TDeps> | FormDateRangeField<TContext, TDeps> | FormMonthRangeField<TContext, TDeps> | FormDateTimeRangeField<TContext, TDeps> | FormMonthField<TContext, TDeps> | FormYearField<TContext, TDeps>;

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

@@ -0,0 +1,33 @@
+import { CalendarDate, Time } from '@internationalized/date';
+import type { DateValue } from '@internationalized/date';
+export type FormDateFamilyType = 'date' | 'datetime' | 'daterange' | 'monthrange' | 'datetimerange' | 'month' | 'year';
+export interface FormCalendarRangeValue {
+    start: DateValue | undefined;
+    end: DateValue | undefined;
+}
+export interface FormTimeRangeValue {
+    start: Time | undefined;
+    end: Time | undefined;
+}
+export declare function isDateFamilyRange(type: FormDateFamilyType): type is "daterange" | "monthrange" | "datetimerange";
+export declare function hasDateFamilyTime(type: FormDateFamilyType): type is "datetime" | "datetimerange";
+export declare function dateFamilyCalendarType(type: FormDateFamilyType): 'date' | 'month' | 'year';
+export declare function defaultDateManualFormat(type: FormDateFamilyType, locale: string): string;
+export declare function dateManualPlaceholder(format: string, range: boolean): string;
+export declare function applyDateManualMask(value: string, format: string, range: boolean): string;
+export declare function parseDateManualValue(value: string, format: string, type: FormDateFamilyType): string | readonly [string, string] | undefined;
+export declare function formatDateManualValue(values: readonly [string, string], format: string, type: FormDateFamilyType): string;
+export declare function calendarValueFromCanonical(type: FormDateFamilyType, value: string): CalendarDate | undefined;
+export declare function calendarRangeFromCanonical(type: FormDateFamilyType, values: readonly [string, string]): FormCalendarRangeValue | null;
+export declare function serializeCalendarValue(type: FormDateFamilyType, value: DateValue, existing: string): string;
+export declare function timeValueFromCanonical(value: string): Time | undefined;
+export declare function timeRangeFromCanonical(values: readonly [string, string]): FormTimeRangeValue;
+export declare function serializeTimeValue(existing: string, value: {
+    hour: number;
+    minute: number;
+}): string;
+export type FormDateSeedValue = Date | string | number | null | undefined;
+export declare function canonicalDateFromValue(value: FormDateSeedValue): string;
+export declare function canonicalDateToJsDate(value: string): Date | undefined;
+export declare function calendarSeedFromValue(value: FormDateSeedValue, type: FormDateFamilyType): string;
+export declare function calendarDateToJsDate(value: DateValue): Date;

package/dist/runtime/form/fields/date-family/utils.js

@@ -0,0 +1,370 @@
+import { CalendarDate, Time, getLocalTimeZone } from "@internationalized/date";
+import { isNumber, isString } from "../../utils/predicate.js";
+export function isDateFamilyRange(type) {
+  return type === "daterange" || type === "monthrange" || type === "datetimerange";
+}
+export function hasDateFamilyTime(type) {
+  return type === "datetime" || type === "datetimerange";
+}
+export function dateFamilyCalendarType(type) {
+  if (type === "month" || type === "monthrange") {
+    return "month";
+  }
+  if (type === "year") {
+    return "year";
+  }
+  return "date";
+}
+export function defaultDateManualFormat(type, locale) {
+  if (type === "year") {
+    return "yyyy";
+  }
+  if (type === "month" || type === "monthrange") {
+    return "MM/yyyy";
+  }
+  const dateFormat = locale.toLowerCase().startsWith("fr") ? "dd/MM/yyyy" : "MM/dd/yyyy";
+  return hasDateFamilyTime(type) ? `${dateFormat} HH:mm` : dateFormat;
+}
+export function dateManualPlaceholder(format, range) {
+  const placeholder = format.toLowerCase();
+  return range ? `${placeholder} \u2013 ${placeholder}` : placeholder;
+}
+export function applyDateManualMask(value, format, range) {
+  const digits = value.replaceAll(/\D/gu, "");
+  const width = formatDigitWidth(format);
+  if (!width) {
+    return value;
+  }
+  if (!range) {
+    return formatDigits(digits.slice(0, width), format);
+  }
+  const startDigits = digits.slice(0, width);
+  const endDigits = digits.slice(width, width * 2);
+  const start = formatDigits(startDigits, format);
+  if (!endDigits) {
+    return start;
+  }
+  return `${start} \u2013 ${formatDigits(endDigits, format)}`;
+}
+export function parseDateManualValue(value, format, type) {
+  const width = formatDigitWidth(format);
+  if (!width) {
+    return void 0;
+  }
+  const digits = value.replaceAll(/\D/gu, "");
+  if (isDateFamilyRange(type)) {
+    if (digits.length !== width * 2) {
+      return void 0;
+    }
+    const start = parseDateManualPart(digits.slice(0, width), format, type);
+    const end = parseDateManualPart(digits.slice(width), format, type);
+    if (!start || !end || start > end) {
+      return void 0;
+    }
+    return [start, end];
+  }
+  if (digits.length !== width) {
+    return void 0;
+  }
+  return parseDateManualPart(digits, format, type);
+}
+export function formatDateManualValue(values, format, type) {
+  if (!isDateFamilyRange(type)) {
+    return formatCanonicalPart(values[0], format, type);
+  }
+  const start = formatCanonicalPart(values[0], format, type);
+  const end = formatCanonicalPart(values[1], format, type);
+  if (!start && !end) {
+    return "";
+  }
+  if (!start || !end) {
+    return `${start} \u2013 ${end}`;
+  }
+  return `${start} \u2013 ${end}`;
+}
+export function calendarValueFromCanonical(type, value) {
+  if (!value) {
+    return;
+  }
+  if (type === "year") {
+    const year2 = Number(value.slice(0, 4));
+    return validYear(year2) ? new CalendarDate(year2, 1, 1) : void 0;
+  }
+  const match = /^(\d{4})-(\d{2})(?:-(\d{2}))?/u.exec(value);
+  if (!match) {
+    return;
+  }
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3] ?? 1);
+  if (!isValidCalendarDate(year, month, day)) {
+    return;
+  }
+  return new CalendarDate(year, month, day);
+}
+export function calendarRangeFromCanonical(type, values) {
+  const start = calendarValueFromCanonical(type, values[0]);
+  const end = calendarValueFromCanonical(type, values[1]);
+  if (!start && !end) {
+    return null;
+  }
+  return { end, start };
+}
+export function serializeCalendarValue(type, value, existing) {
+  if (type === "year") {
+    return String(value.year).padStart(4, "0");
+  }
+  if (type === "month" || type === "monthrange") {
+    return `${String(value.year).padStart(4, "0")}-${pad(value.month)}`;
+  }
+  const date = `${String(value.year).padStart(4, "0")}-${pad(value.month)}-${pad(value.day)}`;
+  if (!hasDateFamilyTime(type)) {
+    return date;
+  }
+  const time = timeValueFromCanonical(existing) ?? new Time(9, 0);
+  return `${date}T${pad(time.hour)}:${pad(time.minute)}`;
+}
+export function timeValueFromCanonical(value) {
+  const match = /T(\d{2}):(\d{2})/u.exec(value);
+  if (!match) {
+    return;
+  }
+  const hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (!isValidTime(hour, minute)) {
+    return;
+  }
+  return new Time(hour, minute);
+}
+export function timeRangeFromCanonical(values) {
+  return {
+    end: timeValueFromCanonical(values[1]),
+    start: timeValueFromCanonical(values[0])
+  };
+}
+export function serializeTimeValue(existing, value) {
+  const date = /^(\d{4}-\d{2}-\d{2})/u.exec(existing)?.[1];
+  if (!date) {
+    return existing;
+  }
+  return `${date}T${pad(value.hour)}:${pad(value.minute)}`;
+}
+export function canonicalDateFromValue(value) {
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) {
+      return "";
+    }
+    return `${String(value.getFullYear()).padStart(4, "0")}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
+  }
+  return isString(value) ? value : "";
+}
+export function canonicalDateToJsDate(value) {
+  const match = /^(\d{4})-(\d{2})(?:-(\d{2}))?(?:T(\d{2}):(\d{2}))?/u.exec(value);
+  if (!match) {
+    return;
+  }
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3] ?? 1);
+  const hour = Number(match[4] ?? 0);
+  const minute = Number(match[5] ?? 0);
+  if (!isValidCalendarDate(year, month, day) || !isValidTime(hour, minute)) {
+    return;
+  }
+  return new Date(year, month - 1, day, hour, minute);
+}
+export function calendarSeedFromValue(value, type) {
+  if (value instanceof Date) {
+    return canonicalDateFromValue(value);
+  }
+  if (isString(value)) {
+    return value;
+  }
+  if (isNumber(value) && type === "year") {
+    return String(value);
+  }
+  return "";
+}
+export function calendarDateToJsDate(value) {
+  return value.toDate(getLocalTimeZone());
+}
+function parseDateManualPart(digits, format, type) {
+  const tokens = tokenizeDateFormat(format).filter(
+    (part) => part.type === "token"
+  );
+  if (!tokens.length) {
+    return void 0;
+  }
+  const values = /* @__PURE__ */ new Map();
+  let offset = 0;
+  for (const token of tokens) {
+    const width = tokenWidth(token.value);
+    const raw = digits.slice(offset, offset + width);
+    if (raw.length !== width) {
+      return void 0;
+    }
+    values.set(token.value, Number(raw));
+    offset += width;
+  }
+  if (offset !== digits.length) {
+    return void 0;
+  }
+  const parts = {
+    day: values.get("dd") ?? 1,
+    hour: values.get("HH") ?? 0,
+    minute: values.get("mm") ?? 0,
+    month: values.get("MM") ?? 1,
+    year: values.get("yyyy") ?? 0
+  };
+  if (!validYear(parts.year)) {
+    return void 0;
+  }
+  if (type !== "year" && (parts.month < 1 || parts.month > 12)) {
+    return void 0;
+  }
+  if (type !== "year" && type !== "month" && type !== "monthrange" && !isValidCalendarDate(parts.year, parts.month, parts.day)) {
+    return void 0;
+  }
+  if (hasDateFamilyTime(type) && !isValidTime(parts.hour, parts.minute)) {
+    return void 0;
+  }
+  if (type === "year") {
+    return String(parts.year).padStart(4, "0");
+  }
+  if (type === "month" || type === "monthrange") {
+    return `${String(parts.year).padStart(4, "0")}-${pad(parts.month)}`;
+  }
+  const date = `${String(parts.year).padStart(4, "0")}-${pad(parts.month)}-${pad(parts.day)}`;
+  if (!hasDateFamilyTime(type)) {
+    return date;
+  }
+  return `${date}T${pad(parts.hour)}:${pad(parts.minute)}`;
+}
+function formatCanonicalPart(value, format, type) {
+  if (!value) {
+    return "";
+  }
+  const parts = canonicalParts(value, type);
+  if (!parts) {
+    return value;
+  }
+  return tokenizeDateFormat(format).map((part) => {
+    if (part.type === "literal") {
+      return part.value;
+    }
+    if (part.value === "yyyy") {
+      return String(parts.year).padStart(4, "0");
+    }
+    if (part.value === "MM") {
+      return pad(parts.month);
+    }
+    if (part.value === "dd") {
+      return pad(parts.day);
+    }
+    if (part.value === "HH") {
+      return pad(parts.hour);
+    }
+    return pad(parts.minute);
+  }).join("");
+}
+function canonicalParts(value, type) {
+  if (type === "year") {
+    const year = Number(value.slice(0, 4));
+    if (!validYear(year)) {
+      return void 0;
+    }
+    return { day: 1, hour: 0, minute: 0, month: 1, year };
+  }
+  const match = /^(\d{4})-(\d{2})(?:-(\d{2}))?(?:T(\d{2}):(\d{2}))?/u.exec(value);
+  if (!match) {
+    return void 0;
+  }
+  const parts = {
+    day: Number(match[3] ?? 1),
+    hour: Number(match[4] ?? 0),
+    minute: Number(match[5] ?? 0),
+    month: Number(match[2]),
+    year: Number(match[1])
+  };
+  if (!isValidCalendarDate(parts.year, parts.month, parts.day)) {
+    return void 0;
+  }
+  if (!isValidTime(parts.hour, parts.minute)) {
+    return void 0;
+  }
+  return parts;
+}
+function formatDigits(digits, format) {
+  const parts = tokenizeDateFormat(format);
+  let offset = 0;
+  let result = "";
+  for (const [index, part] of parts.entries()) {
+    if (part.type === "literal") {
+      const previous = parts[index - 1];
+      if (previous?.type === "token" && offset >= tokenWidth(previous.value)) {
+        result += part.value;
+      }
+      continue;
+    }
+    const width = tokenWidth(part.value);
+    const value = digits.slice(offset, offset + width);
+    if (!value) {
+      break;
+    }
+    result += value;
+    offset += value.length;
+    if (value.length < width) {
+      break;
+    }
+  }
+  return result;
+}
+function formatDigitWidth(format) {
+  return tokenizeDateFormat(format).reduce(
+    (total, part) => total + (part.type === "token" ? tokenWidth(part.value) : 0),
+    0
+  );
+}
+function tokenizeDateFormat(format) {
+  const parts = [];
+  const pattern = /yyyy|MM|dd|HH|mm/gu;
+  let offset = 0;
+  let match = pattern.exec(format);
+  while (match) {
+    if (match.index > offset) {
+      parts.push({ type: "literal", value: format.slice(offset, match.index) });
+    }
+    const token = match[0];
+    if (isDateFormatToken(token)) {
+      parts.push({ type: "token", value: token });
+    }
+    offset = match.index + token.length;
+    match = pattern.exec(format);
+  }
+  if (offset < format.length) {
+    parts.push({ type: "literal", value: format.slice(offset) });
+  }
+  return parts;
+}
+function isDateFormatToken(value) {
+  return value === "yyyy" || value === "MM" || value === "dd" || value === "HH" || value === "mm";
+}
+function tokenWidth(token) {
+  return token === "yyyy" ? 4 : 2;
+}
+function isValidCalendarDate(year, month, day) {
+  if (!validYear(year) || month < 1 || month > 12 || day < 1 || day > 31) {
+    return false;
+  }
+  const date = new Date(year, month - 1, day);
+  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+}
+function validYear(year) {
+  return Number.isInteger(year) && year > 0 && year <= 9999;
+}
+function isValidTime(hour, minute) {
+  return Number.isInteger(hour) && Number.isInteger(minute) && hour >= 0 && hour <= 23 && minute >= 0 && minute <= 59;
+}
+function pad(value) {
+  return String(value).padStart(2, "0");
+}

package/dist/runtime/form/fields/date-range/config.d.ts

@@ -1,14 +1,14 @@
 export declare const dateRangeFieldKind: {
-    readonly type: "daterange";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "daterange";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
         readonly hint: true;
-    };
-    readonly layout: {
-        readonly item: true;
+        readonly label: true;
     };
     readonly validation: true;
-    readonly transform: true;
 };

package/dist/runtime/form/fields/date-range/config.js

@@ -1,9 +1,9 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const dateRangeFieldKind = defineFormFieldKind({
-  type: "daterange",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "daterange",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/date-time/config.d.ts

@@ -1,14 +1,14 @@
 export declare const dateTimeFieldKind: {
-    readonly type: "datetime";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "datetime";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
         readonly hint: true;
-    };
-    readonly layout: {
-        readonly item: true;
+        readonly label: true;
     };
     readonly validation: true;
-    readonly transform: true;
 };

package/dist/runtime/form/fields/date-time/config.js

@@ -1,9 +1,9 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const dateTimeFieldKind = defineFormFieldKind({
-  type: "datetime",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "datetime",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/date-time-range/config.d.ts

@@ -1,14 +1,14 @@
 export declare const dateTimeRangeFieldKind: {
-    readonly type: "datetimerange";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "datetimerange";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
         readonly hint: true;
-    };
-    readonly layout: {
-        readonly item: true;
+        readonly label: true;
     };
     readonly validation: true;
-    readonly transform: true;
 };

package/dist/runtime/form/fields/date-time-range/config.js

@@ -1,9 +1,9 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const dateTimeRangeFieldKind = defineFormFieldKind({
-  type: "datetimerange",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "datetimerange",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/divider/config.d.ts

@@ -1,7 +1,7 @@
 export declare const dividerFieldKind: {
-    readonly type: "divider";
-    readonly state: "stateless";
     readonly layout: {
         readonly item: true;
     };
+    readonly state: "stateless";
+    readonly type: "divider";
 };

package/dist/runtime/form/fields/divider/config.js

@@ -1,6 +1,6 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const dividerFieldKind = defineFormFieldKind({
-  type: "divider",
+  layout: { item: true },
   state: "stateless",
-  layout: { item: true }
+  type: "divider"
 });

package/dist/runtime/form/fields/divider/types.d.ts

@@ -1,5 +1,5 @@
 import type { FormStatelessFieldBase } from '../../types/field-base.js';
 import type { FormText } from '../../types/utils.js';
-export interface FormDividerField<TContext = {}, TDeps = {}> extends FormStatelessFieldBase<'divider', TContext, TDeps> {
+export interface FormDividerField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatelessFieldBase<'divider', TContext, TDeps> {
     label?: FormText;
 }