@alexgyver/component 1.2.8 → 1.2.10
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 +13 -17
- package/README.md +1 -3
- 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,7 +23,6 @@ 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}
|
|
@@ -32,7 +30,7 @@ export class Component {
|
|
|
32
30
|
* style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
|
|
33
31
|
* children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
|
|
34
32
|
* child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
|
|
35
|
-
*
|
|
33
|
+
* get - функция, в которую будет отправлен элемент
|
|
36
34
|
* всё остальное будет добавлено как property
|
|
37
35
|
*/
|
|
38
36
|
static make(tag, data = {}, svg = false) {
|
|
@@ -59,16 +57,15 @@ export class Component {
|
|
|
59
57
|
}
|
|
60
58
|
if (!(el instanceof Node) || (typeof data !== 'object')) return el;
|
|
61
59
|
|
|
62
|
-
const
|
|
63
|
-
if ('svg' in data) svg = data.svg;
|
|
60
|
+
const ctx = data.context;
|
|
64
61
|
|
|
65
62
|
let addChild = (obj) => {
|
|
66
63
|
if (!obj) return;
|
|
67
64
|
if (obj instanceof Node) el.appendChild(obj);
|
|
68
65
|
else if (obj instanceof Component) el.appendChild(obj.$root);
|
|
69
66
|
else if (typeof obj === 'object') {
|
|
70
|
-
if (!obj.context) obj.context =
|
|
71
|
-
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');
|
|
72
69
|
if (cmp) el.appendChild(cmp);
|
|
73
70
|
} else if (typeof obj === 'string') {
|
|
74
71
|
el.innerHTML += obj;
|
|
@@ -80,24 +77,22 @@ export class Component {
|
|
|
80
77
|
switch (key) {
|
|
81
78
|
case 'tag':
|
|
82
79
|
case 'context':
|
|
83
|
-
case '
|
|
80
|
+
case 'get':
|
|
84
81
|
continue;
|
|
85
82
|
case 'text': el.textContent = val + ''; break;
|
|
86
83
|
case 'html': el.innerHTML = val; break;
|
|
87
84
|
case 'class': el.classList.add(...val.split(' ')); break;
|
|
88
|
-
case 'also': if (
|
|
89
|
-
case 'export': val[0] = el; break;
|
|
85
|
+
case 'also': if (ctx) val.call(ctx, el); break;
|
|
90
86
|
case 'push': val.push(el); break;
|
|
91
|
-
case 'var': if (
|
|
92
|
-
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;
|
|
93
89
|
case 'parent': if (val) val.appendChild(el); break;
|
|
94
|
-
case 'attrs': for (let attr in val)
|
|
90
|
+
case 'attrs': for (let attr in val) el.setAttribute(attr, val[attr]); break;
|
|
95
91
|
case 'props': for (let prop in val) el[prop] = val[prop]; break;
|
|
96
|
-
case 'child_r': el.replaceChildren();
|
|
92
|
+
case 'child_r': el.replaceChildren(); // fall
|
|
97
93
|
case 'child': addChild(val); break;
|
|
98
|
-
case 'children_r': el.replaceChildren();
|
|
94
|
+
case 'children_r': el.replaceChildren(); // fall
|
|
99
95
|
case 'children': for (const obj of val) addChild(obj); break;
|
|
100
|
-
case 'onrender': waitRender(el, val); break;
|
|
101
96
|
case 'style':
|
|
102
97
|
if (typeof val === 'string') el.style.cssText += (val + ';');
|
|
103
98
|
else for (let st in val) el.style[st] = val[st];
|
|
@@ -105,6 +100,7 @@ export class Component {
|
|
|
105
100
|
default: el[key] = val; break;
|
|
106
101
|
}
|
|
107
102
|
}
|
|
103
|
+
if (data.get && ctx) data.get.call(ctx, el);
|
|
108
104
|
return el;
|
|
109
105
|
}
|
|
110
106
|
|
|
@@ -237,7 +233,7 @@ export async function waitRender(elm, cb = null, ctx = window) {
|
|
|
237
233
|
}
|
|
238
234
|
const obs = new MutationObserver((mut) => {
|
|
239
235
|
if (mut[0].addedNodes.length === 0) return;
|
|
240
|
-
if (Array.prototype.indexOf.call(mut[0].addedNodes,
|
|
236
|
+
if (Array.prototype.indexOf.call(mut[0].addedNodes, e) === -1) return;
|
|
241
237
|
obs.disconnect();
|
|
242
238
|
if (cb) cb(elm);
|
|
243
239
|
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,7 +26,6 @@ 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}
|
|
@@ -35,7 +33,7 @@ Component(tag, data = {}, svg = false);
|
|
|
35
33
|
* style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
|
|
36
34
|
* children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
|
|
37
35
|
* child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
|
|
38
|
-
*
|
|
36
|
+
* get - функция, в которую будет отправлен элемент
|
|
39
37
|
* всё остальное будет добавлено как property
|
|
40
38
|
*/
|
|
41
39
|
Component.make(tag, data = {});
|