create-qwik 0.0.20-4 → 0.0.20-8
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 +1 -1
- package/starters/apps/base/package.json +3 -3
- package/starters/features/eslint/package.json +2 -2
- package/starters/apps/todo-old.test/package.json +0 -7
- package/starters/apps/todo-old.test/src/components/app/app.tsx +0 -33
- package/starters/apps/todo-old.test/src/components/app/base.css +0 -141
- package/starters/apps/todo-old.test/src/components/app/index.css +0 -378
- package/starters/apps/todo-old.test/src/components/body/body.tsx +0 -18
- package/starters/apps/todo-old.test/src/components/footer/footer.tsx +0 -61
- package/starters/apps/todo-old.test/src/components/header/header.tsx +0 -38
- package/starters/apps/todo-old.test/src/components/item/item.tsx +0 -76
- package/starters/apps/todo-old.test/src/entry.dev.tsx +0 -7
- package/starters/apps/todo-old.test/src/entry.ssr.tsx +0 -9
- package/starters/apps/todo-old.test/src/root.tsx +0 -15
- package/starters/apps/todo-old.test/src/state/state.ts +0 -23
package/package.json
CHANGED
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"typecheck": "tsc --noEmit"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
|
-
"@builder.io/qwik": "0.0.20-
|
|
17
|
-
"@types/node": "17.0.
|
|
16
|
+
"@builder.io/qwik": "0.0.20-8",
|
|
17
|
+
"@types/node": "17.0.34",
|
|
18
18
|
"node-fetch": "2.6.7",
|
|
19
19
|
"typescript": "4.6.4",
|
|
20
|
-
"vite": "2.9.
|
|
20
|
+
"vite": "2.9.9"
|
|
21
21
|
},
|
|
22
22
|
"homepage": "https://qwik.builder.io/",
|
|
23
23
|
"private": true,
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
},
|
|
6
6
|
"devDependencies": {
|
|
7
7
|
"@types/eslint": "8.4.2",
|
|
8
|
-
"@typescript-eslint/eslint-plugin": "5.
|
|
9
|
-
"@typescript-eslint/parser": "5.
|
|
8
|
+
"@typescript-eslint/eslint-plugin": "5.25.0",
|
|
9
|
+
"@typescript-eslint/parser": "5.25.0",
|
|
10
10
|
"eslint-plugin-qwik": "latest",
|
|
11
11
|
"eslint": "8.15.0"
|
|
12
12
|
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { component$, useStyles$, useStore } from '@builder.io/qwik';
|
|
2
|
-
import { Footer } from '../footer/footer';
|
|
3
|
-
import { Header } from '../header/header';
|
|
4
|
-
import { Body } from '../body/body';
|
|
5
|
-
import type { Todos } from '../../state/state';
|
|
6
|
-
import styles from './index.css?inline';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Overall application component.
|
|
10
|
-
*
|
|
11
|
-
* This component is static (meaning it will never change). Because of this
|
|
12
|
-
* Qwik knows that it should never need to be rerendered, and its code will never
|
|
13
|
-
* download to the client.
|
|
14
|
-
*/
|
|
15
|
-
export const App = component$(() => {
|
|
16
|
-
useStyles$(styles);
|
|
17
|
-
|
|
18
|
-
const todos = useStore<Todos>({
|
|
19
|
-
filter: 'all',
|
|
20
|
-
items: [
|
|
21
|
-
{ completed: false, title: 'Read Qwik docs' },
|
|
22
|
-
{ completed: false, title: 'Build HelloWorld' },
|
|
23
|
-
{ completed: false, title: 'Profit' },
|
|
24
|
-
],
|
|
25
|
-
});
|
|
26
|
-
return (
|
|
27
|
-
<section class="todoapp">
|
|
28
|
-
<Header todos={todos} />
|
|
29
|
-
<Body todos={todos} />
|
|
30
|
-
<Footer todos={todos} />
|
|
31
|
-
</section>
|
|
32
|
-
);
|
|
33
|
-
});
|
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
hr {
|
|
2
|
-
margin: 20px 0;
|
|
3
|
-
border: 0;
|
|
4
|
-
border-top: 1px dashed #c5c5c5;
|
|
5
|
-
border-bottom: 1px dashed #f7f7f7;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.learn a {
|
|
9
|
-
font-weight: normal;
|
|
10
|
-
text-decoration: none;
|
|
11
|
-
color: #b83f45;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.learn a:hover {
|
|
15
|
-
text-decoration: underline;
|
|
16
|
-
color: #787e7e;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.learn h3,
|
|
20
|
-
.learn h4,
|
|
21
|
-
.learn h5 {
|
|
22
|
-
margin: 10px 0;
|
|
23
|
-
font-weight: 500;
|
|
24
|
-
line-height: 1.2;
|
|
25
|
-
color: #000;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.learn h3 {
|
|
29
|
-
font-size: 24px;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.learn h4 {
|
|
33
|
-
font-size: 18px;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.learn h5 {
|
|
37
|
-
margin-bottom: 0;
|
|
38
|
-
font-size: 14px;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.learn ul {
|
|
42
|
-
padding: 0;
|
|
43
|
-
margin: 0 0 30px 25px;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.learn li {
|
|
47
|
-
line-height: 20px;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.learn p {
|
|
51
|
-
font-size: 15px;
|
|
52
|
-
font-weight: 300;
|
|
53
|
-
line-height: 1.3;
|
|
54
|
-
margin-top: 0;
|
|
55
|
-
margin-bottom: 0;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
#issue-count {
|
|
59
|
-
display: none;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.quote {
|
|
63
|
-
border: none;
|
|
64
|
-
margin: 20px 0 60px 0;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.quote p {
|
|
68
|
-
font-style: italic;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.quote p:before {
|
|
72
|
-
content: '“';
|
|
73
|
-
font-size: 50px;
|
|
74
|
-
opacity: 0.15;
|
|
75
|
-
position: absolute;
|
|
76
|
-
top: -20px;
|
|
77
|
-
left: 3px;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.quote p:after {
|
|
81
|
-
content: '”';
|
|
82
|
-
font-size: 50px;
|
|
83
|
-
opacity: 0.15;
|
|
84
|
-
position: absolute;
|
|
85
|
-
bottom: -42px;
|
|
86
|
-
right: 3px;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.quote footer {
|
|
90
|
-
position: absolute;
|
|
91
|
-
bottom: -40px;
|
|
92
|
-
right: 0;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.quote footer img {
|
|
96
|
-
border-radius: 3px;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.quote footer a {
|
|
100
|
-
margin-left: 5px;
|
|
101
|
-
vertical-align: middle;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.speech-bubble {
|
|
105
|
-
position: relative;
|
|
106
|
-
padding: 10px;
|
|
107
|
-
background: rgba(0, 0, 0, 0.04);
|
|
108
|
-
border-radius: 5px;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.speech-bubble:after {
|
|
112
|
-
content: '';
|
|
113
|
-
position: absolute;
|
|
114
|
-
top: 100%;
|
|
115
|
-
right: 30px;
|
|
116
|
-
border: 13px solid transparent;
|
|
117
|
-
border-top-color: rgba(0, 0, 0, 0.04);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.learn-bar > .learn {
|
|
121
|
-
position: absolute;
|
|
122
|
-
width: 272px;
|
|
123
|
-
top: 8px;
|
|
124
|
-
left: -300px;
|
|
125
|
-
padding: 10px;
|
|
126
|
-
border-radius: 5px;
|
|
127
|
-
background-color: rgba(255, 255, 255, 0.6);
|
|
128
|
-
transition-property: left;
|
|
129
|
-
transition-duration: 500ms;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
@media (min-width: 899px) {
|
|
133
|
-
.learn-bar {
|
|
134
|
-
width: auto;
|
|
135
|
-
padding-left: 300px;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.learn-bar > .learn {
|
|
139
|
-
left: 8px;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
@@ -1,378 +0,0 @@
|
|
|
1
|
-
@import 'base.css';
|
|
2
|
-
|
|
3
|
-
html,
|
|
4
|
-
body {
|
|
5
|
-
margin: 0;
|
|
6
|
-
padding: 0;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
button {
|
|
10
|
-
margin: 0;
|
|
11
|
-
padding: 0;
|
|
12
|
-
border: 0;
|
|
13
|
-
background: none;
|
|
14
|
-
font-size: 100%;
|
|
15
|
-
vertical-align: baseline;
|
|
16
|
-
font-family: inherit;
|
|
17
|
-
font-weight: inherit;
|
|
18
|
-
color: inherit;
|
|
19
|
-
-webkit-appearance: none;
|
|
20
|
-
appearance: none;
|
|
21
|
-
-webkit-font-smoothing: antialiased;
|
|
22
|
-
-moz-osx-font-smoothing: grayscale;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
body {
|
|
26
|
-
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
27
|
-
line-height: 1.4em;
|
|
28
|
-
background: #f5f5f5;
|
|
29
|
-
color: #111111;
|
|
30
|
-
min-width: 230px;
|
|
31
|
-
max-width: 550px;
|
|
32
|
-
margin: 0 auto;
|
|
33
|
-
-webkit-font-smoothing: antialiased;
|
|
34
|
-
-moz-osx-font-smoothing: grayscale;
|
|
35
|
-
font-weight: 300;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
:focus {
|
|
39
|
-
outline: 0;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.hidden {
|
|
43
|
-
display: none;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.todoapp {
|
|
47
|
-
background: #fff;
|
|
48
|
-
margin: 130px 0 40px 0;
|
|
49
|
-
position: relative;
|
|
50
|
-
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.todoapp input::-webkit-input-placeholder {
|
|
54
|
-
font-style: italic;
|
|
55
|
-
font-weight: 300;
|
|
56
|
-
color: rgba(0, 0, 0, 0.4);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.todoapp input::-moz-placeholder {
|
|
60
|
-
font-style: italic;
|
|
61
|
-
font-weight: 300;
|
|
62
|
-
color: rgba(0, 0, 0, 0.4);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.todoapp input::input-placeholder {
|
|
66
|
-
font-style: italic;
|
|
67
|
-
font-weight: 300;
|
|
68
|
-
color: rgba(0, 0, 0, 0.4);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.todoapp h1 {
|
|
72
|
-
position: absolute;
|
|
73
|
-
top: -140px;
|
|
74
|
-
width: 100%;
|
|
75
|
-
font-size: 80px;
|
|
76
|
-
font-weight: 200;
|
|
77
|
-
text-align: center;
|
|
78
|
-
color: #b83f45;
|
|
79
|
-
-webkit-text-rendering: optimizeLegibility;
|
|
80
|
-
-moz-text-rendering: optimizeLegibility;
|
|
81
|
-
text-rendering: optimizeLegibility;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.new-todo,
|
|
85
|
-
.edit {
|
|
86
|
-
position: relative;
|
|
87
|
-
margin: 0;
|
|
88
|
-
width: 100%;
|
|
89
|
-
font-size: 24px;
|
|
90
|
-
font-family: inherit;
|
|
91
|
-
font-weight: inherit;
|
|
92
|
-
line-height: 1.4em;
|
|
93
|
-
color: inherit;
|
|
94
|
-
padding: 6px;
|
|
95
|
-
border: 1px solid #999;
|
|
96
|
-
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
|
97
|
-
box-sizing: border-box;
|
|
98
|
-
-webkit-font-smoothing: antialiased;
|
|
99
|
-
-moz-osx-font-smoothing: grayscale;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.new-todo {
|
|
103
|
-
padding: 16px 16px 16px 60px;
|
|
104
|
-
border: none;
|
|
105
|
-
background: rgba(0, 0, 0, 0.003);
|
|
106
|
-
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.main {
|
|
110
|
-
position: relative;
|
|
111
|
-
z-index: 2;
|
|
112
|
-
border-top: 1px solid #e6e6e6;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.toggle-all {
|
|
116
|
-
width: 1px;
|
|
117
|
-
height: 1px;
|
|
118
|
-
border: none; /* Mobile Safari */
|
|
119
|
-
opacity: 0;
|
|
120
|
-
position: absolute;
|
|
121
|
-
right: 100%;
|
|
122
|
-
bottom: 100%;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.toggle-all + label {
|
|
126
|
-
width: 60px;
|
|
127
|
-
height: 34px;
|
|
128
|
-
font-size: 0;
|
|
129
|
-
position: absolute;
|
|
130
|
-
top: -52px;
|
|
131
|
-
left: -13px;
|
|
132
|
-
-webkit-transform: rotate(90deg);
|
|
133
|
-
transform: rotate(90deg);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.toggle-all + label:before {
|
|
137
|
-
content: '❯';
|
|
138
|
-
font-size: 22px;
|
|
139
|
-
color: #e6e6e6;
|
|
140
|
-
padding: 10px 27px 10px 27px;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.toggle-all:checked + label:before {
|
|
144
|
-
color: #737373;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.todo-list {
|
|
148
|
-
margin: 0;
|
|
149
|
-
padding: 0;
|
|
150
|
-
list-style: none;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.todo-list li {
|
|
154
|
-
position: relative;
|
|
155
|
-
font-size: 24px;
|
|
156
|
-
border-bottom: 1px solid #ededed;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.todo-list li:last-child {
|
|
160
|
-
border-bottom: none;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.todo-list li.editing {
|
|
164
|
-
border-bottom: none;
|
|
165
|
-
padding: 0;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
.todo-list li.editing .edit {
|
|
169
|
-
display: block;
|
|
170
|
-
width: calc(100% - 43px);
|
|
171
|
-
padding: 12px 16px;
|
|
172
|
-
margin: 0 0 0 43px;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.todo-list li.editing .view {
|
|
176
|
-
display: none;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.todo-list li .toggle {
|
|
180
|
-
text-align: center;
|
|
181
|
-
width: 40px;
|
|
182
|
-
/* auto, since non-WebKit browsers doesn't support input styling */
|
|
183
|
-
height: auto;
|
|
184
|
-
position: absolute;
|
|
185
|
-
top: 0;
|
|
186
|
-
bottom: 0;
|
|
187
|
-
margin: auto 0;
|
|
188
|
-
border: none; /* Mobile Safari */
|
|
189
|
-
-webkit-appearance: none;
|
|
190
|
-
appearance: none;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
.todo-list li .toggle {
|
|
194
|
-
opacity: 0;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.todo-list li .toggle + label {
|
|
198
|
-
/*
|
|
199
|
-
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
|
200
|
-
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
|
201
|
-
*/
|
|
202
|
-
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
|
203
|
-
background-repeat: no-repeat;
|
|
204
|
-
background-position: center left;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
.todo-list li .toggle:checked + label {
|
|
208
|
-
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.todo-list li label {
|
|
212
|
-
word-break: break-all;
|
|
213
|
-
padding: 15px 15px 15px 60px;
|
|
214
|
-
display: block;
|
|
215
|
-
line-height: 1.2;
|
|
216
|
-
transition: color 0.4s;
|
|
217
|
-
font-weight: 400;
|
|
218
|
-
color: #4d4d4d;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
.todo-list li.completed label {
|
|
222
|
-
color: #cdcdcd;
|
|
223
|
-
text-decoration: line-through;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.todo-list li .destroy {
|
|
227
|
-
display: none;
|
|
228
|
-
position: absolute;
|
|
229
|
-
top: 0;
|
|
230
|
-
right: 10px;
|
|
231
|
-
bottom: 0;
|
|
232
|
-
width: 40px;
|
|
233
|
-
height: 40px;
|
|
234
|
-
margin: auto 0;
|
|
235
|
-
font-size: 30px;
|
|
236
|
-
color: #cc9a9a;
|
|
237
|
-
margin-bottom: 11px;
|
|
238
|
-
transition: color 0.2s ease-out;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
.todo-list li .destroy:hover {
|
|
242
|
-
color: #af5b5e;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.todo-list li .destroy:after {
|
|
246
|
-
content: '×';
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.todo-list li:hover .destroy {
|
|
250
|
-
display: block;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
.todo-list li .edit {
|
|
254
|
-
display: none;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.todo-list li.editing:last-child {
|
|
258
|
-
margin-bottom: -1px;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
.footer {
|
|
262
|
-
padding: 10px 15px;
|
|
263
|
-
height: 20px;
|
|
264
|
-
text-align: center;
|
|
265
|
-
font-size: 15px;
|
|
266
|
-
border-top: 1px solid #e6e6e6;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
.footer:before {
|
|
270
|
-
content: '';
|
|
271
|
-
position: absolute;
|
|
272
|
-
right: 0;
|
|
273
|
-
bottom: 0;
|
|
274
|
-
left: 0;
|
|
275
|
-
height: 50px;
|
|
276
|
-
overflow: hidden;
|
|
277
|
-
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2),
|
|
278
|
-
0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
.todo-count {
|
|
282
|
-
float: left;
|
|
283
|
-
text-align: left;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
.todo-count strong {
|
|
287
|
-
font-weight: 300;
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
.filters {
|
|
291
|
-
margin: 0;
|
|
292
|
-
padding: 0;
|
|
293
|
-
list-style: none;
|
|
294
|
-
position: absolute;
|
|
295
|
-
right: 0;
|
|
296
|
-
left: 0;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
.filters li {
|
|
300
|
-
display: inline;
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
.filters li a {
|
|
304
|
-
color: inherit;
|
|
305
|
-
margin: 3px;
|
|
306
|
-
padding: 3px 7px;
|
|
307
|
-
text-decoration: none;
|
|
308
|
-
border: 1px solid transparent;
|
|
309
|
-
border-radius: 3px;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
.filters li a:hover {
|
|
313
|
-
border-color: rgba(175, 47, 47, 0.1);
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
.filters li a.selected {
|
|
317
|
-
border-color: rgba(175, 47, 47, 0.2);
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
.clear-completed,
|
|
321
|
-
html .clear-completed:active {
|
|
322
|
-
float: right;
|
|
323
|
-
position: relative;
|
|
324
|
-
line-height: 20px;
|
|
325
|
-
text-decoration: none;
|
|
326
|
-
cursor: pointer;
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
.clear-completed:hover {
|
|
330
|
-
text-decoration: underline;
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
.info {
|
|
334
|
-
margin: 65px auto 0;
|
|
335
|
-
color: #4d4d4d;
|
|
336
|
-
font-size: 11px;
|
|
337
|
-
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
338
|
-
text-align: center;
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
.info p {
|
|
342
|
-
line-height: 1;
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
.info a {
|
|
346
|
-
color: inherit;
|
|
347
|
-
text-decoration: none;
|
|
348
|
-
font-weight: 400;
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
.info a:hover {
|
|
352
|
-
text-decoration: underline;
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
/*
|
|
356
|
-
Hack to remove background from Mobile Safari.
|
|
357
|
-
Can't use it globally since it destroys checkboxes in Firefox
|
|
358
|
-
*/
|
|
359
|
-
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
360
|
-
.toggle-all,
|
|
361
|
-
.todo-list li .toggle {
|
|
362
|
-
background: none;
|
|
363
|
-
}
|
|
364
|
-
|
|
365
|
-
.todo-list li .toggle {
|
|
366
|
-
height: 40px;
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
@media (max-width: 430px) {
|
|
371
|
-
.footer {
|
|
372
|
-
height: 50px;
|
|
373
|
-
}
|
|
374
|
-
|
|
375
|
-
.filters {
|
|
376
|
-
bottom: 10px;
|
|
377
|
-
}
|
|
378
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { component$, Host } from '@builder.io/qwik';
|
|
2
|
-
import { FILTERS, Todos } from '../../state/state';
|
|
3
|
-
import { Item } from '../item/item';
|
|
4
|
-
|
|
5
|
-
interface BodyProps {
|
|
6
|
-
todos: Todos;
|
|
7
|
-
}
|
|
8
|
-
export const Body = component$(({ todos }: BodyProps) => {
|
|
9
|
-
return (
|
|
10
|
-
<Host class="main">
|
|
11
|
-
<ul class="todo-list">
|
|
12
|
-
{todos.items.filter(FILTERS[todos.filter]).map((key) => (
|
|
13
|
-
<Item item={key} todos={todos} />
|
|
14
|
-
))}
|
|
15
|
-
</ul>
|
|
16
|
-
</Host>
|
|
17
|
-
);
|
|
18
|
-
});
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { component$, Host } from '@builder.io/qwik';
|
|
2
|
-
import { FILTERS, FilterStates, Todos } from '../../state/state';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Footer showing items remaining and filtering options
|
|
6
|
-
*
|
|
7
|
-
* It only rerenders if the todos count changes or filters are reset.
|
|
8
|
-
*/
|
|
9
|
-
export const Footer = component$(
|
|
10
|
-
(props: { todos: Todos }) => {
|
|
11
|
-
/**
|
|
12
|
-
* Example of lite-component (it will always be included with the parent component)
|
|
13
|
-
*/
|
|
14
|
-
function Filter({ filter }: { filter: FilterStates }) {
|
|
15
|
-
const lMode = filter.toLowerCase();
|
|
16
|
-
return (
|
|
17
|
-
<li>
|
|
18
|
-
<a
|
|
19
|
-
class={{ selected: props.todos.filter == lMode }}
|
|
20
|
-
onClick$={() => {
|
|
21
|
-
props.todos.filter = filter;
|
|
22
|
-
}}
|
|
23
|
-
>
|
|
24
|
-
{filter[0].toUpperCase() + filter.slice(1)}
|
|
25
|
-
</a>
|
|
26
|
-
</li>
|
|
27
|
-
);
|
|
28
|
-
}
|
|
29
|
-
const remaining = props.todos.items.filter(FILTERS.active).length;
|
|
30
|
-
return (
|
|
31
|
-
<Host class="footer">
|
|
32
|
-
{props.todos.items.length > 0 ? (
|
|
33
|
-
<>
|
|
34
|
-
<span class="todo-count">
|
|
35
|
-
<strong>{remaining}</strong>
|
|
36
|
-
{remaining == 1 ? ' item' : ' items'} left
|
|
37
|
-
</span>
|
|
38
|
-
<ul class="filters">
|
|
39
|
-
{FilterStates.map((f) => (
|
|
40
|
-
<Filter filter={f} />
|
|
41
|
-
))}
|
|
42
|
-
</ul>
|
|
43
|
-
{remaining > 0 ? (
|
|
44
|
-
<button
|
|
45
|
-
class="clear-completed"
|
|
46
|
-
onClick$={() => {
|
|
47
|
-
props.todos.items = props.todos.items.filter(FILTERS.active);
|
|
48
|
-
}}
|
|
49
|
-
>
|
|
50
|
-
Clear completed
|
|
51
|
-
</button>
|
|
52
|
-
) : null}
|
|
53
|
-
</>
|
|
54
|
-
) : null}
|
|
55
|
-
</Host>
|
|
56
|
-
);
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
tagName: 'footer',
|
|
60
|
-
}
|
|
61
|
-
);
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { component$, useStore } from '@builder.io/qwik';
|
|
2
|
-
import type { Todos } from '../../state/state';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Header component which is responsible for providing UI to ender new todo item.
|
|
6
|
-
*
|
|
7
|
-
* This component only rerenders if the user interacts with it through the input.
|
|
8
|
-
*/
|
|
9
|
-
export const Header = component$(
|
|
10
|
-
(props: { todos: Todos }) => {
|
|
11
|
-
const state = useStore({ text: '' });
|
|
12
|
-
return (
|
|
13
|
-
<>
|
|
14
|
-
<h1>todos</h1>
|
|
15
|
-
<input
|
|
16
|
-
class="new-todo"
|
|
17
|
-
placeholder="What needs to be done?"
|
|
18
|
-
autoFocus
|
|
19
|
-
value={state.text}
|
|
20
|
-
onKeyup$={(event: any) => {
|
|
21
|
-
const inputValue = (event.target as HTMLInputElement).value;
|
|
22
|
-
state.text = inputValue;
|
|
23
|
-
if (event.key === 'Enter' && inputValue) {
|
|
24
|
-
props.todos.items.push({
|
|
25
|
-
completed: false,
|
|
26
|
-
title: state.text,
|
|
27
|
-
});
|
|
28
|
-
state.text = '';
|
|
29
|
-
}
|
|
30
|
-
}}
|
|
31
|
-
/>
|
|
32
|
-
</>
|
|
33
|
-
);
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
tagName: 'header',
|
|
37
|
-
}
|
|
38
|
-
);
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { component$, useStore, Host, useRef, useWatch$ } from '@builder.io/qwik';
|
|
2
|
-
|
|
3
|
-
import type { TodoItem, Todos } from '../../state/state';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Individual items of the component.
|
|
7
|
-
*
|
|
8
|
-
* It only rerenders if the user infarcts with it or if the item itself changes.
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
export interface ItemProps {
|
|
12
|
-
item: TodoItem;
|
|
13
|
-
todos: Todos;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export const Item = component$(
|
|
17
|
-
(props: ItemProps) => {
|
|
18
|
-
const state = useStore({ editing: false });
|
|
19
|
-
const editInput = useRef<HTMLInputElement>();
|
|
20
|
-
|
|
21
|
-
useWatch$((track) => {
|
|
22
|
-
const current = track(editInput, 'current');
|
|
23
|
-
if (current) {
|
|
24
|
-
current.focus();
|
|
25
|
-
current.selectionStart = current.selectionEnd = current.value.length;
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
return (
|
|
30
|
-
<Host class={{ completed: props.item.completed, editing: state.editing }}>
|
|
31
|
-
<div class="view">
|
|
32
|
-
<input
|
|
33
|
-
class="toggle"
|
|
34
|
-
type="checkbox"
|
|
35
|
-
checked={props.item.completed}
|
|
36
|
-
onClick$={() => {
|
|
37
|
-
props.item.completed = !props.item.completed;
|
|
38
|
-
}}
|
|
39
|
-
/>
|
|
40
|
-
<label
|
|
41
|
-
onDblclick$={async () => {
|
|
42
|
-
state.editing = true;
|
|
43
|
-
}}
|
|
44
|
-
>
|
|
45
|
-
{props.item.title}
|
|
46
|
-
</label>
|
|
47
|
-
<button
|
|
48
|
-
class="destroy"
|
|
49
|
-
onClick$={() => {
|
|
50
|
-
const todoItem = props.item;
|
|
51
|
-
props.todos.items = props.todos.items.filter((i) => i != todoItem);
|
|
52
|
-
}}
|
|
53
|
-
/>
|
|
54
|
-
</div>
|
|
55
|
-
{state.editing ? (
|
|
56
|
-
<input
|
|
57
|
-
class="edit"
|
|
58
|
-
ref={editInput}
|
|
59
|
-
value={props.item.title}
|
|
60
|
-
onBlur$={() => (state.editing = false)}
|
|
61
|
-
onKeyup$={(event: any) => {
|
|
62
|
-
const inputValue = (event.target as HTMLInputElement).value;
|
|
63
|
-
props.item.title = inputValue;
|
|
64
|
-
if (event.key === 'Enter') {
|
|
65
|
-
state.editing = false;
|
|
66
|
-
}
|
|
67
|
-
}}
|
|
68
|
-
/>
|
|
69
|
-
) : null}
|
|
70
|
-
</Host>
|
|
71
|
-
);
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
tagName: 'li',
|
|
75
|
-
}
|
|
76
|
-
);
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { renderToString, RenderToStringOptions } from '@builder.io/qwik/server';
|
|
2
|
-
import { Root } from './root';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Qwik server-side render function.
|
|
6
|
-
*/
|
|
7
|
-
export function render(opts: RenderToStringOptions) {
|
|
8
|
-
return renderToString(<Root />, opts);
|
|
9
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
////////////////////////////////////////////////////////////////////////
|
|
2
|
-
// Todo Application State Interfaces
|
|
3
|
-
////////////////////////////////////////////////////////////////////////
|
|
4
|
-
|
|
5
|
-
export interface TodoItem {
|
|
6
|
-
completed: boolean;
|
|
7
|
-
title: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export interface Todos {
|
|
11
|
-
filter: FilterStates;
|
|
12
|
-
items: TodoItem[];
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export type FilterStates = 'all' | 'active' | 'completed';
|
|
16
|
-
|
|
17
|
-
export const FilterStates: FilterStates[] = ['all', 'active', 'completed'];
|
|
18
|
-
|
|
19
|
-
export const FILTERS = {
|
|
20
|
-
all: () => true,
|
|
21
|
-
active: (i: TodoItem) => i.completed == false,
|
|
22
|
-
completed: (i: TodoItem) => i.completed == true,
|
|
23
|
-
};
|