native-document 1.0.16 → 1.0.17-1.2

package/src/components/stepper/StepperStep.js

@@ -0,0 +1,242 @@
+import BaseComponent from '../BaseComponent';
+import { $ } from '../../core/data/Observable';
+
+const NO_VALIDATION = () => true;
+
+/**
+ * A single step inside a Stepper. Manages label, description, icon, status (pending/completed/error), optional flag, and async validation.
+ *
+ *
+ * @example
+ * const step = new StepperStep(Span('Payment'))
+ *     .description(Span('Enter payment details'))
+ *     .content(PaymentForm())
+ *     .optional(false)
+ *     .validator(async (step) => {
+ *         return await validatePayment();
+ *     })
+ *     .onComplete(() => console.log('step done'));
+ *
+ * @constructor
+ * @param {NdChild} label
+ * @param {GlobalAttributes} [props={}]
+ */
+export default function StepperStep(label, props = {}) {
+    if(!(this instanceof StepperStep)) {
+        return new StepperStep(label, props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        icon: null,
+        label,
+        description: null,
+        content: null,
+        status: $('pending'),
+        optional: $(false),
+        disabled: $(false),
+        completed: $(false),
+        error: $(false),
+        data: null,
+        render: null,
+        validator: NO_VALIDATION,
+        stepper: null,
+        key: null,
+        index: $(0),
+        isVisible: $(true),
+        props,
+    };
+    this.aria = { 'role': 'listitem', 'tabindex': '0' };
+}
+
+BaseComponent.extends(StepperStep);
+
+StepperStep.defaultTemplate = null;
+
+/**
+ * Registers the render template for StepperStep.
+ * @param {(description: {
+ *     icon: NdChild|null,
+ *     label: NdChild,
+ *     description: NdChild|null,
+ *     content: NdChild|null,
+ *     status: Observable<'pending'|'completed'|'error'>,
+ *     optional: Observable<boolean>,
+ *     disabled: Observable<boolean>,
+ *     completed: Observable<boolean>,
+ *     error: Observable<boolean>,
+ *     data: *|null,
+ *     render: ((desc: *, instance: StepperStep) => NdChild)|null,
+ *     key: string|null,
+ *     index: Observable<number>,
+ *     isVisible: Observable<boolean>,
+ *     props: GlobalAttributes,
+ * }, instance: StepperStep) => NdChild} template
+ */
+StepperStep.use = function(template) {
+    StepperStep.defaultTemplate = template;
+};
+
+StepperStep.prototype.$setStepper = function(stepper) {
+    this.$description.stepper = stepper;
+    return this;
+};
+StepperStep.prototype.$setIndex = function(index) {
+    this.$description.index.set(index);
+    return this;
+};
+
+/**
+ * @param {NdChild} icon
+ * @returns {this}
+ */
+StepperStep.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+/**
+ * @param {NdChild} label
+ * @returns {this}
+ */
+StepperStep.prototype.label = function(label) {
+    this.$description.label = label;
+    return this;
+};
+
+/**
+ * @param {NdChild} description
+ * @returns {this}
+ */
+StepperStep.prototype.description = function(description) {
+    this.$description.description = description;
+    return this;
+};
+
+/**
+ * @param {NdChild} content
+ * @returns {this}
+ */
+StepperStep.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+/**
+ * @param {'pending'|'completed'|'error'} status
+ * @returns {this}
+ */
+StepperStep.prototype.status = function(status) {
+    this.$description.status.set(status);
+    return this;
+};
+
+/**
+ * @param {*} [optional]
+ * @returns {this}
+ */
+StepperStep.prototype.optional = function(optional = true) {
+    this.$description.optional.set(optional);
+    return this;
+};
+
+/**
+ * @param {boolean|Observable<boolean>} [disabled]
+ * @returns {this}
+ */
+StepperStep.prototype.disabled = function(disabled = true) {
+    this.$description.disabled.set(disabled);
+    return this;
+};
+
+/**
+ * @param {'pending'|'completed'|'error'} status
+ */
+StepperStep.prototype.updateStatus = function(status) {
+    const isCompleted = status === 'completed';
+    const isError = status === 'error';
+
+    this.$description.completed.set(isCompleted);
+    this.$description.error.set(isError);
+    this.$description.status.set(status);
+    return this;
+};
+
+/**
+ * @param {*} [completed]
+ * @returns {this}
+ */
+StepperStep.prototype.completed = function(completed = true) {
+    return this.updateStatus(completed ? 'completed' : 'pending');
+};
+
+/**
+ * @param {*} [error]
+ * @returns {this}
+ */
+StepperStep.prototype.error = function(error = true) {
+    return this.updateStatus(error ? 'error' : 'pending');
+};
+
+/**
+ * @returns {this}
+ */
+StepperStep.prototype.reset = function() {
+    return this.updateStatus('pending');
+};
+
+/**
+ * @param {*} data
+ * @returns {this}
+ */
+StepperStep.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+/**
+ * @param {string} key
+ * @returns {this}
+ */
+StepperStep.prototype.key = function(key) {
+    this.$description.key = key;
+    return this;
+};
+
+/**
+ * @returns {string}
+ */
+StepperStep.prototype.getKey = function() {
+    return this.$description.key;
+};
+
+/**
+ * @param {Observable<boolean>|boolean|(() => Observable<boolean>)} condition
+ * @returns {this}
+ */
+StepperStep.prototype.visibility = function(condition) {
+    this.$description.visibility = (typeof condition === 'function' ?  condition() : condition);
+    return this;
+};
+
+/**
+ * @param {(step: StepperStep) => boolean|Promise<boolean>} validatorFn
+ * @returns {this}
+ */
+StepperStep.prototype.validator = function(validatorFn) {
+    this.$description.validator = validatorFn;
+    return this;
+};
+
+/**
+ * @returns {boolean}
+ */
+StepperStep.prototype.validate = function() {
+    if (this.$description.validator) {
+        const isValid = this.$description.validator(this);
+        this.error(!isValid);
+        return isValid;
+    }
+    return true;
+};

package/src/components/stepper/index.js

@@ -0,0 +1,8 @@
+import Stepper from './Stepper';
+import StepperStep from './StepperStep';
+
+
+export {
+    Stepper,
+    StepperStep,
+};

package/src/components/stepper/types/Stepper.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 { StepperStepInterface } from './StepperStep';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type StepperDescription = {
+        steps: ObservableItem<StepperStepInterface[]>;
+        visibleSteps: ObservableItem<StepperStepInterface[]>;
+        currentStep: ObservableItem<number>;
+        orientation: 'horizontal' | 'vertical';
+        linear: boolean;
+        alternativeLabel: boolean;
+        editable: ObservableItem<boolean>;
+        showNumbers: boolean;
+        showConnector: boolean;
+        data: unknown | null;
+        renderStepIndicator: ((step: StepperStepInterface, index: number) => ValidChild) | null;
+        renderStepIndicatorConnector: ((desc: unknown) => ValidChild) | null;
+        renderContent: ((step: StepperStepInterface) => ValidChild) | null;
+        render: ((desc: StepperDescription, instance: StepperInterface) => ValidChild) | null;
+        position: 'top' | 'bottom' | 'leading' | 'trailing';
+        props: GlobalAttributes;
+    };
+
+export interface StepperInterface extends BaseComponent {
+    step(step: StepperStepInterface | ((step: StepperStepInterface, stepper: StepperInterface) => void)): this;
+    clear(): this;
+    currentStep(step?: number): number | this;
+    orientation(orientation: 'horizontal' | 'vertical'): this;
+    horizontal(): this;
+    vertical(): this;
+    linear(): this;
+    nonLinear(): this;
+    editable(editable?: boolean): this;
+    alternativeLabel(alternative?: boolean): this;
+    showNumbers(show?: boolean): this;
+    showConnector(show?: boolean): this;
+    data(data: unknown): this;
+    previous(): this;
+    reset(): this;
+    onStepChange(handler: (index: number) => void): this;
+    onNext(handler: () => void): this;
+    onPrevious(handler: () => void): this;
+    onComplete(handler: () => void): this;
+    onReset(handler: () => void): this;
+    renderStepIndicator(renderFn: (step: StepperStepInterface, index: number) => ValidChild): this;
+    renderStepIndicatorConnector(renderFn: (desc: unknown) => ValidChild): this;
+    renderContent(renderFn: (step: StepperStepInterface) => ValidChild): this;
+    navigationAtLeading(): this;
+    navigationAtBottom(): this;
+    navigationAtTop(): this;
+    navigationAtTrailing(): this;
+
+    render(renderFn: (description: StepperDescription, instance: StepperInterface) => ValidChild): this;
+}
+
+
+export declare function Stepper(props?: Record<string, unknown>): StepperInterface;
+export declare namespace Stepper {
+
+
+    function use(template: (description: StepperDescription, instance: StepperInterface) => ValidChild): void;
+    function preset(name: string, callback: (instance: StepperInterface) => StepperInterface): void;
+    function presets(presets: Record<string, (instance: StepperInterface) => StepperInterface>): void;
+
+
+}

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

@@ -0,0 +1,267 @@
+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);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        value: $(false),
+        label: null,
+        labelPosition: $('right'),
+        variant: $('primary'),
+        outline: false,
+        disabled: false,
+        loading: false,
+        readonly: false,
+        onIcon: null,
+        offIcon: null,
+        innerOnLabel: null,
+        innerOffLabel: null,
+    };
+    this.aria = { 'role': 'switch' };
+}
+
+BaseComponent.extends(Switch);
+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;
+};
+
+/**
+ * @returns {this}
+ */
+Switch.prototype.setOn = function() {
+    this.$description.value.set(true);
+    return this;
+};
+
+/**
+ * @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

@@ -0,0 +1,6 @@
+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;
+
+
+}