@skdx/vue 0.26.0 → 0.28.0

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

@@ -1,70 +1,104 @@
-import { type Granularity, type HourCycle, type SegmentType } from '../utils/dateSegments.cjs';
+import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType } from '../utils/dateSegments.cjs';
+import { type DateInput } from '../utils/dateValue.cjs';
 /**
- * The Vue implementation of the shared DateField contract (see `@skdx/shared`'s
- * `dateFieldContract`). Segmented keyboard entry of a date — the typed
- * counterpart of `SkdxCalendar`, and the typed-input part of `SkdxDatePicker`.
- * Renders a `role="group"` holding one `role="spinbutton"` per segment,
- * interleaved with the locale's own separators: both the segment order and
- * those separators come from `Intl.DateTimeFormat.formatToParts`, so `en-US`
- * reads `mm/dd/yyyy` and `de-DE` reads `dd.mm.yyyy` with no bundled locale
- * table.
+ * 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 (wrapping at its bounds), Arrow
- * Left/Right move between segments (mirrored under `dir="rtl"`), digits type
- * with roll-over — typing `1` then `5` into a month gives `05`, not a rejected
- * keystroke — and Backspace/Delete clear a segment back to its placeholder.
- * `value-change` only ever fires with a complete date or `null`, never a
- * half-typed one.
+ * 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 with the surrounding
- * `<form>`, and `checkValidity()`/`reportValidity()` — exposed on this root —
- * delegate to it. Resetting the form restores the date the field was declared
- * with, emitting `value-change` so a controlled parent follows it.
+ * 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.
  */
 type __VLS_Props = {
-    /** Current date, for controlled usage. Pair with `v-model:value` or `@value-change`. `null` while any segment is still untyped. */
-    value?: Date | null;
-    /** Initial date, for uncontrolled usage. Omitted: every segment starts on its placeholder. */
-    defaultValue?: Date | null;
+    /**
+     * 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`.
+     */
+    value?: DateInput | null;
+    /**
+     * Initial date, used only when the field is uncontrolled.
+     * @default null — every segment starts on its placeholder.
+     */
+    defaultValue?: DateInput | null;
     /**
      * How far down the field is editable. `'day'` is date-only; anything past it
-     * appends hour/minute (and, at `'second'`, seconds) — the `datetime-local`
-     * equivalent.
+     * appends hour/minute (and, at `'second'`, seconds).
+     * @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. Omitted: whatever the locale
-     * resolves to.
+     * only — the submitted value is always 24 hour.
+     * @default undefined — whatever the locale resolves to.
      */
     hourCycle?: HourCycle;
     /**
-     * BCP-47 locale deciding segment order, the literals between segments and the
-     * AM/PM names — `en-US` orders month/day/year, `de-DE` orders day.month.year.
-     * Omitted: the runtime's default locale.
+     * BCP-47 locale deciding segment order, the literals between segments and the AM/PM names.
+     * @default undefined — the runtime's default locale.
      */
     locale?: string;
-    /** Disables the field and drops every segment out of the tab order. */
+    /**
+     * 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.
+     */
+    minDate?: DateInput;
+    /**
+     * Latest accepted date. A value after it fails constraint validation with `rangeOverflow`.
+     * @default undefined — no maximum; any year from 1 to 9999.
+     */
+    maxDate?: DateInput;
+    /**
+     * Disables the field and drops every segment out of the tab order.
+     * @default false
+     */
     disabled?: boolean;
-    /** Segments stay focusable and readable but refuse every edit. */
+    /**
+     * Segments stay focusable and readable but refuse every edit.
+     * @default false
+     */
     readOnly?: boolean;
-    /** Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. */
+    /**
+     * 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.
+     */
+    isDateUnavailable?: (date: Date) => boolean;
+    /**
+     * Whether a one-digit month, day or hour renders zero-padded — `05/09/2026`
+     * rather than `5/9/2026`.
+     * @default true
+     */
+    shouldForceLeadingZeros?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. Additive:
+     * an out-of-range or unavailable date sets both anyway.
+     * @default false
+     */
     invalid?: boolean;
-    /** Marks the field required — an incomplete field is `valueMissing`. */
+    /**
+     * Marks the field required — an incomplete field is `valueMissing`.
+     * @default false
+     */
     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.
+     * @default undefined
      */
     name?: string;
+    /**
+     * 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.
+     */
+    form?: string;
     /**
      * Writing direction, which decides whether ArrowLeft moves to the previous or
-     * the next segment. Omitted: read off the nearest `[dir]` ancestor or
-     * `document.dir`.
+     * the next segment.
+     * @default undefined — read off the nearest `[dir]` ancestor or `document.dir`.
      */
     dir?: 'ltr' | 'rtl';
     /**
@@ -85,12 +119,27 @@ type __VLS_Props = {
      * @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', …).
+     */
+    getSegmentPlaceholder?: SegmentPlaceholderResolver;
 };
 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.
+     */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: Date | null) => any;
     "value-change": (value: Date | null) => any;
@@ -98,18 +147,24 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
     "onUpdate:value"?: ((value: Date | null) => any) | undefined;
     "onValue-change"?: ((value: Date | null) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    dir: "ltr" | "rtl";
+    value: DateInput | null;
+    readOnly: boolean;
     required: boolean;
     name: string;
-    value: Date | null;
     invalid: boolean;
-    defaultValue: Date | null;
-    dir: "ltr" | "rtl";
-    readOnly: boolean;
+    defaultValue: DateInput | null;
     locale: string;
     hourCycle: HourCycle;
+    minDate: DateInput;
+    maxDate: DateInput;
+    isDateUnavailable: (date: Date) => boolean;
     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.d.ts

@@ -1,70 +1,104 @@
-import { type Granularity, type HourCycle, type SegmentType } from '../utils/dateSegments.js';
+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 (see `@skdx/shared`'s
- * `dateFieldContract`). Segmented keyboard entry of a date — the typed
- * counterpart of `SkdxCalendar`, and the typed-input part of `SkdxDatePicker`.
- * Renders a `role="group"` holding one `role="spinbutton"` per segment,
- * interleaved with the locale's own separators: both the segment order and
- * those separators come from `Intl.DateTimeFormat.formatToParts`, so `en-US`
- * reads `mm/dd/yyyy` and `de-DE` reads `dd.mm.yyyy` with no bundled locale
- * table.
+ * 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 (wrapping at its bounds), Arrow
- * Left/Right move between segments (mirrored under `dir="rtl"`), digits type
- * with roll-over — typing `1` then `5` into a month gives `05`, not a rejected
- * keystroke — and Backspace/Delete clear a segment back to its placeholder.
- * `value-change` only ever fires with a complete date or `null`, never a
- * half-typed one.
+ * 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 with the surrounding
- * `<form>`, and `checkValidity()`/`reportValidity()` — exposed on this root —
- * delegate to it. Resetting the form restores the date the field was declared
- * with, emitting `value-change` so a controlled parent follows it.
+ * 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.
  */
 type __VLS_Props = {
-    /** Current date, for controlled usage. Pair with `v-model:value` or `@value-change`. `null` while any segment is still untyped. */
-    value?: Date | null;
-    /** Initial date, for uncontrolled usage. Omitted: every segment starts on its placeholder. */
-    defaultValue?: Date | null;
+    /**
+     * 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`.
+     */
+    value?: DateInput | null;
+    /**
+     * Initial date, used only when the field is uncontrolled.
+     * @default null — every segment starts on its placeholder.
+     */
+    defaultValue?: DateInput | null;
     /**
      * How far down the field is editable. `'day'` is date-only; anything past it
-     * appends hour/minute (and, at `'second'`, seconds) — the `datetime-local`
-     * equivalent.
+     * appends hour/minute (and, at `'second'`, seconds).
+     * @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. Omitted: whatever the locale
-     * resolves to.
+     * only — the submitted value is always 24 hour.
+     * @default undefined — whatever the locale resolves to.
      */
     hourCycle?: HourCycle;
     /**
-     * BCP-47 locale deciding segment order, the literals between segments and the
-     * AM/PM names — `en-US` orders month/day/year, `de-DE` orders day.month.year.
-     * Omitted: the runtime's default locale.
+     * BCP-47 locale deciding segment order, the literals between segments and the AM/PM names.
+     * @default undefined — the runtime's default locale.
      */
     locale?: string;
-    /** Disables the field and drops every segment out of the tab order. */
+    /**
+     * 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.
+     */
+    minDate?: DateInput;
+    /**
+     * Latest accepted date. A value after it fails constraint validation with `rangeOverflow`.
+     * @default undefined — no maximum; any year from 1 to 9999.
+     */
+    maxDate?: DateInput;
+    /**
+     * Disables the field and drops every segment out of the tab order.
+     * @default false
+     */
     disabled?: boolean;
-    /** Segments stay focusable and readable but refuse every edit. */
+    /**
+     * Segments stay focusable and readable but refuse every edit.
+     * @default false
+     */
     readOnly?: boolean;
-    /** Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. */
+    /**
+     * 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.
+     */
+    isDateUnavailable?: (date: Date) => boolean;
+    /**
+     * Whether a one-digit month, day or hour renders zero-padded — `05/09/2026`
+     * rather than `5/9/2026`.
+     * @default true
+     */
+    shouldForceLeadingZeros?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. Additive:
+     * an out-of-range or unavailable date sets both anyway.
+     * @default false
+     */
     invalid?: boolean;
-    /** Marks the field required — an incomplete field is `valueMissing`. */
+    /**
+     * Marks the field required — an incomplete field is `valueMissing`.
+     * @default false
+     */
     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.
+     * @default undefined
      */
     name?: string;
+    /**
+     * 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.
+     */
+    form?: string;
     /**
      * Writing direction, which decides whether ArrowLeft moves to the previous or
-     * the next segment. Omitted: read off the nearest `[dir]` ancestor or
-     * `document.dir`.
+     * the next segment.
+     * @default undefined — read off the nearest `[dir]` ancestor or `document.dir`.
      */
     dir?: 'ltr' | 'rtl';
     /**
@@ -85,12 +119,27 @@ type __VLS_Props = {
      * @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', …).
+     */
+    getSegmentPlaceholder?: SegmentPlaceholderResolver;
 };
 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.
+     */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: Date | null) => any;
     "value-change": (value: Date | null) => any;
@@ -98,18 +147,24 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
     "onUpdate:value"?: ((value: Date | null) => any) | undefined;
     "onValue-change"?: ((value: Date | null) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    dir: "ltr" | "rtl";
+    value: DateInput | null;
+    readOnly: boolean;
     required: boolean;
     name: string;
-    value: Date | null;
     invalid: boolean;
-    defaultValue: Date | null;
-    dir: "ltr" | "rtl";
-    readOnly: boolean;
+    defaultValue: DateInput | null;
     locale: string;
     hourCycle: HourCycle;
+    minDate: DateInput;
+    maxDate: DateInput;
+    isDateUnavailable: (date: Date) => boolean;
     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 q=require("../utils/useFormReset.cjs"),d=require("../utils/dateSegments.cjs"),T=require("../utils/SegmentedField.vue.cjs");let t=require("vue");var b=(0,t.defineComponent)({__name:"DateField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"day"},hourCycle:{default:void 0},locale:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},dir:{default:void 0},getSegmentLabel:{type:Function,default:void 0},emptySegmentText:{default:d.EMPTY_VALUE_TEXT}},emits:["update:value","value-change"],setup(a,{expose:g,emit:p}){const e=a,v=p,r=(0,t.computed)(()=>d.resolveHourCycle(e.locale,e.hourCycle)),f=(0,t.ref)(e.defaultValue??null),n=(0,t.computed)(()=>e.value!==void 0?e.value:f.value),i=(0,t.ref)(n.value?d.dateToValues(n.value,r.value):{}),m=(0,t.computed)(()=>n.value?n.value.getTime():null);function y(u,l){return d.isComplete(d.buildSegments({kind:"date",granularity:e.granularity,locale:e.locale,hourCycle:l,values:u}))?d.valuesToDate(u,l):null}(0,t.watch)([m,r],([u,l])=>{const s=y(i.value,l);if(u===null){s!==null&&(i.value={});return}s!==null&&s.getTime()===u||(i.value=d.dateToValues(new Date(u),l))});const V=(0,t.computed)(()=>n.value?d.dateToFormValue(n.value,e.granularity):null);function h(u){i.value=u;const l=y(u,r.value);(l?l.getTime():null)!==m.value&&(e.value===void 0&&(f.value=l),v("update:value",l),v("value-change",l))}const c=(0,t.ref)(null),o=e.value??e.defaultValue??null;return q.useFormReset(()=>c.value?.inputEl,()=>{i.value=o?d.dateToValues(o,r.value):{},e.value===void 0&&(f.value=o),v("update:value",o),v("value-change",o)}),g({checkValidity:()=>c.value?.inputEl?.checkValidity()??!0,reportValidity:()=>c.value?.inputEl?.reportValidity()??!0}),(u,l)=>((0,t.openBlock)(),(0,t.createBlock)(T.default,{family:"date-field",class:"skdx-date-field","data-part":"root","data-skdx-component":"date-field",ref_key:"fieldRef",ref:c,kind:"date",granularity:a.granularity,locale:a.locale,"hour-cycle":r.value,values:i.value,"form-value":V.value,disabled:a.disabled,"read-only":a.readOnly,invalid:a.invalid,required:a.required,name:a.name,dir:a.dir,"get-segment-label":a.getSegmentLabel,"empty-segment-text":a.emptySegmentText,onValuesChange:h},null,8,["granularity","locale","hour-cycle","values","form-value","disabled","read-only","invalid","required","name","dir","get-segment-label","empty-segment-text"]))}});exports.default=b;
+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;

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 l,buildSegments as a,dateToFormValue as u,dateToValues as t,isComplete as d,resolveHourCycle as n,valuesToDate as i}from"../utils/dateSegments.js";import o from"../utils/SegmentedField.vue.js";import{computed as r,createBlock as v,defineComponent as s,openBlock as m,ref as c,watch as f}from"vue";var y=/* @__PURE__ */s({__name:"DateField",props:{value:{default:void 0},defaultValue:{default:null},granularity:{default:"day"},hourCycle:{default:void 0},locale:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},dir:{default:void 0},getSegmentLabel:{type:Function,default:void 0},emptySegmentText:{default:l}},emits:["update:value","value-change"],setup(l,{expose:s,emit:y}){const p=l,g=y,h=r(()=>n(p.locale,p.hourCycle)),T=c(p.defaultValue??null),V=r(()=>void 0!==p.value?p.value:T.value),b=c(V.value?t(V.value,h.value):{}),k=r(()=>V.value?V.value.getTime():null);function x(e,l){return d(a({kind:"date",granularity:p.granularity,locale:p.locale,hourCycle:l,values:e}))?i(e,l):null}f([k,h],([e,l])=>{const a=x(b.value,l);null!==e?null!==a&&a.getTime()===e||(b.value=t(new Date(e),l)):null!==a&&(b.value={})});const C=r(()=>V.value?u(V.value,p.granularity):null);function S(e){b.value=e;const l=x(e,h.value);(l?l.getTime():null)!==k.value&&(void 0===p.value&&(T.value=l),g("update:value",l),g("value-change",l))}const B=c(null),E=p.value??p.defaultValue??null;return e(()=>B.value?.inputEl,()=>{b.value=E?t(E,h.value):{},void 0===p.value&&(T.value=E),g("update:value",E),g("value-change",E)}),s({checkValidity:()=>B.value?.inputEl?.checkValidity()??!0,reportValidity:()=>B.value?.inputEl?.reportValidity()??!0}),(e,a)=>(m(),v(o,{family:"date-field",class:"skdx-date-field","data-part":"root","data-skdx-component":"date-field",ref_key:"fieldRef",ref:B,kind:"date",granularity:l.granularity,locale:l.locale,"hour-cycle":h.value,values:b.value,"form-value":C.value,disabled:l.disabled,"read-only":l.readOnly,invalid:l.invalid,required:l.required,name:l.name,dir:l.dir,"get-segment-label":l.getSegmentLabel,"empty-segment-text":l.emptySegmentText,onValuesChange:S},null,8,["granularity","locale","hour-cycle","values","form-value","disabled","read-only","invalid","required","name","dir","get-segment-label","empty-segment-text"]))}});export{y 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 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};

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

@@ -1,72 +1,63 @@
-import { type CalendarSelectionMode, type CalendarValue } from '../calendar/dateMath.cjs';
+import { type CalendarSelectionMode, type CalendarValue, type CalendarValueInput } from '../calendar/dateMath.cjs';
 import type { Granularity } from '../utils/dateSegments.cjs';
 /**
- * Root of a date picker: composes Popover's open/positioning machinery with
- * `SkdxCalendar`'s date-grid logic — a date picker is just "a Calendar shown
- * in a Popper popup that closes on selection". Owns the selected `value`
- * and the popup's `open` state, handing both down to every other
- * `SkdxDatePicker*` part via context. Renders no DOM of its own.
- *
- * Emits `open-change` the instant the state flips and `open-change-complete`
- * once the change has finished on screen — after `SkdxDatePickerContent`'s enter
- * or exit animation ends, or in the same task when it declares none.
- *
- * Works controlled (`v-model:value`, `v-model:open`) or uncontrolled
- * (`default-value`, `default-open`).
- *
- * With a `name`, the selection is submitted by the surrounding `<form>` as
- * local-time `YYYY-MM-DD` strings, exactly like `<input type="date">` — one
- * entry in `single` mode, one entry per date in `multiple`, and start then end
- * in `range`. `required` reports `valueMissing` while nothing is selected, and
- * `checkValidity()`/`reportValidity()` — exposed on this root — delegate to
- * those inputs. Resetting the owning `<form>` restores the selection the picker
- * was declared with, emitting `value-change` so a controlled parent follows it.
+ * 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.
  */
 type __VLS_Props = {
-    /**
-     * Disables `SkdxDatePickerTrigger` and prevents the popup opening.
-     *
-     * Part of the shared DatePicker contract, and it was missing here: without
-     * it a disabled date picker could not be expressed at all in Vue, and
-     * `_trigger.css` — which keys the whole disabled treatment on
-     * `[data-disabled]` — painted it as an enabled control, hover included, in
-     * every theme.
+    /** Disables trigger and prevents popup opening.
+     * @default false
      */
     disabled?: boolean;
-    /**
-     * How many dates the composed calendar selects at once, which decides the
-     * shape of `value` — see `CalendarSelectionMode`. Also decides when the
-     * popup auto-closes: immediately in `single`, once the range is closed in
-     * `range`, never in `multiple`.
+    /** Selection mode (single/multiple/range); determines `value` shape.
+     * @default 'single'
      */
     selectionMode?: CalendarSelectionMode;
-    /** Current selection, for controlled usage. Pair with `v-model:value`. Its shape follows `selectionMode`. */
-    value?: CalendarValue;
-    /** Initial selection, for uncontrolled usage. Its shape follows `selectionMode`. */
-    defaultValue?: CalendarValue;
-    /** Whether the popup is open, for controlled usage. Pair with `v-model:open`. */
+    /** Current selection for controlled usage; shape follows mode. */
+    value?: CalendarValueInput;
+    /** Initial selection, used only when the picker is uncontrolled. */
+    defaultValue?: CalendarValueInput;
+    /** Whether popup is open for controlled usage. */
     open?: boolean;
-    /** Initial open state, for uncontrolled usage. */
+    /** Initial open state for uncontrolled usage.
+     * @default false
+     */
     defaultOpen?: boolean;
-    /**
-     * How far down `SkdxDatePickerInput` and `SkdxDatePickerTimeField` are
-     * editable. `'day'` is date-only; anything past it is date-time mode, which
-     * also stops the popup auto-closing on a calendar selection — the user
-     * still has a time to set.
+    /** Granularity down to which entry is editable (day/hour/minute/second).
+     * @default 'day'
      */
     granularity?: Granularity;
-    /**
-     * Form field name. The selection is submitted under it as local-time
-     * `YYYY-MM-DD` strings — one entry in `single` mode, one entry per date in
-     * `multiple`, and start then end in `range`.
+    /** Text shown when no selection exists; ignored with custom `children`.
+     * @default 'Select date'
+     */
+    placeholder?: string;
+    /** BCP 47 locale tag for trigger formatting (ignored when `children` replaces). */
+    locale?: string;
+    /** Derive popup with typed-entry field (single mode only).
+     * @default false
      */
+    showInput?: boolean;
+    /** Form field name; submits as YYYY-MM-DD strings. */
     name?: string;
-    /**
-     * Marks the picker required: with nothing selected it reports
-     * `valueMissing`. A range still anchored on its start counts as nothing
-     * selected. Only meaningful alongside `name`.
+    /** Form id this picker submits into. */
+    form?: string;
+    /** Marks picker required; valueMissing while unselected.
+     * @default false
      */
     required?: boolean;
+    /** Close popup after selection (not in multiple mode).
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /** Makes picker non-editable; trigger still opens, everything focusable, no selection changes.
+     * @default false
+     */
+    readOnly?: boolean;
+    /** Marks picker invalid via data-invalid / aria-invalid.
+     * @default false
+     */
+    invalid?: boolean;
 };
 declare var __VLS_4: {};
 type __VLS_Slots = {} & {
@@ -77,6 +68,13 @@ 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.
+     */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
     "open-change": (open: boolean) => any;
@@ -90,15 +88,22 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     "onValue-change"?: ((value: CalendarValue) => any) | undefined;
     "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    placeholder: string;
     open: boolean;
     defaultOpen: boolean;
+    value: CalendarValueInput;
+    readOnly: boolean;
     required: boolean;
     name: string;
-    value: CalendarValue;
-    defaultValue: CalendarValue;
+    invalid: boolean;
+    defaultValue: CalendarValueInput;
+    closeOnSelect: boolean;
+    locale: string;
     selectionMode: CalendarSelectionMode;
     granularity: Granularity;
+    showInput: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;