lego-dom 0.0.8 → 1.0.0

package/examples/vite-app/src/components/todo-list.lego

@@ -0,0 +1,239 @@
+<style>
+  self {
+    display: block;
+    background: white;
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  }
+
+  .input-group {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  input[type="text"] {
+    flex: 1;
+    padding: 0.75rem;
+    font-size: 1rem;
+    border: 2px solid #e0e0e0;
+    border-radius: 4px;
+  }
+
+  input[type="text"]:focus {
+    outline: none;
+    border-color: #4CAF50;
+  }
+
+  .btn {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: background 0.2s;
+  }
+
+  .btn-primary {
+    background: #4CAF50;
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background: #45a049;
+  }
+
+  .filters {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .filter-btn {
+    padding: 0.5rem 1rem;
+    background: #f0f0f0;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .filter-btn.active {
+    background: #4CAF50;
+    color: white;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    border-bottom: 1px solid #f0f0f0;
+    transition: background 0.2s;
+  }
+
+  li:hover {
+    background: #f9f9f9;
+  }
+
+  input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+  }
+
+  .todo-text {
+    flex: 1;
+    font-size: 1rem;
+  }
+
+  .todo-text.done {
+    text-decoration: line-through;
+    color: #999;
+  }
+
+  .delete-btn {
+    padding: 0.25rem 0.5rem;
+    background: #f44336;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.875rem;
+  }
+
+  .delete-btn:hover {
+    background: #da190b;
+  }
+
+  .stats {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 2px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    color: #666;
+    font-size: 0.875rem;
+  }
+
+  .clear-completed {
+    background: none;
+    border: none;
+    color: #f44336;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+</style>
+
+<template>
+  <h1>📝 Todo App</h1>
+
+  <div class="input-group">
+    <input 
+           type="text"
+           b-sync="newTodo" 
+           placeholder="What needs to be done?"
+           @keyup="event.key === 'Enter' && addTodo()">
+    <button class="btn btn-primary" @click="addTodo()">Add</button>
+  </div>
+
+  <div class="filters">
+    <button 
+            class="filter-btn {{ filter === 'all' ? 'active' : '' }}"
+            @click="filter = 'all'">
+      All
+    </button>
+    <button 
+            class="filter-btn {{ filter === 'active' ? 'active' : '' }}"
+            @click="filter = 'active'">
+      Active
+    </button>
+    <button 
+            class="filter-btn {{ filter === 'completed' ? 'active' : '' }}"
+            @click="filter = 'completed'">
+      Completed
+    </button>
+  </div>
+
+  <ul b-for="todo in filteredTodos()">
+    <li>
+      <input type="checkbox" b-sync="todo.done">
+      <span class="todo-text {{ todo.done ? 'done' : '' }}">
+        {{ todo.text }}
+      </span>
+      <button class="delete-btn" @click="deleteTodo(todo)">Delete</button>
+    </li>
+  </ul>
+
+  <div class="stats">
+    <span>{{ remaining() }} item{{ remaining() === 1 ? '' : 's' }} left</span>
+    <button 
+            class="clear-completed" 
+            b-show="completedCount() > 0"
+            @click="clearCompleted()">
+      Clear completed ({{ completedCount() }})
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  newTodo: '',
+  filter: 'all',
+  todos: [],
+  
+  mounted() {
+    const saved = localStorage.getItem('legojs-todos');
+    if (saved) {
+      this.todos = JSON.parse(saved);
+    }
+  },
+
+  updated() {
+    localStorage.setItem('legojs-todos', JSON.stringify(this.todos));
+  },
+
+  addTodo() {
+    if (this.newTodo.trim()) {
+      this.todos.push({
+        id: Date.now(),
+        text: this.newTodo,
+        done: false
+      });
+      this.newTodo = '';
+    }
+  },
+
+  deleteTodo(todo) {
+    this.todos = this.todos.filter(t => t.id !== todo.id);
+  },
+
+  filteredTodos() {
+    if (this.filter === 'active') {
+      return this.todos.filter(t => !t.done);
+    } else if (this.filter === 'completed') {
+      return this.todos.filter(t => t.done);
+    }
+    return this.todos;
+  },
+
+  remaining() {
+    return this.todos.filter(t => !t.done).length;
+  },
+
+  completedCount() {
+    return this.todos.filter(t => t.done).length;
+  },
+
+  clearCompleted() {
+    this.todos = this.todos.filter(t => !t.done);
+  }
+}
+</script>

package/examples/vite-app/src/components/widgets/user-card.lego

@@ -0,0 +1,27 @@
+<style>
+  self {
+    display: block;
+    padding: 1rem;
+    background: #f9fafb;
+    border-bottom: 1px solid #e0e0e0;
+  }
+</style>
+
+
+<template>
+  <div>
+    <h2>User Card</h2>
+    <p>Name: {{ name }}</p>
+    <p>Age: {{ age }}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'UserCard',
+    props: {
+      name: String,
+      age: Number
+    }
+  }
+</script>

package/examples/vite-app/vite.config.js

@@ -1,16 +1,21 @@
 import { defineConfig } from 'vite';
+import path from 'path';
+
 import legoPlugin from 'lego-dom/vite-plugin';
+import tailwindcss from '@tailwindcss/vite';
+
 
 export default defineConfig({
   plugins: [
     legoPlugin({
       componentsDir: './src/components',
       include: ['**/*.lego']
-    })
+    }),
+    tailwindcss()
   ],
   resolve: {
     alias: {
-      'lego-dom/main.js': new URL('../../main.js', import.meta.url).pathname
+      'lego-dom/main.js': path.resolve(__dirname, '../../lego.js')
     }
   }
 });

package/lego.js

@@ -0,0 +1,2 @@
+import './main.js';
+export const Lego = window.Lego;