native-document 1.0.165 → 1.0.168

package/src/components/modal/types/Modal.d.ts

@@ -0,0 +1,94 @@
+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 ModalDescription = {
+        centered: boolean;
+        scrollable: boolean;
+        title: ValidChild | null;
+        content: ValidChild;
+        footer: ValidChild | null;
+        size: 'small' | 'medium' | 'large' | 'extra-large' | 'fullscreen' | null;
+        closeOnBackdrop: boolean;
+        closeOnEscape: boolean;
+        closable: boolean;
+        layout: ((desc: ModalDescription, instance: ModalInterface) => ValidChild) | null;
+        fullscreen: boolean;
+        draggable: boolean;
+        dragByHeader: boolean;
+        resizable: boolean;
+        resizableOptions: { size: { minWidth?: number; maxWidth?: number; minHeight?: number; maxHeight?: number } };
+        focusTrap: boolean;
+        lockScroll: boolean;
+        isOpen: ObservableItem<boolean>;
+        variant: string | null;
+        props: GlobalAttributes;
+    };
+
+export interface ModalInterface extends BaseComponent {
+    trigger(trigger: HTMLElement): HTMLElement;
+    open(): void;
+    close(): void;
+    isOpen(): boolean;
+    isClose(): boolean;
+    title(title: ValidChild): this;
+    content(content: ValidChild): this;
+    footer(footer: ValidChild): this;
+    size(size: 'small' | 'medium' | 'large' | 'extra-large' | 'fullscreen' | string): this;
+    small(): this;
+    medium(): this;
+    large(): this;
+    extraLarge(): this;
+    fullscreen(fullscreen?: boolean): this;
+    centered(): this;
+    scrollable(scrollable?: boolean): this;
+    closeOnBackdrop(enabled?: boolean): this;
+    closeOnEscape(enabled?: boolean): this;
+    closable(enabled?: boolean): this;
+    onOpen(handler: () => void): this;
+    onClose(handler: () => void): this;
+    onBeforeOpen(handler: () => void): this;
+    onBeforeClose(handler: () => void): this;
+    renderHeader(renderFn: (desc: ModalDescription, instance: ModalInterface) => ValidChild): this;
+    renderContent(renderFn: (desc: ModalDescription, instance: ModalInterface) => ValidChild): this;
+    renderFooter(renderFn: (desc: ModalDescription, instance: ModalInterface) => ValidChild): this;
+    layout(layoutFn: (desc: ModalDescription, instance: ModalInterface) => ValidChild): this;
+    draggable(): this;
+    dragByHeader(): this;
+    resizable(options?: {
+        directions?: string[];
+        size?: {
+            minWidth?: number;
+            maxWidth?: number;
+            minHeight?: number;
+            maxHeight?: number
+        }
+    }): this;
+    render(renderFn: (description: ModalDescription, instance: ModalInterface) => ValidChild): this;
+    resizeDirections(directions: string[]): this;
+    minWidth(minWidth: string | number): this;
+    maxWidth(maxWidth: string | number): this;
+    minHeight(minHeight: string | number): this;
+    maxHeight(maxHeight: string | number): this;
+    focusTrap(focusTrap?: boolean): this;
+    lockScroll(lockScroll?: boolean): this;
+    onDragStart(handler: (event: MouseEvent, x: number, y: number) => void): this;
+    onDrag(handler: (event: MouseEvent, x: number, y: number) => void): this;
+    onDragEnd(handler: () => void): this;
+    onResizeStart(handler: (event: MouseEvent, w: number, h: number) => void): this;
+    onResize(handler: (event: MouseEvent, w: number, h: number) => void): this;
+    onResizeEnd(handler: (w: number, h: number) => void): this;
+}
+
+
+export declare function Modal(content: ValidChild, props?: Record<string, unknown>): ModalInterface;
+export declare namespace Modal {
+
+
+    function use(template: (description: ModalDescription, instance: ModalInterface) => ValidChild): void;
+    function preset(name: string, callback: (instance: ModalInterface) => ModalInterface): void;
+    function presets(presets: Record<string, (instance: ModalInterface) => ModalInterface>): void;
+
+
+}

package/src/components/pagination/Pagination.js

@@ -1,8 +1,27 @@
-import BaseComponent from "../BaseComponent";
-import { $ } from "../../core/data/Observable";
-import HasEventEmitter from "../../core/utils/HasEventEmitter";
-import DebugManager from "../../core/utils/debug-manager";
-
+import BaseComponent from '../BaseComponent';
+import { $ } from '../../core/data/Observable';
+import HasEventEmitter from '../../core/utils/HasEventEmitter';
+import DebugManager from '../../core/utils/debug-manager';
+
+/**
+ * Page navigation control with configurable sibling/boundary page counts, first/last and prev/next buttons.
+ *
+ *
+ * @example
+ * const pagination = new Pagination()
+ *     .totalItems(totalObs)
+ *     .pageSize(20)
+ *     .siblingCount(1)
+ *     .showFirstLast(true)
+ *     .onPageChange((page) => loadData(page));
+ *
+ * Pagination.use((description, instance) => {
+ *     return Nav({ class: 'pagination' });
+ * });
+ *
+ * @constructor
+ * @param {GlobalAttributes} [props]
+ */
 export default function Pagination(props = {}) {
     if(!(this instanceof Pagination)) {
         return new Pagination(props);
@@ -29,7 +48,7 @@ export default function Pagination(props = {}) {
         renderFirst: null,
         renderLast: null,
         render: null,
-        props
+        props,
     };
 
     this.$element = null;
@@ -40,10 +59,38 @@ BaseComponent.use(Pagination, HasEventEmitter);
 
 Pagination.defaultTemplate = null;
 
+/**
+ * Registers the render template for Pagination.
+ * @param {(description: {
+ *     currentPage: Observable<number>,
+ *     pages: Observable<number[]>,
+ *     totalPages: Observable<number>,
+ *     pageSize: Observable<number>,
+ *     totalItems: Observable<number>,
+ *     siblingCount: number,
+ *     boundaryCount: number,
+ *     showFirstLast: boolean,
+ *     showPreviousNext: boolean,
+ *     disabled: boolean,
+ *     data: *|null,
+ *     renderPage: ((page: number, isActive: boolean) => NdChild)|null,
+ *     renderEllipsis: (() => NdChild)|null,
+ *     renderPrevious: (() => NdChild)|null,
+ *     renderNext: (() => NdChild)|null,
+ *     renderFirst: (() => NdChild)|null,
+ *     renderLast: (() => NdChild)|null,
+ *     render: ((desc: *, instance: Pagination) => NdChild)|null,
+ *     props: GlobalAttributes,
+ * }, instance: Pagination) => NdChild} template
+ */
 Pagination.use = function(template) {
     Pagination.defaultTemplate = template;
 };
 
+/**
+ * @param {string} name
+ * @param {(p: Pagination) => Pagination} callback
+ */
 Pagination.preset = function(name, callback) {
     if (Pagination.prototype[name] || Pagination[name]) {
         DebugManager.warn(`Warning: the ${name} method already exist in Pagination.`);
@@ -52,6 +99,9 @@ Pagination.preset = function(name, callback) {
     Pagination[name] = (props) => callback(new Pagination(props));
 };
 
+/**
+ * @param {Record<string, (p: Pagination) => Pagination>} presets
+ */
 Pagination.presets = function(presets) {
     for (const name in presets) {
         Pagination.preset(name, presets[name]);
@@ -79,6 +129,11 @@ Pagination.prototype.$build = function() {
 
     return this.$originalBuild();
 };
+
+/**
+ * @param {number|Observable<number>} page
+ * @returns {this}
+ */
 Pagination.prototype.currentPage = function(page) {
     if (typeof page === 'number') {
         this.$description.currentPage.set(page);
@@ -88,51 +143,91 @@ Pagination.prototype.currentPage = function(page) {
     return this;
 };
 
+/**
+ * @param {number} total
+ * @returns {this}
+ */
 Pagination.prototype.totalPages = function(total) {
     this.$description.totalPages.set(total);
     return this;
 };
 
+/**
+ * @param {number|Observable<number>} size
+ * @returns {this}
+ */
 Pagination.prototype.pageSize = function(size) {
     this.$description.pageSize = BaseComponent.obs(size);
     return this;
 };
 
+/**
+ * @param {number|Observable<number>} total
+ * @returns {this}
+ */
 Pagination.prototype.totalItems = function(total) {
     this.$description.totalItems = BaseComponent.obs(total);
     return this;
 };
 
+/**
+ * @param {number} count
+ * @returns {this}
+ */
 Pagination.prototype.siblingCount = function(count) {
     this.$description.siblingCount = count;
     return this;
 };
 
+/**
+ * @param {number} count
+ * @returns {this}
+ */
 Pagination.prototype.boundaryCount = function(count) {
     this.$description.boundaryCount = count;
     return this;
 };
 
+/**
+ * @param {NdChild} [show]
+ * @returns {this}
+ */
 Pagination.prototype.showFirstLast = function(show = true) {
     this.$description.showFirstLast = show;
     return this;
 };
 
+/**
+ * @param {NdChild} [show]
+ * @returns {this}
+ */
 Pagination.prototype.showPreviousNext = function(show = true) {
     this.$description.showPreviousNext = show;
     return this;
 };
 
+/**
+ * @param {boolean|Observable<boolean>} [disabled]
+ * @returns {this}
+ */
 Pagination.prototype.disabled = function(disabled = true) {
     this.$description.disabled = disabled;
     return this;
 };
 
+/**
+ * @param {*} data
+ * @returns {this}
+ */
 Pagination.prototype.data = function(data) {
     this.$description.data = data;
     return this;
 };
 
+/**
+ * @param {number} page
+ * @returns {this}
+ */
 Pagination.prototype.goToPage = function(page) {
     if (page < 1 || page > this.$description.totalPages.val()) {
         return this;
@@ -143,28 +238,46 @@ Pagination.prototype.goToPage = function(page) {
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Pagination.prototype.next = function() {
     const current = this.$description.currentPage.val();
     return this.goToPage(current + 1);
 };
 
+/**
+ * @returns {this}
+ */
 Pagination.prototype.previous = function() {
     const current = this.$description.currentPage.val();
-    return this.goToPage(current - 1)
+    return this.goToPage(current - 1);
 };
 
+/**
+ * @returns {this}
+ */
 Pagination.prototype.first = function() {
     return this.goToPage(1);
 };
 
+/**
+ * @returns {this}
+ */
 Pagination.prototype.last = function() {
     return this.goToPage(this.$description.totalPages.val());
 };
 
+/**
+ * @returns {boolean}
+ */
 Pagination.prototype.hasNext = function() {
     return this.$description.currentPage.val() < this.$description.totalPages.last();
 };
 
+/**
+ * @returns {boolean}
+ */
 Pagination.prototype.hasPrevious = function() {
     return this.$description.currentPage.val() > 1;
 };
@@ -173,6 +286,9 @@ Pagination.prototype.$updatePages = function() {
     this.$description.pages.set(this.getPageNumbers());
 };
 
+/**
+ * @returns {number[]}
+ */
 Pagination.prototype.getPageNumbers = function() {
     const current = this.$description.currentPage.val();
     const total = this.$description.totalPages.val();
@@ -222,41 +338,73 @@ Pagination.prototype.getPageNumbers = function() {
     return pages;
 };
 
+/**
+ * @param {(page: number) => void} handler
+ * @returns {this}
+ */
 Pagination.prototype.onPageChange = function(handler) {
     this.on('pageChange', handler);
     return this;
 };
 
+/**
+ * @param {(page: number) => void} handler
+ * @returns {this}
+ */
 Pagination.prototype.onChange = function(handler) {
     this.on('pageChange', handler);
     return this;
 };
 
+/**
+ * @param {(page: number, isActive: boolean) => NdChild} renderFn
+ * @returns {this}
+ */
 Pagination.prototype.renderPage = function(renderFn) {
     this.$description.renderPage = renderFn;
     return this;
 };
 
+/**
+ * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @returns {this}
+ */
 Pagination.prototype.renderEllipsis = function(renderFn) {
     this.$description.renderEllipsis = renderFn;
     return this;
 };
 
+/**
+ * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @returns {this}
+ */
 Pagination.prototype.renderPrevious = function(renderFn) {
     this.$description.renderPrevious = renderFn;
     return this;
 };
 
+/**
+ * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @returns {this}
+ */
 Pagination.prototype.renderNext = function(renderFn) {
     this.$description.renderNext = renderFn;
     return this;
 };
 
+/**
+ * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @returns {this}
+ */
 Pagination.prototype.renderFirst = function(renderFn) {
     this.$description.renderFirst = renderFn;
     return this;
 };
 
+/**
+ * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @returns {this}
+ */
 Pagination.prototype.renderLast = function(renderFn) {
     this.$description.renderLast = renderFn;
     return this;

package/src/components/pagination/index.js

@@ -1,5 +1,5 @@
-import Pagination from "./Pagination";
+import Pagination from './Pagination';
 
 export {
-    Pagination
-}
+    Pagination,
+};

package/src/components/pagination/types/Pagination.d.ts

@@ -0,0 +1,68 @@
+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 PaginationDescription = {
+        currentPage: ObservableItem<number>;
+        pages: ObservableItem<number[]>;
+        totalPages: ObservableItem<number>;
+        pageSize: ObservableItem<number>;
+        totalItems: ObservableItem<number>;
+        siblingCount: number;
+        boundaryCount: number;
+        showFirstLast: boolean;
+        showPreviousNext: boolean;
+        disabled: boolean;
+        data: unknown | null;
+        renderPage: ((page: number, isActive: boolean) => ValidChild) | null;
+        renderEllipsis: (() => ValidChild) | null;
+        renderPrevious: (() => ValidChild) | null;
+        renderNext: (() => ValidChild) | null;
+        renderFirst: (() => ValidChild) | null;
+        renderLast: (() => ValidChild) | null;
+        render: ((desc: PaginationDescription, instance: PaginationInterface) => ValidChild) | null;
+        props: GlobalAttributes;
+    };
+
+export interface PaginationInterface extends BaseComponent {
+    currentPage(page: number | ObservableItem<number>): this;
+    totalPages(total: number): this;
+    pageSize(size: number | ObservableItem<number>): this;
+    totalItems(total: number | ObservableItem<number>): this;
+    siblingCount(count: number): this;
+    boundaryCount(count: number): this;
+    showFirstLast(show?: boolean): this;
+    showPreviousNext(show?: boolean): this;
+    disabled(disabled?: boolean): this;
+    data(data: unknown): this;
+    goToPage(page: number): this;
+    next(): this;
+    previous(): this;
+    first(): this;
+    last(): this;
+    hasNext(): boolean;
+    hasPrevious(): boolean;
+    getPageNumbers(): number[];
+    onPageChange(handler: (page: number) => void): this;
+    onChange(handler: (page: number) => void): this;
+    renderPage(renderFn: (page: number, isActive: boolean) => ValidChild): this;
+    renderEllipsis(renderFn: () => ValidChild): this;
+    renderPrevious(renderFn: () => ValidChild): this;
+    renderNext(renderFn: () => ValidChild): this;
+    renderFirst(renderFn: () => ValidChild): this;
+    renderLast(renderFn: () => ValidChild): this;
+    render(template: (description: PaginationDescription, instance: PaginationInterface) => ValidChild): this;
+}
+
+
+export declare function Pagination(props?: Record<string, unknown>): PaginationInterface;
+export declare namespace Pagination {
+
+
+    function use(template: (description: PaginationDescription, instance: PaginationInterface) => ValidChild): void;
+    function preset(name: string, callback: (instance: PaginationInterface) => PaginationInterface): void;
+    function presets(presets: Record<string, (instance: PaginationInterface) => PaginationInterface>): void;
+
+
+}