native-document 1.0.15 → 1.0.16-8.2

package/src/components/alert/types/Alert.d.ts

@@ -0,0 +1,62 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type AlertDescription = {
+        title: ValidChild | null;
+        content: ValidChild;
+        outline: boolean | null;
+        appearance: 'filled' | 'bordered' | null;
+        variant: 'info' | 'success' | 'warning' | 'error' | 'danger' | string;
+        closable: boolean;
+        autoDismiss: number | null;
+        icon: ValidChild | null;
+        showIcon: boolean;
+        actions: Array<{ label: ValidChild; handler: (() => void) | null; variant: string | null }>;
+        props: GlobalAttributes;
+    };
+
+export interface AlertInterface extends BaseComponent {
+    variant(variant: 'info' | 'success' | 'warning' | 'error' | 'danger' | string): this;
+    info(): this;
+    success(): this;
+    warning(): this;
+    error(): this;
+    danger(): this;
+    appearance(appearance: 'filled' | 'bordered'): this;
+    filled(): this;
+    bordered(): this;
+    outline(outline?: boolean): this;
+    title(title: ValidChild): this;
+    content(content: ValidChild): this;
+    renderTitle(callback: (desc: AlertDescription, instance: AlertInterface) => ValidChild): this;
+    renderContent(callback: (desc: AlertDescription, instance: AlertInterface) => ValidChild): this;
+    renderFooter(callback: (desc: AlertDescription, instance: AlertInterface) => ValidChild): this;
+    clearActions(): this;
+    action(label: ValidChild, handler?: () => void, variant?: string | null): this;
+    layout(layoutFn: (desc: AlertDescription, instance: AlertInterface) => ValidChild): this;
+    icon(icon: ValidChild): this;
+    showIcon(show?: boolean): this;
+    closable(closable?: boolean): this;
+    dismissible(dismissible?: boolean): this;
+    autoDismiss(delay: number): this;
+    close(): this;
+    show(): this;
+    hide(): this;
+    onClose(handler: () => void): this;
+    onShow(handler: () => void): this;
+    render(template: (description: AlertDescription, instance: AlertInterface) => ValidChild): this;
+}
+
+
+export declare function Alert(content: ValidChild, props?: Record<string, unknown>): AlertInterface;
+export declare namespace Alert {
+
+
+    function use(template: (description: AlertDescription, instance: AlertInterface) => ValidChild): void;
+    function preset(name: string, callback: (instance: AlertInterface) => AlertInterface): void;
+    function presets(presets: Record<string, (instance: AlertInterface) => AlertInterface>): void;
+
+
+}

package/src/components/avatar/Avatar.js

@@ -0,0 +1,430 @@
+import BaseComponent from '../BaseComponent';
+import DebugManager from '../../core/utils/debug-manager';
+
+/**
+ * Displays a user avatar with image, initials, or icon fallback. Supports status indicators, badges, shape, and size variants.
+ *
+ *
+ * @example
+ * const avatar = new Avatar('https://example.com/photo.jpg')
+ *     .alt('Jane Doe')
+ *     .name('Jane Doe')
+ *     .size('large')
+ *     .shape('circle')
+ *     .status('online')
+ *     .statusAtTopTrailing();
+ *
+ * Avatar.use((description, instance) => {
+ *     return Img({ src: description.src, alt: description.alt });
+ * });
+ *
+ * @constructor
+ * @param {string|Observable<string>} [source]
+ * @param {GlobalAttributes} [props={}]
+ */
+export default function Avatar(source, props = {}) {
+    if (!(this instanceof Avatar)) {
+        return new Avatar(source, props);
+    }
+
+    this.$description = {
+        src: source ? BaseComponent.obs(source) : null,
+        alt: null,
+        name: null,
+        initials: null,
+        icon: null,
+        size: 'medium',
+        shape: 'circle',
+        variant: null,
+        color: null,
+        textColor: null,
+        status: null,
+        render: null,
+        props,
+    };
+}
+
+BaseComponent.extends(Avatar);
+
+Avatar.defaultTemplate = null;
+
+
+/**
+ * Registers the render template for Avatar.
+ * @param {(description: {
+ *     src: Observable<string>|null,
+ *     alt: string|null,
+ *     name: string|null,
+ *     initials: string|null,
+ *     icon: NdChild|null,
+ *     size: 'extra-small'|'small'|'medium'|'large'|'extra-large'|string|number,
+ *     shape: 'circle'|'square'|'rounded',
+ *     variant: string|null,
+ *     color: string|null,
+ *     textColor: string|null,
+ *     status: Observable<string>|string|null,
+ *     render: ((desc: *, instance: Avatar) => NdChild)|null,
+ *     props: GlobalAttributes,
+ * }, instance: Avatar) => NdChild} template
+ */
+Avatar.use = function(template) {
+    Avatar.defaultTemplate = template;
+};
+
+/**
+ * @param {string} name
+ * @param {(a: Avatar) => Avatar} callback
+ */
+Avatar.preset = function(name, callback) {
+    if (Avatar.prototype[name] || Avatar[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exists in Avatar.`);
+        return;
+    }
+    Avatar[name] = (label, props) => callback(new Avatar(label, props));
+};
+
+/**
+ * @param {Record<string, (a: Avatar) => Avatar>} presets
+ */
+Avatar.presets = function(presets) {
+    for (const name in presets) {
+        Avatar.preset(name, presets[name]);
+    }
+};
+
+
+/**
+ * Registers a handler for the error event
+ * @param {(error: Error, avatar: Avatar) => void} handler - The event handler
+ * @returns {Avatar}
+ */
+Avatar.prototype.onError = function(handler) {};
+
+/**
+ * Sets the source URL for the avatar image
+ * @param {string} src - The image source URL
+ * @returns {Avatar}
+ */
+Avatar.prototype.src = function(src) {
+    this.$description.src.set(src);
+    return this;
+};
+
+/**
+ * Sets the alt text for the avatar image
+ * @param {string} alt - The alt text
+ * @returns {Avatar}
+ */
+Avatar.prototype.alt = function(alt) {
+    this.$description.alt = alt;
+    return this;
+};
+
+/**
+ * Sets the name associated with the avatar
+ * @param {string} name - The name
+ * @returns {Avatar}
+ */
+Avatar.prototype.name = function(name) {
+    this.$description.name = name;
+    if(!this.$description.initials) {
+        this.$description.initials = name.split(' ').map(n => n[0]).join('');
+    }
+    return this;
+};
+
+/**
+ * Sets the initials to display
+ * @param {string} initials - The initials text
+ * @returns {Avatar}
+ */
+Avatar.prototype.initials = function(initials) {
+    this.$description.initials = initials;
+    return this;
+};
+
+/**
+ * Sets the icon for the avatar
+ * @param {ValidChildren} icon - The icon to display
+ * @returns {Avatar}
+ */
+Avatar.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+/**
+ * Sets the size of the avatar
+ * @param {string|number} size - The size value (preset name or custom value)
+ * @returns {Avatar}
+ */
+Avatar.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+
+/**
+ * Sets the avatar size to 'extra-small'
+ * @returns {Avatar}
+ */
+Avatar.prototype.extraSmall = function() {
+    return this.size('extra-small');
+};
+
+/**
+ * Sets the avatar size to 'small'
+ * @returns {Avatar}
+ */
+Avatar.prototype.small = function() {
+    return this.size('small');
+};
+
+/**
+ * Sets the avatar size to 'medium'
+ * @returns {Avatar}
+ */
+Avatar.prototype.medium = function() {
+    return this.size('medium');
+};
+
+/**
+ * Sets the avatar size to 'large'
+ * @returns {Avatar}
+ */
+Avatar.prototype.large = function() {
+    return this.size('large');
+};
+
+/**
+ * Sets the avatar size to 'extra-large'
+ * @returns {Avatar}
+ */
+Avatar.prototype.extraLarge = function() {
+    return this.size('extra-large');
+};
+
+/**
+ * Sets the shape of the avatar
+ * @param {string} shape - The shape name (circle, square, rounded)
+ * @returns {Avatar}
+ */
+Avatar.prototype.shape = function(shape) {
+    this.$description.shape = shape;
+    return this;
+};
+
+/**
+ * Sets the avatar shape to 'circle'
+ * @returns {Avatar}
+ */
+Avatar.prototype.circle = function() {
+    return this.shape('circle');
+};
+
+/**
+ * Sets the avatar shape to 'square'
+ * @returns {Avatar}
+ */
+Avatar.prototype.square = function() {
+    return this.shape('square');
+};
+
+/**
+ * Sets the avatar shape to 'rounded'
+ * @returns {Avatar}
+ */
+Avatar.prototype.rounded = function() {
+    return this.shape('rounded');
+};
+
+/**
+ * Sets the variant style for the avatar
+ * @param {string} variant - The variant name (primary, secondary, success, danger, warning, info)
+ * @returns {Avatar}
+ */
+Avatar.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+}; // 'primary' | 'secondary' | 'success' | etc.
+
+/**
+ * Sets the avatar variant to 'primary'
+ * @returns {Avatar}
+ */
+Avatar.prototype.primary = function() {
+    return this.variant('primary');
+};
+
+/**
+ * Sets the avatar variant to 'secondary'
+ * @returns {Avatar}
+ */
+Avatar.prototype.secondary = function() {
+    return this.variant('secondary');
+};
+
+/**
+ * Sets the avatar variant to 'success'
+ * @returns {Avatar}
+ */
+Avatar.prototype.success = function() {
+    return this.variant('success');
+};
+
+/**
+ * Sets the avatar variant to 'danger'
+ * @returns {Avatar}
+ */
+Avatar.prototype.danger = function() {
+    return this.variant('danger');
+};
+
+/**
+ * Sets the avatar variant to 'warning'
+ * @returns {Avatar}
+ */
+Avatar.prototype.warning = function() {
+    return this.variant('warning');
+};
+
+/**
+ * Sets the avatar variant to 'info'
+ * @returns {Avatar}
+ */
+Avatar.prototype.info = function() {
+    return this.variant('info');
+};
+
+/**
+ * Sets the background color of the avatar
+ * @param {string} color - The color value
+ * @returns {Avatar}
+ */
+Avatar.prototype.color = function(color) {
+    this.$description.color = color;
+    return this;
+};
+
+/**
+ * Sets the text color of the avatar
+ * @param {string} color - The color value
+ * @returns {Avatar}
+ */
+Avatar.prototype.textColor = function(color) {
+    this.$description.textColor = color;
+    return this;
+};
+
+/**
+ * Sets the status indicator for the avatar
+ * @param {string} status - The status value
+ * @returns {Avatar}
+ */
+Avatar.prototype.status = function(status) {
+    this.$description.status = BaseComponent.obs(status);
+    return this;
+};
+
+/**
+ * Sets the position of the status indicator
+ * @param {string} position - The position (top-trailing, bottom-trailing, top-leading, bottom-leading)
+ * @returns {Avatar}
+ */
+Avatar.prototype.statusPosition = function(position) {
+    this.$description.statusPosition = position;
+}; // 'top-right' | 'bottom-right' | etc.
+
+/**
+ * Positions the status indicator at top-leading
+ * @returns {Avatar}
+ */
+Avatar.prototype.statusAtTopLeading = function() {
+    return this.statusPosition('top-leading');
+};
+
+/**
+ * Positions the status indicator at bottom-leading
+ * @returns {Avatar}
+ */
+Avatar.prototype.statusAtBottomLeading = function() {
+    return this.statusPosition('bottom-leading');
+};
+
+/**
+ * Positions the status indicator at top-trailing
+ * @returns {Avatar}
+ */
+Avatar.prototype.statusAtTopTrailing = function() {
+    return this.statusPosition('top-trailing');
+};
+
+/**
+ * Positions the status indicator at bottom-trailing
+ * @returns {Avatar}
+ */
+Avatar.prototype.statusAtBottomTrailing = function() {
+    return this.statusPosition('bottom-trailing');
+};
+
+/**
+ * Shows or hides the status indicator
+ * @param {boolean} [show=true] - Whether to show the status
+ * @returns {Avatar}
+ */
+Avatar.prototype.showStatus = function(show = true) {
+    this.$description.showStatus = show;
+    return this;
+};
+
+/**
+ * Sets the badge content for the avatar
+ * @param {ValidChildren} content - The badge content
+ * @returns {Avatar}
+ */
+Avatar.prototype.badge = function(content) {
+    this.$description.badge = content;
+    return this;
+};
+
+/**
+ * Sets the position of the badge
+ * @param {string} position - The position (top-leading, bottom-leading, top-trailing, bottom-trailing)
+ * @returns {Avatar}
+ */
+Avatar.prototype.badgePosition = function(position) {
+    this.$description.badgePosition = position;
+    return this;
+};
+
+/**
+ * Positions the badge at top-leading
+ * @returns {Avatar}
+ */
+Avatar.prototype.badgeAtTopLeading = function() {
+    return this.badgePosition('top-leading');
+};
+
+/**
+ * Positions the badge at bottom-leading
+ * @returns {Avatar}
+ */
+Avatar.prototype.badgeAtBottomLeading = function() {
+    return this.badgePosition('bottom-leading');
+};
+
+/**
+ * Positions the badge at top-trailing
+ * @returns {Avatar}
+ */
+Avatar.prototype.badgeAtTopTrailing = function() {
+    return this.badgePosition('top-trailing');
+};
+
+/**
+ * Positions the badge at bottom-trailing
+ * @returns {Avatar}
+ */
+Avatar.prototype.badgeAtBottomTrailing = function() {
+    return this.badgePosition('bottom-trailing');
+};
+

package/src/components/avatar/AvatarGroup.js

@@ -0,0 +1,97 @@
+import BaseComponent from '../BaseComponent';
+
+/**
+ * Renders a group of overlapping Avatar components with a "+N" overflow indicator.
+ *
+ *
+ * @example
+ * const group = new AvatarGroup()
+ *     .items([
+ *         new Avatar('user1.jpg').name('Alice'),
+ *         new Avatar('user2.jpg').name('Bob'),
+ *         new Avatar('user3.jpg').name('Carol'),
+ *     ])
+ *     .max(3)
+ *     .overlap(8)
+ *     .onMoreClick((count) => console.log(\`\${count} more users\`));
+ *
+ * @constructor
+ * @param {GlobalAttributes} [props]
+ */
+export default function AvatarGroup(props = {}) {
+    if(!(this instanceof AvatarGroup)) {
+        return new AvatarGroup(props);
+    }
+
+    this.$description = {
+        items: [],
+        overlap: 0,
+        max: 0,
+        onMoreClick: null,
+        props,
+    };
+
+};
+
+BaseComponent.extends(AvatarGroup);
+
+AvatarGroup.defaultTemplate = null;
+
+/**
+ * Registers the render template for AvatarGroup.
+ * @param {(description: {
+ *     items: Avatar[],
+ *     overlap: number,
+ *     max: number,
+ *     onMoreClick: ((count: number) => void)|null,
+ *     props: GlobalAttributes,
+ * }, instance: AvatarGroup) => NdChild} template
+ */
+AvatarGroup.use = function(template) {
+    AvatarGroup.defaultTemplate = template;
+};
+
+/**
+ * @param {Avatar[]} items
+ * @returns {this}
+ */
+AvatarGroup.prototype.items = function(items) {
+    this.$description.items = items;
+    return this;
+};
+
+/**
+ * @param {Avatar} item
+ * @returns {this}
+ */
+AvatarGroup.prototype.item = function(item) {
+    this.$description.items.push(item);
+    return this;
+};
+
+/**
+ * @param {number} value
+ * @returns {this}
+ */
+AvatarGroup.prototype.overlap = function(value) {
+    this.$description.overlap = value;
+    return this;
+};
+
+/**
+ * @param {number} max
+ * @returns {this}
+ */
+AvatarGroup.prototype.max = function(max) {
+    this.$description.max = max;
+    return this;
+};
+
+/**
+ * @param {(count: number) => void} handler
+ * @returns {this}
+ */
+AvatarGroup.prototype.onMoreClick = function(handler) {
+    this.$description.onMoreClick = handler;
+    return this;
+};

package/src/components/avatar/index.js

@@ -0,0 +1,7 @@
+import Avatar from './Avatar';
+import AvatarGroup from './AvatarGroup';
+
+export {
+    Avatar,
+    AvatarGroup,
+};

package/src/components/avatar/types/Avatar.d.ts

@@ -0,0 +1,74 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type AvatarDescription = {
+        src: ObservableItem<string> | null;
+        alt: string | null;
+        name: string | null;
+        initials: string | null;
+        icon: ValidChild | null;
+        size: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | string | number;
+        shape: 'circle' | 'square' | 'rounded';
+        variant: string | null;
+        color: string | null;
+        textColor: string | null;
+        status: ObservableItem<string> | string | null;
+        render: ((desc: AvatarDescription, instance: AvatarInterface) => ValidChild) | null;
+        props: GlobalAttributes;
+    };
+
+export interface AvatarInterface extends BaseComponent {
+    onError(handler: (error: Error, avatar: AvatarInterface) => void): this;
+    src(src: string | ObservableItem<string>): this;
+    alt(alt: string): this;
+    name(name: string): this;
+    initials(initials: string): this;
+    icon(icon: ValidChild): this;
+    size(size: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | string | number): this;
+    extraSmall(): this;
+    small(): this;
+    medium(): this;
+    large(): this;
+    extraLarge(): this;
+    shape(shape: 'circle' | 'square' | 'rounded'): this;
+    circle(): this;
+    square(): this;
+    rounded(): this;
+    variant(variant: string): this;
+    primary(): this;
+    secondary(): this;
+    success(): this;
+    danger(): this;
+    warning(): this;
+    info(): this;
+    color(color: string): this;
+    textColor(color: string): this;
+    status(status: string | ObservableItem<string>): this;
+    statusPosition(position: 'top-leading' | 'top-trailing' | 'bottom-leading' | 'bottom-trailing'): this;
+    statusAtTopLeading(): this;
+    statusAtBottomLeading(): this;
+    statusAtTopTrailing(): this;
+    statusAtBottomTrailing(): this;
+    showStatus(show?: boolean): this;
+    badge(content: ValidChild): this;
+    badgePosition(position: 'top-leading' | 'top-trailing' | 'bottom-leading' | 'bottom-trailing'): this;
+    badgeAtTopLeading(): this;
+    badgeAtBottomLeading(): this;
+    badgeAtTopTrailing(): this;
+    badgeAtBottomTrailing(): this;
+    render(template: (description: AvatarDescription, instance: AvatarInterface) => ValidChild): this;
+}
+
+
+export declare function Avatar(source?: string | ObservableItem<string>, props?: Record<string, unknown>): AvatarInterface;
+export declare namespace Avatar {
+
+
+    function use(template: (description: AvatarDescription, instance: AvatarInterface) => ValidChild): void;
+    function preset(name: string, callback: (instance: AvatarInterface) => AvatarInterface): void;
+    function presets(presets: Record<string, (instance: AvatarInterface) => AvatarInterface>): void;
+
+
+}

package/src/components/avatar/types/AvatarGroup.d.ts

@@ -0,0 +1,32 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { AvatarInterface } from './Avatar';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type AvatarGroupDescription = {
+        items: AvatarInterface[];
+        overlap: number;
+        max: number;
+        onMoreClick: ((count: number) => void) | null;
+        props: GlobalAttributes;
+    };
+
+export interface AvatarGroupInterface extends BaseComponent {
+    items(items: AvatarInterface[]): this;
+    item(item: AvatarInterface): this;
+    overlap(value: number): this;
+    max(max: number): this;
+    onMoreClick(handler: (count: number) => void): this;
+    render(template: (description: AvatarGroupDescription, instance: AvatarGroupInterface) => ValidChild): this;
+}
+
+
+export declare function AvatarGroup(props?: Record<string, unknown>): AvatarGroupInterface;
+export declare namespace AvatarGroup {
+
+
+    function use(template: (description: AvatarGroupDescription, instance: AvatarGroupInterface) => ValidChild): void;
+
+
+}