native-document 1.0.194 → 1.0.196

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.194",
+  "version": "1.0.196",
   "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/types/FileField.js

@@ -40,6 +40,7 @@ export default function FileField(name, props = {}) {
         mode:     null,
         files:    $.array([]),
         fileIcons: [],
+        maxFiles: null,
         props,
     });
 }
@@ -141,6 +142,7 @@ FileField.prototype.extensions = function(extensions, message) {
  * @returns {this}
  */
 FileField.prototype.maxFiles = function(max, message) {
+    this.$description.maxFiles = max;
     return this.addRule(Validation.maxFiles, [max], message);
 };
 

package/src/components/form/field/types/file-field-mode/FileImagePreviewMode.js

@@ -43,6 +43,7 @@ export default function FileImagePreviewMode(props = {}) {
         renderActions: null,
         mode: 'avatar',
         ratio: null,
+        previewSourceFrom: null,
         props,
     };
 }
@@ -272,4 +273,11 @@ FileImagePreviewMode.prototype.storyRatio = function() {
 FileImagePreviewMode.prototype.portraitRatio = function() {
     this.$description.ratio = '4/5';
     return this;
+};
+
+/**
+ * @param {Observable} observable
+ */
+FileImagePreviewMode.prototype.previewSourceFrom = function(observable) {
+    this.$description.previewSourceFrom = observable;
 };

package/src/components/form/field/types/file-field-mode/FileWallMode.js

@@ -33,6 +33,7 @@ export default function FileWallMode(props = {}) {
         addIcon:    null,
         renderCell: null,
         renderAdd:  null,
+        previewItemsFrom:  null,
         props,
     };
 }
@@ -103,4 +104,12 @@ FileWallMode.prototype.renderCell = function(fn) {
 FileWallMode.prototype.renderAdd = function(fn) {
     this.$description.renderAdd = fn;
     return this;
+};
+
+/**
+ *
+ * @param {Observable} observable
+ */
+FileWallMode.prototype.previewItemsFrom = function(observable) {
+    this.$description.previewItemsFrom = observable;
 };

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

@@ -1,4 +1,4 @@
-import type { ValidChild } from '../../../../../types/elements';
+import type {Observable, ValidChild} from '../../../../../types/elements';
 import type { GlobalAttributes } from '../../../../../types/globals';
 import type { BaseComponent } from '../../../BaseComponent';
 
@@ -36,6 +36,7 @@ export interface FileImagePreviewModeInterface extends BaseComponent {
     landscapeRatio(): this;
     storyRatio(): this;
     portraitRatio(): this;
+    previewSourceFrom(observable: Observable<string>): this;
 
     size(size: number | string): this;
     placeholderIcon(icon: ValidChild): this;

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

@@ -1,7 +1,9 @@
-import type { ValidChild } from '../../../../../types/elements';
+import type { ValidChild} from '../../../../../types/elements';
 import type { GlobalAttributes } from '../../../../../types/globals';
 import type { BaseComponent } from '../../../BaseComponent';
 import type { FileItemPreviewInterface } from './FileItemPreview';
+import {ObservableArray} from "../../../../../types/observable";
+import * as url from "node:url";
 
 export type FileWallModeDescription = {
     cellSize: string | number;
@@ -19,6 +21,7 @@ export interface FileWallModeInterface extends BaseComponent {
     addIcon(icon: ValidChild): this;
     renderCell(fn: (file: File, preview: FileItemPreviewInterface) => ValidChild): this;
     renderAdd(fn: () => ValidChild): this;
+    previewItemsFrom(observable: ObservableArray<Record<string, any> & { file: string } >): this;
 }
 
 

package/src/ui/components/form/file-upload-mode/FileImagePreviewModeRender.js

@@ -5,7 +5,11 @@ import './file-image-preview-mode.css';
 
 export default function FileImagePreviewModeRender($desc, nodeInstance) {
     const {$files, fieldDesc, fieldInstance} = $desc.$context;
-    const $preview = $(null);
+    const $preview = $desc.previewSourceFrom ?? $(null);
+
+    if(fieldDesc.defaultValue) {
+        $preview.set(fieldDesc.defaultValue);
+    }
 
     const input = buildInput(fieldDesc, fieldInstance, $files, $preview);
 
@@ -115,7 +119,7 @@ const buildHoverOverlay = ($desc, imagePreview, input, $files, nodeInstance) =>
     const wrapper = Div({
         class: buildShapeClass(nodeInstance, 'file-image-preview-wrapper is-hover-overlay', $desc),
         style: props.style.value()
-}, [imagePreview, overlay]);
+    }, [imagePreview, overlay]);
 
     wrapper.nd.onClick(() => input.click());
 

package/src/ui/components/form/file-upload-mode/FileWallModeRender.js

@@ -1,11 +1,15 @@
-import {Div, Input, Span, ForEachArray} from '../../../../../elements';
+import {Div, Input, Span, ForEachArray, ShowIf} from '../../../../../elements';
 import {getFileThumbnail} from '../helpers';
+import FileItemPreview from '../../../../components/form/field/types/file-field-mode/FileItemPreview';
+import { $ } from '../../../../core/data/Observable';
 
 import './file-wall-mode.css';
 
 export default function FileWallModeRender($desc, modeInstance) {
     const {$files, fieldDesc, fieldInstance} = $desc.$context;
 
+    const data  = $desc.previewItemsFrom ?? $files;
+
     const input = buildInput(fieldDesc, fieldInstance, $files);
 
     const addCell =   $desc.renderCell
@@ -15,8 +19,9 @@ export default function FileWallModeRender($desc, modeInstance) {
     return Div({class: 'file-wall-wrapper'}, [
         input,
         Div({class: 'file-wall'}, [
-            ForEachArray($files, addCell),
-            buildAddCell($desc, input, modeInstance),
+            fieldDesc.defaultValue ? ForEachArray(fieldDesc.defaultValue, (file) => addCell(new FileItemPreview(file))) : null,
+            ForEachArray(data, addCell),
+            buildAddCell($desc, input, modeInstance, data),
         ]),
     ]);
 }
@@ -64,7 +69,7 @@ const buildCell = (item, $desc, modeInstance, fieldInstance) => {
     return cell;
 };
 
-const buildAddCell = ($desc, input, modeInstance) => {
+const buildAddCell = ($desc, input, modeInstance, $previewList) => {
     let cell = null;
     const size = $desc.cellSize || 100;
 
@@ -80,6 +85,18 @@ const buildAddCell = ($desc, input, modeInstance) => {
 
     cell.nd.onClick(() => input.click());
 
+    if($desc.maxFiles > 0) {
+        let nbTotalPreview = null;
+        if($desc.defaultValue) {
+            nbTotalPreview = $.computed((defaults, list) => {
+                return defaults.length + list.length;
+            }, [$desc.defaultValue, $previewList]);
+        } else {
+            nbTotalPreview = $previewList.toLength();
+        }
+        return ShowIf(nbTotalPreview.isLessThanOrEqualTo($desc.maxFiles), cell);
+    }
+
     return cell;
 };
 

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

@@ -21,8 +21,8 @@ export const formatSize = (bytes) => {
 
 
 export const getFileThumbnail = (file, fieldInstance) => {
-    const isImage = file.type?.startsWith('image/');
-    const url = URL.createObjectURL(file);
+    const isImage = file.type?.startsWith('image/') || !!file.url;
+    const url = file.url ??  URL.createObjectURL(file);
     if(isImage) {
         return Img(url, {
             class: 'file-item-img',