native-document 1.0.166 → 1.0.168

package/src/components/list/ListDivider.js

@@ -0,0 +1,39 @@
+import BaseComponent from '../BaseComponent';
+
+/**
+ * Visual separator between items in a List.
+ *
+ * @example
+ * List()
+ *     .item('Dashboard')
+ *     .divider()
+ *     .item('Settings')
+ *
+ * ListDivider.use((description, instance) => {
+ *     return Li({ class: 'list-divider', role: 'separator' });
+ * });
+ *
+ * @constructor
+ * @param {GlobalAttributes} [props={}]
+ */
+export default function ListDivider(props = {}) {
+    if (!(this instanceof ListDivider)) {
+        return new ListDivider(props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = { props };
+}
+
+BaseComponent.extends(ListDivider);
+
+ListDivider.defaultTemplate = null;
+
+/**
+ * Registers the render template for ListDivider.
+ * @param {(description: { props: GlobalAttributes }, instance: ListDivider) => NdChild} template
+ */
+ListDivider.use = function(template) {
+    ListDivider.defaultTemplate = template;
+};

package/src/components/list/ListGroup.js

@@ -1,54 +1,79 @@
 import BaseComponent from '../BaseComponent';
+import HasEventEmitter from '../../core/utils/HasEventEmitter';
 import HasItems from '../$traits/has-items/HasItems';
+import HasListItem from './HasListItem';
+import { $ } from '../../core/data/Observable';
 
 /**
- * Groups ListItem instances under a header/footer inside a List.
- *
+ * A collapsible group of ListItems inside a List. Can hold items, dividers, and nested groups.
  *
  * @example
- * const group = new ListGroup(Span('Favourites'))
- *     .inset(true)
- *     .renderHeader((desc, instance) => H3(desc.header));
+ * ListGroup('Workspace')
+ *     .icon(FolderIcon())
+ *     .collapsable()
+ *     .item('Dashboard', DashboardIcon())
+ *     .item('Analytics', ChartIcon());
+ *
+ * // From data
+ * ListGroup('Reports')
+ *     .from(reports, (report) =>
+ *         ListItem().label(report.name).value(report.id)
+ *     );
+ *
+ * ListGroup.use((description, instance) => {
+ *     return Div({ class: 'list-group' });
+ * });
  *
  * @constructor
- * @param {NdChild} [label]
- * @param {GlobalAttributes} [config={}]
+ * @param {NdChild} label
+ * @param {GlobalAttributes} [props={}]
  */
-export default function ListGroup(label, config = {}) {
-    if(!(this instanceof ListGroup)) {
-        return new ListGroup(label, config);
+export default function ListGroup(label, props = {}) {
+    if (!(this instanceof ListGroup)) {
+        return new ListGroup(label, props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
-        header: label || null,
-        footer: null,
-        items: [],
-        inset: false,
-        data: null,
-        renderHeader: null,
-        renderFooter: null,
-        render: null,
-        ...config,
+        selectable:       $(false),
+        multiSelect:      $(false),
+        selectedValues:   $.array(),
+        label:       label,
+        icon:        null,
+        items:       $.array(),
+        render:      null,
+        collapsable: false,
+        collapsed:   null,
+        visibility:  $(true),
+        selectByCheckbox: $(false),
+        selectByClick:    $(false),
+        loopOnKeyboard:   $(false),
+        props,
     };
 }
 
 BaseComponent.extends(ListGroup);
-BaseComponent.use(ListGroup, HasItems);
+BaseComponent.use(ListGroup, HasItems, HasEventEmitter, HasListItem);
+
+HasListItem.components.ListGroup = ListGroup;
 
 ListGroup.defaultTemplate = null;
+ListGroup.prototype.__$ListInstance = true;
 
 /**
  * Registers the render template for ListGroup.
  * @param {(description: {
- *     header: NdChild|null,
- *     footer: NdChild|null,
- *     items: *[],
- *     inset: boolean,
- *     data: *|null,
- *     renderHeader: ((desc: *, instance: ListGroup) => NdChild)|null,
- *     renderFooter: ((desc: *, instance: ListGroup) => NdChild)|null,
- *     render: ((desc: *, instance: ListGroup) => NdChild)|null,
- *     props: GlobalAttributes,
+ *     label:       NdChild,
+ *     icon:        NdChild|null,
+ *     items:       ObservableArray<ListItem|ListGroup|ListDivider>,
+ *     itemBuilder: (item: *) => ListItem|ListGroup|ListDivider,
+ *     data:        *|null,
+ *     render:      ((desc: *, instance: ListGroup) => NdChild)|null,
+ *     collapsable: boolean,
+ *     collapsed:   ObservableItem<boolean>|null,
+ *     visibility:  ObservableItem<boolean>,
+ *     props:       GlobalAttributes,
  * }, instance: ListGroup) => NdChild} template
  */
 ListGroup.use = function(template) {
@@ -56,37 +81,47 @@ ListGroup.use = function(template) {
 };
 
 /**
- * @param {NdChild} header
+ * @param {NdChild} icon
  * @returns {this}
  */
-ListGroup.prototype.header = function(header) {
-    this.$description.header = header;
+ListGroup.prototype.icon = function(icon) {
+    this.$description.icon = icon;
     return this;
 };
 
 /**
- * @param {NdChild} title
+ * @param {boolean} [mode=true]
+ * @param {NdChild} [openedIcon]
+ * @param {NdChild} [closedIcon]
  * @returns {this}
  */
-ListGroup.prototype.title = function(title) {
-    return this.header(title);
+ListGroup.prototype.collapsable = function(mode = true, openedIcon, closedIcon) {
+    this.$description.collapsable = mode;
+    this.$description.collapsed   = this.$description.collapsed || $(false);
+    this.$description.collapsableOpenedIcon = openedIcon || null;
+    this.$description.collapsableClosedIcon = closedIcon || null;
+    return this;
 };
 
 /**
- * @param {NdChild} footer
+ * @param {boolean} [mode=true]
  * @returns {this}
  */
-ListGroup.prototype.footer = function(footer) {
-    this.$description.footer = footer;
+ListGroup.prototype.collapsed = function(mode = true) {
+    if (!this.$description.collapsed) {
+        this.$description.collapsed = $(mode);
+    } else {
+        this.$description.collapsed.set(mode);
+    }
     return this;
 };
 
 /**
- * @param {number} [inset]
+ * @param {boolean|Observable<boolean>} mode
  * @returns {this}
  */
-ListGroup.prototype.inset = function(inset = true) {
-    this.$description.inset = inset;
+ListGroup.prototype.visibility = function(mode) {
+    this.$description.visibility = BaseComponent.obs(mode);
     return this;
 };
 
@@ -98,21 +133,3 @@ ListGroup.prototype.data = function(data) {
     this.$description.data = data;
     return this;
 };
-
-/**
- * @param {(desc: *, instance: *) => NdChild} renderFn
- * @returns {this}
- */
-ListGroup.prototype.renderHeader = function(renderFn) {
-    this.$description.renderHeader = renderFn;
-    return this;
-};
-
-/**
- * @param {(desc: *, instance: *) => NdChild} renderFn
- * @returns {this}
- */
-ListGroup.prototype.renderFooter = function(renderFn) {
-    this.$description.renderFooter = renderFn;
-    return this;
-};

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/ListItem.d.ts

@@ -1,42 +1,53 @@
-import type { ValidChild } from '../../../../types/elements';
-import type { ObservableItem } from '../../../../types/observable';
-import type { BaseComponent } from '../../BaseComponent';
-import type { GlobalAttributes } from '../../../../types/globals';
+import { GlobalAttributes, Observable } from '../../../../types/globals';
+import { ValidChild } from '../../../../types/elements';
+import { ObservableArray } from '../../../../types/observable';
+
+export interface ListItemDescription {
+    label:          ValidChild | null;
+    subtitle:       ValidChild | null;
+    icon:           ValidChild | null;
+    trailing:       ValidChild | null;
+    value:          unknown;
+    data:           unknown | null;
+    key:            string | null;
+    disabled:       Observable<boolean> | null;
+    selected:       Observable<boolean> | null;
+    visibility:     Observable<boolean> | null;
+    isSelectedIcon: ValidChild | null;
+    swipeLeading:   ValidChild[];
+    swipeTrailing:  ValidChild[];
+    render:         ((desc: ListItemDescription, instance: ListItem) => ValidChild) | null;
+    props:          GlobalAttributes;
+}
+
+export declare class ListItem {
+    $description: ListItemDescription;
+    $parent: unknown;
+
+    constructor(props?: GlobalAttributes);
 
-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;
-    };
+    static use(template: (description: ListItemDescription, instance: ListItem) => ValidChild): void;
+    static defaultTemplate: ((description: ListItemDescription, instance: ListItem) => ValidChild) | null;
 
-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 | Observable<boolean>): this;
+    selected(selected?: boolean | Observable<boolean>): this;
+    visibility(mode: boolean | Observable<boolean>): this;
+    isSelectedIcon(icon: ValidChild): this;
+    swipeLeading(actions: ValidChild | ValidChild[]): this;
+    swipeTrailing(actions: ValidChild | ValidChild[]): this;
+    onClick(handler: (item: ListItem, 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 namespace ListItem {
-
-
-    function use(template: (description: ListItemDescription, instance: ListItemInterface) => ValidChild): void;
-
-
-}
+export declare function ListItem(props?: GlobalAttributes): ListItem;

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;