# Vue Components

Daily log of changes to the Vue components

# Vue Components

Daily log of changes to the Vue components. Entries are grouped by merge date and list the components affected.

> Breaking changes are flagged with a 🚨 **Breaking** badge and include a short migration note.

## 2026-06-09

- `list`, `calendar`, `drawer`, `fileupload`, `phoneinput`, `dateslider`, `multiselect` — type-only symbols (`HTMLAttributes`, `Ref`, `ComputedRef`, `DateRange`, `DateValue`, `ChunkOptions`, `VueUploadItem`, …) are now imported with `import type` / inline `type`. They were previously imported as runtime values, which compiles under a lenient setup but breaks the build under `verbatimModuleSyntax: true` (now the default in recent `create-vue` / `@vue/tsconfig` scaffolds) with `TS1484`. No API change — import-only fix. If you reached into these components and copied an `import { DateRange }` from `radix-vue`, note that `radix-vue` exports it as a type only; use `import { type DateRange }` rather than re-declaring it.

## 2026-05-20

- `input` — forwards native HTML attributes (`autocomplete`, `name`, `required`, …) to the inner `<input>` so they bind to the actual form field instead of being absorbed by the wrapper element.
- `phoneinput` — same forwarding pattern applied to the nested `<Input>`, so callers can pass `autocomplete="tel"` and the like and have them reach the right element.

## 2026-05-04 — 🚨 Breaking

- `badge` — removed the `extra-one` … `extra-seven` ad-hoc variants (and their `subtle` compound variants). **Migration**: switch to one of the standard variants (`brand`, `informative`, `highlight`, …) or define the extra colours in your project's components config.

## 2026-04-30

- `fileupload` — dropped dead type-only and unused imports. No API change.

## 2026-04-13

- `multiselect` — new `moreText` prop to customise the "+N more" overflow label.
- `timepicker` — `lazy` prop fixed: the model is now updated only on commit when `lazy` is on, instead of leaking every intermediate keystroke.

## 2026-04-09

- `timepicker` — when the picker opens, the validated value typed manually is now scrolled into view and centered inside the dropdown.

## 2026-03-17

- `datepicker` — fixed: the picker was incorrectly disabled while in editable mode; the segmented input now syncs the initial value correctly. Layout classes that used to be hard-coded inline have been moved to the component config so projects can override them.

## 2026-03-09

- `datepicker` — minor fixes (component config + a typo in the registry payload).

## 2026-03-06 — 🚨 Breaking

- `datepicker` — rewritten on top of reka-ui's `DateFieldRoot` / `DateFieldInput` for proper native date segments instead of manual input masking. New `editable` prop; locale is now driven by the `locale` prop (falls back to `en-GB` for `dd/mm/yyyy`, `en-US` otherwise). Internally now uses `PopoverAnchor` instead of `PopoverTrigger` to preserve keyboard navigation in editable mode. **Migration**: `reka-ui` becomes a peer dependency; if you reached into the previous `DateInput`-on-top-of-`Input` internals you'll need to update.

## 2026-03-04

- `timepicker` — fixed: the `HH` (24h) and `hh` (12h) format tokens were swapped and now match the standard convention. Projects using either token will format correctly without code changes.

## 2026-03-02

- `calendar` — new `captionLayout` prop (`"default" | "dropdown"`) with month/year dropdowns in `dropdown` mode, default year range of ±100 years, reactive `placeholder`.
- `datepicker` — picks up the new calendar internals and related navigation tweaks.

## 2026-02-13 — 🚨 Breaking

- `popover` — `customWidth` prop renamed to `fullWidth` **and** the semantics are inverted. Before, the popover width defaulted to the configured `popoverConfig.width`; now it sizes to its content by default and only stretches to the configured width when `fullWidth` is `true`. **Migration**: drop `customWidth={false}` (matches the new default); replace `customWidth={true}` with no prop, or pass `fullWidth` if you want the popover to stretch to the trigger width.
- `select`, `multiselect` — new `fullWidth` prop (non-breaking) so the listbox can stretch to the trigger.
- `multiselect` — fixed wrong React import that was breaking SSR builds.

## 2026-02-05

- `datepicker` — the dropdown caption now shows the year next to the month name; `truncate` regression fixed on the trigger label; typo fixes in the iconset and `DatePresetsTrigger.vue`.

## 2026-01-14

- `actionbar` — default value fix: when the consumer doesn't pass an explicit prop, the component now falls back to the internal `isLg` breakpoint check instead of a stale hard-coded default.