native-document 1.0.166 → 1.0.169

package/src/components/icon/icons.js

@@ -0,0 +1,171 @@
+/**
+ * Canonical icon names for NativeDocument.
+ * Convention:
+ *   - Action/sense → search, close, edit, delete, save
+ *   - Object/shape → star, heart, bell, flag
+ *   - Direction → arrowLeft, arrowRight, chevronUp, chevronDown
+ */
+
+// -- Navigation ---------------------------------------------------------------
+export const ICON_ARROW_LEFT           = 'arrowLeft';
+export const ICON_ARROW_RIGHT          = 'arrowRight';
+export const ICON_ARROW_UP             = 'arrowUp';
+export const ICON_ARROW_DOWN           = 'arrowDown';
+export const ICON_CHEVRON_LEFT         = 'chevronLeft';
+export const ICON_CHEVRON_RIGHT        = 'chevronRight';
+export const ICON_CHEVRON_UP           = 'chevronUp';
+export const ICON_CHEVRON_DOWN         = 'chevronDown';
+export const ICON_HOME                 = 'home';
+export const ICON_MENU                 = 'menu';
+export const ICON_CLOSE                = 'close';
+export const ICON_BACK                 = 'back';
+export const ICON_FORWARD              = 'forward';
+export const ICON_EXPAND               = 'expand';
+export const ICON_COLLAPSE             = 'collapse';
+export const ICON_FULLSCREEN           = 'fullscreen';
+export const ICON_FULLSCREEN_EXIT      = 'fullscreenExit';
+
+// -- Actions ------------------------------------------------------------------
+export const ICON_SEARCH               = 'search';
+export const ICON_FILTER               = 'filter';
+export const ICON_SORT                 = 'sort';
+export const ICON_EDIT                 = 'edit';
+export const ICON_DELETE               = 'delete';
+export const ICON_ADD                  = 'add';
+export const ICON_REMOVE               = 'remove';
+export const ICON_SAVE                 = 'save';
+export const ICON_COPY                 = 'copy';
+export const ICON_DOWNLOAD             = 'download';
+export const ICON_UPLOAD               = 'upload';
+export const ICON_SHARE                = 'share';
+export const ICON_REFRESH              = 'refresh';
+export const ICON_MORE                 = 'more';
+export const ICON_SETTINGS             = 'settings';
+export const ICON_DRAG                 = 'drag';
+export const ICON_RESIZE               = 'resize';
+export const ICON_UNDO                 = 'undo';
+export const ICON_REDO                 = 'redo';
+export const ICON_SCAN                 = 'scan';
+export const ICON_PRINT                = 'print';
+export const ICON_IMPORT               = 'import';
+export const ICON_EXPORT               = 'export';
+
+// -- Feedback -----------------------------------------------------------------
+export const ICON_CHECK                = 'check';
+export const ICON_CHECK_CIRCLE         = 'checkCircle';
+export const ICON_ERROR                = 'error';
+export const ICON_WARNING              = 'warning';
+export const ICON_INFO                 = 'info';
+export const ICON_HELP                 = 'help';
+export const ICON_LOADING              = 'loading';
+export const ICON_SUCCESS              = 'success';
+
+// -- User ---------------------------------------------------------------------
+export const ICON_USER                 = 'user';
+export const ICON_USER_CIRCLE          = 'userCircle';
+export const ICON_USERS                = 'users';
+export const ICON_LOCK                 = 'lock';
+export const ICON_UNLOCK               = 'unlock';
+export const ICON_EYE                  = 'eye';
+export const ICON_EYE_OFF              = 'eyeOff';
+export const ICON_BELL                 = 'bell';
+export const ICON_NOTIFICATION         = 'notification';
+
+// -- Files & Media -------------------------------------------------------------
+export const ICON_FILE                 = 'file';
+export const ICON_FOLDER               = 'folder';
+export const ICON_IMAGE                = 'image';
+export const ICON_DOCUMENT             = 'document';
+export const ICON_ATTACHMENT           = 'attachment';
+export const ICON_LINK                 = 'link';
+export const ICON_EXTERNAL_LINK        = 'externalLink';
+export const ICON_PLAY                 = 'play';
+export const ICON_PAUSE                = 'pause';
+export const ICON_STOP                 = 'stop';
+export const ICON_MUTE                 = 'mute';
+export const ICON_SOUND                = 'sound';
+export const ICON_VIDEO                = 'video';
+export const ICON_CAMERA               = 'camera';
+
+// -- Interface -----------------------------------------------------------------
+export const ICON_GRID                 = 'grid';
+export const ICON_LIST                 = 'list';
+export const ICON_CALENDAR             = 'calendar';
+export const ICON_CLOCK                = 'clock';
+export const ICON_TAG                  = 'tag';
+export const ICON_TAGS                 = 'tags';
+export const ICON_QR_CODE              = 'qrCode';
+export const ICON_BARCODE              = 'barcode';
+
+// -- Text editing -------------------------------------------------------------
+export const ICON_BOLD                 = 'bold';
+export const ICON_ITALIC               = 'italic';
+export const ICON_UNDERLINE            = 'underline';
+export const ICON_STRIKETHROUGH        = 'strikethrough';
+export const ICON_ALIGN_LEFT           = 'alignLeft';
+export const ICON_ALIGN_CENTER         = 'alignCenter';
+export const ICON_ALIGN_RIGHT          = 'alignRight';
+export const ICON_ALIGN_JUSTIFY        = 'alignJustify';
+export const ICON_ORDERED_LIST         = 'orderedList';
+export const ICON_UNORDERED_LIST       = 'unorderedList';
+export const ICON_INDENT               = 'indent';
+export const ICON_OUTDENT              = 'outdent';
+export const ICON_SCISSORS             = 'scissors';
+export const ICON_FONT_COLOR           = 'fontColor';
+export const ICON_HIGHLIGHT            = 'highlight';
+
+// -- Data & charts -------------------------------------------------------------
+export const ICON_BAR_CHART            = 'barChart';
+export const ICON_LINE_CHART           = 'lineChart';
+export const ICON_PIE_CHART            = 'pieChart';
+export const ICON_AREA_CHART           = 'areaChart';
+export const ICON_TABLE                = 'table';
+export const ICON_DATABASE             = 'database';
+
+// -- Commerce & finance --------------------------------------------------------
+export const ICON_SHOPPING_CART        = 'shoppingCart';
+export const ICON_CREDIT_CARD          = 'creditCard';
+export const ICON_WALLET               = 'wallet';
+export const ICON_BANK                 = 'bank';
+export const ICON_GIFT                 = 'gift';
+export const ICON_PERCENTAGE           = 'percentage';
+export const ICON_DOLLAR               = 'dollar';
+export const ICON_EURO                 = 'euro';
+
+// -- Communication -------------------------------------------------------------
+export const ICON_MAIL                 = 'mail';
+export const ICON_MESSAGE              = 'message';
+export const ICON_COMMENT              = 'comment';
+export const ICON_PHONE                = 'phone';
+
+// -- System & dev -------------------------------------------------------------
+export const ICON_CLOUD                = 'cloud';
+export const ICON_CLOUD_UPLOAD         = 'cloudUpload';
+export const ICON_CLOUD_DOWNLOAD       = 'cloudDownload';
+export const ICON_API                  = 'api';
+export const ICON_CODE                 = 'code';
+export const ICON_BUG                  = 'bug';
+export const ICON_TOOL                 = 'tool';
+export const ICON_ROBOT                = 'robot';
+
+// -- Location -----------------------------------------------------------------
+export const ICON_MAP                  = 'map';
+export const ICON_COMPASS              = 'compass';
+export const ICON_GLOBAL               = 'global';
+export const ICON_LOCATION             = 'location';
+
+// -- Shapes & objects ---------------------------------------------------------
+export const ICON_STAR                 = 'star';
+export const ICON_HEART                = 'heart';
+export const ICON_FLAG                 = 'flag';
+export const ICON_TROPHY               = 'trophy';
+export const ICON_MEDAL                = 'medal';
+export const ICON_ROCKET               = 'rocket';
+export const ICON_FIRE                 = 'fire';
+export const ICON_THUNDER              = 'thunder';
+export const ICON_SMILE                = 'smile';
+export const ICON_FROWN                = 'frown';
+export const ICON_LIKE                 = 'like';
+export const ICON_DISLIKE              = 'dislike';
+export const ICON_SAFETY               = 'safety';
+export const ICON_KEY                  = 'key';

package/src/components/icon/index.js

@@ -0,0 +1,17 @@
+import { Icon } from './Icon';
+import { ICON_GETTERS } from './icon-getters';
+
+
+// -- Icon.{name} getters - tree-shakable via defineProperty -------------------
+
+for(const name in ICON_GETTERS) {
+    const canonicalName = ICON_GETTERS[name];
+    Object.defineProperty(Icon, name, {
+        get: () => Icon(canonicalName, Icon.defaultConfigs ?? {}),
+        enumerable:   false,
+        configurable: true,
+    });
+}
+
+
+export { Icon };

package/src/components/icon/types/Icon.d.ts

@@ -0,0 +1,191 @@
+import type { ValidChild }     from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+
+type IconVariant = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' | string;
+type IconSize    = 'small' | 'medium' | 'large' | 'extraLarge' | number;
+
+export interface IconDefaultConfigs {
+    variant?: IconVariant;
+    size?:    IconSize;
+    color?:   string;
+    weight?:  string;
+}
+
+export interface IconDescription {
+    name:    string;
+    variant: IconVariant | null;
+    color:   string | null;
+    weight:  string | null;
+    size:    IconSize | null;
+}
+
+export interface IconInstance {
+    $description: IconDescription;
+
+    variant(variant: IconVariant): this;
+    thin(): this;
+    light(): this;
+    regular(): this;
+    bold(): this;
+    fill(): this;
+    duotone(): this;
+
+    weight(weight: string): this;
+
+    size(size: IconSize): this;
+    small(): this;
+    medium(): this;
+    large(): this;
+    extraLarge(): this;
+
+    color(color: string | ObservableItem<string>): this;
+}
+
+export declare function Icon(name: string, props?: Partial<IconDescription>): IconInstance;
+
+export declare namespace Icon {
+    let defaultTemplate: ((description: IconDescription, instance: IconInstance) => ValidChild) | null;
+    let defaultConfigs:  IconDefaultConfigs | null;
+
+    function use(
+        template: (description: IconDescription, instance: IconInstance) => ValidChild,
+        defaultConfigs?: IconDefaultConfigs
+    ): void;
+
+    // Icon.{name} getters - each access returns a fresh IconInstance
+    const add: IconInstance;
+    const alignCenter: IconInstance;
+    const alignJustify: IconInstance;
+    const alignLeft: IconInstance;
+    const alignRight: IconInstance;
+    const api: IconInstance;
+    const areaChart: IconInstance;
+    const arrowDown: IconInstance;
+    const arrowLeft: IconInstance;
+    const arrowRight: IconInstance;
+    const arrowUp: IconInstance;
+    const attachment: IconInstance;
+    const back: IconInstance;
+    const bank: IconInstance;
+    const barChart: IconInstance;
+    const barcode: IconInstance;
+    const bell: IconInstance;
+    const bold: IconInstance;
+    const bug: IconInstance;
+    const calendar: IconInstance;
+    const camera: IconInstance;
+    const check: IconInstance;
+    const checkCircle: IconInstance;
+    const chevronDown: IconInstance;
+    const chevronLeft: IconInstance;
+    const chevronRight: IconInstance;
+    const chevronUp: IconInstance;
+    const clock: IconInstance;
+    const close: IconInstance;
+    const cloud: IconInstance;
+    const cloudDownload: IconInstance;
+    const cloudUpload: IconInstance;
+    const code: IconInstance;
+    const collapse: IconInstance;
+    const comment: IconInstance;
+    const compass: IconInstance;
+    const copy: IconInstance;
+    const creditCard: IconInstance;
+    const database: IconInstance;
+    const dislike: IconInstance;
+    const document: IconInstance;
+    const dollar: IconInstance;
+    const download: IconInstance;
+    const drag: IconInstance;
+    const edit: IconInstance;
+    const error: IconInstance;
+    const euro: IconInstance;
+    const expand: IconInstance;
+    const externalLink: IconInstance;
+    const eye: IconInstance;
+    const eyeOff: IconInstance;
+    const file: IconInstance;
+    const filter: IconInstance;
+    const fire: IconInstance;
+    const flag: IconInstance;
+    const folder: IconInstance;
+    const fontColor: IconInstance;
+    const forward: IconInstance;
+    const frown: IconInstance;
+    const fullscreen: IconInstance;
+    const fullscreenExit: IconInstance;
+    const gift: IconInstance;
+    const global: IconInstance;
+    const grid: IconInstance;
+    const heart: IconInstance;
+    const help: IconInstance;
+    const highlight: IconInstance;
+    const home: IconInstance;
+    const image: IconInstance;
+    const indent: IconInstance;
+    const info: IconInstance;
+    const italic: IconInstance;
+    const key: IconInstance;
+    const like: IconInstance;
+    const lineChart: IconInstance;
+    const link: IconInstance;
+    const list: IconInstance;
+    const loading: IconInstance;
+    const location: IconInstance;
+    const lock: IconInstance;
+    const mail: IconInstance;
+    const map: IconInstance;
+    const medal: IconInstance;
+    const menu: IconInstance;
+    const message: IconInstance;
+    const more: IconInstance;
+    const mute: IconInstance;
+    const notification: IconInstance;
+    const orderedList: IconInstance;
+    const outdent: IconInstance;
+    const pause: IconInstance;
+    const percentage: IconInstance;
+    const phone: IconInstance;
+    const pieChart: IconInstance;
+    const play: IconInstance;
+    const print: IconInstance;
+    const qrCode: IconInstance;
+    const redo: IconInstance;
+    const refresh: IconInstance;
+    const remove: IconInstance;
+    const resize: IconInstance;
+    const robot: IconInstance;
+    const rocket: IconInstance;
+    const safety: IconInstance;
+    const save: IconInstance;
+    const scan: IconInstance;
+    const scissors: IconInstance;
+    const search: IconInstance;
+    const settings: IconInstance;
+    const share: IconInstance;
+    const shoppingCart: IconInstance;
+    const smile: IconInstance;
+    const sort: IconInstance;
+    const sound: IconInstance;
+    const star: IconInstance;
+    const stop: IconInstance;
+    const strikethrough: IconInstance;
+    const success: IconInstance;
+    const table: IconInstance;
+    const tag: IconInstance;
+    const tags: IconInstance;
+    const thunder: IconInstance;
+    const tool: IconInstance;
+    const trophy: IconInstance;
+    const underline: IconInstance;
+    const undo: IconInstance;
+    const unlock: IconInstance;
+    const unorderedList: IconInstance;
+    const upload: IconInstance;
+    const user: IconInstance;
+    const userCircle: IconInstance;
+    const users: IconInstance;
+    const video: IconInstance;
+    const wallet: IconInstance;
+    const warning: IconInstance;
+}

package/src/components/index.d.ts

@@ -84,7 +84,7 @@ export type { FileWallMode, FileWallModeInterface, FileWallModeDescription } fro
 // --- 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';
+export type { ListItem, ListItemDescription } from './list/types/ListItem';
 
 // --- Menu --------------------------------------------------------------------
 export type { Menu, MenuInterface, MenuDescription } from './menu/types/Menu';
@@ -158,3 +158,8 @@ export type { ToastWarning, ToastWarningInterface } from './toast/types/ToastWar
 
 // --- Tooltip -----------------------------------------------------------------
 export type { Tooltip, TooltipInterface, TooltipDescription } from './tooltip/types/Tooltip';
+
+
+// --- Icon -----------------------------------------------------------------
+
+export type { Icon } from './icon/types/Icon'

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