vanjs-jsf 0.2.2 → 0.3.1

package/dist/VanJsfField.d.ts

@@ -1,5 +1,6 @@
 import { State } from "vanjs-core";
 import { VanJSComponent } from "./VanJSComponent";
+import { JsfTheme } from "./theme";
 export interface Option {
     label: string;
     value: string;
@@ -14,15 +15,17 @@ export declare class VanJsfField extends VanJSComponent {
     handleChange: (field: VanJsfField, value: MultiType) => void;
     isVisibleState: State<boolean>;
     errorState: State<string>;
+    theme: JsfTheme;
     /** 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);
+    constructor(field: Record<string, unknown>, initVal: MultiType, handleChange: (field: VanJsfField, value: MultiType) => void, theme?: JsfTheme);
     get inputType(): string;
     get label(): string;
     get class(): string;
     get errorClass(): string;
+    get isRequired(): boolean;
     get codemirrorExtension(): Array<any>;
     get containerClass(): string;
     get containerId(): string;
@@ -34,6 +37,9 @@ export declare class VanJsfField extends VanJSComponent {
     set isVisible(val: boolean);
     get error(): string;
     set error(val: string);
+    private renderLabel;
+    private renderDescription;
+    private renderError;
     render(): Element;
     isVanJsfFieldArray(fields: unknown): fields is VanJsfField[];
 }

package/dist/VanJsfField.js

@@ -1,5 +1,6 @@
 import van from "vanjs-core";
 import { VanJSComponent } from "./VanJSComponent";
+import { resolve } from "./theme";
 import pikaday from "pikaday";
 import { basicSetup, EditorView } from "codemirror";
 import { javascript, esLint } from "@codemirror/lang-javascript";
@@ -42,16 +43,18 @@ export class VanJsfField extends VanJSComponent {
     handleChange;
     isVisibleState;
     errorState;
+    theme;
     /** Used by file fields to pass file metadata to formValues */
     fileNameValue = "";
     fileSizeValue = "";
     fileTypeValue = "";
-    constructor(field, initVal, handleChange) {
+    constructor(field, initVal, handleChange, theme = {}) {
         super();
         this.field = field;
         this.name = field.name;
         this.iniVal = initVal;
         this.handleChange = handleChange;
+        this.theme = theme;
         this.isVisibleState = van.state(this.field.isVisible);
         this.errorState = van.state("");
     }
@@ -67,9 +70,12 @@ export class VanJsfField extends VanJSComponent {
     get errorClass() {
         return this.field.errorClass;
     }
+    get isRequired() {
+        return this.field.required ?? false;
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     get codemirrorExtension() {
-        const theme = EditorView.theme({
+        const cmTheme = EditorView.theme({
             '.cm-content, .cm-gutter': {
                 "min-height": "150px",
             },
@@ -86,7 +92,7 @@ export class VanJsfField extends VanJSComponent {
                 border: '1px solid silver',
             },
         });
-        const extensions = [theme, EditorView.updateListener.of((e) => {
+        const extensions = [cmTheme, EditorView.updateListener.of((e) => {
                 this.field.error = null;
                 forEachDiagnostic(e.state, (diag) => {
                     if (diag.severity === "error") {
@@ -141,38 +147,52 @@ export class VanJsfField extends VanJSComponent {
     set error(val) {
         this.errorState.val = val;
     }
+    renderLabel() {
+        const cls = resolve(this.titleClass, this.theme.label);
+        return label({ for: this.name, class: cls }, this.label, this.isRequired
+            ? span({ class: this.theme.requiredIndicator || "" }, " *")
+            : null);
+    }
+    renderDescription() {
+        if (!this.description)
+            return null;
+        return div({
+            id: `${this.name}-description`,
+            class: resolve(this.descriptionClass, this.theme.description),
+        }, this.description);
+    }
+    renderError() {
+        return p({ class: resolve(this.errorClass, this.theme.error) }, () => this.error);
+    }
     render() {
         let el;
+        const baseContainer = resolve(this.containerClass, this.theme.container);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const props = {
-            style: () => (this.isVisible ? "display: block" : "display: none"),
-            class: this.containerClass || ''
+            class: () => this.isVisible ? baseContainer : `${baseContainer} jsf-hidden`.trim(),
         };
         switch (this.inputType) {
             case FieldType.text:
-                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), input({
+                el = div(props, this.renderLabel(), this.renderDescription(), input({
                     id: this.name,
                     type: "text",
-                    class: this.class || '',
+                    class: resolve(this.class, this.theme.input),
                     value: this.iniVal,
                     oninput: (e) => this.handleChange(this, e.target.value),
-                }), p({ class: this.errorClass }, () => this.error));
+                }), this.renderError());
                 break;
             case FieldType.textarea:
-                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), textarea({
+                el = div(props, this.renderLabel(), this.renderDescription(), textarea({
                     id: this.name,
                     name: this.name,
-                    class: this.class || '',
+                    class: resolve(this.class, this.theme.textarea),
                     rows: this.field.rows,
                     cols: this.field.columns,
                     oninput: (e) => this.handleChange(this, e.target.value),
-                }), p({ class: this.errorClass }, () => this.error));
+                }), this.renderError());
                 break;
             case FieldType.code:
-                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));
+                el = div(props, this.renderLabel(), this.renderDescription());
                 new EditorView({
                     doc: String(this.iniVal),
                     parent: el,
@@ -180,25 +200,23 @@ export class VanJsfField extends VanJSComponent {
                 });
                 break;
             case FieldType.select:
-                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), select({
+                el = div(props, this.renderLabel(), this.renderDescription(), select({
                     id: this.name,
                     name: this.name,
-                    class: this.class || '',
+                    class: resolve(this.class, this.theme.select),
                     oninput: (e) => this.handleChange(this, e.target.value),
-                }, this.options?.map((opt) => option({ class: this.class || '', value: opt.value }, opt.label, opt.description))), p({ class: this.errorClass }, () => this.error));
+                }, this.options?.map((opt) => option({ class: this.theme.option || "", value: opt.value }, opt.label, opt.description))), this.renderError());
                 break;
             case FieldType.date: {
                 const calendarInput = input({
                     id: this.name,
                     type: "text",
-                    class: this.class || '',
+                    class: resolve(this.class, this.theme.input),
                     value: this.iniVal,
                     onchange: (e) => this.handleChange(this, e.target.value),
                 });
                 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), calendarInput, p({ class: this.errorClass }, () => this.error), 
+                    div(props, this.renderLabel(), this.renderDescription(), calendarInput, this.renderError(), 
                     // External CDN dependency for Pikaday CSS — consider bundling for production
                     link({ rel: "stylesheet", type: "text/css", href: "https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" }));
                 new pikaday({
@@ -223,31 +241,31 @@ export class VanJsfField extends VanJSComponent {
                 break;
             }
             case FieldType.number:
-                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), input({
+                el = div(props, this.renderLabel(), this.renderDescription(), input({
                     id: this.name,
                     type: "number",
-                    class: this.class || '',
+                    class: resolve(this.class, this.theme.input),
                     value: this.iniVal,
                     oninput: (e) => {
                         const val = e.target.value;
                         this.handleChange(this, val === "" ? "" : Number(val));
                     },
-                }), p({ class: this.errorClass }, () => this.error));
+                }), this.renderError());
                 break;
             case FieldType.fieldset:
-                el = div(props, fieldset(legend({ class: this.titleClass || '' }, this.label), this.description &&
-                    span({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description), this.isVanJsfFieldArray(this.field.fields) ? this.field.fields.map((field) => field.render()) : null));
+                el = div(props, fieldset({ class: this.theme.fieldset || "" }, legend({ class: resolve(this.titleClass, this.theme.legend || this.theme.label) }, this.label), this.renderDescription(), this.isVanJsfFieldArray(this.field.fields)
+                    ? this.field.fields.map((field) => field.render())
+                    : null));
                 break;
             case FieldType.radio:
-                el = div(legend({ class: this.titleClass || '' }, this.label), this.description && div(this.description), div(this.options?.map((opt) => label(input({
+                el = div(props, legend({ class: resolve(this.titleClass, this.theme.legend || this.theme.label) }, this.label), this.renderDescription(), div({ class: this.theme.radioGroup || "" }, this.options?.map((opt) => label({ class: this.theme.radioLabel || "" }, input({
                     type: "radio",
                     name: this.name,
-                    class: this.class || '',
+                    class: resolve(this.class, this.theme.radioInput),
                     value: opt.value,
                     checked: this.iniVal === opt.value,
                     onchange: (e) => this.handleChange(this, e.target.value),
-                }), opt.label, opt.description))), p({ class: this.errorClass }, () => this.error));
+                }), opt.label, opt.description))), this.renderError());
                 break;
             case FieldType.file: {
                 const accept = this.field.accept || "";
@@ -341,11 +359,10 @@ export class VanJsfField extends VanJSComponent {
                             readFile(files[0]);
                     },
                 });
+                const dzBase = this.theme.dropZone || "jsf-dropzone";
+                const dzActive = this.theme.dropZoneActive || "jsf-dropzone-active";
                 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"};`;
-                    },
+                    class: () => dragOverState.val ? `${dzBase} ${dzActive}` : dzBase,
                     ondragover: (e) => { e.preventDefault(); dragOverState.val = true; },
                     ondragleave: () => { dragOverState.val = false; },
                     ondrop: (e) => {
@@ -356,7 +373,7 @@ export class VanJsfField extends VanJSComponent {
                             readFile(files[0]);
                     },
                     onclick: () => fileInput.click(),
-                }, p({ style: "margin: 0; color: #666;" }, accept
+                }, p({ class: this.theme.dropZoneText || "jsf-dropzone-text" }, accept
                     ? `Drop a file here or click to browse (${accept})`
                     : "Drop a file here or click to browse"));
                 const fileInfoBar = () => {
@@ -364,9 +381,9 @@ export class VanJsfField extends VanJSComponent {
                         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({
+                        return div({ class: this.theme.fileInfoBar || "jsf-file-info" }, strong({ class: this.theme.fileName || "" }, name), small({ class: this.theme.fileSize || "jsf-file-size" }, `(${fileSizeState.val})`), button({
                             type: "button",
-                            style: "cursor: pointer; background: none; border: 1px solid #ccc; border-radius: 4px; padding: 2px 8px; font-size: 0.85em;",
+                            class: this.theme.fileClearButton || "jsf-file-clear",
                             onclick: (e) => {
                                 e.stopPropagation();
                                 clearFile();
@@ -379,11 +396,10 @@ export class VanJsfField extends VanJSComponent {
                     return div(() => {
                         if (!readingState.val)
                             return div();
-                        return div({ style: "margin-top: 8px; color: #666;" }, "Reading file...");
+                        return div({ class: this.theme.fileReading || "jsf-file-reading" }, "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));
+                el = div(props, this.renderLabel(), this.renderDescription(), fileInput, dropZone, fileInfoBar(), readingIndicator(), this.renderError());
                 break;
             }
             default:

package/dist/VanJsfForm.js

@@ -9,7 +9,8 @@ class VanJsfForm {
     headlessForm;
     formFields;
     formValues;
-    constructor(jsonSchema, config, isValid) {
+    theme;
+    constructor(jsonSchema, config, isValid, theme = {}) {
         // Bind methods to instance. Needed to pass functions as props to child components
         //this.handleSubmit = this.handleSubmit.bind(this);
         this.handleFieldChange = this.handleFieldChange.bind(this);
@@ -17,6 +18,7 @@ class VanJsfForm {
         this.schema = jsonSchema;
         this.config = config;
         this.isValid = isValid || undefined;
+        this.theme = theme;
         // Working with parameters
         const initialValues = { ...config?.initialValues };
         this.headlessForm = createHeadlessForm(jsonSchema, config);
@@ -98,7 +100,7 @@ class VanJsfForm {
                 field.fields = this.processFields(field.fields, initialValues, formValues, fieldPath);
             }
             // Create and return a new VanJsfField instance for this field
-            return new VanJsfField(field, initVal, this.handleFieldChange);
+            return new VanJsfField(field, initVal, this.handleFieldChange, this.theme);
         });
     }
 }
@@ -112,7 +114,8 @@ export function jsform(attributes, ...children) {
     if (!config.formValues)
         config.formValues = {};
     const isValid = attributes.isValid;
-    const vanJsfForm = new VanJsfForm(attributes.schema, config, isValid);
+    const theme = attributes.theme ?? {};
+    const vanJsfForm = new VanJsfForm(attributes.schema, config, isValid, theme);
     const fields = vanJsfForm.formFields.map((field) => field.render());
     const childrenWithFields = [...fields, ...children]; // Concatenate fields with other children
     const originalOnSubmit = attributes.onsubmit;

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { jsform } from "./VanJsfForm";
+export type { JsfTheme } from "./theme";