native-document 1.0.246 → 1.0.248

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.246",
+  "version": "1.0.248",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/components/form/field/types/AddressSearchField.js

@@ -0,0 +1,60 @@
+import { $ } from '../../../../core/data/Observable';
+import Field from '../Field';
+
+
+export default function AddressSearchField(name, props = {}) {
+    if(!(this instanceof AddressSearchField)) {
+        return new AddressSearchField(name, props);
+    }
+
+    Field.call(this, name, 'input', props);
+
+    Object.assign(this.$description, {
+        renderSuggestion: null
+    });
+
+}
+
+AddressSearchField.defaultTemplate = null;
+
+AddressSearchField.prototype = Object.create(Field.prototype);
+AddressSearchField.prototype.constructor = AddressSearchField;
+
+/**
+ * Registers the render template for AddressSearchField.
+ * @param {(description: {
+ *     value: Observable<string>,
+ *     placeholder: string|null,
+ *     debounceMs: number,
+ *     disabled: Observable<boolean>|null,
+ *     loading: Observable<boolean>|null,
+ *     props: GlobalAttributes,
+ * }, instance: AddressSearchField) => NdChild} template
+ */
+AddressSearchField.use = function(template) {
+    AddressSearchField.defaultTemplate = template;
+};
+
+
+/**
+ * @param {Observable} $loading
+ * @return {this}
+ */
+AddressSearchField.prototype.loading = function($loading){
+    this.$description.loading = $loading;
+    return this;
+};
+
+/**
+ * @param {(sugesstion: *) => {}} callback
+ * @return {AddressSearchField}
+ */
+AddressSearchField.prototype.onSuggestions = function(callback){
+    this.$description.callback = callback;
+    return this;
+};
+
+AddressSearchField.prototype.renderSuggestion = function(renderFn){
+    this.$description.renderSuggestion = renderFn;
+    return this;
+};

package/src/components/form/field/types/SearchField.js

@@ -63,4 +63,13 @@ SearchField.prototype.constructor = SearchField;
 SearchField.prototype.debounce = function(ms) {
     this.$description.debounce = ms;
     return this;
-};
+};
+
+/**
+ * @param {Observable} $loading
+ * @return {this}
+ */
+SearchField.prototype.loading = function($loading){
+    this.$description.loading = $loading;
+    return this;
+};

package/src/components/list/ListGroup.js

@@ -50,6 +50,7 @@ export default function ListGroup(label, props = {}) {
         selectByClick:    $(false),
         loopOnKeyboard:   $(false),
         hideIfEmpty: null,
+        showTitleWhen: null,
         props,
     };
 }
@@ -134,10 +135,19 @@ ListGroup.prototype.data = function(data) {
     this.$description.data = data;
     return this;
 };
+
 /**
  * @return {this}
  */
 ListGroup.prototype.hideIfEmpty = function() {
     this.$description.hideIfEmpty = true;
     return this;
+};
+
+/**
+ * @param {Observable} $observable
+ */
+ListGroup.prototype.showTitleWhen = function($observable) {
+    this.$description.showTitleWhen = $observable;
+    return this;
 };

package/src/components/list/types/ListGroup.d.ts

@@ -51,6 +51,7 @@ export interface ListGroupInterface {
     on(event: string, handler: (...args: unknown[]) => void): this;
     emit(event: string, ...args: unknown[]): void;
     hasListeners(event: string): boolean;
+    showTitleWhen(observable: ObservableItem<boolean>): boolean;
 }
 
 export declare function ListGroup(label: ValidChild, props?: GlobalAttributes): ListGroupInterface;

package/src/components/map/address-map-picker/AddressMapPicker.js

@@ -0,0 +1,15 @@
+import BaseComponent from '../../BaseComponent';
+
+
+export default function AddressMapPicker() {
+    if(!(this instanceof AddressMapPicker)) {
+        return new AddressMapPicker();
+    }
+
+    this.$description = {
+
+    };
+
+};
+
+BaseComponent.extends(AddressMapPicker);

package/src/core/data/ObservableItem.js

@@ -646,6 +646,28 @@ ObservableItem.prototype.clone = function() {
     return new ObservableItem(clonedValue);
 };
 
+/**
+ * @param {ObservableItem} targetObservable
+ * @return {(function())|*}
+ */
+ObservableItem.prototype.sync = function(targetObservable) {
+    if(this === targetObservable) {
+        return () => {};
+    }
+
+    const updateTargetObservable = (newValue) => targetObservable.set(newValue);
+    const updateCurrentObservable = (newValue) => this.set(newValue);
+
+    this.subscribe(updateTargetObservable);
+    targetObservable.subscribe(updateCurrentObservable);
+
+
+    return () => {
+        this.unsubscribe(updateTargetObservable);
+        targetObservable.unsubscribe(updateCurrentObservable);
+    };
+};
+
 
 ObservableItem.prototype.fnSet = function(value) {
     return () => this.set(value);

package/src/ui/components/button/ButtonRender.js

@@ -46,7 +46,7 @@ function buildContent($desc) {
     const content = [];
 
     if($desc.loading) {
-        content.push(ShowIf($desc.loading, Spinner({ class: 'btn-spinner' })));
+        content.push(ShowIf($desc.loading, Spinner({ class: 'btn-spinner' }).size($desc.size)));
     }
 
     if($desc.icon && isIconBefore($desc.iconPosition)) {

package/src/ui/components/button/button.css

@@ -272,9 +272,12 @@
         &.is-large { width: var(--btn-height-large); }
     }
 }
-.btn.is-loading:not(.is-outline) .spinner,
-.btn.is-loading:not(.is-ghost) .spinner {
-    --spinner-color: white !important;
+.btn.is-loading .spinner{
+    --spinner-color: white;
+}
+.btn.is-loading.is-outline .spinner,
+.btn.is-loading.is-ghost .spinner {
+    --spinner-color: var(--gray-lite-2);
 }
 
 .btn-icon {

package/src/ui/components/list/group/ListGroupRender.js

@@ -63,5 +63,9 @@ function buildGroupHeader($desc, instance) {
         header.nd.onStopClick(() => $desc.collapsed.toggle());
     }
 
+    if($desc.showTitleWhen) {
+        return ShowIf($desc.showTitleWhen, header);
+    }
+
     return header;
 }

package/src/ui/components/list/group/list-group.css

@@ -57,6 +57,6 @@
 
 .list-group-items {
     .list-item {
-        padding-left: calc(var(--list-group-items-indent) + 14px);
+        padding-left: calc(var(--list-group-items-indent) + 5px);
     }
 }

package/src/ui/components/spinner/spinner.css

@@ -1,9 +1,9 @@
 :root {
     --spinner-size-extra-small: 16px;
-    --spinner-size-small: 24px;
-    --spinner-size-medium: 36px;
-    --spinner-size-large: 48px;
-    --spinner-size-extra-large: 64px;
+    --spinner-size-small: 20px;
+    --spinner-size-medium: 32px;
+    --spinner-size-large: 45px;
+    --spinner-size-extra-large: 60px;
 
     --spinner-speed-slow: 1.2s;
     --spinner-speed-normal: 0.8s;