vanjs-jsf 0.0.10 → 0.0.11

package/dist/VanJsfField.d.ts

@@ -3,7 +3,8 @@ import { VanJSComponent } from "./VanJSComponent";
 export interface Option {
     label: string;
     value: string;
-    description: string;
+    description?: string;
+    img?: string;
 }
 export type MultiType = string | number | boolean;
 export declare class VanJsfField extends VanJSComponent {

package/dist/VanJsfField.js

@@ -1,12 +1,13 @@
 import van from "vanjs-core";
 import { VanJSComponent } from "./VanJSComponent";
 import pikaday from "pikaday";
-const { div, p, input, label, textarea, legend, link, fieldset, span } = van.tags;
+const { div, p, input, label, textarea, legend, link, fieldset, span, select, option } = van.tags;
 var FieldType;
 (function (FieldType) {
     FieldType["text"] = "text";
     FieldType["number"] = "number";
     FieldType["textarea"] = "textarea";
+    FieldType["select"] = "select";
     FieldType["radio"] = "radio";
     FieldType["date"] = "date";
     FieldType["fieldset"] = "fieldset";
@@ -92,6 +93,16 @@ export class VanJsfField extends VanJSComponent {
                     oninput: (e) => this.handleChange(this, e.target.value),
                 }));
                 break;
+            //TODO: Add select component
+            case FieldType.select:
+                el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass ? this.titleClass : '' }, this.label), this.description &&
+                    div({ id: `${this.name}-description`, class: this.descriptionClass ? this.descriptionClass : '' }, this.description), select({
+                    id: this.name,
+                    name: this.name,
+                    class: this.class ? this.class : null,
+                    oninput: (e) => this.handleChange(this, e.target.value),
+                }, this.options?.map((opt) => option({ class: this.class ? this.class : null, value: opt.value }, opt.label, opt.description))));
+                break;
             case FieldType.date:
                 const calendarInput = input({
                     id: this.name,

package/dist/VanJsfForm.js

@@ -5,16 +5,18 @@ const { form } = van.tags;
 class VanJsfForm {
     schema;
     config;
+    isValid;
     headlessForm;
     formFields;
     formValues;
-    constructor(jsonSchema, config) {
+    constructor(jsonSchema, config, isValid) {
         // 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);
         // Receive parameters
         this.schema = jsonSchema;
         this.config = config;
+        this.isValid = isValid || undefined;
         // Working with parameters
         this.headlessForm = createHeadlessForm(jsonSchema, config);
         // Read documentation about `getFieldsAndValuedFromJsf` method below
@@ -64,6 +66,15 @@ class VanJsfForm {
             f.isVisible = f.field.isVisible;
             f.error = formErrors?.[f.name] ?? "";
         });
+        if (this.isValid) {
+            if (formErrors) {
+                if (this.isValid)
+                    this.isValid.val = false;
+            }
+            else {
+                this.isValid.val = true;
+            }
+        }
     }
     processFields(fields, initialValues, formValues, parentPath = "") {
         return fields.map((field) => {
@@ -89,6 +100,7 @@ export function jsform(attributes, ...children) {
         throw new Error("JSON Schema is required");
     }
     let config = attributes.config;
+    let isValid = attributes.isValid;
     if (!config) {
         config = { initialValues: {}, formValues: {} };
     }
@@ -98,7 +110,7 @@ export function jsform(attributes, ...children) {
     else if (!config.formValues) {
         config.formValues = {};
     }
-    const vanJsfForm = new VanJsfForm(attributes.schema, config);
+    const vanJsfForm = new VanJsfForm(attributes.schema, config, isValid);
     console.log(vanJsfForm);
     const fields = vanJsfForm.formFields.map((field) => field.render());
     const childrenWithFields = [...fields, ...children]; // Concatenate fields with other children
@@ -108,8 +120,11 @@ export function jsform(attributes, ...children) {
         config.formValues = vanJsfForm.formValues;
         originalOnSubmit && originalOnSubmit(e);
     };
+    const originalOnChange = attributes.onchange;
     const handleChange = (e) => {
+        e.preventDefault();
         config.formValues = vanJsfForm.formValues;
+        originalOnChange && originalOnChange(vanJsfForm, e);
     };
     attributes.onsubmit = handleSubmit;
     attributes.onchange = handleChange;