@agnos-ui/core 0.0.1-alpha.0

package/dist/lib/select.js

@@ -0,0 +1,240 @@
+import { asReadable, batch, computed, writable } from '@amadeus-it-group/tansu';
+import { createHasFocus } from './services/focustrack';
+import { stateStores, writablesForProps } from './services/stores';
+function defaultMatchFn(item, text) {
+    return JSON.stringify(item).toLowerCase().includes(text.toLowerCase());
+}
+function defaultItemId(item) {
+    return '' + item;
+}
+const defaultConfig = {
+    opened: false,
+    disabled: false,
+    items: [],
+    filterText: '',
+    loading: false,
+    selected: [],
+    itemId: defaultItemId,
+    matchFn: defaultMatchFn,
+    onFilterTextChange: undefined,
+    className: '',
+};
+/**
+ * Create a SelectWidget with given config props
+ * @param config - an optional alert config
+ * @returns a SelectWidget
+ */
+export function createSelect(config) {
+    // Props
+    const [{ opened$: _dirtyOpened$, items$, itemId$, matchFn$, onFilterTextChange$, ...otherProps }, patch] = writablesForProps(defaultConfig, config);
+    const { selected$, filterText$ } = otherProps;
+    const { hasFocus$, directive: hasFocusDirective } = createHasFocus();
+    const opened$ = computed(() => {
+        const _dirtyOpened = _dirtyOpened$();
+        const hasFocus = hasFocus$();
+        if (!hasFocus && _dirtyOpened) {
+            _dirtyOpened$.set(false);
+        }
+        return _dirtyOpened && hasFocus;
+    });
+    const highlightedIndex$ = (function () {
+        const store = writable(0);
+        const newStore = asReadable(store, {
+            set(index) {
+                const { length } = visible$();
+                if (index != undefined) {
+                    if (!length) {
+                        index = undefined;
+                    }
+                    else if (index < 0) {
+                        index = length - 1;
+                    }
+                    else if (index >= length) {
+                        index = 0;
+                    }
+                }
+                store.set(index);
+            },
+            update(fn) {
+                newStore.set(fn(store()));
+            },
+        });
+        return newStore;
+    })();
+    const visible$ = computed(() => {
+        const list = [];
+        if (opened$()) {
+            const selected = selected$();
+            const filterText = filterText$();
+            const matchFn = !filterText ? () => true : matchFn$();
+            const itemId = itemId$();
+            for (const item of items$()) {
+                if (matchFn(item, filterText)) {
+                    list.push({
+                        item,
+                        id: itemId(item),
+                        selected: selected.includes(item),
+                        select: function () {
+                            widget.api.select(this);
+                        }.bind(item),
+                        unselect: function () {
+                            widget.api.unselect(this);
+                        }.bind(item),
+                        toggle: function () {
+                            widget.api.toggleItem(this);
+                        }.bind(item),
+                    });
+                }
+            }
+        }
+        return list;
+    });
+    const highlighted$ = computed(() => {
+        const visible = visible$();
+        const highlightedIndex = highlightedIndex$();
+        return visible.length && highlightedIndex != undefined ? visible[highlightedIndex] : undefined;
+    });
+    const widget = {
+        ...stateStores({
+            visible$,
+            highlighted$,
+            opened$,
+            ...otherProps,
+        }),
+        patch,
+        api: {
+            clear() {
+                selected$.set([]);
+            },
+            select(item) {
+                widget.api.toggleItem(item, true);
+            },
+            unselect(item) {
+                widget.api.toggleItem(item, false);
+            },
+            toggleItem(item, selected) {
+                if (!items$().includes(item)) {
+                    return;
+                }
+                selected$.update((selectedItems) => {
+                    selectedItems = [...selectedItems];
+                    const index = selectedItems.indexOf(item);
+                    if (selected == null) {
+                        selected = index === -1;
+                    }
+                    if (selected && index === -1) {
+                        selectedItems.push(item);
+                    }
+                    else if (!selected && index !== -1) {
+                        selectedItems.splice(index, 1);
+                    }
+                    return selectedItems;
+                });
+            },
+            clearText() {
+                // FIXME: not implemented yet!
+            },
+            highlight(item) {
+                const index = visible$().findIndex((itemCtx) => itemCtx.item === item);
+                highlightedIndex$.set(index === -1 ? undefined : index);
+            },
+            highlightFirst() {
+                highlightedIndex$.set(0);
+            },
+            highlightPrevious() {
+                highlightedIndex$.update((highlightedIndex) => {
+                    return highlightedIndex != null ? highlightedIndex - 1 : -1;
+                });
+            },
+            highlightNext() {
+                highlightedIndex$.update((highlightedIndex) => {
+                    return highlightedIndex != null ? highlightedIndex + 1 : Infinity;
+                });
+            },
+            highlightLast() {
+                highlightedIndex$.set(-1);
+            },
+            focus(item) {
+                // FIXME: not implemented yet!
+            },
+            focusFirst() {
+                // FIXME: not implemented yet!
+            },
+            focusPrevious() {
+                // FIXME: not implemented yet!
+            },
+            focusNext() {
+                // FIXME: not implemented yet!
+            },
+            focusLast() {
+                // FIXME: not implemented yet!
+            },
+            open: () => widget.api.toggle(true),
+            close: () => widget.api.toggle(false),
+            toggle(isOpen) {
+                _dirtyOpened$.update((value) => (isOpen != null ? isOpen : !value));
+            },
+        },
+        directives: {
+            hasFocusDirective,
+        },
+        actions: {
+            onInput({ target }) {
+                const value = target.value;
+                batch(() => {
+                    patch({
+                        opened: value != null && value !== '',
+                        filterText: value,
+                    });
+                    onFilterTextChange$()?.(value);
+                });
+            },
+            onInputKeydown(e) {
+                const { ctrlKey, key } = e;
+                let keyManaged = true;
+                switch (key) {
+                    case 'ArrowDown': {
+                        const isOpen = opened$();
+                        if (isOpen) {
+                            if (ctrlKey) {
+                                widget.api.highlightLast();
+                            }
+                            else {
+                                widget.api.highlightNext();
+                            }
+                        }
+                        else {
+                            widget.api.open();
+                            widget.api.highlightFirst();
+                        }
+                        break;
+                    }
+                    case 'ArrowUp':
+                        if (ctrlKey) {
+                            widget.api.highlightFirst();
+                        }
+                        else {
+                            widget.api.highlightPrevious();
+                        }
+                        break;
+                    case 'Enter': {
+                        const itemCtx = highlighted$();
+                        if (itemCtx) {
+                            widget.api.toggleItem(itemCtx.item);
+                        }
+                        break;
+                    }
+                    case 'Escape':
+                        _dirtyOpened$.set(false);
+                        break;
+                    default:
+                        keyManaged = false;
+                }
+                if (keyManaged) {
+                    e.preventDefault();
+                }
+            },
+        },
+    };
+    return widget;
+}

package/dist/lib/services/checks.d.ts

@@ -0,0 +1,32 @@
+/**
+ * a number type guard
+ * @param value the value to check
+ * @returns true if the value is a number
+ */
+export declare function isNumber(value: any): value is number;
+/**
+ * a boolean type guard
+ * @param value the value to check
+ * @returns true if the value is a boolean
+ */
+export declare function isBoolean(value: any): value is boolean;
+/**
+ * a function type guard
+ * @param value the value to check
+ * @returns true if the value is a function
+ */
+export declare function isFunction(value: any): value is (...args: any[]) => any;
+/**
+ * a string type guard
+ * @param value the value to check
+ * @returns true if the value is a string
+ */
+export declare function isString(value: any): value is string;
+/**
+ * Clamp the value based on a maximum and optional minimum
+ * @param value the value to check
+ * @param max the max to clamp to
+ * @param [min] the min to clamp to
+ * @returns the clamped value
+ */
+export declare function clamp(value: number, max: number, min?: number): number;

package/dist/lib/services/checks.js

@@ -0,0 +1,43 @@
+/**
+ * a number type guard
+ * @param value the value to check
+ * @returns true if the value is a number
+ */
+export function isNumber(value) {
+    return typeof value === 'number' && !isNaN(value) && Number.isFinite(value);
+}
+/**
+ * a boolean type guard
+ * @param value the value to check
+ * @returns true if the value is a boolean
+ */
+export function isBoolean(value) {
+    return value === true || value === false;
+}
+/**
+ * a function type guard
+ * @param value the value to check
+ * @returns true if the value is a function
+ */
+export function isFunction(value) {
+    return typeof value === 'function';
+}
+/**
+ * a string type guard
+ * @param value the value to check
+ * @returns true if the value is a string
+ */
+export function isString(value) {
+    return typeof value === 'string';
+}
+// TODO should we check that max > min?
+/**
+ * Clamp the value based on a maximum and optional minimum
+ * @param value the value to check
+ * @param max the max to clamp to
+ * @param [min] the min to clamp to
+ * @returns the clamped value
+ */
+export function clamp(value, max, min = 0) {
+    return Math.max(Math.min(value, max), min);
+}

package/dist/lib/services/directiveUtils.d.ts

@@ -0,0 +1,95 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+import type { Directive } from '../types';
+/**
+ * Binds the given directive to a store that provides its argument.
+ *
+ * @remarks
+ *
+ * The returned directive can be used without argument, it will ignore any argument passed to it
+ * and will call the provided directive with the content of the provided store as its argument,
+ * calling its update method when the content of the store changes.
+ *
+ * @param directive - directive to bind
+ * @param directiveArg$ - store containing the argument of the directive
+ * @returns The bound directive that can be used with no argument.
+ */
+export declare const bindDirective: <T>(directive: Directive<T>, directiveArg$: ReadableSignal<T>) => Directive;
+/**
+ * Returns a directive that ignores any argument passed to it and calls the provided directive without any
+ * argument.
+ *
+ * @param directive - directive to wrap
+ * @returns The resulting directive.
+ */
+export declare const bindDirectiveNoArg: <T>(directive: Directive<void | T>) => Directive;
+/**
+ * Returns a directive that subscribes to the given store while it is used on a DOM element,
+ * and that unsubscribes from it when it is no longer used.
+ *
+ * @param store - store on which there will be an active subscription while the returned directive is used.
+ * @param asyncUnsubscribe - true if unsubscribing from the store should be done asynchronously (which is the default), and
+ * false if it should be done synchronously when the directive is destroyed
+ * @returns The resulting directive.
+ */
+export declare const directiveSubscribe: (store: ReadableSignal<any>, asyncUnsubscribe?: boolean) => Directive;
+/**
+ * Returns a directive that calls the provided function with the arguments passed to the directive
+ * on initialization and each time they are updated.
+ *
+ * @param update - Function called with the directive argument when the directive is initialized and when its argument is updated.
+ * @returns The resulting directive.
+ */
+export declare const directiveUpdate: <T>(update: (arg: T) => void) => Directive<T>;
+/**
+ * Utility to create a store that contains an array of items.
+ * @returns a store containing an array of items.
+ */
+export declare const registrationArray: <T>() => ReadableSignal<T[]> & {
+    register: (element: T) => () => void;
+};
+/**
+ * Returns a directive and a store. The store contains at any time the array of all the DOM elements on which the directive is
+ * currently used.
+ *
+ * @remarks
+ * If the directive is intended to be used on a single element element, it may be more appropriate to use
+ * {@link createStoreDirective} instead.
+ *
+ * @returns An object with two properties: the `directive` property that is the directive to use on some DOM elements,
+ * and the `elements$` property that is the store containing an array of all the elements on which the directive is currently
+ * used.
+ */
+export declare const createStoreArrayDirective: () => {
+    directive: Directive;
+    elements$: ReadableSignal<HTMLElement[]>;
+};
+/**
+ * Returns a directive and a store. When the directive is used on a DOM element, the store contains that DOM element.
+ * When the directive is not used, the store contains null.
+ *
+ * @remarks
+ * If the directive is used on more than one element, an error is displayed in the console and the element is ignored.
+ * If the directive is intended to be used on more than one element, please use {@link createStoreArrayDirective} instead.
+ *
+ * @returns An object with two properties: the `directive` property that is the directive to use on one DOM element,
+ * and the `element$` property that is the store containing the element on which the directive is currently used (or null
+ * if the store is not currently used).
+ */
+export declare const createStoreDirective: () => {
+    directive: Directive;
+    element$: ReadableSignal<HTMLElement | null>;
+};
+/**
+ * Merges multiple directives into a single directive that executes all of them when called.
+ *
+ * @remarks
+ * All directives receive the same argument upon initialization and update.
+ * Directives are created and updated in the same order as they appear in the arguments list,
+ * they are destroyed in the reverse order.
+ * All calls to the directives (to create, update and destroy them) are wrapped in a call to the
+ * batch function of tansu
+ *
+ * @param args - directives to merge into a single directive.
+ * @returns The resulting merged directive.
+ */
+export declare const mergeDirectives: <T>(...args: (Directive | Directive<T>)[]) => Directive<T>;

package/dist/lib/services/directiveUtils.js

@@ -0,0 +1,190 @@
+import { asReadable, batch, readable, writable } from '@amadeus-it-group/tansu';
+import { noop } from '../utils';
+/**
+ * Binds the given directive to a store that provides its argument.
+ *
+ * @remarks
+ *
+ * The returned directive can be used without argument, it will ignore any argument passed to it
+ * and will call the provided directive with the content of the provided store as its argument,
+ * calling its update method when the content of the store changes.
+ *
+ * @param directive - directive to bind
+ * @param directiveArg$ - store containing the argument of the directive
+ * @returns The bound directive that can be used with no argument.
+ */
+export const bindDirective = (directive, directiveArg$) => {
+    return (element) => {
+        let firstTime = true;
+        let instance;
+        const unsubscribe = directiveArg$.subscribe((value) => {
+            if (firstTime) {
+                firstTime = false;
+                instance = directive(element, value);
+            }
+            else {
+                instance?.update?.(value);
+            }
+        });
+        return {
+            destroy() {
+                instance?.destroy?.();
+                unsubscribe();
+            },
+        };
+    };
+};
+const noArg = readable(undefined);
+/**
+ * Returns a directive that ignores any argument passed to it and calls the provided directive without any
+ * argument.
+ *
+ * @param directive - directive to wrap
+ * @returns The resulting directive.
+ */
+export const bindDirectiveNoArg = (directive) => bindDirective(directive, noArg);
+/**
+ * Returns a directive that subscribes to the given store while it is used on a DOM element,
+ * and that unsubscribes from it when it is no longer used.
+ *
+ * @param store - store on which there will be an active subscription while the returned directive is used.
+ * @param asyncUnsubscribe - true if unsubscribing from the store should be done asynchronously (which is the default), and
+ * false if it should be done synchronously when the directive is destroyed
+ * @returns The resulting directive.
+ */
+export const directiveSubscribe = (store, asyncUnsubscribe = true) => () => {
+    const unsubscribe = store.subscribe(noop);
+    return {
+        destroy: async () => {
+            if (asyncUnsubscribe) {
+                await 0;
+            }
+            unsubscribe();
+        },
+    };
+};
+/**
+ * Returns a directive that calls the provided function with the arguments passed to the directive
+ * on initialization and each time they are updated.
+ *
+ * @param update - Function called with the directive argument when the directive is initialized and when its argument is updated.
+ * @returns The resulting directive.
+ */
+export const directiveUpdate = (update) => (element, arg) => {
+    update(arg);
+    return {
+        update,
+    };
+};
+const equalOption = { equal: Object.is };
+/**
+ * Utility to create a store that contains an array of items.
+ * @returns a store containing an array of items.
+ */
+export const registrationArray = () => {
+    const elements$ = writable([], equalOption);
+    return asReadable(elements$, {
+        /**
+         * Add the given element to the array.
+         * @param element - Element to be added to the array.
+         * @returns A function to remove the element from the array.
+         */
+        register: (element) => {
+            let removed = false;
+            elements$.update((currentElements) => [...currentElements, element]);
+            return () => {
+                if (!removed) {
+                    removed = true;
+                    elements$.update((currentElements) => {
+                        const index = currentElements.indexOf(element);
+                        if (index > -1) {
+                            const copy = [...currentElements];
+                            copy.splice(index, 1);
+                            return copy;
+                        }
+                        return currentElements; // no change
+                    });
+                }
+            };
+        },
+    });
+};
+/**
+ * Returns a directive and a store. The store contains at any time the array of all the DOM elements on which the directive is
+ * currently used.
+ *
+ * @remarks
+ * If the directive is intended to be used on a single element element, it may be more appropriate to use
+ * {@link createStoreDirective} instead.
+ *
+ * @returns An object with two properties: the `directive` property that is the directive to use on some DOM elements,
+ * and the `elements$` property that is the store containing an array of all the elements on which the directive is currently
+ * used.
+ */
+export const createStoreArrayDirective = () => {
+    const elements$ = registrationArray();
+    return {
+        elements$: asReadable(elements$),
+        directive: (element) => ({ destroy: elements$.register(element) }),
+    };
+};
+/**
+ * Returns a directive and a store. When the directive is used on a DOM element, the store contains that DOM element.
+ * When the directive is not used, the store contains null.
+ *
+ * @remarks
+ * If the directive is used on more than one element, an error is displayed in the console and the element is ignored.
+ * If the directive is intended to be used on more than one element, please use {@link createStoreArrayDirective} instead.
+ *
+ * @returns An object with two properties: the `directive` property that is the directive to use on one DOM element,
+ * and the `element$` property that is the store containing the element on which the directive is currently used (or null
+ * if the store is not currently used).
+ */
+export const createStoreDirective = () => {
+    const element$ = writable(null, equalOption);
+    return {
+        element$: asReadable(element$),
+        directive: (element) => {
+            let valid = false;
+            element$.update((currentElement) => {
+                if (currentElement) {
+                    console.error('The directive cannot be used on multiple elements.', currentElement, element);
+                    return currentElement;
+                }
+                valid = true;
+                return element;
+            });
+            return valid
+                ? {
+                    destroy() {
+                        element$.update((currentElement) => (element === currentElement ? null : currentElement));
+                    },
+                }
+                : undefined;
+        },
+    };
+};
+/**
+ * Merges multiple directives into a single directive that executes all of them when called.
+ *
+ * @remarks
+ * All directives receive the same argument upon initialization and update.
+ * Directives are created and updated in the same order as they appear in the arguments list,
+ * they are destroyed in the reverse order.
+ * All calls to the directives (to create, update and destroy them) are wrapped in a call to the
+ * batch function of tansu
+ *
+ * @param args - directives to merge into a single directive.
+ * @returns The resulting merged directive.
+ */
+export const mergeDirectives = (...args) => (element, arg) => {
+    const instances = batch(() => args.map((directive) => directive(element, arg)));
+    return {
+        update(arg) {
+            batch(() => instances.forEach((instance) => instance?.update?.(arg)));
+        },
+        destroy() {
+            batch(() => instances.reverse().forEach((instance) => instance?.destroy?.()));
+        },
+    };
+};

package/dist/lib/services/focustrack.d.ts

@@ -0,0 +1,19 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+import type { Directive } from '../types';
+export declare const activeElement$: ReadableSignal<Element | null>;
+export interface HasFocus {
+    /**
+     * Directive to put on some elements.
+     */
+    directive: Directive;
+    /**
+     * Store that contains true if the activeElement is one of the elements which has the directive,
+     * or any of their descendants.
+     */
+    hasFocus$: ReadableSignal<boolean>;
+}
+/**
+ * Create a HasFocus
+ * @returns a HasFocus
+ */
+export declare function createHasFocus(): HasFocus;

package/dist/lib/services/focustrack.js

@@ -0,0 +1,46 @@
+import { computed, readable } from '@amadeus-it-group/tansu';
+import { createStoreArrayDirective } from './directiveUtils';
+const evtFocusIn = 'focusin';
+const evtFocusOut = 'focusout';
+export const activeElement$ = readable(null, {
+    onUse({ set }) {
+        function setActiveElement() {
+            set(document.activeElement);
+        }
+        setActiveElement();
+        const container = document.documentElement;
+        function onFocusOut() {
+            setTimeout(setActiveElement);
+        }
+        container.addEventListener(evtFocusIn, setActiveElement);
+        container.addEventListener(evtFocusOut, onFocusOut);
+        return () => {
+            container.removeEventListener(evtFocusIn, setActiveElement);
+            container.removeEventListener(evtFocusOut, onFocusOut);
+        };
+    },
+    equal: Object.is,
+});
+/**
+ * Create a HasFocus
+ * @returns a HasFocus
+ */
+export function createHasFocus() {
+    const { elements$, directive } = createStoreArrayDirective();
+    const hasFocus$ = computed(() => {
+        const activeElement = activeElement$();
+        if (!activeElement) {
+            return false;
+        }
+        for (const element of elements$()) {
+            if (element === activeElement || element.contains(activeElement)) {
+                return true;
+            }
+        }
+        return false;
+    });
+    return {
+        directive,
+        hasFocus$,
+    };
+}

package/dist/lib/services/index.d.ts

@@ -0,0 +1,6 @@
+export * from './siblingsInert';
+export * from './directiveUtils';
+export * from './focustrack';
+export * from './portal';
+export * from './stores';
+export * from './writables';

package/dist/lib/services/index.js

@@ -0,0 +1,6 @@
+export * from './siblingsInert';
+export * from './directiveUtils';
+export * from './focustrack';
+export * from './portal';
+export * from './stores';
+export * from './writables';

package/dist/lib/services/portal.d.ts

@@ -0,0 +1,6 @@
+import type { Directive } from '../types';
+export type PortalDirectiveArg = {
+    container?: HTMLElement | null | undefined;
+    insertBefore?: HTMLElement | null | undefined;
+} | null | undefined;
+export declare const portal: Directive<PortalDirectiveArg>;