https://github.com/smartacephale/jabroni-outfit
out-of-the-box gui and persistent-state library based on vue
https://github.com/smartacephale/jabroni-outfit
cdn gui persistent-state tweaks vue
Last synced: about 1 year ago
JSON representation
out-of-the-box gui and persistent-state library based on vue
- Host: GitHub
- URL: https://github.com/smartacephale/jabroni-outfit
- Owner: smartacephale
- License: mit
- Created: 2024-08-15T13:29:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-08T01:34:38.000Z (over 1 year ago)
- Last Synced: 2025-03-25T20:33:03.777Z (about 1 year ago)
- Topics: cdn, gui, persistent-state, tweaks, vue
- Language: TypeScript
- Homepage: https://smartacephale.github.io/jabroni-outfit/
- Size: 2.17 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Jabroni Outfit
out-of-the-box gui and persistent-state library
https://smartacephale.github.io/jabroni-outfit/
### Introduction
The `jabroni-outfit` library is a versatile tool for creating user interfaces with persistent state management. It provides a simple and efficient way to define state variables, build UI controls, and automatically update the UI based on state changes.
### Key Features
- **State Management:**
- Define state variables with properties like `value`, `persistent`, and `watch`.
- Easily manage and update state values throughout your application.
- **UI Creation:**
- Create UI controls (e.g., text inputs, checkboxes) based on state variables.
- Automatically update the UI whenever state values change.
- **Persistence:**
- Store state values persistently across application sessions.
- **Flexibility:**
- Customize the UI and state management to fit your specific needs.
### Usage
**1. Import the Library:**
```javascript
import { JabroniOutfitStore, JabroniOutfitUI } from 'jabroni-outfit';
```
or umd cdn:
```javascript
...
const { JabroniOutfitStore, JabroniOutfitUI } = window.jabronioutfit;
```
**2. Define State Variables:**
Create an object containing state variables. Each variable has properties:
- `value`: The current value of the state variable.
- `persistent`: Boolean indicating if the value should be stored persistently.
- `watch`: Boolean indicating if the UI should update when the value changes.
```javascript
const myState = {
gradientColor1: { value: "red", persistent: false, watch: true },
// ... other state variables
};
```
**3. Create a Store:**
Instantiate a `JabroniOutfitStore` object with your state definition.
```javascript
const store = new JabroniOutfitStore(myState);
```
**4. Create UI Controls:**
Define an object mapping state variables to UI control configurations.
```javascript
const uiConfig = {
gradientColor1: [{ type: "text", model: "stateLocale.gradientColor1" }],
// ... other UI controls
};
```
**5. Create the UI:**
Instantiate a `JabroniOutfitUI` object with the store and UI configuration.
```javascript
const ui = new JabroniOutfitUI(store, uiConfig);
```
**6. Subscribe to reactive data:**
Use the `subscribe` method on the store to trigger updates whenever the state changes.
```javascript
store.subscribe(() => {
// ...
});
```
### Example
```javascript
const {
JabroniOutfitStore,
JabroniOutfitUI,
defaultStateWithDurationAndPrivacy,
defaultSchemeWithPrivateFilter
} = window.jabronioutfit;
const myState = {
gradientColor1: { value: "red", persistent: false, watch: true },
gradientColor2: { value: "coral", persistent: false, watch: true },
gradientColor3: { value: "orange", persistent: false, watch: true },
gradientEnabled: { value: true, persistent: false, watch: true },
uiEnabled: { value: true, persistent: true, watch: true }
}
const store = new JabroniOutfitStore(myState);
const ui = new JabroniOutfitUI(store, {
gradientColor1: [{ type: "text", model: "stateLocale.gradientColor1", placeholder: "color", labelBefore: "color1" }],
gradientColor2: [{ type: "text", model: "stateLocale.gradientColor2", placeholder: "color", labelBefore: "color2" }],
gradientColor3: [{ type: "text", model: "stateLocale.gradientColor3", placeholder: "color", labelBefore: "color3" }],
gradientEnabled: [{ type: "checkbox", model: "stateLocale.gradientEnabled", labelBefore: "gradient enabled" }],
});
function drawGradient() {
const { gradientColor1, gradientColor2, gradientColor3, gradientEnabled } = store.stateLocale;
if (!gradientEnabled) { document.body.style.background = 'coral'; return; }
document.body.style.background = `radial-gradient(${gradientColor1}, ${gradientColor2}, ${gradientColor3})`;
}
drawGradient();
store.subscribe(drawGradient);
```