lego-dom 0.0.9 → 1.0.0

package/examples/vite-app/src/components/customers/customer-orders.lego

@@ -0,0 +1,21 @@
+<template>
+  <customers-shell>
+    <div style="padding: 1rem; border: 1px dashed #ccc;">
+      <h3>📦 Order History</h3>
+      <p>Viewing orders for Customer ID: <strong>{{ global.$route.params.id }}</strong></p>
+
+      <!-- Composition: Using another component inside -->
+      <order-list></order-list>
+
+      <div style="margin-top: 1rem;">
+        <a href="/customers/{{ global.$route.params.id }}/details" b-target="#todo-container">View Profile Info</a>
+      </div>
+    </div>
+  </customers-shell>
+</template>
+
+<script>
+  export default {
+    name: 'CustomerOrders'
+  }
+</script>

package/examples/vite-app/src/components/customers/order-list.lego

@@ -0,0 +1,55 @@
+<style>
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    padding: 0.5rem;
+    border: 1px solid #eee;
+    margin-bottom: 0.5rem;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .status {
+    font-weight: bold;
+    color: #059669;
+  }
+</style>
+
+<template>
+  <div>
+    <h4>Recent Orders</h4>
+    <p b-show="loading">Loading orders for customer...</p>
+    <ul b-show="!loading">
+      <li b-for="order in orders">
+        <span>Order #{{ order.id }}</span>
+        <span class="status">{{ order.status }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'OrderList',
+    state: {
+      orders: [],
+      loading: true
+    },
+    async mounted() {
+      // Simulate API fetch using the customer ID from parent or global params
+      const customerId = Lego.globals.$route.params.id;
+      setTimeout(() => {
+        this.orders = [
+          { id: '101', status: 'Delivered' },
+          { id: '105', status: 'Shipped' },
+          { id: '110', status: 'Processing' }
+        ];
+        this.loading = false;
+      }, 800);
+    }
+  }
+</script>

package/examples/vite-app/src/components/greeting-card.lego

@@ -28,7 +28,7 @@
 <template>
   <div>
     <input b-sync="name" type="text" placeholder="Enter your name">
-    <div class="greeting" b-if="name">
+    <div class="greeting" b-show="name">
       Hello, {{ name }}! 👋
     </div>
   </div>

package/examples/vite-app/src/components/sample-component.lego

@@ -49,27 +49,27 @@
 <template>
   <div class="header">{{ title }}</div>
   <div class="content">
-    <p>This is a sample Lego component loaded from a .lego file!</p>
+    <p class="gobe">This is a sample Lego component loaded from a .lego file!</p>
     <p>Message: {{ message }}</p>
   </div>
   <button @click="incrementCount()">
-    Click me! 
+    Click me!
     <span class="count">{{ count }}</span>
   </button>
 </template>
 
 <script>
-export default {
-  title: 'Sample Component',
-  message: 'Hello from .lego file!',
-  count: 0,
-  
-  incrementCount() {
-    this.count++;
-  },
-  
-  mounted() {
-    console.log('Sample component mounted!');
+  export default {
+    title: 'Sample Component',
+    message: 'Hello from .lego file!',
+    count: 0,
+
+    incrementCount() {
+      this.count++;
+    },
+
+    mounted() {
+      console.log('Sample component mounted!');
+    }
   }
-}
-</script>
+</script>

package/examples/vite-app/src/components/shells/customers-shell.lego

@@ -0,0 +1,21 @@
+<style>
+  self {
+    display: block;
+    padding: 1rem;
+    background: #f9fafb;
+    border-bottom: 1px solid #e0e0e0;
+  }
+</style>
+
+<template>
+  <div>
+    <h2>Customers Shell</h2>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CustomersShell'
+  }
+</script>

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

@@ -162,11 +162,11 @@
     </button>
   </div>
 
-  <ul>
-    <li b-for="todo in filteredTodos()">
+  <ul b-for="todo in filteredTodos()">
+    <li>
       <input type="checkbox" b-sync="todo.done">
       <span class="todo-text {{ todo.done ? 'done' : '' }}">
-        {{ todo.text }} - first
+        {{ todo.text }}
       </span>
       <button class="delete-btn" @click="deleteTodo(todo)">Delete</button>
     </li>
@@ -176,7 +176,7 @@
     <span>{{ remaining() }} item{{ remaining() === 1 ? '' : 's' }} left</span>
     <button 
             class="clear-completed" 
-            b-if="completedCount() > 0"
+            b-show="completedCount() > 0"
             @click="clearCompleted()">
       Clear completed ({{ completedCount() }})
     </button>
@@ -195,11 +195,11 @@ export default {
       this.todos = JSON.parse(saved);
     }
   },
-  
+
   updated() {
     localStorage.setItem('legojs-todos', JSON.stringify(this.todos));
   },
-  
+
   addTodo() {
     if (this.newTodo.trim()) {
       this.todos.push({
@@ -210,14 +210,11 @@ export default {
       this.newTodo = '';
     }
   },
-  
+
   deleteTodo(todo) {
-    const index = this.todos.indexOf(todo);
-    if (index > -1) {
-      this.todos.splice(index, 1);
-    }
+    this.todos = this.todos.filter(t => t.id !== todo.id);
   },
-  
+
   filteredTodos() {
     if (this.filter === 'active') {
       return this.todos.filter(t => !t.done);
@@ -226,15 +223,15 @@ export default {
     }
     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);
   }

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,13 +1,17 @@
 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: {