native-document 1.0.247 → 1.0.249

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.247",
+  "version": "1.0.249",
   "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/FieldCollection.js

@@ -45,6 +45,7 @@ export default function FieldCollection(name, props = {}) {
         layout: null,
         transition: null,
         label: null,
+        filter: null,
         props,
     };
 
@@ -79,7 +80,7 @@ FieldCollection.use = function(template) {
 };
 
 /**
- * @param {(fields: FieldCollection, index: number) => NdChild} fieldBuilder
+ * @param {(index: number) => Record<string, NdChild>} fieldBuilder
  * @returns {this}
  */
 FieldCollection.prototype.fields = function(fieldBuilder) {
@@ -148,32 +149,49 @@ FieldCollection.prototype.transition = function(transitionName) {
 FieldCollection.prototype.model = function(observable) {
     if(Validator.isObservable(observable)) {
         this.$description.value = observable;
-        this.$description.value.interceptMutations((items) =>
-            items.map(item => Validator.isObservable(item) ? item : $.object(item)),
-        );
+        this.$description.value.interceptMutations((items) => {
+            return items.map(item => Validator.isObservable(item) ? item : $.object(item));
+        });
         return this;
     }
     this.$description.value.set(observable);
     return this;
 };
 
+
 /**
+ * @param {*} data
  * @returns {this}
  */
-FieldCollection.prototype.add = function() {
+FieldCollection.prototype.add = function(data) {
     if(!this.$description.fieldBuilder) {
         throw new NativeDocumentError('FieldCollection: fields() must be defined before add()');
     }
-    const raw  = this.$description.defaultItem
-        ? this.$description.defaultItem()
-        : {};
-    const item = Validator.isObservable(raw) ? raw : $.object(raw);
+    const item = this.$dataSet(data);
+    if(!item) {
+        return;
+    }
 
     this.$description.value.push(item);
     this.emit('add', item);
     return this;
 };
 
+FieldCollection.prototype.$dataSet = function(data) {
+    const dataBuilder = this.$description.defaultItem;
+
+    let raw  = {};
+    if(dataBuilder) {
+        const dataSet =this.$description.defaultItem(data);
+        if(!dataSet) {
+            return null;
+        }
+        raw = dataSet;
+    }
+
+    return Validator.isObservable(raw) ? raw : $.object(raw);
+};
+
 /**
  * @param {*} item
  * @returns {this}
@@ -204,9 +222,25 @@ FieldCollection.prototype.reset = function() {
  * @returns {*[]}
  */
 FieldCollection.prototype.value = function() {
-    return this.$description.value.map(item =>
+    const raw = this.$description.value.map(item =>
         Validator.isObservable(item) ? item.val() : item,
     );
+    const filter = this.$description.filter;
+    return filter ? raw.filter(filter) : raw;
+};
+
+/**
+ * Predicate applied on value() export to filter out unwanted items.
+ *
+ * @param {(item: *) => boolean} fn
+ * @returns {this}
+ */
+FieldCollection.prototype.filter = function(fn) {
+    if (typeof fn !== 'function') {
+        throw new NativeDocumentError('FieldCollection.filter() expects a function');
+    }
+    this.$description.filter = fn;
+    return this;
 };
 
 /**

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/form/types/FieldCollection.d.ts

@@ -34,6 +34,7 @@ export interface FieldCollectionInterface extends Omit<BaseComponent, 'onChange'
     value(): unknown[];
     count(): number;
     isEmpty(): boolean;
+    filter(handler: (item: any) => boolean): this;
     onChange(handler: () => void): this;
     onAdd(handler: () => void): this;
     onRemove(handler: (item: unknown) => void): this;

package/src/components/form/types/fields/SelectField.d.ts

@@ -40,7 +40,7 @@ export type SelectFieldDescription = {
     props: GlobalAttributes;
 };
 
-export interface SelectFieldInterface extends Omit<FieldInterface, 'render'> {
+export interface SelectFieldInterface extends Omit<FieldInterface, 'render' | 'onChange'> {
     render(renderFn: (description: SelectFieldDescription, instance: SelectFieldInterface) => ValidChild): this;
     options(opts: SelectOption[]): this;
     option(value: unknown, label: ValidChild, props?: GlobalAttributes): this;

package/src/components/list/ListGroup.js

@@ -149,4 +149,5 @@ ListGroup.prototype.hideIfEmpty = function() {
  */
 ListGroup.prototype.showTitleWhen = function($observable) {
     this.$description.showTitleWhen = $observable;
+    return this;
 };

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/ObservableArray.js

@@ -466,6 +466,7 @@ ObservableArray.prototype.deepSubscribe = function(callback) {
     };
 };
 
+
 /**
  * Keeps this array in sync with another ObservableArray.
  * All mutations are mirrored to the target array in real time.
@@ -539,7 +540,7 @@ ObservableArray.prototype.fnClear = function () {
     return () => this.clear();
 };
 
-ObservableArray.prototype.val = function () {
+ObservableArray.prototype.rawValue = function () {
     const result = [];
     for(const element of this.$currentValue) {
         result.push(element?.__$Observable ? element.val() : element);

package/src/core/data/ObservableItem.js

@@ -88,7 +88,17 @@ ObservableItem.prototype.intercept = function(callback) {
  * @returns {ObservableItem} this
  */
 ObservableItem.prototype.interceptMutations = function(callback) {
-    this.$mutationInterceptor = callback;
+    if (typeof callback !== 'function') {
+        throw new NativeDocumentError('interceptMutations expects a function');
+    }
+
+    const previousMutationInterceptor = this.$mutationInterceptor;
+    this.$mutationInterceptor = (data, ...args) => {
+        const prevResult = previousMutationInterceptor ? previousMutationInterceptor(data, ...args) : undefined;
+        const nextData = prevResult !== undefined ? prevResult : data;
+        const result = callback(nextData, ...args);
+        return result !== undefined ? result : nextData;
+    };
     return this;
 };
 
@@ -646,6 +656,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/core/data/ObservableObject.js

@@ -16,10 +16,14 @@ import ObservableArray from './ObservableArray';
  * const user = Observable.object({ name: 'John', age: 25 });
  * user.name.$value = 'Jane'; // triggers reactivity on name only
  */
-export const ObservableObject = function(target, configs) {
+export const ObservableObject = function(target, configs = { }) {
     ObservableItem.call(this, target);
     this.$observables = {};
-    this.configs = configs;
+    this.configs = {
+        deep: true,
+        propagation: true,
+        ...configs,
+    };
 
     for(const key in target) {
         this.$addKey(key);

package/src/ui/components/form/FieldCollectionRender.js

@@ -4,6 +4,8 @@ import { $ } from '../../../core/data/Observable';
 import {H2} from '../../../core/elements';
 
 import './field-collection.css';
+import {buildRow} from '../table/data-table/tables';
+import {items} from 'happy-dom/lib/PropertySymbol';
 
 export default function FieldCollectionRender($desc, instance) {
     const props = instance.getEditableProps();
@@ -116,7 +118,6 @@ export default function FieldCollectionRender($desc, instance) {
     return Div(instance.resolveProps(), layout({ button, rows, label }));
 }
 
-
 const defaultLayout = ({ label, button, rows }) => {
 
     return [

package/src/ui/components/popover/PopoverRender.js

@@ -80,7 +80,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
             if($desc.showIf && $desc.showIf.val() === false) {
                 return;
             }
-            if(isSupportsPopover) {
+            if(isSupportsPopover && popover.isConnected) {
                 popover.showPopover();
             }