@agnos-ui/core 0.2.0 → 0.3.0

package/components/pagination/bootstrap.js

@@ -1,110 +0,0 @@
-// Utility functions
-function _applyPagination(page, maxSize) {
-    const pp = Math.ceil(page / maxSize) - 1;
-    const start = pp * maxSize;
-    // console.log('start', start, 'pp', pp, 'page', page, 'maxSize', maxSize);
-    const end = start + maxSize;
-    return [start, end];
-}
-/**
- * Appends ellipses and first/last page number to the displayed pages
- * @param start - the first page number
- * @param end - the last page number
- * @param ellipses - apply ellipses
- * @param pages - the pages to apply the function to
- * @param pageCount - the total number of pages
- */
-function _applyEllipses(start, end, ellipses, pages, pageCount) {
-    if (ellipses) {
-        if (start > 0) {
-            // The first page will always be included. If the displayed range
-            // starts after the third page, then add ellipsis. But if the range
-            // starts on the third page, then add the second page instead of
-            // an ellipsis, because the ellipsis would only hide a single page.
-            if (start > 2) {
-                pages.unshift(-1);
-            }
-            else if (start === 2) {
-                pages.unshift(2);
-            }
-            pages.unshift(1);
-        }
-        if (end < pageCount) {
-            // The last page will always be included. If the displayed range
-            // ends before the third-last page, then add ellipsis. But if the range
-            // ends on third-last page, then add the second-last page instead of
-            // an ellipsis, because the ellipsis would only hide a single page.
-            if (end < pageCount - 2) {
-                pages.push(-1);
-            }
-            else if (end === pageCount - 2) {
-                pages.push(pageCount - 1);
-            }
-            pages.push(pageCount);
-        }
-    }
-}
-/**
- * Rotates page numbers based on maxSize items visible.
- * Currently selected page stays in the middle:
- *
- * Ex. for selected page = 6:
- * [5,*6*,7] for maxSize = 3
- * [4,5,*6*,7] for maxSize = 4
- *
- * @param page - the page number
- * @param maxSize - the max size
- * @param pageCount - the page count
- * @returns the rotated page numbers
- */
-function _applyRotation(page, maxSize, pageCount) {
-    let start = 0;
-    let end = pageCount;
-    const leftOffset = Math.floor(maxSize / 2);
-    const rightOffset = maxSize % 2 === 0 ? leftOffset - 1 : leftOffset;
-    if (page <= leftOffset) {
-        // very beginning, no rotation -> [0..maxSize]
-        end = maxSize;
-    }
-    else if (pageCount - page < leftOffset) {
-        // very end, no rotation -> [len-maxSize..len]
-        start = pageCount - maxSize;
-    }
-    else {
-        // rotate
-        start = page - leftOffset - 1;
-        end = page + rightOffset;
-    }
-    return [start, end];
-}
-/**
- * This is the pagination algorithm used by ng-bootstrap. While this is not the default implementation of our widget, we export it to ease the migration from ng-bootstrap pagination.
- * @param maxSize - the max size
- * @param rotate - rotate the pages
- * @param ellipses - enable ellipses
- * @returns the pages
- */
-export function ngBootstrapPagination(maxSize, rotate, ellipses) {
-    return function (page, pageCount) {
-        let pages = [];
-        for (let i = 1; i <= pageCount; i++) {
-            pages.push(i);
-        }
-        // apply maxSize if necessary
-        if (maxSize > 0 && pageCount > maxSize) {
-            let start = 0;
-            let end = pageCount;
-            // either paginating or rotating page numbers
-            if (rotate) {
-                [start, end] = _applyRotation(page, maxSize, pageCount);
-            }
-            else {
-                [start, end] = _applyPagination(page, maxSize);
-            }
-            pages = pages.slice(start, end);
-            // adding ellipses
-            _applyEllipses(start, end, ellipses, pages, pageCount);
-        }
-        return pages;
-    };
-}

package/components/pagination/pagination.js

@@ -1,195 +0,0 @@
-import { computed } from '@amadeus-it-group/tansu';
-import { INVALID_VALUE } from '../../types';
-import { bindableProp, stateStores, writablesForProps } from '../../utils/stores';
-import { clamp, isNumber } from '../../utils/internal/checks';
-import { typeBoolean, typeFunction, typeNumber, typeString } from '../../utils/writables';
-import { noop } from '../../utils/internal/func';
-const PAGE_LINK_DEFAULT = '#';
-const defaultConfig = {
-    page: 1,
-    collectionSize: 0,
-    pageSize: 10,
-    disabled: false,
-    directionLinks: true,
-    boundaryLinks: false,
-    size: null,
-    onPageChange: noop,
-    pagesFactory: (page, pageCount) => {
-        // TODO extract this for testing
-        const pages = [];
-        for (let i = 1; i <= pageCount; i++) {
-            pages.push(i);
-        }
-        return pages;
-    },
-    ariaLabel: 'Page navigation',
-    activeLabel: '(current)',
-    ariaPageLabel: (processPage, pageCount) => `Page ${processPage} of ${pageCount}`,
-    ariaFirstLabel: 'Action link for first page',
-    ariaPreviousLabel: 'Action link for previous page',
-    ariaNextLabel: 'Action link for next page',
-    ariaLastLabel: 'Action link for last page',
-    className: '',
-    slotEllipsis: '…',
-    slotFirst: '«',
-    slotPrevious: '‹',
-    slotNext: '›',
-    slotLast: '»',
-    slotPages: undefined,
-    slotStructure: undefined,
-    slotNumberLabel: ({ displayedPage }) => `${displayedPage}`,
-    pageLink: (_page) => PAGE_LINK_DEFAULT,
-};
-/**
- * Returns a shallow copy of the default pagination config
- * @returns a copy of the default config
- */
-export function getPaginationDefaultConfig() {
-    return { ...defaultConfig };
-}
-const configValidator = {
-    page: typeNumber,
-    collectionSize: typeNumber,
-    pageSize: typeNumber,
-    disabled: typeBoolean,
-    directionLinks: typeBoolean,
-    boundaryLinks: typeBoolean,
-    size: { normalizeValue: (value) => (value === 'lg' || value === 'sm' || value === null ? value : INVALID_VALUE) },
-    onPageChange: typeFunction,
-    pagesFactory: typeFunction,
-    ariaLabel: typeString,
-    activeLabel: typeString,
-    ariaPageLabel: typeFunction,
-    ariaFirstLabel: typeString,
-    ariaPreviousLabel: typeString,
-    ariaNextLabel: typeString,
-    ariaLastLabel: typeString,
-    className: typeString,
-    pageLink: typeFunction,
-};
-/**
- * Create a PaginationWidget with given config props
- * @param config - an optional pagination config
- * @returns a PaginationWidget
- */
-export function createPagination(config) {
-    const [{ 
-    // dirty inputs that need adjustment:
-    page$: _dirtyPage$, 
-    // clean inputs with value validation:
-    collectionSize$, pageSize$, onPageChange$, pagesFactory$, ariaPageLabel$, pageLink$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config, configValidator);
-    // computed
-    // nb total of Pages.
-    const pageCount$ = computed(() => {
-        let pageCount = Math.ceil(collectionSize$() / pageSize$());
-        // Here we choose to always display a page when collection size is 0
-        if (!isNumber(pageCount) || pageCount < 1) {
-            pageCount = 1;
-        }
-        return pageCount;
-    });
-    // current page
-    const page$ = bindableProp(_dirtyPage$, onPageChange$, (dirtyPage) => clamp(dirtyPage, pageCount$(), 1));
-    const pages$ = computed(() => pagesFactory$()(page$(), pageCount$()));
-    const nextDisabled$ = computed(() => page$() === pageCount$() || stateProps.disabled$());
-    const previousDisabled$ = computed(() => page$() === 1 || stateProps.disabled$());
-    const pagesLabel$ = computed(() => {
-        const ariaPageLabel = ariaPageLabel$();
-        const pageCount = pageCount$();
-        return pages$().map((page) => ariaPageLabel(page, pageCount));
-    });
-    const pagesHrefs$ = computed(() => {
-        const pageLinkFactory = pageLink$();
-        const pageCount = pageCount$();
-        return Array.from({ length: pageCount }, (_, index) => pageLinkFactory(index + 1));
-    });
-    const directionsHrefs$ = computed(() => {
-        const pagesHrefs = pagesHrefs$();
-        const pageIndex = page$() - 1;
-        return {
-            previous: pagesHrefs.at(pageIndex > 0 ? pageIndex - 1 : 0),
-            next: pagesHrefs.at(pageIndex + 1) ?? pagesHrefs.at(-1),
-        };
-    });
-    /**
-     * Stop event propagation when href is the default value;
-     * Update page number when navigation is in the same tab and stop the event propagation;
-     * For navigations outside current browser tab let the default behavior, without updating the page number;
-     * @param pageNumber current page number
-     * @param event UI event triggered when page changed
-     * @param pageNavigationHandler change handler callback for navigation elements
-     */
-    function handleNavigation(pageNumber, event, pageNavigationHandler) {
-        if (pagesHrefs$()[pageNumber - 1] === PAGE_LINK_DEFAULT) {
-            event?.preventDefault();
-        }
-        if (!event || !(event.ctrlKey || event.metaKey)) {
-            event?.preventDefault();
-            if (pageNavigationHandler) {
-                page$.update(pageNavigationHandler);
-            }
-            else {
-                page$.set(pageNumber);
-            }
-        }
-    }
-    return {
-        ...stateStores({
-            pageCount$,
-            page$,
-            pages$,
-            nextDisabled$,
-            previousDisabled$,
-            pagesLabel$,
-            pagesHrefs$,
-            directionsHrefs$,
-            ...stateProps,
-        }),
-        patch,
-        actions: {
-            /**
-             * Set the current page pageNumber (starting from 1)
-             * @param pageNumber - Current page number to set.
-             * Value is normalized between 1 and the number of page
-             * @param event UI event that triggered the select
-             */
-            select(pageNumber, event) {
-                handleNavigation(pageNumber, event);
-            },
-            /**
-             * Select the first page
-             * @param event Event triggering the action
-             */
-            first(event) {
-                handleNavigation(1, event);
-            },
-            /**
-             * Select the previous page
-             * @param event Event triggering the action
-             */
-            previous(event) {
-                handleNavigation(page$() - 1, event, (page) => page - 1);
-            },
-            /**
-             * Select the next page
-             * @param event Event triggering the action
-             */
-            next(event) {
-                handleNavigation(page$() + 1, event, (page) => page + 1);
-            },
-            /**
-             * Select the last page
-             * @param event Event triggering the action
-             */
-            last(event) {
-                handleNavigation(pageCount$(), event);
-            },
-        },
-        api: {
-            isEllipsis(pageNumber) {
-                return pageNumber === -1;
-            },
-        },
-        directives: {},
-    };
-}

package/components/progressbar/progressbar.js

@@ -1,78 +0,0 @@
-import { clamp } from '../../utils/internal/checks';
-import { typeBoolean, typeFunction, typeNumber, typeString } from '../../utils/writables';
-import { stateStores, writablesForProps } from '../../utils/stores';
-import { computed } from '@amadeus-it-group/tansu';
-const defaultConfig = {
-    min: 0,
-    max: 100,
-    value: 0,
-    ariaLabel: 'Progressbar',
-    className: '',
-    slotStructure: undefined,
-    slotDefault: undefined,
-    height: '',
-    striped: false,
-    animated: false,
-    ariaValueTextFn: () => undefined,
-};
-/**
- * Retrieve a shallow copy of the default Progressbar config
- * @returns the default Progressbar config
- */
-export function getProgressbarDefaultConfig() {
-    return { ...defaultConfig };
-}
-const configValidator = {
-    min: typeNumber,
-    max: typeNumber,
-    value: typeNumber,
-    ariaLabel: typeString,
-    className: typeString,
-    height: typeString,
-    striped: typeBoolean,
-    animated: typeBoolean,
-    ariaValueTextFn: typeFunction,
-};
-/**
- * Create an ProgressbarWidget with given config props
- * @param config - an optional progress bar config
- * @returns an ProgressbarWidget
- */
-export function createProgressbar(config) {
-    const [{ 
-    // dirty inputs that need adjustment:
-    max$: _dirtyMaximum$, value$: _dirtyValue$, 
-    // clean inputs
-    min$, ariaValueTextFn$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config, configValidator);
-    const max$ = computed(() => Math.max(min$(), _dirtyMaximum$()));
-    const value$ = computed(() => clamp(_dirtyValue$(), max$(), min$()));
-    const percentage$ = computed(() => {
-        const max = max$();
-        const min = min$();
-        if (max > min) {
-            return clamp(((value$() - min) * 100) / (max - min), 100, 0);
-        }
-        else {
-            return 0;
-        }
-    });
-    const started$ = computed(() => value$() > min$());
-    const finished$ = computed(() => value$() === max$());
-    const ariaValueText$ = computed(() => ariaValueTextFn$()(value$(), min$(), max$()));
-    return {
-        ...stateStores({
-            min$,
-            max$,
-            value$,
-            percentage$,
-            started$,
-            finished$,
-            ariaValueText$,
-            ...stateProps,
-        }),
-        patch,
-        api: {},
-        directives: {},
-        actions: {},
-    };
-}

package/components/rating/rating.js

@@ -1,137 +0,0 @@
-import { computed, writable } from '@amadeus-it-group/tansu';
-import { INVALID_VALUE } from '../../types';
-import { bindableProp, stateStores, writablesForProps } from '../../utils/stores';
-import { clamp, isNumber } from '../../utils/internal/checks';
-import { typeBoolean, typeFunction, typeNumber, typeString } from '../../utils/writables';
-import { noop } from '../../utils/internal/func';
-const defaultConfig = {
-    rating: 0,
-    tabindex: 0,
-    maxRating: 10,
-    disabled: false,
-    readonly: false,
-    resettable: true,
-    ariaValueTextFn: (rating, maxRating) => `${rating} out of ${maxRating}`,
-    onHover: noop,
-    onLeave: noop,
-    onRatingChange: noop,
-    className: '',
-    slotStar: ({ fill }) => String.fromCharCode(fill === 100 ? 9733 : 9734),
-    ariaLabel: 'Rating',
-    ariaLabelledBy: '',
-};
-/**
- * Returns a shallow copy of the default rating config.
- * @returns a copy of the default config
- */
-export function getRatingDefaultConfig() {
-    return { ...defaultConfig };
-}
-// TODO export normalize function in utils and test them.
-const configValidator = {
-    rating: typeNumber,
-    tabindex: typeNumber,
-    maxRating: { normalizeValue: (value) => (isNumber(value) ? Math.max(0, value) : INVALID_VALUE) },
-    disabled: typeBoolean,
-    readonly: typeBoolean,
-    resettable: typeBoolean,
-    ariaValueTextFn: typeFunction,
-    onHover: typeFunction,
-    onLeave: typeFunction,
-    onRatingChange: typeFunction,
-    className: typeString,
-    ariaLabel: typeString,
-    ariaLabelledBy: typeString,
-};
-/**
- * Create a RatingWidget with given config props
- * @param config - an optional alert config
- * @returns a RatingWidget
- */
-export function createRating(config) {
-    const [{ 
-    // dirty inputs that need adjustment:
-    rating$: _dirtyRating$, tabindex$: _dirtyTabindex$, 
-    // clean inputs with value validation:
-    ariaValueTextFn$, onHover$, onLeave$, onRatingChange$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config, configValidator);
-    const { maxRating$, disabled$, readonly$, resettable$ } = stateProps;
-    // clean inputs adjustment to valid range
-    const tabindex$ = computed(() => (disabled$() ? -1 : _dirtyTabindex$()));
-    const rating$ = bindableProp(_dirtyRating$, onRatingChange$, (dirtyRating) => clamp(dirtyRating, maxRating$()));
-    // internal inputs
-    const _hoveredRating$ = writable(0);
-    // computed
-    const isInteractive$ = computed(() => !disabled$() && !readonly$());
-    const visibleRating$ = computed(() => {
-        const hoveredRating = _hoveredRating$();
-        return hoveredRating !== 0 ? hoveredRating : rating$();
-    });
-    const ariaValueText$ = computed(() => ariaValueTextFn$()(visibleRating$(), maxRating$()));
-    const stars$ = computed(() => {
-        const visibleRating = visibleRating$();
-        return Array.from({ length: maxRating$() }, (_v, i) => ({
-            fill: Math.round(Math.max(Math.min(visibleRating - i, 1), 0) * 100),
-            index: i,
-        }));
-    });
-    return {
-        ...stateStores({
-            ariaValueText$,
-            isInteractive$,
-            rating$,
-            stars$,
-            tabindex$,
-            visibleRating$,
-            ...stateProps,
-        }),
-        patch,
-        actions: {
-            click: (index) => {
-                if (isInteractive$() && index > 0 && index <= maxRating$()) {
-                    rating$.update((rating) => (rating === index && resettable$() ? 0 : index));
-                }
-            },
-            hover: (index) => {
-                if (isInteractive$() && index > 0 && index <= maxRating$()) {
-                    _hoveredRating$.set(index);
-                    onHover$()(index);
-                }
-            },
-            leave: () => {
-                if (isInteractive$()) {
-                    onLeave$()(_hoveredRating$());
-                    _hoveredRating$.set(0);
-                }
-            },
-            handleKey(event) {
-                if (isInteractive$()) {
-                    const { key } = event;
-                    switch (key) {
-                        case 'ArrowLeft':
-                        case 'ArrowDown':
-                            rating$.update((rating) => rating - 1);
-                            break;
-                        case 'ArrowRight':
-                        case 'ArrowUp':
-                            rating$.update((rating) => rating + 1);
-                            break;
-                        case 'Home':
-                        case 'PageDown':
-                            rating$.set(0);
-                            break;
-                        case 'End':
-                        case 'PageUp':
-                            rating$.set(maxRating$());
-                            break;
-                        default:
-                            return;
-                    }
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-            },
-        },
-        directives: {},
-        api: {},
-    };
-}