@velkymx/vibeui 0.9.0 → 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 (205) hide show
  1. package/AGENTS.md +44 -0
  2. package/CLAUDE.md +48 -0
  3. package/README.md +222 -197
  4. package/dist/purify.es-1D-VntFD.mjs +679 -0
  5. package/dist/src/App.vue.d.ts +3 -0
  6. package/dist/src/components/HelloWorld.vue.d.ts +6 -0
  7. package/dist/src/components/VibeAccordion.vue.d.ts +89 -0
  8. package/dist/{components → src/components}/VibeAlert.vue.d.ts +18 -34
  9. package/dist/src/components/VibeAutocomplete.vue.d.ts +74 -0
  10. package/dist/{components → src/components}/VibeBadge.vue.d.ts +10 -18
  11. package/dist/src/components/VibeBreadcrumb.vue.d.ts +51 -0
  12. package/dist/{components → src/components}/VibeButton.vue.d.ts +13 -17
  13. package/dist/{components → src/components}/VibeButtonGroup.vue.d.ts +10 -18
  14. package/dist/{components → src/components}/VibeCard.vue.d.ts +51 -24
  15. package/dist/{components → src/components}/VibeCarousel.vue.d.ts +27 -49
  16. package/dist/src/components/VibeChartBar.vue.d.ts +61 -0
  17. package/dist/src/components/VibeChartLine.vue.d.ts +70 -0
  18. package/dist/src/components/VibeChartPie.vue.d.ts +34 -0
  19. package/dist/{components → src/components}/VibeCloseButton.vue.d.ts +9 -7
  20. package/dist/{components → src/components}/VibeCol.vue.d.ts +9 -17
  21. package/dist/src/components/VibeCollapse.vue.d.ts +76 -0
  22. package/dist/src/components/VibeContainer.vue.d.ts +36 -0
  23. package/dist/src/components/VibeDataTable.vue.d.ts +131 -0
  24. package/dist/{components → src/components}/VibeDatePicker.vue.d.ts +4 -6
  25. package/dist/{components → src/components}/VibeDraggable.vue.d.ts +9 -13
  26. package/dist/{components → src/components}/VibeDropdown.vue.d.ts +46 -43
  27. package/dist/{components → src/components}/VibeDroppable.vue.d.ts +9 -13
  28. package/dist/{components → src/components}/VibeFileInput.vue.d.ts +14 -20
  29. package/dist/{components → src/components}/VibeFormCheckbox.vue.d.ts +29 -21
  30. package/dist/{components → src/components}/VibeFormDatepicker.vue.d.ts +26 -29
  31. package/dist/{components → src/components}/VibeFormGroup.vue.d.ts +10 -13
  32. package/dist/{components → src/components}/VibeFormInput.vue.d.ts +22 -23
  33. package/dist/{components → src/components}/VibeFormRadio.vue.d.ts +22 -23
  34. package/dist/{components → src/components}/VibeFormSelect.vue.d.ts +27 -33
  35. package/dist/{components → src/components}/VibeFormSpinbutton.vue.d.ts +30 -33
  36. package/dist/{components → src/components}/VibeFormSwitch.vue.d.ts +21 -22
  37. package/dist/{components → src/components}/VibeFormTextarea.vue.d.ts +23 -24
  38. package/dist/{components → src/components}/VibeFormWysiwyg.vue.d.ts +22 -21
  39. package/dist/src/components/VibeHero.vue.d.ts +108 -0
  40. package/dist/{components → src/components}/VibeIcon.vue.d.ts +27 -7
  41. package/dist/{components → src/components}/VibeInputGroup.vue.d.ts +11 -13
  42. package/dist/{components → src/components}/VibeLink.vue.d.ts +14 -18
  43. package/dist/{components → src/components}/VibeListGroup.vue.d.ts +26 -22
  44. package/dist/{components → src/components}/VibeModal.vue.d.ts +29 -45
  45. package/dist/{components → src/components}/VibeNav.vue.d.ts +40 -20
  46. package/dist/{components → src/components}/VibeNavbar.vue.d.ts +12 -19
  47. package/dist/src/components/VibeNavbarBrand.vue.d.ts +34 -0
  48. package/dist/src/components/VibeNavbarNav.vue.d.ts +80 -0
  49. package/dist/{components → src/components}/VibeNavbarToggle.vue.d.ts +7 -5
  50. package/dist/{components → src/components}/VibeOffcanvas.vue.d.ts +28 -43
  51. package/dist/{components → src/components}/VibePagination.vue.d.ts +38 -29
  52. package/dist/{components → src/components}/VibePlaceholder.vue.d.ts +9 -17
  53. package/dist/src/components/VibePopover.vue.d.ts +72 -0
  54. package/dist/src/components/VibeProgress.vue.d.ts +37 -0
  55. package/dist/{components → src/components}/VibeResizable.vue.d.ts +10 -14
  56. package/dist/{components → src/components}/VibeRow.vue.d.ts +9 -17
  57. package/dist/src/components/VibeScrollspy.vue.d.ts +89 -0
  58. package/dist/{components → src/components}/VibeSkeleton.vue.d.ts +2 -1
  59. package/dist/{components → src/components}/VibeSlider.vue.d.ts +4 -5
  60. package/dist/src/components/VibeSortable.vue.d.ts +59 -0
  61. package/dist/{components → src/components}/VibeSpinner.vue.d.ts +4 -7
  62. package/dist/{components → src/components}/VibeStepper.vue.d.ts +32 -31
  63. package/dist/{components → src/components}/VibeTab.vue.d.ts +7 -11
  64. package/dist/src/components/VibeTabContent.vue.d.ts +56 -0
  65. package/dist/{components → src/components}/VibeTabs.vue.d.ts +9 -13
  66. package/dist/{components → src/components}/VibeToast.vue.d.ts +31 -44
  67. package/dist/{components → src/components}/VibeToastHost.vue.d.ts +2 -1
  68. package/dist/src/components/VibeTooltip.vue.d.ts +63 -0
  69. package/dist/src/components/chart/chartColors.d.ts +3 -0
  70. package/dist/src/components/chart/chartResize.d.ts +2 -0
  71. package/dist/src/components/chart/chartTooltip.d.ts +2 -0
  72. package/dist/src/components/chart/chartTypes.d.ts +6 -0
  73. package/dist/src/components/chart/drawBar.d.ts +5 -0
  74. package/dist/src/components/chart/drawLine.d.ts +18 -0
  75. package/dist/src/components/chart/drawPie.d.ts +4 -0
  76. package/dist/{components → src/components}/dndStore.d.ts +1 -0
  77. package/dist/{components → src/components}/index.d.ts +5 -1
  78. package/dist/{composables → src/composables}/useBreakpoints.d.ts +1 -0
  79. package/dist/{composables → src/composables}/useColorMode.d.ts +1 -1
  80. package/dist/src/composables/useId.d.ts +2 -0
  81. package/dist/{directives → src/directives}/vTooltip.d.ts +2 -3
  82. package/dist/src/injectionKeys.d.ts +28 -0
  83. package/dist/{types.d.ts → src/types.d.ts} +21 -2
  84. package/dist/src/utils/safeCss.d.ts +16 -0
  85. package/dist/src/utils/safeHref.d.ts +7 -0
  86. package/dist/src/utils/sanitizeHtml.d.ts +13 -0
  87. package/dist/vibeui.css +2 -1
  88. package/dist/vibeui.es.js +8269 -5855
  89. package/dist/vibeui.umd.js +3 -1
  90. package/docs/README.md +225 -0
  91. package/docs/components/advanced/popover.md +125 -0
  92. package/docs/components/advanced/scrollspy.md +106 -0
  93. package/docs/components/advanced/tooltip.md +90 -0
  94. package/docs/components/card/card.md +223 -0
  95. package/docs/components/charts/chart-bar.md +129 -0
  96. package/docs/components/charts/chart-line.md +136 -0
  97. package/docs/components/charts/chart-pie.md +102 -0
  98. package/docs/components/core/alert.md +94 -0
  99. package/docs/components/core/badge.md +75 -0
  100. package/docs/components/core/button-group.md +99 -0
  101. package/docs/components/core/button.md +127 -0
  102. package/docs/components/core/close-button.md +82 -0
  103. package/docs/components/core/link.md +79 -0
  104. package/docs/components/core/placeholder.md +129 -0
  105. package/docs/components/core/skeleton.md +40 -0
  106. package/docs/components/core/spinner.md +103 -0
  107. package/docs/components/data/datatable.md +435 -0
  108. package/docs/components/hero/hero.md +64 -0
  109. package/docs/components/interactive/accordion.md +121 -0
  110. package/docs/components/interactive/carousel.md +112 -0
  111. package/docs/components/interactive/collapse.md +106 -0
  112. package/docs/components/interactive/date-picker.md +78 -0
  113. package/docs/components/interactive/draggable.md +91 -0
  114. package/docs/components/interactive/dropdown.md +129 -0
  115. package/docs/components/interactive/modal.md +143 -0
  116. package/docs/components/interactive/offcanvas.md +92 -0
  117. package/docs/components/interactive/resizable.md +73 -0
  118. package/docs/components/interactive/slider.md +57 -0
  119. package/docs/components/interactive/sortable.md +52 -0
  120. package/docs/components/interactive/stepper.md +83 -0
  121. package/docs/components/interactive/tabs.md +66 -0
  122. package/docs/components/interactive/toast.md +177 -0
  123. package/docs/components/layout/col.md +117 -0
  124. package/docs/components/layout/container.md +53 -0
  125. package/docs/components/layout/row.md +107 -0
  126. package/docs/components/list/list-group.md +225 -0
  127. package/docs/components/navigation/breadcrumb.md +120 -0
  128. package/docs/components/navigation/nav.md +151 -0
  129. package/docs/components/navigation/navbar.md +108 -0
  130. package/docs/components/navigation/pagination.md +162 -0
  131. package/docs/components/progress/progress.md +188 -0
  132. package/docs/composables/back-button.md +28 -0
  133. package/docs/composables/breakpoints.md +54 -0
  134. package/docs/composables/color-mode.md +179 -0
  135. package/docs/composables/use-form.md +78 -0
  136. package/docs/composables/use-position.md +68 -0
  137. package/docs/composables/use-toast.md +91 -0
  138. package/docs/directives/v-tooltip.md +58 -0
  139. package/docs/forms/README.md +87 -0
  140. package/docs/forms/autocomplete.md +96 -0
  141. package/docs/forms/file-input.md +97 -0
  142. package/docs/forms/form-checkbox.md +100 -0
  143. package/docs/forms/form-datepicker.md +80 -0
  144. package/docs/forms/form-group.md +115 -0
  145. package/docs/forms/form-input.md +112 -0
  146. package/docs/forms/form-radio.md +82 -0
  147. package/docs/forms/form-select.md +98 -0
  148. package/docs/forms/form-spinbutton.md +94 -0
  149. package/docs/forms/form-switch.md +75 -0
  150. package/docs/forms/form-textarea.md +82 -0
  151. package/docs/forms/form-wysiwyg.md +99 -0
  152. package/docs/forms/input-group.md +70 -0
  153. package/docs/forms/validation.md +213 -0
  154. package/docs/getting-started/starter-template.md +136 -0
  155. package/docs/superpowers/plans/2026-05-12-vibe-charts.md +1999 -0
  156. package/docs/superpowers/plans/2026-05-29-e2e-browser-testing.md +615 -0
  157. package/docs/superpowers/specs/2026-05-12-charting-design.md +185 -0
  158. package/docs/superpowers/specs/2026-05-29-e2e-browser-testing-design.md +168 -0
  159. package/docs/utilities/position.md +82 -0
  160. package/docs/versioning.md +57 -0
  161. package/examples/README.md +201 -0
  162. package/examples/album.html +262 -0
  163. package/examples/blog.html +166 -0
  164. package/examples/carousel.html +114 -0
  165. package/examples/checkout.html +275 -0
  166. package/examples/cover.html +89 -0
  167. package/examples/dashboard.html +156 -0
  168. package/examples/index.html +129 -0
  169. package/examples/jumbotron.html +56 -0
  170. package/examples/mobile-dashboard.html +138 -0
  171. package/examples/pricing.html +172 -0
  172. package/examples/product.html +145 -0
  173. package/examples/sidebars.html +166 -0
  174. package/examples/sign-in.html +119 -0
  175. package/examples/starter.html +314 -0
  176. package/examples/sticky-footer-navbar.html +70 -0
  177. package/examples/sticky-footer.html +60 -0
  178. package/examples/test-simple.html +91 -0
  179. package/llms.txt +782 -0
  180. package/package.json +44 -14
  181. package/dist/App.vue.d.ts +0 -2
  182. package/dist/components/HelloWorld.vue.d.ts +0 -5
  183. package/dist/components/VibeAccordion.vue.d.ts +0 -90
  184. package/dist/components/VibeAutocomplete.vue.d.ts +0 -46
  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/VibeSortable.vue.d.ts +0 -40
  195. package/dist/components/VibeTabContent.vue.d.ts +0 -74
  196. package/dist/components/VibeTooltip.vue.d.ts +0 -86
  197. package/dist/composables/useId.d.ts +0 -5
  198. package/dist/types/index.d.ts +0 -6
  199. /package/dist/{composables → src/composables}/useBackButton.d.ts +0 -0
  200. /package/dist/{composables → src/composables}/useForm.d.ts +0 -0
  201. /package/dist/{composables → src/composables}/useFormValidation.d.ts +0 -0
  202. /package/dist/{composables → src/composables}/usePosition.d.ts +0 -0
  203. /package/dist/{composables → src/composables}/useToast.d.ts +0 -0
  204. /package/dist/{index.d.ts → src/index.d.ts} +0 -0
  205. /package/dist/{main.d.ts → src/main.d.ts} +0 -0
package/examples/checkout.html ADDED
@@ -0,0 +1,275 @@
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>Checkout - 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
+ body { background-color: #f8f9fa; }
12
+ </style>
13
+
14
+ <!-- VibeToast loads Bootstrap JS internally via `import('bootstrap')`; the UMD bundle
15
+ keeps that bare specifier, so the page maps it here so toasts display. -->
16
+ <script type="importmap">
17
+ {
18
+ "imports": {
19
+ "bootstrap": "https://esm.sh/bootstrap@5.3.0"
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body>
25
+ <div id="app">
26
+ <vibe-container class="py-5">
27
+ <div class="text-center mb-4">
28
+ <vibe-icon icon="bag-check-fill" class="text-primary" font-size="2.5rem"></vibe-icon>
29
+ <h1 class="h3 mt-2">Checkout</h1>
30
+ <p class="text-muted">Review your order and enter your details.</p>
31
+ </div>
32
+
33
+ <vibe-row :gutters="5">
34
+ <!-- Order summary -->
35
+ <vibe-col :md="5" :lg="4" order="2" order-md="2">
36
+ <h4 class="d-flex justify-content-between align-items-center mb-3">
37
+ <span class="text-muted">Your cart</span>
38
+ <vibe-badge variant="primary" pill>{{ cart.length }}</vibe-badge>
39
+ </h4>
40
+
41
+ <vibe-list-group class="mb-3" :items="summaryItems">
42
+ <template #item="{ item }">
43
+ <div class="d-flex justify-content-between lh-sm w-100">
44
+ <div>
45
+ <h6 class="my-0" :class="{ 'fw-bold': item.total }">{{ item.name }}</h6>
46
+ <small v-if="item.desc" class="text-muted">{{ item.desc }}</small>
47
+ </div>
48
+ <span :class="item.total ? 'fw-bold' : 'text-muted'">{{ item.price }}</span>
49
+ </div>
50
+ </template>
51
+ </vibe-list-group>
52
+
53
+ <vibe-form-group label="Promo code">
54
+ <vibe-input-group>
55
+ <vibe-form-input v-model="promo" no-wrapper placeholder="Enter code" />
56
+ <template #append>
57
+ <vibe-button variant="secondary" @click="onRedeem">Redeem</vibe-button>
58
+ </template>
59
+ </vibe-input-group>
60
+ </vibe-form-group>
61
+ </vibe-col>
62
+
63
+ <!-- Billing form -->
64
+ <vibe-col :md="7" :lg="8" order="1" order-md="1">
65
+ <vibe-card class="shadow-sm">
66
+ <h4 class="mb-3">Billing address</h4>
67
+ <form novalidate @submit.prevent="onSubmit">
68
+ <vibe-row :gutters="3">
69
+ <vibe-col :md="6">
70
+ <vibe-form-group label="First name">
71
+ <vibe-form-input
72
+ v-model="form.fields.firstName"
73
+ :validation-state="stateFor('firstName')"
74
+ :validation-message="form.errors.firstName"
75
+ />
76
+ </vibe-form-group>
77
+ </vibe-col>
78
+ <vibe-col :md="6">
79
+ <vibe-form-group label="Last name">
80
+ <vibe-form-input
81
+ v-model="form.fields.lastName"
82
+ :validation-state="stateFor('lastName')"
83
+ :validation-message="form.errors.lastName"
84
+ />
85
+ </vibe-form-group>
86
+ </vibe-col>
87
+ </vibe-row>
88
+
89
+ <vibe-form-group label="Email">
90
+ <vibe-form-input
91
+ v-model="form.fields.email"
92
+ type="email"
93
+ placeholder="you@example.com"
94
+ :validation-state="stateFor('email')"
95
+ :validation-message="form.errors.email"
96
+ />
97
+ </vibe-form-group>
98
+
99
+ <vibe-form-group label="Address">
100
+ <vibe-form-input
101
+ v-model="form.fields.address"
102
+ placeholder="1234 Main St"
103
+ :validation-state="stateFor('address')"
104
+ :validation-message="form.errors.address"
105
+ />
106
+ </vibe-form-group>
107
+
108
+ <vibe-form-group label="Address 2 (optional)">
109
+ <vibe-form-input v-model="form.fields.address2" placeholder="Apartment or suite" />
110
+ </vibe-form-group>
111
+
112
+ <vibe-row :gutters="3">
113
+ <vibe-col :md="5">
114
+ <vibe-form-group label="Country">
115
+ <vibe-form-select
116
+ v-model="form.fields.country"
117
+ :options="countries"
118
+ placeholder="Choose..."
119
+ :validation-state="stateFor('country')"
120
+ :validation-message="form.errors.country"
121
+ />
122
+ </vibe-form-group>
123
+ </vibe-col>
124
+ <vibe-col :md="4">
125
+ <vibe-form-group label="State">
126
+ <vibe-form-select
127
+ v-model="form.fields.state"
128
+ :options="states"
129
+ placeholder="Choose..."
130
+ :validation-state="stateFor('state')"
131
+ :validation-message="form.errors.state"
132
+ />
133
+ </vibe-form-group>
134
+ </vibe-col>
135
+ <vibe-col :md="3">
136
+ <vibe-form-group label="Zip">
137
+ <vibe-form-input
138
+ v-model="form.fields.zip"
139
+ :validation-state="stateFor('zip')"
140
+ :validation-message="form.errors.zip"
141
+ />
142
+ </vibe-form-group>
143
+ </vibe-col>
144
+ </vibe-row>
145
+
146
+ <hr class="my-4">
147
+
148
+ <h4 class="mb-3">Payment</h4>
149
+ <vibe-form-radio
150
+ v-for="opt in paymentOptions"
151
+ :key="opt.value"
152
+ v-model="form.fields.payment"
153
+ name="payment"
154
+ :value="opt.value"
155
+ :label="opt.label"
156
+ />
157
+
158
+ <vibe-row :gutters="3" class="mt-3">
159
+ <vibe-col :md="6">
160
+ <vibe-form-group label="Name on card">
161
+ <vibe-form-input
162
+ v-model="form.fields.cardName"
163
+ :validation-state="stateFor('cardName')"
164
+ :validation-message="form.errors.cardName"
165
+ />
166
+ </vibe-form-group>
167
+ </vibe-col>
168
+ <vibe-col :md="6">
169
+ <vibe-form-group label="Card number">
170
+ <vibe-form-input
171
+ v-model="form.fields.cardNumber"
172
+ placeholder="•••• •••• •••• ••••"
173
+ :validation-state="stateFor('cardNumber')"
174
+ :validation-message="form.errors.cardNumber"
175
+ />
176
+ </vibe-form-group>
177
+ </vibe-col>
178
+ </vibe-row>
179
+
180
+ <vibe-form-checkbox v-model="form.fields.saveInfo" class="mt-3">
181
+ Save this information for next time
182
+ </vibe-form-checkbox>
183
+
184
+ <hr class="my-4">
185
+
186
+ <vibe-button type="submit" variant="primary" size="lg" class="w-100">
187
+ <vibe-icon icon="lock-fill" class="me-2"></vibe-icon>
188
+ Continue to payment
189
+ </vibe-button>
190
+ </form>
191
+ </vibe-card>
192
+ </vibe-col>
193
+ </vibe-row>
194
+ </vibe-container>
195
+
196
+ <vibe-toast-host></vibe-toast-host>
197
+ </div>
198
+
199
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
200
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
201
+ <script src="../dist/vibeui.umd.js"></script>
202
+ <script>
203
+ const { createApp, ref, computed } = Vue;
204
+ const { useForm, useToast, validators } = VibeUI;
205
+
206
+ createApp({
207
+ setup() {
208
+ const toast = useToast();
209
+ const promo = ref('');
210
+
211
+ const cart = [
212
+ { name: 'Product name', desc: 'Brief description', price: 12 },
213
+ { name: 'Second product', desc: 'Brief description', price: 8 },
214
+ { name: 'Third item', desc: 'Brief description', price: 5 }
215
+ ];
216
+ const summaryItems = computed(() => {
217
+ const total = cart.reduce((s, i) => s + i.price, 0);
218
+ return [
219
+ ...cart.map(i => ({ name: i.name, desc: i.desc, price: `$${i.price}` })),
220
+ { name: 'Total (USD)', price: `$${total}`, total: true }
221
+ ];
222
+ });
223
+
224
+ const countries = [
225
+ { text: 'United States', value: 'us' },
226
+ { text: 'Canada', value: 'ca' },
227
+ { text: 'United Kingdom', value: 'gb' }
228
+ ];
229
+ const states = [
230
+ { text: 'California', value: 'ca' },
231
+ { text: 'New York', value: 'ny' },
232
+ { text: 'Texas', value: 'tx' }
233
+ ];
234
+ const paymentOptions = [
235
+ { label: 'Credit card', value: 'credit' },
236
+ { label: 'Debit card', value: 'debit' },
237
+ { label: 'PayPal', value: 'paypal' }
238
+ ];
239
+
240
+ const form = useForm({
241
+ firstName: '', lastName: '', email: '', address: '', address2: '',
242
+ country: '', state: '', zip: '', payment: 'credit',
243
+ cardName: '', cardNumber: '', saveInfo: false
244
+ });
245
+ const submitted = ref(false);
246
+ const stateFor = (key) => !submitted.value ? null : (form.errors[key] ? 'invalid' : 'valid');
247
+
248
+ const onRedeem = () => {
249
+ if (promo.value.trim()) toast.success(`Promo "${promo.value}" applied`);
250
+ else toast.warn('Enter a promo code first');
251
+ };
252
+
253
+ const onSubmit = async () => {
254
+ submitted.value = true;
255
+ const result = await form.validate({
256
+ firstName: [validators.required('Required')],
257
+ lastName: [validators.required('Required')],
258
+ email: [validators.required('Required'), validators.email('Enter a valid email')],
259
+ address: [validators.required('Required')],
260
+ country: [validators.required('Please select a country')],
261
+ state: [validators.required('Please select a state')],
262
+ zip: [validators.required('Required')],
263
+ cardName: [validators.required('Required')],
264
+ cardNumber: [validators.required('Required'), validators.minLength(12, 'Card number looks too short')]
265
+ });
266
+ if (result.valid) toast.success('Order placed — thank you!');
267
+ else toast.error('Please fix the highlighted fields');
268
+ };
269
+
270
+ return { cart, summaryItems, promo, countries, states, paymentOptions, form, stateFor, onRedeem, onSubmit };
271
+ }
272
+ }).use(VibeUI.default).mount('#app');
273
+ </script>
274
+ </body>
275
+ </html>
package/examples/cover.html ADDED
@@ -0,0 +1,89 @@
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>Cover - 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
+ .cover {
12
+ min-height: 100vh;
13
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #6a82fb 100%);
14
+ }
15
+ </style>
16
+
17
+ <!-- VibeToast loads Bootstrap JS internally via `import('bootstrap')`; the UMD bundle
18
+ keeps that bare specifier, so the page maps it here so toasts display. -->
19
+ <script type="importmap">
20
+ {
21
+ "imports": {
22
+ "bootstrap": "https://esm.sh/bootstrap@5.3.0"
23
+ }
24
+ }
25
+ </script>
26
+ </head>
27
+ <body>
28
+ <div id="app">
29
+ <div class="cover d-flex flex-column text-white" data-bs-theme="dark">
30
+ <!-- Masthead -->
31
+ <header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4">
32
+ <a href="#" class="d-flex align-items-center text-white text-decoration-none me-md-auto mb-2 mb-md-0">
33
+ <vibe-icon icon="compass-fill" class="me-2 fs-4"></vibe-icon>
34
+ <span class="fs-5 fw-bold">Cover</span>
35
+ </a>
36
+ <vibe-nav :items="navItems" class="justify-content-center"></vibe-nav>
37
+ </header>
38
+
39
+ <!-- Centered cover content (VibeHero fills the remaining space) -->
40
+ <vibe-hero align="center" class="flex-grow-1 d-flex align-items-center">
41
+ <vibe-col :lg="7" class="mx-auto">
42
+ <h1 class="display-3 fw-bold mb-3">Cover your page beautifully.</h1>
43
+ <p class="lead mb-4">
44
+ A one-page template built entirely with VibeUI components — a hero,
45
+ navigation, and footer, ready to drop your message into.
46
+ </p>
47
+ <div class="d-flex gap-3 justify-content-center">
48
+ <vibe-button variant="light" size="lg" @click="onLearnMore">
49
+ <vibe-icon icon="rocket-takeoff-fill" class="me-2"></vibe-icon>
50
+ Learn more
51
+ </vibe-button>
52
+ <vibe-button variant="light" outline size="lg" href="#features">
53
+ Features
54
+ </vibe-button>
55
+ </div>
56
+ </vibe-col>
57
+ </vibe-hero>
58
+
59
+ <!-- Mastfoot -->
60
+ <footer class="p-3 text-center text-white-50">
61
+ <small>Built with VibeUI by <a href="https://technosorcery.com" class="text-white">TechnoSorcery.com</a></small>
62
+ </footer>
63
+ </div>
64
+
65
+ <vibe-toast-host></vibe-toast-host>
66
+ </div>
67
+
68
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
69
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
70
+ <script src="../dist/vibeui.umd.js"></script>
71
+ <script>
72
+ const { createApp } = Vue;
73
+ const { useToast } = VibeUI;
74
+
75
+ createApp({
76
+ setup() {
77
+ const toast = useToast();
78
+ const navItems = [
79
+ { text: 'Home', href: '#', active: true },
80
+ { text: 'Features', href: '#' },
81
+ { text: 'Contact', href: '#' }
82
+ ];
83
+ const onLearnMore = () => toast.info('Thanks for your interest!');
84
+ return { navItems, onLearnMore };
85
+ }
86
+ }).use(VibeUI.default).mount('#app');
87
+ </script>
88
+ </body>
89
+ </html>
package/examples/dashboard.html ADDED
@@ -0,0 +1,156 @@
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>Dashboard - 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
+ body { font-size: .875rem; }
12
+ .sidebar {
13
+ position: fixed;
14
+ top: 0;
15
+ bottom: 0;
16
+ left: 0;
17
+ z-index: 100;
18
+ padding: 48px 0 0;
19
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
20
+ }
21
+ @media (max-width: 767.98px) {
22
+ .sidebar { top: 5rem; }
23
+ }
24
+ .sidebar-sticky {
25
+ height: calc(100vh - 48px);
26
+ overflow-x: hidden;
27
+ overflow-y: auto;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <div id="app">
33
+ <!-- Dashboard header: VibeNavbar with container disabled so the brand can use
34
+ column classes and the search input can span full width (custom layout). -->
35
+ <vibe-navbar variant="dark" :container="false" position="sticky-top" tag="header" class="flex-md-nowrap p-0 shadow">
36
+ <vibe-navbar-brand href="./" class="col-md-3 col-lg-2 me-0 px-3 fs-6">
37
+ <vibe-icon icon="speedometer2" class="me-2"></vibe-icon>
38
+ Dashboard
39
+ </vibe-navbar-brand>
40
+ <!-- Raw toggler: driven by Bootstrap's data API against the raw sidebar collapse below. -->
41
+ <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu">
42
+ <span class="navbar-toggler-icon"></span>
43
+ </button>
44
+ <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" v-model="searchQuery">
45
+ <div class="navbar-nav">
46
+ <div class="nav-item text-nowrap">
47
+ <a class="nav-link px-3" href="#">Sign out</a>
48
+ </div>
49
+ </div>
50
+ </vibe-navbar>
51
+
52
+ <vibe-container fluid>
53
+ <vibe-row>
54
+ <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
55
+ <div class="position-sticky pt-3 sidebar-sticky">
56
+ <vibe-list-group flush :items="menuItems">
57
+ <template #item="{ item }">
58
+ <vibe-icon :icon="item.icon" class="me-2"></vibe-icon>
59
+ {{ item.text }}
60
+ </template>
61
+ </vibe-list-group>
62
+
63
+ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
64
+ <span>Saved reports</span>
65
+ </h6>
66
+ <vibe-list-group flush :items="savedReportItems">
67
+ <template #item="{ item }">
68
+ <vibe-icon icon="file-earmark-text" class="me-2"></vibe-icon>
69
+ {{ item.text }}
70
+ </template>
71
+ </vibe-list-group>
72
+ </div>
73
+ </nav>
74
+
75
+ <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
76
+ <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
77
+ <h1 class="h2">Dashboard</h1>
78
+ <vibe-button-group size="sm" class="me-2">
79
+ <vibe-button variant="secondary" outline>Share</vibe-button>
80
+ <vibe-button variant="secondary" outline>Export</vibe-button>
81
+ </vibe-button-group>
82
+ </div>
83
+
84
+ <vibe-row :gutters="4" class="mb-4">
85
+ <vibe-col :md="3" v-for="stat in stats" :key="stat.label">
86
+ <vibe-card :class="`border-${stat.variant}`">
87
+ <h6 class="text-muted">{{ stat.label }}</h6>
88
+ <h3 class="mb-0">{{ stat.value }}</h3>
89
+ <small :class="`text-${stat.changeClass}`">
90
+ <vibe-icon :icon="stat.changeIcon"></vibe-icon>
91
+ {{ stat.change }}
92
+ </small>
93
+ </vibe-card>
94
+ </vibe-col>
95
+ </vibe-row>
96
+
97
+ <h2>Recent Orders</h2>
98
+ <vibe-data-table :items="orders" :columns="orderColumns" row-key="id" striped hover small>
99
+ <template #cell(status)="{ item }">
100
+ <vibe-badge :variant="item.statusVariant">{{ item.status }}</vibe-badge>
101
+ </template>
102
+ </vibe-data-table>
103
+ </main>
104
+ </vibe-row>
105
+ </vibe-container>
106
+ </div>
107
+
108
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
109
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
110
+ <script src="../dist/vibeui.umd.js"></script>
111
+ <script>
112
+ const { createApp } = Vue;
113
+
114
+ createApp({
115
+ data() {
116
+ return {
117
+ searchQuery: '',
118
+ orderColumns: [
119
+ { key: 'id', label: 'Order ID', sortable: true },
120
+ { key: 'customer', label: 'Customer', sortable: true, searchable: true },
121
+ { key: 'product', label: 'Product', searchable: true },
122
+ { key: 'amount', label: 'Amount', sortable: true },
123
+ { key: 'status', label: 'Status' }
124
+ ],
125
+ menuItems: [
126
+ { text: 'Dashboard', icon: 'house-fill', href: '#', active: true },
127
+ { text: 'Orders', icon: 'file-earmark', href: '#', active: false },
128
+ { text: 'Products', icon: 'cart', href: '#', active: false },
129
+ { text: 'Customers', icon: 'people', href: '#', active: false },
130
+ { text: 'Reports', icon: 'graph-up', href: '#', active: false }
131
+ ],
132
+ savedReports: ['Current month', 'Last quarter', 'Year-end sale'],
133
+ stats: [
134
+ { label: 'Total Revenue', value: '$45,231', change: '12.5%', changeIcon: 'arrow-up', changeClass: 'success', variant: 'primary' },
135
+ { label: 'Orders', value: '1,234', change: '8.2%', changeIcon: 'arrow-up', changeClass: 'success', variant: 'success' },
136
+ { label: 'Customers', value: '567', change: '3.1%', changeIcon: 'arrow-down', changeClass: 'danger', variant: 'warning' },
137
+ { label: 'Bounce Rate', value: '42%', change: 'No change', changeIcon: 'dash', changeClass: 'muted', variant: 'info' }
138
+ ],
139
+ orders: [
140
+ { id: '#1001', customer: 'John Doe', product: 'Widget', amount: '$129.99', status: 'Completed', statusVariant: 'success' },
141
+ { id: '#1002', customer: 'Jane Smith', product: 'Gadget', amount: '$79.99', status: 'Pending', statusVariant: 'warning' },
142
+ { id: '#1003', customer: 'Bob Johnson', product: 'Tool', amount: '$199.99', status: 'Processing', statusVariant: 'info' },
143
+ { id: '#1004', customer: 'Alice Brown', product: 'Device', amount: '$299.99', status: 'Completed', statusVariant: 'success' },
144
+ { id: '#1005', customer: 'Charlie Wilson', product: 'Accessory', amount: '$49.99', status: 'Shipped', statusVariant: 'primary' }
145
+ ]
146
+ }
147
+ },
148
+ computed: {
149
+ savedReportItems() {
150
+ return this.savedReports.map(r => ({ text: r, href: '#' }));
151
+ }
152
+ }
153
+ }).use(VibeUI.default).mount('#app');
154
+ </script>
155
+ </body>
156
+ </html>
package/examples/index.html ADDED
@@ -0,0 +1,129 @@
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>VibeUI Examples</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
+ .example-card {
12
+ transition: transform 0.2s, box-shadow 0.2s;
13
+ text-decoration: none;
14
+ color: inherit;
15
+ display: block;
16
+ }
17
+ .example-card:hover {
18
+ transform: translateY(-4px);
19
+ box-shadow: 0 8px 16px rgba(0,0,0,0.1);
20
+ }
21
+ </style>
22
+ </head>
23
+ <body>
24
+ <div id="app">
25
+ <vibe-navbar variant="primary" theme="dark" expand="lg" class="mb-4">
26
+ <vibe-navbar-brand href="#" class="fw-bold">
27
+ <vibe-icon icon="lightning-charge-fill"></vibe-icon>
28
+ VibeUI Examples
29
+ </vibe-navbar-brand>
30
+ <span class="navbar-text text-white-50">
31
+ Powered by Bootstrap 5.3 &amp; Vue 3
32
+ </span>
33
+ </vibe-navbar>
34
+
35
+ <vibe-container>
36
+ <vibe-row class="mb-5">
37
+ <vibe-col :lg="8" class="mx-auto text-center">
38
+ <h1 class="display-4 fw-bold mb-3">VibeUI Examples</h1>
39
+ <p class="lead text-muted">
40
+ Get started with VibeUI using these pre-built examples. Each example demonstrates
41
+ different components and patterns you can use in your Vue 3 applications.
42
+ </p>
43
+ </vibe-col>
44
+ </vibe-row>
45
+
46
+ <!-- Starters -->
47
+ <section class="mb-5">
48
+ <h2 class="mb-3">
49
+ <vibe-icon icon="play-circle" class="text-primary"></vibe-icon>
50
+ Starters
51
+ </h2>
52
+ <p class="text-muted mb-4">Quick start templates to begin building with VibeUI</p>
53
+ <vibe-row :gutters="4">
54
+ <vibe-col :md="6" :lg="4" v-for="ex in starters" :key="ex.href">
55
+ <a :href="ex.href" class="example-card">
56
+ <vibe-card class="h-100">
57
+ <h5 class="card-title">
58
+ <vibe-icon :icon="ex.icon" :class="ex.iconClass"></vibe-icon>
59
+ {{ ex.title }}
60
+ </h5>
61
+ <p class="card-text text-muted">{{ ex.text }}</p>
62
+ </vibe-card>
63
+ </a>
64
+ </vibe-col>
65
+ </vibe-row>
66
+ </section>
67
+
68
+ <!-- Custom Components -->
69
+ <section class="mb-5">
70
+ <h2 class="mb-3">
71
+ <vibe-icon icon="grid-3x3-gap" class="text-primary"></vibe-icon>
72
+ Custom Components
73
+ </h2>
74
+ <p class="text-muted mb-4">Full-page examples built with VibeUI components</p>
75
+ <vibe-row :gutters="4">
76
+ <vibe-col :md="6" :lg="4" v-for="ex in examples" :key="ex.href">
77
+ <a :href="ex.href" class="example-card">
78
+ <vibe-card class="h-100">
79
+ <h5 class="card-title">
80
+ <vibe-icon :icon="ex.icon" :class="ex.iconClass"></vibe-icon>
81
+ {{ ex.title }}
82
+ </h5>
83
+ <p class="card-text text-muted">{{ ex.text }}</p>
84
+ </vibe-card>
85
+ </a>
86
+ </vibe-col>
87
+ </vibe-row>
88
+ </section>
89
+
90
+ <footer class="border-top pt-4 pb-4 mt-5 text-center text-muted">
91
+ <p class="mb-0">Built with ✨ by <a href="https://technosorcery.com" class="text-decoration-none">TechnoSorcery.com</a></p>
92
+ <p class="small mb-0 mt-2">VibeUI - A Vue 3 UI library for Bootstrap 5.3</p>
93
+ </footer>
94
+ </vibe-container>
95
+ </div>
96
+
97
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
98
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
99
+ <script src="../dist/vibeui.umd.js"></script>
100
+ <script>
101
+ const { createApp } = Vue;
102
+
103
+ createApp({
104
+ data() {
105
+ return {
106
+ starters: [
107
+ { href: 'starter.html', icon: 'file-earmark-code', iconClass: 'text-primary', title: 'Starter Template', text: 'Basic Vue app with VibeUI components' }
108
+ ],
109
+ examples: [
110
+ { href: 'album.html', icon: 'images', iconClass: 'text-info', title: 'Album', text: 'Photo gallery with cards and grid layout' },
111
+ { href: 'pricing.html', icon: 'cash-stack', iconClass: 'text-success', title: 'Pricing', text: 'Pricing tables with cards and badges' },
112
+ { href: 'dashboard.html', icon: 'speedometer2', iconClass: 'text-primary', title: 'Dashboard', text: 'Admin dashboard with sidebar navigation' },
113
+ { href: 'sign-in.html', icon: 'box-arrow-in-right', iconClass: 'text-primary', title: 'Sign in', text: 'Centered sign-in form with validation' },
114
+ { href: 'checkout.html', icon: 'bag-check', iconClass: 'text-success', title: 'Checkout', text: 'Billing form, order summary, and validation' },
115
+ { href: 'sidebars.html', icon: 'layout-sidebar', iconClass: 'text-info', title: 'Sidebars', text: 'Sidebar nav + mobile offcanvas with reactive sections' },
116
+ { href: 'cover.html', icon: 'fullscreen', iconClass: 'text-primary', title: 'Cover', text: 'Full-viewport one-page hero with VibeHero' },
117
+ { href: 'product.html', icon: 'box-seam', iconClass: 'text-primary', title: 'Product', text: 'Marketing page with hero, feature grid, and product cards' },
118
+ { href: 'carousel.html', icon: 'images', iconClass: 'text-info', title: 'Carousel', text: 'Full-width carousel with marketing columns and featurettes' },
119
+ { href: 'blog.html', icon: 'newspaper', iconClass: 'text-secondary', title: 'Blog', text: 'Magazine layout with posts, pagination, and sidebar' },
120
+ { href: 'jumbotron.html', icon: 'card-heading', iconClass: 'text-primary', title: 'Jumbotron', text: 'Modern jumbotron built with the bordered VibeHero' },
121
+ { href: 'sticky-footer.html', icon: 'layout-text-window-reverse', iconClass: 'text-secondary', title: 'Sticky footer', text: 'Footer pinned to the bottom of the viewport' },
122
+ { href: 'sticky-footer-navbar.html', icon: 'window-stack', iconClass: 'text-secondary', title: 'Sticky footer + navbar', text: 'Fixed top navbar plus a sticky footer' }
123
+ ]
124
+ }
125
+ }
126
+ }).use(VibeUI.default).mount('#app');
127
+ </script>
128
+ </body>
129
+ </html>