@alexgyver/component 1.0.1 → 1.0.2

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 (2) hide show
  1. package/component.js +29 -18
  2. package/package.json +19 -19
package/component.js CHANGED
@@ -1,6 +1,9 @@
1
1
  export class Sheet {
2
2
  /**
3
3
  * @abstract Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
4
+ * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
5
+ * @param {string} id уникальный id стиля
6
+ * @param {boolean} ext внешний стиль - может быть удалён по id
4
7
  */
5
8
  static addStyle(style, id, ext = false) {
6
9
  if (!style || !id) return;
@@ -37,6 +40,7 @@ export class Sheet {
37
40
 
38
41
  /**
39
42
  * @abstract Удалить ext стиль по его id
43
+ * @param {string} id id стиля
40
44
  */
41
45
  static removeStyle(id) {
42
46
  if (Sheet.#external.has(id)) {
@@ -67,13 +71,13 @@ export class Component {
67
71
  /*
68
72
  context - контекст для параметра 'make' и вызовов 'also'
69
73
  also - вызвать с текущим компонентом: { ... , also(el) { console.log('123'); }, }
70
- makevar - создаёт переменную $name в указанном контексте
71
- style - object: { padding: '0px', ... }
74
+ var - создаёт переменную $name в указанном контексте
75
+ style - string или object: { padding: '0px', ... }
72
76
  events - object
73
- children - DOM, Component или параметры как object
77
+ children - массив DOM, Component, object, html string
74
78
  */
75
79
  /**
76
- * @abstract Создать компонент и поместить его в переменную $root
80
+ * @abstract Создать компонент
77
81
  * @param {string} tag html tag элемента
78
82
  * @param {object} data параметры
79
83
  * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
@@ -87,28 +91,35 @@ export class Component {
87
91
  const context = data.context;
88
92
  const $el = document.createElement(tag);
89
93
 
90
- for (const [key, value] of Object.entries(data)) {
94
+ for (const [key, val] of Object.entries(data)) {
91
95
  switch (key) {
92
- case 'context': case 'tag': continue;
93
- case 'text': $el.textContent = value; break;
94
- case 'html': $el.innerHTML = value; break;
95
- case 'class': $el.className = value; break;
96
- case 'also': if (context) value.call(context, $el); break;
97
- case 'makevar': if (context) context['$' + value] = $el; break;
98
- case 'style': for (const [skey, sval] of Object.entries(value)) $el.style[skey] = sval; break;
99
- case 'events': for (const [ev, handler] of Object.entries(value)) $el.addEventListener(ev, handler.bind(context)); break;
96
+ case 'context':
97
+ case 'tag':
98
+ continue;
99
+ case 'text': $el.textContent = val; break;
100
+ case 'html': $el.innerHTML = val; break;
101
+ case 'class': $el.className = val; break;
102
+ case 'also': if (context) val.call(context, $el); break;
103
+ case 'var': if (context) context['$' + val] = $el; break;
104
+ case 'events': for (const [ev, handler] of Object.entries(val)) $el.addEventListener(ev, handler.bind(context)); break;
105
+ case 'style':
106
+ if (typeof val === 'string') $el.style = val + ';';
107
+ else for (const [skey, sval] of Object.entries(val)) $el.style[skey] = sval;
108
+ break;
100
109
  case 'children':
101
- for (const obj of value) {
102
- if (obj instanceof Element || obj instanceof HTMLDocument) $el.appendChild(obj);
110
+ for (const obj of val) {
111
+ if (obj instanceof Node) $el.appendChild(obj);
103
112
  else if (obj instanceof Component) $el.appendChild(obj.$root);
104
113
  else if (typeof obj === 'object') {
105
114
  if (!obj.context) obj.context = context;
106
- let comp = Component.make(obj.tag, obj);
107
- if (comp) $el.appendChild(comp);
115
+ let cmp = Component.make(obj.tag, obj);
116
+ if (cmp) $el.appendChild(cmp);
117
+ } else if (typeof obj === 'string') {
118
+ $el.innerHTML += obj;
108
119
  }
109
120
  }
110
121
  break;
111
- default: $el[key] = value; break;
122
+ default: $el[key] = val; break;
112
123
  }
113
124
  }
114
125
  return $el;
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
- {
2
- "name": "@alexgyver/component",
3
- "version": "1.0.1",
4
- "description": "Simple HTML element builder",
5
- "main": "component.js",
6
- "type": "module",
7
- "scripts": {
8
- "test": "echo \"Error: no test specified\" && exit 1"
9
- },
10
- "repository": {
11
- "type": "git",
12
- "url": "git+https://github.com/GyverLibs/Component.js.git"
13
- },
14
- "author": "AlexGyver <alex@alexgyver.ru>",
15
- "license": "MIT",
16
- "bugs": {
17
- "url": "https://github.com/GyverLibs/Component.js/issues"
18
- },
19
- "homepage": "https://github.com/GyverLibs/Component.js#readme"
1
+ {
2
+ "name": "@alexgyver/component",
3
+ "version": "1.0.2",
4
+ "description": "Simple HTML element builder",
5
+ "main": "component.js",
6
+ "type": "module",
7
+ "scripts": {
8
+ "test": "echo \"Error: no test specified\" && exit 1"
9
+ },
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/GyverLibs/Component.js.git"
13
+ },
14
+ "author": "AlexGyver <alex@alexgyver.ru>",
15
+ "license": "MIT",
16
+ "bugs": {
17
+ "url": "https://github.com/GyverLibs/Component.js/issues"
18
+ },
19
+ "homepage": "https://github.com/GyverLibs/Component.js#readme"
20
20
  }