Uniface Filter Panel

中文文档 ｜ English

A flexible filter/search criteria panel component for Svelte 5 applications. Built on the Uniface design system, with internationalization support. Perfect for data tables, search interfaces, e-commerce platforms, and admin dashboards.

✨ Features

• 🎯 Plain by default: drop your own field editors in as content and get a criteria row with Reset/Search — optionally add an advanced-panel overlay for extra fields
• 🌐 Internationalization: button labels come from the Uniface i18n resource proxy, with runtime language switching
• 🎨 Flexible theming: customizable appearance via CSS, SCSS source included
• 🔧 Full TypeScript: complete type definitions for props and handlers
• ⚡ Svelte 5: built with runes and snippets throughout

📦 Installation

npm install @ticatec/uniface-filter-panel

🚀 Quick Start

<script lang="ts">
  import FilterPanel from '@ticatec/uniface-filter-panel';
  import '@ticatec/uniface-filter-panel/uniface-filter-panel.css';
  import CriteriaField from '@ticatec/uniface-element/CriteriaField';
  import TextEditor from '@ticatec/uniface-element/TextEditor';

  let criteria: any = $state({});

  function handleSearch() {
    console.log('Search with criteria:', criteria);
  }

  function handleReset() {
    criteria = {};
  }
</script>

<FilterPanel
  searchClickHandler={handleSearch}
  resetClickHandler={handleReset}
>
  <CriteriaField label="Name" size="x20">
    <TextEditor bind:value={criteria.name} variant="outlined" />
  </CriteriaField>
</FilterPanel>

That's it — FilterPanel with no advancedPanel snippet is a plain query criteria panel: your fields, plus Reset/Search. Pass an advancedPanel snippet if you also want a "more criteria" overlay — see FILTER_PANEL.md for the full API, including how the advanced panel and extra action buttons work.

🌐 Internationalization

The component supports i18n with the following default keys:

| Key | Description | Default | |-----|-------------|---------| | uniface.filterPanel.btnCancel | Cancel button (advanced panel) | Cancel | | uniface.filterPanel.btnReset | Reset button | Reset | | uniface.filterPanel.btnSearch | Search button | Search | | uniface.filterPanel.btnMoreCriteria | "More criteria" button | Advanced criteria | | uniface.filterPanel.titleMore | Advanced panel title | More criteria |

import i18n, { i18nUtils } from '@ticatec/i18n';
i18n.language = 'zh-CN';
i18nUtils.loadResources('uniface-filterpanel.json');

📁 Exports

// Main component
import FilterPanel from '@ticatec/uniface-filter-panel';
// same component, explicit path
import FilterPanel from '@ticatec/uniface-filter-panel/FilterPanel';

// i18n resource proxy
import i18nRes from '@ticatec/uniface-filter-panel/i18nRes';

// CSS styles
import '@ticatec/uniface-filter-panel/uniface-filter-panel.css';

🔗 Dependencies

This library is built on the Uniface ecosystem:

• @ticatec/uniface-element - Core UI components
• @ticatec/i18n - Internationalization support

🤝 Contributing

Issues and pull requests are welcome! Please read our contributing guidelines before submitting.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Henry Feng

• Email: [email protected]
• GitHub: @henryfeng

🙏 Acknowledgments

© 2023 Ticatec. All rights reserved.

For the full component API and usage patterns, see FILTER_PANEL.md.