misode.github.io/components.html

<div id="components" class="d-none">
    <div class="input-group mt-3" data-type="string">
        <div class="input-group-prepend">
            <span class="input-group-text" data-name></span>
        </div>
        <input type="text" class="form-control rounded-right" onchange="updateField(this)" onfocus="this.select()">
    </div>
    <div class="input-group mt-3" data-type="enum">
        <div class="input-group-prepend">
            <span class="input-group-text" data-name></span>
        </div>
        <select class="form-control rounded-right" onchange="updateField(this)">
        </select>
    </div>
    <div class="input-group mt-3" data-type="random">
        <div class="input-group-prepend">
            <span class="input-group-text" data-name></span>
            <button type="button" class="btn btn-outline-secondary bg-light dropdown-toggle dropdown-toggle-split"
                data-toggle="dropdown"></button>
            <div class="dropdown-menu">
                <a class="dropdown-item" value="exact" onclick="updateRangeType(this)" data-i18n="range.exact"></a>
                <a class="dropdown-item" value="range" onclick="updateRangeType(this)" data-i18n="range.uniform"></a>
                <a class="dropdown-item" value="binomial" onclick="updateRangeType(this)"
                    data-i18n="range.binomial"></a>
            </div>
        </div>
        <input type="text" class="form-control exact d-none rounded-right" value="1" onchange="updateField(this)"
            onfocus="this.select()">
        <span class="input-group-text rounded-0 range d-none" data-i18n="range.min"></span>
        <input type="text" class="form-control range min d-none" value="1" onchange="updateField(this)"
            onfocus="this.select()">
        <span class="input-group-text rounded-0 range d-none" data-i18n="range.max"></span>
        <input type="text" class="form-control range max d-none rounded-right" value="2" onchange="updateField(this)"
            onfocus="this.select()">
        <span class="input-group-text rounded-0 binomial d-none" data-i18n="range.n"></span>
        <input type="text" class="form-control binomial n d-none" value="1" onchange="updateField(this)"
            onfocus="this.select()">
        <span class="input-group-text rounded-0 binomial d-none" data-i18n="range.p"></span>
        <input type="text" class="form-control binomial p d-none rounded-right" value="0.5" onchange="updateField(this)"
            onfocus="this.select()">
    </div>
    <div class="input-group mt-3" data-type="range">
        <div class="input-group-prepend">
            <span class="input-group-text" data-name></span>
            <button type="button" class="btn btn-outline-secondary bg-light dropdown-toggle dropdown-toggle-split"
                data-toggle="dropdown"></button>
            <div class="dropdown-menu">
                <a class="dropdown-item" value="exact" onclick="updateRangeType(this)" data-i18n="range.exact"></a>
                <a class="dropdown-item" value="range" onclick="updateRangeType(this)" data-i18n="range.range"></a>
            </div>
        </div>
        <input type="text" class="form-control exact d-none rounded-right" value="1" onchange="updateField(this)"
            onfocus="this.select()">
        <span class="input-group-text rounded-0 range d-none" data-i18n="range.min"></span>
        <input type="text" class="form-control range min d-none" value="1" onchange="updateField(this)"
            onfocus="this.select()">
        <span class="input-group-text rounded-0 range d-none" data-i18n="range.max"></span>
        <input type="text" class="form-control range max d-none rounded-right" value="2" onchange="updateField(this)"
            onfocus="this.select()">
    </div>
    <div class="input-group mt-3" data-type="boundary">
        <div class="input-group-prepend">
            <span class="input-group-text" data-name></span>
        </div>
        <span class="input-group-text rounded-0 range" data-i18n="range.min"></span>
        <input type="text" class="form-control range min" onchange="updateField(this)" onfocus="this.select()">
        <span class="input-group-text rounded-0 range" data-i18n="range.max"></span>
        <input type="text" class="form-control range max rounded-right" onchange="updateField(this)"
            onfocus="this.select()">
    </div>
    <div class="input-group mt-3" data-type="boolean">
        <div class="input-group-prepend">
            <span class="input-group-text" data-name></span>
        </div>
        <div class="btn-group">
            <button type="button" value="false" class="btn btn-secondary rounded-0" onclick="updateField(this)"
                data-i18n="false"></button>
            <button type="button" value="true" class="btn btn-secondary" onclick="updateField(this)"
                data-i18n="true"></button>
        </div>
    </div>
    <div class="input-group mt-3" data-type="json">
        <div class="input-group-prepend">
            <span class="input-group-text" data-name></span>
        </div>
        <textarea type="text" class="form-control code" onchange="updateField(this)" onfocus="this.select()"
            style="height: 38px"></textarea>
    </div>
    <div class="input-group mt-3" data-type="json-list">
        <textarea class="form-control code" onchange="updateField(this)" rows=3></textarea>
    </div>
    <div class="input-group mt-3" data-type="nbt">
        <div class="input-group-prepend">
            <span class="input-group-text" data-name></span>
        </div>
        <textarea type="text" class="form-control code" onchange="updateField(this)" onfocus="this.select()"
            style="height: 38px"></textarea>
    </div>
    <div class="input-group mt-3" data-type="error">
        <div class="input-group-prepend">
            <span class="input-group-text text-danger" data-i18n="error"></span>
        </div>
        <input type="text" class="form-control bg-light text-danger" data-name readonly></input>
    </div>
    <div class="mt-3" data-type="set">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text" data-name></span>
            </div>
            <div class="input-group-append">
                <button type="button"
                    class="btn btn-outline-secondary bg-light dropdown-toggle dropdown-toggle-split rounded-right"
                    data-toggle="dropdown"></button>
                <div class="dropdown-menu scrollable-menu">
                </div>
            </div>
        </div>
    </div>
    <div data-type="map">
        <div class="input-group mt-3">
            <div class="input-group-prepend">
                <label class="input-group-text" data-name="1"></label>
            </div>
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button class="btn btn-dark rounded-right" type="button" onclick="addToMap(this)" data-name="2"></button>
            </div>
        </div>
    </div>
</div>