What is VRIX?

vrix.js is a flexible and extensible UI component library based on JavaScript.
It can handle a wide range of requirements from simple configurations to complex UI needs, including virtual scrolling and large data processing, while simplifying the development process through various customization options.
The main components provided include List, Tree, Popup, Autocomplete, Tokenizer, Combobox, DateChooser, DatePicker, and more.

Features

• Various Input UI Components

  AutoComplete, Tokenizer, ComboBox, etc. can effectively handle input-based suggestion features and user input.

• High-Performance Rendering

  List and Tree components smoothly render thousands of items using virtual scrolling.

• Flexible Positioning

  The Popup component automatically adjusts its position to stay within screen boundaries and supports anchor-based alignment.

• Real-time Dynamic Content Updates

  The UI automatically updates in response to dynamically changing data.

• Date Selection Interface

  DateChooser and DatePicker provide an intuitive calendar UI and various date format options.

• Complex Hierarchical Structure Support

  The Tree component provides extensive interactions including parent-child node navigation, expansion/collapse, and drag-and-drop.

• Custom Rendering

  Almost all items can be rendered in desired forms through custom renderers.

• Focus and Interaction Management

  Basic support for various interactions including auto-focus, close on outside click, and keyboard events.

• Multi-selection and Tokenization

  ComboBox and Tokenizer can manage multiple selections as tokens, enabling flexible input.

Components

List

The List component is a UI component that efficiently displays and manages large amounts of data. For performance optimization, it doesn't render all data at once but dynamically renders only the items visible in the user's viewport.

• Virtual Scroll: Enhances performance by dynamically rendering only the data visible on the current screen to efficiently handle large amounts of data.
• Custom Renderer: Allows rendering data in desired forms.
• Row Count Specification: Can set the number of rows to display on screen at once.
• External Scroller: Can operate based on the scroll of the container (parent element) that wraps the list, not just the list itself.
• Interaction: Can handle user interactions such as item selection and focus.
• Drag and Drop: Can change item order through drag and drop.

Tree

The Tree component is a UI component that displays hierarchical data and inherits the characteristics of the List component. It effectively manages tree-structured data and provides user interaction.

• Virtual Scroll: Enhances performance by dynamically rendering only the data visible on the current screen.
• Custom Renderer: Can render tree items in desired forms.
• Row Count Specification: Can set the number of rows to display on screen at once.
• External Scroller: Can operate based on the scroll of the container (parent element) that wraps the list.
• Interaction: Can handle user interactions such as node selection and focus.
• Node Expansion/Collapse: Can expand or collapse tree nodes.
• Automatic Node Expansion: Can automatically expand nodes based on conditions.
• Full Node Navigation: Provides functionality to navigate through the entire tree.
• Parent/Sibling Node Access and Node Addition/Deletion: Can access parent and sibling nodes and add or remove nodes.
• Drag and Drop: Can change node order or move items under different parent nodes through drag and drop.

Popup

The Popup component dynamically displays content at specified positions on the screen. It is used to create and display content in various popup forms such as modals, tooltips, and dropdown menus at the specified target position.

• Display Popup from Specified Element (Anchor): Can display popups from specific DOM elements.
• Display Popup on Anchor Event: Can display popups on mouse over or click.
• Modal: Can emphasize popups by dimming the background.
• Popup Content Coordinate System: Can set popup position based on anchor elements or screen.
• Nested Popup: Can display another popup inside a popup.
• Priority: Can set popup priority.
• Close on Outside Click: Closes popup when clicking outside.
• Close with ESC Key: Closes popup when pressing ESC key.
• Auto Focus: Can automatically set focus when popup opens.
• Automatic Position Adjustment: Adjusts position to prevent popup from going outside the screen.

AutoComplete

The AutoComplete component provides real-time suggestion of related items based on user input. It helps quickly complete input and is useful where search functionality is needed.

• Custom Renderer: Can customize suggestion list items.
• Minimum Character Specification: Can set minimum string length to start input.
• Suggestion List Configuration: Can configure suggestion lists based on input.
• Floating Label and Placeholder: Can set labels and placeholders in input fields.
• Suggestion List State Handling: Can handle states during loading and when no data is available.
• Suggestion List Container Control: Automatic and manual closing.

Tokenizer

The Tokenizer component helps process and manage multiple values simultaneously in an input field. Each item is separated into individual "tokens" and managed as a collection whenever the user enters a value. It is useful in situations where multiple values need to be entered and managed at once, such as email address input, tag input, and recipient list management.

• Custom Renderer: Can customize tokens and suggestion list items.
• Minimum Character Specification: Can set minimum string length to start input.
• Suggestion List Configuration: Can configure suggestion lists based on input.
• Floating Label and Placeholder: Can set labels and placeholders in input fields.
• Suggestion List State Handling: Can handle states during loading and when no data is available.

ComboBox

The ComboBox component is a UI component that provides functionality to select desired items from a dropdown list. Users can directly select items from the list or quickly find desired items using filtering functionality.

• Custom Renderer: Can customize list items.
• Floating Label and Placeholder: Can set labels and placeholders in input fields.
• Multi-selection: Can select multiple items, rendered as tokens.
• Item Filtering: Dynamically filters suggestion list based on input value.
• Dropdown Container Control: Automatic and manual closing.

DateChooser

A component for displaying dates. Typically provides a calendar-style interface where users can click to select specific dates.

• Custom Renderer: Can customize each date cell as desired.
• Day/Month/Year Calendar: Can quickly navigate by switching between year, month, and day views.
• Date Format: Can specify date formats using external libraries like moment or dayjs.
• Header Format: Can customize the format of the calendar header.
• Period Selection: Can select a period by specifying start and end dates.
• Selectable Date Specification: Can specify selectable dates by condition or array to restrict selection to specific dates.

DatePicker

A component for selecting and displaying dates in a dropdown. Typically provides a calendar-style interface where users can click to select specific dates.

• Custom Renderer: Can customize each date cell as desired.
• Day/Month/Year Calendar: Can quickly navigate by switching between year, month, and day views.
• Date Format: Can specify date formats using external libraries like moment or dayjs.
• Header Format: Can customize the format of the calendar header.
• Period Selection: Can select a period by specifying start and end dates.
• Selectable Date Specification: Can specify selectable dates by condition or array to restrict selection to specific dates.