https://github.com/smartacephale/jabroni-outfit-gui
out-of-the-box gui and persistent-state library based on vue
https://github.com/smartacephale/jabroni-outfit-gui
cdn gui persistent-state shadow-dom tweaks unocss vue
Last synced: about 1 month ago
JSON representation
out-of-the-box gui and persistent-state library based on vue
- Host: GitHub
- URL: https://github.com/smartacephale/jabroni-outfit-gui
- Owner: smartacephale
- License: mit
- Created: 2024-08-15T13:29:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-02-10T13:45:25.000Z (4 months ago)
- Last Synced: 2026-02-10T18:28:08.770Z (4 months ago)
- Topics: cdn, gui, persistent-state, shadow-dom, tweaks, unocss, vue
- Language: TypeScript
- Homepage: https://smartacephale.github.io/Jabroni-Outfit-GUI/
- Size: 1.44 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Jabroni Outfit GUI
Small GUI and Persistent State library based on Vue
https://smartacephale.github.io/Jabroni-Outfit-GUI/
### Features
- Store vaiables are persistent by default.
- Store variable with <$> prefix are not persistent.
### Usage
```javascript
import { JabronioStore, JabronioGUI } from 'jabroni-outfit';
```
```javascript
...
const { JabronioStore, JabronioGUI } = window.jabronioutfit;
```
### Example
```javascript
const { JabronioGUI, JabronioStore, setupScheme } = window.jabronioutfit;
const example = () => {
const store = new JabronioStore();
const scheme: SchemeInput = setupScheme([
{
title: 'Colors',
content: [
{
$color1: 'coral',
},
{
color2: 'crimson',
},
{
$color3: 'tomato',
},
{
size: 100,
type: 'range',
max: '500',
min: '0',
},
{
gradientEnabled: true,
label: 'gradient enabled',
},
{
reset: () => {
store.state.$color1 = 'darkslateblue';
store.state.color2 = 'maroon';
store.state.$color3 = 'darksalmon';
},
},
],
},
{
title: 'Advanced',
collapsed: true,
content: [
{
'clueless checkbox': false,
},
],
},
]);
new JabronioGUI(scheme, store);
function drawGradient() {
const { $color1, color2, $color3, gradientEnabled, size } = store.state;
if (!gradientEnabled) {
document.body.style.background = '#000';
return;
}
document.body.style.background = `repeating-radial-gradient(${$color1}, ${color2}, ${$color3} ${size}%)`;
}
drawGradient();
store.stateSubject.subscribe((_) => {
drawGradient();
});
store.eventSubject.subscribe((e) => {
console.log('event', e);
});
};
example();
```