aprog 2.2.3 → 2.2.5

package/README.md

@@ -182,6 +182,7 @@ onInput: (event) => {
 
 - Додано безплатний чат із `Gemini`
 - Додано методи збереження зашифрованих даних `saveItem` та `loadItem`
+- Додвано `Wrapper` та `Toast`
 - З часом будуть додаватися можливості створення додаткових інструментів
 
 

package/index.js

@@ -23,6 +23,8 @@ export {
 } from './src/html.js';
 export { prism } from "./src/prism.js";
 export { uniquePage } from "./src/pages.js";
-export { state, wrap } from "./src/helper.js";
-export { default as StateWrapper } from './src/classes/StateWrapper.js';
+export { state, wrap, toast, abort, useTableDrag } from "./src/helper.js";
+export { default as AbortError } from './src/classes/AbortError.js';
 export { default as SmartWrapper } from './src/classes/SmartWrapper.js';
+export { default as StateWrapper } from './src/classes/StateWrapper.js';
+export { default as Toast } from './src/classes/Toast.js';

package/package.json

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

package/src/classes/AbortError.js

@@ -0,0 +1,11 @@
+class AbortError extends Error {
+    constructor(message, code = "ABORTED") {
+        super(message);
+        this.name = "❌ AbortError";
+        this.code = code;
+
+        console.warn(`[AbortError]: ${message} (код: ${code})`);
+    }
+}
+
+export default AbortError;

package/src/classes/SmartWrapper.js

@@ -1,159 +1,180 @@
 class SmartWrapper {
-    constructor(value) {
-        this._value = value;
+  constructor(value) {
+    this._value = value;
+  }
+
+  /**
+   * Отримати значення по ключу
+   * @param {string|number} key
+   * @param {*} def
+   * @returns {SmartWrapper}
+   */
+  get(key, def = null) {
+    if (this._value === null || this._value === undefined) {
+      return new SmartWrapper(def);
     }
 
-    /**
-     * Отримати значення по ключу
-     * @param {string|number} key
-     * @param {*} def
-     * @returns {SmartWrapper}
-     */
-    get(key, def = null) {
-        if (this._value === null || this._value === undefined) {
-            return new SmartWrapper(def);
-        }
-
-        if (typeof this._value === 'object') {
-            if (Array.isArray(this._value)) {
-                return new SmartWrapper(this._value[key] ?? def);
-            }
-
-            if (Object.prototype.hasOwnProperty.call(this._value, key)) {
-                return new SmartWrapper(this._value[key]);
-            }
-        }
-
-        return new SmartWrapper(def);
-    }
-
-    /**
-     * Отримати вкладене значення за шляхом 'a.b.c'
-     * @param {string} path
-     * @param {*} def
-     * @returns {SmartWrapper}
-     */
-    path(path, def = null) {
-        const keys = path.split('.');
-        let current = new SmartWrapper(this._value);
-        for (const key of keys) {
-            current = current.get(key);
-        }
-        return current.isNull ? new SmartWrapper(def) : current;
-    }
+    if (typeof this._value === 'object') {
+      if (Array.isArray(this._value)) {
+        return new SmartWrapper(this._value[key] ?? def);
+      }
 
-    /**
-     * Перевірити чи існує ключ
-     * @param {string|number} key
-     * @returns {boolean}
-     */
-    has(key) {
-        if (this._value === null || this._value === undefined) return false;
-        if (Array.isArray(this._value)) return key in this._value;
-        if (typeof this._value === 'object') return Object.prototype.hasOwnProperty.call(this._value, key);
-        return false;
+      if (Object.prototype.hasOwnProperty.call(this._value, key)) {
+        const val = this._value[key];
+        return new SmartWrapper(val !== null && val !== undefined ? val : def);
+      }
     }
 
-    /**
-     * Повернути тільки вказані ключі
-     * @param {string[]} keys
-     * @returns {SmartWrapper}
-     */
-    only(keys = []) {
-        if (typeof this._value !== 'object' || this._value === null) {
-            return new SmartWrapper({});
-        }
-
-        const result = {};
-        for (const key of keys) {
-            if (Object.prototype.hasOwnProperty.call(this._value, key)) {
-                result[key] = this._value[key];
-            }
-        }
-
-        return new SmartWrapper(result);
+    return new SmartWrapper(def);
+  }
+
+  /**
+   * Отримати значення по ключу з value
+   * @param {string|number} key
+   * @param {*} def
+   * @returns {*}
+   */
+  getValue(key, def = null) {
+    return this.get(key, def)._value;
+  }
+
+  /**
+   * Отримати вкладене значення за шляхом 'a.b.c' з value
+   * @param {string} path
+   * @param {*} def
+   * @returns {*}
+   */
+  pathValue(path, def = null) {
+    return this.path(path, def)._value;
+  }
+
+  /**
+   * Отримати вкладене значення за шляхом 'a.b.c'
+   * @param {string} path
+   * @param {*} def
+   * @returns {SmartWrapper}
+   */
+  path(path, def = null) {
+    const keys = path.split('.');
+    let current = new SmartWrapper(this._value);
+    for (const key of keys) {
+      current = current.get(key);
     }
-
-    /**
-     * Встановити нове значення по ключу
-     * @param {string|number} key
-     * @param {*} val
-     * @returns {SmartWrapper}
-     */
-    set(key, val) {
-        if (typeof this._value === 'object' && this._value !== null) {
-            return new SmartWrapper({ ...this._value, [key]: val });
-        }
-        return new SmartWrapper({ [key]: val });
+    return current.isNull ? new SmartWrapper(def) : current;
+  }
+
+  /**
+   * Перевірити чи існує ключ
+   * @param {string|number} key
+   * @returns {boolean}
+   */
+  has(key) {
+    if (this._value === null || this._value === undefined) return false;
+    if (Array.isArray(this._value)) return key in this._value;
+    if (typeof this._value === 'object') return Object.prototype.hasOwnProperty.call(this._value, key);
+    return false;
+  }
+
+  /**
+   * Повернути тільки вказані ключі
+   * @param {string[]} keys
+   * @returns {SmartWrapper}
+   */
+  only(keys = []) {
+    if (typeof this._value !== 'object' || this._value === null) {
+      return new SmartWrapper({});
     }
 
-    /**
-     * Пройтись по значеннях як по масиву або об'єкту
-     * @param {function(*, string|number): *} callback
-     * @returns {SmartWrapper}
-     */
-    map(callback) {
-        if (Array.isArray(this._value)) {
-            return new SmartWrapper(this._value.map(callback));
-        }
-
-        if (typeof this._value === 'object' && this._value !== null) {
-            return new SmartWrapper(
-                Object.entries(this._value).map(([key, val]) => callback(val, key))
-            );
-        }
-
-        return new SmartWrapper([]);
+    const result = {};
+    for (const key of keys) {
+      if (Object.prototype.hasOwnProperty.call(this._value, key)) {
+        result[key] = this._value[key];
+      }
     }
 
-    /**
-     * Отримати реальне значення
-     * @returns {*}
-     */
-    get val() {
-        return this._value;
+    return new SmartWrapper(result);
+  }
+
+  /**
+   * Встановити нове значення по ключу
+   * @param {string|number} key
+   * @param {*} val
+   * @returns {SmartWrapper}
+   */
+  set(key, val) {
+    if (typeof this._value === 'object' && this._value !== null) {
+      return new SmartWrapper({...this._value, [key]: val});
     }
-
-    /**
-     * Чи є значення null або undefined
-     * @returns {boolean}
-     */
-    get isNull() {
-        return this._value === null || this._value === undefined;
-    }
-
-    /**
-     * Привести до масиву (рекурсивно)
-     * @returns {Array}
-     */
-    get toArray() {
-        if (Array.isArray(this._value)) return this._value;
-        if (typeof this._value === 'object' && this._value !== null) return Object.values(this._value);
-        return [];
+    return new SmartWrapper({[key]: val});
+  }
+
+  /**
+   * Пройтись по значеннях як по масиву або об'єкту
+   * @param {function(*, string|number): *} callback
+   * @returns {SmartWrapper}
+   */
+  map(callback) {
+    if (Array.isArray(this._value)) {
+      return new SmartWrapper(this._value.map(callback));
     }
 
-    /**
-     * Привести до об'єкта (рекурсивно)
-     * @returns {Object}
-     */
-    get toObject() {
-        if (typeof this._value === 'object' && this._value !== null) return this._value;
-        return {};
+    if (typeof this._value === 'object' && this._value !== null) {
+      return new SmartWrapper(
+        Object.entries(this._value).map(([key, val]) => callback(val, key))
+      );
     }
 
-    /**
-     * Привести до рядка
-     * @returns {string}
-     */
-    get toString() {
-        if (typeof this._value === 'string') return this._value;
-        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 '';
+    return new SmartWrapper([]);
+  }
+
+  /**
+   * Отримати реальне значення
+   * @returns {*}
+   */
+  get val() {
+    return this._value;
+  }
+
+  /**
+   * Чи є значення null або undefined
+   * @returns {boolean}
+   */
+  get isNull() {
+    return this._value === null || this._value === undefined;
+  }
+
+  /**
+   * Привести до масиву (рекурсивно)
+   * @returns {Array}
+   */
+  get toArray() {
+    if (Array.isArray(this._value)) return this._value;
+    if (typeof this._value === 'object' && this._value !== null) return Object.values(this._value);
+    return [];
+  }
+
+  /**
+   * Привести до об'єкта (рекурсивно)
+   * @returns {Object}
+   */
+  get toObject() {
+    if (typeof this._value === 'object' && this._value !== null) return this._value;
+    return {};
+  }
+
+  /**
+   * Привести до рядка
+   * @returns {string}
+   */
+  get toString() {
+    if (typeof this._value === 'string') return this._value;
+    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 '';
+  }
 }
 
 export default SmartWrapper;

package/src/classes/StateWrapper.js

@@ -1,57 +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;
-    }
+  #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/classes/Toast.js

@@ -0,0 +1,158 @@
+import {div, span} from "../general.js";
+
+class Toast {
+  constructor({
+    position = "top-right", // top-left | top-right | bottom-left | bottom-right
+    gap = "10px",
+    offset = "20px",
+    zIndex = 2147483647
+  } = {}) {
+    this.position = position;
+    this.gap = gap;
+    this.zIndex = zIndex;
+    this.offset = offset;
+    this.container = this.#getOrCreateContainer();
+  }
+
+  #icons = {
+    info: `
+      <svg style="flex: 0 0 auto" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 17V11" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>
+        <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#ffffff"></circle>
+        <path d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke="#ffffff" stroke-width="2"></path>
+      </svg>
+    `,
+
+    success: `
+      <svg style="flex: 0 0 auto" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9.78133 3.89027C10.3452 3.40974 10.6271 3.16948 10.9219 3.02859C11.6037 2.70271 12.3963 2.70271 13.0781 3.02859C13.3729 3.16948 13.6548 3.40974 14.2187 3.89027C14.4431 4.08152 14.5553 4.17715 14.6752 4.25747C14.9499 4.4416 15.2584 4.56939 15.5828 4.63344C15.7244 4.66139 15.8713 4.67312 16.1653 4.69657C16.9038 4.7555 17.273 4.78497 17.5811 4.89378C18.2936 5.14546 18.8541 5.70591 19.1058 6.41844C19.2146 6.72651 19.244 7.09576 19.303 7.83426C19.3264 8.12819 19.3381 8.27515 19.3661 8.41669C19.4301 8.74114 19.5579 9.04965 19.7421 9.32437C19.8224 9.44421 19.918 9.55642 20.1093 9.78084C20.5898 10.3447 20.8301 10.6267 20.971 10.9214C21.2968 11.6032 21.2968 12.3958 20.971 13.0776C20.8301 13.3724 20.5898 13.6543 20.1093 14.2182C19.918 14.4426 19.8224 14.5548 19.7421 14.6747C19.5579 14.9494 19.4301 15.2579 19.3661 15.5824C19.3381 15.7239 19.3264 15.8709 19.303 16.1648C19.244 16.9033 19.2146 17.2725 19.1058 17.5806C18.8541 18.2931 18.2936 18.8536 17.5811 19.1053C17.273 19.2141 16.9038 19.2435 16.1653 19.3025C15.8713 19.3259 15.7244 19.3377 15.5828 19.3656C15.2584 19.4297 14.9499 19.5574 14.6752 19.7416C14.5553 19.8219 14.4431 19.9175 14.2187 20.1088C13.6548 20.5893 13.3729 20.8296 13.0781 20.9705C12.3963 21.2963 11.6037 21.2963 10.9219 20.9705C10.6271 20.8296 10.3452 20.5893 9.78133 20.1088C9.55691 19.9175 9.44469 19.8219 9.32485 19.7416C9.05014 19.5574 8.74163 19.4297 8.41718 19.3656C8.27564 19.3377 8.12868 19.3259 7.83475 19.3025C7.09625 19.2435 6.72699 19.2141 6.41893 19.1053C5.7064 18.8536 5.14594 18.2931 4.89427 17.5806C4.78546 17.2725 4.75599 16.9033 4.69706 16.1648C4.6736 15.8709 4.66188 15.7239 4.63393 15.5824C4.56988 15.2579 4.44209 14.9494 4.25796 14.6747C4.17764 14.5548 4.08201 14.4426 3.89076 14.2182C3.41023 13.6543 3.16997 13.3724 3.02907 13.0776C2.7032 12.3958 2.7032 11.6032 3.02907 10.9214C3.16997 10.6266 3.41023 10.3447 3.89076 9.78084C4.08201 9.55642 4.17764 9.44421 4.25796 9.32437C4.44209 9.04965 4.56988 8.74114 4.63393 8.41669C4.66188 8.27515 4.6736 8.12819 4.69706 7.83426C4.75599 7.09576 4.78546 6.72651 4.89427 6.41844C5.14594 5.70591 5.7064 5.14546 6.41893 4.89378C6.72699 4.78497 7.09625 4.7555 7.83475 4.69657C8.12868 4.67312 8.27564 4.66139 8.41718 4.63344C8.74163 4.56939 9.05014 4.4416 9.32485 4.25747C9.4447 4.17715 9.55691 4.08152 9.78133 3.89027Z" stroke="#ffffff" stroke-width="2"></path>
+        <path d="M8.5 12.5L10.5 14.5L15.5 9.5" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+      </svg>
+    `,
+
+    warning: `
+      <svg style="flex: 0 0 auto" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M3 10.4167C3 7.21907 3 5.62028 3.37752 5.08241C3.75503 4.54454 5.25832 4.02996 8.26491 3.00079L8.83772 2.80472C10.405 2.26824 11.1886 2 12 2C12.8114 2 13.595 2.26824 15.1623 2.80472L15.7351 3.00079C18.7417 4.02996 20.245 4.54454 20.6225 5.08241C21 5.62028 21 7.21907 21 10.4167C21 10.8996 21 11.4234 21 11.9914C21 17.6294 16.761 20.3655 14.1014 21.5273C13.38 21.8424 13.0193 22 12 22C10.9807 22 10.62 21.8424 9.89856 21.5273C7.23896 20.3655 3 17.6294 3 11.9914C3 11.4234 3 10.8996 3 10.4167Z" stroke="#ffffff" stroke-width="2"></path>
+        <path d="M12 8V12" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>
+        <circle cx="12" cy="15" r="1" fill="#ffffff"></circle>
+      </svg>
+    `,
+
+    error: `
+      <svg style="flex: 0 0 auto" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier">
+        <circle cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="2"></circle>
+        <path d="M14.5 9.50002L9.5 14.5M9.49998 9.5L14.5 14.5" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>
+      </svg>
+    `
+  };
+
+  #defaults = {
+    success: "#28a745",
+    error: "#dc3545",
+    warning: "#ffc107",
+    info: "#007bff"
+  };
+
+  #getOrCreateContainer() {
+    const existing = document.querySelector(`[data-toast-position="${this.position}"]`);
+    if (existing) return existing;
+
+    const container = div({
+      "data-toast-position": this.position,
+      style: this.#positionStyles(),
+    });
+    document.body.appendChild(container);
+    return container;
+  }
+
+  #positionStyles() {
+    const base = {
+      position: "fixed",
+      display: "flex",
+      flexDirection: "column",
+      gap: this.gap,
+      zIndex: this.zIndex,
+    };
+    const pos = this.position.split("-");
+    const style = {...base, alignItems: pos[1] === "left" ? "flex-start" : "flex-end"};
+    style[pos[0]] = this.offset;
+    style[pos[1]] = this.offset;
+    return style;
+  }
+
+  show(message, {
+    type = "info", // success | info | warning | error
+    duration = 3000,
+    relay = 0,
+    fontSize = "14px",
+    color = "#fff",
+    background = null,
+    borderRadius = "0.5rem",
+    shadow = "0 3px 8px rgba(0,0,0,0.3)"
+  } = {}) {
+    const bg = background ?? this.#defaults[type] ?? "#007bff";
+
+    const toast = div({
+      style: {
+        minWidth: "180px",
+        maxWidth: "300px",
+        padding: "8px 12px",
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        fontSize,
+        color,
+        background: bg,
+        borderRadius,
+        boxShadow: shadow,
+        opacity: "0",
+        transform: "translateY(-10px)",
+        transition: "all 0.4s ease",
+        cursor: "pointer"
+      },
+      value: [
+        this.#icons[type] || this.#icons.info,
+        span({style: {whiteSpace: "normal"}, value: message})
+      ]
+    });
+
+    setTimeout(() => this.container.appendChild(toast), relay);
+
+    // Анімація появи
+    requestAnimationFrame(() => {
+      toast.style.opacity = "1";
+      toast.style.transform = "translateY(0)";
+    });
+
+    toast.addEventListener("click", () => this.#remove(toast));
+    setTimeout(() => this.#remove(toast), duration);
+  }
+
+  success(msg, opt = {}) {
+    this.show(msg, {...opt, type: "success"});
+  }
+
+  info(msg, opt = {}) {
+    this.show(msg, {...opt, type: "info"});
+  }
+
+  warning(msg, opt = {}) {
+    this.show(msg, {...opt, type: "warning"});
+  }
+
+  error(msg, opt = {}) {
+    this.show(msg, {...opt, type: "error"});
+  }
+
+  #remove(toast) {
+    toast.style.opacity = "0";
+    toast.style.transform = "translateY(-20px)";
+    setTimeout(() => toast.remove(), 300);
+  }
+
+  clear() {
+    this.container.innerHTML = "";
+  }
+}
+
+export default Toast;