native-document 1.0.255 → 1.0.257

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.255",
+  "version": "1.0.257",
   "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/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/ObservableResource.js

@@ -1,4 +1,5 @@
 import ObservableItem from './ObservableItem';
+import {ObservableObject} from './ObservableObject';
 import {debounce} from '../utils/helpers';
 
 const STATE = {
@@ -39,7 +40,7 @@ export default function ObservableResource(fn, deps, config) {
     this.$controller  = null;
     this.$subscriptions        = [];
 
-    this.data  = config.into ?? new ObservableItem(null);
+    this.data  = config.into ?? new ObservableObject({});
     this.error = new ObservableItem(null);
     this.state = new ObservableItem(STATE.UNRESOLVED);
 
@@ -65,6 +66,10 @@ ObservableResource.prototype.$applyResult = function(result) {
         this.$config.apply(result, this.data);
         return;
     }
+    if(result?.__$Observable) {
+        this.data = result;
+        return;
+    }
     this.data.set(result);
 };
 
@@ -300,10 +305,8 @@ ObservableResource.prototype.isUnresolved = function() {
  * resource.onSuccess((data) => console.log('Loaded:', data));
  */
 ObservableResource.prototype.onSuccess = function(callback) {
-    this.data.subscribe((value) => {
-        if (this.state.val() === STATE.READY) {
-            callback(value);
-        }
+    this.state.on(STATE.READY, () => {
+        callback(this.data.val());
     });
     return this;
 };

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

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

@@ -21,6 +21,7 @@ export const formatSize = (bytes) => {
 
 
 export const getFileThumbnail = (file, fieldInstance) => {
+    file = file?.__$Observable ? file.val() : file;
     const isImage = file.type?.startsWith('image/') || !!file.url;
     const url = file.url ??  URL.createObjectURL(file);
     if(isImage) {