@ixfx/ui 0.36.0

package/dist/src/rx/dom-types.d.ts

@@ -0,0 +1,128 @@
+import type { Reactive } from "@ixfx/rx";
+import type { EventSourceOptions } from "@ixfx/rx/from";
+export type DomBindValueTarget = {
+    /**
+     * If _true_ `innerHTML` is set (a shortcut for elField:`innerHTML`)
+     */
+    htmlContent?: boolean;
+    /**
+     * If _true_, 'textContent' is set (a shortcut for elField:'textContext')
+     */
+    textContent?: boolean;
+    /**
+     * If set, this DOM element field is set. Eg 'textContent'
+     */
+    elField?: string;
+    /**
+     * If set, this DOM attribute is set, Eg 'width'
+     */
+    attribName?: string;
+    /**
+     * If set, this CSS variable is set, Eg 'hue' (sets '--hue')
+     */
+    cssVariable?: string;
+    /**
+     * If set, this CSS property is set, Eg 'background-color'
+     */
+    cssProperty?: string;
+};
+export type ElementBind = {
+    /**
+     * Tag name for this binding.
+     * Overrides `defaultTag`
+     */
+    tagName?: string;
+    /**
+     * If _true_, sub-paths are appended to element, rather than `container`
+     */
+    nestChildren?: boolean;
+    transform?: (value: any) => string;
+};
+export type ElementsOptions = {
+    container: HTMLElement | string;
+    defaultTag: string;
+    binds: Record<string, DomBindValueTarget & ElementBind>;
+};
+export type DomBindTargetNode = {
+    query?: string;
+    element?: HTMLElement;
+};
+export type DomBindTargetNodeResolved = {
+    element: HTMLElement;
+};
+export type DomBindUnresolvedSource<TSource, TDestination> = DomBindTargetNode & DomBindSourceValue<TSource, TDestination> & DomBindValueTarget;
+export type DomBindResolvedSource<TSource, TDestination> = DomBindTargetNodeResolved & DomBindSourceValue<TSource, TDestination> & DomBindValueTarget;
+export type DomBindSourceValue<TSource, TDestination> = {
+    twoway?: boolean;
+    /**
+     * Field from source value to pluck and use.
+     * This will also be the value passed to the transform
+     */
+    sourceField?: keyof TSource;
+    transform?: (input: TSource) => TDestination;
+    transformValue?: (input: any) => TDestination;
+};
+export type DomBindInputOptions<TSource, TDestination> = DomBindSourceValue<TSource, TDestination> & {
+    transformFromInput: (input: TDestination) => TSource;
+};
+export type BindUpdateOpts<V> = {
+    initial: (v: V, el: HTMLElement) => void;
+    binds: Record<string, DomBindValueTarget & {
+        transform?: (value: any) => string;
+    }>;
+};
+export type DomCreateOptions = {
+    tagName: string;
+    parentEl: string | HTMLElement;
+};
+export type PipeDomBinding = {
+    /**
+     * Remove binding and optionally delete element(s) (false by default)
+     */
+    remove(deleteElements: boolean): void;
+};
+export type DomValueOptions = EventSourceOptions & {
+    /**
+     * If true, the current value will be emitted even though it wasn't
+     * triggered by an event.
+     * Default: false
+     */
+    emitInitialValue: boolean;
+    attributeName: string;
+    fieldName: string;
+    /**
+     * Respond to when value has changed or when value is changing
+     * Default: `changed`
+     */
+    when: `changed` | `changing`;
+    fallbackValue: string;
+    upstreamSource?: Reactive<unknown>;
+    upstreamFilter?: (value: unknown) => string;
+};
+export type DomFormOptions<T extends Record<string, unknown>> = EventSourceOptions & {
+    /**
+     * If true, the current value will be emitted even though it wasn't
+     * triggered by an event.
+     * Default: false
+     */
+    emitInitialValue: boolean;
+    /**
+     * Respond to when value has changed or when value is changing
+     * Default: `changed`
+     */
+    when: `changed` | `changing`;
+    upstreamSource?: Reactive<T>;
+    upstreamFilter?: (name: string, value: unknown) => string;
+};
+export type DomNumberInputValueOptions = DomValueOptions & {
+    /**
+     * If true, sets up INPUT element to operate with relative values
+     */
+    relative?: boolean;
+    /**
+     * If true, when setting up, sets max to be on left side
+     */
+    inverted?: boolean;
+    upstreamSource?: Reactive<number>;
+};
+//# sourceMappingURL=dom-types.d.ts.map

package/dist/src/rx/dom-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-types.d.ts","sourceRoot":"","sources":["../../../src/rx/dom-types.ts"],"names":[],"mappings":"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"}

package/dist/src/rx/dom-types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/rx/dom.d.ts

@@ -0,0 +1,284 @@
+import { type PathDataChange } from "@ixfx/core/records";
+import * as Rx from "@ixfx/rx";
+import type { ElementsOptions, PipeDomBinding, BindUpdateOpts, DomBindSourceValue, DomBindValueTarget, DomBindUnresolvedSource } from './dom-types.js';
+/**
+ * Reactive stream of array of elements that match `query`.
+ * @param query
+ * @returns
+ */
+export declare function fromDomQuery(query: string): Rx.Reactive<HTMLElement[]> & {
+    set(value: HTMLElement[]): void;
+} & {
+    onField(fieldName: string, handler: (result: Rx.ObjectFieldHandler) => void): () => void;
+    onDiff(changes: (changes: PathDataChange<any>[]) => void): () => void;
+    update(changedPart: (import("@ixfx/core").RecursivePartial<HTMLElement> | undefined)[]): HTMLElement[];
+    updateField(field: string, value: any): void;
+} & {
+    last(): HTMLElement[];
+};
+/**
+ * Updates an element's `textContent` when the source value changes.
+ * ```js
+ * bindText(source, `#blah`);
+ * ```
+ * @param elOrQuery
+ * @param source
+ * @param bindOpts
+ */
+export declare const bindText: <TSource>(source: Rx.Reactive<TSource>, elOrQuery: string | HTMLElement | null, bindOpts?: Partial<DomBindSourceValue<TSource, string>>) => PipeDomBinding;
+/**
+ * Updates an element's `value` (as well as the 'value' attribute) when the source value changes.s
+ * @param source
+ * @param elOrQuery
+ * @param bindOpts
+ * @returns
+ */
+export declare const bindValueText: <TSource>(source: Rx.Reactive<TSource>, elOrQuery: string | HTMLInputElement | null, bindOpts?: Partial<DomBindSourceValue<TSource, string>>) => PipeDomBinding;
+/**
+ * Updates an element's `innerHTML` when the source value changes
+ * ```js
+ * bindHtml(source, `#blah`);
+ * ```
+ *
+ * Uses {@link bindElement}, with `{elField:'innerHTML'}` as the options.
+ * @param elOrQuery
+ * @param source
+ * @param bindOpts
+ * @returns
+ */
+export declare const bindHtml: <TSource>(source: Rx.Reactive<TSource>, elOrQuery: string | HTMLElement | null, bindOpts?: DomBindSourceValue<TSource, string>) => PipeDomBinding;
+/**
+ * Shortcut to bind to an elements attribute
+ * @param elOrQuery
+ * @param source
+ * @param attribute
+ * @param bindOpts
+ * @returns
+ */
+/**
+ * Shortcut to bind to a CSS variable
+ * @param elOrQuery
+ * @param source
+ * @param cssVariable
+ * @param bindOpts
+ * @returns
+ */
+/**
+ * Creates a new HTML element, calling {@link bind} on it to update when `source` emits new values.
+ *
+ *
+ * ```js
+ * // Set textContent of a SPAN with values from `source`
+ * create(source, { tagName: `span`, parentEl: document.body })
+ * ```
+ *
+ * If `parentEl` is not given in the options, the created element needs to be manually added
+ * ```js
+ * const b = create(source);
+ * someEl.append(b.el); // Append manually
+ * ```
+ *
+ * ```
+ * // Set 'title' attribute based on values from `source`
+ * create(source, { parentEl: document.body, attribName: `title` })
+ * ```
+ * @param source
+ * @param options
+ * @returns
+ */
+/**
+ * Update a DOM element's field, attribute or CSS variable when `source` produces a value.
+ *
+ * ```js
+ * // Access via DOM query. Binds to 'textContent' by default
+ * bind(readableSource, `#someEl`);
+ *
+ * // Set innerHTML instead
+ * bind(readableSource, someEl, { elField: `innerHTML` });
+ *
+ * // An attribute
+ * bind(readableSource, someEl, { attribName: `width` });
+ *
+ * // A css variable ('--' optiona)
+ * bind(readableSource, someEl, { cssVariable: `hue` });
+ *
+ * // Pluck a particular field from source data.
+ * // Ie someEl.textContent = value.colour
+ * bind(readableSource, someEl, { sourceField: `colour` });
+ *
+ * // Transform value before setting it to field
+ * bind(readableSource, someEl, {
+ *  field: `innerHTML`,
+ *  transform: (v) => `Colour: ${v.colour}`
+ * })
+ * ```
+ *
+ * If `source` has an initial value, this is used when first bound.
+ *
+ * Returns {@link PipeDomBinding} to control binding:
+ * ```js
+ * const bind = bind(source, `#someEl`);
+ * bind.remove();     // Unbind
+ * bind.remove(true); // Unbind and remove HTML element
+ * ```
+ *
+ * If several fields need to be updated based on a new value, consider using {@link bindUpdate} instead.
+ * @param elOrQuery Element to update to, or query string such as '#someid'
+ * @param source Source of data
+ * @param binds Bindings
+ */
+export declare const bindElement: <TSource, TDestination>(source: Rx.Reactive<TSource>, elOrQuery: string | HTMLElement | null, ...binds: (DomBindSourceValue<TSource, TDestination> & DomBindValueTarget)[]) => PipeDomBinding;
+/**
+ * Binds `source` to one or more element(s). One or more bindings for the same source
+ * can be provided.
+ *
+ * ```js
+ * bind(source,
+ *  // Binds .name field of source values to textContent of #some-element
+ *  { query: `#some-element`, sourceField: `name` },
+ *  { query: `section`, }
+ * );
+ * ```
+ *
+ * Can update
+ * * CSS variables
+ * * CSS styles
+ * * textContent / innerHTML
+ * * HTML DOM attributes and object fields
+ *
+ * Can use a particular field on source values, or use the whole value. These can
+ * pass through `transformValue` or `transform` respectively.
+ *
+ * Returns a function to unbind from source and optionally remove HTML element
+ * ```js
+ * const unbind = bind( . . . );
+ * unbind();     // Unbind
+ * unbind(true); // Unbind and remove HTML element(s)
+ * ```
+ * @param source
+ * @param bindsUnresolvedElements
+ * @returns
+ */
+export declare const bind: <TSource, TDestination>(source: Rx.Reactive<TSource>, ...bindsUnresolvedElements: DomBindUnresolvedSource<TSource, TDestination>[]) => PipeDomBinding;
+/**
+ * Calls `updater` whenever `source` produces a value. Useful when several fields from a value
+ * are needed to update an element.
+ * ```js
+ * bindUpdate(source, `#someEl`, (v, el) => {
+ *  el.setAttribute(`width`, v.width);
+ *  el.setAttribute(`height`, v.height);
+ * });
+ * ```
+ *
+ * Returns a {@link PipeDomBinding} to manage binding
+ * ```js
+ * const b = bindUpdate(...);
+ * b.remove();     // Disconnect binding
+ * b.remove(true); // Disconnect binding and remove element
+ * b.el;           // HTML element
+ * ```
+ * @param elOrQuery
+ * @param source
+ * @param updater
+ * @returns
+ */
+export declare const bindUpdate: <V>(source: Rx.Reactive<V>, elOrQuery: string | HTMLElement, updater: (v: V, el: HTMLElement) => void) => PipeDomBinding;
+/**
+ * Updates a HTML element based on diffs on an object.
+ * ```js
+ * // Wrap an object
+ * const o = Rx.object({ name: `Jane`, ticks: 0 });
+ * const b = bindDiffUpdate(`#test`, o, (diffs, el) => {
+ *  // el = reference to #test
+ * // diff = Array of Changes,
+ * //  eg [ { path: `ticks`, value: 797, previous: 0 } ]
+ *  for (const diff of diffs) {
+ *    if (diff.path === `ticks`) el.textContent = `${diff.previous} -> ${diff.value}`
+ *  }
+ * })
+ *
+ * // Eg. update field
+ * o.updateField(`ticks`, Math.floor(Math.random()*1000));
+ * ```
+ *
+ * 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
+ * update happens.
+ * ```js
+ * bindDiffUpdate(el, source, updater, {
+ *  initial: (v, el) => {
+ *    el.innerHTML = v.name;
+ *  }
+ * })
+ * ```
+ * @param elOrQuery
+ * @param source
+ * @param updater
+ * @param opts
+ * @returns
+ */
+export declare const bindDiffUpdate: <V>(source: Rx.ReactiveDiff<V>, elOrQuery: string | HTMLElement | null, updater: (diffs: PathDataChange<any>[], el: HTMLElement) => void, opts?: Partial<BindUpdateOpts<V>>) => PipeDomBinding & {
+    refresh: () => void;
+};
+/**
+ * Creates a new HTML element and calls `bindUpdate` so values from `source` can be used
+ * to update it.
+ *
+ *
+ * ```js
+ * // Creates a span, adding it to <body>
+ * const b = createUpdate(dataSource, (value, el) => {
+ *  el.width = value.width;
+ *  el.height = value.height;
+ * }, {
+ *  tagName: `SPAN`,
+ *  parentEl: document.body
+ * })
+ * ```
+ * @param source
+ * @param updater
+ * @param options
+ * @returns
+ */
+/**
+ * Creates, updates & deletes elements based on pathed values from a reactive.
+ *
+ * This means that elements are only manipulated if its associated data changes,
+ * and elements are not modified if there's no need to.
+ * @param source
+ * @param options
+ */
+export declare const elements: <T>(source: Rx.ReactiveDiff<T> | (Rx.ReactiveDiff<T> & Rx.ReactiveInitial<T>), options: Partial<ElementsOptions>) => void;
+export declare function win(): {
+    dispose: (reason?: string) => void;
+    size: Rx.Reactive<{
+        lazy: string;
+        transform: () => {
+            width: number;
+            height: number;
+        };
+    }> & {
+        last(): {
+            lazy: string;
+            transform: () => {
+                width: number;
+                height: number;
+            };
+        };
+    };
+    pointer: Rx.Reactive<{
+        lazy: string;
+        transform: (args: Event | undefined) => {
+            x: number;
+            y: number;
+        };
+    }> & {
+        last(): {
+            lazy: string;
+            transform: (args: Event | undefined) => {
+                x: number;
+                y: number;
+            };
+        };
+    };
+};
+//# sourceMappingURL=dom.d.ts.map

package/dist/src/rx/dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/rx/dom.ts"],"names":[],"mappings":"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"}