@agnos-ui/core 0.0.1-alpha.4 → 0.0.1-alpha.5

package/{services → utils}/stores.js

@@ -1,5 +1,6 @@
-import { asReadable, batch, computed, derived, get, readable, writable } from '@amadeus-it-group/tansu';
-import { identity } from '../utils';
+import { asReadable, asWritable, batch, computed, derived, get, readable, writable } from '@amadeus-it-group/tansu';
+import { INVALID_VALUE } from '../types';
+import { identity } from './internal/func';
 /**
  *
  * Utility function designed to create a `patch` function related to the provided stores.
@@ -56,10 +57,6 @@ export function findChangedProperties(obj1, obj2) {
     }
     return hasUpdate ? changedValues : null;
 }
-const update = function (updater) {
-    this.set(updater(this()));
-};
-export const INVALID_VALUE = Symbol();
 /**
  * Returns a writable store whose value is either its own value (when it is not undefined) or a default value
  * that comes either from the `config$` store (when it is not undefined) or from `defValue`.
@@ -90,19 +87,16 @@ export function writableWithDefault(defValue, config$ = readable(undefined), opt
     };
     const validatedDefConfig$ = computed(() => callNormalizeValue(config$()), { equal });
     const validatedOwnValue$ = computed(() => callNormalizeValue(own$(), validatedDefConfig$), { equal });
-    return asReadable(validatedOwnValue$, {
-        set(value) {
-            if (value !== undefined) {
-                const normalizedValue = normalizeValue(value);
-                if (normalizedValue === INVALID_VALUE) {
-                    console.error('Not setting invalid value', value);
-                    return;
-                }
-                value = normalizedValue;
+    return asWritable(validatedOwnValue$, (value) => {
+        if (value !== undefined) {
+            const normalizedValue = normalizeValue(value);
+            if (normalizedValue === INVALID_VALUE) {
+                console.error('Not setting invalid value', value);
+                return;
             }
-            own$.set(value);
-        },
-        update,
+            value = normalizedValue;
+        }
+        own$.set(value);
     });
 }
 /**
@@ -236,7 +230,15 @@ export const stateStores = (inputStores) => {
         }),
     };
 };
-export const bindableDerived = (onChange$, stores, adjustValue, equal = (currentValue, newValue) => newValue === currentValue) => {
+/**
+ * Creates a computed store that binds to multiple stores and triggers a callback when the value changes.
+ * @param onChange$ - A readable signal callback function to execute when the value changes.
+ * @param stores - An array of Svelte stores, with the main store at index 0.
+ * @param adjustValue - A function to adjust the value of the main store. By default, the value of the main store is returned.
+ * @param equal - A function to determine if two values are equal. Used to compare the ajusted value with the current one.
+ * @returns The derived store that reflects the combined state of the input stores.
+ */
+export const bindableDerived = (onChange$, stores, adjustValue = (arg) => arg[0], equal = (currentValue, newValue) => newValue === currentValue) => {
     let currentValue = stores[0]();
     return derived(stores, {
         derive(values) {

package/utils/writables.d.ts

@@ -0,0 +1,26 @@
+import type { WritableWithDefaultOptions } from '../types';
+import { INVALID_VALUE } from '../types';
+export declare const testToNormalizeValue: <T>(filter: (value: any) => value is T) => (value: any) => typeof INVALID_VALUE | T;
+export declare const typeNumber: WritableWithDefaultOptions<number>;
+export interface TypeNumberInRangeOptions {
+    /** If `true`, the range checking will be strict, excluding the minimum and maximum values. Default is `false`. */
+    strict?: boolean;
+    /** If `true`, values outside the range will be clamped to the minimum or maximum. Default is `true`. */
+    useClamp?: boolean;
+}
+/**
+ * Factory function for creating a type constraint for numbers within a specified range.
+ *
+ * @param min - The minimum value.
+ * @param max - The maximum value.
+ * @param options - Additional options to customize the behavior.
+ *
+ * @returns A type guard function that returns the clamp value or INVALID_VALUE depending on the provided options.
+ */
+export declare function typeNumberInRangeFactory(min: number, max: number, options?: TypeNumberInRangeOptions): WritableWithDefaultOptions<number>;
+export declare const typeBoolean: WritableWithDefaultOptions<boolean>;
+export declare const typeBooleanOrNull: WritableWithDefaultOptions<boolean | null>;
+export declare const typeString: WritableWithDefaultOptions<string>;
+export declare const typeFunction: WritableWithDefaultOptions<(...args: any[]) => any>;
+export declare const typeHTMLElementOrNull: WritableWithDefaultOptions<HTMLElement | null>;
+export declare const typeArray: WritableWithDefaultOptions<any[]>;

package/utils/writables.js

@@ -0,0 +1,66 @@
+import { allowNull, clamp, isArray, isBoolean, isFunction, isHTMLElement, isNumber, isString } from './internal/checks';
+import { INVALID_VALUE } from '../types';
+export const testToNormalizeValue = (filter) => (value) => filter(value) ? value : INVALID_VALUE;
+const numberNormalizeFn = testToNormalizeValue(isNumber);
+export const typeNumber = {
+    normalizeValue: numberNormalizeFn,
+};
+/**
+ * Factory function for creating a type constraint for numbers within a specified range.
+ *
+ * @param min - The minimum value.
+ * @param max - The maximum value.
+ * @param options - Additional options to customize the behavior.
+ *
+ * @returns A type guard function that returns the clamp value or INVALID_VALUE depending on the provided options.
+ */
+export function typeNumberInRangeFactory(min, max, options = {}) {
+    const { strict = false, useClamp = true } = options;
+    return {
+        normalizeValue: (value) => {
+            let normalizedNumber = numberNormalizeFn(value);
+            if (normalizedNumber !== INVALID_VALUE) {
+                if (!strict && useClamp) {
+                    normalizedNumber = clamp(normalizedNumber, max, min);
+                }
+                if (normalizedNumber >= min && normalizedNumber <= max) {
+                    if (!strict || (normalizedNumber !== min && normalizedNumber !== max)) {
+                        return normalizedNumber;
+                    }
+                }
+            }
+            return INVALID_VALUE;
+        },
+    };
+}
+export const typeBoolean = {
+    normalizeValue: testToNormalizeValue(isBoolean),
+};
+export const typeBooleanOrNull = {
+    normalizeValue: testToNormalizeValue(allowNull(isBoolean)),
+};
+export const typeString = {
+    normalizeValue: testToNormalizeValue(isString),
+};
+export const typeFunction = {
+    normalizeValue: testToNormalizeValue(isFunction),
+    equal: Object.is,
+};
+export const typeHTMLElementOrNull = {
+    normalizeValue: testToNormalizeValue(allowNull(isHTMLElement)),
+    equal: Object.is,
+};
+export const typeArray = {
+    normalizeValue: testToNormalizeValue(isArray),
+    equal: (a, b) => {
+        if (a === b) {
+            return true;
+        }
+        else {
+            if (a?.length !== b?.length) {
+                return false;
+            }
+            return a.every((val, index) => val === b[index]);
+        }
+    },
+};

package/extendWidget.d.ts

@@ -1,3 +0,0 @@
-import type { ConfigValidator } from './services/stores';
-import type { Widget, WidgetFactory, WidgetProps, WidgetState } from './types';
-export declare const extendWidgetProps: <W extends Widget<object, object, object, object, object>, ExtraProps extends object>(factory: WidgetFactory<W>, extraPropsDefaults: ExtraProps, extraPropsConfig?: ConfigValidator<ExtraProps> | undefined) => WidgetFactory<Widget<WidgetProps<W> & ExtraProps, WidgetState<W> & ExtraProps, W["api"], W["actions"], W["directives"]>>;

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/index.d.ts

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

package/services/index.js

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

package/services/writables.d.ts

@@ -1,8 +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>;
-export declare const typeFunction: WritableWithDefaultOptions<(...args: any[]) => any>;
-export declare const typeArray: WritableWithDefaultOptions<any[]>;

package/services/writables.js

@@ -1,30 +0,0 @@
-import { isArray, 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,
-};
-export const typeArray = {
-    normalizeValue: testToNormalizeValue(isArray),
-    equal: (a, b) => {
-        if (a === b) {
-            return true;
-        }
-        else {
-            if (a?.length !== b?.length) {
-                return false;
-            }
-            return a.every((val, index) => val === b[index]);
-        }
-    },
-};