aprog 2.2.5 → 2.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/index.js +3 -0
  2. package/package.json +1 -1
  3. package/src/constructs/ButtonConstructor.js +7 -4
  4. package/src/constructs/InputConstructor.js +8 -6
  5. package/src/constructs/SelectConstructor.js +7 -6
  6. package/src/css/root.css +86 -0
  7. package/src/css/styles.css +129 -0
  8. package/src/helper.js +10 -1
  9. package/src/modal.js +121 -0
  10. package/src/svg.js +172 -0
  11. package/src/translator.js +39 -0
package/index.js CHANGED
@@ -24,6 +24,9 @@ export {
24
24
  export { prism } from "./src/prism.js";
25
25
  export { uniquePage } from "./src/pages.js";
26
26
  export { state, wrap, toast, abort, useTableDrag } from "./src/helper.js";
27
+ export { loadTranslations, translate } from "./src/translator.js";
28
+ export { svg } from "./src/svg.js";
29
+ export { Modal, modal, closeAllModals, closeThisModal } from "./src/modal.js";
27
30
  export { default as AbortError } from './src/classes/AbortError.js';
28
31
  export { default as SmartWrapper } from './src/classes/SmartWrapper.js';
29
32
  export { default as StateWrapper } from './src/classes/StateWrapper.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aprog",
3
- "version": "2.2.5",
3
+ "version": "2.2.8",
4
4
  "description": "Допоміжна JavaScript-бібліотека для проєктів",
5
5
  "main": "index.js",
6
6
  "exports": {
package/src/constructs/ButtonConstructor.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import {button, GUID} from "aprog";
2
+ import "aprog/css/styles";
2
3
 
3
4
  /**
4
5
  * AprogJS Constructor
@@ -23,17 +24,19 @@ export const ButtonConstructor = {
23
24
  className = "",
24
25
  style = {},
25
26
  type = undefined,
27
+ title = undefined,
26
28
  text = "",
27
- callback = () => {
28
- },
29
+ callback = () => {},
30
+ disabled = false,
29
31
  ...props
30
32
  } = {}) {
31
33
  return this.is = button({
32
34
  id: id || GUID(),
33
- class: `${this.class} btn ${className} disabled`.trim(),
35
+ class: `${this.class} aprog-btn ${className} ${disabled ? "disabled" : ""}`.trim(),
34
36
  style: style,
35
- ...(type && {type: type}),
37
+ ...(type && {type}),
36
38
  value: text,
39
+ ...(title && {title}),
37
40
  onClick: callback,
38
41
  ...props
39
42
  });
package/src/constructs/InputConstructor.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import {GUID, input} from "aprog";
2
+ import "aprog/css/styles";
2
3
 
3
4
  /**
4
5
  * AprogJS Constructor
@@ -24,20 +25,21 @@ export const InputConstructor = {
24
25
  style = {},
25
26
  type = undefined,
26
27
  focus = false,
28
+ checked = false,
27
29
  placeholder = undefined,
28
30
  value = undefined,
29
31
  nameCallback = "onInput",
30
- callback = () => {
31
- },
32
+ callback = () => {},
32
33
  ...props
33
34
  } = {}) {
34
35
  this.is = input({
35
36
  id: id || GUID(),
36
- class: `${this.class} input ${className}`.trim(),
37
+ class: `${this.class} aprog-input ${className}`.trim(),
37
38
  style: style,
38
- ...(type && {type: type}),
39
- ...(placeholder && {placeholder: placeholder}),
40
- ...(value && {value: value}),
39
+ ...(type && {type}),
40
+ ...(checked && {checked}),
41
+ ...(placeholder && {placeholder}),
42
+ ...(value && {value}),
41
43
  [nameCallback]: callback,
42
44
  ...props
43
45
  });
package/src/constructs/SelectConstructor.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import {GUID, select} from "aprog";
2
+ import "aprog/css/styles";
2
3
 
3
4
  /**
4
5
  * AprogJS Constructor
@@ -24,17 +25,17 @@ export const SelectConstructor = {
24
25
  style = {},
25
26
  option = undefined,
26
27
  options = undefined,
27
- callback = () => {
28
- },
28
+ nameCallback = "onChange",
29
+ callback = () => {},
29
30
  ...props
30
31
  } = {}) {
31
32
  return this.is = select({
32
33
  id: id || GUID(),
33
- class: `${this.class} input ${className}`.trim(),
34
+ class: `${this.class} aprog-select ${className}`.trim(),
34
35
  style: style,
35
- ...(option && {option: option}),
36
- ...(options && {options: options}),
37
- onChange: callback,
36
+ ...(option && {option}),
37
+ ...(options && {options}),
38
+ [nameCallback]: callback,
38
39
  ...props
39
40
  });
40
41
  },
package/src/css/root.css ADDED
@@ -0,0 +1,86 @@
1
+ :root {
2
+ --c-blue: #0088ff;
3
+ --c-green: #008800;
4
+ --c-red: #ff2800;
5
+ --c-orange: #ff8800;
6
+ --c-gold: #ffd700;
7
+ --c-yellow: #ffff00;
8
+ --c-gray: #999999;
9
+ --c-x-light: #F0E1D2;
10
+ --c-x-light-rgb: rgb(240,225,210);
11
+ /*--c-black: #01090f;*/
12
+ --c-black: #333333;
13
+ --c-black-rgb: rgb(1,9,15);
14
+ --c-dark: #021727;
15
+ --c-dark-rgb: rgb(2,23,39);
16
+ --c-prev-dark: #032640;
17
+ --c-prev-dark-rgb: rgb(3,38,64);
18
+ --c-default: #043458;
19
+ --c-default-rgb: rgb(4,52,88);
20
+ --c-prev-light: #054270;
21
+ --c-prev-light-rgb: rgb(5,66,112);
22
+ --c-light: #065189;
23
+ --c-light-rgb: rgb(6,81,137);
24
+ --c-super-light: #075fa1;
25
+ --c-super-light-rgb: rgb(7,95,161);
26
+ --c-bright: #086db9;
27
+ --c-bright-rgb: rgb(8,109,185);
28
+ --c-prev-bright: #097cd2;
29
+ --c-prev-bright-rgb: rgb(9,124,210);
30
+ --c-vivid: #0a8aea;
31
+ --c-vivid-rgb: rgb(10,138,234);
32
+ --c-sky: #1897f5;
33
+ --c-sky-rgb: rgb(24,151,245);
34
+ --c-soft-sky: #31a2f6;
35
+ --c-soft-sky-rgb: rgb(49,162,246);
36
+ --c-light-sky: #49adf7;
37
+ --c-light-sky-rgb: rgb(73,173,247);
38
+ --c-cloud: #61b8f8;
39
+ --c-cloud-rgb: rgb(97,184,248);
40
+ --c-bright-cloud: #7ac3f9;
41
+ --c-bright-cloud-rgb: rgb(122,195,249);
42
+ --c-soft-cloud: #92cefa;
43
+ --c-soft-cloud-rgb: rgb(146,206,250);
44
+ --c-lighter-cloud: #aad9fb;
45
+ --c-lighter-cloud-rgb: rgb(170,217,251);
46
+ --c-fade-cloud: #c3e4fc;
47
+ --c-fade-cloud-rgb: rgb(195,228,252);
48
+ --c-pale-blue: #dbeffd;
49
+ --c-pale-blue-rgb: rgb(219,239,253);
50
+ --c-near-white: #f3fafe;
51
+ --c-near-white-rgb: rgb(243,250,254);
52
+ --c-white: #ffffff;
53
+ --c-white-rgb: rgb(255,255,255);
54
+ --1px: 0.0625rem;
55
+ --05px: 0.0313rem;
56
+ --size-xxxs: 8px;
57
+ --size-xxs: 10px;
58
+ --size-xs: 12px;
59
+ --size-sm: 14px;
60
+ --size-md: 16px;
61
+ --size-lg: 18px;
62
+ --size-xl: 20px;
63
+ --size-xxl: 24px;
64
+ --size-xxxl: 32px;
65
+ --padding-container: calc(100% - 4rem);
66
+ --box-shadow: 0 3px 6px 0 rgba(1,9,15, 0.2), 0 3px 6px 0 rgba(1,9,15, 0.19);
67
+ --box-shadow-invert: inset 0 3px 6px 0 rgba(1,9,15, 0.4);
68
+ --box-shadow-round: 0 0 6px 0 rgba(1,9,15, 0.4), 0 0 6px 0 rgba(1,9,15, 0.39);
69
+ --box-shadow-round-invert: inset 0 0 6px 0 rgba(1,9,15, 0.4);
70
+ /*--btn-shadow: 0 3px 8px 0 rgba(4, 52, 88, 0.2), 0 3px 20px 0 rgba(4, 52, 88, 0.19);*/
71
+ --btn-shadow: 0 3px 8px 0 rgba(1,9,15, 0.2), 0 3px 20px 0 rgba(1,9,15, 0.19);
72
+ --maxIndex: 2147483647;
73
+ --allTransition100Linear: all 100ms linear;
74
+ --allTransition700: all 700ms ease-in-out;
75
+ --border-radius: 0.5rem;
76
+
77
+ /* Glass Style */
78
+ --glass-bg: rgba(255,255,255,.5);
79
+ --glass-super-bg: rgba(255,255,255,.7);
80
+ --glass-blur: blur(2px);
81
+ --glass-super-blur: blur(6px);
82
+ --glass-border: var(--05px) solid var(--c-white);
83
+ --glass-radius: 0.5rem;
84
+ --glass-shadow: 0 3px 6px rgba(0,0,0,.5);
85
+ --glass-shadow-invert: inset 0 3px 6px rgba(0,0,0,.5);
86
+ }
package/src/css/styles.css ADDED
@@ -0,0 +1,129 @@
1
+ @import "root.css";
2
+
3
+ .aprog-btn {
4
+ height: 38px;
5
+ padding: 0.3rem 0.7rem;
6
+ align-items: center;
7
+ justify-content: center;
8
+ font-size: 1rem;
9
+ color: var(--c-black);
10
+ background-color: var(--glass-bg);
11
+ backdrop-filter: var(--glass-blur);
12
+ -webkit-backdrop-filter: var(--glass-blur);
13
+ border: var(--glass-border);
14
+ border-radius: var(--glass-radius);
15
+ box-shadow: var(--glass-shadow);
16
+ transition: var(--allTransition100Linear);
17
+ cursor: pointer;
18
+ }
19
+
20
+ .aprog-input, .aprog-select {
21
+ min-width: 150px;
22
+ width: calc(100% - 30px);
23
+ height: 38px;
24
+ padding: 0 15px;
25
+ font-size: var(--size-sm);
26
+ font-weight: 600;
27
+ color: var(--c-black);
28
+ background-color: var(--glass-bg);
29
+ backdrop-filter: var(--glass-blur);
30
+ -webkit-backdrop-filter: var(--glass-blur);
31
+ border-left: 1px solid var(--c-black);
32
+ border-right: 1px solid var(--c-black);
33
+ border-radius: var(--glass-radius);
34
+ box-shadow: var(--glass-shadow-invert);
35
+ outline: none;
36
+ }
37
+
38
+ .aprog-select {
39
+
40
+ }
41
+
42
+ .aprog-loader {
43
+ /*position: absolute;*/
44
+ /*top: 50%;*/
45
+ /*left: 50%;*/
46
+ /*transform: translate(-50%, -50%);*/
47
+ /*width: 35px;*/
48
+ /*height: 35px;*/
49
+ animation: spin 1s linear infinite;
50
+ }
51
+
52
+ .aprog-modal {
53
+ position: fixed;
54
+ top: 50%;
55
+ left: 50%;
56
+ min-width: 600px;
57
+ min-height: 300px;
58
+ width: auto;
59
+ height: auto;
60
+ padding: 20px;
61
+ display: flex;
62
+ flex-direction: column;
63
+ align-items: center;
64
+ justify-content: center;
65
+ gap: 10px;
66
+ background-color: var(--c-white);
67
+ border-radius: var(--border-radius);
68
+ transform: translate(-50%, -50%);
69
+ box-shadow: var(--box-shadow);
70
+ z-index: 99999;
71
+ }
72
+ .aprog-background-modal {
73
+ position: fixed;
74
+ top: 0;
75
+ left: 0;
76
+ width: 100%;
77
+ height: 100vh;
78
+ background-color: rgba(255,255,255, 0.3);
79
+ backdrop-filter: blur(4px);
80
+ }
81
+ .aprog-block-modal {
82
+ width: calc(100% - 1rem);
83
+ height: calc(100% - 1rem);
84
+ padding: 0.5rem;
85
+ display: flex;
86
+ flex-direction: column;
87
+ align-items: center;
88
+ justify-content: center;
89
+ overflow: hidden;
90
+ gap: 20px;
91
+ }
92
+ .aprog-title-modal {
93
+ width: 100%;
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ font-size: 20px;
98
+ font-weight: 600;
99
+ text-align: center;
100
+ }
101
+ .aprog-block-btns-modal {
102
+ display: flex;
103
+ align-items: center;
104
+ justify-content: center;
105
+ gap: 20px;
106
+ }
107
+ .aprog-close {
108
+ position: absolute;
109
+ top: 10px;
110
+ left: 10px;
111
+ width: 20px;
112
+ height: 20px;
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ color: var(--c-white);
117
+ stroke: var(--c-white);
118
+ fill: var(--c-white);
119
+ background-color: var(--c-red);
120
+ border-radius: 50%;
121
+ box-shadow: var(--box-shadow);
122
+ transition: var(--allTransition700);
123
+ cursor: pointer;
124
+ }
125
+
126
+ @keyframes spin {
127
+ 0% { transform: rotate(0deg); }
128
+ 100% { transform: rotate(360deg); }
129
+ }
package/src/helper.js CHANGED
@@ -14,7 +14,7 @@ export const abort = (message = "") => {
14
14
  throw new AbortError(`=> ${message}`);
15
15
  };
16
16
 
17
- export const useTableDrag = (selectorOrElement, onReorder = null) => {
17
+ export const useTableDrag = (selectorOrElement, onReorder = null, time = 1000) => {
18
18
  const css = `
19
19
  tr.dragging td {
20
20
  opacity: 0.6;
@@ -25,6 +25,10 @@ export const useTableDrag = (selectorOrElement, onReorder = null) => {
25
25
  color: #043458 !important;
26
26
  background-color: rgba(4,52,88,.2) !important;
27
27
  }
28
+ tr.good td {
29
+ color: #28a745 !important;
30
+ background-color: rgba(40,167,69,.2) !important;
31
+ }
28
32
  `;
29
33
 
30
34
  const style = document.createElement("style");
@@ -85,6 +89,11 @@ export const useTableDrag = (selectorOrElement, onReorder = null) => {
85
89
  const newOrder = getOrder();
86
90
  if (typeof onReorder === "function") {
87
91
  onReorder(newOrder);
92
+ if (draggedRow) setTimeout(() => {
93
+ draggedRow.classList.remove("sorted");
94
+ draggedRow.classList.add("good");
95
+ setTimeout(() => draggedRow.classList.remove("good"), time / 3);
96
+ }, time);
88
97
  }
89
98
  });
90
99
 
package/src/modal.js ADDED
@@ -0,0 +1,121 @@
1
+ import {div, isObject, isArray, isEmpty, GUID} from "./general.js";
2
+ import {toast} from "./helper.js";
3
+ import {translate} from "./translator.js";
4
+ import {svg} from "./svg.js";
5
+
6
+ const show = async ({ html = null, isClass = "", closed = true, styles = {} }) => {
7
+ try {
8
+ const modals = document.querySelectorAll(".aprog-modal");
9
+ const guid = GUID();
10
+ const body = document.querySelector('body');
11
+
12
+ const close = div({
13
+ className: `aprog-close ${closed ? "" : "hidden"}`,
14
+ value: svg({stroke: "#ffffff"}).close
15
+ });
16
+ const modal = div({
17
+ id: guid,
18
+ className: `aprog-modal ${isClass}`,
19
+ style: {
20
+ ...styles,
21
+ transition: "all 350ms ease-in-out",
22
+ opacity: "0",
23
+ zIndex: modals.length + 1
24
+ }
25
+ });
26
+ const background = div({
27
+ dataModalId: guid,
28
+ className: "aprog-background-modal",
29
+ style: {zIndex: modals.length}
30
+ });
31
+ background.addEventListener("click", () => eventClose(body, modal, background));
32
+ const eventClose = (body, modal, background) => {
33
+ body.removeChild(modal);
34
+ body.removeChild(background);
35
+ const isModal = document.querySelectorAll(".modal");
36
+ if (isEmpty(isModal)) {
37
+ body.style.overflow = null;
38
+ }
39
+ };
40
+ setTimeout(async () => {
41
+ modal.style.opacity = "1";
42
+ }, 50);
43
+ if (html) {
44
+ if (isObject(html)) {
45
+ Object.entries(html).forEach((element) => {
46
+ modal.appendChild(element);
47
+ });
48
+ } else if (isArray(html)) {
49
+ html.forEach((element) => {
50
+ modal.appendChild(element);
51
+ })
52
+ } else {
53
+ modal.appendChild(html);
54
+ }
55
+ }
56
+ modal.appendChild(close);
57
+ body.appendChild(background);
58
+ body.appendChild(modal);
59
+ body.style.overflow = "hidden";
60
+ close.addEventListener('click', () => eventClose(body, modal, background));
61
+ } catch (error) {
62
+ toast().error(translate("error_create_modal"), {duration: 5000, relay: 0, fontSize: "16px", error: error});
63
+ }
64
+ };
65
+
66
+ export const modal = (props = {
67
+ html: null,
68
+ isClass: "",
69
+ closed: true,
70
+ styles: {}
71
+ }) => show(props).then();
72
+
73
+ export const Modal = ({
74
+ title = div({}),
75
+ body = div({}),
76
+ btns = div({}),
77
+ className = "",
78
+ styles = {}
79
+ }) => {
80
+ return modal({
81
+ html: div({
82
+ className: "aprog-block-modal",
83
+ value: [
84
+ div({
85
+ className: "aprog-title-modal",
86
+ value: title
87
+ }),
88
+ body,
89
+ div({
90
+ className: "aprog-block-btns-modal",
91
+ value: btns
92
+ })
93
+ ]
94
+ }),
95
+ isClass: className,
96
+ styles: styles
97
+ });
98
+ };
99
+
100
+ export const closeAllModals = () => {
101
+ const modals = document.querySelectorAll(".modal");
102
+ const backgrounds = document.querySelectorAll(".background-modal");
103
+ modals.forEach(item => item.remove());
104
+ backgrounds.forEach(item => item.remove());
105
+ const body = document.querySelector('body');
106
+ body.style.overflow = null;
107
+ };
108
+
109
+ export const closeThisModal = (target) => {
110
+ const modal = target.closest('.modal');
111
+ const background = document.querySelector(`[data-modal-id="${modal.id}"]`);
112
+ modal.remove();
113
+ if (background) {
114
+ background.remove();
115
+ }
116
+ const isModal = document.querySelectorAll(".modal");
117
+ if (isEmpty(isModal)) {
118
+ const body = document.querySelector('body');
119
+ body.style.overflow = null;
120
+ }
121
+ };
package/src/svg.js ADDED
@@ -0,0 +1,172 @@
1
+ export const svg = ({
2
+ fill = "#043458",
3
+ stroke = "#043458",
4
+ w = 24,
5
+ h = 24,
6
+ classes = "",
7
+ id = ""
8
+ } = {}) => {
9
+ return {
10
+ pen: `
11
+ <svg id="${id}" class="${classes}" viewBox="0 0 ${w} ${h}" fill="${fill}" xmlns="http://www.w3.org/2000/svg" stroke="${stroke}">
12
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
13
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
14
+ <g id="SVGRepo_iconCarrier">
15
+ <path d="M11 4H7.2C6.0799 4 5.51984 4 5.09202 4.21799C4.71569 4.40974 4.40973 4.7157 4.21799 5.09202C4 5.51985 4 6.0799 4 7.2V16.8C4 17.9201 4 18.4802 4.21799 18.908C4.40973 19.2843 4.71569 19.5903 5.09202 19.782C5.51984 20 6.0799 20 7.2 20H16.8C17.9201 20 18.4802 20 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V12.5M15.5 5.5L18.3284 8.32843M10.7627 10.2373L17.411 3.58902C18.192 2.80797 19.4584 2.80797 20.2394 3.58902C21.0205 4.37007 21.0205 5.6364 20.2394 6.41745L13.3774 13.2794C12.6158 14.0411 12.235 14.4219 11.8012 14.7247C11.4162 14.9936 11.0009 15.2162 10.564 15.3882C10.0717 15.582 9.54378 15.6885 8.48793 15.9016L8 16L8.04745 15.6678C8.21536 14.4925 8.29932 13.9048 8.49029 13.3561C8.65975 12.8692 8.89125 12.4063 9.17906 11.9786C9.50341 11.4966 9.92319 11.0768 10.7627 10.2373Z" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
16
+ </g>
17
+ </svg>
18
+ `,
19
+
20
+ check: `
21
+ <svg id="${id}" class="${classes}" width="${w}" height="${h}" viewBox="0 0 24 24" fill="${fill}" xmlns="http://www.w3.org/2000/svg" stroke="${stroke}">
22
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
23
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
24
+ <g id="SVGRepo_iconCarrier">
25
+ <path d="M4 12.6111L8.92308 17.5L20 6.5" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
26
+ </g>
27
+ </svg>
28
+ `,
29
+
30
+ close: `
31
+ <svg id="${id}" class="${classes}" width="${w}" height="${h}" viewBox="0 0 24 24" fill="${fill}" xmlns="http://www.w3.org/2000/svg" stroke="${stroke}">
32
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
33
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
34
+ <g id="SVGRepo_iconCarrier">
35
+ <g id="Menu / Close_MD">
36
+ <path id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
37
+ </g>
38
+ </g>
39
+ </svg>
40
+ `,
41
+
42
+ warning: `
43
+ <svg id="${id}" class="${classes}" width="${w}" height="${h}" viewBox="0 0 24 24" fill="${fill}" xmlns="http://www.w3.org/2000/svg">
44
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
45
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
46
+ <g id="SVGRepo_iconCarrier">
47
+ <path d="M12 8V12" stroke="${stroke}" stroke-width="2" stroke-linecap="round"></path>
48
+ <circle cx="12" cy="15" r="1" fill="${stroke}"></circle>
49
+ <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 14.4963 20.1632 16.4284 19 17.9041M3.19284 14C4.05026 18.2984 7.57641 20.5129 9.89856 21.5273C10.62 21.8424 10.9807 22 12 22C13.0193 22 13.38 21.8424 14.1014 21.5273C14.6796 21.2747 15.3324 20.9478 16 20.5328" stroke="${stroke}" stroke-width="2" stroke-linecap="round"></path>
50
+ </g>
51
+ </svg>
52
+ `,
53
+
54
+ loader: `
55
+ <svg id="${id}" class="${classes}" width="${w}" height="${h}" fill="${fill}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 97.541 97.54" xml:space="preserve" stroke="${stroke}">
56
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
57
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
58
+ <g id="SVGRepo_iconCarrier">
59
+ <g>
60
+ <g>
61
+ <g>
62
+ <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>
63
+ <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>
64
+ <path d="M88.158,63.113c-1.328-0.768-2.834-1.172-4.354-1.172c-3.118,0-6.022,1.675-7.579,4.371 c-1.165,2.019-1.477,4.371-0.872,6.625s2.052,4.139,4.069,5.304c1.329,0.769,2.835,1.174,4.357,1.174 c3.116,0,6.02-1.674,7.576-4.369C93.761,70.874,92.327,65.521,88.158,63.113z"></path>
65
+ <path d="M63.316,78.646c-1.07,0-2.13,0.188-3.15,0.558c-2.31,0.841-4.153,2.532-5.193,4.761c-1.039,2.229-1.148,4.729-0.308,7.04 c1.32,3.626,4.798,6.063,8.654,6.063c1.07,0,2.13-0.188,3.147-0.559c2.308-0.841,4.15-2.531,5.191-4.764 c1.04-2.23,1.15-4.73,0.312-7.037C70.651,81.083,67.172,78.646,63.316,78.646z"></path>
66
+ <path d="M39.903,78.757c-1.074-0.39-2.188-0.588-3.31-0.588c-4.054,0-7.71,2.562-9.097,6.375 c-0.886,2.431-0.771,5.06,0.322,7.403c1.092,2.344,3.031,4.121,5.462,5.006c1.072,0.391,2.187,0.587,3.312,0.587 c4.056,0,7.711-2.562,9.097-6.372c0.884-2.426,0.768-5.055-0.326-7.4C44.268,81.42,42.33,79.641,39.903,78.757z"></path>
67
+ <path d="M24.916,65.6c-1.81-3.133-5.183-5.078-8.805-5.078c-1.771,0-3.522,0.472-5.067,1.361c-2.35,1.357-4.03,3.549-4.731,6.166 c-0.703,2.62-0.343,5.357,1.014,7.706c1.81,3.134,5.184,5.08,8.806,5.08c1.77,0,3.521-0.472,5.065-1.362 C26.046,76.674,27.714,70.45,24.916,65.6z"></path>
68
+ <path d="M11.495,54.991c5.158,0,9.555-3.695,10.453-8.786c0.492-2.797-0.133-5.617-1.762-7.94 c-1.627-2.326-4.063-3.878-6.861-4.372c-0.62-0.108-1.247-0.163-1.86-0.163c-5.158,0-9.555,3.694-10.453,8.785 C0.52,45.31,1.145,48.13,2.774,50.456c1.628,2.325,4.065,3.878,6.861,4.371C10.252,54.936,10.878,54.991,11.495,54.991z"></path>
69
+ <path d="M24.849,32.319c2.599,0,5.131-0.923,7.13-2.598c2.268-1.903,3.659-4.58,3.918-7.538c0.259-2.958-0.647-5.836-2.551-8.104 c-2.114-2.52-5.217-3.965-8.511-3.965c-2.603,0-5.135,0.922-7.131,2.597c-2.271,1.906-3.665,4.583-3.923,7.537 c-0.259,2.952,0.648,5.831,2.555,8.104C18.453,30.873,21.555,32.319,24.849,32.319z"></path>
70
+ </g>
71
+ <circle cx="49.955" cy="12.076" r="12.076"></circle>
72
+ </g>
73
+ </g>
74
+ </g>
75
+ </svg>
76
+ `,
77
+
78
+ down: `
79
+ <svg id="${id}" class="${classes}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
80
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
81
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
82
+ <g id="SVGRepo_iconCarrier">
83
+ <path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z"></path>
84
+ </g>
85
+ </svg>
86
+ `,
87
+
88
+ up: `
89
+ <svg id="${id}" class="${classes}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
90
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
91
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
92
+ <g id="SVGRepo_iconCarrier">
93
+ <path d="M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z" fill="${fill}"></path>
94
+ </g>
95
+ </svg>
96
+ `,
97
+
98
+ user: `
99
+ <svg id="${id}" class="${classes}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
100
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
101
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
102
+ <g id="SVGRepo_iconCarrier">
103
+ <circle cx="11" cy="6" r="4" stroke="${stroke}" stroke-width="2"></circle>
104
+ <path d="M17 10.3C17.5207 10.7686 17.8126 11.0314 18.3333 11.5L21 8.5" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
105
+ <path d="M18.9975 18C19 17.8358 19 17.669 19 17.5C19 15.0147 15.4183 13 11 13C6.58172 13 3 15.0147 3 17.5C3 19.9853 3 22 11 22C13.231 22 14.8398 21.8433 16 21.5634" stroke="${stroke}" stroke-width="2" stroke-linecap="round"></path>
106
+ </g>
107
+ </svg>
108
+ `,
109
+
110
+ cloud: `
111
+ <svg id="${id}" class="${classes}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
112
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
113
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
114
+ <g id="SVGRepo_iconCarrier">
115
+ <path d="M22 14.3529C22 17.4717 19.4416 20 16.2857 20H11M14.381 9.02721C14.9767 8.81911 15.6178 8.70588 16.2857 8.70588C16.9404 8.70588 17.5693 8.81468 18.1551 9.01498M7.11616 11.6089C6.8475 11.5567 6.56983 11.5294 6.28571 11.5294C3.91878 11.5294 2 13.4256 2 15.7647C2 18.1038 3.91878 20 6.28571 20H7M7.11616 11.6089C6.88706 10.9978 6.7619 10.3369 6.7619 9.64706C6.7619 6.52827 9.32028 4 12.4762 4C15.4159 4 17.8371 6.19371 18.1551 9.01498M7.11616 11.6089C7.68059 11.7184 8.20528 11.9374 8.66667 12.2426M18.1551 9.01498C18.8381 9.24853 19.4623 9.60648 20 10.0614" stroke="${stroke}" stroke-width="2" stroke-linecap="round"></path>
116
+ </g>
117
+ </svg>
118
+ `,
119
+
120
+ notCloud: `
121
+ <svg id="${id}" class="${classes}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
122
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
123
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
124
+ <g id="SVGRepo_iconCarrier">
125
+ <path d="M22 13.3529C22 16.0599 20.0726 18.3221 17.5 18.8722M6.28571 19C3.91878 19 2 17.1038 2 14.7647C2 12.4256 3.91878 10.5294 6.28571 10.5294C6.56983 10.5294 6.8475 10.5567 7.11616 10.6089M14.381 8.02721C14.9767 7.81911 15.6178 7.70588 16.2857 7.70588C16.9404 7.70588 17.5693 7.81468 18.1551 8.01498M7.11616 10.6089C6.88706 9.9978 6.7619 9.33687 6.7619 8.64706C6.7619 5.52827 9.32028 3 12.4762 3C15.4159 3 17.8371 5.19371 18.1551 8.01498M7.11616 10.6089C7.68059 10.7184 8.20528 10.9374 8.66667 11.2426M18.1551 8.01498C18.8381 8.24853 19.4623 8.60648 20 9.06141" stroke="${stroke}" stroke-width="2" stroke-linecap="round"></path>
126
+ <path d="M13.5 17.5L12 19M12 19L10.5 20.5M12 19L10.5 17.5M12 19L13.5 20.5" stroke="${stroke}" stroke-width="2" stroke-linecap="round"></path>
127
+ </g>
128
+ </svg>
129
+ `,
130
+
131
+ version: `
132
+ <svg id="${id}" class="${classes}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
133
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
134
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
135
+ <g id="SVGRepo_iconCarrier">
136
+ <path d="M11 21H10C6.22876 21 4.34315 21 3.17157 19.8284C2 18.6569 2 16.7712 2 13V11M22 11C22 7.22876 22 5.34315 20.8284 4.17157C19.6569 3 17.7712 3 14 3H10C6.22876 3 4.34315 3 3.17157 4.17157C2.51839 4.82475 2.22937 5.69989 2.10149 7" stroke="${stroke}" stroke-width="2" stroke-linecap="round"></path>
137
+ <path d="M13 17C13 15.1144 13 14.1716 13.5858 13.5858C14.1716 13 15.1144 13 17 13H18C19.8856 13 20.8284 13 21.4142 13.5858C22 14.1716 22 15.1144 22 17C22 18.8856 22 19.8284 21.4142 20.4142C20.8284 21 19.8856 21 18 21H17C15.1144 21 14.1716 21 13.5858 20.4142C13 19.8284 13 18.8856 13 17Z" stroke="${stroke}" stroke-width="2"></path>
138
+ </g>
139
+ </svg>
140
+ `,
141
+
142
+ info: `
143
+ <svg id="${id}" class="${classes}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
144
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
145
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
146
+ <g id="SVGRepo_iconCarrier">
147
+ <path d="M12 17V11" stroke="${stroke}" stroke-width="2" stroke-linecap="round"></path>
148
+ <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="${stroke}"></circle>
149
+ <path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="${stroke}" stroke-width="2" stroke-linecap="round"></path>
150
+ </g>
151
+ </svg>
152
+ `
153
+ }
154
+ };
155
+
156
+ export const icon = {
157
+ sunDark: `<i class="fa-solid fa-sun"></i>`,
158
+ sunLight: `<i class="fa-regular fa-sun"></i>`,
159
+ dollar: `<i class="fa-solid fa-dollar-sign"></i>`,
160
+ visa: `<i class="fa-brands fa-cc-visa"></i>`,
161
+ mastercard: `<i class="fa-brands fa-cc-mastercard"></i>`,
162
+ cash: `<i class="fa-solid fa-hryvnia-sign"></i>`,
163
+ logout: `<i class="fa-solid fa-right-from-bracket"></i>`,
164
+ plus: `<i class="fa-solid fa-plus"></i>`,
165
+ minus: `<i class="fa-solid fa-minus"></i>`,
166
+ transaction: `<i class="fa-solid fa-money-bill-transfer"></i>`,
167
+ card: `<i class="fa-regular fa-credit-card"></i>`,
168
+ receipt: `<i class="fa-solid fa-receipt"></i>`,
169
+ user: `<i class="fa-solid fa-user"></i>`,
170
+ settings: `<i class="fa-solid fa-sliders"></i>`,
171
+ home: `<i class="fa-solid fa-house"></i>`
172
+ }
package/src/translator.js ADDED
@@ -0,0 +1,39 @@
1
+ // Об'єкт для зберігання завантажених перекладів
2
+ import {isEmpty} from "./general.js";
3
+
4
+ const translations = {};
5
+ let translationsLoaded = false;
6
+
7
+ /**
8
+ * Завантаження перекладів із файлів у каталозі ./resources/lang/.
9
+ * @param {string} language - Код мови (наприклад, "uk", "en", "ru").
10
+ */
11
+ export const loadTranslations = async (language = "uk") => {
12
+ try {
13
+ const translationsModule = await import(`../../lang/${language}.json`);
14
+ Object.assign(translations, translationsModule);
15
+ translationsLoaded = true;
16
+ } catch (error) {
17
+ console.error(`Помилка завантаження перекладів для мови "${language}":`, error);
18
+ }
19
+ };
20
+
21
+ /**
22
+ * Отримання перекладу за ключем.
23
+ * @param {string} key - Ключ перекладу.
24
+ * @param {object} values - Об'єкт для підстановки значень у рядок перекладу.
25
+ * @param {string} def - Дефолтне значення.
26
+ * @returns {string} - Перекладений рядок.
27
+ */
28
+ export const translate = (key, values = {}, def = "") => {
29
+ if (!translationsLoaded) {
30
+ console.warn(`Переклади ще не завантажені. Ключ: "${key}"`);
31
+ return !isEmpty(def) ? def : key;
32
+ }
33
+ let translation = translations[key] || key;
34
+ // Замінити підстановки {key} у перекладі
35
+ for (const [placeholder, value] of Object.entries(values)) {
36
+ translation = translation.replace(`:${placeholder}`, value.toString());
37
+ }
38
+ return !isEmpty(def) ? def : translation;
39
+ };