tastejs · mansoorkhan96 · Jul 18, 2021
diff --git a/examples/alpinejs/README.md b/examples/alpinejs/README.md
@@ -0,0 +1,20 @@
+# Alpine.js TodoMVC Example
+
+> Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going. [Caleb Porzio](https://calebporzio.com/)
+
+> _[Alpine.js - alpinejs.dev](https://alpinejs.dev/)_
+
+## Learning Alpine.js
+
+The [Alpine.js website](https://alpinejs.dev/) is a great resource to get started.
+
+Get help from other Alpine.js users:
+
+* [Alpine.js on Twitter](https://twitter.com/Alpine_JS)
+* [Creator of Alpine.js on Twitter](https://twitter.com/Alpine_JS)
+* [Code with Hugo (core contributor)](https://alpinejs.codewithhugo.com/)
+* [Alpine Toolbox](https://www.alpinetoolbox.com/)
+
+## Credit
+
+This TodoMVC application was created by [Mansoor Khan](https://twitter.com/i_mansoorkhan).
diff --git a/examples/alpinejs/index.html b/examples/alpinejs/index.html
@@ -0,0 +1,147 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Alpine.js • TodoMVC</title>
+    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+</head>
+
+<body>
+    <section
+        x-data="data"
+        x-init="$watch('todos', (todos) => {
+            todoStorage.save(todos);
+        })"
+        class="todoapp"
+    >
+        <header class="header">
+            <h1>todos</h1>
+            <input x-model="newTodo" @keyup.enter="addTodo" class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" />
+        </header>
+        <section x-show="todos.length" class="main">
+            <input @change="checkAllTodos" id="toggle-all" class="toggle-all" type="checkbox" />
+
+            <label for="toggle-all">Mark all as complete</label>
+
+            <ul class="todo-list">
+                <template x-for="todo in filteredTodos">
+                    <li :class="{ completed: todo.completed, editing: todo.editing }" class="todo">
+                        <div class="view">
+                            <input x-model="todo.completed" class="toggle" type="checkbox" />
+
+                            <label x-text="todo.title" x-show="!todo.editing" @dblclick="editTodo(todo)"></label>
+
+                            <button @click="removeTodo(todo.index)" class="destroy"></button>
+                        </div>
+
+                        <input x-show="todo.editing" x-model="todo.title" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.escape="cancelEdit(todo)" class="edit" type="text">
+                    </li>
+                </template>
+            </ul>
+        </section>
+
+        <footer v-show="todos.length" class="footer">
+            <span class="todo-count">
+                <strong x-text="remaining"></strong> <span x-text="pluralize('item', remaining)"></span> left
+            </span>
+            <ul class="filters">
+                <li><a @click="visibility = 'all'" :class="{ selected: visibility == 'all' }">All</a></li>
+                <li><a @click="visibility = 'active'" :class="{ selected: visibility == 'active' }">Active</a></li>
+                <li><a @click="visibility = 'completed'" :class="{ selected: visibility == 'completed' }">Completed</a></li>
+            </ul>
+            <button @click="removeCompleted" x-show="todos.length > remaining" class="clear-completed">
+                Clear completed
+            </button>
+        </footer>
+    </section>
+    <footer class="info">
+        <p>Double-click to edit a todo</p>
+        <p>Written by <a href="https://twitter.com/i_mansoorkhan">Mansoor Khan</a></p>
+        <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+    </footer>
+
+    <script defer src="node_modules/alpinejs/dist/cdn.min.js"></script>
+    <script>
+        window.STORAGE_KEY = 'todos-alpinejs';
+
+        window.todoStorage = {
+            fetch: () => JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'),
+            save: (todos) => localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
+        };
+
+        function data() {
+            var filters = {
+                all: (todos) => todos,
+                active: (todos) => todos.filter(todo => !todo.completed),
+                completed: (todos) => todos.filter(todo => todo.completed)
+            };
+
+            return {
+                todos: todoStorage.fetch(),
+                newTodo: '',
+                beforeEditCache: '',
+                visibility: 'all',
+
+                get filteredTodos () {
+                    return filters[this.visibility](this.todos);
+                },
+
+                get remaining() {
+                    return filters.active(this.todos).length;
+                },
+
+                pluralize(word, count) {
+                    return word + (count === 1 ? '' : 's');
+                },
+
+                addTodo() {
+                    if(this.newTodo.trim().length == 0) {
+                        return;
+                    }
+
+                    this.todos.push({
+                        title: this.newTodo,
+                        completed: false,
+                        editing: false,
+                    });
+
+                    this.newTodo = '';
+                },
+
+                removeTodo(index) {
+                    this.todos.splice(index, 1);
+                },
+
+                editTodo(todo) {
+                    this.beforeEditCache = todo.title;
+                    todo.editing = true;
+                },
+
+                doneEdit(todo) {
+                    if(todo.title.trim() == '') {
+                        todo.title = this.beforeEditCache;
+                    }
+
+                    todo.editing = false;
+                },
+
+                cancelEdit(todo) {
+                    todo.title = this.beforeEditCache;
+                    todo.editing = false;
+                },
+
+                removeCompleted() {
+                    this.todos = filters.active(this.todos);
+                },
+
+                checkAllTodos() {
+                    this.todos.forEach((todo) => todo.completed = event.target.checked);
+                },
+            }
+        }
+    </script>
+</body>
+
+</html>
diff --git a/examples/alpinejs/node_modules/alpinejs/builds/cdn.js b/examples/alpinejs/node_modules/alpinejs/builds/cdn.js
diff --git a/examples/alpinejs/node_modules/alpinejs/builds/module.js b/examples/alpinejs/node_modules/alpinejs/builds/module.js