jabroni-outfit 1.6.4 → 2.0.7

package/README.md

@@ -1,131 +1,91 @@
-<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>
+<h1 align="center">Jabroni Outfit GUI</h1>
+<h3 align="center">Small GUI and Persistent State library based on Vue</h1>
+<p align="center"><a href="https://smartacephale.github.io/Jabroni-Outfit-GUI/">https://smartacephale.github.io/Jabroni-Outfit-GUI/</a></p> 
 <p align="center">
-  <img src="https://i.imgur.com/hCyUJvd.png" alt="Sublime's custom image"/>
+  <img src="https://repository-images.githubusercontent.com/842958864/1e2ce513-9289-4e51-b68b-0e7f3de255d0" 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.
+### Features
+- Store vaiables are persistent by default.
+- Store variable with <$> prefix are not persistent.
 
 ### Usage
 
-**1. Import the Library:**
+**Import the Library:**
 
 ```javascript
-import { JabroniOutfitStore, JabroniOutfitUI } from 'jabroni-outfit';
+import { JabronioStore, JabronioGUI } 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(() => {
-  // ...
-});
+const { JabronioStore, JabronioGUI } = window.jabronioutfit;
 ```
 
 ### Example
 
 ```javascript
+const { JabronioStore, JabronioGUI } = window.jabronioutfit;
+
+const example = () => {
+  const customState = {
+    myFancyVariable: true,
+  };
+  const store = new JabronioStore(customState);
+
+  const scheme = [
+    {
+      title: 'Colors',
+      collapsed: true,
+      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';
+          },
+        },
+      ],
+    },
+  ];
+
+  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}%)`;
+  }
 
-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);
+  drawGradient();
 
-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" }],
+  store.subscribe(() => {
+    drawGradient();
+  });
 };
 
-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();
-});
+example();
 ```

package/dist/index.d.ts

@@ -1,81 +1,167 @@
 import { createApp } from 'vue';
 import { Reactive } from 'vue';
 
-export declare const DefaultScheme: Scheme;
-
-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 defaultStateWithDurationAndPrivacyAndHD: StateOptions;
-
-export declare const extendScheme: (scheme: Scheme, newScheme: Scheme) => {};
-
-export declare class JabroniOutfitStore {
-    private callbacks;
-    state: Reactive<RecordV> | undefined;
-    localState: Reactive<RecordV> | undefined;
-    constructor(options?: StateOptions);
-    subscribe(callback: NotifyApply): void;
-    notify(subject: RecordV): void;
-    parseState: (st: StateOptions) => void;
-}
-
-export declare class JabroniOutfitUI {
+declare type Callback<T> = (...args: T[]) => void;
+
+declare const DefaultScheme: [{
+    readonly title: "Text Filter";
+    readonly collapsed: true;
+    readonly content: [{
+        readonly filterExclude: false;
+        readonly label: "exclude";
+    }, {
+        readonly filterExcludeWords: "";
+        readonly label: "keywords";
+        readonly watch: "filterExclude";
+        readonly placeholder: "word, word1|word2, f:full_word...";
+    }, {
+        readonly filterInclude: false;
+        readonly label: "include";
+    }, {
+        readonly filterIncludeWords: "";
+        readonly label: "keywords";
+        readonly watch: "filterInclude";
+        readonly placeholder: "word, word1|word2, f:full_word...";
+    }];
+}, {
+    readonly title: "Duration Filter";
+    readonly collapsed: true;
+    readonly content: [{
+        readonly filterDuration: false;
+        readonly label: "enable";
+    }, {
+        readonly filterDurationMinutes: true;
+        readonly label: "minutes (seconds by default)";
+    }, {
+        readonly filterDurationFrom: 0;
+        readonly watch: "filterDuration";
+        readonly label: "from";
+    }, {
+        readonly filterDurationTo: 600;
+        readonly watch: "filterDuration";
+        readonly label: "to";
+    }];
+}, {
+    readonly title: "Sort By";
+    readonly content: [{
+        readonly views: () => void;
+    }, {
+        readonly duration: () => void;
+    }];
+}, {
+    readonly title: "Privacy Filter";
+    readonly content: [{
+        readonly filterPrivate: false;
+        readonly label: "private";
+    }, {
+        readonly filterPublic: false;
+        readonly label: "public";
+    }, {
+        readonly 'check access \uD83D\uDD13': () => void;
+    }];
+}, {
+    readonly title: "Quality Filter";
+    readonly content: [{
+        readonly filterHD: false;
+        readonly label: "HD";
+    }];
+}, {
+    readonly title: "Advanced";
+    readonly content: [{
+        readonly infiniteScrollEnabled: true;
+        readonly label: "infinite scroll";
+    }, {
+        readonly autoRequestAccess: false;
+        readonly label: "auto friend request";
+    }, {
+        readonly writeHistory: false;
+    }];
+}, {
+    readonly title: "Badge";
+    readonly content: [{
+        readonly text: "return `${state.$paginationOffset}/${state.$paginationLast}`";
+        readonly vif: "return state.$paginationLast > 1";
+    }];
+}];
+
+declare type ExtractValuesByKey<T extends readonly any[], K extends string> = Extract<T[number], {
+    [P in K]: any;
+}>[K];
+
+declare type HTMLInputType = 'checkbox' | 'text' | 'number' | 'range' | '';
+
+declare type HTMLTag = keyof HTMLElementTagNameMap;
+
+declare type HTMLTagOrInputType = keyof HTMLElementTagNameMap | HTMLInputType;
+
+export declare class JabronioGUI {
     app: ReturnType<typeof createApp>;
     private getRoot;
-    constructor({ state, localState }: JabroniOutfitStore, scheme?: Scheme, rootSelector?: string, position?: UIPosition);
+    constructor(scheme: SchemeInput, store: JabronioStore, rootSelector?: string, position?: string);
 }
 
-declare type NotifyApply = (input: RecordV) => void;
+export declare class JabronioStore {
+    private callbacks;
+    state: StoreState;
+    constructor(options?: StoreStateOptions);
+    subscribe(callback: Callback<StoreStateRaw>): void;
+    notify(subject: StoreStateRaw): void;
+    add(key: string, value: Primitive, watchKey?: string, safe?: boolean): this;
+    parseState(options: StoreStateOptions): void;
+}
 
-declare type RecordV = Record<string, string | number | boolean>;
+declare type Primitive = string | number | boolean;
 
-declare interface Scheme {
-    [key: string]: SchemeRow;
-}
+declare type RawSchemeElement = Partial<Exclude<_RawSchemeElement, keyof SchemeGroup<_RawSchemeElement>>>;
 
-declare type SchemeRow = SchemeRowEl[];
+declare type _RawSchemeElement = Partial<SchemeElement> & {
+    [x: string]: Primitive | (() => void);
+};
 
-declare interface SchemeRowEl {
-    type: 'checkbox' | 'text' | 'number' | 'span' | 'button';
-    model?: string;
-    label?: string;
-    labelBefore?: string;
-    innerText?: string;
-    max?: string;
-    min?: string;
+declare class SchemeElement {
+    name?: string;
+    value?: Primitive | (() => void);
+    watch?: string;
     step?: string;
-    "v-if"?: string;
+    min?: string;
+    max?: string;
+    vif?: string;
+    text?: string;
+    type: HTMLTagOrInputType;
+    label?: string;
     placeholder?: string;
-    callback?: () => void;
+    id: string;
+    constructor(schemeElement: RawSchemeElement);
+    private parseType;
+    private parseNumber;
+    private parseLabel;
+    private parseModel;
+    get isInput(): boolean;
+    get htmlTag(): HTMLTag;
+    get inputType(): HTMLInputType;
+    get callback(): (() => void) | undefined;
 }
 
-declare interface StateOption {
-    value: string | number | boolean;
-    persistent: boolean;
-    watch: boolean | string;
-    type: string;
-}
+declare type SchemeGroup<T> = {
+    title: string;
+    content: T[];
+    collapsed: boolean;
+    id: string;
+};
 
-declare type StateOptions = Record<string, StateOption>;
+export declare type SchemeInput = Partial<SchemeSection<RawSchemeElement>>[];
 
-declare interface UIPosition {
-    fixed: boolean;
-    left?: boolean;
-    right?: boolean;
-    top?: boolean;
-    bottom?: boolean;
-}
+declare type SchemeSection<T> = T | SchemeGroup<T>;
+
+export declare function setupScheme<K extends ExtractValuesByKey<typeof DefaultScheme, 'title'>, T extends SchemeInput, TK extends ExtractValuesByKey<T, 'title'>>(selectFromDefaults: K[], customScheme?: T, order?: (K | TK)[]): SchemeInput;
+
+declare type StoreState = Reactive<StoreStateRaw>;
+
+declare type StoreStateOptions = Record<string, {
+    watch?: string;
+    value: Primitive;
+} | Primitive>;
+
+declare type StoreStateRaw = Record<string, Primitive>;
 
 export { }