@skdx/vue 0.28.0 → 0.29.0

package/dist/date-field/DateField.vue.d.ts

@@ -1,52 +1,42 @@
-import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../utils/dateSegments.js';
-import { type DateInput } from '../utils/dateValue.js';
-/**
- * The Vue implementation of the shared DateField contract. Segmented keyboard entry of a date — the typed counterpart of `SkdxCalendar`. Renders a `role="group"` holding one `role="spinbutton"` per segment, interleaved with the locale's own separators.
- *
- * Arrow Up/Down step the focused segment, Arrow Left/Right move between segments, digits type with roll-over, Backspace/Delete clear a segment. `value-change` fires with a complete date or `null`, never a half-typed one.
- *
- * Works controlled (`v-model:value` / `@value-change`) or uncontrolled (`defaultValue`). With a `name`, a visually-hidden input submits the date and form reset restores the declared date.
- */
+import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../utils/date-segments.js';
+import { type DateInput } from '../utils/date-value.js';
+/** Segmented keyboard entry of a date, rendered as a `role="group"` of per-segment `role="spinbutton"` cells. */
 type __VLS_Props = {
     /**
-     * Current date, for controlled usage. Pair with `v-model:value` or
-     * `@value-change`. `null` while any segment is still untyped.
-     * @default undefined — uncontrolled, seeded from `defaultValue`.
+     * Current date, for controlled usage via `v-model:value` or `@value-change`.
+     * @default undefined
      */
-    value?: DateInput | null;
+    value?: DateInput | null | undefined;
     /**
      * Initial date, used only when the field is uncontrolled.
-     * @default null — every segment starts on its placeholder.
+     * @default null
      */
     defaultValue?: DateInput | null;
     /**
-     * How far down the field is editable. `'day'` is date-only; anything past it
-     * appends hour/minute (and, at `'second'`, seconds).
+     * How far down the field is editable — `'day'` is date-only, deeper values add hour/minute/second.
      * @default 'day'
      */
     granularity?: Granularity;
     /**
-     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments. Display
-     * only — the submitted value is always 24 hour.
-     * @default undefined — whatever the locale resolves to.
+     * Forces 12-hour (with an AM/PM segment) or 24-hour time segments; display only.
+     * @default undefined
      */
-    hourCycle?: HourCycle;
+    hourCycle?: HourCycle | undefined;
     /**
      * BCP-47 locale deciding segment order, the literals between segments and the AM/PM names.
-     * @default undefined — the runtime's default locale.
+     * @default undefined
      */
-    locale?: string;
+    locale?: string | undefined;
     /**
-     * Earliest accepted date. A value before it marks the field
-     * `aria-invalid`/`data-invalid` and fails constraint validation with `rangeUnderflow`.
-     * @default undefined — no minimum; any year from 1 to 9999.
+     * Earliest accepted date; a value before it marks the field `aria-invalid`/`data-invalid` and fails with `rangeUnderflow`.
+     * @default undefined
      */
-    minDate?: DateInput;
+    minDate?: DateInput | undefined;
     /**
-     * Latest accepted date. A value after it fails constraint validation with `rangeOverflow`.
-     * @default undefined — no maximum; any year from 1 to 9999.
+     * Latest accepted date; a value after it fails constraint validation with `rangeOverflow`.
+     * @default undefined
      */
-    maxDate?: DateInput;
+    maxDate?: DateInput | undefined;
     /**
      * Disables the field and drops every segment out of the tab order.
      * @default false
@@ -58,11 +48,10 @@ type __VLS_Props = {
      */
     readOnly?: boolean;
     /**
-     * Predicate marking dates as unavailable, receiving the typed `Date`. An
-     * unavailable date marks the field `aria-invalid`/`data-invalid`.
-     * @default undefined — every date is available.
+     * Predicate marking dates as unavailable; an unavailable date marks the field `aria-invalid`/`data-invalid`.
+     * @default undefined
      */
-    isDateUnavailable?: (date: Date) => boolean;
+    isDateUnavailable?: ((date: Date) => boolean) | undefined;
     /**
      * Whether a one-digit month, day or hour renders zero-padded — `05/09/2026`
      * rather than `5/9/2026`.
@@ -70,8 +59,7 @@ type __VLS_Props = {
      */
     shouldForceLeadingZeros?: boolean;
     /**
-     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. Additive:
-     * an out-of-range or unavailable date sets both anyway.
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`; additive with an out-of-range or unavailable date.
      * @default false
      */
     invalid?: boolean;
@@ -81,90 +69,58 @@ type __VLS_Props = {
      */
     required?: boolean;
     /**
-     * Form field name. With it the date submits as `YYYY-MM-DD`, or
-     * `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity. Without it the field
-     * submits nothing.
+     * Form field name; with it the date submits as `YYYY-MM-DD` or `YYYY-MM-DDTHH:mm[:ss]` past `day` granularity.
      * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * Id of the `<form>` this field submits into, for a field rendered outside
-     * it — inside a Dialog's portal, for instance. Forwarded to the hidden
-     * input's `form` attribute, which is also how the reset listener finds the
-     * form.
-     * @default undefined — the field belongs to its nearest ancestor `<form>`, if any.
+     * Id of the `<form>` this field submits into, for a field rendered outside it (e.g. inside a portal).
+     * @default undefined
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * Writing direction, which decides whether ArrowLeft moves to the previous or
-     * the next segment.
-     * @default undefined — read off the nearest `[dir]` ancestor or `document.dir`.
+     * Writing direction, deciding whether ArrowLeft moves to the previous or next segment.
+     * @default undefined
      */
-    dir?: 'ltr' | 'rtl';
+    dir?: 'ltr' | 'rtl' | undefined;
     /**
-     * Words the accessible name of one segment. Called per segment type
-     * (`'year'`, `'month'`, `'dayPeriod'`, …).
-     *
-     * One of the only two strings here that `locale` cannot translate: segment
-     * order, the literals between segments and the AM/PM names all come from
-     * `Intl.DateTimeFormat` already, but these describe the widget rather than
-     * the value, so no locale data carries them.
-     * @default undefined — the built-in English names ('year', 'month', 'AM/PM', …).
+     * Words the accessible name of one segment, called per segment type (`'year'`, `'month'`, `'dayPeriod'`, …).
+     * @default undefined
      */
-    getSegmentLabel?: (type: SegmentType) => string;
+    getSegmentLabel?: ((type: SegmentType) => string) | undefined;
     /**
-     * The `aria-valuetext` an untyped segment announces instead of a number it
-     * does not have — `aria-valuenow` has to stay present for a spinbutton, so
-     * this is the text that is actually read.
+     * The `aria-valuetext` an untyped segment announces instead of a number it does not have.
      * @default 'Empty'
      */
     emptySegmentText?: string;
     /**
-     * Words the placeholder letters one segment shows before it has been
-     * typed, called per segment type. The separators around them *are*
-     * locale-derived; these letters are not, so a `de-DE` field renders
-     * `dd.mm.yyyy` until this prop turns it into `TT.MM.JJJJ`.
-     * @default undefined — the built-in English letters ('yyyy', 'mm', 'dd', …).
+     * Words the placeholder letters one segment shows before it has been typed, called per segment type.
+     * @default undefined
      */
-    getSegmentPlaceholder?: SegmentPlaceholderResolver;
+    getSegmentPlaceholder?: SegmentPlaceholderResolver | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
     /** Reports whether the hidden form input satisfies its constraints. `true` without a `name`. */
     checkValidity: () => boolean;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity: () => boolean;
-    /**
-     * Pushes an externally-computed error onto the hidden input, exactly like
-     * `HTMLInputElement.setCustomValidity()`: a non-empty message makes the field
-     * invalid (customError) and is what `reportValidity()` shows; `''` clears it.
-     * Dropped without a `name`, matching the reads above.
-     */
+    /** Pushes an externally-computed error onto the hidden input, like `HTMLInputElement.setCustomValidity()`; `''` clears it. */
     setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: Date | null) => any;
     "value-change": (value: Date | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: Date | null) => any) | undefined;
-    "onValue-change"?: ((value: Date | null) => any) | undefined;
+    "onUpdate:value"?: (value: Date | null) => any;
+    "onValue-change"?: (value: Date | null) => any;
 }>, {
-    form: string;
     disabled: boolean;
-    dir: "ltr" | "rtl";
-    value: DateInput | null;
+    defaultValue: DateInput | null;
     readOnly: boolean;
     required: boolean;
-    name: string;
     invalid: boolean;
-    defaultValue: DateInput | null;
-    locale: string;
-    hourCycle: HourCycle;
-    minDate: DateInput;
-    maxDate: DateInput;
-    isDateUnavailable: (date: Date) => boolean;
+    isDateUnavailable: ((date: Date) => boolean) | undefined;
     granularity: Granularity;
     shouldForceLeadingZeros: boolean;
-    getSegmentLabel: (type: SegmentType) => string;
     emptySegmentText: string;
-    getSegmentPlaceholder: SegmentPlaceholderResolver;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/date-field/DateField.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const C=require("../utils/useFormReset.cjs"),o=require("../utils/dateSegments.cjs"),f=require("../utils/dateValue.cjs"),R=require("../utils/SegmentedField.vue.cjs");let e=require("vue");var L=(0,e.defineComponent)({__name:"DateField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"day"},hourCycle:{default:void 0},locale:{default:void 0},minDate:{default:void 0},maxDate:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},isDateUnavailable:{type:Function,default:void 0},shouldForceLeadingZeros:{type:Boolean,default:!0},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},dir:{default:void 0},getSegmentLabel:{type:Function,default:void 0},emptySegmentText:{default:o.EMPTY_VALUE_TEXT},getSegmentPlaceholder:{type:Function,default:void 0}},emits:["update:value","value-change"],setup(l,{expose:T,emit:q}){const a=l,m=q,i=(0,e.computed)(()=>o.resolveHourCycle(a.locale,a.hourCycle)),r=(0,e.computed)(()=>a.value===void 0?void 0:f.toDate(a.value,"value")),V=(0,e.computed)(()=>f.toDate(a.defaultValue,"defaultValue")),s=(0,e.computed)(()=>f.toDate(a.minDate,"minDate")??void 0),g=(0,e.computed)(()=>f.toDate(a.maxDate,"maxDate")??void 0),y=(0,e.ref)(V.value),d=(0,e.computed)(()=>r.value!==void 0?r.value:y.value),n=(0,e.ref)(d.value?o.dateToValues(d.value,i.value):{}),D=(0,e.computed)(()=>d.value?d.value.getTime():null);function h(t,u){return o.isComplete(o.buildSegments({kind:"date",granularity:a.granularity,locale:a.locale,hourCycle:u,values:t}))?o.valuesToDate(t,u):null}(0,e.watch)([D,i],([t,u])=>{const p=h(n.value,u);if(t===null){p!==null&&(n.value={});return}p!==null&&p.getTime()===t||(n.value=o.dateToValues(new Date(t),u))});const F=(0,e.computed)(()=>d.value?o.dateToFormValue(d.value,a.granularity):null),b=(0,e.computed)(()=>a.granularity==="day"?"date":"datetime-local"),x=(0,e.computed)(()=>s.value?o.dateToFormValue(s.value,a.granularity):void 0),k=(0,e.computed)(()=>g.value?o.dateToFormValue(g.value,a.granularity):void 0),S=(0,e.computed)(()=>d.value!==null&&(a.isDateUnavailable?.(d.value)??!1)),B=(0,e.computed)(()=>o.dateRangeViolation(d.value,a.granularity,s.value,g.value)!==null);function E(t){n.value=t;const u=h(t,i.value);(u?u.getTime():null)!==D.value&&(r.value===void 0&&(y.value=u),m("update:value",u),m("value-change",u))}const v=(0,e.ref)(null),c=r.value??V.value;return C.useFormReset(()=>v.value?.inputEl,()=>{n.value=c?o.dateToValues(c,i.value):{},r.value===void 0&&(y.value=c),m("update:value",c),m("value-change",c)}),T({checkValidity:()=>v.value?.inputEl?.checkValidity()??!0,reportValidity:()=>v.value?.inputEl?.reportValidity()??!0,setCustomValidity:t=>v.value?.inputEl?.setCustomValidity(t)}),(t,u)=>((0,e.openBlock)(),(0,e.createBlock)(R.default,{family:"date-field",class:"skdx-date-field","data-part":"root","data-skdx-component":"date-field",ref_key:"fieldRef",ref:v,kind:"date",granularity:l.granularity,locale:l.locale,"hour-cycle":i.value,values:n.value,"form-value":F.value,"form-type":b.value,"form-min":x.value,"form-max":k.value,"should-force-leading-zeros":l.shouldForceLeadingZeros,disabled:l.disabled,"read-only":l.readOnly,invalid:l.invalid||B.value||S.value,required:l.required,name:l.name,form:l.form,dir:l.dir,"get-segment-label":l.getSegmentLabel,"empty-segment-text":l.emptySegmentText,"get-segment-placeholder":l.getSegmentPlaceholder,onValuesChange:E},null,8,["granularity","locale","hour-cycle","values","form-value","form-type","form-min","form-max","should-force-leading-zeros","disabled","read-only","invalid","required","name","form","dir","get-segment-label","empty-segment-text","get-segment-placeholder"]))}});exports.default=L;
+const C=require("../utils/useFormReset.cjs"),o=require("../utils/date-segments.cjs"),m=require("../utils/date-value.cjs"),R=require("../utils/SegmentedField.vue.cjs");let e=require("vue");var L=(0,e.defineComponent)({__name:"DateField",props:{value:{},defaultValue:{default:null},granularity:{default:"day"},hourCycle:{},locale:{},minDate:{},maxDate:{},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},isDateUnavailable:{type:Function,default:void 0},shouldForceLeadingZeros:{type:Boolean,default:!0},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{},form:{},dir:{},getSegmentLabel:{},emptySegmentText:{default:o.EMPTY_VALUE_TEXT},getSegmentPlaceholder:{}},emits:["update:value","value-change"],setup(t,{expose:h,emit:T}){const l=t,c=T,r=(0,e.computed)(()=>o.resolveHourCycle(l.locale,l.hourCycle)),i=(0,e.computed)(()=>l.value===void 0?void 0:m.toDate(l.value,"value")),s=(0,e.computed)(()=>m.toDate(l.defaultValue,"defaultValue")),f=(0,e.computed)(()=>m.toDate(l.minDate,"minDate")??void 0),g=(0,e.computed)(()=>m.toDate(l.maxDate,"maxDate")??void 0),y=(0,e.ref)(s.value),n=(0,e.computed)(()=>i.value!==void 0?i.value:y.value),d=(0,e.ref)(n.value?o.dateToValues(n.value,r.value):{}),V=(0,e.computed)(()=>n.value?n.value.getTime():null);function D(a,u){return o.isComplete(o.buildSegments({kind:"date",granularity:l.granularity,locale:l.locale,hourCycle:u,values:a}))?o.valuesToDate(a,u):null}(0,e.watch)([V,r],([a,u])=>{const p=D(d.value,u);if(a===null){p!==null&&(d.value={});return}p!==null&&p.getTime()===a||(d.value=o.dateToValues(new Date(a),u))});const q=(0,e.computed)(()=>n.value?o.dateToFormValue(n.value,l.granularity):null),b=(0,e.computed)(()=>l.granularity==="day"?"date":"datetime-local"),x=(0,e.computed)(()=>f.value?o.dateToFormValue(f.value,l.granularity):void 0),F=(0,e.computed)(()=>g.value?o.dateToFormValue(g.value,l.granularity):void 0),k=(0,e.computed)(()=>n.value!==null&&(l.isDateUnavailable?.(n.value)??!1)),S=(0,e.computed)(()=>o.dateRangeViolation(n.value,l.granularity,f.value,g.value)!==null);function B(a){d.value=a;const u=D(a,r.value);(u?u.getTime():null)!==V.value&&(i.value===void 0&&(y.value=u),c("update:value",u),c("value-change",u))}const v=(0,e.ref)(null),E=i.value??s.value;return C.useFormReset(()=>v.value?.inputEl,()=>{const a=s.value??E;d.value=a?o.dateToValues(a,r.value):{},i.value===void 0&&(y.value=a),c("update:value",a),c("value-change",a)}),h({checkValidity:()=>v.value?.inputEl?.checkValidity()??!0,reportValidity:()=>v.value?.inputEl?.reportValidity()??!0,setCustomValidity:a=>v.value?.inputEl?.setCustomValidity(a)}),(a,u)=>((0,e.openBlock)(),(0,e.createBlock)(R.default,{ref_key:"fieldRef",ref:v,family:"date-field",class:"skdx-date-field","data-part":"root","data-skdx-component":"date-field",kind:"date",granularity:l.granularity,locale:t.locale,"hour-cycle":r.value,values:d.value,"form-value":q.value,"form-type":b.value,"form-min":x.value,"form-max":F.value,"should-force-leading-zeros":t.shouldForceLeadingZeros,disabled:t.disabled,"read-only":t.readOnly,invalid:t.invalid||S.value||k.value,required:t.required,name:t.name,form:t.form,dir:t.dir,"get-segment-label":t.getSegmentLabel,"empty-segment-text":t.emptySegmentText,"get-segment-placeholder":t.getSegmentPlaceholder,onValuesChange:B},null,8,["granularity","locale","hour-cycle","values","form-value","form-type","form-min","form-max","should-force-leading-zeros","disabled","read-only","invalid","required","name","form","dir","get-segment-label","empty-segment-text","get-segment-placeholder"]))}});exports.default=L;

package/dist/date-field/DateField.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useFormReset as e}from"../utils/useFormReset.js";import{EMPTY_VALUE_TEXT as a,buildSegments as l,dateRangeViolation as t,dateToFormValue as u,dateToValues as o,isComplete as d,resolveHourCycle as i,valuesToDate as n}from"../utils/dateSegments.js";import{toDate as r}from"../utils/dateValue.js";import v from"../utils/SegmentedField.vue.js";import{computed as s,createBlock as m,defineComponent as f,openBlock as c,ref as g,watch as y}from"vue";var p=/* @__PURE__ */f({__name:"DateField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"day"},hourCycle:{default:void 0},locale:{default:void 0},minDate:{default:void 0},maxDate:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},isDateUnavailable:{type:Function,default:void 0},shouldForceLeadingZeros:{type:Boolean,default:!0},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},dir:{default:void 0},getSegmentLabel:{type:Function,default:void 0},emptySegmentText:{default:a},getSegmentPlaceholder:{type:Function,default:void 0}},emits:["update:value","value-change"],setup(a,{expose:f,emit:p}){const h=a,V=p,x=s(()=>i(h.locale,h.hourCycle)),D=s(()=>void 0===h.value?void 0:r(h.value,"value")),b=s(()=>r(h.defaultValue,"defaultValue")),T=s(()=>r(h.minDate,"minDate")??void 0),F=s(()=>r(h.maxDate,"maxDate")??void 0),k=g(b.value),C=s(()=>void 0!==D.value?D.value:k.value),S=g(C.value?o(C.value,x.value):{}),B=s(()=>C.value?C.value.getTime():null);function E(e,a){return d(l({kind:"date",granularity:h.granularity,locale:h.locale,hourCycle:a,values:e}))?n(e,a):null}y([B,x],([e,a])=>{const l=E(S.value,a);null!==e?null!==l&&l.getTime()===e||(S.value=o(new Date(e),a)):null!==l&&(S.value={})});const L=s(()=>C.value?u(C.value,h.granularity):null),_=s(()=>"day"===h.granularity?"date":"datetime-local"),j=s(()=>T.value?u(T.value,h.granularity):void 0),q=s(()=>F.value?u(F.value,h.granularity):void 0),R=s(()=>null!==C.value&&(h.isDateUnavailable?.(C.value)??!1)),P=s(()=>null!==t(C.value,h.granularity,T.value,F.value));function U(e){S.value=e;const a=E(e,x.value);(a?a.getTime():null)!==B.value&&(void 0===D.value&&(k.value=a),V("update:value",a),V("value-change",a))}const w=g(null),z=D.value??b.value;return e(()=>w.value?.inputEl,()=>{S.value=z?o(z,x.value):{},void 0===D.value&&(k.value=z),V("update:value",z),V("value-change",z)}),f({checkValidity:()=>w.value?.inputEl?.checkValidity()??!0,reportValidity:()=>w.value?.inputEl?.reportValidity()??!0,setCustomValidity:e=>w.value?.inputEl?.setCustomValidity(e)}),(e,l)=>(c(),m(v,{family:"date-field",class:"skdx-date-field","data-part":"root","data-skdx-component":"date-field",ref_key:"fieldRef",ref:w,kind:"date",granularity:a.granularity,locale:a.locale,"hour-cycle":x.value,values:S.value,"form-value":L.value,"form-type":_.value,"form-min":j.value,"form-max":q.value,"should-force-leading-zeros":a.shouldForceLeadingZeros,disabled:a.disabled,"read-only":a.readOnly,invalid:a.invalid||P.value||R.value,required:a.required,name:a.name,form:a.form,dir:a.dir,"get-segment-label":a.getSegmentLabel,"empty-segment-text":a.emptySegmentText,"get-segment-placeholder":a.getSegmentPlaceholder,onValuesChange:U},null,8,["granularity","locale","hour-cycle","values","form-value","form-type","form-min","form-max","should-force-leading-zeros","disabled","read-only","invalid","required","name","form","dir","get-segment-label","empty-segment-text","get-segment-placeholder"]))}});export{p as default};
+import{useFormReset as e}from"../utils/useFormReset.js";import{EMPTY_VALUE_TEXT as a,buildSegments as l,dateRangeViolation as t,dateToFormValue as u,dateToValues as o,isComplete as i,resolveHourCycle as n,valuesToDate as r}from"../utils/date-segments.js";import{toDate as d}from"../utils/date-value.js";import v from"../utils/SegmentedField.vue.js";import{computed as s,createBlock as m,defineComponent as c,openBlock as g,ref as f,watch as y}from"vue";var p=/* @__PURE__ */c({__name:"DateField",props:{value:{},defaultValue:{default:null},granularity:{default:"day"},hourCycle:{},locale:{},minDate:{},maxDate:{},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},isDateUnavailable:{type:Function,default:void 0},shouldForceLeadingZeros:{type:Boolean,default:!0},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{},form:{},dir:{},getSegmentLabel:{},emptySegmentText:{default:a},getSegmentPlaceholder:{}},emits:["update:value","value-change"],setup(a,{expose:c,emit:p}){const h=a,V=p,x=s(()=>n(h.locale,h.hourCycle)),D=s(()=>void 0===h.value?void 0:d(h.value,"value")),b=s(()=>d(h.defaultValue,"defaultValue")),T=s(()=>d(h.minDate,"minDate")??void 0),k=s(()=>d(h.maxDate,"maxDate")??void 0),C=f(b.value),F=s(()=>void 0!==D.value?D.value:C.value),S=f(F.value?o(F.value,x.value):{}),B=s(()=>F.value?F.value.getTime():null);function E(e,a){return i(l({kind:"date",granularity:h.granularity,locale:h.locale,hourCycle:a,values:e}))?r(e,a):null}y([B,x],([e,a])=>{const l=E(S.value,a);null!==e?null!==l&&l.getTime()===e||(S.value=o(new Date(e),a)):null!==l&&(S.value={})});const L=s(()=>F.value?u(F.value,h.granularity):null),_=s(()=>"day"===h.granularity?"date":"datetime-local"),j=s(()=>T.value?u(T.value,h.granularity):void 0),q=s(()=>k.value?u(k.value,h.granularity):void 0),R=s(()=>null!==F.value&&(h.isDateUnavailable?.(F.value)??!1)),P=s(()=>null!==t(F.value,h.granularity,T.value,k.value));function U(e){S.value=e;const a=E(e,x.value);(a?a.getTime():null)!==B.value&&(void 0===D.value&&(C.value=a),V("update:value",a),V("value-change",a))}const w=f(null),z=D.value??b.value;return e(()=>w.value?.inputEl,()=>{const e=b.value??z;S.value=e?o(e,x.value):{},void 0===D.value&&(C.value=e),V("update:value",e),V("value-change",e)}),c({checkValidity:()=>w.value?.inputEl?.checkValidity()??!0,reportValidity:()=>w.value?.inputEl?.reportValidity()??!0,setCustomValidity:e=>w.value?.inputEl?.setCustomValidity(e)}),(e,l)=>(g(),m(v,{ref_key:"fieldRef",ref:w,family:"date-field",class:"skdx-date-field","data-part":"root","data-skdx-component":"date-field",kind:"date",granularity:h.granularity,locale:a.locale,"hour-cycle":x.value,values:S.value,"form-value":L.value,"form-type":_.value,"form-min":j.value,"form-max":q.value,"should-force-leading-zeros":a.shouldForceLeadingZeros,disabled:a.disabled,"read-only":a.readOnly,invalid:a.invalid||P.value||R.value,required:a.required,name:a.name,form:a.form,dir:a.dir,"get-segment-label":a.getSegmentLabel,"empty-segment-text":a.emptySegmentText,"get-segment-placeholder":a.getSegmentPlaceholder,onValuesChange:U},null,8,["granularity","locale","hour-cycle","values","form-value","form-type","form-min","form-max","should-force-leading-zeros","disabled","read-only","invalid","required","name","form","dir","get-segment-label","empty-segment-text","get-segment-placeholder"]))}});export{p as default};

package/dist/date-field/index.d.cts

@@ -1,2 +1,2 @@
 export { default as SkdxDateField } from './DateField.vue.cjs';
-export type { Granularity, HourCycle, SegmentType, SegmentValues } from '../utils/dateSegments.cjs';
+export type { Granularity, HourCycle, SegmentType, SegmentValues } from '../utils/date-segments.cjs';

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

@@ -1,2 +1,2 @@
 export { default as SkdxDateField } from './DateField.vue.js';
-export type { Granularity, HourCycle, SegmentType, SegmentValues } from '../utils/dateSegments.js';
+export type { Granularity, HourCycle, SegmentType, SegmentValues } from '../utils/date-segments.js';

package/dist/date-picker/DatePicker.vue.d.cts

@@ -1,10 +1,6 @@
 import { type CalendarSelectionMode, type CalendarValue, type CalendarValueInput } from '../calendar/dateMath.cjs';
-import type { Granularity } from '../utils/dateSegments.cjs';
-/**
- * Calendar in Popper popup, closing on selection. Owns `value` and `open`
- * distributed via context. Controlled (`v-model:*`) or uncontrolled.
- * With `name`, submits as YYYY-MM-DD strings; `required` reports valueMissing.
- */
+import type { Granularity } from '../utils/date-segments.cjs';
+/** Calendar in a Popper popup, owning `value` and `open` distributed via context. */
 type __VLS_Props = {
     /** Disables trigger and prevents popup opening.
      * @default false
@@ -14,12 +10,18 @@ type __VLS_Props = {
      * @default 'single'
      */
     selectionMode?: CalendarSelectionMode;
-    /** Current selection for controlled usage; shape follows mode. */
-    value?: CalendarValueInput;
-    /** Initial selection, used only when the picker is uncontrolled. */
-    defaultValue?: CalendarValueInput;
+    /**
+     * Current selection for controlled usage; shape follows mode.
+     * @default undefined
+     */
+    value?: CalendarValueInput | undefined;
+    /**
+     * Initial selection, used only when the picker is uncontrolled.
+     * @default undefined
+     */
+    defaultValue?: CalendarValueInput | undefined;
     /** Whether popup is open for controlled usage. */
-    open?: boolean;
+    open?: boolean | undefined;
     /** Initial open state for uncontrolled usage.
      * @default false
      */
@@ -32,16 +34,25 @@ type __VLS_Props = {
      * @default 'Select date'
      */
     placeholder?: string;
-    /** BCP 47 locale tag for trigger formatting (ignored when `children` replaces). */
-    locale?: string;
+    /**
+     * BCP 47 locale tag for trigger formatting (ignored when `children` replaces).
+     * @default undefined
+     */
+    locale?: string | undefined;
     /** Derive popup with typed-entry field (single mode only).
      * @default false
      */
     showInput?: boolean;
-    /** Form field name; submits as YYYY-MM-DD strings. */
-    name?: string;
-    /** Form id this picker submits into. */
-    form?: string;
+    /**
+     * Form field name; submits as YYYY-MM-DD strings.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Form id this picker submits into.
+     * @default undefined
+     */
+    form?: string | undefined;
     /** Marks picker required; valueMissing while unselected.
      * @default false
      */
@@ -68,12 +79,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     checkValidity: () => boolean;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity: () => boolean;
-    /**
-     * Pushes an externally-computed error onto the first hidden input, exactly like
-     * `HTMLInputElement.setCustomValidity()`: a non-empty message makes the picker
-     * invalid (customError) and is what `reportValidity()` shows; `''` clears it.
-     * Dropped without a `name`, matching the reads above.
-     */
+    /** Pushes an externally-computed error onto the first hidden input, like `HTMLInputElement.setCustomValidity()`; `''` clears it. */
     setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
@@ -82,25 +88,20 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     "value-change": (value: CalendarValue) => any;
     "open-change-complete": (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
-    "onOpen-change"?: ((open: boolean) => any) | undefined;
-    "onUpdate:value"?: ((value: CalendarValue) => any) | undefined;
-    "onValue-change"?: ((value: CalendarValue) => any) | undefined;
-    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    "onUpdate:value"?: (value: CalendarValue) => any;
+    "onValue-change"?: (value: CalendarValue) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
 }>, {
-    form: string;
     disabled: boolean;
     placeholder: string;
-    open: boolean;
+    open: boolean | undefined;
     defaultOpen: boolean;
-    value: CalendarValueInput;
     readOnly: boolean;
     required: boolean;
-    name: string;
     invalid: boolean;
-    defaultValue: CalendarValueInput;
     closeOnSelect: boolean;
-    locale: string;
     selectionMode: CalendarSelectionMode;
     granularity: Granularity;
     showInput: boolean;

package/dist/date-picker/DatePicker.vue.d.ts

@@ -1,10 +1,6 @@
 import { type CalendarSelectionMode, type CalendarValue, type CalendarValueInput } from '../calendar/dateMath.js';
-import type { Granularity } from '../utils/dateSegments.js';
-/**
- * Calendar in Popper popup, closing on selection. Owns `value` and `open`
- * distributed via context. Controlled (`v-model:*`) or uncontrolled.
- * With `name`, submits as YYYY-MM-DD strings; `required` reports valueMissing.
- */
+import type { Granularity } from '../utils/date-segments.js';
+/** Calendar in a Popper popup, owning `value` and `open` distributed via context. */
 type __VLS_Props = {
     /** Disables trigger and prevents popup opening.
      * @default false
@@ -14,12 +10,18 @@ type __VLS_Props = {
      * @default 'single'
      */
     selectionMode?: CalendarSelectionMode;
-    /** Current selection for controlled usage; shape follows mode. */
-    value?: CalendarValueInput;
-    /** Initial selection, used only when the picker is uncontrolled. */
-    defaultValue?: CalendarValueInput;
+    /**
+     * Current selection for controlled usage; shape follows mode.
+     * @default undefined
+     */
+    value?: CalendarValueInput | undefined;
+    /**
+     * Initial selection, used only when the picker is uncontrolled.
+     * @default undefined
+     */
+    defaultValue?: CalendarValueInput | undefined;
     /** Whether popup is open for controlled usage. */
-    open?: boolean;
+    open?: boolean | undefined;
     /** Initial open state for uncontrolled usage.
      * @default false
      */
@@ -32,16 +34,25 @@ type __VLS_Props = {
      * @default 'Select date'
      */
     placeholder?: string;
-    /** BCP 47 locale tag for trigger formatting (ignored when `children` replaces). */
-    locale?: string;
+    /**
+     * BCP 47 locale tag for trigger formatting (ignored when `children` replaces).
+     * @default undefined
+     */
+    locale?: string | undefined;
     /** Derive popup with typed-entry field (single mode only).
      * @default false
      */
     showInput?: boolean;
-    /** Form field name; submits as YYYY-MM-DD strings. */
-    name?: string;
-    /** Form id this picker submits into. */
-    form?: string;
+    /**
+     * Form field name; submits as YYYY-MM-DD strings.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Form id this picker submits into.
+     * @default undefined
+     */
+    form?: string | undefined;
     /** Marks picker required; valueMissing while unselected.
      * @default false
      */
@@ -68,12 +79,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     checkValidity: () => boolean;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity: () => boolean;
-    /**
-     * Pushes an externally-computed error onto the first hidden input, exactly like
-     * `HTMLInputElement.setCustomValidity()`: a non-empty message makes the picker
-     * invalid (customError) and is what `reportValidity()` shows; `''` clears it.
-     * Dropped without a `name`, matching the reads above.
-     */
+    /** Pushes an externally-computed error onto the first hidden input, like `HTMLInputElement.setCustomValidity()`; `''` clears it. */
     setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
@@ -82,25 +88,20 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     "value-change": (value: CalendarValue) => any;
     "open-change-complete": (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
-    "onOpen-change"?: ((open: boolean) => any) | undefined;
-    "onUpdate:value"?: ((value: CalendarValue) => any) | undefined;
-    "onValue-change"?: ((value: CalendarValue) => any) | undefined;
-    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    "onUpdate:value"?: (value: CalendarValue) => any;
+    "onValue-change"?: (value: CalendarValue) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
 }>, {
-    form: string;
     disabled: boolean;
     placeholder: string;
-    open: boolean;
+    open: boolean | undefined;
     defaultOpen: boolean;
-    value: CalendarValueInput;
     readOnly: boolean;
     required: boolean;
-    name: string;
     invalid: boolean;
-    defaultValue: CalendarValueInput;
     closeOnSelect: boolean;
-    locale: string;
     selectionMode: CalendarSelectionMode;
     granularity: Granularity;
     showInput: boolean;

package/dist/date-picker/DatePicker.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const D=require("../utils/useFormReset.cjs"),P=require("../utils/useOpenChangeComplete.cjs"),E=require("../utils/PopperRoot.vue.cjs"),h=require("../utils/dateValue.cjs"),r=require("../calendar/dateMath.cjs"),d=require("./context.cjs"),I=require("./DatePickerAnatomy.vue.cjs");let e=require("vue");var S=["name","^value","required","form"],b=(0,e.defineComponent)({inheritAttrs:!1,__name:"DatePicker",props:{disabled:{type:Boolean,default:!1},selectionMode:{default:"single"},value:{default:void 0},defaultValue:{default:void 0},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},granularity:{default:"day"},placeholder:{default:"Select date"},locale:{default:void 0},showInput:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},required:{type:Boolean,default:!1},closeOnSelect:{type:Boolean,default:!0},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1}},emits:["update:value","value-change","update:open","open-change","open-change-complete"],setup(a,{expose:g,emit:q}){function V(t){return t?Array.isArray(t)?t:r.isDateRange(t)?t.end===null?[]:[t.start,t.end]:[t]:[]}const l=a,n=q,k=(0,e.ref)(null),i=(0,e.ref)(null),u=(0,e.computed)(()=>h.toCalendarValue(l.value,l.selectionMode,"value")),c=(0,e.computed)(()=>h.toCalendarValue(l.defaultValue,l.selectionMode,"defaultValue")??r.emptySelection(l.selectionMode)),s=(0,e.ref)(c.value),p=(0,e.computed)(()=>u.value!==void 0?u.value:s.value),f=(0,e.ref)(l.defaultOpen),m=(0,e.computed)(()=>l.open??f.value);P.useOpenChangeComplete(m,i,t=>n("open-change-complete",t));function v(t){u.value===void 0&&(s.value=t),n("update:value",t),n("value-change",t)}function C(t){l.open===void 0&&(f.value=t),n("update:open",t),n("open-change",t)}(0,e.provide)(d.DATE_PICKER_CONTEXT,{disabled:(0,e.computed)(()=>l.disabled),triggerRef:k,contentRef:i,contentId:d.nextDatePickerContentId(),triggerId:d.nextDatePickerTriggerId(),value:p,get selectionMode(){return l.selectionMode},get granularity(){return l.granularity},closeOnSelect:(0,e.computed)(()=>l.closeOnSelect),readOnly:(0,e.computed)(()=>l.readOnly),invalid:(0,e.computed)(()=>l.invalid),onValueChange:v,open:m,setOpen:C});const y=(0,e.computed)(()=>V(p.value).map(r.toISODateString)),o=(0,e.ref)([]),B=u.value??c.value;return D.useFormReset(()=>o.value[0],()=>v(B)),g({checkValidity:()=>o.value[0]?.checkValidity()??!0,reportValidity:()=>o.value[0]?.reportValidity()??!0,setCustomValidity:t=>o.value[0]?.setCustomValidity(t)}),(t,M)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(E.default,null,{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"default",{},()=>[(0,e.createVNode)(I.default,(0,e.mergeProps)(t.$attrs,{placeholder:a.placeholder,locale:a.locale,"show-input":a.showInput}),null,16,["placeholder","locale","show-input"])])]),_:3}),a.name?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:0},(0,e.renderList)(y.value.length>0?y.value:[""],(O,_)=>((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:_,ref_for:!0,ref_key:"hiddenEls",ref:o,type:"text","aria-hidden":"true",tabindex:"-1",name:a.name,"^value":O,required:a.required,form:a.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,S))),128)):(0,e.createCommentVNode)("",!0)],64))}});exports.default=b;
+const b=require("../utils/useFormReset.cjs"),D=require("../utils/useOpenChangeComplete.cjs"),P=require("../utils/PopperRoot.vue.cjs"),h=require("../utils/date-value.cjs"),u=require("../calendar/dateMath.cjs"),d=require("./context.cjs"),E=require("./DatePickerAnatomy.vue.cjs");let e=require("vue");var I=["name","^value","required","form"],S=(0,e.defineComponent)({inheritAttrs:!1,__name:"DatePicker",props:{disabled:{type:Boolean,default:!1},selectionMode:{default:"single"},value:{},defaultValue:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},granularity:{default:"day"},placeholder:{default:"Select date"},locale:{},showInput:{type:Boolean,default:!1},name:{},form:{},required:{type:Boolean,default:!1},closeOnSelect:{type:Boolean,default:!0},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1}},emits:["update:value","value-change","update:open","open-change","open-change-complete"],setup(a,{expose:g,emit:q}){function V(t){return t?Array.isArray(t)?t:u.isDateRange(t)?t.end===null?[]:[t.start,t.end]:[t]:[]}const l=a,n=q,k=(0,e.ref)(null),i=(0,e.ref)(null),r=(0,e.computed)(()=>h.toCalendarValue(l.value,l.selectionMode,"value")),c=(0,e.computed)(()=>h.toCalendarValue(l.defaultValue,l.selectionMode,"defaultValue")??u.emptySelection(l.selectionMode)),s=(0,e.ref)(c.value),p=(0,e.computed)(()=>r.value!==void 0?r.value:s.value),f=(0,e.ref)(l.defaultOpen),m=(0,e.computed)(()=>l.disabled?!1:l.open??f.value);D.useOpenChangeComplete(m,i,t=>n("open-change-complete",t));function v(t){r.value===void 0&&(s.value=t),n("update:value",t),n("value-change",t)}function C(t){l.disabled||(l.open===void 0&&(f.value=t),n("update:open",t),n("open-change",t))}(0,e.provide)(d.DATE_PICKER_CONTEXT,{disabled:(0,e.computed)(()=>l.disabled),triggerRef:k,contentRef:i,contentId:d.nextDatePickerContentId(),triggerId:d.nextDatePickerTriggerId(),value:p,get selectionMode(){return l.selectionMode},get granularity(){return l.granularity},closeOnSelect:(0,e.computed)(()=>l.closeOnSelect),readOnly:(0,e.computed)(()=>l.readOnly),invalid:(0,e.computed)(()=>l.invalid),onValueChange:v,open:m,setOpen:C});const y=(0,e.computed)(()=>V(p.value).map(u.toISODateString)),o=(0,e.ref)([]),_=r.value??c.value;return b.useFormReset(()=>o.value[0],()=>v(_)),g({checkValidity:()=>o.value[0]?.checkValidity()??!0,reportValidity:()=>o.value[0]?.reportValidity()??!0,setCustomValidity:t=>o.value[0]?.setCustomValidity(t)}),(t,M)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(P.default,null,{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"default",{},()=>[(0,e.createVNode)(E.default,(0,e.mergeProps)(t.$attrs,{placeholder:l.placeholder,locale:a.locale,"show-input":l.showInput}),null,16,["placeholder","locale","show-input"])])]),_:3}),a.name?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:0},(0,e.renderList)(y.value.length>0?y.value:[""],(B,O)=>((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:O,ref_for:!0,ref_key:"hiddenEls",ref:o,type:"text","aria-hidden":"true",tabindex:"-1",name:a.name,"^value":B,required:a.required,form:a.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,I))),128)):(0,e.createCommentVNode)("",!0)],64))}});exports.default=S;

package/dist/date-picker/DatePicker.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useFormReset as e}from"../utils/useFormReset.js";import{useOpenChangeComplete as a}from"../utils/useOpenChangeComplete.js";import t from"../utils/PopperRoot.vue.js";import{toCalendarValue as l}from"../utils/dateValue.js";import{emptySelection as o,isDateRange as n,toISODateString as u}from"../calendar/dateMath.js";import{DATE_PICKER_CONTEXT as r,nextDatePickerContentId as d,nextDatePickerTriggerId as i}from"./context.js";import s from"./DatePickerAnatomy.vue.js";import{Fragment as p,computed as c,createCommentVNode as m,createElementBlock as f,createVNode as v,defineComponent as y,mergeProps as g,openBlock as h,provide as C,ref as V,renderList as O,renderSlot as k,withCtx as x}from"vue";var B=["name","^value","required","form"],I=/* @__PURE__ */y({inheritAttrs:!1,__name:"DatePicker",props:{disabled:{type:Boolean,default:!1},selectionMode:{default:"single"},value:{default:void 0},defaultValue:{default:void 0},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},granularity:{default:"day"},placeholder:{default:"Select date"},locale:{default:void 0},showInput:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},required:{type:Boolean,default:!1},closeOnSelect:{type:Boolean,default:!0},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1}},emits:["update:value","value-change","update:open","open-change","open-change-complete"],setup(y,{expose:I,emit:S}){const j=y,D=S,M=V(null),P=V(null),R=c(()=>l(j.value,j.selectionMode,"value")),_=c(()=>l(j.defaultValue,j.selectionMode,"defaultValue")??o(j.selectionMode)),w=V(_.value),b=c(()=>void 0!==R.value?R.value:w.value),A=V(j.defaultOpen),E=c(()=>j.open??A.value);function q(e){void 0===R.value&&(w.value=e),D("update:value",e),D("value-change",e)}a(E,P,e=>D("open-change-complete",e)),C(r,{disabled:c(()=>j.disabled),triggerRef:M,contentRef:P,contentId:d(),triggerId:i(),value:b,get selectionMode(){return j.selectionMode},get granularity(){return j.granularity},closeOnSelect:c(()=>j.closeOnSelect),readOnly:c(()=>j.readOnly),invalid:c(()=>j.invalid),onValueChange:q,open:E,setOpen:function(e){void 0===j.open&&(A.value=e),D("update:open",e),D("open-change",e)}});const T=c(()=>{return(e=b.value,e?Array.isArray(e)?e:n(e)?null===e.end?[]:[e.start,e.end]:[e]:[]).map(u);var e}),F=V([]),N=R.value??_.value;return e(()=>F.value[0],()=>q(N)),I({checkValidity:()=>F.value[0]?.checkValidity()??!0,reportValidity:()=>F.value[0]?.reportValidity()??!0,setCustomValidity:e=>F.value[0]?.setCustomValidity(e)}),(e,a)=>(h(),f(p,null,[v(t,null,{default:x(()=>[k(e.$slots,"default",{},()=>[v(s,g(e.$attrs,{placeholder:y.placeholder,locale:y.locale,"show-input":y.showInput}),null,16,["placeholder","locale","show-input"])])]),_:3}),y.name?(h(!0),f(p,{key:0},O(T.value.length>0?T.value:[""],(e,a)=>(h(),f("input",{key:a,ref_for:!0,ref_key:"hiddenEls",ref:F,type:"text","aria-hidden":"true",tabindex:"-1",name:y.name,"^value":e,required:y.required,form:y.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,B))),128)):m("",!0)],64))}});export{I as default};
+import{useFormReset as e}from"../utils/useFormReset.js";import{useOpenChangeComplete as a}from"../utils/useOpenChangeComplete.js";import t from"../utils/PopperRoot.vue.js";import{toCalendarValue as l}from"../utils/date-value.js";import{emptySelection as o,isDateRange as n,toISODateString as r}from"../calendar/dateMath.js";import{DATE_PICKER_CONTEXT as u,nextDatePickerContentId as d,nextDatePickerTriggerId as i}from"./context.js";import s from"./DatePickerAnatomy.vue.js";import{Fragment as p,computed as c,createCommentVNode as m,createElementBlock as v,createVNode as f,defineComponent as y,mergeProps as g,openBlock as h,provide as C,ref as O,renderList as V,renderSlot as k,withCtx as x}from"vue";var B=["name","^value","required","form"],I=/* @__PURE__ */y({inheritAttrs:!1,__name:"DatePicker",props:{disabled:{type:Boolean,default:!1},selectionMode:{default:"single"},value:{},defaultValue:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},granularity:{default:"day"},placeholder:{default:"Select date"},locale:{},showInput:{type:Boolean,default:!1},name:{},form:{},required:{type:Boolean,default:!1},closeOnSelect:{type:Boolean,default:!0},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1}},emits:["update:value","value-change","update:open","open-change","open-change-complete"],setup(y,{expose:I,emit:S}){const b=y,j=S,D=O(null),M=O(null),P=c(()=>l(b.value,b.selectionMode,"value")),R=c(()=>l(b.defaultValue,b.selectionMode,"defaultValue")??o(b.selectionMode)),_=O(R.value),w=c(()=>void 0!==P.value?P.value:_.value),A=O(b.defaultOpen),E=c(()=>!b.disabled&&(b.open??A.value));function q(e){void 0===P.value&&(_.value=e),j("update:value",e),j("value-change",e)}a(E,M,e=>j("open-change-complete",e)),C(u,{disabled:c(()=>b.disabled),triggerRef:D,contentRef:M,contentId:d(),triggerId:i(),value:w,get selectionMode(){return b.selectionMode},get granularity(){return b.granularity},closeOnSelect:c(()=>b.closeOnSelect),readOnly:c(()=>b.readOnly),invalid:c(()=>b.invalid),onValueChange:q,open:E,setOpen:function(e){b.disabled||(void 0===b.open&&(A.value=e),j("update:open",e),j("open-change",e))}});const T=c(()=>{return(e=w.value,e?Array.isArray(e)?e:n(e)?null===e.end?[]:[e.start,e.end]:[e]:[]).map(r);var e}),F=O([]),N=P.value??R.value;return e(()=>F.value[0],()=>q(N)),I({checkValidity:()=>F.value[0]?.checkValidity()??!0,reportValidity:()=>F.value[0]?.reportValidity()??!0,setCustomValidity:e=>F.value[0]?.setCustomValidity(e)}),(e,a)=>(h(),v(p,null,[f(t,null,{default:x(()=>[k(e.$slots,"default",{},()=>[f(s,g(e.$attrs,{placeholder:b.placeholder,locale:y.locale,"show-input":b.showInput}),null,16,["placeholder","locale","show-input"])])]),_:3}),y.name?(h(!0),v(p,{key:0},V(T.value.length>0?T.value:[""],(e,a)=>(h(),v("input",{key:a,ref_for:!0,ref_key:"hiddenEls",ref:F,type:"text","aria-hidden":"true",tabindex:"-1",name:y.name,"^value":e,required:y.required,form:y.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,B))),128)):m("",!0)],64))}});export{I as default};

package/dist/date-picker/DatePickerAnatomy.vue.d.cts

@@ -1,12 +1,7 @@
-/**
- * Default anatomy when the date picker slot is empty: trigger with current
- * selection, portalled popup with typed field, calendar, and time field.
- * Input and TimeField render nothing outside their applicable modes, so both
- * can be placed unconditionally.
- */
+/** Default anatomy when the date picker slot is empty: trigger, portalled popup, typed field, calendar, and time field. */
 type __VLS_Props = {
     placeholder: string;
-    locale?: string;
+    locale?: string | undefined;
     showInput: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/date-picker/DatePickerAnatomy.vue.d.ts

@@ -1,12 +1,7 @@
-/**
- * Default anatomy when the date picker slot is empty: trigger with current
- * selection, portalled popup with typed field, calendar, and time field.
- * Input and TimeField render nothing outside their applicable modes, so both
- * can be placed unconditionally.
- */
+/** Default anatomy when the date picker slot is empty: trigger, portalled popup, typed field, calendar, and time field. */
 type __VLS_Props = {
     placeholder: string;
-    locale?: string;
+    locale?: string | undefined;
     showInput: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/date-picker/DatePickerAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const p=require("../calendar/dateMath.cjs"),_=require("./context.cjs"),f=require("./DatePickerCalendar.vue.cjs"),m=require("./DatePickerContent.vue.cjs"),k=require("./DatePickerInput.vue.cjs"),q=require("./DatePickerPortal.vue.cjs"),P=require("./DatePickerTimeField.vue.cjs"),y=require("./DatePickerTrigger.vue.cjs");let e=require("vue");var D=(0,e.defineComponent)({inheritAttrs:!1,__name:"DatePickerAnatomy",props:{placeholder:{},locale:{},showInput:{type:Boolean}},setup(i){const c=i,u=(0,e.useAttrs)(),l=(0,e.computed)(()=>u.id?{"aria-labelledby":u.id}:{}),o=(0,e.inject)(_.DATE_PICKER_CONTEXT);if(!o)throw new Error("<SkdxDatePickerAnatomy> must be used inside <SkdxDatePicker>.");function a(t,r){return t.toLocaleString(c.locale,{dateStyle:"medium",...r?{timeStyle:"short"}:{}})}function d(t,r){if(!t)return null;if(Array.isArray(t))return t.length?t.map(n=>a(n,r)).join(", "):null;if(p.isDateRange(t)){const n=a(t.start,r);return t.end?`${n} – ${a(t.end,r)}`:n}return a(t,r)}const s=(0,e.computed)(()=>d(o.value.value,o.granularity!=="day")??c.placeholder);return(t,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(y.default,(0,e.normalizeProps)((0,e.guardReactiveProps)(t.$attrs)),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(s.value),1)]),_:1},16),(0,e.createVNode)(q.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(m.default,(0,e.normalizeProps)((0,e.guardReactiveProps)(l.value)),{default:(0,e.withCtx)(()=>[i.showInput?((0,e.openBlock)(),(0,e.createBlock)(k.default,{key:0})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(f.default),(0,e.createVNode)(P.default)]),_:1},16)]),_:1})],64))}});exports.default=D;
+const p=require("../utils/injectRequired.cjs"),_=require("../calendar/dateMath.cjs"),q=require("./context.cjs"),f=require("./DatePickerCalendar.vue.cjs"),m=require("./DatePickerContent.vue.cjs"),k=require("./DatePickerInput.vue.cjs"),P=require("./DatePickerPortal.vue.cjs"),y=require("./DatePickerTimeField.vue.cjs"),D=require("./DatePickerTrigger.vue.cjs");let e=require("vue");var g=(0,e.defineComponent)({inheritAttrs:!1,__name:"DatePickerAnatomy",props:{placeholder:{},locale:{},showInput:{type:Boolean}},setup(o){const i=o,u=(0,e.useAttrs)(),l=(0,e.computed)(()=>u.id?{"aria-labelledby":u.id}:{}),c=p.injectRequired(q.DATE_PICKER_CONTEXT,"<SkdxDatePickerAnatomy> must be used inside <SkdxDatePicker>.");function a(t,r){return t.toLocaleString(i.locale,{dateStyle:"medium",...r?{timeStyle:"short"}:{}})}function d(t,r){if(!t)return null;if(Array.isArray(t))return t.length?t.map(n=>a(n,r)).join(", "):null;if(_.isDateRange(t)){const n=a(t.start,r);return t.end?`${n} – ${a(t.end,r)}`:n}return a(t,r)}const s=(0,e.computed)(()=>d(c.value.value,c.granularity!=="day")??i.placeholder);return(t,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(D.default,(0,e.normalizeProps)((0,e.guardReactiveProps)(t.$attrs)),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(s.value),1)]),_:1},16),(0,e.createVNode)(P.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(m.default,(0,e.normalizeProps)((0,e.guardReactiveProps)(l.value)),{default:(0,e.withCtx)(()=>[o.showInput?((0,e.openBlock)(),(0,e.createBlock)(k.default,{key:0})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(f.default),(0,e.createVNode)(y.default)]),_:1},16)]),_:1})],64))}});exports.default=g;

package/dist/date-picker/DatePickerAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{isDateRange as e}from"../calendar/dateMath.js";import{DATE_PICKER_CONTEXT as t}from"./context.js";import r from"./DatePickerCalendar.vue.js";import a from"./DatePickerContent.vue.js";import o from"./DatePickerInput.vue.js";import n from"./DatePickerPortal.vue.js";import i from"./DatePickerTimeField.vue.js";import s from"./DatePickerTrigger.vue.js";import{Fragment as l,computed as u,createBlock as m,createCommentVNode as c,createElementBlock as d,createTextVNode as p,createVNode as f,defineComponent as k,guardReactiveProps as v,inject as P,normalizeProps as y,openBlock as D,toDisplayString as h,useAttrs as j,withCtx as g}from"vue";var A=/* @__PURE__ */k({inheritAttrs:!1,__name:"DatePickerAnatomy",props:{placeholder:{},locale:{},showInput:{type:Boolean}},setup(k){const A=k,C=j(),_=u(()=>C.id?{"aria-labelledby":C.id}:{}),x=P(t);if(!x)throw new Error("<SkdxDatePickerAnatomy> must be used inside <SkdxDatePicker>.");function S(e,t){return e.toLocaleString(A.locale,{dateStyle:"medium",...t?{timeStyle:"short"}:{}})}const T=u(()=>function(t,r){if(!t)return null;if(Array.isArray(t))return t.length?t.map(e=>S(e,r)).join(", "):null;if(e(t)){const e=S(t.start,r);return t.end?`${e} – ${S(t.end,r)}`:e}return S(t,r)}(x.value.value,"day"!==x.granularity)??A.placeholder);return(e,t)=>(D(),d(l,null,[f(s,y(v(e.$attrs)),{default:g(()=>[p(h(T.value),1)]),_:1},16),f(n,null,{default:g(()=>[f(a,y(v(_.value)),{default:g(()=>[k.showInput?(D(),m(o,{key:0})):c("",!0),f(r),f(i)]),_:1},16)]),_:1})],64))}});export{A as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{isDateRange as t}from"../calendar/dateMath.js";import{DATE_PICKER_CONTEXT as r}from"./context.js";import a from"./DatePickerCalendar.vue.js";import o from"./DatePickerContent.vue.js";import i from"./DatePickerInput.vue.js";import n from"./DatePickerPortal.vue.js";import s from"./DatePickerTimeField.vue.js";import l from"./DatePickerTrigger.vue.js";import{Fragment as u,computed as m,createBlock as c,createCommentVNode as d,createElementBlock as p,createTextVNode as f,createVNode as k,defineComponent as v,guardReactiveProps as P,normalizeProps as j,openBlock as y,toDisplayString as D,useAttrs as g,withCtx as h}from"vue";var A=/* @__PURE__ */v({inheritAttrs:!1,__name:"DatePickerAnatomy",props:{placeholder:{},locale:{},showInput:{type:Boolean}},setup(v){const A=v,C=g(),_=m(()=>C.id?{"aria-labelledby":C.id}:{}),x=e(r,"<SkdxDatePickerAnatomy> must be used inside <SkdxDatePicker>.");function S(e,t){return e.toLocaleString(A.locale,{dateStyle:"medium",...t?{timeStyle:"short"}:{}})}const T=m(()=>function(e,r){if(!e)return null;if(Array.isArray(e))return e.length?e.map(e=>S(e,r)).join(", "):null;if(t(e)){const t=S(e.start,r);return e.end?`${t} – ${S(e.end,r)}`:t}return S(e,r)}(x.value.value,"day"!==x.granularity)??A.placeholder);return(e,t)=>(y(),p(u,null,[k(l,j(P(e.$attrs)),{default:h(()=>[f(D(T.value),1)]),_:1},16),k(n,null,{default:h(()=>[k(o,j(P(_.value)),{default:h(()=>[v.showInput?(y(),c(i,{key:0})):d("",!0),k(a),k(s)]),_:1},16)]),_:1})],64))}});export{A as default};