native-document 1.0.138 → 1.0.140

package/src/components/stacks/PositionStack.js

@@ -0,0 +1,146 @@
+import BaseComponent from "../BaseComponent";
+
+export default function PositionStack(content, props = {}) {
+    if(!(this instanceof PositionStack)) {
+        return new PositionStack(content, props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        position: 'absolute',
+        content:  content,
+        top: null,
+        right: null,
+        bottom: null,
+        left: null,
+        width: null,
+        height: null,
+        zIndex: null,
+        anchor: null,
+        props
+    };
+}
+
+BaseComponent.extends(PositionStack);
+
+PositionStack.defaultTemplate = null;
+PositionStack.use = function(template) {
+    PositionStack.defaultTemplate = template;
+};
+
+PositionStack.prototype.top = function(value) {
+    this.$description.top = value;
+    return this;
+};
+
+PositionStack.prototype.right = function(value) {
+    this.$description.right = value;
+    return this;
+};
+
+PositionStack.prototype.bottom = function(value) {
+    this.$description.bottom = value;
+    return this;
+};
+
+PositionStack.prototype.left = function(value) {
+    this.$description.left = value;
+    return this;
+};
+
+PositionStack.prototype.fill = function() {
+    this.$description.anchor = 'fill';
+    return this;
+};
+PositionStack.prototype.topLeading = function() {
+    this.$description.anchor = 'top-leading';
+    return this;
+};
+
+PositionStack.prototype.atTopCenter = function() {
+    this.$description.anchor = 'top-center';
+    return this;
+};
+
+PositionStack.prototype.atTopTrailing = function() {
+    this.$description.anchor = 'top-trailing';
+    return this;
+};
+
+PositionStack.prototype.atCenterLeading = function() {
+    this.$description.anchor = 'center-leading';
+    return this;
+};
+
+PositionStack.prototype.atCenter = function() {
+    this.$description.anchor = 'center';
+    return this;
+};
+
+PositionStack.prototype.atCenterTrailing = function() {
+    this.$description.anchor = 'center-trailing';
+    return this;
+};
+
+PositionStack.prototype.atBottomLeading = function() {
+    this.$description.anchor = 'bottom-leading';
+    return this;
+};
+
+PositionStack.prototype.atBottomCenter = function() {
+    this.$description.anchor = 'bottom-center';
+    return this;
+};
+
+PositionStack.prototype.atBottomTrailing = function() {
+    this.$description.anchor = 'bottom-trailing';
+    return this;
+};
+
+PositionStack.prototype.width = function(value) {
+    this.$description.width = value;
+    return this;
+};
+
+PositionStack.prototype.height = function(value) {
+    this.$description.height = value;
+    return this;
+};
+
+PositionStack.prototype.size = function(width, height) {
+    this.$description.width  = width;
+    this.$description.height = height ?? width;
+    return this;
+};
+
+PositionStack.prototype.fullWidth = function() {
+    this.$description.width = '100%';
+    return this;
+};
+
+PositionStack.prototype.fullHeight = function() {
+    this.$description.height = '100%';
+    return this;
+};
+
+PositionStack.prototype.fullSize = function() {
+    this.$description.width  = '100%';
+    this.$description.height = '100%';
+    return this;
+};
+
+PositionStack.prototype.zIndex = function(value) {
+    this.$description.zIndex = value;
+    return this;
+};
+
+PositionStack.prototype.above = function(zIndex = 100) {
+    this.$description.zIndex = zIndex;
+    return this;
+};
+
+PositionStack.prototype.below = function() {
+    this.$description.zIndex = -1;
+    return this;
+};

package/src/components/stacks/RelativeStack.js

@@ -0,0 +1,33 @@
+import BaseComponent from "../BaseComponent";
+import PositionStack from "./PositionStack";
+import DebugManager from "../../core/utils/debug-manager";
+
+export default function RelativeStack(content, props = {}) {
+    if(!(this instanceof RelativeStack)) {
+        return new RelativeStack(content, props);
+    }
+    PositionStack.call(this, content, props);
+    this.$description.position = 'relative';
+}
+
+BaseComponent.extends(RelativeStack, PositionStack);
+
+RelativeStack.defaultTemplate = null;
+
+RelativeStack.use = function(template) {
+    RelativeStack.defaultTemplate = template;
+};
+
+RelativeStack.preset = function(name, callback) {
+    if(RelativeStack.prototype[name] || RelativeStack[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exists in RelativeStack.`);
+        return;
+    }
+    RelativeStack[name] = (content, props) => callback(new RelativeStack(content, props));
+};
+
+RelativeStack.presets = function(presets) {
+    for(const name in presets) {
+        RelativeStack.preset(name, presets[name]);
+    }
+};

package/src/components/{layouts → stacks}/Stack.js

@@ -12,10 +12,14 @@ export default function Stack(content, props = {}) {
     this.$description = {
         orientation: 'horizontal',
         content: content,
-        spacing: 0,
+        spacing: null,
         alignment: 'center',
-        justifyContent: 'start',
-        props
+        justifyContent: 'between',
+        wrap: false,
+        grow: false,
+        shrink: false,
+        reverse: false,
+        props,
     };
 }
 
@@ -27,6 +31,21 @@ Stack.prototype.wrap = function(enabled = true) {
     return this;
 };
 
+Stack.prototype.grow = function(enabled = true) {
+    this.$description.grow = enabled;
+    return this;
+};
+
+Stack.prototype.reverse = function(enabled = true) {
+    this.$description.reverse = enabled;
+    return this;
+};
+
+Stack.prototype.shrink = function(enabled = true) {
+    this.$description.shrink = enabled;
+    return this;
+};
+
 Stack.prototype.spacing = function(value) {
     this.$description.spacing = value;
     return this;

package/src/components/{layouts → stacks}/index.js

@@ -1,19 +1,21 @@
 import Stack from "./Stack";
 import VStack from "./VStack";
-import ZStack from "./ZStack";
+import FixedStack from "./FixedStack";
 import HStack from "./HStack";
+import AbsoluteStack from "./AbsoluteStack";
+import RelativeStack from "./RelativeStack";
 
 
 const Row = HStack;
 const Col = VStack;
-const Overlay = ZStack;
 
 export {
     Stack,
     HStack,
     VStack,
-    ZStack,
+    FixedStack,
+    RelativeStack,
+    AbsoluteStack,
     Row,
     Col,
-    Overlay
 }

package/src/components/stepper/Stepper.js

@@ -1,19 +1,24 @@
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import {$, Validator} from "../../../index";
+import DebugManager from "../../core/utils/debug-manager";
+import StepperStep from "./StepperStep";
 
-export default function Stepper(config = {}) {
+export default function Stepper(props = {}) {
     if(!(this instanceof Stepper)) {
-        return new Stepper(config);
+        return new Stepper(props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
-        steps: [],
+        steps: $.array(),
+        visibleSteps: $.array(),
         currentStep: $(0),
         orientation: 'horizontal',
         linear: true,
         alternativeLabel: false,
-        editable: false,
+        editable: $(true),
         showNumbers: true,
         showConnector: true,
         data: null,
@@ -21,67 +26,102 @@ export default function Stepper(config = {}) {
         renderStepIndicatorConnector: null,
         renderContent: null,
         render: null,
-        ...config
+        position: 'bottom',
+        props
     };
 
     this.$element = null;
 }
 
-BaseComponent.extends(Stepper, HasEventEmitter);
+BaseComponent.extends(Stepper);
+BaseComponent.use(Stepper, HasEventEmitter);
 
 Stepper.defaultTemplate = null;
-Stepper.defaultStepTemplate = null;
-Stepper.defaultStepConnectorTemplate = null;
-Stepper.defaultContentTemplate = null;
 
 Stepper.use = function(template) {
-    Stepper.defaultTemplate = template.stepper;
-    Stepper.defaultStepIndicatorTemplate = template.stepperStepIndicator;
-    Stepper.defaultContentTemplate = template.stepperContent;
-    Stepper.defaultStepIndicatorConnectorTemplate = template.stepperStepIndicatorConnector;
+    Stepper.defaultTemplate = template;
 };
 
-Stepper.prototype.dynamic = function(observableArray) {
-    this.$description.steps = observableArray || $.array([]);
-    return this;
+Stepper.preset = function(name, callback) {
+    if (Stepper.prototype[name] || Stepper[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exist in Stepper.`);
+        return;
+    }
+    Stepper[name] = (props) => callback(new Stepper(props));
 };
 
-Stepper.prototype.steps = function(steps) {
-    if(Validator.isObservable(steps)) {
-        this.$description.steps = steps;
-        return this;
+Stepper.presets = function(presets) {
+    for (const name in presets) {
+        Stepper.preset(name, presets[name]);
     }
-    this.$description.steps.set(steps);
-    return this;
 };
 
-Stepper.prototype.step = function(step) {
-    this.$description.steps.push(step);
-    return this;
-};
+Stepper.prototype.$originalBuild = BaseComponent.prototype.$build;
 
-Stepper.prototype.clear = function() {
+Stepper.prototype.$build = function() {
+    const visibleSteps = this.$description.visibleSteps;
     const steps = this.$description.steps;
-    if (Array.isArray(steps)) {
-        steps.length = 0;
-        return this;
-    }
 
-    steps.clear();
-    return this;
+    steps.forEach(step => {
+        if(!step.$description.visibility) {
+            visibleSteps.push(step);
+            return;
+        }
+        if(step.$description.visibility.val()) {
+            visibleSteps.push(step);
+        }
+
+        step.$description.visibility.subscribe((value) => {
+            if(!value) {
+                visibleSteps.removeItem(step);
+                return;
+            }
+            const originalIndex = steps.indexOf(step);
+            let stepBefore = null;
+
+            for (let i = 0; i < visibleSteps.length; i++) {
+                const itemStep = visibleSteps.get(i);
+                if (steps.indexOf(itemStep) < originalIndex) {
+                    stepBefore = itemStep
+                    continue;
+                }
+                break;
+            }
+            if(!stepBefore) {
+                visibleSteps.push(step);
+                return;
+            }
+            visibleSteps.insertAfter(step, stepBefore);
+        });
+    });
+
+    const updateStateIndexes = () => {
+        this.$description.visibleSteps.forEach((step, index) => step.$setIndex(index));
+    };
+    this.$description.visibleSteps.subscribe(updateStateIndexes);
+    updateStateIndexes();
+    return this.$originalBuild();
 };
 
-Stepper.prototype.removeStepByIndex = function(index) {
-    this.$description.steps.splice(index, 1);
+Stepper.prototype.step = function(step) {
+    let finalStep = null;
+    if(typeof step === 'function') {
+        finalStep = new StepperStep(null);
+        step(finalStep, this);
+    }
+    else {
+        finalStep = (step instanceof StepperStep)
+            ? step
+            : (new StepperStep(step.label)).setDescription(step);
+    }
+
+    this.$description.steps.push(finalStep);
     return this;
 };
 
-Stepper.prototype.removeStepByKey = function(key) {
-    const index = this.$description.steps.findIndex(step => step.getKey() === key);
-    if(index === -1) {
-        return this;
-    }
-    this.$description.steps.splice(index, 1);
+Stepper.prototype.clear = function() {
+    this.$description.steps.clear();
+    this.$description.visibleSteps.clear();
     return this;
 };
 
@@ -115,7 +155,7 @@ Stepper.prototype.nonLinear = function() {
 };
 
 Stepper.prototype.editable = function(editable = true) {
-    this.$description.editable = editable;
+    this.$description.editable.set(editable);
     return this;
 };
 
@@ -140,50 +180,76 @@ Stepper.prototype.data = function(data) {
     return this;
 };
 
-Stepper.prototype.next = function() {
-    const current = this.$description.currentStep.val();
-    const total = this.$description.steps.length;
-
-    if (current < total - 1) {
-        const nextStep = current + 1;
-        this.$description.currentStep.set(nextStep);
-        this.emit('stepChange', nextStep);
+Stepper.prototype.next = async function() {
+    const currentIdx = this.$description.currentStep.val();
+    const total = this.$description.visibleSteps.length;
+
+    if (currentIdx === total - 1) {
+        const lastStep = this.$description.visibleSteps.at(currentIdx);
+        const isValid = await lastStep.validate();
+        if (isValid) {
+            lastStep.completed(true);
+            this.emit('complete');
+        } else {
+            lastStep.error(true);
+            this.emit('stepError', currentIdx);
+        }
+        return this;
     }
-    return this;
+
+    return this.goToStep(currentIdx + 1);
 };
 
 Stepper.prototype.previous = function() {
-    const current = this.$description.currentStep.val();
-    if (current > 0) {
-        const previousStep = current - 1;
-        this.$description.currentStep.set(previousStep);
-        this.emit('stepChange', previousStep);
-    }
-    return this;
+    const currentIdx = this.$description.currentStep.val();
+    return this.goToStep(currentIdx - 1);
 };
 
-Stepper.prototype.goToStep = function(index) {
-    const total = this.$description.steps.length;
-    const current = this.$description.currentStep.val();
+Stepper.prototype.goToStep = async function(index) {
+    const visibleSteps = this.$description.visibleSteps;
+    const total = visibleSteps.length;
+    const currentIdx = this.$description.currentStep.val();
 
-    if (index < 0 || index >= total) {
+    if (index < 0 || index >= total || index === currentIdx) {
         return this;
     }
 
-    if(!this.$description.editable && index < current) {
+    const currentStep = visibleSteps.at(currentIdx);
+
+    if (index < currentIdx) {
+        if (this.$description.editable.val()) {
+            this.$description.currentStep.set(index);
+            this.emit('stepChange', index);
+        }
         return this;
     }
-    if(this.$description.linear && !(index === current+1 || index === current-1)) {
-        return this;
 
+    if (index > currentIdx) {
+        if (this.$description.linear && index > currentIdx + 1) {
+            return this;
+        }
+
+        const isValid = await currentStep.validate();
+        if (isValid) {
+            currentStep.completed(true);
+            this.$description.currentStep.set(index);
+            this.emit('stepChange', index);
+        } else {
+            currentStep.error(true);
+            this.emit('stepError', currentIdx);
+        }
     }
-    this.$description.currentStep.set(index);
-    this.emit('stepChange', index);
+
     return this;
 };
 
 Stepper.prototype.reset = function() {
     this.$description.currentStep.set(0);
+
+    this.$description.steps.forEach(step => {
+        step.reset();
+    });
+
     this.emit('reset');
     return this;
 };
@@ -227,3 +293,29 @@ Stepper.prototype.renderContent = function(renderFn) {
     this.$description.renderContent = renderFn;
     return this;
 };
+
+
+Stepper.prototype.navigationAtLeading = function() {
+    this.$description.position = 'leading';
+    this.vertical();
+    return this;
+};
+
+Stepper.prototype.navigationAtBottom = function() {
+    this.$description.position = 'bottom';
+    this.horizontal();
+    return this;
+};
+
+
+Stepper.prototype.navigationAtTop = function() {
+    this.$description.position = 'top';
+    this.horizontal()
+    return this;
+};
+
+Stepper.prototype.navigationAtTrailing = function() {
+    this.$description.position = 'trailing';
+    this.vertical();
+    return this;
+};

package/src/components/stepper/StepperStep.js

@@ -1,14 +1,18 @@
 import BaseComponent from "../BaseComponent";
 import { $ } from '../../../index';
 
-export default function StepperStep(label, config = {}) {
+const NO_VALIDATION = () => true;
+
+export default function StepperStep(label, props = {}) {
     if(!(this instanceof StepperStep)) {
-        return new StepperStep(label, config);
+        return new StepperStep(label, props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
         icon: null,
-        label: label,
+        label,
         description: null,
         content: null,
         status: $('pending'),
@@ -18,9 +22,12 @@ export default function StepperStep(label, config = {}) {
         error: $(false),
         data: null,
         render: null,
-        validator: null,
+        validator: NO_VALIDATION,
+        stepper: null,
         key: null,
-        ...config
+        index: $(0),
+        isVisible: $(true),
+        props
     };
 }
 
@@ -29,9 +36,19 @@ BaseComponent.extends(StepperStep);
 StepperStep.defaultTemplate = null;
 
 StepperStep.use = function(template) {
-    StepperStep.defaultTemplate = template.stepperStep;
+    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;
+};
+
+
 StepperStep.prototype.icon = function(icon) {
     this.$description.icon = icon;
     return this;
@@ -67,16 +84,26 @@ StepperStep.prototype.disabled = function(disabled = true) {
     return this;
 };
 
-StepperStep.prototype.completed = function(completed = true) {
-    this.$description.completed.set(completed);
-    this.$description.status.set(completed ? 'completed' : 'pending');
+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;
 };
 
+StepperStep.prototype.completed = function(completed = true) {
+    return this.updateStatus(completed ? 'completed' : 'pending');
+};
+
 StepperStep.prototype.error = function(error = true) {
-    this.$description.error.set(error);
-    this.$description.status.set(error ? 'error' : 'pending');
-    return this;
+    return this.updateStatus(error ? 'error' : 'pending');
+};
+
+StepperStep.prototype.reset = function() {
+    return this.updateStatus('pending');
 };
 
 StepperStep.prototype.data = function(data) {
@@ -93,11 +120,21 @@ StepperStep.prototype.getKey = function() {
     return this.$description.key;
 };
 
+StepperStep.prototype.visibility = function(condition) {
+    this.$description.visibility = (typeof condition === 'function' ?  condition() : condition);
+    return this;
+};
+
 StepperStep.prototype.validator = function(validatorFn) {
     this.$description.validator = validatorFn;
     return this;
 };
 
 StepperStep.prototype.validate = function() {
+    if (this.$description.validator) {
+        const isValid = this.$description.validator(this);
+        this.error(!isValid);
+        return isValid;
+    }
     return true;
 };