sprae 6.1.1 → 6.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +8 -1
- package/readme.md +55 -41
- package/sprae.auto.js +1 -1
- package/sprae.auto.min.js +1 -1
- package/sprae.js +1 -1
- package/sprae.min.js +1 -1
- package/src/core.js +5 -5
- package/src/directives.js +36 -37
- package/.gitattributes +0 -2
- package/.github/workflows/node.js.yml +0 -30
- package/examples/todomvc.html +0 -98
- package/r&d.md +0 -620
- package/test/attrs.js +0 -754
- package/test/events.js +0 -138
- package/test/index.html +0 -36
- package/test/register.cjs +0 -20
- package/test/state.js +0 -296
- package/test/test.js +0 -13
- package/todo.md +0 -54
package/examples/todomvc.html
DELETED
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" data-framework="sprae">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
-
<title>sprae • TodoMVC</title>
|
|
8
|
-
<link rel="stylesheet" href="https://unpkg.com/todomvc-common/base.css">
|
|
9
|
-
<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css">
|
|
10
|
-
<style>[\:each]{display: none;}</style>
|
|
11
|
-
</head>
|
|
12
|
-
|
|
13
|
-
<body>
|
|
14
|
-
<section class="todoapp">
|
|
15
|
-
<header class="header">
|
|
16
|
-
<h1>todos</h1>
|
|
17
|
-
<input class="new-todo" placeholder="What needs to be done?" autofocus @keypress.enter="
|
|
18
|
-
save(todos = [...todos, { text: this.value, done: false}])
|
|
19
|
-
this.value = ''
|
|
20
|
-
">
|
|
21
|
-
</header>
|
|
22
|
-
<section class="main">
|
|
23
|
-
<input id="toggle-all" class="toggle-all" type="checkbox" @click="
|
|
24
|
-
const all = todos.every(item => item.done)
|
|
25
|
-
save(todos = todos.map(item => (item.done = !all, item)))
|
|
26
|
-
">
|
|
27
|
-
<label for="toggle-all">Mark all as complete</label>
|
|
28
|
-
<ul class="todo-list">
|
|
29
|
-
<li :ref="li" :each="item in todos"
|
|
30
|
-
:class="{completed: item.done}"
|
|
31
|
-
:hidden="hash === '#/active' ? item.done : hash === '#/completed' ? !item.done : false"
|
|
32
|
-
@dblclick="
|
|
33
|
-
li.querySelector('.edit').focus()
|
|
34
|
-
li.classList.add('editing')
|
|
35
|
-
">
|
|
36
|
-
<div class="view">
|
|
37
|
-
<input class="toggle" type="checkbox"
|
|
38
|
-
:checked="item.done"
|
|
39
|
-
@change="item.done = !item.done, save(todos)"
|
|
40
|
-
/>
|
|
41
|
-
<label :text="item.text"></label>
|
|
42
|
-
<button class="destroy" @click="save(todos = todos.filter(i => i.text !== item.text))"></button>
|
|
43
|
-
</div>
|
|
44
|
-
<input class=edit
|
|
45
|
-
:value="item.text"
|
|
46
|
-
@input="item.text = this.value; save(todos)"
|
|
47
|
-
@blur="li.classList.remove('editing');"
|
|
48
|
-
@keypress.enter="this.blur()"
|
|
49
|
-
/>
|
|
50
|
-
</li>
|
|
51
|
-
</ul>
|
|
52
|
-
</section>
|
|
53
|
-
<footer class="footer">
|
|
54
|
-
<span class="todo-count">
|
|
55
|
-
<strong :text="count()">#</strong> <span :text="plur('item', count())">items</span> left
|
|
56
|
-
</span>
|
|
57
|
-
<ul class="filters">
|
|
58
|
-
<li :each="label, key in {'#/': 'All', '#/active': 'Active', '#/completed': 'Completed'}">
|
|
59
|
-
<a :class="{selected: hash===key}" :href="key" :text="label"></a>
|
|
60
|
-
</li>
|
|
61
|
-
</ul>
|
|
62
|
-
<button class="clear-completed"
|
|
63
|
-
:hidden="todos.every(item => !item.done)"
|
|
64
|
-
@click="save(todos = todos.filter(item => !item.done ? true : false))">
|
|
65
|
-
Clear completed
|
|
66
|
-
</button>
|
|
67
|
-
</footer>
|
|
68
|
-
</section>
|
|
69
|
-
<footer class="info">
|
|
70
|
-
<p>Double-click to edit a todo</p>
|
|
71
|
-
<p>Created by <a href="https://github.com/dy">dy</a></p>
|
|
72
|
-
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
|
|
73
|
-
</footer>
|
|
74
|
-
<script src="https://unpkg.com/todomvc-common/base.js"></script>
|
|
75
|
-
<script type="importmap"> {
|
|
76
|
-
"imports": {
|
|
77
|
-
"sprae": "https://cdn.jsdelivr.net/npm/sprae/sprae.min.js",
|
|
78
|
-
"plur": "https://cdn.skypack.dev/plur"
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
</script>
|
|
82
|
-
<script type="module">
|
|
83
|
-
import sprae from '../sprae.js'
|
|
84
|
-
import plur from 'plur'
|
|
85
|
-
|
|
86
|
-
let state = sprae(document.body, {
|
|
87
|
-
plur,
|
|
88
|
-
todos: JSON.parse(localStorage.getItem('todomvc.items') || '[]'),
|
|
89
|
-
count() { return this.todos.filter(item => !item.done).length },
|
|
90
|
-
hash: window.location.hash || '#/',
|
|
91
|
-
save: items => localStorage.setItem('todomvc.items', JSON.stringify(items))
|
|
92
|
-
})
|
|
93
|
-
|
|
94
|
-
// hash source
|
|
95
|
-
window.addEventListener('hashchange', e => state.hash = window.location.hash)
|
|
96
|
-
</script>
|
|
97
|
-
</body>
|
|
98
|
-
</html>
|