reblocks-ui2 - A pack of UI components for Reblocks web-framework.

REBLOCKS-UI2 ASDF System Details

Installation

You can install this library from Quicklisp, but you want to receive updates quickly, then install it from Ultralisp.org:

(ql-dist:install-dist "http://dist.ultralisp.org/"
                      :prompt nil)
(ql:quickload :reblocks-ui2)

Usage

TODO: Write a library description. Put some examples here.

API

REBLOCKS-UI2/BUTTONS/BUTTON

Classes

BUTTON

Readers

Accessors

Functions

function
CONTENT &KEY (WIDGET-CLASS 'BUTTON) ON-CLICK (CLASS "button") DISABLED STYLE (VIEW :NORMAL) (SIZE :L) (PIN :ROUND) (WIDTH :MIN) HEIGHT

REBLOCKS-UI2/BUTTONS/VIEW

Classes

ACTION
BUTTON-VIEW
NORMAL-DISABLED
NORMAL
OUTLINED-ACTION
OUTLINED-DANGER
OUTLINED-INFO
OUTLINED-SUCCESS
OUTLINED-UTILITY
OUTLINED-WARNING
OUTLINED
RAISED-DISABLED
RAISED

Generics

Returns an alternative view for a button in disabled state.

Functions

REBLOCKS-UI2/CARD

Classes

CARD-WIDGET

Readers

Functions

function
CONTENT &KEY (VIEW :OUTLINED) (WIDTH "full") (HEIGHT '(120)) (PADDING :L) MARGIN (HORIZONTAL-ALIGN :CENTER) (VERTICAL-ALIGN :CENTER) ON-CLICK (WIDGET-CLASS 'CARD-WIDGET)

REBLOCKS-UI2/CONTAINERS/COLUMN

Classes

COLUMN-WIDGET

Functions

REBLOCKS-UI2/CONTAINERS/CONTAINER

Classes

CONTAINER-WIDGET

Readers

Accessors

Generics

Functions

function
default-widget-class &rest subwidgets-and-options

REBLOCKS-UI2/CONTAINERS/CONTROLS-ROW

Classes

CONTROLS-ROW-WIDGET

Macros

REBLOCKS-UI2/CONTAINERS/ROW

Classes

ROW-WIDGET

Functions

function
subwidgets &key (gap \*default-gap\*) on-click
function
&rest subwidgets-and-options

REBLOCKS-UI2/CONTAINERS/STACK

Classes

STACK-WIDGET

Shows only the top child from the stack. Provides methods to push and pop widgets.

Readers

Generics

Functions

Removes current (top) widget from the stack and display the next widget.

Adds a new widget ontop of the current.

Makes a stack widget with given subwidgets.

Only first widget in the list will be visible.

REBLOCKS-UI2/CONTAINERS/TABS

Classes

TABS-CONTROL

Readers

Accessors

TABS-WIDGET

Readers

Functions

function
&key widget-id idx &allow-other-keys
function
titles subwidgets &key (idx 0) (selector-class 'tabs-control) (class 'tabs-widget) (size :l)

Types

REBLOCKS-UI2/EDITABLE

Generics

Creates a widget which can be used to edit a given value. Every time when the widget loose focus, it will call CALLBACK argument with a new value.

REBLOCKS-UI2/FORM

Classes

FORM-WIDGET

Readers

reader
(= (make-hash-table :test 'equal))

Internal structure holding references to all form inputs having a name attribute.

Functions

function
content &key (widget-class 'form-widget) on-submit

REBLOCKS-UI2/FORM/VALIDATION

Classes

FIELD-VALIDATION-ERROR

Readers

FORM-VALIDATION-ERROR

Readers

VALIDATION-ERROR

Readers

Generics

Accepts a form or input widget and a plist of all data sent from the browser.

Should return a plist of validated data. Also, it might change the state of the widgets, for example, to set an error message saying that entered value is invalid. In the case when data is invalid, function should signal validation-error.

REBLOCKS-UI2/HTML

Functions

function
name &optional default

Macros

macro
(&body body) &key css (html-tag :div) css-classes on-click props width height margin

This macro allows to describe html, state, css and event handlers of the widget. All in the single form.

Here is an example of the simple widget which keeps the counter value in the state and increment it on click:

(html (:p :class "the-title" (fmt "First paragraph with counter: ~A" (prop :counter))) :props '((:counter . 1)) :css (.the-title :font-size 40px) :on-click (lambda (widget) (incf (prop :counter)) (update widget)))

REBLOCKS-UI2/ICON

Classes

ICON-WIDGET

Readers

Functions

REBLOCKS-UI2/INPUTS/BASE

Classes

BASE-INPUT-WIDGET

Readers

A function of one argument returning a validated value or signaling the field-validation-error.

NAMED-INPUT

Readers

REBLOCKS-UI2/INPUTS/NAMED

Classes

NAMED-INPUT

Readers

REBLOCKS-UI2/INPUTS/TEXT-INPUT

Classes

INPUT-WIDGET

Readers

reader
(:view = (make-instance 'normal))

Accessors

Functions

function
&key (widget-class 'input-widget) name value (type :text) placeholder (view :normal) (pin :round) (size :m) disabled validator error left-content right-content

REBLOCKS-UI2/INPUTS/TEXT-INPUT/VIEW

Classes

CLEAR
INPUT-VIEW
NORMAL

Functions

REBLOCKS-UI2/SIZES

Functions

REBLOCKS-UI2/TABLES/CLICKABLE-ROW

Classes

CLICKABLE-ROW-WIDGET

Functions

REBLOCKS-UI2/TABLES/EDITABLE-TABLE

Classes

EDITABLE-COLUMN

Readers

EDITABLE-TABLE-WIDGET

Readers

When given, should be a function of zero arguments. Will be called when user adds a new table row. Usually you will want to do create and add an object to a database. Returned object will be bound to a new table row and used to fill cells with new values.

When given, should be a function of one argument. Will be called with object instance to be deleted from the table. Usually you will want to do something like deletion the record from a database.

ROW-NOT-FOUND

Generics

Deletes row representing given object. First it calls object-deleter callback and then removes corresponding row from the table.

Functions

function
title &key (getter nil getter-given-p) (setter #'default-setter) (cell-maker #'create-widget-from) (align :left)
function
columns rows &key (table-class 'editable-table-widget) (row-class nil row-class-given-p) (object-deleter nil object-deleter-given-p) (object-creator nil object-creator-given-p)

REBLOCKS-UI2/TABLES/TABLE

Classes

COLUMN

Readers

reader
(:cell-maker = #'create-widget-from)

Additional CSS classes for column cells

reader
(:GETTER = (LAMBDA (ROW) (DECLARE (IGNORE ROW)) (ERROR "Real getter should be provided to COLUMN function.")))
TABLE-ROW

Readers

Original object, passed as a row to the make-table function.

Reference it a table row belong to.

TABLE-WIDGET

Readers

Generics

Functions

function
title &key (getter nil getter-given-p) (cell-maker nil cell-maker-p) (align :center) (classes nil clases-given-p)
function
columns rows &key (table-class 'table-widget) (row-class nil row-class-given-p)

Updates cell widgets using base object, stored in the ROW.

REBLOCKS-UI2/THEMES/API

Functions

Macros

macro
name bases &rest var-forms

REBLOCKS-UI2/THEMES/BASE

Classes

BASE-THEME

A base theme class for all Reblocks-UI2 themes.

Readers

reader
(:overridden-vars = (make-hash-table :test 'equal))

REBLOCKS-UI2/THEMES/COLOR

Classes

COLOR

Readers

If string, then it is a color of element in "focus" state. If integer, then it is intensity change relative to the base color. For light scheme intensity will be changed down if number is positive, for dark scheme intencity will go up. Negative number reverses this behaviour.

If string, then it is a color of element in "hover" state. If integer, then it is intensity change relative to the base color. For light scheme intensity will be changed down if number is positive, for dark scheme intencity will go up. Negative number reverses this behaviour.

reader
(:PROPERTY = (REQUIRED-ARGUMENT "property"))

Generics

Functions

function
theme color &key (light nil light-p) (dark nil dark-p) (hover nil hover-p) (focus nil focus-p)
function
property &key light dark hover focus

REBLOCKS-UI2/THEMES/STYLING

Generics

Returns classes for a widget or it's property.

Result can be a list, string or a keyword.

Functions

REBLOCKS-UI2/THEMES/TAILWIND

Classes

TAILWIND-THEME

Generics

Macros

Creates a theme object.

REBLOCKS-UI2/THEMES/TAILWIND/ARBITRARY

Classes

ARBITRARY-VALUE

Readers

Functions

REBLOCKS-UI2/UTILS/ALIGN

Classes

HORIZONTAL-ALIGN

Readers

VERTICAL-ALIGN

Readers

Functions

Types

REBLOCKS-UI2/UTILS/MARGIN

Classes

MARGIN

Readers

Functions

REBLOCKS-UI2/UTILS/PADDING

Classes

PADDING

Readers

Functions

Types

REBLOCKS-UI2/UTILS/PRIMITIVE-TO

Functions

REBLOCKS-UI2/UTILS/SIZE

Classes

HEIGHT
RESPONSIVE-HEIGHT

Readers

RESPONSIVE-WIDTH

Readers

SIZE

Readers

If integer, then it will be considered as "px". If string, then will be used as is (meaning depends on current theme).

WIDTH

Functions

Types

(OR HEIGHT RESPONSIVE-HEIGHT)
(OR WIDTH RESPONSIVE-WIDTH)

REBLOCKS-UI2/UTILS/WALK

Generics

A protocol to go through widgets tree and to call VISITOR-FUNC on each node.

REBLOCKS-UI2/WIDGET

Classes

UI-WIDGET

Readers

When an on-click action is given, cursor style will be changed to "pointer".

Generics

Works like reblocks/dependencies:get-dependencies generic-function, but in context of current theme.

Works like reblocks/widget:get-html-tag generic-function, but in context of current theme.

May return a plist of attributes to add to the main widget's HTML node.

It should not return :ID :CLASS or :ONCLICK attributes.

Renders widget in given theme. All reblocks-ui2 widgets should implement this method instead of a method for reblocks/widget:render generic-function.