# Vue Component API

This is the compact API reference for the official Vue adapter. Import components from `gnexus-ui-kit/vue`.

## Foundations

### `GnButton`

Props: `variant`, `size`, `icon`, `loading`, `disabled`, `type`.

Slots: default.

```vue
<GnButton variant="secondary" icon="ph-plus" :loading="saving">Create</GnButton>
```

### `GnIconButton`

Props: `icon`, `label`, `type`, `withoutHover`.

```vue
<GnIconButton icon="ph-x" label="Close" />
```

### `GnBadge`, `GnAlert`

Props: `variant`; `GnBadge` also supports `outline`.

```vue
<GnBadge variant="success">Online</GnBadge>
<GnAlert variant="warning">Check this before release.</GnAlert>
```

## Forms

### `GnInput`, `GnTextarea`, `GnSelect`

Props: `modelValue`, `label`, `icon`, `state`, `help`.

Emits: `update:modelValue`.

```vue
<GnInput v-model="name" label="Project name" icon="ph-pencil-simple" />
<GnTextarea v-model="notes" label="Notes" state="warning" help="Review before publishing" />
<GnSelect v-model="status" label="Status" :options="statusOptions" />
```

### `GnCheckbox`, `GnSwitch`

Props: `modelValue`, `label`, `disabled`.

Emits: `update:modelValue`.

```vue
<GnSwitch v-model="enabled">Enabled</GnSwitch>
```

### `GnRadio`, `GnRadioGroup`

Props: `modelValue`, `value`, `label`, `name`, `disabled`; group accepts `options`.

Emits: `update:modelValue`.

```vue
<GnRadioGroup v-model="mode" label="Mode" :options="modes" />
```

### `GnRange`

Props: `modelValue`, `label`, `min`, `max`, `step`.

Emits: `update:modelValue`.

```vue
<GnRange v-model="rollout" label="Rollout" />
```

### `GnCombobox`

Props: `modelValue`, `label`, `icon`, `options`, `placeholder`, `notFoundText`, `state`, `help`.

Emits: `update:modelValue`, `select`.

```vue
<GnCombobox v-model="assignee" label="Assignee" icon="ph-user" :options="people" />
```

### `GnFileUpload`

Props: `modelValue`, `title`, `description`, `primary`, `secondary`, `badge`, `multiple`, `accept`.

Emits: `update:modelValue`, `change`.

```vue
<GnFileUpload v-model="files" badge="Max 12 MB" />
```

## Navigation And Overlays

### `GnTabs`

Props: `modelValue`, `items`, `compact`, `vertical`, `ariaLabel`.

Emits: `update:modelValue`.

Slots: one slot per item id.

```vue
<GnTabs v-model="tab" :items="tabs">
  <template #overview>Overview</template>
</GnTabs>
```

### `GnAccordion`

Props: `items`, `modelValue`, `multiple`.

Emits: `update:modelValue`.

Slots: one slot per item id.

### `GnDropdown`, `GnPopover`, `GnTooltip`

`GnDropdown` props: `label`, `icon`, `variant`, `items`.

`GnPopover` props: `label`, `title`, `text`, `icon`, `variant`.

`GnTooltip` props: `text`.

```vue
<GnDropdown :items="menuItems" @select="handleMenu" />
<GnPopover title="Context" text="Short contextual copy" />
<GnTooltip text="Short hint"><GnButton>Help</GnButton></GnTooltip>
```

### `GnNavigationShell`, `GnNavList`

`GnNavigationShell` props: `brand`, `logoSrc`, `current`, `title`, `subtitle`, `footerLeft`, `footerRight`, `items`.

`GnNavList` props: `items`.

Emits: `select`.

## Feedback

### `GnModal`, `GnDrawer`

Props: `open`, `title`; modal also has `closeOnBackdrop`; drawer has `position`.

Emits: `update:open`, `close`.

```vue
<GnModal v-model:open="open" title="Edit">
  Content
</GnModal>
```

### `GnToastProvider`, `useToast`

Wrap the app once and call `useToast()` in descendants. The provider shows one toast at a time.

```js
toast.success({ title: "Saved", text: "Changes applied" });
```

### `GnConfirmDialog`

Props: `open`, `title`, `message`, `confirmText`, `cancelText`, `confirmVariant`.

Emits: `update:open`, `confirm`, `cancel`.

## Data And Layout

### `GnTable`

Props: `columns`, `rows`, `caption`, `emptyText`.

Slots: `cell-${column.key}`, `empty`.

### `GnToolbar`, `GnSearchField`, `GnPagination`

Use for table/list screens.

```vue
<GnToolbar title="Projects" meta="24 records">
  <template #actions><GnSearchField v-model="query" /></template>
</GnToolbar>
<GnPagination :page="page" :total-pages="12" @update:page="page = $event" />
```

### `GnDescriptionList`, `GnProgress`, `GnUsageMeter`, `GnProgressStages`, `GnSteps`

Use for metadata, rollout state, and staged flows.

### `GnChip`, `GnChipGroup`

Props: `variant`, `icon`, `selected`, `disabled`, `removable`.

Emits: `remove`.

### `GnAvatar`, `GnIdentity`, `GnAvatarStack`

Use for people/entity identity rows.

### `GnTimeline`, `GnActivityLog`

Use for event history and compact audit rows.

### `GnCard`, `GnStatusCard`, `GnMetricCard`, `GnActionCard`

Use specialized cards before writing raw `.card` markup.

### `GnList`, `GnDefinitionList`, `GnActionList`

Use list wrappers before raw `.list` markup when data is available as arrays.

### `GnEmptyState`, `GnSkeleton`, `GnLoader`

Use for loading and empty states.