@alexgyver/component 1.2.7 → 1.2.9
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.
- package/Component.js +15 -19
- package/README.md +4 -5
- package/package.json +1 -1
package/Component.js
CHANGED
|
@@ -16,7 +16,6 @@ export class Component {
|
|
|
16
16
|
* @returns {Node}
|
|
17
17
|
* @params
|
|
18
18
|
* tag {string} - тег html элемента (для указания в children например)
|
|
19
|
-
* svg {boolean} - создавать как SVG элемент
|
|
20
19
|
* context {object} - контекст для параметра 'var' и вызовов 'also'
|
|
21
20
|
* text {string} - добавить в textContent
|
|
22
21
|
* html {string} - добавить в innerHTML
|
|
@@ -24,14 +23,14 @@ export class Component {
|
|
|
24
23
|
* props {object} - добавить свойства
|
|
25
24
|
* class {string} - добавить в className
|
|
26
25
|
* also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
|
|
27
|
-
* export {array} - положить в 0 ячейку указанного массива
|
|
28
26
|
* push {array} - добавить к массиву
|
|
29
27
|
* var {string} - создаёт переменную $имя в указанном контексте
|
|
30
28
|
* events {object} - добавляет addEventListener'ы {event: handler}
|
|
31
29
|
* parent - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
|
|
32
30
|
* style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
|
|
33
|
-
* children/children_r - массив DOM, Component, object, html string. _r - заменить
|
|
34
|
-
* child/child_r - DOM, Component, object, html string. _r - заменить
|
|
31
|
+
* children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
|
|
32
|
+
* child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
|
|
33
|
+
* get - функция, в которую будет отправлен элемент
|
|
35
34
|
* всё остальное будет добавлено как property
|
|
36
35
|
*/
|
|
37
36
|
static make(tag, data = {}, svg = false) {
|
|
@@ -46,7 +45,7 @@ export class Component {
|
|
|
46
45
|
|
|
47
46
|
/**
|
|
48
47
|
* Настроить элемент
|
|
49
|
-
* @param {Node} el элемент
|
|
48
|
+
* @param {Node | Array} el элемент или массив элементов
|
|
50
49
|
* @param {object} data параметры
|
|
51
50
|
* @param {object} svg SVG
|
|
52
51
|
* @returns {Node}
|
|
@@ -58,16 +57,15 @@ export class Component {
|
|
|
58
57
|
}
|
|
59
58
|
if (!(el instanceof Node) || (typeof data !== 'object')) return el;
|
|
60
59
|
|
|
61
|
-
const
|
|
62
|
-
if ('svg' in data) svg = data.svg;
|
|
60
|
+
const ctx = data.context;
|
|
63
61
|
|
|
64
62
|
let addChild = (obj) => {
|
|
65
63
|
if (!obj) return;
|
|
66
64
|
if (obj instanceof Node) el.appendChild(obj);
|
|
67
65
|
else if (obj instanceof Component) el.appendChild(obj.$root);
|
|
68
66
|
else if (typeof obj === 'object') {
|
|
69
|
-
if (!obj.context) obj.context =
|
|
70
|
-
let cmp = Component.make(obj.tag ?? 'div', obj, svg ||
|
|
67
|
+
if (!obj.context) obj.context = ctx;
|
|
68
|
+
let cmp = Component.make(obj.tag ?? 'div', obj, svg || obj.tag == 'svg');
|
|
71
69
|
if (cmp) el.appendChild(cmp);
|
|
72
70
|
} else if (typeof obj === 'string') {
|
|
73
71
|
el.innerHTML += obj;
|
|
@@ -79,24 +77,21 @@ export class Component {
|
|
|
79
77
|
switch (key) {
|
|
80
78
|
case 'tag':
|
|
81
79
|
case 'context':
|
|
82
|
-
case '
|
|
80
|
+
case 'get':
|
|
83
81
|
continue;
|
|
84
82
|
case 'text': el.textContent = val + ''; break;
|
|
85
83
|
case 'html': el.innerHTML = val; break;
|
|
86
84
|
case 'class': el.classList.add(...val.split(' ')); break;
|
|
87
|
-
case 'also': if (
|
|
88
|
-
case 'export': val[0] = el; break;
|
|
85
|
+
case 'also': if (ctx) val.call(ctx, el); break;
|
|
89
86
|
case 'push': val.push(el); break;
|
|
90
|
-
case 'var': if (
|
|
91
|
-
case 'events': for (let ev in val)
|
|
87
|
+
case 'var': if (ctx) ctx['$' + val] = el; break;
|
|
88
|
+
case 'events': for (let ev in val) el.addEventListener(ev, val[ev].bind(ctx)); break;
|
|
92
89
|
case 'parent': if (val) val.appendChild(el); break;
|
|
93
|
-
case 'attrs': for (let attr in val)
|
|
90
|
+
case 'attrs': for (let attr in val) el.setAttribute(attr, val[attr]); break;
|
|
94
91
|
case 'props': for (let prop in val) el[prop] = val[prop]; break;
|
|
95
|
-
case 'child_r': el.replaceChildren();
|
|
92
|
+
case 'child_r': case 'children_r': el.replaceChildren();
|
|
96
93
|
case 'child': addChild(val); break;
|
|
97
|
-
case 'children_r': el.replaceChildren();
|
|
98
94
|
case 'children': for (const obj of val) addChild(obj); break;
|
|
99
|
-
case 'onrender': waitRender(el, val); break;
|
|
100
95
|
case 'style':
|
|
101
96
|
if (typeof val === 'string') el.style.cssText += (val + ';');
|
|
102
97
|
else for (let st in val) el.style[st] = val[st];
|
|
@@ -104,6 +99,7 @@ export class Component {
|
|
|
104
99
|
default: el[key] = val; break;
|
|
105
100
|
}
|
|
106
101
|
}
|
|
102
|
+
if (data.get && ctx) data.get.call(ctx, el);
|
|
107
103
|
return el;
|
|
108
104
|
}
|
|
109
105
|
|
|
@@ -236,7 +232,7 @@ export async function waitRender(elm, cb = null, ctx = window) {
|
|
|
236
232
|
}
|
|
237
233
|
const obs = new MutationObserver((mut) => {
|
|
238
234
|
if (mut[0].addedNodes.length === 0) return;
|
|
239
|
-
if (Array.prototype.indexOf.call(mut[0].addedNodes,
|
|
235
|
+
if (Array.prototype.indexOf.call(mut[0].addedNodes, e) === -1) return;
|
|
240
236
|
obs.disconnect();
|
|
241
237
|
if (cb) cb(elm);
|
|
242
238
|
res(elm);
|
package/README.md
CHANGED
|
@@ -19,7 +19,6 @@ Component(tag, data = {}, svg = false);
|
|
|
19
19
|
* @param {object} data параметры
|
|
20
20
|
* @returns {Node}
|
|
21
21
|
* tag {string} - тег html элемента (для указания в children например)
|
|
22
|
-
* svg {boolean} - создавать как SVG элемент
|
|
23
22
|
* context {object} - контекст для параметра 'var' и вызовов 'also'
|
|
24
23
|
* text {string} - добавить в textContent
|
|
25
24
|
* html {string} - добавить в innerHTML
|
|
@@ -27,14 +26,14 @@ Component(tag, data = {}, svg = false);
|
|
|
27
26
|
* props {object} - добавить свойства
|
|
28
27
|
* class {string} - добавить в className
|
|
29
28
|
* also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
|
|
30
|
-
* export {array} - положить в 0 ячейку указанного массива
|
|
31
29
|
* push {array} - добавить к массиву
|
|
32
30
|
* var {string} - создаёт переменную $имя в указанном контексте
|
|
33
31
|
* events {object} - добавляет addEventListener'ы {event: handler}
|
|
34
32
|
* parent - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
|
|
35
33
|
* style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
|
|
36
|
-
* children/children_r - массив DOM, Component, object, html string. _r - заменить
|
|
37
|
-
* child/child_r - DOM, Component, object, html string. _r - заменить
|
|
34
|
+
* children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
|
|
35
|
+
* child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
|
|
36
|
+
* get - функция, в которую будет отправлен элемент
|
|
38
37
|
* всё остальное будет добавлено как property
|
|
39
38
|
*/
|
|
40
39
|
Component.make(tag, data = {});
|
|
@@ -51,7 +50,7 @@ Component.makeShadow(host, data = {}, sheet = null);
|
|
|
51
50
|
|
|
52
51
|
/**
|
|
53
52
|
* Настроить элемент
|
|
54
|
-
* @param {Node} el элемент
|
|
53
|
+
* @param {Node | Array} el элемент или массив элементов
|
|
55
54
|
* @param {object} data параметры
|
|
56
55
|
* @returns {Node}
|
|
57
56
|
*/
|