@agnos-ui/core 0.0.1-alpha.0 → 0.0.1-alpha.10

package/components/alert/index.js

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './alert';

package/components/commonProps.d.ts

@@ -0,0 +1,6 @@
+export interface WidgetsCommonPropsAndState {
+    /**
+     * CSS classes to be applied on the widget main container
+     */
+    className: string;
+}

package/components/commonProps.js

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

package/components/modal/index.d.ts

@@ -0,0 +1 @@
+export * from './modal';

package/components/modal/index.js

@@ -0,0 +1 @@
+export * from './modal';

package/{dist/lib → components}/modal/modal.d.ts

@@ -1,6 +1,6 @@
-import type { PropsConfig } from '../services';
-import type { TransitionFn } from '../transitions';
-import type { Widget, Directive, SlotContent, WidgetSlotContext } from '../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+import type { TransitionFn } from '../../services/transitions/baseTransitions';
+import type { Directive, PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
 /**
  * Value present in the {@link ModalBeforeCloseEvent.result|result} property of the {@link ModalProps.onBeforeClose|onBeforeClose} event
  * and returned by the {@link ModalApi.open|open} method, when the modal is closed by a click inside the viewport but outside the modal.
@@ -14,11 +14,11 @@ export declare const modalCloseButtonClick: unique symbol;
 /**
  * Context of the modal slots.
  */
-export type ModalContext = WidgetSlotContext<ModalWidget>;
+export type ModalContext<Data> = WidgetSlotContext<ModalWidget<Data>>;
 /**
  * Properties of the modal widget that are also in the state of the modal.
  */
-export interface ModalCommonPropsAndState {
+export interface ModalCommonPropsAndState<Data> extends WidgetsCommonPropsAndState {
     /**
      * Value of the aria-label attribute to put on the close button.
      */
@@ -37,35 +37,35 @@ export interface ModalCommonPropsAndState {
      * Otherwise, they stay where the widget is located.
      */
     container: HTMLElement | null;
-    /**
-     * Classes to add on the modal DOM element.
-     */
-    modalClass: string;
     /**
      * Body of the modal.
      */
-    slotDefault: SlotContent<ModalContext>;
+    slotDefault: SlotContent<ModalContext<Data>>;
     /**
      * Footer of the modal.
      */
-    slotFooter: SlotContent<ModalContext>;
+    slotFooter: SlotContent<ModalContext<Data>>;
     /**
      * Header of the modal. The default header includes {@link ModalCommonPropsAndState.slotTitle|slotTitle}.
      */
-    slotHeader: SlotContent<ModalContext>;
+    slotHeader: SlotContent<ModalContext<Data>>;
     /**
      * Structure of the modal.
      * The default structure uses {@link ModalCommonPropsAndState.slotHeader|slotHeader}, {@link ModalCommonPropsAndState.slotDefault|slotDefault} and {@link ModalCommonPropsAndState.slotFooter|slotFooter}.
      */
-    slotStructure: SlotContent<ModalContext>;
+    slotStructure: SlotContent<ModalContext<Data>>;
     /**
      * Title of the modal.
      */
-    slotTitle: SlotContent<ModalContext>;
+    slotTitle: SlotContent<ModalContext<Data>>;
     /**
      * Whether the modal should be visible when the transition is completed.
      */
     visible: boolean;
+    /**
+     * Data to use in content slots
+     */
+    contentData: Data;
 }
 /**
  * Type of the parameter of {@link ModalProps.onBeforeClose|onBeforeClose}.
@@ -86,7 +86,7 @@ export interface ModalBeforeCloseEvent {
 /**
  * Properties of the modal widget.
  */
-export interface ModalProps extends ModalCommonPropsAndState {
+export interface ModalProps<Data> extends ModalCommonPropsAndState<Data> {
     /**
      * Whether the modal and its backdrop (if present) should be animated when shown or hidden.
      */
@@ -132,7 +132,7 @@ export interface ModalProps extends ModalCommonPropsAndState {
 /**
  * State of the modal widget.
  */
-export interface ModalState extends ModalCommonPropsAndState {
+export interface ModalState<Data> extends ModalCommonPropsAndState<Data> {
     /**
      * Whether the backdrop is fully hidden. This can be true either because {@link ModalProps.backdrop|backdrop} is false or
      * because {@link ModalCommonPropsAndState.visible|visible} is false and there is no current transition.
@@ -154,7 +154,7 @@ export interface ModalState extends ModalCommonPropsAndState {
 /**
  * API of the modal widget.
  */
-export interface ModalApi {
+export interface ModalApi<Data> {
     /**
      * Closes the modal with the given result.
      *
@@ -171,7 +171,7 @@ export interface ModalApi {
     /**
      * Method to change some modal properties.
      */
-    patch: ModalWidget['patch'];
+    patch: ModalWidget<Data>['patch'];
 }
 /**
  * Actions of the modal widget.
@@ -215,7 +215,7 @@ export interface ModalDirectives {
 /**
  * Modal widget.
  */
-export type ModalWidget = Widget<ModalProps, ModalState, ModalApi, ModalActions, ModalDirectives>;
+export type ModalWidget<Data> = Widget<ModalProps<Data>, ModalState<Data>, ModalApi<Data>, ModalActions, ModalDirectives>;
 /**
  * Returns a copy of the default modal config.
  * @returns a copy of the default modal config
@@ -280,39 +280,40 @@ export declare function getModalDefaultConfig(): {
      * Otherwise, they stay where the widget is located.
      */
     container: HTMLElement | null;
-    /**
-     * Classes to add on the modal DOM element.
-     */
-    modalClass: string;
     /**
      * Body of the modal.
      */
-    slotDefault: SlotContent<ModalContext>;
+    slotDefault: SlotContent<ModalContext<any>>;
     /**
      * Footer of the modal.
      */
-    slotFooter: SlotContent<ModalContext>;
+    slotFooter: SlotContent<ModalContext<any>>;
     /**
      * Header of the modal. The default header includes {@link ModalCommonPropsAndState.slotTitle|slotTitle}.
      */
-    slotHeader: SlotContent<ModalContext>;
+    slotHeader: SlotContent<ModalContext<any>>;
     /**
      * Structure of the modal.
      * The default structure uses {@link ModalCommonPropsAndState.slotHeader|slotHeader}, {@link ModalCommonPropsAndState.slotDefault|slotDefault} and {@link ModalCommonPropsAndState.slotFooter|slotFooter}.
      */
-    slotStructure: SlotContent<ModalContext>;
+    slotStructure: SlotContent<ModalContext<any>>;
     /**
      * Title of the modal.
      */
-    slotTitle: SlotContent<ModalContext>;
+    slotTitle: SlotContent<ModalContext<any>>;
     /**
      * Whether the modal should be visible when the transition is completed.
      */
     visible: boolean;
+    /**
+     * Data to use in content slots
+     */
+    contentData: any;
+    className: string;
 };
 /**
  * Creates a new modal widget instance.
  * @param config$ - config of the modal, either as a store or as an object containing values or stores.
  * @returns a new modal widget instance
  */
-export declare const createModal: (config$?: PropsConfig<ModalProps>) => ModalWidget;
+export declare function createModal<Data>(config$?: PropsConfig<ModalProps<Data>>): ModalWidget<Data>;

package/{dist/lib → components}/modal/modal.js

@@ -1,10 +1,14 @@
 import { computed, readable } from '@amadeus-it-group/tansu';
-import { sliblingsInert, bindDirective, bindDirectiveNoArg, directiveSubscribe, mergeDirectives, portal, registrationArray, stateStores, writablesForProps, } from '../services';
-import { createTransition } from '../transitions';
-import { fadeTransition } from '../transitions/bootstrap/fade';
-import { promiseFromStore } from '../transitions/utils';
-import { noop } from '../utils';
-import { removeScrollbars, revertScrollbars } from './scrollbars';
+import { typeBoolean, typeFunction, typeHTMLElementOrNull, typeString } from '../../utils/writables';
+import { stateStores, writablesForProps } from '../../utils/stores';
+import { createTransition } from '../../services/transitions/baseTransitions';
+import { fadeTransition } from '../../services/transitions/bootstrap/fade';
+import { promiseFromStore } from '../../utils/internal/promise';
+import { noop } from '../../utils/internal/func';
+import { removeScrollbars, revertScrollbars } from '../../utils/internal/scrollbars';
+import { bindDirective, bindDirectiveNoArg, directiveSubscribe, mergeDirectives, registrationArray } from '../../utils/directive';
+import { portal } from '../../services/portal';
+import { sliblingsInert } from '../../services/siblingsInert';
 /**
  * Value present in the {@link ModalBeforeCloseEvent.result|result} property of the {@link ModalProps.onBeforeClose|onBeforeClose} event
  * and returned by the {@link ModalApi.open|open} method, when the modal is closed by a click inside the viewport but outside the modal.
@@ -20,12 +24,12 @@ const defaultConfig = {
     ariaCloseButtonLabel: 'Close',
     backdrop: true,
     backdropClass: '',
-    backdropTransition: fadeTransition,
+    backdropTransition: fadeTransition, // TODO: is it ok to depend on bootstrap transition?
     closeButton: true,
     closeOnOutsideClick: true,
     container: typeof window !== 'undefined' ? document.body : null,
-    modalClass: '',
-    modalTransition: fadeTransition,
+    className: '',
+    modalTransition: fadeTransition, // TODO: is it ok to depend on bootstrap transition?
     onBeforeClose: noop,
     onVisibleChange: noop,
     onHidden: noop,
@@ -36,6 +40,24 @@ const defaultConfig = {
     slotStructure: undefined,
     slotTitle: undefined,
     visible: false,
+    contentData: undefined,
+};
+const configValidator = {
+    animation: typeBoolean,
+    ariaCloseButtonLabel: typeString,
+    backdrop: typeBoolean,
+    backdropClass: typeString,
+    backdropTransition: typeFunction,
+    closeButton: typeBoolean,
+    closeOnOutsideClick: typeBoolean,
+    container: typeHTMLElementOrNull,
+    className: typeString,
+    modalTransition: typeFunction,
+    onBeforeClose: typeFunction,
+    onVisibleChange: typeFunction,
+    onHidden: typeFunction,
+    onShown: typeFunction,
+    visible: typeBoolean,
 };
 /**
  * Returns a copy of the default modal config.
@@ -62,25 +84,29 @@ const modalsAction$ = computed(() => {
  * @param config$ - config of the modal, either as a store or as an object containing values or stores.
  * @returns a new modal widget instance
  */
-export const createModal = (config$) => {
-    const [{ animation$, backdrop$, backdropTransition$, closeOnOutsideClick$, container$, modalTransition$, onBeforeClose$, onVisibleChange$, onHidden$, onShown$, visible$: requestedVisible$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config$);
+export function createModal(config$) {
+    const [{ animation$, backdrop$, backdropTransition$, closeOnOutsideClick$, container$, modalTransition$, onBeforeClose$, onVisibleChange$, onHidden$, onShown$, visible$: requestedVisible$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config$, configValidator);
     const modalTransition = createTransition({
-        transition: modalTransition$,
-        visible: requestedVisible$,
-        animation: animation$,
-        animationOnInit: animation$,
-        onVisibleChange: onVisibleChange$,
-        // TODO: for onHidden and onShown, should we combine with information from the backdrop transition?
-        // (especially in case one of the two transitions takes more time than the other)
-        onHidden: onHidden$,
-        onShown: onShown$,
+        props: {
+            transition: modalTransition$,
+            visible: requestedVisible$,
+            animation: animation$,
+            animationOnInit: animation$,
+            onVisibleChange: onVisibleChange$,
+            // TODO: for onHidden and onShown, should we combine with information from the backdrop transition?
+            // (especially in case one of the two transitions takes more time than the other)
+            onHidden: onHidden$,
+            onShown: onShown$,
+        },
     });
     const visible$ = modalTransition.stores.visible$;
     const backdropTransition = createTransition({
-        transition: backdropTransition$,
-        visible: requestedVisible$,
-        animation: animation$,
-        animationOnInit: animation$,
+        props: {
+            transition: backdropTransition$,
+            visible: requestedVisible$,
+            animation: animation$,
+            animationOnInit: animation$,
+        },
     });
     const transitioning$ = computed(() => modalTransition.stores.transitioning$() || (backdrop$() && backdropTransition.stores.transitioning$()));
     const hidden$ = computed(() => !transitioning$() && !visible$());
@@ -104,10 +130,14 @@ export const createModal = (config$) => {
         patch({ visible: false });
     };
     const modalPortalDirective = bindDirective(portal, computed(() => ({ container: container$() })));
-    const backdropPortalDirective = bindDirective(portal, computed(() => ({
-        container: container$(),
-        insertBefore: container$() && modalTransition.stores.element$()?.parentElement === container$() ? modalTransition.stores.element$() : undefined,
-    })));
+    const backdropPortalDirective = bindDirective(portal, computed(() => {
+        const container = container$();
+        const element = container ? modalTransition.stores.element$() : undefined;
+        return {
+            container,
+            insertBefore: element?.parentElement === container ? element : undefined,
+        };
+    }));
     const registerModalAction$ = readable(undefined, () => modals$.register(res));
     const action$ = computed(() => {
         if (modalTransition.stores.elementPresent$() && !hidden$()) {
@@ -153,4 +183,4 @@ export const createModal = (config$) => {
         },
     };
     return res;
-};
+}

package/components/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './bootstrap';
+export * from './pagination';

package/components/pagination/index.js

@@ -0,0 +1,2 @@
+export * from './bootstrap';
+export * from './pagination';

package/{dist/lib → components/pagination}/pagination.d.ts

@@ -1,5 +1,5 @@
-import type { PropsConfig } from './services';
-import type { Widget, SlotContent, WidgetSlotContext } from './types';
+import type { PropsConfig, Widget, SlotContent, WidgetSlotContext } from '../../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
 /**
  * A type for the slot context of the pagination widget
  */
@@ -13,7 +13,7 @@ export interface PaginationNumberContext extends PaginationContext {
      */
     displayedPage: number;
 }
-export interface PaginationCommonPropsAndState {
+export interface PaginationCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
      * The current page.
      *
@@ -86,11 +86,6 @@ export interface PaginationCommonPropsAndState {
      * @defaultValue false
      */
     boundaryLinks: boolean;
-    /**
-     * An input to add a custom class to the UL
-     * @defaultValue ''
-     */
-    className: string;
     /**
      * The template to use for the ellipsis slot
      * for I18n, we suggest to use the global configuration
@@ -398,11 +393,6 @@ export declare function getPaginationDefaultConfig(): {
      * @defaultValue false
      */
     boundaryLinks: boolean;
-    /**
-     * An input to add a custom class to the UL
-     * @defaultValue ''
-     */
-    className: string;
     /**
      * The template to use for the ellipsis slot
      * for I18n, we suggest to use the global configuration
@@ -455,10 +445,11 @@ export declare function getPaginationDefaultConfig(): {
      * @param displayedPage - The current page number
      */
     slotNumberLabel: SlotContent<PaginationNumberContext>;
+    className: string;
 };
 /**
  * Create a PaginationWidget with given config props
- * @param config - an optional alert config
+ * @param config - an optional pagination config
  * @returns a PaginationWidget
  */
 export declare function createPagination(config?: PropsConfig<PaginationProps>): PaginationWidget;

package/{dist/lib → components/pagination}/pagination.js

@@ -1,8 +1,9 @@
 import { computed } from '@amadeus-it-group/tansu';
-import { bindableDerived, INVALID_VALUE, stateStores, writablesForProps } from './services';
-import { clamp, isNumber } from './services/checks';
-import { typeBoolean, typeFunction, typeNumber, typeString } from './services/writables';
-import { noop } from './utils';
+import { INVALID_VALUE } from '../../types';
+import { bindableDerived, 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 = {
     page: 1,
     collectionSize: 0,
@@ -64,7 +65,7 @@ const configValidator = {
 };
 /**
  * Create a PaginationWidget with given config props
- * @param config - an optional alert config
+ * @param config - an optional pagination config
  * @returns a PaginationWidget
  */
 export function createPagination(config) {

package/components/progressbar/index.d.ts

@@ -0,0 +1 @@
+export * from './progressbar';

package/components/progressbar/index.js

@@ -0,0 +1 @@
+export * from './progressbar';

package/components/progressbar/progressbar.d.ts

@@ -0,0 +1,86 @@
+import type { PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+export type ProgressbarContext = WidgetSlotContext<ProgressbarWidget>;
+export interface ProgressbarCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * The minimum value.
+     * @defaultValue 0
+     */
+    min: number;
+    /**
+     * The maximum value.
+     * @defaultValue 100
+     */
+    max: number;
+    /**
+     * The current value.
+     * @defaultValue 0
+     */
+    value: number;
+    /**
+     * The aria label.
+     */
+    ariaLabel: string;
+    /**
+     * Global template for the Progressbar content.
+     */
+    slotContent: SlotContent<ProgressbarContext>;
+    /**
+     * Label of the progress.
+     */
+    slotDefault: SlotContent<ProgressbarContext>;
+    /**
+     * Height of the progressbar, can be any valid css height value.
+     */
+    height: string;
+    /**
+     * If `true`, shows a striped progressbar.
+     */
+    striped: boolean;
+    /**
+     * If `true`, animates a striped progressbar.
+     * Takes effect only for browsers supporting CSS3 animations, and if `striped` is `true`.
+     */
+    animated: boolean;
+}
+export interface ProgressbarState extends ProgressbarCommonPropsAndState {
+    /**
+     * Percentage of completion.
+     */
+    percentage: number;
+    /**
+     * `true` if the value is above its minimum value.
+     */
+    started: boolean;
+    /**
+     * `true` if the value has reached its maximum value.
+     */
+    finished: boolean;
+    /**
+     * The aria value text.
+     */
+    ariaValueText: string | undefined;
+}
+export interface ProgressbarProps extends ProgressbarCommonPropsAndState {
+    /**
+     * Return the value for the 'aria-valuetext' attribute.
+     * @param value - current value
+     * @param minimum - minimum value
+     * @param maximum - maximum value
+     */
+    ariaValueTextFn: (value: number, minimum: number, maximum: number) => string | undefined;
+}
+export interface ProgressbarApi {
+}
+export type ProgressbarWidget = Widget<ProgressbarProps, ProgressbarState, ProgressbarApi, object, object>;
+/**
+ * Retrieve a shallow copy of the default Progressbar config
+ * @returns the default Progressbar config
+ */
+export declare function getProgressbarDefaultConfig(): ProgressbarProps;
+/**
+ * Create an ProgressbarWidget with given config props
+ * @param config - an optional progress bar config
+ * @returns an ProgressbarWidget
+ */
+export declare function createProgressbar(config?: PropsConfig<ProgressbarProps>): ProgressbarWidget;

package/components/progressbar/progressbar.js

@@ -0,0 +1,78 @@
+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: '',
+    slotContent: 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/index.d.ts

@@ -0,0 +1 @@
+export * from './rating';

package/components/rating/index.js

@@ -0,0 +1 @@
+export * from './rating';

package/{dist/lib → components/rating}/rating.d.ts

@@ -1,5 +1,5 @@
-import type { PropsConfig } from './services';
-import type { SlotContent, Widget } from './types';
+import type { PropsConfig, SlotContent, Widget } from '../../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
 export interface StarContext {
     /**
      * indicates how much the current star is filled, from 0 to 100
@@ -10,7 +10,7 @@ export interface StarContext {
      */
     index: number;
 }
-export interface RatingCommonPropsAndState {
+export interface RatingCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
      * The current rating. Could be a decimal value like `3.75`.
      */
@@ -38,10 +38,6 @@ export interface RatingCommonPropsAndState {
      * If the component is disabled, `tabindex` will still be set to `-1`.
      */
     tabindex: number;
-    /**
-     * Classname to be applied on the rating container
-     */
-    className: string;
     /**
      * The template to override the way each star is displayed.
      */
@@ -57,7 +53,7 @@ export interface RatingCommonPropsAndState {
 }
 export interface RatingProps extends RatingCommonPropsAndState {
     /**
-     * Return the value for the 'aria-value' attribute.
+     * Return the value for the 'aria-valuetext' attribute.
      * @param rating - Current rating value.
      * @param maxRating - maxRating value.
      */
@@ -134,7 +130,7 @@ export type RatingWidget = Widget<RatingProps, RatingState, object, RatingAction
  */
 export declare function getRatingDefaultConfig(): {
     /**
-     * Return the value for the 'aria-value' attribute.
+     * Return the value for the 'aria-valuetext' attribute.
      * @param rating - Current rating value.
      * @param maxRating - maxRating value.
      */
@@ -184,10 +180,6 @@ export declare function getRatingDefaultConfig(): {
      * If the component is disabled, `tabindex` will still be set to `-1`.
      */
     tabindex: number;
-    /**
-     * Classname to be applied on the rating container
-     */
-    className: string;
     /**
      * The template to override the way each star is displayed.
      */
@@ -200,6 +192,7 @@ export declare function getRatingDefaultConfig(): {
      * The aria labelled by
      */
     ariaLabelledBy: string;
+    className: string;
 };
 /**
  * Create a RatingWidget with given config props