native-document 1.0.165 → 1.0.168

package/src/components/slider/index.js

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

package/src/components/slider/types/Slider.d.ts

@@ -0,0 +1,82 @@
+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 SliderDescription = {
+        name: string;
+        id: string | null;
+        value: ObservableItem<number> | null;
+        defaultValue: number | null;
+        valueStart: ObservableItem<number> | null;
+        valueEnd: ObservableItem<number> | null;
+        range: boolean;
+        min: number;
+        max: number;
+        step: number;
+        showValue: boolean | null;
+        showTooltip: boolean | null;
+        tooltipFormat: ((value: number) => string) | null;
+        renderTooltip: ((value: number) => ValidChild) | null;
+        marks: number[] | Array<{ value: number; label?: ValidChild }> | null;
+        showMarks: boolean | null;
+        variant: string | null;
+        color: string | null;
+        trackColor: string | null;
+        fillColor: string | null;
+        vertical: boolean;
+        height: string | number | null;
+        disabled: ObservableItem<boolean> | boolean | null;
+        readonly: ObservableItem<boolean> | boolean | null;
+        reverse: boolean;
+        snapToMarks: boolean;
+        renderCursor: ((value: number) => ValidChild) | null;
+        renderThumb: ((value: number) => ValidChild) | null;
+        props: GlobalAttributes;
+    };
+
+export interface SliderInterface extends BaseComponent {
+    model(observable: ObservableItem<number>): this;
+    modelStart(observable: ObservableItem<number>): this;
+    modelEnd(observable: ObservableItem<number>): this;
+    defaultValue(value: number): this;
+    setCurrentStep(value: number): this;
+    range(enabled?: boolean): this;
+    min(min: number): this;
+    max(max: number): this;
+    step(step: number): this;
+    showValue(enabled?: boolean): this;
+    showTooltip(enabled?: boolean): this;
+    tooltipFormat(formatFn: (value: number) => string): this;
+    renderTooltip(renderFn: (value: number) => ValidChild): this;
+    marks(marks: number[] | Array<{ value: number; label?: ValidChild }>): this;
+    render(renderFn: (description: SliderDescription, instance: SliderInterface) => ValidChild): this;
+    showMarks(enabled?: boolean): this;
+    snapToMarks(enabled?: boolean): this;
+    variant(name: string): this;
+    secondary(): this;
+    color(color: string): this;
+    trackColor(color: string): this;
+    fillColor(color: string): this;
+    fullColor(color: string): this;
+    vertical(enabled?: boolean): this;
+    height(height: string | number): this;
+    disabled(condition?: boolean | ObservableItem<boolean>): this;
+    readonly(condition?: boolean | ObservableItem<boolean>): this;
+    reverse(enabled?: boolean): this;
+    renderThumb(renderFn: (value: number) => ValidChild): this;
+    renderCursor(renderFn: (value: number) => ValidChild): this;
+    onChange(handler: (value: number) => void): this;
+    onComplete(handler: () => void): this;
+    render(renderFn: (description: SliderDescription, instance: SliderInterface) => ValidChild): this;
+}
+
+
+export declare function Slider(name: string, props?: Record<string, unknown>): SliderInterface;
+export declare namespace Slider {
+
+
+    function use(template: (description: SliderDescription, instance: SliderInterface) => ValidChild): void;
+
+
+}

package/src/components/spacer/Spacer.js

@@ -1,18 +1,27 @@
-import BaseComponent from "../BaseComponent";
+import BaseComponent from '../BaseComponent';
 
-export function Spacer(props = {}) {
+export default function Spacer(props = {}) {
     if (!(this instanceof Spacer)) {
         return new Spacer(props);
     }
     BaseComponent.call(this, props);
     this.$description = {
         type: 'spacer',
-        props
+        props,
     };
 }
 BaseComponent.extends(Spacer);
 
 Spacer.defaultTemplate = null;
+/**
+ *
+ *
+ * Registers the render template for Spacer.
+ * @param {(description: {
+ *     type: 'spacer',
+ *     props: GlobalAttributes,
+ * }, instance: Spacer) => NdChild} template
+ */
 Spacer.use = function(template) {
     Spacer.defaultTemplate = template;
 };

package/src/components/spacer/index.js

@@ -1,5 +1,5 @@
-import Spacer from './spacer';
+import Spacer from './Spacer';
 
 export {
     Spacer,
-}
+};

package/src/components/spacer/types/Spacer.d.ts

@@ -0,0 +1,19 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { BaseComponent } from '../../BaseComponent';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type SpacerDescription = { type: 'spacer'; props: GlobalAttributes; };
+
+export interface SpacerInterface extends BaseComponent {
+    render(renderFn: (description: SpacerDescription, instance: SpacerInterface) => ValidChild): this;
+}
+
+
+export declare function Spacer(props?: Record<string, unknown>): SpacerInterface;
+export declare namespace Spacer {
+
+
+    function use(template: (description: SpacerDescription, instance: SpacerInterface) => ValidChild): void;
+
+
+}

package/src/components/spinner/Spinner.js

@@ -1,6 +1,28 @@
-import BaseComponent from "../BaseComponent";
-import DebugManager from "../../core/utils/debug-manager";
+import BaseComponent from '../BaseComponent';
+import DebugManager from '../../core/utils/debug-manager';
 
+/**
+ * Loading spinner with multiple types (circle, dots, bars, ring, pulse), sizes, variants, label, and overlay mode.
+ *
+ *
+ * @example
+ * const spinner = new Spinner()
+ *     .circle()
+ *     .large()
+ *     .primary()
+ *     .label(Span('Loading…'))
+ *     .labelAtBottom()
+ *     .overlay(true)
+ *     .backdrop(true)
+ *     .loading(isLoadingObs);
+ *
+ * Spinner.use((description, instance) => {
+ *     return Div({ class: \`spinner spinner--\${description.type}\` });
+ * });
+ *
+ * @constructor
+ * @param {GlobalAttributes} [props]
+ */
 export default function Spinner(props = {}) {
     if (!(this instanceof Spinner)) {
         return new Spinner(props);
@@ -18,17 +40,39 @@ export default function Spinner(props = {}) {
         render: null,
         speed: 'normal',
         fullScreenOverlay: null,
-        props
+        props,
     };
 }
 
 Spinner.defaultTemplate = null;
+
+/**
+ * Registers the render template for Spinner.
+ * @param {(description: {
+ *     type: 'circle'|'dots'|'bars'|'pulse'|'ring'|string,
+ *     variant: string,
+ *     color: string|null,
+ *     size: 'extra-small'|'small'|'medium'|'large'|'extra-large'|string|number,
+ *     label: NdChild|null,
+ *     labelPosition: 'top'|'bottom'|'left'|'right'|null,
+ *     overlay: boolean|null,
+ *     backdrop: boolean|null,
+ *     render: ((desc: *, instance: Spinner) => NdChild)|null,
+ *     speed: 'slow'|'normal'|'fast'|string,
+ *     fullScreenOverlay: boolean|null,
+ *     props: GlobalAttributes,
+ * }, instance: Spinner) => NdChild} template
+ */
 Spinner.use = function(template) {
     Spinner.defaultTemplate = template;
 };
 
 BaseComponent.extends(Spinner);
 
+/**
+ * @param {string} name
+ * @param {(s: Spinner) => Spinner} callback
+ */
 Spinner.preset = function(name, callback) {
     if (Spinner.prototype[name] || Spinner[name]) {
         DebugManager.warn(`Warning: the ${name} method already exists in Spinner.`);
@@ -37,57 +81,108 @@ Spinner.preset = function(name, callback) {
     Spinner[name] = (props) => callback(new Spinner(props));
 };
 
+/**
+ * @param {Record<string, (s: Spinner) => Spinner>} presets
+ */
 Spinner.presets = function(presets) {
     for (const name in presets) {
         Spinner.preset(name, presets[name]);
     }
 };
 
+/**
+ * @param {string} type
+ * @returns {this}
+ */
 Spinner.prototype.type = function(type) {
     this.$description.type = type;
     return this;
 };
 
+/**
+ * @returns {this}
+ */
 Spinner.prototype.circle = function() {
     return this.type('circle');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.dots = function() {
     return this.type('dots');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.bars = function() {
     return this.type('bars');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.pulse = function() {
     return this.type('pulse');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.ring = function() {
     return this.type('ring');
 };
 
+
 /**
- * @param {string|int} size
- * @returns {Spinner}
+ * @param {number} size
+ * @returns {this}
  */
 Spinner.prototype.size = function(size) {
     this.$description.size = size;
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.extraSmall = function() {
     return this.size('extra-small');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.small = function() {
     return this.size('small');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.medium = function() {
     return this.size('medium');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.large = function() {
     return this.size('large');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.extraLarge = function() {
     return this.size('extra-large');
 };
 
+/**
+ * @param {string} name
+ * @returns {this}
+ */
 Spinner.prototype.variant = function(name) {
     this.$description.variant = name;
     return this;
@@ -95,52 +190,111 @@ Spinner.prototype.variant = function(name) {
 Spinner.prototype.primary = function() {
     return this.variant('primary');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.secondary = function() {
     return this.variant('secondary');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.success = function() {
     return this.variant('success');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.danger = function() {
     return this.variant('danger');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.warning = function() {
     return this.variant('warning');
-}
+};
+
+/**
+ * @param {string} color
+ * @returns {this}
+ */
 Spinner.prototype.color = function(color) {
     this.$description.color = color;
     return this;
 };
 
+/**
+ * @param {NdChild} label
+ * @returns {this}
+ */
 Spinner.prototype.label = function(label) {
     this.$description.label = label;
     return this;
 };
+
+/**
+ * @param {string} position
+ * @returns {this}
+ */
 Spinner.prototype.labelPosition = function(position) {
     this.$description.labelPosition = position;
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.labelAtTop = function() {
     return this.labelPosition('top');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.labelAtBottom = function() {
     return this.labelPosition('bottom');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.labelAtLeft = function() {
     return this.labelPosition('left');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.labelAtRight = function() {
     return this.labelPosition('right');
 };
 
+/**
+ * @param {*} [enabled]
+ * @returns {this}
+ */
 Spinner.prototype.overlay = function(enabled = true) {
     this.$description.overlay = enabled;
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.fullscreen = function() {
     this.$description.fullScreenOverlay = true;
     return this.overlay(true);
 };
+
+/**
+ * @param {*} [enabled]
+ * @returns {this}
+ */
 Spinner.prototype.backdrop = function(enabled = true) {
     this.$description.overlay = true;
     this.$description.backdrop = enabled;
@@ -148,23 +302,39 @@ Spinner.prototype.backdrop = function(enabled = true) {
 };
 
 /**
- *
- * @param {string|int} speed
- * @returns {Spinner}
+ * @param {*} speed
+ * @returns {this}
  */
 Spinner.prototype.speed = function(speed) {
     this.$description.speed = speed;
     return this;
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.slow = function() {
     return this.speed('slow');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.normal = function() {
     return this.speed('normal');
 };
+
+/**
+ * @returns {this}
+ */
 Spinner.prototype.fast = function() {
     return this.speed('fast');
 };
+
+/**
+ * @param {boolean|Observable<boolean>} isLoading
+ * @returns {this}
+ */
 Spinner.prototype.loading = function(isLoading) {
     this.showIf(isLoading);
     return this;
@@ -174,6 +344,7 @@ Spinner.prototype.bind = Spinner.prototype.loading;
 Spinner.prototype.show = function() {
     this.$description.loading?.set(true);
 };
+
 Spinner.prototype.hide = function() {
     this.$description.loading?.set(false);
 };

package/src/components/spinner/index.js

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

package/src/components/spinner/types/Spinner.d.ts

@@ -0,0 +1,71 @@
+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 SpinnerDescription = {
+        type: 'circle' | 'dots' | 'bars' | 'pulse' | 'ring' | string;
+        variant: string;
+        color: string | null;
+        size: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | string | number;
+        label: ValidChild | null;
+        labelPosition: 'top' | 'bottom' | 'left' | 'right' | null;
+        overlay: boolean | null;
+        backdrop: boolean | null;
+        render: ((desc: SpinnerDescription, instance: SpinnerInterface) => ValidChild) | null;
+        speed: 'slow' | 'normal' | 'fast' | string;
+        fullScreenOverlay: boolean | null;
+        props: GlobalAttributes;
+    };
+
+export interface SpinnerInterface extends BaseComponent {
+    type(type: 'circle' | 'dots' | 'bars' | 'pulse' | 'ring' | string): this;
+    circle(): this;
+    dots(): this;
+    bars(): this;
+    pulse(): this;
+    ring(): this;
+    size(size: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | string | number): this;
+    extraSmall(): this;
+    small(): this;
+    medium(): this;
+    large(): this;
+    extraLarge(): this;
+    variant(name: string): this;
+    primary(): this;
+    secondary(): this;
+    success(): this;
+    danger(): this;
+    warning(): this;
+    color(color: string): this;
+    label(label: ValidChild): this;
+    labelPosition(position: 'top' | 'bottom' | 'left' | 'right'): this;
+    labelAtTop(): this;
+    labelAtBottom(): this;
+    labelAtLeft(): this;
+    labelAtRight(): this;
+    overlay(enabled?: boolean): this;
+    fullscreen(): this;
+    backdrop(enabled?: boolean): this;
+    speed(speed: 'slow' | 'normal' | 'fast' | string | number): this;
+    slow(): this;
+    normal(): this;
+    fast(): this;
+    loading(isLoading: boolean | ObservableItem<boolean>): this;
+    bind(isLoading: boolean | ObservableItem<boolean>): this;
+    render(renderFn: (description: SpinnerDescription, instance: SpinnerInterface) => ValidChild): this;
+    show(): this;
+    hide(): this;
+}
+
+
+export declare function Spinner(props?: Record<string, unknown>): SpinnerInterface;
+export declare namespace Spinner {
+
+
+    function use(template: (description: SpinnerDescription, instance: SpinnerInterface) => ValidChild): void;
+    function preset(name: string, callback: (instance: SpinnerInterface) => SpinnerInterface): void;
+    function presets(presets: Record<string, (instance: SpinnerInterface) => SpinnerInterface>): void;
+
+
+}