native-document 1.0.165 → 1.0.168

package/src/components/table/types/Column.d.ts

@@ -0,0 +1,49 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type ColumnDescription = {
+        key: string;
+        align: 'left' | 'center' | 'right' | null;
+        searchable: boolean | null;
+        visible: ObservableItem<boolean> | boolean | null;
+        header: ValidChild | null;
+        render: ((value: unknown, row: unknown, index: number) => ValidChild) | null;
+        colspan: number | null;
+        pinned: 'left' | 'right' | null;
+        rowspan: number | null;
+        sortable: boolean | ((a: unknown, b: unknown) => number) | null;
+        onClick: ((value: unknown, row: unknown, event: MouseEvent) => void) | null;
+        props: GlobalAttributes;
+    };
+
+export interface ColumnInterface {
+    sortable(customSortFn?: ((a: unknown, b: unknown) => number) | null): this;
+    searchable(): this;
+    hidden(): this;
+    props(props?: Record<string, unknown>): this;
+    pinned(orientation: 'left' | 'right'): this;
+    pinnedAtLeft(): this;
+    pinnedAtRight(): this;
+    visible(condition?: boolean | ObservableItem<boolean>): this;
+    align(align: 'left' | 'center' | 'right'): this;
+    center(): this;
+    right(): this;
+    header(template: ValidChild): this;
+    title(title: ValidChild): this;
+    colspan(count: number): this;
+    rowspan(count: number): this;
+    render(fn: (value: unknown, row: unknown, index: number) => ValidChild): this;
+    value(fn: (row: unknown) => unknown): this;
+    onClick(handler: (value: unknown, row: unknown, event: MouseEvent) => void): this;
+}
+
+
+export declare function Column(key: string, props?: Record<string, unknown>): ColumnInterface;
+export declare namespace Column {
+
+
+    function use(template: (description: ColumnDescription, instance: ColumnInterface) => ValidChild): void;
+
+
+}

package/src/components/table/types/ColumnGroup.d.ts

@@ -0,0 +1,28 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ColumnInterface } from './Column';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type ColumnGroupDescription = {
+        header: ValidChild;
+        columns: ColumnInterface[];
+        align: 'left' | 'center' | 'right' | null;
+        props: GlobalAttributes;
+    };
+
+export interface ColumnGroupInterface {
+    column(key: string, title: ValidChild, callback?: (col: ColumnInterface) => void): this;
+    title(title: ValidChild): this;
+    header(title: ValidChild): this;
+    columns(): ColumnInterface[];
+    align(align: 'left' | 'center' | 'right'): this;
+}
+
+
+export declare function ColumnGroup(title: ValidChild, props?: Record<string, unknown>): ColumnGroupInterface;
+export declare namespace ColumnGroup {
+
+
+    function use(template: (description: ColumnGroupDescription, instance: ColumnGroupInterface) => ValidChild): void;
+
+
+}

package/src/components/table/types/DataTable.d.ts

@@ -0,0 +1,97 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { ColumnInterface } from './Column';
+import type { ColumnGroupInterface } from './ColumnGroup';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type DataTableDescription = {
+        header: Array<ColumnInterface | ColumnGroupInterface>;
+        columns: ColumnInterface[];
+        hasGroups: boolean;
+        data: unknown[] | ObservableItem<unknown[]> | null;
+        total: number | ObservableItem<number> | null;
+        mode: 'client' | 'server';
+        loading: boolean | ObservableItem<boolean> | null;
+        error: ValidChild | null;
+        defaultSort: { col: string; dir: 'asc' | 'desc' } | null;
+        multiSort: boolean;
+        searchable: boolean;
+        filterable: boolean;
+        defaultFilters: Record<string, unknown> | null;
+        pageSize: number | null;
+        pageSizes: number[] | null;
+        defaultPage: number;
+        selectable: boolean;
+        multiSelect: boolean;
+        editable: boolean;
+        expandable: ((row: unknown) => ValidChild) | null;
+        masterDetail: ((row: unknown) => ValidChild) | null;
+        bulkActions: Array<{ label: ValidChild; action: (rows: unknown[]) => void }> | null;
+        rowProps: ((row: unknown) => GlobalAttributes) | null;
+        empty: ValidChild | null;
+        layout: ((desc: DataTableDescription, instance: DataTableInterface) => ValidChild) | null;
+        labels: Record<string, string>;
+        props: GlobalAttributes;
+    };
+
+export interface DataTableInterface extends BaseComponent {
+    column(key: string, title: ValidChild, props?: Record<string, unknown>, callback?: (col: ColumnInterface) => void): this;
+    group(title: ValidChild, callback: (group: ColumnGroupInterface) => void): this;
+    data(data: unknown[] | ObservableItem<unknown[]>): this;
+    total(total: number | ObservableItem<number>): this;
+    clientSide(): this;
+    serverSide(): this;
+    loading(loading: boolean | ObservableItem<boolean>): this;
+    error(error: ValidChild | string): this;
+    defaultSort(col: string, dir?: 'asc' | 'desc'): this;
+    multiSort(enabled?: boolean): this;
+    onSort(handler: (col: string, dir: 'asc' | 'desc') => void): this;
+    searchable(enabled?: boolean): this;
+    filterable(enabled?: boolean): this;
+    defaultFilters(filters: Record<string, unknown>): this;
+    onSearch(handler: (query: string) => void): this;
+    onFilter(handler: (filters: unknown) => void): this;
+    pagination(pageSize: number): this;
+    pageSizes(sizes: number[]): this;
+    defaultPage(page: number): this;
+    onPage(handler: (page: number, pageSize: number) => void): this;
+    selectable(enabled?: boolean): this;
+    multiSelect(enabled?: boolean): this;
+    selectedRows(obs: ObservableItem<unknown[]>): this;
+    onSelect(handler: (rows: unknown[]) => void): this;
+    editable(enabled?: boolean): this;
+    onEdit(handler: (row: unknown, col: string, value: unknown) => void): this;
+    onEditCancel(handler: () => void): this;
+    export(label: ValidChild, format: 'csv' | 'xlsx' | string, filename?: string): this;
+    exportFileName(name: string): this;
+    onExport(handler: (format: string) => void): this;
+    expandable(renderFn: (row: unknown) => ValidChild, isExpandedIcon?: ValidChild, isNotExpandedIcon?: ValidChild): this;
+    masterDetail(renderFn: (row: unknown) => ValidChild): this;
+    bulkActions(actions: Array<{ label: ValidChild; action: (rows: unknown[]) => void }>): this;
+    render(renderFn: (description: DataTableDescription, instance: DataTableInterface) => ValidChild): this;
+    rowProps(fn: (row: unknown) => Record<string, unknown>): this;
+    onRowClick(handler: (row: unknown, event: MouseEvent) => void): this;
+    onRowDoubleClick(handler: (row: unknown, event: MouseEvent) => void): this;
+    onRowHover(handler: (row: unknown, event: MouseEvent) => void): this;
+    render(renderFn: (desc: DataTableDescription, instance: DataTableInterface) => ValidChild): this;
+    layout(layoutFn: (desc: DataTableDescription, instance: DataTableInterface) => ValidChild): this;
+    labels(labels: Record<string, string>): this;
+    persist(key: string, options?: Record<string, unknown>): this;
+    refresh(): this;
+    clearSelection(): this;
+    clearFilters(): this;
+    goToPage(page: number): this;
+    empty(content: ValidChild): this;
+}
+
+
+export declare function DataTable(props?: Record<string, unknown>): DataTableInterface;
+export declare namespace DataTable {
+
+
+    function use(template: (description: DataTableDescription, instance: DataTableInterface) => ValidChild): void;
+    function create(props?: Record<string, unknown>): DataTableInterface;
+
+
+}

package/src/components/table/types/SimpleTable.d.ts

@@ -0,0 +1,40 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { ColumnInterface } from './Column';
+import type { ColumnGroupInterface } from './ColumnGroup';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type SimpleTableDescription = {
+        header: Array<ColumnInterface | ColumnGroupInterface>;
+        columns: ColumnInterface[];
+        hasGroups: boolean;
+        data: unknown[] | ObservableItem<unknown[]> | null;
+        empty: ValidChild | null;
+        onRowClick: ((row: unknown, event: MouseEvent) => void) | null;
+        rowProps: ((row: unknown) => GlobalAttributes) | null;
+        noHeader: boolean | null;
+        props: GlobalAttributes;
+    };
+
+export interface SimpleTableInterface extends BaseComponent {
+    column(key: string, title: ValidChild, props?: Record<string, unknown>, callback?: (col: ColumnInterface) => void): this;
+    group(title: ValidChild, callback: (group: ColumnGroupInterface) => void): this;
+    data(data: unknown[] | ObservableItem<unknown[]>): this;
+    empty(content: ValidChild): this;
+    noHeader(): this;
+    render(renderFn: (description: SimpleTableDescription, instance: SimpleTableInterface) => ValidChild): this;
+    onRowClick(handler: (row: unknown, event: MouseEvent) => void): this;
+    rowProps(fn: (row: unknown) => Record<string, unknown>): this;
+}
+
+
+export declare function SimpleTable(props?: Record<string, unknown>): SimpleTableInterface;
+export declare namespace SimpleTable {
+
+
+    function use(template: (description: SimpleTableDescription, instance: SimpleTableInterface) => ValidChild): void;
+    function create(props?: Record<string, unknown>): SimpleTableInterface;
+
+
+}

package/src/components/tabs/Tabs.js

@@ -1,8 +1,29 @@
-import BaseComponent from "../BaseComponent";
-import HasEventEmitter from "../../core/utils/HasEventEmitter";
-import { $ } from "../../core/data/Observable";
+import BaseComponent from '../BaseComponent';
+import HasEventEmitter from '../../core/utils/HasEventEmitter';
+import { $ } from '../../core/data/Observable';
 
 
+/**
+ * Tabbed content panels. Supports closable tabs, drag-to-sort, overflow menu/scroll, pills/segmented appearance, and dynamic tab management.
+ *
+ *
+ * @example
+ * const tabs = new Tabs()
+ *     .tab('Overview', OverviewPanel(), 'overview')
+ *     .tab('Analytics', AnalyticsPanel(), 'analytics')
+ *     .tabWithIcon(SettingsIcon(), 'Settings', SettingsPanel(), 'settings')
+ *     .closable(true)
+ *     .overflow('scroll')
+ *     .onCloseTab((key) => console.log(\`closed: \${key}\`))
+ *     .onChange(() => console.log('tab changed'));
+ *
+ * Tabs.use((description, instance) => {
+ *     return Div({ class: 'tabs' });
+ * });
+ * 
+ * @constructor
+ * @param {GlobalAttributes} [props]
+ */
 export default function Tabs(props = {}) {
     if(!(this instanceof Tabs)) {
         return new Tabs();
@@ -33,75 +54,151 @@ BaseComponent.use(Tabs, HasEventEmitter);
 
 Tabs.defaultTemplate = null;
 
+/**
+ * Registers the render template for Tabs.
+ * @param {(description: {
+ *     active: Observable<string>,
+ *     tabs: Record<string, { icon?: NdChild, label: NdChild, content: NdChild, key: string }>,
+ *     sortable: boolean,
+ *     tabAppearance: 'segmented'|'pills'|string,
+ *     addPlusButton: boolean|null,
+ *     stickyHeader: boolean,
+ *     overflow: 'scroll'|'menu',
+ *     navigationBarPosition: 'top'|'bottom'|'left'|'right'|'dock',
+ *     tabsAlignment: 'leading'|'trailing'|'center'|'justified',
+ *     closable: boolean|'icon',
+ *     focusOnNewTab: boolean,
+ *     renderCloseButton: ((desc: *) => NdChild)|null,
+ *     renderPlusButton: ((desc: *) => NdChild)|null,
+ *     props: GlobalAttributes,
+ * }, instance: Tabs) => NdChild} template
+ */
 Tabs.use = function(template) {
     Tabs.defaultTemplate = template;
 };
 
 Tabs.prototype.parentEmit = HasEventEmitter.prototype.emit;
+
+/**
+ * @param {string} eventName
+ * @param {...*} args
+ */
 Tabs.prototype.emit = function(eventName, ...args) {
     this.parentEmit.call(this, eventName, ...args);
     this.parentEmit.call(this, 'change');
 };
 
+/**
+ * @returns {this}
+ */
 Tabs.prototype.sortable = function() {
     this.$description.sortable = true;
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Tabs.prototype.pills = function() {
     this.$description.tabAppearance = 'pills';
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Tabs.prototype.segmented = function() {
     this.$description.tabAppearance = 'segmented';
     return this;
 };
 
+/**
+ * @param {Function} callback
+ * @returns {this}
+ */
 Tabs.prototype.addPlusButton = function(callback) {
     this.$description.addPlusButton = true;
     this.$description.addPLusCallback = callback;
     return this;
 };
 
+/**
+ * @param {boolean|'icon'} [mode=true]
+ * @returns {this}
+ */
 Tabs.prototype.closable = function(mode = true) {
     this.$description.closable = mode;
     return this;
 };
 
+/**
+ * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @returns {this}
+ */
 Tabs.prototype.renderCloseButton = function(renderFn) {
     this.$description.renderCloseButton = renderFn;
     return this;
 };
 
+/**
+ * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @returns {this}
+ */
 Tabs.prototype.renderPlusButton = function(renderFn) {
     this.$description.renderPlusButton = renderFn;
     return this;
 };
 
+/**
+ * @param {'scroll'|'menu'} overflow
+ * @returns {this}
+ */
 Tabs.prototype.overflow = function(overflow) {
     this.$description.overflow = overflow;
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Tabs.prototype.scrollOnTabOverflow = function() {
     this.$description.overflow = 'scroll';
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Tabs.prototype.menuOnTabOverflow = function() {
     this.$description.overflow = 'menu';
     return this;
 };
 
+/**
+ * @param {*} [mode]
+ * @returns {this}
+ */
 Tabs.prototype.focusOnNewTab = function(mode = true) {
     this.$description.focusOnNewTab = mode;
     return this;
 };
 
+/**
+ * @param {*} [mode]
+ * @returns {this}
+ */
 Tabs.prototype.stickyHeader = function(mode = true) {
     this.$description.stickyHeader = mode;
     return this;
 };
 
+/**
+ * @param {NdChild|null} icon
+ * @param {NdChild} label
+ * @param {NdChild} content
+ * @param {string} key
+ * @returns {this}
+ */
 Tabs.prototype.addTab = function(icon, label, content, key) {
     const tab = { icon, label, content, key };
     this.$description.tabs[key] = tab;
@@ -109,100 +206,190 @@ Tabs.prototype.addTab = function(icon, label, content, key) {
     return this;
 };
 
+/**
+ * @param {NdChild} label
+ * @param {NdChild} content
+ * @param {string} key
+ * @returns {this}
+ */
 Tabs.prototype.tab = function(label, content, key) {
     return this.addTab(null, label, content, key);
 };
 
+/**
+ * @param {NdChild} icon
+ * @param {NdChild} label
+ * @param {NdChild} content
+ * @param {string} key
+ * @returns {this}
+ */
 Tabs.prototype.tabWithIcon = function(icon, label, content, key) {
     return this.addTab(icon, label, content, key);
 };
 
+/**
+ * @param {{ icon?: NdChild, label: NdChild, content: NdChild, key: string }[]} tabs
+ * @returns {this}
+ */
 Tabs.prototype.tabs = function(tabs) {
     for(const item of tabs) {
         this.addTab(item.icon, item.label, item.content, item.key);
     }
     return this;
 };
+
+/**
+ * @param {string} key
+ * @returns {this}
+ */
 Tabs.prototype.closeTab = function(key) {
     delete this.$description.tabs[key];
     this.emit('closeTab', key);
     return this;
 };
 
+/**
+ * @param {string} key
+ * @returns {this}
+ */
 Tabs.prototype.active = function(key) {
     this.$description.active.set(key);
     return this;
 };
 
+/**
+ * @param {'top'|'bottom'|'left'|'right'|'dock'} position
+ * @returns {this}
+ */
 Tabs.prototype.navigationBarPosition = function(position) {
     this.$description.navigationBarPosition = position;
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Tabs.prototype.navigationBarAtLeft = function() {
     this.$description.navigationBarPosition = 'left';
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Tabs.prototype.navigationBarAtRight = function() {
     this.$description.navigationBarPosition = 'right';
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Tabs.prototype.navigationBarAtTop = function() {
     this.$description.navigationBarPosition = 'top';
     return this;
-}
+};
+
+/**
+ * @returns {this}
+ */
 Tabs.prototype.navigationBarAsDock = function() {
     this.$description.navigationBarPosition = 'dock';
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Tabs.prototype.tabsAtLeading = function() {
     this.$description.tabsAlignment = 'leading';
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Tabs.prototype.tabsAtTrailing = function() {
     this.$description.tabsAlignment = 'trailing';
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Tabs.prototype.tabsAtCenter = function() {
     this.$description.tabsAlignment = 'center';
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Tabs.prototype.tabsJustified = function() {
     this.$description.tabsAlignment = 'justified';
     return this;
 };
 
 // Events
+
+/**
+ * @param {Function} handler
+ * @returns {this}
+ */
 Tabs.prototype.onChange = function(handler) {
     this.on('change', handler);
     return this;
 };
+
+/**
+ * @param {(key: string) => boolean|void} handler
+ * @returns {this}
+ */
 Tabs.prototype.onBeforeTabClose = function(handler) {
     this.on('beforeTabClose', handler);
     return this;
 };
 
+/**
+ * @param {(key: string) => void} handler
+ * @returns {this}
+ */
 Tabs.prototype.onClickTab = function(handler) {
     this.on('clickTab', handler);
     return this;
 };
 
+/**
+ * @param {(key: string) => void} handler
+ * @returns {this}
+ */
 Tabs.prototype.onCloseTab = function(handler) {
     this.on('closeTab', handler);
     return this;
 };
 
+/**
+ * @param {(tab: { icon?: NdChild, label: NdChild, content: NdChild, key: string }) => void} handler
+ * @returns {this}
+ */
 Tabs.prototype.onAddTab = function(handler) {
     this.on('addTab', handler);
     return this;
 };
 
-
+/**
+ * @param {(tab: { icon?: NdChild, label: NdChild, content: NdChild, key: string }) => NdChild} renderFn
+ * @returns {this}
+ */
 Tabs.prototype.renderTab = function(renderFn) {
     this.$description.renderTab = renderFn;
     return this;
 };
+
+/**
+ * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @returns {this}
+ */
 Tabs.prototype.renderNavigationBar = function(renderFn) {
     return this.$description.renderNavigationBar = renderFn;
 };

package/src/components/tabs/index.js

@@ -1,6 +1,6 @@
-import Tabs from './Tabs'
+import Tabs from './Tabs';
 
 
 export {
-    Tabs
-}
+    Tabs,
+};

package/src/components/tabs/types/Tabs.d.ts

@@ -0,0 +1,78 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+interface TabDefinition {
+    icon?: ValidChild;
+    label: ValidChild;
+    content: ValidChild;
+    key: string;
+}
+
+export type TabsDescription = {
+        active: ObservableItem<string>;
+        tabs: Record<string, { icon?: ValidChild; label: ValidChild; content: ValidChild; key: string }>;
+        sortable: boolean;
+        tabAppearance: 'segmented' | 'pills' | string;
+        addPlusButton: boolean | null;
+        stickyHeader: boolean;
+        overflow: 'scroll' | 'menu';
+        navigationBarPosition: 'top' | 'bottom' | 'left' | 'right' | 'dock';
+        tabsAlignment: 'leading' | 'trailing' | 'center' | 'justified';
+        closable: boolean | 'icon';
+        focusOnNewTab: boolean;
+        renderCloseButton: ((desc: unknown) => ValidChild) | null;
+        renderPlusButton: ((desc: unknown) => ValidChild) | null;
+        props: GlobalAttributes;
+    };
+
+export interface TabsInterface extends BaseComponent {
+    emit(eventName: string, ...args: unknown[]): void;
+    sortable(): this;
+    pills(): this;
+    segmented(): this;
+    addPlusButton(callback: () => void): this;
+    closable(mode?: boolean | 'icon'): this;
+    renderCloseButton(renderFn: (desc: unknown) => ValidChild): this;
+    renderPlusButton(renderFn: (desc: unknown) => ValidChild): this;
+    overflow(overflow: 'scroll' | 'menu'): this;
+    scrollOnTabOverflow(): this;
+    menuOnTabOverflow(): this;
+    focusOnNewTab(mode?: boolean): this;
+    stickyHeader(mode?: boolean): this;
+    addTab(icon: ValidChild | null, label: ValidChild, content: ValidChild, key: string): this;
+    tab(label: ValidChild, content: ValidChild, key: string): this;
+    tabWithIcon(icon: ValidChild, label: ValidChild, content: ValidChild, key: string): this;
+    tabs(tabs: TabDefinition[]): this;
+    closeTab(key: string): this;
+    active(key: string): this;
+    navigationBarPosition(position: 'top' | 'bottom' | 'left' | 'right' | 'dock'): this;
+    navigationBarAtLeft(): this;
+    navigationBarAtRight(): this;
+    navigationBarAtTop(): this;
+    navigationBarAsDock(): this;
+    tabsAtLeading(): this;
+    tabsAtTrailing(): this;
+    tabsAtCenter(): this;
+    tabsJustified(): this;
+    onChange(handler: () => void): this;
+    onBeforeTabClose(handler: (key: string) => boolean | void): this;
+    onClickTab(handler: (key: string) => void): this;
+    onCloseTab(handler: (key: string) => void): this;
+    onAddTab(handler: (tab: TabDefinition) => void): this;
+    renderTab(renderFn: (tab: TabDefinition) => ValidChild): this;
+    renderNavigationBar(renderFn: (desc: TabsDescription) => ValidChild): this;
+
+    render(renderFn: (description: TabsDescription, instance: TabsInterface) => ValidChild): this;
+}
+
+
+export declare function Tabs(props?: Record<string, unknown>): TabsInterface;
+export declare namespace Tabs {
+
+
+    function use(template: (description: TabsDescription, instance: TabsInterface) => ValidChild): void;
+
+
+}