Skip to content

Commit 15fc61b

Browse files
kokoeautofix-ci[bot]
kokoe
and
autofix-ci[bot]
authored
Fix/todo fix (#273)
* 現在のIFに合わせた変数名に修正 * 対象ファイルを追加 * 文書を簡潔に * ダラーeventの概念を説明する必要がでてしまうので削除。また変数名も前節と同じ名称にする * ダラーeventの概念を説明する必要がでてしまうので削除 * ダラーeventの概念を説明する必要がでてしまうので削除 * 文章を見直し、対象明確にする * 文章を見直し * 対象を明確にする * 対象を明確にする * 現在の実装の課題を追加、文章修正 * fix: 変数名まちがい * 文言修正 * 文言修正、ダラーeventについての説明を追加 * 文章修正 * ディレクトリ名変更、2桁でゼロパディングする * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent b0bd7c9 commit 15fc61b

File tree

60 files changed

+7651
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+7651
-0
lines changed

‎content/ja/9.workspace/1.todo-list/02.reactivity-1/.template/files/app.vue‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
<script setup lang="ts">
2+
/**
3+
* Data
4+
*/
5+
// TODO: リアクティブな値に変更
6+
let userName = 'No Name'
7+
8+
/**
9+
* Methods
10+
*/
11+
// TODO: リアクティブな値にアクセスできるよう変更
12+
function setUserName() {
13+
userName = 'Vue Fes Japan'
14+
}
15+
</script>
16+
17+
<template>
18+
<div class="container">
19+
<header class="header">
20+
<div class="header-left">
21+
<h1>Vue TODO Application</h1>
22+
</div>
23+
<div class="header-right">
24+
<button @click="setUserName">
25+
ユーザー名をセット
26+
</button>
27+
👤
28+
<span>{{ userName }}</span>
29+
</div>
30+
</header>
31+
32+
<main>
33+
<table class="todo-table">
34+
<thead>
35+
<tr>
36+
<th>完了</th>
37+
<th>タイトル</th>
38+
<th>メモ</th>
39+
<th>期限</th>
40+
</tr>
41+
</thead>
42+
<tbody />
43+
</table>
44+
</main>
45+
46+
<footer class="footer">
47+
<p>Vue Fes Tokyo 2025</p>
48+
</footer>
49+
</div>
50+
</template>
51+
52+
<style scoped>
53+
.container {
54+
padding: 1rem 0 2.5rem;
55+
display: flex;
56+
flex-direction: column;
57+
gap: 2.5rem;
58+
min-height: 100vh;
59+
}
60+
61+
/* ------- header start ------- */
62+
.header {
63+
display: grid;
64+
grid-template-columns: 1fr auto;
65+
gap: 0.25rem;
66+
align-items: flex-end;
67+
}
68+
69+
.header-right {
70+
display: grid;
71+
grid-auto-flow: column;
72+
align-items: center;
73+
gap: 0.25rem;
74+
}
75+
76+
.header h1 {
77+
font-size: 1.5rem;
78+
font-weight: bold;
79+
}
80+
81+
.header img {
82+
width: 1.5rem;
83+
height: 1.5rem;
84+
}
85+
86+
.header span {
87+
font-size: 0.875rem;
88+
}
89+
/* ------- header last ------- */
90+
91+
/* ------- main start ------- */
92+
main {
93+
flex-grow: 1;
94+
display: grid;
95+
grid-template-rows: auto 1fr;
96+
gap: 1rem;
97+
}
98+
99+
.actions {
100+
display: grid;
101+
grid-template-columns: 1fr auto;
102+
gap: 0.5rem;
103+
align-items: flex-end;
104+
}
105+
106+
.search-controls {
107+
display: inline-grid;
108+
grid-auto-flow: column;
109+
align-items: center;
110+
gap: 0.5rem;
111+
font-size: 0.875rem;
112+
justify-content: start;
113+
}
114+
115+
.search-area input[type='search'] {
116+
padding: 0.25rem 0.5rem;
117+
font-size: 0.875rem;
118+
border: 1px solid #ccc;
119+
border-radius: 0.25rem;
120+
width: 12rem;
121+
}
122+
123+
.search-controls label {
124+
display: grid;
125+
grid-auto-flow: column;
126+
align-items: center;
127+
gap: 0.5rem;
128+
}
129+
130+
.actions button {
131+
padding: 0.375rem 1rem;
132+
border-radius: 0.375rem;
133+
border: none;
134+
font-size: 0.875rem;
135+
background-color: #02c169;
136+
color: #fff;
137+
cursor: pointer;
138+
}
139+
140+
.actions button:hover {
141+
background-color: #029e58;
142+
}
143+
/* ------- main last ------- */
144+
145+
/* ------- table start ------- */
146+
.todo-table {
147+
width: 100%;
148+
border-collapse: collapse;
149+
table-layout: fixed;
150+
}
151+
152+
.todo-table th,
153+
.todo-table td {
154+
padding: 0.5rem 1rem;
155+
border-bottom: 1px solid #ccc;
156+
vertical-align: middle;
157+
text-align: left;
158+
}
159+
160+
.w-checkbox {
161+
width: 16px;
162+
text-align: center;
163+
}
164+
165+
.w-status {
166+
width: 4rem;
167+
text-align: center;
168+
}
169+
170+
.todo-table button {
171+
background: none;
172+
border: none;
173+
padding: 0;
174+
margin: 0;
175+
cursor: pointer;
176+
display: inline-flex;
177+
align-items: center;
178+
justify-content: center;
179+
}
180+
181+
.todo-table button:hover {
182+
opacity: 0.7;
183+
}
184+
185+
.todo-table img {
186+
width: 1.25rem;
187+
height: 1.25rem;
188+
}
189+
190+
.todo-table .multiline {
191+
white-space: pre-line;
192+
}
193+
194+
.no-tasks {
195+
padding: 2rem;
196+
color: #666;
197+
text-align: center;
198+
}
199+
/* ------- table last ------- */
200+
201+
/* ------- bulk bar start ------- */
202+
.bulk-bar {
203+
position: fixed;
204+
bottom: 0;
205+
inset-inline: 0;
206+
padding: 1rem;
207+
background: #fff;
208+
border-top: 1px solid #ccc;
209+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
210+
}
211+
212+
.bulk-controls {
213+
display: grid;
214+
grid-auto-flow: column;
215+
gap: 1rem;
216+
justify-content: center;
217+
align-items: center;
218+
}
219+
220+
.bulk-controls ul {
221+
display: grid;
222+
grid-auto-flow: column;
223+
gap: 1rem;
224+
list-style: none;
225+
margin: 0;
226+
padding: 0;
227+
}
228+
229+
.bulk-controls button {
230+
padding: 0.375rem 1rem;
231+
border-radius: 0.375rem;
232+
border: none;
233+
font-size: 0.875rem;
234+
background-color: #02c169;
235+
color: #fff;
236+
cursor: pointer;
237+
}
238+
239+
.bulk-controls button:hover {
240+
background-color: #029e58;
241+
}
242+
243+
.bulk-controls .danger {
244+
border: 1px solid #e3342f;
245+
color: #e3342f;
246+
background: none;
247+
}
248+
249+
.bulk-controls .danger:hover {
250+
background-color: #fdd;
251+
}
252+
/* ------- bulk bar last ------- */
253+
254+
/* footer */
255+
.footer {
256+
text-align: center;
257+
color: #666;
258+
}
259+
</style>

‎content/ja/9.workspace/1.todo-list/02.reactivity-1/.template/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { GuideMeta } from '~/types/guides'
2+
3+
export const meta: GuideMeta = {
4+
startingFile: 'app.vue',
5+
features: {
6+
terminal: false,
7+
fileTree: false,
8+
navigation: false,
9+
},
10+
}

0 commit comments

Comments
 (0)