native-document 1.0.16 → 1.0.17-1.2

package/src/components/accordion/Accordion.js

@@ -0,0 +1,269 @@
+import BaseComponent from '../BaseComponent';
+import HasEventEmitter from '../../core/utils/HasEventEmitter';
+import AccordionItem from './AccordionItem';
+
+/**
+ * Collapsible accordion component. Manages a list of AccordionItem instances with expand/collapse behaviour.
+ *
+ *
+ * @example
+ * const accordion = new Accordion()
+ *     .item('Section 1', Div('Content of section 1'))
+ *     .item('Section 2', Div('Content of section 2'))
+ *     .multiple(true)
+ *     .variant('bordered');
+ *
+ * Accordion.use((description, instance) => {
+ *     // description.$items, description.multiple, description.variant...
+ *     return Div({ class: 'my-accordion' }, description.items);
+ * });
+ *
+ * @constructor
+ * @param {GlobalAttributes} [props]
+ */
+export default function Accordion(props = {}) {
+    if (!(this instanceof Accordion)) {
+        return new Accordion(props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        items: [],
+        multiple: null,
+        variant: null,
+        renderContent: null,
+        renderIndicator: null,
+        props,
+    };
+    this.aria = {};
+}
+
+BaseComponent.extends(Accordion);
+BaseComponent.use(Accordion, HasEventEmitter);
+
+Accordion.defaultTemplate = null;
+
+/**
+ * Registers the render template for Accordion.
+ * @param {(description: {
+ *     items: AccordionItem[],
+ *     multiple: boolean|null,
+ *     variant: string|null,
+ *     renderContent: ((desc: *, instance: Accordion) => NdChild)|null,
+ *     renderIndicator: ((desc: *, instance: Accordion) => NdChild)|null,
+ *     props: GlobalAttributes,
+ * }, instance: Accordion) => NdChild} template
+ */
+Accordion.use = function(template) {
+    Accordion.defaultTemplate = template;
+};
+
+
+/**
+ * @param {NdChild|AccordionItem} title
+ * @param {NdChild} [content]
+ * @param {GlobalAttributes|((item: AccordionItem) => void)} [options]
+ * @returns {this}
+ */
+Accordion.prototype.item = function(title, content, options) {
+    let item = null;
+
+    if(title instanceof AccordionItem) {
+        item = title;
+    }
+    else {
+        const config = typeof options === 'object' ? options : {};
+        item = new AccordionItem(config);
+        item.title(title);
+        item.content(content);
+        item.setDescription(config);
+    }
+
+    if(typeof options === 'function') {
+        options(item);
+    }
+
+    this.$description.items.push(item);
+    return this;
+};
+
+/**
+ * Sets the accordion items collection
+ * @param {Array<AccordionItem>} items - Array of accordion items
+ * @returns {Accordion}
+ */
+Accordion.prototype.items = function(items) {
+    this.$description.items = items;
+    return this;
+};
+
+/**
+ * Alias for item method
+ * @param {AccordionItem} accordionItem - The accordion item to add
+ * @returns {Accordion}
+ */
+Accordion.prototype.addItem = Accordion.prototype.item;
+
+/**
+ * Removes an item by its id
+ * @param {string} id - The id of the item to remove
+ * @returns {Accordion}
+ */
+Accordion.prototype.removeItemById = function(id) {
+    if (this.$description.items) {
+        this.$description.items = this.$description.items.filter(item => item.id !== id);
+    }
+    return this;
+};
+
+/**
+ * Removes items matching the filter function
+ * @param {Function} filter - Filter function to determine which items to keep
+ * @returns {Accordion}
+ */
+Accordion.prototype.remove = function(filter) {
+    if (this.$description.items) {
+        this.$description.items = this.$description.items.filter(filter);
+    }
+    return this;
+};
+
+/**
+ * Enables or disables multiple items expansion
+ * @param {boolean} [enabled=true] - Whether multiple items can be expanded simultaneously
+ * @returns {Accordion}
+ */
+Accordion.prototype.multiple = function(enabled = true) {
+    this.$description.multiple = enabled;
+    return this;
+};
+
+/**
+ * Sets the variant style for the accordion
+ * @param {string} name - The variant name
+ * @returns {Accordion}
+ */
+Accordion.prototype.variant = function(name) {
+    this.$description.variant = name;
+    return this;
+};
+
+/**
+ * Sets the accordion variant to 'bordered'
+ * @returns {Accordion}
+ */
+Accordion.prototype.bordered = function() {
+    return this.variant('bordered');
+};
+
+/**
+ * Sets the accordion variant to 'separated'
+ * @returns {Accordion}
+ */
+Accordion.prototype.separated = function() {
+    return this.variant('separated');
+};
+
+/**
+ * Sets the accordion variant to 'flush'
+ * @returns {Accordion}
+ */
+Accordion.prototype.flush = function() {
+    return this.variant('flush');
+};
+
+/**
+ * Retrieves an accordion item by its key
+ * @param {string} key - The key of the item to retrieve
+ * @returns {AccordionItem|undefined}
+ */
+Accordion.prototype.getByKey = function(key) {
+    return this.$description.items.find(item => item.key === key);
+};
+
+/**
+ * Expands or collapses an accordion item by key
+ * @param {string} key - The key of the item
+ * @param {boolean} [state=true] - Whether to expand (true) or collapse (false)
+ * @returns {Accordion}
+ */
+Accordion.prototype.expanded = function(key, state = true) {
+    const item = this.getByKey(key);
+    if(item) {
+        if (state && !this.$description.multiple) {
+            this.collapseAll();
+        }
+        item.expanded(state);
+        this.emit(state ? 'expand' : 'collapse', key, state);
+    }
+    return this;
+};
+
+/**
+ * Expands all accordion items
+ * @returns {Accordion}
+ */
+Accordion.prototype.expandAll = function() {
+    this.$description.items.forEach(item => item.expanded(true));
+    return this;
+};
+
+/**
+ * Collapses all accordion items
+ * @returns {Accordion}
+ */
+Accordion.prototype.collapseAll = function() {
+    this.$description.items.forEach(item => item.expanded(false));
+    return this;
+};
+
+/**
+ * Checks if an accordion item is expanded
+ * @param {string} key - The key of the item to check
+ * @returns {boolean|undefined}
+ */
+Accordion.prototype.isExpanded = function(key) {
+    return this.getByKey(key)?.isExpanded?.();
+};
+
+/**
+ * Registers a handler for the expand event
+ * @param {Function} handler - The event handler
+ * @returns {Accordion}
+ */
+Accordion.prototype.onExpand = function(handler) {
+    this.on('expand', handler);
+    return this;
+};
+
+/**
+ * Registers a handler for the collapse event
+ * @param {Function} handler - The event handler
+ * @returns {Accordion}
+ */
+Accordion.prototype.onCollapse = function(handler) {
+    this.on('collapse', handler);
+    return this;
+};
+
+/**
+ * Sets the content render function
+ * @param {Function} renderFn - Function to render content
+ * @returns {Accordion}
+ */
+Accordion.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}
+ */
+Accordion.prototype.renderIndicator = function(renderFn) {
+    this.$description.renderIndicator = renderFn;
+    return this;
+};

package/src/components/accordion/AccordionItem.js

@@ -0,0 +1,234 @@
+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,
+    };
+    this.aria = { 'tabindex': '0' };
+}
+
+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;
+
+
+}