@vue-lynx-example/todomvc 0.1.1

package/README.md

@@ -0,0 +1,14 @@
+# TodoMVC
+
+Classic [TodoMVC](https://todomvc.com) built with Vue 3 × Lynx using CSS Selector styling.
+
+## Features Exercised
+
+- `<script setup>` with `defineProps` / `defineEmits`
+- `ref`, `computed` for state management
+- `v-for` list rendering with `:key`
+- `v-if` / `v-else` conditional rendering
+- Dynamic `:class` binding
+- `@tap`, `@longpress`, `@confirm`, `@blur` events
+- CSS Selectors (`enableCSSSelector: true`)
+- Multi-component composition (TodoApp, TodoHeader, TodoItem, TodoFooter)

package/lynx.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from '@lynx-js/rspeedy';
+import { pluginVueLynx } from 'vue-lynx/plugin';
+
+export default defineConfig({
+  plugins: [
+    pluginVueLynx({
+      optionsApi: false,
+      enableCSSSelector: true,
+    }),
+  ],
+});

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@vue-lynx-example/todomvc",
+  "version": "0.1.1",
+  "private": false,
+  "description": "TodoMVC built with Vue 3 × Lynx",
+  "type": "module",
+  "files": [
+    "dist",
+    "src",
+    "lynx.config.ts",
+    "tsconfig.json"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Huxpro/vue-lynx",
+    "directory": "examples/todomvc"
+  },
+  "scripts": {
+    "build": "rspeedy build",
+    "dev": "rspeedy dev"
+  },
+  "dependencies": {
+    "vue-lynx": "workspace:*"
+  },
+  "devDependencies": {
+    "@lynx-js/rspeedy": "^0.13.5",
+    "@rsbuild/plugin-vue": "^1.2.6",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/TodoApp.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+import TodoHeader from './TodoHeader.vue'
+import TodoItem from './TodoItem.vue'
+import TodoFooter from './TodoFooter.vue'
+
+// ── State ──────────────────────────────────────────────────
+const todos = ref([])
+const filter = ref('all')
+
+// ── Derived ────────────────────────────────────────────────
+const activeTodos = computed(() => todos.value.filter(t => !t.completed))
+const completedTodos = computed(() => todos.value.filter(t => t.completed))
+const filteredTodos = computed(() => {
+  if (filter.value === 'active') return activeTodos.value
+  if (filter.value === 'completed') return completedTodos.value
+  return todos.value
+})
+const allCompleted = computed(() =>
+  todos.value.length > 0 && activeTodos.value.length === 0,
+)
+
+// ── Helpers ────────────────────────────────────────────────
+let nextId = 0
+function uuid() {
+  return `todo-${++nextId}`
+}
+
+// ── Actions ────────────────────────────────────────────────
+function addTodo(title) {
+  if (!title.trim()) return
+  todos.value.push({ id: uuid(), title: title.trim(), completed: false })
+}
+
+function toggleTodo(todo) {
+  todo.completed = !todo.completed
+}
+
+function deleteTodo(todo) {
+  todos.value = todos.value.filter(t => t.id !== todo.id)
+}
+
+function editTodo(todo, newTitle) {
+  if (!newTitle.trim()) {
+    deleteTodo(todo)
+    return
+  }
+  todo.title = newTitle.trim()
+}
+
+function toggleAll() {
+  const newVal = !allCompleted.value
+  todos.value.forEach(t => { t.completed = newVal })
+}
+
+function clearCompleted() {
+  todos.value = todos.value.filter(t => !t.completed)
+}
+
+function setFilter(f) {
+  filter.value = 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>
+
+      <!-- Todo list -->
+      <view class="todo-list">
+        <TodoItem
+          v-for="todo in filteredTodos"
+          :key="todo.id"
+          :todo="todo"
+          @toggle="toggleTodo"
+          @delete="deleteTodo"
+          @edit="editTodo"
+        />
+      </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">Built with Vue 3 × Lynx</text>
+    </view>
+  </view>
+</template>

package/src/TodoFooter.vue

@@ -0,0 +1,42 @@
+<script setup>
+defineProps(['activeCount', 'completedCount', 'currentFilter'])
+const emit = defineEmits(['set-filter', 'clear-completed'])
+
+function onAll() { emit('set-filter', 'all') }
+function onActive() { emit('set-filter', 'active') }
+function onCompleted() { emit('set-filter', 'completed') }
+function onClear() { emit('clear-completed') }
+</script>
+
+<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>
+
+    <view class="filters">
+      <text
+        class="filter-btn"
+        :class="{ selected: currentFilter === 'all' }"
+        @tap="onAll"
+      >All</text>
+      <text
+        class="filter-btn"
+        :class="{ selected: currentFilter === 'active' }"
+        @tap="onActive"
+      >Active</text>
+      <text
+        class="filter-btn"
+        :class="{ selected: currentFilter === 'completed' }"
+        @tap="onCompleted"
+      >Completed</text>
+    </view>
+
+    <text
+      v-if="completedCount > 0"
+      class="clear-completed"
+      @tap="onClear"
+    >Clear completed</text>
+  </view>
+</template>

package/src/TodoHeader.vue

@@ -0,0 +1,23 @@
+<script setup>
+const emit = defineEmits(['add-todo'])
+
+function onConfirm(e) {
+  const value = e?.detail?.value ?? ''
+  if (value.trim()) {
+    emit('add-todo', value)
+  }
+}
+</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>
+</template>

package/src/TodoItem.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps(['todo'])
+const emit = defineEmits(['toggle', 'delete', 'edit'])
+
+const editing = ref(false)
+
+function onToggle() {
+  emit('toggle', props.todo)
+}
+
+function onDelete() {
+  emit('delete', props.todo)
+}
+
+function startEdit() {
+  editing.value = true
+}
+
+function onEditConfirm(e) {
+  const value = e?.detail?.value ?? ''
+  editing.value = false
+  emit('edit', props.todo, value)
+}
+
+function cancelEdit() {
+  editing.value = false
+}
+</script>
+
+<template>
+  <!-- Normal view -->
+  <view
+    v-if="!editing"
+    class="todo-item"
+    :class="{ completed: todo.completed }"
+  >
+    <view class="todo-toggle" @tap="onToggle">
+      <text v-if="todo.completed" class="checkmark">✓</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"
+    />
+  </view>
+</template>

package/src/index.ts

@@ -0,0 +1,7 @@
+import './todomvc.css';
+import { createApp } from 'vue-lynx';
+
+import TodoApp from './TodoApp.vue';
+
+const app = createApp(TodoApp);
+app.mount();

package/src/todomvc.css

@@ -0,0 +1,245 @@
+/*
+ * TodoMVC CSS for Lynx
+ *
+ * Adapted from todomvc-app-css for Lynx constraints:
+ *   - No pseudo-elements (::before, ::after)
+ *   - No :hover, :focus, :checked pseudo-classes
+ *   - All elements are <view>, <text>, <input>
+ *   - Class selectors + descendant/child combinators only
+ *   - Lynx defaults to border-box, linear layout
+ */
+
+/* ─── App Container ─────────────────────────────────────── */
+
+.todoapp {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  position: relative;
+  width: 100%;
+}
+
+/* ─── Header ────────────────────────────────────────────── */
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 12px;
+}
+
+.header .title {
+  font-size: 60px;
+  font-weight: 200;
+  color: rgba(175, 47, 47, 0.15);
+  text-align: center;
+}
+
+.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 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 16px;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.toggle-all-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 18px;
+}
+
+.toggle-all-btn.all-completed {
+  background-color: #737373;
+}
+
+.toggle-all-icon {
+  font-size: 20px;
+  color: #e6e6e6;
+}
+
+.toggle-all-btn.all-completed .toggle-all-icon {
+  color: #fff;
+}
+
+.toggle-all-label {
+  font-size: 14px;
+  color: #e6e6e6;
+  margin-left: 8px;
+}
+
+/* ─── Todo List ─────────────────────────────────────────── */
+
+.todo-list {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── Todo Item ─────────────────────────────────────────── */
+
+.todo-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #ededed;
+}
+
+/* Checkbox circle */
+.todo-toggle {
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  border: 2px solid #bddad5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.todo-item.completed .todo-toggle {
+  border-color: #5dc2af;
+  background-color: #5dc2af;
+}
+
+.checkmark {
+  font-size: 18px;
+  color: #fff;
+  font-weight: 700;
+}
+
+/* Todo label */
+.todo-label {
+  flex: 1;
+  font-size: 18px;
+  color: #4d4d4d;
+  margin-left: 12px;
+  margin-right: 12px;
+  line-height: 1.4;
+}
+
+.todo-item.completed .todo-label {
+  color: #d9d9d9;
+  text-decoration: line-through;
+}
+
+/* Destroy button */
+.destroy {
+  width: 28px;
+  height: 28px;
+  font-size: 22px;
+  color: #cc9a9a;
+  text-align: center;
+  line-height: 28px;
+  flex-shrink: 0;
+}
+
+/* ─── Edit mode ─────────────────────────────────────────── */
+
+.edit-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 16px;
+  border-bottom: 1px solid #ededed;
+}
+
+.edit-input {
+  flex: 1;
+  font-size: 18px;
+  padding: 12px;
+  border: 1px solid #999;
+  border-radius: 4px;
+  color: #4d4d4d;
+  background-color: #fff;
+}
+
+/* ─── Footer ────────────────────────────────────────────── */
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 10px 16px;
+  border-top: 1px solid #e6e6e6;
+}
+
+.todo-count {
+  font-size: 13px;
+  color: #777;
+  flex-shrink: 0;
+}
+
+.todo-count-number {
+  font-weight: 700;
+  font-size: 13px;
+  color: #777;
+}
+
+/* Filter buttons */
+.filters {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  justify-content: center;
+  gap: 4px;
+}
+
+.filter-btn {
+  font-size: 13px;
+  color: #777;
+  padding: 3px 8px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.filter-btn.selected {
+  border-color: rgba(175, 47, 47, 0.2);
+}
+
+/* Clear completed */
+.clear-completed {
+  font-size: 13px;
+  color: #777;
+  flex-shrink: 0;
+}
+
+/* ─── Info Footer ───────────────────────────────────────── */
+
+.info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 24px;
+  padding: 0 16px;
+}
+
+.info-text {
+  font-size: 11px;
+  color: #bfbfbf;
+  text-align: center;
+  margin-top: 4px;
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "noEmit": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+  },
+  "include": ["src", "lynx.config.ts"],
+}