form-example.html

<template id="example1">

    <style>

        [readonly] {
            background-color: #e9e9e9;
            border: 1px solid grey;
        }

        .tbl {
            display: flex;
            flex-direction: column;
        }

        .row {
            display: flex;
            min-height: 50px;
        }

        .cell {
            flex: 1;
            border-bottom: 1px solid #b0b0b0;
            padding: 1em;
        }
    </style>

    <div id="container" class="tbl">

        <div class="row">
            <div class="cell"><select type="input" data-monster-bind="path:value.multiple" multiple>
                <option value="a" data-monster-attributes="selected path:value.multiple | call:checkstate">A</option>
                <option value="b" data-monster-attributes="selected path:value.multiple | call:checkstate">B</option>
                <option value="c" data-monster-attributes="selected path:value.multiple | call:checkstate">C</option>
            </select></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.multiple"></div>
        </div>
        <div class="row">
            <div class="cell"><select type="input" data-monster-bind="path:value.select"
                                      data-monster-attributes="value path:value.select">
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
            </select></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.select"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="checkbox" data-monster-bind="path:value.checkbox" value="YES"
                                     data-monster-attributes="checked path:value.checkbox | call:checkstate"></div>
            <div class="cell"><input id="my" readonly data-monster-attributes="value path:value.checkbox"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="search" name="search" data-monster-bind="path:value.search"
                                     data-monster-attributes="value path:value.search"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.search"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="tel" name="tel" data-monster-bind="path:value.tel"
                                     data-monster-attributes="value path:value.tel"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.tel"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="time" name="time" data-monster-bind="path:value.time"
                                     data-monster-attributes="value path:value.time"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.time"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="url" name="url" data-monster-bind="path:value.url"
                                     data-monster-attributes="value path:value.url"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.url"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="week" name="week" data-monster-bind="path:value.week"
                                     data-monster-attributes="value path:value.week"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.week"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="color" name="color" data-monster-bind="path:value.color"
                                     data-monster-attributes="value path:value.color"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.color"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="radio" name="doit" data-monster-bind="path:value.radio" value="2"
                                     data-monster-attributes="checked path:value.radio | call:checkstate"><br>
                <input type="radio" name="doit" data-monster-bind="path:value.radio" value="1"
                       data-monster-attributes="checked path:value.radio | call:checkstate"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.radio"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="range" name="range" data-monster-bind="path:value.range"
                                     data-monster-attributes="value path:value.range"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.range"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="password" name="password" data-monster-bind="path:value.password"
                                     data-monster-attributes="value path:value.password"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.password"></div>
        </div>
        <div class="row">
            <div class="cell">
                <input type="number" name="number" data-monster-bind="path:value.number"
                       data-monster-attributes="value path:value.number"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.number"></div>
        </div>
        <div class="row">
            <div class="cell">
                <input type="month" name="month" data-monster-bind="path:value.month"
                       data-monster-attributes="value path:value.month"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.month"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="email" name="email" data-monster-bind="path:value.email"
                                     data-monster-attributes="value path:value.email"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.email"></div>
        </div>
        <div class="row">
            <div class="cell"><input type="datetime-local" name="datetime-local"
                                     data-monster-bind="path:value.datetime-local"
                                     data-monster-attributes="value path:value.datetime-local"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.datetime-local"></div>
        </div>
        <div class="row">
            <div class="cell">
                <input type="date" name="date" data-monster-bind="path:value.date"
                       data-monster-attributes="value path:value.date"></div>
            <div class="cell"><input readonly data-monster-attributes="value path:value.date"></div>
        </div>

        <div style="padding:20px; border:2px solid red; margin-top:20px"
             data-monster-replace="path:value | tojson"></div>

    </div>

</template>

<script type="module">

    'use strict';
    import {Updater} from "https://cdn.jsdelivr.net/npm/@schukai/monster@1.9.0/dist/modules/dom/updater.js";

    let example1 = document.getElementById('example1');
    document.querySelector('article').appendChild(example1.content);

    const container = document.getElementById('container');

    const updater = new Updater(container, {
        value: {
            input: "Init Value - input",
            textarea: "Init Value - textarea",
            file: "Init Value - file",
            checkbox: "Init Value - checkbox",
            radio: "Init Value - radio",
            multiple: ['a', 'c']
        }
    });

    updater.run();
    updater.enableEventProcessing();
    console.log(updater);


</script>