
<number>
    <vbox>
        <div  class="ml-4">
            <hstack>
            <div id={"number" + props.ti}></div>
            <div class="mt-1" style="height: 22px" id={"number-value" + props.ti}></div>
            <span class="cursor-pointer" onclick={remove(this.props.ti -1)}>(x)</span>
        </hstack>
        </div>
    </vbox>

    <script>

this.props = opts;

    remove(index) {
        return () => {
            this.props.rmnumber(index);
        }
    }

this.on("mount", () => {
    if (opts.v) {

        Nexus.colors.accent = "#000000"
        Nexus.colors.fill = "#ffffff"

        var cell = window.cellx.cellx(0)
        var number = new Nexus.Number('#number' + this.props.ti, {
            'value': 0,
            'step': 0.01
        });
        cell.onChange(evt => {
            if (evt.data.prevValue !== evt.data.value) {
                number.value = evt.data.value;
            }
        });

        this.props.v["v"] = cell;
    }
});
   </script>

</number>
