Fully Styled UI Component Library – PCUI

Preview:

Description:

PCUI is a fully styled UI component library for Vanilla JavaScript and React apps.

It provides a quick and stylish way to create reusable UI components in modern web & mobile design.

UI Components Included:

• ArrayInput
• BooleanInput
• Button
• Code
• Container
• ContextMenu
• Divider
• InfoBox
• Label
• NumericInput
• Overlay
• Panel
• Progress
• SelectInput
• SliderInput
• Spinner
• TextAreaInput
• TextInput
• TreeView
• VectorInput

Basic Usage:

1. Install the PCUI package with NPM.

# NPM
$ npm i @playcanvas/pcui --save

2. Import UI components.

// Vanilla JavaScript
import { Component } from '@playcanvas/pcui/pcui.js';
// React
import React from 'react';
import ReactDOM from 'react-dom';
import { Component } from '@playcanvas/pcui/pcui-react.js';
// Data binding
import {
BindingObserverToElement,
BindingElementToObserver,
BindingTwoWay,
Observer
} from '@playcanvas/pcui/pcui-binding.js';

3. Use these UI components in your app.

<BooleanInput onChange={function noRefCheck(){}} />
...

Previews:

Boolean Input

Info Box

Panel

Tree View

Textarea

Changelog:

v3.0.0 (12/20/2022)

• [Major breaking change] PCUI build updates
• Menu component updates
• Enable more Stylelint rules
• MenuItem select event

v2.10.0 (12/20/2022)

• General Typing Improvements
• Remove the ContextMenu component
• Remove TypeScript namespaces from the codebase
• Enable Stylelint to lint SCSS files

v2.9.0 (12/17/2022)

• [Breaking] Numeric input to use shift for precision when using arrow keys or dragging
• Migrate PCUI to TypeScript

v2.8.0 (10/15/2022)

• update

v2.7.1 (10/03/2022)

• update

v2.7.0 (09/30/2022)

• added color picker, gradient picker and canvas
• added themes

v2.6.4 (09/06/2022)

• TreeView react component fix

v2.6.3 (09/05/2022)

• Component Event Updates

v2.6.2 (09/05/2022)

• Adds 10 New Icons to the Font Sheet

v2.6.1 (08/19/2022)

• Element class property

v2.6.0 (07/29/2022)

• Embedded font icons

v2.5.0 (07/23/2022)

• Set selected from passed in args on TreeViewItem
• Update how styles are included in the project
• Bug Fixes

v2.4.0 (07/12/2022)

• Adds RadioButton component
• Tweaks GridView and GridViewItem components to incorporate Radio selection logic

v2.3.3 (06/14/2022)

• bugfix

v2.3.2 (06/11/2022)

• updates to labelgroup and panel
• dependencies updated
• Add an icon property to the TreeViewItem class

v2.3.1 (03/05/2022)

• bugfix

v2.3.0 (02/12/2022)

• Updated the build process and npm build

v2.2.6 (12/02/2021)

• Disable auto complete on input fields

v2.2.5 (11/06/2021)

• Upgrades some deprecated or old packages that prevented pcui from building

v2.2.4 (10/14/2021)

• Fire change event when ESC is pressed in TextInput with keyChange = true. Make ESC clear the input even when blurOnEscape is false.

v2.2.3 (10/13/2021)

• Fix bug where clicking on disabled menuitem would trigger click on its parent menu item.

v2.2.2 (10/12/2021)

• Fix transition when menu items are enabled / disabled

v2.2.1 (10/12/2021)

• Alt click on TreeViewItem to open / close all its children as well

v2.2.0 (10/12/2021)

• Added new Menu and MenuItem components

v2.1.4 (09/15/2021)

• Fixes for drag-scrolling near edges of TreeView

v2.1.3 (09/09/2021)

• Fix various issues when reparenting or reordering multiple tree view items together.

v2.1.2 (09/08/2021)

• Allow root node of TreeView to be dragged

v2.1.1 (09/01/2021)

• Added #ifndef #endif statements for import statements of individual scss files so that they can be removed when clean-css runs.

v2.1.0 (08/31/2021)

• Now using rollup instead of webpack, Removed components and binding folders and put everything under root folder.

v2.0.0 (08/27/2021)

• Remove pcui-binding namespace and move its contents into the main namespace.

v1.1.23 (08/19/2021)

• Update observer and observer-list to latest Editor version
• Add Events#addEmitter and Events#removeEmitter

v1.1.22 (06/17/2021)

• Update

v1.1.21 (06/11/2021)

• First select the treeview item and open its parents before focusing on it
• [TextInput] Revert to previous value on esc key press

v1.1.20 (06/01/2021)

• Fix error with undefined values in VectorInput

v1.1.19 (05/19/2021)

• Small context menu bugfix

v1.1.18 (05/15/2021)

• NPM build fix for 1.1.17

v1.1.17 (05/10/2021)

• If ArrayInput value is not an array set value to empty array instead

v1.1.16 (05/06/2021)

• Updated package

v1.1.15 (03/24/2021)

• Update the dom hierarchy when the treeview receives new props
• TreeViewItem selected react
• Remove dummy text from the label components default text property
• Vector input string value

v1.1.14 (03/19/2021)

• When filtering SelectInput options, reorder them based on their best match

v1.1.13 (02/26/2021)

• Fix numeric inputs not using precision when viewing multiple values

v1.1.12 (02/22/2021)

• Do not manually call removeChild for elements with destroyed parent

v1.1.11 (02/16/2021)

• Fix for numeric input slider resetting input on mouse up

v1.1.10 (02/15/2021)

• Fix flex of array input items but use special condition for panel headers so that they don’t appear squished when collapsed.
• Add newChildIndex to the reparent function of TreeViews
• Added LabelGroup
• Added GridView
• Fix error when clearing resizable container

v1.1.9 (02/13/2021)

• Expose LabelGroup

v1.1.6 (01/28/2021)

• Fix flex of array input items

v1.1.5 (01/05/2021)

• Removed the montserrat font from the PCUI build. Custom font’s can now be included via the font css classes

v1.1.4 (12/23/2020)

• Change how history combine works for NumericInput and SliderInput
• Change SliderInput handle behavior which fixes an undo / redo bug and removes the accumulator logic in favor of allowing a small initial offset between the cursor and the handle.

v1.1.3 (12/21/2020)

• Fix subarray panels

v1.1.2 (12/21/2020)

• Various fixes to ArrayInput
• Use Element.register for all components
• Fix defaults for TreeView storybook

v1.1.1 (12/18/2020)

• Initialize Container values that default to false so that we avoid an unnecessary property setter for scrollable, flex, grid properties

v1.1.0 (12/17/2020)

• Support for the TreeView and TreeViewItem components
• Support for the ArrayInput component
• The TextAreaInput component can now be set to resizable
• Fixed references to the BindingObserversToElement and BindingElementToObservers classes
• The ContextMenu now exposes its trigger element
• Fixed the handle position

v1.0.8 (12/16/2020)

• Fix the handle position

v1.0.8 (11/12/2020)

• Fix slider handle on zero

v1.0.5 (10/31/2020)

• Include pcui-hidden in pcui-react build

v1.0.4 (10/29/2020)

• update the default numeric input precision to 7

v1.0.3 (10/26/2020)

• Expose the ContextMenu component