native-document 1.0.137 → 1.0.139

package/package.json

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

package/src/components/BaseComponent.js

@@ -1,9 +1,12 @@
+import {classPropertyAccumulator, cssPropertyAccumulator} from "../../utils";
+
 /**
  *
  * @class
  */
 export default function BaseComponent() {
     this.$description = {};
+    this.$editableProps = null;
 }
 
 Object.defineProperty( BaseComponent.prototype, 'nd', {
@@ -83,4 +86,31 @@ BaseComponent.prototype.render = function(renderFn) {
     }
     this.$description.render = renderFn;
     return this;
+};
+
+BaseComponent.prototype.getEditableProps = function() {
+    if(!this.$editableProps) {
+        const rawProps = this.$description.props || {};
+        this.$editableProps = {
+            ...rawProps,
+            class: classPropertyAccumulator(this.$description.props.class),
+            style: cssPropertyAccumulator(this.$description.props.style)
+        };
+    }
+
+    return this.$editableProps;
+};
+
+BaseComponent.prototype.resolveProps = function() {
+    if(!this.$editableProps) {
+        return { ...this.$description.props };
+    }
+    const props = { ...this.$editableProps };
+    if(props.class) {
+        props.class = props.class.value();
+    }
+    if(props.style) {
+        props.style = props.style.value();
+    }
+    return props;
 };

package/src/components/alert/Alert.js

@@ -26,22 +26,17 @@ export default function Alert(message, config = {}) {
 }
 
 Alert.defaultTemplate = null;
-Alert.defaultTitleTemplate = null;
-Alert.defaultButtonsTemplate = null;
-Alert.defaultContentTemplate = null;
 
 /**
  * Sets the default template for all Alert instances
- * @param {{alert: (alert: Alert) => ValidChildren, alertContent: (alert: Alert) => ValidChildren, alertButtons: (alert: Alert) => ValidChildren, alertTitle: (alert: Alert) => ValidChildren}} template - Template object containing alert factory function
+ * @param {ValidChildren} template - Template object containing alert factory function
  */
 Alert.use = function(template) {
-    Alert.defaultTemplate = template.alert;
-    Alert.defaultTitleTemplate = template.alertTitle;
-    Alert.defaultButtonsTemplate = template.alertButtons;
-    Alert.defaultContentTemplate = template.alertContent;
+    Alert.defaultTemplate = template;
 };
 
-BaseComponent.extends(Alert, HasEventEmitter);
+BaseComponent.extends(Alert);
+BaseComponent.use(Alert, HasEventEmitter);
 
 /**
  * Sets the variant style for the alert

package/src/components/avatar/Avatar.js

@@ -36,10 +36,10 @@ Avatar.defaultTemplate = null;
 
 /**
  * Sets the default template for all Avatar instances
- * @param {{avatar: (avatar: Avatar) => ValidChildren}} template - Template object containing avatar factory function
+ * @param {ValidChildren} template - Template object containing avatar factory function
  */
 Avatar.use = function(template) {
-    Avatar.defaultTemplate = template.avatar;
+    Avatar.defaultTemplate = template;
 };
 
 Avatar.preset = function(name, callback) {

package/src/components/avatar/AvatarGroup.js

@@ -17,6 +17,11 @@ export default function AvatarGroup(props = {}) {
 
 BaseComponent.extends(AvatarGroup);
 
+AvatarGroup.defaultTemplate = null;
+AvatarGroup.use = function(template) {
+    AvatarGroup.defaultTemplate = template;
+};
+
 AvatarGroup.prototype.items = function() {
     this.$description.items = Array.from(arguments);
     return this;

package/src/components/badge/Badge.js

@@ -24,7 +24,9 @@ BaseComponent.extends(Badge);
 
 Badge.defaultTemplate = null;
 
-Badge.use = function(template) {};
+Badge.use = function(template) {
+    Badge.defaultTemplate = template;
+};
 
 Badge.preset = function(name, callback) {
     if (Badge.prototype[name] || Badge[name]) {

package/src/components/breadcrumb/BreadCrumb.js

@@ -15,10 +15,13 @@ export default function Breadcrumb(config = {}) {
     };
 }
 
-BaseComponent.extends(Breadcrumb, HasEventEmitter);
+BaseComponent.extends(Breadcrumb);
+BaseComponent.use(Breadcrumb, HasEventEmitter);
 
-Breadcrumb.use = function(template) {};
 Breadcrumb.defaultTemplate = null;
+Breadcrumb.use = function(template) {
+    Breadcrumb.defaultTemplate = template;
+};
 
 Breadcrumb.prototype.item = function(label, href) {
     this.$description.items.push({ label, href });

package/src/components/divider/Divider.js

@@ -26,9 +26,8 @@ export default function Divider(label, props = {}) {
 BaseComponent.extends(Divider);
 
 Divider.defaultTemplate = null;
-
 Divider.use = function(template) {
-    Divider.defaultTemplate = template.divider;
+    Divider.defaultTemplate = template;
 };
 
 Divider.preset = function(name, callback) {

package/src/components/list/ListGroup.js

@@ -25,7 +25,7 @@ BaseComponent.use(ListGroup, HasItems);
 ListGroup.defaultTemplate = null;
 
 ListGroup.use = function(template) {
-    ListGroup.defaultTemplate = template.listGroup;
+    ListGroup.defaultTemplate = template;
 };
 
 ListGroup.prototype.header = function(header) {

package/src/components/list/ListItem.js

@@ -26,7 +26,7 @@ BaseComponent.extends(ListItem);
 ListItem.defaultTemplate = null;
 
 ListItem.use = function(template) {
-    ListItem.defaultTemplate = template.listItem;
+    ListItem.defaultTemplate = template;
 };
 
 ListItem.prototype.content = function(content) {

package/src/components/menu/MenuDivider.js

@@ -17,5 +17,5 @@ BaseComponent.extends(MenuDivider);
 MenuDivider.defaultTemplate = null;
 
 MenuDivider.use = function(template) {
-    MenuDivider.defaultTemplate = template.menuDivider;
+    MenuDivider.defaultTemplate = template;
 };

package/src/components/progress/Progress.js

@@ -35,7 +35,7 @@ BaseComponent.extends(Progress, HasEventEmitter);
 Progress.defaultTemplate = null;
 
 Progress.use = function(template) {
-    Progress.defaultTemplate = template.progress;
+    Progress.defaultTemplate = template;
 };
 
 Progress.preset = function(name, callback) {

package/src/components/spacer/Spacer.js

@@ -10,4 +10,9 @@ export function Spacer(props = {}) {
         props
     };
 }
-BaseComponent.extends(Spacer);
+BaseComponent.extends(Spacer);
+
+Spacer.defaultTemplate = null;
+Spacer.use = function(template) {
+    Spacer.defaultTemplate = template;
+};

package/src/components/spinner/Spinner.js

@@ -24,7 +24,7 @@ export default function Spinner(props = {}) {
 
 Spinner.defaultTemplate = null;
 Spinner.use = function(template) {
-    Spinner.defaultTemplate = template.spinner;
+    Spinner.defaultTemplate = template;
 };
 
 BaseComponent.extends(Spinner);

package/src/components/splitter/Splitter.js

@@ -23,7 +23,7 @@ BaseComponent.extends(Splitter, HasEventEmitter);
 Splitter.defaultTemplate = null;
 
 Splitter.use = function(template) {
-    Splitter.defaultTemplate = template.splitter;
+    Splitter.defaultTemplate = template;
 };
 
 Splitter.prototype.dynamic = function(){

package/src/components/splitter/SplitterGutter.js

@@ -18,7 +18,7 @@ export default function SplitterGutter(leftPanel, rightPanel, config = {}) {
 SplitterGutter.defaultTemplate = null;
 
 SplitterGutter.use = function(template) {
-    SplitterGutter.defaultTemplate = template.splitterGutter;
+    SplitterGutter.defaultTemplate = template;
 };
 
 SplitterGutter.prototype.panels = function(leftPanel, rightPanel) {

package/src/components/splitter/SplitterPanel.js

@@ -29,7 +29,7 @@ BaseComponent.extends(SplitterPanel, BaseComponent);
 SplitterPanel.defaultTemplate = null;
 
 SplitterPanel.use = function(template) {
-    SplitterPanel.defaultTemplate = template.splitterPanel;
+    SplitterPanel.defaultTemplate = template;
 };
 
 SplitterPanel.prototype.content = function(content) {