vanjs-jsf 0.0.19 → 0.1.0

package/dist/VanJsfField.d.ts

@@ -1,6 +1,5 @@
 import { State } from "vanjs-core";
 import { VanJSComponent } from "./VanJSComponent";
-import "van-ui-extended/dist/index.css";
 export interface Option {
     label: string;
     value: string;
@@ -15,7 +14,7 @@ export declare class VanJsfField extends VanJSComponent {
     handleChange: (field: VanJsfField, value: MultiType) => void;
     isVisibleState: State<boolean>;
     errorState: State<string>;
-    constructor(field: Record<string, unknown>, initVal: string, handleChange: (field: VanJsfField, value: MultiType) => void);
+    constructor(field: Record<string, unknown>, initVal: MultiType, handleChange: (field: VanJsfField, value: MultiType) => void);
     get inputType(): string;
     get label(): string;
     get class(): string;
@@ -32,5 +31,5 @@ export declare class VanJsfField extends VanJSComponent {
     get error(): string;
     set error(val: string);
     render(): Element;
-    isVanJsfFieldArray(fields: any): fields is VanJsfField[];
+    isVanJsfFieldArray(fields: unknown): fields is VanJsfField[];
 }

package/dist/VanJsfField.js

@@ -6,16 +6,12 @@ import { javascript, esLint } from "@codemirror/lang-javascript";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { lintGutter, linter, forEachDiagnostic } from "@codemirror/lint";
 import * as eslint from "eslint-linter-browserify";
-import { CronComponent } from "van-ui-extended";
-import { dracula } from "thememirror";
-import "van-ui-extended/dist/index.css";
-const { div, p, input, label, textarea, legend, link, fieldset, span, select, option, } = van.tags;
 import globals from "globals";
+const { div, p, input, label, textarea, legend, link, fieldset, span, select, option } = van.tags;
 var FieldType;
 (function (FieldType) {
     FieldType["text"] = "text";
     FieldType["code"] = "code";
-    FieldType["cron"] = "cron";
     FieldType["number"] = "number";
     FieldType["textarea"] = "textarea";
     FieldType["select"] = "select";
@@ -23,6 +19,21 @@ var FieldType;
     FieldType["date"] = "date";
     FieldType["fieldset"] = "fieldset";
 })(FieldType || (FieldType = {}));
+const eslintConfig = {
+    // eslint configuration
+    languageOptions: {
+        globals: {
+            ...globals.node,
+        },
+        parserOptions: {
+            ecmaVersion: 2022,
+            sourceType: "module",
+        },
+    },
+    rules: {
+        semi: ["error", "never"],
+    },
+};
 export class VanJsfField extends VanJSComponent {
     name;
     field;
@@ -38,7 +49,6 @@ export class VanJsfField extends VanJSComponent {
         this.handleChange = handleChange;
         this.isVisibleState = van.state(this.field.isVisible);
         this.errorState = van.state("");
-        van.derive(() => console.log(`Field ${this.name} isVisible: ${this.isVisibleState.val}`));
     }
     get inputType() {
         return this.field.inputType;
@@ -52,108 +62,26 @@ export class VanJsfField extends VanJSComponent {
     get errorClass() {
         return this.field.errorClass;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     get codemirrorExtension() {
-        const fieldGlobals = this.field.globals && typeof this.field.globals === "object"
-            ? this.field.globals
-            : {};
-        const eslintConfig = {
-            // eslint configuration
-            languageOptions: {
-                globals: {
-                    ...fieldGlobals,
-                    ...globals.node,
-                },
-                parserOptions: {
-                    ecmaVersion: 2022,
-                    sourceType: "module",
-                },
-            },
-            rules: {
-                "constructor-super": "error",
-                "for-direction": "error",
-                "getter-return": "error",
-                "no-async-promise-executor": "error",
-                "no-case-declarations": "error",
-                "no-class-assign": "error",
-                "no-compare-neg-zero": "error",
-                "no-cond-assign": "error",
-                "no-const-assign": "error",
-                "no-constant-binary-expression": "error",
-                "no-constant-condition": "error",
-                "no-control-regex": "error",
-                "no-debugger": "error",
-                "no-delete-var": "error",
-                "no-dupe-args": "error",
-                "no-dupe-class-members": "error",
-                "no-dupe-else-if": "error",
-                "no-dupe-keys": "error",
-                "no-duplicate-case": "error",
-                "no-empty": "error",
-                "no-empty-character-class": "error",
-                "no-empty-pattern": "error",
-                "no-empty-static-block": "error",
-                "no-ex-assign": "error",
-                "no-extra-boolean-cast": "error",
-                "no-fallthrough": "error",
-                "no-func-assign": "error",
-                "no-global-assign": "error",
-                "no-import-assign": "error",
-                "no-invalid-regexp": "error",
-                "no-irregular-whitespace": "error",
-                "no-loss-of-precision": "error",
-                "no-misleading-character-class": "error",
-                "no-new-native-nonconstructor": "error",
-                "no-nonoctal-decimal-escape": "error",
-                "no-obj-calls": "error",
-                "no-octal": "error",
-                "no-prototype-builtins": "error",
-                "no-redeclare": "error",
-                "no-regex-spaces": "error",
-                "no-self-assign": "error",
-                "no-setter-return": "error",
-                "no-shadow-restricted-names": "error",
-                "no-sparse-arrays": "error",
-                "no-this-before-super": "error",
-                "no-undef": "error",
-                "no-unexpected-multiline": "error",
-                "no-unreachable": "error",
-                "no-unsafe-finally": "error",
-                "no-unsafe-negation": "error",
-                "no-unsafe-optional-chaining": "error",
-                "no-unused-labels": "error",
-                "no-unused-private-class-members": "error",
-                "no-unused-vars": "error",
-                "no-useless-backreference": "error",
-                "no-useless-catch": "error",
-                "no-useless-escape": "error",
-                "no-with": "error",
-                "require-yield": "error",
-                "use-isnan": "error",
-                "valid-typeof": "error",
-            },
-        };
         const theme = EditorView.theme({
-            ".cm-content, .cm-gutter": {
-                minHeight: this.field["min-height"] &&
-                    typeof this.field["min-height"] === "string"
-                    ? this.field["min-height"]
-                    : "150px",
+            '.cm-content, .cm-gutter': {
+                "min-height": "150px",
             },
-            ".cm-gutters": {
-                margin: "1px",
+            '.cm-content': {
+                "min-height": "150px",
             },
-            ".cm-scroller": {
-                overflow: "auto",
+            '.cm-gutters': {
+                margin: '1px',
             },
-            ".cm-wrap": {
-                border: "1px solid silver",
+            '.cm-scroller': {
+                overflow: 'auto',
+            },
+            '.cm-wrap': {
+                border: '1px solid silver',
             },
-        }, {
-            dark: true,
         });
-        const extensions = [
-            dracula,
-            EditorView.updateListener.of((e) => {
+        const extensions = [theme, EditorView.updateListener.of((e) => {
                 this.field.error = null;
                 forEachDiagnostic(e.state, (diag) => {
                     if (diag.severity === "error") {
@@ -161,10 +89,7 @@ export class VanJsfField extends VanJSComponent {
                     }
                 });
                 this.handleChange(this, e.state.doc.toString());
-            }),
-            basicSetup,
-            lintGutter(),
-        ];
+            }), basicSetup, lintGutter()];
         switch (this.field.codemirrorType) {
             case "json":
                 extensions.push(json(), linter(jsonParseLinter()));
@@ -213,179 +138,111 @@ export class VanJsfField extends VanJSComponent {
     }
     render() {
         let el;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const props = {
             style: () => (this.isVisible ? "display: block" : "display: none"),
-            class: this.containerClass ? this.containerClass : "",
+            class: this.containerClass || ''
         };
         switch (this.inputType) {
             case FieldType.text:
-                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), input({
+                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({
                     id: this.name,
                     type: "text",
-                    class: this.class ? this.class : "",
+                    class: this.class || '',
                     value: this.iniVal,
                     oninput: (e) => this.handleChange(this, e.target.value),
                 }), p({ class: this.errorClass }, () => this.error));
                 break;
             case FieldType.textarea:
-                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), 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({
                     id: this.name,
                     name: this.name,
-                    class: this.class ? this.class : null,
+                    class: this.class || '',
                     rows: this.field.rows,
                     cols: this.field.columns,
                     oninput: (e) => this.handleChange(this, e.target.value),
                 }), p({ class: this.errorClass }, () => this.error));
                 break;
             case FieldType.code:
-                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));
+                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));
                 new EditorView({
-                    doc: new String(this.iniVal).toString(),
+                    doc: String(this.iniVal),
                     parent: el,
-                    extensions: this.codemirrorExtension,
+                    extensions: this.codemirrorExtension
                 });
                 break;
             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({
+                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({
                     id: this.name,
                     name: this.name,
-                    class: this.class ? this.class : null,
+                    class: this.class || '',
                     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))), p({ class: this.errorClass }, () => this.error));
+                }, this.options?.map((opt) => option({ class: this.class || '', value: opt.value }, opt.label, opt.description))), p({ class: this.errorClass }, () => this.error));
                 break;
-            case FieldType.date:
+            case FieldType.date: {
                 const calendarInput = input({
                     id: this.name,
                     type: "text",
-                    class: this.class ? this.class : null,
+                    class: this.class || '',
                     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.titleClass : "",
-                }, this.label), this.description &&
-                    div({
-                        id: `${this.name}-description`,
-                        class: this.descriptionClass ? this.descriptionClass : "",
-                    }, this.description), calendarInput, p({ class: this.errorClass }, () => this.error), link({
-                    rel: "stylesheet",
-                    type: "text/css",
-                    href: "https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css",
-                }));
+                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), 
+                    // 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({
                     field: calendarInput,
-                    format: "YYYY/MM/DD",
+                    format: 'YYYY-MM-DD',
                     container: el,
                     firstDay: 1,
                     toString(date) {
-                        // you should do formatting based on the passed format,
-                        // but we will just return 'D/M/YYYY' for simplicity
                         const day = date.getDate();
                         const month = date.getMonth() + 1;
                         const year = date.getFullYear();
                         return `${year}-${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`;
                     },
-                    parse(dateString, format) {
-                        // dateString is the result of `toString` method
-                        const parts = dateString.split("/");
-                        const day = parseInt(parts[0], 10);
+                    parse(dateString) {
+                        const parts = dateString.split('-');
+                        const year = parseInt(parts[0], 10);
                         const month = parseInt(parts[1], 10) - 1;
-                        const year = parseInt(parts[2], 10);
+                        const day = parseInt(parts[2], 10);
                         return new Date(year, month, day);
-                    },
-                });
-                break;
-            case FieldType.cron:
-                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), p({ class: this.errorClass }, () => this.error), () => {
-                    let ele;
-                    if (CronComponent) {
-                        ele = new CronComponent() || null;
-                        ele.setAttribute("color", "d58512");
-                        ele.setAttribute("extraClass", this.class ? this.class : "");
-                        ele.setAttribute("value", this.iniVal.toString());
-                        ele.oninput = (e) => this.handleChange(this, e.detail.value);
                     }
-                    return ele;
                 });
                 break;
+            }
             case FieldType.number:
-                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), input({
+                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({
                     id: this.name,
                     type: "number",
-                    class: this.class ? this.class : null,
+                    class: this.class || '',
                     value: this.iniVal,
-                    oninput: (e) => this.handleChange(this, e.target.value),
+                    oninput: (e) => {
+                        const val = e.target.value;
+                        this.handleChange(this, val === "" ? "" : Number(val));
+                    },
                 }), p({ class: this.errorClass }, () => this.error));
                 break;
             case FieldType.fieldset:
-                console.log(this.field);
-                el = div(props, fieldset(legend({ class: this.titleClass ? this.titleClass : "" }, this.label), this.description &&
-                    span({
-                        id: `${this.name}-description`,
-                        class: this.descriptionClass ? this.descriptionClass : "",
-                    }, this.description), this.isVanJsfFieldArray(this.field.fields)
-                    ? this.field.fields.map((field) => field.render())
-                    : null));
+                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));
                 break;
             case FieldType.radio:
-                el = div(legend({ class: this.titleClass ? this.titleClass : "" }, this.label), this.description && div(this.description), div(this.options?.map((opt) => label(input({
+                el = div(legend({ class: this.titleClass || '' }, this.label), this.description && div(this.description), div(this.options?.map((opt) => label(input({
                     type: "radio",
                     name: this.name,
-                    class: this.class ? this.class : null,
+                    class: this.class || '',
                     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))), 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.`);
@@ -393,7 +250,6 @@ export class VanJsfField extends VanJSComponent {
         return el;
     }
     isVanJsfFieldArray(fields) {
-        return (Array.isArray(fields) &&
-            fields.every((field) => field instanceof VanJsfField));
+        return Array.isArray(fields) && fields.every(field => field instanceof VanJsfField);
     }
 }

package/dist/VanJsfForm.js

@@ -55,23 +55,17 @@ class VanJsfForm {
     getFieldsAndValuesFromJsf(headlessForm, initialValues) {
         const fields = headlessForm.fields;
         const formValues = {};
-        const values = { ...initialValues };
-        console.log(values);
         const vanJsfFields = this.processFields(fields, initialValues, formValues);
         return { vanJsfFields, formValues };
     }
     handleFieldChange(field, value) {
-        console.log(value);
-        console.log(field.name);
         this.formValues[field.name] = value;
         this.config.formValues = this.formValues;
         const { formErrors } = this.headlessForm.handleValidation(this.formValues);
         let extraError = false;
-        console.log("formErrors", formErrors);
         this.formFields.forEach((f) => {
             f.isVisible = f.field.isVisible;
             f.error = formErrors?.[f.name] ?? "";
-            console.log(f.field.error);
             if (f.field.error) {
                 extraError = true;
             }
@@ -106,32 +100,28 @@ export function jsform(attributes, ...children) {
     if (!attributes.schema) {
         throw new Error("JSON Schema is required");
     }
-    let config = attributes.config;
-    let isValid = attributes.isValid;
-    if (!config) {
-        config = { initialValues: {}, formValues: {} };
-    }
-    else if (!config.initialValues) {
+    const config = attributes.config ?? { initialValues: {}, formValues: {} };
+    if (!config.initialValues)
         config.initialValues = {};
-    }
-    else if (!config.formValues) {
+    if (!config.formValues)
         config.formValues = {};
-    }
+    const isValid = attributes.isValid;
     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
     const originalOnSubmit = attributes.onsubmit;
     const handleSubmit = (e) => {
         e.preventDefault();
         config.formValues = vanJsfForm.formValues;
-        originalOnSubmit && originalOnSubmit(e);
+        if (originalOnSubmit)
+            originalOnSubmit(e);
     };
     const originalOnChange = attributes.onchange;
     const handleChange = (e) => {
         e.preventDefault();
         config.formValues = vanJsfForm.formValues;
-        originalOnChange && originalOnChange(vanJsfForm, e);
+        if (originalOnChange)
+            originalOnChange(vanJsfForm, e);
     };
     attributes.onsubmit = handleSubmit;
     attributes.onchange = handleChange;