@velkymx/vibeui 0.8.2 → 0.9.0

package/docs/components/navigation/breadcrumb.md

@@ -1,116 +0,0 @@
-# VibeBreadcrumb
-
-Data-driven breadcrumb navigation to indicate the current page's location within a navigational hierarchy.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `ariaLabel` | `String` | `'breadcrumb'` | ARIA label for navigation |
-| `items` | `BreadcrumbItem[]` | Required | Array of breadcrumb items |
-
-### BreadcrumbItem Interface
-
-```typescript
-interface BreadcrumbItem {
-  text: string
-  href?: string
-  to?: string | object
-  active?: boolean
-}
-```
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `item-click` | `{ item, index, event }` | Emitted when an item is clicked (unless active) |
-
-## Slots
-
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `item` | `{ item, index }` | Custom item rendering |
-
-## Usage
-
-### Basic Example
-
-```vue
-<template>
-  <VibeBreadcrumb :items="breadcrumbItems" />
-</template>
-
-<script setup>
-const breadcrumbItems = [
-  { text: 'Home', href: '/' },
-  { text: 'Library', href: '/library' },
-  { text: 'Data', active: true }
-]
-</script>
-```
-
-### With Router Links
-
-```vue
-<template>
-  <VibeBreadcrumb :items="breadcrumbItems" />
-</template>
-
-<script setup>
-const breadcrumbItems = [
-  { text: 'Home', to: { name: 'home' } },
-  { text: 'Products', to: { name: 'products' } },
-  { text: 'Details', active: true }
-]
-</script>
-```
-
-### Custom Item Rendering
-
-Use the `item` scoped slot for custom rendering:
-
-```vue
-<template>
-  <VibeBreadcrumb :items="breadcrumbItems">
-    <template #item="{ item, index }">
-      <VibeIcon v-if="item.icon" :icon="item.icon" class="me-1" />
-      {{ item.text }}
-    </template>
-  </VibeBreadcrumb>
-</template>
-
-<script setup>
-const breadcrumbItems = [
-  { text: 'Home', href: '/', icon: 'house-fill' },
-  { text: 'Library', href: '/library', icon: 'book' },
-  { text: 'Data', active: true, icon: 'file-earmark' }
-]
-</script>
-```
-
-### With Event Handling
-
-```vue
-<template>
-  <VibeBreadcrumb :items="breadcrumbItems" @item-click="handleClick" />
-</template>
-
-<script setup>
-const breadcrumbItems = [
-  { text: 'Home', href: '/' },
-  { text: 'Products', href: '/products' },
-  { text: 'Details', active: true }
-]
-
-const handleClick = ({ item, index }) => {
-  console.log(`Clicked: ${item.text} at index ${index}`)
-}
-</script>
-```
-
-## Bootstrap CSS Classes
-
-- `.breadcrumb`
-- `.breadcrumb-item`
-- `.active`

package/docs/components/navigation/nav.md

@@ -1,88 +0,0 @@
-# VibeNav
-
-Data-driven navigation tabs and pills for organizing content.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `tabs` | `Boolean` | `false` | Use tabs style |
-| `pills` | `Boolean` | `false` | Use pills style |
-| `underline` | `Boolean` | `false` | Use the new Bootstrap 5.3 underline style |
-| `fill` | `Boolean` | `false` | Fill available width proportionally |
-| `justified` | `Boolean` | `false` | Fill available width equally |
-| `vertical` | `Boolean` | `false` | Stack navigation vertically |
-| `tag` | `String` | `'ul'` | HTML tag to render |
-| `items` | `NavItem[]` | Required | Array of nav items |
-
-### NavItem Interface
-
-```typescript
-interface NavItem {
-  text: string
-  href?: string
-  to?: string | object
-  active?: boolean
-  disabled?: boolean
-  children?: NavItem[] // Support for dropdowns
-}
-```
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `item-click` | `{ item, index, event }` | Emitted when item is clicked |
-| `show` | `event` | Emitted when a tab starts showing |
-| `shown` | `event` | Emitted when a tab is fully shown |
-| `hide` | `event` | Emitted when a tab starts hiding |
-| `hidden` | `event` | Emitted when a tab is fully hidden |
-
-## Slots
-
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `item` | `{ item, index }` | Custom item rendering |
-
-## Usage
-
-### Interactive Tabs
-
-When using the `tabs` or `pills` props, nav links with an `href` starting with `#` will automatically act as Bootstrap tab triggers.
-
-```vue
-<template>
-  <div>
-    <VibeNav tabs :items="navItems" />
-    
-    <VibeTabContent :panes="tabPanes" class="mt-3" />
-  </div>
-</template>
-
-<script setup>
-const navItems = [
-  { text: 'Home', href: '#home', active: true },
-  { text: 'Profile', href: '#profile' }
-]
-
-const tabPanes = [
-  { id: 'home', content: 'Home content...', active: true },
-  { id: 'profile', content: 'Profile content...' }
-]
-</script>
-```
-
-## Important Notes
-
-**Automatic Initialization:** When using `tabs` or `pills`, this component automatically initializes Bootstrap's Tab functionality for any items that target a local ID (e.g., `href="#my-tab"`).
-
-**State Management:** For complex tab state, combine `VibeNav` with `VibeTabContent` and manage the `active` state through your data.
-
-## Bootstrap CSS Classes
-
-- `.nav`
-- `.nav-tabs`
-- `.nav-pills`
-- `.nav-underline`
-- `.nav-item`
-- `.nav-link`

package/docs/components/navigation/navbar.md

@@ -1,106 +0,0 @@
-# Navbar Components
-
-Responsive navigation header with support for branding, navigation, and collapsible content.
-
-## VibeNavbar
-
-Main navbar container. Provides reactive collapse state to child components via Vue's provide/inject.
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `Variant\|'dark'\|'light'` | `'light'` | Background color: maps to `bg-{variant}` |
-| `theme` | `'dark'\|'light'` | auto | Color scheme applied via `data-bs-theme`. Defaults to `'dark'` when `variant='dark'`, `'light'` when `variant='light'`, otherwise unset |
-| `expand` | `Boolean\|String` | `'lg'` | Breakpoint for collapse: `'sm'`, `'md'`, `'lg'`, `'xl'`, or `true` for always expanded |
-| `container` | `Boolean\|String` | `true` | Container type: `true` for fluid, or `'sm'`, `'md'`, `'lg'`, `'xl'` |
-| `position` | `NavbarPosition` | `undefined` | Position: `'fixed-top'`, `'fixed-bottom'`, `'sticky-top'` |
-| `tag` | `String` | `'nav'` | HTML tag to render |
-
-## Sub-Components
-
-### VibeNavbarBrand
-Branding/logo section
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `href` | `String` | `undefined` | Link URL (renders as `<a>`) |
-| `to` | `String\|Object` | `undefined` | Router link target (renders as `<router-link>`) |
-
-### VibeNavbarToggle
-Mobile collapse toggle button.
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `target` | `String` | Required | The `id` of the `VibeCollapse` to toggle |
-| `ariaLabel` | `String` | `'Toggle navigation'` | Accessible label for the button |
-
-### VibeNavbarNav
-Navigation links container. Supports regular links and dropdown items.
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `tag` | `String` | `'ul'` | HTML tag to render |
-| `items` | `NavItem[]` | `undefined` | Array of nav items (data-driven mode) |
-
-#### Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `item-click` | `{ item, index, event }` | Emitted when a regular nav item is clicked |
-| `dropdown-item-click` | `{ item, itemIndex, child, childIndex, event }` | Emitted when a dropdown child item is clicked |
-
-## Usage
-
-### Basic Navbar
-
-```vue
-<template>
-  <VibeNavbar variant="light" expand="lg">
-    <VibeNavbarBrand href="#">Navbar</VibeNavbarBrand>
-    <VibeNavbarToggle target="navbarNav" />
-    <VibeCollapse id="navbarNav" is-nav>
-      <VibeNavbarNav :items="navItems" />
-    </VibeCollapse>
-  </VibeNavbar>
-</template>
-
-<script setup>
-const navItems = [
-  { text: 'Home', href: '#', active: true },
-  { text: 'Features', href: '#' },
-  { text: 'Pricing', href: '#' }
-]
-</script>
-```
-
-## Important Notes
-
-**Automatic Synchronization:** `VibeNavbarToggle` is refactored to ensure that clicking it updates both Vue's internal state and the underlying Bootstrap `Collapse` instance simultaneously.
-
-**Smooth Transitions:** `VibeCollapse` now utilizes Bootstrap's JavaScript engine by default, providing smooth sliding animations when toggled via the navbar.
-
-**State Management:** Even when using Bootstrap JS for animations, the navbar remains fully reactive. You can still control the collapse state programmatically via the `VibeCollapse` `v-model`.
-
-## Mobile & Hybrid Optimization
-
-**Safe Areas:** When using `position="fixed-top"`, `fixed-bottom"`, or `sticky-top"`, the navbar automatically adds padding to account for device safe areas (notches) in hybrid environments like Capacitor.
-
-## Bootstrap CSS Classes
-
-- `.navbar`
-- `.navbar-expand-{breakpoint}`
-- `.bg-{variant}`
-- `data-bs-theme="dark|light"`
-- `.navbar-brand`
-- `.navbar-toggler`
-- `.navbar-nav`
-- `.navbar-collapse`
-- `.nav-item`
-- `.nav-link`

package/docs/components/navigation/pagination.md

@@ -1,146 +0,0 @@
-# VibePagination
-
-Data-driven pagination component with v-model support.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | `'sm' \| 'lg'` | `undefined` | Pagination size |
-| `ariaLabel` | `String` | `'Pagination'` | ARIA label for the nav element |
-| `totalPages` | `Number` | Required | Total number of pages |
-| `currentPage` | `Number` | `1` | Current active page |
-| `showPrevNext` | `Boolean` | `true` | Show previous/next buttons |
-| `prevText` | `String` | `'Previous'` | Text for previous button |
-| `nextText` | `String` | `'Next'` | Text for next button |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:currentPage` | `page: number` | Emitted when page changes (v-model) |
-| `page-click` | `page: number` | Emitted when a page is clicked |
-
-## Slots
-
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `prev` | `{ disabled }` | Custom previous button |
-| `page` | `{ page, active }` | Custom page button |
-| `next` | `{ disabled }` | Custom next button |
-
-## Usage
-
-### Basic Example
-
-```vue
-<template>
-  <VibePagination
-    :total-pages="10"
-    v-model:current-page="currentPage"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const currentPage = ref(1)
-</script>
-```
-
-### Sizes
-
-```vue
-<template>
-  <!-- Small -->
-  <VibePagination :total-pages="5" size="sm" v-model:current-page="page1" />
-
-  <!-- Default -->
-  <VibePagination :total-pages="5" v-model:current-page="page2" />
-
-  <!-- Large -->
-  <VibePagination :total-pages="5" size="lg" v-model:current-page="page3" />
-</template>
-```
-
-### Without Prev/Next Buttons
-
-```vue
-<template>
-  <VibePagination
-    :total-pages="10"
-    :show-prev-next="false"
-    v-model:current-page="currentPage"
-  />
-</template>
-```
-
-### Custom Button Text
-
-```vue
-<template>
-  <VibePagination
-    :total-pages="10"
-    prev-text="← Back"
-    next-text="Forward →"
-    v-model:current-page="currentPage"
-  />
-</template>
-```
-
-### Custom Page Rendering
-
-Use scoped slots for complete customization:
-
-```vue
-<template>
-  <VibePagination :total-pages="10" v-model:current-page="currentPage">
-    <template #prev="{ disabled }">
-      <VibeIcon icon="chevron-left" />
-    </template>
-
-    <template #page="{ page, active }">
-      Page {{ page }}
-    </template>
-
-    <template #next="{ disabled }">
-      <VibeIcon icon="chevron-right" />
-    </template>
-  </VibePagination>
-</template>
-```
-
-### With Event Handling
-
-```vue
-<template>
-  <VibePagination
-    :total-pages="20"
-    v-model:current-page="currentPage"
-    @page-click="handlePageClick"
-  />
-
-  <p>Current page: {{ currentPage }}</p>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const currentPage = ref(1)
-
-const handlePageClick = (page) => {
-  console.log(`Navigated to page ${page}`)
-  // Fetch data for the new page
-}
-</script>
-```
-
-## Bootstrap CSS Classes
-
-- `.pagination`
-- `.pagination-sm`
-- `.pagination-lg`
-- `.page-item`
-- `.page-link`
-- `.active`
-- `.disabled`

package/docs/components/progress/progress.md

@@ -1,182 +0,0 @@
-# VibeProgress
-
-Data-driven progress bar component supporting single or multiple bars.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `height` | `String` | `undefined` | Custom height (e.g., `'20px'`, `'2rem'`) |
-| `bars` | `ProgressBar[]` | Required | Array of progress bars to display |
-
-### ProgressBar Interface
-
-```typescript
-interface ProgressBar {
-  value: number
-  max?: number
-  variant?: Variant
-  striped?: boolean
-  animated?: boolean
-  label?: string
-  showValue?: boolean
-}
-```
-
-## Slots
-
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `label` | `{ bar, index }` | Custom label rendering for each bar |
-
-## Usage
-
-### Basic Progress
-
-```vue
-<template>
-  <VibeProgress :bars="[{ value: 25 }]" />
-</template>
-```
-
-### With Label
-
-```vue
-<template>
-  <VibeProgress :bars="[{ value: 75, showValue: true }]" />
-</template>
-```
-
-### Custom Height
-
-```vue
-<template>
-  <VibeProgress height="20px" :bars="[{ value: 50 }]" />
-</template>
-```
-
-### Colored Progress Bars
-
-```vue
-<template>
-  <div class="d-flex flex-column gap-2">
-    <VibeProgress :bars="[{ value: 25, variant: 'success' }]" />
-    <VibeProgress :bars="[{ value: 50, variant: 'info' }]" />
-    <VibeProgress :bars="[{ value: 75, variant: 'warning' }]" />
-    <VibeProgress :bars="[{ value: 100, variant: 'danger' }]" />
-  </div>
-</template>
-```
-
-### Striped and Animated
-
-```vue
-<template>
-  <div class="d-flex flex-column gap-2">
-    <!-- Striped -->
-    <VibeProgress :bars="[{ value: 60, variant: 'success', striped: true }]" />
-
-    <!-- Animated stripes -->
-    <VibeProgress :bars="[{ value: 75, variant: 'info', animated: true }]" />
-  </div>
-</template>
-```
-
-### Multiple Bars
-
-Stack multiple progress bars in a single component:
-
-```vue
-<template>
-  <VibeProgress :bars="progressBars" />
-</template>
-
-<script setup>
-const progressBars = [
-  { value: 15, variant: 'success' },
-  { value: 30, variant: 'warning' },
-  { value: 20, variant: 'danger' }
-]
-</script>
-```
-
-### Dynamic Progress
-
-```vue
-<script setup>
-import { ref, onMounted } from 'vue'
-
-const progress = ref(0)
-
-onMounted(() => {
-  const interval = setInterval(() => {
-    if (progress.value < 100) {
-      progress.value += 10
-    } else {
-      clearInterval(interval)
-    }
-  }, 500)
-})
-</script>
-
-<template>
-  <VibeProgress :bars="[{
-    value: progress,
-    variant: 'primary',
-    showValue: true
-  }]" />
-</template>
-```
-
-### Custom Label Rendering
-
-Use the `label` scoped slot for custom labels:
-
-```vue
-<template>
-  <VibeProgress :bars="progressBars">
-    <template #label="{ bar }">
-      <strong>{{ bar.value }}% Complete</strong>
-    </template>
-  </VibeProgress>
-</template>
-
-<script setup>
-const progressBars = [{ value: 75, variant: 'success' }]
-</script>
-```
-
-### Complex Example
-
-```vue
-<script setup>
-import { ref } from 'vue'
-
-const tasks = ref([
-  { name: 'Design', value: 100, variant: 'success' },
-  { name: 'Development', value: 75, variant: 'primary', animated: true },
-  { name: 'Testing', value: 50, variant: 'warning', striped: true },
-  { name: 'Deployment', value: 0, variant: 'secondary' }
-])
-</script>
-
-<template>
-  <div class="d-flex flex-column gap-3">
-    <div v-for="task in tasks" :key="task.name">
-      <div class="d-flex justify-content-between mb-1">
-        <span>{{ task.name }}</span>
-        <span>{{ task.value }}%</span>
-      </div>
-      <VibeProgress :bars="[task]" />
-    </div>
-  </div>
-</template>
-```
-
-## Bootstrap CSS Classes
-
-- `.progress`
-- `.progress-bar`
-- `.bg-{variant}`
-- `.progress-bar-striped`
-- `.progress-bar-animated`

package/docs/composables/back-button.md

@@ -1,28 +0,0 @@
-# useBackButton
-
-A composable to handle the Android hardware back button in hybrid mobile environments (like Capacitor or WebView apps).
-
-## Basic Usage
-
-```javascript
-import { useBackButton } from '@velkymx/vibeui'
-
-// Automatically closes this logic when the back button is pressed
-useBackButton(() => {
-  console.log('Back button pressed!')
-  closeMyOverlay()
-})
-```
-
-## How it Works
-- It listens for the native `backbutton` event emitted by hybrid wrappers.
-- It maintains an internal stack of "closeable" actions.
-- When the back button is pressed, it executes the most recently registered action and prevents the default app-exit behavior.
-- It automatically handles cleanup when the component using it is unmounted.
-
-## Integrated Components
-The following VibeUI components have `useBackButton` integrated automatically:
-- `VibeModal`
-- `VibeOffcanvas`
-
-You don't need to manually use this composable if you are using these components; they will "just work" on Android devices.