https://github.com/ap-dev-at-home/proxy-js-ui
Library of web components based on proxy-js
https://github.com/ap-dev-at-home/proxy-js-ui
library proxy-js ui-components web-components
Last synced: 4 months ago
JSON representation
Library of web components based on proxy-js
- Host: GitHub
- URL: https://github.com/ap-dev-at-home/proxy-js-ui
- Owner: ap-dev-at-home
- License: mit
- Created: 2024-08-30T13:57:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-06T00:19:57.000Z (over 1 year ago)
- Last Synced: 2025-06-03T19:03:26.706Z (about 1 year ago)
- Topics: library, proxy-js, ui-components, web-components
- Language: JavaScript
- Homepage:
- Size: 85.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Proxy-Js-UI
WebComponents based on [proxy-js](https://github.com/ap-dev-at-home/proxy-js).
## Table of Contents
- [select-sheet](#select-sheet)
- [Constructor](#constructor)
- [Events](#events)
- [Example](#example)
- [Sample Image](#sample-image)
- [progress-bar](#progress-bar)
- [Example](#example-1)
- [Methods](#methods)
- [Sample Image](#sample-image-1)
- [safe-background](#safe-background)
- [Example](#example-2)
- [Methods](#methods-1)
- [toast-notification](#toast-notification)
- [Example](#example-3)
- [Methods](#methods-2)
## select-sheet
WebComponent displaying a set of options to select from.
### Constructor
```javascript
new SelectSheet({
title: 'Title' //the title - displayed in the sheets header
items: [], //array of objects - the items to provide selection from
// - the 'text' property will be displayed as the items representation
cancel: 'CANCEL' // - cancel button label
});
```
### Events
```javascript
//close - custom event
e.detail =
{
action: '' // - close action
// - 'select' - closed by item selection
// - 'cancel' - closed by cancel click
// - 'unfocus' - closed by loosing focus
item: {} // - selected item
}
```
### Example
```javascript
//usage example
import { SelectSheet } from '/lib/proxy-js-ui/select-sheet.js';
$shell.menu = {};
$shell.menu.sheet = async function (title, items) {
const $bg = createSafeBg(); //HTML Element covering all site, providing safe background
document.body.appendChild($bg);
$bg.focus();
const promise = new Promise((resolve, reject) => {
const selectSheet = new SelectSheet({ title: title, cancel: 'CANCEL', items: items })
$p.event.one(selectSheet, 'close', e => {
if (document.body.querySelector('.busy-bg')) {
$bg.parentElement.removeChild($bg);
}
resolve(e.detail);
});
$bg.appendChild(selectSheet);
});
return promise;
};
//----------------------------------------------------------------------------------------
//show sheet
$shell.menu.sheet('Sort By...',
[ //selectable items
{ text: 'File Name - Ascending', sort: 'name', direction: 'asc' }, ..., ..., ...
])
.then(select => {
console.log(select);
if (select.action != 'select') { //close action
return;
}
//do something with -> select.item
});
```
### Sample Image
## progress-bar
Webcomponent displaying a progress bar, including title and current percentage.
### Example
```html
```
### Methods
| Method | Description |
| --- | --- |
| .setPercent(`percent`) | Sets the progress bar to fill `percent` width of the total length |
| .setProgress(`current`, `max`) | Calculates the percentage value of `current` from `max` and sets the progress bar to fill the corresponding width |
| .setTitle(`title`) | Sets `title` into the progress bar label |
### Sample Image
## safe-background
Creates an (optionally blurred) background covering the entire site.
### Example
```html
```
### Methods
| Method | Description |
| --- | --- |
| getSafeElement() | Gets the element of the safe background, to add further elements to |
| .appendSheet(...`sheets`) | Include (registered) stylesheets with the component, e.g. to be used by elements appended to the safe element |
## toast-notification
Creates a notification on the bottom of the application, which is removed after a certain duration.
### Example
```javascript
$shell.toast = {};
$shell.toast.show = function (text, duration) {
var $toast = document.createElement('toast-notification');
document.body.appendChild($toast);
$toast.show(text, duration);
};
```
### Methods
| Method | Description |
| --- | --- |
| show(`text`, `duration`) | Sets the notifications `text` displaying it for `duration` and handles removing it |
| remove() | Immediately removes the toast-notification without waiting the timeout |
### Sample Image
