viewlogic 1.1.1 → 1.1.3

package/README.md

@@ -12,7 +12,7 @@
   </a>
 </p>
 
-> A revolutionary Vue 3 routing system with automatic data fetching, form handling, and zero build development
+> A revolutionary Vue 3 routing system with View-Logic separation and Zero Build Development
 
 ## 🆕 Latest Updates (v1.1.1)
 
@@ -24,37 +24,40 @@
 
 ## 🎯 Core Philosophy: Simplicity Through Design
 
-ViewLogic Router revolutionizes Vue development with two core principles:
+ViewLogic Router revolutionizes Vue development with two fundamental core principles:
 
 ### 🎭 View-Logic Separation
-Clear separation between **View** (presentation) and **Logic** (business logic), making your code more maintainable, testable, and scalable.
+**Complete separation between View (presentation) and Logic (business logic)**. Views are pure HTML templates, logic is pure JavaScript components, making your code more maintainable, testable, and scalable.
 
-### 🔗 Query-Only Parameters
-**All parameters are passed via query strings only** - no complex path parameters (`/users/:id`), just simple, clean URLs (`/users?id=123`). This revolutionary approach simplifies routing and makes URLs more predictable and SEO-friendly.
+### 🚀 Zero Build Development
+**Zero build step required in development mode**. Work directly with source files, see changes instantly without any compilation, bundling, or build processes. True real-time development experience.
 
-## ✨ Features
+## ✨ Key Features
 
-- 🎭 **View-Logic Separation** - Clear separation between presentation and business logic
-- 🚀 **Zero Build Development** - Work in real-time without any build step in development mode
+- 🚀 **Ultra-Lightweight** - Complete routing system in just 13KB gzipped (48KB minified)
+- 🔄 **Multiple API Support** - Parallel data fetching from multiple APIs with named data storage  
+- 📝 **Automatic Form Handling** - Revolutionary form submission with `{paramName}` variable parameters
+- 🛠️ **Built-in Components** - Preloaded UI components including revolutionary DynamicInclude & HtmlInclude
+- 🔗 **Query-Based Parameter System** - Simple query-only parameters (`/users?id=123`) instead of complex path parameters
 - ⚡ **Optimized Production** - Pre-built individual route bundles for lightning-fast production
 - 📁 **Intuitive Structure** - Organized folder structure for views, logic, styles, layouts, and components
-- 🔄 **Hot Development** - See changes instantly without compilation
-- 📦 **Smart Production Build** - Each route becomes an optimized JavaScript bundle
-- 🛠️ **Built-in Components** - Preloaded UI components including revolutionary DynamicInclude & HtmlInclude
-- 🌐 **i18n Ready** - Built-in internationalization support
-- 🔐 **Authentication** - Built-in auth management system
 - 💾 **Smart Caching** - Intelligent route and component caching
-- 📝 **Automatic Form Handling** - Revolutionary form submission with variable parameters
-- 🚀 **Ultra-Lightweight** - Complete routing system in just 13KB gzipped (48KB minified)
+- 🔐 **Authentication** - Built-in auth management system
+- 🌐 **i18n Ready** - Built-in internationalization support
 
 ## 📦 Installation
 
+Create a new ViewLogic project with our complete template:
+
+```bash
+npm create viewlogic my-app
+cd my-app
+# Ready to go! No additional setup needed
+```
+
+Or manually install the router only:
 ```bash
 npm install viewlogic
-# or
-yarn add viewlogic
-# or
-pnpm add viewlogic
 ```
 
 ## 🚀 Quick Start
@@ -80,7 +83,7 @@ pnpm add viewlogic
         // Development mode - loads files directly from src/
         ViewLogicRouter({
             environment: 'development',
-        }).mount('#app');
+        });
     </script>
 </body>
 </html>
@@ -109,7 +112,7 @@ pnpm add viewlogic
             environment: 'production',
             useI18n: true,
             logLevel: 'error'          // Only log errors
-        }).mount('#app');
+        });
     </script>
 </body>
 </html>
@@ -257,298 +260,174 @@ const config = {
 };
 ```
 
-## 📖 API Reference
+### 🏗️ Subfolder Deployment Support
 
-### Router Instance Methods
+ViewLogic Router supports deployment in subfolders with smart path resolution:
 
 ```javascript
-// Navigation
-router.navigateTo('routeName', { param: 'value' });
-router.navigateTo({ route: 'products', params: { id: 123 } });
-
-// Get current route
-const currentRoute = router.getCurrentRoute();
-
-// Unified parameter system - all parameters are query-based
-router.queryManager.setQueryParams({ id: 123, category: 'electronics' });
-const params = router.queryManager.getParams(); // Gets all parameters
-const userId = router.queryManager.getParam('id', 1); // Get specific parameter with default
-router.queryManager.removeQueryParams(['category']);
-
-// Authentication (if enabled)
-router.authManager.login(token);
-router.authManager.logout();
-const isAuth = router.authManager.isAuthenticated();
-
-// Internationalization (if enabled)
-router.i18nManager.setLanguage('en');
-const t = router.i18nManager.translate('welcome.message');
+// Root deployment: https://example.com/
+ViewLogicRouter({
+    basePath: '/src',           // → https://example.com/src
+    routesPath: '/routes',      // → https://example.com/routes
+    i18nPath: '/i18n'          // → https://example.com/i18n
+});
 
-// Cache management
-router.cacheManager.clearAll();
+// Subfolder deployment: https://example.com/myapp/
+ViewLogicRouter({
+    basePath: 'src',            // → https://example.com/myapp/src (relative)
+    routesPath: 'routes',       // → https://example.com/myapp/routes (relative)
+    i18nPath: 'i18n',          // → https://example.com/myapp/i18n (relative)
+});
 
-// Cleanup
-router.destroy();
+// Mixed paths: https://example.com/projects/myapp/
+ViewLogicRouter({
+    basePath: './src',          // → https://example.com/projects/myapp/src
+    routesPath: '../shared/routes', // → https://example.com/projects/shared/routes  
+    i18nPath: '/global/i18n'    // → https://example.com/global/i18n (absolute)
+});
 ```
 
-### Global Functions Available in Route Components
+**Path Resolution Rules:**
+- **Absolute paths** (`/path`) → `https://domain.com/path`
+- **Relative paths** (`path`, `./path`) → Resolved from current page location
+- **Parent paths** (`../path`) → Navigate up directory levels
+- **HTTP URLs** → Used as-is (no processing)
 
-Every route component automatically has access to these global functions:
+### 🔄 Hash vs History Mode in Subfolders
 
-```javascript
-export default {
-    name: 'MyComponent',
-    data() {
-        return {
-            products: []
-        };
-    },
-    async mounted() {
-        // Get all parameters (both route and query parameters)
-        const allParams = this.getParams();
-        
-        // Get specific parameter with default value
-        const categoryId = this.getParam('categoryId', 1);
-        const sortBy = this.getParam('sort', 'name');
-        
-        // Navigation
-        this.navigateTo('product-detail', { id: 123 });
-        
-        // Check authentication
-        if (this.$isAuthenticated()) {
-            // User is logged in
-        }
-        
-        // Internationalization
-        const title = this.$t('product.title');
-        
-        // Data automatically fetched if dataURL is defined in component
-        // Single API: this.products available
-        // Multiple APIs: this.products, this.categories, this.stats, etc. available
-        console.log('Auto-loaded data:', this.products); // From dataURL
-    },
-    methods: {
-        handleProductClick(productId) {
-            // Navigate with parameters
-            this.navigateTo('product-detail', { 
-                id: productId,
-                category: this.getParam('category')
-            });
-        },
-        
-        handleLogout() {
-            this.$logout(); // Will navigate to login page
-        },
-        
-        async loadUserData() {
-            // Get authentication token
-            const token = this.$getToken();
-            if (token) {
-                // Make authenticated API call
-                const response = await fetch('/api/user', {
-                    headers: { 'Authorization': `Bearer ${token}` }
-                });
-            }
-        },
-        
-        changeLanguage() {
-            // Change language and get translated text
-            const greeting = this.$t('common.greeting');
-        }
-    }
-};
-```
+Both routing modes work seamlessly in subfolder deployments:
 
-### Complete Global Functions List
+```javascript
+// Hash Mode (recommended for subfolders)
+// URL: https://example.com/myapp/#/products?id=123
+ViewLogicRouter({ 
+    mode: 'hash'           // Works anywhere, no server config needed
+});
 
-#### Navigation Functions
-- `navigateTo(route, params)` - Navigate to a route with parameters
-- `getCurrentRoute()` - Get current route name
+// History Mode (requires server configuration)
+// URL: https://example.com/myapp/products?id=123  
+ViewLogicRouter({ 
+    mode: 'history'        // Cleaner URLs, needs server setup
+});
+```
 
-#### Parameter Management
-- `getParams()` - Get all parameters (route + query)
-- `getParam(key, defaultValue)` - Get specific parameter with default
+**History Mode Server Configuration:**
+```nginx
+# Nginx - redirect all subfolder requests to index.html
+location /myapp/ {
+    try_files $uri $uri/ /myapp/index.html;
+}
+```
 
-#### Authentication Functions
-- `$isAuthenticated()` - Check if user is authenticated
-- `$logout()` - Logout and navigate to login page
-- `$loginSuccess(target)` - Handle successful login navigation
-- `$checkAuth(route)` - Check authentication for a route
-- `$getToken()` - Get access token
-- `$setToken(token, options)` - Set access token
-- `$removeToken(storage)` - Remove access token
-- `$getAuthCookie()` - Get authentication cookie
-- `$getCookie(name)` - Get specific cookie value
+```apache
+# Apache .htaccess in /myapp/ folder
+RewriteEngine On
+RewriteBase /myapp/
+RewriteRule ^index\.html$ - [L]
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . /myapp/index.html [L]
+```
 
-#### Internationalization Functions
-- `$t(key, params)` - Translate text with optional parameters
+## 📖 Complete API Documentation
 
-#### Data Management Functions  
-- `$fetchData()` - Fetch data from single dataURL or all multiple dataURLs
-- `$fetchData('apiName')` - Fetch data from specific named API (multiple dataURL mode)
-- `$fetchAllData()` - Explicitly fetch all APIs (works for both single and multiple dataURL)
-- `$fetchMultipleData()` - Internal method for multiple API handling
+For comprehensive API documentation including all methods, configuration options, and detailed examples, see:
 
-### Component Data Properties
+**📚 [Complete API Reference →](./docs/index.md)**
 
-Every route component also has access to these reactive data properties:
+### Quick API Overview
 
 ```javascript
-data() {
-    return {
-        // Your custom data
-        products: [],
-        
-        // Automatically available properties
-        currentRoute: 'home',           // Current route name
-        $query: {},                     // Current query parameters
-        $lang: 'ko',                   // Current language
-        $dataLoading: false            // Data loading state
-    };
-}
-```
+// Basic router usage
+const router = new ViewLogicRouter({ environment: 'development' });
+router.navigateTo('products', { id: 123, category: 'electronics' });
+const current = router.getCurrentRoute();
 
-### Global Access
+// In route components - global methods automatically available:
+export default {
+    dataURL: '/api/products', // Auto-fetch data
+    mounted() {
+        const id = this.getParam('id');           // Get parameter
+        this.navigateTo('detail', { id });        // Navigate
+        console.log('Data loaded:', this.products); // From dataURL
+        if (this.$isAuthenticated()) { /* auth check */ }
+        const text = this.$t('welcome.message');   // i18n
+    }
+};
+```
 
-After initialization, the router is available globally:
+### Key Global Methods (Auto-available in all route components)
+- **Navigation**: `navigateTo()`, `getCurrentRoute()`
+- **Parameters**: `getParams()`, `getParam(key, defaultValue)`
+- **Data Fetching**: `$fetchData()`, `$fetchAllData()` (with dataURL)
+- **Authentication**: `$isAuthenticated()`, `$getToken()`, `$logout()`
+- **Forms**: Auto-binding with `action` attribute and `{param}` templates
+- **i18n**: `$t(key, params)` for translations
 
+### Auto-Injected Properties
 ```javascript
-// UMD build automatically sets window.router
-window.router.navigateTo('about');
-
-// Also available as
-window.createRouter(config);
-window.ViewLogicRouter(config);
+// Automatically available in every route component:
+// currentRoute, $query, $lang, $dataLoading
 ```
 
-## 🎯 View-Logic Separation Example
+## 🎯 View-Logic Separation: Core Philosophy in Action
 
-### Development Mode (Separated Files)
+ViewLogic Router's fundamental philosophy of **View-Logic Separation** creates clear boundaries between concerns:
 
-#### View File (src/views/products/list.html)
-```html
-<div class="products-page">
-    <h1>{{ title }}</h1>
-    <div class="product-grid">
-        <div v-for="product in products" :key="product.id" class="product-card">
-            <img :src="product.image" :alt="product.name">
-            <h3>{{ product.name }}</h3>
-            <p class="price">{{ formatPrice(product.price) }}</p>
-            <button @click="viewDetail(product.id)">View Detail</button>
-        </div>
-    </div>
-</div>
-```
+### Philosophy Benefits
+- **🎨 Pure Presentation**: Views contain only HTML - no mixed logic or scripts
+- **🧠 Pure Logic**: JavaScript components focus solely on business logic
+- **⚡ Zero Build Required**: Work directly with separate files in development
+- **🔄 Hot Reload**: Instant changes without compilation or bundling
 
-#### Logic File (src/logic/products/list.js)
+### File Structure (Core Philosophy)
+- **View**: `src/views/products.html` - Pure HTML template
+- **Logic**: `src/logic/products.js` - Pure Vue component logic  
+- **Style**: `src/styles/products.css` - Pure CSS styles
+
+### Example: Philosophy in Practice
 ```javascript
+// src/logic/products.js - Pure business logic
 export default {
     name: 'ProductsList',
-    dataURL: '/api/products',  // ✨ Auto-fetch magic!
+    dataURL: '/api/products',  // Auto-fetch data
     data() {
-        return {
-            title: 'Our Products'
-            // products: [] - No need! Auto-populated from dataURL
-        };
-    },
-    mounted() {
-        // Products already loaded from dataURL!
-        console.log('Products loaded:', this.products);
-        console.log('Loading state:', this.$dataLoading);
+        return { title: 'Our Products' };
     },
     methods: {
-        formatPrice(price) {
-            return new Intl.NumberFormat('ko-KR', {
-                style: 'currency',
-                currency: 'KRW'
-            }).format(price);
-        },
         viewDetail(id) {
-            this.navigateTo('products/detail', { id });
-        },
-        async refreshProducts() {
-            // Manual refresh if needed
-            await this.$fetchData();
+            this.navigateTo('product-detail', { id });
         }
     }
 };
 ```
 
-#### Style File (src/styles/products/list.css)
-```css
-.products-page {
-    padding: 20px;
-}
-
-.product-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 20px;
-}
-
-.product-card {
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    padding: 15px;
-    transition: transform 0.2s;
-}
-
-.product-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-}
+### Production: Automatic Optimization
+All separate files automatically combine into optimized bundles in `routes/` folder - maintaining the development philosophy while optimizing for production.
 
-.price {
-    font-weight: bold;
-    color: #2196F3;
-}
-```
+## 🔄 Zero Build Development vs Optimized Production
 
-### Production Mode (Built Bundle)
+ViewLogic Router's **Zero Build Development** (core philosophy) vs optimized production:
 
-After build, these files are automatically combined into a single optimized bundle:
+| Mode | Philosophy | Files | Requests | Experience |
+|------|------------|-------|----------|------------|
+| **Development** | **Zero Build Required** | Separate files | 4 per route | **Real-time, instant changes** |
+| **Production** | **Optimized Performance** | Single bundle | 1 per route | **Lightning-fast loading** |
 
 ```javascript
-// routes/products/list.js (Auto-generated)
-export default {
-    name: 'ProductsList',
-    template: `<div class="products-page">...`, // View injected
-    _style: `.products-page { ... }`,            // Style injected
-    // ... logic code
-}
-```
-
-## 🔄 Development vs Production Mode
-
-### Development Mode Benefits
-- **No Build Required**: Edit files and refresh browser to see changes
-- **Clear Separation**: View, Logic, and Style in separate files for better organization
-- **Easy Debugging**: Source maps and unminified code
-- **Real-time Updates**: Changes reflect immediately without compilation
-- **⚠️ Performance Trade-off**: Multiple file requests per route (view.html + logic.js + style.css + layout.html)
+// Zero Build Development (Core Philosophy)
+ViewLogicRouter({ environment: 'development' }); // Work directly with source files
 
-### Production Mode Benefits
-- **Optimized Bundles**: Each route is a single, minified JavaScript file
-- **⚡ Superior Performance**: Single file request per route (all assets pre-bundled)
-- **Faster Loading**: Pre-built bundles eliminate compilation overhead
-- **Reduced Requests**: Combined view + logic + style in one file
-- **CDN Ready**: Individual route files can be cached and served from CDN
-- **Minimal Bundle Size**: Each route file contains only what's needed for that specific route
-
-### Automatic Environment Detection
-
-```javascript
-// Development Mode (loads from src/)
-ViewLogicRouter({ 
-    environment: 'development',
-});
-
-// Production Mode (loads from dist/routes/)
-ViewLogicRouter({ 
-    environment: 'production',
-});
+// Optimized Production  
+ViewLogicRouter({ environment: 'production' }); // Use pre-built bundles
 ```
 
+### Zero Build Development Benefits
+- ⚡ **Instant Changes** - Edit HTML/JS/CSS and see changes immediately
+- 🚀 **Zero Setup** - No webpack, vite, or build tools required
+- 🎯 **True Hot Reload** - Files load directly from src/ folder
+- 🛠️ **Pure Development** - Focus on code, not build configuration
+
 ## 🪶 Ultra-Lightweight Bundle
 
 ViewLogic Router provides a complete routing solution in an incredibly small package:
@@ -771,117 +650,22 @@ export default {
 
 ### Why These Components Are Revolutionary
 
-#### Traditional Approach Problems
-```javascript
-// Traditional Vue way - complex and verbose for API calls
-export default {
-    data() {
-        return {
-            products: [],
-            loading: false,
-            error: null
-        };
-    },
-    async mounted() {
-        await this.loadProducts();
-    },
-    methods: {
-        async loadProducts() {
-            this.loading = true;
-            this.error = null;
-            try {
-                const response = await fetch('/api/products');
-                if (!response.ok) throw new Error('Failed to fetch');
-                const data = await response.json();
-                this.products = data.products || data;
-                // Manual error handling, loading states, etc.
-            } catch (error) {
-                this.error = error.message;
-                console.error('Failed to load products:', error);
-            } finally {
-                this.loading = false;
-            }
-        }
-    }
-}
+**Traditional Approach**: 30+ lines of loading states, error handling, and manual API calls.
 
-// For dynamic content loading - even more complex
-async loadDynamicContent() {
-    this.loading = true;
-    try {
-        const response = await fetch(`/api/content/${this.contentId}`);
-        const data = await response.json();
-        this.content = data.html;
-        this.$nextTick(() => {
-            // Manual DOM manipulation needed
-            this.bindEvents();
-        });
-    } catch (error) {
-        this.error = error;
-    } finally {
-        this.loading = false;
-    }
-}
-```
+**ViewLogic Approach**: `dataURL: '/api/products'` - That's it! Data automatically fetched and available as `this.products`.
 
-#### ViewLogic Router Way - Revolutionary Simplicity
-```javascript
-// Automatic API fetching - just define dataURL!
-export default {
-    dataURL: '/api/products',  // ✨ That's it! 
-    data() {
-        return {
-            title: 'Our Products'
-            // No need for products:[], loading:false, error:null
-        };
-    },
-    mounted() {
-        // Data already fetched and available
-        console.log('Products:', this.products);
-        console.log('Loading:', this.$dataLoading);
-    }
-}
-```
+### Common Use Cases
+- **Single API**: `dataURL: '/api/products'` - Product listings, user profiles, articles
+- **Multiple APIs**: `dataURL: { stats: '/api/stats', users: '/api/users' }` - Dashboards, admin panels
+- **Dynamic Content**: `<DynamicInclude page="login" :params="{ theme: 'compact' }" />`
+- **HTML Includes**: `<HtmlInclude src="/widgets/weather.html" :sanitize="true" />`
 
-### Use Cases
-
-#### Automatic Data Fetching (dataURL)
-
-**Single API Usage:**
-- **🛒 Product Listings** - `dataURL: '/api/products'` automatically loads and populates product data
-- **👤 User Profiles** - `dataURL: '/api/user'` fetches user information with authentication
-- **📊 Dashboard Data** - `dataURL: '/api/dashboard/stats'` loads analytics data
-- **📰 Article Content** - `dataURL: '/api/articles'` populates blog posts or news
-- **🔍 Search Results** - Query parameters automatically sent to search API
-
-**🆕 Multiple API Usage (Revolutionary!):**
-- **📊 Dashboard Pages** - `dataURL: { stats: '/api/stats', users: '/api/users', orders: '/api/orders' }`
-- **🛒 E-commerce Pages** - `dataURL: { products: '/api/products', cart: '/api/cart', wishlist: '/api/wishlist' }`
-- **👥 Social Media** - `dataURL: { posts: '/api/posts', friends: '/api/friends', notifications: '/api/notifications' }`
-- **📱 Admin Panels** - `dataURL: { analytics: '/api/analytics', logs: '/api/logs', settings: '/api/settings' }`
-- **🎯 Landing Pages** - `dataURL: { hero: '/api/hero-content', testimonials: '/api/testimonials', features: '/api/features' }`
-
-#### Dynamic Components
-- **📰 Dynamic Content Management** - Load blog posts, news articles dynamically
-- **🛒 Product Details** - Fetch product information on-demand
-- **📊 Dashboard Widgets** - Load dashboard components from APIs
-- **📝 Form Builders** - Dynamic form generation from configuration
-- **🎨 Template Systems** - CMS-driven content rendering
-- **📱 Micro-frontends** - Load remote components seamlessly
-
-### Advantages Over Other Solutions
-| Feature | ViewLogic Router | React Suspense | Vue Async Components |
-|---------|------------------|----------------|----------------------|
-| **Auto Data Fetching** | ✅ `dataURL` property | ❌ Manual fetch logic | ❌ Manual fetch logic |
-| **Query Parameter Integration** | ✅ Automatic API params | ❌ Manual URL building | ❌ Manual URL building |
-| **Dynamic URLs** | ✅ Built-in | ❌ Manual implementation | ❌ Manual implementation |
-| **Parameter Injection** | ✅ Automatic | ❌ Manual | ❌ Manual |
-| **Loading State Management** | ✅ `$dataLoading` auto-managed | ✅ Suspense | ❌ Manual state |
-| **Error Boundaries** | ✅ Built-in slots + events | ✅ ErrorBoundary | ❌ Manual |
-| **HTML Sanitization** | ✅ Built-in | ❌ External library | ❌ External library |
-| **Cache Integration** | ✅ Automatic | ❌ Manual | ❌ Manual |
-
-These components eliminate the need for complex state management and manual DOM manipulation, making dynamic content loading as simple as using a regular component.
+### Advantages
+- ✅ **Auto Data Fetching** with `dataURL` property (others: manual logic)
+- ✅ **Parameter Integration** - Query params sent automatically
+- ✅ **Loading States** - `$dataLoading` auto-managed
+- ✅ **Built-in Security** - HTML sanitization included
+- ✅ **Zero Setup** - Works immediately without configuration
 
 ## 📝 Automatic Form Handling with Variable Parameters
 
@@ -1000,194 +784,105 @@ export default {
 };
 ```
 
-### Event Handlers and Callbacks
-
-Define success and error handlers using data attributes:
-
+### Event Handlers
 ```html
-<form action="/api/newsletter/subscribe" method="POST"
-      data-success="subscriptionSuccess"
-      data-error="subscriptionError"
-      data-redirect="/thank-you">
+<form action="/api/subscribe" method="POST"
+      data-success="subscriptionSuccess" data-error="subscriptionError">
     <input type="email" name="email" required>
     <button type="submit">Subscribe</button>
 </form>
 ```
-
 ```javascript
-// src/logic/newsletter.js
 export default {
-    name: 'NewsletterPage',
     methods: {
-        subscriptionSuccess(response, formData) {
-            console.log('Subscription successful!', response);
-            this.$toast('Thank you for subscribing!', 'success');
-            // Form will automatically redirect to /thank-you
-        },
-        subscriptionError(error, formData) {
-            console.error('Subscription failed:', error);
-            this.$toast('Subscription failed. Please try again.', 'error');
-        }
+        subscriptionSuccess(response) { this.$toast('Success!', 'success'); },
+        subscriptionError(error) { this.$toast('Failed!', 'error'); }
     }
 };
 ```
 
-### Complete Form Options
-
+### Form Options
 ```html
-<!-- All available data attributes -->
-<form action="/api/complex/{{getParam('id')}}" method="POST"
-      data-success="handleSuccess"           <!-- Success callback method -->
-      data-error="handleError"               <!-- Error callback method -->
-      data-redirect="/success"               <!-- Auto-redirect on success -->
-      data-confirm="Are you sure?"           <!-- Confirmation dialog -->
-      data-loading="Processing..."           <!-- Loading message -->
-      enctype="multipart/form-data">         <!-- File upload support -->
-    
-    <input type="text" name="title" required>
-    <input type="file" name="attachment" accept=".pdf,.doc">
+<form action="/api/resource/{id}" method="POST"
+      data-success="handleSuccess"    data-error="handleError"
+      data-redirect="/success"        data-confirm="Sure?"
+      enctype="multipart/form-data">
+    <input name="title" required>
+    <input type="file" name="file" accept=".pdf">
     <button type="submit">Submit</button>
 </form>
 ```
 
 ### Authentication Integration
-
-Forms automatically include authentication tokens when available:
-
 ```html
-<!-- Authentication token automatically added for authenticated users -->
+<!-- Auth tokens automatically included for authenticated users -->
 <form action="/api/protected/resource" method="POST">
-    <input type="text" name="data" required>
-    <button type="submit">Save Protected Data</button>
+    <input name="data" required>
+    <button type="submit">Save</button>
 </form>
-```
-
-```javascript
-// Authentication token automatically included in headers:
-// Authorization: Bearer <user-token>
-// No additional code needed!
+<!-- Authorization: Bearer <token> header added automatically -->
 ```
 
 ### Form Validation
-
-Built-in client-side validation with custom validation support:
-
 ```html
-<!-- HTML5 validation attributes work automatically -->
-<form action="/api/user/register" method="POST" data-success="registrationSuccess">
-    <input type="email" name="email" required 
-           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
-    <input type="password" name="password" required minlength="8">
-    <input type="password" name="confirmPassword" required>
+<!-- HTML5 + custom validation -->
+<form action="/api/register" method="POST">
+    <input type="email" name="email" required pattern="...">
+    <input type="password" name="password" minlength="8" required>
     <button type="submit">Register</button>
 </form>
 ```
 
-### Real-World Examples
-
-#### User Profile Update
+### Real-World Form Examples
 ```html
-<!-- User profile with dynamic user ID -->
-<form action="/api/users/{userId}" method="PUT" 
-      data-success="profileUpdated"
-      data-redirect="/profile?updated=true">
-    <input type="text" name="firstName" :value="user.firstName">
-    <input type="text" name="lastName" :value="user.lastName">
-    <input type="email" name="email" :value="user.email">
-    <button type="submit">Update Profile</button>
+<!-- User profile with dynamic parameters -->
+<form action="/api/users/{userId}" method="PUT" data-success="profileUpdated">
+    <input name="firstName" required>
+    <button type="submit">Update</button>
 </form>
-```
 
-#### E-commerce Order Management
-```html
-<!-- Order status update with order ID from route -->
-<form action="/api/orders/{orderId}/status" method="PUT"
-      data-success="orderStatusUpdated">
+<!-- Order management -->
+<form action="/api/orders/{orderId}/status" method="PUT">
     <select name="status" required>
         <option value="pending">Pending</option>
         <option value="shipped">Shipped</option>
-        <option value="delivered">Delivered</option>
     </select>
-    <textarea name="notes" placeholder="Optional notes"></textarea>
-    <button type="submit">Update Status</button>
+    <button type="submit">Update</button>
 </form>
 ```
 
-#### Blog Post Creation
-```html
-<!-- Create post for specific category -->
-<form action="/api/categories/{categoryId}/posts" method="POST"
-      data-success="postCreated"
-      data-redirect="/posts">
-    <input type="text" name="title" required>
-    <textarea name="content" required></textarea>
-    <input type="file" name="featured_image" accept="image/*">
-    <button type="submit">Create Post</button>
-</form>
-```
+### Form Handling Advantages
+- ✅ **Zero Setup** - Just add `action` attribute vs manual event handlers
+- ✅ **Variable Parameters** - `{userId}` template syntax vs manual interpolation  
+- ✅ **Auto Authentication** - Tokens injected automatically
+- ✅ **File Uploads** - Automatic multipart support
+- ✅ **Built-in Validation** - HTML5 + custom functions
 
-### Advantages Over Traditional Form Handling
+### Code Comparison
+**Traditional**: 30+ lines of boilerplate for forms, API calls, loading states  
+**ViewLogic**: 5 lines with `action` attribute + callback method  
+**Result**: 80% less code, more features included
 
-| Feature | Traditional Vue/React | ViewLogic Router |
-|---------|----------------------|------------------|
-| **Setup Required** | Manual event handlers + API calls | ✅ Zero setup - just add `action` |
-| **Variable Parameters** | Manual string interpolation | ✅ Template syntax with function evaluation |
-| **Authentication** | Manual token handling | ✅ Automatic token injection |
-| **File Uploads** | Complex FormData handling | ✅ Automatic multipart support |
-| **Loading States** | Manual loading management | ✅ Automatic loading indicators |
-| **Error Handling** | Custom error logic | ✅ Built-in error callbacks |
-| **Validation** | External validation libraries | ✅ HTML5 + custom validation |
-| **Redirect Logic** | Manual navigation code | ✅ `data-redirect` attribute |
+## 🔗 Query-Based Parameter System: Revolutionary Simplicity
 
-### Code Comparison: Traditional vs ViewLogic
+ViewLogic Router's **Query-Based Parameter System** is a key feature that eliminates routing complexity:
 
-**Traditional Approach** (30+ lines):
-```javascript
-// Lots of boilerplate for simple form
-export default {
-    data() { return { form: {}, loading: false, error: null }; },
-    methods: {
-        async submitForm() {
-            // 20+ lines of fetch, error handling, tokens, etc.
-        }
-    }
-};
-```
-
-**ViewLogic Approach** (5 lines):
-```html
-<form action="/api/contact" data-success="handleSuccess">
-    <input name="name" required>
-    <button type="submit">Send</button>
-</form>
-```
-```javascript
-export default {
-    methods: {
-        handleSuccess(response) { /* success handling */ }
-    }
-};
-```
+**Philosophy**: **Everything is query-based** - no complex path parameters like `/users/:id`. Just simple, clean URLs: `/users?id=123`.
 
-**Result**: 80% less code with more features (auto-auth, validation, error handling).
+### Revolutionary Benefits
+1. **📍 Simple URLs**: `/product?id=123&category=electronics` (clear and readable)
+2. **🎯 Consistent Access**: Always use `this.getParam('id')` - never mix path/query paradigms
+3. **⚡ No Route Configuration**: No complex route definitions or parameter mappings needed
+4. **🔍 SEO Friendly**: Descriptive parameter names make URLs self-documenting
+5. **🌐 Universal Compatibility**: Query parameters work everywhere - no framework lock-in
 
-## 🔗 Query-Only Parameter System
-
-ViewLogic Router uses **only query parameters** - no complex path parameters like `/users/:id`. Everything is simple query-based: `/users?id=123`.
-
-### Key Benefits
-1. **Simple URLs**: `/product?id=123&category=electronics` (clear and readable)
-2. **Consistent Access**: Always use `this.getParam('id')` - never mix path/query
-3. **No Route Config**: No complex route definitions needed
-4. **SEO Friendly**: Descriptive parameter names in URLs
-
-### Usage Example
+### Simple Usage Example
 ```javascript
-// Navigate
+// Navigate - simple and intuitive
 this.navigateTo('products', { id: 123, category: 'electronics' });
 // → /products?id=123&category=electronics
 
-// Access in component
+// Access parameters - always the same way
 export default {
     mounted() {
         const id = this.getParam('id');           // Get parameter
@@ -1197,6 +892,11 @@ export default {
 };
 ```
 
+### Why Query-Based is Revolutionary
+**Traditional Routers**: Complex path parameters (`/users/:id/posts/:postId`) require route configuration, parameter extraction logic, and mixed paradigms.
+
+**ViewLogic Router**: Simple query parameters (`/users?id=123&postId=456`) work universally with consistent `getParam()` access.
+
 
 ## 🛡️ Error Handling