Uniface Element

A comprehensive enterprise-grade UI component library built with Svelte 5, designed for modern web applications.

中文文档

Features

✨ Enterprise-Grade Components - Complete set of components for business applications
🎨 Theme System - CSS variables-based theming with customizable design tokens
📱 Responsive Design - Mobile-first responsive components
🌍 Internationalization - Built-in i18n support with English and Chinese resources
🎯 TypeScript Support - Full TypeScript definitions for better development experience
🔧 Modular Architecture - Tree-shakable imports for optimal bundle size
⚡ High Performance - Built with Svelte 5 for maximum performance

Installation

npm install @ticatec/uniface-element

📚 Documentation

• Generated Component Reference - Source-derived API tables and a standalone Svelte example for every public component
• API Naming Guide - Naming conventions for props, callbacks, methods and types, with the 5.0.x → 5.1.0 rename table
• AI Coding Prompts Index - Category guides and a full component API matrix, meant to be handed to an AI coding assistant
• 中文文档 - Chinese documentation

Quick Start

1. Import Styles

// Import the main CSS file
import '@ticatec/uniface-element/ticatec-uniface-web.css';

2. Use Components

<script lang="ts">
  import Button from '@ticatec/uniface-element/Button';
  import DataTable from '@ticatec/uniface-element/DataTable';
  import type { DataColumn } from '@ticatec/uniface-element/DataTable';

  let columns: DataColumn[] = [
    { text: 'Name', field: 'name', width: 150 },
    { text: 'Email', field: 'email', width: 200 }
  ];

  let data = [
    { name: 'John Doe', email: '[email protected]' },
    { name: 'Jane Smith', email: '[email protected]' }
  ];
</script>

<Button type="primary" onclick={() => console.log('Clicked!')}>
  Click Me
</Button>

<DataTable {columns} list={data} />

Component Categories

Layout Components

• App Layouts: SidebarLayout, HeaderLayout, ClassicLayout, ColumnsLayout, RowsLayout
• Containers: Box, Card, Page, Accordion
• Form Layouts: FlexForm, GridForm, FormField
• Utilities: Split, Separator

Data Display

• Tables: DataTable, ConciseDataTable
• Lists: ListBox, TreeView
• Navigation: Breadcrumbs, Tabs, NavigatorMenu, PageStack | Navigation Components Docs
• Indicators: ProgressBar, ProgressStepBar, Tag

Form Controls

• Input: TextEditor, NumberEditor, MemoEditor, PasswordEditor | Form Editors Guide
• Selection: OptionsSelect, OptionsMultiSelect, CascadeOptionsSelect
• Date/Time: DatePicker, DateTimePicker, TimeEditor
• Search/Filter: SearchBox, NumberRange, DateRange - Advanced search and filtering components
• Others: CheckBox, RadioButton, Switch, ColorPicker

Feedback Components

• Dialogs: Dialog, MessageBox, Drawer
• Notifications: Toast, PopupHint
• Overlays: FullScreenOverlay

Advanced Components

• Editors: InlineCellEditor, PropertyEditor, PromptsTextEditor
• File Upload: AttachmentEditor, ImageEditor
• Data Transfer: Transfer
• Search: SearchBox, CriteriaField

Usage Examples

Data Table with Selection

<script lang="ts">
  import DataTable from '@ticatec/uniface-element/DataTable';
  import type { DataColumn } from '@ticatec/uniface-element/DataTable';

  let columns: DataColumn[] = [
    {
      field: 'name',
      text: 'Name',
      width: 200
    },
    {
      field: 'email',
      text: 'Email',
      width: 250
    },
    {
      field: 'status',
      text: 'Status',
      width: 120
    }
  ];
  
  let data = [
    { id: 1, name: 'John Doe', email: '[email protected]', status: 'Active' },
    { id: 2, name: 'Jane Smith', email: '[email protected]', status: 'Inactive' },
    { id: 3, name: 'Bob Johnson', email: '[email protected]', status: 'Active' }
  ];
  
  let selectedRows = [];
</script>

<DataTable {columns} list={data} bind:selectedRows />

Dialog with Form

<script lang="ts">
  import Dialog from '@ticatec/uniface-element/Dialog';
  import Button from '@ticatec/uniface-element/Button';
  import TextEditor from '@ticatec/uniface-element/TextEditor';
  import FormField from '@ticatec/uniface-element/FormField';

  let showDialog = false;
  let formData = { name: '', email: '' };

  const actions = [
    { label: 'Cancel', handler: () => { showDialog = false; } },
    { label: 'Save', type: 'primary', handler: () => { showDialog = false; } }
  ];
</script>

<Button onclick={() => showDialog = true}>Open Dialog</Button>

<Dialog bind:visible={showDialog} title="Edit User" {actions}>
  <FormField label="Name">
    <TextEditor bind:value={formData.name} />
  </FormField>

  <FormField label="Email">
    <TextEditor bind:value={formData.email} type="email" />
  </FormField>
</Dialog>

Theme Customization

The library uses CSS custom properties for theming. You can customize the appearance by overriding these variables:

:root {
  --uniface-primary-color: #0061FF;
  --uniface-secondary-color: #22BDFF;
  --uniface-primary-text-color: #374151;
  --uniface-button-common-bg: #f0f0f0;
  --uniface-hover-item-background: #f7f7f7;
  /* ... more variables */
}

Internationalization

The library includes built-in internationalization support:

The default language is English. Other languages are loaded dynamically at runtime, so adding a new language never requires a code change.

Create a language resource json file in the static web directory, example: /assets/uniface_zh-CN.json (this is the complete key list):

{
  "uniface": {
    "common": {
      "btnClose": "关闭",
      "btnCancel": "取消",
      "btnConfirm": "确定",
      "textMore": "加载更多",
      "filterPlaceholder": "搜索...",
      "noResultsText": "无匹配结果..."
    },
    "colorPicker": "选择颜色",
    "calendar": {
      "months": [
        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
      ],
      "monthsAbbr": [
        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
      ],
      "weekTitle": [
        "周日", "周一", "周二", "周三", "周四", "周五", "周六"
      ],
      "weekTitleAbbr": [
        "日", "一", "二", "三", "四", "五", "六"
      ],
      "confirmText": "确定"
    },
    "upload": {
      "btnRetry": "重试",
      "btnRemove": "删除",
      "btnPickup": "选择文件"
    },
    "dataTable": {
      "rowNo": "#",
      "actions": "操作",
      "emptyDataSet": "暂无数据",
      "totalInfo": "共 <b>{{total}}</b> 条",
      "rowsPerPage": "行/页"
    },
    "transfer": {
      "selectIndicator": "已选择: {{selected}}/{{total}}"
    }
  }
}

Load the resource file in +page.svelte or another startup page:

import i18n, {i18nUtils} from "@ticatec/i18n";

// 设置语言
i18n.setLanguage('zh-CN'); // 或 'en'
i18nUtils.loadResources('/assets/uniface.json'); // the language code will insert before .json => /assets/uniface_zh-CN.json

Available Imports

Modular Imports

// Individual component imports
import Button from '@ticatec/uniface-element/Button';
import DataTable from '@ticatec/uniface-element/DataTable';
import SidebarLayout from '@ticatec/uniface-element/app-layout/SidebarLayout';
import AttachmentEditor from '@ticatec/uniface-element/AttachmentEditor';
import ImageEditor from '@ticatec/uniface-element/ImageEditor';
import MemoEditor from '@ticatec/uniface-element/MemoEditor';

// Utility imports
import { utils } from '@ticatec/uniface-element/utils';
import type { DataColumn } from '@ticatec/uniface-element/DataTable';

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build

# Run type checking
npm run check

Browser Support

• Chrome ≥ 88
• Firefox ≥ 85
• Safari ≥ 14
• Edge ≥ 88

License

MIT License - see LICENSE file for details.

Author

Henry Feng - Ticatec

Documentation

Component-by-category guides and a full props/events/snippets API matrix are available in assets/ai-coding/:

• Form editors - TextEditor, NumberEditor, DatePicker, OptionsSelect, CheckBox, Switch, and more
• Layouts and containers - FlexForm, GridForm, FormField, Page, ActionBar, SidebarLayout, ClassicLayout
• Data display and tables - DataTable, ConciseDataTable, TreeView, Card, Accordion, ListBox
• Overlays and feedback - Dialog, CommonDialog, Drawer, Toast, MessageBox, Tooltip, ContextMenu
• Navigation and general - Tabs, Breadcrumbs, Pagination, Button, IconButton, Split, Tag, Transfer
• Components API matrix - full props/types/events/snippets reference for every core component

You can also browse the demo components under /src/routes/demo for live, working examples.