@velkymx/vibeui 0.9.0 → 1.1.0

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 (184) hide show
  1. package/AGENTS.md +44 -0
  2. package/CLAUDE.md +48 -0
  3. package/README.md +222 -197
  4. package/dist/App.vue.d.ts +2 -1
  5. package/dist/components/HelloWorld.vue.d.ts +2 -1
  6. package/dist/components/VibeAccordion.vue.d.ts +39 -40
  7. package/dist/components/VibeAlert.vue.d.ts +21 -37
  8. package/dist/components/VibeAutocomplete.vue.d.ts +59 -31
  9. package/dist/components/VibeBadge.vue.d.ts +10 -18
  10. package/dist/components/VibeBreadcrumb.vue.d.ts +25 -21
  11. package/dist/components/VibeButton.vue.d.ts +13 -17
  12. package/dist/components/VibeButtonGroup.vue.d.ts +11 -19
  13. package/dist/components/VibeCard.vue.d.ts +51 -24
  14. package/dist/components/VibeCarousel.vue.d.ts +27 -49
  15. package/dist/components/VibeChartBar.vue.d.ts +61 -0
  16. package/dist/components/VibeChartLine.vue.d.ts +70 -0
  17. package/dist/components/VibeChartPie.vue.d.ts +34 -0
  18. package/dist/components/VibeCloseButton.vue.d.ts +9 -7
  19. package/dist/components/VibeCol.vue.d.ts +9 -17
  20. package/dist/components/VibeCollapse.vue.d.ts +24 -32
  21. package/dist/components/VibeContainer.vue.d.ts +9 -17
  22. package/dist/components/VibeDataTable.vue.d.ts +122 -63
  23. package/dist/components/VibeDatePicker.vue.d.ts +4 -6
  24. package/dist/components/VibeDraggable.vue.d.ts +9 -13
  25. package/dist/components/VibeDropdown.vue.d.ts +46 -43
  26. package/dist/components/VibeDroppable.vue.d.ts +9 -13
  27. package/dist/components/VibeFileInput.vue.d.ts +14 -20
  28. package/dist/components/VibeFormCheckbox.vue.d.ts +30 -22
  29. package/dist/components/VibeFormDatepicker.vue.d.ts +27 -30
  30. package/dist/components/VibeFormErrorSummary.vue.d.ts +17 -0
  31. package/dist/components/VibeFormGroup.vue.d.ts +10 -13
  32. package/dist/components/VibeFormInput.vue.d.ts +60 -25
  33. package/dist/components/VibeFormRadio.vue.d.ts +23 -24
  34. package/dist/components/VibeFormSelect.vue.d.ts +28 -34
  35. package/dist/components/VibeFormSpinbutton.vue.d.ts +31 -34
  36. package/dist/components/VibeFormSwitch.vue.d.ts +22 -23
  37. package/dist/components/VibeFormTextarea.vue.d.ts +24 -25
  38. package/dist/components/VibeFormWysiwyg.vue.d.ts +23 -22
  39. package/dist/components/VibeHero.vue.d.ts +117 -0
  40. package/dist/components/VibeIcon.vue.d.ts +27 -7
  41. package/dist/components/VibeInputGroup.vue.d.ts +12 -14
  42. package/dist/components/VibeLink.vue.d.ts +14 -18
  43. package/dist/components/VibeListGroup.vue.d.ts +26 -22
  44. package/dist/components/VibeModal.vue.d.ts +47 -45
  45. package/dist/components/VibeNav.vue.d.ts +40 -20
  46. package/dist/components/VibeNavbar.vue.d.ts +12 -19
  47. package/dist/components/VibeNavbarBrand.vue.d.ts +9 -17
  48. package/dist/components/VibeNavbarNav.vue.d.ts +52 -33
  49. package/dist/components/VibeNavbarToggle.vue.d.ts +7 -5
  50. package/dist/components/VibeOffcanvas.vue.d.ts +28 -43
  51. package/dist/components/VibePagination.vue.d.ts +38 -29
  52. package/dist/components/VibePlaceholder.vue.d.ts +9 -17
  53. package/dist/components/VibePopover.vue.d.ts +17 -40
  54. package/dist/components/VibeProgress.vue.d.ts +13 -21
  55. package/dist/components/VibeResizable.vue.d.ts +10 -14
  56. package/dist/components/VibeRow.vue.d.ts +9 -17
  57. package/dist/components/VibeScrollspy.vue.d.ts +37 -25
  58. package/dist/components/VibeSkeleton.vue.d.ts +2 -1
  59. package/dist/components/VibeSlider.vue.d.ts +4 -5
  60. package/dist/components/VibeSortable.vue.d.ts +37 -18
  61. package/dist/components/VibeSpinner.vue.d.ts +4 -7
  62. package/dist/components/VibeStepper.vue.d.ts +32 -31
  63. package/dist/components/VibeTab.vue.d.ts +7 -11
  64. package/dist/components/VibeTabContent.vue.d.ts +13 -31
  65. package/dist/components/VibeTabs.vue.d.ts +9 -13
  66. package/dist/components/VibeToast.vue.d.ts +31 -44
  67. package/dist/components/VibeToastHost.vue.d.ts +2 -1
  68. package/dist/components/VibeTooltip.vue.d.ts +16 -39
  69. package/dist/components/chart/chartColors.d.ts +3 -0
  70. package/dist/components/chart/chartResize.d.ts +2 -0
  71. package/dist/components/chart/chartTooltip.d.ts +2 -0
  72. package/dist/components/chart/chartTypes.d.ts +6 -0
  73. package/dist/components/chart/drawBar.d.ts +5 -0
  74. package/dist/components/chart/drawLine.d.ts +18 -0
  75. package/dist/components/chart/drawPie.d.ts +4 -0
  76. package/dist/components/dndStore.d.ts +1 -0
  77. package/dist/components/index.d.ts +6 -1
  78. package/dist/composables/useBreakpoints.d.ts +1 -0
  79. package/dist/composables/useColorMode.d.ts +1 -1
  80. package/dist/composables/useId.d.ts +1 -4
  81. package/dist/directives/vTooltip.d.ts +2 -3
  82. package/dist/injectionKeys.d.ts +34 -0
  83. package/dist/purify.es-eYghtX9j.mjs +735 -0
  84. package/dist/types.d.ts +23 -2
  85. package/dist/utils/routeKey.d.ts +11 -0
  86. package/dist/utils/safeCss.d.ts +16 -0
  87. package/dist/utils/safeHref.d.ts +7 -0
  88. package/dist/utils/sanitizeHtml.d.ts +13 -0
  89. package/dist/vibeui.css +2 -1
  90. package/dist/vibeui.es.js +8527 -5855
  91. package/dist/vibeui.umd.js +3 -1
  92. package/docs/README.md +225 -0
  93. package/docs/components/advanced/popover.md +125 -0
  94. package/docs/components/advanced/scrollspy.md +106 -0
  95. package/docs/components/advanced/tooltip.md +90 -0
  96. package/docs/components/card/card.md +223 -0
  97. package/docs/components/charts/chart-bar.md +129 -0
  98. package/docs/components/charts/chart-line.md +136 -0
  99. package/docs/components/charts/chart-pie.md +102 -0
  100. package/docs/components/core/alert.md +94 -0
  101. package/docs/components/core/badge.md +75 -0
  102. package/docs/components/core/button-group.md +99 -0
  103. package/docs/components/core/button.md +145 -0
  104. package/docs/components/core/close-button.md +82 -0
  105. package/docs/components/core/link.md +79 -0
  106. package/docs/components/core/placeholder.md +129 -0
  107. package/docs/components/core/skeleton.md +40 -0
  108. package/docs/components/core/spinner.md +103 -0
  109. package/docs/components/data/datatable.md +437 -0
  110. package/docs/components/hero/hero.md +65 -0
  111. package/docs/components/interactive/accordion.md +121 -0
  112. package/docs/components/interactive/carousel.md +112 -0
  113. package/docs/components/interactive/collapse.md +106 -0
  114. package/docs/components/interactive/date-picker.md +78 -0
  115. package/docs/components/interactive/draggable.md +91 -0
  116. package/docs/components/interactive/dropdown.md +129 -0
  117. package/docs/components/interactive/modal.md +151 -0
  118. package/docs/components/interactive/offcanvas.md +92 -0
  119. package/docs/components/interactive/resizable.md +73 -0
  120. package/docs/components/interactive/slider.md +57 -0
  121. package/docs/components/interactive/sortable.md +52 -0
  122. package/docs/components/interactive/stepper.md +83 -0
  123. package/docs/components/interactive/tabs.md +66 -0
  124. package/docs/components/interactive/toast.md +177 -0
  125. package/docs/components/layout/col.md +117 -0
  126. package/docs/components/layout/container.md +53 -0
  127. package/docs/components/layout/row.md +107 -0
  128. package/docs/components/list/list-group.md +225 -0
  129. package/docs/components/navigation/breadcrumb.md +120 -0
  130. package/docs/components/navigation/nav.md +151 -0
  131. package/docs/components/navigation/navbar.md +114 -0
  132. package/docs/components/navigation/pagination.md +163 -0
  133. package/docs/components/progress/progress.md +188 -0
  134. package/docs/composables/back-button.md +28 -0
  135. package/docs/composables/breakpoints.md +54 -0
  136. package/docs/composables/color-mode.md +179 -0
  137. package/docs/composables/use-form.md +78 -0
  138. package/docs/composables/use-position.md +68 -0
  139. package/docs/composables/use-toast.md +91 -0
  140. package/docs/directives/v-tooltip.md +58 -0
  141. package/docs/forms/README.md +87 -0
  142. package/docs/forms/autocomplete.md +96 -0
  143. package/docs/forms/file-input.md +97 -0
  144. package/docs/forms/form-checkbox.md +100 -0
  145. package/docs/forms/form-datepicker.md +80 -0
  146. package/docs/forms/form-error-summary.md +96 -0
  147. package/docs/forms/form-group.md +118 -0
  148. package/docs/forms/form-input.md +140 -0
  149. package/docs/forms/form-radio.md +82 -0
  150. package/docs/forms/form-select.md +98 -0
  151. package/docs/forms/form-spinbutton.md +94 -0
  152. package/docs/forms/form-switch.md +75 -0
  153. package/docs/forms/form-textarea.md +82 -0
  154. package/docs/forms/form-wysiwyg.md +99 -0
  155. package/docs/forms/input-group.md +70 -0
  156. package/docs/forms/validation.md +213 -0
  157. package/docs/getting-started/starter-template.md +136 -0
  158. package/docs/superpowers/plans/2026-05-12-vibe-charts.md +1999 -0
  159. package/docs/superpowers/plans/2026-05-29-e2e-browser-testing.md +615 -0
  160. package/docs/superpowers/specs/2026-05-12-charting-design.md +185 -0
  161. package/docs/superpowers/specs/2026-05-29-e2e-browser-testing-design.md +168 -0
  162. package/docs/utilities/position.md +82 -0
  163. package/docs/versioning.md +57 -0
  164. package/examples/README.md +201 -0
  165. package/examples/album.html +262 -0
  166. package/examples/blog.html +166 -0
  167. package/examples/carousel.html +114 -0
  168. package/examples/checkout.html +275 -0
  169. package/examples/cover.html +89 -0
  170. package/examples/dashboard.html +156 -0
  171. package/examples/index.html +129 -0
  172. package/examples/jumbotron.html +56 -0
  173. package/examples/mobile-dashboard.html +138 -0
  174. package/examples/pricing.html +172 -0
  175. package/examples/product.html +145 -0
  176. package/examples/sidebars.html +166 -0
  177. package/examples/sign-in.html +119 -0
  178. package/examples/starter.html +314 -0
  179. package/examples/sticky-footer-navbar.html +70 -0
  180. package/examples/sticky-footer.html +60 -0
  181. package/examples/test-simple.html +91 -0
  182. package/llms.txt +801 -0
  183. package/package.json +44 -14
  184. package/dist/types/index.d.ts +0 -6
package/examples/jumbotron.html ADDED
@@ -0,0 +1,56 @@
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>Jumbotron - 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
+ </head>
11
+ <body>
12
+ <div id="app">
13
+ <vibe-container class="py-4">
14
+ <!-- The modern "jumbotron": a bordered VibeHero with a tinted background.
15
+ (Bootstrap 5 removed the jumbotron component; VibeHero is the replacement.) -->
16
+ <vibe-hero variant="body-tertiary" bordered align="start" class="mb-4">
17
+ <vibe-col :lg="8">
18
+ <h1 class="display-5 fw-bold">Custom jumbotron</h1>
19
+ <p class="col-md-10 fs-4">Using a series of utilities and the bordered VibeHero, you can recreate Bootstrap 4's classic jumbotron and enhance it for any project.</p>
20
+ <vibe-button variant="primary" size="lg" type="button">Example button</vibe-button>
21
+ </vibe-col>
22
+ </vibe-hero>
23
+
24
+ <!-- Two supporting bordered boxes -->
25
+ <vibe-row :gutters="4" class="align-items-md-stretch">
26
+ <vibe-col :md="6">
27
+ <vibe-hero variant="dark" text-variant="white" align="start" class="h-100 rounded-3">
28
+ <h2>Change the background</h2>
29
+ <p>Swap the <code>variant</code> for any theme color, or pass a <code>gradient</code>.</p>
30
+ <vibe-button variant="light" outline type="button">Example button</vibe-button>
31
+ </vibe-hero>
32
+ </vibe-col>
33
+ <vibe-col :md="6">
34
+ <vibe-hero variant="primary" text-variant="white" align="start" class="h-100 rounded-3">
35
+ <h2>Add borders</h2>
36
+ <p>Or keep it simple with a tinted background and the <code>bordered</code> prop.</p>
37
+ <vibe-button variant="light" type="button">Example button</vibe-button>
38
+ </vibe-hero>
39
+ </vibe-col>
40
+ </vibe-row>
41
+ </vibe-container>
42
+
43
+ <footer class="bg-body-tertiary py-4 mt-4 text-center text-muted">
44
+ <small>Built with VibeUI by <a href="https://technosorcery.com" class="text-decoration-none">TechnoSorcery.com</a></small>
45
+ </footer>
46
+ </div>
47
+
48
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
49
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
50
+ <script src="../dist/vibeui.umd.js"></script>
51
+ <script>
52
+ const { createApp } = Vue;
53
+ createApp({}).use(VibeUI.default).mount('#app');
54
+ </script>
55
+ </body>
56
+ </html>
package/examples/mobile-dashboard.html ADDED
@@ -0,0 +1,138 @@
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>VibeUI - Mobile Dashboard 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="../dist/vibeui.css">
9
+ <style>
10
+ body {
11
+ background-color: #f8f9fa;
12
+ padding-top: env(safe-area-inset-top, 0);
13
+ }
14
+ .vibe-nav-sidebar {
15
+ width: 280px;
16
+ height: 100vh;
17
+ position: sticky;
18
+ top: 0;
19
+ }
20
+ @media (max-width: 991.98px) {
21
+ .vibe-nav-sidebar {
22
+ display: none;
23
+ }
24
+ }
25
+ </style>
26
+
27
+ <!-- VibeUI components load Bootstrap JS internally via `import('bootstrap')`.
28
+ The UMD bundle keeps that bare specifier, so the page must map it for the
29
+ browser to resolve it (here VibeOffcanvas relies on it). -->
30
+ <script type="importmap">
31
+ {
32
+ "imports": {
33
+ "bootstrap": "https://esm.sh/bootstrap@5.3.0"
34
+ }
35
+ }
36
+ </script>
37
+ </head>
38
+ <body>
39
+ <div id="app">
40
+ <!-- Mobile Navbar -->
41
+ <vibe-navbar variant="white" expand="lg" position="sticky-top" class="border-bottom d-lg-none">
42
+ <button class="navbar-toggler border-0" type="button" @click="showSidebar = true">
43
+ <span class="navbar-toggler-icon"></span>
44
+ </button>
45
+ <vibe-navbar-brand href="#" class="fw-bold">VibeUI</vibe-navbar-brand>
46
+ <!-- Avatar dropdown: driven by Bootstrap's data API (bootstrap.bundle). -->
47
+ <div class="dropdown">
48
+ <img src="https://github.com/mdo.png" width="32" height="32" class="rounded-circle" data-bs-toggle="dropdown" alt="Account">
49
+ <ul class="dropdown-menu dropdown-menu-end">
50
+ <li><a class="dropdown-item" href="#">Profile</a></li>
51
+ <li><a class="dropdown-item" href="#">Settings</a></li>
52
+ <li><hr class="dropdown-divider"></li>
53
+ <li><a class="dropdown-item" href="#">Sign out</a></li>
54
+ </ul>
55
+ </div>
56
+ </vibe-navbar>
57
+
58
+ <vibe-container fluid>
59
+ <vibe-row>
60
+ <!-- Desktop Sidebar -->
61
+ <vibe-col :lg="3" :xl="2" tag="aside" class="d-none d-lg-block bg-white border-end vibe-nav-sidebar p-3">
62
+ <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
63
+ <span class="fs-4 fw-bold">VibeUI</span>
64
+ </a>
65
+ <hr>
66
+ <vibe-nav vertical :items="menuItems"></vibe-nav>
67
+ </vibe-col>
68
+
69
+ <!-- Main Content -->
70
+ <vibe-col :lg="9" :xl="10" tag="main" class="ms-sm-auto px-md-4 py-4">
71
+ <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
72
+ <h1 class="h2">Dashboard</h1>
73
+ <vibe-button variant="secondary" outline size="sm">This week</vibe-button>
74
+ </div>
75
+
76
+ <!-- Reactive stats using VibeUI's useBreakpoints composable -->
77
+ <vibe-row :gutters="3">
78
+ <vibe-col :cols="isMobile ? 12 : undefined" :md="4" v-for="i in 3" :key="i">
79
+ <vibe-card class="border-0 shadow-sm">
80
+ <h6 class="text-muted mb-1">Total Revenue</h6>
81
+ <h3 class="mb-0">$45,231</h3>
82
+ <div class="text-success small">+20.1% from last month</div>
83
+ </vibe-card>
84
+ </vibe-col>
85
+ </vibe-row>
86
+
87
+ <h2 class="h4 mt-5 mb-3">Recent Transactions</h2>
88
+ <vibe-data-table :items="transactions" :columns="txColumns" row-key="id" hover stack>
89
+ <template #cell(status)="{ item }">
90
+ <vibe-badge variant="success" subtle>{{ item.status }}</vibe-badge>
91
+ </template>
92
+ </vibe-data-table>
93
+ </vibe-col>
94
+ </vibe-row>
95
+ </vibe-container>
96
+
97
+ <!-- Mobile sidebar — real VibeOffcanvas (Bootstrap JS handles backdrop + animation) -->
98
+ <vibe-offcanvas v-model="showSidebar" title="VibeUI" placement="start">
99
+ <vibe-nav vertical :items="menuItems"></vibe-nav>
100
+ </vibe-offcanvas>
101
+ </div>
102
+
103
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
104
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
105
+ <script src="../dist/vibeui.umd.js"></script>
106
+ <script>
107
+ const { createApp, ref } = Vue;
108
+ const { useBreakpoints } = VibeUI;
109
+
110
+ createApp({
111
+ setup() {
112
+ const showSidebar = ref(false);
113
+ const { isMobile } = useBreakpoints();
114
+ const menuItems = [
115
+ { text: 'Dashboard', href: '#', active: true },
116
+ { text: 'Orders', href: '#' },
117
+ { text: 'Products', href: '#' },
118
+ { text: 'Customers', href: '#' }
119
+ ];
120
+ const txColumns = [
121
+ { key: 'date', label: 'Date', sortable: true },
122
+ { key: 'status', label: 'Status' },
123
+ { key: 'customer', label: 'Customer', searchable: true },
124
+ { key: 'amount', label: 'Amount', sortable: true, class: 'text-end fw-bold' }
125
+ ];
126
+ const transactions = [
127
+ { id: 1, date: 'Oct 24, 2023', status: 'Paid', customer: 'John Doe', amount: '$250.00' },
128
+ { id: 2, date: 'Oct 23, 2023', status: 'Paid', customer: 'Jane Smith', amount: '$120.50' },
129
+ { id: 3, date: 'Oct 22, 2023', status: 'Paid', customer: 'Bob Johnson', amount: '$89.99' },
130
+ { id: 4, date: 'Oct 21, 2023', status: 'Paid', customer: 'Alice Brown', amount: '$432.00' },
131
+ { id: 5, date: 'Oct 20, 2023', status: 'Paid', customer: 'Charlie Wilson', amount: '$15.75' }
132
+ ];
133
+ return { showSidebar, isMobile, menuItems, txColumns, transactions };
134
+ }
135
+ }).use(VibeUI.default).mount('#app');
136
+ </script>
137
+ </body>
138
+ </html>
package/examples/pricing.html ADDED
@@ -0,0 +1,172 @@
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>Pricing - 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
+ </head>
11
+ <body>
12
+ <div id="app">
13
+ <header class="py-3 mb-4 border-bottom">
14
+ <vibe-container class="d-flex flex-wrap justify-content-between">
15
+ <a href="./" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none">
16
+ <vibe-icon icon="cash-stack" class="fs-4 me-2"></vibe-icon>
17
+ <span class="fs-4 fw-bold">Pricing</span>
18
+ </a>
19
+ <vibe-nav :items="navItems"></vibe-nav>
20
+ </vibe-container>
21
+ </header>
22
+
23
+ <main>
24
+ <vibe-container>
25
+ <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
26
+ <h1 class="display-4 fw-bold">Pricing</h1>
27
+ <p class="fs-5 text-muted">
28
+ Quickly build an effective pricing table for your potential customers with this example.
29
+ </p>
30
+ </div>
31
+
32
+ <vibe-row row-cols="1" row-cols-md="3" class="mb-3 text-center" :gutters="4">
33
+ <vibe-col v-for="plan in pricingPlans" :key="plan.name">
34
+ <vibe-card
35
+ class="mb-4 rounded-3 shadow-sm"
36
+ :class="plan.highlighted ? 'border-primary' : ''"
37
+ :header-class="['py-3', plan.highlighted ? 'bg-primary text-white' : '']"
38
+ >
39
+ <template #header>
40
+ <h4 class="my-0 fw-normal">{{ plan.name }}</h4>
41
+ </template>
42
+ <h1 class="card-title pricing-card-title">
43
+ ${{ plan.price }}<small class="text-muted fw-light">/mo</small>
44
+ </h1>
45
+ <ul class="list-unstyled mt-3 mb-4">
46
+ <li v-for="(feature, index) in plan.features" :key="index" class="mb-2">
47
+ <vibe-icon
48
+ :icon="feature.included ? 'check-circle' : 'x-circle'"
49
+ :class="feature.included ? 'text-success' : 'text-muted'"
50
+ class="me-2"
51
+ ></vibe-icon>
52
+ {{ feature.text }}
53
+ </li>
54
+ </ul>
55
+ <vibe-button
56
+ variant="primary"
57
+ :outline="!plan.highlighted"
58
+ size="lg"
59
+ class="w-100"
60
+ >
61
+ {{ plan.buttonText }}
62
+ </vibe-button>
63
+ </vibe-card>
64
+ </vibe-col>
65
+ </vibe-row>
66
+
67
+ <h2 class="display-6 text-center mb-4">Compare plans</h2>
68
+
69
+ <div class="table-responsive">
70
+ <table class="table text-center">
71
+ <thead>
72
+ <tr>
73
+ <th style="width: 34%;"></th>
74
+ <th style="width: 22%;">Free</th>
75
+ <th style="width: 22%;">Pro</th>
76
+ <th style="width: 22%;">Enterprise</th>
77
+ </tr>
78
+ </thead>
79
+ <tbody>
80
+ <tr v-for="comparison in comparisonFeatures" :key="comparison.feature">
81
+ <th scope="row" class="text-start">{{ comparison.feature }}</th>
82
+ <td>
83
+ <vibe-icon v-if="comparison.free" icon="check-lg" class="text-success"></vibe-icon>
84
+ </td>
85
+ <td>
86
+ <vibe-icon v-if="comparison.pro" icon="check-lg" class="text-success"></vibe-icon>
87
+ </td>
88
+ <td>
89
+ <vibe-icon v-if="comparison.enterprise" icon="check-lg" class="text-success"></vibe-icon>
90
+ </td>
91
+ </tr>
92
+ </tbody>
93
+ </table>
94
+ </div>
95
+ </vibe-container>
96
+ </main>
97
+
98
+ <footer class="pt-4 my-md-5 pt-md-5 border-top">
99
+ <vibe-container class="text-center">
100
+ <vibe-icon icon="lightning-charge-fill" class="fs-2 text-primary"></vibe-icon>
101
+ <p class="mb-0 mt-2">Built with ✨ by <a href="https://technosorcery.com" class="text-decoration-none">TechnoSorcery.com</a></p>
102
+ </vibe-container>
103
+ </footer>
104
+ </div>
105
+
106
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
107
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
108
+ <script src="../dist/vibeui.umd.js"></script>
109
+ <script>
110
+ const { createApp } = Vue;
111
+
112
+ createApp({
113
+ data() {
114
+ return {
115
+ navItems: [
116
+ { text: 'Features', href: '#' },
117
+ { text: 'Enterprise', href: '#' },
118
+ { text: 'Support', href: '#' },
119
+ { text: 'Pricing', href: '#', active: true }
120
+ ],
121
+ pricingPlans: [
122
+ {
123
+ name: 'Free',
124
+ price: 0,
125
+ buttonText: 'Sign up for free',
126
+ highlighted: false,
127
+ features: [
128
+ { text: '10 users included', included: true },
129
+ { text: '2 GB of storage', included: true },
130
+ { text: 'Email support', included: true },
131
+ { text: 'Help center access', included: false }
132
+ ]
133
+ },
134
+ {
135
+ name: 'Pro',
136
+ price: 15,
137
+ buttonText: 'Get started',
138
+ highlighted: true,
139
+ features: [
140
+ { text: '20 users included', included: true },
141
+ { text: '10 GB of storage', included: true },
142
+ { text: 'Priority email support', included: true },
143
+ { text: 'Help center access', included: true }
144
+ ]
145
+ },
146
+ {
147
+ name: 'Enterprise',
148
+ price: 29,
149
+ buttonText: 'Contact us',
150
+ highlighted: false,
151
+ features: [
152
+ { text: '30 users included', included: true },
153
+ { text: '15 GB of storage', included: true },
154
+ { text: 'Phone and email support', included: true },
155
+ { text: 'Help center access', included: true }
156
+ ]
157
+ }
158
+ ],
159
+ comparisonFeatures: [
160
+ { feature: 'Public', free: true, pro: true, enterprise: true },
161
+ { feature: 'Private', free: false, pro: true, enterprise: true },
162
+ { feature: 'Permissions', free: true, pro: true, enterprise: true },
163
+ { feature: 'Sharing', free: false, pro: true, enterprise: true },
164
+ { feature: 'Unlimited members', free: false, pro: true, enterprise: true },
165
+ { feature: 'Extra security', free: false, pro: false, enterprise: true }
166
+ ]
167
+ }
168
+ }
169
+ }).use(VibeUI.default).mount('#app');
170
+ </script>
171
+ </body>
172
+ </html>
package/examples/product.html ADDED
@@ -0,0 +1,145 @@
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>Product - 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
+ .feature-box { overflow: hidden; }
12
+ .feature-box img { object-fit: cover; }
13
+ .product-img { height: 220px; object-fit: cover; }
14
+ </style>
15
+
16
+ <!-- VibeUI loads Bootstrap JS internally via `import('bootstrap')`; the UMD bundle
17
+ keeps that bare specifier, so the page maps it here (navbar collapse). -->
18
+ <script type="importmap">
19
+ {
20
+ "imports": {
21
+ "bootstrap": "https://esm.sh/bootstrap@5.3.0"
22
+ }
23
+ }
24
+ </script>
25
+ </head>
26
+ <body>
27
+ <div id="app">
28
+ <vibe-navbar variant="white" expand="lg" class="border-bottom">
29
+ <vibe-navbar-brand href="#">
30
+ <vibe-icon icon="boxes" class="me-2"></vibe-icon>
31
+ Northwind
32
+ </vibe-navbar-brand>
33
+ <vibe-navbar-toggle target="navbarNav"></vibe-navbar-toggle>
34
+ <vibe-collapse id="navbarNav" is-nav>
35
+ <vibe-navbar-nav :items="navItems" class="ms-auto"></vibe-navbar-nav>
36
+ </vibe-collapse>
37
+ </vibe-navbar>
38
+
39
+ <!-- Hero -->
40
+ <vibe-hero gradient="linear-gradient(135deg, #0d6efd 0%, #6610f2 100%)" class="text-white">
41
+ <vibe-col :lg="8" class="mx-auto">
42
+ <vibe-badge variant="light" class="text-dark mb-3">New release</vibe-badge>
43
+ <h1 class="display-4 fw-bold mb-3">The Northwind 2 has arrived.</h1>
44
+ <p class="lead mb-4">Engineered for the everyday — lighter, faster, and built to last.</p>
45
+ <vibe-button variant="light" size="lg">
46
+ <vibe-icon icon="cart-plus-fill" class="me-2"></vibe-icon>
47
+ Buy now — $199
48
+ </vibe-button>
49
+ </vibe-col>
50
+ </vibe-hero>
51
+
52
+ <!-- Feature columns -->
53
+ <vibe-container class="py-5">
54
+ <vibe-row :gutters="4" class="text-center">
55
+ <vibe-col :md="4" v-for="f in features" :key="f.title">
56
+ <vibe-icon :icon="f.icon" class="text-primary mb-2" font-size="2.5rem"></vibe-icon>
57
+ <h4 class="fw-bold">{{ f.title }}</h4>
58
+ <p class="text-muted">{{ f.body }}</p>
59
+ </vibe-col>
60
+ </vibe-row>
61
+ </vibe-container>
62
+
63
+ <!-- Checkerboard feature boxes -->
64
+ <vibe-container class="pb-5">
65
+ <vibe-row :gutters="4">
66
+ <vibe-col :md="6" v-for="box in featureBoxes" :key="box.title">
67
+ <vibe-card class="feature-box h-100 border-0 shadow-sm" body-class="p-4">
68
+ <h3 class="fw-bold">{{ box.title }}</h3>
69
+ <p class="text-muted">{{ box.body }}</p>
70
+ <vibe-button variant="primary" outline>Learn more</vibe-button>
71
+ </vibe-card>
72
+ </vibe-col>
73
+ </vibe-row>
74
+ </vibe-container>
75
+
76
+ <!-- Product grid -->
77
+ <vibe-container class="pb-5">
78
+ <h2 class="text-center fw-bold mb-4">Pick your finish</h2>
79
+ <vibe-row row-cols="1" row-cols-sm="2" row-cols-lg="3" :gutters="4">
80
+ <vibe-col v-for="p in products" :key="p.name">
81
+ <vibe-card class="h-100 border-0 shadow-sm" header-class="bg-body-tertiary fw-semibold">
82
+ <template #image>
83
+ <div class="position-relative">
84
+ <img :src="p.img" class="card-img-top product-img" :alt="p.name">
85
+ <vibe-badge v-if="p.tag" :variant="p.tagVariant" class="position-absolute top-0 end-0 m-2">
86
+ {{ p.tag }}
87
+ </vibe-badge>
88
+ </div>
89
+ </template>
90
+ <template #header>{{ p.name }}</template>
91
+ <div class="d-flex justify-content-between align-items-center">
92
+ <span class="fs-5 fw-bold">{{ p.price }}</span>
93
+ <vibe-button variant="primary" size="sm">
94
+ <vibe-icon icon="cart-plus" class="me-1"></vibe-icon>
95
+ Add
96
+ </vibe-button>
97
+ </div>
98
+ </vibe-card>
99
+ </vibe-col>
100
+ </vibe-row>
101
+ </vibe-container>
102
+
103
+ <footer class="bg-dark text-white-50 py-4">
104
+ <vibe-container class="d-flex justify-content-between align-items-center">
105
+ <span><vibe-icon icon="boxes" class="me-2"></vibe-icon>Northwind © 2024</span>
106
+ <small>Built with VibeUI by <a href="https://technosorcery.com" class="text-white">TechnoSorcery.com</a></small>
107
+ </vibe-container>
108
+ </footer>
109
+ </div>
110
+
111
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
112
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
113
+ <script src="../dist/vibeui.umd.js"></script>
114
+ <script>
115
+ const { createApp } = Vue;
116
+
117
+ createApp({
118
+ data() {
119
+ return {
120
+ navItems: [
121
+ { text: 'Overview', href: '#', active: true },
122
+ { text: 'Specs', href: '#' },
123
+ { text: 'Reviews', href: '#' },
124
+ { text: 'Buy', href: '#' }
125
+ ],
126
+ features: [
127
+ { icon: 'lightning-charge-fill', title: 'Faster', body: 'Twice the throughput of the previous generation.' },
128
+ { icon: 'battery-full', title: 'All-day battery', body: 'Up to 20 hours on a single charge.' },
129
+ { icon: 'shield-check', title: 'Built to last', body: 'Aerospace-grade aluminium chassis.' }
130
+ ],
131
+ featureBoxes: [
132
+ { title: 'Designed around you', body: 'Every detail considered, from the weight in your hand to the sound of the keys.' },
133
+ { title: 'Ready for anything', body: 'A workhorse for creators, developers, and everyone in between.' }
134
+ ],
135
+ products: [
136
+ { name: 'Graphite', price: '$199', tag: 'Popular', tagVariant: 'primary', img: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400' },
137
+ { name: 'Silver', price: '$199', tag: 'New', tagVariant: 'success', img: 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400' },
138
+ { name: 'Midnight', price: '$229', tag: 'Limited', tagVariant: 'danger', img: 'https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?w=400' }
139
+ ]
140
+ }
141
+ }
142
+ }).use(VibeUI.default).mount('#app');
143
+ </script>
144
+ </body>
145
+ </html>