@soybeanjs/headless 0.18.0 → 0.19.0

package/dist/components/date-picker/types.d.ts

@@ -1,290 +1,27 @@
-import { Direction, UiClass } from "../../types/common.js";
-import { FormFieldCommonProps } from "../../types/component.js";
-import { PropsToContext } from "../../types/vue.js";
-import { PrimitiveProps } from "../primitive/types.js";
-import { PortalProps } from "../portal/types.js";
-import { DateStep, Granularity, HourCycle, Matcher } from "../../date/types.js";
-import { Formatter } from "../../date/formatter.js";
-import { PopoverPopupProps, PopoverPositionerEmits, PopoverPositionerProps, PopoverRootProps, PopoverTriggerProps, PopoverUiSlot } from "../popover/types.js";
-import { ComputedRef, HTMLAttributes, ShallowRef } from "vue";
-import { DateValue } from "@internationalized/date";
+import { UiClass } from "../../types/common.js";
+import { BaseProps } from "../../types/vue.js";
+import { CalendarCompactEmits, CalendarCompactProps } from "../calendar/types.js";
+import { PopoverCompactEmits, PopoverCompactProps, PopoverUiSlot } from "../popover/types.js";
+import { DateFieldUiSlot } from "../date-field/types.js";
 
 //#region src/components/date-picker/types.d.ts
-/**
- * Properties for the DatePickerRoot component.
- */
-interface DatePickerRootProps extends PrimitiveProps, FormFieldCommonProps, PopoverRootProps, /** @vue-ignore */Omit<HTMLAttributes, 'placeholder'> {
-  /**
-   * Default value.
-   */
-  defaultValue?: DateValue;
-  /**
-   * Default placeholder.
-   */
-  defaultPlaceholder?: DateValue;
-  /**
-   * Placeholder.
-   */
-  placeholder?: DateValue;
-  /**
-   * Current model value.
-   */
-  modelValue?: DateValue;
-  /**
-   * Hour cycle.
-   */
-  hourCycle?: HourCycle;
-  /**
-   * Step.
-   */
-  step?: DateStep;
-  /**
-   * Granularity.
-   */
-  granularity?: Granularity;
-  /**
-   * Whether hide time zone.
-   */
-  hideTimeZone?: boolean;
-  /**
-   * Max value.
-   */
-  maxValue?: DateValue;
-  /**
-   * Min value.
-   */
-  minValue?: DateValue;
-  /**
-   * Locale.
-   */
-  locale?: string;
-  /**
-   * Whether the component is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Whether the component is readonly.
-   */
-  readonly?: boolean;
-  /**
-   * Whether the date is unavailable.
-   */
-  isDateUnavailable?: Matcher;
-  /**
-   * Id.
-   */
-  id?: string;
-  /**
-   * Reading direction of the component.
-   */
-  dir?: Direction;
-}
-/**
- * Events for the DatePickerRoot component.
- */
-type DatePickerRootEmits = {
-  /**
-   * Emitted when the model value changes.
-   */
-  'update:modelValue': [date: DateValue | undefined];
-  /**
-   * Emitted when the placeholder value changes.
-   */
-  'update:placeholder': [date: DateValue];
-  /**
-   * Emitted when the open state changes.
-   */
-  'update:open': [open: boolean];
-};
-/**
- * Slot properties for the DatePicker component.
- */
-interface DatePickerSlotProps {
-  /**
-   * Current model value.
-   */
-  modelValue: DateValue | undefined;
-  /**
-   * Placeholder exposed in the slot scope.
-   */
-  placeholder: DateValue;
-  /**
-   * Set placeholder exposed in the slot scope.
-   */
-  setPlaceholder: (date: DateValue) => void;
-  /**
-   * Set date exposed in the slot scope.
-   */
-  setDate: (date: DateValue | undefined) => void;
-  /**
-   * Whether the component is open.
-   */
-  open?: boolean;
-}
-/**
- * Slots for the DatePickerRoot component.
- */
-type DatePickerRootSlots = {
-  /**
-   * Custom content for the default slot.
-   */
-  default?: (props: DatePickerSlotProps) => any;
-};
-/**
- * Context for the DatePickerRoot component.
- */
-interface DatePickerRootContext extends PropsToContext<DatePickerRootProps, 'disabled' | 'readonly'> {
-  /**
-   * Locale used by the component context.
-   */
-  locale: ComputedRef<string>;
-  /**
-   * Reading direction of the component.
-   */
-  dir: ComputedRef<Direction>;
-  /**
-   * Current model value.
-   */
-  modelValue: ShallowRef<DateValue | undefined>;
-  /**
-   * Placeholder used by the component context.
-   */
-  placeholder: ShallowRef<DateValue>;
-  /**
-   * Whether the date is unavailable.
-   */
-  isDateUnavailable?: Matcher;
-  /**
-   * Whether the current value is invalid.
-   */
-  isInvalid: ComputedRef<boolean>;
-  /**
-   * Formatter used by the component context.
-   */
-  formatter: Formatter;
-  /**
-   * Hour cycle used by the component context.
-   */
-  hourCycle: HourCycle;
-  /**
-   * Step used by the component context.
-   */
-  step: ComputedRef<DateStep>;
-  /**
-   * Whether the placeholder is focusable.
-   */
-  isPlaceholderFocusable: ComputedRef<boolean>;
-  /**
-   * Whether the component has selected date.
-   */
-  hasSelectedDate: ComputedRef<boolean>;
-  /**
-   * Whether the selected date is disabled.
-   */
-  isSelectedDateDisabled: ComputedRef<boolean>;
-  /**
-   * Min value used by the component context.
-   */
-  minValue: ComputedRef<DateValue | undefined>;
-  /**
-   * Max value used by the component context.
-   */
-  maxValue: ComputedRef<DateValue | undefined>;
-  /**
-   * Callback invoked when the date changes.
-   */
-  onDateChange: (date: DateValue | undefined) => void;
-  /**
-   * Callback invoked when the placeholder changes.
-   */
-  onPlaceholderChange: (date: DateValue) => void;
-  /**
-   * Whether the date is disabled.
-   */
-  isDateDisabled: Matcher;
-  /**
-   * Whether the date is selected.
-   */
-  isDateSelected: Matcher;
-  /**
-   * Whether the component is open.
-   */
-  open: ShallowRef<boolean | undefined>;
-  /**
-   * Set open used by the component context.
-   */
-  setOpen: (value: boolean) => void;
-}
-/**
- * Properties for the DatePickerContent component.
- */
-interface DatePickerContentProps extends PopoverPositionerProps {
-  /**
-   * Properties forwarded to the popup element.
-   */
-  popupProps?: PopoverPopupProps;
-  /**
-   * Properties forwarded to the portal element.
-   */
-  portalProps?: PortalProps;
-}
-/**
- * Slots for the DatePickerContent component.
- */
-type DatePickerContentSlots = {
-  /**
-   * Custom content for the default slot.
-   */
-  default?: (props: DatePickerSlotProps) => any;
-};
 /**
  * Properties for the DatePickerCompact component.
  */
-interface DatePickerCompactProps extends DatePickerRootProps {
-  /**
-   * Trigger placeholder.
-   */
-  triggerPlaceholder?: string;
-  /**
-   * Properties forwarded to the positioner element.
-   */
-  positionerProps?: PopoverPositionerProps;
-  /**
-   * Properties forwarded to the popup element.
-   */
-  popupProps?: PopoverPopupProps;
-  /**
-   * Properties forwarded to the portal element.
-   */
-  portalProps?: PortalProps;
-  /**
-   * Properties forwarded to the trigger element.
-   */
-  triggerProps?: PopoverTriggerProps;
+interface DatePickerCompactProps extends PopoverCompactProps, CalendarCompactProps<false> {
+  dateFieldProps?: BaseProps;
 }
 /**
  * Events for the DatePickerCompact component.
  */
-type DatePickerCompactEmits = DatePickerRootEmits;
+type DatePickerCompactEmits = PopoverCompactEmits & CalendarCompactEmits<false>;
 /**
  * Slots for the DatePickerCompact component.
  */
-type DatePickerCompactSlots = DatePickerContentSlots & {
-  /**
-   * Custom content for the trigger slot.
-   */
-  trigger?: (props: {
-    modelValue: DateValue | undefined;
-    open?: boolean;
-  }) => any;
-};
-/**
- * Available UI slots for the DatePicker component.
- */
-type DatePickerUiSlot = PopoverUiSlot | 'root';
+type DatePickerUiSlot = PopoverUiSlot | DateFieldUiSlot;
 /**
- * UI class overrides for the DatePicker component.
+ * UI class for the DatePicker component.
  */
 type DatePickerUi = UiClass<DatePickerUiSlot>;
 //#endregion
-export { DatePickerCompactEmits, DatePickerCompactProps, DatePickerCompactSlots, DatePickerContentProps, DatePickerContentSlots, DatePickerRootContext, DatePickerRootEmits, DatePickerRootProps, DatePickerRootSlots, DatePickerUi, DatePickerUiSlot };
+export { DatePickerCompactEmits, DatePickerCompactProps, DatePickerUi, DatePickerUiSlot };

package/dist/components/date-range-field/date-range-field-compact.js

@@ -1 +1 @@
-import{useForwardListeners as e}from"../../composables/use-forward-listeners.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import{useDateRangeFieldUi as n}from"./context.js";import r from"./date-range-field-root.js";import i from"./date-range-field-input.js";import{Fragment as a,createBlock as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,defineComponent as u,mergeProps as d,normalizeClass as f,normalizeProps as p,openBlock as m,renderList as h,renderSlot as g,toDisplayString as _,toHandlers as v,unref as y,withCtx as b}from"vue";const x={"data-date-range-field-part":`start`},S={"data-date-range-field-part":`end`},C=u({name:`DateRangeFieldCompact`,__name:`date-range-field-compact`,props:{inputProps:{},separator:{default:`–`},defaultValue:{},defaultPlaceholder:{},placeholder:{},modelValue:{},hourCycle:{},step:{},granularity:{},hideTimeZone:{type:Boolean},maxValue:{},minValue:{},locale:{},disabled:{type:Boolean},readonly:{type:Boolean},isDateUnavailable:{},id:{},dir:{},startName:{},endName:{},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:placeholder`,`update:startValue`,`update:endValue`],setup(u,{emit:C}){let w=u,T=C,E=t(w,[`inputProps`,`separator`]),D=e(T),O=n();return(e,t)=>(m(),o(r,d(y(E),v(y(D))),{default:b(t=>[e.$slots.default?g(e.$slots,`default`,p(d({key:0},t))):(m(),s(a,{key:1},[c(`div`,x,[(m(!0),s(a,null,h(t.startSegments,(e,t)=>(m(),o(i,d({key:`start-${e.part}-${t}`,part:e.part,type:`start`},{ref_for:!0},u.inputProps),{default:b(()=>[l(_(e.value),1)]),_:2},1040,[`part`]))),128))]),c(`div`,{class:f(y(O).separator)},[g(e.$slots,`separator`,{},()=>[l(_(u.separator),1)])],2),c(`div`,S,[(m(!0),s(a,null,h(t.endSegments,(e,t)=>(m(),o(i,d({key:`end-${e.part}-${t}`,part:e.part,type:`end`},{ref_for:!0},u.inputProps),{default:b(()=>[l(_(e.value),1)]),_:2},1040,[`part`]))),128))])],64))]),_:3},16))}});export{C as default};
+import{useForwardListeners as e}from"../../composables/use-forward-listeners.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import{useDateRangeFieldUi as n}from"./context.js";import r from"./date-range-field-root.js";import i from"./date-range-field-input.js";import{Fragment as a,createBlock as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,defineComponent as u,mergeProps as d,normalizeClass as f,openBlock as p,renderList as m,renderSlot as h,toDisplayString as g,toHandlers as _,unref as v,withCtx as y}from"vue";const b=u({name:`DateRangeFieldCompact`,__name:`date-range-field-compact`,props:{inputProps:{},separator:{default:`–`},defaultValue:{},modelValue:{},startName:{},endName:{},id:{},granularity:{},hourCycle:{},step:{},hideTimeZone:{type:Boolean},name:{},required:{type:Boolean},dir:{},locale:{},placeholder:{},defaultPlaceholder:{},disabled:{type:Boolean},readonly:{type:Boolean},maxValue:{},minValue:{},isDateUnavailable:{},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:placeholder`,`update:startValue`,`update:endValue`],setup(u,{emit:b}){let x=u,S=b,C=t(x,[`inputProps`,`separator`]),w=e(S),T=n();return(e,t)=>(p(),o(r,d(v(C),_(v(w))),{default:y(t=>[h(e.$slots,`leading`),c(`div`,{"data-date-range-field-part":`start`,class:f(v(T).startRoot)},[(p(!0),s(a,null,m(t.startSegments,(e,t)=>(p(),o(i,d({key:`start-${e.part}-${t}`,part:e.part,type:`start`},{ref_for:!0},u.inputProps),{default:y(()=>[l(g(e.value),1)]),_:2},1040,[`part`]))),128))],2),c(`div`,{class:f(v(T).separator)},[h(e.$slots,`separator`,{},()=>[l(g(u.separator),1)])],2),c(`div`,{"data-date-range-field-part":`end`,class:f(v(T).endRoot)},[(p(!0),s(a,null,m(t.endSegments,(e,t)=>(p(),o(i,d({key:`end-${e.part}-${t}`,part:e.part,type:`end`},{ref_for:!0},u.inputProps),{default:y(()=>[l(g(e.value),1)]),_:2},1040,[`part`]))),128))],2),h(e.$slots,`trailing`)]),_:3},16))}});export{b as default};

package/dist/components/date-range-field/date-range-field-input.js

@@ -1 +1 @@
-import{useDateField as e}from"../../date/use-date-field.js";import"../../date/index.js";import{Primitive as t}from"../primitive/primitive.js";import"../primitive/index.js";import{useDateRangeFieldRootContext as n,useDateRangeFieldUi as r}from"./context.js";import{computed as i,createBlock as a,defineComponent as o,mergeProps as s,openBlock as c,ref as l,renderSlot as u,toHandlers as d,unref as f,withCtx as p}from"vue";const m=o({name:`DateRangeFieldInput`,__name:`date-range-field-input`,props:{part:{},type:{default:`start`},asChild:{type:Boolean},as:{default:`span`}},setup(o){let m=o,h=r(`input`),{disabled:g,readonly:_,placeholder:v,hourCycle:y,step:b,startSegmentValues:x,endSegmentValues:S,formatter:C,focusNext:w,modelValue:T,isInvalid:E,setFocusedElement:D}=n(`DateRangeFieldInput`),O=l(!0),k=l(!1),A=i(()=>!!g.value),j=i(()=>!!_.value),{attributes:M,handleSegmentClick:N,handleSegmentFocusOut:P,handleSegmentKeydown:F}=e({hasLeftFocus:O,lastKeyZero:k,placeholder:v,hourCycle:y,step:b,segmentValues:i(()=>m.type===`start`?x.value:S.value),formatter:C,part:m.part,disabled:A,readonly:j,focusNext:()=>w(m.type),modelValue:i({get:()=>m.type===`start`?T.value.start:T.value.end,set:e=>{m.type===`start`?T.value={...T.value,start:e}:T.value={...T.value,end:e}}})}),I=i(()=>A.value||j.value?!1:m.part!==`literal`&&m.part!==`timeZoneName`),L=i(()=>m.part===`literal`?{}:{mousedown:N,keydown:F,focusout:()=>{O.value=!0,P()},focusin:e=>{D(e.target,m.type)}});return(e,n)=>(c(),a(f(t),s({as:o.as,"as-child":o.asChild},f(M),{"aria-disabled":A.value?!0:void 0,"aria-invalid":f(E)?!0:void 0,"aria-readonly":j.value||o.part===`timeZoneName`?!0:void 0,class:f(h),contenteditable:I.value,"data-disabled":A.value?``:void 0,"data-invalid":f(E)?``:void 0,"data-readonly":j.value||o.part===`timeZoneName`?``:void 0,"data-segment":o.part,"data-soybean-date-field-segment":o.part,"data-slot":`input`},d(L.value)),{default:p(()=>[u(e.$slots,`default`)]),_:3},16,[`as`,`as-child`,`aria-disabled`,`aria-invalid`,`aria-readonly`,`class`,`contenteditable`,`data-disabled`,`data-invalid`,`data-readonly`,`data-segment`,`data-soybean-date-field-segment`]))}});export{m as default};
+import{useDateField as e}from"../../date/use-date-field.js";import"../../date/index.js";import{Primitive as t}from"../primitive/primitive.js";import"../primitive/index.js";import{useDateRangeFieldRootContext as n,useDateRangeFieldUi as r}from"./context.js";import{computed as i,createBlock as a,defineComponent as o,mergeProps as s,openBlock as c,ref as l,renderSlot as u,toHandlers as d,unref as f,withCtx as p}from"vue";const m=o({name:`DateRangeFieldInput`,__name:`date-range-field-input`,props:{type:{default:`start`},part:{},asChild:{type:Boolean},as:{default:`span`}},setup(o){let m=o,h=r(`input`),{disabled:g,readonly:_,placeholder:v,hourCycle:y,step:b,startSegmentValues:x,endSegmentValues:S,formatter:C,focusNext:w,modelValue:T,isInvalid:E,setFocusedElement:D}=n(`DateRangeFieldInput`),O=l(!0),{attributes:k,handleSegmentClick:A,handleSegmentFocusOut:j,handleSegmentKeydown:M}=e({hasLeftFocus:O,lastKeyZero:l(!1),placeholder:v,hourCycle:y,step:b,segmentValues:i(()=>m.type===`start`?x.value:S.value),formatter:C,part:m.part,disabled:g,readonly:_,focusNext:()=>w(m.type),modelValue:i({get:()=>m.type===`start`?T.value.start:T.value.end,set:e=>{m.type===`start`?T.value={...T.value,start:e}:T.value={...T.value,end:e}}})}),N=i(()=>g.value||_.value?!1:m.part!==`literal`&&m.part!==`timeZoneName`),P=i(()=>m.part===`literal`?{}:{mousedown:A,keydown:M,focusout:()=>{O.value=!0,j()},focusin:e=>{D(e.target,m.type)}});return(e,n)=>(c(),a(f(t),s({as:o.as,"as-child":o.asChild},f(k),{"data-soybean-date-range-field-input":``,"data-soybean-date-field-segment":o.part,class:f(h),"aria-disabled":f(g)?!0:void 0,"aria-invalid":f(E)?!0:void 0,"aria-readonly":f(_)||o.part===`timeZoneName`?!0:void 0,contenteditable:N.value,"data-disabled":f(g)?``:void 0,"data-invalid":f(E)?``:void 0,"data-readonly":f(_)||o.part===`timeZoneName`?``:void 0,"data-segment":o.part},d(P.value)),{default:p(()=>[u(e.$slots,`default`)]),_:3},16,[`as`,`as-child`,`data-soybean-date-field-segment`,`class`,`aria-disabled`,`aria-invalid`,`aria-readonly`,`contenteditable`,`data-disabled`,`data-invalid`,`data-readonly`,`data-segment`]))}});export{m as default};

package/dist/components/date-range-field/date-range-field-input.vue.d.ts

@@ -1,5 +1,5 @@
 import { AsTag } from "../primitive/types.js";
-import { DateRangeFieldInputProps } from "./types.js";
+import { DateRangeFieldInputProps, DateRangeType } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/date-range-field/date-range-field-input.vue.d.ts
@@ -8,7 +8,7 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<DateRangeFieldInputProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<DateRangeFieldInputProps> & Readonly<{}>, {
-  type: "start" | "end";
+  type: DateRangeType;
   as: AsTag | _$vue.Component;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/date-range-field/date-range-field-root.js

@@ -1 +1 @@
-import{isNullish as e}from"../../shared/guard.js";import{getDefaultDate as t,hasTime as n,isBefore as r}from"../../date/comparators.js";import{getInputType as i,normalizeDateStep as a,normalizeHourCycle as ee,normalizeInputValue as o}from"../../date/utils.js";import{useDateFormatter as s}from"../../date/formatter.js";import{createContent as c,initializeSegmentValues as l,syncSegmentValues as u}from"../../date/parser.js";import{getSegmentElements as d}from"../../date/segment.js";import"../../date/index.js";import"../../shared/index.js";import{useControllableState as f}from"../../composables/use-controllable-state.js";import{useForwardElement as p}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{useDirection as m,useLocale as h}from"../config-provider/context.js";import{Primitive as te}from"../primitive/primitive.js";import"../primitive/index.js";import g from"../visually-hidden/visually-hidden.js";import"../visually-hidden/index.js";import{provideDateRangeFieldRootContext as ne,useDateRangeFieldUi as _}from"./context.js";import{computed as v,createBlock as re,createVNode as y,defineComponent as b,nextTick as ie,normalizeClass as x,onMounted as S,openBlock as ae,renderSlot as oe,shallowRef as C,unref as w,watch as T,withCtx as se}from"vue";const E=b({name:`DateRangeFieldRoot`,__name:`date-range-field-root`,props:{defaultValue:{default:void 0},defaultPlaceholder:{default:void 0},placeholder:{default:void 0},modelValue:{},hourCycle:{default:void 0},step:{default:void 0},granularity:{default:void 0},hideTimeZone:{type:Boolean,default:!1},maxValue:{},minValue:{},locale:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},isDateUnavailable:{type:Function,default:void 0},id:{},dir:{},startName:{default:void 0},endName:{default:void 0},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:placeholder`,`update:startValue`,`update:endValue`],setup(b,{emit:E}){let D=b,O=E,k=_(`root`),[A,j]=p(),M=h(()=>D.locale),N=m(()=>D.dir),P=s(M.value,{hourCycle:ee(D.hourCycle)}),F=f(()=>D.modelValue,e=>{O(`update:modelValue`,e),O(`update:startValue`,e.start),O(`update:endValue`,e.end)},D.defaultValue??{}),ce=t({defaultPlaceholder:D.placeholder,defaultValue:F.value.start,granularity:D.granularity,locale:D.locale}),I=f(()=>D.placeholder,e=>O(`update:placeholder`,e),D.defaultPlaceholder??ce.copy()),le=v(()=>a(D)),L=v(()=>D.granularity?n(I.value)?D.granularity:`day`:n(I.value)?`minute`:`day`),R=v(()=>{let{start:e,end:t}=F.value;return!!(e&&t&&r(t,e)||e&&(D.isDateUnavailable?.(e)||D.minValue&&r(e,D.minValue)||D.maxValue&&r(D.maxValue,e))||t&&(D.isDateUnavailable?.(t)||D.minValue&&r(t,D.minValue)||D.maxValue&&r(D.maxValue,t)))}),z=C(F.value.start?{...u({value:F.value.start,formatter:P})}:{...l(L.value)}),B=C(F.value.end?{...u({value:F.value.end,formatter:P})}:{...l(L.value)}),V=v(()=>c({granularity:L.value,dateRef:I.value,formatter:P,hideTimeZone:D.hideTimeZone,hourCycle:D.hourCycle,segmentValues:z.value,locale:M}).arr),H=v(()=>c({granularity:L.value,dateRef:I.value,formatter:P,hideTimeZone:D.hideTimeZone,hourCycle:D.hourCycle,segmentValues:B.value,locale:M}).arr),U=C([]),W=C([]),G=C(null),K=C(`start`),q=()=>{if(!A.value)return;let e=A.value.querySelector(`[data-date-range-field-part="start"]`),t=A.value.querySelector(`[data-date-range-field-part="end"]`);e&&(U.value=d(e)),t&&(W.value=d(t))};T(M,e=>{P.getLocale()!==e&&P.setLocale(e),ie(q)}),T(()=>F.value.start,t=>{!e(t)&&I.value.compare(t)!==0&&(I.value=t.copy())}),T([()=>F.value.start,M,L],([t])=>{if(!e(t)){z.value={...u({value:t,formatter:P})};return}Object.values(z.value).every(e=>e!==null)&&(z.value={...l(L.value)})}),T([()=>F.value.end,M,L],([t])=>{if(!e(t)){B.value={...u({value:t,formatter:P})};return}Object.values(B.value).every(e=>e!==null)&&(B.value={...l(L.value)})});let ue=v(()=>(K.value===`start`?U.value:W.value).findIndex(e=>e.getAttribute(`data-soybean-date-field-segment`)===G.value?.getAttribute(`data-soybean-date-field-segment`))),J=(e,t)=>{let n=N.value===`rtl`?-1:1,r=t===`next`?n:-n,i=e===`start`?U.value:W.value,a=ue.value+r;a>=0&&a<i.length?i[a]?.focus():t===`next`&&e===`start`&&W.value.length>0?(K.value=`end`,W.value[0]?.focus()):t===`prev`&&e===`end`&&U.value.length>0&&(K.value=`start`,U.value[U.value.length-1]?.focus())},Y=v(()=>i(L.value)),X=v(()=>o(F.value.start,L.value)),Z=v(()=>o(F.value.end,L.value)),Q=v(()=>D.maxValue?o(D.maxValue,L.value):void 0),$=v(()=>D.minValue?o(D.minValue,L.value):void 0),de=e=>{e.key!==`ArrowLeft`&&e.key!==`ArrowRight`||(e.preventDefault(),J(K.value,e.key===`ArrowRight`?`next`:`prev`))};return ne({locale:M,dir:N,modelValue:F,placeholder:I,isDateUnavailable:D.isDateUnavailable,isInvalid:R,disabled:v(()=>D.disabled),readonly:v(()=>D.readonly),formatter:P,hourCycle:D.hourCycle,step:le,startSegmentValues:z,endSegmentValues:B,startSegmentContents:V,endSegmentContents:H,startInputType:Y,endInputType:Y,startInputValue:X,endInputValue:Z,inputMaxValue:Q,inputMinValue:$,startElements:U,endElements:W,focusedType:K,focusNext(e){J(e,`next`)},setFocusedElement(e,t){G.value=e,K.value=t}}),S(q),(e,t)=>(ae(),re(w(te),{ref:w(j),as:b.as,"as-child":b.asChild,class:x(w(k)),"data-disabled":b.disabled?``:void 0,"data-invalid":R.value?``:void 0,"data-readonly":b.readonly?``:void 0,dir:w(N),"data-slot":`root`,role:`group`,onKeydown:de},{default:se(()=>[oe(e.$slots,`default`,{endSegments:H.value,isInvalid:R.value,modelValue:w(F),startSegments:V.value}),y(w(g),{id:b.id,as:`input`,feature:`focusable`,type:Y.value,tabindex:`-1`,value:X.value,name:b.startName||b.name,disabled:b.disabled,required:b.required,max:Q.value,min:$.value,onFocus:t[0]||(t[0]=e=>U.value[0]?.focus())},null,8,[`id`,`type`,`value`,`name`,`disabled`,`required`,`max`,`min`]),y(w(g),{as:`input`,feature:`focusable`,type:Y.value,tabindex:`-1`,value:Z.value,name:b.endName,disabled:b.disabled,required:b.required,max:Q.value,min:$.value,onFocus:t[1]||(t[1]=e=>W.value[0]?.focus())},null,8,[`type`,`value`,`name`,`disabled`,`required`,`max`,`min`])]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-invalid`,`data-readonly`,`dir`]))}});export{E as default};
+import{isNullish as e}from"../../shared/guard.js";import{transformPropsToContext as t}from"../../shared/vue.js";import{getDefaultDate as n,hasTime as r,isBefore as i}from"../../date/comparators.js";import{useDateFormatter as a}from"../../date/formatter.js";import{getInputType as o,normalizeDateStep as s,normalizeHourCycle as ee,normalizeInputValue as c}from"../../date/utils.js";import{createContent as l,initializeSegmentValues as u,syncSegmentValues as d}from"../../date/parser.js";import{getSegmentElements as f}from"../../date/segment.js";import{useDirection as te,useLocale as ne}from"../config-provider/context.js";import{useLocaleMessages as re}from"../../locale/hooks.js";import"../../locale/index.js";import"../../date/index.js";import"../../shared/index.js";import{useControllableState as p}from"../../composables/use-controllable-state.js";import{useForwardElement as m}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as h}from"../primitive/primitive.js";import"../primitive/index.js";import g from"../visually-hidden/visually-hidden.js";import"../visually-hidden/index.js";import{provideDateRangeFieldRootContext as _,useDateRangeFieldUi as v}from"./context.js";import{computed as y,createBlock as b,createVNode as x,defineComponent as S,nextTick as ie,normalizeClass as ae,onMounted as C,openBlock as w,renderSlot as oe,shallowRef as T,unref as E,watch as D,withCtx as O}from"vue";const k=S({name:`DateRangeFieldRoot`,__name:`date-range-field-root`,props:{defaultValue:{default:void 0},modelValue:{},startName:{default:void 0},endName:{default:void 0},id:{},granularity:{default:void 0},hourCycle:{default:void 0},step:{default:void 0},hideTimeZone:{type:Boolean,default:!1},name:{},required:{type:Boolean},dir:{},locale:{},placeholder:{default:void 0},defaultPlaceholder:{default:void 0},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},maxValue:{},minValue:{},isDateUnavailable:{type:Function,default:void 0},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:placeholder`,`update:startValue`,`update:endValue`],setup(S,{emit:k}){let A=S,j=k,se=v(`root`),[M,ce]=m(),N=ne(()=>A.locale),P=te(()=>A.dir),F=re(),I=a(N.value,{hourCycle:ee(A.hourCycle)}),L=p(()=>A.modelValue,e=>{j(`update:modelValue`,e),j(`update:startValue`,e.start),j(`update:endValue`,e.end)},A.defaultValue??{}),R=n({defaultPlaceholder:A.placeholder,defaultValue:L.value.start,granularity:A.granularity,locale:A.locale}),z=p(()=>A.placeholder,e=>j(`update:placeholder`,e),A.defaultPlaceholder??R.copy()),B=y(()=>s(A.step)),V=y(()=>A.granularity?r(z.value)?A.granularity:`day`:r(z.value)?`minute`:`day`),H=y(()=>{let{start:e,end:t}=L.value;return!!(e&&t&&i(t,e)||e&&(A.isDateUnavailable?.(e)||A.minValue&&i(e,A.minValue)||A.maxValue&&i(A.maxValue,e))||t&&(A.isDateUnavailable?.(t)||A.minValue&&i(t,A.minValue)||A.maxValue&&i(A.maxValue,t)))}),U=T(L.value.start?{...d({value:L.value.start,formatter:I})}:{...u(V.value)}),W=T(L.value.end?{...d({value:L.value.end,formatter:I})}:{...u(V.value)}),le=y(()=>l({granularity:V.value,dateRef:z.value,formatter:I,hideTimeZone:A.hideTimeZone,hourCycle:A.hourCycle,segmentValues:U.value,locale:N,dateMessages:F.value.date}).arr),ue=y(()=>l({granularity:V.value,dateRef:z.value,formatter:I,hideTimeZone:A.hideTimeZone,hourCycle:A.hourCycle,segmentValues:W.value,locale:N,dateMessages:F.value.date}).arr),G=T([]),K=T([]),q=T(null),J=T(`start`),Y=()=>{if(!M.value)return;let e=M.value.querySelector(`[data-date-range-field-part="start"]`),t=M.value.querySelector(`[data-date-range-field-part="end"]`);e&&(G.value=f(e)),t&&(K.value=f(t))};D(N,e=>{I.getLocale()!==e&&I.setLocale(e),ie(Y)}),D(()=>L.value.start,t=>{!e(t)&&z.value.compare(t)!==0&&(z.value=t.copy())}),D([()=>L.value.start,N,V],([t])=>{if(!e(t)){U.value={...d({value:t,formatter:I})};return}Object.values(U.value).every(e=>e!==null)&&(U.value={...u(V.value)})}),D([()=>L.value.end,N,V],([t])=>{if(!e(t)){W.value={...d({value:t,formatter:I})};return}Object.values(W.value).every(e=>e!==null)&&(W.value={...u(V.value)})});let de=y(()=>(J.value===`start`?G.value:K.value).findIndex(e=>e.getAttribute(`data-soybean-date-field-segment`)===q.value?.getAttribute(`data-soybean-date-field-segment`))),X=(e,t)=>{let n=P.value===`rtl`?-1:1,r=t===`next`?n:-n,i=e===`start`?G.value:K.value,a=de.value+r;a>=0&&a<i.length?i[a]?.focus():t===`next`&&e===`start`&&K.value.length>0?(J.value=`end`,K.value[0]?.focus()):t===`prev`&&e===`end`&&G.value.length>0&&(J.value=`start`,G.value[G.value.length-1]?.focus())},Z=y(()=>o(V.value)),fe=y(()=>c(L.value.start,V.value)),pe=y(()=>c(L.value.end,V.value)),Q=y(()=>A.maxValue?c(A.maxValue,V.value):void 0),$=y(()=>A.minValue?c(A.minValue,V.value):void 0),me=e=>{e.key!==`ArrowLeft`&&e.key!==`ArrowRight`||(e.preventDefault(),X(J.value,e.key===`ArrowRight`?`next`:`prev`))};return _({...t(A,[`disabled`,`readonly`]),modelValue:L,placeholder:z,isInvalid:H,formatter:I,hourCycle:A.hourCycle,step:B,startSegmentValues:U,endSegmentValues:W,focusNext(e){X(e,`next`)},setFocusedElement(e,t){q.value=e,J.value=t}}),C(Y),(e,t)=>(w(),b(E(h),{ref:E(ce),as:S.as,"as-child":S.asChild,"data-soybean-date-range-field-root":``,class:ae(E(se)),"data-disabled":S.disabled?``:void 0,"data-invalid":H.value?``:void 0,"data-readonly":S.readonly?``:void 0,dir:E(P),role:`group`,onKeydown:me},{default:O(()=>[oe(e.$slots,`default`,{endSegments:ue.value,isInvalid:H.value,modelValue:E(L),startSegments:le.value}),x(E(g),{id:S.id,as:`input`,feature:`focusable`,type:Z.value,tabindex:`-1`,value:fe.value,name:S.startName||S.name,disabled:S.disabled,required:S.required,max:Q.value,min:$.value,onFocus:t[0]||(t[0]=e=>G.value[0]?.focus())},null,8,[`id`,`type`,`value`,`name`,`disabled`,`required`,`max`,`min`]),x(E(g),{as:`input`,feature:`focusable`,type:Z.value,tabindex:`-1`,value:pe.value,name:S.endName,disabled:S.disabled,required:S.required,max:Q.value,min:$.value,onFocus:t[1]||(t[1]=e=>K.value[0]?.focus())},null,8,[`type`,`value`,`name`,`disabled`,`required`,`max`,`min`])]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-invalid`,`data-readonly`,`dir`]))}});export{k as default};

package/dist/components/date-range-field/date-range-field-root.vue.d.ts

@@ -1,46 +1,31 @@
-import { DateRange, DateStep, DateValue, Granularity, Matcher, SegmentPart } from "../../date/types.js";
-import { DateRangeFieldRootProps } from "./types.js";
+import { DateMatcher, DateRange, DateStep, Granularity } from "../../date/types.js";
+import { DateRangeFieldRootProps, DateRangeFieldRootSlots } from "./types.js";
 import * as _$vue from "vue";
+import * as _$_internationalized_date0 from "@internationalized/date";
 
 //#region src/components/date-range-field/date-range-field-root.vue.d.ts
-type __VLS_Slots = {
-  default?: (props: {
-    modelValue: {
-      start?: DateValue;
-      end?: DateValue;
-    };
-    startSegments: {
-      part: SegmentPart;
-      value: string;
-    }[];
-    endSegments: {
-      part: SegmentPart;
-      value: string;
-    }[];
-    isInvalid: boolean;
-  }) => any;
-};
+type __VLS_Slots = DateRangeFieldRootSlots;
 declare const __VLS_base: _$vue.DefineComponent<DateRangeFieldRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (range: DateRange) => any;
-  "update:placeholder": (date: DateValue) => any;
-  "update:startValue": (date: DateValue | undefined) => any;
-  "update:endValue": (date: DateValue | undefined) => any;
+  "update:placeholder": (date: _$_internationalized_date0.DateValue) => any;
+  "update:startValue": (date: _$_internationalized_date0.DateValue | undefined) => any;
+  "update:endValue": (date: _$_internationalized_date0.DateValue | undefined) => any;
 }, string, _$vue.PublicProps, Readonly<DateRangeFieldRootProps> & Readonly<{
   "onUpdate:modelValue"?: ((range: DateRange) => any) | undefined;
-  "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
-  "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
-  "onUpdate:endValue"?: ((date: DateValue | undefined) => any) | undefined;
+  "onUpdate:placeholder"?: ((date: _$_internationalized_date0.DateValue) => any) | undefined;
+  "onUpdate:startValue"?: ((date: _$_internationalized_date0.DateValue | undefined) => any) | undefined;
+  "onUpdate:endValue"?: ((date: _$_internationalized_date0.DateValue | undefined) => any) | undefined;
 }>, {
-  placeholder: DateValue;
+  placeholder: _$_internationalized_date0.DateValue;
   disabled: boolean;
   step: DateStep;
   defaultValue: DateRange;
-  defaultPlaceholder: DateValue;
-  hourCycle: 12 | 24;
+  defaultPlaceholder: _$_internationalized_date0.DateValue;
   granularity: Granularity;
-  hideTimeZone: boolean;
+  isDateUnavailable: DateMatcher;
   readonly: boolean;
-  isDateUnavailable: Matcher;
+  hourCycle: 12 | 24;
+  hideTimeZone: boolean;
   startName: string;
   endName: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

package/dist/components/date-range-field/index.d.ts

@@ -1,6 +1,6 @@
-import { DateRangeFieldCompactEmits, DateRangeFieldCompactProps, DateRangeFieldCompactSlots, DateRangeFieldInputProps, DateRangeFieldRootContext, DateRangeFieldRootEmits, DateRangeFieldRootProps, DateRangeFieldSegment, DateRangeFieldUi, DateRangeFieldUiSlot } from "./types.js";
+import { DateRangeFieldCompactEmits, DateRangeFieldCompactProps, DateRangeFieldCompactSlots, DateRangeFieldInputProps, DateRangeFieldRootEmits, DateRangeFieldRootProps, DateRangeFieldRootSlots, DateRangeFieldSlotProps, DateRangeFieldUi, DateRangeFieldUiSlot } from "./types.js";
 import { _default } from "./date-range-field-compact.vue.js";
-import { _default as _default$1 } from "./date-range-field-input.vue.js";
 import { _default as _default$2 } from "./date-range-field-root.vue.js";
+import { _default as _default$1 } from "./date-range-field-input.vue.js";
 import { provideDateRangeFieldUi } from "./context.js";
-export { _default as DateRangeFieldCompact, type DateRangeFieldCompactEmits, type DateRangeFieldCompactProps, type DateRangeFieldCompactSlots, _default$1 as DateRangeFieldInput, type DateRangeFieldInputProps, _default$2 as DateRangeFieldRoot, type DateRangeFieldRootContext, type DateRangeFieldRootEmits, type DateRangeFieldRootProps, type DateRangeFieldSegment, type DateRangeFieldUi, type DateRangeFieldUiSlot, provideDateRangeFieldUi };
+export { _default as DateRangeFieldCompact, type DateRangeFieldCompactEmits, type DateRangeFieldCompactProps, type DateRangeFieldCompactSlots, _default$1 as DateRangeFieldInput, type DateRangeFieldInputProps, _default$2 as DateRangeFieldRoot, type DateRangeFieldRootEmits, type DateRangeFieldRootProps, type DateRangeFieldRootSlots, type DateRangeFieldSlotProps, type DateRangeFieldUi, type DateRangeFieldUiSlot, provideDateRangeFieldUi };