@ixfx/ui 0.40.3 → 0.42.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/bundle/chunk-Cl8Af3a2.js +1 -0
- package/bundle/index.d.ts +565 -0
- package/bundle/index.d.ts.map +1 -0
- package/bundle/index.js +2 -0
- package/bundle/index.js.map +1 -0
- package/dist/src/rx/dom.d.ts +1 -1
- package/dist/src/rx/dom.d.ts.map +1 -1
- package/dist/src/rx/dom.js +1 -2
- package/package.json +11 -7
@@ -0,0 +1 @@
|
|
1
|
+
var e=Object.defineProperty,t=(t,n)=>{for(var r in n)e(t,r,{get:n[r],enumerable:!0})};export{t as __export};
|
@@ -0,0 +1,565 @@
|
|
1
|
+
import * as _ixfx_rx0 from "@ixfx/rx";
|
2
|
+
import { Reactive, ReactiveInitial, ReactiveNonInitial, ReactiveWritable } from "@ixfx/rx";
|
3
|
+
import * as _ixfx_core0 from "@ixfx/core";
|
4
|
+
import { Interval, Pathed } from "@ixfx/core";
|
5
|
+
import { HslScalar } from "@ixfx/visual/colour";
|
6
|
+
import { EventSourceOptions } from "@ixfx/rx/from";
|
7
|
+
import { Colour } from "@ixfx/visual";
|
8
|
+
|
9
|
+
//#region src/rx/browser-resize.d.ts
|
10
|
+
|
11
|
+
/**
|
12
|
+
* Observe when element resizes. Specify `interval` to debounce, uses 100ms by default.
|
13
|
+
*
|
14
|
+
* ```
|
15
|
+
* const o = resizeObservable(myEl, 500);
|
16
|
+
* o.subscribe(() => {
|
17
|
+
* // called 500ms after last resize
|
18
|
+
* });
|
19
|
+
* ```
|
20
|
+
* @param elem
|
21
|
+
* @param interval Tiemout before event gets triggered
|
22
|
+
* @returns
|
23
|
+
*/
|
24
|
+
declare const browserResizeObservable: (elem: Readonly<Element>, interval?: Interval) => _ixfx_rx0.Reactive<ResizeObserverEntry[]>;
|
25
|
+
/**
|
26
|
+
* Returns an Reactive for window resize. Default 100ms debounce.
|
27
|
+
* @param elapsed
|
28
|
+
* @returns
|
29
|
+
*/
|
30
|
+
//# sourceMappingURL=browser-resize.d.ts.map
|
31
|
+
//#endregion
|
32
|
+
//#region src/rx/browser-theme-change.d.ts
|
33
|
+
/**
|
34
|
+
* Observe when a class changes on a target element, by default the document.
|
35
|
+
* Useful for tracking theme changes.
|
36
|
+
*
|
37
|
+
* ```js
|
38
|
+
* const c = cssClassChange();
|
39
|
+
* c.on(msg => {
|
40
|
+
* // some class has changed on the document
|
41
|
+
* });
|
42
|
+
* ```
|
43
|
+
*/
|
44
|
+
declare const cssClassChange: (target?: HTMLElement) => _ixfx_rx0.Reactive<MutationRecord[]>;
|
45
|
+
//# sourceMappingURL=browser-theme-change.d.ts.map
|
46
|
+
//#endregion
|
47
|
+
//#region src/rx/colour.d.ts
|
48
|
+
type ReactiveColour = ReactiveWritable<HslScalar> & {
|
49
|
+
setHsl: (hsl: HslScalar) => void;
|
50
|
+
};
|
51
|
+
declare function colour(initialValue: HslScalar): ReactiveColour & ReactiveInitial<HslScalar>;
|
52
|
+
declare function colour(): ReactiveColour & ReactiveNonInitial<HslScalar>;
|
53
|
+
//# sourceMappingURL=colour.d.ts.map
|
54
|
+
//#endregion
|
55
|
+
//#region src/rx/dom-types.d.ts
|
56
|
+
type DomBindValueTarget = {
|
57
|
+
/**
|
58
|
+
* If _true_ `innerHTML` is set (a shortcut for elField:`innerHTML`)
|
59
|
+
*/
|
60
|
+
htmlContent?: boolean;
|
61
|
+
/**
|
62
|
+
* If _true_, 'textContent' is set (a shortcut for elField:'textContext')
|
63
|
+
*/
|
64
|
+
textContent?: boolean;
|
65
|
+
/**
|
66
|
+
* If set, this DOM element field is set. Eg 'textContent'
|
67
|
+
*/
|
68
|
+
elField?: string;
|
69
|
+
/**
|
70
|
+
* If set, this DOM attribute is set, Eg 'width'
|
71
|
+
*/
|
72
|
+
attribName?: string;
|
73
|
+
/**
|
74
|
+
* If set, this CSS variable is set, Eg 'hue' (sets '--hue')
|
75
|
+
*/
|
76
|
+
cssVariable?: string;
|
77
|
+
/**
|
78
|
+
* If set, this CSS property is set, Eg 'background-color'
|
79
|
+
*/
|
80
|
+
cssProperty?: string;
|
81
|
+
};
|
82
|
+
type ElementBind = {
|
83
|
+
/**
|
84
|
+
* Tag name for this binding.
|
85
|
+
* Overrides `defaultTag`
|
86
|
+
*/
|
87
|
+
tagName?: string;
|
88
|
+
/**
|
89
|
+
* If _true_, sub-paths are appended to element, rather than `container`
|
90
|
+
*/
|
91
|
+
nestChildren?: boolean;
|
92
|
+
transform?: (value: any) => string;
|
93
|
+
};
|
94
|
+
type ElementsOptions = {
|
95
|
+
container: HTMLElement | string;
|
96
|
+
defaultTag: string;
|
97
|
+
binds: Record<string, DomBindValueTarget & ElementBind>;
|
98
|
+
};
|
99
|
+
type DomBindTargetNode = {
|
100
|
+
query?: string;
|
101
|
+
element?: HTMLElement;
|
102
|
+
};
|
103
|
+
type DomBindTargetNodeResolved = {
|
104
|
+
element: HTMLElement;
|
105
|
+
};
|
106
|
+
type DomBindUnresolvedSource<TSource, TDestination> = DomBindTargetNode & DomBindSourceValue<TSource, TDestination> & DomBindValueTarget;
|
107
|
+
type DomBindResolvedSource<TSource, TDestination> = DomBindTargetNodeResolved & DomBindSourceValue<TSource, TDestination> & DomBindValueTarget;
|
108
|
+
type DomBindSourceValue<TSource, TDestination> = {
|
109
|
+
twoway?: boolean;
|
110
|
+
/**
|
111
|
+
* Field from source value to pluck and use.
|
112
|
+
* This will also be the value passed to the transform
|
113
|
+
*/
|
114
|
+
sourceField?: keyof TSource;
|
115
|
+
transform?: (input: TSource) => TDestination;
|
116
|
+
transformValue?: (input: any) => TDestination;
|
117
|
+
};
|
118
|
+
type DomBindInputOptions<TSource, TDestination> = DomBindSourceValue<TSource, TDestination> & {
|
119
|
+
transformFromInput: (input: TDestination) => TSource;
|
120
|
+
};
|
121
|
+
type BindUpdateOpts<V> = {
|
122
|
+
initial: (v: V, el: HTMLElement) => void;
|
123
|
+
binds: Record<string, DomBindValueTarget & {
|
124
|
+
transform?: (value: any) => string;
|
125
|
+
}>;
|
126
|
+
};
|
127
|
+
type DomCreateOptions = {
|
128
|
+
tagName: string;
|
129
|
+
parentEl: string | HTMLElement;
|
130
|
+
};
|
131
|
+
type PipeDomBinding = {
|
132
|
+
/**
|
133
|
+
* Remove binding and optionally delete element(s) (false by default)
|
134
|
+
*/
|
135
|
+
remove(deleteElements: boolean): void;
|
136
|
+
};
|
137
|
+
type DomValueOptions = EventSourceOptions & {
|
138
|
+
/**
|
139
|
+
* If true, the current value will be emitted even though it wasn't
|
140
|
+
* triggered by an event.
|
141
|
+
* Default: false
|
142
|
+
*/
|
143
|
+
emitInitialValue: boolean;
|
144
|
+
attributeName: string;
|
145
|
+
fieldName: string;
|
146
|
+
/**
|
147
|
+
* Respond to when value has changed or when value is changing
|
148
|
+
* Default: `changed`
|
149
|
+
*/
|
150
|
+
when: `changed` | `changing`;
|
151
|
+
fallbackValue: string;
|
152
|
+
upstreamSource?: Reactive<unknown>;
|
153
|
+
upstreamFilter?: (value: unknown) => string;
|
154
|
+
};
|
155
|
+
type DomFormOptions<T extends Record<string, unknown>> = EventSourceOptions & {
|
156
|
+
/**
|
157
|
+
* If true, the current value will be emitted even though it wasn't
|
158
|
+
* triggered by an event.
|
159
|
+
* Default: false
|
160
|
+
*/
|
161
|
+
emitInitialValue: boolean;
|
162
|
+
/**
|
163
|
+
* Respond to when value has changed or when value is changing
|
164
|
+
* Default: `changed`
|
165
|
+
*/
|
166
|
+
when: `changed` | `changing`;
|
167
|
+
upstreamSource?: Reactive<T>;
|
168
|
+
upstreamFilter?: (name: string, value: unknown) => string;
|
169
|
+
};
|
170
|
+
type DomNumberInputValueOptions = DomValueOptions & {
|
171
|
+
/**
|
172
|
+
* If true, sets up INPUT element to operate with relative values
|
173
|
+
*/
|
174
|
+
relative?: boolean;
|
175
|
+
/**
|
176
|
+
* If true, when setting up, sets max to be on left side
|
177
|
+
*/
|
178
|
+
inverted?: boolean;
|
179
|
+
upstreamSource?: Reactive<number>;
|
180
|
+
};
|
181
|
+
//# sourceMappingURL=dom-types.d.ts.map
|
182
|
+
//#endregion
|
183
|
+
//#region src/rx/dom-source.d.ts
|
184
|
+
/**
|
185
|
+
* Reactive getting/setting of values to a HTML INPUT element.
|
186
|
+
*
|
187
|
+
* Options:
|
188
|
+
* - relative: if _true_, values are 0..1 (default: false)
|
189
|
+
* - inverted: if _true_, values are 1..0 (default: false)
|
190
|
+
*
|
191
|
+
* If element is missing a 'type' attribute, this will be set to 'range'.
|
192
|
+
* @param targetOrQuery
|
193
|
+
* @param options
|
194
|
+
* @returns
|
195
|
+
*/
|
196
|
+
declare function domNumberInputValue(targetOrQuery: HTMLInputElement | string, options?: Partial<DomNumberInputValueOptions>): ReactiveInitial<number> & ReactiveWritable<number>;
|
197
|
+
declare function domHslInputValue(targetOrQuery: HTMLInputElement | string, options?: Partial<DomValueOptions>): ReactiveInitial<Colour.HslScalar> & Reactive<Colour.HslScalar> & ReactiveWritable<Colour.HslScalar>;
|
198
|
+
/**
|
199
|
+
* A stream of values when the a HTMLInputElement changes. Eg a <input type="range">
|
200
|
+
* ```js
|
201
|
+
* const r = Rx.From.domInputValue(`#myEl`);
|
202
|
+
* r.onValue(value => {
|
203
|
+
* // value will be string
|
204
|
+
* });
|
205
|
+
* ```
|
206
|
+
*
|
207
|
+
* Options:
|
208
|
+
* * emitInitialValue: If _true_ emits the HTML value of element (default: false)
|
209
|
+
* * attributeName: If set, this is the HTML attribute value is set to when writing to stream (default: 'value')
|
210
|
+
* * fieldName: If set, this is the DOM object field set when writing to stream (default: 'value')
|
211
|
+
* * when: 'changed'|'changing' when values are emitted. (default: 'changed')
|
212
|
+
* * fallbackValue: Fallback value to use if field/attribute cannot be read (default: '')
|
213
|
+
* @param targetOrQuery
|
214
|
+
* @param options
|
215
|
+
* @returns
|
216
|
+
*/
|
217
|
+
declare function domInputValue(targetOrQuery: HTMLInputElement | string, options?: Partial<DomValueOptions>): {
|
218
|
+
el: HTMLInputElement;
|
219
|
+
} & ReactiveInitial<string> & ReactiveWritable<string>;
|
220
|
+
/**
|
221
|
+
* Listens for data changes from elements within a HTML form element.
|
222
|
+
* Input elements must have a 'name' attribute.
|
223
|
+
*
|
224
|
+
* Simple usage:
|
225
|
+
* ```js
|
226
|
+
* const rx = Rx.From.domForm(`#my-form`);
|
227
|
+
* rx.onValue(value => {
|
228
|
+
* // Object containing values from form
|
229
|
+
* });
|
230
|
+
*
|
231
|
+
* rx.last(); // Read current values of form
|
232
|
+
* ```
|
233
|
+
*
|
234
|
+
* UI can be updated
|
235
|
+
* ```js
|
236
|
+
* // Set using an object of key-value pairs
|
237
|
+
* rx.set({
|
238
|
+
* size: 'large'
|
239
|
+
* });
|
240
|
+
*
|
241
|
+
* // Or set a single name-value pair
|
242
|
+
* rx.setNamedValue(`size`, `large`);
|
243
|
+
* ```
|
244
|
+
*
|
245
|
+
* If an 'upstream' reactive is provided, this is used to set initial values of the UI, overriding
|
246
|
+
* whatever may be in the HTML. Upstream changes modify UI elements, but UI changes do not modify the upstream
|
247
|
+
* source.
|
248
|
+
*
|
249
|
+
* ```js
|
250
|
+
* // Create a reactive object
|
251
|
+
* const obj = Rx.From.object({
|
252
|
+
* when: `2024-10-03`,
|
253
|
+
* size: 12,
|
254
|
+
* checked: true
|
255
|
+
* });
|
256
|
+
*
|
257
|
+
* // Use this as initial values for a HTML form
|
258
|
+
* // (assuming appropriate INPUT/SELECT elements exist)
|
259
|
+
* const rx = Rx.From.domForm(`form`, {
|
260
|
+
* upstreamSource: obj
|
261
|
+
* });
|
262
|
+
*
|
263
|
+
* // Listen for changes in the UI
|
264
|
+
* rx.onValue(value => {
|
265
|
+
*
|
266
|
+
* });
|
267
|
+
* ```
|
268
|
+
* @param formElOrQuery
|
269
|
+
* @param options
|
270
|
+
* @returns
|
271
|
+
*/
|
272
|
+
declare function domForm<T extends Record<string, any>>(formElOrQuery: HTMLFormElement | string, options?: Partial<DomFormOptions<T>>): {
|
273
|
+
setNamedValue: (name: string, value: any) => void;
|
274
|
+
el: HTMLFormElement;
|
275
|
+
} & ReactiveInitial<T> & ReactiveWritable<T>;
|
276
|
+
//# sourceMappingURL=dom-source.d.ts.map
|
277
|
+
//#endregion
|
278
|
+
//#region src/rx/dom.d.ts
|
279
|
+
/**
|
280
|
+
* Reactive stream of array of elements that match `query`.
|
281
|
+
* @param query
|
282
|
+
* @returns
|
283
|
+
*/
|
284
|
+
declare function fromDomQuery(query: string): _ixfx_rx0.Reactive<HTMLElement[]> & {
|
285
|
+
set(value: HTMLElement[]): void;
|
286
|
+
} & {
|
287
|
+
onField(fieldName: string, handler: (result: _ixfx_rx0.ObjectFieldHandler) => void): () => void;
|
288
|
+
onDiff(changes: (changes: Pathed.PathDataChange<any>[]) => void): () => void;
|
289
|
+
update(changedPart: (_ixfx_core0.RecursivePartial<HTMLElement> | undefined)[]): HTMLElement[];
|
290
|
+
updateField(field: string, value: any): void;
|
291
|
+
} & {
|
292
|
+
last(): HTMLElement[];
|
293
|
+
};
|
294
|
+
/**
|
295
|
+
* Updates an element's `textContent` when the source value changes.
|
296
|
+
* ```js
|
297
|
+
* bindText(source, `#blah`);
|
298
|
+
* ```
|
299
|
+
* @param elOrQuery
|
300
|
+
* @param source
|
301
|
+
* @param bindOpts
|
302
|
+
*/
|
303
|
+
declare const bindText: <TSource>(source: _ixfx_rx0.Reactive<TSource>, elOrQuery: string | HTMLElement | null, bindOpts?: Partial<DomBindSourceValue<TSource, string>>) => PipeDomBinding;
|
304
|
+
/**
|
305
|
+
* Updates an element's `value` (as well as the 'value' attribute) when the source value changes.s
|
306
|
+
* @param source
|
307
|
+
* @param elOrQuery
|
308
|
+
* @param bindOpts
|
309
|
+
* @returns
|
310
|
+
*/
|
311
|
+
declare const bindValueText: <TSource>(source: _ixfx_rx0.Reactive<TSource>, elOrQuery: string | HTMLInputElement | null, bindOpts?: Partial<DomBindSourceValue<TSource, string>>) => PipeDomBinding;
|
312
|
+
/**
|
313
|
+
* Updates an element's `innerHTML` when the source value changes
|
314
|
+
* ```js
|
315
|
+
* bindHtml(source, `#blah`);
|
316
|
+
* ```
|
317
|
+
*
|
318
|
+
* Uses {@link bindElement}, with `{elField:'innerHTML'}` as the options.
|
319
|
+
* @param elOrQuery
|
320
|
+
* @param source
|
321
|
+
* @param bindOpts
|
322
|
+
* @returns
|
323
|
+
*/
|
324
|
+
declare const bindHtml: <TSource>(source: _ixfx_rx0.Reactive<TSource>, elOrQuery: string | HTMLElement | null, bindOpts?: DomBindSourceValue<TSource, string>) => PipeDomBinding;
|
325
|
+
/**
|
326
|
+
* Shortcut to bind to an elements attribute
|
327
|
+
* @param elOrQuery
|
328
|
+
* @param source
|
329
|
+
* @param attribute
|
330
|
+
* @param bindOpts
|
331
|
+
* @returns
|
332
|
+
*/
|
333
|
+
/**
|
334
|
+
* Shortcut to bind to a CSS variable
|
335
|
+
* @param elOrQuery
|
336
|
+
* @param source
|
337
|
+
* @param cssVariable
|
338
|
+
* @param bindOpts
|
339
|
+
* @returns
|
340
|
+
*/
|
341
|
+
/**
|
342
|
+
* Creates a new HTML element, calling {@link bind} on it to update when `source` emits new values.
|
343
|
+
*
|
344
|
+
*
|
345
|
+
* ```js
|
346
|
+
* // Set textContent of a SPAN with values from `source`
|
347
|
+
* create(source, { tagName: `span`, parentEl: document.body })
|
348
|
+
* ```
|
349
|
+
*
|
350
|
+
* If `parentEl` is not given in the options, the created element needs to be manually added
|
351
|
+
* ```js
|
352
|
+
* const b = create(source);
|
353
|
+
* someEl.append(b.el); // Append manually
|
354
|
+
* ```
|
355
|
+
*
|
356
|
+
* ```
|
357
|
+
* // Set 'title' attribute based on values from `source`
|
358
|
+
* create(source, { parentEl: document.body, attribName: `title` })
|
359
|
+
* ```
|
360
|
+
* @param source
|
361
|
+
* @param options
|
362
|
+
* @returns
|
363
|
+
*/
|
364
|
+
/**
|
365
|
+
* Update a DOM element's field, attribute or CSS variable when `source` produces a value.
|
366
|
+
*
|
367
|
+
* ```js
|
368
|
+
* // Access via DOM query. Binds to 'textContent' by default
|
369
|
+
* bind(readableSource, `#someEl`);
|
370
|
+
*
|
371
|
+
* // Set innerHTML instead
|
372
|
+
* bind(readableSource, someEl, { elField: `innerHTML` });
|
373
|
+
*
|
374
|
+
* // An attribute
|
375
|
+
* bind(readableSource, someEl, { attribName: `width` });
|
376
|
+
*
|
377
|
+
* // A css variable ('--' optiona)
|
378
|
+
* bind(readableSource, someEl, { cssVariable: `hue` });
|
379
|
+
*
|
380
|
+
* // Pluck a particular field from source data.
|
381
|
+
* // Ie someEl.textContent = value.colour
|
382
|
+
* bind(readableSource, someEl, { sourceField: `colour` });
|
383
|
+
*
|
384
|
+
* // Transform value before setting it to field
|
385
|
+
* bind(readableSource, someEl, {
|
386
|
+
* field: `innerHTML`,
|
387
|
+
* transform: (v) => `Colour: ${v.colour}`
|
388
|
+
* })
|
389
|
+
* ```
|
390
|
+
*
|
391
|
+
* If `source` has an initial value, this is used when first bound.
|
392
|
+
*
|
393
|
+
* Returns {@link PipeDomBinding} to control binding:
|
394
|
+
* ```js
|
395
|
+
* const bind = bind(source, `#someEl`);
|
396
|
+
* bind.remove(); // Unbind
|
397
|
+
* bind.remove(true); // Unbind and remove HTML element
|
398
|
+
* ```
|
399
|
+
*
|
400
|
+
* If several fields need to be updated based on a new value, consider using {@link bindUpdate} instead.
|
401
|
+
* @param elOrQuery Element to update to, or query string such as '#someid'
|
402
|
+
* @param source Source of data
|
403
|
+
* @param binds Bindings
|
404
|
+
*/
|
405
|
+
declare const bindElement: <TSource, TDestination>(source: _ixfx_rx0.Reactive<TSource>, elOrQuery: string | HTMLElement | null, ...binds: (DomBindSourceValue<TSource, TDestination> & DomBindValueTarget)[]) => PipeDomBinding;
|
406
|
+
/**
|
407
|
+
* Binds `source` to one or more element(s). One or more bindings for the same source
|
408
|
+
* can be provided.
|
409
|
+
*
|
410
|
+
* ```js
|
411
|
+
* bind(source,
|
412
|
+
* // Binds .name field of source values to textContent of #some-element
|
413
|
+
* { query: `#some-element`, sourceField: `name` },
|
414
|
+
* { query: `section`, }
|
415
|
+
* );
|
416
|
+
* ```
|
417
|
+
*
|
418
|
+
* Can update
|
419
|
+
* * CSS variables
|
420
|
+
* * CSS styles
|
421
|
+
* * textContent / innerHTML
|
422
|
+
* * HTML DOM attributes and object fields
|
423
|
+
*
|
424
|
+
* Can use a particular field on source values, or use the whole value. These can
|
425
|
+
* pass through `transformValue` or `transform` respectively.
|
426
|
+
*
|
427
|
+
* Returns a function to unbind from source and optionally remove HTML element
|
428
|
+
* ```js
|
429
|
+
* const unbind = bind( . . . );
|
430
|
+
* unbind(); // Unbind
|
431
|
+
* unbind(true); // Unbind and remove HTML element(s)
|
432
|
+
* ```
|
433
|
+
* @param source
|
434
|
+
* @param bindsUnresolvedElements
|
435
|
+
* @returns
|
436
|
+
*/
|
437
|
+
declare const bind: <TSource, TDestination>(source: _ixfx_rx0.Reactive<TSource>, ...bindsUnresolvedElements: DomBindUnresolvedSource<TSource, TDestination>[]) => PipeDomBinding;
|
438
|
+
/**
|
439
|
+
* Calls `updater` whenever `source` produces a value. Useful when several fields from a value
|
440
|
+
* are needed to update an element.
|
441
|
+
* ```js
|
442
|
+
* bindUpdate(source, `#someEl`, (v, el) => {
|
443
|
+
* el.setAttribute(`width`, v.width);
|
444
|
+
* el.setAttribute(`height`, v.height);
|
445
|
+
* });
|
446
|
+
* ```
|
447
|
+
*
|
448
|
+
* Returns a {@link PipeDomBinding} to manage binding
|
449
|
+
* ```js
|
450
|
+
* const b = bindUpdate(...);
|
451
|
+
* b.remove(); // Disconnect binding
|
452
|
+
* b.remove(true); // Disconnect binding and remove element
|
453
|
+
* b.el; // HTML element
|
454
|
+
* ```
|
455
|
+
* @param elOrQuery
|
456
|
+
* @param source
|
457
|
+
* @param updater
|
458
|
+
* @returns
|
459
|
+
*/
|
460
|
+
declare const bindUpdate: <V>(source: _ixfx_rx0.Reactive<V>, elOrQuery: string | HTMLElement, updater: (v: V, el: HTMLElement) => void) => PipeDomBinding;
|
461
|
+
/**
|
462
|
+
* Updates a HTML element based on diffs on an object.
|
463
|
+
* ```js
|
464
|
+
* // Wrap an object
|
465
|
+
* const o = Rx.object({ name: `Jane`, ticks: 0 });
|
466
|
+
* const b = bindDiffUpdate(`#test`, o, (diffs, el) => {
|
467
|
+
* // el = reference to #test
|
468
|
+
* // diff = Array of Changes,
|
469
|
+
* // eg [ { path: `ticks`, value: 797, previous: 0 } ]
|
470
|
+
* for (const diff of diffs) {
|
471
|
+
* if (diff.path === `ticks`) el.textContent = `${diff.previous} -> ${diff.value}`
|
472
|
+
* }
|
473
|
+
* })
|
474
|
+
*
|
475
|
+
* // Eg. update field
|
476
|
+
* o.updateField(`ticks`, Math.floor(Math.random()*1000));
|
477
|
+
* ```
|
478
|
+
*
|
479
|
+
* If `initial` is provided as an option, this will be called if `source` has an initial value. Without this, the DOM won't be updated until the first data
|
480
|
+
* update happens.
|
481
|
+
* ```js
|
482
|
+
* bindDiffUpdate(el, source, updater, {
|
483
|
+
* initial: (v, el) => {
|
484
|
+
* el.innerHTML = v.name;
|
485
|
+
* }
|
486
|
+
* })
|
487
|
+
* ```
|
488
|
+
* @param elOrQuery
|
489
|
+
* @param source
|
490
|
+
* @param updater
|
491
|
+
* @param opts
|
492
|
+
* @returns
|
493
|
+
*/
|
494
|
+
declare const bindDiffUpdate: <V>(source: _ixfx_rx0.ReactiveDiff<V>, elOrQuery: string | HTMLElement | null, updater: (diffs: Pathed.PathDataChange<any>[], el: HTMLElement) => void, opts?: Partial<BindUpdateOpts<V>>) => PipeDomBinding & {
|
495
|
+
refresh: () => void;
|
496
|
+
};
|
497
|
+
/**
|
498
|
+
* Creates a new HTML element and calls `bindUpdate` so values from `source` can be used
|
499
|
+
* to update it.
|
500
|
+
*
|
501
|
+
*
|
502
|
+
* ```js
|
503
|
+
* // Creates a span, adding it to <body>
|
504
|
+
* const b = createUpdate(dataSource, (value, el) => {
|
505
|
+
* el.width = value.width;
|
506
|
+
* el.height = value.height;
|
507
|
+
* }, {
|
508
|
+
* tagName: `SPAN`,
|
509
|
+
* parentEl: document.body
|
510
|
+
* })
|
511
|
+
* ```
|
512
|
+
* @param source
|
513
|
+
* @param updater
|
514
|
+
* @param options
|
515
|
+
* @returns
|
516
|
+
*/
|
517
|
+
/**
|
518
|
+
* Creates, updates & deletes elements based on pathed values from a reactive.
|
519
|
+
*
|
520
|
+
* This means that elements are only manipulated if its associated data changes,
|
521
|
+
* and elements are not modified if there's no need to.
|
522
|
+
* @param source
|
523
|
+
* @param options
|
524
|
+
*/
|
525
|
+
declare const elements: <T>(source: _ixfx_rx0.ReactiveDiff<T> | (_ixfx_rx0.ReactiveDiff<T> & _ixfx_rx0.ReactiveInitial<T>), options: Partial<ElementsOptions>) => void;
|
526
|
+
declare function win(): {
|
527
|
+
dispose: (reason?: string) => void;
|
528
|
+
size: _ixfx_rx0.Reactive<{
|
529
|
+
lazy: string;
|
530
|
+
transform: () => {
|
531
|
+
width: number;
|
532
|
+
height: number;
|
533
|
+
};
|
534
|
+
}> & {
|
535
|
+
last(): {
|
536
|
+
lazy: string;
|
537
|
+
transform: () => {
|
538
|
+
width: number;
|
539
|
+
height: number;
|
540
|
+
};
|
541
|
+
};
|
542
|
+
};
|
543
|
+
pointer: _ixfx_rx0.Reactive<{
|
544
|
+
lazy: string;
|
545
|
+
transform: (args: Event | undefined) => {
|
546
|
+
x: number;
|
547
|
+
y: number;
|
548
|
+
};
|
549
|
+
}> & {
|
550
|
+
last(): {
|
551
|
+
lazy: string;
|
552
|
+
transform: (args: Event | undefined) => {
|
553
|
+
x: number;
|
554
|
+
y: number;
|
555
|
+
};
|
556
|
+
};
|
557
|
+
};
|
558
|
+
};
|
559
|
+
//# sourceMappingURL=dom.d.ts.map
|
560
|
+
declare namespace index_d_exports {
|
561
|
+
export { BindUpdateOpts, DomBindInputOptions, DomBindResolvedSource, DomBindSourceValue, DomBindTargetNode, DomBindTargetNodeResolved, DomBindUnresolvedSource, DomBindValueTarget, DomCreateOptions, DomFormOptions, DomNumberInputValueOptions, DomValueOptions, ElementBind, ElementsOptions, PipeDomBinding, ReactiveColour, bind, bindDiffUpdate, bindElement, bindHtml, bindText, bindUpdate, bindValueText, browserResizeObservable, colour, cssClassChange, domForm, domHslInputValue, domInputValue, domNumberInputValue, elements, fromDomQuery, win };
|
562
|
+
}
|
563
|
+
//#endregion
|
564
|
+
export { index_d_exports as Rx };
|
565
|
+
//# sourceMappingURL=index.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/rx/browser-resize.ts","../../src/rx/browser-theme-change.ts","../../src/rx/colour.ts","../../src/rx/dom-types.ts","../../src/rx/dom-source.ts","../../src/rx/dom.ts","../../src/rx/index.ts"],"sourcesContent":[],"mappings":"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"}
|