@hawiyah/vue 0.0.0-stage → 0.2.0

package/dist/calendar.d.ts

@@ -0,0 +1,183 @@
+import type { PropType } from "vue";
+import type { CalendarSystem } from "@hawiyah/core";
+export declare const Calendar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly modelValue: StringConstructor;
+    readonly defaultValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly month: StringConstructor;
+    readonly min: StringConstructor;
+    readonly max: StringConstructor;
+    readonly locale: {
+        readonly type: StringConstructor;
+        readonly default: "ar-SA";
+    };
+    readonly calendar: {
+        readonly type: PropType<CalendarSystem>;
+        readonly default: "gregory";
+    };
+    readonly weekStartsOn: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly disabled: BooleanConstructor;
+    readonly readonly: BooleanConstructor;
+    readonly label: StringConstructor;
+    readonly previousLabel: StringConstructor;
+    readonly nextLabel: StringConstructor;
+    readonly unsupportedMessage: StringConstructor;
+    readonly isDateDisabled: PropType<(value: string) => boolean>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (_value: string) => true;
+    "update:month": (_value: string) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly modelValue: StringConstructor;
+    readonly defaultValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly month: StringConstructor;
+    readonly min: StringConstructor;
+    readonly max: StringConstructor;
+    readonly locale: {
+        readonly type: StringConstructor;
+        readonly default: "ar-SA";
+    };
+    readonly calendar: {
+        readonly type: PropType<CalendarSystem>;
+        readonly default: "gregory";
+    };
+    readonly weekStartsOn: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly disabled: BooleanConstructor;
+    readonly readonly: BooleanConstructor;
+    readonly label: StringConstructor;
+    readonly previousLabel: StringConstructor;
+    readonly nextLabel: StringConstructor;
+    readonly unsupportedMessage: StringConstructor;
+    readonly isDateDisabled: PropType<(value: string) => boolean>;
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+    "onUpdate:month"?: ((_value: string) => any) | undefined;
+}>, {
+    readonly disabled: boolean;
+    readonly defaultValue: string;
+    readonly readonly: boolean;
+    readonly locale: string;
+    readonly calendar: CalendarSystem;
+    readonly weekStartsOn: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const DatePicker: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    calendar: {
+        type: PropType<CalendarSystem>;
+        default: undefined;
+    };
+    calendarSwitchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    calendarSystemLabel: StringConstructor;
+    gregoryLabel: StringConstructor;
+    hijriLabel: StringConstructor;
+    calendarLabel: StringConstructor;
+    openLabel: StringConstructor;
+    closeLabel: StringConstructor;
+    invalidMessage: StringConstructor;
+    label: StringConstructor;
+    hint: StringConstructor;
+    error: StringConstructor;
+    required: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    modelValue: StringConstructor;
+    defaultValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    month: StringConstructor;
+    min: StringConstructor;
+    max: StringConstructor;
+    locale: {
+        readonly type: StringConstructor;
+        readonly default: "ar-SA";
+    };
+    weekStartsOn: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    previousLabel: StringConstructor;
+    nextLabel: StringConstructor;
+    unsupportedMessage: StringConstructor;
+    isDateDisabled: PropType<(value: string) => boolean>;
+}>, () => string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNodeArrayChildren | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (_value: string) => true;
+    "update:calendar": (_value: CalendarSystem) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    calendar: {
+        type: PropType<CalendarSystem>;
+        default: undefined;
+    };
+    calendarSwitchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    calendarSystemLabel: StringConstructor;
+    gregoryLabel: StringConstructor;
+    hijriLabel: StringConstructor;
+    calendarLabel: StringConstructor;
+    openLabel: StringConstructor;
+    closeLabel: StringConstructor;
+    invalidMessage: StringConstructor;
+    label: StringConstructor;
+    hint: StringConstructor;
+    error: StringConstructor;
+    required: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    modelValue: StringConstructor;
+    defaultValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    month: StringConstructor;
+    min: StringConstructor;
+    max: StringConstructor;
+    locale: {
+        readonly type: StringConstructor;
+        readonly default: "ar-SA";
+    };
+    weekStartsOn: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    previousLabel: StringConstructor;
+    nextLabel: StringConstructor;
+    unsupportedMessage: StringConstructor;
+    isDateDisabled: PropType<(value: string) => boolean>;
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+    "onUpdate:calendar"?: ((_value: CalendarSystem) => any) | undefined;
+}>, {
+    disabled: boolean;
+    required: boolean;
+    defaultValue: string;
+    readonly: boolean;
+    locale: string;
+    calendar: CalendarSystem;
+    weekStartsOn: number;
+    calendarSwitchable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=calendar.d.ts.map

package/dist/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../src/calendar.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAapC,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,eAAe,CAAC;AAiCjE,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;uBAVS,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;;6BAQxB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;;;;kCAOhC,MAAM;6BACX,MAAM;;;;;;;;;;;;;;;uBAhBL,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;;6BAQxB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;;;;;;;;;;;4EAgThE,CAAC;AACH,eAAO,MAAM,UAAU;;cAMS,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAvT1B,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;;;;kCAkUhC,MAAM;gCACR,cAAc;;;cAZd,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAvT1B,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;;;;;;;;;;;;;4EAyfhE,CAAC"}

package/dist/calendar.js

@@ -0,0 +1,448 @@
+import { computed, defineComponent, h, mergeProps, nextTick, ref, watch, watchEffect, } from "vue";
+import { getCalendarLabels, formatCalendarDate, getCalendarMonth, getDirection, isDateInRange, isDisabled, isCalendarDateSupported, UMALQURA_MIN_DATE, UMALQURA_MAX_DATE, moveCalendarDate, } from "@hawiyah/core";
+import { Button, decorate } from "./forms.js";
+import { Dialog, Tooltip } from "./interactive.js";
+import { decorationProps, joinIds, useField, useFormReset, useValue, } from "./shared.js";
+function dateMessage(message) {
+    return message.split(/([0-9٠-٩]{4}-[0-9٠-٩]{2}-[0-9٠-٩]{2})/u).map(part => /^[0-9٠-٩]{4}-[0-9٠-٩]{2}-[0-9٠-٩]{2}$/u.test(part) ? h("bdi", { dir: "ltr" }, part) : part);
+}
+const calendarProps = {
+    modelValue: String,
+    defaultValue: { type: String, default: "" },
+    month: String,
+    min: String,
+    max: String,
+    locale: { type: String, default: "ar-SA" },
+    calendar: { type: String, default: "gregory" },
+    weekStartsOn: { type: Number, default: 0 },
+    disabled: Boolean,
+    readonly: Boolean,
+    label: String,
+    previousLabel: String,
+    nextLabel: String,
+    unsupportedMessage: String,
+    isDateDisabled: Function,
+};
+export const Calendar = defineComponent({
+    name: "HwCalendar",
+    inheritAttrs: false,
+    props: calendarProps,
+    emits: {
+        "update:modelValue": (_value) => true,
+        "update:month": (_value) => true,
+    },
+    setup(props, { attrs, emit, expose }) {
+        const copy = computed(() => getCalendarLabels(props.locale));
+        const model = useValue(() => props.modelValue, props.defaultValue, (v) => emit("update:modelValue", v));
+        const valid = (value) => value && isDateInRange(value) ? value : undefined;
+        const month = ref(valid(props.month) ?? valid(model.value.value));
+        const focused = ref();
+        const buttons = new Map();
+        const hidden = ref();
+        const blocked = (value) => !isCalendarDateSupported(value, props.calendar) ||
+            !isDateInRange(value, props.min, props.max) ||
+            Boolean(props.isDateDisabled?.(value));
+        const page = computed(() => getCalendarMonth({
+            month: month.value,
+            value: valid(model.value.value),
+            min: props.min,
+            max: props.max,
+            locale: props.locale,
+            calendar: props.calendar,
+            weekStartsOn: props.weekStartsOn,
+            fixedWeeks: true,
+        }));
+        const focusValue = computed(() => page.value.days.find((day) => day.value === focused.value && !blocked(day.value))?.value ??
+            page.value.days.find((day) => day.selected && !blocked(day.value))
+                ?.value ??
+            page.value.days.find((day) => !day.outside && !blocked(day.value))
+                ?.value ??
+            page.value.days.find((day) => !blocked(day.value))?.value);
+        function changeMonth(value) {
+            month.value = value;
+            emit("update:month", value);
+        }
+        function focusDate(value) {
+            if (props.min && value < props.min)
+                value = props.min;
+            if (props.max && value > props.max)
+                value = props.max;
+            if (blocked(value))
+                return;
+            focused.value = value;
+            if (!page.value.days.some((day) => day.value === value && !day.outside))
+                changeMonth(value);
+            void nextTick(() => buttons.get(value)?.focus());
+        }
+        watch(() => props.month, (value) => {
+            if (valid(value))
+                month.value = value;
+        });
+        watch(() => props.modelValue, (value) => {
+            if (valid(value)) {
+                month.value = value;
+                focused.value = value;
+            }
+        });
+        useFormReset(hidden, () => {
+            model.set(props.defaultValue);
+            month.value = valid(props.month) ?? valid(props.defaultValue);
+            focused.value = undefined;
+        });
+        expose({
+            focus: () => {
+                if (focusValue.value)
+                    buttons.get(focusValue.value)?.focus();
+            },
+        });
+        function move(value, amount, unit) {
+            try {
+                return moveCalendarDate(value, amount, unit, props.calendar);
+            }
+            catch (error) {
+                if (error instanceof RangeError)
+                    return undefined;
+                throw error;
+            }
+        }
+        function dateLabel(day) {
+            return isCalendarDateSupported(day.value, props.calendar)
+                ? formatCalendarDate(day.value, {
+                    locale: props.locale,
+                    calendar: props.calendar,
+                    dateStyle: "full",
+                })
+                : day.value;
+        }
+        function keyboard(event, value, index) {
+            if (props.disabled)
+                return;
+            let amount = 0;
+            let unit = "day";
+            switch (event.key) {
+                case "ArrowRight":
+                    amount =
+                        getDirection(event.currentTarget) === "rtl" ? -1 : 1;
+                    break;
+                case "ArrowLeft":
+                    amount =
+                        getDirection(event.currentTarget) === "rtl" ? 1 : -1;
+                    break;
+                case "ArrowDown":
+                    amount = 7;
+                    break;
+                case "ArrowUp":
+                    amount = -7;
+                    break;
+                case "Home":
+                    amount = -(index % 7);
+                    break;
+                case "End":
+                    amount = 6 - (index % 7);
+                    break;
+                case "PageUp":
+                    amount = -1;
+                    unit = event.shiftKey ? "year" : "month";
+                    break;
+                case "PageDown":
+                    amount = 1;
+                    unit = event.shiftKey ? "year" : "month";
+                    break;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            let candidate = move(value, amount, unit);
+            if (!candidate)
+                return;
+            if (props.min && candidate < props.min)
+                candidate = props.min;
+            if (props.max && candidate > props.max)
+                candidate = props.max;
+            for (let attempt = 0; attempt < 366 && blocked(candidate); attempt++) {
+                const next = move(candidate, amount < 0 ? -1 : 1, "day");
+                if (!next || !isDateInRange(next, props.min, props.max))
+                    return;
+                candidate = next;
+            }
+            focusDate(candidate);
+        }
+        return () => {
+            const monthStart = page.value.days.find((day) => !day.outside)?.value;
+            const previousAllowed = page.value.previous !== monthStart &&
+                getCalendarMonth({
+                    month: page.value.previous,
+                    min: props.min,
+                    max: props.max,
+                    calendar: props.calendar,
+                }).days.some((day) => !day.outside && !blocked(day.value));
+            const nextAllowed = page.value.next !== monthStart &&
+                getCalendarMonth({
+                    month: page.value.next,
+                    min: props.min,
+                    max: props.max,
+                    calendar: props.calendar,
+                }).days.some((day) => !day.outside && !blocked(day.value));
+            return h("div", mergeProps(attrs, { class: "hw-calendar" }), [
+                h("input", {
+                    ref: hidden,
+                    type: "hidden",
+                    name: attrs.name,
+                    form: attrs.form,
+                    value: model.value.value,
+                    disabled: props.disabled,
+                }),
+                h("div", { class: "hw-calendar-toolbar" }, [
+                    h(Button, {
+                        variant: "ghost",
+                        "aria-label": (props.previousLabel ?? copy.value.previous),
+                        class: "hw-calendar-prev",
+                        disabled: props.disabled || !previousAllowed,
+                        onClick: () => changeMonth(page.value.previous),
+                    }, () => (props.previousLabel ?? copy.value.previous)),
+                    h("div", { class: "hw-calendar-heading" }, [
+                        h("span", { "aria-live": "polite", "aria-atomic": "true" }, page.value.label),
+                        props.calendar === "islamic-umalqura" && h(Tooltip, { class: "hw-calendar-info", content: `${copy.value.range}: \u2066${UMALQURA_MIN_DATE} – ${UMALQURA_MAX_DATE}\u2069` }, () => h("span", { tabindex: 0, role: "img", class: "hw-calendar-info-icon hw-tooltip-trigger", "aria-label": copy.value.range }, "i")),
+                    ]),
+                    h(Button, {
+                        variant: "ghost",
+                        "aria-label": (props.nextLabel ?? copy.value.next),
+                        class: "hw-calendar-next",
+                        disabled: props.disabled || !nextAllowed,
+                        onClick: () => changeMonth(page.value.next),
+                    }, () => (props.nextLabel ?? copy.value.next)),
+                ]),
+                model.value.value &&
+                    !isCalendarDateSupported(model.value.value, props.calendar) &&
+                    h("p", { role: "status", class: "hw-sr-only" }, dateMessage((props.unsupportedMessage ?? copy.value.unsupported))),
+                h("table", {
+                    role: "grid",
+                    "aria-label": `${props.label ?? copy.value.calendar}: ${page.value.label}`,
+                    "aria-readonly": props.readonly || undefined,
+                }, [
+                    h("thead", {}, h("tr", {}, page.value.weekdays.map((day, index) => h("th", { key: index, scope: "col" }, day)))),
+                    h("tbody", {}, Array.from({ length: 6 }, (_, week) => h("tr", 
+                    // Keep overlapping weeks keyed by date when the visible month changes.
+                    // A positional row key can mount then remove the same date ref.
+                    { key: page.value.days[week * 7]?.value ?? week }, page.value.days
+                        .slice(week * 7, week * 7 + 7)
+                        .map((day, dayIndex) => h("td", {
+                        key: day.value,
+                        role: "gridcell",
+                        "aria-selected": day.selected,
+                    }, h("button", {
+                        ref: (element) => {
+                            if (element)
+                                buttons.set(day.value, element);
+                            else
+                                buttons.delete(day.value);
+                        },
+                        type: "button",
+                        class: "hw-calendar-day",
+                        "data-outside": day.outside ? "true" : undefined,
+                        "data-selected": day.selected ? "true" : undefined,
+                        "aria-current": day.today ? "date" : undefined,
+                        "aria-label": dateLabel(day),
+                        disabled: props.disabled ||
+                            day.disabled ||
+                            blocked(day.value),
+                        tabindex: focusValue.value === day.value ? 0 : -1,
+                        onFocus: () => {
+                            focused.value = day.value;
+                        },
+                        onKeydown: (event) => keyboard(event, day.value, week * 7 + dayIndex),
+                        onClick: () => {
+                            if (!props.disabled &&
+                                !props.readonly &&
+                                !blocked(day.value)) {
+                                model.set(day.value);
+                                focused.value = day.value;
+                                if (day.outside)
+                                    changeMonth(day.value);
+                            }
+                        },
+                    }, day.label)))))),
+                ]),
+            ]);
+        };
+    },
+});
+export const DatePicker = defineComponent({
+    name: "HwDatePicker",
+    inheritAttrs: false,
+    props: {
+        ...calendarProps,
+        ...decorationProps,
+        calendar: { type: String, default: undefined },
+        calendarSwitchable: { type: Boolean, default: true },
+        calendarSystemLabel: String,
+        gregoryLabel: String,
+        hijriLabel: String,
+        calendarLabel: String,
+        openLabel: String,
+        closeLabel: String,
+        invalidMessage: String,
+    },
+    emits: {
+        "update:modelValue": (_value) => true,
+        "update:calendar": (_value) => true,
+    },
+    setup(props, { attrs, emit, expose }) {
+        const copy = computed(() => getCalendarLabels(props.locale));
+        const field = useField(props, attrs);
+        const element = ref();
+        const calendar = ref();
+        const open = ref(false);
+        const calendarSystem = useValue(() => props.calendar, "gregory", (v) => emit("update:calendar", v));
+        const model = useValue(() => props.modelValue, props.defaultValue, (v) => emit("update:modelValue", v));
+        const draft = ref(model.value.value);
+        const editing = ref(false);
+        watch(() => model.value.value, value => { draft.value = value; });
+        const blocked = () => props.disabled || props.readonly || !element.value || isDisabled(element.value);
+        const commit = (value) => {
+            const canonical = !value || isDateInRange(value);
+            draft.value = canonical && props.modelValue !== undefined ? props.modelValue : value;
+            if (canonical)
+                model.set(value);
+        };
+        const show = () => { if (!blocked()) {
+            open.value = true;
+            void nextTick(() => calendar.value?.focus());
+        } };
+        watch(() => props.disabled || props.readonly, disabled => { if (disabled)
+            open.value = false; });
+        const minimum = computed(() => calendarSystem.value.value === "islamic-umalqura" &&
+            (!props.min || props.min < UMALQURA_MIN_DATE)
+            ? UMALQURA_MIN_DATE
+            : props.min);
+        const maximum = computed(() => calendarSystem.value.value === "islamic-umalqura" &&
+            (!props.max || props.max > UMALQURA_MAX_DATE)
+            ? UMALQURA_MAX_DATE
+            : props.max);
+        const formattedDate = computed(() => {
+            const value = model.value.value;
+            return value && isCalendarDateSupported(value, calendarSystem.value.value)
+                ? formatCalendarDate(value, { locale: props.locale, calendar: calendarSystem.value.value, dateStyle: "full" })
+                : "";
+        });
+        const validationMessage = computed(() => {
+            const value = draft.value;
+            if (!value)
+                return "";
+            if (!isDateInRange(value))
+                return (props.invalidMessage ?? copy.value.invalid);
+            if (!isCalendarDateSupported(value, calendarSystem.value.value)) {
+                return calendarSystem.value.value === "islamic-umalqura"
+                    ? (props.unsupportedMessage ?? copy.value.unsupported)
+                    : (props.invalidMessage ?? copy.value.invalid);
+            }
+            return !isDateInRange(value, minimum.value, maximum.value) ||
+                props.isDateDisabled?.(value)
+                ? (props.invalidMessage ?? copy.value.invalid)
+                : "";
+        });
+        watchEffect(() => element.value?.setCustomValidity(validationMessage.value));
+        useFormReset(element, () => {
+            model.set(props.defaultValue);
+            draft.value = props.modelValue ?? props.defaultValue;
+            open.value = false;
+        });
+        expose({ element, focus: () => element.value?.focus() });
+        return () => decorate({ ...props, label: props.label ?? (attrs['aria-label'] || attrs['aria-labelledby'] ? undefined : copy.value.date) }, field.id.value, h("div", { class: "hw-date-picker" }, [
+            h("div", { class: "hw-date-picker-control" }, [
+                h("input", mergeProps(attrs, field.controlAttrs.value, {
+                    ref: element,
+                    type: "text",
+                    name: undefined,
+                    placeholder: attrs.placeholder ?? "YYYY-MM-DD",
+                    "aria-haspopup": "dialog",
+                    "aria-controls": `${field.id.value}-dialog`,
+                    class: "hw-input",
+                    value: !editing.value && draft.value && !validationMessage.value && isCalendarDateSupported(draft.value, calendarSystem.value.value) ? formatCalendarDate(draft.value, { locale: props.locale, calendar: calendarSystem.value.value, dateStyle: "medium" }) : draft.value,
+                    min: minimum.value,
+                    max: maximum.value,
+                    disabled: props.disabled,
+                    readonly: props.readonly,
+                    "aria-invalid": validationMessage.value
+                        ? true
+                        : field.controlAttrs.value["aria-invalid"],
+                    "aria-describedby": joinIds(field.controlAttrs.value["aria-describedby"], formattedDate.value && `${field.id.value}-formatted`, validationMessage.value &&
+                        `${field.id.value}-validation-error`),
+                    onKeydown: (event) => {
+                        if (!event.defaultPrevented && !event.isComposing && !event.ctrlKey && !event.metaKey && !event.shiftKey && event.key === "ArrowDown" && !blocked()) {
+                            event.preventDefault();
+                            show();
+                        }
+                    },
+                    onFocus: (event) => { if (!blocked()) {
+                        event.target.value = draft.value;
+                        event.target.select();
+                        editing.value = true;
+                    } },
+                    onBlur: () => { editing.value = false; },
+                    onInput: (event) => {
+                        if (!blocked())
+                            commit(event.target.value);
+                    },
+                })),
+                h(Button, {
+                    variant: "ghost",
+                    class: "hw-date-picker-trigger",
+                    disabled: props.disabled || props.readonly,
+                    "aria-label": (props.openLabel ?? copy.value.open),
+                    "aria-expanded": open.value,
+                    "aria-haspopup": "dialog",
+                    "aria-controls": `${field.id.value}-dialog`,
+                    onClick: show,
+                }, () => h("span", { class: "hw-date-picker-icon", "aria-hidden": "true" })),
+            ]),
+            h("input", { type: "hidden", name: attrs.name, form: attrs.form, disabled: props.disabled, value: isDateInRange(model.value.value) ? model.value.value : "" }),
+            h("output", {
+                id: `${field.id.value}-formatted`,
+                for: field.id.value,
+                class: "hw-sr-only hw-date-picker-value",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                hidden: !formattedDate.value,
+            }, formattedDate.value),
+            validationMessage.value &&
+                h("p", {
+                    id: `${field.id.value}-validation-error`,
+                    class: "hw-error",
+                    role: "alert",
+                }, dateMessage(validationMessage.value)),
+            h(Dialog, {
+                id: `${field.id.value}-dialog`,
+                open: open.value,
+                "onUpdate:open": (value) => {
+                    open.value = value;
+                },
+                title: (props.calendarLabel ?? copy.value.choose),
+                closeLabel: (props.closeLabel ?? copy.value.close),
+            }, () => [
+                h("div", { class: "hw-calendar-options" }, [props.calendarSwitchable && h("div", { class: "hw-calendar-system hw-calendar-switch", role: "radiogroup", "aria-label": (props.calendarSystemLabel ?? copy.value.system), "data-calendar": calendarSystem.value.value }, ["gregory", "islamic-umalqura"].map(system => h("label", { key: system }, [
+                        h("input", { type: "radio", name: `${field.id.value}-calendar-system`, form: "", value: system, checked: calendarSystem.value.value === system, disabled: props.disabled || props.readonly, onChange: async (event) => { const group = event.target.closest('.hw-calendar-switch'); calendarSystem.set(system); await nextTick(); group?.querySelectorAll('input[type=radio]').forEach(radio => { radio.checked = radio.value === calendarSystem.value.value; }); } }),
+                        h("span", {}, system === "gregory" ? (props.gregoryLabel ?? copy.value.gregorian) : (props.hijriLabel ?? copy.value.hijri)),
+                    ]))),
+                ]),
+                h(Calendar, {
+                    ...props,
+                    calendar: calendarSystem.value.value,
+                    month: open.value && isDateInRange(model.value.value)
+                        ? model.value.value
+                        : props.month,
+                    label: (props.calendarLabel ?? copy.value.choose),
+                    ref: calendar,
+                    modelValue: model.value.value,
+                    "onUpdate:modelValue": (value) => {
+                        if (!blocked()) {
+                            commit(value);
+                            open.value = false;
+                        }
+                    },
+                }),
+            ]),
+        ]));
+    },
+});
+//# sourceMappingURL=calendar.js.map