native-document 1.0.254 → 1.0.256

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.254",
+  "version": "1.0.256",
   "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

@@ -49,9 +49,6 @@ export default function FieldCollection(name, props = {}) {
         props,
     };
 
-    this.$description.value.interceptMutations((items) =>
-        items.map(item => Validator.isObservable(item) ? item : $.object(item)),
-    );
 }
 
 BaseComponent.extends(FieldCollection);
@@ -149,9 +146,6 @@ FieldCollection.prototype.transition = function(transitionName) {
 FieldCollection.prototype.model = function(observable) {
     if(Validator.isObservable(observable)) {
         this.$description.value = observable;
-        this.$description.value.interceptMutations((items) => {
-            return items.map(item => Validator.isObservable(item) ? item : $.object(item));
-        });
         return this;
     }
     this.$description.value.set(observable);

package/src/components/toast/Toast.js

@@ -46,6 +46,8 @@ export default function Toast(content, props = {}) {
         props,
     };
     this.aria = { 'role': 'status', 'aria-live': 'polite' };
+
+    queueMicrotask(() => this.show());
 }
 
 BaseComponent.extends(Toast);
@@ -260,4 +262,9 @@ Toast.prototype.onClose = function(handler) {
     return this;
 };
 
+Toast.error = (content, props = {}) => Toast(content, props).error();
+Toast.success = (content, props = {}) => Toast(content, props).success();
+Toast.warning = (content, props = {}) => Toast(content, props).warning();
+Toast.info = (content, props = {}) => Toast(content, props).info();
+
 Toast.prototype.show = BaseComponent.prototype.toNdElement;

package/src/core/data/Observable.js

@@ -196,6 +196,7 @@ Observable.auto = (value, options = null) => {
     return new ObservableItem(value, options);
 };
 ObservableItem.auto = Observable.auto;
+ObservableArray.auto = Observable.auto;
 
 
 Observable.init = function(initialValue, configs = null) {

package/src/core/data/ObservableArray.js

@@ -8,6 +8,8 @@ import {nextTick} from '../utils/helpers';
 export const mutationMethods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
 export const noMutationMethods = ['map', 'forEach', 'filter', 'reduce', 'some', 'every', 'find', 'findIndex', 'concat', 'includes', 'indexOf'];
 
+const toObservable = (item) => item?.__$Observable ? item : ObservableArray.auto(item);
+
 /**
  * Reactive array container extending ObservableItem.
  * Wraps a native array and triggers reactivity on mutations (push, pop, splice, etc.).
@@ -22,11 +24,31 @@ export const noMutationMethods = ['map', 'forEach', 'filter', 'reduce', 'some',
  * const items = Observable.array([1, 2, 3]);
  * items.push(4); // triggers reactivity
  */
-const ObservableArray = function (target, configs = null) {
+const ObservableArray = function (target, configs = { propagation: false, deep: true, reset: false }) {
     if(!Array.isArray(target)) {
         throw new NativeDocumentError('Observable.array : target must be an array');
     }
 
+
+    if(configs?.deep) {
+        target = target.map(toObservable);
+        this.interceptMutations((data, operations) => {
+            if(!operations.action || ['push', 'unshift', 'set', 'splice'].includes(operations.action)) {
+                if(operations.action === 'splice') {
+                    for(let i = 2, length = data.length; i < length; ++i) {
+                        data[i] = toObservable(data[i]);
+                    }
+                    return data;
+                }
+                if(operations.action === 'set') {
+                    data[0] = data[0].map(toObservable);
+                    return data;
+                }
+                return data.map(toObservable);
+            }
+        });
+    }
+
     ObservableItem.call(this, target, configs);
     if(process.env.NODE_ENV === 'development') {
         PluginsManager.emit('CreateObservableArray', this);
@@ -36,7 +58,7 @@ const ObservableArray = function (target, configs = null) {
 ObservableArray.prototype = Object.create(ObservableItem.prototype);
 ObservableArray.prototype.constructor = ObservableArray;
 ObservableArray.prototype.__$isObservableArray = true;
-
+ObservableArray.auto = () => {};
 
 Object.defineProperty(ObservableArray.prototype, 'length', {
     get() {
@@ -48,13 +70,21 @@ Object.defineProperty(ObservableArray.prototype, 'length', {
 ObservableArray.prototype.$mutate = function(action, args, mutateFn) {
     if(this.$mutationInterceptor) {
         const value = this.$mutationInterceptor(args, { action });
-        if(args !== undefined) {
+        if(value != null) {
             args = value;
         }
     }
     mutateFn(args);
 };
 
+const $originalSet = ObservableArray.prototype.set;
+ObservableArray.prototype.set = function(...values) {
+    return this.$mutate('set', values, (argsToUse) => {
+        $originalSet.call(this, ...argsToUse);
+        return argsToUse[0];
+    });
+};
+
 mutationMethods.forEach((method) => {
     ObservableArray.prototype[method] = function(...values) {
         return this.$mutate(method, values, (argsToUse) => {
@@ -540,12 +570,12 @@ ObservableArray.prototype.fnClear = function () {
     return () => this.clear();
 };
 
-ObservableArray.prototype.rawValue = function () {
-    const result = [];
-    for(const element of this.$currentValue) {
-        result.push(element?.__$Observable ? element.val() : element);
-    }
-    return result;
-};
+// ObservableArray.prototype.resolve = function () {
+//     const result = [];
+//     for(const element of this.$currentValue) {
+//         result.push(element?.__$Observable ? element.val() : element);
+//     }
+//     return result;
+// };
 
 export default ObservableArray;

package/src/ui/components/drawer/drawer.css

@@ -1,7 +1,7 @@
 :root {
     --drawer-z-index: 1000;
     --drawer-background-color: white;
-    --drawer-width: 400px;
+    --drawer-width: 500px;
     --drawer-backdrop-color: rgba(0, 0, 0, var(--opacity-backdrop));
     --drawer-panel-backdrop-color: hsl(from var(--gray-lite-1) h s l / .5);
     --drawer-panel-shadow: 0 0 20px rgba(0, 0, 0, 0.2);