API index
Every component, with its name in each adapter. Generated from the library sources by npm run gen (scripts/gen-api.ts) — props and events come from the real component definitions, so this page cannot drift from the code.
| Component | Vue | React | Angular | Props |
|---|---|---|---|---|
| ActivityFeed | ThlActivityFeed | ActivityFeed | thl-activity-feed | 1 |
| Alert | ThlAlert | Alert | thl-alert | 6 |
| AppLayout | ThlAppLayout | AppLayout | thl-app-layout | 8 |
| AuthLayout | ThlAuthLayout | AuthLayout | thl-auth-layout | 2 |
| Avatar | ThlAvatar | Avatar | thl-avatar | 5 |
| AvatarGroup | — | AvatarGroup | — | |
| Badge | ThlBadge | Badge | thl-badge | 4 |
| BarChart | ThlBarChart | BarChart | thl-bar-chart | 5 |
| BlockOverlay | — | BlockOverlay | — | |
| Breadcrumb | ThlBreadcrumb | Breadcrumb | thl-breadcrumb | 1 |
| Button | ThlButton | Button | button[thl-button], a[thl-button] | 14 |
| ButtonGroup | ThlButtonGroup | ButtonGroup | thl-button-group | 2 |
| Calendar | ThlCalendar | Calendar | thl-calendar | 1 |
| CalendarGrid | ThlCalendarGrid | CalendarGrid | thl-calendar-grid | 7 |
| Card | ThlCard | Card | thl-card | 5 |
| CardActions | — | — | [thlCardActions] | |
| Carousel | ThlCarousel | Carousel | thl-carousel | 7 |
| Cell | — | — | ng-template[thlCell] | |
| Chat | ThlChat | Chat | thl-chat | 2 |
| Checkbox | ThlCheckbox | Checkbox | thl-checkbox | 7 |
| CheckboxGroup | ThlCheckboxGroup | CheckboxGroup | thl-checkbox-group | 4 |
| ColorBox | ThlColorBox | ColorBox | thl-color-box | 4 |
| ColorPicker | ThlColorPicker | ColorPicker | thl-color-picker | 3 |
| ConfirmHost | ThlConfirmHost | ConfirmHost | thl-confirm-host | 0 |
| DataTable | ThlDataTable | DataTable | thl-data-table | 17 |
| DatePicker | ThlDatePicker | DatePicker | thl-date-picker | 8 |
| DateRangePicker | ThlDateRangePicker | DateRangePicker | thl-date-range-picker | 3 |
| Divider | ThlDivider | Divider | — | 1 |
| Drawer | ThlDrawer | Drawer | thl-drawer | 4 |
| Dropdown | ThlDropdown | Dropdown | thl-dropdown | 5 |
| Editor | ThlEditor | Editor | thl-editor | 4 |
| ErrorLayout | ThlErrorLayout | ErrorLayout | thl-error-layout | 4 |
| Field | ThlField | Field | thl-field | 9 |
| FloatingLabel | ThlFloatingLabel | FloatingLabel | — | 2 |
| Form | ThlForm | Form | — | 3 |
| FormActions | ThlFormActions | FormActions | — | 0 |
| FormSection | — | FormSection | — | |
| Gallery | ThlGallery | Gallery | thl-gallery | 1 |
| HorizontalTimeline | ThlHorizontalTimeline | HorizontalTimeline | thl-horizontal-timeline | 2 |
| Icon | ThlIcon | Icon | thl-icon | 4 |
| InfoBox | ThlInfoBox | InfoBox | thl-info-box | 6 |
| Input | ThlInput | Input | input[thlInput], textarea[thlInput], select[thlInput] | 5 |
| InputGroup | ThlInputGroup | InputGroup | thl-input-group | 2 |
| Label | ThlLabel | Label | thl-label | 4 |
| LineChart | ThlLineChart | LineChart | thl-line-chart | 6 |
| List | ThlList | List | thl-list | 2 |
| MenuLink | — | — | ng-template[thlMenuLink] | |
| Modal | ThlModal | Modal | thl-modal | 9 |
| NativeSelect | ThlNativeSelect | NativeSelect | — | 3 |
| NumberInput | ThlNumberInput | NumberInput | thl-number-input | 9 |
| Page | ThlPage | Page | thl-page | 2 |
| Pagination | ThlPagination | Pagination | thl-pagination | 11 |
| Panel | ThlPanel | Panel | thl-panel | 8 |
| PieChart | ThlPieChart | PieChart | thl-pie-chart | 4 |
| Popover | ThlPopover | Popover | thl-popover | 5 |
| Preloader | ThlPreloader | Preloader | — | 1 |
| PricingTable | ThlPricingTable | PricingTable | thl-pricing-table | 1 |
| ProfileCard | ThlProfileCard | ProfileCard | thl-profile-card | 5 |
| Progress | ThlProgress | Progress | thl-progress | 8 |
| ProgressCircle | ThlProgressCircle | ProgressCircle | thl-progress-circle | 7 |
| Radio | ThlRadio | Radio | — | 7 |
| RadioGroup | ThlRadioGroup | RadioGroup | thl-radio-group | 5 |
| Ribbon | ThlRibbon | Ribbon | thl-ribbon | 5 |
| Select | ThlSelect | Select | thl-select | 10 |
| SettingsPanel | ThlSettingsPanel | SettingsPanel | thl-settings-panel | 1 |
| SideMenu | ThlSideMenu | SideMenu | thl-side-menu | 4 |
| Skeleton | ThlSkeleton | Skeleton | — | 4 |
| Slider | ThlSlider | Slider | thl-slider | 10 |
| Sparkline | ThlSparkline | Sparkline | thl-sparkline | 5 |
| Spinner | ThlSpinner | Spinner | thl-spinner | 2 |
| StatBox | ThlStatBox | StatBox | thl-stat-box | 7 |
| StatsRow | ThlStatsRow | StatsRow | thl-stats-row | 1 |
| Steps | ThlSteps | Steps | thl-steps | 5 |
| Switch | ThlSwitch | Switch | thl-switch | 5 |
| Table | ThlTable | SimpleTable | table[thlTable] | 6 |
| TabPanel | — | — | ng-template[thlTab] | |
| Tabs | ThlTabs | Tabs | thl-tabs | 5 |
| TagsInput | ThlTagsInput | TagsInput | — | 3 |
| Textarea | ThlTextarea | Textarea | — | 2 |
| Timeline | ThlTimeline | Timeline | thl-timeline | 3 |
| TimePicker | ThlTimePicker | TimePicker | thl-time-picker | 4 |
| Toaster | ThlToaster | Toaster | thl-toaster | 0 |
| TodoList | ThlTodoList | TodoList | thl-todo-list | 2 |
| Tooltip | ThlTooltip | Tooltip | thl-tooltip | 4 |
| TopbarColorMode | — | TopbarColorMode | — | |
| TopbarLocale | — | TopbarLocale | — | |
| TopbarMessages | ThlTopbarMessages | TopbarMessages | thl-topbar-messages | 5 |
| TopbarUser | — | TopbarUser | — | |
| Upload | ThlUpload | Upload | thl-upload | 7 |
| UserCard | ThlUserCard | UserCard | thl-user-card | 3 |
| Weather | ThlWeather | WeatherWidget | thl-weather | 5 |
| Well | ThlWell | Well | thl-well | 1 |
Core exports
| Area | Exports |
|---|---|
| Config | createThl, defaultConfig, PERSIST_KEYS, types ThlConfig, ThlUserConfig, ThlInstance, ThlComponentDefaults |
| i18n | createI18n, deepMerge, localeInfo, localeLoaders, types Messages, ThlMessages, TParams |
| Store | createStore, type Store |
| Headless | createTable, createSelect, createTabs, createSteps, createCarousel, createDisclosure, createAccordion, createSidebar, findActiveTrail, createToastManager, createUpload, createIdleTimer, paginate, pageSizeOptions, monthGrid, weekdayNames, monthNames, presetRanges, toISODate, parseISODate |
| Validation | rules, validate, validateAll |
| Utilities | bem, cx, uid, focusTrap, scrollLock, clickOutside, computePosition, getFocusable |
| Tokens | skins, skinNames, palette, semanticColors, breakpoints |
Adapter exports
React (@thl-ui/react) | Vue (@thl-ui/vue) | Angular (@thl-ui/angular) | |
|---|---|---|---|
| Install | ThlProvider | default plugin, ThlUI, createThlUI | provideThlUI, THL_CONFIG |
| Config | useThlConfig, useDefaults, usePrefix, useThl | useThlConfig, useDefaults, usePrefix, useThl | ThlConfigService |
| i18n | useT, useLocale | useI18n, $t | ThlI18nService, ThlTranslatePipe (thlT) |
| Toast | useToast | useToast | ThlToastService |
| Confirm | confirm | confirm | ThlModalService |
| Store bridge | useStore | useStore | storeSignal |
| All components | — | components (record) | THL_UI (imports array) |
| Forms | Form, Field, rules | ThlForm, ThlField, rules | Reactive Forms + thlValidators, ThlFieldComponent |