vanjs-jsf 0.1.0 → 0.2.1

package/README.md

@@ -36,62 +36,69 @@ The currently supported form element types are:
 
 1. Install the library:
 
-Install the library from the npm registry:
-
   ```bash
   npm install vanjs-jsf
   ```
 
-2. Import it in your project & define your JSON schema + config:
+2. Import and define your JSON Schema with `x-jsf-presentation` hints:
 
   ```typescript
-  import { jsform } from 'vanjs-jsf';
+  import van from "vanjs-core";
+  import { jsform } from "vanjs-jsf";
+
+  const { div, h1, p, button } = van.tags;
 
   const schema = {
-    type: 'object',
+    type: "object",
     properties: {
-      userName: { type: 'string', title: 'Name' },
-      age: { type: 'number', title: 'Age' },
+      userName: {
+        type: "string",
+        title: "Name",
+        "x-jsf-presentation": { inputType: "text" },
+      },
+      age: {
+        type: "number",
+        title: "Age",
+        "x-jsf-presentation": { inputType: "number" },
+      },
     },
+    required: ["userName"],
+    "x-jsf-order": ["userName", "age"],
   };
+  ```
 
-  // Initial values to fill the form
+3. Create a config with initial values and render the form:
+
+  ```typescript
   const initialValues = { userName: "Simon" };
-  // JSON Schema Form config
   const config = {
     strictInputType: false,
     initialValues: initialValues,
     formValues: initialValues,
   };
-   ```
 
-3. Render the form using VanJS UI framework & handle form submit.
-
-  This library will call the `onsubmit` handler set using the VanJS `props` passing the original source event.
-
-  ```typescript
   const handleOnSubmit = (e: Event) => {
     e.preventDefault();
-    const values = jsfConfig.formValues;
-    alert(`Submitted successfully: ${JSON.stringify(values, null, 2)}`);
-    console.log("Submitted!", values);
+    const values = config.formValues;
+    alert(`Submitted: ${JSON.stringify(values, null, 2)}`);
   };
 
-   // Add the JSON Schema Form to an VanJS element 
-  div(
+  van.add(
+    document.body,
+    div(
       h1("json-schema-form + VanJS"),
-      p("This demo uses VanJS without any other form library."),
+      p("Dynamic form generated from JSON Schema."),
       jsform(
         {
           name: "my-jsf-form",
-          schema: schema, // JSON Schema defined previously
-          config: config, // JSON Schema Form configuration
+          schema: schema,
+          config: config,
           onsubmit: handleOnSubmit,
         },
         button({ type: "submit" }, "Submit")
       )
-    );
-
+    )
+  );
   ```
 
 ## Development

package/dist/VanJsfField.d.ts

@@ -14,6 +14,10 @@ export declare class VanJsfField extends VanJSComponent {
     handleChange: (field: VanJsfField, value: MultiType) => void;
     isVisibleState: State<boolean>;
     errorState: State<string>;
+    /** Used by file fields to pass file metadata to formValues */
+    fileNameValue: string;
+    fileSizeValue: string;
+    fileTypeValue: string;
     constructor(field: Record<string, unknown>, initVal: MultiType, handleChange: (field: VanJsfField, value: MultiType) => void);
     get inputType(): string;
     get label(): string;

package/dist/VanJsfField.js

@@ -7,7 +7,7 @@ import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { lintGutter, linter, forEachDiagnostic } from "@codemirror/lint";
 import * as eslint from "eslint-linter-browserify";
 import globals from "globals";
-const { div, p, input, label, textarea, legend, link, fieldset, span, select, option } = van.tags;
+const { div, p, input, label, textarea, legend, link, fieldset, span, select, option, button, strong, small } = van.tags;
 var FieldType;
 (function (FieldType) {
     FieldType["text"] = "text";
@@ -18,6 +18,7 @@ var FieldType;
     FieldType["radio"] = "radio";
     FieldType["date"] = "date";
     FieldType["fieldset"] = "fieldset";
+    FieldType["file"] = "file";
 })(FieldType || (FieldType = {}));
 const eslintConfig = {
     // eslint configuration
@@ -41,6 +42,10 @@ export class VanJsfField extends VanJSComponent {
     handleChange;
     isVisibleState;
     errorState;
+    /** Used by file fields to pass file metadata to formValues */
+    fileNameValue = "";
+    fileSizeValue = "";
+    fileTypeValue = "";
     constructor(field, initVal, handleChange) {
         super();
         this.field = field;
@@ -244,6 +249,130 @@ export class VanJsfField extends VanJSComponent {
                     onchange: (e) => this.handleChange(this, e.target.value),
                 }), opt.label, opt.description))), p({ class: this.errorClass }, () => this.error));
                 break;
+            case FieldType.file: {
+                const accept = this.field.accept || "";
+                const maxSizeMB = this.field.maxSizeMB;
+                const readAs = this.field.readAs || "text";
+                // Reactive states
+                const fileNameState = van.state("");
+                const fileSizeState = van.state("");
+                const dragOverState = van.state(false);
+                const readingState = van.state(false);
+                const formatSize = (bytes) => {
+                    if (bytes < 1024)
+                        return `${bytes} B`;
+                    if (bytes < 1024 * 1024)
+                        return `${(bytes / 1024).toFixed(1)} KB`;
+                    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+                };
+                const readFile = (file) => {
+                    this.error = "";
+                    // Validate size
+                    if (maxSizeMB && file.size > maxSizeMB * 1024 * 1024) {
+                        this.error = `File exceeds maximum size of ${maxSizeMB} MB`;
+                        return;
+                    }
+                    fileNameState.val = file.name;
+                    fileSizeState.val = formatSize(file.size);
+                    readingState.val = true;
+                    // Store metadata
+                    this.fileNameValue = file.name;
+                    this.fileSizeValue = String(file.size);
+                    this.fileTypeValue = file.type;
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        readingState.val = false;
+                        let result = reader.result;
+                        if (readAs === "arrayBuffer" && reader.result instanceof ArrayBuffer) {
+                            // Base64-encode the ArrayBuffer
+                            const bytes = new Uint8Array(reader.result);
+                            let binary = "";
+                            for (let i = 0; i < bytes.byteLength; i++) {
+                                binary += String.fromCharCode(bytes[i]);
+                            }
+                            result = btoa(binary);
+                        }
+                        this.handleChange(this, result);
+                    };
+                    reader.onerror = () => {
+                        readingState.val = false;
+                        this.error = "Error reading file";
+                    };
+                    if (readAs === "dataURL") {
+                        reader.readAsDataURL(file);
+                    }
+                    else if (readAs === "arrayBuffer") {
+                        reader.readAsArrayBuffer(file);
+                    }
+                    else {
+                        reader.readAsText(file);
+                    }
+                };
+                const clearFile = () => {
+                    fileNameState.val = "";
+                    fileSizeState.val = "";
+                    readingState.val = false;
+                    this.fileNameValue = "";
+                    this.fileSizeValue = "";
+                    this.fileTypeValue = "";
+                    this.error = "";
+                    this.handleChange(this, "");
+                };
+                const fileInput = input({
+                    type: "file",
+                    accept,
+                    style: "display: none;",
+                    onchange: (e) => {
+                        const files = e.target.files;
+                        if (files && files[0])
+                            readFile(files[0]);
+                    },
+                });
+                const dropZone = div({
+                    style: () => {
+                        const over = dragOverState.val;
+                        return `border: 2px dashed ${over ? "#4a90d9" : "#ccc"}; border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: border-color 0.2s; background: ${over ? "#f0f7ff" : "transparent"};`;
+                    },
+                    ondragover: (e) => { e.preventDefault(); dragOverState.val = true; },
+                    ondragleave: () => { dragOverState.val = false; },
+                    ondrop: (e) => {
+                        e.preventDefault();
+                        dragOverState.val = false;
+                        const files = e.dataTransfer?.files;
+                        if (files && files[0])
+                            readFile(files[0]);
+                    },
+                    onclick: () => fileInput.click(),
+                }, p({ style: "margin: 0; color: #666;" }, accept
+                    ? `Drop a file here or click to browse (${accept})`
+                    : "Drop a file here or click to browse"));
+                const fileInfoBar = () => {
+                    return div(() => {
+                        const name = fileNameState.val;
+                        if (!name)
+                            return div();
+                        return div({ style: "margin-top: 8px; display: flex; align-items: center; gap: 8px;" }, strong(name), small({ style: "color: #888;" }, `(${fileSizeState.val})`), button({
+                            type: "button",
+                            style: "cursor: pointer; background: none; border: 1px solid #ccc; border-radius: 4px; padding: 2px 8px; font-size: 0.85em;",
+                            onclick: (e) => {
+                                e.stopPropagation();
+                                clearFile();
+                                fileInput.value = "";
+                            },
+                        }, "Clear"));
+                    });
+                };
+                const readingIndicator = () => {
+                    return div(() => {
+                        if (!readingState.val)
+                            return div();
+                        return div({ style: "margin-top: 8px; color: #666;" }, "Reading file...");
+                    });
+                };
+                el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass || '' }, this.label), this.description &&
+                    div({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description), fileInput, dropZone, fileInfoBar(), readingIndicator(), p({ class: this.errorClass }, () => this.error));
+                break;
+            }
             default:
                 el = div({ style: "border: 1px dashed gray; padding: 8px;" }, `Field "${this.name}" unsupported: The type "${this.inputType}" has no UI component built yet.`);
         }

package/dist/VanJsfForm.js

@@ -60,6 +60,12 @@ class VanJsfForm {
     }
     handleFieldChange(field, value) {
         this.formValues[field.name] = value;
+        // For file fields, also store file metadata
+        if (field.inputType === "file") {
+            this.formValues[field.name + "__fileName"] = field.fileNameValue;
+            this.formValues[field.name + "__fileSize"] = field.fileSizeValue;
+            this.formValues[field.name + "__fileType"] = field.fileTypeValue;
+        }
         this.config.formValues = this.formValues;
         const { formErrors } = this.headlessForm.handleValidation(this.formValues);
         let extraError = false;