@alfaomegasoftware/standard-ui NPM

AlfaOmega Software Standard UI

A collection of components for standard UI use. The main idea behind this project is to create a standard library to be used in all of my projects to provide a consistent and extendable UI across all web sites. So be free to use it just for testing purposes, in your own projects or just for fun!.

Documentation

For full documentation, visit https://doc.alfaomegasoftware.com/sui.

Installation

npm i @alfaomegasoftware/standard-ui

Peer dependencies

Vue 3.3+
Pinia 2.2.8+

Common (non-databound)

ActionButton: customizable button with label, icon (built-in SVG icon or a custom image link) and icon-position prop
Badge: shows a circle with a number between 1 and 99 or simply a circle in the top right of a component.
Chip: chips to identify categories
ErrorInfo: shows errors from a string or an array of strings (intended to be used primarily with databound components for validation purposes)
ImageLoader: shows a progress indicator until the image is fully loaded.
ListView: a list of items shown as icons or a list
NotificationRibbon: a ribbon to indicate a success, critical, warning or info information to the user.
TreeView: a list of items from a tree structure.
TreeViewNode: a tree root node that can contain other nodes
MenuBar: a horizontal bar with nested subitems.
FloatingMenu: a floating menu with nested subitems.
ProgressIndicator: a progress indicator with an optional label.
DarkLightToggler: a toggler for Tailwind dark/light mode switching.
Paginator: a simple paginator with all the options.

Common (databound)

Components that can be bound to any object and a property, updating it dinamically. Handles null values throught a MVVM (Model-view View-Model) transform.

Filter

DataFilter: a data filter that interacts with the backend through compressed and encoded query string.

For use with forms or any object

CheckBox: a three state checkbox (true, false and null but can be mapped to other values if needed)
LookupComboBox: a combobox that has two data sources, one for databound (read/write) and other to display items. The items are displayed using a select element.
RadioButtonGroup: similar to combobox but displays items using radio buttons.
SlideInput: a simple slider for numeric values.
TextBox: a textbox with free text editing and automatic casing.
MaskedTextBox: a textbox with mask capabilities.

For use with multiple data

DataGrid: displays a grid of items that is selectable. Provides a way to decide which columns to show when using in viewports with different @media sizes.
DataTable: displays a table of items that is selectable.

Containers

Containers are components that can hold and arrange another components in different ways.

AccordionPanel: a panel with slide down/up animation to hide or display content.
Drawer: a drawer or panel that can appear from the left, top, right or bottom.
GroupBox: a box with a label in the upper left corner.
SplitView: a view that is horizontally or vertically splitted in half and resizable.
TabContainer: scrollable multiple tabs to display different content on each tab panel.
StatusBar: a single bar to display information about menus, hovering items, etc.

Dialogs

Dialogs are windows that can be openned by calling an exposed function. That function is async and returns a promise that can be awaited until an answer (even null) is given.

MessageDialog: provides a fast way to display a message to the user that doesn't need answer.
ConfirmDialog: provides a fast way to display a confirmation message to the user and expects an answer via the value assigned to the buttons.

Base components

These are components used internally by others.

DialogBase: provides all the functions needed by any dialog (open and close)
ModalLayer: transitions into a layer that covers the whole screen allowing to display content and blocking interaction with the content behing that layer.
ResponsiveRuler: provides a simple way to show when entering/leaving different screen widths testing responsiveness

Changelog

0.5.3

All code was eslinted Made several fixes on some components

0.5.3-alpha3

Added all components

0.5.3-alpha2

Removed full-bundled imports

0.5.3-alpha1

Small library size
Compiled for es only
(now supports tree shaking)

0.5.2-9

Mod: DialogBase now enables to be positioned anywhere onscreen (helpful in mobile apps when the keyboard appears but the dialog is centered and convered)

0.5.2-8

Fix: DataGrid selection problem with margins making the grid overflow over the right
Fix: DataGrid now passes full errors object to the slot in order to be compliant with responsive one-cell design
Fix: DataLookupComboBox default key/label names are id and label respectively allowing to assign IIdLabelPair[] without specifying those two props

0.5.2-3

Fix: AccordionPanel autoexpand odd behavior when mounted and is not expanded

0.5.2-2

Fix: AccordionPanel autoexpand odd behavior when mounted
Mod: more components are now easily testable (Cypress)

0.5.2-1

Fix: minor fixes

0.5.2

Mod: AccordionPanel internal structure and animation changes for more compatibility. Not it has a title slot. Also it can be easily tested (cypress)
Mod: DataFilter internal structure change. Now it is wrapped in accordion panel and both types of filters are separated. The title of each accordion now indicates (in a Badge) the filter count.

0.5.1-21

Add: Cypress testing attributes to DataGrid and filter components

0.5.1-18

Internal changes in build

0.5.1-17

Fix: DataGrid errors optional handling

0.5.1-16

Fix: home page url was wrong

0.5.1-15

Fix: DataGrid rows and column with errors now are identified, selection icon geometry adjusted and added left margin space for the selection indicator

0.5.1-6

Fix: DialogBase close and open emits

0.5.1-2

Fix: NotificationCenter component display behavior normalized

0.5.1-1

Fix: build tools updates caused some events not to be triggered

0.5.1

Fix: DateFilter responsiveness

0.5.0

Added: support for inputmode attribute on all text input components

0.4.9-alpha.2

Fix: i18n dependency

0.4.9-alpha.1

Fix: locale detection

0.4.9-alpha.0

Added: ProgressModal progress indicator now has a wrapper
Fixed: height of NotificationCenter, scroll and dynamic height for each notification

0.4.8-alpha.1

Fixed: TabContainer added check for props.errors==='undefined'
Fixed: some small formatting issues
Added: BooleanFilter sub-component for DataFilter
Added: DateChooser component
Added: DateChooserDialog component
Fixed: ConfirmDialog exposed methods
Fixed: DataGrid automatic column size increased performance
Added: DateTextBox (a MaskedTextBox designed for dealing with dates with a button the choose a date from DateChooserDialog)
Added: TextBox now has a type prop

0.4.6-alpha.0

Added NotificationCenter component with useNotificationCenter composable
Fixed TreeViewNode and ListView icons
Added ProgressModal component
Added: dates utils to get current date and time in ISO format
Fixed TabContainer tab with error doesn't have a style
Fixed TextBox disabled and readonly have no effect
Changed: DataFilter to accept two groups direct (for SQL where) and grouped (for SQL having)
Added: centralized control over theme mode (TW dark and light modes) using cookie
Added: date and formatting common functions
Fixed: DataGrid content alignment
Fixed: DataGrid null value now displays as '-'
Added: SimpleDataFilter for single element conditions

0.4.0-alpha.4

Change Vue3 SFC structure to follow standard (script-template-style)
Replaced SvgIcon component with Iconify solution
Fixed: Drawer delay makes it appear suddenly without transition
Fixed: Drawer start and changed anchor prop didn't open correctly
Fixed: FloatingMenu problem with touch event on mobile
Fixed: DataGrid full row hover group
Added interfaces for emit events and exposed methods

Style architecture completely redesigned to make it more extendable, uniform and easier to use

Removed prefix from Tailwind CSS classes
Removed SCSS/CSS external classes (following Tailwind utility first principle)
Now classes can be passed toghether using the classes prop
Moved all default classes to computed initialization
Added method suiMergeClasses to merge changes to the existing SUI classes
Created style generators for all components
- Added common color SUI Tailwind classes for all components
Now styles can be passed toghether using the styles prop for more grained control
Moved all default styles to computed initialization
Added method suiMergeStyles to merge styles skin+structural+props

Removed all namespaces for organization and tree-shaking Removed primary, secondary and neutral variants for they can conflict with an app styling

Added DataFilter and sorting with composables (add details) Fixed modallayer scroll problem Completed datagrid and datatable sorting Added DarkLightToggler

0.3.0-alpha.0

Enhanced styling
- Added new styles (better tested)
- Added variant for indeterminate state of checkbox (fixed style)
- Merging utils for styles changed namespace
RadioButtonGroup: fixed vertical alignment
ImageLoader: fixed not showing loader when changing src prop
StatusBar: moved to containers
Changed utility namespaces and redistributed functions
Created documentation web site (available at AlfaOmega Software Documentation)

0.2.5-alpha.0

Adopted well defined architecture for data handling, styling, documentation and testing of components.
Added many new components
- Common(non databound): ActionButton, Badge,Chip, ErrorInfo, ImageLoader, ListView, NotificationRibbon, StatusBar, TreeView, MenuBar, FloatingMenu
- Common (databound): CheckBox, LookupComboBox, RadioButtonGroup, SlideInput, TextBox, MaskedTextBox
- Containers: AccordionPanel, Drawer, GroupBox, SplitView, TabContainer
- Dialogs: MessageDialog, ConfirmDialog
- Base: DialogBase, ModalLayer