native-document 1.0.16 → 1.0.17-1.2

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

@@ -0,0 +1,28 @@
+import BaseComponent from '../BaseComponent';
+
+export default function Spacer(props = {}) {
+    if (!(this instanceof Spacer)) {
+        return new Spacer(props);
+    }
+    BaseComponent.call(this, props);
+    this.$description = {
+        type: 'spacer',
+        props,
+    };
+    this.aria = { 'aria-hidden': 'true' };
+}
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,351 @@
+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);
+    }
+
+    this.$description = {
+        type: 'circle',
+        variant: 'primary',
+        color: null,
+        size: 'small',
+        label: null,
+        labelPosition: null,
+        overlay: null,
+        backdrop: null,
+        render: null,
+        speed: 'normal',
+        fullScreenOverlay: null,
+        props,
+    };
+    this.aria = { 'role': 'status', 'aria-label': 'Loading' };
+}
+
+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.`);
+        return;
+    }
+    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 {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;
+};
+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;
+    return this;
+};
+
+/**
+ * @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;
+};
+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

@@ -0,0 +1,5 @@
+import Spinner from './Spinner';
+
+export {
+    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;
+
+
+}