🛠️ cv ember ui

This library contains a collection of reusable UI components that you can use in your application and extensions to create a consistent and cohesive user interface.

Installation

npm install cv-ember-ui

Components

The following components are included in the Ember UI Components library:

Attach

• popover A component for displaying content in a popup box that appears when the user clicks on an element.
• tooltip A component for displaying a brief description or explanation of an element when the user hovers over it.

Filter

• date-filter: A component for filtering a list of data based on a date range.
• model-filter: A component for filtering a list of data based on a model.
• multi-option-filter:A component for filtering a list of data based on multiple options.
• select-filter: A component for filtering a list of data based on a single selected option.
• string-filter: A component for filtering a list of data based on a search string.

Filters Picker

• filters-picker-button: A button component for opening and closing a dropdown list of filters.

Layout

• dropdown-header-item: A component for displaying a single item in a dropdown list in the header.

• dark-mode-toggle: A toggle button component for switching between light and dark mode.

• dropdown: A component for displaying a dropdown.

• section-body: A component for displaying the body of a section.

• section-container: A container component for a section..

• section-header: A component for displaying the header of a section.

• sidebar-item: A component for displaying a single item in a sidebar.

• sidebar-panel: A component for displaying a panel in a sidebar.

• layout-container: A container component for the layout.

• header: A component for displaying the header of the page.

• main: A component for displaying the main content of the page.

• mobile-navbar: A component for displaying the navigation bar on mobile devices.

• section: A component for displaying a section on the page.

• sidebar: A component for displaying a sidebar on the page.

Modal

• modal-body-container: A component that represents the body content of a modal dialog.

• modal-header-close.md: A component that represents the body content of a modal dialog.

• modal-header-title.md: A component that represents the body content of a modal dialog.

• modal-layout-alert: A default template for a modal dialog that includes a header, body, and footer.

• modal-layout-bulk-action: A component that represents the entire modal dialog, including the header, body, and footer.

• modal-layout-confirm: A component that represents the footer content of a modal dialog.

• modal-layout-loading: A component that represents the header content of a modal dialog.

• modal-layout-option-prompt: A component that represents the title and buttons in the header of a modal dialog.

• modal-layout-process: A component that represents the title and buttons in the header of a modal dialog.

• modal-default: A default template for a modal dialog that includes a header, body, and footer.

• modal-dialog: A component that represents the entire modal dialog, including the header, body, and footer.

• modal-footer: A component that represents the footer content of a modal dialog.

• modal-header: A component that represents the header content of a modal dialog.

• modal-title-with-buttons: A component that represents the title and buttons in the header of a modal dialog.

Model-Select

• options: A component for displaying content in a popup box that appears when the user clicks on an element.
• spinner: A component for displaying content in a popup box that appears when the user clicks on an element.

Money-Input

• money-input/currency-dropdown: A component that renders a dropdown menu to select a currency for the money-input component.
• money-input/currency-handle:: AA component that displays the selected currency for the money-input component.

Overlay

• overlay-body: A component that renders the body content for an overlay.
• overlay-footer: A component that renders the footer content for an overlay.
• overlay-header: A component that renders the header content for an overlay.

Table

• table-cell-anchor: A component that renders an anchor element within a table cell.
• table-cell-base: A base component for table cells.
• table-cell-checkbox: A component that renders a checkbox within a table cell.
• table-cell-country: A component that renders a country flag within a table cell.
• table-cell-dropdown: A component that renders a dropdown menu within a table cell.
• table-cell-link-to: A component that renders a link within a table cell.
• table-cell-media-name: A component that renders the name of a media item within a table cell.

Components

• app-container: A component for the main application container.
• badge: A badge component.
• button: A button component.
• checkbox: A checkbox component.
• click-to-copy: A component for copying text on click.
• click-to-reveal: A component for revealing text on click.
• content-panel: A component that can be used to display content that can be toggled open or closed.
• date-picker: A component for selecting a date.
• date-time-input: A component for selecting a date and time.
• dropdown-button: A button component that opens a dropdown menu.
• extensions-list: A component for displaying a list of file extensions.
• fetch-select: A component for selecting an item from a fetched list.
• file-upload: : A component for uploading files.
• filters-picker: A component for selecting filters.
• floating: A component for creating a floating element.
• image: A component for displaying an image.
• info-block: A component for selecting a country.
• input-group: : A component that groups together multiple input components, such as a text input and a dropdown menu, and provides additional functionality such as label and error handling.
• input-info: A component that displays additional information about an input field, such as helper text or validation errors..
• input-label: A component that displays a label for an input field.
• modal: A component that displays a modal window, which is a pop-up dialog box that requires user interaction before the user can return to the main application..
• modals-container: A component that manages the display of multiple modals, ensuring that only one is visible at a time.
• model-select-multiple: A component that allows the user to select multiple items from a list of models.
• model-select: A component that allows the user to select a single item from a list of models.
• money-input: A component that allows the user to input monetary values, with additional functionality such as currency selection.
• multi-select: A component that allows the user to select multiple items from a list.
• overlay: A component that displays an overlay, which is a semi-transparent layer that covers the main application and is typically used to provide a modal-like user interface.
• pagination: A component that displays pagination controls, allowing the user to navigate through a large list of items.
• phone-input: A component that allows the user to input phone numbers, with additional functionality such as international formatting.
• scrollable: A component that provides a scrollable container for other components, allowing the user to scroll through a large amount of content.
• select: A component that allows the user to select a single item from a list of options.
• spinner: A component that displays a spinner, which is typically used to indicate that a task is in progress.
• table: A component that displays tabular data in a scrollable and sortable format, with support for pagination and filtering.
• toggle: A component that displays a toggle switch, allowing the user to toggle a boolean value.
• upload-button: A component that displays a button for uploading files, with additional functionality such as drag-and-drop support.
• toggle: A component that allows the user to select which columns to display in a table.

We are continually adding new components, so be sure to check back for updates!