@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/sidebars.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, viewport-fit=cover">
6
+ <title>Sidebars - 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
+ .app-sidebar { width: 260px; min-height: 100vh; position: sticky; top: 0; }
12
+ </style>
13
+
14
+ <!-- VibeOffcanvas + VibeDropdown load Bootstrap JS internally via `import('bootstrap')`;
15
+ the UMD bundle keeps that bare specifier, so the page maps it here. -->
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
+ <!-- Mobile top bar: toggles the offcanvas sidebar -->
27
+ <vibe-navbar variant="dark" expand="lg" position="sticky-top" class="d-lg-none">
28
+ <button class="navbar-toggler" type="button" @click="showSidebar = true">
29
+ <span class="navbar-toggler-icon"></span>
30
+ </button>
31
+ <vibe-navbar-brand href="#" class="fw-bold">
32
+ <vibe-icon icon="layers-fill" class="me-2"></vibe-icon>
33
+ Acme
34
+ </vibe-navbar-brand>
35
+ </vibe-navbar>
36
+
37
+ <div class="d-flex">
38
+ <!-- Desktop sidebar -->
39
+ <aside class="app-sidebar d-none d-lg-flex flex-column bg-dark text-white p-3" data-bs-theme="dark">
40
+ <a href="#" class="d-flex align-items-center mb-3 text-white text-decoration-none">
41
+ <vibe-icon icon="layers-fill" class="me-2 fs-4"></vibe-icon>
42
+ <span class="fs-5 fw-bold">Acme</span>
43
+ </a>
44
+ <hr>
45
+ <!-- Vertical pill nav, icons via #item slot, reactive active section -->
46
+ <vibe-nav vertical pills :items="navItems" @item-click="onNavClick" class="flex-grow-1">
47
+ <template #item="{ item }">
48
+ <vibe-icon :icon="item.icon" class="me-2"></vibe-icon>
49
+ {{ item.text }}
50
+ </template>
51
+ </vibe-nav>
52
+ <hr>
53
+ <vibe-dropdown
54
+ text="Jane Doe"
55
+ variant="dark"
56
+ direction="up"
57
+ :items="userMenu"
58
+ @item-click="onUserMenu"
59
+ >
60
+ <template #button>
61
+ <vibe-icon icon="person-circle" class="me-2"></vibe-icon>
62
+ Jane Doe
63
+ </template>
64
+ </vibe-dropdown>
65
+ </aside>
66
+
67
+ <!-- Main content -->
68
+ <main class="flex-grow-1 p-4">
69
+ <h1 class="h3 mb-1">{{ activeContent.title }}</h1>
70
+ <p class="text-muted">{{ activeContent.subtitle }}</p>
71
+
72
+ <vibe-row :gutters="3" class="mt-3">
73
+ <vibe-col :md="6" :xl="4" v-for="card in activeContent.cards" :key="card.title">
74
+ <vibe-card class="h-100 shadow-sm">
75
+ <template #header>
76
+ <vibe-icon :icon="card.icon" class="me-2"></vibe-icon>
77
+ {{ card.title }}
78
+ </template>
79
+ <p class="mb-0 text-muted">{{ card.body }}</p>
80
+ </vibe-card>
81
+ </vibe-col>
82
+ </vibe-row>
83
+ </main>
84
+ </div>
85
+
86
+ <!-- Mobile offcanvas sidebar: same nav, closes on selection -->
87
+ <vibe-offcanvas v-model="showSidebar" title="Acme" placement="start">
88
+ <vibe-nav vertical pills :items="navItems" @item-click="onNavClickMobile">
89
+ <template #item="{ item }">
90
+ <vibe-icon :icon="item.icon" class="me-2"></vibe-icon>
91
+ {{ item.text }}
92
+ </template>
93
+ </vibe-nav>
94
+ </vibe-offcanvas>
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, ref, computed } = Vue;
102
+ const { useToast } = VibeUI;
103
+
104
+ createApp({
105
+ setup() {
106
+ const toast = useToast();
107
+ const showSidebar = ref(false);
108
+ const activeSection = ref('dashboard');
109
+
110
+ const menu = [
111
+ { id: 'dashboard', text: 'Dashboard', icon: 'speedometer2' },
112
+ { id: 'orders', text: 'Orders', icon: 'bag' },
113
+ { id: 'products', text: 'Products', icon: 'box-seam' },
114
+ { id: 'customers', text: 'Customers', icon: 'people' },
115
+ { id: 'reports', text: 'Reports', icon: 'graph-up' },
116
+ { id: 'settings', text: 'Settings', icon: 'gear' }
117
+ ];
118
+
119
+ // No href -> VibeNav renders clickable buttons (no Bootstrap Tab JS), active drives content.
120
+ const navItems = computed(() => menu.map(m => ({
121
+ text: m.text, icon: m.icon, active: m.id === activeSection.value
122
+ })));
123
+
124
+ const content = {
125
+ dashboard: { title: 'Dashboard', subtitle: 'Overview of your store at a glance.', cards: [
126
+ { title: 'Revenue', icon: 'cash-stack', body: '$45,231 this month, up 12%.' },
127
+ { title: 'Orders', icon: 'bag-check', body: '1,234 orders awaiting fulfilment.' },
128
+ { title: 'Visitors', icon: 'eye', body: '8,540 unique visitors this week.' }
129
+ ]},
130
+ orders: { title: 'Orders', subtitle: 'Track and manage customer orders.', cards: [
131
+ { title: 'Pending', icon: 'hourglass-split', body: '42 orders pending review.' },
132
+ { title: 'Shipped', icon: 'truck', body: '318 orders shipped this week.' }
133
+ ]},
134
+ products: { title: 'Products', subtitle: 'Your catalog and inventory.', cards: [
135
+ { title: 'In stock', icon: 'box-seam', body: '512 SKUs available.' },
136
+ { title: 'Low stock', icon: 'exclamation-triangle', body: '7 products below threshold.' }
137
+ ]},
138
+ customers: { title: 'Customers', subtitle: 'People who buy from you.', cards: [
139
+ { title: 'Total', icon: 'people', body: '5,671 registered customers.' }
140
+ ]},
141
+ reports: { title: 'Reports', subtitle: 'Insights and analytics.', cards: [
142
+ { title: 'Sales trend', icon: 'graph-up-arrow', body: 'Steady growth over 6 months.' }
143
+ ]},
144
+ settings: { title: 'Settings', subtitle: 'Configure your workspace.', cards: [
145
+ { title: 'Preferences', icon: 'sliders', body: 'Theme, locale, and notifications.' }
146
+ ]}
147
+ };
148
+ const activeContent = computed(() => content[activeSection.value]);
149
+
150
+ const userMenu = [
151
+ { text: 'Profile' },
152
+ { text: 'Billing' },
153
+ { divider: true },
154
+ { text: 'Sign out' }
155
+ ];
156
+
157
+ const onNavClick = ({ index }) => { activeSection.value = menu[index].id; };
158
+ const onNavClickMobile = ({ index }) => { activeSection.value = menu[index].id; showSidebar.value = false; };
159
+ const onUserMenu = ({ item }) => { toast.info(item.text); };
160
+
161
+ return { showSidebar, navItems, activeContent, userMenu, onNavClick, onNavClickMobile, onUserMenu };
162
+ }
163
+ }).use(VibeUI.default).mount('#app');
164
+ </script>
165
+ </body>
166
+ </html>
package/examples/sign-in.html ADDED
@@ -0,0 +1,119 @@
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>Sign in - 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="min-vh-100 d-flex align-items-center justify-content-center py-5">
27
+ <vibe-col :md="7" :lg="5" :xl="4">
28
+ <vibe-card class="shadow-sm">
29
+ <div class="text-center mb-4">
30
+ <vibe-icon icon="box-seam-fill" class="text-primary" font-size="2.5rem"></vibe-icon>
31
+ <h1 class="h3 mt-2 mb-1">Sign in</h1>
32
+ <p class="text-muted small mb-0">Welcome back — please enter your details.</p>
33
+ </div>
34
+
35
+ <form novalidate @submit.prevent="onSubmit">
36
+ <vibe-form-group label="Email address">
37
+ <vibe-form-input
38
+ v-model="form.fields.email"
39
+ type="email"
40
+ placeholder="you@example.com"
41
+ :validation-state="stateFor('email')"
42
+ :validation-message="form.errors.email"
43
+ />
44
+ </vibe-form-group>
45
+
46
+ <vibe-form-group label="Password">
47
+ <vibe-form-input
48
+ v-model="form.fields.password"
49
+ type="password"
50
+ placeholder="••••••••"
51
+ :validation-state="stateFor('password')"
52
+ :validation-message="form.errors.password"
53
+ />
54
+ </vibe-form-group>
55
+
56
+ <div class="d-flex justify-content-between align-items-center mb-3">
57
+ <vibe-form-checkbox v-model="form.fields.remember">Remember me</vibe-form-checkbox>
58
+ <a href="#" class="small text-decoration-none">Forgot password?</a>
59
+ </div>
60
+
61
+ <vibe-button type="submit" variant="primary" class="w-100">
62
+ <vibe-icon icon="box-arrow-in-right" class="me-2"></vibe-icon>
63
+ Sign in
64
+ </vibe-button>
65
+ </form>
66
+
67
+ <template #footer>
68
+ <div class="text-center small text-muted">
69
+ Don't have an account? <a href="#" class="text-decoration-none">Sign up</a>
70
+ </div>
71
+ </template>
72
+ </vibe-card>
73
+ </vibe-col>
74
+ </vibe-container>
75
+
76
+ <vibe-toast-host></vibe-toast-host>
77
+ </div>
78
+
79
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
80
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
81
+ <script src="../dist/vibeui.umd.js"></script>
82
+ <script>
83
+ const { createApp, ref } = Vue;
84
+ const { useForm, useToast, validators } = VibeUI;
85
+
86
+ createApp({
87
+ setup() {
88
+ const toast = useToast();
89
+ const form = useForm({ email: '', password: '', remember: false });
90
+ const submitted = ref(false);
91
+
92
+ // Per-field state: nothing before first submit, then valid/invalid from errors.
93
+ const stateFor = (key) => !submitted.value ? null : (form.errors[key] ? 'invalid' : 'valid');
94
+
95
+ const onSubmit = async () => {
96
+ submitted.value = true;
97
+ const result = await form.validate({
98
+ email: [
99
+ validators.required('Email is required'),
100
+ validators.email('Enter a valid email address')
101
+ ],
102
+ password: [
103
+ validators.required('Password is required'),
104
+ validators.minLength(8, 'Must be at least 8 characters')
105
+ ]
106
+ });
107
+ if (result.valid) {
108
+ toast.success(`Signed in as ${form.fields.email}`);
109
+ } else {
110
+ toast.error('Please fix the highlighted fields');
111
+ }
112
+ };
113
+
114
+ return { form, submitted, stateFor, onSubmit };
115
+ }
116
+ }).use(VibeUI.default).mount('#app');
117
+ </script>
118
+ </body>
119
+ </html>
package/examples/starter.html ADDED
@@ -0,0 +1,314 @@
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>Starter Template - VibeUI</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
+ .feature-icon {
12
+ width: 4rem;
13
+ height: 4rem;
14
+ border-radius: .75rem;
15
+ display: inline-flex;
16
+ align-items: center;
17
+ justify-content: center;
18
+ font-size: 2rem;
19
+ margin-bottom: 1rem;
20
+ }
21
+ </style>
22
+
23
+ <!-- VibeUI loads Bootstrap JS internally via `import('bootstrap')`; the UMD bundle
24
+ keeps that bare specifier, so the page maps it here so the dropdown works. -->
25
+ <script type="importmap">
26
+ {
27
+ "imports": {
28
+ "bootstrap": "https://esm.sh/bootstrap@5.3.0"
29
+ }
30
+ }
31
+ </script>
32
+ </head>
33
+ <body>
34
+ <div id="app">
35
+ <vibe-navbar variant="dark" expand="lg" class="shadow-sm">
36
+ <vibe-container>
37
+ <vibe-navbar-brand href="#">
38
+ <vibe-icon icon="lightning-charge-fill" class="me-2"></vibe-icon>
39
+ VibeUI
40
+ </vibe-navbar-brand>
41
+ <vibe-navbar-toggle target="navbarNav"></vibe-navbar-toggle>
42
+ <vibe-collapse id="navbarNav" is-nav>
43
+ <vibe-navbar-nav :items="navItems" class="ms-auto"></vibe-navbar-nav>
44
+ </vibe-collapse>
45
+ </vibe-container>
46
+ </vibe-navbar>
47
+
48
+ <!-- Hero Section -->
49
+ <vibe-hero
50
+ gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
51
+ align="start"
52
+ class="text-white"
53
+ >
54
+ <vibe-row class="align-items-center">
55
+ <vibe-col :lg="6">
56
+ <h1 class="display-3 fw-bold mb-3">Build amazing apps with VibeUI</h1>
57
+ <p class="lead mb-4">A modern Vue 3 component library built on Bootstrap 5.3. Create beautiful, responsive interfaces in minutes.</p>
58
+ <div class="d-flex gap-3 mb-4">
59
+ <vibe-button variant="light" size="lg" @click="handleGetStarted">
60
+ <vibe-icon icon="rocket-takeoff-fill" class="me-2"></vibe-icon>
61
+ Get Started
62
+ </vibe-button>
63
+ <vibe-button variant="light" outline size="lg">
64
+ <vibe-icon icon="github" class="me-2"></vibe-icon>
65
+ View on GitHub
66
+ </vibe-button>
67
+ </div>
68
+ </vibe-col>
69
+ <vibe-col :lg="6" class="text-center">
70
+ <img src="https://via.placeholder.com/600x400/ffffff/667eea?text=VibeUI+Demo" alt="Demo" class="img-fluid rounded-4 shadow-lg">
71
+ </vibe-col>
72
+ </vibe-row>
73
+ </vibe-hero>
74
+
75
+ <!-- Alert Demo -->
76
+ <vibe-container class="my-5">
77
+ <vibe-row>
78
+ <vibe-col :cols="12">
79
+ <vibe-alert v-model="showAlert" variant="success" dismissible class="shadow-sm">
80
+ <vibe-icon icon="check-circle-fill" class="me-2"></vibe-icon>
81
+ <strong>Welcome!</strong> This is a live demo of VibeUI components. Try clicking the buttons below!
82
+ </vibe-alert>
83
+ </vibe-col>
84
+ </vibe-row>
85
+ </vibe-container>
86
+
87
+ <!-- Features -->
88
+ <vibe-container class="my-5 py-5">
89
+ <vibe-row>
90
+ <vibe-col :cols="12" class="text-center mb-5">
91
+ <h2 class="display-5 fw-bold">Why developers love VibeUI</h2>
92
+ <p class="lead text-muted">Everything you need to build modern web applications</p>
93
+ </vibe-col>
94
+ </vibe-row>
95
+ <vibe-row :gutters="4">
96
+ <vibe-col :md="4" v-for="feature in features" :key="feature.title">
97
+ <div class="text-center h-100">
98
+ <div :class="`feature-icon bg-${feature.color} bg-opacity-10 text-${feature.color}`">
99
+ <vibe-icon :icon="feature.icon"></vibe-icon>
100
+ </div>
101
+ <h4 class="fw-bold">{{ feature.title }}</h4>
102
+ <p class="text-muted">{{ feature.description }}</p>
103
+ </div>
104
+ </vibe-col>
105
+ </vibe-row>
106
+ </vibe-container>
107
+
108
+ <!-- Interactive Demo -->
109
+ <section class="bg-light py-5">
110
+ <vibe-container>
111
+ <vibe-row class="align-items-center">
112
+ <vibe-col :lg="6">
113
+ <h2 class="display-6 fw-bold mb-3">Interactive Components</h2>
114
+ <p class="lead text-muted mb-4">All components are fully reactive and work seamlessly with Vue 3.</p>
115
+
116
+ <div class="d-flex gap-2 mb-3 flex-wrap">
117
+ <vibe-button variant="primary" @click="counter++">
118
+ <vibe-icon icon="hand-thumbs-up-fill" class="me-2"></vibe-icon>
119
+ Like ({{ counter }})
120
+ </vibe-button>
121
+ <vibe-button variant="success">
122
+ <vibe-icon icon="share-fill" class="me-2"></vibe-icon>
123
+ Share
124
+ </vibe-button>
125
+ <vibe-dropdown id="demo-dropdown" text="More" variant="secondary" :items="moreItems">
126
+ <template #item="{ item }">
127
+ <vibe-icon :icon="item.icon" class="me-2"></vibe-icon>
128
+ {{ item.text }}
129
+ </template>
130
+ </vibe-dropdown>
131
+ </div>
132
+
133
+ <div class="mb-4">
134
+ <vibe-badge variant="primary" class="me-2">Vue 3</vibe-badge>
135
+ <vibe-badge variant="success" class="me-2">TypeScript</vibe-badge>
136
+ <vibe-badge variant="info" class="me-2">Bootstrap 5.3</vibe-badge>
137
+ <vibe-badge variant="warning">Responsive</vibe-badge>
138
+ </div>
139
+
140
+ <vibe-progress
141
+ class="mb-2"
142
+ height="20px"
143
+ :bars="[{ value: 75, variant: 'primary', striped: true, animated: true, label: '75% Complete' }]"
144
+ ></vibe-progress>
145
+ </vibe-col>
146
+ <vibe-col :lg="6">
147
+ <vibe-card class="shadow border-0">
148
+ <h5 class="card-title fw-bold mb-3">Component Showcase</h5>
149
+ <vibe-list-group flush :items="showcaseItems">
150
+ <template #item="{ item }">
151
+ <div class="d-flex justify-content-between align-items-center">
152
+ <div>
153
+ <vibe-icon :icon="item.icon" :class="`text-${item.color} me-2`"></vibe-icon>
154
+ {{ item.name }}
155
+ </div>
156
+ <vibe-badge :variant="item.color" pill>{{ item.count }}</vibe-badge>
157
+ </div>
158
+ </template>
159
+ </vibe-list-group>
160
+ </vibe-card>
161
+ </vibe-col>
162
+ </vibe-row>
163
+ </vibe-container>
164
+ </section>
165
+
166
+ <!-- Stats -->
167
+ <vibe-container class="py-5 my-5">
168
+ <vibe-row class="text-center" :gutters="4">
169
+ <vibe-col :md="3" v-for="stat in stats" :key="stat.label">
170
+ <div class="h-100">
171
+ <div :class="`display-4 fw-bold text-${stat.color}`">{{ stat.value }}</div>
172
+ <p class="text-muted mb-0">{{ stat.label }}</p>
173
+ </div>
174
+ </vibe-col>
175
+ </vibe-row>
176
+ </vibe-container>
177
+
178
+ <!-- CTA -->
179
+ <section class="bg-primary text-white py-5">
180
+ <vibe-container class="text-center">
181
+ <vibe-row>
182
+ <vibe-col :cols="12">
183
+ <h2 class="display-5 fw-bold mb-3">Ready to get started?</h2>
184
+ <p class="lead mb-4">Join thousands of developers building with VibeUI</p>
185
+ <vibe-button variant="light" size="lg" class="me-3">
186
+ <vibe-icon icon="download" class="me-2"></vibe-icon>
187
+ Install Now
188
+ </vibe-button>
189
+ <vibe-button variant="light" outline size="lg">
190
+ <vibe-icon icon="book" class="me-2"></vibe-icon>
191
+ Read Docs
192
+ </vibe-button>
193
+ </vibe-col>
194
+ </vibe-row>
195
+ </vibe-container>
196
+ </section>
197
+
198
+ <!-- Footer -->
199
+ <footer class="bg-dark text-white py-5">
200
+ <vibe-container>
201
+ <vibe-row :gutters="4">
202
+ <vibe-col :lg="4">
203
+ <h5 class="fw-bold mb-3">
204
+ <vibe-icon icon="lightning-charge-fill" class="me-2"></vibe-icon>
205
+ VibeUI
206
+ </h5>
207
+ <p class="text-white-50">A modern Vue 3 UI library for building beautiful applications with Bootstrap 5.3.</p>
208
+ </vibe-col>
209
+ <vibe-col :lg="2">
210
+ <h6 class="fw-bold mb-3">Product</h6>
211
+ <ul class="list-unstyled">
212
+ <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Features</a></li>
213
+ <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Pricing</a></li>
214
+ <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Examples</a></li>
215
+ </ul>
216
+ </vibe-col>
217
+ <vibe-col :lg="2">
218
+ <h6 class="fw-bold mb-3">Resources</h6>
219
+ <ul class="list-unstyled">
220
+ <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Documentation</a></li>
221
+ <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Components</a></li>
222
+ <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">GitHub</a></li>
223
+ </ul>
224
+ </vibe-col>
225
+ <vibe-col :lg="4">
226
+ <h6 class="fw-bold mb-3">Stay Updated</h6>
227
+ <p class="text-white-50 small">Get the latest updates and news about VibeUI.</p>
228
+ <div class="d-flex gap-2">
229
+ <a href="#" class="text-white"><vibe-icon icon="twitter" size="lg"></vibe-icon></a>
230
+ <a href="#" class="text-white"><vibe-icon icon="github" size="lg"></vibe-icon></a>
231
+ <a href="#" class="text-white"><vibe-icon icon="discord" size="lg"></vibe-icon></a>
232
+ </div>
233
+ </vibe-col>
234
+ </vibe-row>
235
+ <hr class="my-4 border-secondary">
236
+ <vibe-row>
237
+ <vibe-col :md="6">
238
+ <p class="text-white-50 small mb-0">© 2024 VibeUI. Built with ✨ by <a href="https://technosorcery.com" class="text-white-50">TechnoSorcery.com</a></p>
239
+ </vibe-col>
240
+ <vibe-col :md="6" class="text-md-end">
241
+ <a href="#" class="text-white-50 text-decoration-none small me-3">Privacy</a>
242
+ <a href="#" class="text-white-50 text-decoration-none small">Terms</a>
243
+ </vibe-col>
244
+ </vibe-row>
245
+ </vibe-container>
246
+ </footer>
247
+ </div>
248
+
249
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
250
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
251
+ <script src="../dist/vibeui.umd.js"></script>
252
+ <script>
253
+ const { createApp } = Vue;
254
+
255
+ createApp({
256
+ data() {
257
+ return {
258
+ showAlert: true,
259
+ counter: 42,
260
+ navItems: [
261
+ { text: 'Features', href: '#' },
262
+ { text: 'Examples', href: '#' },
263
+ { text: 'Docs', href: '#' },
264
+ { text: 'GitHub', href: '#' }
265
+ ],
266
+ moreItems: [
267
+ { text: 'Bookmark', icon: 'bookmark', href: '#' },
268
+ { text: 'Download', icon: 'download', href: '#' },
269
+ { divider: true },
270
+ { text: 'Report', icon: 'flag', href: '#' }
271
+ ],
272
+ features: [
273
+ {
274
+ icon: 'lightning-charge-fill',
275
+ color: 'primary',
276
+ title: 'Lightning Fast',
277
+ description: 'Optimized for performance with minimal bundle size and maximum efficiency.'
278
+ },
279
+ {
280
+ icon: 'palette-fill',
281
+ color: 'success',
282
+ title: 'Customizable',
283
+ description: 'Easily theme and customize components to match your brand identity.'
284
+ },
285
+ {
286
+ icon: 'shield-check',
287
+ color: 'info',
288
+ title: 'Type Safe',
289
+ description: 'Full TypeScript support with comprehensive type definitions.'
290
+ }
291
+ ],
292
+ showcaseItems: [
293
+ { name: 'Navigation', icon: 'compass', color: 'primary', count: '8' },
294
+ { name: 'Forms', icon: 'ui-checks', color: 'success', count: '12' },
295
+ { name: 'Data Display', icon: 'table', color: 'info', count: '6' },
296
+ { name: 'Feedback', icon: 'bell', color: 'warning', count: '5' }
297
+ ],
298
+ stats: [
299
+ { value: '50+', label: 'Components', color: 'primary' },
300
+ { value: '10K+', label: 'Downloads', color: 'success' },
301
+ { value: '100%', label: 'Free & Open', color: 'info' },
302
+ { value: '5.0', label: 'Rating', color: 'warning' }
303
+ ]
304
+ }
305
+ },
306
+ methods: {
307
+ handleGetStarted() {
308
+ alert('Ready to build something amazing? Check out the documentation!');
309
+ }
310
+ }
311
+ }).use(VibeUI.default).mount('#app');
312
+ </script>
313
+ </body>
314
+ </html>