@vibrant-wellness/va-responsive-components-library

v0.1.10

Published

19 days ago

A comprehensive Vue 3 component library built with modern development practices, providing reusable UI components, composables, and directives for building robust web applications.

0High
0Medium
0Low

vue vue3 components ui responsive healthcare ehr vibrant vibrant-america

VA Responsive Components Library

A comprehensive Vue 3 component library built with modern development practices, providing reusable UI components, composables, and directives for building robust web applications.

🚀 Features

32 Production-Ready Components - Form controls, layout, navigation, feedback, data-display, and utility components
3 Powerful Composables - Reusable logic for common patterns
2 Custom Directives - Loading states and UI enhancements
Vue 3 Composition API - Modern, performant, and type-safe
Fully Responsive UI & UX - Components automatically adapt to all screen sizes with optimized mobile-first design and touch-friendly interactions
Accessibility - ARIA attributes and keyboard navigation support
Customizable Themes - Multiple built-in color schemes

Newly released public components: DatePicker, FileUploader, DropdownMenu, Badge, Tab, FloatingActionButton, DynamicColorResponsiveButton, FoldableButton, Snackbar, Notification, Breadcrumb, Toggle, NumberInput.

🆕 What's New

2026-08-27

Label:
- Default label text weight is now 350 (Book) — previously 500.
- New font_size / font_weight props (number = px, or any CSS string; default null = stylesheet's 14px / 350). The red (Required) marker keeps its own 14px size but inherits a custom font_weight.
SingleSelector — the clear affordance is now the same "Clear" TextButton the TextInput renders (was a legacy ×-in-circle icon button). Same visibility rules (clearable + value + hover/focus) and the same clear event.

2026-08-20

MultiSelector — collapsed-summary fixes:
- The collapse_threshold summary ("X selected") is now rendered with the same Chip component as the regular selected chips (neural-ocean, filled) instead of a bespoke <span>.
- Fixed narrow triggers in collapse mode: opening the dropdown no longer pushes the summary chip's left edge out of view. The summary row stays on a single line — the chip never shrinks, and the open-state search input takes only the remaining space instead of forcing an 80px minimum (which used to overflow and, once focused, scroll the chip out of view).
DatePicker:
- New disable_future_dates prop (mirror of disable_past_dates) — when true, every date after today is disabled; today stays selectable. Works in single and range modes.
- Trigger heights now follow the selectors' convention — the border sits on top of the content height: small 34px, medium 42px, large 50px rendered (content + 1px×2 border), previously 32/40/48 total.

2026-07-28

MultiSelector — new teleport prop (default true, backward-compatible). Set :teleport="false" to render the dropdown inline (in normal flow directly below the trigger) instead of teleporting it to <body>: it pushes following content down and lets an ancestor container (e.g. a dialog) grow to wrap it, with no fixed positioning or re-position-on-scroll. Intended for modals/cards where the floating dropdown would overflow or need manual re-positioning.

2026-07-08

NumberInput — new numeric stepper input with minus/plus buttons, min/max clamping, configurable step, 3 sizes, and helper text with enable/warning/error states (error also recolors the buttons). Minus/plus buttons now have a fast (0.15s) color transition on hover/active.

2026-06-24

Rebrand — new brand fonts, type scale, and color palette. (See the Style Guide for full details.)
- Self-hosted brand fonts, base64-inlined into the bundled CSS (zero asset-path config for consumers):
  - ABC Oracle — primary sans, full variable weight axis (Thin 100 → Ultra 950) plus italic cuts. New token --font-family-brand; the global --font-family now defaults to ABC Oracle (Inter kept as fallback).
  - GT Pressura Mono — mono accent, 5 weights + italics, plus the optical GT Pressura Mono Text cut for small sizes. New token --font-family-mono.
- Rebranded type scale — utility classes named type-<category>-<tier>-<weight>-<size> for ABC Oracle (e.g. type-display-large-semibold-56, type-body-medium-regular-14) and type-mono-… for GT Pressura Mono (e.g. type-mono-display-xlarge-bold-56).
- Rebranded color palette — brand Blue/Grey/Black plus 10 accent colors, each with surface ramps <Name>_W_<pct> (over white) and <Name>_B_<pct> (over black), e.g. --Blue_W_50, --Cardio_Rust, --Sky_B_80. New state tokens --Error_Red, --Error_Red_Hover, --Error_Red_Pressed, --Light_Gray.
- Legacy EHR_* typography classes and existing color tokens (--TrueBlack, --VibrantDarkBlue, --Chip-*, --ErrorRed*, gradients, …) remain available for backward compatibility.
Radio — recolored to the rebranded palette. built_in_theme values are now dark (#012171), theme-blue (#0142E2), and medium (#0135B5); error uses #D10000 and disabled #A2A2A2. The old medium-blue / medium-green values still work as aliases (→ theme-blue / medium) — note medium-green now renders blue, as the rebrand removed green.

2026-06-18

Toggle — new binary on/off switch component:
- 3 color themes: dark (VibrantDarkBlue), sky (New_Library_PressBlue), teal_green (NewVibrantGreen).
- 2 styles when there's no preference set: filled (solid colored track) and outlined (hollow track with theme-colored border + thumb).
- 2 sizes: large (48×26 track / 22 thumb) and small (40×22 track / 18 thumb).
- Preference mode — set preference="on" or preference="off" to lock the preferred state to the filled style and the opposite state to outlined, so flipping the toggle visually moves between the two styles. Matches the Figma "Preference Toggles" matrix.
- mirrored prop — flips the layout horizontally; thumb moves in the opposite direction.
- Customizable ON/OFF labels (on_label, off_label) or hide them entirely (show_labels=false).
- Two-way bound via v-model. Emits change alongside.
- Accessible: rendered as role="switch" with aria-checked / aria-disabled and keyboard activation via Space / Enter.

2026-06-17

Public release of DatePicker — calendar-based date input with a teleported dropdown, supporting single-date and date-range (dual-calendar) modes. Follows the Figma DatePicker design.
- Three sizes (small 32px, medium 40px, large 48px), disabled state, and configurable display format ('MMM-DD-YYYY', 'YYYY-MM-DD', 'MM/DD/YYYY').
- valueType prop controls the bound value type: 'utc-string' (default, ISO 8601), 'date' (native Date), or 'timestamp' (Unix ms).
- range mode shows two calendars side by side; the right panel is always kept at least one month ahead of the left, and the panels auto-shift when navigating would violate that.
- full_width prop — the trigger box stretches to fill its container (default width is 280px).
- disable_past_dates prop — disables every date before today (today stays selectable); works in both single and range modes.

2026-06-05

FileUploader — enhanced with single image upload functionality:
- single_img_upload prop — enables image-only upload mode with visual preview
- single_img_type prop — choose between 'images' (centered preview with hover delete) or 'icon' (logo-style with corner delete)
- full_width prop — uploader takes 100% width of its container
- drop_hint_single and button_text_single props — customize single image mode messaging
- Improved image preview with proper centering and overflow handling
FileUploadModal — new modal wrapper for FileUploader:
- Searchable, paginated file table driven by a rows prop
- Newly added files are staged internally and delivered via @submit
- Inline rename, delete (with immediate removal for staged rows), and readonly mode
- Open/close controlled via standard v-model

2026-05-11

Pagination — added two template-string props for i18n:
- per_page_label (default '{number} per page') — template for each per-page option label. Supports the {number} placeholder. e.g. '1ページあたり{number}件'.
- summary_template (default '') — full template for the left summary text. Supports {start}, {end}, and {total} placeholders. When non-empty it overrides the default English summary entirely and item_label is ignored. e.g. '{total}件中 {start}〜{end}件を表示'.
Repeater — forwards both per_page_label and summary_template to the inner Pagination, so the same i18n strings work on the table-with-pagination case.
Repeater — added custom_header_class prop. Applied to the column header row AND each default header text span, so a single user-defined class can override font-size, font-weight, color, and background-color at once. Use Vue's :deep(.my-header) { ... } inside <style scoped> (or :global(), or an unscoped stylesheet) — a plain scoped selector won't match because Repeater's internals carry a different scoping ID.

2026-05-08

Tab — added equal_width prop. When true, the tab bar fills 100% of its container and tabs share that width equally (flex: 1 1 0; long labels ellipsis). For full-width header bars with no trailing space and no separate right-side tab. Ignored for vertical and when indie_tab is set. Overrides tab_width when both are passed.

2026-05-07 (v0.0.2)

ResponsiveButton — added is_active prop: renders with disabled-like grey styling when false, but stays fully clickable and continues to emit click-button.
Package renamed to @vibrant-wellness/va-responsive-components-library. Update your package.json and imports to use the new scoped name.
FoldableButton — refined padding/layout for tighter alignment.
Dialog — added headerIconWidth and headerIconHeight props to control the header icon container size (default '24px'). Added headerBackgroundColor and footerBackgroundColor props for custom header/footer background colors.
AreaCodePhoneInput — focus state now only tracks the phone number input, not the country selector.
Documentation now covers Tooltip, Pagination, InlineNotification, Dialog, StepAccordion, ProgressIndicator, and Repeater (all previously registered but undocumented).

2026-05-01

Tab — responsive sizing props added. Tab can now adapt to any container width with fine-grained control:
- width — total group width (Number → px, or any CSS length string)
- tab_width — fixed per-tab width (e.g. EHR ez-bill main-tab 135px)
- font_size, icon_size — independent label/icon scaling
- gap, padding — per-tab spacing for compact / spacious presets
- group_padding — horizontal padding on the group container itself (override outlined / filled default 0 24px, e.g. set 0 so tabs span the full configured width)
- overflow_mode — 'scroll' (default, hidden horizontal scroll) or 'ellipsis' (tabs shrink, labels truncate in place)
- Default: tabs keep their natural content width and the main row scrolls horizontally if content exceeds the container; labels never get aggressively cropped unless explicitly opted in.

2026-04-23

Public release of:
- FileUploader — fully-controlled file uploader with drag-and-drop, a 7-state row status machine (default / uploading / pending-success / pending-failure / failed / hide / hidden), and parent-driven progress. Follows the Figma File Uploader design.

2026-04-22

Public release of:
- Breadcrumb

2025-10-28

Public release of:
- DropdownMenu
- Badge
- FloatingActionButton
- DynamicColorResponsiveButton

Import options:

Global (plugin):
- app.use(VaResponsiveComponentsLibrary) then use components directly in templates.
Named import:
- import { DropdownMenu, Badge, FloatingActionButton, DynamicColorResponsiveButton, FoldableButton } from '@vibrant-wellness/va-responsive-components-library'

📦 Installation

npm install @vibrant-wellness/va-responsive-components-library

npm install @vibrant-wellness/va-responsive-components-library@latest

🎯 Quick Start

1. Install and Setup

First, import and register the library in your main.js:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VaResponsiveComponentsLibrary from '@vibrant-wellness/va-responsive-components-library'
import '@vibrant-wellness/va-responsive-components-library/style.css'

const app = createApp(App)
app.use(VaResponsiveComponentsLibrary)
app.mount('#app')

2. Use Components

<template>
  <div>
    <!-- Basic checkbox -->
    <Checkbox v-model="isChecked" label="Accept terms" />
    
    <!-- Phone input with country selection -->
    <AreaCodePhoneInput v-model="phoneData" />
    
    <!-- Dynamic color responsive button (Recommended) -->
    <DynamicColorResponsiveButton 
      display_name="Click me" 
      button_type="filled" 
      built_in_theme="primary"
      @click-button="handleClick"
    />

    <!-- Legacy button (Deprecated but still works; not maintained). New projects should migrate to DynamicColorResponsiveButton. -->
    <ResponsiveButton @click="handleClick">
      Click me
    </ResponsiveButton>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isChecked = ref(false)
const phoneData = ref({ area_code: '', phone_number: '' })

const handleClick = () => {
  console.log('Button clicked!')
}
</script>

📚 Components

Form Components

AreaCodePhoneInput

International phone number input with country selection and area code handling. Features automatic country flag display, smart focus management, and a clear button that appears on hover/focus.

Attributes

| Attribute | Description | Type | Default | |-----------|-------------|------|---------| | v-model / modelValue | binding value - object containing area_code (string) and phone_number (string) | {area_code: string, phone_number: string} | () => ({}) | | country_options | custom country list with country_name and country_code properties (country_code is 2-byte uppercase, e.g. 'US') | Array<{country_name: string, country_code: string}> | () => [] | | enable_backup_country_options | use built-in country list when no custom options provided | boolean | true | | country_filterable | enable country search/filtering in dropdown | boolean | true | | disabled | whether input is disabled | boolean | false | | size | size of the country selector and phone input | 'small' \| 'medium' \| 'large' | 'medium' | | clearable | show clear button on the phone input when it has a value | boolean | true |

Events

| Event | Description | Parameters | |-------|-------------|------------| | change | triggers when the binding value changes | {area_code: string, phone_number: string} | | focus | triggers when any part of the input gains focus | {area_code: string, phone_number: string} | | blur | triggers when the entire input loses focus | {area_code: string, phone_number: string} | | clear | triggers when clear button is clicked | {area_code: string, phone_number: string} |

Exposes

| Method | Description | Type | |--------|-------------|------| | focus | focus the appropriate input (country selector if no country selected, phone input if country selected) | () => void | | blur | blur both country selector and phone input | () => void | | clear | clear both country selection and phone number | () => void | | alert | show alert message below the input | (message: string) => void | | error | show error message below the input | (message: string) => void | | removeAlertOrErrorEffect | clear alert/error state and message | () => void |

<template>
  <AreaCodePhoneInput 
    v-model="phoneData" 
    :country_filterable="true"
    @change="handlePhoneChange"
  />
</template>

DatePicker

Calendar-based date input with a teleported dropdown. Supports single-date and date-range (dual-calendar) modes, three sizes, disabled state, a configurable display format, full-width layout, and the ability to disable past and/or future dates. The bound value type is configurable via valueType (ISO UTC string, native Date, or Unix timestamp).

Attributes

| Attribute | Description | Type | Default | |-----------|-------------|------|---------| | v-model / modelValue | Bound value. Single mode: a Date / number / string matching valueType. Range mode: an array of two such values. | Date \| number \| string \| Array \| null | null | | valueType | Controls the type emitted/bound: 'utc-string' (ISO 8601 UTC), 'date' (native Date), 'timestamp' (Unix ms). Does not affect the displayed label. | 'date' \| 'timestamp' \| 'utc-string' | 'utc-string' | | range | Enable date-range mode — shows two calendars side by side. The right panel is always kept at least one month ahead of the left. | boolean | false | | placeholder | Placeholder text shown when no date is selected. | string | 'Select date' | | size | Trigger size — like the selectors, the border sits on top of the content height: 'small' (32px + 2px border = 34px), 'medium' (40px + 2px border = 42px), 'large' (48px + 2px border = 50px). | 'small' \| 'medium' \| 'large' | 'medium' | | disabled | Disable the trigger and prevent opening the dropdown. | boolean | false | | format | Display format for the trigger label only (does not affect the emitted value). | 'MMM-DD-YYYY' \| 'YYYY-MM-DD' \| 'MM/DD/YYYY' | 'MMM-DD-YYYY' | | show_other_month_days | Show leading/trailing days from adjacent months in the calendar grid. | boolean | true | | full_width | When true, the trigger box stretches to fill its parent container instead of the default 280px width. | boolean | false | | disable_past_dates | When true, all dates before today are disabled and cannot be selected (today stays selectable). | boolean | false | | disable_future_dates | When true, all dates after today are disabled and cannot be selected (today stays selectable). | boolean | false |

Events

| Event | Description | Parameters | |-------|-------------|------------| | update:modelValue | emitted on date selection (use with v-model); payload type matches valueType | (value: Date \| number \| string \| Array) | | change | emitted after the selection completes and the dropdown closes; payload type matches valueType | (value: Date \| number \| string \| Array) |

Usage

<template>
  <!-- Single date (default valueType 'utc-string' → ISO 8601 string) -->
  <DatePicker v-model="date" placeholder="Select a date" />

  <!-- Date range — v-model is an array of two values -->
  <DatePicker v-model="dateRange" :range="true" placeholder="Select date range" />

  <!-- Full width + disable past dates + native Date value -->
  <DatePicker
    v-model="bookingDate"
    valueType="date"
    :full_width="true"
    :disable_past_dates="true"
  />

  <!-- Range limited to today and earlier (e.g. a service-date filter) -->
  <DatePicker v-model="serviceDateRange" :range="true" :disable_future_dates="true" />
</template>

<script setup>
import { ref } from 'vue';
import { DatePicker } from '@vibrant-wellness/va-responsive-components-library';

const date = ref(null);            // '2026-03-22T12:00:00.000Z'
const dateRange = ref([]);         // ['2026-03-01T...Z', '2026-03-22T...Z']
const bookingDate = ref(null);     // Date { ... }
const serviceDateRange = ref([]);  // only today and earlier are selectable
</script>

NumberInput

Numeric stepper input with minus/plus buttons flanking a text field. Supports min/max clamping, a configurable step (optionally strict via step_strictly), three sizes, disabled state, and helper text with enable/warning/error styling (error also recolors the minus/plus buttons). Value can also be adjusted via Arrow Up/Down keys or by typing directly. v-model stays live as you type — every valid keystroke emits an already-clamped update:modelValue (so a parent reading the bound value at any moment, e.g. a Save button, never sees a stale number) — while change and the field's full internal "settle" only happen on blur, Enter, or a stepper click.

Attributes

| Attribute | Description | Type | Default | |-----------|-------------|------|---------| | v-model / modelValue | bound numeric value | Number | 0 | | min | lower bound; pass null for no lower bound | Number | null | | max | upper bound; pass null for no upper bound | Number | null | | step | amount added/subtracted per increment/decrement | Number | 1 | | step_strictly | when true, the value is always snapped to the nearest multiple of step (measured from min when set, otherwise from 0) — applies to typed/pasted text and externally-bound values, not just the stepper buttons | Boolean | false | | size | control size | 'small' \| 'medium' \| 'large' | 'medium' | | disabled | disable the field and both buttons | Boolean | false | | helper_info | helper text shown below the control | String | '' | | show_helper_info | whether to render the helper text | Boolean | true | | helper_info_type | helper text color; 'error' also recolors the minus/plus buttons red | 'enable' \| 'warning' \| 'error' | 'enable' |

Events

| Event | Description | Parameters | |-------|-------------|------------| | update:modelValue | emitted with the clamped value on every valid keystroke, AND whenever the value is committed (button click, Enter, or blur) | (value: Number) | | change | emitted only when the value settles (button click, Enter, or blur) and actually differs from the last settled value — not on every keystroke | (value: Number) | | focus | emitted when the text field gains focus | — | | blur | emitted when the text field loses focus (after the value is committed/clamped) | — |

Usage

<template>
  <NumberInput v-model="quantity" :min="0" :max="10" size="medium" />

  <!-- Custom step, no upper bound -->
  <NumberInput v-model="amount" :min="0" :step="5" />

  <!-- Error state with helper text -->
  <NumberInput
    v-model="quantity"
    :min="1"
    :max="5"
    helper_info="Maximum 5 allowed"
    helper_info_type="error"
  />
</template>

<script setup>
import { ref } from 'vue';
import { NumberInput } from '@vibrant-wellness/va-responsive-components-library';

const quantity = ref(1);
const amount = ref(0);
</script>

Navigation Components

Breadcrumb

Navigation breadcrumb component that displays a hierarchical path of items, separated by a /. Rebranded styling: enabled items are brand blue (ABC Oracle Book), the current (last) item is near-black Medium and underlined, and enabled items darken + go Medium on hover (layout-stable — the Medium width is reserved to avoid reflow). Supports an ABC or GT Pressura Mono (uppercase) typeface via type.

Attributes

| Attribute | Description | Type | Default | |-----------|-------------|------|---------| | stack | breadcrumb items array - each item should have id and name properties | Array<{id: string \| number, name: string}> | [] | | type | typeface variant: 'abc' (ABC Oracle) or 'pressura' (GT Pressura Mono, uppercase) | 'abc' \| 'pressura' | 'abc' |

Events

| Event | Description | Parameters | |-------|-------------|------------| | item-click | triggers when a breadcrumb item is clicked | (item: {id: string \| number, name: string}, index: number) |

Usage

<template>
  <Breadcrumb
    :stack="breadcrumbStack"
    @item-click="handleBreadcrumbClick"
  />
</template>

<script setup>
import { ref } from 'vue'

const breadcrumbStack = ref([
  { id: 'home', name: 'Home' },
  { id: 'products', name: 'Products' },
  { id: 'electronics', name: 'Electronics' },
  { id: 'current', name: 'Current Page' }
])

const handleBreadcrumbClick = (item, index) => {
  console.log(`Clicked: ${item.name} at index ${index}`)
  // Navigate to the clicked item
}
</script>

Theme/Behavior Notes

Visual Styling:

Enabled (non-current) items use var(--Blue) (#0142E2), ABC Oracle Book 350, 14px; clickable with pointer cursor. On hover they darken to var(--Blue_B_80) (#0135B5) and switch to Medium 500 (no underline).
Current item (last in stack) uses var(--Black) (#161616), Medium 500, with underline decoration
Separator is a / glyph (16px, var(--Black)) rendered in the brand font
type="pressura" switches items to GT Pressura Mono, uppercase (Text→Medium on hover/active)

Interaction Rules:

Only non-current items emit item-click events
Current item is visually distinct but does not emit click events
Each item must have a unique id and a display name

Tab

Tab group component with 7 type variants: outlined, filled, underline, button, vertical, capsule, and oval. Supports optional icons, badge indicators (dot, number, 99+ overflow, text pill), an independent separated tab, and v-model selection.

Icons must be extracted to standalone SVG files. This component library never inlines <svg> markup in templates — every icon used in a tab.icon (or indie_tab.icon) field is a separate .svg asset that you import and pass as a string path. Don't paste raw SVG markup into the icon field. If you don't yet have the icon as a file, save the SVG to @/assets/icons/<name>.svg first, then import iconX from '@/assets/icons/<name>.svg' and reference iconX. This keeps the icon set auditable, lets the build cache & deduplicate assets, and is required for the auto dark-bg invert (filter: brightness(0) invert(1)) to work uniformly across variants. To bypass the inversion or render custom markup, use the #icon-{index} / #icon-indie slots — that is the only sanctioned place for inline SVG.
Icon color on dark backgrounds: for variants with a dark selected background (filled selected, button, capsule selected, vertical selected, and oval with color="vibrant-dark" selected), Tab automatically inverts the icon image to white via filter: brightness(0) invert(1). If you're passing a pre-colored or already-white icon, use the #icon-{index} slot to render your own markup and bypass this filter.

Default selection: Tab does not auto-select the first tab on mount. The selected tab is whichever one has value === modelValue; if modelValue is '' (the default) or doesn't match any tab.value, no tab is highlighted. Initialize your v-model ref to the desired tab's value (e.g. const selected = ref('tab1')) to pre-select on mount.

Badge clearing: badges are purely data-driven. Clicking a tab does not clear its red dot / content badge automatically — if you want "click to mark as read" behavior, mutate the tabs array (or the indie_tab object) yourself in the @change handler.

Attributes

| Attribute | Description | Type | Default | |-----------|-------------|------|---------| | v-model / modelValue | currently selected tab value. Must equal a tab.value for that tab to render as selected — no auto-selection on mount. Default '' means nothing is highlighted. | string \| number | '' | | tabs | array of tab objects — each with value (required), label (required), icon? (string or false), badge? (true for dot, number for circle, string for pill, or object for full Badge props). Badges are data-driven: clicking a tab does not clear its badge; mutate the array yourself in @change if you want "click to mark as read". | Array | — (required) | | type | tab type variant | 'outlined' \| 'filled' \| 'underline' \| 'button' \| 'vertical' \| 'capsule' \| 'oval' | 'underline' | | color | color theme for capsule and oval types | 'sky' \| 'vibrant-dark' | 'sky' | | width | total group width. Number → px, String accepts any CSS length ('50%', '32rem', '400px'). Omit to inherit parent (100%). | string \| number | '' | | tab_width | fixed width applied to each tab. For horizontal types uses flex: 0 0 <w>; for vertical sets width / min-width directly (column flexbox would otherwise size height). Long labels ellipsis. Useful for grid-like layouts (e.g. EHR ez-bill main-tab 135px). | string \| number | '' | | font_size | label font size. Number → px. When set, also relaxes line-height to 1.5 so labels don't clip when the font exceeds a per-type hard-coded line-height (e.g. underline's 20px). Leave empty to keep the variant's default line-height. | string \| number | '' | | icon_size | icon box + SVG placeholder size. Number → px. Lets icons scale independently from font_size. | string \| number | '' | | gap | gap between tabs inside the main group. Overrides per-variant default (outlined / filled default 8px). | string \| number | '' | | padding | horizontal padding on each tab (padding-inline). Vertical padding from CSS is preserved. | string \| number | '' | | group_padding | horizontal padding on the group container itself (padding-inline). outlined and filled types add 0 24px by default; set this to 0 so tabs span the full configured width. Number → px; string accepts any CSS length. | string \| number | '' | | equal_width | when true, the tab bar fills 100% of its container and tabs share that width equally (flex: 1 1 0; long labels ellipsis). For full-width header bars with no separate right-side tab. Ignored for vertical and when indie_tab is set. Overrides tab_width when both are passed. | boolean | false | | overflow_mode | how to handle content exceeding the group width: 'scroll' (default, hidden horizontal scroll) or 'ellipsis' (tabs shrink in place, labels truncate). | 'scroll' \| 'ellipsis' | 'scroll' | | indie_tab | separated independent tab: { value, label, icon?, badge? }. Positioning: underline → right-aligned (margin-left: auto); vertical → pinned to bottom (margin-top: auto, requires sized parent); all other types render immediately after the main group. | object | null |

Events

| Event | Description | Parameters | |-------|-------------|------------| | update:modelValue | syncs v-model when tab selection changes | (value: string \| number) | | change | emitted when a different tab is selected | (value: string \| number) |

Slots

| Name | Description | |------|-------------| | #icon-{index} | Custom icon content for tab at given index. Receives { tab, selected } | | #icon-indie | Custom icon for the indie tab |

Usage

Each of the 7 type variants below has two example sets: "Dot badge" (boolean badge: true) and "Badge with content" (number / string / object).

Outlined (Large Page Tab)

The icon field on each tab accepts an imported SVG/PNG path (or false to hide the icon). Tab automatically inverts dark-background icons to white where appropriate.

<template>
  <!-- Dot badge -->
  <Tab v-model="selected" type="outlined" :tabs="primaryTabs" :indie_tab="primaryIndie" />

  <!-- Badge with content: dot, number, 99+, text pill -->
  <Tab v-model="selected2" type="outlined" :tabs="badgeTabs" :indie_tab="badgeIndie" />
</template>

<script setup>
import { ref } from 'vue';
import { Tab } from '@vibrant-wellness/va-responsive-components-library';
// Icons — any SVG/PNG path; pass `false` on a tab to hide its icon
import iconVP from '@/assets/icons/vibrant-products.svg';
import iconSP from '@/assets/icons/signature-programs.svg';
import iconPP from '@/assets/icons/practice-products.svg';
import iconPB from '@/assets/icons/product-bundles.svg';
import iconCF from '@/assets/icons/customized-fee.svg';
import iconEZ from '@/assets/icons/ez-bill.svg';
import iconDT from '@/assets/icons/document-template.svg';
import iconAU from '@/assets/icons/automation.svg';
import iconTM from '@/assets/icons/template-marketplace.svg';
import iconAR from '@/assets/icons/archive.svg';
import iconMS from '@/assets/icons/messages.svg';
import iconIN from '@/assets/icons/inbox.svg';

const selected = ref('tab1');
const selected2 = ref('tab1');

const primaryTabs = [
  { value: 'tab1', label: 'Option 1', icon: iconVP, badge: true },
  { value: 'tab2', label: 'Option 2', icon: iconSP, badge: true },
  { value: 'tab3', label: 'Option 3', icon: iconPP, badge: true },
  { value: 'tab4', label: 'Option 4', icon: iconPB, badge: true },
  { value: 'tab5', label: 'Option 5', icon: iconCF, badge: true },
];
const primaryIndie = { value: 'indie', label: 'Option 6', icon: iconEZ, badge: true };

const badgeTabs = [
  { value: 'tab1', label: 'Messages', icon: iconMS, badge: true },
  { value: 'tab2', label: 'Inbox',    icon: iconIN, badge: 3 },
  { value: 'tab3', label: 'Alerts',   icon: iconAU, badge: 12 },
  { value: 'tab4', label: 'Pending',  icon: iconTM, badge: 100 },
  { value: 'tab5', label: 'Spam',     icon: iconCF, badge: 'New' },
];
const badgeIndie = { value: 'tab6', label: 'Archive', icon: iconAR };
</script>

The Filled, Underline, Button, Vertical, Capsule, and Oval examples below are self-contained — each one imports only the icons it uses and defines its own tabs / indie_tab. Only the type (and optionally color, sizing props) changes per variant.

Filled (Large Page Tab)

Selected tab uses a dark-blue fill; icon images are auto-inverted to white on the selected tab.

<template>
  <!-- Dot badge -->
  <Tab v-model="selected" type="filled" :tabs="primaryTabs" :indie_tab="primaryIndie" />

  <!-- Badge with content (selected tab renders badge as white with dark text) -->
  <Tab v-model="selected2" type="filled" :tabs="badgeTabs" :indie_tab="badgeIndie" />
</template>

<script setup>
import { ref } from 'vue';
import { Tab } from '@vibrant-wellness/va-responsive-components-library';
import iconVP from '@/assets/icons/vibrant-products.svg';
import iconSP from '@/assets/icons/signature-programs.svg';
import iconPP from '@/assets/icons/practice-products.svg';
import iconPB from '@/assets/icons/product-bundles.svg';
import iconCF from '@/assets/icons/customized-fee.svg';
import iconEZ from '@/assets/icons/ez-bill.svg';
import iconDT from '@/assets/icons/document-template.svg';
import iconAU from '@/assets/icons/automation.svg';
import iconTM from '@/assets/icons/template-marketplace.svg';
import iconAR from '@/assets/icons/archive.svg';
import iconMS from '@/assets/icons/messages.svg';
import iconIN from '@/assets/icons/inbox.svg';

const selected = ref('tab1');
const selected2 = ref('tab1');

const primaryTabs = [
  { value: 'tab1', label: 'Option 1', icon: iconVP, badge: true },
  { value: 'tab2', label: 'Option 2', icon: iconSP, badge: true },
  { value: 'tab3', label: 'Option 3', icon: iconPP, badge: true },
  { value: 'tab4', label: 'Option 4', icon: iconPB, badge: true },
  { value: 'tab5', label: 'Option 5', icon: iconCF, badge: true },
];
const primaryIndie = { value: 'indie', label: 'Option 6', icon: iconEZ, badge: true };

const badgeTabs = [
  { value: 'tab1', label: 'Messages', icon: iconMS, badge: true },
  { value: 'tab2', label: 'Inbox',    icon: iconIN, badge: 3 },
  { value: 'tab3', label: 'Alerts',   icon: iconAU, badge: 12 },
  { value: 'tab4', label: 'Pending',  icon: iconTM, badge: 100 },
  { value: 'tab5', label: 'Spam',     icon: iconCF, badge: 'New' },
];
const badgeIndie = { value: 'tab6', label: 'Archive', icon: iconAR };
</script>

Underline (Medium Section Tab)

<template>
  <!-- Dot badge -->
  <Tab v-model="selected" type="underline" :tabs="primaryTabs" :indie_tab="primaryIndie" />

  <!-- Badge with content -->
  <Tab v-model="selected2" type="underline" :tabs="badgeTabs" :indie_tab="badgeIndie" />
</template>

<script setup>
import { ref } from 'vue';
import { Tab } from '@vibrant-wellness/va-responsive-components-library';
import iconVP from '@/assets/icons/vibrant-products.svg';
import iconSP from '@/assets/icons/signature-programs.svg';
import iconPP from '@/assets/icons/practice-products.svg';
import iconPB from '@/assets/icons/product-bundles.svg';
import iconCF from '@/assets/icons/customized-fee.svg';
import iconEZ from '@/assets/icons/ez-bill.svg';
import iconDT from '@/assets/icons/document-template.svg';
import iconAU from '@/assets/icons/automation.svg';
import iconTM from '@/assets/icons/template-marketplace.svg';
import iconAR from '@/assets/icons/archive.svg';

const selected = ref('tab1');
const selected2 = ref('tab1');

const primaryTabs = [
  { value: 'tab1', label: 'Option 1', icon: iconVP },
  { value: 'tab2', label: 'Option 2', icon: iconSP },
  { value: 'tab3', label: 'Option 3', icon: iconPP },
  { value: 'tab4', label: 'Option 4', icon: iconPB, badge: true },
  { value: 'tab5', label: 'Option 5', icon: iconCF, badge: true },
];
const primaryIndie = { value: 'indie', label: 'Option 6', icon: iconEZ, badge: true };

const badgeTabs = [
  { value: 'tab1', label: 'Messages', icon: iconEZ, badge: true },
  { value: 'tab2', label: 'Inbox',    icon: iconDT, badge: 3 },
  { value: 'tab3', label: 'Alerts',   icon: iconAU, badge: 12 },
  { value: 'tab4', label: 'Pending',  icon: iconTM, badge: 100 },
  { value: 'tab5', label: 'Spam',     icon: iconAR, badge: 'New' },
];
const badgeIndie = { value: 'tab6', label: 'Archive', icon: iconVP };
</script>

Button Tab

Full-width dark-blue button row; all tabs have a dark background, so icon images are always inverted to white. indie_tab is not typically used with this type.

<template>
  <!-- Dot badge -->
  <Tab v-model="selected" type="button" :tabs="primaryTabs" />

  <!-- Badge with content -->
  <Tab v-model="selected2" type="button" :tabs="badgeTabs" />
</template>

<script setup>
import { ref } from 'vue';
import { Tab } from '@vibrant-wellness/va-responsive-components-library';
import iconVP from '@/assets/icons/vibrant-products.svg';
import iconSP from '@/assets/icons/signature-programs.svg';
import iconPP from '@/assets/icons/practice-products.svg';
import iconPB from '@/assets/icons/product-bundles.svg';
import iconCF from '@/assets/icons/customized-fee.svg';
import iconEZ from '@/assets/icons/ez-bill.svg';
import iconDT from '@/assets/icons/document-template.svg';
import iconAU from '@/assets/icons/automation.svg';
import iconTM from '@/assets/icons/template-marketplace.svg';
import iconAR from '@/assets/icons/archive.svg';

const selected = ref('tab1');
const selected2 = ref('tab1');

const primaryTabs = [
  { value: 'tab1', label: 'Option 1', icon: iconVP, badge: true },
  { value: 'tab2', label: 'Option 2', icon: iconSP, badge: true },
  { value: 'tab3', label: 'Option 3', icon: iconPP, badge: true },
  { value: 'tab4', label: 'Option 4', icon: iconPB, badge: true },
  { value: 'tab5', label: 'Option 5', icon: iconCF, badge: true },
];

const badgeTabs = [
  { value: 'tab1', label: 'Messages', icon: iconEZ, badge: true },
  { value: 'tab2', label: 'Inbox',    icon: iconDT, badge: 3 },
  { value: 'tab3', label: 'Alerts',   icon: iconAU, badge: 12 },
  { value: 'tab4', label: 'Pending',  icon: iconTM, badge: 100 },
  { value: 'tab5', label: 'Spam',     icon: iconAR, badge: 'New' },
];
</script>

Vertical Menu Tab

Requires a sized parent container (the component fills 100% height). indie_tab is pinned to the bottom via margin-top: auto.

<template>
  <!-- Dot badge -->
  <div style="width: 320px; height: 900px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;">
    <Tab v-model="selected" type="vertical" :tabs="navTabs" :indie_tab="navIndie" />
  </div>

  <!-- Badge with content -->
  <div style="width: 320px; height: 900px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;">
    <Tab v-model="selected2" type="vertical" :tabs="navBadgeTabs" :indie_tab="navIndie" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Tab } from '@vibrant-wellness/va-responsive-components-library';
import iconEZ from '@/assets/icons/ez-bill.svg';
import iconDT from '@/assets/icons/document-template.svg';
import iconAU from '@/assets/icons/automation.svg';
import iconTM from '@/assets/icons/template-marketplace.svg';
import iconAR from '@/assets/icons/archive.svg';
import iconCF from '@/assets/icons/customized-fee.svg';

const selected = ref('ez-bill');
const selected2 = ref('ez-bill');

const navTabs = [
  { value: 'ez-bill',              label: 'eZ-Bill',              icon: iconEZ, badge: true },
  { value: 'document-template',    label: 'Document Template',    icon: iconDT, badge: true },
  { value: 'automation',           label: 'Automation',           icon: iconAU },
  { value: 'template-marketplace', label: 'Template Marketplace', icon: iconTM },
  { value: 'archive',              label: 'Archive',              icon: iconAR, badge: true },
];
const navBadgeTabs = [
  { value: 'ez-bill',              label: 'eZ-Bill',              icon: iconEZ, badge: true },
  { value: 'document-template',    label: 'Document Template',    icon: iconDT, badge: 5 },
  { value: 'automation',           label: 'Automation',           icon: iconAU, badge: 12 },
  { value: 'template-marketplace', label: 'Template Marketplace', icon: iconTM, badge: 100 },
  { value: 'archive',              label: 'Archive',              icon: iconAR, badge: 'New' },
];
const navIndie = { value: 'customized-fee', label: 'Customized Fee', icon: iconCF };
</script>

Capsule Switch Tab (two color variants: sky default, vibrant-dark)

<template>
  <!-- Sky (default) — dot badge -->
  <div style="width: 540px;">
    <Tab v-model="selected" type="capsule" :tabs="switchTabs" />
  </div>

  <!-- Sky — badge with content -->
  <div style="width: 540px;">
    <Tab v-model="selected2" type="capsule" :tabs="switchBadgeTabs" />
  </div>

  <!-- Vibrant Dark — dot badge -->
  <div style="width: 540px;">
    <Tab v-model="selected3" type="capsule" color="vibrant-dark" :tabs="switchTabs" />
  </div>

  <!-- Vibrant Dark — badge with content -->
  <div style="width: 540px;">
    <Tab v-model="selected4" type="capsule" color="vibrant-dark" :tabs="switchBadgeTabs" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Tab } from '@vibrant-wellness/va-responsive-components-library';
import iconVP from '@/assets/icons/vibrant-products.svg';
import iconPP from '@/assets/icons/practice-products.svg';

const selected = ref('vibrant');
const selected2 = ref('vibrant');
const selected3 = ref('vibrant');
const selected4 = ref('vibrant');

const switchTabs = [
  { value: 'vibrant',  label: 'Vibrant Products',  icon: iconVP, badge: true },
  { value: 'practice', label: 'Practice Products', icon: iconPP, badge: true },
];
const switchBadgeTabs = [
  { value: 'vibrant',  label: 'Vibrant Products',  icon: iconVP, badge: 3 },
  { value: 'practice', label: 'Practice Products', icon: iconPP, badge: 12 },
];
</script>

Oval Switch Tab (two color variants: sky default, vibrant-dark)

<template>
  <!-- Sky (default) — dot badge -->
  <div style="width: 580px;">
    <Tab v-model="selected" type="oval" :tabs="switchTabs" />
  </div>

  <!-- Sky — badge with content -->
  <div style="width: 580px;">
    <Tab v-model="selected2" type="oval" :tabs="switchBadgeTabs" />
  </div>

  <!-- Vibrant Dark — dot badge -->
  <div style="width: 580px;">
    <Tab v-model="selected3" type="oval" color="vibrant-dark" :tabs="switchTabs" />
  </div>

  <!-- Vibrant Dark — badge with content -->
  <div style="width: 580px;">
    <Tab v-model="selected4" type="oval" color="vibrant-dark" :tabs="switchBadgeTabs" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Tab } from '@vibrant-wellness/va-responsive-components-library';
import iconVP from '@/assets/icons/vibrant-products.svg';
import iconPP from '@/assets/icons/practice-products.svg';

const selected = ref('vibrant');
const selected2 = ref('vibrant');
const selected3 = ref('vibrant');
const selected4 = ref('vibrant');

const switchTabs = [
  { value: 'vibrant',  label: 'Vibrant Products',  icon: iconVP, badge: true },
  { value: 'practice', label: 'Practice Products', icon: iconPP, badge: true },
];
const switchBadgeTabs = [
  { value: 'vibrant',  label: 'Vibrant Products',  icon: iconVP, badge: 3 },
  { value: 'practice', label: 'Practice Products', icon: iconPP, badge: 12 },
];
</script>

Click-to-clear-badge pattern (badges are data-driven, so you clear them yourself in @change)

<template>
  <Tab v-model="selected" type="underline" :tabs="tabs" @change="onChange" />
</template>

<script setup>
import { ref } from 'vue';
import { Tab } from '@vibrant-wellness/va-responsive-components-library';

const selected = ref('tab1');
const tabs = ref([
  { value: 'tab1', label: 'Messages', badge: true },
  { value: 'tab2', label: 'Inbox', badge: 3 },
  { value: 'tab3', label: 'Alerts', badge: 12 },
]);

function onChange(value) {
  const t = tabs.value.find(x => x.value === value);
  if (t) t.badge = false;  // mark-as-read on click
}
</script>

Responsive Sizing

Tab adapts to any container by default (inherits parent width, scrolls horizontally when content overflows). For finer control, combine the responsive props below.

1. Total group width — width

<!-- Tab fills 380px regardless of parent. Number → px, or any CSS length string. -->
<Tab v-model="selected" type="filled" :width="380" :tabs="tabs" />
<Tab v-model="selected" type="oval"   width="50%"   :tabs="tabs" />
<Tab v-model="selected" type="outlined" width="32rem" :tabs="tabs" />

2. Fixed per-tab width + label font — tab_width + font_size (e.g. EHR ez-bill main-tab style)

<Tab
  v-model="selected"
  type="filled"
  :tab_width="135"
  :font_size="12"
  :tabs="tabs"
/>

3. Density presets — gap + padding + font_size + icon_size

<!-- Compact (sidebar / dense list) -->
<Tab
  v-model="selected"
  type="underline"
  :gap="2"
  :padding="6"
  :font_size="12"
  :icon_size="14"
  :tabs="tabs"
/>

<!-- Spacious (page header) -->
<Tab
  v-model="selected"
  type="underline"
  :gap="24"
  :padding="20"
  :font_size="16"
  :icon_size="24"
  :tabs="tabs"
/>

4. Overflow strategy — overflow_mode

<!-- Default: horizontal scroll (scrollbar hidden) — labels stay readable -->
<Tab v-model="selected" type="filled" :width="380" overflow_mode="scroll" :tabs="tabs" />

<!-- Or: ellipsis — tabs shrink in place, labels truncate where they sit -->
<Tab v-model="selected" type="filled" :width="380" overflow_mode="ellipsis" :tabs="tabs" />

All responsive props are independent — combine any of them. capsule always shares parent width evenly across its tabs because that is its design semantic.

ResponsiveButton

Responsive button component with multiple button types (filled, outlined, text), built-in themes (light, dark, error), and flexible sizing. Supports prefix/suffix slots, custom styling, and interaction effects.

Attributes

| Attribute | Description | Type | Default | |-----------|-------------|------|---------| | display_name | button text content | String | '' | | size | button size variant | 'small' \| 'medium' \| 'large' | 'small' | | width_type | button width behavior | 'fill-whole' \| 'fit-content' | 'fit-content' | | button_type | visual style type | 'filled' \| 'outlined' \| 'text' | 'filled' | | built_in_theme | color theme (for text buttons, only error theme has effect; light/dark have no effect) | 'light' \| 'dark' \| 'error' | 'dark' | | button_border_radius | CSS border-radius value | String | '4px' | | customized_class | additional CSS class(es) | String | '' | | button_id | identifier for click event payload | String | '' | | disabled | disable button interaction and click emission | Boolean | false | | is_active | when false, renders with disabled-like styling (grey) but the button remains fully clickable and emits click-button normally | Boolean | true |

Events

| Event | Description | Parameters | |-------|-------------|------------| | click-button | triggers when button is clicked | (buttonId: String, displayName: String) |

Slots

| Name | Description | |------|-------------| | default | button text content (alternative to display_name) | | prefix | content before button text | | suffix | content after button text |

<template>
  <ResponsiveButton
    display_name="Save Changes"
    size="medium"
    button_type="filled"
    built_in_theme="dark"
    width_type="fit-content"
    @click-button="handleSave"
  >
    <template #prefix>
      <svg viewBox="0 0 16 16"><path d="M8 2L6 6H2L5 9L4 14L8 11L12 14L11 9L14 6H10L8 2Z"/></svg>
    </template>
  </ResponsiveButton>
</template>

<script setup>
function handleSave(buttonId, displayName) {
  console.log('Button clicked:', buttonId, displayName)
}
</script>

Theme/Behavior Notes

Button Types:

filled: Solid background with theme color, white text
outlined: Transparent background with colored border, theme-colored text
text: No background or border, blue text by default. The error theme applies red color with appropriate hover/active states. light and dark themes have no visual effect.

Built-in Theme Colors:

dark: var(--VibrantDarkBlue) - primary dark blue
light: var(--New_Button_SkyBlue) - sky blue
error: var(--ErrorRed) - error red

Interaction States:

Hover: Filled buttons change to green hover color; outlined buttons darken; text buttons darken (or use error red hover if error theme)
Active: Filled buttons change to press blue color; outlined buttons show pressed state; text buttons show pressed background (or use error red pressed if error theme)
Disabled (disabled="true"): Gray background/border with gray text, not-allowed cursor, click events are not emitted
Inactive (is_active="false"): Same grey visual as disabled, but cursor stays normal, the element remains clickable, and click-button is still emitted — use when a button should look deselected/inactive but still respond to interaction

Size Variants:

small: 4px 24px padding, 4px gap
medium: 8px 24px padding, 6px gap
large: 12px 32px padding, 8px gap
text buttons use 8px horizontal padding regardless of size

Deprecated Components

InputBox

Versatile input field with clearable icon, inside/outside label, styled themes, and validation helpers. The component dynamically adjusts border/background/label colors based on state (hover, focus, disabled, alert, error) and supports prefix/suffix slots.

Attributes

| Attribute | Description | Type | Default | |-----------|-------------|------|---------| | v-model / modelValue | bound input value | string | '' | | label | label text (optional) | string | '' | | label_type | where to render the label | 'inside' \| 'outside' | 'outside' | | theme_type | visual styling theme | 'filled' \| 'outlined' | 'outlined' | | customized_theme_color | focus/brand color used for caret color and focus border or underline; any valid CSS color or CSS var | string | '' | | type | native input type | string | 'text' | | placeholder | placeholder text | string | 'Enter' | | clearable | show a clear icon when focused/hovered and value is non-empty | boolean | false | | required | show a required asterisk on the label. Visual-only; does not enforce validation | boolean | false | | disabled | disable the input | boolean | false | | autocomplete | native autocomplete | string | 'off' |

Behavior notes:

In filled theme, a bottom inset shadow emulates the underline. In outlined theme, an inset border is used. Colors are derived from:
- Focus: customized_theme_color (or var(--Schemes-primary) fallback)
- Hover: #17181C
- Disabled: var(--disabled-color--) and var(--disabled-button-background-color--)
- Alert/Error: var(--semantic-alert-color--) / var(--semantic-error-color--)
Inside label floats above the input content area and inherits a state color similar to the border color.
A message region appears below the field when either #supportingText slot has content or when alert/error is active with a message.
#supportingText is neutral and does not adopt alert/error colors; alert/error messages are colored separately.
Alert/Error messages are set via exposes: alert(message) / error(message); call removeAlertOrErrorEffect() to clear.
Disabled state down-weights message colors.

Events

| Event | Description | Parameters | |-------|-------------|------------| | input | fires on each keystroke | (value: string) | | change | fires on Enter or blur | (value: string) | | focus | input focused | () | | blur | input blurred | () | | clear | clear button clicked | () |

Exposes

| Method | Description | |--------|-------------| | focus | programmatically focus the input | | blur | programmatically blur the input | | alert | show alert state with a message (yellow) | | error | show error state with a message (red) | | removeAlertOrErrorEffect | clear alert/error state |

Slots

| Name | Description | |------|-------------| | prefix | content rendered before the input (e.g., an icon) | | suffix | content rendered after the input (e.g., an icon) | | supportingText | optional helper text rendered below the field (e.g., character counter like 0/100). This is distinct from alert/error messages and uses a neutral color. When alert/error is active, their messages render alongside (with their own colors) |

Tip: For prefix/suffix icons, prefer inline SVG that uses fill="currentColor". This way the icon color automatically follows the component state (hover/focus/disabled/alert/error). If you use <img> sources, they won't inherit color.

Usage

<template>
  <InputBox
    v-model="value"
    label="Email"
    label_type="inside"
    theme_type="outlined"
    customized_theme_color="var(--Schemes-primary)"
    type="email"
    placeholder="[email protected]"
    clearable
    autocomplete="email"
  >
    <template #prefix>
      <img src="/icons/mail.svg" style="width:100%;height:100%"/>
    </template>
  </InputBox>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

#### SingleSelector
Dropdown selector with inside/outside label, themed styling, filtering, optional remote search with pagination, grouped sections, and a fully customizable per-option and section-header layout. Mirrors `InputBox` visual behavior (hover/focus/disabled/alert/error), supports prefix/suffix slots plus a neutral `supportingText` message region, a helper info line below the field, and an overridable background color.

##### Attributes

| Attribute | Description | Type | Default |
|-----------|-------------|------|---------|
| v-model / modelValue | binding value (selected option's `value`) | `string \| number \| boolean \| object \| array` | `''` |
| label | label text | `string` | `''` |
| label_type | label position — `'inside'` (inside the input box) or `'outside'` | `'inside' \| 'outside'` | `'outside'` |
| size | selector size | `'small' \| 'medium' \| 'large'` | `'small'` |
| theme_type | visual theme | `'filled' \| 'outlined'` | `'outlined'` |
| customized_theme_color | caret color and focus/brand color; any CSS color or CSS var | `string` | `''` |
| required | show red asterisk next to label | `boolean` | `false` |
| options | options array — each option supports `value`, `label`, `prefix?`, `suffix?`, `prefix_slot_raw_html_content?`, `suffix_slot_raw_html_content?`, `disabled?`, `is_selected?` | `Array<Option>` | `() => []` |
| filterable | enable client-side filter input | `boolean` | `false` |
| remote_search | emit query outward instead of local filtering | `boolean` | `false` |
| remote_search_pagination | (with `remote_search`) enable infinite-scroll pagination — emits `remote-search-load-more` | `boolean` | `false` |
| remote_search_has_more | parent-controlled flag: whether more pages are available | `boolean` | `false` |
| remote_search_load_more_loading | parent-controlled flag: whether the next page is being fetched; shows a "Loading more..." row | `boolean` | `false` |
| remote_search_scroll_threshold | px from bottom of the scroll area that triggers `remote-search-load-more` | `number` | `80` |
| disabled | disable selector | `boolean` | `false` |
| placeholder | placeholder when no value | `string` | `'Select'` |
| clearable | show the "Clear" text button (same `TextButton` as `TextInput`'s) when there is a value and focused/hovered | `boolean` | `false` |
| dropdown_max_height | max height of the dropdown scroll area (any CSS height) | `string` | `'400px'` |
| dropdown_width | override the dropdown width (any CSS width, e.g. `'300px'`); empty = match the trigger width | `string` | `''` |
| loading | loading state (mirrors dropdown's `is_loading`) | `boolean` | `false` |
| loading_text | loading text | `string` | `'Loading'` |
| no_data_text | empty-state text | `string` | `'No data'` |
| filter_only_among_options_value | filter against serialized `value` only | `boolean` | `false` |
| filter_only_among_options_label | filter against `label` only | `boolean` | `false` |
| helper_info | grey hint text displayed below the field | `string` | `''` |
| background_color_override | override the trigger's background color (ignored when `disabled`) | `string` | `''` |
| customizedOptionStyle | render each option via the `#option` scoped slot (slot props: `{ option, index, is_selected, disabled }`) instead of the default prefix/label/suffix layout | `boolean` | `false` |
| customizeOptionItem | render the entire option element via the `#option_item` scoped slot — no built-in `<button>` wrapper, click handler, or default row layout. Slot props: `{ option, index, is_selected, disabled, select }`. Call `select()` from your own element to trigger the normal selection. Takes precedence over `customizedOptionStyle`. | `boolean` | `false` |
| sections | group options under labelled category headers. Structure: `[{ label: string, icon?: string, options: Option[] }]`. When non-empty, takes precedence over `options`. During filtering, sections with no matching options are hidden. `icon` is an optional URL for a 24×24 section icon shown next to the label. | `Array` | `() => []` |
| customizeSectionHeader | render each section header via the `#section_header` scoped slot instead of the default divider-label layout. Slot prop: `{ section }` — the full original section object (`label`, `icon`, `options`). | `boolean` | `false` |

Notes:

- `filter_only_among_options_value` and `filter_only_among_options_label` cannot both be `true`. If both are `true`, filtering uses `value`.
- Option `value` may be primitive or object; selection compares by `value` plus `label` for marking `is_selected` in lists.
- When `sections` is used, `options` is ignored. All label/prefix/suffix lookups and filtering operate on the flattened union of all section options.

##### Events

| Event | Description | Parameters |
|-------|-------------|------------|
| update:modelValue | syncs v-model when the selected value changes | `(value: any)` |
| change | triggers when the binding value changes | `(value: any)` |
| remote-search | emitted while typing when `remote_search=true` | `(query: string)` |
| remote-search-load-more | emitted when scrolling near the bottom with `remote_search_pagination=true` and `remote_search_has_more=true` | `(query: string)` |
| filter-change | emitted whenever the filter input text changes | `(query: string)` |
| visible-change | dropdown visibility changes | `(visible: boolean)` |
| focus | selector focused | `()` |
| blur | selector blurred | `()` |
| clear | clear button clicked | `()` |

##### Exposes

| Method | Description | Type |
|--------|-------------|------|
| focus | programmatically focus the selector | `() => void` |
| blur | programmatically blur the selector | `() => void` |
| alert | show alert state with a message (yellow) | `(msg: string) => void` |
| error | show error state with a message (red) | `(msg: string) => void` |
| removeAlertOrErrorEffect | clear alert/error state | `() => void` |
| setDropdownContentLoading | toggle the dropdown's internal loading spinner | `(val: boolean) => void` |

##### Slots

| Name | Slot props | Description |
|------|------------|-------------|
| prefix | — | content before the selected value (e.g. icon, flag) |
| suffix | — | replaces the default chevron; content after the selected value |
| supportingText | — | neutral helper text under the field; alert/error messages render alongside in their own colors |
| option | `{ option, index, is_selected, disabled }` | per-option custom content; only rendered when `customizedOptionStyle` is `true` |
| option_item | `{ option, index, is_selected, disabled, select }` | full per-option element (no built-in wrapper); only rendered when `customizeOptionItem` is `true`. Call `select()` to trigger the normal selection. |
| section_header | `{ section }` | custom section category header; only rendered when `customizeSectionHeader` is `true`. `section` is the full section object (`label`, `icon`, `options`). |

```vue
<SingleSelector
  v-model="selected"
  :options="options"
  filterable
  clearable
  placeholder="Choose option"
  :customizedOptionStyle="true"
>
  <template #prefix>
    <Icon name="search" />
  </template>
  <template #option="{ option, is_selected }">
    <span :class="['my-option', { selected: is_selected }]">
      <img :src="option.flag" />
      <span>{{ option.label }}</span>
      <small>{{ option.meta }}</small>
    </span>
  </template>
  <template #supportingText>
    Pick one option
  </template>
</SingleSelector>

<!-- Grouped sections -->
<SingleSelector
  v-model="selected"
  :sections="[
    { label: 'Fruits',     options: [{ value: 'apple', label: 'Apple' }, { value: 'banana', label: 'Banana' }] },
    { label: 'Vegetables', options: [{ value: 'carrot', label: 'Carrot' }, { value: 'broccoli', label: 'Broccoli' }] },
  ]"
  filterable
  clearable
/>

<!-- Sections with custom header -->
<SingleSelector
  v-model="selected"
  :sections="sections"
  :customizeSectionHeader="true"
  filterable
  clearable
>
  <!-- Slot prop: { section } — full section object (label, icon, options) -->
  <template #section_header="{ section }">
    <div class="my-header">
      <span class="badge">{{ section.options.length }}</span>
      <span>{{ section.label }}</span>
    </div>
  </template>
</SingleSelector>

DropdownMenu (dev-only)

Used internally by components to render options lists.

Props: width_type: 'fill-whole'|'fit-content', options (same schema as above), size: 'small'|'medium'|'large', with_box_shadow, is_loading, loading_text, no_data_text.
Events:
- select-dropdown-option(value, label, in_dropdown_level)
- add-new-shown-nested-dropdown(target_item_props, trigger)
- remove-shown-nested-dropdown(target_item_props)
- update-shown-nested-dropdown(target_item_props)
- click-outside-dropdown-menu(event)

MultiSelector

Multi-select dropdown with selected values rendered as inline chips, built-in search, optional remote search with pagination, grouped sections, per-option action link, and a fully customizable per-option and section-header layout (checkbox kept on the left). By default the dropdown is teleported to <body> (floats, repositions on scroll/resize); set :teleport="false" to render it inline — in normal flow directly below the trigger — so it grows its container instead of floating (useful inside modals/cards where a floating dropdown would overflow or need manual re-positioning). When closed, chips render on a single row — as many as fit, followed by a +N overflow chip (click it, or the trigger, to open and see all); opening the dropdown wraps all chips for full management. Includes a helper info line below the trigger.

Attributes

| Attribute | Description | Type | Default | |-----------|-------------|------|---------| | v-model / modelValue | array of selected values | Array | () => [] | | options | options array — each option supports value, label, prefix_slot_raw_html_content?, action_label?, disabled? | Array | () => [] | | size | selector size | 'small' \| 'medium' \| 'large' | 'medium' | | placeholder | placeholder in the search input when no chips are selected | string | 'Type to search' | | disabled | disable selector | boolean | false | | teleport | when true (default) the dropdown is teleported to <body> with fixed positioning (floats above all content); when false it renders in-flow directly below the trigger so following content is pushed down and an ancestor container (e.g. a dialog) grows to wrap it. dropdown_width is ignored in inline mode — the dropdown matches the trigger width. | boolean | true | | empty_text |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

VA Responsive Components Library

🚀 Features

🆕 What's New

2026-08-27

2026-08-20

2026-07-28

2026-07-08

2026-06-24

2026-06-18

2026-06-17

2026-06-05

2026-05-11

2026-05-08

2026-05-07 (v0.0.2)

2026-05-01

2026-04-23

2026-04-22

2025-10-28

📦 Installation

🎯 Quick Start

1. Install and Setup

2. Use Components

📚 Components

Form Components

AreaCodePhoneInput

Attributes

Events

Exposes

DatePicker

Attributes

Events

Usage

NumberInput

Attributes

Events

Usage

Navigation Components

Breadcrumb

Attributes

Events

Usage

Theme/Behavior Notes

Tab

Attributes

Events

Slots

Usage

Responsive Sizing

ResponsiveButton

Attributes

Events

Slots

Theme/Behavior Notes

Deprecated Components

InputBox

Attributes

Events

Exposes

Slots

Usage

DropdownMenu (dev-only)

MultiSelector

Attributes