@agnos-ui/core 0.0.1-alpha.1 → 0.0.1-alpha.11

package/select.d.ts

@@ -1,196 +0,0 @@
-import type { HasFocus } from './services/focustrack';
-import type { PropsConfig } from './services/stores';
-import type { Widget } from './types';
-import type { WidgetsCommonPropsAndState } from './commonProps';
-export interface SelectCommonPropsAndState<Item> extends WidgetsCommonPropsAndState {
-    /**
-     * List of selected items
-     */
-    selected: Item[];
-    /**
-     * Filtered text to be display in the filter input
-     */
-    filterText: string;
-    /**
-     * true if the select is disabled
-     */
-    disabled: boolean;
-    /**
-     * true if the select is open
-     */
-    opened: boolean;
-    /**
-     * true if a loading process is being done
-     */
-    loading: boolean;
-}
-export interface SelectProps<T> extends SelectCommonPropsAndState<T> {
-    /**
-     * List of available items for the dropdown
-     */
-    items: T[];
-    /**
-     * Custom function to filter an item.
-     * By default, item is considered as a string, and the function returns true if the text is found
-     */
-    matchFn(item: T, text: string): boolean;
-    /**
-     * Custom function to get the id of an item
-     * By default, the item is returned
-     */
-    itemId(item: T): string;
-    /**
-     * Callback called when the text filter change
-     * @param text - Filtered text
-     */
-    onFilterTextChange?(text: string): void;
-}
-/**
- * Item representation built from the items provided in parameters
- */
-export interface ItemCtx<T> {
-    /**
-     * Original item given in the parameters
-     */
-    item: T;
-    /**
-     * Unique id to identify the item
-     */
-    id: string;
-    /**
-     * Specify if the item is checked
-     */
-    selected: boolean;
-    /**
-     * Select the item
-     */
-    select(): void;
-    /**
-     * Unselect the item
-     */
-    unselect(): void;
-    /**
-     * Toggle the item selection
-     */
-    toggle(): void;
-}
-export interface SelectState<Item> extends SelectCommonPropsAndState<Item> {
-    /**
-     * List of visible items displayed in the menu
-     */
-    visible: ItemCtx<Item>[];
-    /**
-     * Highlighted item context.
-     * It is designed to define the highlighted item in the dropdown menu
-     */
-    highlighted: ItemCtx<Item> | undefined;
-}
-export interface SelectApi<Item> {
-    /**
-     * Clear all the selected items
-     */
-    clear(): void;
-    /**
-     * Clear the filter text
-     */
-    clearText(): void;
-    /**
-     * Highlight the given item, if there is a corresponding match among the visible list
-     */
-    highlight(item: Item): void;
-    /**
-     * Highlight the first item among the visible list
-     */
-    highlightFirst(): void;
-    /**
-     * Highlight the previous item among the visible list
-     * Loop to the last item if needed
-     */
-    highlightPrevious(): void;
-    /**
-     * Highlight the next item among the visible list.
-     * Loop to the first item if needed
-     */
-    highlightNext(): void;
-    /**
-     * Highlight the last item among the visible list
-     */
-    highlightLast(): void;
-    /**
-     * Focus the provided item among the selected list.
-     * The focus feature is designed to know what item must be focused in the UI, i.e. among the badge elements.
-     */
-    focus(item: Item): void;
-    /**
-     * Focus the first element
-     */
-    focusFirst(): void;
-    /**
-     * Focus the previous element. If no element was focused before the call, nothing happens.
-     */
-    focusPrevious(): void;
-    /**
-     * Focus the next element. If no element was focused before the call, nothing happens.
-     */
-    focusNext(): void;
-    /**
-     * Focus the last element. If no element was focused before the call, nothing happens.
-     */
-    focusLast(): void;
-    /**
-     * Select the provided item.
-     * The selected list is used to
-     * @param item - the item to select
-     */
-    select(item: Item): void;
-    /**
-     * Unselect the provided item.
-     * @param item - the item to unselect
-     */
-    unselect(item: Item): void;
-    /**
-     * Toggle the selection of an item
-     * @param item - the item to toggle
-     * @param selected - an optional boolean to enforce the selected/unselected state instead of toggling
-     */
-    toggleItem(item: Item, selected?: boolean): void;
-    /**
-     * open the select
-     */
-    open(): void;
-    /**
-     * close the select
-     */
-    close(): void;
-    /**
-     * Toggle the dropdown menu
-     * @param isOpen - If specified, set the menu in the defined state.
-     */
-    toggle(isOpen?: boolean): void;
-}
-export interface SelectDirectives {
-    /**
-     * Directive to be used in the input group and the menu containers
-     */
-    hasFocusDirective: HasFocus['directive'];
-}
-export interface SelectActions {
-    /**
-     * Method to be plugged to on the 'input' event. The input text will be used as the filter text.
-     */
-    onInput: (e: {
-        target: any;
-    }) => void;
-    /**
-     * Method to be plugged to on an keydown event, in order to control the keyboard interactions with the highlighted item.
-     * It manages arrow keys to move the highlighted item, or enter to toggle the item.
-     */
-    onInputKeydown: (e: any) => void;
-}
-export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions, SelectDirectives>;
-/**
- * Create a SelectWidget with given config props
- * @param config - an optional alert config
- * @returns a SelectWidget
- */
-export declare function createSelect<Item>(config?: PropsConfig<SelectProps<Item>>): SelectWidget<Item>;

package/select.js

@@ -1,240 +0,0 @@
-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/services/checks.d.ts

@@ -1,32 +0,0 @@
-/**
- * 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/services/checks.js

@@ -1,43 +0,0 @@
-/**
- * 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/services/index.d.ts

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

package/services/index.js

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

package/services/writables.d.ts

@@ -1,7 +0,0 @@
-import type { WritableWithDefaultOptions } from './stores';
-import { INVALID_VALUE } from './stores';
-export declare const testToNormalizeValue: <T>(filter: (value: T) => boolean) => (value: T) => typeof INVALID_VALUE | T;
-export declare const typeNumber: WritableWithDefaultOptions<number>;
-export declare const typeBoolean: WritableWithDefaultOptions<boolean>;
-export declare const typeString: WritableWithDefaultOptions<string, any>;
-export declare const typeFunction: WritableWithDefaultOptions<(...args: any[]) => any>;

package/services/writables.js

@@ -1,16 +0,0 @@
-import { isBoolean, isFunction, isNumber, isString } from './checks';
-import { INVALID_VALUE } from './stores';
-export const testToNormalizeValue = (filter) => (value) => filter(value) ? value : INVALID_VALUE;
-export const typeNumber = {
-    normalizeValue: testToNormalizeValue(isNumber),
-};
-export const typeBoolean = {
-    normalizeValue: testToNormalizeValue(isBoolean),
-};
-export const typeString = {
-    normalizeValue: testToNormalizeValue(isString),
-};
-export const typeFunction = {
-    normalizeValue: testToNormalizeValue(isFunction),
-    equal: Object.is,
-};

package/transitions/bootstrap/collapse.d.ts

@@ -1,2 +0,0 @@
-export declare const collapseVerticalTransition: import("..").TransitionFn;
-export declare const collapseHorizontalTransition: import("..").TransitionFn;

package/transitions/bootstrap/fade.d.ts

@@ -1 +0,0 @@
-export declare const fadeTransition: import("..").TransitionFn;

package/transitions/bootstrap/index.d.ts

@@ -1,2 +0,0 @@
-export * from './collapse';
-export * from './fade';

package/transitions/bootstrap/index.js

@@ -1,2 +0,0 @@
-export * from './collapse';
-export * from './fade';

package/transitions/collapse.d.ts

@@ -1,29 +0,0 @@
-export interface CollapseContext {
-    /**
-     * the maximum size of the collapseable content.
-     */
-    maxSize?: string;
-    /**
-     * the minimum size of the collapseable content
-     */
-    minSize?: string;
-}
-export interface CollapseConfig {
-    /**
-     * the direction in which the collapsing is performed
-     */
-    dimension?: 'width' | 'height';
-    /**
-     * the list of classes to add to the collapsable element when shown
-     */
-    showClasses?: string[];
-    /**
-     * the list of classes to add to the collapsable element when collapsed
-     */
-    hideClasses?: string[];
-    /**
-     * the list of classes to add to the collapsable element while transitioning
-     */
-    animationPendingClasses?: string[];
-}
-export declare const createCollapseTransition: ({ dimension, showClasses, hideClasses, animationPendingClasses }?: CollapseConfig) => import("./baseTransitions").TransitionFn;

package/transitions/index.d.ts

@@ -1,5 +0,0 @@
-export * from './baseTransitions';
-export * from './cssTransitions';
-export * from './simpleClassTransition';
-import * as bootstrap from './bootstrap';
-export { bootstrap };

package/transitions/index.js

@@ -1,5 +0,0 @@
-export * from './baseTransitions';
-export * from './cssTransitions';
-export * from './simpleClassTransition';
-import * as bootstrap from './bootstrap';
-export { bootstrap };

package/transitions/simpleClassTransition.js

@@ -1,28 +0,0 @@
-import { createCSSTransition } from './cssTransitions';
-import { addClasses, reflow, removeClasses } from './utils';
-export const createSimpleClassTransition = ({ animationPendingClasses, animationPendingShowClasses, animationPendingHideClasses, showClasses, hideClasses, }) => createCSSTransition((element, direction, animation, context) => {
-    removeClasses(element, showClasses);
-    removeClasses(element, hideClasses);
-    if (animation) {
-        removeClasses(element, direction === 'show' ? animationPendingHideClasses : animationPendingShowClasses);
-        if (!context.started) {
-            context.started = true;
-            // if the animation is starting, explicitly sets the initial state (reverse of the direction)
-            // so that it is not impacted by another reflow done somewhere else before we had time to put
-            // the right classes:
-            const classes = direction === 'show' ? hideClasses : showClasses;
-            addClasses(element, classes);
-            reflow(element);
-            removeClasses(element, classes);
-        }
-        addClasses(element, animationPendingClasses);
-        reflow(element);
-        addClasses(element, direction === 'show' ? animationPendingShowClasses : animationPendingHideClasses);
-    }
-    return () => {
-        removeClasses(element, animationPendingClasses);
-        removeClasses(element, animationPendingShowClasses);
-        removeClasses(element, animationPendingHideClasses);
-        addClasses(element, direction === 'show' ? showClasses : hideClasses);
-    };
-});

package/transitions/utils.d.ts

@@ -1,20 +0,0 @@
-import type { ReadableSignal } from '@amadeus-it-group/tansu';
-export declare const promiseFromStore: <T>(store: ReadableSignal<T>, condition?: (value: T) => boolean) => {
-    promise: Promise<T>;
-    unsubscribe(): void;
-};
-export declare const promiseFromEvent: (element: EventTarget, event: string) => {
-    promise: Promise<Event>;
-    unsubscribe(): void;
-};
-export declare const promiseFromTimeout: (delay: number) => {
-    promise: Promise<void>;
-    unsubscribe(): void;
-};
-/**
- * Launch a reflow using a call to the provided html element getBoudingClientRect
- * @param element the html element
- */
-export declare function reflow(element?: HTMLElement): void;
-export declare const addClasses: (element: HTMLElement, classes?: string[]) => void;
-export declare const removeClasses: (element: HTMLElement, classes?: string[]) => void;