aprog 2.3.31 → 2.3.40

package/index.js

@@ -1,7 +1,5 @@
 export {
-    div, span, button, a, img, meta, label, input, select, option, options, form, hr, textarea,
-    table, caption, thead, tbody, tr, th, td, pre,
-    attachCustomTitle, _get, _getAll, GUID, isEmpty, apState, date, pause, apFetch, parseCustomMarkup,
+    options, attachCustomTitle, _get, _getAll, GUID, isEmpty, apState, date, pause, apFetch, parseCustomMarkup,
     chars, isNull, isFloat, isNumeric, isObject, elementToObject, copyText, scrollToTop, scrollToBottom,
     firstKey, isArray, checkArrays, isNumber, isString, isPromise, ucfirst, deepEqual, nodeListToObject
 } from './src/general.js';
@@ -21,13 +19,24 @@ export {
     toSnakeCaseStringPrototype, repeatHTMLElementPrototype,
     replaceChildrenHTMLElementPrototype
 } from './src/html.js';
-export { prism } from "./src/prism.js";
-export { uniquePage } from "./src/pages.js";
-export { state, wrap, toast, abort, useTableDrag, callback } from "./src/helper.js";
-export { loadTranslations, translate } from "./src/translator.js";
-export { svg } from "./src/svg.js";
-export { Modal, modal, closeAllModals, closeThisModal } from "./src/modal.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';
+export {prism} from "./src/prism.js";
+export {uniquePage} from "./src/pages.js";
+export {state, wrap, toast, abort, useTableDrag, callback, json} from "./src/helper.js";
+export {initAprog} from './src/config.js';
+export {loadTranslations, translate} from "./src/translator.js";
+export {svg} from "./src/svg.js";
+export {Modal, modal, closeAllModals, closeThisModal} from "./src/modal.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';
+export {ButtonConstructor} from './src/constructs/ButtonConstructor.js';
+export {InputConstructor} from './src/constructs/InputConstructor.js';
+export {SelectConstructor} from './src/constructs/SelectConstructor.js';
+export {
+    div, span, a, button, img, input, select, option,
+    label, ul, li, hr, section, header, footer, textarea,
+    form, table, thead, tbody, tr, th, td, caption,
+    head, meta, body, pre, h1, h2, h3, h4, h5,
+    style, script, element
+} from "./src/elements.js";

package/package.json

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

package/src/config.js

@@ -0,0 +1,9 @@
+const config = {
+    langLoader: null,
+};
+
+export const initAprog = (options = {}) => {
+    Object.assign(config, options);
+};
+
+export const getAprogConfig = () => config;

package/src/constructs/ButtonConstructor.js

@@ -1,5 +1,4 @@
 import {button, GUID} from "aprog";
-import "aprog/css/styles";
 
 /**
  * AprogJS Constructor

package/src/constructs/InputConstructor.js

@@ -1,5 +1,4 @@
 import {GUID, input} from "aprog";
-import "aprog/css/styles";
 
 /**
  * AprogJS Constructor

package/src/constructs/SelectConstructor.js

@@ -1,5 +1,4 @@
 import {GUID, select} from "aprog";
-import "aprog/css/styles";
 
 /**
  * AprogJS Constructor

package/src/elements.js

@@ -0,0 +1,215 @@
+const appendValue = (element, value) => {
+    if (value === null || value === undefined || value === false) {
+        return;
+    }
+
+    if (Array.isArray(value)) {
+        value.forEach(item => appendValue(element, item));
+        return;
+    }
+
+    if (value instanceof Node) {
+        element.append(value);
+        return;
+    }
+
+    element.insertAdjacentHTML("beforeend", String(value));
+};
+
+const setStyle = (element, styles) => {
+    if (typeof styles === "string") {
+        element.style.cssText = styles;
+        return;
+    }
+
+    Object.assign(element.style, styles);
+};
+
+const setDataset = (element, dataset) => {
+    Object.entries(dataset).forEach(([key, value]) => {
+        element.dataset[key] = String(value);
+    });
+};
+
+const setAttributes = (element, attributes = {}) => {
+    Object.entries(attributes).forEach(([name, value]) => {
+        if (value === null || value === undefined || value === false) {
+            return;
+        }
+
+        // content
+        if (name === "value" && !["INPUT", "TEXTAREA", "SELECT", "OPTION"].includes(element.tagName)) {
+            appendValue(element, value);
+            return;
+        }
+
+        // children
+        if (name === "children") {
+            appendValue(element, value);
+            return;
+        }
+
+        // text
+        if (name === "text" || name === "textContent") {
+            element.textContent = String(value);
+            return;
+        }
+
+        // html
+        if (name === "html" || name === "innerHTML") {
+            element.innerHTML = String(value);
+            return;
+        }
+
+        // class
+        if (name === "class" || name === "className") {
+            if (Array.isArray(value)) {
+                element.className = value.filter(Boolean).join(" ");
+            } else {
+                element.className = String(value);
+            }
+
+            return;
+        }
+
+        // style
+        if (name === "style") {
+            setStyle(element, value);
+            return;
+        }
+
+        // dataset
+        if (name === "dataset") {
+            setDataset(element, value);
+            return;
+        }
+
+        // events
+        if (name.startsWith("on") && typeof value === "function") {
+            element.addEventListener(name.slice(2).toLowerCase(), value);
+
+            return;
+        }
+
+        // focus
+        if (name === "focus" && value) {
+            queueMicrotask(() => element.focus());
+            return;
+        }
+
+        // DOM properties
+        if (name in element) {
+            try {
+                element[name] = value;
+                return;
+            } catch (_) {
+                // fallback → setAttribute
+            }
+        }
+
+        // dataSomething → data-something
+        if (name.startsWith("data") && name.length > 4) {
+            const attribute = name
+                .replace(/([A-Z])/g, "-$1")
+                .toLowerCase();
+
+            element.setAttribute(attribute, String(value));
+            return;
+        }
+
+        // ariaSomething → aria-something
+        if (name.startsWith("aria") && name.length > 4) {
+            const attribute = name
+                .replace(/([A-Z])/g, "-$1")
+                .toLowerCase();
+
+            element.setAttribute(attribute, String(value));
+            return;
+        }
+
+        // boolean attribute
+        if (value === true) {
+            element.setAttribute(name, "");
+            return;
+        }
+
+        // everything else
+        element.setAttribute(name, String(value));
+    });
+
+    return element;
+};
+
+export const element = (tag = "div", attributes = {}) => {
+    return setAttributes(document.createElement(tag), attributes);
+};
+
+export const div = (attributes = {}) => element("div", attributes);
+
+export const span = (attributes = {}) => element("span", attributes);
+
+export const a = (attributes = {}) => element("a", attributes);
+
+export const button = (attributes = {}) => element("button", attributes);
+
+export const input = (attributes = {}) => element("input", attributes);
+
+export const label = (attributes = {}) => element("label", attributes);
+
+export const form = (attributes = {}) => element("form", attributes);
+
+export const textarea = (attributes = {}) => element("textarea", attributes);
+
+export const pre = (attributes = {}) => element("pre", attributes);
+
+export const select = (attributes = {}) => element("select", attributes);
+
+export const option = (attributes = {}) => element("option", attributes);
+
+export const img = (attributes = {}) => element("img", attributes);
+
+export const table = (attributes = {}) => element("table", attributes);
+
+export const caption = (attributes = {}) => element("caption", attributes);
+
+export const thead = (attributes = {}) => element("thead", attributes);
+
+export const tbody = (attributes = {}) => element("tbody", attributes);
+
+export const tr = (attributes = {}) => element("tr", attributes);
+
+export const th = (attributes = {}) => element("th", attributes);
+
+export const td = (attributes = {}) => element("td", attributes);
+
+export const h1 = (attributes = {}) => element("h1", attributes);
+
+export const h2 = (attributes = {}) => element("h2", attributes);
+
+export const h3 = (attributes = {}) => element("h3", attributes);
+
+export const h4 = (attributes = {}) => element("h4", attributes);
+
+export const h5 = (attributes = {}) => element("h5", attributes);
+
+export const section = (attributes = {}) => element("section", attributes);
+
+export const header = (attributes = {}) => element("header", attributes);
+
+export const footer = (attributes = {}) => element("footer", attributes);
+
+export const ul = (attributes = {}) => element("ul", attributes);
+
+export const li = (attributes = {}) => element("li", attributes);
+
+export const hr = (attributes = {}) => element("hr", attributes);
+
+export const head = (attributes = {}) => element("head", attributes);
+
+export const body = (attributes = {}) => element("body", attributes);
+
+export const meta = (attributes = {}) => element("meta", attributes);
+
+export const style = (attributes = {}) => element("style", attributes);
+
+export const script = (attributes = {}) => element("script", attributes);

package/src/general.js

@@ -1351,6 +1351,230 @@ export const img = (attributes = {}) => {
   return img;
 };
 
+export const h1 = (attributes = {}) => {
+  let h1 = document.createElement("h1");
+  if (attributes) {
+    Object.entries(attributes).forEach(([name, attrValue]) => {
+      if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
+        const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
+        h1.addEventListener(eventType, attrValue);
+      } else {
+        switch (name) {
+          case "class":
+          case "className":
+            h1.className = String(attrValue);
+            break;
+          case "value":
+            if (isArray(attrValue)) {
+              attrValue.forEach((element) => {
+                isHtmlElement(element) ? h1.append(element) : h1.innerHTML = String(element);
+              });
+            } else {
+              if (isHtmlElement(attrValue)) {
+                h1.appendChild(attrValue);
+              } else {
+                h1.innerHTML = String(attrValue);
+                h1.title = String(attrValue);
+              }
+            }
+            break;
+          case "style":
+            Object.entries(attrValue).forEach(([styleName, styleValue]) => {
+              switch (styleName) {
+                case "zIndex":
+                  h1.style[styleName] = `99999${styleValue}`;
+                  break;
+                default:
+                  h1.style[styleName] = styleValue;
+                  break;
+              }
+            });
+            break;
+          default:
+            if (name.startsWith("data")) {
+              const kebabName = name
+                  .replace(/^data/, "data")
+                  .replace(/([A-Z])/g, "-$1")
+                  .toLowerCase();
+              h1.setAttribute(kebabName, String(attrValue));
+            } else {
+              h1.setAttribute(name, String(attrValue));
+            }
+        }
+      }
+    });
+  }
+  return h1;
+};
+
+export const h2 = (attributes = {}) => {
+  let h2 = document.createElement("h2");
+  if (attributes) {
+    Object.entries(attributes).forEach(([name, attrValue]) => {
+      if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
+        const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
+        h2.addEventListener(eventType, attrValue);
+      } else {
+        switch (name) {
+          case "class":
+          case "className":
+            h2.className = String(attrValue);
+            break;
+          case "value":
+            if (isArray(attrValue)) {
+              attrValue.forEach((element) => {
+                isHtmlElement(element) ? h2.append(element) : h2.innerHTML = String(element);
+              });
+            } else {
+              if (isHtmlElement(attrValue)) {
+                h2.appendChild(attrValue);
+              } else {
+                h2.innerHTML = String(attrValue);
+                h2.title = String(attrValue);
+              }
+            }
+            break;
+          case "style":
+            Object.entries(attrValue).forEach(([styleName, styleValue]) => {
+              switch (styleName) {
+                case "zIndex":
+                  h2.style[styleName] = `99999${styleValue}`;
+                  break;
+                default:
+                  h2.style[styleName] = styleValue;
+                  break;
+              }
+            });
+            break;
+          default:
+            if (name.startsWith("data")) {
+              const kebabName = name
+                  .replace(/^data/, "data")
+                  .replace(/([A-Z])/g, "-$1")
+                  .toLowerCase();
+              h2.setAttribute(kebabName, String(attrValue));
+            } else {
+              h2.setAttribute(name, String(attrValue));
+            }
+        }
+      }
+    });
+  }
+  return h2;
+};
+
+export const h3 = (attributes = {}) => {
+  let h3 = document.createElement("h3");
+  if (attributes) {
+    Object.entries(attributes).forEach(([name, attrValue]) => {
+      if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
+        const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
+        h3.addEventListener(eventType, attrValue);
+      } else {
+        switch (name) {
+          case "class":
+          case "className":
+            h3.className = String(attrValue);
+            break;
+          case "value":
+            if (isArray(attrValue)) {
+              attrValue.forEach((element) => {
+                isHtmlElement(element) ? h3.append(element) : h3.innerHTML = String(element);
+              });
+            } else {
+              if (isHtmlElement(attrValue)) {
+                h3.appendChild(attrValue);
+              } else {
+                h3.innerHTML = String(attrValue);
+                h3.title = String(attrValue);
+              }
+            }
+            break;
+          case "style":
+            Object.entries(attrValue).forEach(([styleName, styleValue]) => {
+              switch (styleName) {
+                case "zIndex":
+                  h3.style[styleName] = `99999${styleValue}`;
+                  break;
+                default:
+                  h3.style[styleName] = styleValue;
+                  break;
+              }
+            });
+            break;
+          default:
+            if (name.startsWith("data")) {
+              const kebabName = name
+                  .replace(/^data/, "data")
+                  .replace(/([A-Z])/g, "-$1")
+                  .toLowerCase();
+              h3.setAttribute(kebabName, String(attrValue));
+            } else {
+              h3.setAttribute(name, String(attrValue));
+            }
+        }
+      }
+    });
+  }
+  return h3;
+};
+
+export const element = (tag = "div", attributes = {}) => {
+  let el = document.createElement(tag);
+  if (attributes) {
+    Object.entries(attributes).forEach(([name, attrValue]) => {
+      if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
+        const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
+        el.addEventListener(eventType, attrValue);
+      } else {
+        switch (name) {
+          case "class":
+          case "className":
+            el.className = String(attrValue);
+            break;
+          case "value":
+            if (isArray(attrValue)) {
+              attrValue.forEach((element) => {
+                isHtmlElement(element) ? el.append(element) : el.innerHTML = String(element);
+              });
+            } else {
+              if (isHtmlElement(attrValue)) {
+                el.appendChild(attrValue);
+              } else {
+                el.innerHTML = String(attrValue);
+                el.title = String(attrValue);
+              }
+            }
+            break;
+          case "style":
+            Object.entries(attrValue).forEach(([styleName, styleValue]) => {
+              switch (styleName) {
+                case "zIndex":
+                  el.style[styleName] = `99999${styleValue}`;
+                  break;
+                default:
+                  el.style[styleName] = styleValue;
+                  break;
+              }
+            });
+            break;
+          default:
+            if (name.startsWith("data")) {
+              const kebabName = name
+                  .replace(/^data/, "data")
+                  .replace(/([A-Z])/g, "-$1")
+                  .toLowerCase();
+              el.setAttribute(kebabName, String(attrValue));
+            } else {
+              el.setAttribute(name, String(attrValue));
+            }
+        }
+      }
+    });
+  }
+  return el;
+};
+
 export const apState = (initialValue) => {
   let state = initialValue;
   const getState = () => state;

package/src/helper.js

@@ -114,3 +114,20 @@ export const useTableDrag = (selectorOrElement, onReorder = null, time = 1000) =
  * @returns {Function}
  */
 export const callback = (fn, ...args) => (...extra) => fn(...args, ...extra);
+
+/**
+ * Universal function for JSON
+ * @param value
+ * @returns {*|string}
+ */
+export const json = (value) => {
+  if (typeof value === 'string') {
+    return JSON.parse(value);
+  }
+
+  if (value !== null && typeof value === 'object') {
+    return JSON.stringify(value);
+  }
+
+  return value;
+}

package/src/svg.js

@@ -72,7 +72,7 @@ export const svg = ({
                 fill="${fill}" 
                 stroke="${stroke}" 
                 stroke-width="${strokeWidth}" 
-                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                viewBox="0 0 101 101" xmlns="http://www.w3.org/2000/svg">
                 <g>
                     <path d="M70.063,27.182c1.398,1.175,3.174,1.821,4.996,1.821c2.312,0,4.488-1.014,5.974-2.782 c2.76-3.289,2.329-8.211-0.96-10.973c-1.4-1.175-3.176-1.822-5-1.822c-2.311,0-4.487,1.014-5.971,2.782 C66.341,19.498,66.773,24.419,70.063,27.182z"></path>
                     <path d="M88.445,36.096c-0.483,0-0.971,0.043-1.448,0.127c-4.485,0.791-7.493,5.086-6.702,9.573 c0.696,3.955,4.111,6.825,8.119,6.825c0.482,0,0.972-0.043,1.451-0.126c4.485-0.792,7.492-5.086,6.701-9.571 C95.868,38.968,92.452,36.096,88.445,36.096z"></path>
@@ -238,15 +238,16 @@ export const svg = ({
         `,
 
         earth: `
-            <svg id="${id}" 
-                class="${classes}" 
-                width="${w}" 
-                height="${h}" 
-                fill="${fill}" 
-                stroke="${stroke}" 
-                stroke-width="${strokeWidth}" 
-                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path d="M50 0C22.404 0 0 22.404 0 50s22.404 50 50 50c27.546 0 49.911-22.324 49.992-49.852A1.5 1.5 0 0 0 100 50a1.5 1.5 0 0 0-.006-.133C99.922 22.332 77.552 0 50 0zm0 3c2.776 0 5.49.254 8.133.715c.638 1.396 4.103 1.696.43 1.451c-1.416 2.02-7.019-2.123-10.75.047c-1.119 1.576-8.2 3.272-5.54 5.828c3.787-.687-.417-.067-.304 1.813c-1.936.67-4.686 3.87-4.647.595c-.48-2.398 2.162-4.607-2.115-2.81c-.235 1.306-6.674 3.82-3.453 4.398c3.387-1.7-1.353 2.698 2.59.963c-2.691 1.22-.65 2.551-1.885 5.24c-4.353-2.035-6.359 1.822-7.27 5.52c1.032.097 1.382.636 1.282 1.28c.522.051 1.26.123 1.593.153c2.183-.167 4.193-1.598 5.235-3.683c2.483-1.893 4.515-2.98 7.523-2.838c-1.443-.245-3.368 6.082-.443 3.687c-1.258-5.365 5.58.518 4.082.551c-2.513.372-3.32 1.016-1.156 2.83c1.507 1.147 2.433-4.392 4.275-3.427c-.245-1.055-4.553-4.45-3.916-4.272c.147.041.557.274 1.342.768c3.546 1.116 2.965 5.69 6.185 7.298c2.24 2.913 5.706-1.689 8.155-.293c.084 1.922 2.252 1.727 2.168-.332c2.445 1.872-.26 6.487-3.655 4.641c-3.224 1.858-7.833-4.413-9.785.344c-.87 2.244-3.849-1.737-5.082-1.822c-4.305.477-.172-4.208-3.154-4.71c-3.843-.033-7.797 1.58-11.498 1.34c-2.013.619-3.276 1.445-4.479 2.188c-1.155 1.724-3.425 2.954-5.76 6.254c-.428.66-1.172 1.478-2.058 2.47c-1.212 4.123-2.697 8.25-2.463 12.54c2.643 2.788 3.263 9.522 8.455 8.988c3.43 1.772 6.028-1.288 9.244-.26c.593 3.341 6.865 1.95 5.174 5.295c-1.765 3.996 3.393 5.923 4.236 9.56c2.202 3.636-3.322 7.426 1.114 10.555c2.456 4.07 5.302 10.253 11.18 7.848c4.573-.293 7.37-4.15 10.226-6.781c-.259-4.826 8.459-4.3 6.508-10.436c-1.15-.724.072-3.625-.56-4.652c.654-1.345 2.958-5.176 5.187-7.051c3.417-2.65 4.85-6.796 5.978-10.807c-.698-3.373-2.29-.072-4.318-.215c-5.396 2.001.127-2.32 2.158-3.55c2.866-1.689 5.654-4.57 6.285-7.64c2.656-2.87-6.413-5.658-.715-4.72c3.603-.703 5.451-1.131 6.373 2.319c3.53 1.396 3.249 7.793 5.237 11.277c1.03-1.27.618-.283 1.056 1.244c1.15-3.297-1.273-8.61-.52-12.896A47.197 47.197 0 0 1 97 50c0 25.975-21.025 47-47 47S3 75.975 3 50C3 29.806 15.71 12.61 33.57 5.953c1.734-.496 3.47-.987 5.168-1.588A47.152 47.152 0 0 1 50 3zm10.293 1.143c.499.11 1 .218 1.492.345c-.114.755-.748.287-1.492-.345zM35.168 6.219c-1.148.021-2.457.447-2.117 1.511c.63.232 1.285.06 1.902-.091c2.902-.808 1.691-1.448.215-1.42zm14.113 3.758c1.528-.225.085 4.183-2.281 3.046c-3.878.401.584-.245.725-2.025c.694-.67 1.204-.97 1.556-1.021zm21.49 8.728c.29.035.378.388-.023 1.229c-.327 1.078 4.93 4.569 4.604 6.793c-4.668 1.225-1.75-3.326-4.79-4.252c-3.337-1.105-.66-3.873.21-3.77zm-13.539.873c1.734 2.323 4.44.501 6.967 2.387c3.092 3.12-4.874-.41-6.258 1.389c-4.131 1.271-2.103-2.51-.709-3.776zM16.836 33.754c-.294-.044-.535.16-.748.99c.71.037 1.24.117 1.621.238l.232-.718c-.443-.16-.803-.465-1.105-.51zm58.379.508c.68 2.359 5.965 1.985 4.685 4.195l-.603.426c-1.032-.675-5.325-3.52-4.082-4.621zM62.678 37.29c2.438 1.663 4.185 5.07 5.744 7.74c2.142 1.524 2.21 3.973 3.6 5.899c-.568.72-1.678-.593-1.905-1.06c-1.857-1.299-3.39-4.6-4.703-7.237c-.825-1.828-2.838-3.495-2.736-5.342zm14.586 38.904c-.222-.015-.56.245-1.037.899c-3.443 2.537-6.176 5.556-6.38 9.91c2.385 1.084 4.406-3.285 5.688-4.81c1.469-.711 2.689-5.934 1.729-5.999z"></path>
+            <svg id="${id}"
+                class="${classes}"
+                width="${w}"
+                height="${h}"
+                fill="${fill}"
+                stroke="${stroke}"
+                stroke-width="${strokeWidth}"
+                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <path d="M511.434,239.204c-4.138-63.963-31.794-121.624-74.418-164.217c-17.682-17.685-37.951-32.809-60.22-44.74 C340.806,10.962,299.67,0,256,0C185.365,0,121.273,28.67,74.984,74.988C28.663,121.273,0,185.361,0,256 c0,70.639,28.663,134.735,74.984,181.013C121.273,483.329,185.365,512,256,512c10.178,0,20.211-0.593,30.092-1.757 c25.423-2.974,49.714-9.666,72.278-19.558c18.337-8.004,35.573-18.099,51.38-29.968c9.642-7.261,18.755-15.194,27.266-23.704 C483.337,390.734,512,326.639,512,256C512,250.347,511.82,244.748,511.434,239.204z M368.22,213.758 c-8.983,3.483-31.286,4.653-36.252,1.343c-4.943-3.272-17.416-7.379-22.444-6.488c-5.032,0.89,1.604,8.416-4.259,9.338 c-5.86,0.898-13.395-3.208-19.294-7.44c-5.856-4.162-15.144-5.794-15.144-5.794c-2.26-0.273-4.529-0.547-6.789-0.804 c-3.365-6.762-1.608-22.096-13.52-18.63c-11.903,3.475-51.197,10.416-59.77,12.11c-8.573,1.726-18.81,15.39-25.63,25.532 c-6.843,10.244-25.481,42.241-28.842,47.215c-3.365,5.059-4.884,36.65-4.79,44.833c0.085,8.339,37.322,42.623,49.022,44.107 c11.759,1.616,43.697-6.66,52.091-8.417c8.429-1.695,13.309,9.557,19.977,9.431c6.699-0.117,14.948,2.983,8.159,12.689 c-6.82,9.634-6.851,14.413-0.328,20.597c6.547,6.247,19.169,29.381,10.506,47.707c-8.604,18.341-2.292,27.008,2.323,34.262 c0.948,1.491,1.932,3.552,2.916,5.988c-6.637,0.594-13.363,0.89-20.152,0.89c-62.51,0-118.985-25.297-159.97-66.25 C55.07,374.986,29.764,318.51,29.764,256c0-62.51,25.306-118.986,66.266-159.978c40.984-40.952,97.459-66.25,159.97-66.25 c7.765,0,15.476,0.382,23.042,1.155c-1.488,1.101-3.127,2.233-5.032,3.365c-12.649,7.558-17.744,10.931-27.058,13.453 c-9.35,2.506-5.895,21.292-2.475,24.713c3.428,3.42,11.076-0.844,17.006-4.225c5.922-3.365,7.648,3.42,7.675,5.973 c0,2.561,3.424,12.806,8.484,11.111c5.095-1.695,13.457-18.7,12.594-21.222c-0.863-2.569-4.263-9.378,1.608-14.437 c5.805-5.028,12.465-9.198,18.278-13.368c1.811,0.406,3.596,0.891,5.352,1.39c-0.508,1.257-1.667,2.802-3.568,4.498 c-6.64,5.871-9.139,10.103-9.139,10.103s-1.581,13.563,2.62,13.563c4.197,0.023,15.897-2.436,21.698-4.107 c5.836-1.67,5.868,3.428,0.058,5.091c-5.832,1.639-10.834,4.169-10.834,4.169c-0.835,2.522-1.636,5.092-2.471,7.613 c-8.366,5.068-11.7,12.719-11.7,12.719s-37.123,0.804-39.739,1.663c-2.53,0.812-1.694-7.675-1.694-7.675s2.498-8.55-1.729-7.714 c-4.197,0.866-4.224,8.347-4.224,8.55c-0.566,3.396-1.132,6.816-1.667,10.236c0,0-16.194,3.396-19.618,6.84 c-3.392,3.428-14.5,13.672-17.053,15.421c-2.565,1.694-11.134,4.286-14.562,6.012c-3.424,1.734,10.271,7.722,10.271,10.275 c0,2.561,0.031,14.554-5.118,15.414c-5.126,0.866-29.143,0.898-29.143,0.898s-7.683,27.414-5.954,29.982 c1.726,2.553,12.856,8.51,19.708,7.652c6.844-0.874,22.233-8.573,22.233-8.573c2.264-5.153,4.556-10.283,6.848-15.421 c4.552-4.856,9.108-9.713,13.664-14.585c0,0.023,10.236,4.255,13.664,0.828c3.388-3.42,10.15-6.855,10.209-6.855 c0.027,0,6.781,12.781,11.017,14.468c4.251,1.709,11.841,8.487,12.676,12.75c0.836,4.255,1.667,11.907,4.197,10.174 c2.534-1.726,6.789-11.93,6.789-11.93s5.891-3.428-0.836-6.817c-6.73-3.365-18.575-15.272-20.273-17.834 c-1.694-2.561-0.832-10.244,5.091-6.847c5.954,3.428,21.94,18.692,21.94,18.692s0.835,7.675,5.001,11.048 c4.197,3.358,8.366,9.284,8.366,12.68c-0.031,3.396-0.031,5.06,5.801,5.028c5.868-0.031,3.424-11.041,3.424-13.57 c0-2.561-0.8-7.652,3.365-7.652c4.166-0.031,10.806,3.303,10.806,3.303s-4.228,16.974,4.044,19.434 c8.339,2.444,33.82-4.575,33.731-0.351C373.342,191.053,377.246,210.284,368.22,213.758z M415.969,415.977 c-6.043,6.028-12.414,11.728-19.11,17.052c-0.597-11.728-0.445-31.677,1.159-39.477c1.995-9.377,19.559-16.459,27.832-29.405 c8.334-13.008,21.257-27.828,18.844-46.863c-14.141,7.034-22.116,10.603-29.827,6.113c-7.71-4.497-15.178-20.394-18.247-26.828 c-2.862-6.16-29.408-56.733-24.587-60.332c5.032-3.31,28.515,39.212,37.565,51.76c9.142,12.742,5.535,28.975,24.618,18.52 c19.047-10.448,42.358-29.178,45.543-37.362c3.276-8.151-8.334-28.842-13.066-23.846c-4.646,5.06-18.576,7.152-18.607,7.152 c-5.954-10.681-11.997-21.495-18.126-32.387c0,0,7.887-0.149,15.538,6.215c7.71,6.403,22.92,14.109,31.942,15.413 c1.218,0.195,2.678,0.219,4.346,0.133c0.296,4.669,0.448,9.401,0.448,14.164C482.236,318.51,456.93,374.986,415.969,415.977z"></path>
+                <path d="M205.232,89.526c2.569,1.718-1.698,9.432-5.114,15.429c-3.42,5.996-1.706,9.417-1.706,9.417 s16.272-2.577,19.688-4.295c3.416-1.701,5.973-12.844,3.4-15.412c-2.569-2.569-11.138-10.268-11.15-12.837 c0-2.569,0.839-11.977-2.596-14.523c-3.42-2.576-11.119,2.28-11.103,7.684C196.655,78.415,202.66,87.808,205.232,89.526z"></path>
             </svg>
         `
     }

package/src/translator.js

@@ -1,5 +1,6 @@
 // Об'єкт для зберігання завантажених перекладів
 import {isEmpty} from "./general.js";
+import {getAprogConfig} from "./config.js";
 
 const translations = {};
 let translationsLoaded = false;
@@ -10,8 +11,20 @@ let translationsLoaded = false;
  */
 export const loadTranslations = async (language = "uk") => {
     try {
-        const translationsModule = await import(`../../../resources/lang/${language}.json`);
-        Object.assign(translations, translationsModule);
+        const { langLoader } = getAprogConfig();
+
+        if (!langLoader) {
+            throw new Error("langLoader is not configured");
+        }
+
+        const module = await langLoader(language);
+
+        Object.keys(translations).forEach(key => {
+            delete translations[key];
+        });
+
+        Object.assign(translations, module.default ?? module);
+
         translationsLoaded = true;
     } catch (error) {
         console.error(`Помилка завантаження перекладів для мови "${language}":`, error);
@@ -30,10 +43,15 @@ export const translate = (key, values = {}, def = "") => {
         console.warn(`Переклади ще не завантажені. Ключ: "${key}"`);
         return !isEmpty(def) ? def : key;
     }
-    let translation = translations[key] || key;
-    // Замінити підстановки {key} у перекладі
+
+    let translation = translations[key];
+    if (isEmpty(translation)) {
+        translation = !isEmpty(def) ? def : key;
+    }
+
     for (const [placeholder, value] of Object.entries(values)) {
-        translation = translation.replace(`:${placeholder}`, value.toString());
+        translation = translation.replaceAll(`:${placeholder}`, value.toString());
     }
-    return !isEmpty(def) ? def : translation;
+
+    return translation;
 };

package/src/css/root.css

@@ -1,86 +0,0 @@
-:root {
-    --c-blue: #0088ff;
-    --c-green: #008800;
-    --c-red: #ff2800;
-    --c-orange: #ff8800;
-    --c-gold: #ffd700;
-    --c-yellow: #ffff00;
-    --c-gray: #999999;
-    --c-x-light: #F0E1D2;
-    --c-x-light-rgb: rgb(240,225,210);
-    /*--c-black: #01090f;*/
-    --c-black: #333333;
-    --c-black-rgb: rgb(1,9,15);
-    --c-dark: #021727;
-    --c-dark-rgb: rgb(2,23,39);
-    --c-prev-dark: #032640;
-    --c-prev-dark-rgb: rgb(3,38,64);
-    --c-default: #043458;
-    --c-default-rgb: rgb(4,52,88);
-    --c-prev-light: #054270;
-    --c-prev-light-rgb: rgb(5,66,112);
-    --c-light: #065189;
-    --c-light-rgb: rgb(6,81,137);
-    --c-super-light: #075fa1;
-    --c-super-light-rgb: rgb(7,95,161);
-    --c-bright: #086db9;
-    --c-bright-rgb: rgb(8,109,185);
-    --c-prev-bright: #097cd2;
-    --c-prev-bright-rgb: rgb(9,124,210);
-    --c-vivid: #0a8aea;
-    --c-vivid-rgb: rgb(10,138,234);
-    --c-sky: #1897f5;
-    --c-sky-rgb: rgb(24,151,245);
-    --c-soft-sky: #31a2f6;
-    --c-soft-sky-rgb: rgb(49,162,246);
-    --c-light-sky: #49adf7;
-    --c-light-sky-rgb: rgb(73,173,247);
-    --c-cloud: #61b8f8;
-    --c-cloud-rgb: rgb(97,184,248);
-    --c-bright-cloud: #7ac3f9;
-    --c-bright-cloud-rgb: rgb(122,195,249);
-    --c-soft-cloud: #92cefa;
-    --c-soft-cloud-rgb: rgb(146,206,250);
-    --c-lighter-cloud: #aad9fb;
-    --c-lighter-cloud-rgb: rgb(170,217,251);
-    --c-fade-cloud: #c3e4fc;
-    --c-fade-cloud-rgb: rgb(195,228,252);
-    --c-pale-blue: #dbeffd;
-    --c-pale-blue-rgb: rgb(219,239,253);
-    --c-near-white: #f3fafe;
-    --c-near-white-rgb: rgb(243,250,254);
-    --c-white: #ffffff;
-    --c-white-rgb: rgb(255,255,255);
-    --1px: 0.0625rem;
-    --05px: 0.0313rem;
-    --size-xxxs: 8px;
-    --size-xxs: 10px;
-    --size-xs: 12px;
-    --size-sm: 14px;
-    --size-md: 16px;
-    --size-lg: 18px;
-    --size-xl: 20px;
-    --size-xxl: 24px;
-    --size-xxxl: 32px;
-    --padding-container: calc(100% - 4rem);
-    --box-shadow: 0 3px 6px 0 rgba(1,9,15, 0.2), 0 3px 6px 0 rgba(1,9,15, 0.19);
-    --box-shadow-invert: inset 0 3px 6px 0 rgba(1,9,15, 0.4);
-    --box-shadow-round: 0 0 6px 0 rgba(1,9,15, 0.4), 0 0 6px 0 rgba(1,9,15, 0.39);
-    --box-shadow-round-invert: inset 0 0 6px 0 rgba(1,9,15, 0.4);
-    /*--btn-shadow: 0 3px 8px 0 rgba(4, 52, 88, 0.2), 0 3px 20px 0 rgba(4, 52, 88, 0.19);*/
-    --btn-shadow: 0 3px 8px 0 rgba(1,9,15, 0.2), 0 3px 20px 0 rgba(1,9,15, 0.19);
-    --maxIndex: 2147483647;
-    --allTransition100Linear: all 100ms linear;
-    --allTransition700: all 700ms ease-in-out;
-    --border-radius: 0.5rem;
-
-    /* Glass Style */
-    --glass-bg: rgba(255,255,255,.5);
-    --glass-super-bg: rgba(255,255,255,.7);
-    --glass-blur: blur(2px);
-    --glass-super-blur: blur(6px);
-    --glass-border: var(--05px) solid var(--c-white);
-    --glass-radius: 0.5rem;
-    --glass-shadow: 0 3px 6px rgba(0,0,0,.5);
-    --glass-shadow-invert: inset 0 3px 6px rgba(0,0,0,.5);
-}

package/src/css/styles.css

@@ -1,129 +0,0 @@
-@import "root.css";
-
-.aprog-btn {
-    height: 38px;
-    padding: 0.3rem 0.7rem;
-    align-items: center;
-    justify-content: center;
-    font-size: 1rem;
-    color: var(--c-black);
-    background-color: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
-    border: var(--glass-border);
-    border-radius: var(--glass-radius);
-    box-shadow: var(--glass-shadow);
-    transition: var(--allTransition100Linear);
-    cursor: pointer;
-}
-
-.aprog-input, .aprog-select {
-    min-width: 150px;
-    width: calc(100% - 30px);
-    height: 38px;
-    padding: 0 15px;
-    font-size: var(--size-sm);
-    font-weight: 600;
-    color: var(--c-black);
-    background-color: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
-    border-left: 1px solid var(--c-black);
-    border-right: 1px solid var(--c-black);
-    border-radius: var(--glass-radius);
-    box-shadow: var(--glass-shadow-invert);
-    outline: none;
-}
-
-.aprog-select {
-
-}
-
-.aprog-loader {
-    /*position: absolute;*/
-    /*top: 50%;*/
-    /*left: 50%;*/
-    /*transform: translate(-50%, -50%);*/
-    /*width: 35px;*/
-    /*height: 35px;*/
-    animation: spin 1s linear infinite;
-}
-
-.aprog-modal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    min-width: 600px;
-    min-height: 300px;
-    width: auto;
-    height: auto;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    background-color: var(--c-white);
-    border-radius: var(--border-radius);
-    transform: translate(-50%, -50%);
-    box-shadow: var(--box-shadow);
-    z-index: 99999;
-}
-.aprog-background-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: rgba(255,255,255, 0.3);
-    backdrop-filter: blur(4px);
-}
-.aprog-block-modal {
-    width: calc(100% - 1rem);
-    height: calc(100% - 1rem);
-    padding: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    gap: 20px;
-}
-.aprog-title-modal {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    font-weight: 600;
-    text-align: center;
-}
-.aprog-block-btns-modal {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
-}
-.aprog-close {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--c-white);
-    stroke: var(--c-white);
-    fill: var(--c-white);
-    background-color: var(--c-red);
-    border-radius: 50%;
-    box-shadow: var(--box-shadow);
-    transition: var(--allTransition700);
-    cursor: pointer;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}