Contribute

Help me develop DynamicForms!

Remember to work on src/*.ts files, and test them building the bundle and importing it (import { makeForm } from '@dist/dynamic-forms.es.js'; for prod build, import { makeForm } from '@'; for dev mode).

Useful commands:

• npm run dev - Start Vite server for local development
• npm run build - Build DynamicForms library in dist folder

Please, update also the documentation if you change anything.

Thank you very much for your support ❤

Disclaimer

DynamicForms is build considered some use-cases I faced in my career.

It is a very generic library but there may be other use cases which I didn't account for. In this case please let me know, we can work together in implementing new features.

Issues/Suggestions

If you have trouble using DynamicForms open an issue, I'll be glad to help you. Suggestions are also welcome!

It will be useful if you pass me some code to try: you can use tools like CodePen, PasteBin etc.

Project Structure

Here is the UML Class Diagram to help you understand the project structure. Types are not specified for space reasons: the diagram is created using Mermaid which places elements automatically.

classDiagram

    class DynamicForm {
        FormConfiguration config
        HTMLFormElement htmlElement
        Map❬String DynamicElement❭ entities
        boolean debug
        boolean enabled
        json elementToClassMapping

        +ready() Promise❬void❭
        +notify(subjectName) Promise❬void❭
        -fetchAllParameters(rule) object
        -clearCascade(currentSubject) Promise❬void❭
        +manualUpdate(data, subjectName) Promise❬void❭
        -getField(name) DynamicElement
        +getId() string
        +setEnabled() void
        +isEnabled() boolean
    }

    class dynamicForms {
        -Map❬String DynamicForm❭ formCollection
        +makeForm(formConfiguration) DynamicForm
        +getForm(id) DynamicForm
    }

    note for dynamicForms "Library entrypoint"

    class ConfigurationFixer {
        +fix(formHtmlElement, formConfiguration) FormConfiguration
    }

    class FieldBuilder {
        +createFieldsMap(fieldsCollection, htmlForm)
    }

    class DynamicElement {
        -FieldConfiguration config
        -NodeList htmlElement
        -string name
        -JSON defaultConfig
        +get() string
        +set(value) string
        +clear()
        +update(data, subjectName)
        #beforeUpdate(data, subjectName) boolean
        #updateStatus(data, subjectName) Promise❬void❭
        #afterUpdate(data, subjectName) boolean
    }

    class DynamicSelect {
        -string method
        +postProcessData(data) object[]
        +saveData(data) void
    }

    dynamicForms --> ConfigurationFixer
    dynamicForms --> FieldBuilder

    DynamicForm <-- dynamicForms
    DynamicForm o-- DynamicElement

    DynamicElement <|-- DynamicSelect
    DynamicElement <|-- DynamicCheckbox
    DynamicElement <|-- DynamicRadio