@wyxos/vibe 1.6.11 → 1.6.13

package/src/components/CodeTabs.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="bg-slate-900 rounded-lg overflow-hidden shadow-xl">
+    <!-- Tabs -->
+    <div class="flex items-center gap-1 bg-slate-800/50 px-4 py-2 border-b border-slate-700">
+      <button
+        v-for="tab in tabs"
+        :key="tab"
+        @click="activeTab = tab"
+        class="px-4 py-2 text-sm font-medium rounded-md transition-colors"
+        :class="activeTab === tab 
+          ? 'bg-slate-700 text-white' 
+          : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800'"
+      >
+        {{ tab.toUpperCase() }}
+      </button>
+      <div class="flex-1"></div>
+      <button
+        @click="copyCode"
+        class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-700 rounded-md transition-colors flex items-center gap-2"
+        :title="copied ? 'Copied!' : 'Copy code'"
+      >
+        <i :class="copied ? 'fas fa-check' : 'fas fa-copy'"></i>
+        <span>{{ copied ? 'Copied' : 'Copy' }}</span>
+      </button>
+    </div>
+
+    <!-- Code Content -->
+    <div class="relative">
+      <pre class="p-4 overflow-x-auto text-sm"><code :class="`language-${activeTab} hljs`" v-html="highlightedCode"></code></pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import hljs from 'highlight.js/lib/core'
+import javascript from 'highlight.js/lib/languages/javascript'
+import xml from 'highlight.js/lib/languages/xml'
+import css from 'highlight.js/lib/languages/css'
+import 'highlight.js/styles/tokyo-night-dark.css'
+
+// Register languages
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('js', javascript)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('html', xml)
+hljs.registerLanguage('vue', xml) // Vue uses XML/HTML highlighting
+hljs.registerLanguage('css', css)
+
+const props = defineProps<{
+  html?: string
+  js?: string
+  vue?: string
+  css?: string
+}>()
+
+const activeTab = ref<'html' | 'js' | 'vue' | 'css'>('vue')
+const copied = ref(false)
+
+const tabs = computed(() => {
+  const available: ('html' | 'js' | 'vue' | 'css')[] = []
+  if (props.html) available.push('html')
+  if (props.js) available.push('js')
+  if (props.vue) available.push('vue')
+  if (props.css) available.push('css')
+  return available
+})
+
+const currentCode = computed(() => {
+  switch (activeTab.value) {
+    case 'html': return props.html || ''
+    case 'js': return props.js || ''
+    case 'vue': return props.vue || ''
+    case 'css': return props.css || ''
+  }
+})
+
+const highlightedCode = computed(() => {
+  if (!currentCode.value) return ''
+  
+  try {
+    // Map tab names to highlight.js language names
+    const langMap: Record<string, string> = {
+      'vue': 'xml',
+      'html': 'xml',
+      'js': 'javascript',
+      'css': 'css'
+    }
+    
+    const lang = langMap[activeTab.value] || activeTab.value
+    const result = hljs.highlight(currentCode.value, { language: lang })
+    return result.value
+  } catch (error) {
+    console.error('Highlighting error:', error)
+    return escapeHtml(currentCode.value)
+  }
+})
+
+function escapeHtml(text: string): string {
+  const div = document.createElement('div')
+  div.textContent = text
+  return div.innerHTML
+}
+
+async function copyCode() {
+  try {
+    await navigator.clipboard.writeText(currentCode.value)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+
+// Set initial tab to first available
+watch(() => tabs.value, (newTabs) => {
+  if (newTabs.length > 0 && !newTabs.includes(activeTab.value)) {
+    activeTab.value = newTabs[0]
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+code {
+  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+  line-height: 1.6;
+}
+
+pre {
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+pre code {
+  display: block;
+}
+
+pre::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+pre::-webkit-scrollbar-track {
+  background: #1e293b;
+}
+
+pre::-webkit-scrollbar-thumb {
+  background: #475569;
+  border-radius: 4px;
+}
+
+pre::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+}
+</style>

package/src/components/examples/BasicExample.vue

@@ -0,0 +1,45 @@
+<template>
+  <Masonry
+    v-model:items="items"
+    :get-next-page="getPage"
+    :load-at-page="1"
+    :layout="layout"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Masonry from '../../Masonry.vue'
+import fixture from '../../pages.json'
+import type { MasonryItem, GetPageResult } from '../../types'
+
+const items = ref<MasonryItem[]>([])
+
+const layout = {
+  sizes: { base: 1, sm: 2, md: 3, lg: 4 },
+  gutterX: 10,
+  gutterY: 10
+}
+
+const getPage = async (page: number): Promise<GetPageResult> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const pageData = (fixture as any[])[page - 1] as { items: MasonryItem[] } | undefined
+      
+      if (!pageData) {
+        resolve({
+          items: [],
+          nextPage: null
+        })
+        return
+      }
+      
+      resolve({
+        items: pageData.items,
+        nextPage: page < (fixture as any[]).length ? page + 1 : null
+      })
+    }, 300)
+  })
+}
+</script>
+

package/src/components/examples/CustomItemExample.vue

@@ -0,0 +1,86 @@
+<template>
+  <Masonry
+    v-model:items="items"
+    :get-next-page="getPage"
+    :load-at-page="1"
+    :layout="layout"
+  >
+    <template #item="{ item, remove }">
+      <div class="custom-card">
+        <img v-if="item.src" :src="item.src" :alt="item.title || 'Item'" />
+        <div class="overlay">
+          <h3 class="text-white font-semibold text-sm mb-2">{{ item.title || 'Untitled' }}</h3>
+          <button 
+            @click="remove" 
+            class="px-3 py-1 bg-white/20 hover:bg-white/30 border border-white/30 rounded text-white text-xs transition-colors"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+    </template>
+  </Masonry>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Masonry from '../../Masonry.vue'
+import fixture from '../../pages.json'
+import type { MasonryItem, GetPageResult } from '../../types'
+
+const items = ref<MasonryItem[]>([])
+
+const layout = {
+  sizes: { base: 1, sm: 2, md: 3, lg: 4 },
+  gutterX: 10,
+  gutterY: 10
+}
+
+const getPage = async (page: number): Promise<GetPageResult> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const pageData = (fixture as any[])[page - 1] as { items: MasonryItem[] } | undefined
+      
+      if (!pageData) {
+        resolve({
+          items: [],
+          nextPage: null
+        })
+        return
+      }
+      
+      resolve({
+        items: pageData.items,
+        nextPage: page < (fixture as any[]).length ? page + 1 : null
+      })
+    }, 300)
+  })
+}
+</script>
+
+<style scoped>
+.custom-card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.custom-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.custom-card .overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+  padding: 16px;
+}
+</style>
+

package/src/components/examples/SwipeModeExample.vue

@@ -0,0 +1,39 @@
+<template>
+  <Masonry
+    v-model:items="items"
+    :get-next-page="getPage"
+    :load-at-page="1"
+    layout-mode="swipe"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Masonry from '../../Masonry.vue'
+import fixture from '../../pages.json'
+import type { MasonryItem, GetPageResult } from '../../types'
+
+const items = ref<MasonryItem[]>([])
+
+const getPage = async (page: number): Promise<GetPageResult> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const pageData = (fixture as any[])[page - 1] as { items: MasonryItem[] } | undefined
+      
+      if (!pageData) {
+        resolve({
+          items: [],
+          nextPage: null
+        })
+        return
+      }
+      
+      resolve({
+        items: pageData.items,
+        nextPage: page < (fixture as any[]).length ? page + 1 : null
+      })
+    }, 300)
+  })
+}
+</script>
+

package/src/masonryUtils.ts

@@ -1,10 +1,10 @@
 import type { LayoutOptions, ProcessedMasonryItem } from './types'
 
 /**
- * Get responsive column count based on window width and layout sizes
+ * Get responsive column count based on container width and layout sizes
  */
-export function getColumnCount(layout: Pick<LayoutOptions, 'sizes'> & { sizes: Required<NonNullable<LayoutOptions['sizes']>> }): number {
-  const width = window.innerWidth
+export function getColumnCount(layout: Pick<LayoutOptions, 'sizes'> & { sizes: Required<NonNullable<LayoutOptions['sizes']>> }, containerWidth?: number): number {
+  const width = containerWidth ?? (typeof window !== 'undefined' ? window.innerWidth : 1024)
   const sizes = layout.sizes
 
   if (width >= 1536 && sizes['2xl']) return sizes['2xl']