Custom Web Components (CWC)
Layout Components
Add structured layouts to the page, from simple cards and tables through to full application dockable layouts with menus and page areas that adapt to mobile.
Add structured layouts to the page, from simple cards and tables through to full application dockable layouts with menus and page areas that adapt to mobile.
No header or footer, just content in the card
You can put images, or maybe something else in a card.
Simple wrap it in the body and style the card.
Make your card have a header, you can make it collapsible.
You can also play with the loading attribute on the card to add a spinner to the card.
Style your card how you like.
You can even add a footer, put what you want in it.
Some thing in the body
Some thing in the body
Some thing in the body
Some thing in the body
collapsible
string
Tell the card it is collapsible, by clicking the required header.
loading
string
Tell the collapsed card that it is loading, requires header an collapsible.
--cwc-layout-card--border The card border.--cwc-layout-card--border-radius The card border radius.--cwc-layout-card--header--padding The card header padding.--cwc-layout-card--header--background The card header background.--cwc-layout-card--header--color The card header text colour.--cwc-layout-card--header--border-radius The card header border radius.--cwc-layout-card--header--open--padding The card header padding when open.--cwc-layout-card--header--open--background The card header background when open.--cwc-layout-card--header--open--color The card header text colour when open.--cwc-layout-card--header--open--border-radius The card header border radius when open.--cwc-layout-card--body--padding The card body padding.--cwc-layout-card--body--background The card body background.--cwc-layout-card--body--color The card body text colour.--cwc-layout-card--footer--padding The card footer padding.--cwc-layout-card--footer--background The card footer background.--cwc-layout-card--footer--color The card footer text colour.--cwc-layout-card--footer--border-radius The card footer border colour.
<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/layout/index.js"></script>
<style>
.header {
margin: 0px;
padding: 0px;
font-size: 20px;
font-weight: normal;
}
.body, .footer {
margin: 0px;
padding: 0px;
}
.styled-one {
--cwc-layout-card--border-radius: 10px;
--cwc-layout-card--header--background: blue;
--cwc-layout-card--header--color: white;
--cwc-layout-card--header--border-radius: 10px;
--cwc-layout-card--header--open--border-radius: 10px 10px 0px 0px;
--cwc-layout-card--footer--background: rgb(198, 224, 198);
--cwc-layout-card--footer--color: green;
--cwc-layout-card--footer--border-radius: 0px 0px 10px 10px;
}
.styled-two {
--cwc-layout-card--header--background: red;
--cwc-layout-card--header--color: white;
}
</style>
<cwc-layout-card>
<div slot="body">
<h2>Simple Card</h2>
<p>No header or footer, just content in the card</p>
<p>You can put images, or maybe something else in a card.</p>
<p>Simple wrap it in the body and style the card.</p>
</div>
</cwc-layout-card>
<cwc-layout-card class="styled-one" collapsible>
<h4 class="header" slot="header">A Collapsible Card</h4>
<div slot="body">
<p>Make your card have a header, you can make it collapsible.</p>
<p>You can also play with the loading attribute on the card to add a spinner to the card.</p>
<p>Style your card how you like.</p>
<p>You can even add a footer, put what you want in it.</p>
</div>
<div slot="footer">
<span>Something in the footer, maybe a button?</span>
</div>
</cwc-layout-card>
<cwc-layout-card class="styled-two" collapsible loading>
<h4 class="header" slot="header">A Loading Collapsible Card</h4>
<div slot="body">
<p>Some thing in the body</p>
<p>Some thing in the body</p>
<p>Some thing in the body</p>
<p>Some thing in the body</p>
</div>
<div slot="footer">
<span>Something in the footer, maybe a button?</span>
</div>
</cwc-layout-card>
This is a page...
Add a cwc-layout-router in this area and connect the selected route to render it here.
change
The route is updated. Event detail is the route selected.
changeRoute(Object route)
Change the route by sending in a route object, please refer to cwc-layout-router for route object.
updateHeight()
Updates the menu to match the height of the page manually
toggleMenu()
Toggle the menu in mobile, docked, undocked.
Array[Object] routes
An array of all routes available
Object route
Selected route object, the selected route.
Object route.component
The component to load for this route such as 'my-component'.
Object route.path
The location path to match on route such as 'whole/route/matched' => 'http://test.com/whole/route/matched'.
Object route.prefix
The location prefix to match on route such as 'prefix/matched' => 'http://test.com/prefix/matched/123/456'.
Object route.hidden
Should the route be hidden from menu
Object route.label
The label to use in the menu area.
Object route.permission
The permission you need to have to view the route available against permission in cwc-layout-router
docked
flag
Present when menu is docked (mobile).
--cwc-layout-dockable--menu--margin The menu margin.--cwc-layout-dockable--menu--padding The menu padding.--cwc-layout-dockable--menu--background the menu background.--cwc-layout-dockable--menu--color The menu text colour.--cwc-layout-dockable--menu-header--padding The menu header padding.--cwc-layout-dockable--menu-header--color The menu header text color (inherits menu text color).--cwc-layout-dockable--menu-routes--color The routes text colour (inherits menu text color).--cwc-layout-dockable--menu-routes--padding The menu routes padding.--cwc-layout-dockable--menu-route--padding The individual menu route padding.--cwc-layout-dockable--menu-route--opacity The individual menu route opacity.--cwc-layout-dockable--menu-route--background--hover The individual menu route background on hover.--cwc-layout-dockable--menu-route--selected--background The individual menu route selected background.--cwc-layout-dockable--menu-route--link--padding The individual menu route link padding.--cwc-layout-dockable--menu-button--width The menu toggle button in mobile width.--cwc-layout-dockable--menu-button--height The menu toggle button in mobile height.--cwc-layout-dockable--menu-button--border The menu toggle button in mobile border.--cwc-layout-dockable--menu-button--border-radius The menu toggle button in mobile border radius.--cwc-layout-dockable--menu-button--background The menu toggle button in mobile background.--cwc-layout-dockable--menu-button--bottom The menu toggle button in mobile bottom position.--cwc-layout-dockable--menu-button--right The menu toggle button in mobile right position.--cwc-layout-dockable--menu-button--opacity The menu toggle button in mobile opacity.--cwc-layout-dockable--menu-button--icon--width The menu toggle button in mobile icon width.--cwc-layout-dockable--menu-button--icon--height The menu toggle button in mobile icon height.--cwc-layout-dockable--menu-button--icon--padding The menu toggle button in mobile icon padding.--cwc-layout-dockable--menu-button--icon--fill The menu toggle button in mobile icon fill.--cwc-layout-dockable--menu-footer--padding The menu footer padding.--cwc-layout-dockable--menu-footer--color The menu footer colour.--cwc-layout-dockable--page--padding The page padding.--cwc-layout-dockable--page--background The page background.--cwc-layout-dockable--page--color The page text colour (omit for router).
<style>
.dockable {
--cwc-layout-dockable--menu--color: white;
--cwc-layout-dockable--menu--background: blue;
}
</style>
<cwc-layout-dockable id="dockable" class="dockable">
<span slot="menu-header">My Business</span>
<span slot="menu-footer">My Copywrite</span>
<div slot="page">
<h1>Page One</h1>
<p>This is a page...</p>
<p>Add a cwc-layout-router in this area and connect the selected route to render it here.</p>
</div>
</cwc-layout-dockable>
<script>
setTimeout(() => {
document.querySelector('#dockable').routes = [
{ component: 'page-test-index', path: 'home', label: 'Home' },
{ component: 'page-test-one', path: 'one', label: 'One' },
{ component: 'page-test-two', path: 'two', label: 'Two' },
{ component: 'page-test-three', path: 'three', label: 'Three' },
{ component: 'page-test-four', path: 'four', label: 'Four' },
{ component: 'page-test-five', path: 'five', label: 'Five' },
{ component: 'page-not-found', path: '404', label: '404', hidden: true }
];
}, 1000);
</script>
<cwc-layout-router>Custom Web Component, adds dynamic lazy routing (deactivated) via push state URL or hashtag. Loads the matching component into the router dynamically.
Use optional permissions array to ensure user has access to show a permitted route. NOTE: Permissions are a way to restrict routes, DO NOT rely on JS based protection to safeguard an application. All system security should be at API for ANY JS based application!
Use with dockable to get a single page application with dockable meun and page area.
change
The route has been changed and is painted to the DOM.
Object route
The route selected { component: 'app-system-account', path: 'account', label: 'Account', hidden: true, permission: 'ui.route.account' }
Array[Object] routes
The routes to use as array of objects [{ component: 'app-system-account', path: 'account', label: 'Account', hidden: true, permission: 'ui.route.account' },...]
Array[Object.String] routes[].src (optional)
The full src path to the component such as '/src/component/my-component.js', if you wish to dynamically import, omit if loading all routes manually.
Array[Object.String] routes[].component
The component to display when route matched such as my-component
Array[Object.String] routes[].path
The url path to match such as some/url would match http://yoursite.com/some/url
Array[Object.String] routes[].prefix
The url prefix to match instead of the full path, such as some/url would match http://yoursite.com/some/url/fsdfsdfsdfsd
Array[Object.String] routes[].label
The label to use when displaying links in the menu
Array[Object.String] routes[].hidden (optional)
Do not show the route in the menu
Array[Object.String] routes[].permission (optional)
The permission you need to have to view the route such as ui.route.something
Array[Object] permissions (optional)
The permissions for the user logged in, as an array of objects [{role, 'ur.role.name', read: true, write, true, delete: true}, ...]
Array[Object.String] permissions[].role
The role that needs to match to the permission in the route
Array[Object.Boolean] permissions[].read
Does the user have read access
Array[Object.Boolean] permissions[].write
Does the user have write access
Array[Object.Boolean] permissions[].delete
Does the user have delete access
default
string
The default route path when no path has been found inthe URL, e.g. yoursite.com, the base address, as in index.
not-found
string
The route to use when no route path matche to available routes e.g. 404.
not-found
flag
Flag to tell the router if it's using push-state routing, requires <base href="/" /> (fallback is hashtag routing)
redirect
flag
Flag to tell the system to redirect the default page to it's actual route or show it as domain root e.g. yoursite.com
export default [
{ src: '/src/app/test/app-test-index.js', component: 'app-test-index', path: 'home', label: 'Home' },
{ src: '/src/app/test/app-test-index.js', component: 'app-test-index', prefix: 'reset', label: 'Password Reset', hidden: true },
{ src: '/src/app/test/app-test-index.js', component: 'app-test-index', prefix: 'register', label: 'Register', hidden: true },
{ src: '/src/app/test/app-test-index.js', component: 'app-test-index', prefix: 'activate', label: 'Activate', hidden: true },
{ src: '/src/app/test/app-test-one.js', component: 'app-test-one', path: 'one', label: 'One' },
{ src: '/src/app/test/app-test-two.js', component: 'app-test-two', path: 'two', label: 'Two' },
{ src: '/src/app/test/app-test-three.js', component: 'app-test-three', path: 'three', label: 'Three' },
{ src: '/src/app/test/app-test-four.js', component: 'app-test-four', path: 'four', label: 'Four' },
{ src: '/src/app/test/app-test-five.js', component: 'app-test-five', path: 'five', label: 'Five' },
{ src: '/src/app/system/app-system-account.js', component: 'app-system-account', path: 'account', label: 'Account', hidden: true, permission: 'ui.route.account' },
{ src: '/src/app/system/app-system-admin.js', component: 'app-system-admin', path: 'admin', label: 'Admin', hidden: true, permission: 'ui.route.admin' },
{ src: '/src/app/not/app-not-found.js', component: 'app-not-found', path: '404', label: '404', hidden: true },
{ src: '/src/app/not/app-not-allowed.js', component: 'app-not-allowed', path: '401', label: '401', hidden: true }
];
import './app/test/app-test-index.js';
import './app/test/app-test-one.js';
import './app/test/app-test-two.js';
import './app/test/app-test-three.js';
import './app/test/app-test-four.js';
import './app/test/app-test-five.js';
import './app/system/app-system-account.js';
import './app/system/app-system-admin.js';
import './app/not/app-not-found.js';
import './app/not/app-not-allowed.js';
export default [
{ component: 'app-test-index', path: 'home', label: 'Home' },
{ component: 'app-test-index', prefix: 'reset', label: 'Password Reset', hidden: true },
{ component: 'app-test-index', prefix: 'register', label: 'Register', hidden: true },
{ component: 'app-test-index', prefix: 'activate', label: 'Activate', hidden: true },
{ component: 'app-test-one', path: 'one', label: 'One' },
{ component: 'app-test-two', path: 'two', label: 'Two' },
{ component: 'app-test-three', path: 'three', label: 'Three' },
{ component: 'app-test-four', path: 'four', label: 'Four' },
{ component: 'app-test-five', path: 'five', label: 'Five' },
{ component: 'app-system-account', path: 'account', label: 'Account', hidden: true, permission: 'ui.route.account' },
{ component: 'app-system-admin', path: 'admin', label: 'Admin', hidden: true, permission: 'ui.route.admin' },
{ component: 'app-not-found', path: '404', label: '404', hidden: true },
{ component: 'app-not-allowed', path: '401', label: '401', hidden: true }
];
<style>
.dockable {
--cwc-layout-dockable--menu--color: white;
--cwc-layout-dockable--menu--background: blue;
}
</style>
<cwc-layout-dockable id="dockable" class="dockable">
<span slot="menu-header">My Business</span>
<span slot="menu-footer">My Copywrite</span>
<div slot="page">
<cwc-layout-router
.route="${this._route}"
.routes="${Routes}"
.permissions="${this._permissions}"
default="home"
not-found="404"
not-allowed="401"
@change="${this._routerUpdated.bind(this)}"
push-state
></cwc-layout-router>
</div>
</cwc-layout-dockable>
order
The table needs to order by external ordering, detail contains index of data to order and order.
page
The table needs to move to page by external pagination, detail contains page to move to.
start
The table needs to move to the start of the pages externally.
end
The table needs to move to the end of the pages externally.
back
The table needs to move back a page externally.
forward
The table needs to move forward a page externally.
{action}
A table data event has been triggered, as set in table data [[{event: ...}]] returns row as detail.
Array[String|Object] header
An array (columns) of string table headings or objects ['One', {...}, ...].
Number header[].colspan
Column span of heading as Number.
Number header[].justify
Justify the heading left, center, right.
Number header[].fontWeight
Font weight of the heading normal, bold.
Number header[].weight
Width of the heading as percentage or pixel etc. 50%, 100px.
Number header[].order
Should the column be orderable, and direction, empty for orderable, asc, desc to force order.
Number header[].value
The actual heading should you be using an object and not a string.
Array[Array[String|Object]] body
An array (rows) of arrays (columns) of table data as strings or objects [['One', {...}, ...]].
Number body[][].colspan
Column span of data as Number.
Number body[][].justify
Justify the heading left, center, right.
Number body[][].fontWeight
Font weight of the heading normal, bold.
Number body[][].event
Make the contents a clickable button with an event to fire (returns row).
Number body[][].link
Make the contents a clickable anchor link.
Number body[][].value
The actual data should you be using an object and not a string.
Array[String|Object] footer
An array (columns) of table footers as strings or objects ['One', {...}, ...], if not paginating table.
Number body[][].colspan
Column span of footer as Number.
Number body[][].justify
Justify the footer left, center, right.
Number body[][].fontWeight
Font weight of the footer normal, bold.
Number body[][].value
The actual data should you be using an object and not a string.
page-size
number
The size of the pages (how many rows) when paginating internally or externally.
page-count
number
The amount pages calculated when paginating externally only.
page
number
The page you are currently on when paginating externally only.
loading
flag
The element is loading.
paginate-internal
flag
The table is paginated internally (replaces footer properties), we feed it all the data and let it handle the pagination, ordering etc.
paginate-external
flag
The table is paginated (replaces footer properties), but externally, all pagination/ordering is handled outside table, events emit for table actions.
--cwc-layout-table--border The table border.--cwc-layout-table--border-radius The table border radius.--cwc-layout-table--cell--empty--height The table cell height when empty (to stop collapse when loading).--cwc-layout-table--header--background The table header background.--cwc-layout-table--header--color The table header text color.--cwc-layout-table--header--border-radius The table header border radius.--cwc-layout-table--header--padding The table header padding.--cwc-layout-table--body--background The table body background.--cwc-layout-table--body--color The table body text colour.--cwc-layout-table--body--cell--padding The table body cell padding.--cwc-layout-table--body--cell--event--padding The table body cell event padding (when data has an event action).--cwc-layout-table--footer--background The table footer background.--cwc-layout-table--footer--color The table footer text colour.--cwc-layout-table--footer--fill The table fill colour for icons (when paginating).--cwc-layout-table--footer--cell--padding The table footer cell padding.--cwc-layout-table--footer--page-count--right The table footer page count right position.--cwc-layout-table--footer--page-count--pading The table footer page count padding.--cwc-layout-table--footer--page-count--border The table footer page count border.--cwc-layout-table--footer--page-count--border-radius The table footer page count border-radius.--cwc-layout-table--footer--page-count--background The table footer page count background.--cwc-layout-table--footer--page-count--color The table footer page count text colour.
<style>
.tabled2 {
--cwc-layout-table--header--background: blue;
--cwc-layout-table--header--color: white;
--cwc-layout-table--footer--background: blue;
--cwc-layout-table--footer--color: white;
--cwc-layout-table--footer--page-count--background: lightblue;
--cwc-layout-table--footer--page-count--color: blue;
}
.tabled3 {
--cwc-layout-table--border-radius: 10px;
--cwc-layout-table--header--background: red;
--cwc-layout-table--header--color: white;
--cwc-layout-table--footer--background: red;
--cwc-layout-table--footer--color: white;
--cwc-layout-table--footer--page-count--background: white;
--cwc-layout-table--footer--page-count--color: #444;
--cwc-layout-table--footer--page-count--border-radius: 5px;
--cwc-layout-table--footer--page-count--right: 20px;
}
</style>
<h4>No Pagination</h4>
<cwc-layout-table
id="tabled"
class="tabled"
.header="${this._userHeader}"
.body="${this._userBody}"
></cwc-layout-table>
<h4>Pagination Internally (Full Dataset)</h4>
<cwc-layout-table
id="tabled2"
class="tabled2"
.header="${this._userHeader}"
.body="${this._userBody}"
page-size="5"
paginate-internal
></cwc-layout-table>
<h4>Pagination Externally (Paged Dataset)</h4>
<cwc-layout-table
id="tabled3"
class="tabled3"
.header="${this._userHeader}"
.body="${this._userBody}"
page-size="5"
page-count="${this._pageCount}"
page="${this._page}"
?loading="${!this._userBody}"
paginate-internal
@order="${this.order.bind(this)}"
@page="${this.page.bind(this)}"
@start="${this.start.bind(this)}"
@end="${this.end.bind(this)}"
@back="${this.back.bind(this)}"
@forward="${this.forward.bind(this)}"
@xyz="${this.cellButtonAction.bind(this, 'xyz')}"
@abc="${this.cellButtonAction.bind(this, 'abc')}"
></cwc-layout-table>