0.3.0-alpha.0 • Published 10 months ago

@alfaomegasoftware/standard-ui v0.3.0-alpha.0

Weekly downloads
-
License
-
Repository
-
Last release
10 months ago

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!.

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.
  • StatusBar: a single bar to display information about menus, hovering items, etc.
  • SVGIcon: an SVG icon identified by a name (trash, add, menu, etc.)
  • 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.
  • CircularProgressIndicator: a spinning progress indicator with an optional label.

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.

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.

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

Developer notes

  • All CSS styles use Tailwind CSS and are prefixed with ao-sui-tw-

Changelog

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, SVGIcon, 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
0.2.5-alpha.0

10 months ago

0.3.0-alpha.0

10 months ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.6-alpha.0

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.6

1 year ago

0.0.0

1 year ago