ForceBPM UI Kit

A Vue 3 component library for ForceBPM applications, built on top of Vuetify 3.

Installation

npm install @it-enterprise/forcebpm-ui-kit

Requirements

| Package | Version | Required | | -------------- | --------- | ---------------------------------- | | vue | ^3.0.0 | yes | | vuetify | ^3.0.0 | yes | | vue-i18n | ^11.2.8 | optional (needed for translations) | | @vueuse/core | ^14.1.0 | optional |

The package ships raw Vue SFC and SCSS sources, so the host application must use a bundler that can process .vue and .scss files (Vite, Webpack with vue-loader, etc.).

Usage

1. As a plugin

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import vuetify from './plugins/vuetify'
import i18n from './plugins/i18n'
import emitter, { eventBusPlugin } from './plugins/eventBus'
import events from './plugins/eventBus/events'

import ForceBPMUiKit from '@it-enterprise/forcebpm-ui-kit'

const app = createApp(App)

app.use(vuetify)
app.use(i18n)
app.use(eventBusPlugin)

app.use(ForceBPMUiKit, { i18n, emitter, events })

app.mount('#app')

2. Event bus

Some components can be triggered programmatically through an external event bus. Pass a mitt (or compatible) instance as emitter and an events map that the components use to subscribe to the correct event names.

// plugins/eventBus/events.js
export default {
  modal: {
    sharingAccess: 'sharing-access'
  },
  confirm: 'confirm-dialog'
}

// trigger a modal from anywhere in the app
emitter.emit(events.modal.sharingAccess, payload)
emitter.emit(events.confirm, payload)

Plugin options

| Option | Type | Default | Description | | ---------------- | ---------------- | ------- | ----------------------------------------------------------------------------------------------------- | | registerGlobal | boolean | true | Register components globally on the app instance | | prefix | string | 'F' | Component name prefix (e.g., set to 'Fbpm' to expose FbpmAvatar instead of FAvatar) | | i18n | object \| null | null | vue-i18n instance — built-in translations are merged into it | | messages | object \| null | null | Extra translations deep-merged on top of the defaults | | emitter | object \| null | null | Event bus instance (mitt, tiny-emitter, etc.) provided to components via inject('fbpm-emitter') | | events | object | {} | Map of event names provided via inject('fbpm-events') |

Components

Layout & overlays

| Component | Description | | ---------------- | -------------------------------- | | FDialog | Generic modal dialog | | FConfirmDialog | Confirmation dialog | | FShare | Share dialog | | FContextMenu | Context menu | | FToolbar | Toolbar container | | FTabPanel | Tab panel inside a toolbar | | FViewerPanel | View-mode panel inside a toolbar | | FFilterPanel | Filter panel inside a toolbar | | FSortPanel | Sort panel inside a toolbar |

Inputs & pickers

| Component | Description | | ------------------ | -------------------------------- | | FSearchPanel | Search input panel | | FDatePicker | Date picker | | FMenuDatePicker | Date picker wrapped in a menu | | FTextFieldDate | Date text field | | FUserGroupPicker | User / user-group picker | | FLangSwitcher | Language switcher | | FTiptapEditor | Rich-text editor based on Tiptap | | FQueryBuilder | Visual query builder |

Feedback & state

| Component | Description | | ----------------- | ------------------------------- | | FLoader | Animated dots loader | | FPreLoader | Full-screen / overlay preloader | | FNoData | "No data" placeholder | | FNotify | Toast list | | FActionSnackbar | Action snackbar | | FPagination | Pagination control |

Display

| Component | Description | | -------------- | -------------------------------------------- | | FAvatar | User avatar with info menu | | FUserRoles | User roles display | | FHtmlContent | Safe HTML renderer (powered by DOMPurify) | | FTruncate | Truncating wrapper with tooltip | | FIcon | Icon component bound to the bundled icon set |

Utilities

import { hexToRGBA, createRadialGradient, colorCollection } from '@it-enterprise/forcebpm-ui-kit'

| Export | Description | | --------------------------- | ---------------------------------- | | hexToRGBA(hex, alpha) | Convert a hex color to rgba() | | createRadialGradient(...) | Build a CSS radial-gradient string | | colorCollection | Palette used by avatars / pickers |

Localization

Built-in locales:

• en — English
• uk — Українська
• ru — Русский

Add more or override existing keys via the messages plugin option.

Development

npm install
npm run test         # run vitest in watch mode
npm run test:run     # single test run
npm run test:coverage
npm run lint
npm run format

License

ISC — see LICENSE.