@alexgyver/component 1.0.27 → 1.1.0
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 +21 -8
- package/package.json +1 -1
package/Component.js
CHANGED
|
@@ -4,9 +4,9 @@ export class Component {
|
|
|
4
4
|
* @param {string} tag html tag элемента
|
|
5
5
|
* @param {object} data параметры
|
|
6
6
|
*/
|
|
7
|
-
constructor(tag, data = {}) {
|
|
7
|
+
constructor(tag, data = {}, ns = false) {
|
|
8
8
|
data.context = this;
|
|
9
|
-
this.$root = Component.make(tag, data);
|
|
9
|
+
this.$root = Component.make(tag, data, ns);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
/**
|
|
@@ -32,10 +32,14 @@ export class Component {
|
|
|
32
32
|
* child - DOM, Component, object, html string
|
|
33
33
|
* всё остальное будет добавлено как property
|
|
34
34
|
*/
|
|
35
|
-
static make(tag, data = {}) {
|
|
35
|
+
static make(tag, data = {}, ns = false) {
|
|
36
36
|
if (!tag || typeof data !== 'object') return null;
|
|
37
37
|
if (data instanceof Node) return data;
|
|
38
|
-
return Component.config(document.createElement(tag), data);
|
|
38
|
+
return Component.config(ns ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag), data, ns);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
static makeNS(tag, data = {}) {
|
|
42
|
+
return Component.make(tag, data, true);
|
|
39
43
|
}
|
|
40
44
|
|
|
41
45
|
/**
|
|
@@ -72,9 +76,10 @@ export class Component {
|
|
|
72
76
|
* Настроить элемент
|
|
73
77
|
* @param {Node} el элемент
|
|
74
78
|
* @param {object} data параметры
|
|
79
|
+
* @param {object} ns NS
|
|
75
80
|
* @returns {Node}
|
|
76
81
|
*/
|
|
77
|
-
static config(el, data) {
|
|
82
|
+
static config(el, data, ns = false) {
|
|
78
83
|
if (!(el instanceof Node) || (typeof data !== 'object')) return el;
|
|
79
84
|
const context = data.context;
|
|
80
85
|
|
|
@@ -84,7 +89,7 @@ export class Component {
|
|
|
84
89
|
else if (obj instanceof Component) el.appendChild(obj.$root);
|
|
85
90
|
else if (typeof obj === 'object') {
|
|
86
91
|
if (!obj.context) obj.context = context;
|
|
87
|
-
let cmp = Component.make(obj.tag, obj);
|
|
92
|
+
let cmp = Component.make(obj.tag, obj, ns);
|
|
88
93
|
if (cmp) el.appendChild(cmp);
|
|
89
94
|
} else if (typeof obj === 'string') {
|
|
90
95
|
el.innerHTML += obj;
|
|
@@ -119,14 +124,22 @@ export class Component {
|
|
|
119
124
|
return el;
|
|
120
125
|
}
|
|
121
126
|
|
|
127
|
+
static configNS(el, data) {
|
|
128
|
+
return Component.config(el, data, true);
|
|
129
|
+
}
|
|
130
|
+
|
|
122
131
|
/**
|
|
123
132
|
* Создать массив компонентов из массива объектов конфигурации
|
|
124
133
|
* @param {array} arr массив объектов конфигурации
|
|
125
134
|
* @returns {array} of Elements
|
|
126
135
|
*/
|
|
127
|
-
static makeArray(arr) {
|
|
136
|
+
static makeArray(arr, ns = false) {
|
|
128
137
|
if (!arr || !Array.isArray(arr)) return [];
|
|
129
|
-
return arr.map(x => Component.make(x.tag, x));
|
|
138
|
+
return arr.map(x => Component.make(x.tag, x, ns));
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
static makeArrayNS(arr) {
|
|
142
|
+
return Component.makeArray(arr, true);
|
|
130
143
|
}
|
|
131
144
|
}
|
|
132
145
|
|