native-document 1.0.138 → 1.0.140

package/src/components/skeleton/Skeleton.js

@@ -1,5 +1,7 @@
 import BaseComponent from "../BaseComponent";
 import DebugManager from "../../core/utils/debug-manager";
+import { HStack, VStack } from "../stacks/index";
+import {Div} from "../../core/elements/index";
 
 export default function Skeleton(props = {}) {
     if (!(this instanceof Skeleton)) {
@@ -26,7 +28,7 @@ BaseComponent.extends(Skeleton);
 Skeleton.defaultTemplate = null;
 
 Skeleton.use = function(template) {
-    Skeleton.defaultTemplate = template.skeleton;
+    Skeleton.defaultTemplate = template;
 };
 
 Skeleton.preset = function(name, callback) {
@@ -117,21 +119,42 @@ Skeleton.prototype.repeat = function(times) {
 };
 
 
-Skeleton.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
-    return this;
+Skeleton.card = function(type) {
+    return VStack([
+        Skeleton().type('image').height(200),
+        VStack([
+            Skeleton().text(1),
+            Skeleton().text(2),
+        ]).spacing('cozy')
+    ], { class: 'skeleton-card '+type }).spacing('cozy');
 };
 
+Skeleton.list = function(items = 3) {
+    return VStack(
+        Array.from({length: items}, () =>
+            HStack([
+                Div({ class: 'skeleton-list-item-avatar' }, Skeleton().circle().size(40, 40)),
+                Div({ class: 'skeleton-list-item-text' }, Skeleton().text(2)),
+            ], { class: 'skeleton-list-item' }).spacing('comfortable').alignCenter()
+        )
+    ).spacing('comfortable');
+};
 
-Skeleton.prototype.$build = function() {
+Skeleton.table = function(rows = 5, cols = 4) {
+    const buildRow = () =>
+        HStack(
+            Array.from({length: cols}, () =>
+                Div({ class: 'skeleton-table-col' }, Skeleton().rect().height(16))
+            ),
+            { class: 'skeleton-table-row' }
+        ).spacing('comfortable').alignCenter();
 
-};
-Skeleton.prototype.toNdElement = function() {
-    return this.$build();
+    return VStack([
+        buildRow(),
+        ...Array.from({length: rows}, () => buildRow())
+    ]).spacing('cozy');
 };
 
-// Presets
-Skeleton.card = function() {}; // Preset pour card
-Skeleton.list = function(items = 3) {}; // Preset pour liste
-Skeleton.table = function(rows = 5, cols = 4) {}; // Preset pour tableau
-Skeleton.paragraph = function(lines = 3) {}; // Preset pour paragraphe
+Skeleton.paragraph = function(lines = 3) {
+    return Skeleton().text(lines);
+};

package/src/components/slider/Slider.js

@@ -1,51 +1,72 @@
-import BaseComponent from "../BaseComponent";
-import HasEventEmitter from "../../core/utils/HasEventEmitter";
+import Field from "../form/field/Field";
 
-export default function Slider(config = {}) {
-    if (!(this instanceof Slider)) {
-        return new Slider(config);
+export default function Slider(name, props = {}) {
+    if(!(this instanceof Slider)) {
+        return new Slider(props);
     }
 
+    Field.call(this, props);
+
     this.$description = {
-        value: null,
-        defaultValue: null,
-        range: null,
-        min: null,
-        max: null,
-        step: null,
-        showValue: null,
-        showTooltip: null,
+        name,
+        id: name || null,
+        value:         null,
+        defaultValue:  null,
+        valueStart:    null,
+        valueEnd:      null,
+        range:         false,
+        min:           0,
+        max:           100,
+        step:          1,
+        showValue:     null,
+        showTooltip:   null,
         tooltipFormat: null,
-        marks: null,
-        showMarks: null,
-        variant: null,
-        color: null,
-        trackColor: null,
-        vertical: null,
-        height: null,
-        disabled: null,
-        readonly: null,
-        reverse: null,
-        snapToMarks: null,
-        render: null,
-        renderCursor: null,
-        ...config
+        renderTooltip: null,
+        marks:         null,
+        showMarks:     null,
+        variant:       null,
+        color:         null,
+        trackColor:    null,
+        fillColor:    null,
+        vertical:      false,
+        height:        null,
+        disabled:      null,
+        readonly:      null,
+        reverse:       false,
+        snapToMarks:   false,
+        renderCursor:  null,
+        renderThumb:   null,
+        props
     };
 }
 
-BaseComponent.extends(Slider, HasEventEmitter);
+Slider.prototype = Object.create(Field.prototype);
+Slider.prototype.constructor = Slider;
+
 
-Slider.use = function(template) {};
 Slider.defaultTemplate = null;
+Slider.use = function(template) {
+    Slider.defaultTemplate = template;
+};
+
+Slider.prototype.model = function(observable) {
+    this.$description.value = observable;
+    return this;
+};
 
+Slider.prototype.modelStart = function(observable) {
+    this.$description.valueStart = observable;
+    return this;
+};
 
-Slider.prototype.value = function(value) {
-    this.$description.value = value;
+Slider.prototype.modelEnd = function(observable) {
+    this.$description.valueEnd = observable;
     return this;
 };
 
-Slider.prototype.value = function() {
-    return this.$description.value?.val();
+Slider.prototype.defaultValue = function(value) {
+    this.$description.defaultValue = value;
+    return this;
 };
 
 Slider.prototype.setCurrentStep = function(value) {
@@ -54,8 +75,8 @@ Slider.prototype.setCurrentStep = function(value) {
     return this;
 };
 
-Slider.prototype.range = function(min, max) {
-    this.$description.range = {min, max};
+Slider.prototype.range = function(enabled = true) {
+    this.$description.range = enabled;
     return this;
 };
 
@@ -89,6 +110,11 @@ Slider.prototype.tooltipFormat = function(formatFn) {
     return this;
 };
 
+Slider.prototype.renderTooltip = function(renderFn) {
+    this.$description.renderTooltip = renderFn;
+    return this;
+};
+
 Slider.prototype.marks = function(marks) {
     this.$description.marks = marks;
     return this;
@@ -99,28 +125,42 @@ Slider.prototype.showMarks = function(enabled = true) {
     return this;
 };
 
+Slider.prototype.snapToMarks = function(enabled = true) {
+    this.$description.snapToMarks = enabled;
+    return this;
+};
+
 Slider.prototype.variant = function(name) {
     this.$description.variant = name;
     return this;
 };
 
-Slider.prototype.primary = function() {
-    return this.variant('primary');
-};
-Slider.prototype.secondary = function() {
-    return this.variant('secondary');
-};
-Slider.prototype.success = function() {
-    return this.variant('success');
+Slider.prototype.primary   = function() { return this.variant('primary');   };
+Slider.prototype.secondary = function() { return this.variant('secondary'); };
+Slider.prototype.success   = function() { return this.variant('success');   };
+Slider.prototype.warning   = function() { return this.variant('warning');   };
+Slider.prototype.danger    = function() { return this.variant('danger');    };
+Slider.prototype.info      = function() { return this.variant('info');      };
+
+Slider.prototype.color = function(color) {
+    this.$description.color = color;
+    return this;
 };
-Slider.prototype.warning = function() {
-    return this.variant('warning');
+
+Slider.prototype.trackColor = function(color) {
+    this.$description.trackColor = color;
+    return this;
 };
-Slider.prototype.danger = function() {
-    return this.variant('danger');
+
+Slider.prototype.fillColor = function(color) {
+    this.$description.fillColor = color;
+    return this;
 };
-Slider.prototype.info = function() {
-    return this.variant('info');
+
+
+Slider.prototype.fullColor = function(color) {
+    this.color(color).fillColor(color);
+    return this;
 };
 
 Slider.prototype.vertical = function(enabled = true) {
@@ -148,8 +188,13 @@ Slider.prototype.reverse = function(enabled = true) {
     return this;
 };
 
-Slider.prototype.snapToMarks = function(enabled = true) {
-    this.$description.snapToMarks = enabled;
+Slider.prototype.renderThumb = function(renderFn) {
+    this.$description.renderThumb = renderFn;
+    return this;
+};
+
+Slider.prototype.renderCursor = function(renderFn) {
+    this.$description.renderCursor = renderFn;
     return this;
 };
 
@@ -161,23 +206,4 @@ Slider.prototype.onChange = function(handler) {
 Slider.prototype.onComplete = function(handler) {
     this.on('complete', handler);
     return this;
-};
-
-
-Slider.prototype.renderCursor = function(renderFn) {
-    this.$description.renderCursor = renderFn;
-    return this;
-};
-
-Slider.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
-};
-
-
-Slider.prototype.$build = function() {
-    // TODO: Implementation
-};
-
-Slider.prototype.toNdElement = function() {
-    return this.$build();
 };

package/src/components/spinner/Spinner.js

@@ -16,8 +16,8 @@ export default function Spinner(props = {}) {
         overlay: null,
         backdrop: null,
         render: null,
-        loading: null,
         speed: 'normal',
+        fullScreenOverlay: null,
         props
     };
 }
@@ -138,9 +138,11 @@ Spinner.prototype.overlay = function(enabled = true) {
     return this;
 };
 Spinner.prototype.fullscreen = function() {
+    this.$description.fullScreenOverlay = true;
     return this.overlay(true);
 };
 Spinner.prototype.backdrop = function(enabled = true) {
+    this.$description.overlay = true;
     this.$description.backdrop = enabled;
     return this;
 };
@@ -164,7 +166,7 @@ Spinner.prototype.fast = function() {
     return this.speed('fast');
 };
 Spinner.prototype.loading = function(isLoading) {
-    this.$description.loading = BaseComponent.obs(isLoading);
+    this.showIf(isLoading);
     return this;
 };
 Spinner.prototype.bind = Spinner.prototype.loading;

package/src/components/splitter/Splitter.js

@@ -1,24 +1,28 @@
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import {Validator} from "../../../index";
+import SplitterPanel from "./SplitterPanel";
 
-export default function Splitter(config = {}) {
+export default function Splitter(props = {}) {
     if(!(this instanceof Splitter)) {
-        return new Splitter(config);
+        return new Splitter(props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
         orientation: 'horizontal',
         panels: [],
         gutterSize: 8,
         render: null,
-        ...config
+        props
     };
 
     this.$element = null;
 }
 
-BaseComponent.extends(Splitter, HasEventEmitter);
+BaseComponent.extends(Splitter);
+BaseComponent.use(Splitter, HasEventEmitter);
 
 Splitter.defaultTemplate = null;
 
@@ -51,17 +55,20 @@ Splitter.prototype.gutterSize = function(gutterSize) {
     return this;
 };
 
-Splitter.prototype.panel = function(panel) {
+Splitter.prototype.panel = function(content, options = {}, props = {}) {
+    const panel = content instanceof SplitterPanel
+        ? content
+        : SplitterPanel(content).setDescription(options);
     this.$description.panels.push(panel);
     return this;
 };
 
 Splitter.prototype.panels = function(panels) {
     if(Validator.isObservable(this.$description.panels)) {
-        this.$description.panels.set(panels);
-        return this;
+        this.$description.panels.clear();
+    } else {
+        this.$description.panels = [];
     }
-    this.$description.panels = [];
     panels.forEach(panel => this.panel(panel));
     return this;
 };

package/src/components/splitter/SplitterGutter.js

@@ -1,26 +1,47 @@
+import BaseComponent from "../BaseComponent";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
+import { $ } from '../../../index';
 
 
-export default function SplitterGutter(leftPanel, rightPanel, config = {}) {
+export default function SplitterGutter(leftPanel, rightPanel, props = {}) {
     if(!(this instanceof SplitterGutter)) {
-        return new SplitterGutter(config);
+        return new SplitterGutter(leftPanel, rightPanel, props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
         leftPanel: leftPanel || null,
         rightPanel: rightPanel || null,
-        orientation: config.orientation || 'horizontal',
-        cursor: config.orientation === 'vertical' ? 'row-resize' : 'col-resize',
-        size: 8,
-        isDragging: $(false)
-    }
+        orientation: 'horizontal',
+        cursor: 'col-resize',
+        size: 2,
+        isDragging: $(false),
+        props
+    };
 }
 
+BaseComponent.extends(SplitterGutter);
+BaseComponent.use(SplitterGutter, HasEventEmitter);
+
 SplitterGutter.defaultTemplate = null;
 
 SplitterGutter.use = function(template) {
     SplitterGutter.defaultTemplate = template;
 };
 
+SplitterGutter.prototype.vertical = function() {
+    this.$description.orientation = 'vertical';
+    this.$description.cursor = 'row-resize';
+    return this;
+};
+
+SplitterGutter.prototype.horizontal = function() {
+    this.$description.orientation = 'horizontal';
+    this.$description.cursor = 'col-resize';
+    return this;
+}
+
 SplitterGutter.prototype.panels = function(leftPanel, rightPanel) {
     this.$description.leftPanel = leftPanel;
     this.$description.rightPanel = rightPanel;

package/src/components/splitter/SplitterPanel.js

@@ -1,18 +1,17 @@
 import BaseComponent from "../BaseComponent";
+import { $ } from '../../../index';
 
-export default function SplitterPanel(content, config = {}) {
+export default function SplitterPanel(content, props = {}) {
     if(!(this instanceof SplitterPanel)) {
-        return new SplitterPanel(content, config);
+        return new SplitterPanel(content, props);
     }
 
-    if (typeof content === 'object' && !content.tagName) {
-        config = content;
-        content = config.content || null;
-    }
+    BaseComponent.call(this, props);
 
     this.$description = {
+        orientation: 'horizontal',
         content: content || null,
-        size: null,
+        size: $(null),
         minSize: null,
         maxSize: null,
         collapsible: false,
@@ -20,11 +19,11 @@ export default function SplitterPanel(content, config = {}) {
         resizable: true,
         data: null,
         render: null,
-        ...config
+        props
     };
 }
 
-BaseComponent.extends(SplitterPanel, BaseComponent);
+BaseComponent.extends(SplitterPanel);
 
 SplitterPanel.defaultTemplate = null;
 
@@ -38,7 +37,7 @@ SplitterPanel.prototype.content = function(content) {
 };
 
 SplitterPanel.prototype.size = function(size) {
-    this.$description.size = size;
+    this.$description.size.set(size);
     return this;
 };
 
@@ -74,9 +73,4 @@ SplitterPanel.prototype.fixed = function() {
 SplitterPanel.prototype.data = function(data) {
     this.$description.data = data;
     return this;
-};
-
-SplitterPanel.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
-    return this;
 };

package/src/components/splitter/index.js

@@ -1,8 +1,10 @@
 import Splitter from "./Splitter";
 import SplitterPanel from "./SplitterPanel";
+import SplitterGutter from "./SplitterGutter";
 
 
 export {
     Splitter,
-    SplitterPanel
+    SplitterPanel,
+    SplitterGutter
 }

package/src/components/stacks/AbsoluteStack.js

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

package/src/components/stacks/FixedStack.js

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