native-document 1.0.15 → 1.0.16-8.1

package/src/components/accordion/AccordionItem.js

@@ -0,0 +1,233 @@
+import { $ } from '../../core/data/Observable';
+import BaseComponent from '../BaseComponent';
+import HasEventEmitter from '../../core/utils/HasEventEmitter';
+
+/**
+ * A single collapsible item inside an Accordion. Manages its own expanded/collapsed state.
+ *
+ *
+ * @example
+ * const item = new AccordionItem()
+ *     .title(Span('My title'))
+ *     .icon(SomeIcon())
+ *     .content(Div('Body content'))
+ *     .collapsible(true)
+ *     .disabled(false);
+ *
+ * item.onExpand(() => console.log('expanded'))
+ *     .onCollapse(() => console.log('collapsed'));
+ *
+ * @constructor
+ * @param {GlobalAttributes} [props]
+ */
+export default function AccordionItem(props = {}) {
+    if(!(this instanceof AccordionItem)){
+        return new AccordionItem();
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        id: null,
+        title: null,
+        icon: null,
+        collapsible: true,
+        content: null,
+        renderHeader: null,
+        renderIndicator: null,
+        renderContent: null,
+        render: null,
+        expanded: $(false),
+        disabled: $(false),
+        props,
+    };
+}
+
+BaseComponent.extends(AccordionItem);
+BaseComponent.use(AccordionItem, HasEventEmitter);
+
+AccordionItem.defaultTemplate = null;
+
+/**
+ * Registers the render template for AccordionItem.
+ * @param {(description: {
+ *     id: string|number|null,
+ *     title: NdChild|null,
+ *     icon: NdChild|null,
+ *     collapsible: boolean,
+ *     content: NdChild|null,
+ *     renderHeader: ((desc: *, instance: AccordionItem) => NdChild)|null,
+ *     renderIndicator: ((desc: *, instance: AccordionItem) => NdChild)|null,
+ *     renderContent: ((desc: *, instance: AccordionItem) => NdChild)|null,
+ *     render: ((desc: *, instance: AccordionItem) => NdChild)|null,
+ *     expanded: Observable<boolean>,
+ *     disabled: Observable<boolean>,
+ *     props: GlobalAttributes,
+ * }, instance: AccordionItem) => NdChild} template
+ */
+AccordionItem.use = function(template) {
+    AccordionItem.defaultTemplate = template;
+};
+
+/**
+ * Gets the id of the accordion item
+ * @type {string}
+ */
+Object.defineProperty(AccordionItem.prototype, 'id', {
+    get() {
+        return this.$description.id;
+    },
+});
+
+/**
+ * Sets the identifier for the accordion item
+ * @param {string|number} id - The unique identifier
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.identifyBy = function(id) {
+    this.$description.id = id;
+    return this;
+};
+
+/**
+ * Sets the content of the accordion item
+ * @param {NdChild} content - The content to display
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+/**
+ * Sets the title of the accordion item
+ * @param {NdChild} title
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.title = function(title) {
+    this.$description.title = title;
+    return this;
+};
+
+/**
+ * Sets the icon for the accordion item
+ * @param {NdChild} icon - The icon identifier or element
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+/**
+ * Shows or hides the expansion indicator
+ * @param {boolean} [show=true] - Whether to show the indicator
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.showIndicator = function(show = true) {
+    this.$description.showIndicator = show;
+    return this;
+};
+
+/**
+ * Sets whether the item can be collapsed
+ * @param {boolean} [collapsible=true] - Whether the item is collapsible
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.collapsible = function(collapsible = true) {
+    this.$description.collapsible = collapsible;
+    return this;
+};
+
+/**
+ * Expands or collapses the accordion item
+ * @param {boolean} [expanded=true] - Whether to expand the item
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.expanded = function(expanded = true) {
+    this.$description.expanded.set(expanded);
+    if (this.$description.expanded.val()) {
+        this.emit('expand');
+    } else {
+        this.emit('collapse');
+    }
+    return this;
+};
+
+/**
+ * Toggles the expanded state of the accordion item
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.toggle = function() {
+    return this.expanded(!this.$description.expanded.val());
+};
+
+
+/**
+ * Sets the disabled state of the accordion item
+ * @param {boolean} [disabled=true] - Whether the item is disabled
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.disabled = function(disabled = true) {
+    this.$description.disabled.set(disabled);
+    return this;
+};
+
+/**
+ * Checks if the accordion item is currently expanded
+ * @returns {boolean}
+ */
+AccordionItem.prototype.isExpanded = function() {
+    return this.$description.expanded.val();
+};
+
+/**
+ * Registers a handler for the expand event
+ * @param {Function} handler - The event handler
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.onExpand = function(handler) {
+    this.on('expand', handler );
+    return this;
+};
+
+/**
+ * Registers a handler for the collapse event
+ * @param {Function} handler - The event handler
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.onCollapse = function(handler) {
+    this.on('collapse', handler);
+    return this;
+};
+
+/**
+ * Sets the header render function
+ * @param {Function} renderFn - Function to render the header
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.renderHeader = function(renderFn) {
+    this.$description.renderHeader = renderFn;
+    return this;
+};
+
+/**
+ * Sets the content render function
+ * @param {Function} renderFn - Function to render the content
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.renderContent = function(renderFn) {
+    this.$description.renderContent = renderFn;
+    return this;
+};
+
+/**
+ * Sets the indicator render function
+ * @param {Function} renderFn - Function to render the indicator
+ * @returns {AccordionItem}
+ */
+AccordionItem.prototype.renderIndicator = function(renderFn) {
+    this.$description.renderIndicator = renderFn;
+    return this;
+};
+

package/src/components/accordion/index.js

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

package/src/components/accordion/types/Accordion.d.ts

@@ -0,0 +1,47 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { AccordionItemInterface, AccordionItemConstructor } from './AccordionItem';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type AccordionDescription = {
+        items: AccordionItemInterface[];
+        multiple: boolean | null;
+        variant: string | null;
+        renderContent: ((desc: AccordionDescription, instance: AccordionInterface) => ValidChild) | null;
+        renderIndicator: ((desc: AccordionDescription, instance: AccordionInterface) => ValidChild) | null;
+        props: GlobalAttributes;
+    };
+
+export interface AccordionInterface extends BaseComponent {
+    item(title: ValidChild | AccordionItemInterface, content?: ValidChild, options?: Record<string, unknown> | ((item: AccordionItemInterface) => void)): this;
+    items(items: AccordionItemInterface[]): this;
+    addItem(title: ValidChild | AccordionItemInterface, content?: ValidChild, options?: unknown): this;
+    removeItemById(id: string | number): this;
+    remove(filter: (item: AccordionItemInterface) => boolean): this;
+    multiple(enabled?: boolean): this;
+    variant(name: string): this;
+    bordered(): this;
+    separated(): this;
+    flush(): this;
+    getByKey(key: string): AccordionItemInterface | undefined;
+    expanded(key: string, state?: boolean): this;
+    expandAll(): this;
+    collapseAll(): this;
+    isExpanded(key: string): boolean | undefined;
+    onExpand(handler: (key: string, state: boolean) => void): this;
+    onCollapse(handler: (key: string, state: boolean) => void): this;
+    renderContent(renderFn: (desc: AccordionDescription, instance: AccordionInterface) => ValidChild): this;
+    renderIndicator(renderFn: (desc: AccordionDescription, instance: AccordionInterface) => ValidChild): this;
+    render(template: (description: AccordionDescription, instance: AccordionInterface) => ValidChild): this;
+}
+
+
+export declare function Accordion(props?: Record<string, unknown>): AccordionInterface;
+export declare namespace Accordion {
+
+
+    function use(template: (description: AccordionDescription, instance: AccordionInterface) => ValidChild): void;
+
+
+}

package/src/components/accordion/types/AccordionItem.d.ts

@@ -0,0 +1,48 @@
+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 AccordionItemDescription = {
+        id: string | number | null;
+        title: ValidChild | null;
+        icon: ValidChild | null;
+        collapsible: boolean;
+        content: ValidChild | null;
+        renderHeader: ((desc: AccordionItemDescription, instance: AccordionItemInterface) => ValidChild) | null;
+        renderIndicator: ((desc: AccordionItemDescription, instance: AccordionItemInterface) => ValidChild) | null;
+        renderContent: ((desc: AccordionItemDescription, instance: AccordionItemInterface) => ValidChild) | null;
+        render: ((desc: AccordionItemDescription, instance: AccordionItemInterface) => ValidChild) | null;
+        expanded: ObservableItem<boolean>;
+        disabled: ObservableItem<boolean>;
+        props: GlobalAttributes;
+    };
+
+export interface AccordionItemInterface extends BaseComponent {
+    identifyBy(id: string | number): this;
+    content(content: ValidChild): this;
+    title(title: ValidChild): this;
+    icon(icon: ValidChild): this;
+    showIndicator(show?: boolean): this;
+    collapsible(collapsible?: boolean): this;
+    expanded(expanded?: boolean): this;
+    toggle(): this;
+    disabled(disabled?: boolean): this;
+    isExpanded(): boolean;
+    onExpand(handler: () => void): this;
+    onCollapse(handler: () => void): this;
+    renderHeader(renderFn: (desc: AccordionItemDescription, instance: AccordionItemInterface) => ValidChild): this;
+    renderContent(renderFn: (desc: AccordionItemDescription, instance: AccordionItemInterface) => ValidChild): this;
+    renderIndicator(renderFn: (desc: AccordionItemDescription, instance: AccordionItemInterface) => ValidChild): this;
+    render(template: (description: AccordionItemDescription, instance: AccordionItemInterface) => ValidChild): this;
+}
+
+
+export declare function AccordionItem(props?: Record<string, unknown>): AccordionItemInterface;
+export declare namespace AccordionItem {
+
+
+    function use(template: (description: AccordionItemDescription, instance: AccordionItemInterface) => ValidChild): void;
+
+
+}

package/src/components/alert/Alert.js

@@ -0,0 +1,350 @@
+import BaseComponent from '../BaseComponent';
+import HasEventEmitter from '../../core/utils/HasEventEmitter';
+import DebugManager from '../../core/utils/debug-manager';
+
+/**
+ * Contextual feedback alert. Supports variants (info, success, warning, error), icons, closable/auto-dismiss, and action buttons.
+ *
+ *
+ * @example
+ * const alert = new Alert(Span('Operation completed successfully.'))
+ *     .variant('success')
+ *     .showIcon(true)
+ *     .closable(true)
+ *     .autoDismiss(5000)
+ *     .action('Undo', () => console.log('undo'))
+ *     .onClose(() => console.log('closed'));
+ *
+ * Alert.use((description, instance) => {
+ *     // description.content, description.variant, description.actions...
+ *     return Div({ class: \`alert alert--\${description.variant}\` }, description.content);
+ * });
+ *
+ * @constructor
+ * @param {NdChild} content
+ * @param {GlobalAttributes} [props={}]
+ */
+export default function Alert(content, props = {}) {
+    if(!(this instanceof Alert)) {
+        return new Alert(content, props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        title: null,
+        content,
+        outline: null,
+        appearance: null,
+        variant: 'info',
+        closable: false,
+        autoDismiss: null,
+        icon: null,
+        showIcon: true,
+        actions: [],
+        props,
+    };
+}
+
+Alert.defaultTemplate = null;
+
+/**
+ * Registers the render template for Alert.
+ * @param {(description: {
+ *     title: NdChild|null,
+ *     content: NdChild,
+ *     outline: boolean|null,
+ *     appearance: 'filled'|'bordered'|null,
+ *     variant: 'info'|'success'|'warning'|'error'|'danger'|string,
+ *     closable: boolean,
+ *     autoDismiss: number|null,
+ *     icon: NdChild|null,
+ *     showIcon: boolean,
+ *     actions: Array<{ label: NdChild, handler: Function|null, variant: string|null }>,
+ *     props: GlobalAttributes,
+ * }, instance: Alert) => NdChild} template
+ */
+Alert.use = function(template) {
+    Alert.defaultTemplate = template;
+};
+
+BaseComponent.extends(Alert);
+BaseComponent.use(Alert, HasEventEmitter);
+
+/**
+ * @param {string} name
+ * @param {(a: Alert) => Alert} callback
+ */
+Alert.preset = function(name, callback) {
+    if (Alert.prototype[name] || Alert[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exist in Alert.`);
+        return;
+    }
+    Alert[name] = (content, props) => callback(new Alert(content, props));
+};
+
+/**
+ * @param {Record<string, (a: Alert) => Alert>} presets
+ */
+Alert.presets = function(presets) {
+    for (const name in presets) {
+        Alert.preset(name, presets[name]);
+    }
+};
+
+/**
+ * Sets the variant style for the alert
+ * @param {string} variant - The variant name (info, success, warning, error, danger)
+ * @returns {this}
+ */
+Alert.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+};
+
+/**
+ * Sets the alert variant to 'info'
+ * @returns {this}
+ */
+Alert.prototype.info = function() {
+    return this.variant('info');
+};
+
+/**
+ * Sets the alert variant to 'success'
+ * @returns {this}
+ */
+Alert.prototype.success = function() {
+    return this.variant('success');
+};
+
+/**
+ * Sets the alert variant to 'warning'
+ * @returns {this}
+ */
+Alert.prototype.warning = function() {
+    return this.variant('warning');
+};
+
+/**
+ * Sets the alert variant to 'error'
+ * @returns {this}
+ */
+Alert.prototype.error = function() {
+    return this.variant('error');
+};
+
+/**
+ * Sets the alert variant to 'danger'
+ * @returns {this}
+ */
+Alert.prototype.danger = function() {
+    return this.variant('danger');
+};
+
+/**
+ * Sets the appearance type for the alert
+ * @param {string} appearance - The style name (filled, bordered, outline)
+ * @returns {this}
+ */
+Alert.prototype.appearance = function(appearance) {
+    this.$description.appearance = appearance;
+    return this;
+};
+
+/**
+ * Sets the alert appearance to 'filled'
+ * @returns {this}
+ */
+Alert.prototype.filled = function() {
+    return this.appearance('filled');
+};
+
+/**
+ * Sets the alert appearance to 'bordered'
+ * @returns {this}
+ */
+Alert.prototype.bordered = function() {
+    return this.appearance('bordered');
+};
+
+/**
+ * Sets the alert appearance to 'outline'
+ * @param {boolean} [outline=true] - Whether to use outline style
+ * @returns {this}
+ */
+Alert.prototype.outline = function(outline = true) {
+    return this.appearance('outline');
+};
+
+/**
+ * Sets the title of the alert
+ * @param {ValidChildren} title - The title content
+ * @returns {this}
+ */
+Alert.prototype.title = function(title) {
+    this.$description.title = title;
+    return this;
+};
+
+/**
+ * Sets the content of the alert
+ * @param {ValidChildren} content - The content to display
+ * @returns {this}
+ */
+Alert.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+/**
+ * Sets the title render function
+ * @param {Function} callback - Function to render the title
+ * @returns {this}
+ */
+Alert.prototype.renderTitle = function(callback) {
+    this.$description.renderTitle = callback;
+    return this;
+};
+
+/**
+ * Sets the content render function
+ * @param {Function} callback - Function to render the content
+ * @returns {this}
+ */
+Alert.prototype.renderContent = function(callback) {
+    this.$description.renderContent = callback;
+    return this;
+};
+
+/**
+ * Clears all actions from the alert
+ * @returns {this}
+ */
+Alert.prototype.renderFooter = function(callback) {
+    this.$description.renderFooter = callback;
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Alert.prototype.clearActions = function() {
+    this.$description.actions = [];
+    return this;
+};
+
+/**
+ * Adds an action button to the alert
+ * @param {string} label - The button label
+ * @param {Function} handler - The click handler
+ * @param {?string} variant - The button variant style
+ * @returns {this}
+ */
+Alert.prototype.action = function(label, handler, variant = null) {
+    handler = handler || ((_, instance) => instance.hide());
+    this.$description.actions.push({ label, handler, variant });
+    return this;
+};
+
+/**
+ * Sets the layout function for the alert
+ * @param {Function} layoutFn - Function to layout the alert
+ * @returns {this}
+ */
+Alert.prototype.layout = function(layoutFn) {
+    this.$description.layout = layoutFn;
+    return this;
+};
+
+/**
+ * Sets the icon for the alert
+ * @param {ValidChildren} icon - The icon to display
+ * @returns {this}
+ */
+Alert.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+/**
+ * Shows or hides the icon
+ * @param {boolean} [show=true] - Whether to show the icon
+ * @returns {this}
+ */
+Alert.prototype.showIcon = function(show = true) {
+    this.$description.showIcon = show;
+};
+
+/**
+ * Sets whether the alert can be closed
+ * @param {boolean} [closable=true] - Whether the alert is closable
+ * @returns {this}
+ */
+Alert.prototype.closable = function(closable = true) {
+    this.$description.closable = !!closable;
+    if(closable) {
+        this.showIf(closable);
+    }
+    return this;
+};
+
+/**
+ * Sets whether the alert is dismissible (alias for closable)
+ * @param {boolean} [dismissible=true] - Whether the alert is dismissible
+ * @returns {this}
+ */
+Alert.prototype.dismissible = function(dismissible = true) {
+    return this.closable(dismissible);
+};
+
+/**
+ * Sets auto-dismiss delay for the alert
+ * @param {number} delay - Delay in milliseconds before auto-dismissing
+ * @returns {this}
+ */
+Alert.prototype.autoDismiss = function(delay) {
+    this.$description.autoDismiss = delay;
+    return this;
+};
+
+/**
+ * Closes the alert
+ */
+Alert.prototype.close = function() {
+    this.$description.showIf?.set(false);
+    this.emit('hide');
+};
+
+/**
+ * Shows the alert
+ */
+Alert.prototype.show = function() {
+    this.$description.showIf?.set(true);
+    this.emit('show');
+};
+
+/**
+ * Hides the alert
+ */
+Alert.prototype.hide = Alert.prototype.close;
+
+/**
+ * Registers a handler for the close event
+ * @param {(element: Alert) => void} handler - The event handler
+ * @returns {this}
+ */
+Alert.prototype.onClose = function(handler) {
+    this.on('close', handler);
+    return this;
+};
+
+/**
+ * Registers a handler for the show event
+ * @param {(element: Alert) => void} handler - The event handler
+ * @returns {this}
+ */
+Alert.prototype.onShow = function(handler) {
+    this.on('show', handler);
+    return this;
+};

package/src/components/alert/index.js

@@ -0,0 +1,6 @@
+import Alert from './Alert';
+
+
+export {
+    Alert,
+};