Use These Components to Create a Modern UI Using Vue3

\ Modern user interfaces demand high interactivity and usability. This article explores how to create a powerful, adaptive multi-select component using the Vue 3 Composition API. The ChipsMultiSelect component combines the features of a dropdown list, visual selection in the form of "chips," and built-in filtering functionality.

Selected items are displayed as "chips".

\ Real-time Filtering: The component integrates a dropdown list, a set of chips, and an input field for filtering.

\ Dynamic Resizing: When there are too many chips, they wrap to a new row, adjusting the height of the input field accordingly.

Key Features of ChipsMultiSelect

1. Interactive State Management:

• Selected items are displayed as chips.
• Chips can be removed using a "close" icon.

1. Search and Filtering Support:

• The input field allows users to search for items in real-time.
• The list updates dynamically based on the user input.

1. Responsive Design:

• The input field's height adjusts dynamically for multiple rows of chips.
• Chips wrap to new lines when the maximum width is exceeded.

1. Easy Integration:

• Supports various data formats, including strings, objects, and arrays.

\

Implementation Details Challenges:

Styling the input field to display chips while ensuring proper caret positioning after the chips was a significant challenge. Additionally, the input field needs to shift dynamically to align with the last row of chips when they span multiple lines.

Solution:

Using editable divs (contenteditable=true) instead of traditional input fields simplifies styling and implementation. This approach resolves positioning and styling issues efficiently.

\ Key Techniques:

• Use innerText to retrieve user input for filtering.
• Prevent new lines on Enter keypress using event.preventDefault().

Component Structure

1. Chip Component (ChipsItem):

• Represents an individual chip.
• Supports both strings and objects.
• Includes a "close" button for removal.
• Designed for reuse across projects.

1. Chip List (ChipsList):

• Displays a collection of selected chips.
• Handles user interactions.

1. Main Component (ChipsMultiSelect):

• Encapsulates ChipsList, dropdown list, and filtering functionality.

  \

ChipsItem:

\ \ ChipsList:

\

\n

Main component (ChipsMultiSelect)

\

Real-World Applications

1. CRM Systems: Efficient filtering and selection from large directories.
2. E-Commerce: Product filtering based on attributes.
3. Tag Management: Category handling in CMS systems.

Conclusion

This article demonstrates how to create an interactive UI component that:

• Simplifies the integration of filters and search functionality in web applications.
• Enhances data input management and validation.
• Offers extensive customization options through props and events.

\ ChipsMultiSelect showcases the power of Vue 3 in building interactive UI components. Its flexibility and robust functionality make it a valuable tool for web developers, seamlessly integrating into projects to enhance user experience.

\ Source Code: https://github.com/lyashov/ChipsMultiSelect.git