🛠️ Fleetbase 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

To install the Fleetbase Ember UI library, simply run the following command:

npm install @fleetbase/ember-ui

Usage

Once you have installed the Fleetbase Components library, you can start using the components in your application.

For more information on how to use each component, please refer to the documentation.

Components

The following components are included in the Fleetbase 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!

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.