@alexgyver/component 1.0.27 → 1.1.1
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 +23 -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;
|
|
@@ -107,7 +112,9 @@ export class Component {
|
|
|
107
112
|
case 'parent': if (val instanceof Node || val instanceof DocumentFragment) val.append(el); break;
|
|
108
113
|
case 'attrs': for (let attr in val) el.setAttribute(attr, val[attr]); break;
|
|
109
114
|
case 'props': for (let prop in val) el[prop] = val[prop]; break;
|
|
115
|
+
case 'child_r': el.replaceChildren();
|
|
110
116
|
case 'child': addChild(val); break;
|
|
117
|
+
case 'children_r': el.replaceChildren();
|
|
111
118
|
case 'children': for (const obj of val) addChild(obj); break;
|
|
112
119
|
case 'style':
|
|
113
120
|
if (typeof val === 'string') el.style.cssText += (val + ';');
|
|
@@ -119,14 +126,22 @@ export class Component {
|
|
|
119
126
|
return el;
|
|
120
127
|
}
|
|
121
128
|
|
|
129
|
+
static configNS(el, data) {
|
|
130
|
+
return Component.config(el, data, true);
|
|
131
|
+
}
|
|
132
|
+
|
|
122
133
|
/**
|
|
123
134
|
* Создать массив компонентов из массива объектов конфигурации
|
|
124
135
|
* @param {array} arr массив объектов конфигурации
|
|
125
136
|
* @returns {array} of Elements
|
|
126
137
|
*/
|
|
127
|
-
static makeArray(arr) {
|
|
138
|
+
static makeArray(arr, ns = false) {
|
|
128
139
|
if (!arr || !Array.isArray(arr)) return [];
|
|
129
|
-
return arr.map(x => Component.make(x.tag, x));
|
|
140
|
+
return arr.map(x => Component.make(x.tag, x, ns));
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
static makeArrayNS(arr) {
|
|
144
|
+
return Component.makeArray(arr, true);
|
|
130
145
|
}
|
|
131
146
|
}
|
|
132
147
|
|