@vue-lynx-example/todomvc 0.2.0 → 0.2.2

package/README.md

@@ -1,6 +1,8 @@
 # TodoMVC
 
-Classic [TodoMVC](https://todomvc.com) built with Vue 3 × Lynx using CSS Selector styling.
+Classic [TodoMVC](https://todomvc.com) built with Vue 3 × Lynx using CSS Selector styling. This version features iteratively improved UI, layout, and scrolling behaviors matching the modern reference clone.
+
+*(For the original unpolished version, see `examples/todomvc-day1`)*
 
 ## Features Exercised
 

package/lynx.config.ts

@@ -1,7 +1,23 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from '@lynx-js/rspeedy';
 import { pluginVueLynx } from 'vue-lynx/plugin';
 
+const exampleName = path.basename(path.dirname(fileURLToPath(import.meta.url)));
+
 export default defineConfig({
+  environments: {
+    web: {},
+    lynx: {},
+  },
+  output: {
+    assetPrefix: `https://vue.lynxjs.org/examples/${exampleName}/dist/`,
+  },
+  source: {
+    entry: {
+      main: './src/index.ts',
+    },
+  },
   plugins: [
     pluginVueLynx({
       optionsApi: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-lynx-example/todomvc",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "description": "TodoMVC built with Vue 3 × Lynx",
   "type": "module",
@@ -16,7 +16,7 @@
     "directory": "examples/todomvc"
   },
   "dependencies": {
-    "vue-lynx": "0.1.0-pre-alpha.0"
+    "vue-lynx": "0.2.0"
   },
   "devDependencies": {
     "@lynx-js/rspeedy": "^0.13.5",

package/src/TodoApp.vue

@@ -8,6 +8,9 @@ import TodoFooter from './TodoFooter.vue'
 // ── State ──────────────────────────────────────────────────
 const todos = ref([])
 const filter = ref('all')
+const newTodo = ref('')
+const editedTodoId = ref(null)
+const editText = ref('')
 
 // ── Derived ────────────────────────────────────────────────
 const activeTodos = computed(() => todos.value.filter(t => !t.completed))
@@ -17,6 +20,15 @@ const filteredTodos = computed(() => {
   if (filter.value === 'completed') return completedTodos.value
   return todos.value
 })
+
+const TODO_ROW_HEIGHT = 58;
+const VIEWPORT_RESERVED_HEIGHT = 320;
+
+const mainScrollHeight = computed(
+  () => `${filteredTodos.value.length * TODO_ROW_HEIGHT}px`,
+)
+const mainScrollMaxHeight = `calc(100vh - ${VIEWPORT_RESERVED_HEIGHT}px)`
+
 const allCompleted = computed(() =>
   todos.value.length > 0 && activeTodos.value.length === 0,
 )
@@ -28,9 +40,14 @@ function uuid() {
 }
 
 // ── Actions ────────────────────────────────────────────────
+function updateNewTodo(value) {
+  newTodo.value = value
+}
+
 function addTodo(title) {
   if (!title.trim()) return
   todos.value.push({ id: uuid(), title: title.trim(), completed: false })
+  newTodo.value = ''
 }
 
 function toggleTodo(todo) {
@@ -39,14 +56,36 @@ function toggleTodo(todo) {
 
 function deleteTodo(todo) {
   todos.value = todos.value.filter(t => t.id !== todo.id)
+  if (editedTodoId.value === todo.id) {
+    editedTodoId.value = null
+    editText.value = ''
+  }
+}
+
+function startEdit(todo) {
+  editedTodoId.value = todo.id
+  editText.value = todo.title
+}
+
+function updateEdit(value) {
+  editText.value = value
 }
 
-function editTodo(todo, newTitle) {
-  if (!newTitle.trim()) {
+function doneEdit(todo) {
+  if (editedTodoId.value !== todo.id) {
+    return
+  }
+
+  const title = editText.value.trim()
+  editedTodoId.value = null
+  editText.value = ''
+
+  if (!title) {
     deleteTodo(todo)
     return
   }
-  todo.title = newTitle.trim()
+
+  todo.title = title
 }
 
 function toggleAll() {
@@ -64,47 +103,56 @@ function setFilter(f) {
 </script>
 
 <template>
-  <view class="todoapp">
-    <TodoHeader @add-todo="addTodo" />
-
-    <view class="main" v-if="todos.length > 0">
-      <!-- Toggle all -->
-      <view class="toggle-all-container">
-        <view
-          class="toggle-all-btn"
-          :class="{ 'all-completed': allCompleted }"
-          @tap="toggleAll"
-        >
-          <text class="toggle-all-icon">✓</text>
-        </view>
-        <text class="toggle-all-label">Mark all as complete</text>
-      </view>
+  <view class="page">
+    <view class="todoapp-shell">
+      <view class="todoapp">
+        <TodoHeader
+          :all-completed="allCompleted"
+          :has-todos="todos.length > 0"
+          :new-todo="newTodo"
+          @update-new-todo="updateNewTodo"
+          @add-todo="addTodo"
+          @toggle-all="toggleAll"
+        />
 
-      <!-- Todo list -->
-      <view class="todo-list">
-        <TodoItem
-          v-for="todo in filteredTodos"
-          :key="todo.id"
-          :todo="todo"
-          @toggle="toggleTodo"
-          @delete="deleteTodo"
-          @edit="editTodo"
+        <scroll-view
+          v-if="todos.length > 0"
+          scroll-orientation="vertical"
+          :style="{ height: mainScrollHeight, maxHeight: mainScrollMaxHeight }"
+        >
+          <view class="main">
+            <!-- Todo list -->
+            <view class="todo-list">
+              <TodoItem
+                v-for="todo in filteredTodos"
+                :key="todo.id"
+                :todo="todo"
+                :editing="editedTodoId === todo.id"
+                :edit-text="editedTodoId === todo.id ? editText : todo.title"
+                @toggle="toggleTodo"
+                @delete="deleteTodo"
+                @start-edit="startEdit"
+                @update-edit="updateEdit"
+                @done-edit="doneEdit"
+              />
+            </view>
+          </view>
+        </scroll-view>
+
+        <TodoFooter
+          v-if="todos.length > 0"
+          :active-count="activeTodos.length"
+          :completed-count="completedTodos.length"
+          :current-filter="filter"
+          @set-filter="setFilter"
+          @clear-completed="clearCompleted"
         />
       </view>
     </view>
 
-    <TodoFooter
-      v-if="todos.length > 0"
-      :active-count="activeTodos.length"
-      :completed-count="completedTodos.length"
-      :current-filter="filter"
-      @set-filter="setFilter"
-      @clear-completed="clearCompleted"
-    />
-
     <!-- Info -->
     <view class="info">
-      <text class="info-text">Tap a todo circle to toggle</text>
+      <text class="info-text">Tap the todo text to edit</text>
       <text class="info-text">Built with Vue 3 × Lynx</text>
     </view>
   </view>

package/src/TodoFooter.vue

@@ -10,9 +10,9 @@ function onClear() { emit('clear-completed') }
 
 <template>
   <view class="footer">
-    <view :style="{ flexDirection: 'row' }">
-      <text class="todo-count-number">{{ activeCount }}</text>
-      <text class="todo-count"> {{ activeCount === 1 ? 'item' : 'items' }} left</text>
+    <view class="todo-count">
+      <text class="todo-count-strong">{{ activeCount }}</text>
+      <text class="todo-count-label"> {{ activeCount === 1 ? 'item' : 'items' }} left</text>
     </view>
 
     <view class="filters">

package/src/TodoHeader.vue

@@ -1,23 +1,59 @@
 <script setup>
-const emit = defineEmits(['add-todo'])
+defineProps(['allCompleted', 'hasTodos', 'newTodo'])
+const emit = defineEmits(['update-new-todo', 'add-todo', 'toggle-all'])
 
-function onConfirm(e) {
+function onInput(e) {
   const value = e?.detail?.value ?? ''
+  emit('update-new-todo', value)
+}
+
+function onConfirm(e) {
+  let value = e?.detail?.value
+  if (value === undefined) {
+    value = ''
+  } else {
+    emit('update-new-todo', value)
+  }
+  
   if (value.trim()) {
     emit('add-todo', value)
   }
 }
+
+function onToggleAll() {
+  emit('toggle-all')
+}
 </script>
 
 <template>
   <view class="header">
     <text class="title">todos</text>
-    <input
-      class="new-todo"
-      type="text"
-      placeholder="What needs to be done?"
-      confirm-type="done"
-      @confirm="onConfirm"
-    />
+    <view class="new-todo-row">
+      <view
+        v-if="hasTodos"
+        class="header-toggle-all"
+        @tap="onToggleAll"
+      >
+        <text
+          class="header-toggle-all-icon"
+          :class="{ checked: allCompleted }"
+        >✓</text>
+      </view>
+      <view
+        v-else
+        class="header-toggle-all header-toggle-all-placeholder"
+      />
+
+      <input
+        class="new-todo with-toggle"
+        type="text"
+        :value="newTodo"
+        placeholder="What needs to be done?"
+        confirm-type="done"
+        autofocus
+        @input="onInput"
+        @confirm="onConfirm"
+      />
+    </view>
   </view>
 </template>

package/src/TodoItem.vue

@@ -1,10 +1,6 @@
 <script setup>
-import { ref } from 'vue'
-
-const props = defineProps(['todo'])
-const emit = defineEmits(['toggle', 'delete', 'edit'])
-
-const editing = ref(false)
+const props = defineProps(['todo', 'editing', 'editText'])
+const emit = defineEmits(['toggle', 'delete', 'start-edit', 'update-edit', 'done-edit'])
 
 function onToggle() {
   emit('toggle', props.todo)
@@ -15,42 +11,53 @@ function onDelete() {
 }
 
 function startEdit() {
-  editing.value = true
+  emit('start-edit', props.todo)
 }
 
-function onEditConfirm(e) {
+function onEditInput(e) {
   const value = e?.detail?.value ?? ''
-  editing.value = false
-  emit('edit', props.todo, value)
+  emit('update-edit', value)
 }
 
-function cancelEdit() {
-  editing.value = false
+function onDoneEdit(e) {
+  if (e) {
+    const value = e?.detail?.value ?? ''
+    emit('update-edit', value)
+  }
+  emit('done-edit', props.todo)
 }
 </script>
 
 <template>
-  <!-- Normal view -->
   <view
-    v-if="!editing"
     class="todo-item"
-    :class="{ completed: todo.completed }"
+    :class="{ completed: todo.completed, editing }"
   >
-    <view class="todo-toggle" @tap="onToggle">
-      <text v-if="todo.completed" class="checkmark">✓</text>
+    <!-- Normal view -->
+    <view
+      v-if="!editing"
+      class="todo-view"
+    >
+      <view class="todo-toggle" @tap="onToggle">
+        <text v-if="todo.completed" class="todo-toggle-icon">✓</text>
+      </view>
+      <view class="todo-label-hitbox" @tap="startEdit">
+        <text class="todo-label">{{ todo.title }}</text>
+      </view>
+      <text class="destroy" @tap="onDelete">✕</text>
     </view>
-    <text class="todo-label" @longpress="startEdit">{{ todo.title }}</text>
-    <text class="destroy" @tap="onDelete">✕</text>
-  </view>
 
-  <!-- Edit view -->
-  <view v-else class="edit-container">
-    <input
-      class="edit-input"
-      type="text"
-      :value="todo.title"
-      @confirm="onEditConfirm"
-      @blur="cancelEdit"
-    />
+    <!-- Edit view -->
+    <view v-else class="edit-container">
+      <input
+        class="edit-input"
+        type="text"
+        :value="editText"
+        autofocus
+        @input="onEditInput"
+        @confirm="onDoneEdit"
+        @blur="onDoneEdit"
+      />
+    </view>
   </view>
 </template>

package/src/todomvc.css

@@ -11,12 +11,28 @@
 
 /* ─── App Container ─────────────────────────────────────── */
 
-.todoapp {
+.page {
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
+.todoapp-shell {
   display: flex;
-  flex-direction: column;
-  background-color: #fff;
-  position: relative;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 28px 16px 12px;
+}
+
+.todoapp {
   width: 100%;
+  max-width: 560px;
+  margin: 0 auto;
+  background-color: #ffffff;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.16),
+    0 24px 50px rgba(0, 0, 0, 0.08);
 }
 
 /* ─── Header ────────────────────────────────────────────── */
@@ -24,73 +40,78 @@
 .header {
   display: flex;
   flex-direction: column;
-  align-items: center;
   padding-top: 12px;
+  width: 100%;
 }
 
 .header .title {
-  font-size: 60px;
+  font-size: 72px;
+  line-height: 1;
   font-weight: 200;
   color: rgba(175, 47, 47, 0.15);
   text-align: center;
+  margin-bottom: 10px;
 }
 
-.new-todo {
-  width: 90%;
-  padding: 16px 16px 16px 16px;
-  font-size: 18px;
-  border: 1px solid #999;
-  border-radius: 4px;
-  margin-top: 8px;
-  color: #4d4d4d;
-  background-color: #fff;
-}
-
-/* ─── Main Section ──────────────────────────────────────── */
-
-.main {
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid #e6e6e6;
-}
-
-/* Toggle All */
-.toggle-all-container {
+.new-todo-row {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 8px 16px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid #ededed;
+  background-color: rgba(0, 0, 0, 0.002);
+  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+  width: 100%;
 }
 
-.toggle-all-btn {
-  width: 36px;
-  height: 36px;
+.header-toggle-all {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 18px;
+  width: 58px;
+  min-height: 60px;
+  flex-shrink: 0;
 }
 
-.toggle-all-btn.all-completed {
-  background-color: #737373;
+.header-toggle-all-placeholder {
+  opacity: 0;
 }
 
-.toggle-all-icon {
-  font-size: 20px;
+.header-toggle-all-icon {
+  text-align: center;
+  font-size: 24px;
   color: #e6e6e6;
 }
 
-.toggle-all-btn.all-completed .toggle-all-icon {
-  color: #fff;
+.header-toggle-all-icon.checked {
+  color: #737373;
 }
 
-.toggle-all-label {
-  font-size: 14px;
-  color: #e6e6e6;
-  margin-left: 8px;
+.new-todo {
+  flex: 1;
+  width: auto;
+  min-height: 60px;
+  padding: 16px 18px;
+  border-width: 0;
+  color: #4d4d4d;
+  font-size: 24px;
+  overflow: hidden;
+  text-overflow: clip;
 }
 
+.new-todo.with-toggle {
+  padding-left: 6px;
+}
+
+/* ─── Main Section ──────────────────────────────────────── */
+
+.main {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Toggle All */
+
 /* ─── Todo List ─────────────────────────────────────────── */
 
 .todo-list {
@@ -101,19 +122,26 @@
 /* ─── Todo Item ─────────────────────────────────────────── */
 
 .todo-item {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  border-bottom: 1px solid #ededed;
+}
+
+.todo-view {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid #ededed;
+  min-height: 58px;
+  padding: 12px 18px;
 }
 
 /* Checkbox circle */
 .todo-toggle {
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
-  border: 2px solid #bddad5;
+  width: 34px;
+  height: 34px;
+  border-radius: 17px;
+  border: 1px solid #d9e6e4;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -122,23 +150,24 @@
 
 .todo-item.completed .todo-toggle {
   border-color: #5dc2af;
-  background-color: #5dc2af;
 }
 
-.checkmark {
+.todo-toggle-icon {
   font-size: 18px;
-  color: #fff;
-  font-weight: 700;
+  color: #5dc2af;
 }
 
 /* Todo label */
-.todo-label {
+.todo-label-hitbox {
   flex: 1;
-  font-size: 18px;
-  color: #4d4d4d;
-  margin-left: 12px;
+  margin-left: 14px;
   margin-right: 12px;
-  line-height: 1.4;
+}
+
+.todo-label {
+  font-size: 24px;
+  color: #4d4d4d;
+  line-height: 1.3;
 }
 
 .todo-item.completed .todo-label {
@@ -162,19 +191,28 @@
 .edit-container {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  padding: 4px 16px;
+  padding: 0 0 0 52px;
   border-bottom: 1px solid #ededed;
+  overflow: hidden;
+}
+
+.todo-item.editing .edit-container {
+  border-bottom-width: 0;
 }
 
 .edit-input {
+  width: auto;
   flex: 1;
-  font-size: 18px;
-  padding: 12px;
-  border: 1px solid #999;
-  border-radius: 4px;
+  box-sizing: border-box;
+  min-height: 58px;
+  padding: 12px 16px;
+  border: 1px solid #999999;
+  background-color: #ffffff;
   color: #4d4d4d;
-  background-color: #fff;
+  font-size: 24px;
+  box-shadow:
+    inset 0 -1px 5px rgba(0, 0, 0, 0.2),
+    0 0 1px rgba(0, 0, 0, 0.12);
 }
 
 /* ─── Footer ────────────────────────────────────────────── */
@@ -183,20 +221,37 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 10px 16px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 12px 16px;
+  color: #777777;
   border-top: 1px solid #e6e6e6;
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.08),
+    0 8px 0 -3px #f6f6f6,
+    0 9px 1px -3px rgba(0, 0, 0, 0.08),
+    0 16px 0 -6px #f6f6f6,
+    0 17px 2px -6px rgba(0, 0, 0, 0.08);
 }
 
 .todo-count {
-  font-size: 13px;
-  color: #777;
-  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 14px;
+  color: #777777;
 }
 
-.todo-count-number {
+.todo-count-strong {
+  font-size: 14px;
   font-weight: 700;
-  font-size: 13px;
-  color: #777;
+  color: #777777;
+}
+
+.todo-count-label {
+  font-size: 14px;
+  color: #777777;
 }
 
 /* Filter buttons */
@@ -205,15 +260,17 @@
   flex-direction: row;
   flex: 1;
   justify-content: center;
-  gap: 4px;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 180px;
 }
 
 .filter-btn {
-  font-size: 13px;
-  color: #777;
   padding: 3px 8px;
   border: 1px solid transparent;
   border-radius: 3px;
+  color: #777777;
+  font-size: 14px;
 }
 
 .filter-btn.selected {
@@ -222,9 +279,8 @@
 
 /* Clear completed */
 .clear-completed {
-  font-size: 13px;
-  color: #777;
-  flex-shrink: 0;
+  font-size: 14px;
+  color: #777777;
 }
 
 /* ─── Info Footer ───────────────────────────────────────── */