@velkymx/vibeui 0.8.2 → 1.0.2

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.
Files changed (200) hide show
  1. package/AGENTS.md +44 -0
  2. package/README.md +245 -58
  3. package/dist/purify.es-1D-VntFD.mjs +679 -0
  4. package/dist/src/App.vue.d.ts +3 -0
  5. package/dist/src/components/HelloWorld.vue.d.ts +6 -0
  6. package/dist/src/components/VibeAccordion.vue.d.ts +89 -0
  7. package/dist/{components → src/components}/VibeAlert.vue.d.ts +24 -30
  8. package/dist/src/components/VibeAutocomplete.vue.d.ts +74 -0
  9. package/dist/{components → src/components}/VibeBadge.vue.d.ts +10 -18
  10. package/dist/src/components/VibeBreadcrumb.vue.d.ts +51 -0
  11. package/dist/{components → src/components}/VibeButton.vue.d.ts +16 -20
  12. package/dist/{components → src/components}/VibeButtonGroup.vue.d.ts +10 -18
  13. package/dist/{components → src/components}/VibeCard.vue.d.ts +51 -24
  14. package/dist/{components → src/components}/VibeCarousel.vue.d.ts +27 -49
  15. package/dist/src/components/VibeChartBar.vue.d.ts +61 -0
  16. package/dist/src/components/VibeChartLine.vue.d.ts +70 -0
  17. package/dist/src/components/VibeChartPie.vue.d.ts +34 -0
  18. package/dist/{components → src/components}/VibeCloseButton.vue.d.ts +9 -7
  19. package/dist/{components → src/components}/VibeCol.vue.d.ts +9 -17
  20. package/dist/src/components/VibeCollapse.vue.d.ts +76 -0
  21. package/dist/src/components/VibeContainer.vue.d.ts +36 -0
  22. package/dist/src/components/VibeDataTable.vue.d.ts +131 -0
  23. package/dist/src/components/VibeDatePicker.vue.d.ts +120 -0
  24. package/dist/src/components/VibeDraggable.vue.d.ts +77 -0
  25. package/dist/{components → src/components}/VibeDropdown.vue.d.ts +46 -43
  26. package/dist/src/components/VibeDroppable.vue.d.ts +70 -0
  27. package/dist/src/components/VibeFileInput.vue.d.ts +127 -0
  28. package/dist/{components → src/components}/VibeFormCheckbox.vue.d.ts +30 -22
  29. package/dist/{components → src/components}/VibeFormDatepicker.vue.d.ts +27 -30
  30. package/dist/{components → src/components}/VibeFormGroup.vue.d.ts +11 -14
  31. package/dist/{components → src/components}/VibeFormInput.vue.d.ts +22 -23
  32. package/dist/{components → src/components}/VibeFormRadio.vue.d.ts +23 -24
  33. package/dist/{components → src/components}/VibeFormSelect.vue.d.ts +28 -34
  34. package/dist/{components → src/components}/VibeFormSpinbutton.vue.d.ts +31 -34
  35. package/dist/{components → src/components}/VibeFormSwitch.vue.d.ts +22 -23
  36. package/dist/{components → src/components}/VibeFormTextarea.vue.d.ts +24 -25
  37. package/dist/{components → src/components}/VibeFormWysiwyg.vue.d.ts +24 -23
  38. package/dist/src/components/VibeHero.vue.d.ts +108 -0
  39. package/dist/{components → src/components}/VibeIcon.vue.d.ts +27 -7
  40. package/dist/{components → src/components}/VibeInputGroup.vue.d.ts +11 -13
  41. package/dist/{components → src/components}/VibeLink.vue.d.ts +14 -18
  42. package/dist/{components → src/components}/VibeListGroup.vue.d.ts +26 -22
  43. package/dist/{components → src/components}/VibeModal.vue.d.ts +29 -45
  44. package/dist/{components → src/components}/VibeNav.vue.d.ts +40 -20
  45. package/dist/{components → src/components}/VibeNavbar.vue.d.ts +12 -19
  46. package/dist/src/components/VibeNavbarBrand.vue.d.ts +34 -0
  47. package/dist/src/components/VibeNavbarNav.vue.d.ts +80 -0
  48. package/dist/{components → src/components}/VibeNavbarToggle.vue.d.ts +7 -5
  49. package/dist/{components → src/components}/VibeOffcanvas.vue.d.ts +28 -43
  50. package/dist/{components → src/components}/VibePagination.vue.d.ts +38 -29
  51. package/dist/{components → src/components}/VibePlaceholder.vue.d.ts +9 -17
  52. package/dist/src/components/VibePopover.vue.d.ts +72 -0
  53. package/dist/src/components/VibeProgress.vue.d.ts +37 -0
  54. package/dist/src/components/VibeResizable.vue.d.ts +140 -0
  55. package/dist/{components → src/components}/VibeRow.vue.d.ts +9 -17
  56. package/dist/src/components/VibeScrollspy.vue.d.ts +89 -0
  57. package/dist/src/components/VibeSkeleton.vue.d.ts +54 -0
  58. package/dist/src/components/VibeSlider.vue.d.ts +77 -0
  59. package/dist/src/components/VibeSortable.vue.d.ts +59 -0
  60. package/dist/{components → src/components}/VibeSpinner.vue.d.ts +4 -7
  61. package/dist/src/components/VibeStepper.vue.d.ts +133 -0
  62. package/dist/src/components/VibeTab.vue.d.ts +41 -0
  63. package/dist/src/components/VibeTabContent.vue.d.ts +56 -0
  64. package/dist/src/components/VibeTabs.vue.d.ts +78 -0
  65. package/dist/{components → src/components}/VibeToast.vue.d.ts +40 -42
  66. package/dist/src/components/VibeToastHost.vue.d.ts +16 -0
  67. package/dist/src/components/VibeTooltip.vue.d.ts +63 -0
  68. package/dist/src/components/chart/chartColors.d.ts +3 -0
  69. package/dist/src/components/chart/chartResize.d.ts +2 -0
  70. package/dist/src/components/chart/chartTooltip.d.ts +2 -0
  71. package/dist/src/components/chart/chartTypes.d.ts +6 -0
  72. package/dist/src/components/chart/drawBar.d.ts +5 -0
  73. package/dist/src/components/chart/drawLine.d.ts +18 -0
  74. package/dist/src/components/chart/drawPie.d.ts +4 -0
  75. package/dist/src/components/dndStore.d.ts +7 -0
  76. package/dist/{components → src/components}/index.d.ts +18 -1
  77. package/dist/{composables → src/composables}/useBreakpoints.d.ts +1 -0
  78. package/dist/{composables → src/composables}/useColorMode.d.ts +1 -1
  79. package/dist/src/composables/useForm.d.ts +22 -0
  80. package/dist/src/composables/useId.d.ts +2 -0
  81. package/dist/src/composables/usePosition.d.ts +20 -0
  82. package/dist/src/composables/useToast.d.ts +52 -0
  83. package/dist/src/directives/vTooltip.d.ts +24 -0
  84. package/dist/{index.d.ts → src/index.d.ts} +6 -0
  85. package/dist/src/injectionKeys.d.ts +28 -0
  86. package/dist/{types.d.ts → src/types.d.ts} +32 -6
  87. package/dist/src/utils/safeCss.d.ts +16 -0
  88. package/dist/src/utils/safeHref.d.ts +7 -0
  89. package/dist/src/utils/sanitizeHtml.d.ts +13 -0
  90. package/dist/vibeui.css +2 -1
  91. package/dist/vibeui.es.js +8351 -3508
  92. package/dist/vibeui.umd.js +3 -1
  93. package/docs/README.md +85 -13
  94. package/docs/components/advanced/popover.md +27 -52
  95. package/docs/components/advanced/scrollspy.md +57 -15
  96. package/docs/components/advanced/tooltip.md +26 -47
  97. package/docs/components/card/card.md +9 -1
  98. package/docs/components/charts/chart-bar.md +129 -0
  99. package/docs/components/charts/chart-line.md +136 -0
  100. package/docs/components/charts/chart-pie.md +102 -0
  101. package/docs/components/core/alert.md +27 -5
  102. package/docs/components/core/badge.md +0 -6
  103. package/docs/components/core/button-group.md +0 -6
  104. package/docs/components/core/button.md +1 -1
  105. package/docs/components/core/close-button.md +5 -5
  106. package/docs/components/core/link.md +60 -17
  107. package/docs/components/core/placeholder.md +0 -6
  108. package/docs/components/core/skeleton.md +40 -0
  109. package/docs/components/core/spinner.md +0 -6
  110. package/docs/components/data/datatable.md +29 -10
  111. package/docs/components/hero/hero.md +64 -0
  112. package/docs/components/interactive/accordion.md +29 -0
  113. package/docs/components/interactive/carousel.md +19 -4
  114. package/docs/components/interactive/collapse.md +3 -2
  115. package/docs/components/interactive/date-picker.md +78 -0
  116. package/docs/components/interactive/draggable.md +91 -0
  117. package/docs/components/interactive/dropdown.md +54 -18
  118. package/docs/components/interactive/modal.md +15 -20
  119. package/docs/components/interactive/offcanvas.md +4 -1
  120. package/docs/components/interactive/resizable.md +73 -0
  121. package/docs/components/interactive/slider.md +57 -0
  122. package/docs/components/interactive/sortable.md +52 -0
  123. package/docs/components/interactive/stepper.md +83 -0
  124. package/docs/components/interactive/tabs.md +66 -0
  125. package/docs/components/interactive/toast.md +93 -30
  126. package/docs/components/layout/col.md +0 -6
  127. package/docs/components/layout/container.md +0 -6
  128. package/docs/components/layout/row.md +0 -6
  129. package/docs/components/list/list-group.md +4 -0
  130. package/docs/components/navigation/breadcrumb.md +4 -0
  131. package/docs/components/navigation/nav.md +64 -1
  132. package/docs/components/navigation/navbar.md +2 -0
  133. package/docs/components/navigation/pagination.md +16 -0
  134. package/docs/components/progress/progress.md +7 -1
  135. package/docs/composables/color-mode.md +44 -6
  136. package/docs/composables/use-form.md +78 -0
  137. package/docs/composables/use-position.md +68 -0
  138. package/docs/composables/use-toast.md +91 -0
  139. package/docs/directives/v-tooltip.md +58 -0
  140. package/docs/forms/README.md +60 -61
  141. package/docs/forms/autocomplete.md +96 -0
  142. package/docs/forms/file-input.md +97 -0
  143. package/docs/forms/form-checkbox.md +75 -25
  144. package/docs/forms/form-datepicker.md +58 -28
  145. package/docs/forms/form-group.md +79 -44
  146. package/docs/forms/form-input.md +88 -31
  147. package/docs/forms/form-radio.md +60 -36
  148. package/docs/forms/form-select.md +75 -31
  149. package/docs/forms/form-spinbutton.md +72 -33
  150. package/docs/forms/form-switch.md +53 -25
  151. package/docs/forms/form-textarea.md +60 -29
  152. package/docs/forms/form-wysiwyg.md +73 -38
  153. package/docs/forms/input-group.md +53 -34
  154. package/docs/forms/validation.md +135 -521
  155. package/docs/getting-started/starter-template.md +136 -0
  156. package/docs/superpowers/plans/2026-05-12-vibe-charts.md +1999 -0
  157. package/docs/superpowers/plans/2026-05-29-e2e-browser-testing.md +615 -0
  158. package/docs/superpowers/specs/2026-05-12-charting-design.md +185 -0
  159. package/docs/superpowers/specs/2026-05-29-e2e-browser-testing-design.md +168 -0
  160. package/docs/utilities/position.md +82 -0
  161. package/docs/versioning.md +57 -0
  162. package/examples/README.md +201 -0
  163. package/examples/album.html +262 -0
  164. package/examples/blog.html +166 -0
  165. package/examples/carousel.html +114 -0
  166. package/examples/checkout.html +275 -0
  167. package/examples/cover.html +89 -0
  168. package/examples/dashboard.html +156 -0
  169. package/examples/index.html +129 -0
  170. package/examples/jumbotron.html +56 -0
  171. package/examples/mobile-dashboard.html +138 -0
  172. package/examples/pricing.html +172 -0
  173. package/examples/product.html +145 -0
  174. package/examples/sidebars.html +166 -0
  175. package/examples/sign-in.html +119 -0
  176. package/examples/starter.html +314 -0
  177. package/examples/sticky-footer-navbar.html +70 -0
  178. package/examples/sticky-footer.html +60 -0
  179. package/examples/test-simple.html +91 -0
  180. package/llms.txt +407 -47
  181. package/package.json +42 -13
  182. package/dist/App.vue.d.ts +0 -2
  183. package/dist/components/HelloWorld.vue.d.ts +0 -5
  184. package/dist/components/VibeAccordion.vue.d.ts +0 -90
  185. package/dist/components/VibeBreadcrumb.vue.d.ts +0 -47
  186. package/dist/components/VibeCollapse.vue.d.ts +0 -84
  187. package/dist/components/VibeContainer.vue.d.ts +0 -44
  188. package/dist/components/VibeDataTable.vue.d.ts +0 -76
  189. package/dist/components/VibeNavbarBrand.vue.d.ts +0 -42
  190. package/dist/components/VibeNavbarNav.vue.d.ts +0 -61
  191. package/dist/components/VibePopover.vue.d.ts +0 -95
  192. package/dist/components/VibeProgress.vue.d.ts +0 -45
  193. package/dist/components/VibeScrollspy.vue.d.ts +0 -77
  194. package/dist/components/VibeTabContent.vue.d.ts +0 -74
  195. package/dist/components/VibeTooltip.vue.d.ts +0 -86
  196. package/dist/composables/useId.d.ts +0 -5
  197. package/dist/types/index.d.ts +0 -6
  198. /package/dist/{composables → src/composables}/useBackButton.d.ts +0 -0
  199. /package/dist/{composables → src/composables}/useFormValidation.d.ts +0 -0
  200. /package/dist/{main.d.ts → src/main.d.ts} +0 -0
package/examples/album.html ADDED
@@ -0,0 +1,262 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Album - VibeUI Example</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
9
+ <link rel="stylesheet" href="../dist/vibeui.css">
10
+ <style>
11
+ .card {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .card:hover {
15
+ transform: translateY(-8px);
16
+ box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
17
+ }
18
+ .card-img-top {
19
+ height: 225px;
20
+ object-fit: cover;
21
+ }
22
+ </style>
23
+
24
+ <!-- VibeUI loads Bootstrap JS internally via `import('bootstrap')`; the UMD bundle
25
+ keeps that bare specifier, so the page maps it here so the sort dropdown works. -->
26
+ <script type="importmap">
27
+ {
28
+ "imports": {
29
+ "bootstrap": "https://esm.sh/bootstrap@5.3.0"
30
+ }
31
+ }
32
+ </script>
33
+ </head>
34
+ <body>
35
+ <div id="app">
36
+ <!-- Navbar -->
37
+ <vibe-navbar variant="dark" expand="lg" class="shadow-sm">
38
+ <vibe-container>
39
+ <vibe-navbar-brand href="./">
40
+ <vibe-icon icon="camera-fill" class="me-2"></vibe-icon>
41
+ PhotoAlbum
42
+ </vibe-navbar-brand>
43
+ <vibe-navbar-toggle target="navbarNav"></vibe-navbar-toggle>
44
+ <vibe-collapse id="navbarNav" is-nav>
45
+ <vibe-navbar-nav :items="navItems" class="ms-auto"></vibe-navbar-nav>
46
+ </vibe-collapse>
47
+ </vibe-container>
48
+ </vibe-navbar>
49
+
50
+ <!-- Hero -->
51
+ <vibe-hero
52
+ bg-image="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=1200"
53
+ overlay
54
+ min-height="400px"
55
+ class="text-white"
56
+ >
57
+ <vibe-row>
58
+ <vibe-col :lg="7" class="mx-auto">
59
+ <h1 class="display-3 fw-bold mb-3">Photo Gallery</h1>
60
+ <p class="lead mb-4">
61
+ Discover stunning photography from talented creators around the world.
62
+ Browse our curated collection of beautiful moments captured in time.
63
+ </p>
64
+ <div class="d-flex gap-3 justify-content-center">
65
+ <vibe-button variant="primary" size="lg">
66
+ <vibe-icon icon="cloud-upload-fill" class="me-2"></vibe-icon>
67
+ Upload Photos
68
+ </vibe-button>
69
+ <vibe-button variant="light" outline size="lg">
70
+ <vibe-icon icon="collection-fill" class="me-2"></vibe-icon>
71
+ Explore Gallery
72
+ </vibe-button>
73
+ </div>
74
+ </vibe-col>
75
+ </vibe-row>
76
+ </vibe-hero>
77
+
78
+ <!-- Filter Tabs (data-driven via :items) -->
79
+ <vibe-container class="mt-5">
80
+ <vibe-nav
81
+ tabs
82
+ class="justify-content-center"
83
+ :items="categoryNavItems"
84
+ @item-click="onCategoryClick"
85
+ >
86
+ <template #item="{ item }">
87
+ <vibe-icon :icon="item.icon" class="me-2"></vibe-icon>
88
+ {{ item.text }}
89
+ </template>
90
+ </vibe-nav>
91
+ </vibe-container>
92
+
93
+ <!-- Album Grid -->
94
+ <div class="album py-5">
95
+ <vibe-container>
96
+ <div class="d-flex justify-content-between align-items-center mb-4">
97
+ <div>
98
+ <h2 class="mb-0">{{ activeCategory.charAt(0).toUpperCase() + activeCategory.slice(1) }} Collection</h2>
99
+ <p class="text-muted mb-0">{{ filteredItems.length }} photos</p>
100
+ </div>
101
+ <vibe-dropdown
102
+ id="sort-dropdown"
103
+ text="Sort By"
104
+ variant="secondary"
105
+ :items="sortItems"
106
+ @item-click="onSortClick"
107
+ ></vibe-dropdown>
108
+ </div>
109
+
110
+ <vibe-row row-cols="1" row-cols-sm="2" row-cols-md="3" row-cols-lg="4" :gutters="4">
111
+ <vibe-col v-for="item in filteredItems" :key="item.id">
112
+ <vibe-card class="h-100 border-0 shadow-sm">
113
+ <template #image>
114
+ <div class="position-relative">
115
+ <img :src="item.image" class="card-img-top" :alt="item.title">
116
+ <vibe-badge
117
+ :variant="item.badge.variant"
118
+ class="position-absolute top-0 end-0 m-2"
119
+ >
120
+ {{ item.badge.text }}
121
+ </vibe-badge>
122
+ </div>
123
+ </template>
124
+
125
+ <h5 class="card-title mb-2">{{ item.title }}</h5>
126
+ <p class="card-text text-muted small mb-3">{{ item.description }}</p>
127
+
128
+ <div class="d-flex justify-content-between align-items-center mb-3">
129
+ <div class="d-flex align-items-center">
130
+ <div class="bg-primary rounded-circle me-2" style="width: 32px; height: 32px;"></div>
131
+ <small class="text-muted">{{ item.author }}</small>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="d-flex justify-content-between align-items-center">
136
+ <vibe-button-group size="sm">
137
+ <vibe-button variant="primary" outline>
138
+ <vibe-icon icon="eye"></vibe-icon>
139
+ </vibe-button>
140
+ <vibe-button variant="primary" outline>
141
+ <vibe-icon icon="heart"></vibe-icon>
142
+ </vibe-button>
143
+ <vibe-button variant="primary" outline>
144
+ <vibe-icon icon="share"></vibe-icon>
145
+ </vibe-button>
146
+ </vibe-button-group>
147
+ <small class="text-muted">
148
+ <vibe-icon icon="clock" class="me-1"></vibe-icon>
149
+ {{ item.time }}
150
+ </small>
151
+ </div>
152
+ </vibe-card>
153
+ </vibe-col>
154
+ </vibe-row>
155
+
156
+ <!-- Load More -->
157
+ <div class="text-center mt-5">
158
+ <vibe-button variant="primary" size="lg">
159
+ <vibe-icon icon="arrow-down-circle" class="me-2"></vibe-icon>
160
+ Load More Photos
161
+ </vibe-button>
162
+ </div>
163
+ </vibe-container>
164
+ </div>
165
+
166
+ <!-- CTA -->
167
+ <section class="bg-light py-5">
168
+ <vibe-container class="text-center">
169
+ <h2 class="display-6 fw-bold mb-3">Share Your Photography</h2>
170
+ <p class="lead text-muted mb-4">Join our community of photographers and showcase your work</p>
171
+ <vibe-button variant="primary" size="lg">
172
+ <vibe-icon icon="person-plus-fill" class="me-2"></vibe-icon>
173
+ Create Free Account
174
+ </vibe-button>
175
+ </vibe-container>
176
+ </section>
177
+
178
+ <!-- Footer -->
179
+ <footer class="bg-dark text-white py-4">
180
+ <vibe-container>
181
+ <div class="d-flex justify-content-between align-items-center">
182
+ <div>
183
+ <vibe-icon icon="camera-fill" class="me-2"></vibe-icon>
184
+ <span>PhotoAlbum © 2024</span>
185
+ </div>
186
+ <div>
187
+ <small class="text-white-50">Built with VibeUI by <a href="https://technosorcery.com" class="text-white-50">TechnoSorcery.com</a></small>
188
+ </div>
189
+ </div>
190
+ </vibe-container>
191
+ </footer>
192
+ </div>
193
+
194
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
195
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
196
+ <script src="../dist/vibeui.umd.js"></script>
197
+ <script>
198
+ const { createApp } = Vue;
199
+
200
+ createApp({
201
+ data() {
202
+ return {
203
+ activeCategory: 'all',
204
+ sortBy: 'recent',
205
+ navItems: [
206
+ { text: 'Home', href: './', active: true },
207
+ { text: 'Gallery', href: '#' },
208
+ { text: 'About', href: '#' },
209
+ { text: 'Contact', href: '#' }
210
+ ],
211
+ categories: [
212
+ { id: 'all', name: 'All Photos', icon: 'grid-3x3-gap' },
213
+ { id: 'nature', name: 'Nature', icon: 'tree' },
214
+ { id: 'urban', name: 'Urban', icon: 'building' },
215
+ { id: 'people', name: 'People', icon: 'people' }
216
+ ],
217
+ sortItems: [
218
+ { text: 'Most Recent', value: 'recent' },
219
+ { text: 'Most Popular', value: 'popular' },
220
+ { text: 'Title', value: 'title' }
221
+ ],
222
+ albumItems: [
223
+ { id: 1, category: 'nature', title: 'Mountain Sunrise', author: 'Sarah Chen', description: 'Breathtaking view from the summit', image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400', time: '2 hours ago', badge: { text: 'Featured', variant: 'primary' } },
224
+ { id: 2, category: 'urban', title: 'City Lights', author: 'Mike Johnson', description: 'Downtown at night', image: 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=400', time: '5 hours ago', badge: { text: 'New', variant: 'success' } },
225
+ { id: 3, category: 'people', title: 'Street Portrait', author: 'Emma Wilson', description: 'Candid street photography', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400', time: '1 day ago', badge: { text: 'Popular', variant: 'warning' } },
226
+ { id: 4, category: 'nature', title: 'Ocean Waves', author: 'David Lee', description: 'Peaceful coastal scenery', image: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=400', time: '2 days ago', badge: { text: 'Trending', variant: 'info' } },
227
+ { id: 5, category: 'urban', title: 'Architecture', author: 'Lisa Park', description: 'Modern building design', image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=400', time: '3 days ago', badge: { text: 'Featured', variant: 'primary' } },
228
+ { id: 6, category: 'nature', title: 'Forest Path', author: 'Tom Anderson', description: 'Serene woodland walk', image: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400', time: '4 days ago', badge: { text: 'New', variant: 'success' } },
229
+ { id: 7, category: 'people', title: 'Festival Crowd', author: 'Anna Martinez', description: 'Live music event', image: 'https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=400', time: '5 days ago', badge: { text: 'Hot', variant: 'danger' } },
230
+ { id: 8, category: 'urban', title: 'Subway Station', author: 'Chris Taylor', description: 'Urban commuter life', image: 'https://images.unsplash.com/photo-1514565131-fce0801e5785?w=400', time: '1 week ago', badge: { text: 'Popular', variant: 'warning' } }
231
+ ]
232
+ }
233
+ },
234
+ computed: {
235
+ categoryNavItems() {
236
+ // No href -> VibeNav renders clickable <button> nav-links (item-click
237
+ // fires) without engaging Bootstrap's Tab JS against a bogus target.
238
+ return this.categories.map(c => ({
239
+ text: c.name,
240
+ icon: c.icon,
241
+ active: c.id === this.activeCategory
242
+ }));
243
+ },
244
+ filteredItems() {
245
+ if (this.activeCategory === 'all') {
246
+ return this.albumItems;
247
+ }
248
+ return this.albumItems.filter(item => item.category === this.activeCategory);
249
+ }
250
+ },
251
+ methods: {
252
+ onCategoryClick({ index }) {
253
+ this.activeCategory = this.categories[index].id;
254
+ },
255
+ onSortClick({ item }) {
256
+ this.sortBy = item.value;
257
+ }
258
+ }
259
+ }).use(VibeUI.default).mount('#app');
260
+ </script>
261
+ </body>
262
+ </html>
package/examples/blog.html ADDED
@@ -0,0 +1,166 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Blog - VibeUI Example</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
9
+ <link rel="stylesheet" href="../dist/vibeui.css">
10
+ <style>
11
+ .blog-title { font-family: Georgia, 'Times New Roman', serif; }
12
+ </style>
13
+ </head>
14
+ <body>
15
+ <div id="app">
16
+ <vibe-container>
17
+ <!-- Masthead -->
18
+ <header class="border-bottom py-3 mb-4">
19
+ <vibe-row class="align-items-center">
20
+ <vibe-col :md="4" class="text-md-start text-center">
21
+ <a href="#" class="text-muted small text-decoration-none">Subscribe</a>
22
+ </vibe-col>
23
+ <vibe-col :md="4" class="text-center">
24
+ <a href="#" class="blog-title fs-2 fw-bold text-dark text-decoration-none">The Dispatch</a>
25
+ </vibe-col>
26
+ <vibe-col :md="4" class="text-md-end text-center">
27
+ <vibe-button variant="primary" outline size="sm">
28
+ <vibe-icon icon="person"></vibe-icon> Sign up
29
+ </vibe-button>
30
+ </vibe-col>
31
+ </vibe-row>
32
+ </header>
33
+
34
+ <!-- Category nav -->
35
+ <vibe-nav :items="categories" class="border-bottom mb-4 justify-content-center flex-nowrap overflow-auto"></vibe-nav>
36
+
37
+ <!-- Featured post -->
38
+ <vibe-card class="text-bg-dark mb-4 border-0">
39
+ <div class="card-body py-5 px-4">
40
+ <h2 class="display-6 fw-bold">Title of a longer featured blog post</h2>
41
+ <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and selectively about what's most interesting in this post.</p>
42
+ <vibe-button variant="light">Continue reading <vibe-icon icon="arrow-right"></vibe-icon></vibe-button>
43
+ </div>
44
+ </vibe-card>
45
+
46
+ <!-- Two secondary features -->
47
+ <vibe-row :gutters="4" class="mb-5">
48
+ <vibe-col :md="6" v-for="f in featured" :key="f.title">
49
+ <vibe-card class="h-100 shadow-sm" :header-class="`text-bg-${f.variant}`">
50
+ <template #header>{{ f.category }}</template>
51
+ <h4 class="fw-bold">{{ f.title }}</h4>
52
+ <div class="text-muted small mb-2">{{ f.date }}</div>
53
+ <p class="mb-2">{{ f.excerpt }}</p>
54
+ <a href="#" class="text-decoration-none">Continue reading…</a>
55
+ </vibe-card>
56
+ </vibe-col>
57
+ </vibe-row>
58
+
59
+ <vibe-row :gutters="5">
60
+ <!-- Posts -->
61
+ <vibe-col :md="8">
62
+ <h3 class="border-bottom pb-2 mb-4">From the Firehose</h3>
63
+
64
+ <article class="mb-5" v-for="post in pagedPosts" :key="post.title">
65
+ <h2 class="fw-bold">{{ post.title }}</h2>
66
+ <div class="text-muted mb-2">
67
+ <vibe-badge :variant="post.variant" class="me-2">{{ post.tag }}</vibe-badge>
68
+ {{ post.date }} · {{ post.author }}
69
+ </div>
70
+ <p>{{ post.body }}</p>
71
+ <a href="#" class="text-decoration-none">Read more <vibe-icon icon="chevron-right"></vibe-icon></a>
72
+ </article>
73
+
74
+ <vibe-pagination
75
+ v-model:current-page="page"
76
+ :total-pages="totalPages"
77
+ :max-visible-pages="5"
78
+ class="justify-content-center"
79
+ />
80
+ </vibe-col>
81
+
82
+ <!-- Sidebar -->
83
+ <vibe-col :md="4">
84
+ <vibe-card class="bg-body-tertiary border-0 mb-4">
85
+ <template #header>About</template>
86
+ <p class="mb-0 text-muted">A small magazine-style blog template built entirely from VibeUI components.</p>
87
+ </vibe-card>
88
+
89
+ <h4 class="fst-italic">Recent posts</h4>
90
+ <vibe-list-group class="mb-4" :items="recent">
91
+ <template #item="{ item }">
92
+ <div class="d-flex justify-content-between align-items-center w-100">
93
+ <span>{{ item.text }}</span>
94
+ <small class="text-muted">{{ item.meta }}</small>
95
+ </div>
96
+ </template>
97
+ </vibe-list-group>
98
+
99
+ <h4 class="fst-italic">Archives</h4>
100
+ <vibe-nav vertical :items="archives" class="mb-4"></vibe-nav>
101
+
102
+ <h4 class="fst-italic">Elsewhere</h4>
103
+ <div class="d-flex gap-3">
104
+ <a href="#" class="text-dark"><vibe-icon icon="github" font-size="1.5rem"></vibe-icon></a>
105
+ <a href="#" class="text-dark"><vibe-icon icon="twitter" font-size="1.5rem"></vibe-icon></a>
106
+ <a href="#" class="text-dark"><vibe-icon icon="facebook" font-size="1.5rem"></vibe-icon></a>
107
+ </div>
108
+ </vibe-col>
109
+ </vibe-row>
110
+ </vibe-container>
111
+
112
+ <footer class="bg-body-tertiary py-4 mt-5 text-center text-muted">
113
+ <small>Built with VibeUI by <a href="https://technosorcery.com" class="text-decoration-none">TechnoSorcery.com</a></small>
114
+ </footer>
115
+ </div>
116
+
117
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
118
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
119
+ <script src="../dist/vibeui.umd.js"></script>
120
+ <script>
121
+ const { createApp, ref, computed } = Vue;
122
+
123
+ createApp({
124
+ setup() {
125
+ const page = ref(1);
126
+ const perPage = 3;
127
+
128
+ const categories = [
129
+ { text: 'World', href: '#', active: true },
130
+ { text: 'Tech', href: '#' },
131
+ { text: 'Design', href: '#' },
132
+ { text: 'Culture', href: '#' },
133
+ { text: 'Business', href: '#' },
134
+ { text: 'Science', href: '#' }
135
+ ];
136
+ const featured = [
137
+ { category: 'World', variant: 'primary', title: 'Featured post', date: 'Nov 12', excerpt: 'This is a wider card with supporting text below as a natural lead-in.' },
138
+ { category: 'Design', variant: 'success', title: 'Post title', date: 'Nov 11', excerpt: 'This is a wider card with supporting text below as a natural lead-in.' }
139
+ ];
140
+ const posts = Array.from({ length: 7 }, (_, i) => ({
141
+ title: `Sample blog post ${i + 1}`,
142
+ tag: ['Tech', 'Design', 'World'][i % 3],
143
+ variant: ['info', 'success', 'primary'][i % 3],
144
+ date: `Nov ${12 - i}, 2024`,
145
+ author: 'Jane Doe',
146
+ body: 'This blog post shows a few different types of content that work with a default layout — body copy, links, and the occasional inline emphasis.'
147
+ }));
148
+ const totalPages = computed(() => Math.ceil(posts.length / perPage));
149
+ const pagedPosts = computed(() => posts.slice((page.value - 1) * perPage, page.value * perPage));
150
+
151
+ const recent = [
152
+ { text: 'Example blog post title', meta: 'Nov 12' },
153
+ { text: 'This is another blog post', meta: 'Nov 11' },
154
+ { text: 'Longer blog post title here', meta: 'Nov 9' }
155
+ ];
156
+ const archives = Array.from({ length: 5 }, (_, i) => ({
157
+ text: ['March', 'February', 'January', 'December', 'November'][i] + ' 2024',
158
+ href: '#'
159
+ }));
160
+
161
+ return { categories, featured, posts, page, totalPages, pagedPosts, recent, archives };
162
+ }
163
+ }).use(VibeUI.default).mount('#app');
164
+ </script>
165
+ </body>
166
+ </html>
package/examples/carousel.html ADDED
@@ -0,0 +1,114 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Carousel - VibeUI Example</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
9
+ <link rel="stylesheet" href="../dist/vibeui.css">
10
+ <style>
11
+ .marketing-img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; }
12
+ .featurette-img { width: 100%; border-radius: .5rem; object-fit: cover; }
13
+ </style>
14
+
15
+ <!-- VibeCarousel loads Bootstrap JS internally via `import('bootstrap')`; the UMD bundle
16
+ keeps that bare specifier, so the page maps it here. -->
17
+ <script type="importmap">
18
+ {
19
+ "imports": {
20
+ "bootstrap": "https://esm.sh/bootstrap@5.3.0"
21
+ }
22
+ }
23
+ </script>
24
+ </head>
25
+ <body>
26
+ <div id="app">
27
+ <vibe-navbar variant="dark" expand="lg" position="sticky-top">
28
+ <vibe-navbar-brand href="#">
29
+ <vibe-icon icon="images" class="me-2"></vibe-icon>
30
+ Carousel Co.
31
+ </vibe-navbar-brand>
32
+ <vibe-navbar-toggle target="nav1"></vibe-navbar-toggle>
33
+ <vibe-collapse id="nav1" is-nav>
34
+ <vibe-navbar-nav :items="navItems" class="ms-auto"></vibe-navbar-nav>
35
+ </vibe-collapse>
36
+ </vibe-navbar>
37
+
38
+ <!-- Full-width carousel -->
39
+ <vibe-carousel :items="slides" dark :interval="4000" />
40
+
41
+ <!-- Marketing columns -->
42
+ <vibe-container class="py-5">
43
+ <vibe-row :gutters="4" class="text-center">
44
+ <vibe-col :lg="4" v-for="m in marketing" :key="m.title">
45
+ <img :src="m.img" class="marketing-img mb-3" :alt="m.title">
46
+ <h2 class="fw-normal">{{ m.title }}</h2>
47
+ <p>{{ m.body }}</p>
48
+ <vibe-button variant="secondary" outline>
49
+ View details <vibe-icon icon="chevron-right"></vibe-icon>
50
+ </vibe-button>
51
+ </vibe-col>
52
+ </vibe-row>
53
+ </vibe-container>
54
+
55
+ <hr class="featurette-divider mx-3">
56
+
57
+ <!-- Featurettes (alternating) -->
58
+ <vibe-container class="pb-5">
59
+ <vibe-row
60
+ v-for="(f, i) in featurettes"
61
+ :key="f.title"
62
+ class="align-items-center py-4"
63
+ >
64
+ <vibe-col :md="7" :order="i % 2 === 0 ? 1 : 2">
65
+ <h2 class="fw-normal">{{ f.title }} <span class="text-muted">{{ f.subtitle }}</span></h2>
66
+ <p class="lead">{{ f.body }}</p>
67
+ </vibe-col>
68
+ <vibe-col :md="5" :order="i % 2 === 0 ? 2 : 1">
69
+ <img :src="f.img" class="featurette-img" :alt="f.title">
70
+ </vibe-col>
71
+ </vibe-row>
72
+ </vibe-container>
73
+
74
+ <footer class="bg-body-tertiary py-4">
75
+ <vibe-container class="text-center text-muted">
76
+ <small>Built with VibeUI by <a href="https://technosorcery.com" class="text-decoration-none">TechnoSorcery.com</a></small>
77
+ </vibe-container>
78
+ </footer>
79
+ </div>
80
+
81
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
82
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
83
+ <script src="../dist/vibeui.umd.js"></script>
84
+ <script>
85
+ const { createApp } = Vue;
86
+
87
+ createApp({
88
+ data() {
89
+ return {
90
+ navItems: [
91
+ { text: 'Home', href: '#', active: true },
92
+ { text: 'Gallery', href: '#' },
93
+ { text: 'About', href: '#' }
94
+ ],
95
+ slides: [
96
+ { src: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1200', caption: 'Explore the wild', captionText: 'Stunning landscapes captured by our community.' },
97
+ { src: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1200', caption: 'Find your calm', captionText: 'Serene views from around the world.' },
98
+ { src: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200', caption: 'Chase the light', captionText: 'Golden hours worth waking up for.' }
99
+ ],
100
+ marketing: [
101
+ { title: 'Heading', body: 'Some representative placeholder content for the columns.', img: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=300' },
102
+ { title: 'Heading', body: 'Another exciting bit of representative placeholder content.', img: 'https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07?w=300' },
103
+ { title: 'Heading', body: 'And lastly this, the third column of representative content.', img: 'https://images.unsplash.com/photo-1500534623283-312aade485b7?w=300' }
104
+ ],
105
+ featurettes: [
106
+ { title: 'First featurette heading.', subtitle: "It'll blow your mind.", body: 'Pulls the eye with a strong image and clear copy alongside it.', img: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=500' },
107
+ { title: 'Oh yeah, this is another.', subtitle: "See? Alternating.", body: 'The image and text columns swap order on each row for visual rhythm.', img: 'https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?w=500' }
108
+ ]
109
+ }
110
+ }
111
+ }).use(VibeUI.default).mount('#app');
112
+ </script>
113
+ </body>
114
+ </html>