native-document 1.0.166 → 1.0.169

package/src/components/list/ListItem.js

@@ -1,64 +1,81 @@
 import BaseComponent from '../BaseComponent';
-import Validator from '../../core/utils/validator';
-import {$ } from '../../core/data/Observable';
+import HasEventEmitter from '../../core/utils/HasEventEmitter';
+import HasListItem from './HasListItem';
 
 /**
- * A single row inside a List. Supports leading/trailing slots, icon, selection, divider, and disabled state.
- *
+ * A single item in a List. Supports icon, label, subtitle, trailing slot,
+ * disabled/selected states, swipe actions (mobile), and custom render.
  *
  * @example
- * const item = new ListItem(Span('Item label'))
- *     .icon(StarIcon())
- *     .trailing(Span('chevron >'))
- *     .selectable()
- *     .divider(true);
+ * ListItem()
+ *     .label('Dashboard')
+ *     .icon(DashboardIcon())
+ *     .subtitle('View your metrics')
+ *     .trailing(Badge('New').primary())
+ *     .value('dashboard')
+ *     .selected(isActive)
+ *     .swipeLeading([Button('Archive').success()])
+ *     .swipeTrailing([Button('Delete').danger()])
+ *     .onClick(() => navigate('/dashboard'));
  *
  * ListItem.use((description, instance) => {
- *     return Li(description.leading, description.content, description.trailing);
+ *     return Li({ class: 'list-item' }, description.label);
  * });
  *
  * @constructor
- * @param {NdChild} [content]
- * @param {GlobalAttributes} [config={}]
+ * @param {GlobalAttributes} [props={}]
  */
-export default function ListItem(content, config = {}) {
-    if(!(this instanceof ListItem)) {
-        return new ListItem(content, config);
+export default function ListItem(props = {}) {
+    if (!(this instanceof ListItem)) {
+        return new ListItem(props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
-        content: content || null,
-        icon: null,
-        trailing: null,
-        leading: null,
-        disabled: false,
-        selectable: false,
-        selected: false,
-        divider: false,
-        data: null,
-        render: null,
-        ...config,
+        label:           null,
+        subtitle:        null,
+        icon:            null,
+        trailing:        null,
+        value:           null,
+        data:            null,
+        key:             null,
+        disabled:        null,
+        selected:        null,
+        visibility:      null,
+        isSelectedIcon:  null,
+        swipeLeading:    [],
+        swipeTrailing:   [],
+        render:          null,
+        props,
     };
 }
 
 BaseComponent.extends(ListItem);
+BaseComponent.use(ListItem, HasEventEmitter);
+
+HasListItem.components.ListItem = ListItem;
 
 ListItem.defaultTemplate = null;
 
 /**
  * Registers the render template for ListItem.
  * @param {(description: {
- *     content: NdChild|null,
- *     icon: NdChild|null,
- *     trailing: NdChild|null,
- *     leading: NdChild|null,
- *     disabled: boolean,
- *     selectable: boolean,
- *     selected: boolean|Observable<boolean>,
- *     divider: boolean,
- *     data: *|null,
- *     render: ((desc: *, instance: ListItem) => NdChild)|null,
- *     props: GlobalAttributes,
+ *     label:          NdChild|null,
+ *     subtitle:       NdChild|null,
+ *     icon:           NdChild|null,
+ *     trailing:       NdChild|null,
+ *     value:          *,
+ *     data:           *|null,
+ *     key:            string|null,
+ *     disabled:       Observable<boolean>|null,
+ *     selected:       Observable<boolean>|null,
+ *     visibility:     Observable<boolean>|null,
+ *     isSelectedIcon: NdChild|null,
+ *     swipeLeading:   NdChild[],
+ *     swipeTrailing:  NdChild[],
+ *     render:         ((desc: *, instance: ListItem) => NdChild)|null,
+ *     props:          GlobalAttributes,
  * }, instance: ListItem) => NdChild} template
  */
 ListItem.use = function(template) {
@@ -66,20 +83,20 @@ ListItem.use = function(template) {
 };
 
 /**
- * @param {NdChild} content
+ * @param {NdChild} label
  * @returns {this}
  */
-ListItem.prototype.content = function(content) {
-    this.$description.content = content;
+ListItem.prototype.label = function(label) {
+    this.$description.label = label;
     return this;
 };
 
 /**
- * @param {NdChild} label
+ * @param {NdChild} subtitle
  * @returns {this}
  */
-ListItem.prototype.label = function(label) {
-    this.$description.content = label;
+ListItem.prototype.subtitle = function(subtitle) {
+    this.$description.subtitle = subtitle;
     return this;
 };
 
@@ -93,72 +110,103 @@ ListItem.prototype.icon = function(icon) {
 };
 
 /**
- * @param {NdChild} leading
+ * @param {NdChild} trailing
  * @returns {this}
  */
-ListItem.prototype.leading = function(leading) {
-    this.$description.leading = leading;
+ListItem.prototype.trailing = function(trailing) {
+    this.$description.trailing = trailing;
     return this;
 };
 
 /**
- * @param {NdChild} trailing
+ * @param {*} value
  * @returns {this}
  */
-ListItem.prototype.trailing = function(trailing) {
-    this.$description.trailing = trailing;
+ListItem.prototype.value = function(value) {
+    this.$description.value = value;
     return this;
 };
 
+/**
+ * @param {*} data
+ * @returns {this}
+ */
+ListItem.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+/**
+ * @param {string} key
+ * @returns {this}
+ */
+ListItem.prototype.key = function(key) {
+    this.$description.key = key;
+    return this;
+};
 
 /**
  * @param {boolean|Observable<boolean>} [disabled=true]
  * @returns {this}
  */
 ListItem.prototype.disabled = function(disabled = true) {
-    this.$description.disabled = disabled;
+    this.$description.disabled = BaseComponent.obs(disabled);
     return this;
 };
 
 /**
+ * @param {boolean|Observable<boolean>} [selected=true]
  * @returns {this}
  */
-ListItem.prototype.selectable = function() {
-    this.$description.selectable = true;
-    if(Validator.isObservable(this.$description.selected)) {
-        return this;
-    }
-    this.$description.selected = $(false);
+ListItem.prototype.selected = function(selected = true) {
+    this.$description.selected = BaseComponent.obs(selected);
     return this;
 };
 
 /**
- * @param {boolean|Observable<boolean>} [selected]
+ * @param {boolean|Observable<boolean>} mode
  * @returns {this}
  */
-ListItem.prototype.selected = function(selected = true) {
-    if(Validator.isObservable(this.$description.selected)) {
-        this.$description.selected.set(selected);
-        return this;
-    }
-    this.$description.selected = selected;
+ListItem.prototype.visibility = function(mode) {
+    this.$description.visibility = BaseComponent.obs(mode);
     return this;
 };
 
 /**
- * @param {NdChild} [show]
+ * Icon displayed when the item is selected (selectByClick mode).
+ * @param {NdChild} icon
  * @returns {this}
  */
-ListItem.prototype.divider = function(show = true) {
-    this.$description.divider = show;
+ListItem.prototype.isSelectedIcon = function(icon) {
+    this.$description.isSelectedIcon = icon;
     return this;
 };
 
 /**
- * @param {*} data
+ * Swipe actions revealed on the leading (left) side — mobile swipe gesture.
+ * @param {NdChild[]} actions
  * @returns {this}
  */
-ListItem.prototype.data = function(data) {
-    this.$description.data = data;
+ListItem.prototype.swipeLeading = function(actions) {
+    this.$description.swipeLeading = Array.isArray(actions) ? actions : [actions];
+    return this;
+};
+
+/**
+ * Swipe actions revealed on the trailing (right) side — mobile swipe gesture.
+ * @param {NdChild[]} actions
+ * @returns {this}
+ */
+ListItem.prototype.swipeTrailing = function(actions) {
+    this.$description.swipeTrailing = Array.isArray(actions) ? actions : [actions];
+    return this;
+};
+
+/**
+ * @param {Function} handler
+ * @returns {this}
+ */
+ListItem.prototype.onClick = function(handler) {
+    this.on('click', handler);
     return this;
 };

package/src/components/list/index.js

@@ -1,10 +1,12 @@
 import List from './List';
 import ListItem from './ListItem';
 import ListGroup from './ListGroup';
+import ListDivider from './ListDivider';
 
 
-export default {
+export {
     List,
     ListItem,
     ListGroup,
+    ListDivider,
 };

package/src/components/list/types/List.d.ts

@@ -1,43 +1,56 @@
-import type { ValidChild } from '../../../../types/elements';
-import type { ObservableItem } from '../../../../types/observable';
-import type { BaseComponent } from '../../BaseComponent';
-import type { ListItemInterface } from './ListItem';
+import type { ValidChild }      from '../../../../types/elements';
+import type { ObservableItem, ObservableArray } from '../../../../types/observable';
 import type { GlobalAttributes } from '../../../../types/globals';
+import type { ListItemInterface } from './ListItem';
+import type { ListGroupInterface } from './ListGroup';
+import type { ListDividerInterface } from './ListDivider';
 
 export type ListDescription = {
-        selectable: boolean;
-        multiSelect: boolean;
-        selectedValues: ObservableItem<unknown[]> | null;
-        inset: boolean;
-        divider: boolean;
-        data: unknown | null;
-        render: ((desc: ListDescription, instance: ListInterface) => ValidChild) | null;
-        selectByCheckbox: boolean;
-        selectByClick: boolean;
-        loopOnKeyboard: boolean;
-        props: GlobalAttributes;
-    };
-
-export interface ListInterface extends BaseComponent {
-    selectable(selectable?: boolean): this;
-    selectByClick(): void;
-    selectByCheckbox(): void;
-    multiSelect(multi?: boolean): this;
-    selectedValuesModel(observable: ObservableItem<unknown[]>): this;
-    inset(inset?: boolean): this;
+    selectable:       ObservableItem<boolean>;
+    multiSelect:      ObservableItem<boolean>;
+    selectedValues:   ObservableArray<unknown>;
+    inset:            ObservableItem<number>;
+    divider:          boolean;
+    items:            ObservableArray<unknown>;
+    render:           ((desc: ListDescription, instance: ListInterface) => ValidChild) | null;
+    selectByCheckbox: ObservableItem<boolean>;
+    selectByClick:    ObservableItem<boolean>;
+    loopOnKeyboard:   ObservableItem<boolean>;
+    props:            GlobalAttributes;
+};
+
+export interface ListInterface {
+    $description: ListDescription;
+
+    // HasListItem
+    selectable(selectable?: boolean | ObservableItem<boolean>): this;
+    selectByClick(): this;
+    selectByCheckbox(): this;
+    multiSelect(multi?: boolean | ObservableItem<boolean>): this;
+    selectInto(list: ObservableArray<unknown> | unknown[]): this;
+    selectedValuesModel(observable: ObservableArray<unknown> | ObservableItem<unknown[]>): this;
+    loopOnKeyboard(loopOnKeyboard: boolean): this;
+    add(item: ListItemInterface | ListGroupInterface | ListDividerInterface): this;
+    item(label: ValidChild, iconOrBuilder?: ValidChild | ((item: ListItemInterface) => void), builder?: (item: ListItemInterface) => void): this;
+    group(label: ValidChild, iconOrBuilder?: ValidChild | ((group: ListGroupInterface) => void), builder?: (group: ListGroupInterface) => void): this;
+    divider(): this;
+    from(source: ObservableArray<unknown> | unknown[], builder: (item: unknown) => ListItemInterface | ListGroupInterface): this;
+
+    // Own methods
+    inset(inset?: number): this;
     withDivider(divider?: boolean): this;
     data(data: unknown): this;
     onItemClick(handler: (item: ListItemInterface, event: MouseEvent) => void): this;
     onItemSelect(handler: (item: ListItemInterface) => void): this;
-    render(template: (description: ListDescription, instance: ListInterface) => ValidChild): this;
-}
 
+    // HasEventEmitter
+    on(event: string, handler: (...args: unknown[]) => void): this;
+    emit(event: string, ...args: unknown[]): void;
+    hasListeners(event: string): boolean;
+}
 
-export declare function List(config?: Record<string, unknown>): ListInterface;
+export declare function List(props?: GlobalAttributes): ListInterface;
 export declare namespace List {
-
-
     function use(template: (description: ListDescription, instance: ListInterface) => ValidChild): void;
-
-
-}
+    let defaultTemplate: ((description: ListDescription, instance: ListInterface) => ValidChild) | null;
+}

package/src/components/list/types/ListDivider.ts

@@ -0,0 +1,16 @@
+import type { ValidChild }      from '../../../../types/elements';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type ListDividerDescription = {
+    props: GlobalAttributes;
+};
+
+export interface ListDividerInterface {
+    $description: ListDividerDescription;
+}
+
+export declare function ListDivider(props?: GlobalAttributes): ListDividerInterface;
+export declare namespace ListDivider {
+    function use(template: (description: ListDividerDescription, instance: ListDividerInterface) => ValidChild): void;
+    let defaultTemplate: ((description: ListDividerDescription, instance: ListDividerInterface) => ValidChild) | null;
+}

package/src/components/list/types/ListGroup.d.ts

@@ -1,37 +1,59 @@
-import type { ValidChild } from '../../../../types/elements';
-import type { ObservableItem } from '../../../../types/observable';
-import type { BaseComponent } from '../../BaseComponent';
+import type { ValidChild }      from '../../../../types/elements';
+import type { ObservableItem, ObservableArray } from '../../../../types/observable';
 import type { GlobalAttributes } from '../../../../types/globals';
+import type { ListItemInterface } from './ListItem';
+import type { ListDividerInterface } from './ListDivider';
 
 export type ListGroupDescription = {
-        header: ValidChild | null;
-        footer: ValidChild | null;
-        items: unknown[];
-        inset: boolean;
-        data: unknown | null;
-        renderHeader: ((desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild) | null;
-        renderFooter: ((desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild) | null;
-        render: ((desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild) | null;
-        props: GlobalAttributes;
-    };
-
-export interface ListGroupInterface extends BaseComponent {
-    header(header: ValidChild): this;
-    title(title: ValidChild): this;
-    footer(footer: ValidChild): this;
-    inset(inset?: boolean): this;
+    label:                  ValidChild;
+    icon:                   ValidChild | null;
+    items:                  ObservableArray<unknown>;
+    render:                 ((desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild) | null;
+    collapsable:            boolean;
+    collapsed:              ObservableItem<boolean> | null;
+    collapsableOpenedIcon:  ValidChild | null;
+    collapsableClosedIcon:  ValidChild | null;
+    visibility:             ObservableItem<boolean>;
+    selectable:             ObservableItem<boolean>;
+    multiSelect:            ObservableItem<boolean>;
+    selectedValues:         ObservableArray<unknown>;
+    selectByCheckbox:       ObservableItem<boolean>;
+    selectByClick:          ObservableItem<boolean>;
+    loopOnKeyboard:         ObservableItem<boolean>;
+    props:                  GlobalAttributes;
+};
+
+export interface ListGroupInterface {
+    $description: ListGroupDescription;
+
+    // Own methods
+    icon(icon: ValidChild): this;
+    collapsable(mode?: boolean, openedIcon?: ValidChild, closedIcon?: ValidChild): this;
+    collapsed(mode?: boolean): this;
+    visibility(mode: boolean | ObservableItem<boolean>): this;
     data(data: unknown): this;
-    renderHeader(renderFn: (desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild): this;
-    renderFooter(renderFn: (desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild): this;
-    render(renderFn: (desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild): this;
-}
 
+    // HasListItem
+    selectable(selectable?: boolean | ObservableItem<boolean>): this;
+    selectByClick(): this;
+    selectByCheckbox(): this;
+    multiSelect(multi?: boolean | ObservableItem<boolean>): this;
+    selectInto(list: ObservableArray<unknown> | unknown[]): this;
+    loopOnKeyboard(loopOnKeyboard: boolean): this;
+    add(item: ListItemInterface | ListGroupInterface | ListDividerInterface): this;
+    item(label: ValidChild, iconOrBuilder?: ValidChild | ((item: ListItemInterface) => void), builder?: (item: ListItemInterface) => void): this;
+    group(label: ValidChild, iconOrBuilder?: ValidChild | ((group: ListGroupInterface) => void), builder?: (group: ListGroupInterface) => void): this;
+    divider(): this;
+    from(source: ObservableArray<unknown> | unknown[], builder: (item: unknown) => ListItemInterface | ListGroupInterface): this;
+
+    // HasEventEmitter
+    on(event: string, handler: (...args: unknown[]) => void): this;
+    emit(event: string, ...args: unknown[]): void;
+    hasListeners(event: string): boolean;
+}
 
-export declare function ListGroup(label?: ValidChild, config?: Record<string, unknown>): ListGroupInterface;
+export declare function ListGroup(label: ValidChild, props?: GlobalAttributes): ListGroupInterface;
 export declare namespace ListGroup {
-
-
     function use(template: (description: ListGroupDescription, instance: ListGroupInterface) => ValidChild): void;
-
-
-}
+    let defaultTemplate: ((description: ListGroupDescription, instance: ListGroupInterface) => ValidChild) | null;
+}

package/src/components/list/types/ListItem.d.ts

@@ -1,42 +1,52 @@
-import type { ValidChild } from '../../../../types/elements';
-import type { ObservableItem } from '../../../../types/observable';
-import type { BaseComponent } from '../../BaseComponent';
+import type { ValidChild }      from '../../../../types/elements';
+import type { ObservableItem }  from '../../../../types/observable';
 import type { GlobalAttributes } from '../../../../types/globals';
 
 export type ListItemDescription = {
-        content: ValidChild | null;
-        icon: ValidChild | null;
-        trailing: ValidChild | null;
-        leading: ValidChild | null;
-        disabled: boolean;
-        selectable: boolean;
-        selected: boolean | ObservableItem<boolean>;
-        divider: boolean;
-        data: unknown | null;
-        render: ((desc: ListItemDescription, instance: ListItemInterface) => ValidChild) | null;
-        props: GlobalAttributes;
-    };
+    label:          ValidChild | null;
+    subtitle:       ValidChild | null;
+    icon:           ValidChild | null;
+    trailing:       ValidChild | null;
+    value:          unknown;
+    data:           unknown | null;
+    key:            string | null;
+    disabled:       ObservableItem<boolean> | null;
+    selected:       ObservableItem<boolean> | null;
+    visibility:     ObservableItem<boolean> | null;
+    isSelectedIcon: ValidChild | null;
+    swipeLeading:   ValidChild[];
+    swipeTrailing:  ValidChild[];
+    render:         ((desc: ListItemDescription, instance: ListItemInterface) => ValidChild) | null;
+    props:          GlobalAttributes;
+};
+
+export interface ListItemInterface {
+    $description: ListItemDescription;
+    $parent:      unknown;
 
-export interface ListItemInterface extends BaseComponent {
-    content(content: ValidChild): this;
     label(label: ValidChild): this;
+    subtitle(subtitle: ValidChild): this;
     icon(icon: ValidChild): this;
-    leading(leading: ValidChild): this;
     trailing(trailing: ValidChild): this;
-    disabled(disabled?: boolean): this;
-    selectable(): this;
-    selected(selected?: boolean | ObservableItem<boolean>): this;
-    divider(show?: boolean): this;
+    value(value: unknown): this;
     data(data: unknown): this;
-    render(renderFn: (desc: ListItemDescription, instance: ListItemInterface) => ValidChild): this;
+    key(key: string): this;
+    disabled(disabled?: boolean | ObservableItem<boolean>): this;
+    selected(selected?: boolean | ObservableItem<boolean>): this;
+    visibility(mode: boolean | ObservableItem<boolean>): this;
+    isSelectedIcon(icon: ValidChild): this;
+    swipeLeading(actions: ValidChild | ValidChild[]): this;
+    swipeTrailing(actions: ValidChild | ValidChild[]): this;
+    onClick(handler: (item: ListItemInterface, event: MouseEvent) => void): this;
+
+    // HasEventEmitter
+    on(event: string, handler: (...args: unknown[]) => void): this;
+    emit(event: string, ...args: unknown[]): void;
+    hasListeners(event: string): boolean;
 }
 
-
-export declare function ListItem(content?: ValidChild, config?: Record<string, unknown>): ListItemInterface;
+export declare function ListItem(props?: GlobalAttributes): ListItemInterface;
 export declare namespace ListItem {
-
-
     function use(template: (description: ListItemDescription, instance: ListItemInterface) => ValidChild): void;
-
-
-}
+    let defaultTemplate: ((description: ListItemDescription, instance: ListItemInterface) => ValidChild) | null;
+}

package/src/components/spacer/Spacer.js

@@ -1,6 +1,6 @@
 import BaseComponent from '../BaseComponent';
 
-export function Spacer(props = {}) {
+export default function Spacer(props = {}) {
     if (!(this instanceof Spacer)) {
         return new Spacer(props);
     }

package/src/core/data/ObservableResource.js

@@ -126,6 +126,11 @@ ObservableResource.prototype.$runWithoutAbortController = function(isRefetch = f
         });
 };
 
+ObservableResource.prototype.into = function($observable) {
+    this.data = $observable;
+    return this;
+};
+
 ObservableResource.prototype.$run = function(isRefetch = false) {
     const needsSignal = this.$fn.length > this.$dependencies.length;
     if(needsSignal) {

package/src/core/data/observable-helpers/observable.prototypes.js

@@ -119,6 +119,8 @@ ObservableItem.prototype.select = ObservableItem.prototype.check;
  * // Reacts to locale changes automatically
  * Store.setLocale('en-US');
  */
+
+
 ObservableItem.prototype.format = function(type, options = {}) {
     const self = this;
 

package/src/core/elements/content-formatter.js

@@ -30,12 +30,26 @@ export const P = HtmlElementWrapper('p');
  */
 export const Paragraph = P;
 
+/**
+ * Creates a `<i>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
+export const I = HtmlElementWrapper('i');
+export const Italic = I;
+
 /**
  * Creates a `<strong>` element.
  * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
  */
 export const Strong = HtmlElementWrapper('strong');
 
+/**
+ * Creates a `<strong>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
+export const B = HtmlElementWrapper('b');
+export const Bold = B;
+
 /**
  * Creates a `<h1>` element.
  * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
@@ -76,7 +90,7 @@ export const H6 = HtmlElementWrapper('h6');
  * Creates a `<br>` element.
  * @type {function(GlobalAttributes=): HTMLBRElement}
  */
-export const Br = HtmlElementWrapper('br');
+export const Br = HtmlElementWrapper('br', null, true);
 
 /**
  * Creates an `<a>` element.
@@ -106,7 +120,7 @@ export const Blockquote = HtmlElementWrapper('blockquote');
  * Creates an `<hr>` element.
  * @type {function(GlobalAttributes=): HTMLHRElement}
  */
-export const Hr = HtmlElementWrapper('hr');
+export const Hr = HtmlElementWrapper('hr', null, true);
 
 /**
  * Creates an `<em>` element.

package/src/core/elements/form.js

@@ -44,7 +44,7 @@ export const Form = HtmlElementWrapper('form', (el) => {
  * Creates an `<input>` element.
  * @type {function(InputAttributes=): HTMLInputElement}
  */
-export const Input = HtmlElementWrapper('input');
+export const Input = HtmlElementWrapper('input', null, true);
 
 /**
  * Creates a `<textarea>` element.