Examples

Counter

import {view, Bold, Button, FlexContent, Paragraph, store, Text} from 'javascript-ui';

const counter = store(0);

view([
    FlexContent([
        Button('-').onClick(() => {
            counter.update((value) => value - 1);
        }).model(counter, (element, newValue) => {
            element.borderWidth(newValue + 'px');
        }),
        Paragraph([
            Text('Count is '),
            Bold().model(counter),
        ]).created(e => {
            console.log(e, 'created');
        }).mounted(e => {
            console.log(e, 'mounted');
        }),
        Button('+').onClick(() => {
            counter.update((value) => {
                return ++value;
            });
        }).model(counter, (element, newValue) => {
            element.borderWidth(newValue + 'px');
        }),
    ]).gap('0 10px'),
]);

---

ToDo

import {
    view,
    Button,
    Div,
    FlexContent,
    ForEach,
    List,
    ListItem,
    Model,
    Paragraph,
    store,
    Text,
    TextInput,
} from 'javascript-ui';

const items = store([]);
const taskName = store();

let ask = false;
let n = 5;

view([
    FlexContent([
        TextInput().placeholder('Enter a task...').model(taskName).fitWidth(),
        Button('Add').onClick(() => {
            items.update((items) => {
                items.push(taskName.get());
                taskName.set('');
                return items;
            });
        }),
    ]).tabIndex(2).gap('10px'),
    Model(items, (tasks) => {
        return [
            List([
                ForEach(tasks, (value, key) => {
                    return [
                        ListItem([
                            FlexContent([
                                Div([
                                    Text(value),
                                ]).fitWidth(),
                                Button('Remove').onClick(() => {
                                    items.update((items) => {
                                        items.splice(key, 1);
                                        return items;
                                    });
                                }),
                            ]).gap('10px').placeItems('center'),
                        ]),
                    ];
                }),
            ]),
        ];
    }),
]);