jabroni-outfit 1.4.9 → 1.6.5

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 smartacephale
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 smartacephale
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,126 +1,131 @@
-<h1 align="center">Jabroni Outfit</h1>
-<h3 align="center">out-of-the-box gui and persistent-state library</h3>
-<p align="center"><a href="https://smartacephale.github.io/jabroni-outfit/">https://smartacephale.github.io/jabroni-outfit/</a></p>
-<p align="center">
-  <img src="https://i.imgur.com/hCyUJvd.png" alt="Sublime's custom image"/>
-</p>
-
-### 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
-<script src="https://unpkg.com/jabroni-outfit@latest/dist/jabroni-outfit.umd.js"></script>
-...
-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);
-```
+<h1 align="center">Jabroni Outfit</h1>
+<h3 align="center">out-of-the-box gui and persistent-state library</h3>
+<p align="center"><a href="https://smartacephale.github.io/jabroni-outfit/">https://smartacephale.github.io/jabroni-outfit/</a></p>
+<p align="center">
+  <img src="https://i.imgur.com/hCyUJvd.png" alt="Sublime's custom image"/>
+</p>
+
+### 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
+<script src="https://unpkg.com/jabroni-outfit@latest/dist/jabroni-outfit.umd.js"></script>
+...
+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: "localState.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
+} = window.jabronioutfit;
+
+const customState = {
+  gradientColor1: { value: "red", persistent: false, watch: true, type: "string" },
+  gradientColor2: { value: "coral", persistent: false, watch: true, type: "string" },
+  gradientColor3: { value: "orange", persistent: false, watch: true, type: "string" },
+  gradientEnabled: { value: true, persistent: false, watch: true, type: "boolean" },
+  uiEnabled: { value: true, persistent: true, watch: true, type: "boolean" }
+}
+
+const store = new JabroniOutfitStore(customState);
+
+const customScheme = {
+  gradientColor1: [{ type: "text", model: "localState.gradientColor1", placeholder: "color", labelBefore: "color1" }],
+  gradientColor2: [{ type: "text", model: "localState.gradientColor2", placeholder: "color", labelBefore: "color2" }],
+  gradientColor3: [{ type: "text", model: "localState.gradientColor3", placeholder: "color", labelBefore: "color3" }],
+  gradientEnabled: [{ type: "checkbox", model: "localState.gradientEnabled", labelBefore: "gradient enabled" }],
+};
+
+new JabroniOutfitUI(store, customScheme, '#lol');
+
+function drawGradient() {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  const { gradientColor1, gradientColor2, gradientColor3, gradientEnabled } = store.localState;
+  if (!gradientEnabled) { document.body.style.background = 'blue'; return; }
+  document.body.style.background = `radial-gradient(${gradientColor1}, ${gradientColor2}, ${gradientColor3})`;
+}
+
+drawGradient();
+
+store.subscribe(() => {
+  drawGradient();
+});
+```

package/dist/index.d.ts

@@ -1,21 +1,30 @@
+import { createApp } from 'vue';
 import { Reactive } from 'vue';
 
 export declare const DefaultScheme: Scheme;
 
-export declare const defaultSchemeWithPrivateFilter: {};
+export declare const defaultSchemeWithPrivacyFilter: {};
+
+export declare const defaultSchemeWithPrivacyFilterWithHD: {};
+
+export declare const defaultSchemeWithPrivacyFilterWithHDwithSort: {};
 
 export declare const defaultStateInclExclMiscPagination: StateOptions;
 
 export declare const defaultStateWithDuration: StateOptions;
 
+export declare const defaultStateWithDurationAndHD: StateOptions;
+
 export declare const defaultStateWithDurationAndPrivacy: StateOptions;
 
-export declare const extendDefaultScheme: (newScheme: Scheme) => {};
+export declare const defaultStateWithDurationAndPrivacyAndHD: StateOptions;
+
+export declare const extendScheme: (scheme: Scheme, newScheme: Scheme) => {};
 
 export declare class JabroniOutfitStore {
     private callbacks;
     state: Reactive<RecordV> | undefined;
-    stateLocale: Reactive<RecordV> | undefined;
+    localState: Reactive<RecordV> | undefined;
     constructor(options?: StateOptions);
     subscribe(callback: NotifyApply): void;
     notify(subject: RecordV): void;
@@ -23,8 +32,9 @@ export declare class JabroniOutfitStore {
 }
 
 export declare class JabroniOutfitUI {
+    app: ReturnType<typeof createApp>;
     private getRoot;
-    constructor({ state, stateLocale }: JabroniOutfitStore, scheme?: Scheme, rootSelector?: string, position?: UIPosition);
+    constructor({ state, localState }: JabroniOutfitStore, scheme?: Scheme, rootSelector?: string, position?: UIPosition);
 }
 
 declare type NotifyApply = (input: RecordV) => void;