native-document 1.0.93 → 1.0.94
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/elements.js +1 -0
- package/index.def.js +350 -0
- package/package.json +1 -1
- package/src/core/elements/content-formatter.js +138 -1
- package/src/core/elements/control/for-each-array.js +1 -1
- package/src/core/elements/control/for-each.js +1 -1
- package/src/core/elements/control/show-if.js +3 -3
- package/src/core/elements/control/show-when.js +2 -2
- package/src/core/elements/control/switch.js +1 -1
- package/src/core/elements/description-list.js +14 -0
- package/src/core/elements/form.js +188 -4
- package/src/core/elements/html5-semantics.js +44 -1
- package/src/core/elements/img.js +22 -10
- package/src/core/elements/index.js +5 -0
- package/src/core/elements/interactive.js +19 -1
- package/src/core/elements/list.js +28 -1
- package/src/core/elements/medias.js +29 -0
- package/src/core/elements/meta-data.js +34 -0
- package/src/core/elements/table.js +59 -0
- package/src/core/utils/helpers.js +7 -2
- package/src/core/utils/memoize.js +1 -1
- package/src/core/wrappers/HtmlElementWrapper.js +2 -2
- package/src/core/wrappers/NDElement.js +1 -1
- package/src/core/wrappers/TemplateCloner.js +1 -1
- package/types/elements.d.ts +495 -113
- package/types/forms.d.ts +85 -48
- package/types/images.d.ts +16 -9
package/elements.js
CHANGED
package/index.def.js
ADDED
|
@@ -0,0 +1,350 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview JSDoc type definitions for NativeDocument HTML elements.
|
|
3
|
+
* Provides IDE autocomplete for element attributes.
|
|
4
|
+
* Compound attribute names are listed in both their original (lowercase)
|
|
5
|
+
* and camelCase forms so both conventions trigger autocomplete.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
// ─────────────────────────────────────────────
|
|
9
|
+
// Base types
|
|
10
|
+
// ─────────────────────────────────────────────
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* An ObservableItem or a raw value.
|
|
14
|
+
* @template T
|
|
15
|
+
* @typedef {import('./native-document.dev').ObservableItem | T} Observable
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* A valid child — string, number, boolean, HTMLElement, DocumentFragment,
|
|
20
|
+
* ObservableItem, NDElement, or an array of those.
|
|
21
|
+
* @typedef {string|number|boolean|HTMLElement|DocumentFragment|ObservableItem|NDElement|Array} NdChild
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Reactive class binding — maps class names to observable or plain booleans.
|
|
26
|
+
* @typedef {Object.<string, Observable<boolean>|boolean>} NdClassMap
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Reactive style binding — maps CSS property names to observable or plain strings.
|
|
31
|
+
* @typedef {Object.<string, Observable<string>|string>} NdStyleMap
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
// ─────────────────────────────────────────────
|
|
35
|
+
// Shared attribute sets
|
|
36
|
+
// ─────────────────────────────────────────────
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Global HTML attributes shared by all elements.
|
|
40
|
+
* @typedef {Object} GlobalAttributes
|
|
41
|
+
* @property {Observable<string>|string} [id] - Unique identifier
|
|
42
|
+
* @property {Observable<string>|NdClassMap|string} [class] - CSS classes (string or reactive map)
|
|
43
|
+
* @property {Observable<NdStyleMap>|NdStyleMap} [style] - Inline styles
|
|
44
|
+
* @property {string} [title] - Tooltip text
|
|
45
|
+
* @property {string} [lang] - Language code
|
|
46
|
+
* @property {string} [dir] - Text direction: 'ltr'|'rtl'|'auto'
|
|
47
|
+
* @property {Observable<boolean>|boolean} [hidden] - Hide element
|
|
48
|
+
* @property {Observable<boolean>|boolean} [draggable] - Make element draggable
|
|
49
|
+
* @property {Observable<boolean>|boolean} [contenteditable] - Make content editable
|
|
50
|
+
* @property {Observable<boolean>|boolean} [contentEditable] - Make content editable (camelCase)
|
|
51
|
+
* @property {string} [tabindex] - Tab order
|
|
52
|
+
* @property {string} [tabIndex] - Tab order (camelCase)
|
|
53
|
+
* @property {string} [accesskey] - Keyboard shortcut
|
|
54
|
+
* @property {string} [accessKey] - Keyboard shortcut (camelCase)
|
|
55
|
+
* @property {Observable<boolean>|boolean} [spellcheck] - Enable spellcheck
|
|
56
|
+
* @property {Observable<boolean>|boolean} [spellCheck] - Enable spellcheck (camelCase)
|
|
57
|
+
* @property {string} [data-*] - Custom data attributes
|
|
58
|
+
* @property {string} [aria-*] - ARIA accessibility attributes
|
|
59
|
+
* @property {string} [role] - ARIA role
|
|
60
|
+
*/
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* Attributes shared by form-related elements.
|
|
64
|
+
* @typedef {Object} SharedFormAttributes
|
|
65
|
+
* @property {string} [name] - Field name
|
|
66
|
+
* @property {Observable<boolean>|boolean} [disabled] - Disable the field
|
|
67
|
+
* @property {Observable<boolean>|boolean} [required] - Mark as required
|
|
68
|
+
* @property {Observable<boolean>|boolean} [autofocus] - Auto-focus on page load
|
|
69
|
+
* @property {Observable<boolean>|boolean} [autoFocus] - Auto-focus on page load (camelCase)
|
|
70
|
+
* @property {string} [form] - Associated form id
|
|
71
|
+
*/
|
|
72
|
+
|
|
73
|
+
// ─────────────────────────────────────────────
|
|
74
|
+
// Element-specific attribute types
|
|
75
|
+
// ─────────────────────────────────────────────
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* @typedef {GlobalAttributes & {
|
|
79
|
+
* src: Observable<string>|string,
|
|
80
|
+
* alt: Observable<string>|string,
|
|
81
|
+
* width: Observable<string>|string|number,
|
|
82
|
+
* height: Observable<string>|string|number,
|
|
83
|
+
* loading: 'lazy'|'eager'|'auto',
|
|
84
|
+
* decoding: 'async'|'sync'|'auto',
|
|
85
|
+
* srcset: string,
|
|
86
|
+
* srcSet: string,
|
|
87
|
+
* sizes: string,
|
|
88
|
+
* crossorigin: 'anonymous'|'use-credentials',
|
|
89
|
+
* crossOrigin: 'anonymous'|'use-credentials',
|
|
90
|
+
* referrerpolicy: string,
|
|
91
|
+
* referrerPolicy: string,
|
|
92
|
+
* fetchpriority: 'high'|'low'|'auto',
|
|
93
|
+
* fetchPriority: 'high'|'low'|'auto',
|
|
94
|
+
* }} ImgAttributes
|
|
95
|
+
*/
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* @typedef {GlobalAttributes & {
|
|
99
|
+
* href: Observable<string>|string,
|
|
100
|
+
* target: '_blank'|'_self'|'_parent'|'_top'|string,
|
|
101
|
+
* rel: string,
|
|
102
|
+
* download: Observable<boolean>|boolean|string,
|
|
103
|
+
* hreflang: string,
|
|
104
|
+
* hrefLang: string,
|
|
105
|
+
* type: string,
|
|
106
|
+
* referrerpolicy: string,
|
|
107
|
+
* referrerPolicy: string,
|
|
108
|
+
* }} AnchorAttributes
|
|
109
|
+
*/
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* @typedef {GlobalAttributes & SharedFormAttributes & {
|
|
113
|
+
* type: 'button'|'submit'|'reset',
|
|
114
|
+
* value: Observable<string>|string,
|
|
115
|
+
* }} ButtonAttributes
|
|
116
|
+
*/
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* @typedef {GlobalAttributes & SharedFormAttributes & {
|
|
120
|
+
* type: 'text'|'email'|'password'|'number'|'tel'|'url'|'search'|
|
|
121
|
+
* 'date'|'time'|'datetime-local'|'week'|'month'|
|
|
122
|
+
* 'checkbox'|'radio'|'range'|'color'|'file'|'hidden',
|
|
123
|
+
* value: Observable<string>|string,
|
|
124
|
+
* placeholder: Observable<string>|string,
|
|
125
|
+
* checked: Observable<boolean>|boolean,
|
|
126
|
+
* readonly: Observable<boolean>|boolean,
|
|
127
|
+
* readOnly: Observable<boolean>|boolean,
|
|
128
|
+
* multiple: Observable<boolean>|boolean,
|
|
129
|
+
* min: Observable<string>|string|number,
|
|
130
|
+
* max: Observable<string>|string|number,
|
|
131
|
+
* step: Observable<string>|string|number,
|
|
132
|
+
* minlength: number,
|
|
133
|
+
* minLength: number,
|
|
134
|
+
* maxlength: number,
|
|
135
|
+
* maxLength: number,
|
|
136
|
+
* pattern: string,
|
|
137
|
+
* accept: string,
|
|
138
|
+
* autocomplete: 'on'|'off'|string,
|
|
139
|
+
* autoComplete: 'on'|'off'|string,
|
|
140
|
+
* list: string,
|
|
141
|
+
* }} InputAttributes
|
|
142
|
+
*/
|
|
143
|
+
|
|
144
|
+
/**
|
|
145
|
+
* @typedef {GlobalAttributes & SharedFormAttributes & {
|
|
146
|
+
* value: Observable<string>|string,
|
|
147
|
+
* placeholder: Observable<string>|string,
|
|
148
|
+
* readonly: Observable<boolean>|boolean,
|
|
149
|
+
* readOnly: Observable<boolean>|boolean,
|
|
150
|
+
* rows: number,
|
|
151
|
+
* cols: number,
|
|
152
|
+
* minlength: number,
|
|
153
|
+
* minLength: number,
|
|
154
|
+
* maxlength: number,
|
|
155
|
+
* maxLength: number,
|
|
156
|
+
* wrap: 'hard'|'soft'|'off',
|
|
157
|
+
* autocomplete: 'on'|'off'|string,
|
|
158
|
+
* autoComplete: 'on'|'off'|string,
|
|
159
|
+
* spellcheck: Observable<boolean>|boolean,
|
|
160
|
+
* spellCheck: Observable<boolean>|boolean,
|
|
161
|
+
* }} TextAreaAttributes
|
|
162
|
+
*/
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* @typedef {GlobalAttributes & SharedFormAttributes & {
|
|
166
|
+
* value: Observable<string>|string,
|
|
167
|
+
* multiple: Observable<boolean>|boolean,
|
|
168
|
+
* size: number,
|
|
169
|
+
* }} SelectAttributes
|
|
170
|
+
*/
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* @typedef {GlobalAttributes & {
|
|
174
|
+
* value: Observable<string>|string,
|
|
175
|
+
* selected: Observable<boolean>|boolean,
|
|
176
|
+
* disabled: Observable<boolean>|boolean,
|
|
177
|
+
* }} OptionAttributes
|
|
178
|
+
*/
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* @typedef {GlobalAttributes & SharedFormAttributes & {
|
|
182
|
+
* action: string,
|
|
183
|
+
* method: 'get'|'post',
|
|
184
|
+
* enctype: 'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain',
|
|
185
|
+
* encType: 'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain',
|
|
186
|
+
* novalidate: Observable<boolean>|boolean,
|
|
187
|
+
* noValidate: Observable<boolean>|boolean,
|
|
188
|
+
* target: '_blank'|'_self'|'_parent'|'_top'|string,
|
|
189
|
+
* autocomplete: 'on'|'off',
|
|
190
|
+
* autoComplete: 'on'|'off',
|
|
191
|
+
* }} FormAttributes
|
|
192
|
+
*/
|
|
193
|
+
|
|
194
|
+
/**
|
|
195
|
+
* @typedef {GlobalAttributes & {
|
|
196
|
+
* src: Observable<string>|string,
|
|
197
|
+
* autoplay: Observable<boolean>|boolean,
|
|
198
|
+
* autoPlay: Observable<boolean>|boolean,
|
|
199
|
+
* controls: Observable<boolean>|boolean,
|
|
200
|
+
* loop: Observable<boolean>|boolean,
|
|
201
|
+
* muted: Observable<boolean>|boolean,
|
|
202
|
+
* preload: 'auto'|'metadata'|'none',
|
|
203
|
+
* width: Observable<string>|string|number,
|
|
204
|
+
* height: Observable<string>|string|number,
|
|
205
|
+
* poster: string,
|
|
206
|
+
* playsinline: Observable<boolean>|boolean,
|
|
207
|
+
* playsInline: Observable<boolean>|boolean,
|
|
208
|
+
* crossorigin: 'anonymous'|'use-credentials',
|
|
209
|
+
* crossOrigin: 'anonymous'|'use-credentials',
|
|
210
|
+
* }} VideoAttributes
|
|
211
|
+
*/
|
|
212
|
+
|
|
213
|
+
/**
|
|
214
|
+
* @typedef {GlobalAttributes & {
|
|
215
|
+
* src: Observable<string>|string,
|
|
216
|
+
* autoplay: Observable<boolean>|boolean,
|
|
217
|
+
* autoPlay: Observable<boolean>|boolean,
|
|
218
|
+
* controls: Observable<boolean>|boolean,
|
|
219
|
+
* loop: Observable<boolean>|boolean,
|
|
220
|
+
* muted: Observable<boolean>|boolean,
|
|
221
|
+
* preload: 'auto'|'metadata'|'none',
|
|
222
|
+
* crossorigin: 'anonymous'|'use-credentials',
|
|
223
|
+
* crossOrigin: 'anonymous'|'use-credentials',
|
|
224
|
+
* }} AudioAttributes
|
|
225
|
+
*/
|
|
226
|
+
|
|
227
|
+
/**
|
|
228
|
+
* @typedef {GlobalAttributes & {
|
|
229
|
+
* width: Observable<string>|string|number,
|
|
230
|
+
* height: Observable<string>|string|number,
|
|
231
|
+
* }} CanvasAttributes
|
|
232
|
+
*/
|
|
233
|
+
|
|
234
|
+
/**
|
|
235
|
+
* @typedef {GlobalAttributes & {
|
|
236
|
+
* open: Observable<boolean>|boolean,
|
|
237
|
+
* }} DetailsAttributes
|
|
238
|
+
*/
|
|
239
|
+
|
|
240
|
+
/**
|
|
241
|
+
* @typedef {GlobalAttributes & {
|
|
242
|
+
* open: Observable<boolean>|boolean,
|
|
243
|
+
* }} DialogAttributes
|
|
244
|
+
*/
|
|
245
|
+
|
|
246
|
+
/**
|
|
247
|
+
* @typedef {GlobalAttributes & {
|
|
248
|
+
* value: Observable<string>|string|number,
|
|
249
|
+
* max: number,
|
|
250
|
+
* }} ProgressAttributes
|
|
251
|
+
*/
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* @typedef {GlobalAttributes & {
|
|
255
|
+
* value: Observable<string>|string|number,
|
|
256
|
+
* min: number,
|
|
257
|
+
* max: number,
|
|
258
|
+
* low: number,
|
|
259
|
+
* high: number,
|
|
260
|
+
* optimum: number,
|
|
261
|
+
* }} MeterAttributes
|
|
262
|
+
*/
|
|
263
|
+
|
|
264
|
+
/**
|
|
265
|
+
* @typedef {GlobalAttributes & {
|
|
266
|
+
* src: string,
|
|
267
|
+
* type: string,
|
|
268
|
+
* media: string,
|
|
269
|
+
* }} SourceAttributes
|
|
270
|
+
*/
|
|
271
|
+
|
|
272
|
+
/**
|
|
273
|
+
* @typedef {GlobalAttributes & {
|
|
274
|
+
* colspan: number,
|
|
275
|
+
* colSpan: number,
|
|
276
|
+
* rowspan: number,
|
|
277
|
+
* rowSpan: number,
|
|
278
|
+
* headers: string,
|
|
279
|
+
* scope: 'row'|'col'|'rowgroup'|'colgroup',
|
|
280
|
+
* }} ThAttributes
|
|
281
|
+
*/
|
|
282
|
+
|
|
283
|
+
/**
|
|
284
|
+
* @typedef {GlobalAttributes & {
|
|
285
|
+
* colspan: number,
|
|
286
|
+
* colSpan: number,
|
|
287
|
+
* rowspan: number,
|
|
288
|
+
* rowSpan: number,
|
|
289
|
+
* headers: string,
|
|
290
|
+
* }} TdAttributes
|
|
291
|
+
*/
|
|
292
|
+
|
|
293
|
+
/**
|
|
294
|
+
* @typedef {GlobalAttributes & {
|
|
295
|
+
* for: string,
|
|
296
|
+
* htmlFor: string,
|
|
297
|
+
* }} LabelAttributes
|
|
298
|
+
*/
|
|
299
|
+
|
|
300
|
+
/**
|
|
301
|
+
* @typedef {GlobalAttributes & {
|
|
302
|
+
* for: string,
|
|
303
|
+
* form: string,
|
|
304
|
+
* name: string,
|
|
305
|
+
* }} OutputAttributes
|
|
306
|
+
*/
|
|
307
|
+
|
|
308
|
+
/**
|
|
309
|
+
* @typedef {GlobalAttributes & {
|
|
310
|
+
* datetime: string,
|
|
311
|
+
* dateTime: string,
|
|
312
|
+
* }} TimeAttributes
|
|
313
|
+
*/
|
|
314
|
+
|
|
315
|
+
/**
|
|
316
|
+
* @typedef {GlobalAttributes & {
|
|
317
|
+
* cite: string,
|
|
318
|
+
* datetime: string,
|
|
319
|
+
* dateTime: string,
|
|
320
|
+
* }} ModAttributes
|
|
321
|
+
*/
|
|
322
|
+
|
|
323
|
+
/**
|
|
324
|
+
* @typedef {GlobalAttributes & {
|
|
325
|
+
* reversed: Observable<boolean>|boolean,
|
|
326
|
+
* start: number,
|
|
327
|
+
* type: '1'|'a'|'A'|'i'|'I',
|
|
328
|
+
* }} OlAttributes
|
|
329
|
+
*/
|
|
330
|
+
|
|
331
|
+
/**
|
|
332
|
+
* @typedef {GlobalAttributes & {
|
|
333
|
+
* viewBox: string,
|
|
334
|
+
* viewbox: string,
|
|
335
|
+
* xmlns: string,
|
|
336
|
+
* width: Observable<string>|string|number,
|
|
337
|
+
* height: Observable<string>|string|number,
|
|
338
|
+
* }} SvgAttributes
|
|
339
|
+
*/
|
|
340
|
+
|
|
341
|
+
/**
|
|
342
|
+
* @typedef {GlobalAttributes & {
|
|
343
|
+
* src: string,
|
|
344
|
+
* kind: 'subtitles'|'captions'|'descriptions'|'chapters'|'metadata',
|
|
345
|
+
* srclang: string,
|
|
346
|
+
* srcLang: string,
|
|
347
|
+
* label: string,
|
|
348
|
+
* default: Observable<boolean>|boolean,
|
|
349
|
+
* }} TrackAttributes
|
|
350
|
+
*/
|
package/package.json
CHANGED
|
@@ -1,32 +1,169 @@
|
|
|
1
1
|
import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Creates a `<div>` element.
|
|
5
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDivElement}
|
|
6
|
+
*/
|
|
3
7
|
export const Div = HtmlElementWrapper('div');
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Creates a `<span>` element.
|
|
11
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLSpanElement}
|
|
12
|
+
*/
|
|
4
13
|
export const Span = HtmlElementWrapper('span');
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Creates a `<label>` element.
|
|
17
|
+
* @type {function(LabelAttributes=, NdChild|NdChild[]=): HTMLLabelElement}
|
|
18
|
+
*/
|
|
5
19
|
export const Label = HtmlElementWrapper('label');
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Creates a `<p>` element.
|
|
23
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}
|
|
24
|
+
*/
|
|
6
25
|
export const P = HtmlElementWrapper('p');
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Alias for {@link P}.
|
|
29
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}
|
|
30
|
+
*/
|
|
7
31
|
export const Paragraph = P;
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Creates a `<strong>` element.
|
|
35
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
|
|
36
|
+
*/
|
|
8
37
|
export const Strong = HtmlElementWrapper('strong');
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Creates a `<h1>` element.
|
|
41
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
|
|
42
|
+
*/
|
|
9
43
|
export const H1 = HtmlElementWrapper('h1');
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Creates a `<h2>` element.
|
|
47
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
|
|
48
|
+
*/
|
|
10
49
|
export const H2 = HtmlElementWrapper('h2');
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Creates a `<h3>` element.
|
|
53
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
|
|
54
|
+
*/
|
|
11
55
|
export const H3 = HtmlElementWrapper('h3');
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Creates a `<h4>` element.
|
|
59
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
|
|
60
|
+
*/
|
|
12
61
|
export const H4 = HtmlElementWrapper('h4');
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Creates a `<h5>` element.
|
|
65
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
|
|
66
|
+
*/
|
|
13
67
|
export const H5 = HtmlElementWrapper('h5');
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Creates a `<h6>` element.
|
|
71
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
|
|
72
|
+
*/
|
|
14
73
|
export const H6 = HtmlElementWrapper('h6');
|
|
15
74
|
|
|
75
|
+
/**
|
|
76
|
+
* Creates a `<br>` element.
|
|
77
|
+
* @type {function(GlobalAttributes=): HTMLBRElement}
|
|
78
|
+
*/
|
|
16
79
|
export const Br = HtmlElementWrapper('br');
|
|
17
80
|
|
|
81
|
+
/**
|
|
82
|
+
* Creates an `<a>` element.
|
|
83
|
+
* @type {function(AnchorAttributes=, NdChild|NdChild[]=): HTMLAnchorElement}
|
|
84
|
+
*/
|
|
18
85
|
export const Link = HtmlElementWrapper('a');
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Creates a `<pre>` element.
|
|
89
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLPreElement}
|
|
90
|
+
*/
|
|
19
91
|
export const Pre = HtmlElementWrapper('pre');
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Creates a `<code>` element.
|
|
95
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
|
|
96
|
+
*/
|
|
20
97
|
export const Code = HtmlElementWrapper('code');
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Creates a `<blockquote>` element.
|
|
101
|
+
* @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
|
|
102
|
+
*/
|
|
21
103
|
export const Blockquote = HtmlElementWrapper('blockquote');
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Creates an `<hr>` element.
|
|
107
|
+
* @type {function(GlobalAttributes=): HTMLHRElement}
|
|
108
|
+
*/
|
|
22
109
|
export const Hr = HtmlElementWrapper('hr');
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Creates an `<em>` element.
|
|
113
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
|
|
114
|
+
*/
|
|
23
115
|
export const Em = HtmlElementWrapper('em');
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* Creates a `<small>` element.
|
|
119
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
|
|
120
|
+
*/
|
|
24
121
|
export const Small = HtmlElementWrapper('small');
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* Creates a `<mark>` element.
|
|
125
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
|
|
126
|
+
*/
|
|
25
127
|
export const Mark = HtmlElementWrapper('mark');
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* Creates a `<del>` element.
|
|
131
|
+
* @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
|
|
132
|
+
*/
|
|
26
133
|
export const Del = HtmlElementWrapper('del');
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Creates an `<ins>` element.
|
|
137
|
+
* @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
|
|
138
|
+
*/
|
|
27
139
|
export const Ins = HtmlElementWrapper('ins');
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* Creates a `<sub>` element.
|
|
143
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
|
|
144
|
+
*/
|
|
28
145
|
export const Sub = HtmlElementWrapper('sub');
|
|
146
|
+
|
|
147
|
+
/**
|
|
148
|
+
* Creates a `<sup>` element.
|
|
149
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
|
|
150
|
+
*/
|
|
29
151
|
export const Sup = HtmlElementWrapper('sup');
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* Creates an `<abbr>` element.
|
|
155
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
|
|
156
|
+
*/
|
|
30
157
|
export const Abbr = HtmlElementWrapper('abbr');
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* Creates a `<cite>` element.
|
|
161
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
|
|
162
|
+
*/
|
|
31
163
|
export const Cite = HtmlElementWrapper('cite');
|
|
32
|
-
|
|
164
|
+
|
|
165
|
+
/**
|
|
166
|
+
* Creates a `<q>` element.
|
|
167
|
+
* @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
|
|
168
|
+
*/
|
|
169
|
+
export const Quote = HtmlElementWrapper('q');
|
|
@@ -9,7 +9,7 @@ import NativeDocumentError from "../../errors/NativeDocumentError";
|
|
|
9
9
|
* Provides index observables and handles array mutations efficiently.
|
|
10
10
|
*
|
|
11
11
|
* @param {ObservableArray} data - ObservableArray to iterate over
|
|
12
|
-
* @param {
|
|
12
|
+
* @param {(item: *, index: null|ObservableItem) => NdChild} callback - Function that renders each item (item, indexObservable) => ValidChild
|
|
13
13
|
* @param {Object} [configs={}] - Configuration options
|
|
14
14
|
* @param {boolean} [configs.shouldKeepItemsInCache] - Whether to cache rendered items
|
|
15
15
|
* @param {boolean} [configs.isParentUniqueChild] - When it's the only child of the parent
|
|
@@ -11,7 +11,7 @@ import NativeDocumentError from "../../errors/NativeDocumentError";
|
|
|
11
11
|
* Efficiently manages DOM updates by tracking items with keys.
|
|
12
12
|
*
|
|
13
13
|
* @param {ObservableItem<Array|Object>} data - Observable containing array or object to iterate over
|
|
14
|
-
* @param {
|
|
14
|
+
* @param {(item: *, index: null|ObservableItem) => NdChild} callback - Function that renders each item (item, index) => ValidChild
|
|
15
15
|
* @param {string|Function} [key] - Property name or function to generate unique keys for items
|
|
16
16
|
* @param {Object} [options={}] - Configuration options
|
|
17
17
|
* @param {boolean} [options.shouldKeepItemsInCache=false] - Whether to cache rendered items
|
|
@@ -9,7 +9,7 @@ import {ElementCreator} from "../../wrappers/ElementCreator";
|
|
|
9
9
|
* The element is mounted/unmounted from the DOM as the condition changes.
|
|
10
10
|
*
|
|
11
11
|
* @param {ObservableItem<boolean>|ObservableChecker<boolean>|ObservableWhen} condition - Observable condition to watch
|
|
12
|
-
* @param {
|
|
12
|
+
* @param {NdChild|(() => NdChild)} child - Element or content to show/hide
|
|
13
13
|
* @param {Object} [options={}] - Configuration options
|
|
14
14
|
* @param {string|null} [options.comment=null] - Comment for debugging
|
|
15
15
|
* @param {boolean} [options.shouldKeepInCache=true] - Whether to cache the element when hidden
|
|
@@ -57,7 +57,7 @@ export const ShowIf = function(condition, child, { comment = null, shouldKeepInC
|
|
|
57
57
|
* Inverse of ShowIf - element is shown when condition is false.
|
|
58
58
|
*
|
|
59
59
|
* @param {ObservableItem<boolean>|ObservableChecker<boolean>} condition - Observable condition to watch
|
|
60
|
-
* @param {
|
|
60
|
+
* @param {NdChild|(() => NdChild)} child - Element or content to show/hide
|
|
61
61
|
* @param {Object} [configs] - Configuration options
|
|
62
62
|
* @param {string|null} [configs.comment] - Comment for debugging
|
|
63
63
|
* @param {boolean} [configs.shouldKeepInCache] - Whether to cache element when hidden
|
|
@@ -78,7 +78,7 @@ export const HideIf = function(condition, child, configs) {
|
|
|
78
78
|
* Same as ShowIf - element is shown when condition is true.
|
|
79
79
|
*
|
|
80
80
|
* @param {ObservableItem<boolean>|ObservableChecker<boolean>|ObservableWhen} condition - Observable condition to watch
|
|
81
|
-
* @param {
|
|
81
|
+
* @param {NdChild|(() => NdChild)} child - Element or content to show/hide
|
|
82
82
|
* @param {Object} [configs] - Configuration options
|
|
83
83
|
* @param {string|null} [configs.comment] - Comment for debugging
|
|
84
84
|
* @param {boolean} [configs.shouldKeepInCache] - Whether to cache element when hidden
|
|
@@ -8,13 +8,13 @@ import {ShowIf} from "./show-if.js";
|
|
|
8
8
|
*
|
|
9
9
|
* @overload
|
|
10
10
|
* @param {ObservableWhen} observerWhenResult - Result from observable.when(value)
|
|
11
|
-
* @param {
|
|
11
|
+
* @param {NdChild|(() => NdChild)} view - Content to show when condition matches
|
|
12
12
|
* @returns {AnchorDocumentFragment}
|
|
13
13
|
*
|
|
14
14
|
* @overload
|
|
15
15
|
* @param {ObservableItem} observer - Observable to watch
|
|
16
16
|
* @param {*} target - Value to match
|
|
17
|
-
* @param {
|
|
17
|
+
* @param {NdChild|(() => NdChild)} view - Content to show when observable equals target
|
|
18
18
|
* @returns {AnchorDocumentFragment}
|
|
19
19
|
*
|
|
20
20
|
* @example
|
|
@@ -10,7 +10,7 @@ import {ElementCreator} from "../../wrappers/ElementCreator";
|
|
|
10
10
|
* Like a switch statement for UI - shows the content corresponding to current value.
|
|
11
11
|
*
|
|
12
12
|
* @param {ObservableItem|ObservableChecker} $condition - Observable to watch
|
|
13
|
-
* @param {Object<string|number,
|
|
13
|
+
* @param {Object<string|number, NdChild|(() => NdChild)>} values - Map of values to their corresponding content
|
|
14
14
|
* @param {boolean} [shouldKeepInCache=true] - Whether to cache rendered views
|
|
15
15
|
* @returns {AnchorDocumentFragment & {add: Function, remove: Function}} Fragment with dynamic methods
|
|
16
16
|
* @example
|
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Creates a `<dl>` element.
|
|
5
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDListElement}
|
|
6
|
+
*/
|
|
3
7
|
export const Dl = HtmlElementWrapper('dl');
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Creates a `<dt>` element.
|
|
11
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
|
|
12
|
+
*/
|
|
4
13
|
export const Dt = HtmlElementWrapper('dt');
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Creates a `<dd>` element.
|
|
17
|
+
* @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
|
|
18
|
+
*/
|
|
5
19
|
export const Dd = HtmlElementWrapper('dd');
|