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.6.6-alpha0

Chg: DialogBase default titleBar height
Fix: DialogBase body vertical scroll solved
Add: DialogBase back button now closes the dialog returning null

0.6.5-beta2

Fix: Minor fixes

0.6.5-beta1

Add: DataGrid show/hide and change column order with new prop displayed-columns to track visibility and order
Del: DataGrid removed isRowHeader attribute from columns
Fix: ModalLayer, DialogBase and PopupContainer dismissable now works clicking outside or pressing Esc key
Fix: styling for PopupFilter and PopupContainer extended to DataGrid
Fix: DateTextBox couldn't using col-span-x without a container (now it works by itself)
Fix: Several fixes across the full UI to match best standards regarding text size, icon size, etc.
Add: DateChooser, TimeChooser and DateTimeChooser dialog components
Add: DateTimeTextBox

0.6.0-beta1

Removed: TreeView component/styles and leave only TreeViewNode
Add: new useTreeViewNode with helpers to deal with ITreeViewNode structure
Add: DataGrid enhancements

• now allows to sort and filter local data from within the component
• optionally customize the way a specific column is sorted
• badge to indicate the order the columns where sorted
• badge to indicate the selection count
• indicator of filtered columns
• replaced selection method

Mod: useDataSorting
Mod: useDataFilter
Add: useDataSelection now has a method addAll that allows to add multiple items from an array

Fix: ModalLayer odd scroll behavior suddnly changed page geometry
Add: new ui_geometry functions to get rects best fit inside a viewport
New: IconButton component
Add: new date functions isToday, wasYesterday, willBeTomorrow
Mod: changed text input button dessign
Mod: removed many unnecessary styles
Mod: styles now can be static or create variants (transparent, condensed, etc)

Add: added a couple more of number_utils for better code reading
Add: added a couple more of string_utils for better code reading
Add: added a couple more of misc_utils for better code reading

0.5.3-1

Removed and replace internal packages

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

0.0.6-alpha.0

• Initial release
• First components and inital architecture design