@wyxos/vibe 1.6.11 → 1.6.13

package/src/views/Examples.vue

@@ -1,20 +1,247 @@
-<template>
-  <div class="min-h-screen bg-slate-50 p-8 pt-20">
-    <div class="max-w-4xl mx-auto">
-      <h1 class="text-4xl font-bold text-slate-800 mb-6">Examples</h1>
-      <p class="text-slate-600 mb-8">This is a placeholder for examples page.</p>
-      
-      <div class="bg-white rounded-xl shadow-sm p-6">
-        <h2 class="text-2xl font-semibold text-slate-800 mb-4">Coming Soon</h2>
-        <p class="text-slate-600">
-          Examples and code snippets will be added here soon.
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-// Examples page placeholder
-</script>
-
+<template>
+  <div class="min-h-screen bg-slate-50 pt-20">
+    <div class="max-w-7xl mx-auto px-4 py-8">
+      <div class="flex gap-8">
+        <!-- Side Menu -->
+        <aside class="hidden lg:block w-64 flex-shrink-0 sticky top-24 h-fit">
+          <nav class="bg-white rounded-lg shadow-sm p-4 border border-slate-200">
+            <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">Examples</h3>
+            <ul class="space-y-2">
+              <li v-for="example in examples" :key="example.id">
+                <a
+                  :href="`#${example.id}`"
+                  @click.prevent="scrollTo(example.id)"
+                  class="block px-3 py-2 text-sm rounded-md transition-colors"
+                  :class="activeSection === example.id 
+                    ? 'bg-blue-50 text-blue-600 font-medium' 
+                    : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'"
+                >
+                  {{ example.title }}
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="flex-1 min-w-0">
+          <div class="space-y-16">
+            <!-- Basic Example -->
+            <section id="basic" ref="basicRef" class="scroll-mt-24">
+              <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+                <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
+                  <h2 class="text-2xl font-bold text-slate-800">Basic Usage</h2>
+                  <p class="text-slate-600 mt-1">Simple masonry grid with default MasonryItem component</p>
+                </div>
+                
+                <!-- Live Example -->
+                <div class="p-6 bg-slate-50">
+                  <div class="bg-white rounded-lg border border-slate-200 p-4" style="height: 500px;">
+                    <BasicExample />
+                  </div>
+                </div>
+
+                <!-- Code Tabs -->
+                <div class="px-6 pb-6">
+                  <CodeTabs
+                    vue='<script setup>
+import { ref } from "vue";
+import { Masonry } from "@wyxos/vibe";
+
+const items = ref([]);
+
+async function getNextPage(page) {
+  const response = await fetch(`/api/items?page=${page}`);
+  const data = await response.json();
+  return {
+    items: data.items,
+    nextPage: page + 1
+  };
+}
+</script>
+
+<template>
+  <Masonry
+    v-model:items="items"
+    :get-next-page="getNextPage"
+    :load-at-page="1"
+  />
+</template>'
+                  />
+                </div>
+              </div>
+            </section>
+
+            <!-- Custom Masonry Item Example -->
+            <section id="custom-item" ref="customItemRef" class="scroll-mt-24">
+              <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+                <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
+                  <h2 class="text-2xl font-bold text-slate-800">Custom Masonry Item</h2>
+                  <p class="text-slate-600 mt-1">Customize item rendering with scoped slots</p>
+                </div>
+                
+                <!-- Live Example -->
+                <div class="p-6 bg-slate-50">
+                  <div class="bg-white rounded-lg border border-slate-200 p-4" style="height: 500px;">
+                    <CustomItemExample />
+                  </div>
+                </div>
+
+                <!-- Code Tabs -->
+                <div class="px-6 pb-6">
+                  <CodeTabs
+                    vue='<script setup>
+import { ref } from "vue";
+import { Masonry } from "@wyxos/vibe";
+
+const items = ref([]);
+
+async function getNextPage(page) {
+  const response = await fetch(`/api/items?page=${page}`);
+  const data = await response.json();
+  return {
+    items: data.items,
+    nextPage: page + 1
+  };
+}
+</script>
+
+<template>
+  <Masonry
+    v-model:items="items"
+    :get-next-page="getNextPage"
+    :load-at-page="1"
+  >
+    <template #item="{ item, remove }">
+      <div class="custom-card">
+        <img :src="item.src" :alt="item.title" />
+        <div class="overlay">
+          <h3>{{ item.title }}</h3>
+          <button @click="remove">Remove</button>
+        </div>
+      </div>
+    </template>
+  </Masonry>
+</template>'
+                  />
+                </div>
+              </div>
+            </section>
+
+            <!-- Swipe Mode Example -->
+            <section id="swipe-mode" ref="swipeModeRef" class="scroll-mt-24">
+              <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+                <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
+                  <h2 class="text-2xl font-bold text-slate-800">Swipe Mode</h2>
+                  <p class="text-slate-600 mt-1">Vertical swipe feed for mobile devices</p>
+                </div>
+                
+                <!-- Live Example -->
+                <div class="p-6 bg-slate-50">
+                  <div class="bg-white rounded-lg border border-slate-200 p-4" style="height: 500px;">
+                    <SwipeModeExample />
+                  </div>
+                </div>
+
+                <!-- Code Tabs -->
+                <div class="px-6 pb-6">
+                  <CodeTabs
+                    vue='<script setup>
+import { ref } from "vue";
+import { Masonry } from "@wyxos/vibe";
+
+const items = ref([]);
+
+async function getNextPage(page) {
+  const response = await fetch(`/api/items?page=${page}`);
+  const data = await response.json();
+  return {
+    items: data.items,
+    nextPage: page + 1
+  };
+}
+</script>
+
+<template>
+  <!-- Auto mode: switches to swipe on mobile -->
+  <Masonry
+    v-model:items="items"
+    :get-next-page="getNextPage"
+    layout-mode="auto"
+    :mobile-breakpoint="768"
+  />
+
+  <!-- Force swipe mode on all devices -->
+  <Masonry
+    v-model:items="items"
+    :get-next-page="getNextPage"
+    layout-mode="swipe"
+  />
+</template>'
+                  />
+                </div>
+              </div>
+            </section>
+          </div>
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import CodeTabs from '../components/CodeTabs.vue'
+import BasicExample from '../components/examples/BasicExample.vue'
+import CustomItemExample from '../components/examples/CustomItemExample.vue'
+import SwipeModeExample from '../components/examples/SwipeModeExample.vue'
+
+const examples = [
+  { id: 'basic', title: 'Basic Usage' },
+  { id: 'custom-item', title: 'Custom Masonry Item' },
+  { id: 'swipe-mode', title: 'Swipe Mode' }
+]
+
+const activeSection = ref('basic')
+const basicRef = ref<HTMLElement | null>(null)
+const customItemRef = ref<HTMLElement | null>(null)
+const swipeModeRef = ref<HTMLElement | null>(null)
+
+function scrollTo(id: string) {
+  const element = document.getElementById(id)
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    activeSection.value = id
+  }
+}
+
+function updateActiveSection() {
+  const sections = [
+    { id: 'basic', ref: basicRef },
+    { id: 'custom-item', ref: customItemRef },
+    { id: 'swipe-mode', ref: swipeModeRef }
+  ]
+
+  const scrollPosition = window.scrollY + 100
+
+  for (let i = sections.length - 1; i >= 0; i--) {
+    const section = sections[i]
+    if (section.ref.value) {
+      const top = section.ref.value.offsetTop
+      if (scrollPosition >= top) {
+        activeSection.value = section.id
+        break
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', updateActiveSection)
+  updateActiveSection()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', updateActiveSection)
+})
+</script>

package/src/views/Home.vue

@@ -97,16 +97,39 @@
                 </div>
               </div>
             </div>
+
+            <!-- Device Simulation -->
+            <div class="md:col-span-2 border-t border-slate-100 pt-6 mt-2">
+              <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Device Simulation</h3>
+              <div class="flex flex-wrap gap-2">
+                <button 
+                  v-for="mode in ['auto', 'phone', 'tablet', 'desktop']" 
+                  :key="mode"
+                  @click="deviceMode = mode as any"
+                  class="px-4 py-2 rounded-lg text-sm font-medium transition-all capitalize"
+                  :class="deviceMode === mode ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
+                >
+                  <i class="fas mr-2" :class="{
+                    'fa-desktop': mode === 'desktop' || mode === 'auto',
+                    'fa-mobile-alt': mode === 'phone',
+                    'fa-tablet-alt': mode === 'tablet'
+                  }"></i>
+                  {{ mode }}
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </transition>
     </header>
 
     <!-- Main Content -->
-    <div class="flex flex-1 overflow-hidden relative p-5">
-      <masonry v-model:items="items" :get-next-page="getPage" :load-at-page="1" :layout="layout" ref="masonry">
-        <!-- MasonryItem is used automatically, but you can customize it -->
-      </masonry>
+    <div class="flex flex-1 overflow-hidden relative p-5 transition-all duration-300 ease-in-out" :class="{'bg-slate-200/50': deviceMode !== 'auto'}">
+      <div :style="containerStyle" class="transition-all duration-500 ease-in-out bg-slate-50 shadow-sm relative">
+        <masonry v-model:items="items" :get-next-page="getPage" :load-at-page="1" :layout="layout" ref="masonry">
+          <!-- MasonryItem is used automatically, but you can customize it -->
+        </masonry>
+      </div>
     </div>
   </main>
 </template>
@@ -166,4 +189,20 @@ const getPage = async (page: number): Promise<GetPageResult> => {
     }, 1000);
   });
 };
+
+// Device Simulation
+const deviceMode = ref<'auto' | 'phone' | 'tablet' | 'desktop'>('auto');
+
+const containerStyle = computed(() => {
+  switch (deviceMode.value) {
+    case 'phone':
+      return { width: '375px', maxWidth: '100%', margin: '0 auto', border: '1px solid #e2e8f0', borderRadius: '20px', overflow: 'hidden', height: '100%' };
+    case 'tablet':
+      return { width: '768px', maxWidth: '100%', margin: '0 auto', border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden', height: '100%' };
+    case 'desktop':
+      return { width: '1280px', maxWidth: '100%', margin: '0 auto', border: '1px solid #e2e8f0', borderRadius: '8px', overflow: 'hidden', height: '100%' };
+    default:
+      return { width: '100%', height: '100%' };
+  }
+});
 </script>

package/toggle-link.mjs

@@ -1,92 +1,92 @@
-#!/usr/bin/env node
-
-import { readFileSync, writeFileSync } from 'fs';
-import { resolve, dirname, relative } from 'path';
-import { fileURLToPath } from 'url';
-import { execSync } from 'child_process';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-// Get the vibe package directory
-const vibeDir = resolve(__dirname);
-const vibePackageJson = JSON.parse(readFileSync(resolve(vibeDir, 'package.json'), 'utf-8'));
-const vibeVersion = vibePackageJson.version;
-
-// Get the current working directory (where the script is run from)
-const cwd = process.cwd();
-const targetPackageJsonPath = resolve(cwd, 'package.json');
-
-try {
-    const targetPackageJson = JSON.parse(readFileSync(targetPackageJsonPath, 'utf-8'));
-
-    // Check if @wyxos/vibe exists in dependencies or devDependencies
-    const deps = { ...targetPackageJson.dependencies, ...targetPackageJson.devDependencies };
-    const currentVibeRef = deps['@wyxos/vibe'];
-
-    if (!currentVibeRef) {
-        console.error('❌ @wyxos/vibe not found in package.json dependencies or devDependencies');
-        process.exit(1);
-    }
-
-    // Determine if it's a local path or version reference
-    const isLocalPath = currentVibeRef.startsWith('file:') || currentVibeRef.startsWith('../') || currentVibeRef.startsWith('./');
-
-    let newRef;
-    let action;
-
-    if (isLocalPath) {
-        // Switch to published version
-        newRef = `^${vibeVersion}`;
-        action = 'published version';
-    } else {
-        // Switch to local path
-        // Calculate relative path from target to vibe
-        const relativePath = relative(cwd, vibeDir).replace(/\\/g, '/');
-        newRef = `file:${relativePath}`;
-        action = 'local path';
-    }
-
-    // Update package.json
-    if (targetPackageJson.dependencies && targetPackageJson.dependencies['@wyxos/vibe']) {
-        targetPackageJson.dependencies['@wyxos/vibe'] = newRef;
-    }
-    if (targetPackageJson.devDependencies && targetPackageJson.devDependencies['@wyxos/vibe']) {
-        targetPackageJson.devDependencies['@wyxos/vibe'] = newRef;
-    }
-
-    // Write updated package.json
-    writeFileSync(
-        targetPackageJsonPath,
-        JSON.stringify(targetPackageJson, null, 2) + '\n',
-        'utf-8'
-    );
-
-    console.log(`✅ Switched @wyxos/vibe to ${action}: ${newRef}`);
-
-    // If switching to local path, ensure the library is built before installation
-    if (action === 'local path') {
-        try {
-            console.log('🔧 Building local @wyxos/vibe (build:lib)...');
-            execSync('npm run build:lib', { cwd: vibeDir, stdio: 'inherit' });
-        } catch (e) {
-            console.warn('⚠️ Failed to build local @wyxos/vibe. Attempting install anyway.');
-        }
-    }
-
-    // Run npm install
-    console.log('📦 Running npm install...');
-    execSync('npm install', { cwd, stdio: 'inherit' });
-
-    console.log('✨ Done!');
-
-} catch (error) {
-    if (error.code === 'ENOENT') {
-        console.error(`❌ package.json not found in ${cwd}`);
-        console.error('   Make sure you run this script from a project directory that uses @wyxos/vibe');
-    } else {
-        console.error('❌ Error:', error.message);
-    }
-    process.exit(1);
-}
-
+#!/usr/bin/env node
+
+import { readFileSync, writeFileSync } from 'fs';
+import { resolve, dirname, relative } from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Get the vibe package directory
+const vibeDir = resolve(__dirname);
+const vibePackageJson = JSON.parse(readFileSync(resolve(vibeDir, 'package.json'), 'utf-8'));
+const vibeVersion = vibePackageJson.version;
+
+// Get the current working directory (where the script is run from)
+const cwd = process.cwd();
+const targetPackageJsonPath = resolve(cwd, 'package.json');
+
+try {
+    const targetPackageJson = JSON.parse(readFileSync(targetPackageJsonPath, 'utf-8'));
+
+    // Check if @wyxos/vibe exists in dependencies or devDependencies
+    const deps = { ...targetPackageJson.dependencies, ...targetPackageJson.devDependencies };
+    const currentVibeRef = deps['@wyxos/vibe'];
+
+    if (!currentVibeRef) {
+        console.error('❌ @wyxos/vibe not found in package.json dependencies or devDependencies');
+        process.exit(1);
+    }
+
+    // Determine if it's a local path or version reference
+    const isLocalPath = currentVibeRef.startsWith('file:') || currentVibeRef.startsWith('../') || currentVibeRef.startsWith('./');
+
+    let newRef;
+    let action;
+
+    if (isLocalPath) {
+        // Switch to published version
+        newRef = `^${vibeVersion}`;
+        action = 'published version';
+    } else {
+        // Switch to local path
+        // Calculate relative path from target to vibe
+        const relativePath = relative(cwd, vibeDir).replace(/\\/g, '/');
+        newRef = `file:${relativePath}`;
+        action = 'local path';
+    }
+
+    // Update package.json
+    if (targetPackageJson.dependencies && targetPackageJson.dependencies['@wyxos/vibe']) {
+        targetPackageJson.dependencies['@wyxos/vibe'] = newRef;
+    }
+    if (targetPackageJson.devDependencies && targetPackageJson.devDependencies['@wyxos/vibe']) {
+        targetPackageJson.devDependencies['@wyxos/vibe'] = newRef;
+    }
+
+    // Write updated package.json
+    writeFileSync(
+        targetPackageJsonPath,
+        JSON.stringify(targetPackageJson, null, 2) + '\n',
+        'utf-8'
+    );
+
+    console.log(`✅ Switched @wyxos/vibe to ${action}: ${newRef}`);
+
+    // If switching to local path, ensure the library is built before installation
+    if (action === 'local path') {
+        try {
+            console.log('🔧 Building local @wyxos/vibe (build:lib)...');
+            execSync('npm run build:lib', { cwd: vibeDir, stdio: 'inherit' });
+        } catch (e) {
+            console.warn('⚠️ Failed to build local @wyxos/vibe. Attempting install anyway.');
+        }
+    }
+
+    // Run npm install
+    console.log('📦 Running npm install...');
+    execSync('npm install', { cwd, stdio: 'inherit' });
+
+    console.log('✨ Done!');
+
+} catch (error) {
+    if (error.code === 'ENOENT') {
+        console.error(`❌ package.json not found in ${cwd}`);
+        console.error('   Make sure you run this script from a project directory that uses @wyxos/vibe');
+    } else {
+        console.error('❌ Error:', error.message);
+    }
+    process.exit(1);
+}
+