@wyxos/vibe 1.6.10 → 1.6.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -2
- package/lib/index.js +809 -645
- package/lib/vibe.css +1 -1
- package/package.json +1 -1
- package/src/Masonry.vue +447 -32
- package/src/masonryUtils.ts +3 -3
- package/src/views/Home.vue +50 -11
package/src/views/Home.vue
CHANGED
|
@@ -49,19 +49,19 @@
|
|
|
49
49
|
leave-from-class="transform translate-y-0 opacity-100"
|
|
50
50
|
leave-to-class="transform -translate-y-2 opacity-0"
|
|
51
51
|
>
|
|
52
|
-
<div v-if="showLayoutControls" class="absolute top-full right-4 mt-2 w-full max-w-lg bg-white/90 backdrop-blur-md border border-slate-200 shadow-xl rounded-xl p-6 pointer-events-auto z-30">
|
|
53
|
-
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
52
|
+
<div v-if="showLayoutControls" class="absolute top-full left-4 right-4 md:left-auto md:right-4 mt-2 md:w-full md:max-w-lg bg-white/90 backdrop-blur-md border border-slate-200 shadow-xl rounded-xl p-4 md:p-6 pointer-events-auto z-30">
|
|
53
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
|
|
54
54
|
<!-- Column Settings -->
|
|
55
55
|
<div>
|
|
56
56
|
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Column Configuration</h3>
|
|
57
|
-
<div class="grid grid-cols-3 sm:grid-cols-6 gap-3">
|
|
57
|
+
<div class="grid grid-cols-3 sm:grid-cols-6 gap-2 sm:gap-3">
|
|
58
58
|
<div v-for="(val, key) in layoutParams.sizes" :key="key" class="flex flex-col gap-1.5">
|
|
59
59
|
<label class="text-[10px] font-bold text-slate-500 uppercase text-center">{{ key }}</label>
|
|
60
60
|
<input
|
|
61
61
|
v-model.number="layoutParams.sizes[key]"
|
|
62
62
|
type="number"
|
|
63
63
|
min="1"
|
|
64
|
-
class="w-full
|
|
64
|
+
class="w-full px-1 py-2 bg-slate-50 border border-slate-200 rounded-lg text-center text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
|
|
65
65
|
/>
|
|
66
66
|
</div>
|
|
67
67
|
</div>
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
<!-- Spacing Settings -->
|
|
71
71
|
<div>
|
|
72
72
|
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Spacing</h3>
|
|
73
|
-
<div class="grid grid-cols-2 gap-4">
|
|
73
|
+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
74
74
|
<div class="flex flex-col gap-1.5">
|
|
75
75
|
<label class="text-[10px] font-bold text-slate-500 uppercase">Header Offset</label>
|
|
76
76
|
<div class="relative">
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
v-model.number="layoutParams.header"
|
|
79
79
|
type="number"
|
|
80
80
|
min="0"
|
|
81
|
-
class="w-full pl-3 pr-8 py-
|
|
81
|
+
class="w-full pl-3 pr-8 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
|
|
82
82
|
/>
|
|
83
83
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">px</span>
|
|
84
84
|
</div>
|
|
@@ -90,23 +90,46 @@
|
|
|
90
90
|
v-model.number="layoutParams.footer"
|
|
91
91
|
type="number"
|
|
92
92
|
min="0"
|
|
93
|
-
class="w-full pl-3 pr-8 py-
|
|
93
|
+
class="w-full pl-3 pr-8 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
|
|
94
94
|
/>
|
|
95
95
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">px</span>
|
|
96
96
|
</div>
|
|
97
97
|
</div>
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
|
+
|
|
101
|
+
<!-- Device Simulation -->
|
|
102
|
+
<div class="md:col-span-2 border-t border-slate-100 pt-6 mt-2">
|
|
103
|
+
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Device Simulation</h3>
|
|
104
|
+
<div class="flex flex-wrap gap-2">
|
|
105
|
+
<button
|
|
106
|
+
v-for="mode in ['auto', 'phone', 'tablet', 'desktop']"
|
|
107
|
+
:key="mode"
|
|
108
|
+
@click="deviceMode = mode as any"
|
|
109
|
+
class="px-4 py-2 rounded-lg text-sm font-medium transition-all capitalize"
|
|
110
|
+
:class="deviceMode === mode ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
|
|
111
|
+
>
|
|
112
|
+
<i class="fas mr-2" :class="{
|
|
113
|
+
'fa-desktop': mode === 'desktop' || mode === 'auto',
|
|
114
|
+
'fa-mobile-alt': mode === 'phone',
|
|
115
|
+
'fa-tablet-alt': mode === 'tablet'
|
|
116
|
+
}"></i>
|
|
117
|
+
{{ mode }}
|
|
118
|
+
</button>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
100
121
|
</div>
|
|
101
122
|
</div>
|
|
102
123
|
</transition>
|
|
103
124
|
</header>
|
|
104
125
|
|
|
105
126
|
<!-- Main Content -->
|
|
106
|
-
<div class="flex flex-1 overflow-hidden relative p-5">
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
127
|
+
<div class="flex flex-1 overflow-hidden relative p-5 transition-all duration-300 ease-in-out" :class="{'bg-slate-200/50': deviceMode !== 'auto'}">
|
|
128
|
+
<div :style="containerStyle" class="transition-all duration-500 ease-in-out bg-slate-50 shadow-sm relative">
|
|
129
|
+
<masonry v-model:items="items" :get-next-page="getPage" :load-at-page="1" :layout="layout" ref="masonry">
|
|
130
|
+
<!-- MasonryItem is used automatically, but you can customize it -->
|
|
131
|
+
</masonry>
|
|
132
|
+
</div>
|
|
110
133
|
</div>
|
|
111
134
|
</main>
|
|
112
135
|
</template>
|
|
@@ -166,4 +189,20 @@ const getPage = async (page: number): Promise<GetPageResult> => {
|
|
|
166
189
|
}, 1000);
|
|
167
190
|
});
|
|
168
191
|
};
|
|
192
|
+
|
|
193
|
+
// Device Simulation
|
|
194
|
+
const deviceMode = ref<'auto' | 'phone' | 'tablet' | 'desktop'>('auto');
|
|
195
|
+
|
|
196
|
+
const containerStyle = computed(() => {
|
|
197
|
+
switch (deviceMode.value) {
|
|
198
|
+
case 'phone':
|
|
199
|
+
return { width: '375px', maxWidth: '100%', margin: '0 auto', border: '1px solid #e2e8f0', borderRadius: '20px', overflow: 'hidden', height: '100%' };
|
|
200
|
+
case 'tablet':
|
|
201
|
+
return { width: '768px', maxWidth: '100%', margin: '0 auto', border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden', height: '100%' };
|
|
202
|
+
case 'desktop':
|
|
203
|
+
return { width: '1280px', maxWidth: '100%', margin: '0 auto', border: '1px solid #e2e8f0', borderRadius: '8px', overflow: 'hidden', height: '100%' };
|
|
204
|
+
default:
|
|
205
|
+
return { width: '100%', height: '100%' };
|
|
206
|
+
}
|
|
207
|
+
});
|
|
169
208
|
</script>
|