@caido-utils/components

Vue 3 components for Caido plugin frontends.

Installation

pnpm add @caido-utils/components

Peer dependencies: vue, primevue, @caido/sdk-frontend, @codemirror/view

import { Dialog, Table, HttpqlInput, Card } from "@caido-utils/components";

ButtonGroup

Toggle button group. Always requires a selection (no empty state).

<ButtonGroup v-model="view" :options="options" />

Props

| Name | Type | Default | Description | | ------------ | ------------------------------------ | --------- | ------------------------ | | modelValue | string | required | Currently selected value | | options | { label: string; value: string }[] | required | Available options | | size | "small" \| "large" | "small" | Button size |

Emits

| Event | Payload | Description | | ------------------- | -------- | ---------------------- | | update:modelValue | string | Selected value changed |

Card

Styled container card. Passes through all PrimeVue Card props and slots.

<Card>
  <template #content>
    <p>Card body</p>
  </template>
</Card>

Slots

All PrimeVue Card slots: #header, #title, #subtitle, #content, #footer.

ContextMenu

Right-click context menu with dark styling.

<div @contextmenu.prevent="ctxRef?.show($event)">
  Right-click here
</div>
<ContextMenu ref="ctxRef" :items="menuItems" />

Props

| Name | Type | Default | Description | | ------- | ------------ | -------- | ------------------------ | | items | MenuItem[] | required | PrimeVue menu item array |

Exposed Methods

| Method | Signature | Description | | -------- | ----------------------------- | ---------------------- | | show | (event: MouseEvent) => void | Show at mouse position | | hide | () => void | Hide menu | | toggle | (event: MouseEvent) => void | Toggle visibility |

DataTable

PrimeVue DataTable with virtual scrolling, compact styling, resizable columns, and scroll position memory.

<DataTable
  v-model:selection="selected"
  v-model:active-row="activeRow"
  :items="rows"
  :columns="columns"
  selectable="multiple"
  scroll-key="my-table"
  data-key="id"
  @row-select="onSelect"
/>

Props

| Name | Type | Default | Description | | ------------ | --------------------------------------------------------- | -------- | ----------------------------------- | | items | Record<string, unknown>[] | required | Row data | | columns | { field: string; header: string; sortable?: boolean }[] | required | Column definitions | | rowHeight | number | 33 | Row height in pixels | | selectable | false \| "single" \| "multiple" | false | Selection mode | | selection | Record<string, unknown>[] | [] | Selected rows (v-model) | | activeRow | Record<string, unknown> \| null | null | Highlighted row (v-model) | | scrollKey | string | - | Key for scroll position persistence |

Additional PrimeVue DataTable props are forwarded via $attrs (e.g. dataKey).

Emits

| Event | Payload | Description | | ------------------ | ----------------------------------- | ------------------ | | update:selection | Record<string, unknown>[] | Selection changed | | update:activeRow | Record<string, unknown> \| null | Active row changed | | row-select | { data: Record<string, unknown> } | Row selected | | row-unselect | { data: Record<string, unknown> } | Row unselected | | row-click | { data: Record<string, unknown> } | Row clicked |

Slots

| Slot | Scope | Description | | -------------- | ----------------- | ------------------------------- | | cell-{field} | { item, value } | Custom cell renderer per column |

Dialog

Modal dialog with header, optional footer with action/cancel buttons.

<Dialog
  v-if="visible"
  title="Confirm Action"
  width="500px"
  action-label="Save"
  action-icon="fas fa-save"
  @close="visible = false"
  @action="handleSave"
>
  <p>Dialog content here</p>
</Dialog>

Props

| Name | Type | Default | Description | | ---------------- | --------- | ----------- | ------------------------------------ | | title | string | required | Header text | | width | string | required | CSS width (e.g. "500px") | | showBack | boolean | false | Show back arrow in header | | showFooter | boolean | true | Show footer with buttons | | actionLabel | string | "Confirm" | Primary button label | | actionIcon | string | - | Font Awesome class for action button | | actionDisabled | boolean | false | Disable action button | | actionLoading | boolean | false | Show loading state on action button | | cancelLabel | string | "Cancel" | Cancel button label | | contentClass | string | - | CSS class for dialog content area |

Emits

| Event | Description | | -------- | ----------------------------- | | close | X button or cancel clicked | | back | Back arrow clicked | | action | Primary action button clicked |

Slots

| Slot | Description | | --------- | ----------------------------------- | | default | Dialog body content | | footer | Override the default footer buttons |

HttpqlInput

HTTPQL query input with syntax highlighting and context-aware autocomplete.

<HttpqlInput
  v-model="query"
  :loading="isSearching"
  placeholder="Filter requests..."
  @submit="onSearch"
/>

Props

| Name | Type | Default | Description | | ------------- | --------- | ---------------------------- | ----------------- | | modelValue | string | required | Query string | | placeholder | string | "Enter an HTTPQL query..." | Placeholder text | | loading | boolean | false | Show spinner icon |

Emits

| Event | Description | | ------------------- | ---------------------------------------------- | | update:modelValue | Query text changed | | submit | Enter pressed (when no suggestion is selected) |

Autocomplete

The suggestion engine provides context-aware completions:

| Context | Suggestions | | ------------------------------------ | ------------------------------------------------- | | Empty input / after logical operator | Namespaces: req, resp, row, filter | | After namespace (e.g. req.) | Fields for that namespace | | After field (e.g. req.method.) | Operators based on field type | | After filter: | inscope, recent, 1hr, 6hr, 12hr, 24hr | | After a completed value | AND, OR |

Syntax uses dot/colon notation: req.method.eq:"GET"

Menu

Popup tiered menu with dark styling.

<Menu ref="menuRef" :items="menuItems" />

Props

| Name | Type | Default | Description | | ------- | ------------ | -------- | ---------------------------------------------- | | items | MenuItem[] | required | PrimeVue menu items (supports nested submenus) |

Exposed Methods

| Method | Signature | Description | | -------- | ------------------------ | -------------------- | | show | (event: Event) => void | Show at event target | | hide | () => void | Hide menu | | toggle | (event: Event) => void | Toggle visibility |

MenuButton

Button that opens a popup menu on click.

<MenuButton :items="menuItems" label="Actions" icon="fas fa-ellipsis-v" />

Props

| Name | Type | Default | Description | | ---------- | -------------------- | ------------ | ------------------------ | | items | MenuItem[] | required | Menu items | | label | string | - | Button label | | icon | string | - | Font Awesome icon class | | severity | string | "contrast" | PrimeVue button severity | | size | "small" \| "large" | "small" | Button size | | disabled | boolean | false | Disable button |

MultiSelect

Compact multi-select dropdown with chip display.

<MultiSelect
  v-model="selectedProfiles"
  :options="profiles"
  option-label="name"
  option-value="id"
  placeholder="Select profiles..."
/>

Props

| Name | Type | Default | Description | | --------------- | ------------------- | ------------- | -------------------------------- | | modelValue | unknown[] | required | Selected values | | options | unknown[] | required | Available options | | optionLabel | string | "label" | Property name for display text | | optionValue | string | "value" | Property name for value | | placeholder | string | "Select..." | Placeholder text | | display | "comma" \| "chip" | "chip" | How selected items are displayed | | filter | boolean | false | Show search input | | showToggleAll | boolean | false | Show select all checkbox | | disabled | boolean | false | Disable component |

Additional PrimeVue MultiSelect props are forwarded via $attrs.

Emits

| Event | Payload | Description | | ------------------- | ----------- | ----------------- | | update:modelValue | unknown[] | Selection changed |

RequestEditor

Caido's native HTTP request editor.

<RequestEditor :sdk="sdk" :content="rawRequest" />

Props

| Name | Type | Default | Description | | -------------- | --------------------- | ------------------------ | --------------------------------- | | sdk | any | required | Caido frontend SDK instance | | content | string \| undefined | required | Raw HTTP request text | | emptyMessage | string | "No request available" | Message when content is undefined |

Use request.getRaw().toText() for the content prop.

ResponseEditor

Caido's native HTTP response editor.

<ResponseEditor :sdk="sdk" :content="rawResponse" />

Props

| Name | Type | Default | Description | | -------------- | --------------------- | ------------------------- | --------------------------------- | | sdk | any | required | Caido frontend SDK instance | | content | string \| undefined | required | Raw HTTP response text | | emptyMessage | string | "No response available" | Message when content is undefined |

Use response.getRaw().toText() for the content prop.

Table

High-performance sortable table with virtual scrolling (auto-enabled at 100+ rows), selection, context menu, and scroll position memory.

<Table
  :items="rows"
  :selected="selected"
  :columns="columns"
  :row-key="(r) => r.id"
  :active-key="activeId"
  selectable
  scroll-key="my-table"
  :context-menu="menuItems"
  @update:selected="selected = $event"
  @row-click="onRowClick"
>
  <template #cell-status="{ value }">
    <span :class="value === '200' ? 'text-green-400' : 'text-red-400'">{{ value }}</span>
  </template>
</Table>

Props

| Name | Type | Default | Description | | -------------- | --------------------- | ----------- | ----------------------------------- | | items | T[] | required | Row data | | selected | T[] | required | Selected items | | columns | Column[] | required | Column definitions (see below) | | rowKey | (item: T) => string | required | Unique key extractor | | activeKey | string | - | Row key of the highlighted row | | emptyMessage | string | "No data" | Message when empty | | selectable | boolean | false | Show checkbox column | | scrollKey | string | - | Key for scroll position persistence | | contextMenu | MenuItem[] | - | Right-click menu items | | resizable | boolean | false | Enable column resizing |

Column Definition

type Column = {
  key: string; // property name on row object
  header: string; // column header text
  width: string; // CSS width ("150px", "1fr", "auto")
  sortable?: boolean;
  sortType?: "string" | "number" | "date"; // default: "string"
};

Emits

| Event | Payload | Description | | ----------------- | ----------------- | ----------------- | | update:selected | T[] | Selection changed | | row-click | T | Row clicked | | row-contextmenu | [T, MouseEvent] | Row right-clicked |

Slots

| Slot | Scope | Description | | ------------ | ----------------------------- | ------------------------------- | | cell-{key} | { item: T, value: unknown } | Custom cell renderer per column |