native-document 1.0.166 → 1.0.169

package/src/components/list/List.js

@@ -1,12 +1,12 @@
-
 import BaseComponent from '../BaseComponent';
 import HasEventEmitter from '../../core/utils/HasEventEmitter';
 import HasItems from '../$traits/has-items/HasItems';
+import { $ } from '../../core/data/Observable';
+import HasListItem from './HasListItem';
 
 /**
  * Flexible list container supporting single/multi selection, checkbox or click-to-select modes, dividers, and inset styling.
  *
- *
  * @example
  * const list = new List()
  *     .selectable(true)
@@ -20,27 +20,26 @@ import HasItems from '../$traits/has-items/HasItems';
  * });
  *
  * @constructor
- * @param {GlobalAttributes} [config]
+ * @param {GlobalAttributes} [props]
  */
-export default function List(config = {}) {
-    if(!(this instanceof List)) {
-        return new List(config);
+export default function List(props = {}) {
+    if (!(this instanceof List)) {
+        return new List(props);
     }
 
     this.$description = {
-        selectable: false,
-        multiSelect: false,
-        selectedValues: null,
-        inset: false,
-        divider: false,
-        data: null,
-        render: null,
-        selectByCheckbox: false,
-        selectByClick: false,
-        loopOnKeyboard: true,
-        ...config,
+        selectable:       $(false),
+        multiSelect:      $(false),
+        selectedValues:   $.array(),
+        inset:            $(0),
+        divider:          false,
+        items:            $.array(),
+        render:           null,
+        selectByCheckbox: $(false),
+        selectByClick:    $(false),
+        loopOnKeyboard:   $(false),
+        props,
     };
-
 }
 
 List.defaultTemplate = null;
@@ -48,71 +47,30 @@ List.defaultTemplate = null;
 /**
  * Registers the render template for List.
  * @param {(description: {
- *     selectable: boolean,
- *     multiSelect: boolean,
- *     selectedValues: Observable<*[]>|null,
- *     inset: boolean,
- *     divider: boolean,
- *     data: *|null,
- *     render: ((desc: *, instance: List) => NdChild)|null,
- *     selectByCheckbox: boolean,
- *     selectByClick: boolean,
- *     loopOnKeyboard: boolean,
- *     props: GlobalAttributes,
+ *     selectable:       ObservableItem<boolean>,
+ *     multiSelect:      ObservableItem<boolean>,
+ *     selectedValues:   ObservableArray<*>,
+ *     inset:            ObservableItem<number>,
+ *     divider:          boolean,
+ *     data:             *|null,
+ *     render:           ((desc: *, instance: List) => NdChild)|null,
+ *     selectByCheckbox: ObservableItem<boolean>,
+ *     selectByClick:    ObservableItem<boolean>,
+ *     loopOnKeyboard:   ObservableItem<boolean>,
+ *     items:            ObservableArray<*>,
+ *     props:            GlobalAttributes,
  * }, instance: List) => NdChild} template
  */
 List.use = function(template) {
-    List.defaultTemplate = template.list;
+    List.defaultTemplate = template;
 };
 
 BaseComponent.extends(List);
-BaseComponent.use(List, HasItems, HasEventEmitter);
-
-List.defaultTemplate = null;
-
-List.use = function(template) {
-    List.defaultTemplate = template.list;
-};
-
-/**
- * @param {*} [selectable]
- * @returns {this}
- */
-List.prototype.selectable = function(selectable = true) {
-    this.$description.selectable = selectable;
-    return this;
-};
-
-/**
- * @returns {this}
- */
-List.prototype.selectByClick = function() {
-    this.$description.selectByClick = true;
-    this.$description.selectByCheckbox = false;
-    return this;
-};
-
-/**
- * @returns {this}
- */
-List.prototype.selectByCheckbox = function() {
-    this.$description.selectByClick = false;
-    this.$description.selectByCheckbox = true;
-    return this;
-};
+BaseComponent.use(List, HasItems, HasEventEmitter, HasListItem);
 
-/**
- * @param {*} [multi]
- * @returns {this}
- */
-List.prototype.multiSelect = function(multi = true) {
-    this.$description.multiSelect = multi;
-    this.$description.selectable = true;
-    return this;
-};
 
 /**
- * @param {Observable<*[]>} observable
+ * @param {ObservableArray<*>|Observable<*[]>} observable
  * @returns {this}
  */
 List.prototype.selectedValuesModel = function(observable) {
@@ -121,41 +79,17 @@ List.prototype.selectedValuesModel = function(observable) {
 };
 
 /**
- * @param {number} [inset]
+ * Inset padding in px applied to all items.
+ * @param {number} [inset=0]
  * @returns {this}
  */
-List.prototype.inset = function(inset = true) {
-    this.$description.inset = inset;
+List.prototype.inset = function(inset = 0) {
+    this.$description.inset.set(inset);
     return this;
 };
 
 /**
- * @returns {this}
- */
-List.prototype.next = function() {
-    // TODO:
-    return this;
-};
-
-/**
- * @returns {this}
- */
-List.prototype.preview = function() {
-    // TODO:
-    return this;
-};
-
-/**
- * @param {*} loopOnKeyboard
- * @returns {this}
- */
-List.prototype.loopOnKeyboard = function(loopOnKeyboard) {
-    this.$description.loopOnKeyboard = loopOnKeyboard;
-    return this;
-};
-
-/**
- * @param {*} [divider]
+ * @param {boolean} [divider=true]
  * @returns {this}
  */
 List.prototype.withDivider = function(divider = true) {
@@ -168,12 +102,12 @@ List.prototype.withDivider = function(divider = true) {
  * @returns {this}
  */
 List.prototype.data = function(data) {
-    this.$description.data = data;
+    this.$description.items = data;
     return this;
 };
 
 /**
- * @param {(item: ListItem, event: MouseEvent) => void} handler
+ * @param {(item: *, event: MouseEvent) => void} handler
  * @returns {this}
  */
 List.prototype.onItemClick = function(handler) {
@@ -182,10 +116,10 @@ List.prototype.onItemClick = function(handler) {
 };
 
 /**
- * @param {(item: ListItem) => void} handler
+ * @param {(item: *) => void} handler
  * @returns {this}
  */
 List.prototype.onItemSelect = function(handler) {
     this.on('itemSelect', handler);
     return this;
-};
+};

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;
-};