Components

Components

IONFLOW Frontend uses a combination of PrimeVue components and custom Vue components organized by functionality.

Component Philosophy

1. PrimeVue First: Always use PrimeVue components when available
2. Reusability: Create custom components only when truly needed
3. Type Safety: All props and emits must be typed
4. Testing: Components in src/components/ must have unit tests

Component Categories

Category	Location	Description
UI	src/components/common/	Generic utility components
Forms	src/components/	Form-related components
Layout	src/components/	Layout and structural components
Features	src/components/[feature]/	Feature-specific components

Directory Structure

src/components/
├── common/               # Generic utility components
│   ├── CustomToggle.vue
│   ├── GitBranch.vue
│   ├── HeaderView.vue
│   ├── TitleHeader.vue
│   └── TruncateText.vue
├── connections/          # Connection components
├── execution/            # Execution components
├── workflow/             # Workflow builder components
├── webhook/              # Webhook components
├── Header/               # Application header
├── SideBar/              # Navigation sidebar
└── Editor/               # Monaco JSON editor

PrimeVue Components

PrimeVue components are auto-imported and styled via Volt theme. Common components include:

Form Inputs

• InputText, InputNumber, Textarea, Password
• Checkbox, RadioButton, ToggleSwitch
• Select, MultiSelect, AutoComplete
• DatePicker, ColorPicker, Slider

Buttons & Actions

• Button, ButtonGroup, SplitButton, SpeedDial

Data Display

• DataTable, DataView, Tree, TreeTable
• Timeline, Paginator

Panels & Containers

• Card, Panel, Accordion, Tabs
• Dialog, Drawer, Popover

Feedback

• Toast, Message, ProgressBar, Skeleton

Creating New Components

When to Create

Scenario	Action
PrimeVue has it	Use PrimeVue component
Generic utility (reusable 3+ times)	Create in src/components/common/
Feature-specific (2+ times)	Create in src/components/[feature]/
Domain-specific (1 time)	Create in src/views/[domain]/components/

Component Template

<script setup lang="ts">
import { ref, computed } from 'vue';

type Props = {
  title: string;
  items?: Item[];
};

const props = withDefaults(defineProps<Props>(), {
  items: () => [],
});

type Emits = {
  select: [item: Item];
};

const emit = defineEmits<Emits>();

const handleSelect = (item: Item) => {
  emit('select', item);
};
</script>

<template>
  <div class="component-wrapper">
    <!-- Component content -->
  </div>
</template>

Required Files

For components in src/components/:

ComponentName/
├── ComponentName.vue       # Main component
├── ComponentName.spec.ts   # Unit tests (required)
└── types.ts                # Local types (if complex)

Component Guidelines

Do’s ✅

• Use PrimeVue components as base
• Type all props and emits
• Use Tailwind for styling
• Add unit tests for common components
• Use composables for shared logic

Don’ts ❌

• Don’t duplicate PrimeVue functionality
• Don’t use any type
• Don’t create components for single use
• Don’t add inline styles
• Don’t skip tests for common components

Quick Links

• UI Components
• Form Components
• Layout Components
• Feature Components
• Component Template

Related

• PrimeVue Documentation
• Composables
• Styling Guide