domma-js 0.56.0 → 0.57.0

package/assets/types/generated/src/components/back-to-top.d.ts

@@ -0,0 +1,150 @@
+/**
+ * @typedef {object} BackToTopOptions
+ * @property {number|null} [showAfter] - Px scrolled before it shows (null: one viewport / container height)
+ * @property {number} [duration=300] - Scroll animation duration in ms (0 under reduced motion)
+ * @property {import('../elements.js').BackToTopPosition} [position='bottom-right'] - Button position
+ * @property {number|{bottom?: number, right?: number, left?: number}|null} [offset] - Px from the edges (null: the stylesheet's)
+ * @property {string|HTMLElement|null} [target] - Scroll container to watch (null: the window)
+ * @property {number|null} [zIndex] - z-index for the button
+ * @property {string} [label='Scroll back to top'] - aria-label when the button has none
+ * @property {((backToTop: BackToTopInstance) => void)|null} [onShow] - When the button shows
+ * @property {((backToTop: BackToTopInstance) => void)|null} [onHide] - When the button hides
+ * @property {((backToTop: BackToTopInstance) => void)|null} [onScroll] - When a scroll to the top starts
+ */
+/** @typedef {BackToTop} BackToTopInstance */
+export class BackToTop extends Component {
+    static defaults: {
+        showAfter: any;
+        duration: number;
+        position: string;
+        offset: any;
+        target: any;
+        zIndex: any;
+        label: string;
+        onShow: any;
+        onHide: any;
+        onScroll: any;
+    };
+    /**
+     * @param {import('./shared.js').ComponentTarget} selector - A button / link / `.dm-back-to-top` to use; anything else adds a button to the body
+     * @param {BackToTopOptions} [options]
+     */
+    constructor(selector: import("./shared.js").ComponentTarget, options?: BackToTopOptions);
+    _made: boolean;
+    _visible: boolean;
+    _scrolling: boolean;
+    /** The button element. @type {HTMLElement} */
+    button: HTMLElement;
+    _place(): void;
+    _container(): any;
+    _watch(): void;
+    _box: any;
+    _scrollTarget: any;
+    _onScroll: () => void;
+    _check(): void;
+    /**
+     * Scroll to the top; `duration` overrides the option for this call.
+     * @param {number} [duration] - ms
+     * @returns {this}
+     */
+    scroll(duration?: number): this;
+    /**
+     * Show the button.
+     * @returns {this}
+     */
+    show(): this;
+    /**
+     * Hide the button.
+     * @returns {this}
+     */
+    hide(): this;
+    /**
+     * Alias of show(), by name.
+     * @returns {this}
+     */
+    open(...args: any[]): this;
+    /**
+     * Alias of hide(), by name.
+     * @returns {this}
+     */
+    close(...args: any[]): this;
+    /**
+     * Toggle button visibility.
+     * @returns {this}
+     */
+    toggle(): this;
+    /** @returns {boolean} */
+    isVisible(): boolean;
+    /** @returns {boolean} */
+    isOpen(): boolean;
+    /**
+     * The button element.
+     * @returns {HTMLElement}
+     */
+    getButton(): HTMLElement;
+    /**
+     * @param {number|string|null} value - Px; null or '' for one viewport / container height
+     * @returns {this}
+     */
+    setShowAfter(value: number | string | null): this;
+    /**
+     * @param {import('../elements.js').BackToTopPosition} position
+     * @returns {this}
+     */
+    setPosition(position: import("../elements.js").BackToTopPosition): this;
+    /**
+     * @param {BackToTopOptions['offset']} offset
+     * @returns {this}
+     */
+    setOffset(offset: BackToTopOptions["offset"]): this;
+    _applyOptions(): void;
+}
+export default BackToTop;
+export type BackToTopOptions = {
+    /**
+     * - Px scrolled before it shows (null: one viewport / container height)
+     */
+    showAfter?: number | null;
+    /**
+     * - Scroll animation duration in ms (0 under reduced motion)
+     */
+    duration?: number;
+    /**
+     * - Button position
+     */
+    position?: import("../elements.js").BackToTopPosition;
+    /**
+     * - Px from the edges (null: the stylesheet's)
+     */
+    offset?: number | {
+        bottom?: number;
+        right?: number;
+        left?: number;
+    } | null;
+    /**
+     * - Scroll container to watch (null: the window)
+     */
+    target?: string | HTMLElement | null;
+    /**
+     * - z-index for the button
+     */
+    zIndex?: number | null;
+    /**
+     * - aria-label when the button has none
+     */
+    label?: string;
+    /**
+     * - When the button shows
+     */
+    onShow?: ((backToTop: BackToTopInstance) => void) | null;
+    /**
+     * - When the button hides
+     */
+    onHide?: ((backToTop: BackToTopInstance) => void) | null;
+    /**
+     * - When a scroll to the top starts
+     */
+    onScroll?: ((backToTop: BackToTopInstance) => void) | null;
+};
+export type BackToTopInstance = BackToTop;
+import Component from '../component.js';

package/assets/types/generated/src/components/badge.d.ts

@@ -0,0 +1,208 @@
+/**
+ * @typedef {object} BadgeOptions
+ * @property {import('../elements.js').BadgeVariant} [variant='primary'] - Badge variant/colour
+ * @property {import('../elements.js').BadgeSize|'sm'|'lg'} [size='medium'] - Badge size
+ * @property {boolean} [pill=false] - Use pill/rounded style
+ * @property {boolean} [outline=false] - Use outline style
+ * @property {boolean} [removable=false] - Show remove button
+ * @property {boolean} [pulse=false] - Pulse animation
+ * @property {((event: MouseEvent, badge: BadgeInstance) => void)|null} [onClick] - Callback on click (not the remove button)
+ * @property {((badge: BadgeInstance, event: MouseEvent) => boolean|void)|null} [onRemove] - Callback on remove; return false to keep the badge
+ */
+/** @typedef {Badge} BadgeInstance */
+export class Badge extends Component {
+    static defaults: {
+        variant: string;
+        size: string;
+        pill: boolean;
+        outline: boolean;
+        removable: boolean;
+        pulse: boolean;
+        onClick: any;
+        onRemove: any;
+    };
+    /**
+     * @param {import('./shared.js').ComponentTarget} selector
+     * @param {BadgeOptions} [options]
+     */
+    constructor(selector: import("./shared.js").ComponentTarget, options?: BadgeOptions);
+    _had: Set<string>;
+    _apply(): void;
+    _removeBtn: HTMLButtonElement;
+    _applyOptions(): void;
+    /**
+     * Set the badge variant.
+     * @param {import('../elements.js').BadgeVariant} variant
+     * @returns {this}
+     */
+    setVariant(variant: import("../elements.js").BadgeVariant): this;
+    /**
+     * Set the badge size.
+     * @param {import('../elements.js').BadgeSize|'sm'|'lg'} size
+     * @returns {this}
+     */
+    setSize(size: import("../elements.js").BadgeSize | "sm" | "lg"): this;
+    /**
+     * Replace the text, keeping the remove button.
+     * @param {string|number|null} text
+     * @returns {this}
+     */
+    setText(text: string | number | null): this;
+    /**
+     * Permanent alias of destroy() (the element stays in the page).
+     * @returns {void}
+     */
+    remove(...args: any[]): void;
+}
+/** @typedef {'primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'} NumberBadgeVariant */
+/**
+ * @typedef {object} NumberBadgeOptions
+ * @property {number} [count=0] - Initial count to display (0 hides the counter unless `dot`)
+ * @property {number|null} [max] - Cap, e.g. 99 shows "99+"
+ * @property {NumberBadgeVariant} [variant='danger'] - Colour variant
+ * @property {boolean} [dot=false] - Show as dot indicator instead of number
+ * @property {boolean} [pulse=false] - Enable pulse animation
+ * @property {string|null} [borderColor] - Custom border ring colour
+ * @property {string|null} [label] - Accessible name (default: the count, or "New" for a dot)
+ * @property {((count: number, previous: number, badge: NumberBadgeInstance) => void)|null} [onChange] - The count changed
+ */
+/** @typedef {NumberBadge} NumberBadgeInstance */
+export class NumberBadge extends Component {
+    static defaults: {
+        count: number;
+        max: any;
+        variant: string;
+        dot: boolean;
+        pulse: boolean;
+        borderColor: any;
+        label: any;
+        onChange: any;
+    };
+    /**
+     * @param {import('./shared.js').ComponentTarget} selector - The element the counter sits on
+     * @param {NumberBadgeOptions} [options]
+     */
+    constructor(selector: import("./shared.js").ComponentTarget, options?: NumberBadgeOptions);
+    _holder: HTMLElement;
+    _hostClassAdded: boolean;
+    /** The `.badge-counter` span. @type {HTMLSpanElement} */
+    counter: HTMLSpanElement;
+    _paint(): void;
+    _applyOptions(): void;
+    /**
+     * Set the badge count.
+     * @param {number} count
+     * @returns {this}
+     */
+    setCount(count: number): this;
+    /**
+     * Increment the badge count.
+     * @param {number} [by=1]
+     * @returns {this}
+     */
+    increment(by?: number): this;
+    /**
+     * Decrement the badge count (min 0).
+     * @param {number} [by=1]
+     * @returns {this}
+     */
+    decrement(by?: number): this;
+    /** @returns {number} The current count */
+    getCount(): number;
+    /**
+     * Toggle dot mode.
+     * @param {boolean} dot
+     * @returns {this}
+     */
+    setDot(dot: boolean): this;
+    /**
+     * Set the colour variant.
+     * @param {NumberBadgeVariant} variant
+     * @returns {this}
+     */
+    setVariant(variant: NumberBadgeVariant): this;
+    /**
+     * Toggle pulse animation.
+     * @param {boolean} pulse
+     * @returns {this}
+     */
+    setPulse(pulse: boolean): this;
+    /**
+     * Permanent alias of destroy() (the element stays in the page).
+     * @returns {void}
+     */
+    remove(...args: any[]): void;
+}
+export default Badge;
+export type BadgeOptions = {
+    /**
+     * - Badge variant/colour
+     */
+    variant?: import("../elements.js").BadgeVariant;
+    /**
+     * - Badge size
+     */
+    size?: import("../elements.js").BadgeSize | "sm" | "lg";
+    /**
+     * - Use pill/rounded style
+     */
+    pill?: boolean;
+    /**
+     * - Use outline style
+     */
+    outline?: boolean;
+    /**
+     * - Show remove button
+     */
+    removable?: boolean;
+    /**
+     * - Pulse animation
+     */
+    pulse?: boolean;
+    /**
+     * - Callback on click (not the remove button)
+     */
+    onClick?: ((event: MouseEvent, badge: BadgeInstance) => void) | null;
+    /**
+     * - Callback on remove; return false to keep the badge
+     */
+    onRemove?: ((badge: BadgeInstance, event: MouseEvent) => boolean | void) | null;
+};
+export type BadgeInstance = Badge;
+export type NumberBadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+export type NumberBadgeOptions = {
+    /**
+     * - Initial count to display (0 hides the counter unless `dot`)
+     */
+    count?: number;
+    /**
+     * - Cap, e.g. 99 shows "99+"
+     */
+    max?: number | null;
+    /**
+     * - Colour variant
+     */
+    variant?: NumberBadgeVariant;
+    /**
+     * - Show as dot indicator instead of number
+     */
+    dot?: boolean;
+    /**
+     * - Enable pulse animation
+     */
+    pulse?: boolean;
+    /**
+     * - Custom border ring colour
+     */
+    borderColor?: string | null;
+    /**
+     * - Accessible name (default: the count, or "New" for a dot)
+     */
+    label?: string | null;
+    /**
+     * - The count changed
+     */
+    onChange?: ((count: number, previous: number, badge: NumberBadgeInstance) => void) | null;
+};
+export type NumberBadgeInstance = NumberBadge;
+import Component from '../component.js';

package/assets/types/generated/src/components/card.d.ts

@@ -0,0 +1,189 @@
+/**
+ * @typedef {object} CardOptions
+ * @property {boolean} [hoverable=true] - Enable hover effects (`hover` is accepted as an alias)
+ * @property {boolean} [hover] - Alias of `hoverable`
+ * @property {import('../elements.js').ShadowSize|'sm'|'lg'} [shadow='medium'] - Shadow size
+ * @property {boolean} [rounded=true] - Apply border radius (false gives square corners)
+ * @property {boolean} [animation=true] - Enable animations
+ * @property {number} [animationDuration=200] - Animation duration in ms
+ * @property {boolean} [collapsible=false] - Clicking the header collapses/expands the body
+ * @property {boolean} [collapsed=false] - Start collapsed (a saved state wins)
+ * @property {string|null} [persistKey] - Storage key for the collapsed state (default `domma-card-<id>` when the card has an id)
+ * @property {string} [title] - Adds a `.card-header` with this title when the card has none
+ * @property {string} [icon] - Icon name shown before the title
+ * @property {string|Node} [content] - Body content: HTML (sanitised unless `safe: false`) or a Node
+ * @property {boolean} [safe=true] - Sanitise string content
+ * @property {boolean} [clickable=false] - Clickable style (also on when `onClick` is given)
+ * @property {string|null} [color] - Colour variant, e.g. 'primary' adds `.card-primary`
+ * @property {((card: CardInstance) => void)|null} [onCollapse] - After the body collapses
+ * @property {((card: CardInstance) => void)|null} [onExpand] - After the body expands
+ * @property {((card: CardInstance, event: MouseEvent) => void)|null} [onClick] - Click on the card (not a collapsing header click)
+ */
+/** @typedef {Card} CardInstance */
+export class Card extends Component {
+    static defaults: {
+        hoverable: boolean;
+        shadow: string;
+        rounded: boolean;
+        animation: boolean;
+        animationDuration: number;
+        collapsible: boolean;
+        collapsed: boolean;
+        persistKey: any;
+        title: string;
+        icon: string;
+        content: string;
+        safe: boolean;
+        clickable: boolean;
+        color: any;
+        onCollapse: any;
+        onExpand: any;
+        onClick: any;
+    };
+    /**
+     * @param {import('./shared.js').ComponentTarget} selector
+     * @param {CardOptions} [options]
+     */
+    constructor(selector: import("./shared.js").ComponentTarget, options?: CardOptions);
+    _added: any[];
+    _made: any[];
+    _addClass(...names: any[]): void;
+    _apply(): void;
+    _colorClass: string;
+    _headerTabindex: boolean;
+    _header(): Element;
+    _body(): Element;
+    _bind(): void;
+    _storageKey(): any;
+    _restoreState(): void;
+    _saveState(): void;
+    _setCollapsed(collapsed: any, save?: boolean, animate?: boolean): void;
+    _heightTimer: number;
+    /**
+     * Collapse the body.
+     * @returns {this}
+     */
+    collapse(): this;
+    /**
+     * Expand the body.
+     * @returns {this}
+     */
+    expand(): this;
+    /**
+     * Toggle collapsed/expanded.
+     * @returns {this}
+     */
+    toggle(): this;
+    /** @returns {boolean} */
+    isCollapsed(): boolean;
+    /**
+     * Set the shadow size.
+     * @param {import('../elements.js').ShadowSize|'sm'|'lg'} size
+     * @returns {this}
+     */
+    setShadow(size: import("../elements.js").ShadowSize | "sm" | "lg"): this;
+    /**
+     * Turn the hover style on or off.
+     * @param {boolean} hoverable
+     * @returns {this}
+     */
+    setHoverable(hoverable: boolean): this;
+    /**
+     * Replace the body's content. A string is HTML, sanitised like `$().html()` unless
+     * `{safe: false}`; a Node is appended.
+     * @param {string|Node|null} content
+     * @param {{safe?: boolean}} [opts]
+     * @returns {this}
+     */
+    setContent(content: string | Node | null, opts?: {
+        safe?: boolean;
+    }): this;
+    /**
+     * The `.card-body`, made if the card has none.
+     * @returns {HTMLElement}
+     */
+    getBody(): HTMLElement;
+    /**
+     * Re-measure an expanded collapsible body whose content changed.
+     * @returns {this}
+     */
+    updateHeight(): this;
+    _applyOptions(): void;
+}
+export default Card;
+export type CardOptions = {
+    /**
+     * - Enable hover effects (`hover` is accepted as an alias)
+     */
+    hoverable?: boolean;
+    /**
+     * - Alias of `hoverable`
+     */
+    hover?: boolean;
+    /**
+     * - Shadow size
+     */
+    shadow?: import("../elements.js").ShadowSize | "sm" | "lg";
+    /**
+     * - Apply border radius (false gives square corners)
+     */
+    rounded?: boolean;
+    /**
+     * - Enable animations
+     */
+    animation?: boolean;
+    /**
+     * - Animation duration in ms
+     */
+    animationDuration?: number;
+    /**
+     * - Clicking the header collapses/expands the body
+     */
+    collapsible?: boolean;
+    /**
+     * - Start collapsed (a saved state wins)
+     */
+    collapsed?: boolean;
+    /**
+     * - Storage key for the collapsed state (default `domma-card-<id>` when the card has an id)
+     */
+    persistKey?: string | null;
+    /**
+     * - Adds a `.card-header` with this title when the card has none
+     */
+    title?: string;
+    /**
+     * - Icon name shown before the title
+     */
+    icon?: string;
+    /**
+     * - Body content: HTML (sanitised unless `safe: false`) or a Node
+     */
+    content?: string | Node;
+    /**
+     * - Sanitise string content
+     */
+    safe?: boolean;
+    /**
+     * - Clickable style (also on when `onClick` is given)
+     */
+    clickable?: boolean;
+    /**
+     * - Colour variant, e.g. 'primary' adds `.card-primary`
+     */
+    color?: string | null;
+    /**
+     * - After the body collapses
+     */
+    onCollapse?: ((card: CardInstance) => void) | null;
+    /**
+     * - After the body expands
+     */
+    onExpand?: ((card: CardInstance) => void) | null;
+    /**
+     * - Click on the card (not a collapsing header click)
+     */
+    onClick?: ((card: CardInstance, event: MouseEvent) => void) | null;
+};
+export type CardInstance = Card;
+import Component from '../component.js';