@brandup/ui-dom 1.0.44 → 2.0.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/README.md +9 -45
- package/dist/cjs/index.js +6 -226
- package/dist/cjs/index.js.map +1 -1
- package/dist/mjs/index.js +1 -230
- package/dist/mjs/index.js.map +1 -1
- package/dist/types.d.ts +1 -59
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -1,55 +1,19 @@
|
|
|
1
1
|
# brandup-ui-dom
|
|
2
2
|
|
|
3
|
-
[
|
|
3
|
+
> **⚠️ Deprecated.** This package has been merged into [`@brandup/ui`](https://www.npmjs.com/package/@brandup/ui).
|
|
4
|
+
> It now only re-exports `@brandup/ui` for backward compatibility and will not receive further updates.
|
|
4
5
|
|
|
5
|
-
##
|
|
6
|
+
## Migration
|
|
6
7
|
|
|
7
|
-
Install
|
|
8
|
+
Install `@brandup/ui` and update your imports:
|
|
8
9
|
|
|
10
|
+
```diff
|
|
11
|
+
- import { DOM } from "@brandup/ui-dom";
|
|
12
|
+
+ import { DOM } from "@brandup/ui";
|
|
9
13
|
```
|
|
10
|
-
npm i @brandup/ui-dom@latest
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## DOM helper
|
|
14
|
-
|
|
15
|
-
Методы для простой работы с DOM моделью.
|
|
16
14
|
|
|
17
15
|
```
|
|
18
|
-
|
|
19
|
-
static getElementById(id: string): HTMLElement | null;
|
|
20
|
-
static getElementByClass(parentElement: Element, className: string): HTMLElement | null;
|
|
21
|
-
static getElementByName(name: string): HTMLElement | null;
|
|
22
|
-
static getElementByTagName(parentElement: Element, tagName: string): HTMLElement | null;
|
|
23
|
-
static getElementsByTagName(parentElement: Element, tagName: string);
|
|
24
|
-
static queryElement(parentElement: Element, query: string): HTMLElement | null;
|
|
25
|
-
static queryElements(parentElement: Element, query: string): NodeListOf<HTMLElement>;
|
|
26
|
-
static nextElementByClass(currentElement: Element, className: string): HTMLElement | null;
|
|
27
|
-
static prevElementByClass(currentElement: Element, className: string): HTMLElement | null;
|
|
28
|
-
static prevElement(currentElement: Element): HTMLElement | null;
|
|
29
|
-
static nextElement(currentElement: Element): HTMLElement | null;
|
|
30
|
-
|
|
31
|
-
static tag(tagName: string, options?: ElementOptions | string, children?: ((elem: Element) => void) | Element | string | Array<Element | string | ((parent: Element) => Element)>): HTMLElement
|
|
32
|
-
|
|
33
|
-
static addClass(container: Element, selectors: string, className: string)
|
|
34
|
-
static removeClass(container: Element, selectors: string, className: string);
|
|
35
|
-
|
|
36
|
-
static empty(element: Element);
|
|
37
|
-
}
|
|
16
|
+
npm i @brandup/ui@latest
|
|
38
17
|
```
|
|
39
18
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
```
|
|
43
|
-
DOM.tag("div", "css class name")
|
|
44
|
-
DOM.tag("div", "css class name", "<p>test</p>")
|
|
45
|
-
DOM.tag("div", "css class name", DOM.tag("p", null, "test"))
|
|
46
|
-
DOM.tag("div", {
|
|
47
|
-
id?: string,
|
|
48
|
-
dataset?: ElementData;
|
|
49
|
-
styles?: ElementStyles;
|
|
50
|
-
class?: string | Array<string>;
|
|
51
|
-
events?: { [name: string]: EventListenerOrEventListenerObject };
|
|
52
|
-
command?: string;
|
|
53
|
-
[name: string]: string | number | boolean | object;
|
|
54
|
-
})
|
|
55
|
-
```
|
|
19
|
+
The `DOM` helper and all element types (`ElementOptions`, `CssClass`, `TagChildrenLike`, ...) are unchanged — see the [`@brandup/ui` README](../brandup-ui/README.md#dom-helpers) for documentation.
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,233 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
if (!cssClass)
|
|
5
|
-
return;
|
|
6
|
-
if (!Array.isArray(cssClass))
|
|
7
|
-
cssClass = cssClass.split(' ');
|
|
8
|
-
elem.classList.add(...cssClass);
|
|
9
|
-
};
|
|
10
|
-
const removeCssClass = (elem, cssClass) => {
|
|
11
|
-
if (!cssClass)
|
|
12
|
-
return;
|
|
13
|
-
if (!Array.isArray(cssClass))
|
|
14
|
-
cssClass = cssClass.split(' ');
|
|
15
|
-
elem.classList.remove(...cssClass);
|
|
16
|
-
};
|
|
17
|
-
var helpers = {
|
|
18
|
-
addCssClass,
|
|
19
|
-
removeCssClass
|
|
20
|
-
};
|
|
3
|
+
var ui = require('@brandup/ui');
|
|
21
4
|
|
|
22
|
-
function getById(id) {
|
|
23
|
-
return document.getElementById(id);
|
|
24
|
-
}
|
|
25
|
-
function getByClass(container, className) {
|
|
26
|
-
const elements = container.getElementsByClassName(className);
|
|
27
|
-
if (elements.length === 0)
|
|
28
|
-
return null;
|
|
29
|
-
return elements.item(0);
|
|
30
|
-
}
|
|
31
|
-
function getByName(name) {
|
|
32
|
-
const elements = document.getElementsByName(name);
|
|
33
|
-
if (elements.length === 0)
|
|
34
|
-
return null;
|
|
35
|
-
return elements.item(0);
|
|
36
|
-
}
|
|
37
|
-
function getElementByTagName(container, tagName) {
|
|
38
|
-
const elements = container.getElementsByTagName(tagName);
|
|
39
|
-
if (elements.length === 0)
|
|
40
|
-
return null;
|
|
41
|
-
return elements.item(0);
|
|
42
|
-
}
|
|
43
|
-
function getElementsByTagName(container, tagName) {
|
|
44
|
-
return container.getElementsByTagName(tagName);
|
|
45
|
-
}
|
|
46
|
-
function queryElement(container, query) {
|
|
47
|
-
return container.querySelector(query);
|
|
48
|
-
}
|
|
49
|
-
function queryElements(container, query) {
|
|
50
|
-
return container.querySelectorAll(query);
|
|
51
|
-
}
|
|
52
|
-
function nextElementByClass(current, className) {
|
|
53
|
-
let elem = current.nextSibling;
|
|
54
|
-
while (elem) {
|
|
55
|
-
if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement && elem.classList.contains(className))
|
|
56
|
-
return elem;
|
|
57
|
-
elem = elem.nextSibling;
|
|
58
|
-
}
|
|
59
|
-
return null;
|
|
60
|
-
}
|
|
61
|
-
function prevElementByClass(current, className) {
|
|
62
|
-
let elem = current.previousSibling;
|
|
63
|
-
while (elem) {
|
|
64
|
-
if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement && elem.classList.contains(className))
|
|
65
|
-
return elem;
|
|
66
|
-
elem = elem.previousSibling;
|
|
67
|
-
}
|
|
68
|
-
return null;
|
|
69
|
-
}
|
|
70
|
-
function prevElement(current) {
|
|
71
|
-
let elem = current.previousSibling;
|
|
72
|
-
while (elem) {
|
|
73
|
-
if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement)
|
|
74
|
-
return elem;
|
|
75
|
-
elem = elem.previousSibling;
|
|
76
|
-
}
|
|
77
|
-
return null;
|
|
78
|
-
}
|
|
79
|
-
function nextElement(current) {
|
|
80
|
-
let elem = current.nextSibling;
|
|
81
|
-
while (elem) {
|
|
82
|
-
if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement)
|
|
83
|
-
return elem;
|
|
84
|
-
elem = elem.nextSibling;
|
|
85
|
-
}
|
|
86
|
-
return null;
|
|
87
|
-
}
|
|
88
|
-
function addClass(container, selectors, cssClass) {
|
|
89
|
-
if (!container || !cssClass)
|
|
90
|
-
return;
|
|
91
|
-
const nodes = container.querySelectorAll(selectors);
|
|
92
|
-
nodes.forEach(node => helpers.addCssClass(node, cssClass));
|
|
93
|
-
}
|
|
94
|
-
function removeClass(container, selectors, cssClass) {
|
|
95
|
-
if (!container || !cssClass)
|
|
96
|
-
return;
|
|
97
|
-
const nodes = container.querySelectorAll(selectors);
|
|
98
|
-
nodes.forEach(elem => helpers.removeCssClass(elem, cssClass));
|
|
99
|
-
}
|
|
100
|
-
function empty(container) {
|
|
101
|
-
if (!container)
|
|
102
|
-
return;
|
|
103
|
-
while (container.hasChildNodes()) {
|
|
104
|
-
if (container.firstChild)
|
|
105
|
-
container.removeChild(container.firstChild);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
5
|
|
|
109
|
-
var DomHelpers = /*#__PURE__*/Object.freeze({
|
|
110
|
-
__proto__: null,
|
|
111
|
-
addClass: addClass,
|
|
112
|
-
empty: empty,
|
|
113
|
-
getByClass: getByClass,
|
|
114
|
-
getById: getById,
|
|
115
|
-
getByName: getByName,
|
|
116
|
-
getElementByTagName: getElementByTagName,
|
|
117
|
-
getElementsByTagName: getElementsByTagName,
|
|
118
|
-
nextElement: nextElement,
|
|
119
|
-
nextElementByClass: nextElementByClass,
|
|
120
|
-
prevElement: prevElement,
|
|
121
|
-
prevElementByClass: prevElementByClass,
|
|
122
|
-
queryElement: queryElement,
|
|
123
|
-
queryElements: queryElements,
|
|
124
|
-
removeClass: removeClass
|
|
125
|
-
});
|
|
126
|
-
|
|
127
|
-
function tag(tagName, options, ...children) {
|
|
128
|
-
const elem = document.createElement(tagName);
|
|
129
|
-
applyOptions(elem, options);
|
|
130
|
-
appendChild(elem, children);
|
|
131
|
-
return elem;
|
|
132
|
-
}
|
|
133
|
-
const applyOptions = (elem, options) => {
|
|
134
|
-
if (!options)
|
|
135
|
-
return;
|
|
136
|
-
if (typeof options === "string" || Array.isArray(options))
|
|
137
|
-
helpers.addCssClass(elem, options);
|
|
138
|
-
else {
|
|
139
|
-
for (const key in options) {
|
|
140
|
-
const value = options[key];
|
|
141
|
-
if (value === undefined)
|
|
142
|
-
continue;
|
|
143
|
-
switch (key) {
|
|
144
|
-
case "id":
|
|
145
|
-
elem.id = value;
|
|
146
|
-
break;
|
|
147
|
-
case "styles": {
|
|
148
|
-
if (value) {
|
|
149
|
-
for (const sKey in value)
|
|
150
|
-
elem.style[sKey] = value[sKey];
|
|
151
|
-
}
|
|
152
|
-
break;
|
|
153
|
-
}
|
|
154
|
-
case "class": {
|
|
155
|
-
helpers.addCssClass(elem, value);
|
|
156
|
-
break;
|
|
157
|
-
}
|
|
158
|
-
case "command": {
|
|
159
|
-
elem.dataset["command"] = value;
|
|
160
|
-
break;
|
|
161
|
-
}
|
|
162
|
-
case "dataset": {
|
|
163
|
-
if (value) {
|
|
164
|
-
for (const dataName in value)
|
|
165
|
-
elem.dataset[dataName] = value[dataName];
|
|
166
|
-
}
|
|
167
|
-
break;
|
|
168
|
-
}
|
|
169
|
-
case "events": {
|
|
170
|
-
if (value) {
|
|
171
|
-
for (const eventName in value)
|
|
172
|
-
elem.addEventListener(eventName, value[eventName]);
|
|
173
|
-
}
|
|
174
|
-
break;
|
|
175
|
-
}
|
|
176
|
-
default: {
|
|
177
|
-
if (value === null)
|
|
178
|
-
elem.setAttribute(key, "");
|
|
179
|
-
else if (typeof value === "object")
|
|
180
|
-
elem.setAttribute(key, JSON.stringify(value));
|
|
181
|
-
else
|
|
182
|
-
elem.setAttribute(key, String(value));
|
|
183
|
-
break;
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
};
|
|
189
|
-
const appendChild = (container, children) => {
|
|
190
|
-
if (children === null || children === undefined)
|
|
191
|
-
return;
|
|
192
|
-
if (children instanceof Array)
|
|
193
|
-
children.forEach(child => appendChild(container, child));
|
|
194
|
-
else if (children instanceof Element)
|
|
195
|
-
container.append(children);
|
|
196
|
-
else if (children instanceof Promise)
|
|
197
|
-
children.then((child) => appendChild(container, child));
|
|
198
|
-
else {
|
|
199
|
-
const typeName = typeof children;
|
|
200
|
-
let html;
|
|
201
|
-
switch (typeName) {
|
|
202
|
-
case "string":
|
|
203
|
-
html = children;
|
|
204
|
-
break;
|
|
205
|
-
case "number":
|
|
206
|
-
case "boolean":
|
|
207
|
-
html = children.toString();
|
|
208
|
-
break;
|
|
209
|
-
case "function":
|
|
210
|
-
const child = children(container);
|
|
211
|
-
appendChild(container, child);
|
|
212
|
-
return;
|
|
213
|
-
default:
|
|
214
|
-
throw new Error(`Not support child type of ${typeName}.`);
|
|
215
|
-
}
|
|
216
|
-
container.insertAdjacentHTML("beforeend", html);
|
|
217
|
-
}
|
|
218
|
-
};
|
|
219
6
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
7
|
+
Object.keys(ui).forEach(function (k) {
|
|
8
|
+
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function () { return ui[k]; }
|
|
11
|
+
});
|
|
225
12
|
});
|
|
226
|
-
|
|
227
|
-
const DOM = {
|
|
228
|
-
...DomHelpers,
|
|
229
|
-
...TagHelpers
|
|
230
|
-
};
|
|
231
|
-
|
|
232
|
-
exports.DOM = DOM;
|
|
233
13
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
package/dist/mjs/index.js
CHANGED
|
@@ -1,231 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
if (!cssClass)
|
|
3
|
-
return;
|
|
4
|
-
if (!Array.isArray(cssClass))
|
|
5
|
-
cssClass = cssClass.split(' ');
|
|
6
|
-
elem.classList.add(...cssClass);
|
|
7
|
-
};
|
|
8
|
-
const removeCssClass = (elem, cssClass) => {
|
|
9
|
-
if (!cssClass)
|
|
10
|
-
return;
|
|
11
|
-
if (!Array.isArray(cssClass))
|
|
12
|
-
cssClass = cssClass.split(' ');
|
|
13
|
-
elem.classList.remove(...cssClass);
|
|
14
|
-
};
|
|
15
|
-
var helpers = {
|
|
16
|
-
addCssClass,
|
|
17
|
-
removeCssClass
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
function getById(id) {
|
|
21
|
-
return document.getElementById(id);
|
|
22
|
-
}
|
|
23
|
-
function getByClass(container, className) {
|
|
24
|
-
const elements = container.getElementsByClassName(className);
|
|
25
|
-
if (elements.length === 0)
|
|
26
|
-
return null;
|
|
27
|
-
return elements.item(0);
|
|
28
|
-
}
|
|
29
|
-
function getByName(name) {
|
|
30
|
-
const elements = document.getElementsByName(name);
|
|
31
|
-
if (elements.length === 0)
|
|
32
|
-
return null;
|
|
33
|
-
return elements.item(0);
|
|
34
|
-
}
|
|
35
|
-
function getElementByTagName(container, tagName) {
|
|
36
|
-
const elements = container.getElementsByTagName(tagName);
|
|
37
|
-
if (elements.length === 0)
|
|
38
|
-
return null;
|
|
39
|
-
return elements.item(0);
|
|
40
|
-
}
|
|
41
|
-
function getElementsByTagName(container, tagName) {
|
|
42
|
-
return container.getElementsByTagName(tagName);
|
|
43
|
-
}
|
|
44
|
-
function queryElement(container, query) {
|
|
45
|
-
return container.querySelector(query);
|
|
46
|
-
}
|
|
47
|
-
function queryElements(container, query) {
|
|
48
|
-
return container.querySelectorAll(query);
|
|
49
|
-
}
|
|
50
|
-
function nextElementByClass(current, className) {
|
|
51
|
-
let elem = current.nextSibling;
|
|
52
|
-
while (elem) {
|
|
53
|
-
if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement && elem.classList.contains(className))
|
|
54
|
-
return elem;
|
|
55
|
-
elem = elem.nextSibling;
|
|
56
|
-
}
|
|
57
|
-
return null;
|
|
58
|
-
}
|
|
59
|
-
function prevElementByClass(current, className) {
|
|
60
|
-
let elem = current.previousSibling;
|
|
61
|
-
while (elem) {
|
|
62
|
-
if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement && elem.classList.contains(className))
|
|
63
|
-
return elem;
|
|
64
|
-
elem = elem.previousSibling;
|
|
65
|
-
}
|
|
66
|
-
return null;
|
|
67
|
-
}
|
|
68
|
-
function prevElement(current) {
|
|
69
|
-
let elem = current.previousSibling;
|
|
70
|
-
while (elem) {
|
|
71
|
-
if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement)
|
|
72
|
-
return elem;
|
|
73
|
-
elem = elem.previousSibling;
|
|
74
|
-
}
|
|
75
|
-
return null;
|
|
76
|
-
}
|
|
77
|
-
function nextElement(current) {
|
|
78
|
-
let elem = current.nextSibling;
|
|
79
|
-
while (elem) {
|
|
80
|
-
if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement)
|
|
81
|
-
return elem;
|
|
82
|
-
elem = elem.nextSibling;
|
|
83
|
-
}
|
|
84
|
-
return null;
|
|
85
|
-
}
|
|
86
|
-
function addClass(container, selectors, cssClass) {
|
|
87
|
-
if (!container || !cssClass)
|
|
88
|
-
return;
|
|
89
|
-
const nodes = container.querySelectorAll(selectors);
|
|
90
|
-
nodes.forEach(node => helpers.addCssClass(node, cssClass));
|
|
91
|
-
}
|
|
92
|
-
function removeClass(container, selectors, cssClass) {
|
|
93
|
-
if (!container || !cssClass)
|
|
94
|
-
return;
|
|
95
|
-
const nodes = container.querySelectorAll(selectors);
|
|
96
|
-
nodes.forEach(elem => helpers.removeCssClass(elem, cssClass));
|
|
97
|
-
}
|
|
98
|
-
function empty(container) {
|
|
99
|
-
if (!container)
|
|
100
|
-
return;
|
|
101
|
-
while (container.hasChildNodes()) {
|
|
102
|
-
if (container.firstChild)
|
|
103
|
-
container.removeChild(container.firstChild);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
var DomHelpers = /*#__PURE__*/Object.freeze({
|
|
108
|
-
__proto__: null,
|
|
109
|
-
addClass: addClass,
|
|
110
|
-
empty: empty,
|
|
111
|
-
getByClass: getByClass,
|
|
112
|
-
getById: getById,
|
|
113
|
-
getByName: getByName,
|
|
114
|
-
getElementByTagName: getElementByTagName,
|
|
115
|
-
getElementsByTagName: getElementsByTagName,
|
|
116
|
-
nextElement: nextElement,
|
|
117
|
-
nextElementByClass: nextElementByClass,
|
|
118
|
-
prevElement: prevElement,
|
|
119
|
-
prevElementByClass: prevElementByClass,
|
|
120
|
-
queryElement: queryElement,
|
|
121
|
-
queryElements: queryElements,
|
|
122
|
-
removeClass: removeClass
|
|
123
|
-
});
|
|
124
|
-
|
|
125
|
-
function tag(tagName, options, ...children) {
|
|
126
|
-
const elem = document.createElement(tagName);
|
|
127
|
-
applyOptions(elem, options);
|
|
128
|
-
appendChild(elem, children);
|
|
129
|
-
return elem;
|
|
130
|
-
}
|
|
131
|
-
const applyOptions = (elem, options) => {
|
|
132
|
-
if (!options)
|
|
133
|
-
return;
|
|
134
|
-
if (typeof options === "string" || Array.isArray(options))
|
|
135
|
-
helpers.addCssClass(elem, options);
|
|
136
|
-
else {
|
|
137
|
-
for (const key in options) {
|
|
138
|
-
const value = options[key];
|
|
139
|
-
if (value === undefined)
|
|
140
|
-
continue;
|
|
141
|
-
switch (key) {
|
|
142
|
-
case "id":
|
|
143
|
-
elem.id = value;
|
|
144
|
-
break;
|
|
145
|
-
case "styles": {
|
|
146
|
-
if (value) {
|
|
147
|
-
for (const sKey in value)
|
|
148
|
-
elem.style[sKey] = value[sKey];
|
|
149
|
-
}
|
|
150
|
-
break;
|
|
151
|
-
}
|
|
152
|
-
case "class": {
|
|
153
|
-
helpers.addCssClass(elem, value);
|
|
154
|
-
break;
|
|
155
|
-
}
|
|
156
|
-
case "command": {
|
|
157
|
-
elem.dataset["command"] = value;
|
|
158
|
-
break;
|
|
159
|
-
}
|
|
160
|
-
case "dataset": {
|
|
161
|
-
if (value) {
|
|
162
|
-
for (const dataName in value)
|
|
163
|
-
elem.dataset[dataName] = value[dataName];
|
|
164
|
-
}
|
|
165
|
-
break;
|
|
166
|
-
}
|
|
167
|
-
case "events": {
|
|
168
|
-
if (value) {
|
|
169
|
-
for (const eventName in value)
|
|
170
|
-
elem.addEventListener(eventName, value[eventName]);
|
|
171
|
-
}
|
|
172
|
-
break;
|
|
173
|
-
}
|
|
174
|
-
default: {
|
|
175
|
-
if (value === null)
|
|
176
|
-
elem.setAttribute(key, "");
|
|
177
|
-
else if (typeof value === "object")
|
|
178
|
-
elem.setAttribute(key, JSON.stringify(value));
|
|
179
|
-
else
|
|
180
|
-
elem.setAttribute(key, String(value));
|
|
181
|
-
break;
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
};
|
|
187
|
-
const appendChild = (container, children) => {
|
|
188
|
-
if (children === null || children === undefined)
|
|
189
|
-
return;
|
|
190
|
-
if (children instanceof Array)
|
|
191
|
-
children.forEach(child => appendChild(container, child));
|
|
192
|
-
else if (children instanceof Element)
|
|
193
|
-
container.append(children);
|
|
194
|
-
else if (children instanceof Promise)
|
|
195
|
-
children.then((child) => appendChild(container, child));
|
|
196
|
-
else {
|
|
197
|
-
const typeName = typeof children;
|
|
198
|
-
let html;
|
|
199
|
-
switch (typeName) {
|
|
200
|
-
case "string":
|
|
201
|
-
html = children;
|
|
202
|
-
break;
|
|
203
|
-
case "number":
|
|
204
|
-
case "boolean":
|
|
205
|
-
html = children.toString();
|
|
206
|
-
break;
|
|
207
|
-
case "function":
|
|
208
|
-
const child = children(container);
|
|
209
|
-
appendChild(container, child);
|
|
210
|
-
return;
|
|
211
|
-
default:
|
|
212
|
-
throw new Error(`Not support child type of ${typeName}.`);
|
|
213
|
-
}
|
|
214
|
-
container.insertAdjacentHTML("beforeend", html);
|
|
215
|
-
}
|
|
216
|
-
};
|
|
217
|
-
|
|
218
|
-
var TagHelpers = /*#__PURE__*/Object.freeze({
|
|
219
|
-
__proto__: null,
|
|
220
|
-
appendChild: appendChild,
|
|
221
|
-
applyOptions: applyOptions,
|
|
222
|
-
tag: tag
|
|
223
|
-
});
|
|
224
|
-
|
|
225
|
-
const DOM = {
|
|
226
|
-
...DomHelpers,
|
|
227
|
-
...TagHelpers
|
|
228
|
-
};
|
|
229
|
-
|
|
230
|
-
export { DOM };
|
|
1
|
+
export * from '@brandup/ui';
|
|
231
2
|
//# sourceMappingURL=index.js.map
|
package/dist/mjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,59 +1 @@
|
|
|
1
|
-
|
|
2
|
-
id?: string;
|
|
3
|
-
class?: CssClass;
|
|
4
|
-
command?: string;
|
|
5
|
-
dataset?: ElementData;
|
|
6
|
-
events?: ElementEvents;
|
|
7
|
-
styles?: ElementStyles;
|
|
8
|
-
[name: string]: string | number | boolean | object | null | undefined;
|
|
9
|
-
}
|
|
10
|
-
type CssClass = string | string[];
|
|
11
|
-
interface ElementData {
|
|
12
|
-
[name: string]: string | undefined;
|
|
13
|
-
}
|
|
14
|
-
type ElementEvents = {
|
|
15
|
-
[Name in keyof HTMLElementEventMap as `${Lowercase<string & Name>}`]?: (e: HTMLElementEventMap[Name]) => void;
|
|
16
|
-
};
|
|
17
|
-
type ElementStyles = Partial<CSSStyleDeclaration>;
|
|
18
|
-
type TagChildrenLike = TagChildrenPrimitive | Promise<TagChildrenPrimitive> | ((elem: HTMLElement) => Promise<TagChildrenPrimitive> | Promise<TagChildrenPrimitive[]> | TagChildrenPrimitive | TagChildrenPrimitive[] | void) | Array<TagChildrenLike>;
|
|
19
|
-
type TagChildrenPrimitive = Element | string | number | null | undefined;
|
|
20
|
-
|
|
21
|
-
declare function getById<TElement extends HTMLElement = HTMLElement>(id: string): TElement | null;
|
|
22
|
-
declare function getByClass<TElement extends HTMLElement = HTMLElement>(container: Element, className: string): TElement | null;
|
|
23
|
-
declare function getByName<TElement extends HTMLElement = HTMLElement>(name: string): TElement | null;
|
|
24
|
-
declare function getElementByTagName<TElement extends HTMLElement = HTMLElement>(container: Element, tagName: string): TElement | null;
|
|
25
|
-
declare function getElementsByTagName(container: Element, tagName: string): HTMLCollectionOf<Element>;
|
|
26
|
-
declare function queryElement<TElement extends HTMLElement = HTMLElement>(container: Element, query: string): TElement | null;
|
|
27
|
-
declare function queryElements<TElement extends HTMLElement = HTMLElement>(container: Element, query: string): NodeListOf<TElement>;
|
|
28
|
-
declare function nextElementByClass<TElement extends HTMLElement = HTMLElement>(current: Element, className: string): TElement | null;
|
|
29
|
-
declare function prevElementByClass<TElement extends HTMLElement = HTMLElement>(current: Element, className: string): TElement | null;
|
|
30
|
-
declare function prevElement<TElement extends HTMLElement = HTMLElement>(current: Element): TElement | null;
|
|
31
|
-
declare function nextElement<TElement extends HTMLElement = HTMLElement>(current: Element): TElement | null;
|
|
32
|
-
declare function addClass(container: Element | null | undefined, selectors: string, cssClass: CssClass): void;
|
|
33
|
-
declare function removeClass(container: Element | null | undefined, selectors: string, cssClass: CssClass): void;
|
|
34
|
-
declare function empty(container: Element | null | undefined): void;
|
|
35
|
-
|
|
36
|
-
declare function tag<TElement extends keyof HTMLElementTagNameMap>(tagName: TElement, options?: ElementOptions | CssClass | null, ...children: TagChildrenLike[]): HTMLElementTagNameMap[TElement];
|
|
37
|
-
|
|
38
|
-
declare const DOM: {
|
|
39
|
-
tag: typeof tag;
|
|
40
|
-
applyOptions: (elem: HTMLElement, options?: ElementOptions | CssClass | null) => void;
|
|
41
|
-
appendChild: (container: HTMLElement, children?: TagChildrenLike) => void;
|
|
42
|
-
getById: typeof getById;
|
|
43
|
-
getByClass: typeof getByClass;
|
|
44
|
-
getByName: typeof getByName;
|
|
45
|
-
getElementByTagName: typeof getElementByTagName;
|
|
46
|
-
getElementsByTagName: typeof getElementsByTagName;
|
|
47
|
-
queryElement: typeof queryElement;
|
|
48
|
-
queryElements: typeof queryElements;
|
|
49
|
-
nextElementByClass: typeof nextElementByClass;
|
|
50
|
-
prevElementByClass: typeof prevElementByClass;
|
|
51
|
-
prevElement: typeof prevElement;
|
|
52
|
-
nextElement: typeof nextElement;
|
|
53
|
-
addClass: typeof addClass;
|
|
54
|
-
removeClass: typeof removeClass;
|
|
55
|
-
empty: typeof empty;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export { DOM };
|
|
59
|
-
export type { CssClass, ElementData, ElementEvents, ElementOptions, ElementStyles, TagChildrenLike, TagChildrenPrimitive };
|
|
1
|
+
export * from '@brandup/ui';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brandup/ui-dom",
|
|
3
|
-
"description": "
|
|
3
|
+
"description": "DEPRECATED: merged into @brandup/ui. This package only re-exports @brandup/ui for backward compatibility.",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"brandup",
|
|
6
6
|
"typescript",
|
|
@@ -21,7 +21,10 @@
|
|
|
21
21
|
"email": "it@brandup.online"
|
|
22
22
|
},
|
|
23
23
|
"license": "Apache-2.0",
|
|
24
|
-
"version": "
|
|
24
|
+
"version": "2.0.1",
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"@brandup/ui": "^2.0.1"
|
|
27
|
+
},
|
|
25
28
|
"main": "dist/cjs/index.js",
|
|
26
29
|
"module": "dist/mjs/index.js",
|
|
27
30
|
"types": "dist/types.d.ts",
|