UI Components

Generic, reusable UI components located in src/components/common/.

Available Components

Component	Description	Documentation
TruncateText	Text truncation with tooltip	View
HeaderView	Page header component	View
TitleHeader	Section title header	View
CustomToggle	Custom toggle switch	View
GitBranch	Git branch display	View

TruncateText

Truncates long text with ellipsis and optional tooltip.

Usage

<template>
  <TruncateText
    :text="longText"
    :max-length="50"
    show-tooltip
  />
</template>

<script setup lang="ts">
import TruncateText from '@/components/common/TruncateText.vue';

const longText = 'This is a very long text that needs to be truncated...';
</script>

Props

Prop	Type	Default	Description
`text`	`string`	required	Text to display
`maxLength`	`number`	`100`	Maximum characters
`showTooltip`	`boolean`	`true`	Show full text on hover

HeaderView

Page header with title, description, and actions slot.

Usage

<template>
  <HeaderView
    title="Flows"
    description="Manage your automation flows"
  >
    <template #actions>
      <Button label="Create Flow" />
    </template>
  </HeaderView>
</template>

Props

Prop	Type	Default	Description
`title`	`string`	required	Page title
`description`	`string`	`''`	Page description

Slots

Slot	Props	Description
`actions`	-	Action buttons

TitleHeader

Section title with optional icon and action.

Usage

<template>
  <TitleHeader
    title="Settings"
    icon="pi pi-cog"
  />
</template>

Props

Prop	Type	Default	Description
`title`	`string`	required	Section title
`icon`	`string`	`''`	PrimeIcons class

CustomToggle

Custom styled toggle switch (wrapper around PrimeVue ToggleSwitch).

Usage

<template>
  <CustomToggle
    v-model="isEnabled"
    label="Enable feature"
  />
</template>

<script setup lang="ts">
const isEnabled = ref(false);
</script>

Props

Prop	Type	Default	Description
`modelValue`	`boolean`	`false`	Toggle state
`label`	`string`	`''`	Label text
`disabled`	`boolean`	`false`	Disabled state

Emits

Event	Payload	Description
`update:modelValue`	`boolean`	State change

GitBranch

Displays git branch name with icon.

Usage

<template>
  <GitBranch branch="feature/new-flow" />
</template>

Props

Prop	Type	Default	Description
`branch`	`string`	required	Branch name

Creating New UI Components

Use the component template when creating new UI components.

UI Components

UI Components

Available Components

TruncateText

Usage

Props

HeaderView

Usage

Props

Slots

TitleHeader

Usage

Props

CustomToggle

Usage

Props

Emits

GitBranch

Usage

Props

Creating New UI Components

Checklist

Related