aprog 2.2.0 → 2.2.2

package/index.js

@@ -22,5 +22,6 @@ export {
 } from './src/html.js';
 export { prism } from "./src/prism.js";
 export { uniquePage } from "./src/pages.js";
-export { default as AprogClass } from './src/classes/AprogClass.js';
+export { state, wrap } from "./src/helper.js";
+export { default as StateWrapper } from './src/classes/StateWrapper.js';
 export { default as SmartWrapper } from './src/classes/SmartWrapper.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aprog",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "Допоміжна JavaScript-бібліотека для проєктів",
   "main": "index.js",
   "exports": {

package/src/classes/SmartWrapper.js

@@ -150,6 +150,8 @@ class SmartWrapper {
         if (typeof this._value === 'number' || typeof this._value === 'boolean') {
             return String(this._value);
         }
+        if (Array.isArray(this._value)) return JSON.stringify(this._value);
+        if (typeof this._value === 'object' && this._value !== null) return JSON.stringify(Object.values(this._value));
         return '';
     }
 }

package/src/classes/StateWrapper.js

@@ -0,0 +1,57 @@
+class StateWrapper {
+    #value;
+
+    constructor(initialValue) {
+        this.#value = initialValue;
+
+        const handler = {
+            get: (target, prop, receiver) => {
+                if (prop === 'val') return target.#value;
+
+                if (prop === 'set') {
+                    return (newValue) => {
+                        target.#value = typeof newValue === 'function' ? newValue(target.#value) : newValue;
+                    };
+                }
+
+                if (prop === 'merge') {
+                    return (patch) => {
+                        if (typeof target.#value === 'object' && target.#value !== null) {
+                            target.#value = { ...target.#value, ...patch };
+                        }
+                    };
+                }
+
+                if (prop === 'toJSON') return () => target.#value;
+                if (prop === 'toString') return () => String(target.#value);
+                if (prop === 'valueOf') return () => target.#value;
+
+                if (
+                    typeof target.#value === 'object' &&
+                    target.#value !== null &&
+                    prop in target.#value
+                ) {
+                    return target.#value[prop];
+                }
+
+                return Reflect.get(target, prop, receiver);
+            },
+
+            set: (target, prop, newVal) => {
+                if (typeof target.#value === 'object' && target.#value !== null) {
+                    target.#value[prop] = newVal;
+                    return true;
+                }
+                return false;
+            },
+        };
+
+        return new Proxy(this, handler);
+    }
+
+    valueOf() {
+        return this.#value;
+    }
+}
+
+export default StateWrapper;

package/src/constructs/ButtonConstructor.js

@@ -28,7 +28,7 @@ export const ButtonConstructor = {
     } = {}) {
         return this.is = button({
             id: id || GUID(),
-            class: `${this.class} btn ${className} disabled`,
+            class: `${this.class} btn ${className} disabled`.trim(),
             style: style,
             ...(type && {type: type}),
             value: text,

package/src/constructs/InputConstructor.js

@@ -31,7 +31,7 @@ export const InputConstructor = {
     } = {}) {
         return this.is = input({
             id: id || GUID(),
-            class: `${this.class} input ${className}`,
+            class: `${this.class} input ${className}`.trim(),
             style: style,
             ...(type && {type: type}),
             focus: focus,

package/src/constructs/SelectConstructor.js

@@ -0,0 +1,45 @@
+import {GUID, select} from "aprog";
+
+/**
+ * AprogJS Constructor
+ * --- SelectConstructor ---
+ * Copyright (c) 2025 AlexProger.
+ */
+export const SelectConstructor = {
+    /**
+     * create HTMLElement
+     */
+    constructor() {
+        const instance = Object.create(this);
+        instance.class = GUID();
+        return instance;
+    },
+
+    /**
+     * set HTMLElement
+     */
+    element({
+        id = undefined,
+        className = "",
+        style = {},
+        option = undefined,
+        options = undefined,
+        callback = () => {},
+    } = {}) {
+        return this.is = select({
+            id: id || GUID(),
+            class: `${this.class} input ${className}`.trim(),
+            style: style,
+            ...(option && {option: option}),
+            ...(options && {options: options}),
+            onChange: callback,
+        });
+    },
+
+    /**
+     * get target [HTMLElement]
+     */
+    get target() {
+        return this?.is;
+    }
+};

package/src/helper.js

@@ -0,0 +1,6 @@
+import StateWrapper from "./classes/StateWrapper.js";
+import SmartWrapper from "./classes/SmartWrapper.js";
+
+export const state = (value) => new StateWrapper(value);
+
+export const wrap = (value) => new SmartWrapper(value);

package/src/classes/AprogClass.js

@@ -1,23 +0,0 @@
-class AprogClass {
-    #states = [];
-    #cursor = 0;
-
-    useState(initialValue) {
-        const index = this.#cursor;
-
-        if (this.#states[index] === undefined) {
-            this.#states[index] = initialValue;
-        }
-
-        const setState = (newValue) => {
-            const current = this.#states[index];
-            this.#states[index] = typeof newValue === "function" ? newValue(current) : newValue;
-        };
-
-        const value = this.#states[index];
-        this.#cursor++;
-        return [value, setState];
-    }
-}
-
-export default AprogClass;