@soybeanjs/headless 0.15.5 → 0.16.0

package/dist/date/types.d.ts

@@ -1,36 +1,49 @@
+import { TimeValue } from "./comparators.js";
+import { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from "./parts.js";
 import { DateValue as DateValue$1 } from "@internationalized/date";
 
 //#region src/date/types.d.ts
 type DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
 type Matcher = (date: DateValue$1) => boolean;
+type TimeMatcher = (time: TimeValue) => boolean;
 interface DateRange {
   start?: DateValue$1;
   end?: DateValue$1;
 }
+interface TimeRange {
+  start?: TimeValue;
+  end?: TimeValue;
+}
 interface Grid<T> {
-  /**
-   * A `DateValue` used to represent the month. Since days
-   * from the previous and next months may be included in the
-   * calendar grid, we need a source of truth for the value
-   * the grid is representing.
-   */
   value: DateValue$1;
-  /**
-   * An array of arrays representing the weeks in the calendar.
-   * Each sub-array represents a week, and contains the dates for each
-   * day in that week. This structure is useful for rendering the calendar
-   * grid using a table, where each row represents a week and each cell
-   * represents a day.
-   */
   rows: T[][];
-  /**
-   * An array of all the dates in the current month, including dates from
-   * the previous and next months that are used to fill out the calendar grid.
-   * This array is useful for rendering the calendar grid in a customizable way,
-   * as it provides all the dates that should be displayed in the grid in a flat
-   * array.
-   */
   cells: T[];
 }
+interface DateStep {
+  year?: number;
+  month?: number;
+  day?: number;
+  hour?: number;
+  minute?: number;
+  second?: number;
+  millisecond?: number;
+}
+type HourCycle = 12 | 24 | undefined;
+type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number];
+type TimeSegmentPart = (typeof TIME_SEGMENT_PARTS)[number];
+type EditableSegmentPart = (typeof EDITABLE_SEGMENT_PARTS)[number];
+type NonEditableSegmentPart = (typeof NON_EDITABLE_SEGMENT_PARTS)[number];
+type SegmentPart = EditableSegmentPart | NonEditableSegmentPart;
+type AnyExceptLiteral = Exclude<SegmentPart, 'literal'>;
+type DayPeriod = 'AM' | 'PM' | null;
+type DateSegmentObj = { [K in DateSegmentPart]: number | null };
+type TimeSegmentObj = { [K in TimeSegmentPart]: K extends 'dayPeriod' ? DayPeriod : number | null };
+type DateAndTimeSegmentObj = DateSegmentObj & TimeSegmentObj;
+type SegmentValueObj = DateSegmentObj | DateAndTimeSegmentObj;
+type SegmentContentObj = Record<EditableSegmentPart, string>;
+type DateInputType = 'date' | 'datetime-local';
+type TimeInputType = 'time';
+type Granularity = 'day' | 'hour' | 'minute' | 'second';
+type TimeGranularity = 'hour' | 'minute' | 'second';
 //#endregion
-export { DateRange, type DateValue$1 as DateValue, DayOfWeek, Grid, Matcher };
+export { AnyExceptLiteral, DateAndTimeSegmentObj, DateInputType, DateRange, DateSegmentObj, DateSegmentPart, DateStep, type DateValue$1 as DateValue, DayOfWeek, DayPeriod, EditableSegmentPart, Granularity, Grid, HourCycle, Matcher, NonEditableSegmentPart, SegmentContentObj, SegmentPart, SegmentValueObj, TimeGranularity, TimeInputType, TimeMatcher, TimeRange, TimeSegmentObj, TimeSegmentPart };

package/dist/date/use-date-field.d.ts

@@ -0,0 +1,50 @@
+import { TimeValue } from "./comparators.js";
+import { DateStep, HourCycle, SegmentPart, SegmentValueObj } from "./types.js";
+import { Formatter } from "./formatter.js";
+import * as _$vue from "vue";
+import { Ref } from "vue";
+import { DateValue } from "@internationalized/date";
+
+//#region src/date/use-date-field.d.ts
+type UseDateFieldProps = {
+  hasLeftFocus: Ref<boolean>;
+  lastKeyZero: Ref<boolean>;
+  placeholder: Ref<DateValue | TimeValue>;
+  hourCycle: HourCycle;
+  step: Ref<DateStep>;
+  formatter: Formatter;
+  segmentValues: Ref<SegmentValueObj>;
+  disabled: Ref<boolean>;
+  readonly: Ref<boolean>;
+  part: SegmentPart;
+  modelValue: Ref<DateValue | TimeValue | undefined>;
+  focusNext: () => void;
+};
+declare function useDateField(props: UseDateFieldProps): {
+  attributes: _$vue.ComputedRef<{
+    inputmode: string;
+    'aria-label': string;
+    'aria-valuetext': string | null | undefined;
+    role: string;
+    contenteditable: boolean;
+    tabindex: number | undefined;
+    spellcheck: boolean;
+    autocorrect: string;
+    enterkeyhint: string;
+    style: string;
+  } | {
+    'aria-hidden': boolean;
+    'data-segment': string;
+  } | {
+    role: string;
+    tabindex: number | undefined;
+    'aria-label': string;
+    'data-readonly': boolean;
+    style: string;
+  }>;
+  handleSegmentClick: (event: MouseEvent) => void;
+  handleSegmentFocusOut: () => void;
+  handleSegmentKeydown: (event: KeyboardEvent) => void;
+};
+//#endregion
+export { UseDateFieldProps, useDateField };

package/dist/date/use-date-field.js

@@ -0,0 +1 @@
+import{getDaysInMonth as e}from"./comparators.js";import{isAcceptableSegmentKey as t,isNumberString as n,isSegmentNavigationKey as r}from"./segment.js";import{computed as i}from"vue";import{DateFormatter as a}from"@internationalized/date";const o=e=>({role:`spinbutton`,contenteditable:!0,tabindex:e.disabled?void 0:0,spellcheck:!1,inputmode:`numeric`,autocorrect:`off`,enterkeyhint:`next`,style:`caret-color: transparent;`}),s=(e,t)=>{if(e!==void 0)return e===12;let n=new a(t,{hour:`numeric`}).resolvedOptions().hourCycle;return n===`h11`||n===`h12`},c=e=>{let t=`hour`in e.placeholder?e.placeholder.hour:0;return s(e.hourCycle,e.formatter.getLocale())?t%12||12:t},l={day:{attrs:t=>({...o(t),"aria-label":`day,`,"aria-valuemin":1,"aria-valuemax":e(t.placeholder),"aria-valuenow":t.placeholder.day,"aria-valuetext":t.segmentValues.day===null?`Empty`:`${t.placeholder.day}`,"data-placeholder":t.segmentValues.day===null?``:void 0})},month:{attrs:e=>({...o(e),"aria-label":`month, `,"aria-valuemin":1,"aria-valuemax":12,"aria-valuenow":e.placeholder.month,"aria-valuetext":e.segmentValues.month===null?`Empty`:`${e.placeholder.month} - ${e.formatter.fullMonth(e.placeholder.toDate(`UTC`))}`,"data-placeholder":e.segmentValues.month===null?``:void 0})},year:{attrs:e=>({...o(e),"aria-label":`year, `,"aria-valuemin":1,"aria-valuemax":9999,"aria-valuenow":e.placeholder.year,"aria-valuetext":e.segmentValues.year===null?`Empty`:`${e.placeholder.year}`,"data-placeholder":e.segmentValues.year===null?``:void 0})},hour:{attrs:e=>({...o(e),"aria-label":`hour, `,"aria-valuemin":+!!s(e.hourCycle,e.formatter.getLocale()),"aria-valuemax":s(e.hourCycle,e.formatter.getLocale())?12:23,"aria-valuenow":c(e),"aria-valuetext":`hour`in e.segmentValues&&e.segmentValues.hour===null?`Empty`:`${c(e)}`,"data-placeholder":`hour`in e.segmentValues&&e.segmentValues.hour===null?``:void 0})},minute:{attrs:e=>({...o(e),"aria-label":`minute, `,"aria-valuemin":0,"aria-valuemax":59,"aria-valuenow":`minute`in e.placeholder?e.placeholder.minute:0,"aria-valuetext":`minute`in e.segmentValues&&e.segmentValues.minute===null?`Empty`:`${`minute`in e.placeholder?e.placeholder.minute:0}`,"data-placeholder":`minute`in e.segmentValues&&e.segmentValues.minute===null?``:void 0})},second:{attrs:e=>({...o(e),"aria-label":`second, `,"aria-valuemin":0,"aria-valuemax":59,"aria-valuenow":`second`in e.placeholder?e.placeholder.second:0,"aria-valuetext":`second`in e.segmentValues&&e.segmentValues.second===null?`Empty`:`${`second`in e.placeholder?e.placeholder.second:0}`,"data-placeholder":`second`in e.segmentValues&&e.segmentValues.second===null?``:void 0})},dayPeriod:{attrs:e=>({...o(e),inputmode:`text`,"aria-label":`AM/PM, `,"aria-valuetext":`dayPeriod`in e.segmentValues&&e.segmentValues.dayPeriod===null?`Empty`:`dayPeriod`in e.segmentValues?e.segmentValues.dayPeriod:void 0})},literal:{attrs:()=>({"aria-hidden":!0,"data-segment":`literal`})},timeZoneName:{attrs:e=>({role:`textbox`,tabindex:e.disabled?void 0:0,"aria-label":`time zone, `,"data-readonly":!0,style:`caret-color: transparent;`})}};function u(a){let o=i(()=>l[a.part]?.attrs({disabled:a.disabled.value,placeholder:a.placeholder.value,hourCycle:a.hourCycle,segmentValues:a.segmentValues.value,formatter:a.formatter})??{}),c=e=>{if(a.hasLeftFocus.value=!1,e===null)return e;let t=e.toString();return t.length===1?(a.modelValue.value=void 0,null):Number.parseInt(t.slice(0,-1))},u=(e,t,n,r)=>{let i=a.step.value[t]??1,o=e.key===`ArrowUp`?i:-i;return r===null?o>0?0:59:n.set({[t]:r}).cycle(t,o)[t]},d=(e,t,n,r)=>{let i=a.step.value[t]??1,o=e.key===`ArrowUp`?i:-i;if(r===null){if(t===`hour`&&`hour`in n)return n.hour;let e=n;return t===`day`?e.day:t===`month`?e.month:e.year}if(t===`hour`&&`hour`in n)return n.set({[t]:r}).cycle(t,o)[t];let s=n;return t===`day`?s.set({[t]:r,month:a.segmentValues.value.month??1}).cycle(t,o)[t]:t===`month`?s.set({month:r}).cycle(`month`,o).month:s.set({year:r}).cycle(`year`,o).year},f=(e,t,n)=>{let r=!1,i=Math.floor(e/10);if(a.hasLeftFocus.value&&(a.hasLeftFocus.value=!1,a.lastKeyZero.value=!1,n=null),n===null)return t===0?(a.lastKeyZero.value=!0,{moveToNext:r,value:null}):((a.lastKeyZero.value||t>i)&&(r=!0),a.lastKeyZero.value=!1,{moveToNext:r,value:t});let o=n.toString().length,s=Number.parseInt(n.toString()+t.toString());return o===2||s>e?((t>i||s>e)&&(r=!0),{moveToNext:r,value:t}):(r=!0,{moveToNext:r,value:s})},p=(e,t)=>{let n=!1;if(a.hasLeftFocus.value&&(a.hasLeftFocus.value=!1,a.lastKeyZero.value=!1,t=null),t===null)return e===0?(a.lastKeyZero.value=!0,{moveToNext:n,value:0}):((a.lastKeyZero.value||e>5)&&(n=!0),a.lastKeyZero.value=!1,{moveToNext:n,value:e});let r=t.toString().length,i=Number.parseInt(t.toString()+e.toString());return r===2||i>59?(e>5&&(n=!0),{moveToNext:n,value:e}):(n=!0,{moveToNext:n,value:i})},m=(e,t,n)=>{let r=!1,i=Math.floor(e/10);if(a.hasLeftFocus.value&&(a.hasLeftFocus.value=!1,a.lastKeyZero.value=!1,n=null),n===null)return t===0?(a.lastKeyZero.value=!0,{moveToNext:r,value:0}):((a.lastKeyZero.value||t>i)&&(r=!0),a.lastKeyZero.value=!1,{moveToNext:r,value:t});let o=n.toString().length,s=Number.parseInt(n.toString()+t.toString());return o===2||s>e?(t>i&&(r=!0),{moveToNext:r,value:t}):(r=!0,{moveToNext:r,value:s})},h=(e,t)=>{let n=!1;if(a.hasLeftFocus.value&&(a.hasLeftFocus.value=!1,t=null),t===null)return{moveToNext:n,value:e===0?1:e};let r=t.toString()+e.toString();return r.length>4?{moveToNext:n,value:e===0?1:e}:(r.length===4&&(n=!0),{moveToNext:n,value:Number.parseInt(r)})},g=i=>{if(!t(i.key)||r(i.key))return;let o=a.segmentValues.value.day;if(i.key===`ArrowDown`||i.key===`ArrowUp`){a.segmentValues.value.day=d(i,`day`,a.placeholder.value,o);return}if(n(i.key)){let t=Number.parseInt(i.key),n=a.segmentValues.value.month,{moveToNext:r,value:s}=f(n?e(a.placeholder.value.set({month:n})):31,t,o);a.segmentValues.value.day=s,r&&a.focusNext()}i.key===`Backspace`&&(a.segmentValues.value.day=c(o))},_=e=>{if(!t(e.key)||r(e.key))return;let i=a.segmentValues.value.month;if(e.key===`ArrowDown`||e.key===`ArrowUp`){a.segmentValues.value.month=d(e,`month`,a.placeholder.value,i);return}if(n(e.key)){let{moveToNext:t,value:n}=f(12,Number.parseInt(e.key),i);a.segmentValues.value.month=n,t&&a.focusNext()}e.key===`Backspace`&&(a.segmentValues.value.month=c(i))},v=e=>{if(!t(e.key)||r(e.key))return;let i=a.segmentValues.value.year;if(e.key===`ArrowDown`||e.key===`ArrowUp`){a.segmentValues.value.year=d(e,`year`,a.placeholder.value,i);return}if(n(e.key)){let{moveToNext:t,value:n}=h(Number.parseInt(e.key),i);a.segmentValues.value.year=n,t&&a.focusNext()}e.key===`Backspace`&&(a.segmentValues.value.year=c(i))},y=e=>{if(!t(e.key)||r(e.key)||!(`hour`in a.placeholder.value)||!(`hour`in a.segmentValues.value))return;let i=a.segmentValues.value.hour;if(e.key===`ArrowDown`||e.key===`ArrowUp`){let t=d(e,`hour`,a.placeholder.value,i);a.segmentValues.value.hour=t,`dayPeriod`in a.segmentValues.value&&t!==null&&(a.segmentValues.value.dayPeriod=t>=12?`PM`:`AM`);return}if(n(e.key)){let t=Number.parseInt(e.key),n=s(a.hourCycle,a.formatter.getLocale()),r=n?12:24,o=i;n&&i!==null&&(o=i%12==0?0:i>12?i-12:i);let{moveToNext:c,value:l}=m(r,t,o),u=l;if(n&&l!==null&&`dayPeriod`in a.segmentValues.value){let e=a.segmentValues.value.dayPeriod||`AM`;u=l===12?e===`AM`?0:12:e===`PM`?l+12:l}a.segmentValues.value.hour=u,c&&a.focusNext()}e.key===`Backspace`&&(a.segmentValues.value.hour=c(i))},b=e=>{if(!t(e.key)||r(e.key)||!(`minute`in a.placeholder.value)||!(`minute`in a.segmentValues.value))return;let i=a.segmentValues.value.minute;if(e.key===`ArrowDown`||e.key===`ArrowUp`){a.segmentValues.value.minute=u(e,`minute`,a.placeholder.value,i);return}if(n(e.key)){let{moveToNext:t,value:n}=p(Number.parseInt(e.key),i);a.segmentValues.value.minute=n,t&&a.focusNext()}e.key===`Backspace`&&(a.segmentValues.value.minute=c(i))},x=e=>{if(!t(e.key)||r(e.key)||!(`second`in a.placeholder.value)||!(`second`in a.segmentValues.value))return;let i=a.segmentValues.value.second;if(e.key===`ArrowDown`||e.key===`ArrowUp`){a.segmentValues.value.second=u(e,`second`,a.placeholder.value,i);return}if(n(e.key)){let{moveToNext:t,value:n}=p(Number.parseInt(e.key),i);a.segmentValues.value.second=n,t&&a.focusNext()}e.key===`Backspace`&&(a.segmentValues.value.second=c(i))},S=e=>{if(!((!t(e.key)||r(e.key))&&![`a`,`A`,`p`,`P`].includes(e.key)||!(`hour`in a.placeholder.value)||!(`dayPeriod`in a.segmentValues.value))){if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(a.segmentValues.value.dayPeriod===`AM`){a.segmentValues.value.dayPeriod=`PM`,a.segmentValues.value.hour=(a.segmentValues.value.hour??0)+12;return}a.segmentValues.value.dayPeriod=`AM`,a.segmentValues.value.hour=(a.segmentValues.value.hour??12)-12;return}if([`a`,`A`].includes(e.key)&&a.segmentValues.value.dayPeriod!==`AM`){a.segmentValues.value.dayPeriod=`AM`,a.segmentValues.value.hour=(a.segmentValues.value.hour??12)-12;return}[`p`,`P`].includes(e.key)&&a.segmentValues.value.dayPeriod!==`PM`&&(a.segmentValues.value.dayPeriod=`PM`,a.segmentValues.value.hour=(a.segmentValues.value.hour??0)+12)}};return{attributes:o,handleSegmentClick:e=>{a.disabled.value&&e.preventDefault()},handleSegmentFocusOut:()=>{if(!Object.values(a.segmentValues.value).every(e=>e!==null))return;let e=a.placeholder.value.set({...a.segmentValues.value});a.modelValue.value=e.copy()},handleSegmentKeydown:e=>{if(a.disabled.value||a.readonly.value)return;e.key!==`Tab`&&e.preventDefault();let n={day:g,dayPeriod:S,hour:y,minute:b,month:_,second:x,timeZoneName:()=>void 0,year:v};a.part!==`literal`&&(n[a.part](e),![`ArrowLeft`,`ArrowRight`,`Shift`,`Tab`].includes(e.key)&&t(e.key)&&Object.values(a.segmentValues.value).every(e=>e!==null)&&(a.modelValue.value=a.placeholder.value.set({...a.segmentValues.value}).copy()))}}}export{u as useDateField};

package/dist/date/utils.d.ts

@@ -1,4 +1,18 @@
+import { TimeValue } from "./comparators.js";
+import { DateStep, DateValue, Granularity, HourCycle, TimeGranularity, TimeInputType } from "./types.js";
+
 //#region src/date/utils.d.ts
 declare function chunk<T>(array: T[], size: number): T[][];
+declare function getOptsByGranularity(granularity: Granularity, hourCycle: HourCycle, isTimeValue?: boolean): Intl.DateTimeFormatOptions;
+declare function normalizeDateStep(props?: {
+  step?: DateStep;
+}): DateStep;
+declare function handleCalendarInitialFocus(calendar: HTMLElement): void;
+declare function normalizeHourCycle(hourCycle: HourCycle): "h23" | "h11" | undefined;
+declare function normalizeHour12(hourCycle: HourCycle): boolean | undefined;
+declare function getInputType(granularity: Granularity): "date" | "datetime-local";
+declare function normalizeInputValue(date: DateValue | undefined, granularity: Granularity): string;
+declare function getTimeInputType(_granularity: TimeGranularity): TimeInputType;
+declare function normalizeTimeInputValue(time: TimeValue | undefined, granularity: TimeGranularity): string;
 //#endregion
-export { chunk };
+export { chunk, getInputType, getOptsByGranularity, getTimeInputType, handleCalendarInitialFocus, normalizeDateStep, normalizeHour12, normalizeHourCycle, normalizeInputValue, normalizeTimeInputValue };

package/dist/date/utils.js

@@ -1 +1 @@
-function e(e,t){if(t<=0)throw RangeError(`chunk size must be greater than 0`);let n=[];for(let r=0;r<e.length;r+=t)n.push(e.slice(r,r+t));return n}export{e as chunk};
+function e(e,t){if(t<=0)throw RangeError(`chunk size must be greater than 0`);let n=[];for(let r=0;r<e.length;r+=t)n.push(e.slice(r,r+t));return n}function t(e,t,n=!1){let r={year:`numeric`,month:`2-digit`,day:`2-digit`,hour:`2-digit`,minute:`2-digit`,second:`2-digit`,timeZoneName:`short`,hourCycle:i(t),hour12:a(t)};return n&&(delete r.year,delete r.month,delete r.day),e===`day`&&(delete r.hour,delete r.minute,delete r.second,delete r.timeZoneName),e===`hour`&&(delete r.minute,delete r.second),e===`minute`&&delete r.second,r}function n(e){return{year:e?.step?.year??1,month:e?.step?.month??1,day:e?.step?.day??1,hour:e?.step?.hour??1,minute:e?.step?.minute??1,second:e?.step?.second??1,millisecond:e?.step?.millisecond??1}}function r(e){let t=e.querySelector(`[data-selected]`);if(t){t.focus();return}let n=e.querySelector(`[data-today]`);if(n){n.focus();return}e.querySelector(`[data-slot="cell-trigger"]:not([data-disabled]):not([data-unavailable])`)?.focus()}function i(e){if(e===24)return`h23`;if(e===12)return`h11`}function a(e){if(e===24)return!1;if(e===12)return!0}function o(e){return e===`day`?`date`:`datetime-local`}function s(e,t){if(!e)return``;let n=o(t),r=String(e.year).padStart(4,`0`),i=String(e.month).padStart(2,`0`),a=String(e.day).padStart(2,`0`);if(n===`date`)return`${r}-${i}-${a}`;let s=String(`hour`in e?e.hour:0).padStart(2,`0`),c=String(`minute`in e?e.minute:0).padStart(2,`0`);return t===`second`?`${r}-${i}-${a}T${s}:${c}:${String(`second`in e?e.second:0).padStart(2,`0`)}`:`${r}-${i}-${a}T${s}:${c}`}function c(e){return`time`}function l(e,t){if(!e)return``;let n=String(e.hour).padStart(2,`0`),r=String(e.minute).padStart(2,`0`);return t===`second`?`${n}:${r}:${String(e.second).padStart(2,`0`)}`:`${n}:${r}`}export{e as chunk,o as getInputType,t as getOptsByGranularity,c as getTimeInputType,r as handleCalendarInitialFocus,n as normalizeDateStep,a as normalizeHour12,i as normalizeHourCycle,s as normalizeInputValue,l as normalizeTimeInputValue};