native-document 1.0.15 → 1.0.16-8.2

package/src/components/index.d.ts

@@ -0,0 +1,160 @@
+// =============================================================================
+// NativeDocument Components — index.d.ts
+// Barrel export for all component type definitions.
+// =============================================================================
+
+// --- Base & Traits -----------------------------------------------------------
+export type { BaseComponent } from './BaseComponent';
+export type { HasDraggable } from './$traits/has-draggable/HasDraggable';
+export type { HasItems } from './$traits/has-items/HasItems';
+export type { HasPosition } from './$traits/has-position/HasPosition';
+export type { HasFullPosition } from './$traits/has-position/HasFullPosition';
+export type { HasResizable } from './$traits/has-resizable/HasResizable';
+export type { HasValidation } from './$traits/has-validation/HasValidation';
+
+// --- Accordion ---------------------------------------------------------------
+export type { Accordion, AccordionInterface, AccordionDescription } from './accordion/types/Accordion';
+export type { AccordionItem, AccordionItemInterface, AccordionItemDescription } from './accordion/types/AccordionItem';
+
+// --- Alert -------------------------------------------------------------------
+export type { Alert, AlertInterface, AlertDescription } from './alert/types/Alert';
+
+// --- Avatar ------------------------------------------------------------------
+export type { Avatar, AvatarInterface, AvatarDescription } from './avatar/types/Avatar';
+export type { AvatarGroup, AvatarGroupInterface, AvatarGroupDescription } from './avatar/types/AvatarGroup';
+
+// --- Badge -------------------------------------------------------------------
+export type { Badge, BadgeInterface, BadgeDescription } from './badge/types/Badge';
+
+// --- Breadcrumb --------------------------------------------------------------
+export type { BreadCrumb, BreadCrumbInterface, BreadCrumbDescription } from './breadcrumb/types/BreadCrumb';
+
+// --- Button ------------------------------------------------------------------
+export type { Button, ButtonInterface, ButtonDescription } from './button/types/Button';
+
+// --- Card --------------------------------------------------------------------
+export type { Card, CardInterface, CardDescription } from './card/types/Card';
+
+// --- Context Menu ------------------------------------------------------------
+export type { ContextMenu, ContextMenuInterface, ContextMenuDescription } from './context-menu/types/ContextMenu';
+export type { ContextMenuGroup, ContextMenuGroupInterface } from './context-menu/types/ContextMenuGroup';
+export type { ContextMenuItem, ContextMenuItemInterface } from './context-menu/types/ContextMenuItem';
+
+// --- Divider -----------------------------------------------------------------
+export type { Divider, DividerInterface, DividerDescription } from './divider/types/Divider';
+
+// --- Dropdown ----------------------------------------------------------------
+export type { Dropdown, DropdownInterface, DropdownDescription } from './dropdown/types/Dropdown';
+export type { DropdownDivider, DropdownDividerInterface } from './dropdown/types/DropdownDivider';
+export type { DropdownGroup, DropdownGroupInterface } from './dropdown/types/DropdownGroup';
+export type { DropdownItem, DropdownItemInterface, DropdownItemDescription } from './dropdown/types/DropdownItem';
+export type { DropdownTrigger, DropdownTriggerInterface, DropdownTriggerDescription } from './dropdown/types/DropdownTrigger';
+
+// --- Form --------------------------------------------------------------------
+export type { FormControl, FormControlInterface, FormControlDescription } from './form/types/FormControl';
+export type { Field, FieldInterface, FieldDescription } from './form/types/Field';
+export type { FieldCollection, FieldCollectionInterface, FieldCollectionDescription } from './form/types/FieldCollection';
+export type { StringField, StringFieldInterface } from './form/types/fields/StringField';
+export type { NumberField, NumberFieldInterface } from './form/types/fields/NumberField';
+export type { EmailField, EmailFieldInterface } from './form/types/fields/EmailField';
+export type { PasswordField, PasswordFieldInterface } from './form/types/fields/PasswordField';
+export type { TelField, TelFieldInterface } from './form/types/fields/TelField';
+export type { UrlField, UrlFieldInterface } from './form/types/fields/UrlField';
+export type { TextAreaField, TextAreaFieldInterface } from './form/types/fields/TextAreaField';
+export type { CheckboxField, CheckboxFieldInterface } from './form/types/fields/CheckboxField';
+export type { CheckboxGroupField, CheckboxGroupFieldInterface } from './form/types/fields/CheckboxGroupField';
+export type { RadioField, RadioFieldInterface } from './form/types/fields/RadioField';
+export type { SelectField, SelectFieldInterface } from './form/types/fields/SelectField';
+export type { AutocompleteField, AutocompleteFieldInterface } from './form/types/fields/AutocompleteField';
+export type { HiddenField, HiddenFieldInterface } from './form/types/fields/HiddenField';
+export type { ColorField, ColorFieldInterface } from './form/types/fields/ColorField';
+export type { DateField, DateFieldInterface } from './form/types/fields/DateField';
+export type { TimeField, TimeFieldInterface } from './form/types/fields/TimeField';
+export type { RangeField, RangeFieldInterface } from './form/types/fields/RangeField';
+export type { SearchField, SearchFieldInterface } from './form/types/fields/SearchField';
+export type { FileField, FileFieldInterface } from './form/types/fields/FileField';
+export type { ImageField, ImageFieldInterface } from './form/types/fields/ImageField';
+export type { FileAvatarMode, FileAvatarModeInterface, FileAvatarModeDescription } from './form/types/fields/FileAvatarMode';
+export type { FileDropzoneMode, FileDropzoneModeInterface, FileDropzoneModeDescription } from './form/types/fields/FileDropzoneMode';
+export type { FileItemPreview, FileItemPreviewInterface, FileItemPreviewDescription } from './form/types/fields/FileItemPreview';
+export type { FileNativeMode, FileNativeModeInterface, FileNativeModeDescription } from './form/types/fields/FileNativeMode';
+export type { FileUploadButtonMode, FileUploadButtonModeInterface, FileUploadButtonModeDescription } from './form/types/fields/FileUploadButtonMode';
+export type { FileWallMode, FileWallModeInterface, FileWallModeDescription } from './form/types/fields/FileWallMode';
+
+// --- List --------------------------------------------------------------------
+export type { List, ListInterface, ListDescription } from './list/types/List';
+export type { ListGroup, ListGroupInterface, ListGroupDescription } from './list/types/ListGroup';
+export type { ListItem, ListItemInterface, ListItemDescription } from './list/types/ListItem';
+
+// --- Menu --------------------------------------------------------------------
+export type { Menu, MenuInterface, MenuDescription } from './menu/types/Menu';
+export type { MenuDivider, MenuDividerInterface, MenuDividerDescription } from './menu/types/MenuDivider';
+export type { MenuGroup, MenuGroupInterface, MenuGroupDescription } from './menu/types/MenuGroup';
+export type { MenuItem, MenuItemInterface, MenuItemDescription } from './menu/types/MenuItem';
+export type { MenuLink, MenuLinkInterface } from './menu/types/MenuLink';
+
+// --- Modal -------------------------------------------------------------------
+export type { Modal, ModalInterface, ModalDescription } from './modal/types/Modal';
+
+// --- Pagination --------------------------------------------------------------
+export type { Pagination, PaginationInterface, PaginationDescription } from './pagination/types/Pagination';
+
+// --- Popover -----------------------------------------------------------------
+export type { Popover, PopoverInterface, PopoverDescription } from './popover/types/Popover';
+export type { PopoverFooter, PopoverFooterInterface, PopoverFooterDescription } from './popover/types/PopoverFooter';
+export type { PopoverHeader, PopoverHeaderInterface, PopoverHeaderDescription } from './popover/types/PopoverHeader';
+
+// --- Progress ----------------------------------------------------------------
+export type { Progress, ProgressInterface, ProgressDescription } from './progress/types/Progress';
+
+// --- Skeleton ----------------------------------------------------------------
+export type { Skeleton, SkeletonInterface, SkeletonDescription } from './skeleton/types/Skeleton';
+
+// --- Slider ------------------------------------------------------------------
+export type { Slider, SliderInterface, SliderDescription } from './slider/types/Slider';
+
+// --- Spacer ------------------------------------------------------------------
+export type { Spacer, SpacerInterface, SpacerDescription } from './spacer/types/Spacer';
+
+// --- Spinner -----------------------------------------------------------------
+export type { Spinner, SpinnerInterface, SpinnerDescription } from './spinner/types/Spinner';
+
+// --- Splitter ----------------------------------------------------------------
+export type { Splitter, SplitterInterface, SplitterDescription } from './splitter/types/Splitter';
+export type { SplitterGutter, SplitterGutterInterface, SplitterGutterDescription } from './splitter/types/SplitterGutter';
+export type { SplitterPanel, SplitterPanelInterface, SplitterPanelDescription } from './splitter/types/SplitterPanel';
+
+// --- Stacks ------------------------------------------------------------------
+export type { Stack, StackInterface, StackDescription } from './stacks/types/Stack';
+export type { HStack, HStackInterface } from './stacks/types/HStack';
+export type { VStack, VStackInterface } from './stacks/types/VStack';
+export type { PositionStack, PositionStackInterface, PositionStackDescription } from './stacks/types/PositionStack';
+export type { AbsoluteStack, AbsoluteStackInterface } from './stacks/types/AbsoluteStack';
+export type { FixedStack, FixedStackInterface } from './stacks/types/FixedStack';
+export type { RelativeStack, RelativeStackInterface } from './stacks/types/RelativeStack';
+
+// --- Stepper -----------------------------------------------------------------
+export type { Stepper, StepperInterface, StepperDescription } from './stepper/types/Stepper';
+export type { StepperStep, StepperStepInterface, StepperStepDescription } from './stepper/types/StepperStep';
+
+// --- Switch ------------------------------------------------------------------
+export type { Switch, SwitchInterface, SwitchDescription } from './switch/types/Switch';
+
+// --- Table -------------------------------------------------------------------
+export type { Column, ColumnInterface, ColumnDescription } from './table/types/Column';
+export type { ColumnGroup, ColumnGroupInterface, ColumnGroupDescription } from './table/types/ColumnGroup';
+export type { DataTable, DataTableInterface, DataTableDescription } from './table/types/DataTable';
+export type { SimpleTable, SimpleTableInterface, SimpleTableDescription } from './table/types/SimpleTable';
+
+// --- Tabs --------------------------------------------------------------------
+export type { Tabs, TabsInterface, TabsDescription } from './tabs/types/Tabs';
+
+// --- Toast -------------------------------------------------------------------
+export type { Toast, ToastInterface, ToastDescription } from './toast/types/Toast';
+export type { ToastError, ToastErrorInterface } from './toast/types/ToastError';
+export type { ToastInfo, ToastInfoInterface } from './toast/types/ToastInfo';
+export type { ToastSuccess, ToastSuccessInterface } from './toast/types/ToastSuccess';
+export type { ToastWarning, ToastWarningInterface } from './toast/types/ToastWarning';
+
+// --- Tooltip -----------------------------------------------------------------
+export type { Tooltip, TooltipInterface, TooltipDescription } from './tooltip/types/Tooltip';

package/src/components/list/HasListItem.js

@@ -0,0 +1,171 @@
+import ListDivider from './ListDivider';
+import List from './List';
+import BaseComponent from '../BaseComponent';
+
+const EMPTY_OPTIONS = {};
+
+/**
+ * Trait that adds item/group/divider management to List and ListGroup.
+ * Mirrors the HasMenuItem pattern.
+ *
+ * @constructor
+ */
+export default function HasListItem() {}
+
+HasListItem.components = {
+    ListItem:  null,
+    ListGroup: null,
+};
+
+
+/**
+ * @param {ObservableArray<*>|*[]} list
+ * @returns {this}
+ */
+HasListItem.prototype.selectInto = function(list) {
+    this.$description.selectedValues = list;
+    return this;
+};
+
+/**
+ * @param {boolean|Observable<boolean>} [selectable=true]
+ * @returns {this}
+ */
+HasListItem.prototype.selectable = function(selectable = true) {
+    this.$description.selectable = BaseComponent.obs(selectable);
+    return this;
+};
+
+/**
+ * Select items on click. Mutually exclusive with selectByCheckbox.
+ * @returns {this}
+ */
+HasListItem.prototype.selectByClick = function() {
+    this.$description.selectByClick.set(true);
+    this.$description.selectByCheckbox.set(false);
+    return this;
+};
+
+/**
+ * Select items via a checkbox. Mutually exclusive with selectByClick.
+ * @returns {this}
+ */
+HasListItem.prototype.selectByCheckbox = function() {
+    this.$description.selectByClick.set(false);
+    this.$description.selectByCheckbox.set(true);
+    return this;
+};
+
+/**
+ * @param {boolean|Observable<boolean>} [multi=true]
+ * @returns {this}
+ */
+HasListItem.prototype.multiSelect = function(multi = true) {
+    this.$description.multiSelect = BaseComponent.obs(multi);
+    this.$description.selectable.set(true);
+    return this;
+};
+
+/**
+ * @param {boolean} loopOnKeyboard
+ * @returns {this}
+ */
+HasListItem.prototype.loopOnKeyboard = function(loopOnKeyboard) {
+    this.$description.loopOnKeyboard = loopOnKeyboard;
+    return this;
+};
+
+/**
+ * @param {ListItem|ListGroup|ListDivider} item
+ * @returns {this}
+ */
+HasListItem.prototype.add = function(item) {
+    if (item === this) {
+        return this;
+    }
+    item.$parent = this;
+    this.$description.items.push(item);
+    return this;
+};
+
+/**
+ * @param {NdChild} label
+ * @param {NdChild|((item: ListItem) => void)} [iconOrBuilder]
+ * @param {((item: ListItem) => void)} [builder]
+ * @returns {this}
+ */
+HasListItem.prototype.item = function(label, iconOrBuilder, builder) {
+    const ListItem = HasListItem.components.ListItem;
+    const item = new ListItem();
+    item.$parent = this;
+
+    item.label(label);
+
+    if (typeof iconOrBuilder === 'function') {
+        iconOrBuilder(item);
+    } else if (iconOrBuilder) {
+        item.icon(iconOrBuilder);
+        if (typeof builder === 'function') {
+            builder(item);
+        }
+    }
+
+    this.$description.items.push(item);
+    return this;
+};
+
+/**
+ * @param {NdChild} label
+ * @param {NdChild|((group: ListGroup) => void)} [iconOrBuilder]
+ * @param {((group: ListGroup) => void)} [builder]
+ * @returns {this}
+ */
+HasListItem.prototype.group = function(label, iconOrBuilder, builder) {
+    const ListGroup = HasListItem.components.ListGroup;
+    const group = new ListGroup(label);
+    group.$parent = this;
+
+    if (typeof iconOrBuilder === 'function') {
+        iconOrBuilder(group);
+    } else if (iconOrBuilder) {
+        group.icon(iconOrBuilder);
+        if (typeof builder === 'function') {
+            builder(group);
+        }
+    }
+
+    this.$description.items.push(group);
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasListItem.prototype.divider = function() {
+    const divider = new ListDivider();
+    divider.$parent = this;
+    this.$description.items.push(divider);
+    return this;
+};
+
+
+/**
+ * Populate items from a data source using a builder function.
+ * The builder receives each data item and must return a ListItem or ListGroup.
+ *
+ * @param {ObservableArray<*>|*[]} source
+ * @param {(item: *) => ListItem|ListGroup} builder
+ * @returns {this}
+ */
+HasListItem.prototype.from = function(source, builder) {
+    this.$description.items = source;
+    this.$description.itemBuilder = (...args) => {
+        if(args[0].__$ListInstance) {
+            return args[0];
+        }
+        const item = builder(...args);
+        item.$parent = this;
+        return item;
+    };
+    return this;
+};

package/src/components/list/List.js

@@ -0,0 +1,125 @@
+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)
+ *     .multiSelect(true)
+ *     .withDivider(true)
+ *     .onItemClick((item, e) => console.log(item))
+ *     .onItemSelect((item) => console.log('selected', item));
+ *
+ * List.use((description, instance) => {
+ *     return Ul({ class: 'list' });
+ * });
+ *
+ * @constructor
+ * @param {GlobalAttributes} [props]
+ */
+export default function List(props = {}) {
+    if (!(this instanceof List)) {
+        return new List(props);
+    }
+
+    this.$description = {
+        selectable:       $(false),
+        multiSelect:      $(false),
+        selectedValues:   $.array(),
+        inset:            $(0),
+        divider:          false,
+        items:            $.array(),
+        render:           null,
+        selectByCheckbox: $(false),
+        selectByClick:    $(false),
+        loopOnKeyboard:   $(false),
+        props,
+    };
+}
+
+List.defaultTemplate = null;
+
+/**
+ * Registers the render template for List.
+ * @param {(description: {
+ *     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;
+};
+
+BaseComponent.extends(List);
+BaseComponent.use(List, HasItems, HasEventEmitter, HasListItem);
+
+
+/**
+ * @param {ObservableArray<*>|Observable<*[]>} observable
+ * @returns {this}
+ */
+List.prototype.selectedValuesModel = function(observable) {
+    this.$description.selectedValues = observable;
+    return this;
+};
+
+/**
+ * Inset padding in px applied to all items.
+ * @param {number} [inset=0]
+ * @returns {this}
+ */
+List.prototype.inset = function(inset = 0) {
+    this.$description.inset.set(inset);
+    return this;
+};
+
+/**
+ * @param {boolean} [divider=true]
+ * @returns {this}
+ */
+List.prototype.withDivider = function(divider = true) {
+    this.$description.divider = divider;
+    return this;
+};
+
+/**
+ * @param {*} data
+ * @returns {this}
+ */
+List.prototype.data = function(data) {
+    this.$description.items = data;
+    return this;
+};
+
+/**
+ * @param {(item: *, event: MouseEvent) => void} handler
+ * @returns {this}
+ */
+List.prototype.onItemClick = function(handler) {
+    this.on('itemClick', handler);
+    return this;
+};
+
+/**
+ * @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

@@ -0,0 +1,135 @@
+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';
+
+/**
+ * A collapsible group of ListItems inside a List. Can hold items, dividers, and nested groups.
+ *
+ * @example
+ * 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} [props={}]
+ */
+export default function ListGroup(label, props = {}) {
+    if (!(this instanceof ListGroup)) {
+        return new ListGroup(label, props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        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, HasEventEmitter, HasListItem);
+
+HasListItem.components.ListGroup = ListGroup;
+
+ListGroup.defaultTemplate = null;
+ListGroup.prototype.__$ListInstance = true;
+
+/**
+ * Registers the render template for ListGroup.
+ * @param {(description: {
+ *     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) {
+    ListGroup.defaultTemplate = template;
+};
+
+/**
+ * @param {NdChild} icon
+ * @returns {this}
+ */
+ListGroup.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+/**
+ * @param {boolean} [mode=true]
+ * @param {NdChild} [openedIcon]
+ * @param {NdChild} [closedIcon]
+ * @returns {this}
+ */
+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 {boolean} [mode=true]
+ * @returns {this}
+ */
+ListGroup.prototype.collapsed = function(mode = true) {
+    if (!this.$description.collapsed) {
+        this.$description.collapsed = $(mode);
+    } else {
+        this.$description.collapsed.set(mode);
+    }
+    return this;
+};
+
+/**
+ * @param {boolean|Observable<boolean>} mode
+ * @returns {this}
+ */
+ListGroup.prototype.visibility = function(mode) {
+    this.$description.visibility = BaseComponent.obs(mode);
+    return this;
+};
+
+/**
+ * @param {*} data
+ * @returns {this}
+ */
+ListGroup.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};