native-document 1.0.134 → 1.0.135

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

@@ -21,7 +21,8 @@ var NativeComponents = (function (exports) {
 
 
     BaseComponent.extends = function(Component, ...parents) {
-        Component.prototype = Object.create(BaseComponent.prototype);
+        const MainParent = parents[0] || BaseComponent;
+        Component.prototype = Object.create(MainParent.prototype);
 
         if(parents.length > 0) {
             for(const parent of parents) {
@@ -31,6 +32,14 @@ var NativeComponents = (function (exports) {
         Component.prototype.constructor = Component;
     };
 
+    BaseComponent.use = function(Component, ...traits) {
+        if(traits.length > 0) {
+            for(const trait of traits) {
+                Object.assign(Component.prototype, trait.prototype);
+            }
+        }
+    };
+
     BaseComponent.obs = (value) => {
         return value.__$Observable ? value : Observable(value);
     };
@@ -79,22 +88,13 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    class NativeDocumentError extends Error {
-        constructor(message, context = {}) {
-            super(message);
-            this.name = 'NativeDocumentError';
-            this.context = context;
-            this.timestamp = new Date().toISOString();
-        }
-    }
-
-    function EventEmitter() {
+    function HasEventEmitter() {
 
         this.__$events = null;
 
     }
 
-    EventEmitter.prototype.on = function(eventName, callback) {
+    HasEventEmitter.prototype.on = function(eventName, callback) {
         if(!this.__$events) {
             this.__$events = new Map();
         }
@@ -110,11 +110,11 @@ var NativeComponents = (function (exports) {
         existingCallback.push(callback);
     };
 
-    EventEmitter.prototype.hasListeners = function(eventName) {
+    HasEventEmitter.prototype.hasListeners = function(eventName) {
         return !!this.__$events.get(eventName);
     };
 
-    EventEmitter.prototype.trigger = async function(eventName, ...args) {
+    HasEventEmitter.prototype.trigger = async function(eventName, ...args) {
         const callbacks = this.__$events.get(eventName);
         if(!callbacks) {
             // throw new NativeDocumentError(this.constructor.name, 'Event '+eventName+' not found');
@@ -131,7 +131,7 @@ var NativeComponents = (function (exports) {
         }
         return result;
     };
-    EventEmitter.prototype.emit = EventEmitter.prototype.trigger;
+    HasEventEmitter.prototype.emit = HasEventEmitter.prototype.trigger;
 
     /**
      * Valid children types that can be rendered in the DOM
@@ -158,7 +158,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Accordion, EventEmitter);
+    BaseComponent.extends(Accordion, HasEventEmitter);
 
     Accordion.defaultTemplate = null;
 
@@ -367,16 +367,25 @@ var NativeComponents = (function (exports) {
         // });
     };
 
-    let DebugManager$1 = {};
+    let DebugManager$2 = {};
     {
-        DebugManager$1 = {
+        DebugManager$2 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager$2 = DebugManager$1;
+    var DebugManager$1 = DebugManager$2;
+
+    class NativeDocumentError extends Error {
+        constructor(message, context = {}) {
+            super(message);
+            this.name = 'NativeDocumentError';
+            this.context = context;
+            this.timestamp = new Date().toISOString();
+        }
+    }
 
     /**
      *
@@ -858,17 +867,17 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$2.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager$2.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager$2.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -1093,7 +1102,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$2.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -3949,7 +3958,7 @@ var NativeComponents = (function (exports) {
         const $getStoreOrThrow = (method, name) => {
             const item = $stores.get(name);
             if (!item) {
-                DebugManager$2.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
+                DebugManager$1.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 +3971,7 @@ var NativeComponents = (function (exports) {
          */
         const $applyReadOnly = (observer, name, context) => {
             const readOnlyError = (method) => () => {
-                DebugManager$2.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
+                DebugManager$1.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
                 throw new NativeDocumentError(
                     `Store.${context}('${name}') is read-only.`
                 );
@@ -3993,7 +4002,7 @@ var NativeComponents = (function (exports) {
              */
             create(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$2.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    DebugManager$1.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 +4023,7 @@ var NativeComponents = (function (exports) {
              */
             createResettable(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$2.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
+                    DebugManager$1.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 +4059,7 @@ var NativeComponents = (function (exports) {
              */
             createComposed(name, computation, dependencies) {
                 if ($stores.has(name)) {
-                    DebugManager$2.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
+                    DebugManager$1.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 +4082,7 @@ var NativeComponents = (function (exports) {
                     }
                     const depItem = $stores.get(depName);
                     if (!depItem) {
-                        DebugManager$2.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
+                        DebugManager$1.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 +4116,13 @@ var NativeComponents = (function (exports) {
             reset(name) {
                 const item = $getStoreOrThrow('reset', name);
                 if (item.composed) {
-                    DebugManager$2.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
+                    DebugManager$1.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$2.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
+                    DebugManager$1.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 +4143,7 @@ var NativeComponents = (function (exports) {
                 const item = $getStoreOrThrow('use', name);
 
                 if (item.composed) {
-                    DebugManager$2.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    DebugManager$1.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 +4210,7 @@ var NativeComponents = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$2.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -4223,7 +4232,7 @@ var NativeComponents = (function (exports) {
             delete(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$2.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
+                    DebugManager$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
                     return;
                 }
                 item.subscribers.forEach(follower => follower.destroy());
@@ -4325,7 +4334,7 @@ var NativeComponents = (function (exports) {
                 return undefined;
             },
             set(target, prop, value) {
-                DebugManager$2.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                DebugManager$1.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) {
@@ -4614,7 +4623,7 @@ var NativeComponents = (function (exports) {
         Alert.defaultContentTemplate = template.alertContent;
     };
 
-    BaseComponent.extends(Alert, EventEmitter);
+    BaseComponent.extends(Alert, HasEventEmitter);
 
     /**
      * Sets the variant style for the alert
@@ -5515,7 +5524,7 @@ var NativeComponents = (function (exports) {
 
     Badge.preset = function(name, callback) {
         if (Badge.prototype[name] || Badge[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in Badge.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Badge.`);
             return;
         }
         Badge[name] = (content, props) => callback(new Badge(content, props));
@@ -5623,7 +5632,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Breadcrumb, EventEmitter);
+    BaseComponent.extends(Breadcrumb, HasEventEmitter);
 
     Breadcrumb.use = function(template) {};
     Breadcrumb.defaultTemplate = null;
@@ -5896,7 +5905,8 @@ var NativeComponents = (function (exports) {
         MenuGroup.defaultTemplate = template.menuGroup;
     };
 
-    BaseComponent.extends(MenuGroup, HasItems);
+    BaseComponent.extends(MenuGroup);
+    BaseComponent.use(MenuGroup, HasItems);
 
     MenuGroup.prototype.data = function(data) {
         this.$description.data = data;
@@ -5942,7 +5952,8 @@ var NativeComponents = (function (exports) {
         MenuItem.defaultTemplate = template.menuItem;
     };
 
-    BaseComponent.extends(MenuItem, HasItems);
+    BaseComponent.extends(MenuItem);
+    BaseComponent.use(MenuItem, HasItems);
 
 
     MenuItem.prototype.label = function(label) {
@@ -6040,7 +6051,8 @@ var NativeComponents = (function (exports) {
 
     }
 
-    BaseComponent.extends(Menu, HasItems, EventEmitter);
+    BaseComponent.extends(Menu);
+    BaseComponent.use(Menu, HasItems, HasEventEmitter);
 
     Menu.defaultTemplate = null;
 
@@ -6279,7 +6291,7 @@ var NativeComponents = (function (exports) {
 
     Divider.preset = function(name, callback) {
         if (Divider.prototype[name] || Divider[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in Divider.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Divider.`);
             return;
         }
         Divider[name] = (label, props) => callback(new Divider(label, props));
@@ -6611,7 +6623,7 @@ var NativeComponents = (function (exports) {
         this.$element = null;
     }
 
-    BaseComponent.extends(Dropdown, EventEmitter);
+    BaseComponent.extends(Dropdown, HasEventEmitter);
 
 
     Dropdown.defaultTemplate = null;
@@ -7644,7 +7656,7 @@ var NativeComponents = (function (exports) {
         if(!(this instanceof FormControl)) {
             return new FormControl(configs);
         }
-        EventEmitter.call(this);
+        HasEventEmitter.call(this);
 
         this.$element = null;
         this.$configs = configs;
@@ -7665,7 +7677,7 @@ var NativeComponents = (function (exports) {
         return new FormControl(configs);
     };
 
-    BaseComponent.extends(FormControl, EventEmitter);
+    BaseComponent.extends(FormControl, HasEventEmitter);
 
     Object.defineProperty(FormControl.prototype, 'isDirty', {
         get() { return this.$isDirty; }
@@ -9350,7 +9362,8 @@ var NativeComponents = (function (exports) {
         List.defaultTemplate = template.list;
     };
 
-    BaseComponent.extends(List, HasItems, EventEmitter);
+    BaseComponent.extends(List);
+    BaseComponent.use(List, HasItems, HasEventEmitter);
 
     List.defaultTemplate = null;
 
@@ -9543,7 +9556,8 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(ListGroup, HasItems);
+    BaseComponent.extends(ListGroup);
+    BaseComponent.use(ListGroup, HasItems);
 
     ListGroup.defaultTemplate = null;
 
@@ -9610,7 +9624,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Modal, EventEmitter);
+    BaseComponent.extends(Modal, HasEventEmitter);
 
     // Theming
     Modal.defaultLayout = null;
@@ -9770,7 +9784,7 @@ var NativeComponents = (function (exports) {
         this.$element = null;
     }
 
-    BaseComponent.extends(Pagination, EventEmitter);
+    BaseComponent.extends(Pagination, HasEventEmitter);
 
     Pagination.defaultTemplate = null;
 
@@ -10001,7 +10015,7 @@ var NativeComponents = (function (exports) {
         }
     }
 
-    BaseComponent.extends(Popover, EventEmitter);
+    BaseComponent.extends(Popover, HasEventEmitter);
 
     Popover.defaultTemplate = null;
 
@@ -10255,7 +10269,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Progress, EventEmitter);
+    BaseComponent.extends(Progress, HasEventEmitter);
 
     Progress.defaultTemplate = null;
 
@@ -10265,7 +10279,7 @@ var NativeComponents = (function (exports) {
 
     Progress.preset = function(name, callback) {
         if (Progress.prototype[name] || Progress[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in Progress.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Progress.`);
             return;
         }
         Progress[name] = (props) => callback(new Progress(props));
@@ -10497,7 +10511,7 @@ var NativeComponents = (function (exports) {
 
     Skeleton.preset = function(name, callback) {
         if (Skeleton.prototype[name] || Skeleton[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in Skeleton.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Skeleton.`);
             return;
         }
         Skeleton[name] = (props) => callback(new Skeleton(props));
@@ -10634,7 +10648,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Slider, EventEmitter);
+    BaseComponent.extends(Slider, HasEventEmitter);
 
     Slider.use = function(template) {};
     Slider.defaultTemplate = null;
@@ -10813,7 +10827,7 @@ var NativeComponents = (function (exports) {
 
     Spinner.preset = function(name, callback) {
         if (Spinner.prototype[name] || Spinner[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in Spinner.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Spinner.`);
             return;
         }
         Spinner[name] = (props) => callback(new Spinner(props));
@@ -10974,7 +10988,7 @@ var NativeComponents = (function (exports) {
         this.$element = null;
     }
 
-    BaseComponent.extends(Splitter, EventEmitter);
+    BaseComponent.extends(Splitter, HasEventEmitter);
 
     Splitter.defaultTemplate = null;
 
@@ -11155,7 +11169,7 @@ var NativeComponents = (function (exports) {
         this.$element = null;
     }
 
-    BaseComponent.extends(Stepper, EventEmitter);
+    BaseComponent.extends(Stepper, HasEventEmitter);
 
     Stepper.defaultTemplate = null;
     Stepper.defaultStepTemplate = null;
@@ -12000,7 +12014,7 @@ var NativeComponents = (function (exports) {
         this.tabsMap = {};
     }
 
-    BaseComponent.extends(Tabs, EventEmitter);
+    BaseComponent.extends(Tabs, HasEventEmitter);
 
     Tabs.defaultTemplate = null;
     Tabs.defaultTabTemplate = null;
@@ -12114,7 +12128,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Toast, EventEmitter);
+    BaseComponent.extends(Toast, HasEventEmitter);
 
     Toast.use = function(template) {};
     Toast.defaultTemplate = null;
@@ -12319,9 +12333,9 @@ var NativeComponents = (function (exports) {
     Tooltip.prototype.$build = function() {};
     Tooltip.prototype.toNdElement = function() {};
 
-    function Stack$1(content, props = {}) {
-        if (!(this instanceof Stack$1)) {
-            return new Stack$1(content, props);
+    function Stack(content, props = {}) {
+        if (!(this instanceof Stack)) {
+            return new Stack(content, props);
         }
 
         BaseComponent.call(this, props);
@@ -12336,57 +12350,58 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Stack$1);
+    BaseComponent.extends(Stack);
+
 
-    Stack$1.prototype.wrap = function(enabled = true) {
+    Stack.prototype.wrap = function(enabled = true) {
         this.$description.wrap = enabled;
         return this;
     };
 
-    Stack$1.prototype.spacing = function(value) {
+    Stack.prototype.spacing = function(value) {
         this.$description.spacing = value;
         return this;
     };
 
-    Stack$1.prototype.alignLeading = function() {
+    Stack.prototype.alignLeading = function() {
         this.$description.alignment = 'leading';
         return this;
     };
-    Stack$1.prototype.alignCenter = function() {
+    Stack.prototype.alignCenter = function() {
         this.$description.alignment = 'center';
         return this;
     };
-    Stack$1.prototype.alignTrailing = function() {
+    Stack.prototype.alignTrailing = function() {
         this.$description.alignment = 'trailing';
         return this;
     };
-    Stack$1.prototype.alignStretch = function() {
+    Stack.prototype.alignStretch = function() {
         this.$description.alignment = 'stretch';
         return this;
     };
 
-    Stack$1.prototype.justifyStart = function() {
+    Stack.prototype.justifyStart = function() {
         this.$description.justifyContent = 'start';
         return this;
     };
-    Stack$1.prototype.justifyCenter = function() {
+    Stack.prototype.justifyCenter = function() {
         this.$description.justifyContent = 'center';
         return this;
     };
-    Stack$1.prototype.justifyEnd = function() {
+    Stack.prototype.justifyEnd = function() {
         this.$description.justifyContent = 'end';
         return this;
     };
-    Stack$1.prototype.justifyBetween = function() {
+    Stack.prototype.justifyBetween = function() {
         this.$description.justifyContent = 'between';
         return this;
     };
-    Stack$1.prototype.justifyAround = function() {
+    Stack.prototype.justifyAround = function() {
         this.$description.justifyContent = 'around';
         return this;
     };
 
-    Stack$1.prototype.center = function() {
+    Stack.prototype.center = function() {
         this.alignCenter().justifyCenter();
         return this;
     };
@@ -12396,16 +12411,16 @@ var NativeComponents = (function (exports) {
             return new VStack(content, props);
         }
 
-        Stack$1.apply(this, [content, props]);
+        Stack.call(this, content, props);
 
         this.$description.orientation = 'vertical';
         this.$description.alignment = 'leading';
     }
-    BaseComponent.extends(VStack, Stack$1);
+    BaseComponent.extends(VStack, Stack);
 
     VStack.preset = function(name, callback) {
         if (VStack.prototype[name] || VStack[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in VStack.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in VStack.`);
             return;
         }
         VStack[name] = (content, props) => callback(new VStack(content, props));
@@ -12434,7 +12449,7 @@ var NativeComponents = (function (exports) {
 
     ZStack.preset = function(name, callback) {
         if (ZStack.prototype[name] || ZStack[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in ZStack.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in ZStack.`);
             return;
         }
         ZStack[name] = (content, props) => callback(new ZStack(content, props));
@@ -12456,15 +12471,15 @@ var NativeComponents = (function (exports) {
             return new HStack(content, props);
         }
 
-        Stack$1.apply(this, [content, props]);
+        Stack.call(this, content, props);
         this.$description.orientation = 'horizontal';
     }
 
-    BaseComponent.extends(HStack,  Stack$1);
+    BaseComponent.extends(HStack,  Stack);
 
     HStack.preset = function(name, callback) {
         if (HStack.prototype[name] || HStack[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in HStack.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in HStack.`);
             return;
         }
         HStack[name] = (content, props) => callback(new HStack(content, props));
@@ -12536,7 +12551,7 @@ var NativeComponents = (function (exports) {
     exports.Spinner = Spinner;
     exports.Splitter = Splitter;
     exports.SplitterPanel = SplitterPanel;
-    exports.Stack = Stack$1;
+    exports.Stack = Stack;
     exports.Stepper = Stepper;
     exports.StepperStep = StepperStep;
     exports.StringField = StringField;

package/package.json

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

package/src/components/BaseComponent.js

@@ -18,7 +18,8 @@ Object.defineProperty( BaseComponent.prototype, 'nd', {
 
 
 BaseComponent.extends = function(Component, ...parents) {
-    Component.prototype = Object.create(BaseComponent.prototype);
+    const MainParent = parents[0] || BaseComponent;
+    Component.prototype = Object.create(MainParent.prototype);
 
     if(parents.length > 0) {
         for(const parent of parents) {
@@ -28,6 +29,14 @@ BaseComponent.extends = function(Component, ...parents) {
     Component.prototype.constructor = Component;
 };
 
+BaseComponent.use = function(Component, ...traits) {
+    if(traits.length > 0) {
+        for(const trait of traits) {
+            Object.assign(Component.prototype, trait.prototype);
+        }
+    }
+};
+
 BaseComponent.obs = (value) => {
     return value.__$Observable ? value : Observable(value);
 };

package/src/components/accordion/Accordion.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 
 /**
@@ -27,7 +27,7 @@ export default function Accordion(config = {}) {
     };
 }
 
-BaseComponent.extends(Accordion, EventEmitter);
+BaseComponent.extends(Accordion, HasEventEmitter);
 
 Accordion.defaultTemplate = null;
 

package/src/components/alert/Alert.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 /**
  * Component for displaying alert messages with various styles and variants
@@ -41,7 +41,7 @@ Alert.use = function(template) {
     Alert.defaultContentTemplate = template.alertContent;
 };
 
-BaseComponent.extends(Alert, EventEmitter);
+BaseComponent.extends(Alert, HasEventEmitter);
 
 /**
  * Sets the variant style for the alert

package/src/components/breadcrumb/BreadCrumb.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 export default function Breadcrumb(config = {}) {
     if (!(this instanceof Breadcrumb)) {
@@ -15,7 +15,7 @@ export default function Breadcrumb(config = {}) {
     };
 }
 
-BaseComponent.extends(Breadcrumb, EventEmitter);
+BaseComponent.extends(Breadcrumb, HasEventEmitter);
 
 Breadcrumb.use = function(template) {};
 Breadcrumb.defaultTemplate = null;

package/src/components/dropdown/Dropdown.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import DropdownGroup from "./DropdownGroup";
 import DropdownTrigger from "./DropdownTrigger";
 import DropdownDivider from "./DropdownDivider";
@@ -35,7 +35,7 @@ export default function Dropdown(config = {}) {
     this.$element = null;
 }
 
-BaseComponent.extends(Dropdown, EventEmitter);
+BaseComponent.extends(Dropdown, HasEventEmitter);
 
 
 Dropdown.defaultTemplate = null;

package/src/components/form/FormControl.js

@@ -1,5 +1,5 @@
 import {debounce} from "../../core/utils/helpers";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import {Validator, Observable as $ } from "../../../index";
 import NativeDocumentError from "../../../src/core/errors/NativeDocumentError";
 import BaseComponent from "../BaseComponent";
@@ -12,7 +12,7 @@ export default function FormControl(configs) {
     if(!(this instanceof FormControl)) {
         return new FormControl(configs);
     }
-    EventEmitter.call(this);
+    HasEventEmitter.call(this);
 
     this.$element = null;
     this.$configs = configs;
@@ -33,7 +33,7 @@ FormControl.create = function (configs) {
     return new FormControl(configs);
 };
 
-BaseComponent.extends(FormControl, EventEmitter);
+BaseComponent.extends(FormControl, HasEventEmitter);
 
 Object.defineProperty(FormControl.prototype, 'isDirty', {
     get() { return this.$isDirty; }

package/src/components/layouts/HStack.js

@@ -7,7 +7,7 @@ export default function HStack(content, props = {}) {
         return new HStack(content, props);
     }
 
-    Stack.apply(this, [content, props]);
+    Stack.call(this, content, props);
     this.$description.orientation = 'horizontal';
 }
 

package/src/components/layouts/Stack.js

@@ -21,6 +21,7 @@ export default function Stack(content, props = {}) {
 
 BaseComponent.extends(Stack);
 
+
 Stack.prototype.wrap = function(enabled = true) {
     this.$description.wrap = enabled;
     return this;

package/src/components/layouts/VStack.js

@@ -8,7 +8,7 @@ export default function VStack(content, props = {}) {
         return new VStack(content, props);
     }
 
-    Stack.apply(this, [content, props]);
+    Stack.call(this, content, props);
 
     this.$description.orientation = 'vertical';
     this.$description.alignment = 'leading';

package/src/components/list/List.js

@@ -1,6 +1,6 @@
 
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import HasItems from "../$traits/HasItems";
 import Dropdown from "../dropdown/Dropdown";
 
@@ -31,7 +31,8 @@ List.use = function(template) {
     List.defaultTemplate = template.list;
 };
 
-BaseComponent.extends(List, HasItems, EventEmitter);
+BaseComponent.extends(List);
+BaseComponent.use(List, HasItems, HasEventEmitter);
 
 List.defaultTemplate = null;
 

package/src/components/list/ListGroup.js

@@ -19,7 +19,8 @@ export default function ListGroup(label, config = {}) {
     };
 }
 
-BaseComponent.extends(ListGroup, HasItems);
+BaseComponent.extends(ListGroup);
+BaseComponent.use(ListGroup, HasItems);
 
 ListGroup.defaultTemplate = null;
 

package/src/components/menu/Menu.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import HasItems from "../$traits/HasItems";
 import MenuDivider from "./MenuDivider";
 import MenuGroup from "./MenuGroup";
@@ -24,7 +24,8 @@ export default function Menu(props = {}) {
 
 }
 
-BaseComponent.extends(Menu, HasItems, EventEmitter);
+BaseComponent.extends(Menu);
+BaseComponent.use(Menu, HasItems, HasEventEmitter);
 
 Menu.defaultTemplate = null;
 

package/src/components/menu/MenuGroup.js

@@ -23,7 +23,8 @@ MenuGroup.use = function(template) {
     MenuGroup.defaultTemplate = template.menuGroup;
 };
 
-BaseComponent.extends(MenuGroup, HasItems);
+BaseComponent.extends(MenuGroup);
+BaseComponent.use(MenuGroup, HasItems);
 
 MenuGroup.prototype.data = function(data) {
     this.$description.data = data;

package/src/components/menu/MenuItem.js

@@ -32,7 +32,8 @@ MenuItem.use = function(template) {
     MenuItem.defaultTemplate = template.menuItem;
 };
 
-BaseComponent.extends(MenuItem, HasItems);
+BaseComponent.extends(MenuItem);
+BaseComponent.use(MenuItem, HasItems);
 
 
 MenuItem.prototype.label = function(label) {

package/src/components/modal/Modal.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 
 export default function Modal(config = {}) {
@@ -22,7 +22,7 @@ export default function Modal(config = {}) {
     };
 }
 
-BaseComponent.extends(Modal, EventEmitter);
+BaseComponent.extends(Modal, HasEventEmitter);
 
 // Theming
 Modal.defaultLayout = null;

package/src/components/pagination/Pagination.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 export default function Pagination(config = {}) {
     if(!(this instanceof Pagination)) {
@@ -31,7 +31,7 @@ export default function Pagination(config = {}) {
     this.$element = null;
 }
 
-BaseComponent.extends(Pagination, EventEmitter);
+BaseComponent.extends(Pagination, HasEventEmitter);
 
 Pagination.defaultTemplate = null;
 

package/src/components/popover/Popover.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 export default function Popover(config = {}) {
     if (!(this instanceof Popover)) {
@@ -35,7 +35,7 @@ export default function Popover(config = {}) {
     }
 }
 
-BaseComponent.extends(Popover, EventEmitter);
+BaseComponent.extends(Popover, HasEventEmitter);
 
 Popover.defaultTemplate = null;
 

package/src/components/progress/Progress.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import {Validator} from "../../../index";
 import DebugManager from "../../core/utils/debug-manager";
 
@@ -30,7 +30,7 @@ export default function Progress(props = {}) {
     };
 }
 
-BaseComponent.extends(Progress, EventEmitter);
+BaseComponent.extends(Progress, HasEventEmitter);
 
 Progress.defaultTemplate = null;
 

package/src/components/slider/Slider.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 export default function Slider(config = {}) {
     if (!(this instanceof Slider)) {
@@ -33,7 +33,7 @@ export default function Slider(config = {}) {
     };
 }
 
-BaseComponent.extends(Slider, EventEmitter);
+BaseComponent.extends(Slider, HasEventEmitter);
 
 Slider.use = function(template) {};
 Slider.defaultTemplate = null;

package/src/components/splitter/Splitter.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import {Validator} from "../../../index";
 
 export default function Splitter(config = {}) {
@@ -18,7 +18,7 @@ export default function Splitter(config = {}) {
     this.$element = null;
 }
 
-BaseComponent.extends(Splitter, EventEmitter);
+BaseComponent.extends(Splitter, HasEventEmitter);
 
 Splitter.defaultTemplate = null;
 

package/src/components/stepper/Stepper.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import {$, Validator} from "../../../index";
 
 export default function Stepper(config = {}) {
@@ -27,7 +27,7 @@ export default function Stepper(config = {}) {
     this.$element = null;
 }
 
-BaseComponent.extends(Stepper, EventEmitter);
+BaseComponent.extends(Stepper, HasEventEmitter);
 
 Stepper.defaultTemplate = null;
 Stepper.defaultStepTemplate = null;

package/src/components/switch/Switch.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 function Switch(config = {}) {
     if (!(this instanceof Switch)) {
@@ -11,7 +11,7 @@ function Switch(config = {}) {
     };
 }
 
-BaseComponent.extends(Switch, EventEmitter);
+BaseComponent.extends(Switch, HasEventEmitter);
 
 // Theming
 Switch.defaultTemplate = null;

package/src/components/tabs/Tabs.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 
 export default function Tabs(config = {}) {
@@ -16,7 +16,7 @@ export default function Tabs(config = {}) {
     this.tabsMap = {};
 }
 
-BaseComponent.extends(Tabs, EventEmitter);
+BaseComponent.extends(Tabs, HasEventEmitter);
 
 Tabs.defaultTemplate = null;
 Tabs.defaultTabTemplate = null;

package/src/components/toast/Toast.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 export default function Toast(message, config = {}) {
     if (!(this instanceof Toast)) {
@@ -22,7 +22,7 @@ export default function Toast(message, config = {}) {
     };
 }
 
-BaseComponent.extends(Toast, EventEmitter);
+BaseComponent.extends(Toast, HasEventEmitter);
 
 Toast.use = function(template) {};
 Toast.defaultTemplate = null;

package/src/core/utils/{EventEmitter.js → HasEventEmitter.js}

@@ -1,12 +1,11 @@
-import NativeDocumentError from "../errors/NativeDocumentError";
 
-export default function EventEmitter() {
+export default function HasEventEmitter() {
 
     this.__$events = null;
 
 }
 
-EventEmitter.prototype.on = function(eventName, callback) {
+HasEventEmitter.prototype.on = function(eventName, callback) {
     if(!this.__$events) {
         this.__$events = new Map();
     }
@@ -22,11 +21,11 @@ EventEmitter.prototype.on = function(eventName, callback) {
     existingCallback.push(callback);
 };
 
-EventEmitter.prototype.hasListeners = function(eventName) {
+HasEventEmitter.prototype.hasListeners = function(eventName) {
     return !!this.__$events.get(eventName);
 };
 
-EventEmitter.prototype.trigger = async function(eventName, ...args) {
+HasEventEmitter.prototype.trigger = async function(eventName, ...args) {
     const callbacks = this.__$events.get(eventName);
     if(!callbacks) {
         // throw new NativeDocumentError(this.constructor.name, 'Event '+eventName+' not found');
@@ -43,4 +42,4 @@ EventEmitter.prototype.trigger = async function(eventName, ...args) {
     }
     return result;
 };
-EventEmitter.prototype.emit = EventEmitter.prototype.trigger;
+HasEventEmitter.prototype.emit = HasEventEmitter.prototype.trigger;