@cdmx/wappler_ac_selectv2
Version:
App Connect extension for Select2
68 lines (51 loc) • 2.75 kB
Markdown
#### Created and Maintained by: Codemax IT Solutions Pvt. Ltd.
# Select2 Extension Module for Select Module
The Select2 extension module enhances the functionality of the Select module by providing advanced options for selecting and displaying data.
## Table of Contents
- [Attributes](#attributes)
- [Placeholder](#Placeholder)
- [Theme](#Theme)
- [Width](#Width)
- [Rtl](#Rtl)
- [CloseOnSelect](#CloseOnSelect)
- [SelectOnClose](#SelectOnClose)
- [Tags](#Tags)
- [AllowClear](#allowClear)
## Attributes
### `Placeholder`
- **Default Value:** Null
- **Description:** This attribute enables the use of a placeholder in the Select2 component, allowing you to display a hint or prompt text when no option is selected.
### `Theme`
- **Description:** This attribute allows you to choose a theme for the Select2 component, giving you control over its visual appearance.
- **Values:**
- Default: Default theme
- Classic: Select2 Classic theme
- Bootstrap-5: Bootstrap 5 theme
- Custom: Custom theme (Should be included in layout with .select2-container--custom in the css)
### `Width`
- **Description:** This attribute allows you to set the width of the Select2 component, giving you control over its visual appearance.
- **Values:**
- `resolve`: Resolve Theme: A theme-specific width (default).
- `element`: Bootstrap 5 Theme: A width suitable for Bootstrap 5 theme.
- `style`: Style Theme: A width suitable for the Style theme.
- `100%`: 100% width.
- `50%`: 50% width.
- `200px`: 200 pixels width.
- `300px`: 300 pixels width.
### `Rtl`
**Description:** This option enables right-to-left (RTL) text direction for the Select2 element, making it suitable for languages that are read from right to left. (Default: false).
### `CloseOnSelect`
**Description:** When enabled, this option will automatically close the Select2 dropdown when an item is selected. (Default: true)
### `SelectOnClose`
**Description:** If set to true, this option will automatically select the currently highlighted item when the Select2 dropdown is closed. (Default: false)
### `Tags`
**Description:** Dynamically create new options from text input by the user in the search box. (Default: false)
### `allowClear`
**Description:** Allow clearing the Selected value. (Default: false)
#### Action Attributes
**Update**
- Used to call an update on the Select2 element from another element/event listener.
- Note: This event listener is not seen from the UI Module, you need to manually add `.updatedSelectedData()` from the code view.
**Reset**
- Used to reset Select2 selection from another element/event listener.
- Note: This event listener is not seen from the UI Module, you need to manually add `.reset()` from the code view.