@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/sticky-footer-navbar.html ADDED
@@ -0,0 +1,70 @@
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>Sticky footer navbar - 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
+ /* Offset the fixed-top navbar so content isn't hidden behind it. */
12
+ body { padding-top: 3.5rem; }
13
+ </style>
14
+
15
+ <!-- Navbar collapse uses Bootstrap JS via `import('bootstrap')`; map the bare specifier. -->
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" class="d-flex flex-column min-vh-100">
26
+ <vibe-navbar variant="dark" expand="md" position="fixed-top">
27
+ <vibe-navbar-brand href="#">
28
+ <vibe-icon icon="layers-fill" class="me-2"></vibe-icon>
29
+ Sticky
30
+ </vibe-navbar-brand>
31
+ <vibe-navbar-toggle target="nav1"></vibe-navbar-toggle>
32
+ <vibe-collapse id="nav1" is-nav>
33
+ <vibe-navbar-nav :items="navItems" class="ms-auto"></vibe-navbar-nav>
34
+ </vibe-collapse>
35
+ </vibe-navbar>
36
+
37
+ <main class="flex-grow-1">
38
+ <vibe-container class="py-5 text-center">
39
+ <h1 class="h3">Sticky footer with a fixed navbar</h1>
40
+ <p class="text-muted">A fixed top navbar plus a footer pinned to the bottom of the viewport.</p>
41
+ <vibe-button variant="primary">Get started</vibe-button>
42
+ </vibe-container>
43
+ </main>
44
+
45
+ <footer class="mt-auto py-3 bg-body-tertiary border-top">
46
+ <vibe-container class="text-center text-muted">
47
+ <small>Built with VibeUI by <a href="https://technosorcery.com" class="text-decoration-none">TechnoSorcery.com</a></small>
48
+ </vibe-container>
49
+ </footer>
50
+ </div>
51
+
52
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
53
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
54
+ <script src="../dist/vibeui.umd.js"></script>
55
+ <script>
56
+ const { createApp } = Vue;
57
+ createApp({
58
+ data() {
59
+ return {
60
+ navItems: [
61
+ { text: 'Home', href: '#', active: true },
62
+ { text: 'About', href: '#' },
63
+ { text: 'Contact', href: '#' }
64
+ ]
65
+ }
66
+ }
67
+ }).use(VibeUI.default).mount('#app');
68
+ </script>
69
+ </body>
70
+ </html>
package/examples/sticky-footer.html ADDED
@@ -0,0 +1,60 @@
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>Sticky footer - 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
+ <!-- Flex column at min-vh-100 keeps the footer pinned to the bottom when content is short. -->
13
+ <div id="app" class="d-flex flex-column min-vh-100">
14
+ <header class="border-bottom">
15
+ <vibe-container class="d-flex align-items-center justify-content-between py-3">
16
+ <a href="#" class="d-flex align-items-center text-dark text-decoration-none">
17
+ <vibe-icon icon="layers-fill" class="me-2 fs-5"></vibe-icon>
18
+ <span class="fw-bold">Sticky</span>
19
+ </a>
20
+ <vibe-nav :items="navItems"></vibe-nav>
21
+ </vibe-container>
22
+ </header>
23
+
24
+ <main class="flex-grow-1">
25
+ <vibe-container class="py-5 text-center">
26
+ <h1 class="h3">Sticky footer</h1>
27
+ <p class="text-muted">Pin a footer to the bottom of the viewport when the page content is short.</p>
28
+ <vibe-button variant="primary">
29
+ <vibe-icon icon="arrow-down" class="me-1"></vibe-icon>
30
+ The footer stays below
31
+ </vibe-button>
32
+ </vibe-container>
33
+ </main>
34
+
35
+ <footer class="mt-auto py-3 bg-body-tertiary border-top">
36
+ <vibe-container class="text-center text-muted">
37
+ <small>Built with VibeUI by <a href="https://technosorcery.com" class="text-decoration-none">TechnoSorcery.com</a></small>
38
+ </vibe-container>
39
+ </footer>
40
+ </div>
41
+
42
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
43
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
44
+ <script src="../dist/vibeui.umd.js"></script>
45
+ <script>
46
+ const { createApp } = Vue;
47
+ createApp({
48
+ data() {
49
+ return {
50
+ navItems: [
51
+ { text: 'Home', href: '#', active: true },
52
+ { text: 'About', href: '#' },
53
+ { text: 'Contact', href: '#' }
54
+ ]
55
+ }
56
+ }
57
+ }).use(VibeUI.default).mount('#app');
58
+ </script>
59
+ </body>
60
+ </html>
package/examples/test-simple.html ADDED
@@ -0,0 +1,91 @@
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>Test - 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
+ </head>
11
+ <body>
12
+ <div id="app">
13
+ <vibe-container class="my-5">
14
+ <vibe-row>
15
+ <vibe-col :cols="12">
16
+ <h1>Testing VibeUI Components</h1>
17
+ <p>If this works, you should see styled components below:</p>
18
+ </vibe-col>
19
+ </vibe-row>
20
+
21
+ <vibe-row class="my-4">
22
+ <vibe-col :cols="12">
23
+ <h3>Raw Bootstrap Icon (should show):</h3>
24
+ <!-- Intentionally raw, for visual comparison with VibeIcon below. -->
25
+ <i class="bi bi-heart-fill text-danger" style="font-size: 2rem;"></i>
26
+ </vibe-col>
27
+ </vibe-row>
28
+
29
+ <vibe-row class="my-4">
30
+ <vibe-col :cols="12">
31
+ <h3>VibeUI Button:</h3>
32
+ <vibe-button variant="primary" @click="count++">
33
+ Clicked {{ count }} times
34
+ </vibe-button>
35
+ </vibe-col>
36
+ </vibe-row>
37
+
38
+ <vibe-row class="my-4">
39
+ <vibe-col :cols="12">
40
+ <h3>VibeUI Icon:</h3>
41
+ <vibe-icon icon="heart-fill" class="text-danger" style="font-size: 2rem;"></vibe-icon>
42
+ </vibe-col>
43
+ </vibe-row>
44
+
45
+ <vibe-row class="my-4">
46
+ <vibe-col :cols="12">
47
+ <h3>VibeUI Alert:</h3>
48
+ <vibe-alert variant="success" v-model="showAlert" dismissible>
49
+ This is a test alert!
50
+ </vibe-alert>
51
+ </vibe-col>
52
+ </vibe-row>
53
+
54
+ <vibe-row class="my-4">
55
+ <vibe-col :cols="12">
56
+ <h3>VibeUI Container/Row/Col Test:</h3>
57
+ <vibe-container class="border border-primary p-3">
58
+ <vibe-row>
59
+ <vibe-col :md="6" class="bg-light p-3">
60
+ Column 1
61
+ </vibe-col>
62
+ <vibe-col :md="6" class="bg-secondary text-white p-3">
63
+ Column 2
64
+ </vibe-col>
65
+ </vibe-row>
66
+ </vibe-container>
67
+ </vibe-col>
68
+ </vibe-row>
69
+ </vibe-container>
70
+ </div>
71
+
72
+ <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
73
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
74
+ <script src="../dist/vibeui.umd.js"></script>
75
+ <script>
76
+ const { createApp } = Vue;
77
+
78
+ const app = createApp({
79
+ data() {
80
+ return {
81
+ count: 0,
82
+ showAlert: true
83
+ }
84
+ }
85
+ });
86
+
87
+ app.use(VibeUI.default);
88
+ app.mount('#app');
89
+ </script>
90
+ </body>
91
+ </html>