tastejs · gabystallo · Feb 19, 2023
diff --git a/examples/alpinejs/.gitignore b/examples/alpinejs/.gitignore
@@ -0,0 +1,19 @@
+node_modules/todomvc-app-css/**
+!node_modules/todomvc-app-css/index.css
+
+node_modules/todomvc-common/**
+!node_modules/todomvc-common/base.js
+!node_modules/todomvc-common/base.css
+
+node_modules/director/**
+!node_modules/director/build
+!node_modules/director/build/director.min.js
+
+node_modules/@alpinejs/**
+!node_modules/@alpinejs/focus
+!node_modules/@alpinejs/focus/dist
+!node_modules/@alpinejs/focus/dist/cdn.min.js
+
+node_modules/alpinejs/**
+!node_modules/alpinejs/dist
+!node_modules/alpinejs/dist/cdn.min.js
diff --git a/examples/alpinejs/css/app.css b/examples/alpinejs/css/app.css
@@ -0,0 +1,8 @@
+/*
+
+app-template.css overrides
+
+remove this comment if used
+remove this file if not
+
+*/
diff --git a/examples/alpinejs/index.html b/examples/alpinejs/index.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <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 class="todoapp"
+ x-data="todoapp()"
+ x-init="initTodoApp"
+ >
+ <header class="header">
+ <h1>todos</h1>
+ <input
+ class="new-todo"
+ placeholder="What needs to be done?"
+ x-model="newTodoTitle"
+ @keyup.enter="add()"
+ autofocus>
+ </header>
+ <section class="main" x-show="todos.length">
+ <input
+ id="toggle-all"
+ class="toggle-all"
+ type="checkbox"
+ @click="toggleAllCompleted"
+ :checked="active.length == 0"
+ >
+ <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 : editingTodo == todo }">
+ <div class="view">
+ <input
+ class="toggle"
+ type="checkbox"
+ x-model="todo.completed"
+ >
+ <label
+ x-text="todo.title"
+ @dblclick.prevent="edit(todo)"
+ ></label>
+ <button class="destroy" @click="remove(todo)"></button>
+ </div>
+ <input
+ class="edit"
+ x-model="todo.editingBuffer"
+ @keyup.enter="saveEdit()"
+ @click.away="saveEdit()"
+ @keyup.escape="cancelEdit()"
+ x-trap="editingTodo == todo"
+ >
+ <!-- x-trap uses the alpinejs/focus plugin -->
+ </li>
+ </template>
+ </ul>
+ </section>
+ <footer class="footer" x-show="todos.length">
+ <span class="todo-count">
+ <strong x-text="active.length"></strong>
+ <span x-text="active.length == 1 ? 'item' : 'items'"></span> left
+ </span>
+ <ul class="filters">
+ <li>
+ <a
+ href="#/"
+ :class="{ selected : visibility == 'all' }"
+ >All</a>
+ </li>
+ <li>
+ <a
+ href="#/active"
+ :class="{ selected : visibility == 'active' }"
+ >Active</a>
+ </li>
+ <li>
+ <a
+ href="#/completed"
+ :class="{ selected : visibility == 'completed' }"
+ >Completed</a>
+ </li>
+ </ul>
+ <button
+ class="clear-completed"
+ x-show="completed.length"
+ @click="removeCompleted()"
+ >Clear completed</button>
+ </footer>
+ </section>
+ <footer class="info">
+ <p>Double-click to edit a todo</p>
+ <p>Created by <a href="https://github.com/gabystallo">gabystallo</a></p>
+ <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+ </footer>
+ <script src="node_modules/todomvc-common/base.js"></script>
+ <script src="node_modules/director/build/director.min.js"></script>
+ <script defer src="node_modules/@alpinejs/focus/dist/cdn.min.js"></script>
+ <script defer src="node_modules/alpinejs/dist/cdn.min.js"></script>
+ <script src="js/storage.js"></script>
+ <script src="js/router.js"></script>
+ <script src="js/app.js"></script>
+ </body>
+</html>
diff --git a/examples/alpinejs/js/app.js b/examples/alpinejs/js/app.js
@@ -0,0 +1,110 @@
+(function (window) {
+ 'use strict';
+
+ window.todoapp = function() {
+ return {
+
+ // app initial state
+ todos: window.todoStorage.fetch(),
+ newTodoTitle: '',
+ editingTodo: null,
+ visibility: 'all',
+
+ // computed properties
+ get completed() {
+ return this.todos.filter(function (todo) {
+ return todo.completed;
+ });
+ },
+
+ get active() {
+ return this.todos.filter(function (todo) {
+ return ! todo.completed;
+ });
+ },
+
+ get filteredTodos() {
+ if (this.visibility == 'active') {
+ return this.active;
+ }
+
+ if (this.visibility == 'completed') {
+ return this.completed;
+ }
+
+ // by default show "all" todos
+ return this.todos;
+ },
+
+ // initialize
+ initTodoApp: function () {
+ this.$watch('todos', function (todos) {
+ window.todoStorage.save(todos);
+ });
+ window.setUpTodoAppRouter(this);
+ },
+
+ // methods
+ add: function () {
+ var title = this.newTodoTitle.trim();
+ if (!title) {
+ return;
+ }
+ this.todos.push({ id:Date.now(), title: title, completed: false });
+ this.newTodoTitle = '';
+ },
+
+ edit: function (todo) {
+ this.cancelEdit();
+ todo.editingBuffer = todo.title;
+ this.editingTodo = todo;
+ },
+
+ cancelEdit: function () {
+ if(!this.editingTodo) {
+ return;
+ }
+ delete this.editingTodo.editingBuffer;
+ this.editingTodo = null;
+ },
+
+ saveEdit: function () {
+ var newTitle = this.editingTodo.editingBuffer.trim();
+
+ if (!this.editingTodo) {
+ return;
+ }
+
+ if (newTitle == '') {
+ this.remove(this.editingTodo);
+ return;
+ }
+ this.editingTodo.title = newTitle;
+ this.cancelEdit();
+ },
+
+ remove: function (todo) {
+ var index = this.todos.indexOf(todo);
+ this.todos.splice(index, 1);
+ },
+
+ removeCompleted: function () {
+ this.todos = this.active;
+ },
+
+ toggleAllCompleted: function () {
+ if (!this.active.length) {
+ this.todos.forEach(function (todo) {
+ todo.completed = false;
+ });
+ return;
+ }
+
+ this.todos.forEach(function (todo) {
+ todo.completed = true;
+ });
+ }
+ };
+ };
+
+})(window);
diff --git a/examples/alpinejs/js/router.js b/examples/alpinejs/js/router.js
@@ -0,0 +1,23 @@
+(function (window) {
+ 'use strict';
+
+ window.setUpTodoAppRouter = function (todoapp) {
+ var router = new window.Router();
+
+ ['all', 'active', 'completed'].forEach(function (visibility) {
+ router.on(visibility, function () {
+ todoapp.visibility = visibility;
+ });
+ });
+
+ router.configure({
+ notfound: function () {
+ window.location.hash = '';
+ todoapp.visibility = 'all';
+ }
+ });
+
+ router.init();
+ };
+
+})(window);
diff --git a/examples/alpinejs/js/storage.js b/examples/alpinejs/js/storage.js
@@ -0,0 +1,15 @@
+(function (window) {
+ 'use strict';
+
+ var STORAGE_KEY = 'todos-alpinejs';
+
+ window.todoStorage = {
+ fetch: function () {
+ return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+ },
+ save: function (data) {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+ }
+ };
+
+})(window);
diff --git a/examples/alpinejs/node_modules/@alpinejs/focus/dist/cdn.min.js b/examples/alpinejs/node_modules/@alpinejs/focus/dist/cdn.min.js