@soybeanjs/headless 0.18.0 → 0.19.0

package/dist/components/textarea/types.d.ts

@@ -1,6 +1,8 @@
 import { UiClass } from "../../types/common.js";
 import { FormFieldCommonProps } from "../../types/component.js";
-import { ComputedRef, HTMLAttributes, ShallowRef, TextareaHTMLAttributes } from "vue";
+import { BaseProps } from "../../types/vue.js";
+import { ButtonProps } from "../button/types.js";
+import { ComputedRef, ShallowRef, TextareaHTMLAttributes } from "vue";
 
 //#region src/components/textarea/types.d.ts
 /**
@@ -34,7 +36,7 @@ interface TextareaBaseProps {
 /**
  * Properties for the TextareaRoot component.
  */
-interface TextareaRootProps extends TextareaBaseProps, FormFieldCommonProps, /** @vue-ignore */HTMLAttributes {
+interface TextareaRootProps extends TextareaBaseProps, FormFieldCommonProps, BaseProps {
   /** The default value of the textarea */
   defaultValue?: string;
   /** The controlled value of the textarea */
@@ -54,18 +56,106 @@ type TextareaRootEmits = {
 /**
  * Properties for the TextareaControl component.
  */
-interface TextareaControlProps extends /** @vue-ignore */TextareaHTMLAttributes {}
+interface TextareaControlProps extends BaseProps<TextareaHTMLAttributes> {}
+/**
+ * Properties for the TextareaClear component.
+ */
+interface TextareaClearProps extends ButtonProps {}
+/**
+ * Events for the TextareaClear component.
+ */
+type TextareaClearEmits = {
+  /**
+   * Emitted when the clear button is clicked.
+   */
+  clear: [event: PointerEvent];
+};
 /**
  * Properties for the TextareaCounter component.
  */
-interface TextareaCounterProps extends /** @vue-ignore */HTMLAttributes {}
+interface TextareaCounterProps extends BaseProps {}
 /**
  * Available UI slots for the Textarea component.
  */
-type TextareaUiSlot = 'root' | 'control' | 'counter';
+type TextareaUiSlot = 'root' | 'control' | 'counter' | 'clear';
 /**
  * UI class overrides for the Textarea component.
  */
 type TextareaUi = UiClass<TextareaUiSlot>;
+/**
+ * Slot properties for the TextareaCompact component.
+ */
+interface TextareaCompactSlotProps {
+  /**
+   * Current model value.
+   */
+  modelValue?: string;
+  /**
+   * Clear handler.
+   */
+  clear: () => void;
+  /**
+   * Current character count.
+   */
+  count: number;
+  /**
+   * Current maxlength.
+   */
+  maxlength?: number;
+}
+/**
+ * Properties for the TextareaCompact component.
+ */
+interface TextareaCompactProps extends TextareaRootProps {
+  /**
+   * The function to set the textarea element.
+   */
+  textareaRef?: (el: HTMLTextAreaElement) => void;
+  /**
+   * Whether to show the clear trigger.
+   *
+   * @defaultValue false
+   */
+  clearable?: boolean;
+  /**
+   * Whether to show the counter.
+   *
+   * @defaultValue false
+   */
+  showCounter?: boolean;
+  /**
+   * Properties forwarded to the control element.
+   */
+  controlProps?: TextareaControlProps;
+  /**
+   * Properties forwarded to the clear element.
+   */
+  clearProps?: TextareaClearProps;
+  /**
+   * Properties forwarded to the counter element.
+   */
+  counterProps?: TextareaCounterProps;
+}
+/**
+ * Events for the TextareaCompact component.
+ */
+type TextareaCompactEmits = TextareaRootEmits & TextareaClearEmits;
+/**
+ * Slots for the TextareaCompact component.
+ */
+type TextareaCompactSlots = {
+  /**
+   * Custom content for the clear slot.
+   */
+  clear?: (props: TextareaCompactSlotProps) => any;
+  /**
+   * Custom content for the counter slot.
+   */
+  counter?: (props: TextareaCompactSlotProps) => any;
+  /**
+   * Custom content for the footer slot.
+   */
+  footer?: (props: TextareaCompactSlotProps) => any;
+};
 //#endregion
-export { TextareaControlProps, TextareaCounterProps, TextareaRootEmits, TextareaRootProps, TextareaUi, TextareaUiSlot };
+export { TextareaClearEmits, TextareaClearProps, TextareaCompactEmits, TextareaCompactProps, TextareaCompactSlotProps, TextareaCompactSlots, TextareaControlProps, TextareaCounterProps, TextareaRootEmits, TextareaRootProps, TextareaUi, TextareaUiSlot };

package/dist/components/time-field/index.d.ts

@@ -1,5 +1,7 @@
-import { TimeFieldInputProps, TimeFieldRootContext, TimeFieldRootEmits, TimeFieldRootProps, TimeFieldUi, TimeFieldUiSlot } from "./types.js";
-import { _default as _default$1 } from "./time-field-root.vue.js";
-import { _default } from "./time-field-input.vue.js";
+import { DateFieldInputProps } from "../date-field/types.js";
+import { TimeFieldCompactEmits, TimeFieldCompactProps, TimeFieldRootEmits, TimeFieldRootProps, TimeFieldRootSlotProps, TimeFieldRootSlots, TimeFieldUi, TimeFieldUiSlot } from "./types.js";
+import { _default } from "./time-field-compact.vue.js";
+import { _default as _default$2 } from "./time-field-root.vue.js";
+import { _default as _default$1 } from "./time-field-input.vue.js";
 import { provideTimeFieldUi } from "./context.js";
-export { _default as TimeFieldInput, type TimeFieldInputProps, _default$1 as TimeFieldRoot, type TimeFieldRootContext, type TimeFieldRootEmits, type TimeFieldRootProps, type TimeFieldUi, type TimeFieldUiSlot, provideTimeFieldUi };
+export { _default as TimeFieldCompact, type TimeFieldCompactEmits, type TimeFieldCompactProps, _default$1 as TimeFieldInput, type DateFieldInputProps as TimeFieldInputProps, _default$2 as TimeFieldRoot, type TimeFieldRootEmits, type TimeFieldRootProps, type TimeFieldRootSlotProps, type TimeFieldRootSlots, type TimeFieldUi, type TimeFieldUiSlot, provideTimeFieldUi };

package/dist/components/time-field/index.js

@@ -1 +1 @@
-import{provideTimeFieldUi as e}from"./context.js";import t from"./time-field-root.js";import n from"./time-field-input.js";export{n as TimeFieldInput,t as TimeFieldRoot,e as provideTimeFieldUi};
+import{provideTimeFieldUi as e}from"./context.js";import t from"./time-field-input.js";import n from"./time-field-root.js";import r from"./time-field-compact.js";export{r as TimeFieldCompact,t as TimeFieldInput,n as TimeFieldRoot,e as provideTimeFieldUi};

package/dist/components/time-field/time-field-compact.js

@@ -0,0 +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 n from"./time-field-input.js";import r from"./time-field-root.js";import{Fragment as i,createBlock as a,createElementBlock as o,createTextVNode as s,defineComponent as c,mergeProps as l,openBlock as u,renderList as d,toDisplayString as f,toHandlers as p,unref as m,withCtx as h}from"vue";const g=c({name:`TimeFieldCompact`,__name:`time-field-compact`,props:{inputProps:{},defaultValue:{},modelValue:{},defaultPlaceholder:{},placeholder:{},granularity:{},maxValue:{},minValue:{},isTimeUnavailable:{type:Function},id:{},hourCycle:{},step:{},hideTimeZone:{type:Boolean},name:{},required:{type:Boolean},dir:{},locale:{},disabled:{type:Boolean},readonly:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:placeholder`],setup(c,{emit:g}){let _=c,v=g,y=t(_,[`inputProps`]),b=e(v);return(e,t)=>(u(),a(r,l(m(y),p(m(b))),{default:h(e=>[(u(!0),o(i,null,d(e.segments,(e,t)=>(u(),a(n,l({key:`${e.part}-${t}`,part:e.part},{ref_for:!0},c.inputProps),{default:h(()=>[s(f(e.value),1)]),_:2},1040,[`part`]))),128))]),_:1},16))}});export{g as default};

package/dist/components/time-field/time-field-compact.vue.d.ts

@@ -0,0 +1,15 @@
+import { TimeValue } from "../../date/types.js";
+import { TimeFieldCompactProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-field/time-field-compact.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<TimeFieldCompactProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (time: TimeValue | undefined) => any;
+  "update:placeholder": (time: TimeValue) => any;
+}, string, _$vue.PublicProps, Readonly<TimeFieldCompactProps> & Readonly<{
+  "onUpdate:modelValue"?: ((time: TimeValue | undefined) => any) | undefined;
+  "onUpdate:placeholder"?: ((time: TimeValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };

package/dist/components/time-field/time-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{useTimeFieldRootContext as n,useTimeFieldUi 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:`TimeFieldInput`,__name:`time-field-input`,props:{part:{},asChild:{type:Boolean},as:{default:`span`}},setup(o){let m=o,h=r(`input`),{disabled:g,readonly:_,placeholder:v,hourCycle:y,step:b,segmentValues:x,formatter:S,focusNext:C,modelValue:w,isInvalid:T,setFocusedElement:E}=n(`TimeFieldInput`),D=l(!0),O=l(!1),k=i(()=>!!g.value),A=i(()=>!!_.value),{attributes:j,handleSegmentClick:M,handleSegmentFocusOut:N,handleSegmentKeydown:P}=e({hasLeftFocus:D,lastKeyZero:O,placeholder:v,hourCycle:y,step:b,segmentValues:x,formatter:S,part:m.part,disabled:k,readonly:A,focusNext:C,modelValue:w}),F=i(()=>k.value||A.value?!1:m.part!==`literal`&&m.part!==`timeZoneName`),I=i(()=>m.part===`literal`?{}:{mousedown:M,keydown:P,focusout:()=>{D.value=!0,N()},focusin:e=>{E(e.target)}});return(e,n)=>(c(),a(f(t),s({as:o.as,"as-child":o.asChild},f(j),{"aria-disabled":k.value?!0:void 0,"aria-invalid":f(T)?!0:void 0,"aria-readonly":A.value||o.part===`timeZoneName`?!0:void 0,class:f(h),contenteditable:F.value,"data-disabled":k.value?``:void 0,"data-invalid":f(T)?``:void 0,"data-readonly":A.value||o.part===`timeZoneName`?``:void 0,"data-segment":o.part,"data-soybean-date-field-segment":o.part,"data-slot":`input`},d(I.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{useTimeFieldRootContext as n,useTimeFieldUi 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:`TimeFieldInput`,__name:`time-field-input`,props:{part:{},asChild:{type:Boolean},as:{default:`span`}},setup(o){let m=o,h=r(`input`),{disabled:g,readonly:_,placeholder:v,hourCycle:y,step:b,segmentValues:x,formatter:S,focusNext:C,modelValue:w,isInvalid:T,setFocusedElement:E}=n(`TimeFieldInput`),D=l(!0),{attributes:O,handleSegmentClick:k,handleSegmentFocusOut:A,handleSegmentKeydown:j}=e({hasLeftFocus:D,lastKeyZero:l(!1),placeholder:v,hourCycle:y,step:b,segmentValues:x,formatter:S,part:m.part,disabled:g,readonly:_,focusNext:C,modelValue:w}),M=i(()=>g.value||_.value?!1:m.part!==`literal`&&m.part!==`timeZoneName`),N=i(()=>m.part===`literal`?{}:{mousedown:k,keydown:j,focusout:()=>{D.value=!0,A()},focusin:e=>{E(e.target)}});return(e,n)=>(c(),a(f(t),s(f(O),{as:o.as,"as-child":o.asChild,"data-soybean-time-field-input":``,"data-soybean-date-field-segment":o.part,class:f(h),"aria-disabled":f(g)?!0:void 0,"aria-invalid":f(T)?!0:void 0,"aria-readonly":f(_)||o.part===`timeZoneName`?!0:void 0,contenteditable:M.value,"data-disabled":f(g)?``:void 0,"data-invalid":f(T)?``:void 0,"data-readonly":f(_)||o.part===`timeZoneName`?``:void 0,"data-segment":o.part},d(N.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/time-field/time-field-input.vue.d.ts

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

package/dist/components/time-field/time-field-root.js

@@ -1 +1 @@
-import{isNullish as e}from"../../shared/guard.js";import{getDefaultTime as t,isBefore as n,isEqualValue as ee}from"../../date/comparators.js";import{getTimeInputType as r,normalizeDateStep as i,normalizeHourCycle as te,normalizeTimeInputValue as a}from"../../date/utils.js";import{useDateFormatter as ne}from"../../date/formatter.js";import{createContent as re,syncTimeSegmentValues as o}from"../../date/parser.js";import{getSegmentElements as s}from"../../date/segment.js";import"../../date/index.js";import"../../shared/index.js";import{useControllableState as c}from"../../composables/use-controllable-state.js";import{useForwardElement as l}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{useDirection as u,useLocale as d}from"../config-provider/context.js";import{Primitive as f}from"../primitive/primitive.js";import"../primitive/index.js";import p from"../visually-hidden/visually-hidden.js";import"../visually-hidden/index.js";import{provideTimeFieldRootContext as m,useTimeFieldUi as h}from"./context.js";import{computed as g,createBlock as _,createVNode as v,defineComponent as y,nextTick as b,normalizeClass as x,onMounted as S,openBlock as C,renderSlot as w,shallowRef as T,unref as E,watch as D,withCtx as ie}from"vue";const O=y({name:`TimeFieldRoot`,__name:`time-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},isTimeUnavailable:{type:Function,default:void 0},id:{},dir:{},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:placeholder`],setup(y,{emit:O}){let k=y,A=O,j=h(`root`),[M,N]=l(),P=d(()=>k.locale),F=u(()=>k.dir),I=ne(P.value,{hourCycle:te(k.hourCycle)}),L=c(()=>k.modelValue,e=>A(`update:modelValue`,e),k.defaultValue),R=t({defaultPlaceholder:k.placeholder,defaultValue:L.value}),z=c(()=>k.placeholder,e=>A(`update:placeholder`,e),k.defaultPlaceholder??R.copy()),B=g(()=>k.granularity??`minute`),V=g(()=>i(k)),H=g(()=>L.value?!!(k.isTimeUnavailable?.(L.value)||k.minValue&&n(L.value,k.minValue)||k.maxValue&&n(k.maxValue,L.value)):!1),U=T(L.value?{...o({value:L.value,formatter:I})}:{...o({value:z.value,formatter:I})}),W=g(()=>re({granularity:B.value,dateRef:z.value,formatter:I,hideTimeZone:k.hideTimeZone,hourCycle:k.hourCycle,segmentValues:U.value,locale:P,isTimeValue:!0}).arr),G=T([]),K=T(null),q=()=>{M.value&&(G.value=s(M.value))};D(P,e=>{I.getLocale()!==e&&I.setLocale(e),b(q)}),D(L,t=>{!e(t)&&!ee(z.value,t)&&(z.value=t.copy())}),D([L,P,B],([t])=>{if(!e(t)){U.value={...o({value:t,formatter:I})};return}U.value={...o({value:z.value,formatter:I})}});let J=g(()=>G.value.findIndex(e=>e.getAttribute(`data-soybean-date-field-segment`)===K.value?.getAttribute(`data-soybean-date-field-segment`))),Y=e=>{let t=F.value===`rtl`?-1:1,n=e===`next`?t:-t;G.value[J.value+n]?.focus()},X=g(()=>r(B.value)),Z=g(()=>a(L.value,B.value)),Q=g(()=>k.maxValue?a(k.maxValue,B.value):void 0),$=g(()=>k.minValue?a(k.minValue,B.value):void 0),ae=e=>{e.key!==`ArrowLeft`&&e.key!==`ArrowRight`||(e.preventDefault(),Y(e.key===`ArrowRight`?`next`:`prev`))};return m({locale:P,dir:F,modelValue:L,placeholder:z,isTimeUnavailable:k.isTimeUnavailable,isInvalid:H,disabled:g(()=>k.disabled),readonly:g(()=>k.readonly),formatter:I,hourCycle:k.hourCycle,step:V,segmentValues:U,segmentContents:W,inputType:X,inputValue:Z,inputMaxValue:Q,inputMinValue:$,elements:G,focusNext(){Y(`next`)},setFocusedElement(e){K.value=e}}),S(q),(e,t)=>(C(),_(E(f),{ref:E(N),as:y.as,"as-child":y.asChild,class:x(E(j)),"data-disabled":y.disabled?``:void 0,"data-invalid":H.value?``:void 0,"data-readonly":y.readonly?``:void 0,dir:E(F),"data-slot":`root`,role:`group`,onKeydown:ae},{default:ie(()=>[w(e.$slots,`default`,{isInvalid:H.value,modelValue:E(L),segments:W.value}),v(E(p),{id:y.id,as:`input`,feature:`focusable`,type:X.value,tabindex:`-1`,value:Z.value,name:y.name,disabled:y.disabled,required:y.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`])]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-invalid`,`data-readonly`,`dir`]))}});export{O as default};
+import{isNullish as e}from"../../shared/guard.js";import{getDefaultTime as t,isBefore as n,isEqualValue as r}from"../../date/comparators.js";import{useDateFormatter as i}from"../../date/formatter.js";import{getTimeInputType as a,normalizeDateStep as o,normalizeHourCycle as s,normalizeTimeInputValue as c}from"../../date/utils.js";import{createContent as l,syncTimeSegmentValues as u}from"../../date/parser.js";import{getSegmentElements as d}from"../../date/segment.js";import{useDirection as f,useLocale as p}from"../config-provider/context.js";import{useLocaleMessages as m}from"../../locale/hooks.js";import"../../locale/index.js";import"../../date/index.js";import"../../shared/index.js";import{useControllableState as h}from"../../composables/use-controllable-state.js";import{useForwardElement as g}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as _}from"../primitive/primitive.js";import"../primitive/index.js";import v from"../visually-hidden/visually-hidden.js";import"../visually-hidden/index.js";import{provideTimeFieldRootContext as y,useTimeFieldUi as b}from"./context.js";import{computed as x,createBlock as S,createVNode as C,defineComponent as w,nextTick as T,normalizeClass as E,onMounted as D,openBlock as ee,renderSlot as te,shallowRef as O,unref as k,watch as A,withCtx as j}from"vue";const M=w({name:`TimeFieldRoot`,__name:`time-field-root`,props:{defaultValue:{default:void 0},modelValue:{},defaultPlaceholder:{default:void 0},placeholder:{default:void 0},granularity:{default:void 0},maxValue:{},minValue:{},isTimeUnavailable:{type:Function,default:void 0},id:{},hourCycle:{default:void 0},step:{default:void 0},hideTimeZone:{type:Boolean,default:!1},name:{},required:{type:Boolean},dir:{},locale:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:placeholder`],setup(w,{emit:M}){let N=w,P=M,F=b(`root`),[I,L]=g(),R=p(()=>N.locale),z=f(()=>N.dir),B=m(),V=i(R.value,{hourCycle:s(N.hourCycle)}),H=h(()=>N.modelValue,e=>P(`update:modelValue`,e),N.defaultValue,!0),ne=t({defaultPlaceholder:N.placeholder,defaultValue:H.value}),U=h(()=>N.placeholder,e=>P(`update:placeholder`,e),N.defaultPlaceholder??ne.copy()),W=x(()=>N.granularity??`minute`),G=x(()=>o(N.step)),K=x(()=>H.value?!!(N.isTimeUnavailable?.(H.value)||N.minValue&&n(H.value,N.minValue)||N.maxValue&&n(N.maxValue,H.value)):!1),q=O(H.value?{...u({value:H.value,formatter:V})}:{...u({value:U.value,formatter:V})}),J=x(()=>l({granularity:W.value,dateRef:U.value,formatter:V,hideTimeZone:N.hideTimeZone,hourCycle:N.hourCycle,segmentValues:q.value,locale:R,isTimeValue:!0,dateMessages:B.value.date}).arr),Y=O([]),X=O(null),Z=()=>{I.value&&(Y.value=d(I.value))};A(R,e=>{V.getLocale()!==e&&V.setLocale(e),T(Z)}),A(H,t=>{!e(t)&&!r(U.value,t)&&(U.value=t.copy())}),A([H,R,W],([t])=>{if(!e(t)){q.value={...u({value:t,formatter:V})};return}q.value={...u({value:U.value,formatter:V})}});let re=x(()=>Y.value.findIndex(e=>e.getAttribute(`data-soybean-date-field-segment`)===X.value?.getAttribute(`data-soybean-date-field-segment`))),Q=e=>{let t=z.value===`rtl`?-1:1,n=e===`next`?t:-t;Y.value[re.value+n]?.focus()},$=x(()=>a(W.value)),ie=x(()=>c(H.value,W.value)),ae=x(()=>N.maxValue?c(N.maxValue,W.value):void 0),oe=x(()=>N.minValue?c(N.minValue,W.value):void 0),se=e=>{e.key!==`ArrowLeft`&&e.key!==`ArrowRight`||(e.preventDefault(),Q(e.key===`ArrowRight`?`next`:`prev`))};return y({modelValue:H,placeholder:U,isTimeUnavailable:N.isTimeUnavailable,isInvalid:K,disabled:x(()=>N.disabled),readonly:x(()=>N.readonly),formatter:V,hourCycle:N.hourCycle,step:G,segmentValues:q,inputType:$,focusNext(){Q(`next`)},setFocusedElement(e){X.value=e}}),D(Z),(e,t)=>(ee(),S(k(_),{ref:k(L),as:w.as,"as-child":w.asChild,"data-soybean-time-field-root":``,class:E(k(F)),"data-disabled":w.disabled?``:void 0,"data-invalid":K.value?``:void 0,"data-readonly":w.readonly?``:void 0,dir:k(z),role:`group`,onKeydown:se},{default:j(()=>[te(e.$slots,`default`,{isInvalid:K.value,modelValue:k(H),segments:J.value}),C(k(v),{id:w.id,as:`input`,feature:`focusable`,type:$.value,tabindex:`-1`,value:ie.value,name:w.name,disabled:w.disabled,required:w.required,max:ae.value,min:oe.value,onFocus:t[0]||(t[0]=e=>Y.value[0]?.focus())},null,8,[`id`,`type`,`value`,`name`,`disabled`,`required`,`max`,`min`])]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-invalid`,`data-readonly`,`dir`]))}});export{M as default};

package/dist/components/time-field/time-field-root.vue.d.ts

@@ -1,19 +1,9 @@
-import { TimeValue } from "../../date/comparators.js";
-import { DateStep, SegmentPart, TimeGranularity, TimeMatcher } from "../../date/types.js";
-import { TimeFieldRootProps } from "./types.js";
+import { DateStep, TimeGranularity, TimeMatcher, TimeValue } from "../../date/types.js";
+import { TimeFieldRootProps, TimeFieldRootSlots } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/time-field/time-field-root.vue.d.ts
-type __VLS_Slots = {
-  default?: (props: {
-    modelValue: TimeValue | undefined;
-    segments: {
-      part: SegmentPart;
-      value: string;
-    }[];
-    isInvalid: boolean;
-  }) => any;
-};
+type __VLS_Slots = TimeFieldRootSlots;
 declare const __VLS_base: _$vue.DefineComponent<TimeFieldRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (time: TimeValue | undefined) => any;
   "update:placeholder": (time: TimeValue) => any;
@@ -26,10 +16,10 @@ declare const __VLS_base: _$vue.DefineComponent<TimeFieldRootProps, {}, {}, {},
   step: DateStep;
   defaultValue: TimeValue;
   defaultPlaceholder: TimeValue;
-  hourCycle: 12 | 24;
   granularity: TimeGranularity;
-  hideTimeZone: boolean;
   readonly: boolean;
+  hourCycle: 12 | 24;
+  hideTimeZone: boolean;
   isTimeUnavailable: TimeMatcher;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/time-field/types.d.ts

@@ -1,49 +1,33 @@
-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 { TimeValue } from "../../date/comparators.js";
-import { DateStep, HourCycle, SegmentPart, SegmentValueObj, TimeGranularity, TimeInputType, TimeMatcher } from "../../date/types.js";
-import { Formatter } from "../../date/formatter.js";
-import { ComputedRef, HTMLAttributes, ShallowRef } from "vue";
+import { UiClass } from "../../types/common.js";
+import { TimeGranularity, TimeMatcher, TimeValue } from "../../date/types.js";
+import { DateFieldInputProps, DateFieldRootProps, DateFieldSegment } from "../date-field/types.js";
+import { ComputedRef, ShallowRef } from "vue";
 
 //#region src/components/time-field/types.d.ts
 /**
  * Properties for the TimeFieldRoot component.
  */
-interface TimeFieldRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */Omit<HTMLAttributes, 'placeholder'> {
+interface TimeFieldRootProps extends Omit<DateFieldRootProps, 'modelValue' | 'defaultValue' | 'placeholder' | 'defaultPlaceholder' | 'granularity' | 'maxValue' | 'minValue' | 'isDateUnavailable'> {
   /**
-   * Default value.
+   * Default value for the time field.
    */
   defaultValue?: TimeValue;
-  /**
-   * Default placeholder.
-   */
-  defaultPlaceholder?: TimeValue;
-  /**
-   * Placeholder.
-   */
-  placeholder?: TimeValue;
   /**
    * Current model value.
    */
   modelValue?: TimeValue;
   /**
-   * Hour cycle.
+   * Default placeholder.
    */
-  hourCycle?: HourCycle;
+  defaultPlaceholder?: TimeValue;
   /**
-   * Step.
+   * Placeholder.
    */
-  step?: DateStep;
+  placeholder?: TimeValue;
   /**
    * Granularity.
    */
   granularity?: TimeGranularity;
-  /**
-   * Whether hide time zone.
-   */
-  hideTimeZone?: boolean;
   /**
    * Max value.
    */
@@ -52,30 +36,10 @@ interface TimeFieldRootProps extends PrimitiveProps, FormFieldCommonProps, /** @
    * Min value.
    */
   minValue?: TimeValue;
-  /**
-   * Locale.
-   */
-  locale?: string;
-  /**
-   * Whether the component is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Whether the component is readonly.
-   */
-  readonly?: boolean;
   /**
    * Whether the time is unavailable.
    */
   isTimeUnavailable?: TimeMatcher;
-  /**
-   * Id.
-   */
-  id?: string;
-  /**
-   * Reading direction of the component.
-   */
-  dir?: Direction;
 }
 /**
  * Events for the TimeFieldRoot component.
@@ -91,104 +55,41 @@ type TimeFieldRootEmits = {
   'update:placeholder': [time: TimeValue];
 };
 /**
- * Properties for the TimeFieldInput component.
+ * Slot properties for the TimeFieldRoot component.
  */
-interface TimeFieldInputProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {
+interface TimeFieldRootSlotProps {
   /**
-   * Part.
+   * Current model value.
    */
-  part: SegmentPart;
-}
-/**
- * Type information for TimeFieldSegment.
- */
-interface TimeFieldSegment {
+  modelValue: TimeValue | undefined;
   /**
-   * Part.
+   * Segments used by the default slot.
    */
-  part: SegmentPart;
+  segments: DateFieldSegment[];
   /**
-   * Value associated with the current item.
+   * Whether the current value is invalid.
    */
-  value: string;
+  isInvalid: boolean;
 }
 /**
- * Context for the TimeFieldRoot component.
+ * Slots for the TimeFieldRoot component.
  */
-interface TimeFieldRootContext extends PropsToContext<TimeFieldRootProps, 'disabled' | 'readonly'> {
-  /**
-   * Locale used by the component context.
-   */
-  locale: ComputedRef<string>;
-  /**
-   * Reading direction of the component.
-   */
-  dir: ComputedRef<Direction>;
-  /**
-   * Current model value.
-   */
-  modelValue: ShallowRef<TimeValue | undefined>;
-  /**
-   * Placeholder used by the component context.
-   */
-  placeholder: ShallowRef<TimeValue>;
-  /**
-   * Whether the time is unavailable.
-   */
-  isTimeUnavailable?: TimeMatcher;
-  /**
-   * 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>;
-  /**
-   * Segment values used by the component context.
-   */
-  segmentValues: ShallowRef<SegmentValueObj>;
-  /**
-   * Segment contents used by the component context.
-   */
-  segmentContents: ComputedRef<TimeFieldSegment[]>;
-  /**
-   * Input type used by the component context.
-   */
-  inputType: ComputedRef<TimeInputType>;
-  /**
-   * Input value used by the component context.
-   */
-  inputValue: ComputedRef<string>;
-  /**
-   * Input max value used by the component context.
-   */
-  inputMaxValue: ComputedRef<string | undefined>;
-  /**
-   * Input min value used by the component context.
-   */
-  inputMinValue: ComputedRef<string | undefined>;
-  /**
-   * Elements used by the component context.
-   */
-  elements: ShallowRef<HTMLElement[]>;
-  /**
-   * Focus next used by the component context.
-   */
-  focusNext: () => void;
+type TimeFieldRootSlots = {
+  default?: (props: TimeFieldRootSlotProps) => any;
+};
+/**
+ * Properties for the time field compact component.
+ */
+interface TimeFieldCompactProps extends TimeFieldRootProps {
   /**
-   * Set focused element used by the component context.
+   * Properties forwarded to the input element.
    */
-  setFocusedElement: (el: HTMLElement) => void;
+  inputProps?: DateFieldInputProps;
 }
+/**
+ * Events for the time field compact component.
+ */
+type TimeFieldCompactEmits = TimeFieldRootEmits;
 /**
  * Available UI slots for the TimeField component.
  */
@@ -198,4 +99,4 @@ type TimeFieldUiSlot = 'root' | 'input';
  */
 type TimeFieldUi = UiClass<TimeFieldUiSlot>;
 //#endregion
-export { TimeFieldInputProps, TimeFieldRootContext, TimeFieldRootEmits, TimeFieldRootProps, TimeFieldUi, TimeFieldUiSlot };
+export { TimeFieldCompactEmits, TimeFieldCompactProps, TimeFieldRootEmits, TimeFieldRootProps, TimeFieldRootSlotProps, TimeFieldRootSlots, TimeFieldUi, TimeFieldUiSlot };

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

@@ -1,6 +1,6 @@
-import { TimeRangeFieldCompactEmits, TimeRangeFieldCompactProps, TimeRangeFieldCompactSlots, TimeRangeFieldInputProps, TimeRangeFieldRootContext, TimeRangeFieldRootEmits, TimeRangeFieldRootProps, TimeRangeFieldSegment, TimeRangeFieldUi, TimeRangeFieldUiSlot } from "./types.js";
+import { TimeRangeFieldCompactEmits, TimeRangeFieldCompactProps, TimeRangeFieldCompactSlots, TimeRangeFieldInputProps, TimeRangeFieldRootEmits, TimeRangeFieldRootProps, TimeRangeFieldRootSlots, TimeRangeFieldSlotProps, TimeRangeFieldUi, TimeRangeFieldUiSlot } from "./types.js";
 import { _default } from "./time-range-field-compact.vue.js";
 import { _default as _default$2 } from "./time-range-field-root.vue.js";
 import { _default as _default$1 } from "./time-range-field-input.vue.js";
 import { provideTimeRangeFieldUi } from "./context.js";
-export { _default as TimeRangeFieldCompact, type TimeRangeFieldCompactEmits, type TimeRangeFieldCompactProps, type TimeRangeFieldCompactSlots, _default$1 as TimeRangeFieldInput, type TimeRangeFieldInputProps, _default$2 as TimeRangeFieldRoot, type TimeRangeFieldRootContext, type TimeRangeFieldRootEmits, type TimeRangeFieldRootProps, type TimeRangeFieldSegment, type TimeRangeFieldUi, type TimeRangeFieldUiSlot, provideTimeRangeFieldUi };
+export { _default as TimeRangeFieldCompact, type TimeRangeFieldCompactEmits, type TimeRangeFieldCompactProps, type TimeRangeFieldCompactSlots, _default$1 as TimeRangeFieldInput, type TimeRangeFieldInputProps, _default$2 as TimeRangeFieldRoot, type TimeRangeFieldRootEmits, type TimeRangeFieldRootProps, type TimeRangeFieldRootSlots, type TimeRangeFieldSlotProps, type TimeRangeFieldUi, type TimeRangeFieldUiSlot, provideTimeRangeFieldUi };

package/dist/components/time-range-field/time-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{useTimeRangeFieldUi as n}from"./context.js";import r from"./time-range-field-root.js";import i from"./time-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-time-range-field-part":`start`},S={"data-time-range-field-part":`end`},C=u({name:`TimeRangeFieldCompact`,__name:`time-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},isTimeUnavailable:{},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{useTimeRangeFieldUi as n}from"./context.js";import r from"./time-range-field-root.js";import i from"./time-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:`TimeRangeFieldCompact`,__name:`time-range-field-compact`,props:{inputProps:{},separator:{default:`–`},defaultValue:{},modelValue:{},startName:{},endName:{},defaultPlaceholder:{},placeholder:{},granularity:{},maxValue:{},minValue:{},isTimeUnavailable:{},id:{},hourCycle:{},step:{},hideTimeZone:{type:Boolean},name:{},required:{type:Boolean},dir:{},locale:{},disabled:{type:Boolean},readonly:{type:Boolean},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-time-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-time-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/time-range-field/time-range-field-compact.vue.d.ts

@@ -1,5 +1,4 @@
-import { TimeValue } from "../../date/comparators.js";
-import { TimeRange } from "../../date/types.js";
+import { TimeRange, TimeValue } from "../../date/types.js";
 import { TimeRangeFieldCompactProps, TimeRangeFieldCompactSlots } from "./types.js";
 import * as _$vue from "vue";
 

package/dist/components/time-range-field/time-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{useTimeRangeFieldRootContext as n,useTimeRangeFieldUi 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:`TimeRangeFieldInput`,__name:`time-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(`TimeRangeFieldInput`),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{useTimeRangeFieldRootContext as n,useTimeRangeFieldUi 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:`TimeRangeFieldInput`,__name:`time-range-field-input`,props:{type:{default:`start`},part:{},asChild:{type:Boolean},as:{default:`span`}},setup(o){let m=o,h=r(`input`),{modelValue:g,disabled:_,readonly:v,placeholder:y,hourCycle:b,step:x,startSegmentValues:S,endSegmentValues:C,formatter:w,isInvalid:T,focusNext:E,setFocusedElement:D}=n(`TimeRangeFieldInput`),O=l(!0),{attributes:k,handleSegmentClick:A,handleSegmentFocusOut:j,handleSegmentKeydown:M}=e({hasLeftFocus:O,lastKeyZero:l(!1),placeholder:y,hourCycle:b,step:x,segmentValues:i(()=>m.type===`start`?S.value:C.value),formatter:w,part:m.part,disabled:_,readonly:v,focusNext:()=>E(m.type),modelValue:i({get:()=>m.type===`start`?g.value.start:g.value.end,set:e=>{m.type===`start`?g.value={...g.value,start:e}:g.value={...g.value,end:e}}})}),N=i(()=>_.value||v.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(f(k),{as:o.as,"as-child":o.asChild,"data-soybean-time-range-field-input":``,"data-soybean-date-field-segment":o.part,class:f(h),"aria-disabled":f(_)?!0:void 0,"aria-invalid":f(T)?!0:void 0,"aria-readonly":f(v)||o.part===`timeZoneName`?!0:void 0,contenteditable:N.value,"data-disabled":f(_)?``:void 0,"data-invalid":f(T)?``:void 0,"data-readonly":f(v)||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/time-range-field/time-range-field-root.js

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

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

@@ -1,23 +1,9 @@
-import { TimeValue } from "../../date/comparators.js";
-import { DateStep, SegmentPart, TimeGranularity, TimeMatcher, TimeRange } from "../../date/types.js";
-import { TimeRangeFieldRootProps } from "./types.js";
+import { DateStep, TimeGranularity, TimeMatcher, TimeRange, TimeValue } from "../../date/types.js";
+import { TimeRangeFieldRootProps, TimeRangeFieldRootSlots } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/time-range-field/time-range-field-root.vue.d.ts
-type __VLS_Slots = {
-  default?: (props: {
-    modelValue: TimeRange;
-    startSegments: {
-      part: SegmentPart;
-      value: string;
-    }[];
-    endSegments: {
-      part: SegmentPart;
-      value: string;
-    }[];
-    isInvalid: boolean;
-  }) => any;
-};
+type __VLS_Slots = TimeRangeFieldRootSlots;
 declare const __VLS_base: _$vue.DefineComponent<TimeRangeFieldRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (range: TimeRange) => any;
   "update:placeholder": (time: TimeValue) => any;
@@ -34,13 +20,13 @@ declare const __VLS_base: _$vue.DefineComponent<TimeRangeFieldRootProps, {}, {},
   step: DateStep;
   defaultValue: TimeRange;
   defaultPlaceholder: TimeValue;
-  hourCycle: 12 | 24;
   granularity: TimeGranularity;
-  hideTimeZone: boolean;
   readonly: boolean;
+  hourCycle: 12 | 24;
+  hideTimeZone: boolean;
+  isTimeUnavailable: TimeMatcher;
   startName: string;
   endName: string;
-  isTimeUnavailable: TimeMatcher;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;