native-document 1.0.245 → 1.0.247

package/package.json

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

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

@@ -539,4 +539,12 @@ ObservableArray.prototype.fnClear = function () {
     return () => this.clear();
 };
 
+ObservableArray.prototype.val = function () {
+    const result = [];
+    for(const element of this.$currentValue) {
+        result.push(element?.__$Observable ? element.val() : element);
+    }
+    return result;
+};
+
 export default ObservableArray;

package/src/core/data/Store.js

@@ -70,7 +70,7 @@ export const StoreFactory = function() {
         from.subscribe((data, _, operations) => {
             const callback = methods[operations.action];
             if(!callback) {
-                originalSet(data);
+                originalSet([...data]);
                 return;
             }
             callback(...(operations.args||[]));

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;