@vielzeug/refine 1.5.1 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/async.cjs +9 -9
- package/dist/async.cjs.map +1 -1
- package/dist/async.js +30 -31
- package/dist/async.js.map +1 -1
- package/dist/button.cjs +6 -6
- package/dist/button.cjs.map +1 -1
- package/dist/button.js +29 -30
- package/dist/button.js.map +1 -1
- package/dist/calendar.cjs +44 -44
- package/dist/calendar.cjs.map +1 -1
- package/dist/calendar.js +115 -117
- package/dist/calendar.js.map +1 -1
- package/dist/checkbox-group.cjs +7 -7
- package/dist/checkbox-group.cjs.map +1 -1
- package/dist/checkbox-group.js +71 -73
- package/dist/checkbox-group.js.map +1 -1
- package/dist/checkbox.cjs +3 -3
- package/dist/checkbox.cjs.map +1 -1
- package/dist/checkbox.js +28 -29
- package/dist/checkbox.js.map +1 -1
- package/dist/code-window.cjs +7 -7
- package/dist/code-window.cjs.map +1 -1
- package/dist/code-window.js +17 -18
- package/dist/code-window.js.map +1 -1
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.cjs.map +1 -1
- package/dist/combobox.js +11 -12
- package/dist/combobox.js.map +1 -1
- package/dist/custom-elements.json +5267 -5267
- package/dist/datagrid.cjs +66 -66
- package/dist/datagrid.cjs.map +1 -1
- package/dist/datagrid.js +267 -268
- package/dist/datagrid.js.map +1 -1
- package/dist/date-picker.cjs +11 -11
- package/dist/date-picker.cjs.map +1 -1
- package/dist/date-picker.js +8 -9
- package/dist/date-picker.js.map +1 -1
- package/dist/file-input.cjs +6 -6
- package/dist/file-input.cjs.map +1 -1
- package/dist/file-input.js +50 -51
- package/dist/file-input.js.map +1 -1
- package/dist/grid.cjs +1 -1
- package/dist/grid.cjs.map +1 -1
- package/dist/grid.js +47 -48
- package/dist/grid.js.map +1 -1
- package/dist/icon.cjs +1 -1
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.js +26 -27
- package/dist/icon.js.map +1 -1
- package/dist/input.cjs +20 -20
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +98 -100
- package/dist/input.js.map +1 -1
- package/dist/message-composer.cjs +18 -18
- package/dist/message-composer.cjs.map +1 -1
- package/dist/message-composer.js +113 -115
- package/dist/message-composer.js.map +1 -1
- package/dist/navbar.cjs +11 -11
- package/dist/navbar.cjs.map +1 -1
- package/dist/navbar.js +78 -79
- package/dist/navbar.js.map +1 -1
- package/dist/otp-input.cjs +4 -4
- package/dist/otp-input.cjs.map +1 -1
- package/dist/otp-input.js +31 -32
- package/dist/otp-input.js.map +1 -1
- package/dist/progress.cjs +13 -13
- package/dist/progress.cjs.map +1 -1
- package/dist/progress.js +45 -46
- package/dist/progress.js.map +1 -1
- package/dist/radio-group.cjs +5 -5
- package/dist/radio-group.cjs.map +1 -1
- package/dist/radio-group.js +83 -85
- package/dist/radio-group.js.map +1 -1
- package/dist/radio.cjs +3 -3
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.js +27 -28
- package/dist/radio.js.map +1 -1
- package/dist/rating.cjs +4 -4
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.js +30 -31
- package/dist/rating.js.map +1 -1
- package/dist/select.cjs +4 -4
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +88 -89
- package/dist/select.js.map +1 -1
- package/dist/sidebar.cjs +11 -11
- package/dist/sidebar.cjs.map +1 -1
- package/dist/sidebar.js +97 -98
- package/dist/sidebar.js.map +1 -1
- package/dist/skeleton.cjs +3 -3
- package/dist/skeleton.cjs.map +1 -1
- package/dist/skeleton.js +23 -24
- package/dist/skeleton.js.map +1 -1
- package/dist/slider.cjs +3 -3
- package/dist/slider.cjs.map +1 -1
- package/dist/slider.js +65 -66
- package/dist/slider.js.map +1 -1
- package/dist/switch.cjs +3 -3
- package/dist/switch.cjs.map +1 -1
- package/dist/switch.js +23 -24
- package/dist/switch.js.map +1 -1
- package/dist/tab-panel.cjs +7 -7
- package/dist/tab-panel.cjs.map +1 -1
- package/dist/tab-panel.js +21 -23
- package/dist/tab-panel.js.map +1 -1
- package/dist/testing.cjs +1 -1
- package/dist/testing.cjs.map +1 -1
- package/dist/testing.js +4 -5
- package/dist/testing.js.map +1 -1
- package/dist/textarea.cjs +13 -13
- package/dist/textarea.cjs.map +1 -1
- package/dist/textarea.js +92 -94
- package/dist/textarea.js.map +1 -1
- package/dist/time-picker.cjs +9 -9
- package/dist/time-picker.cjs.map +1 -1
- package/dist/time-picker.js +47 -48
- package/dist/time-picker.js.map +1 -1
- package/package.json +1 -1
- package/dist/ore/dist/_dev.cjs +0 -2
- package/dist/ore/dist/_dev.cjs.map +0 -1
- package/dist/ore/dist/_dev.js +0 -12
- package/dist/ore/dist/_dev.js.map +0 -1
- package/dist/ore/dist/base-element.cjs +0 -2
- package/dist/ore/dist/base-element.cjs.map +0 -1
- package/dist/ore/dist/base-element.js +0 -158
- package/dist/ore/dist/base-element.js.map +0 -1
- package/dist/ore/dist/context.cjs +0 -2
- package/dist/ore/dist/context.cjs.map +0 -1
- package/dist/ore/dist/context.js +0 -11
- package/dist/ore/dist/context.js.map +0 -1
- package/dist/ore/dist/define.cjs +0 -2
- package/dist/ore/dist/define.cjs.map +0 -1
- package/dist/ore/dist/define.js +0 -27
- package/dist/ore/dist/define.js.map +0 -1
- package/dist/ore/dist/directives/classMap.cjs +0 -1
- package/dist/ore/dist/directives/classMap.js +0 -1
- package/dist/ore/dist/directives/each.cjs +0 -1
- package/dist/ore/dist/directives/each.js +0 -5
- package/dist/ore/dist/directives/live.cjs +0 -2
- package/dist/ore/dist/directives/live.cjs.map +0 -1
- package/dist/ore/dist/directives/live.js +0 -6
- package/dist/ore/dist/directives/live.js.map +0 -1
- package/dist/ore/dist/directives/model.cjs +0 -1
- package/dist/ore/dist/directives/model.js +0 -3
- package/dist/ore/dist/directives/raw.cjs +0 -2
- package/dist/ore/dist/directives/raw.cjs.map +0 -1
- package/dist/ore/dist/directives/raw.js +0 -38
- package/dist/ore/dist/directives/raw.js.map +0 -1
- package/dist/ore/dist/directives/styleMap.cjs +0 -2
- package/dist/ore/dist/directives/styleMap.cjs.map +0 -1
- package/dist/ore/dist/directives/styleMap.js +0 -20
- package/dist/ore/dist/directives/styleMap.js.map +0 -1
- package/dist/ore/dist/directives/when.cjs +0 -2
- package/dist/ore/dist/directives/when.cjs.map +0 -1
- package/dist/ore/dist/directives/when.js +0 -38
- package/dist/ore/dist/directives/when.js.map +0 -1
- package/dist/ore/dist/directives.cjs +0 -1
- package/dist/ore/dist/directives.js +0 -8
- package/dist/ore/dist/errors.cjs +0 -3
- package/dist/ore/dist/errors.cjs.map +0 -1
- package/dist/ore/dist/errors.js +0 -50
- package/dist/ore/dist/errors.js.map +0 -1
- package/dist/ore/dist/forms/context.cjs +0 -2
- package/dist/ore/dist/forms/context.cjs.map +0 -1
- package/dist/ore/dist/forms/context.js +0 -6
- package/dist/ore/dist/forms/context.js.map +0 -1
- package/dist/ore/dist/forms/field.cjs +0 -2
- package/dist/ore/dist/forms/field.cjs.map +0 -1
- package/dist/ore/dist/forms/field.js +0 -42
- package/dist/ore/dist/forms/field.js.map +0 -1
- package/dist/ore/dist/forms.cjs +0 -1
- package/dist/ore/dist/forms.js +0 -3
- package/dist/ore/dist/observers/intersection-observe.cjs +0 -2
- package/dist/ore/dist/observers/intersection-observe.cjs.map +0 -1
- package/dist/ore/dist/observers/intersection-observe.js +0 -12
- package/dist/ore/dist/observers/intersection-observe.js.map +0 -1
- package/dist/ore/dist/observers/media-observe.cjs +0 -1
- package/dist/ore/dist/observers/media-observe.js +0 -1
- package/dist/ore/dist/observers/mutation-observe.cjs +0 -1
- package/dist/ore/dist/observers/mutation-observe.js +0 -1
- package/dist/ore/dist/observers/resize-observe.cjs +0 -2
- package/dist/ore/dist/observers/resize-observe.cjs.map +0 -1
- package/dist/ore/dist/observers/resize-observe.js +0 -20
- package/dist/ore/dist/observers/resize-observe.js.map +0 -1
- package/dist/ore/dist/observers.cjs +0 -1
- package/dist/ore/dist/observers.js +0 -5
- package/dist/ore/dist/props.cjs +0 -2
- package/dist/ore/dist/props.cjs.map +0 -1
- package/dist/ore/dist/props.js +0 -56
- package/dist/ore/dist/props.js.map +0 -1
- package/dist/ore/dist/runtime.cjs +0 -2
- package/dist/ore/dist/runtime.cjs.map +0 -1
- package/dist/ore/dist/runtime.js +0 -25
- package/dist/ore/dist/runtime.js.map +0 -1
- package/dist/ore/dist/testing/flush.cjs +0 -2
- package/dist/ore/dist/testing/flush.cjs.map +0 -1
- package/dist/ore/dist/testing/flush.js +0 -11
- package/dist/ore/dist/testing/flush.js.map +0 -1
- package/dist/ore/dist/testing/mount.cjs +0 -2
- package/dist/ore/dist/testing/mount.cjs.map +0 -1
- package/dist/ore/dist/testing/mount.js +0 -94
- package/dist/ore/dist/testing/mount.js.map +0 -1
- package/dist/ore/dist/testing/query.cjs +0 -2
- package/dist/ore/dist/testing/query.cjs.map +0 -1
- package/dist/ore/dist/testing/query.js +0 -12
- package/dist/ore/dist/testing/query.js.map +0 -1
- package/dist/ore/dist/testing/render-hook.cjs +0 -1
- package/dist/ore/dist/testing/render-hook.js +0 -3
- package/dist/ore/dist/testing/testing.cjs +0 -1
- package/dist/ore/dist/testing/testing.js +0 -4
- package/dist/ore/dist/testing/wait.cjs +0 -1
- package/dist/ore/dist/testing/wait.js +0 -1
- package/dist/ore/dist/testing.cjs +0 -1
- package/dist/ore/dist/testing.js +0 -6
- package/dist/ore/dist/types/bindings.cjs +0 -2
- package/dist/ore/dist/types/bindings.cjs.map +0 -1
- package/dist/ore/dist/types/bindings.js +0 -15
- package/dist/ore/dist/types/bindings.js.map +0 -1
- package/dist/ore/dist/types.cjs +0 -2
- package/dist/ore/dist/types.cjs.map +0 -1
- package/dist/ore/dist/types.js +0 -15
- package/dist/ore/dist/types.js.map +0 -1
- package/dist/ore/dist/utils/css.cjs +0 -2
- package/dist/ore/dist/utils/css.cjs.map +0 -1
- package/dist/ore/dist/utils/css.js +0 -18
- package/dist/ore/dist/utils/css.js.map +0 -1
- package/dist/ore/dist/utils/dom.cjs +0 -2
- package/dist/ore/dist/utils/dom.cjs.map +0 -1
- package/dist/ore/dist/utils/dom.js +0 -43
- package/dist/ore/dist/utils/dom.js.map +0 -1
- package/dist/ore/dist/utils/id.cjs +0 -2
- package/dist/ore/dist/utils/id.cjs.map +0 -1
- package/dist/ore/dist/utils/id.js +0 -4
- package/dist/ore/dist/utils/id.js.map +0 -1
package/dist/date-picker.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.cjs","names":[],"sources":["../src/inputs/date-picker/date-picker.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport {\n createDatePickerControl,\n createDropdownPositioner,\n formatDisplayDate,\n parseIso,\n toIsoString,\n type DatePickerView,\n} from '../../headless';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './date-picker.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreDatePickerEvents = {\n change: { isoValue: string | null };\n};\n\nexport type OreDatePickerProps = {\n /** Theme color */\n color?: ThemeColor;\n /** Disable the picker */\n disabled?: boolean;\n /** Validation error message */\n error?: string;\n /** Expand to container width */\n fullwidth?: boolean;\n /** Helper text below the field */\n helper?: string;\n /** Visible label */\n label?: string;\n /** Label placement */\n 'label-placement'?: 'inset' | 'outside';\n /** Locale for day/month names (default: browser locale) */\n locale?: string;\n /** Latest selectable date in ISO 8601 format (yyyy-MM-dd) */\n max?: string;\n /** Earliest selectable date in ISO 8601 format (yyyy-MM-dd) */\n min?: string;\n /** Form field name */\n name?: string;\n /** Placeholder shown in the text trigger */\n placeholder?: string;\n /** Mark field as required */\n required?: boolean;\n /** Border radius */\n rounded?: RoundedSize;\n /** Component size */\n size?: ComponentSize;\n /**\n * Selected date in ISO 8601 format (yyyy-MM-dd).\n * @example '2025-06-15'\n */\n value?: string;\n /** Visual variant */\n variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n /**\n * Day-of-week indices to disable (0 = Sunday … 6 = Saturday).\n * Pass as a JSON array attribute or a JS property.\n * @example\n * ```html\n * <ore-date-picker weekend-days=\"[0,6]\"></ore-date-picker>\n * ```\n */\n 'weekend-days'?: number[];\n};\n\n/**\n * An accessible, keyboard-navigable date picker with an inline calendar popup.\n * Supports min/max bounds, disabled weekend days, and form association.\n *\n * @element ore-date-picker\n *\n * @attr {string} value - Selected date in ISO 8601 format (yyyy-MM-dd)\n * @attr {string} min - Minimum selectable date (yyyy-MM-dd)\n * @attr {string} max - Maximum selectable date (yyyy-MM-dd)\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} placeholder - Trigger placeholder\n * @attr {boolean} disabled - Disable the picker\n * @attr {boolean} required - Required field\n * @attr {string} name - Form field name\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} locale - BCP 47 locale string\n * @attr {string} weekend-days - Comma-separated day indices to disable\n *\n * @fires change - Fired when a date is selected. detail: { isoValue: string | null }\n *\n * @slot label - Custom label for the trigger field\n * @slot prefix - Content before the trigger text (e.g. icon)\n * @slot helper - Custom helper text\n * @slot error - Custom error content\n *\n * @cssprop --date-picker-bg - Calendar background\n * @cssprop --date-picker-border-color - Calendar border color\n * @cssprop --date-picker-radius - Calendar border radius\n * @cssprop --date-picker-day-selected-bg - Background of selected day\n * @cssprop --date-picker-day-today-color - Color of today's date number\n * @cssprop --date-picker-day-outside-opacity - Opacity of days outside visible month\n *\n * @part field - The trigger button/field\n * @part calendar - The floating calendar panel\n * @part header - Calendar header (nav + label)\n * @part grid - Day grid\n * @part day - Individual day cell\n *\n * @example\n * ```html\n * <!-- Single date with constraints -->\n * <ore-date-picker label=\"Appointment date\" name=\"date\" min=\"2025-01-01\" max=\"2025-12-31\" color=\"primary\"></ore-date-picker>\n *\n *\n * <!-- Outside label, bordered variant -->\n * <ore-date-picker label=\"Start date\" label-placement=\"outside\" variant=\"bordered\"></ore-date-picker>\n * ```\n */\nexport const DATE_PICKER_TAG = 'ore-date-picker' as const;\n\ndefine<OreDatePickerProps>(DATE_PICKER_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n ...roundableBundle,\n error: prop.string(),\n fullwidth: prop.bool(false),\n helper: prop.string(),\n label: prop.string(),\n 'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n locale: prop.string(),\n max: prop.string(),\n min: prop.string(),\n name: prop.string(),\n placeholder: prop.string(),\n required: prop.bool(false),\n value: prop.string(),\n variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n 'weekend-days': prop.json([] as number[]),\n },\n\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreDatePickerEvents>();\n\n // ── Signals ─────────────────────────────────────────────────────────────\n\n const isOpen = signal(false);\n\n // ── Selected date: local-override pattern ──────────────────────────────\n // localSelection holds a user-initiated pick (or undefined = no override).\n // selectedDate falls back to the value prop reactively — no setInterval needed.\n\n const localSelection = signal<Temporal.PlainDate | null | undefined>(undefined);\n\n const selectedDate = computed(() =>\n localSelection.value !== undefined ? localSelection.value : parseIso(props.value.value),\n );\n\n // ── Form context ────────────────────────────────────────────────────────\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n const isDisabled = fCtxProps.disabled;\n const locale = computed(() => props.locale.value || (typeof navigator !== 'undefined' ? navigator.language : 'en'));\n\n // ── Date-picker control ─────────────────────────────────────────────────\n\n const ctrl = createDatePickerControl({\n get locale() {\n return locale.value;\n },\n get max() {\n return parseIso(props.max.value);\n },\n get min() {\n return parseIso(props.min.value);\n },\n onChange(date) {\n localSelection.value = date;\n isOpen.value = false;\n ctrl.setView('day');\n currentView.value = 'day';\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n emit('change', { isoValue: toIsoString(date) });\n },\n get value() {\n return selectedDate.value;\n },\n get weekendDays() {\n return props['weekend-days'].value ?? [];\n },\n });\n\n // ── Reactive display state ────────────────────────────────────────────\n // Three separate primitive signals — the proven pattern.\n\n const currentView = signal<DatePickerView>('day');\n const displayYear = signal(ctrl.displayYear());\n const displayMonth = signal(ctrl.displayMonth()); // 1-indexed (Temporal)\n\n // ── Form value (host is formAssociated) ──────────────────────────────────\n\n useField<string>({\n disabled: isDisabled,\n toFormValue: (v) => v || null,\n value: computed(() => toIsoString(selectedDate.value) ?? ''),\n });\n\n const dialogId = `date-picker-${Math.random().toString(36).slice(2, 9)}-calendar`;\n\n // ── Floating position ────────────────────────────────────────────────────\n // The old CSS-only `position: absolute; top: 100%` positioned the calendar relative to\n // the host box — fine until the host sits near a scroll/clip ancestor's edge (e.g. a form\n // grid inside a dialog), where the same absolute box also expands that ancestor's\n // *scrollable* overflow area even though it never changes the ancestor's own layout size,\n // which reads as \"the dialog got bigger\"/jumped. `createDropdownPositioner` — the same\n // Orbit-powered primitive `ore-select`'s dropdown already uses — positions via `fixed` +\n // computed `top`/`left`, auto-detecting both the nearest clipping ancestor (so flip/shift\n // keep the calendar within the dialog panel, not just the page viewport) and any ancestor\n // that establishes a containing block for `position: fixed` (a dialog panel's entrance\n // transition commonly leaves a permanent, if visually-identity, `transform` at rest) —\n // see `createDropdownPositioner`'s own `boundary`/`containingBlock` docs.\n const triggerRef = ref<HTMLElement>();\n const calendarRef = ref<HTMLElement>();\n\n const positioner = createDropdownPositioner({\n getFloating: () => calendarRef.value ?? null,\n getReference: () => triggerRef.value ?? null,\n matchWidth: false,\n offsetPx: 4,\n });\n\n let stopAutoUpdate: (() => void) | null = null;\n\n // ── Derived display values ───────────────────────────────────────────────\n\n const triggerText = computed(() => {\n if (selectedDate.value) return formatDisplayDate(selectedDate.value, locale.value);\n\n return props.placeholder.value || '';\n });\n\n const displayMonth_ = computed(() => {\n const d = Temporal.PlainDate.from({ day: 1, month: displayMonth.value, year: displayYear.value });\n\n return format(d, { intl: { month: 'long' }, locale: locale.value, tz: 'UTC' });\n });\n\n const displayYear_ = computed(() => String(displayYear.value));\n const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n const dayCells = computed(() => {\n void displayYear.value;\n void displayMonth.value;\n void selectedDate.value; // re-run when selection changes to refresh isSelected flags\n\n return ctrl.dayCells();\n });\n const monthCells = computed(() => {\n void displayYear.value;\n\n return ctrl.monthCells();\n });\n const yearCells = computed(() => {\n void displayYear.value;\n\n return ctrl.yearCells();\n });\n const weekdayLabels = computed(() => ctrl.weekdayLabels());\n const tabIndex = () => (isDisabled.value ? '-1' : '0');\n\n // ── Navigation handlers ──────────────────────────────────────────────────\n // In year/month views navigate by year; in day view navigate by month.\n\n function handlePrev(): void {\n if (currentView.value === 'day') ctrl.prevMonth();\n else ctrl.prevYear();\n\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n function handleNext(): void {\n if (currentView.value === 'day') ctrl.nextMonth();\n else ctrl.nextYear();\n\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n function handleHeaderClick(): void {\n const views: DatePickerView[] = ['day', 'month', 'year'];\n const next = views[(views.indexOf(currentView.value) + 1) % views.length];\n\n ctrl.setView(next);\n currentView.value = next;\n }\n\n function handleSelectMonth(month: number): void {\n ctrl.goTo(ctrl.displayYear(), month);\n ctrl.setView('day');\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n currentView.value = 'day';\n }\n\n function handleSelectYear(year: number): void {\n ctrl.goTo(year, ctrl.displayMonth());\n ctrl.setView('month');\n displayYear.value = ctrl.displayYear();\n currentView.value = 'month';\n }\n\n function handleSelectDay(isoStr: string): void {\n const date = parseIso(isoStr);\n\n if (!date) return;\n\n ctrl.select(date);\n }\n\n function handleDayKeydown(e: KeyboardEvent): void {\n const cell = e.currentTarget as HTMLElement;\n const grid = cell.closest('.cal-grid-days');\n\n if (!grid) return;\n\n const allCells = Array.from(grid.querySelectorAll<HTMLElement>('.cal-cell-day'));\n const idx = allCells.indexOf(cell);\n\n if (idx === -1) return;\n\n let target: HTMLElement | undefined;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleSelectDay(cell.dataset.iso ?? '');\n\n return;\n } else if (e.key === 'ArrowRight') {\n target = allCells[idx + 1];\n } else if (e.key === 'ArrowLeft') {\n target = allCells[idx - 1];\n } else if (e.key === 'ArrowDown') {\n target = allCells[idx + 7];\n } else if (e.key === 'ArrowUp') {\n target = allCells[idx - 7];\n } else if (e.key === 'Home') {\n target = allCells[Math.floor(idx / 7) * 7];\n } else if (e.key === 'End') {\n target = allCells[Math.floor(idx / 7) * 7 + 6];\n } else {\n return;\n }\n\n e.preventDefault();\n target?.focus();\n }\n\n // ── Month/year-cell keyboard navigation (fixed 4-column grid) ─────────────\n\n function handleGridKeydown(e: KeyboardEvent, cellSelector: string, columns: number, onSelect: () => void): void {\n const cell = e.currentTarget as HTMLElement;\n const grid = cell.closest('.cal-grid');\n\n if (!grid) return;\n\n const allCells = Array.from(grid.querySelectorAll<HTMLElement>(cellSelector));\n const idx = allCells.indexOf(cell);\n\n if (idx === -1) return;\n\n let target: HTMLElement | undefined;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onSelect();\n\n return;\n } else if (e.key === 'ArrowRight') {\n target = allCells[idx + 1];\n } else if (e.key === 'ArrowLeft') {\n target = allCells[idx - 1];\n } else if (e.key === 'ArrowDown') {\n target = allCells[idx + columns];\n } else if (e.key === 'ArrowUp') {\n target = allCells[idx - columns];\n } else if (e.key === 'Home') {\n target = allCells[Math.floor(idx / columns) * columns];\n } else if (e.key === 'End') {\n target = allCells[Math.min(Math.floor(idx / columns) * columns + columns - 1, allCells.length - 1)];\n } else {\n return;\n }\n\n e.preventDefault();\n target?.focus();\n }\n\n // ── Open / close ─────────────────────────────────────────────────────────\n\n function openPicker(): void {\n if (isDisabled.value) return;\n\n isOpen.value = true;\n ctrl.setView('day');\n currentView.value = 'day';\n\n const sel = selectedDate.value;\n\n if (sel) {\n ctrl.goTo(sel.year, sel.month);\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n positioner.update();\n stopAutoUpdate = positioner.startAutoUpdate?.() ?? null;\n }\n\n function closePicker(): void {\n isOpen.value = false;\n ctrl.setView('day');\n currentView.value = 'day';\n stopAutoUpdate?.();\n stopAutoUpdate = null;\n }\n\n function handleTriggerClick(): void {\n if (isOpen.value) closePicker();\n else openPicker();\n }\n\n // ── Keyboard handlers ────────────────────────────────────────────────────\n\n function handleTriggerKeydown(e: KeyboardEvent): void {\n if (isDisabled.value) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleTriggerClick();\n } else if (e.key === 'Escape' && isOpen.value) {\n e.preventDefault();\n closePicker();\n }\n }\n\n function handleCalendarKeydown(e: KeyboardEvent): void {\n if (e.key === 'Escape') {\n e.preventDefault();\n closePicker();\n }\n }\n\n function handleOutsideClick(e: PointerEvent | MouseEvent): void {\n if (!isOpen.value) return;\n\n const path = e.composedPath();\n\n if (!path.includes(el)) closePicker();\n }\n\n // ── Lifecycle ────────────────────────────────────────────────────────────\n\n onMounted(() => {\n document.addEventListener('pointerdown', handleOutsideClick, { capture: true });\n\n return () => {\n document.removeEventListener('pointerdown', handleOutsideClick, { capture: true });\n stopAutoUpdate?.();\n stopAutoUpdate = null;\n };\n });\n\n // ── Host bindings ────────────────────────────────────────────────────────\n\n bind({\n attr: {\n open: () => (isOpen.value ? true : undefined),\n },\n });\n\n // ── Template ─────────────────────────────────────────────────────────────\n\n const inputValue = () => triggerText.value;\n const inputLabel = () => props.label.value ?? '';\n const inputPlaceholder = () => props.placeholder.value ?? '';\n const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n const inputColor = () => props.color?.value ?? undefined;\n const inputSize = () => fCtxProps.size?.value ?? undefined;\n const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n const inputRounded = () => props.rounded?.value ?? undefined;\n const inputHelper = () => props.helper.value ?? '';\n const inputError = () => props.error.value ?? '';\n const inputDisabled = () => (isDisabled.value ? true : undefined);\n const inputRequired = () => (props.required.value ? true : undefined);\n const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n return html`\n <!-- Trigger: ore-input in readonly display mode -->\n <ore-input\n class=\"trigger\"\n ref=\"${triggerRef}\"\n readonly\n tabindex=\"${tabIndex}\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n aria-controls=\"${dialogId}\"\n :aria-expanded=\"${() => String(isOpen.value)}\"\n :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n :value=\"${inputValue}\"\n :label=\"${inputLabel}\"\n :placeholder=\"${inputPlaceholder}\"\n :label-placement=\"${inputLabelPlacement}\"\n :color=\"${inputColor}\"\n :size=\"${inputSize}\"\n :variant=\"${inputVariant}\"\n :rounded=\"${inputRounded}\"\n :helper=\"${inputHelper}\"\n :error=\"${inputError}\"\n ?disabled=\"${inputDisabled}\"\n ?required=\"${inputRequired}\"\n ?fullwidth=\"${inputFullwidth}\"\n @click=\"${handleTriggerClick}\"\n @keydown=\"${handleTriggerKeydown}\">\n <ore-icon slot=\"suffix\" name=\"calendar\" size=\"16\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n </ore-input>\n\n <!-- Calendar popup -->\n <div\n class=\"calendar\"\n ref=\"${calendarRef}\"\n id=\"${dialogId}\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-label=\"${() => `Choose date — ${displayLabel.value}`}\"\n ?data-open=\"${isOpen}\"\n @keydown=\"${handleCalendarKeydown}\">\n <!-- Calendar header -->\n <div class=\"cal-header\" part=\"header\">\n <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous\" @click=\"${handlePrev}\">\n <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n <button\n class=\"cal-label-btn\"\n type=\"button\"\n :aria-label=\"${() =>\n `Switch to ${currentView.value === 'day' ? 'month' : currentView.value === 'month' ? 'year' : 'day'} view`}\"\n @click=\"${handleHeaderClick}\">\n <span class=\"cal-label-month\">${displayMonth_}</span><span class=\"cal-label-sep\" aria-hidden=\"true\">/</span\n ><span class=\"cal-label-year\">${displayYear_}</span>\n </button>\n <button class=\"nav-btn\" type=\"button\" aria-label=\"Next\" @click=\"${handleNext}\">\n <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n </div>\n\n <!-- Day view: flat 7-column CSS grid, weekday headers + day cells -->\n <div\n class=\"cal-grid cal-grid-days\"\n role=\"grid\"\n part=\"grid\"\n :aria-label=\"${() => displayLabel.value}\"\n ?hidden=\"${() => currentView.value !== 'day'}\">\n <div role=\"row\" class=\"cal-grid-row\">\n ${() =>\n weekdayLabels.value.map(\n (lbl) => html`<div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>`,\n )}\n </div>\n ${() => {\n const cells = dayCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\" class=\"cal-grid-row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-day\"\n role=\"gridcell\"\n part=\"day\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n :aria-current=\"${() => (cell.isToday ? 'date' : null)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-today=\"${() => cell.isToday}\"\n ?data-outside=\"${() => cell.isOutsideMonth}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n data-iso=\"${cell.iso}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => handleSelectDay(cell.iso)}\"\n @keydown=\"${handleDayKeydown}\">\n ${String(cell.day)}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n\n <!-- Month view -->\n <div\n class=\"cal-grid cal-grid-months\"\n role=\"grid\"\n :aria-label=\"${() => displayYear_.value}\"\n ?hidden=\"${() => currentView.value !== 'month'}\">\n ${() => {\n const cells = monthCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-month\"\n role=\"gridcell\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => {\n if (!cell.isDisabled) handleSelectMonth(cell.month);\n }}\"\n @keydown=\"${(e: KeyboardEvent) =>\n handleGridKeydown(e, '.cal-cell-month', 4, () => {\n if (!cell.isDisabled) handleSelectMonth(cell.month);\n })}\">\n ${cell.shortLabel}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n\n <!-- Year view -->\n <div\n class=\"cal-grid cal-grid-years\"\n role=\"grid\"\n aria-label=\"Select year\"\n ?hidden=\"${() => currentView.value !== 'year'}\">\n ${() => {\n const cells = yearCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-year\"\n role=\"gridcell\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => {\n if (!cell.isDisabled) handleSelectYear(cell.year);\n }}\"\n @keydown=\"${(e: KeyboardEvent) =>\n handleGridKeydown(e, '.cal-cell-year', 4, () => {\n if (!cell.isDisabled) handleSelectYear(cell.year);\n })}\">\n ${String(cell.year)}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n </div>\n `;\n },\n\n shadow: { delegatesFocus: true },\n styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"date-picker.cjs","names":[],"sources":["../src/inputs/date-picker/date-picker.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport {\n createDatePickerControl,\n createDropdownPositioner,\n formatDisplayDate,\n parseIso,\n toIsoString,\n type DatePickerView,\n} from '../../headless';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './date-picker.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreDatePickerEvents = {\n change: { isoValue: string | null };\n};\n\nexport type OreDatePickerProps = {\n /** Theme color */\n color?: ThemeColor;\n /** Disable the picker */\n disabled?: boolean;\n /** Validation error message */\n error?: string;\n /** Expand to container width */\n fullwidth?: boolean;\n /** Helper text below the field */\n helper?: string;\n /** Visible label */\n label?: string;\n /** Label placement */\n 'label-placement'?: 'inset' | 'outside';\n /** Locale for day/month names (default: browser locale) */\n locale?: string;\n /** Latest selectable date in ISO 8601 format (yyyy-MM-dd) */\n max?: string;\n /** Earliest selectable date in ISO 8601 format (yyyy-MM-dd) */\n min?: string;\n /** Form field name */\n name?: string;\n /** Placeholder shown in the text trigger */\n placeholder?: string;\n /** Mark field as required */\n required?: boolean;\n /** Border radius */\n rounded?: RoundedSize;\n /** Component size */\n size?: ComponentSize;\n /**\n * Selected date in ISO 8601 format (yyyy-MM-dd).\n * @example '2025-06-15'\n */\n value?: string;\n /** Visual variant */\n variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n /**\n * Day-of-week indices to disable (0 = Sunday … 6 = Saturday).\n * Pass as a JSON array attribute or a JS property.\n * @example\n * ```html\n * <ore-date-picker weekend-days=\"[0,6]\"></ore-date-picker>\n * ```\n */\n 'weekend-days'?: number[];\n};\n\n/**\n * An accessible, keyboard-navigable date picker with an inline calendar popup.\n * Supports min/max bounds, disabled weekend days, and form association.\n *\n * @element ore-date-picker\n *\n * @attr {string} value - Selected date in ISO 8601 format (yyyy-MM-dd)\n * @attr {string} min - Minimum selectable date (yyyy-MM-dd)\n * @attr {string} max - Maximum selectable date (yyyy-MM-dd)\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} placeholder - Trigger placeholder\n * @attr {boolean} disabled - Disable the picker\n * @attr {boolean} required - Required field\n * @attr {string} name - Form field name\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} locale - BCP 47 locale string\n * @attr {string} weekend-days - Comma-separated day indices to disable\n *\n * @fires change - Fired when a date is selected. detail: { isoValue: string | null }\n *\n * @slot label - Custom label for the trigger field\n * @slot prefix - Content before the trigger text (e.g. icon)\n * @slot helper - Custom helper text\n * @slot error - Custom error content\n *\n * @cssprop --date-picker-bg - Calendar background\n * @cssprop --date-picker-border-color - Calendar border color\n * @cssprop --date-picker-radius - Calendar border radius\n * @cssprop --date-picker-day-selected-bg - Background of selected day\n * @cssprop --date-picker-day-today-color - Color of today's date number\n * @cssprop --date-picker-day-outside-opacity - Opacity of days outside visible month\n *\n * @part field - The trigger button/field\n * @part calendar - The floating calendar panel\n * @part header - Calendar header (nav + label)\n * @part grid - Day grid\n * @part day - Individual day cell\n *\n * @example\n * ```html\n * <!-- Single date with constraints -->\n * <ore-date-picker label=\"Appointment date\" name=\"date\" min=\"2025-01-01\" max=\"2025-12-31\" color=\"primary\"></ore-date-picker>\n *\n *\n * <!-- Outside label, bordered variant -->\n * <ore-date-picker label=\"Start date\" label-placement=\"outside\" variant=\"bordered\"></ore-date-picker>\n * ```\n */\nexport const DATE_PICKER_TAG = 'ore-date-picker' as const;\n\ndefine<OreDatePickerProps>(DATE_PICKER_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n ...roundableBundle,\n error: prop.string(),\n fullwidth: prop.bool(false),\n helper: prop.string(),\n label: prop.string(),\n 'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n locale: prop.string(),\n max: prop.string(),\n min: prop.string(),\n name: prop.string(),\n placeholder: prop.string(),\n required: prop.bool(false),\n value: prop.string(),\n variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n 'weekend-days': prop.json([] as number[]),\n },\n\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreDatePickerEvents>();\n\n // ── Signals ─────────────────────────────────────────────────────────────\n\n const isOpen = signal(false);\n\n // ── Selected date: local-override pattern ──────────────────────────────\n // localSelection holds a user-initiated pick (or undefined = no override).\n // selectedDate falls back to the value prop reactively — no setInterval needed.\n\n const localSelection = signal<Temporal.PlainDate | null | undefined>(undefined);\n\n const selectedDate = computed(() =>\n localSelection.value !== undefined ? localSelection.value : parseIso(props.value.value),\n );\n\n // ── Form context ────────────────────────────────────────────────────────\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n const isDisabled = fCtxProps.disabled;\n const locale = computed(() => props.locale.value || (typeof navigator !== 'undefined' ? navigator.language : 'en'));\n\n // ── Date-picker control ─────────────────────────────────────────────────\n\n const ctrl = createDatePickerControl({\n get locale() {\n return locale.value;\n },\n get max() {\n return parseIso(props.max.value);\n },\n get min() {\n return parseIso(props.min.value);\n },\n onChange(date) {\n localSelection.value = date;\n isOpen.value = false;\n ctrl.setView('day');\n currentView.value = 'day';\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n emit('change', { isoValue: toIsoString(date) });\n },\n get value() {\n return selectedDate.value;\n },\n get weekendDays() {\n return props['weekend-days'].value ?? [];\n },\n });\n\n // ── Reactive display state ────────────────────────────────────────────\n // Three separate primitive signals — the proven pattern.\n\n const currentView = signal<DatePickerView>('day');\n const displayYear = signal(ctrl.displayYear());\n const displayMonth = signal(ctrl.displayMonth()); // 1-indexed (Temporal)\n\n // ── Form value (host is formAssociated) ──────────────────────────────────\n\n useField<string>({\n disabled: isDisabled,\n toFormValue: (v) => v || null,\n value: computed(() => toIsoString(selectedDate.value) ?? ''),\n });\n\n const dialogId = `date-picker-${Math.random().toString(36).slice(2, 9)}-calendar`;\n\n // ── Floating position ────────────────────────────────────────────────────\n // The old CSS-only `position: absolute; top: 100%` positioned the calendar relative to\n // the host box — fine until the host sits near a scroll/clip ancestor's edge (e.g. a form\n // grid inside a dialog), where the same absolute box also expands that ancestor's\n // *scrollable* overflow area even though it never changes the ancestor's own layout size,\n // which reads as \"the dialog got bigger\"/jumped. `createDropdownPositioner` — the same\n // Orbit-powered primitive `ore-select`'s dropdown already uses — positions via `fixed` +\n // computed `top`/`left`, auto-detecting both the nearest clipping ancestor (so flip/shift\n // keep the calendar within the dialog panel, not just the page viewport) and any ancestor\n // that establishes a containing block for `position: fixed` (a dialog panel's entrance\n // transition commonly leaves a permanent, if visually-identity, `transform` at rest) —\n // see `createDropdownPositioner`'s own `boundary`/`containingBlock` docs.\n const triggerRef = ref<HTMLElement>();\n const calendarRef = ref<HTMLElement>();\n\n const positioner = createDropdownPositioner({\n getFloating: () => calendarRef.value ?? null,\n getReference: () => triggerRef.value ?? null,\n matchWidth: false,\n offsetPx: 4,\n });\n\n let stopAutoUpdate: (() => void) | null = null;\n\n // ── Derived display values ───────────────────────────────────────────────\n\n const triggerText = computed(() => {\n if (selectedDate.value) return formatDisplayDate(selectedDate.value, locale.value);\n\n return props.placeholder.value || '';\n });\n\n const displayMonth_ = computed(() => {\n const d = Temporal.PlainDate.from({ day: 1, month: displayMonth.value, year: displayYear.value });\n\n return format(d, { intl: { month: 'long' }, locale: locale.value, tz: 'UTC' });\n });\n\n const displayYear_ = computed(() => String(displayYear.value));\n const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n const dayCells = computed(() => {\n void displayYear.value;\n void displayMonth.value;\n void selectedDate.value; // re-run when selection changes to refresh isSelected flags\n\n return ctrl.dayCells();\n });\n const monthCells = computed(() => {\n void displayYear.value;\n\n return ctrl.monthCells();\n });\n const yearCells = computed(() => {\n void displayYear.value;\n\n return ctrl.yearCells();\n });\n const weekdayLabels = computed(() => ctrl.weekdayLabels());\n const tabIndex = () => (isDisabled.value ? '-1' : '0');\n\n // ── Navigation handlers ──────────────────────────────────────────────────\n // In year/month views navigate by year; in day view navigate by month.\n\n function handlePrev(): void {\n if (currentView.value === 'day') ctrl.prevMonth();\n else ctrl.prevYear();\n\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n function handleNext(): void {\n if (currentView.value === 'day') ctrl.nextMonth();\n else ctrl.nextYear();\n\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n function handleHeaderClick(): void {\n const views: DatePickerView[] = ['day', 'month', 'year'];\n const next = views[(views.indexOf(currentView.value) + 1) % views.length];\n\n ctrl.setView(next);\n currentView.value = next;\n }\n\n function handleSelectMonth(month: number): void {\n ctrl.goTo(ctrl.displayYear(), month);\n ctrl.setView('day');\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n currentView.value = 'day';\n }\n\n function handleSelectYear(year: number): void {\n ctrl.goTo(year, ctrl.displayMonth());\n ctrl.setView('month');\n displayYear.value = ctrl.displayYear();\n currentView.value = 'month';\n }\n\n function handleSelectDay(isoStr: string): void {\n const date = parseIso(isoStr);\n\n if (!date) return;\n\n ctrl.select(date);\n }\n\n function handleDayKeydown(e: KeyboardEvent): void {\n const cell = e.currentTarget as HTMLElement;\n const grid = cell.closest('.cal-grid-days');\n\n if (!grid) return;\n\n const allCells = Array.from(grid.querySelectorAll<HTMLElement>('.cal-cell-day'));\n const idx = allCells.indexOf(cell);\n\n if (idx === -1) return;\n\n let target: HTMLElement | undefined;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleSelectDay(cell.dataset.iso ?? '');\n\n return;\n } else if (e.key === 'ArrowRight') {\n target = allCells[idx + 1];\n } else if (e.key === 'ArrowLeft') {\n target = allCells[idx - 1];\n } else if (e.key === 'ArrowDown') {\n target = allCells[idx + 7];\n } else if (e.key === 'ArrowUp') {\n target = allCells[idx - 7];\n } else if (e.key === 'Home') {\n target = allCells[Math.floor(idx / 7) * 7];\n } else if (e.key === 'End') {\n target = allCells[Math.floor(idx / 7) * 7 + 6];\n } else {\n return;\n }\n\n e.preventDefault();\n target?.focus();\n }\n\n // ── Month/year-cell keyboard navigation (fixed 4-column grid) ─────────────\n\n function handleGridKeydown(e: KeyboardEvent, cellSelector: string, columns: number, onSelect: () => void): void {\n const cell = e.currentTarget as HTMLElement;\n const grid = cell.closest('.cal-grid');\n\n if (!grid) return;\n\n const allCells = Array.from(grid.querySelectorAll<HTMLElement>(cellSelector));\n const idx = allCells.indexOf(cell);\n\n if (idx === -1) return;\n\n let target: HTMLElement | undefined;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onSelect();\n\n return;\n } else if (e.key === 'ArrowRight') {\n target = allCells[idx + 1];\n } else if (e.key === 'ArrowLeft') {\n target = allCells[idx - 1];\n } else if (e.key === 'ArrowDown') {\n target = allCells[idx + columns];\n } else if (e.key === 'ArrowUp') {\n target = allCells[idx - columns];\n } else if (e.key === 'Home') {\n target = allCells[Math.floor(idx / columns) * columns];\n } else if (e.key === 'End') {\n target = allCells[Math.min(Math.floor(idx / columns) * columns + columns - 1, allCells.length - 1)];\n } else {\n return;\n }\n\n e.preventDefault();\n target?.focus();\n }\n\n // ── Open / close ─────────────────────────────────────────────────────────\n\n function openPicker(): void {\n if (isDisabled.value) return;\n\n isOpen.value = true;\n ctrl.setView('day');\n currentView.value = 'day';\n\n const sel = selectedDate.value;\n\n if (sel) {\n ctrl.goTo(sel.year, sel.month);\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n positioner.update();\n stopAutoUpdate = positioner.startAutoUpdate?.() ?? null;\n }\n\n function closePicker(): void {\n isOpen.value = false;\n ctrl.setView('day');\n currentView.value = 'day';\n stopAutoUpdate?.();\n stopAutoUpdate = null;\n }\n\n function handleTriggerClick(): void {\n if (isOpen.value) closePicker();\n else openPicker();\n }\n\n // ── Keyboard handlers ────────────────────────────────────────────────────\n\n function handleTriggerKeydown(e: KeyboardEvent): void {\n if (isDisabled.value) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleTriggerClick();\n } else if (e.key === 'Escape' && isOpen.value) {\n e.preventDefault();\n closePicker();\n }\n }\n\n function handleCalendarKeydown(e: KeyboardEvent): void {\n if (e.key === 'Escape') {\n e.preventDefault();\n closePicker();\n }\n }\n\n function handleOutsideClick(e: PointerEvent | MouseEvent): void {\n if (!isOpen.value) return;\n\n const path = e.composedPath();\n\n if (!path.includes(el)) closePicker();\n }\n\n // ── Lifecycle ────────────────────────────────────────────────────────────\n\n onMounted(() => {\n document.addEventListener('pointerdown', handleOutsideClick, { capture: true });\n\n return () => {\n document.removeEventListener('pointerdown', handleOutsideClick, { capture: true });\n stopAutoUpdate?.();\n stopAutoUpdate = null;\n };\n });\n\n // ── Host bindings ────────────────────────────────────────────────────────\n\n bind({\n attr: {\n open: () => (isOpen.value ? true : undefined),\n },\n });\n\n // ── Template ─────────────────────────────────────────────────────────────\n\n const inputValue = () => triggerText.value;\n const inputLabel = () => props.label.value ?? '';\n const inputPlaceholder = () => props.placeholder.value ?? '';\n const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n const inputColor = () => props.color?.value ?? undefined;\n const inputSize = () => fCtxProps.size?.value ?? undefined;\n const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n const inputRounded = () => props.rounded?.value ?? undefined;\n const inputHelper = () => props.helper.value ?? '';\n const inputError = () => props.error.value ?? '';\n const inputDisabled = () => (isDisabled.value ? true : undefined);\n const inputRequired = () => (props.required.value ? true : undefined);\n const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n return html`\n <!-- Trigger: ore-input in readonly display mode -->\n <ore-input\n class=\"trigger\"\n ref=\"${triggerRef}\"\n readonly\n tabindex=\"${tabIndex}\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n aria-controls=\"${dialogId}\"\n :aria-expanded=\"${() => String(isOpen.value)}\"\n :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n :value=\"${inputValue}\"\n :label=\"${inputLabel}\"\n :placeholder=\"${inputPlaceholder}\"\n :label-placement=\"${inputLabelPlacement}\"\n :color=\"${inputColor}\"\n :size=\"${inputSize}\"\n :variant=\"${inputVariant}\"\n :rounded=\"${inputRounded}\"\n :helper=\"${inputHelper}\"\n :error=\"${inputError}\"\n ?disabled=\"${inputDisabled}\"\n ?required=\"${inputRequired}\"\n ?fullwidth=\"${inputFullwidth}\"\n @click=\"${handleTriggerClick}\"\n @keydown=\"${handleTriggerKeydown}\">\n <ore-icon slot=\"suffix\" name=\"calendar\" size=\"16\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n </ore-input>\n\n <!-- Calendar popup -->\n <div\n class=\"calendar\"\n ref=\"${calendarRef}\"\n id=\"${dialogId}\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-label=\"${() => `Choose date — ${displayLabel.value}`}\"\n ?data-open=\"${isOpen}\"\n @keydown=\"${handleCalendarKeydown}\">\n <!-- Calendar header -->\n <div class=\"cal-header\" part=\"header\">\n <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous\" @click=\"${handlePrev}\">\n <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n <button\n class=\"cal-label-btn\"\n type=\"button\"\n :aria-label=\"${() =>\n `Switch to ${currentView.value === 'day' ? 'month' : currentView.value === 'month' ? 'year' : 'day'} view`}\"\n @click=\"${handleHeaderClick}\">\n <span class=\"cal-label-month\">${displayMonth_}</span><span class=\"cal-label-sep\" aria-hidden=\"true\">/</span\n ><span class=\"cal-label-year\">${displayYear_}</span>\n </button>\n <button class=\"nav-btn\" type=\"button\" aria-label=\"Next\" @click=\"${handleNext}\">\n <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n </div>\n\n <!-- Day view: flat 7-column CSS grid, weekday headers + day cells -->\n <div\n class=\"cal-grid cal-grid-days\"\n role=\"grid\"\n part=\"grid\"\n :aria-label=\"${() => displayLabel.value}\"\n ?hidden=\"${() => currentView.value !== 'day'}\">\n <div role=\"row\" class=\"cal-grid-row\">\n ${() =>\n weekdayLabels.value.map(\n (lbl) => html`<div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>`,\n )}\n </div>\n ${() => {\n const cells = dayCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\" class=\"cal-grid-row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-day\"\n role=\"gridcell\"\n part=\"day\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n :aria-current=\"${() => (cell.isToday ? 'date' : null)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-today=\"${() => cell.isToday}\"\n ?data-outside=\"${() => cell.isOutsideMonth}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n data-iso=\"${cell.iso}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => handleSelectDay(cell.iso)}\"\n @keydown=\"${handleDayKeydown}\">\n ${String(cell.day)}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n\n <!-- Month view -->\n <div\n class=\"cal-grid cal-grid-months\"\n role=\"grid\"\n :aria-label=\"${() => displayYear_.value}\"\n ?hidden=\"${() => currentView.value !== 'month'}\">\n ${() => {\n const cells = monthCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-month\"\n role=\"gridcell\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => {\n if (!cell.isDisabled) handleSelectMonth(cell.month);\n }}\"\n @keydown=\"${(e: KeyboardEvent) =>\n handleGridKeydown(e, '.cal-cell-month', 4, () => {\n if (!cell.isDisabled) handleSelectMonth(cell.month);\n })}\">\n ${cell.shortLabel}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n\n <!-- Year view -->\n <div\n class=\"cal-grid cal-grid-years\"\n role=\"grid\"\n aria-label=\"Select year\"\n ?hidden=\"${() => currentView.value !== 'year'}\">\n ${() => {\n const cells = yearCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-year\"\n role=\"gridcell\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => {\n if (!cell.isDisabled) handleSelectYear(cell.year);\n }}\"\n @keydown=\"${(e: KeyboardEvent) =>\n handleGridKeydown(e, '.cal-cell-year', 4, () => {\n if (!cell.isDisabled) handleSelectYear(cell.year);\n })}\">\n ${String(cell.year)}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n </div>\n `;\n },\n\n shadow: { delegatesFocus: true },\n styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
|
package/dist/date-picker.js
CHANGED
|
@@ -3,13 +3,12 @@ import { colorThemeMixin as t } from "./styles/mixins/theme.css.js";
|
|
|
3
3
|
import { disablableBundle as n, roundableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
|
|
4
4
|
import { createDropdownPositioner as o } from "./headless/positioner.js";
|
|
5
5
|
import { createDatePickerControl as s, formatDisplayDate as c, parseIso as l, toIsoString as u } from "./headless/date-picker.js";
|
|
6
|
-
import {
|
|
7
|
-
import "./ore/dist/forms.js";
|
|
8
|
-
import { FORM_CTX as f, useFormContext as ee } from "./inputs/shared/form-context.js";
|
|
6
|
+
import { FORM_CTX as d, useFormContext as f } from "./inputs/shared/form-context.js";
|
|
9
7
|
import p from "./inputs/date-picker/date-picker.css.js";
|
|
10
|
-
import { bind as
|
|
8
|
+
import { bind as ee, define as m, getHost as h, html as g, inject as _, onMounted as v, prop as y, ref as b, useEmit as x } from "@vielzeug/ore";
|
|
11
9
|
import { computed as S, signal as C } from "@vielzeug/ripple";
|
|
12
|
-
import { Temporal as w, format as
|
|
10
|
+
import { Temporal as w, format as te } from "@vielzeug/tempo";
|
|
11
|
+
import { useField as T } from "@vielzeug/ore/forms";
|
|
13
12
|
//#region src/inputs/date-picker/date-picker.ts
|
|
14
13
|
var E = "ore-date-picker";
|
|
15
14
|
m(E, {
|
|
@@ -35,7 +34,7 @@ m(E, {
|
|
|
35
34
|
"weekend-days": y.json([])
|
|
36
35
|
},
|
|
37
36
|
setup(e) {
|
|
38
|
-
let t = h(), n = x(), r = C(!1), i = C(void 0), a = S(() => i.value === void 0 ? l(e.value.value) : i.value), p =
|
|
37
|
+
let t = h(), n = x(), r = C(!1), i = C(void 0), a = S(() => i.value === void 0 ? l(e.value.value) : i.value), p = f(e, _(d)), m = p.disabled, y = S(() => e.locale.value || (typeof navigator < "u" ? navigator.language : "en")), E = s({
|
|
39
38
|
get locale() {
|
|
40
39
|
return y.value;
|
|
41
40
|
},
|
|
@@ -55,7 +54,7 @@ m(E, {
|
|
|
55
54
|
return e["weekend-days"].value ?? [];
|
|
56
55
|
}
|
|
57
56
|
}), D = C("day"), O = C(E.displayYear()), k = C(E.displayMonth());
|
|
58
|
-
|
|
57
|
+
T({
|
|
59
58
|
disabled: m,
|
|
60
59
|
toFormValue: (e) => e || null,
|
|
61
60
|
value: S(() => u(a.value) ?? "")
|
|
@@ -65,7 +64,7 @@ m(E, {
|
|
|
65
64
|
getReference: () => j.value ?? null,
|
|
66
65
|
matchWidth: !1,
|
|
67
66
|
offsetPx: 4
|
|
68
|
-
}), P = null, ne = S(() => a.value ? c(a.value, y.value) : e.placeholder.value || ""), F = S(() =>
|
|
67
|
+
}), P = null, ne = S(() => a.value ? c(a.value, y.value) : e.placeholder.value || ""), F = S(() => te(w.PlainDate.from({
|
|
69
68
|
day: 1,
|
|
70
69
|
month: k.value,
|
|
71
70
|
year: O.value
|
|
@@ -157,7 +156,7 @@ m(E, {
|
|
|
157
156
|
}
|
|
158
157
|
return v(() => (document.addEventListener("pointerdown", $, { capture: !0 }), () => {
|
|
159
158
|
document.removeEventListener("pointerdown", $, { capture: !0 }), P?.(), P = null;
|
|
160
|
-
})),
|
|
159
|
+
})), ee({ attr: { open: () => r.value ? !0 : void 0 } }), g`
|
|
161
160
|
<!-- Trigger: ore-input in readonly display mode -->
|
|
162
161
|
<ore-input
|
|
163
162
|
class="trigger"
|
package/dist/date-picker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.js","names":[],"sources":["../src/inputs/date-picker/date-picker.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport {\n createDatePickerControl,\n createDropdownPositioner,\n formatDisplayDate,\n parseIso,\n toIsoString,\n type DatePickerView,\n} from '../../headless';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './date-picker.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreDatePickerEvents = {\n change: { isoValue: string | null };\n};\n\nexport type OreDatePickerProps = {\n /** Theme color */\n color?: ThemeColor;\n /** Disable the picker */\n disabled?: boolean;\n /** Validation error message */\n error?: string;\n /** Expand to container width */\n fullwidth?: boolean;\n /** Helper text below the field */\n helper?: string;\n /** Visible label */\n label?: string;\n /** Label placement */\n 'label-placement'?: 'inset' | 'outside';\n /** Locale for day/month names (default: browser locale) */\n locale?: string;\n /** Latest selectable date in ISO 8601 format (yyyy-MM-dd) */\n max?: string;\n /** Earliest selectable date in ISO 8601 format (yyyy-MM-dd) */\n min?: string;\n /** Form field name */\n name?: string;\n /** Placeholder shown in the text trigger */\n placeholder?: string;\n /** Mark field as required */\n required?: boolean;\n /** Border radius */\n rounded?: RoundedSize;\n /** Component size */\n size?: ComponentSize;\n /**\n * Selected date in ISO 8601 format (yyyy-MM-dd).\n * @example '2025-06-15'\n */\n value?: string;\n /** Visual variant */\n variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n /**\n * Day-of-week indices to disable (0 = Sunday … 6 = Saturday).\n * Pass as a JSON array attribute or a JS property.\n * @example\n * ```html\n * <ore-date-picker weekend-days=\"[0,6]\"></ore-date-picker>\n * ```\n */\n 'weekend-days'?: number[];\n};\n\n/**\n * An accessible, keyboard-navigable date picker with an inline calendar popup.\n * Supports min/max bounds, disabled weekend days, and form association.\n *\n * @element ore-date-picker\n *\n * @attr {string} value - Selected date in ISO 8601 format (yyyy-MM-dd)\n * @attr {string} min - Minimum selectable date (yyyy-MM-dd)\n * @attr {string} max - Maximum selectable date (yyyy-MM-dd)\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} placeholder - Trigger placeholder\n * @attr {boolean} disabled - Disable the picker\n * @attr {boolean} required - Required field\n * @attr {string} name - Form field name\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} locale - BCP 47 locale string\n * @attr {string} weekend-days - Comma-separated day indices to disable\n *\n * @fires change - Fired when a date is selected. detail: { isoValue: string | null }\n *\n * @slot label - Custom label for the trigger field\n * @slot prefix - Content before the trigger text (e.g. icon)\n * @slot helper - Custom helper text\n * @slot error - Custom error content\n *\n * @cssprop --date-picker-bg - Calendar background\n * @cssprop --date-picker-border-color - Calendar border color\n * @cssprop --date-picker-radius - Calendar border radius\n * @cssprop --date-picker-day-selected-bg - Background of selected day\n * @cssprop --date-picker-day-today-color - Color of today's date number\n * @cssprop --date-picker-day-outside-opacity - Opacity of days outside visible month\n *\n * @part field - The trigger button/field\n * @part calendar - The floating calendar panel\n * @part header - Calendar header (nav + label)\n * @part grid - Day grid\n * @part day - Individual day cell\n *\n * @example\n * ```html\n * <!-- Single date with constraints -->\n * <ore-date-picker label=\"Appointment date\" name=\"date\" min=\"2025-01-01\" max=\"2025-12-31\" color=\"primary\"></ore-date-picker>\n *\n *\n * <!-- Outside label, bordered variant -->\n * <ore-date-picker label=\"Start date\" label-placement=\"outside\" variant=\"bordered\"></ore-date-picker>\n * ```\n */\nexport const DATE_PICKER_TAG = 'ore-date-picker' as const;\n\ndefine<OreDatePickerProps>(DATE_PICKER_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n ...roundableBundle,\n error: prop.string(),\n fullwidth: prop.bool(false),\n helper: prop.string(),\n label: prop.string(),\n 'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n locale: prop.string(),\n max: prop.string(),\n min: prop.string(),\n name: prop.string(),\n placeholder: prop.string(),\n required: prop.bool(false),\n value: prop.string(),\n variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n 'weekend-days': prop.json([] as number[]),\n },\n\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreDatePickerEvents>();\n\n // ── Signals ─────────────────────────────────────────────────────────────\n\n const isOpen = signal(false);\n\n // ── Selected date: local-override pattern ──────────────────────────────\n // localSelection holds a user-initiated pick (or undefined = no override).\n // selectedDate falls back to the value prop reactively — no setInterval needed.\n\n const localSelection = signal<Temporal.PlainDate | null | undefined>(undefined);\n\n const selectedDate = computed(() =>\n localSelection.value !== undefined ? localSelection.value : parseIso(props.value.value),\n );\n\n // ── Form context ────────────────────────────────────────────────────────\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n const isDisabled = fCtxProps.disabled;\n const locale = computed(() => props.locale.value || (typeof navigator !== 'undefined' ? navigator.language : 'en'));\n\n // ── Date-picker control ─────────────────────────────────────────────────\n\n const ctrl = createDatePickerControl({\n get locale() {\n return locale.value;\n },\n get max() {\n return parseIso(props.max.value);\n },\n get min() {\n return parseIso(props.min.value);\n },\n onChange(date) {\n localSelection.value = date;\n isOpen.value = false;\n ctrl.setView('day');\n currentView.value = 'day';\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n emit('change', { isoValue: toIsoString(date) });\n },\n get value() {\n return selectedDate.value;\n },\n get weekendDays() {\n return props['weekend-days'].value ?? [];\n },\n });\n\n // ── Reactive display state ────────────────────────────────────────────\n // Three separate primitive signals — the proven pattern.\n\n const currentView = signal<DatePickerView>('day');\n const displayYear = signal(ctrl.displayYear());\n const displayMonth = signal(ctrl.displayMonth()); // 1-indexed (Temporal)\n\n // ── Form value (host is formAssociated) ──────────────────────────────────\n\n useField<string>({\n disabled: isDisabled,\n toFormValue: (v) => v || null,\n value: computed(() => toIsoString(selectedDate.value) ?? ''),\n });\n\n const dialogId = `date-picker-${Math.random().toString(36).slice(2, 9)}-calendar`;\n\n // ── Floating position ────────────────────────────────────────────────────\n // The old CSS-only `position: absolute; top: 100%` positioned the calendar relative to\n // the host box — fine until the host sits near a scroll/clip ancestor's edge (e.g. a form\n // grid inside a dialog), where the same absolute box also expands that ancestor's\n // *scrollable* overflow area even though it never changes the ancestor's own layout size,\n // which reads as \"the dialog got bigger\"/jumped. `createDropdownPositioner` — the same\n // Orbit-powered primitive `ore-select`'s dropdown already uses — positions via `fixed` +\n // computed `top`/`left`, auto-detecting both the nearest clipping ancestor (so flip/shift\n // keep the calendar within the dialog panel, not just the page viewport) and any ancestor\n // that establishes a containing block for `position: fixed` (a dialog panel's entrance\n // transition commonly leaves a permanent, if visually-identity, `transform` at rest) —\n // see `createDropdownPositioner`'s own `boundary`/`containingBlock` docs.\n const triggerRef = ref<HTMLElement>();\n const calendarRef = ref<HTMLElement>();\n\n const positioner = createDropdownPositioner({\n getFloating: () => calendarRef.value ?? null,\n getReference: () => triggerRef.value ?? null,\n matchWidth: false,\n offsetPx: 4,\n });\n\n let stopAutoUpdate: (() => void) | null = null;\n\n // ── Derived display values ───────────────────────────────────────────────\n\n const triggerText = computed(() => {\n if (selectedDate.value) return formatDisplayDate(selectedDate.value, locale.value);\n\n return props.placeholder.value || '';\n });\n\n const displayMonth_ = computed(() => {\n const d = Temporal.PlainDate.from({ day: 1, month: displayMonth.value, year: displayYear.value });\n\n return format(d, { intl: { month: 'long' }, locale: locale.value, tz: 'UTC' });\n });\n\n const displayYear_ = computed(() => String(displayYear.value));\n const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n const dayCells = computed(() => {\n void displayYear.value;\n void displayMonth.value;\n void selectedDate.value; // re-run when selection changes to refresh isSelected flags\n\n return ctrl.dayCells();\n });\n const monthCells = computed(() => {\n void displayYear.value;\n\n return ctrl.monthCells();\n });\n const yearCells = computed(() => {\n void displayYear.value;\n\n return ctrl.yearCells();\n });\n const weekdayLabels = computed(() => ctrl.weekdayLabels());\n const tabIndex = () => (isDisabled.value ? '-1' : '0');\n\n // ── Navigation handlers ──────────────────────────────────────────────────\n // In year/month views navigate by year; in day view navigate by month.\n\n function handlePrev(): void {\n if (currentView.value === 'day') ctrl.prevMonth();\n else ctrl.prevYear();\n\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n function handleNext(): void {\n if (currentView.value === 'day') ctrl.nextMonth();\n else ctrl.nextYear();\n\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n function handleHeaderClick(): void {\n const views: DatePickerView[] = ['day', 'month', 'year'];\n const next = views[(views.indexOf(currentView.value) + 1) % views.length];\n\n ctrl.setView(next);\n currentView.value = next;\n }\n\n function handleSelectMonth(month: number): void {\n ctrl.goTo(ctrl.displayYear(), month);\n ctrl.setView('day');\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n currentView.value = 'day';\n }\n\n function handleSelectYear(year: number): void {\n ctrl.goTo(year, ctrl.displayMonth());\n ctrl.setView('month');\n displayYear.value = ctrl.displayYear();\n currentView.value = 'month';\n }\n\n function handleSelectDay(isoStr: string): void {\n const date = parseIso(isoStr);\n\n if (!date) return;\n\n ctrl.select(date);\n }\n\n function handleDayKeydown(e: KeyboardEvent): void {\n const cell = e.currentTarget as HTMLElement;\n const grid = cell.closest('.cal-grid-days');\n\n if (!grid) return;\n\n const allCells = Array.from(grid.querySelectorAll<HTMLElement>('.cal-cell-day'));\n const idx = allCells.indexOf(cell);\n\n if (idx === -1) return;\n\n let target: HTMLElement | undefined;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleSelectDay(cell.dataset.iso ?? '');\n\n return;\n } else if (e.key === 'ArrowRight') {\n target = allCells[idx + 1];\n } else if (e.key === 'ArrowLeft') {\n target = allCells[idx - 1];\n } else if (e.key === 'ArrowDown') {\n target = allCells[idx + 7];\n } else if (e.key === 'ArrowUp') {\n target = allCells[idx - 7];\n } else if (e.key === 'Home') {\n target = allCells[Math.floor(idx / 7) * 7];\n } else if (e.key === 'End') {\n target = allCells[Math.floor(idx / 7) * 7 + 6];\n } else {\n return;\n }\n\n e.preventDefault();\n target?.focus();\n }\n\n // ── Month/year-cell keyboard navigation (fixed 4-column grid) ─────────────\n\n function handleGridKeydown(e: KeyboardEvent, cellSelector: string, columns: number, onSelect: () => void): void {\n const cell = e.currentTarget as HTMLElement;\n const grid = cell.closest('.cal-grid');\n\n if (!grid) return;\n\n const allCells = Array.from(grid.querySelectorAll<HTMLElement>(cellSelector));\n const idx = allCells.indexOf(cell);\n\n if (idx === -1) return;\n\n let target: HTMLElement | undefined;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onSelect();\n\n return;\n } else if (e.key === 'ArrowRight') {\n target = allCells[idx + 1];\n } else if (e.key === 'ArrowLeft') {\n target = allCells[idx - 1];\n } else if (e.key === 'ArrowDown') {\n target = allCells[idx + columns];\n } else if (e.key === 'ArrowUp') {\n target = allCells[idx - columns];\n } else if (e.key === 'Home') {\n target = allCells[Math.floor(idx / columns) * columns];\n } else if (e.key === 'End') {\n target = allCells[Math.min(Math.floor(idx / columns) * columns + columns - 1, allCells.length - 1)];\n } else {\n return;\n }\n\n e.preventDefault();\n target?.focus();\n }\n\n // ── Open / close ─────────────────────────────────────────────────────────\n\n function openPicker(): void {\n if (isDisabled.value) return;\n\n isOpen.value = true;\n ctrl.setView('day');\n currentView.value = 'day';\n\n const sel = selectedDate.value;\n\n if (sel) {\n ctrl.goTo(sel.year, sel.month);\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n positioner.update();\n stopAutoUpdate = positioner.startAutoUpdate?.() ?? null;\n }\n\n function closePicker(): void {\n isOpen.value = false;\n ctrl.setView('day');\n currentView.value = 'day';\n stopAutoUpdate?.();\n stopAutoUpdate = null;\n }\n\n function handleTriggerClick(): void {\n if (isOpen.value) closePicker();\n else openPicker();\n }\n\n // ── Keyboard handlers ────────────────────────────────────────────────────\n\n function handleTriggerKeydown(e: KeyboardEvent): void {\n if (isDisabled.value) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleTriggerClick();\n } else if (e.key === 'Escape' && isOpen.value) {\n e.preventDefault();\n closePicker();\n }\n }\n\n function handleCalendarKeydown(e: KeyboardEvent): void {\n if (e.key === 'Escape') {\n e.preventDefault();\n closePicker();\n }\n }\n\n function handleOutsideClick(e: PointerEvent | MouseEvent): void {\n if (!isOpen.value) return;\n\n const path = e.composedPath();\n\n if (!path.includes(el)) closePicker();\n }\n\n // ── Lifecycle ────────────────────────────────────────────────────────────\n\n onMounted(() => {\n document.addEventListener('pointerdown', handleOutsideClick, { capture: true });\n\n return () => {\n document.removeEventListener('pointerdown', handleOutsideClick, { capture: true });\n stopAutoUpdate?.();\n stopAutoUpdate = null;\n };\n });\n\n // ── Host bindings ────────────────────────────────────────────────────────\n\n bind({\n attr: {\n open: () => (isOpen.value ? true : undefined),\n },\n });\n\n // ── Template ─────────────────────────────────────────────────────────────\n\n const inputValue = () => triggerText.value;\n const inputLabel = () => props.label.value ?? '';\n const inputPlaceholder = () => props.placeholder.value ?? '';\n const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n const inputColor = () => props.color?.value ?? undefined;\n const inputSize = () => fCtxProps.size?.value ?? undefined;\n const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n const inputRounded = () => props.rounded?.value ?? undefined;\n const inputHelper = () => props.helper.value ?? '';\n const inputError = () => props.error.value ?? '';\n const inputDisabled = () => (isDisabled.value ? true : undefined);\n const inputRequired = () => (props.required.value ? true : undefined);\n const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n return html`\n <!-- Trigger: ore-input in readonly display mode -->\n <ore-input\n class=\"trigger\"\n ref=\"${triggerRef}\"\n readonly\n tabindex=\"${tabIndex}\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n aria-controls=\"${dialogId}\"\n :aria-expanded=\"${() => String(isOpen.value)}\"\n :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n :value=\"${inputValue}\"\n :label=\"${inputLabel}\"\n :placeholder=\"${inputPlaceholder}\"\n :label-placement=\"${inputLabelPlacement}\"\n :color=\"${inputColor}\"\n :size=\"${inputSize}\"\n :variant=\"${inputVariant}\"\n :rounded=\"${inputRounded}\"\n :helper=\"${inputHelper}\"\n :error=\"${inputError}\"\n ?disabled=\"${inputDisabled}\"\n ?required=\"${inputRequired}\"\n ?fullwidth=\"${inputFullwidth}\"\n @click=\"${handleTriggerClick}\"\n @keydown=\"${handleTriggerKeydown}\">\n <ore-icon slot=\"suffix\" name=\"calendar\" size=\"16\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n </ore-input>\n\n <!-- Calendar popup -->\n <div\n class=\"calendar\"\n ref=\"${calendarRef}\"\n id=\"${dialogId}\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-label=\"${() => `Choose date — ${displayLabel.value}`}\"\n ?data-open=\"${isOpen}\"\n @keydown=\"${handleCalendarKeydown}\">\n <!-- Calendar header -->\n <div class=\"cal-header\" part=\"header\">\n <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous\" @click=\"${handlePrev}\">\n <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n <button\n class=\"cal-label-btn\"\n type=\"button\"\n :aria-label=\"${() =>\n `Switch to ${currentView.value === 'day' ? 'month' : currentView.value === 'month' ? 'year' : 'day'} view`}\"\n @click=\"${handleHeaderClick}\">\n <span class=\"cal-label-month\">${displayMonth_}</span><span class=\"cal-label-sep\" aria-hidden=\"true\">/</span\n ><span class=\"cal-label-year\">${displayYear_}</span>\n </button>\n <button class=\"nav-btn\" type=\"button\" aria-label=\"Next\" @click=\"${handleNext}\">\n <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n </div>\n\n <!-- Day view: flat 7-column CSS grid, weekday headers + day cells -->\n <div\n class=\"cal-grid cal-grid-days\"\n role=\"grid\"\n part=\"grid\"\n :aria-label=\"${() => displayLabel.value}\"\n ?hidden=\"${() => currentView.value !== 'day'}\">\n <div role=\"row\" class=\"cal-grid-row\">\n ${() =>\n weekdayLabels.value.map(\n (lbl) => html`<div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>`,\n )}\n </div>\n ${() => {\n const cells = dayCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\" class=\"cal-grid-row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-day\"\n role=\"gridcell\"\n part=\"day\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n :aria-current=\"${() => (cell.isToday ? 'date' : null)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-today=\"${() => cell.isToday}\"\n ?data-outside=\"${() => cell.isOutsideMonth}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n data-iso=\"${cell.iso}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => handleSelectDay(cell.iso)}\"\n @keydown=\"${handleDayKeydown}\">\n ${String(cell.day)}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n\n <!-- Month view -->\n <div\n class=\"cal-grid cal-grid-months\"\n role=\"grid\"\n :aria-label=\"${() => displayYear_.value}\"\n ?hidden=\"${() => currentView.value !== 'month'}\">\n ${() => {\n const cells = monthCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-month\"\n role=\"gridcell\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => {\n if (!cell.isDisabled) handleSelectMonth(cell.month);\n }}\"\n @keydown=\"${(e: KeyboardEvent) =>\n handleGridKeydown(e, '.cal-cell-month', 4, () => {\n if (!cell.isDisabled) handleSelectMonth(cell.month);\n })}\">\n ${cell.shortLabel}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n\n <!-- Year view -->\n <div\n class=\"cal-grid cal-grid-years\"\n role=\"grid\"\n aria-label=\"Select year\"\n ?hidden=\"${() => currentView.value !== 'year'}\">\n ${() => {\n const cells = yearCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-year\"\n role=\"gridcell\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => {\n if (!cell.isDisabled) handleSelectYear(cell.year);\n }}\"\n @keydown=\"${(e: KeyboardEvent) =>\n handleGridKeydown(e, '.cal-cell-year', 4, () => {\n if (!cell.isDisabled) handleSelectYear(cell.year);\n })}\">\n ${String(cell.year)}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n </div>\n `;\n },\n\n shadow: { delegatesFocus: true },\n styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;;;;;AAmIA,IAAa,IAAkB;AAE/B,EAA2B,GAAiB;CAC1C,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,OAAO,EAAK,OAAO;EACnB,WAAW,EAAK,KAAK,EAAK;EAC1B,QAAQ,EAAK,OAAO;EACpB,OAAO,EAAK,OAAO;EACnB,mBAAmB,EAAK,MAAM,CAAC,SAAS,SAAS,GAAY,OAAO;EACpE,QAAQ,EAAK,OAAO;EACpB,KAAK,EAAK,OAAO;EACjB,KAAK,EAAK,OAAO;EACjB,MAAM,EAAK,OAAO;EAClB,aAAa,EAAK,OAAO;EACzB,UAAU,EAAK,KAAK,EAAK;EACzB,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAA4D;EAC1E,gBAAgB,EAAK,KAAK,CAAC,CAAa;CAC1C;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAA6B,GAIpC,IAAS,EAAO,EAAK,GAMrB,IAAiB,EAA8C,KAAA,CAAS,GAExE,IAAe,QACnB,EAAe,UAAU,KAAA,IAAmC,EAAS,EAAM,MAAM,KAAK,IAAjD,EAAe,KACtD,GAKM,IAAY,GAAe,GADjB,EAAO,CACiB,CAAO,GAEzC,IAAa,EAAU,UACvB,IAAS,QAAe,EAAM,OAAO,UAAU,OAAO,YAAc,MAAc,UAAU,WAAW,KAAK,GAI5G,IAAO,EAAwB;GACnC,IAAI,SAAS;IACX,OAAO,EAAO;GAChB;GACA,IAAI,MAAM;IACR,OAAO,EAAS,EAAM,IAAI,KAAK;GACjC;GACA,IAAI,MAAM;IACR,OAAO,EAAS,EAAM,IAAI,KAAK;GACjC;GACA,SAAS,GAAM;IAOb,AANA,EAAe,QAAQ,GACvB,EAAO,QAAQ,IACf,EAAK,QAAQ,KAAK,GAClB,EAAY,QAAQ,OACpB,EAAY,QAAQ,EAAK,YAAY,GACrC,EAAa,QAAQ,EAAK,aAAa,GACvC,EAAK,UAAU,EAAE,UAAU,EAAY,CAAI,EAAE,CAAC;GAChD;GACA,IAAI,QAAQ;IACV,OAAO,EAAa;GACtB;GACA,IAAI,cAAc;IAChB,OAAO,EAAM,eAAe,CAAC,SAAS,CAAC;GACzC;EACF,CAAC,GAKK,IAAc,EAAuB,KAAK,GAC1C,IAAc,EAAO,EAAK,YAAY,CAAC,GACvC,IAAe,EAAO,EAAK,aAAa,CAAC;EAI/C,EAAiB;GACf,UAAU;GACV,cAAc,MAAM,KAAK;GACzB,OAAO,QAAe,EAAY,EAAa,KAAK,KAAK,EAAE;EAC7D,CAAC;EAED,IAAM,IAAW,eAAe,KAAK,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,YAcjE,IAAa,EAAiB,GAC9B,IAAc,EAAiB,GAE/B,IAAa,EAAyB;GAC1C,mBAAmB,EAAY,SAAS;GACxC,oBAAoB,EAAW,SAAS;GACxC,YAAY;GACZ,UAAU;EACZ,CAAC,GAEG,IAAsC,MAIpC,KAAc,QACd,EAAa,QAAc,EAAkB,EAAa,OAAO,EAAO,KAAK,IAE1E,EAAM,YAAY,SAAS,EACnC,GAEK,IAAgB,QAGb,EAFG,EAAS,UAAU,KAAK;GAAE,KAAK;GAAG,OAAO,EAAa;GAAO,MAAM,EAAY;EAAM,CAEjF,GAAG;GAAE,MAAM,EAAE,OAAO,OAAO;GAAG,QAAQ,EAAO;GAAO,IAAI;EAAM,CAAC,CAC9E,GAEK,IAAe,QAAe,OAAO,EAAY,KAAK,CAAC,GACvD,IAAe,QAAe,GAAG,EAAc,MAAM,GAAG,EAAa,OAAO,GAE5E,IAAW,SACf,EAAiB,OACjB,EAAkB,OAClB,EAAkB,OAEX,EAAK,SAAS,EACtB,GACK,IAAa,SACjB,EAAiB,OAEV,EAAK,WAAW,EACxB,GACK,IAAY,SAChB,EAAiB,OAEV,EAAK,UAAU,EACvB,GACK,IAAgB,QAAe,EAAK,cAAc,CAAC,GACnD,UAAkB,EAAW,QAAQ,OAAO;EAKlD,SAAS,IAAmB;GAK1B,AAJI,EAAY,UAAU,QAAO,EAAK,UAAU,IAC3C,EAAK,SAAS,GAEnB,EAAY,QAAQ,EAAK,YAAY,GACrC,EAAa,QAAQ,EAAK,aAAa;EACzC;EAEA,SAAS,IAAmB;GAK1B,AAJI,EAAY,UAAU,QAAO,EAAK,UAAU,IAC3C,EAAK,SAAS,GAEnB,EAAY,QAAQ,EAAK,YAAY,GACrC,EAAa,QAAQ,EAAK,aAAa;EACzC;EAEA,SAAS,IAA0B;GACjC,IAAM,IAA0B;IAAC;IAAO;IAAS;GAAM,GACjD,IAAO,GAAO,EAAM,QAAQ,EAAY,KAAK,IAAI,KAAK,EAAM;GAGlE,AADA,EAAK,QAAQ,CAAI,GACjB,EAAY,QAAQ;EACtB;EAEA,SAAS,EAAkB,GAAqB;GAK9C,AAJA,EAAK,KAAK,EAAK,YAAY,GAAG,CAAK,GACnC,EAAK,QAAQ,KAAK,GAClB,EAAY,QAAQ,EAAK,YAAY,GACrC,EAAa,QAAQ,EAAK,aAAa,GACvC,EAAY,QAAQ;EACtB;EAEA,SAAS,EAAiB,GAAoB;GAI5C,AAHA,EAAK,KAAK,GAAM,EAAK,aAAa,CAAC,GACnC,EAAK,QAAQ,OAAO,GACpB,EAAY,QAAQ,EAAK,YAAY,GACrC,EAAY,QAAQ;EACtB;EAEA,SAAS,EAAgB,GAAsB;GAC7C,IAAM,IAAO,EAAS,CAAM;GAEvB,KAEL,EAAK,OAAO,CAAI;EAClB;EAEA,SAAS,EAAiB,GAAwB;GAChD,IAAM,IAAO,EAAE,eACT,IAAO,EAAK,QAAQ,gBAAgB;GAE1C,IAAI,CAAC,GAAM;GAEX,IAAM,IAAW,MAAM,KAAK,EAAK,iBAA8B,eAAe,CAAC,GACzE,IAAM,EAAS,QAAQ,CAAI;GAEjC,IAAI,MAAQ,IAAI;GAEhB,IAAI;GAEJ,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IAEtC,AADA,EAAE,eAAe,GACjB,EAAgB,EAAK,QAAQ,OAAO,EAAE;IAEtC;GACF,OAAO,IAAI,EAAE,QAAQ,cACnB,IAAS,EAAS,IAAM;QACnB,IAAI,EAAE,QAAQ,aACnB,IAAS,EAAS,IAAM;QACnB,IAAI,EAAE,QAAQ,aACnB,IAAS,EAAS,IAAM;QACnB,IAAI,EAAE,QAAQ,WACnB,IAAS,EAAS,IAAM;QACnB,IAAI,EAAE,QAAQ,QACnB,IAAS,EAAS,KAAK,MAAM,IAAM,CAAC,IAAI;QACnC,IAAI,EAAE,QAAQ,OACnB,IAAS,EAAS,KAAK,MAAM,IAAM,CAAC,IAAI,IAAI;QAE5C;GAIF,AADA,EAAE,eAAe,GACjB,GAAQ,MAAM;EAChB;EAIA,SAAS,EAAkB,GAAkB,GAAsB,GAAiB,GAA4B;GAC9G,IAAM,IAAO,EAAE,eACT,IAAO,EAAK,QAAQ,WAAW;GAErC,IAAI,CAAC,GAAM;GAEX,IAAM,IAAW,MAAM,KAAK,EAAK,iBAA8B,CAAY,CAAC,GACtE,IAAM,EAAS,QAAQ,CAAI;GAEjC,IAAI,MAAQ,IAAI;GAEhB,IAAI;GAEJ,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IAEtC,AADA,EAAE,eAAe,GACjB,EAAS;IAET;GACF,OAAO,IAAI,EAAE,QAAQ,cACnB,IAAS,EAAS,IAAM;QACnB,IAAI,EAAE,QAAQ,aACnB,IAAS,EAAS,IAAM;QACnB,IAAI,EAAE,QAAQ,aACnB,IAAS,EAAS,IAAM;QACnB,IAAI,EAAE,QAAQ,WACnB,IAAS,EAAS,IAAM;QACnB,IAAI,EAAE,QAAQ,QACnB,IAAS,EAAS,KAAK,MAAM,IAAM,CAAO,IAAI;QACzC,IAAI,EAAE,QAAQ,OACnB,IAAS,EAAS,KAAK,IAAI,KAAK,MAAM,IAAM,CAAO,IAAI,IAAU,IAAU,GAAG,EAAS,SAAS,CAAC;QAEjG;GAIF,AADA,EAAE,eAAe,GACjB,GAAQ,MAAM;EAChB;EAIA,SAAS,KAAmB;GAC1B,IAAI,EAAW,OAAO;GAItB,AAFA,EAAO,QAAQ,IACf,EAAK,QAAQ,KAAK,GAClB,EAAY,QAAQ;GAEpB,IAAM,IAAM,EAAa;GASzB,AAPI,MACF,EAAK,KAAK,EAAI,MAAM,EAAI,KAAK,GAC7B,EAAY,QAAQ,EAAK,YAAY,GACrC,EAAa,QAAQ,EAAK,aAAa,IAGzC,EAAW,OAAO,GAClB,IAAiB,EAAW,kBAAkB,KAAK;EACrD;EAEA,SAAS,IAAoB;GAK3B,AAJA,EAAO,QAAQ,IACf,EAAK,QAAQ,KAAK,GAClB,EAAY,QAAQ,OACpB,IAAiB,GACjB,IAAiB;EACnB;EAEA,SAAS,IAA2B;GAClC,AAAI,EAAO,QAAO,EAAY,IACzB,GAAW;EAClB;EAIA,SAAS,GAAqB,GAAwB;GAChD,EAAW,UAEX,EAAE,QAAQ,WAAW,EAAE,QAAQ,OACjC,EAAE,eAAe,GACjB,EAAmB,KACV,EAAE,QAAQ,YAAY,EAAO,UACtC,EAAE,eAAe,GACjB,EAAY;EAEhB;EAEA,SAAS,GAAsB,GAAwB;GACrD,AAAI,EAAE,QAAQ,aACZ,EAAE,eAAe,GACjB,EAAY;EAEhB;EAEA,SAAS,EAAmB,GAAoC;GACzD,EAAO,UAEC,EAAE,aAEV,CAAA,CAAK,SAAS,CAAE,KAAG,EAAY;EACtC;EAsCA,OAlCA,SACE,SAAS,iBAAiB,eAAe,GAAoB,EAAE,SAAS,GAAK,CAAC,SAEjE;GAGX,AAFA,SAAS,oBAAoB,eAAe,GAAoB,EAAE,SAAS,GAAK,CAAC,GACjF,IAAiB,GACjB,IAAiB;EACnB,EACD,GAID,GAAK,EACH,MAAM,EACJ,YAAa,EAAO,QAAQ,KAAO,KAAA,EACrC,EACF,CAAC,GAkBM,CAAI;;;;eAIA,EAAW;;oBAEN,EAAS;;;yBAGJ,EAAS;gCACF,OAAO,EAAO,KAAK,EAAE;gCACpB,EAAW,QAAQ,SAAS,KAAM;wBAzBtC,GAAY,MA0BZ;wBAzBA,EAAM,MAAM,SAAS,GA0BrB;8BAzBM,EAAM,YAAY,SAAS,GA0BrB;kCAzBH,EAAM,kBAAkB,CAAC,SAAS,QA0BxB;wBAzBnB,EAAM,OAAO,SAAS,KAAA,EA0BtB;uBAzBD,EAAU,MAAM,SAAS,KAAA,EA0B1B;0BAzBI,EAAU,SAAS,SAAS,KAAA,EA0B1B;0BAzBF,EAAM,SAAS,SAAS,KAAA,EA0BtB;yBAzBH,EAAM,OAAO,SAAS,GA0BrB;wBAzBF,EAAM,MAAM,SAAS,GA0BrB;2BAzBI,EAAW,QAAQ,KAAO,KAAA,EA0BxB;2BAzBF,EAAM,SAAS,QAAQ,KAAO,KAAA,EA0B5B;4BAzBD,EAAM,UAAU,QAAQ,KAAO,KAAA,EA0B5B;kBACnB,EAAmB;oBACjB,GAAqB;;;;;;;eAO1B,EAAY;cACb,EAAS;;;6BAGM,iBAAiB,EAAa,QAAQ;sBAC7C,EAAO;oBACT,GAAsB;;;gFAGsC,EAAW;;;;;;iCAO7E,aAAa,EAAY,UAAU,QAAQ,UAAU,EAAY,UAAU,UAAU,SAAS,MAAM,OAAO;sBACnG,EAAkB;4CACI,EAAc;4CACd,EAAa;;4EAEmB,EAAW;;;;;;;;;;+BAUxD,EAAa,MAAM;2BACvB,EAAY,UAAU,MAAM;;oBAGzC,EAAc,MAAM,KACjB,MAAQ,CAAI,uEAAuE,EAAI,IAAI,EAAI,OAClG,EAAE;;kBAEE;GACN,IAAM,IAAQ,EAAS,OACjB,IAAmC,CAAC;GAE1C,KAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,KAAK,GAAG,EAAK,KAAK,EAAM,MAAM,GAAG,IAAI,CAAC,CAAC;GAEzE,OAAO,EAAK,KACT,MACC,CAAI;oBACA,EAAI,KACH,MACC,CAAI;;;;gDAIsB,OAAO,EAAK,UAAU,EAAE;gDACxB,OAAO,EAAK,UAAU,EAAE;+CACxB,EAAK,UAAU,SAAS,KAAM;gDAC9B,EAAK,WAAW;6CACnB,EAAK,QAAQ;+CACX,EAAK,eAAe;gDACnB,EAAK,WAAW;oCAC5B,EAAK,IAAI;0CACF,EAAK,aAAa,OAAO,IAAK;wCACjC,EAAgB,EAAK,GAAG,EAAE;oCAC9B,EAAiB;0BAC3B,OAAO,EAAK,GAAG,EAAE;6BAEzB,EAAE;uBAER;EACF,EAAE;;;;;;;+BAOmB,EAAa,MAAM;2BACvB,EAAY,UAAU,QAAQ;kBACvC;GACN,IAAM,IAAQ,EAAW,OACnB,IAAmC,CAAC;GAE1C,KAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,KAAK,GAAG,EAAK,KAAK,EAAM,MAAM,GAAG,IAAI,CAAC,CAAC;GAEzE,OAAO,EAAK,KACT,MACC,CAAI;oBACA,EAAI,KACH,MACC,CAAI;;;gDAGsB,OAAO,EAAK,UAAU,EAAE;gDACxB,OAAO,EAAK,UAAU,EAAE;gDACxB,EAAK,WAAW;gDAChB,EAAK,WAAW;0CACrB,EAAK,aAAa,OAAO,IAAK;wCACjC;IACd,AAAK,EAAK,cAAY,EAAkB,EAAK,KAAK;GACpD,EAAE;qCACW,MACX,EAAkB,GAAG,mBAAmB,SAAS;IAC/C,AAAK,EAAK,cAAY,EAAkB,EAAK,KAAK;GACpD,CAAC,EAAE;0BACH,EAAK,WAAW;6BAExB,EAAE;uBAER;EACF,EAAE;;;;;;;;2BAQe,EAAY,UAAU,OAAO;kBACtC;GACN,IAAM,IAAQ,EAAU,OAClB,IAAmC,CAAC;GAE1C,KAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,KAAK,GAAG,EAAK,KAAK,EAAM,MAAM,GAAG,IAAI,CAAC,CAAC;GAEzE,OAAO,EAAK,KACT,MACC,CAAI;oBACA,EAAI,KACH,MACC,CAAI;;;gDAGsB,OAAO,EAAK,UAAU,EAAE;gDACxB,OAAO,EAAK,UAAU,EAAE;gDACxB,EAAK,WAAW;gDAChB,EAAK,WAAW;0CACrB,EAAK,aAAa,OAAO,IAAK;wCACjC;IACd,AAAK,EAAK,cAAY,EAAiB,EAAK,IAAI;GAClD,EAAE;qCACW,MACX,EAAkB,GAAG,kBAAkB,SAAS;IAC9C,AAAK,EAAK,cAAY,EAAiB,EAAK,IAAI;GAClD,CAAC,EAAE;0BACH,OAAO,EAAK,IAAI,EAAE;6BAE1B,EAAE;uBAER;EACF,EAAE;;;;CAIV;CAEA,QAAQ,EAAE,gBAAgB,GAAK;CAC/B,QAAQ;EAAC;EAAiB;EAAoB;CAAe;AAC/D,CAAC"}
|
|
1
|
+
{"version":3,"file":"date-picker.js","names":[],"sources":["../src/inputs/date-picker/date-picker.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport {\n createDatePickerControl,\n createDropdownPositioner,\n formatDisplayDate,\n parseIso,\n toIsoString,\n type DatePickerView,\n} from '../../headless';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './date-picker.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreDatePickerEvents = {\n change: { isoValue: string | null };\n};\n\nexport type OreDatePickerProps = {\n /** Theme color */\n color?: ThemeColor;\n /** Disable the picker */\n disabled?: boolean;\n /** Validation error message */\n error?: string;\n /** Expand to container width */\n fullwidth?: boolean;\n /** Helper text below the field */\n helper?: string;\n /** Visible label */\n label?: string;\n /** Label placement */\n 'label-placement'?: 'inset' | 'outside';\n /** Locale for day/month names (default: browser locale) */\n locale?: string;\n /** Latest selectable date in ISO 8601 format (yyyy-MM-dd) */\n max?: string;\n /** Earliest selectable date in ISO 8601 format (yyyy-MM-dd) */\n min?: string;\n /** Form field name */\n name?: string;\n /** Placeholder shown in the text trigger */\n placeholder?: string;\n /** Mark field as required */\n required?: boolean;\n /** Border radius */\n rounded?: RoundedSize;\n /** Component size */\n size?: ComponentSize;\n /**\n * Selected date in ISO 8601 format (yyyy-MM-dd).\n * @example '2025-06-15'\n */\n value?: string;\n /** Visual variant */\n variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n /**\n * Day-of-week indices to disable (0 = Sunday … 6 = Saturday).\n * Pass as a JSON array attribute or a JS property.\n * @example\n * ```html\n * <ore-date-picker weekend-days=\"[0,6]\"></ore-date-picker>\n * ```\n */\n 'weekend-days'?: number[];\n};\n\n/**\n * An accessible, keyboard-navigable date picker with an inline calendar popup.\n * Supports min/max bounds, disabled weekend days, and form association.\n *\n * @element ore-date-picker\n *\n * @attr {string} value - Selected date in ISO 8601 format (yyyy-MM-dd)\n * @attr {string} min - Minimum selectable date (yyyy-MM-dd)\n * @attr {string} max - Maximum selectable date (yyyy-MM-dd)\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} placeholder - Trigger placeholder\n * @attr {boolean} disabled - Disable the picker\n * @attr {boolean} required - Required field\n * @attr {string} name - Form field name\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} locale - BCP 47 locale string\n * @attr {string} weekend-days - Comma-separated day indices to disable\n *\n * @fires change - Fired when a date is selected. detail: { isoValue: string | null }\n *\n * @slot label - Custom label for the trigger field\n * @slot prefix - Content before the trigger text (e.g. icon)\n * @slot helper - Custom helper text\n * @slot error - Custom error content\n *\n * @cssprop --date-picker-bg - Calendar background\n * @cssprop --date-picker-border-color - Calendar border color\n * @cssprop --date-picker-radius - Calendar border radius\n * @cssprop --date-picker-day-selected-bg - Background of selected day\n * @cssprop --date-picker-day-today-color - Color of today's date number\n * @cssprop --date-picker-day-outside-opacity - Opacity of days outside visible month\n *\n * @part field - The trigger button/field\n * @part calendar - The floating calendar panel\n * @part header - Calendar header (nav + label)\n * @part grid - Day grid\n * @part day - Individual day cell\n *\n * @example\n * ```html\n * <!-- Single date with constraints -->\n * <ore-date-picker label=\"Appointment date\" name=\"date\" min=\"2025-01-01\" max=\"2025-12-31\" color=\"primary\"></ore-date-picker>\n *\n *\n * <!-- Outside label, bordered variant -->\n * <ore-date-picker label=\"Start date\" label-placement=\"outside\" variant=\"bordered\"></ore-date-picker>\n * ```\n */\nexport const DATE_PICKER_TAG = 'ore-date-picker' as const;\n\ndefine<OreDatePickerProps>(DATE_PICKER_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n ...roundableBundle,\n error: prop.string(),\n fullwidth: prop.bool(false),\n helper: prop.string(),\n label: prop.string(),\n 'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n locale: prop.string(),\n max: prop.string(),\n min: prop.string(),\n name: prop.string(),\n placeholder: prop.string(),\n required: prop.bool(false),\n value: prop.string(),\n variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n 'weekend-days': prop.json([] as number[]),\n },\n\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreDatePickerEvents>();\n\n // ── Signals ─────────────────────────────────────────────────────────────\n\n const isOpen = signal(false);\n\n // ── Selected date: local-override pattern ──────────────────────────────\n // localSelection holds a user-initiated pick (or undefined = no override).\n // selectedDate falls back to the value prop reactively — no setInterval needed.\n\n const localSelection = signal<Temporal.PlainDate | null | undefined>(undefined);\n\n const selectedDate = computed(() =>\n localSelection.value !== undefined ? localSelection.value : parseIso(props.value.value),\n );\n\n // ── Form context ────────────────────────────────────────────────────────\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n const isDisabled = fCtxProps.disabled;\n const locale = computed(() => props.locale.value || (typeof navigator !== 'undefined' ? navigator.language : 'en'));\n\n // ── Date-picker control ─────────────────────────────────────────────────\n\n const ctrl = createDatePickerControl({\n get locale() {\n return locale.value;\n },\n get max() {\n return parseIso(props.max.value);\n },\n get min() {\n return parseIso(props.min.value);\n },\n onChange(date) {\n localSelection.value = date;\n isOpen.value = false;\n ctrl.setView('day');\n currentView.value = 'day';\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n emit('change', { isoValue: toIsoString(date) });\n },\n get value() {\n return selectedDate.value;\n },\n get weekendDays() {\n return props['weekend-days'].value ?? [];\n },\n });\n\n // ── Reactive display state ────────────────────────────────────────────\n // Three separate primitive signals — the proven pattern.\n\n const currentView = signal<DatePickerView>('day');\n const displayYear = signal(ctrl.displayYear());\n const displayMonth = signal(ctrl.displayMonth()); // 1-indexed (Temporal)\n\n // ── Form value (host is formAssociated) ──────────────────────────────────\n\n useField<string>({\n disabled: isDisabled,\n toFormValue: (v) => v || null,\n value: computed(() => toIsoString(selectedDate.value) ?? ''),\n });\n\n const dialogId = `date-picker-${Math.random().toString(36).slice(2, 9)}-calendar`;\n\n // ── Floating position ────────────────────────────────────────────────────\n // The old CSS-only `position: absolute; top: 100%` positioned the calendar relative to\n // the host box — fine until the host sits near a scroll/clip ancestor's edge (e.g. a form\n // grid inside a dialog), where the same absolute box also expands that ancestor's\n // *scrollable* overflow area even though it never changes the ancestor's own layout size,\n // which reads as \"the dialog got bigger\"/jumped. `createDropdownPositioner` — the same\n // Orbit-powered primitive `ore-select`'s dropdown already uses — positions via `fixed` +\n // computed `top`/`left`, auto-detecting both the nearest clipping ancestor (so flip/shift\n // keep the calendar within the dialog panel, not just the page viewport) and any ancestor\n // that establishes a containing block for `position: fixed` (a dialog panel's entrance\n // transition commonly leaves a permanent, if visually-identity, `transform` at rest) —\n // see `createDropdownPositioner`'s own `boundary`/`containingBlock` docs.\n const triggerRef = ref<HTMLElement>();\n const calendarRef = ref<HTMLElement>();\n\n const positioner = createDropdownPositioner({\n getFloating: () => calendarRef.value ?? null,\n getReference: () => triggerRef.value ?? null,\n matchWidth: false,\n offsetPx: 4,\n });\n\n let stopAutoUpdate: (() => void) | null = null;\n\n // ── Derived display values ───────────────────────────────────────────────\n\n const triggerText = computed(() => {\n if (selectedDate.value) return formatDisplayDate(selectedDate.value, locale.value);\n\n return props.placeholder.value || '';\n });\n\n const displayMonth_ = computed(() => {\n const d = Temporal.PlainDate.from({ day: 1, month: displayMonth.value, year: displayYear.value });\n\n return format(d, { intl: { month: 'long' }, locale: locale.value, tz: 'UTC' });\n });\n\n const displayYear_ = computed(() => String(displayYear.value));\n const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n const dayCells = computed(() => {\n void displayYear.value;\n void displayMonth.value;\n void selectedDate.value; // re-run when selection changes to refresh isSelected flags\n\n return ctrl.dayCells();\n });\n const monthCells = computed(() => {\n void displayYear.value;\n\n return ctrl.monthCells();\n });\n const yearCells = computed(() => {\n void displayYear.value;\n\n return ctrl.yearCells();\n });\n const weekdayLabels = computed(() => ctrl.weekdayLabels());\n const tabIndex = () => (isDisabled.value ? '-1' : '0');\n\n // ── Navigation handlers ──────────────────────────────────────────────────\n // In year/month views navigate by year; in day view navigate by month.\n\n function handlePrev(): void {\n if (currentView.value === 'day') ctrl.prevMonth();\n else ctrl.prevYear();\n\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n function handleNext(): void {\n if (currentView.value === 'day') ctrl.nextMonth();\n else ctrl.nextYear();\n\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n function handleHeaderClick(): void {\n const views: DatePickerView[] = ['day', 'month', 'year'];\n const next = views[(views.indexOf(currentView.value) + 1) % views.length];\n\n ctrl.setView(next);\n currentView.value = next;\n }\n\n function handleSelectMonth(month: number): void {\n ctrl.goTo(ctrl.displayYear(), month);\n ctrl.setView('day');\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n currentView.value = 'day';\n }\n\n function handleSelectYear(year: number): void {\n ctrl.goTo(year, ctrl.displayMonth());\n ctrl.setView('month');\n displayYear.value = ctrl.displayYear();\n currentView.value = 'month';\n }\n\n function handleSelectDay(isoStr: string): void {\n const date = parseIso(isoStr);\n\n if (!date) return;\n\n ctrl.select(date);\n }\n\n function handleDayKeydown(e: KeyboardEvent): void {\n const cell = e.currentTarget as HTMLElement;\n const grid = cell.closest('.cal-grid-days');\n\n if (!grid) return;\n\n const allCells = Array.from(grid.querySelectorAll<HTMLElement>('.cal-cell-day'));\n const idx = allCells.indexOf(cell);\n\n if (idx === -1) return;\n\n let target: HTMLElement | undefined;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleSelectDay(cell.dataset.iso ?? '');\n\n return;\n } else if (e.key === 'ArrowRight') {\n target = allCells[idx + 1];\n } else if (e.key === 'ArrowLeft') {\n target = allCells[idx - 1];\n } else if (e.key === 'ArrowDown') {\n target = allCells[idx + 7];\n } else if (e.key === 'ArrowUp') {\n target = allCells[idx - 7];\n } else if (e.key === 'Home') {\n target = allCells[Math.floor(idx / 7) * 7];\n } else if (e.key === 'End') {\n target = allCells[Math.floor(idx / 7) * 7 + 6];\n } else {\n return;\n }\n\n e.preventDefault();\n target?.focus();\n }\n\n // ── Month/year-cell keyboard navigation (fixed 4-column grid) ─────────────\n\n function handleGridKeydown(e: KeyboardEvent, cellSelector: string, columns: number, onSelect: () => void): void {\n const cell = e.currentTarget as HTMLElement;\n const grid = cell.closest('.cal-grid');\n\n if (!grid) return;\n\n const allCells = Array.from(grid.querySelectorAll<HTMLElement>(cellSelector));\n const idx = allCells.indexOf(cell);\n\n if (idx === -1) return;\n\n let target: HTMLElement | undefined;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onSelect();\n\n return;\n } else if (e.key === 'ArrowRight') {\n target = allCells[idx + 1];\n } else if (e.key === 'ArrowLeft') {\n target = allCells[idx - 1];\n } else if (e.key === 'ArrowDown') {\n target = allCells[idx + columns];\n } else if (e.key === 'ArrowUp') {\n target = allCells[idx - columns];\n } else if (e.key === 'Home') {\n target = allCells[Math.floor(idx / columns) * columns];\n } else if (e.key === 'End') {\n target = allCells[Math.min(Math.floor(idx / columns) * columns + columns - 1, allCells.length - 1)];\n } else {\n return;\n }\n\n e.preventDefault();\n target?.focus();\n }\n\n // ── Open / close ─────────────────────────────────────────────────────────\n\n function openPicker(): void {\n if (isDisabled.value) return;\n\n isOpen.value = true;\n ctrl.setView('day');\n currentView.value = 'day';\n\n const sel = selectedDate.value;\n\n if (sel) {\n ctrl.goTo(sel.year, sel.month);\n displayYear.value = ctrl.displayYear();\n displayMonth.value = ctrl.displayMonth();\n }\n\n positioner.update();\n stopAutoUpdate = positioner.startAutoUpdate?.() ?? null;\n }\n\n function closePicker(): void {\n isOpen.value = false;\n ctrl.setView('day');\n currentView.value = 'day';\n stopAutoUpdate?.();\n stopAutoUpdate = null;\n }\n\n function handleTriggerClick(): void {\n if (isOpen.value) closePicker();\n else openPicker();\n }\n\n // ── Keyboard handlers ────────────────────────────────────────────────────\n\n function handleTriggerKeydown(e: KeyboardEvent): void {\n if (isDisabled.value) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleTriggerClick();\n } else if (e.key === 'Escape' && isOpen.value) {\n e.preventDefault();\n closePicker();\n }\n }\n\n function handleCalendarKeydown(e: KeyboardEvent): void {\n if (e.key === 'Escape') {\n e.preventDefault();\n closePicker();\n }\n }\n\n function handleOutsideClick(e: PointerEvent | MouseEvent): void {\n if (!isOpen.value) return;\n\n const path = e.composedPath();\n\n if (!path.includes(el)) closePicker();\n }\n\n // ── Lifecycle ────────────────────────────────────────────────────────────\n\n onMounted(() => {\n document.addEventListener('pointerdown', handleOutsideClick, { capture: true });\n\n return () => {\n document.removeEventListener('pointerdown', handleOutsideClick, { capture: true });\n stopAutoUpdate?.();\n stopAutoUpdate = null;\n };\n });\n\n // ── Host bindings ────────────────────────────────────────────────────────\n\n bind({\n attr: {\n open: () => (isOpen.value ? true : undefined),\n },\n });\n\n // ── Template ─────────────────────────────────────────────────────────────\n\n const inputValue = () => triggerText.value;\n const inputLabel = () => props.label.value ?? '';\n const inputPlaceholder = () => props.placeholder.value ?? '';\n const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n const inputColor = () => props.color?.value ?? undefined;\n const inputSize = () => fCtxProps.size?.value ?? undefined;\n const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n const inputRounded = () => props.rounded?.value ?? undefined;\n const inputHelper = () => props.helper.value ?? '';\n const inputError = () => props.error.value ?? '';\n const inputDisabled = () => (isDisabled.value ? true : undefined);\n const inputRequired = () => (props.required.value ? true : undefined);\n const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n return html`\n <!-- Trigger: ore-input in readonly display mode -->\n <ore-input\n class=\"trigger\"\n ref=\"${triggerRef}\"\n readonly\n tabindex=\"${tabIndex}\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n aria-controls=\"${dialogId}\"\n :aria-expanded=\"${() => String(isOpen.value)}\"\n :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n :value=\"${inputValue}\"\n :label=\"${inputLabel}\"\n :placeholder=\"${inputPlaceholder}\"\n :label-placement=\"${inputLabelPlacement}\"\n :color=\"${inputColor}\"\n :size=\"${inputSize}\"\n :variant=\"${inputVariant}\"\n :rounded=\"${inputRounded}\"\n :helper=\"${inputHelper}\"\n :error=\"${inputError}\"\n ?disabled=\"${inputDisabled}\"\n ?required=\"${inputRequired}\"\n ?fullwidth=\"${inputFullwidth}\"\n @click=\"${handleTriggerClick}\"\n @keydown=\"${handleTriggerKeydown}\">\n <ore-icon slot=\"suffix\" name=\"calendar\" size=\"16\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n </ore-input>\n\n <!-- Calendar popup -->\n <div\n class=\"calendar\"\n ref=\"${calendarRef}\"\n id=\"${dialogId}\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-label=\"${() => `Choose date — ${displayLabel.value}`}\"\n ?data-open=\"${isOpen}\"\n @keydown=\"${handleCalendarKeydown}\">\n <!-- Calendar header -->\n <div class=\"cal-header\" part=\"header\">\n <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous\" @click=\"${handlePrev}\">\n <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n <button\n class=\"cal-label-btn\"\n type=\"button\"\n :aria-label=\"${() =>\n `Switch to ${currentView.value === 'day' ? 'month' : currentView.value === 'month' ? 'year' : 'day'} view`}\"\n @click=\"${handleHeaderClick}\">\n <span class=\"cal-label-month\">${displayMonth_}</span><span class=\"cal-label-sep\" aria-hidden=\"true\">/</span\n ><span class=\"cal-label-year\">${displayYear_}</span>\n </button>\n <button class=\"nav-btn\" type=\"button\" aria-label=\"Next\" @click=\"${handleNext}\">\n <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n </button>\n </div>\n\n <!-- Day view: flat 7-column CSS grid, weekday headers + day cells -->\n <div\n class=\"cal-grid cal-grid-days\"\n role=\"grid\"\n part=\"grid\"\n :aria-label=\"${() => displayLabel.value}\"\n ?hidden=\"${() => currentView.value !== 'day'}\">\n <div role=\"row\" class=\"cal-grid-row\">\n ${() =>\n weekdayLabels.value.map(\n (lbl) => html`<div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>`,\n )}\n </div>\n ${() => {\n const cells = dayCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\" class=\"cal-grid-row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-day\"\n role=\"gridcell\"\n part=\"day\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n :aria-current=\"${() => (cell.isToday ? 'date' : null)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-today=\"${() => cell.isToday}\"\n ?data-outside=\"${() => cell.isOutsideMonth}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n data-iso=\"${cell.iso}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => handleSelectDay(cell.iso)}\"\n @keydown=\"${handleDayKeydown}\">\n ${String(cell.day)}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n\n <!-- Month view -->\n <div\n class=\"cal-grid cal-grid-months\"\n role=\"grid\"\n :aria-label=\"${() => displayYear_.value}\"\n ?hidden=\"${() => currentView.value !== 'month'}\">\n ${() => {\n const cells = monthCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-month\"\n role=\"gridcell\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => {\n if (!cell.isDisabled) handleSelectMonth(cell.month);\n }}\"\n @keydown=\"${(e: KeyboardEvent) =>\n handleGridKeydown(e, '.cal-cell-month', 4, () => {\n if (!cell.isDisabled) handleSelectMonth(cell.month);\n })}\">\n ${cell.shortLabel}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n\n <!-- Year view -->\n <div\n class=\"cal-grid cal-grid-years\"\n role=\"grid\"\n aria-label=\"Select year\"\n ?hidden=\"${() => currentView.value !== 'year'}\">\n ${() => {\n const cells = yearCells.value;\n const rows: (typeof cells)[number][][] = [];\n\n for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n return rows.map(\n (row) =>\n html`<div role=\"row\">\n ${row.map(\n (cell) =>\n html`<div\n class=\"cal-cell cal-cell-year\"\n role=\"gridcell\"\n :aria-selected=\"${() => String(cell.isSelected)}\"\n :aria-disabled=\"${() => String(cell.isDisabled)}\"\n ?data-selected=\"${() => cell.isSelected}\"\n ?data-disabled=\"${() => cell.isDisabled}\"\n tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n @click=\"${() => {\n if (!cell.isDisabled) handleSelectYear(cell.year);\n }}\"\n @keydown=\"${(e: KeyboardEvent) =>\n handleGridKeydown(e, '.cal-cell-year', 4, () => {\n if (!cell.isDisabled) handleSelectYear(cell.year);\n })}\">\n ${String(cell.year)}\n </div>`,\n )}\n </div>`,\n );\n }}\n </div>\n </div>\n `;\n },\n\n shadow: { delegatesFocus: true },\n styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
|
package/dist/file-input.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./styles/index.cjs"),r=require("./shared/size-presets.cjs"),i=require("./headless/keyboard.cjs"),a=require("./
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./styles/index.cjs"),r=require("./shared/size-presets.cjs"),i=require("./headless/keyboard.cjs"),a=require("./inputs/shared/form-context.cjs"),o=require("./inputs/file-input/file-input.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple"),l=require("@vielzeug/ore/forms"),u=require("@vielzeug/dnd");var d=e=>{if(e===0)return`0 B`;let t=1024,n=[`B`,`KB`,`MB`,`GB`,`TB`],r=Math.floor(Math.log(e)/Math.log(t));return parseFloat((e/t**r).toFixed(1))+` `+n[r]},f=(e,t)=>!t||e.size<=t,p=e=>e.type.startsWith(`image/`),m=`ore-file-input`;(0,s.define)(m,{formAssociated:!0,props:{accept:s.prop.string(),color:s.prop.string(),disabled:s.prop.bool(!1),error:s.prop.string(),gallery:s.prop.bool(!1),helper:s.prop.string(),label:s.prop.string(),"max-files":s.prop.number(0),"max-size":s.prop.number(0),multiple:s.prop.bool(!1),name:s.prop.string(),ref:s.prop.json(void 0),required:s.prop.bool(!1),size:s.prop.string()},setup(e){let t=(0,s.useEmit)(),n=(0,c.signal)([]),r=(0,c.signal)(!1),o=a.useFormContext(e,(0,s.inject)(a.FORM_CTX)),m=o.disabled,h=(0,c.computed)(()=>e[`max-files`].value??0),g=(0,c.computed)(()=>e[`max-size`].value??0);(0,l.useField)({disabled:m,toFormValue:t=>{if(t.length===0)return null;let n=e.name.value||`file`,r=new FormData;for(let e of t)r.append(n,e);return r},value:n});let _=(0,c.computed)(()=>!!e.error.value);(0,s.bind)({attr:{"drag-over":()=>r.value?!0:void 0,invalid:()=>_.value?!0:void 0,size:o.size}});let v=(0,s.createStableId)(`file-input`),y=`label-${v}`,b=`helper-${v}`,x=`error-${v}`,S=(0,s.ref)(),C=(0,s.ref)(),w=(0,c.computed)(()=>{let t=[];e.accept.value&&t.push(e.accept.value.split(`,`).map(e=>e.trim()).join(`, `));let n=g.value;n>0&&t.push(`max ${d(n)}`);let r=h.value;return r>0&&t.push(`up to ${r} file${r===1?``:`s`}`),t.join(` · `)});function T(r,i){if(m.value)return;let a=e.accept.value,o=!!e.multiple.value,s=Array.from(r);o||(s=s.slice(0,1)),s=s.filter(e=>(0,u.matchesAccept)(e,a?a.split(`,`).map(e=>e.trim()):[])&&f(e,g.value));let c=o?[...n.value]:[];for(let e of s)c.includes(e)||c.push(e);h.value>0&&c.length>h.value&&(c=c.slice(0,h.value)),n.value=c,t(`change`,{files:n.value,originalEvent:i,value:n.value})}function E(e,r){n.value=n.value.filter(t=>t!==e),t(`remove`,{file:e,files:n.value,originalEvent:r,value:n.value}),t(`change`,{files:n.value,originalEvent:r,value:n.value})}let D=new Map;function O(e){let t=D.get(e);return t||(t=URL.createObjectURL(e),D.set(e,t)),t}function k(e){let t=new Set(e);for(let[e,n]of D)t.has(e)||(URL.revokeObjectURL(n),D.delete(e))}return(0,c.watch)(n,k),(0,s.onCleanup)(()=>{for(let e of D.values())URL.revokeObjectURL(e);D.clear()}),(0,s.onElement)(C,t=>{e.ref.value?.(t);let n=(0,c.watch)(e.ref,e=>{e?.(t)});return()=>{n.dispose(),e.ref.value?.(null)}}),(0,s.onMounted)(()=>{let e=C.value,t=S.value,n=!1,a=i.createInteraction({disabled:m,onPress:()=>{e.click()}});(0,s.onEvent)(e,`change`,e=>{let t=e.target;t.files?.length&&T(Array.from(t.files),e),t.value=``}),(0,s.onEvent)(t,`click`,t=>{if(t.target!==e){if(n){n=!1;return}m.value||e.click()}}),(0,s.onEvent)(t,`keydown`,e=>{n=a.handleKeydown(e)&&e.key===`Enter`});let o=(0,u.createDropZone)({disabled:m.value,element:t,onDrop:e=>T(e),onHoverChange:e=>{r.value=e}});(0,s.onCleanup)(()=>o.dispose())}),s.html`
|
|
2
2
|
<div class="file-input-wrapper" part="wrapper">
|
|
3
3
|
<label class="label-outside" id="${y}" part="label" ?hidden=${()=>!e.label.value}
|
|
4
4
|
>${e.label}</label
|
|
@@ -40,12 +40,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
|
|
|
40
40
|
role="list"
|
|
41
41
|
aria-label="Selected files"
|
|
42
42
|
?hidden=${()=>n.value.length===0}>
|
|
43
|
-
${()=>n.value.map(t=>e.gallery.value?
|
|
43
|
+
${()=>n.value.map(t=>e.gallery.value?s.html`
|
|
44
44
|
<li class="file-card">
|
|
45
|
-
${p(t)?
|
|
45
|
+
${p(t)?s.html`<img
|
|
46
46
|
class="file-thumb"
|
|
47
47
|
alt=""
|
|
48
|
-
ref="${e=>{e&&(e.src=O(t))}}" />`:
|
|
48
|
+
ref="${e=>{e&&(e.src=O(t))}}" />`:s.html`<span class="file-thumb file-thumb-generic" aria-hidden="true">
|
|
49
49
|
<ore-icon name="file" size="28" stroke-width="1.5" aria-hidden="true"></ore-icon>
|
|
50
50
|
</span>`}
|
|
51
51
|
<span class="file-card-name" title="${t.name}">${t.name}</span>
|
|
@@ -57,7 +57,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
|
|
|
57
57
|
<ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
|
|
58
58
|
</button>
|
|
59
59
|
</li>
|
|
60
|
-
`:
|
|
60
|
+
`:s.html`
|
|
61
61
|
<li class="file-item">
|
|
62
62
|
<span class="file-icon" aria-hidden="true">
|
|
63
63
|
<ore-icon name="file" size="18" stroke-width="1.75" aria-hidden="true"></ore-icon>
|
|
@@ -88,5 +88,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
|
|
|
88
88
|
${()=>e.error.value??``}
|
|
89
89
|
</div>
|
|
90
90
|
</div>
|
|
91
|
-
`},shadow:{delegatesFocus:!0},styles:[...n.fieldMixins,e.sizeVariantMixin(r.FILE_INPUT_SIZE_PRESET),t.forcedColorsFocusMixin(`.dropzone`),
|
|
91
|
+
`},shadow:{delegatesFocus:!0},styles:[...n.fieldMixins,e.sizeVariantMixin(r.FILE_INPUT_SIZE_PRESET),t.forcedColorsFocusMixin(`.dropzone`),o.default]}),exports.FILE_INPUT_TAG=m;
|
|
92
92
|
//# sourceMappingURL=file-input.cjs.map
|