native-document 1.0.132 → 1.0.134

package/dist/native-document.components.min.js

@@ -367,16 +367,16 @@ var NativeComponents = (function (exports) {
         // });
     };
 
-    let DebugManager$2 = {};
+    let DebugManager$1 = {};
     {
-        DebugManager$2 = {
+        DebugManager$1 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager$1 = DebugManager$2;
+    var DebugManager$2 = DebugManager$1;
 
     /**
      *
@@ -858,17 +858,17 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$2.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$2.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$2.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -1093,7 +1093,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$2.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -3949,7 +3949,7 @@ var NativeComponents = (function (exports) {
         const $getStoreOrThrow = (method, name) => {
             const item = $stores.get(name);
             if (!item) {
-                DebugManager$1.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
+                DebugManager$2.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
                 throw new NativeDocumentError(
                     `Store.${method}('${name}') : store not found.`
                 );
@@ -3962,7 +3962,7 @@ var NativeComponents = (function (exports) {
          */
         const $applyReadOnly = (observer, name, context) => {
             const readOnlyError = (method) => () => {
-                DebugManager$1.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
+                DebugManager$2.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
                 throw new NativeDocumentError(
                     `Store.${context}('${name}') is read-only.`
                 );
@@ -3993,7 +3993,7 @@ var NativeComponents = (function (exports) {
              */
             create(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    DebugManager$2.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
                     throw new NativeDocumentError(
                         `Store.create('${name}') : a store with this name already exists.`
                     );
@@ -4014,7 +4014,7 @@ var NativeComponents = (function (exports) {
              */
             createResettable(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
+                    DebugManager$2.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createResettable('${name}') : a store with this name already exists.`
                     );
@@ -4050,7 +4050,7 @@ var NativeComponents = (function (exports) {
              */
             createComposed(name, computation, dependencies) {
                 if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
+                    DebugManager$2.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createComposed('${name}') : a store with this name already exists.`
                     );
@@ -4073,7 +4073,7 @@ var NativeComponents = (function (exports) {
                     }
                     const depItem = $stores.get(depName);
                     if (!depItem) {
-                        DebugManager$1.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
+                        DebugManager$2.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
                         throw new NativeDocumentError(
                             `Store.createComposed('${name}') : dependency store '${depName}' not found.`
                         );
@@ -4107,13 +4107,13 @@ var NativeComponents = (function (exports) {
             reset(name) {
                 const item = $getStoreOrThrow('reset', name);
                 if (item.composed) {
-                    DebugManager$1.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
+                    DebugManager$2.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : composed stores cannot be reset.`
                     );
                 }
                 if (!item.resettable) {
-                    DebugManager$1.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
+                    DebugManager$2.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`
                     );
@@ -4134,7 +4134,7 @@ var NativeComponents = (function (exports) {
                 const item = $getStoreOrThrow('use', name);
 
                 if (item.composed) {
-                    DebugManager$1.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    DebugManager$2.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
                     throw new NativeDocumentError(
                         `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`
                     );
@@ -4201,7 +4201,7 @@ var NativeComponents = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$2.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -4223,7 +4223,7 @@ var NativeComponents = (function (exports) {
             delete(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
+                    DebugManager$2.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
                     return;
                 }
                 item.subscribers.forEach(follower => follower.destroy());
@@ -4325,7 +4325,7 @@ var NativeComponents = (function (exports) {
                 return undefined;
             },
             set(target, prop, value) {
-                DebugManager$1.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                DebugManager$2.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
                 throw new NativeDocumentError(`Store structure is immutable. Use .set() on the observable.`);
             },
             deleteProperty(target, prop) {
@@ -5515,7 +5515,7 @@ var NativeComponents = (function (exports) {
 
     Badge.preset = function(name, callback) {
         if (Badge.prototype[name] || Badge[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Badge.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Badge.`);
             return;
         }
         Badge[name] = (content, props) => callback(new Badge(content, props));
@@ -6279,7 +6279,7 @@ var NativeComponents = (function (exports) {
 
     Divider.preset = function(name, callback) {
         if (Divider.prototype[name] || Divider[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Divider.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Divider.`);
             return;
         }
         Divider[name] = (label, props) => callback(new Divider(label, props));
@@ -10265,7 +10265,7 @@ var NativeComponents = (function (exports) {
 
     Progress.preset = function(name, callback) {
         if (Progress.prototype[name] || Progress[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Progress.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Progress.`);
             return;
         }
         Progress[name] = (props) => callback(new Progress(props));
@@ -10497,7 +10497,7 @@ var NativeComponents = (function (exports) {
 
     Skeleton.preset = function(name, callback) {
         if (Skeleton.prototype[name] || Skeleton[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Skeleton.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Skeleton.`);
             return;
         }
         Skeleton[name] = (props) => callback(new Skeleton(props));
@@ -10783,9 +10783,9 @@ var NativeComponents = (function (exports) {
         return this.$build();
     };
 
-    function Spinner$1(props = {}) {
-        if (!(this instanceof Spinner$1)) {
-            return new Spinner$1(props);
+    function Spinner(props = {}) {
+        if (!(this instanceof Spinner)) {
+            return new Spinner(props);
         }
 
         this.$description = {
@@ -10804,43 +10804,45 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    Spinner$1.defaultTemplate = null;
-    Spinner$1.use = function(template) {
-        Spinner$1.defaultTemplate = template.spinner;
+    Spinner.defaultTemplate = null;
+    Spinner.use = function(template) {
+        Spinner.defaultTemplate = template.spinner;
     };
 
-    Spinner$1.preset = function(name, callback) {
-        if (Spinner$1.prototype[name] || Spinner$1[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Spinner.`);
+    BaseComponent.extends(Spinner);
+
+    Spinner.preset = function(name, callback) {
+        if (Spinner.prototype[name] || Spinner[name]) {
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Spinner.`);
             return;
         }
-        Spinner$1[name] = (props) => callback(new Spinner$1(props));
+        Spinner[name] = (props) => callback(new Spinner(props));
     };
 
-    Spinner$1.presets = function(presets) {
+    Spinner.presets = function(presets) {
         for (const name in presets) {
-            Spinner$1.preset(name, presets[name]);
+            Spinner.preset(name, presets[name]);
         }
     };
 
-    Spinner$1.prototype.type = function(type) {
+    Spinner.prototype.type = function(type) {
         this.$description.type = type;
         return this;
     };
 
-    Spinner$1.prototype.circle = function() {
+    Spinner.prototype.circle = function() {
         return this.type('circle');
     };
-    Spinner$1.prototype.dots = function() {
+    Spinner.prototype.dots = function() {
         return this.type('dots');
     };
-    Spinner$1.prototype.bars = function() {
+    Spinner.prototype.bars = function() {
         return this.type('bars');
     };
-    Spinner$1.prototype.pulse = function() {
+    Spinner.prototype.pulse = function() {
         return this.type('pulse');
     };
-    Spinner$1.prototype.ring = function() {
+    Spinner.prototype.ring = function() {
         return this.type('ring');
     };
 
@@ -10848,79 +10850,79 @@ var NativeComponents = (function (exports) {
      * @param {string|int} size
      * @returns {Spinner}
      */
-    Spinner$1.prototype.size = function(size) {
+    Spinner.prototype.size = function(size) {
         this.$description.size = size;
         return this;
     };
-    Spinner$1.prototype.extraSmall = function() {
+    Spinner.prototype.extraSmall = function() {
         return this.size('extra-small');
     };
-    Spinner$1.prototype.small = function() {
+    Spinner.prototype.small = function() {
         return this.size('small');
     };
-    Spinner$1.prototype.medium = function() {
+    Spinner.prototype.medium = function() {
         return this.size('medium');
     };
-    Spinner$1.prototype.large = function() {
+    Spinner.prototype.large = function() {
         return this.size('large');
     };
-    Spinner$1.prototype.extraLarge = function() {
+    Spinner.prototype.extraLarge = function() {
         return this.size('extra-large');
     };
 
-    Spinner$1.prototype.variant = function(name) {
+    Spinner.prototype.variant = function(name) {
         this.$description.variant = name;
         return this;
     };
-    Spinner$1.prototype.primary = function() {
+    Spinner.prototype.primary = function() {
         return this.variant('primary');
     };
-    Spinner$1.prototype.secondary = function() {
+    Spinner.prototype.secondary = function() {
         return this.variant('secondary');
     };
-    Spinner$1.prototype.success = function() {
+    Spinner.prototype.success = function() {
         return this.variant('success');
     };
-    Spinner$1.prototype.danger = function() {
+    Spinner.prototype.danger = function() {
         return this.variant('danger');
     };
-    Spinner$1.prototype.warning = function() {
+    Spinner.prototype.warning = function() {
         return this.variant('warning');
     };
-    Spinner$1.prototype.color = function(color) {
+    Spinner.prototype.color = function(color) {
         this.$description.color = color;
         return this;
     };
 
-    Spinner$1.prototype.label = function(label) {
+    Spinner.prototype.label = function(label) {
         this.$description.label = label;
         return this;
     };
-    Spinner$1.prototype.labelPosition = function(position) {
+    Spinner.prototype.labelPosition = function(position) {
         this.$description.labelPosition = position;
         return this;
     };
-    Spinner$1.prototype.labelAtTop = function() {
+    Spinner.prototype.labelAtTop = function() {
         return this.labelPosition('top');
     };
-    Spinner$1.prototype.labelAtBottom = function() {
+    Spinner.prototype.labelAtBottom = function() {
         return this.labelPosition('bottom');
     };
-    Spinner$1.prototype.labelAtLeft = function() {
+    Spinner.prototype.labelAtLeft = function() {
         return this.labelPosition('left');
     };
-    Spinner$1.prototype.labelAtRight = function() {
+    Spinner.prototype.labelAtRight = function() {
         return this.labelPosition('right');
     };
 
-    Spinner$1.prototype.overlay = function(enabled = true) {
+    Spinner.prototype.overlay = function(enabled = true) {
         this.$description.overlay = enabled;
         return this;
     };
-    Spinner$1.prototype.fullscreen = function() {
+    Spinner.prototype.fullscreen = function() {
         return this.overlay(true);
     };
-    Spinner$1.prototype.backdrop = function(enabled = true) {
+    Spinner.prototype.backdrop = function(enabled = true) {
         this.$description.backdrop = enabled;
         return this;
     };
@@ -10930,29 +10932,29 @@ var NativeComponents = (function (exports) {
      * @param {string|int} speed
      * @returns {Spinner}
      */
-    Spinner$1.prototype.speed = function(speed) {
+    Spinner.prototype.speed = function(speed) {
         this.$description.speed = speed;
         return this;
     };
-    Spinner$1.prototype.slow = function() {
+    Spinner.prototype.slow = function() {
         return this.speed('slow');
     };
-    Spinner$1.prototype.normal = function() {
+    Spinner.prototype.normal = function() {
         return this.speed('normal');
     };
-    Spinner$1.prototype.fast = function() {
+    Spinner.prototype.fast = function() {
         return this.speed('fast');
     };
-    Spinner$1.prototype.loading = function(isLoading) {
+    Spinner.prototype.loading = function(isLoading) {
         this.$description.loading = BaseComponent.obs(isLoading);
         return this;
     };
-    Spinner$1.prototype.bind = Spinner$1.prototype.loading;
+    Spinner.prototype.bind = Spinner.prototype.loading;
 
-    Spinner$1.prototype.show = function() {
+    Spinner.prototype.show = function() {
         this.$description.loading?.set(true);
     };
-    Spinner$1.prototype.hide = function() {
+    Spinner.prototype.hide = function() {
         this.$description.loading?.set(false);
     };
 
@@ -12317,9 +12319,9 @@ var NativeComponents = (function (exports) {
     Tooltip.prototype.$build = function() {};
     Tooltip.prototype.toNdElement = function() {};
 
-    function Stack(content, props = {}) {
-        if (!(this instanceof Stack)) {
-            return new Stack(content, props);
+    function Stack$1(content, props = {}) {
+        if (!(this instanceof Stack$1)) {
+            return new Stack$1(content, props);
         }
 
         BaseComponent.call(this, props);
@@ -12334,73 +12336,76 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Stack);
+    BaseComponent.extends(Stack$1);
 
-    Stack.prototype.wrap = function(enabled = true) {
+    Stack$1.prototype.wrap = function(enabled = true) {
         this.$description.wrap = enabled;
         return this;
     };
 
-    Stack.prototype.spacing = function(value) {
+    Stack$1.prototype.spacing = function(value) {
         this.$description.spacing = value;
         return this;
     };
 
-    Stack.prototype.alignLeading = function() {
+    Stack$1.prototype.alignLeading = function() {
         this.$description.alignment = 'leading';
         return this;
     };
-    Stack.prototype.alignCenter = function() {
+    Stack$1.prototype.alignCenter = function() {
         this.$description.alignment = 'center';
         return this;
     };
-    Stack.prototype.alignTrailing = function() {
+    Stack$1.prototype.alignTrailing = function() {
         this.$description.alignment = 'trailing';
         return this;
     };
-    Stack.prototype.alignStretch = function() {
+    Stack$1.prototype.alignStretch = function() {
         this.$description.alignment = 'stretch';
         return this;
     };
 
-    Stack.prototype.justifyStart = function() {
+    Stack$1.prototype.justifyStart = function() {
         this.$description.justifyContent = 'start';
         return this;
     };
-    Stack.prototype.justifyCenter = function() {
+    Stack$1.prototype.justifyCenter = function() {
         this.$description.justifyContent = 'center';
         return this;
     };
-    Stack.prototype.justifyEnd = function() {
+    Stack$1.prototype.justifyEnd = function() {
         this.$description.justifyContent = 'end';
         return this;
     };
-    Stack.prototype.justifyBetween = function() {
+    Stack$1.prototype.justifyBetween = function() {
         this.$description.justifyContent = 'between';
         return this;
     };
-    Stack.prototype.justifyAround = function() {
+    Stack$1.prototype.justifyAround = function() {
         this.$description.justifyContent = 'around';
         return this;
     };
 
-    Stack.prototype.center = function() {
+    Stack$1.prototype.center = function() {
         this.alignCenter().justifyCenter();
         return this;
     };
 
     function VStack(content, props = {}) {
-        if (!(this instanceof VStack)) return new VStack(content, props);
+        if (!(this instanceof VStack)) {
+            return new VStack(content, props);
+        }
+
+        Stack$1.apply(this, [content, props]);
 
-        Stack.call(this, content, props);
         this.$description.orientation = 'vertical';
         this.$description.alignment = 'leading';
     }
-    Stack.extends(VStack);
+    BaseComponent.extends(VStack, Stack$1);
 
     VStack.preset = function(name, callback) {
         if (VStack.prototype[name] || VStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in VStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in VStack.`);
             return;
         }
         VStack[name] = (content, props) => callback(new VStack(content, props));
@@ -12429,7 +12434,7 @@ var NativeComponents = (function (exports) {
 
     ZStack.preset = function(name, callback) {
         if (ZStack.prototype[name] || ZStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in ZStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in ZStack.`);
             return;
         }
         ZStack[name] = (content, props) => callback(new ZStack(content, props));
@@ -12451,15 +12456,15 @@ var NativeComponents = (function (exports) {
             return new HStack(content, props);
         }
 
-        Stack.call(this, content, props);
+        Stack$1.apply(this, [content, props]);
         this.$description.orientation = 'horizontal';
     }
 
-    Stack.extends(HStack);
+    BaseComponent.extends(HStack,  Stack$1);
 
     HStack.preset = function(name, callback) {
         if (HStack.prototype[name] || HStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in HStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in HStack.`);
             return;
         }
         HStack[name] = (content, props) => callback(new HStack(content, props));
@@ -12528,10 +12533,10 @@ var NativeComponents = (function (exports) {
     exports.SimpleTable = SimpleTable;
     exports.Skeleton = Skeleton;
     exports.Slider = Slider;
-    exports.Spinner = Spinner$1;
+    exports.Spinner = Spinner;
     exports.Splitter = Splitter;
     exports.SplitterPanel = SplitterPanel;
-    exports.Stack = Stack;
+    exports.Stack = Stack$1;
     exports.Stepper = Stepper;
     exports.StepperStep = StepperStep;
     exports.StringField = StringField;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.132",
+  "version": "1.0.134",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/src/components/layouts/HStack.js

@@ -1,16 +1,17 @@
 import Stack from "./Stack";
 import DebugManager from "../../core/utils/debug-manager";
+import BaseComponent from "../BaseComponent";
 
 export default function HStack(content, props = {}) {
     if (!(this instanceof HStack)) {
         return new HStack(content, props);
     }
 
-    Stack.call(this, content, props);
+    Stack.apply(this, [content, props]);
     this.$description.orientation = 'horizontal';
 }
 
-Stack.extends(HStack);
+BaseComponent.extends(HStack,  Stack);
 
 HStack.preset = function(name, callback) {
     if (HStack.prototype[name] || HStack[name]) {

package/src/components/layouts/VStack.js

@@ -1,15 +1,19 @@
 import Stack from "./Stack";
 import DebugManager from "../../core/utils/debug-manager";
+import BaseComponent from "../BaseComponent";
 
 
 export default function VStack(content, props = {}) {
-    if (!(this instanceof VStack)) return new VStack(content, props);
+    if (!(this instanceof VStack)) {
+        return new VStack(content, props);
+    }
+
+    Stack.apply(this, [content, props]);
 
-    Stack.call(this, content, props);
     this.$description.orientation = 'vertical';
     this.$description.alignment = 'leading';
 }
-Stack.extends(VStack);
+BaseComponent.extends(VStack, Stack);
 
 VStack.preset = function(name, callback) {
     if (VStack.prototype[name] || VStack[name]) {

package/src/components/spinner/Spinner.js

@@ -27,6 +27,8 @@ Spinner.use = function(template) {
     Spinner.defaultTemplate = template.spinner;
 };
 
+BaseComponent.extends(Spinner);
+
 Spinner.preset = function(name, callback) {
     if (Spinner.prototype[name] || Spinner[name]) {
         DebugManager.warn(`Warning: the ${name} method already exists in Spinner.`);