native-document 1.0.165 → 1.0.168

package/src/components/stepper/types/StepperStep.d.ts

@@ -0,0 +1,54 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type StepperStepDescription = {
+        icon: ValidChild | null;
+        label: ValidChild;
+        description: ValidChild | null;
+        content: ValidChild | null;
+        status: ObservableItem<'pending' | 'completed' | 'error'>;
+        optional: ObservableItem<boolean>;
+        disabled: ObservableItem<boolean>;
+        completed: ObservableItem<boolean>;
+        error: ObservableItem<boolean>;
+        data: unknown | null;
+        render: ((desc: StepperStepDescription, instance: StepperStepInterface) => ValidChild) | null;
+        key: string | null;
+        index: ObservableItem<number>;
+        isVisible: ObservableItem<boolean>;
+        props: GlobalAttributes;
+    };
+
+export interface StepperStepInterface extends BaseComponent {
+    icon(icon: ValidChild): this;
+    label(label: ValidChild): this;
+    description(description: ValidChild): this;
+    content(content: ValidChild): this;
+    status(status: 'pending' | 'completed' | 'error'): this;
+    optional(optional?: boolean): this;
+    disabled(disabled?: boolean): this;
+    updateStatus(status: 'pending' | 'completed' | 'error'): void;
+    completed(completed?: boolean): this;
+    error(error?: boolean): this;
+    reset(): this;
+    data(data: unknown): this;
+    key(key: string): this;
+    getKey(): string;
+    visibility(condition: ObservableItem<boolean> | boolean | (() => ObservableItem<boolean>)): this;
+    validator(validatorFn: (step: StepperStepInterface) => boolean | Promise<boolean>): this;
+    validate(): boolean | Promise<boolean>;
+
+    render(renderFn: (description: StepperStepDescription, instance: StepperStepInterface) => ValidChild): this;
+}
+
+
+export declare function StepperStep(label: ValidChild, props?: Record<string, unknown>): StepperStepInterface;
+export declare namespace StepperStep {
+
+
+    function use(template: (description: StepperStepDescription, instance: StepperStepInterface) => ValidChild): void;
+
+
+}

package/src/components/switch/Switch.js

@@ -1,7 +1,27 @@
-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';
 
+/**
+ * Toggle switch for boolean values. Supports reactive model binding, inner labels, icon states, variants, loading and readonly states.
+ *
+ *
+ * @example
+ * const toggle = new Switch()
+ *     .model(darkModeObs)
+ *     .label(Span('Dark mode'))
+ *     .labelPosition('right')
+ *     .variant('primary')
+ *     .icon(SunIcon(), MoonIcon())
+ *     .onChange((value) => applyTheme(value));
+ *
+ * Switch.use((description, instance) => {
+ *     return Div({ class: 'switch' });
+ * });
+ *
+ * @constructor
+ * @param {GlobalAttributes} [props]
+ */
 export default function Switch(props = {}) {
     if (!(this instanceof Switch)) {
         return new Switch(props);
@@ -21,7 +41,7 @@ export default function Switch(props = {}) {
         onIcon: null,
         offIcon: null,
         innerOnLabel: null,
-        innerOffLabel: null
+        innerOffLabel: null,
     };
 }
 
@@ -30,99 +50,216 @@ BaseComponent.use(Switch, HasEventEmitter);
 
 // Theming
 Switch.defaultTemplate = null;
+
+/**
+ * Registers the render template for Switch.
+ * @param {(description: {
+ *     value: Observable<boolean>,
+ *     label: NdChild|null,
+ *     labelPosition: Observable<'left'|'right'>,
+ *     variant: Observable<string>,
+ *     outline: boolean,
+ *     disabled: boolean|Observable<boolean>,
+ *     loading: boolean|Observable<boolean>,
+ *     readonly: boolean|Observable<boolean>,
+ *     onIcon: NdChild|null,
+ *     offIcon: NdChild|null,
+ *     innerOnLabel: NdChild|null,
+ *     innerOffLabel: NdChild|null,
+ * }, instance: Switch) => NdChild} template
+ */
 Switch.use = function(template) {
     Switch.defaultTemplate = template;
 };
 
+/**
+ * @param {boolean|Observable<boolean>} value
+ * @returns {this}
+ */
 Switch.prototype.model = function(value) {
     this.$description.value = BaseComponent.obs(value);
     return this;
 };
 
+/**
+ * @param {NdChild} label
+ * @returns {this}
+ */
 Switch.prototype.label = function(label) {
     this.$description.label = label;
     return this;
 };
+
+/**
+ * @param {NdChild} onLabel
+ * @param {NdChild} offLabel
+ * @returns {this}
+ */
 Switch.prototype.innerLabel = function(onLabel, offLabel) {
     this.$description.innerOnLabel  = onLabel;
     this.$description.innerOffLabel = offLabel;
     return this;
 };
+
+/**
+ * @param {'left'|'right'} position
+ * @returns {this}
+ */
 Switch.prototype.labelPosition = function(position) {
     this.$description.labelPosition = position;
     return this;
 };
 
+/**
+ * @param {string} name
+ * @returns {this}
+ */
 Switch.prototype.variant = function(name) {
     this.$description.variant.set(name);
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Switch.prototype.primary = function() {
     return this.variant('primary');
 };
+
+/**
+ * @returns {this}
+ */
 Switch.prototype.secondary = function() {
     return this.variant('secondary');
 };
+
+/**
+ * @returns {this}
+ */
 Switch.prototype.danger = function() {
     return this.variant('danger');
 };
+
+/**
+ * @returns {this}
+ */
 Switch.prototype.success = function() {
     return this.variant('success');
 };
+
+/**
+ * @returns {this}
+ */
 Switch.prototype.warning = function() {
     return this.variant('warning');
 };
+
+/**
+ * @returns {this}
+ */
 Switch.prototype.ghost = function() {
     return this.variant('ghost');
 };
+
+/**
+ * @returns {this}
+ */
 Switch.prototype.link = function() {
     return this.variant('link');
 };
+
+/**
+ * @returns {this}
+ */
 Switch.prototype.outline = function() {
     this.$description.outline = true;
     return this;
 };
 
+/**
+ * @param {boolean|Observable<boolean>} [condition=true]
+ * @returns {this}
+ */
 Switch.prototype.disabled = function(condition = true) {
     this.$description.disabled = BaseComponent.obs(condition);
     return this;
 };
+
+/**
+ * @param {boolean|Observable<boolean>} [isLoading=true]
+ * @returns {this}
+ */
 Switch.prototype.loading = function(isLoading = true) {
     this.$description.loading = BaseComponent.obs(isLoading);
     return this;
 };
+
+/**
+ * @param {boolean|Observable<boolean>} [condition=true]
+ * @returns {this}
+ */
 Switch.prototype.readonly = function(condition = true) {
     this.$description.readonly = BaseComponent.obs(condition);
     return this;
 };
 
+/**
+ * @param {NdChild} onIcon
+ * @param {NdChild} offIcon
+ * @returns {this}
+ */
 Switch.prototype.icon = function(onIcon, offIcon) {
     this.$description.offIcon = offIcon;
     this.$description.onIcon = onIcon;
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Switch.prototype.toggle = function() {
     this.$description.value.toggle();
     return this;
 };
-Switch.prototype.on = function() {
+
+/**
+ * @returns {this}
+ */
+Switch.prototype.setOn = function() {
     this.$description.value.set(true);
     return this;
 };
-Switch.prototype.off = function() {
+
+/**
+ * @returns {this}
+ */
+Switch.prototype.setOff = function() {
     this.$description.value.set(false);
     return this;
 };
 
+/**
+ * @param {(value: boolean) => void} handler
+ * @returns {this}
+ */
 Switch.prototype.onChange = function(handler) {
     this.on('change', handler);
     return this;
 };
+
+/**
+ * @param {Function} handler
+ * @returns {this}
+ */
 Switch.prototype.onOn = function(handler) {
     this.on('on', handler);
     return this;
 };
+
+/**
+ * @param {Function} handler
+ * @returns {this}
+ */
 Switch.prototype.onOff = function(handler) {
     this.on('off', handler);
     return this;

package/src/components/switch/index.js

@@ -3,4 +3,4 @@ import Switch from './Switch';
 
 export {
     Switch,
-}
+};

package/src/components/switch/types/Switch.d.ts

@@ -0,0 +1,55 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+
+export type SwitchDescription = {
+        value: ObservableItem<boolean>;
+        label: ValidChild | null;
+        labelPosition: ObservableItem<'left' | 'right'>;
+        variant: ObservableItem<string>;
+        outline: boolean;
+        disabled: boolean | ObservableItem<boolean>;
+        loading: boolean | ObservableItem<boolean>;
+        readonly: boolean | ObservableItem<boolean>;
+        onIcon: ValidChild | null;
+        offIcon: ValidChild | null;
+        innerOnLabel: ValidChild | null;
+        innerOffLabel: ValidChild | null;
+    };
+
+export interface SwitchInterface extends BaseComponent {
+    model(value: boolean | ObservableItem<boolean>): this;
+    label(label: ValidChild): this;
+    innerLabel(onLabel: ValidChild, offLabel: ValidChild): this;
+    labelPosition(position: 'left' | 'right'): this;
+    variant(name: string): this;
+    primary(): this;
+    secondary(): this;
+    danger(): this;
+    success(): this;
+    warning(): this;
+    ghost(): this;
+    link(): this;
+    outline(): this;
+    disabled(condition?: boolean | ObservableItem<boolean>): this;
+    loading(isLoading?: boolean | ObservableItem<boolean>): this;
+    readonly(condition?: boolean | ObservableItem<boolean>): this;
+    icon(onIcon: ValidChild, offIcon: ValidChild): this;
+    toggle(): this;
+    render(renderFn: (description: SwitchDescription, instance: SwitchInterface) => ValidChild): this;
+    setOn(): this;
+    setOf(): this;
+    onChange(handler: (value: boolean) => void): this;
+    onOn(handler: () => void): this;
+    onOff(handler: () => void): this;
+}
+
+
+export declare function Switch(props?: Record<string, unknown>): SwitchInterface;
+export declare namespace Switch {
+
+
+    function use(template: (description: SwitchDescription, instance: SwitchInterface) => ValidChild): void;
+
+
+}

package/src/components/table/Column.js

@@ -1,4 +1,20 @@
 
+/**
+ * Column definition for SimpleTable and DataTable. Configures key, header, alignment, sorting, rendering, pinning, and click handlers.
+ *
+ *
+ * @example
+ * const col = new Column('name')
+ *     .title('Full name')
+ *     .sortable()
+ *     .align('left')
+ *     .render((value, row, index) => Span(String(value)))
+ *     .onClick((value, row, e) => console.log(row));
+ *
+ * @constructor
+ * @param {string} key
+ * @param {GlobalAttributes} [props={}]
+ */
 export default function Column(key, props = {}) {
     this.$description = {
         key,
@@ -12,102 +28,185 @@ export default function Column(key, props = {}) {
         rowspan: null,
         sortable: null,
         onClick: null,
-        props
+        props,
     };
 }
 
 Column.defaultTemplate = null;
 
+/**
+ * Registers the render template for Column.
+ * @param {(description: {
+ *     key: string,
+ *     align: 'left'|'center'|'right'|null,
+ *     searchable: boolean|null,
+ *     visible: Observable<boolean>|boolean|null,
+ *     header: NdChild|null,
+ *     render: ((value: *, row: *, index: number) => NdChild)|null,
+ *     colspan: number|null,
+ *     pinned: 'left'|'right'|null,
+ *     rowspan: number|null,
+ *     sortable: boolean|((a: *, b: *) => number)|null,
+ *     onClick: ((value: *, row: *, event: MouseEvent) => void)|null,
+ *     props: GlobalAttributes,
+ * }, instance: Column) => NdChild} template
+ */
 Column.use = function(template) {
     Column.defaultTemplate = template;
 };
 
 Column.prototype.isColumn = true;
 
+/**
+ * @param {((a: *, b: *) => number)|null} [customSortFn=null]
+ * @returns {this}
+ */
 Column.prototype.sortable = function(customSortFn = null) {
     this.$description.sortable = customSortFn;
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Column.prototype.searchable = function() {
     this.$description.searchable = true;
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Column.prototype.hidden = function() {
     this.$description.visible = false;
     return this;
 };
 
+/**
+ * @param {GlobalAttributes} [props]
+ * @returns {this}
+ */
 Column.prototype.props = function(props = {}) {
     this.$description.props = props;
     return this;
 };
 
+/**
+ * @param {string} orientation
+ * @returns {this}
+ */
 Column.prototype.pinned = function(orientation) {
     this.$description.pinned = orientation;
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Column.prototype.pinnedAtLeft = function() {
     this.$description.pinned = 'left';
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Column.prototype.pinnedAtRight = function() {
     this.$description.pinned = 'right';
     return this;
 };
 
+/**
+ * @param {boolean|Observable<boolean>} [condition=true]
+ * @returns {this}
+ */
 Column.prototype.visible = function(condition = true) {
     this.$description.visible = condition;
     return this;
 };
 
+/**
+ * @param {string} align
+ * @returns {this}
+ */
 Column.prototype.align = function(align) {
     this.$description.align = align;
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Column.prototype.center = function() {
     return this.align('center');
 };
 
+/**
+ * @returns {this}
+ */
 Column.prototype.right = function() {
     return this.align('right');
 };
 
+/**
+ * @param {NdChild} template
+ * @returns {this}
+ */
 Column.prototype.header = function(template) {
     this.$description.header = template;
     return this;
 };
 
+/**
+ * @param {number} count
+ * @returns {this}
+ */
 Column.prototype.colspan = function(count) {
     this.$description.colspan = count;
     return this;
 };
 
+/**
+ * @param {number} count
+ * @returns {this}
+ */
 Column.prototype.rowspan = function(count) {
     this.$description.rowspan = count;
     return this;
 };
 
+/**
+ * @param {NdChild} title
+ * @returns {this}
+ */
 Column.prototype.title = function(title) {
     this.$description.header = title;
     return this;
 };
 
-Column.prototype.render = function(render) {
-    this.$description.render = render;
-    return this;
-};
-
+/**
+ * @param {(row: *) => *} value
+ * @returns {this}
+ */
 Column.prototype.value = function(value) {
     this.$description.value = value;
     return this;
 };
 
+/**
+ * @param {(value: *, row: *, event: MouseEvent) => void} handler
+ * @returns {this}
+ */
 Column.prototype.onClick = function(handler) {
     this.$description.onClick = handler;
     return this;
+};
+
+/**
+ * @param {((value: *, row: *, index: number) => NdChild)|null} handler
+ * @returns {this}
+ */
+Column.prototype.render = function(handler) {
+    this.$description.render = handler;
+    return this;
 };

package/src/components/table/ColumnGroup.js

@@ -1,22 +1,52 @@
-import Column from "./Column";
-import { THeadCell } from "../../../elements";
+import Column from './Column';
+import { THeadCell } from '../../../elements';
 
+/**
+ * Groups multiple columns under a shared header in SimpleTable/DataTable.
+ *
+ *
+ * @example
+ * const group = new ColumnGroup('Personal info')
+ *     .column('firstName', 'First name')
+ *     .column('lastName', 'Last name')
+ *     .align('center');
+ *
+ * @constructor
+ * @param {NdChild} title
+ * @param {GlobalAttributes} [props={}]
+ */
 export default function ColumnGroup(title, props = {}) {
     this.$description = {
         header: title,
         columns: [],
         align: null,
-        props
+        props,
     };
 };
 
 ColumnGroup.defaultTemplate = null;
+
+/**
+ * Registers the render template for ColumnGroup.
+ * @param {(description: {
+ *     header: NdChild,
+ *     columns: Column[],
+ *     align: 'left'|'center'|'right'|null,
+ *     props: GlobalAttributes,
+ * }, instance: ColumnGroup) => NdChild} template
+ */
 ColumnGroup.use = function(template) {
     ColumnGroup.defaultTemplate = template;
 };
 
 ColumnGroup.prototype.isGroup = true;
 
+/**
+ * @param {string} key
+ * @param {NdChild} title
+ * @param {((col: Column) => void)} [callback]
+ * @returns {this}
+ */
 ColumnGroup.prototype.column = function(key, title, callback) {
     const column = new Column(key);
     column.title(title);
@@ -25,20 +55,35 @@ ColumnGroup.prototype.column = function(key, title, callback) {
     return this;
 };
 
+/**
+ * @param {NdChild} title
+ * @returns {this}
+ */
 ColumnGroup.prototype.title = function(title) {
     this.$description.header = title;
     return this;
 };
 
+/**
+ * @returns {Column[]}
+ */
 ColumnGroup.prototype.columns = function() {
     return this.$description.columns;
 };
 
+/**
+ * @param {NdChild} title
+ * @returns {this}
+ */
 ColumnGroup.prototype.header = function(title) {
     this.$description.header = title;
     return this;
 };
 
+/**
+ * @param {string} align
+ * @returns {this}
+ */
 ColumnGroup.prototype.align = function(align) {
     this.$description.align = align;
     return this;