@codemonster-ru/vueforge 0.56.0 → 0.58.0

package/README.md

@@ -41,6 +41,7 @@ import {
     Breadcrumbs,
     Select,
     Autocomplete,
+    Combobox,
     MultiSelect,
     TagInput,
     DatePicker,
@@ -63,6 +64,7 @@ import {
     AccordionItem,
     Slider,
     Stepper,
+    Timeline,
     Rating,
     Tree,
     TreeSelect,
@@ -103,6 +105,7 @@ app.use(VueForge, {
 <Breadcrumbs :items="breadcrumbItems" />
 <Select v-model="role" :options="roles" placeholder="Choose role" />
 <Autocomplete v-model="country" :options="countries" placeholder="Find country" />
+<Combobox v-model="countryId" :options="countries" placeholder="Pick country" clearable />
 <MultiSelect v-model="countries" :options="countryOptions" placeholder="Select countries" clearable />
 <TagInput v-model="skills" :options="skillOptions" placeholder="Add skills" clearable />
 <DatePicker v-model="birthday" placeholder="Pick birthday" />
@@ -136,6 +139,7 @@ app.use(VueForge, {
 />
 <Slider v-model="volume" :min="0" :max="100" :step="5" show-value />
 <Stepper v-model="step" :steps="steps" clickable />
+<Timeline :items="timelineItems" />
 <Rating v-model="rating" allow-half />
 <Tree v-model="selectedNode" v-model:expandedKeys="expandedKeys" :items="treeItems" />
 <TreeSelect v-model="selectedNode" v-model:expandedKeys="expandedKeys" :items="treeItems" placeholder="Select node" />
@@ -230,6 +234,7 @@ app.use(VueForge, {
 - Popover
 - Select
 - Autocomplete
+- Combobox
 - MultiSelect
 - TagInput
 - DatePicker
@@ -249,6 +254,7 @@ app.use(VueForge, {
 - Avatar
 - Slider
 - Stepper
+- Timeline
 - Rating
 - Tree
 - TreeSelect
@@ -439,6 +445,62 @@ Example:
 <Autocomplete v-model="country" :options="countries" placeholder="Find country" />
 ```
 
+## Combobox
+
+Props:
+
+- `modelValue?: string | number` (v-model selected value)
+- `inputValue?: string` (v-model:inputValue typed query)
+- `options?: Array<{ label: string; value: string | number; disabled?: boolean }>`
+- `optionLabel?: string` (default `label`)
+- `optionValue?: string` (default `value`)
+- `placeholder?: string`
+- `disabled?: boolean`
+- `readonly?: boolean`
+- `loading?: boolean`
+- `loadingText?: string` (default `Loading...`)
+- `emptyText?: string` (default `No results`)
+- `filter?: boolean` (default `true`)
+- `strict?: boolean` (default `true`)
+- `allowCreate?: boolean` (default `false`)
+- `clearable?: boolean` (default `false`)
+- `size?: 'small' | 'normal' | 'large'` (default `normal`)
+- `variant?: 'filled' | 'outlined'` (default `filled`)
+
+Events:
+
+- `update:modelValue`
+- `update:inputValue`
+- `change`
+- `search`
+- `create`
+- `focus`
+- `blur`
+
+Example:
+
+```vue
+<Combobox v-model="countryId" v-model:inputValue="countryQuery" :options="countries" placeholder="Pick country" />
+```
+
+### Combobox tokens
+
+Component tokens (override via `theme.overrides.components.combobox`):
+
+- `minWidth`, `fontSize`, `controlGap`, `chevronSize`
+- `padding`, `borderRadius`, `borderColor`
+- `backgroundColor`, `textColor`, `placeholderColor`
+- `focusBorderColor`, `focusRingShadow`, `hoverBorderColor`
+- `disabledOpacity`
+- `panelBackgroundColor`, `panelBorderColor`, `panelPadding`, `panelMaxHeight`, `panelRadiusOffset`, `panelShadow`
+- `optionPadding`, `optionBorderRadius`
+- `optionHoverBackgroundColor`, `optionActiveBackgroundColor`, `optionActiveTextColor`, `optionHighlightedBackgroundColor`
+- `emptyPadding`, `emptyColor`
+- `loadingPadding`, `loadingColor`
+- `clearSize`, `clearRadius`, `clearHoverBackgroundColor`
+- `small.fontSize`, `small.padding`
+- `large.fontSize`, `large.padding`
+
 ## MultiSelect
 
 Props:
@@ -2130,6 +2192,49 @@ Component tokens (override via `theme.overrides.components.stepper`):
 - `small.indicatorSize`, `small.indicatorFontSize`, `small.labelFontSize`, `small.descriptionFontSize`, `small.lineLength`, `small.itemGap`
 - `large.indicatorSize`, `large.indicatorFontSize`, `large.labelFontSize`, `large.descriptionFontSize`, `large.lineLength`, `large.itemGap`
 
+## Timeline
+
+Props:
+
+- `items?: Array<{ id?: string | number; title?: string; description?: string; date?: string; icon?: string; status?: 'neutral' | 'info' | 'success' | 'warn' | 'danger' }>` (default `[]`)
+- `orientation?: 'vertical' | 'horizontal'` (default `vertical`)
+- `size?: 'small' | 'normal' | 'large'` (default `normal`)
+- `ariaLabel?: string`
+- `ariaLabelledby?: string`
+
+Slots:
+
+- `marker` (props: `item`, `index`)
+- `item` (props: `item`, `index`)
+
+Example:
+
+```vue
+<Timeline
+    :items="[
+        { title: 'Created', description: 'Issue created', date: '2026-02-17', status: 'info' },
+        { title: 'In progress', description: 'Developer started work', date: '2026-02-18', status: 'warn' },
+        { title: 'Done', description: 'Issue closed', date: '2026-02-19', status: 'success' },
+    ]"
+/>
+<Timeline :items="events" orientation="horizontal" size="small" />
+```
+
+### Timeline tokens
+
+Component tokens (override via `theme.overrides.components.timeline`):
+
+- `gap`, `itemGap`
+- `markerSize`, `markerBorderRadius`, `markerBorderWidth`, `markerBackgroundColor`, `markerBorderColor`, `markerTextColor`, `markerIconSize`, `dotSize`
+- `lineThickness`, `lineLength`, `lineColor`
+- `titleFontSize`, `titleColor`, `descriptionFontSize`, `descriptionColor`, `dateFontSize`, `dateColor`
+- `info.markerBackgroundColor`, `info.markerBorderColor`, `info.markerTextColor`, `info.lineColor`
+- `success.markerBackgroundColor`, `success.markerBorderColor`, `success.markerTextColor`, `success.lineColor`
+- `warn.markerBackgroundColor`, `warn.markerBorderColor`, `warn.markerTextColor`, `warn.lineColor`
+- `danger.markerBackgroundColor`, `danger.markerBorderColor`, `danger.markerTextColor`, `danger.lineColor`
+- `small.itemGap`, `small.markerSize`, `small.markerIconSize`, `small.dotSize`, `small.lineLength`, `small.dateFontSize`, `small.titleFontSize`, `small.descriptionFontSize`
+- `large.itemGap`, `large.markerSize`, `large.markerIconSize`, `large.dotSize`, `large.lineLength`, `large.dateFontSize`, `large.titleFontSize`, `large.descriptionFontSize`
+
 ## Rating
 
 Props:
@@ -2334,7 +2439,7 @@ VueForge exposes design tokens as CSS variables generated from the theme preset.
 Typed tokens:
 
 - `ThemeTokens`/`ThemeOptions`/`ThemePreset` are exported for type-safe theming in TS.
-- `components.*` accepts component-specific tokens (typed keys: button/card/checkbox/radio/tabs/accordion/toast/alert/input/inlineEdit/searchInput/mentionInput/passwordInput/otpInput/colorPicker/maskedInput/numberInput/formField/textarea/link/breadcrumbs/menu/modal/confirmDialog/drawer/popover/dropdown/contextMenu/commandPalette/select/autocomplete/multiselect/taginput/datepicker/calendar/daterangepicker/timepicker/datetimepicker/pagination/switch/segmentedControl/tooltip/skeleton/progress/badge/chip/filterChips/avatar/datatable/slider/stepper/rating/tree/treeselect/virtualScroller).
+- `components.*` accepts component-specific tokens (typed keys: button/card/checkbox/radio/tabs/accordion/toast/alert/input/inlineEdit/searchInput/mentionInput/passwordInput/otpInput/colorPicker/maskedInput/numberInput/formField/textarea/link/breadcrumbs/menu/modal/confirmDialog/drawer/popover/dropdown/contextMenu/commandPalette/select/autocomplete/combobox/multiselect/taginput/datepicker/calendar/daterangepicker/timepicker/datetimepicker/pagination/switch/segmentedControl/tooltip/skeleton/progress/badge/chip/filterChips/avatar/datatable/slider/stepper/rating/tree/treeselect/virtualScroller).
 
 Default core values (from `DefaultTheme`):