native-document 1.0.248 → 1.0.249

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.248",
+  "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/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/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;
 };
 

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();
             }