@ticatec/uniface-flexi-ui

Flexible and dynamic UI components for Svelte - including schema-driven forms, data tables, and criteria panels.

Features

• 🚀 Dynamic Form Generation: Create forms dynamically from JSON schemas
• 📊 Data Tables: Powerful data table with remote data loading
• 🔍 Criteria Panel: Advanced search and filtering capabilities
• 🏗️ FlexiModuleBase: Base class for dynamic modules with automatic component initialization
• 🌐 FlexiContext: Centralized context management for dictionaries and i18n
• 📱 Responsive Design: Mobile-friendly and adaptable layouts
• 🧩 Modular Architecture: Easily extensible with custom components
• 🎯 Type Safety: Full TypeScript support with comprehensive type definitions
• 🎭 Svelte 5 Ready: Built for the latest Svelte version

Installation

npm install @ticatec/uniface-flexi-ui @ticatec/dyna-js

Note: @ticatec/dyna-js is required for dynamic code execution features used internally by some components.

Quick Start

1. Initialize FlexiContext

import FlexiContext from '@ticatec/uniface-flexi-ui';

// Define your dictionary loader
const dictLoad = async (dicNames: string[]) => {
  const response = await fetch('/api/dictionaries', {
    method: 'POST',
    body: JSON.stringify({ dictionaries: dicNames })
  });
  return await response.json();
};

// Initialize with optional language parameter
FlexiContext.initialize(dictLoad, 'zh-CN');

2. Using FlexiForm

import { FlexiFormPage } from '@ticatec/uniface-flexi-ui/flexi-form';
import '@ticatec/uniface-flexi-ui/flexi-ui.css';

// Define your form schema
const formSchema = {
  mode: 'flex',
  arrangement: 'vertical',
  variant: 'outlined',
  elements: {
    'user-info': {
      title: 'User Information',
      fields: [
        {
          type: 'text-editor',
          keyField: 'name',
          name: 'name',
          label: 'Full Name',
          required: true
        },
        {
          type: 'text-editor',
          keyField: 'email',
          name: 'email',
          label: 'Email',
          props: { type: 'email' }
        }
      ]
    }
  }
};

<script>
  import { FlexiFormPage } from '@ticatec/uniface-flexi-ui/flexi-form';

  export let formSchema;
  export let formData = {};
</script>

<FlexiFormPage
  schema={formSchema}
  bind:data={formData}
/>

3. Using FlexiModuleBase

Create dynamic modules with automatic component initialization:

import { FlexiModuleBase, UILayout } from '@ticatec/uniface-flexi-ui';
import { PureFlexiForm } from '@ticatec/uniface-flexi-ui/flexi-form';
import { FlexiDataTable } from '@ticatec/uniface-flexi-ui/flexi-datatable';
import { FlexiCriteriaSet } from '@ticatec/uniface-flexi-ui/criteria-panel';

class UserModule extends FlexiModuleBase {
  // Define component classes
  getFormClass() {
    return PureFlexiForm;
  }

  getTableClass() {
    return FlexiDataTable;
  }

  getCriteriaClass() {
    return FlexiCriteriaSet;
  }

  // Define dictionaries to load
  getDictionaries() {
    return ['statusDict', 'userTypeDict'];
  }

  // Custom initialization
  async initialize(uiLayout: UILayout) {
    await super.initialize(uiLayout);
    // Your custom initialization logic
  }

  // Use the components
  async createUserForm() {
    const form = await this.createForm();
    return form;
  }

  getTable() {
    return this.dataTable;
  }

  getCriteria() {
    return this.criteriaSet;
  }
}

// Usage
const module = new UserModule();
await module.initialize({
  table: tableSchema,
  form: formSchema,
  criteria: criteriaSchema
});

const form = await module.createUserForm();
const table = module.getTable();

Available Field Types

The framework supports various field types out of the box:

• text-editor - Text input field
• memo-editor - Multi-line text area
• number-editor - Number input field
• unit-number-editor - Number input field with unit support
• date-picker - Date selection field
• datetime-picker - Date and time selection field
• options-selector - Single select dropdown
• options-multi-selector - Multi-select dropdown
• cascade-options-selector - Cascading select field
• input-options-selector - Select with input capability
• - - Break line / separator
• unknown-type - Fallback for unknown field types

Core Components

FlexiForm

The main form component that renders dynamic forms based on schemas.

import { FlexiForm } from '@ticatec/uniface-flexi-ui';

FlexiFormPage

A page-level component for full-page forms.

import { FlexiFormPage } from '@ticatec/uniface-flexi-ui';

FlexiFormDialog

A dialog/modal component for forms.

import { FlexiFormDialog } from '@ticatec/uniface-flexi-ui';

CriteriaPanel

Advanced search and filtering panel.

import CriteriaPanel from '@ticatec/uniface-flexi-ui/criteria-panel';

FlexiDataTable

Powerful data table with remote data loading.

import { FlexiDataTable, PureFlexiDataTable } from '@ticatec/uniface-flexi-ui/flexi-datatable';

FlexiModuleBase

Base class for dynamic modules with automatic component initialization.

import { FlexiModuleBase, UILayout } from '@ticatec/uniface-flexi-ui';

Schema Structure

interface FlexiFormSchema {
  mode?: LayoutMode;
  arrangement?: Arrangement;
  props?: any;
  elements: FormElements;
  label$style?: string;
  variant?: 'filled' | 'outlined' | '';
  actions?: Array<FormActionSchema>;
  style?: string;
}

interface FlexiCardSchema {
  title?: string;
  mode?: LayoutMode;
  props?: any;
  arrangement?: Arrangement;
  label$style?: string;
  attrs?: any;
  fields: Array<FlexiFieldSchema | FlexiCompositeFieldSchema>;
  readonly?: boolean;
  disabled?: boolean;
  variant?: 'filled' | 'outlined' | '';
  foldable?: boolean;
  actions?: Array<ActionSchema>;
}

interface FlexiCompositeSchema {
  type?: 'block';
  title?: string;
  fields: Array<FlexiFieldSchema>;
  readonly?: boolean;
  disabled?: boolean;
  label$style?: string;
  variant?: string;
  mode?: LayoutMode;
  props?: any;
  arrangement?: Arrangement;
}

interface FlexiCompositeFieldSchema {
  type: "composite";
  keyField?: string;
  name: string;
  composite: string;
  cell?: any;
}

interface FlexiFieldSchema {
  type: string;
  keyField: string;
  name: string;
  dictName?: string;
  label: string;
  variant?: "" | "outlined" | "filled";
  readonly?: boolean;
  disabled?: boolean;
  required?: boolean;
  events?: Record<string, string>;
  cell?: any;
  props?: any;
}

Advanced Usage

Custom Field Registration

import { ComponentBuilder } from '@ticatec/uniface-flexi-ui/flexi-form/lib/ComponentBuilder';

const componentBuilder = ComponentBuilder.getInstance();

// Register a custom field type
componentBuilder.register('custom-field', (schema, dictLoader) => ({
  component: CustomFieldComponent,
  props: schema.props
}));

Form Validation

Note: Form validation is currently in development. The framework has the infrastructure for validation with error tracking in FlexiField, but full validation implementation is not yet complete. Future versions will integrate with @ticatec/web-bean-validator for comprehensive validation support.

// Basic field definition (validation features coming soon)
const fieldSchema = {
  type: 'text-editor',
  keyField: 'email',
  name: 'email',
  label: 'Email',
  required: true,
  props: {
    placeholder: 'Enter email address'
  }
};

Styling and Theming

The framework comes with default styles that can be customized:

@import '@ticatec/uniface-flexi-ui/flexi-ui.css';

// Override default styles
.flexi-form {
  --primary-color: #your-brand-color;
  --border-radius: 8px;
  --spacing: 16px;
}

API Reference

Core Exports

// Main module
import FlexiContext from '@ticatec/uniface-flexi-ui';

// FlexiModuleBase for dynamic modules
import { FlexiModuleBase, UILayout, ModuleLoader } from '@ticatec/uniface-flexi-ui';

// Form components
import {
  FlexiForm,
  FlexiCard,
  FlexiField,
  FlexiComposite,
  FlexiFormPage,
  FlexiFormDialog,
  PureFlexiForm,
  ComponentBuilder,
  registerFormFieldBuilder
} from '@ticatec/uniface-flexi-ui/flexi-form';

// Data table components
import {
  FlexiDataTable,
  PureFlexiDataTable
} from '@ticatec/uniface-flexi-ui/flexi-datatable';

// Schema types
import type {
  FlexiFormSchema,
  FlexiCardSchema,
  FlexiCompositeSchema,
  FlexiCompositeFieldSchema,
  FlexiFieldSchema
} from '@ticatec/uniface-flexi-ui/flexi-form/Schema';

// Type definitions
import type {
  LayoutMode,
  Arrangement,
  Visibility
} from '@ticatec/uniface-flexi-ui/flexi-form/lib';

// Criteria panel
import CriteriaPanel, {
  FlexiCriteriaSet,
  FlexiCriteriaField
} from '@ticatec/uniface-flexi-ui/criteria-panel';

// Utilities
import utils from '@ticatec/uniface-flexi-ui/utils';

Documentation

For more detailed guides and examples, see:

• FlexiForm Guide (EN)
• FlexiForm Guide (中文)
• FlexiDataTable Guide (EN)
• FlexiDataTable Guide (中文)
• FlexiCriteriaSet Guide (EN)
• FlexiCriteriaSet Guide (中文)
• FlexiContext Guide (中文)
• FlexiModuleBase Guide (中文)

Development

Building the Library

npm run build

Development Mode

npm run dev

Type Checking

npm run check

Contributing

We welcome contributions! Please read our contributing guidelines and submit pull requests to our repository.

License

MIT License - see LICENSE file for details.

Support

For support and questions, please open an issue on our GitHub repository.