oleg
/
spruce


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
							<html>
    <head>
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    </head>
    <body>
        <div x-data>
            <span x-text="$store.application.name"></span>
            <button @click="$store.application.toggle()">Click</button>
        </div>

        <div x-data>
            <code>Persisted</code>
            <input type="text" x-model="$store.persisted.example">
            <button type="button" @click="$store.persisted.method()">
                Call method on persisted store
            </button>
        </div>

        <div x-data>
            <input type="radio" name="colorScheme" x-model="$store.colorScheme" value="light">
            Light

            <input type="radio" name="colorScheme" x-model="$store.colorScheme" value="dark">
            Dark

            <p x-text="$store.colorScheme"></p>
        </div>

        <div x-data>
            <input type="text" x-model="$store.todo.new">
            <button @click="$store.todo.add($store.todo.new)">
                Add Todo
            </button>

            <ul>
                <template x-for="todo in $store.todo.todos">
                    <li x-text="todo"></li>
                </template>
            </ul>
        </div>

        <div x-data>
            <input type="text" x-model="$store.user.name">
        </div>

        <div x-data>
            <input type="checkbox" x-model="$store.toggled.on">
            <button @click="$store.toggle('toggled.on')">Toggle checkbox</button>
        </div>

        <script src="../dist/spruce.umd.js"></script>

        <script>
            Spruce.store('application', {
                name: 'Application',
                toggle() {
                    this.name = ['Application', 'Example'][Math.floor(Math.random() * 2)]
                }
            })

            Spruce.store('persisted', {
                example: 'Hello',
                method() {
                    console.log('test')
                }
            }, true)

            Spruce.store('toggled', {
                on: true
            })

            Spruce.store('colorScheme', 'light', true)

            Spruce.store('todo', {
                new: '',
                todos: [],
                add(todo) {
                    this.todos.push(todo)
                }
            })

            Spruce.store('user', {
                name: 'Ryan'
            })

            Spruce.watch('user', () => {
                Spruce.store('persisted').example = 'Woop!'
            })

            Spruce.watch('application.name', () => {
                Spruce.store('persisted').example = 'World';
            });

            Spruce.watch('persisted.example', () => {
                console.log('World!');
            })

            Spruce.starting(function () {
                console.log('starting up...')
            })

            Spruce.started(function () {
                console.log('started...')
            })

            Spruce.watch('todo.todos', function () {
                console.log('Added todo')
            })
        </script>
    </body>
</html>