@velkymx/vibeui 0.8.2 → 0.9.0

package/docs/components/interactive/accordion.md

@@ -1,92 +0,0 @@
-# VibeAccordion
-
-Collapsible accordion component for organizing content in a data-driven way.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `String` | `Auto-generated` | Unique identifier for the accordion |
-| `flush` | `Boolean` | `false` | Remove borders and rounded corners |
-| `items` | `AccordionItem[]` | Required | Array of accordion items |
-| `alwaysOpen` | `Boolean` | `false` | Don't collapse other items when one is opened |
-
-### AccordionItem Interface
-
-```typescript
-interface AccordionItem {
-  id: string
-  title: string
-  content: string
-  show?: boolean
-}
-```
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `item-click` | `{ item, index }` | Emitted when an accordion item is clicked |
-| `show` | `id` | Emitted when an item starts showing |
-| `shown` | `id` | Emitted when an item is fully shown |
-| `hide` | `id` | Emitted when an item starts hiding |
-| `hidden` | `id` | Emitted when an item is fully hidden |
-
-## Slots
-
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `title` | `{ item, index }` | Custom title rendering |
-| `content` | `{ item, index }` | Custom content rendering |
-
-## Usage
-
-### Basic Example
-
-```vue
-<template>
-  <VibeAccordion :items="accordionItems" />
-</template>
-
-<script setup>
-const accordionItems = [
-  {
-    id: 'collapseOne',
-    title: 'Accordion Item #1',
-    content: 'This is the first item\'s content.',
-    show: true
-  },
-  {
-    id: 'collapseTwo',
-    title: 'Accordion Item #2',
-    content: 'This is the second item\'s content.'
-  }
-]
-</script>
-```
-
-### Always Open
-
-Items stay open when another item is opened:
-
-```vue
-<template>
-  <VibeAccordion always-open :items="accordionItems" />
-</template>
-```
-
-## Important Notes
-
-**Automatic Initialization:** This component automatically initializes Bootstrap's Collapse functionality for each item when it is mounted, provided that Bootstrap's JavaScript is available in your project.
-
-**Reactivity:** The `show` property in the `AccordionItem` objects is watched. Changing it in your parent state will trigger the corresponding Bootstrap transition.
-
-## Bootstrap CSS Classes
-
-- `.accordion`
-- `.accordion-flush`
-- `.accordion-item`
-- `.accordion-header`
-- `.accordion-button`
-- `.accordion-collapse`
-- `.accordion-body`

package/docs/components/interactive/carousel.md

@@ -1,97 +0,0 @@
-# VibeCarousel
-
-Data-driven slideshow component for cycling through images or content.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `modelValue` | `Number` | `0` | Active slide index (v-model) |
-| `controls` | `Boolean` | `true` | Show prev/next controls |
-| `indicators` | `Boolean` | `true` | Show slide indicators |
-| `ride` | `Boolean\|String` | `false` | Auto-play: `false`, `true`, or `'carousel'` |
-| `interval` | `Number\|Boolean` | `5000` | Slide interval in ms (`false` to disable) |
-| `keyboard` | `Boolean` | `true` | Keyboard navigation |
-| `pause` | `String\|Boolean` | `'hover'` | Pause on hover (`'hover'` or `false`) |
-| `wrap` | `Boolean` | `true` | Continuous cycling |
-| `touch` | `Boolean` | `true` | Touch swipe support |
-| `dark` | `Boolean` | `false` | Dark variant indicators/controls |
-| `fade` | `Boolean` | `false` | Fade transition instead of slide |
-| `items` | `CarouselItem[]` | Required | Array of carousel items |
-
-### CarouselItem Interface
-
-```typescript
-interface CarouselItem {
-  src: string
-  alt?: string
-  caption?: string
-  captionText?: string
-  active?: boolean
-  interval?: number
-}
-```
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `Number` | Emitted when the active slide changes |
-| `slide` | - | Emitted when slide transition starts |
-| `slid` | - | Emitted when slide transition completes |
-
-## Slots
-
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `caption` | `{ item, index }` | Custom caption rendering |
-
-## Usage
-
-### Reactive Usage (v-model)
-
-```vue
-<template>
-  <div>
-    <VibeCarousel v-model="currentSlide" :items="carouselItems" />
-    
-    <div class="mt-3">
-      <VibeButton @click="currentSlide = 0">Go to Slide 1</VibeButton>
-      <VibeButton @click="currentSlide = 1">Go to Slide 2</VibeButton>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-const currentSlide = ref(0)
-const carouselItems = [...]
-</script>
-```
-
-### Basic Carousel
-
-```vue
-<template>
-  <VibeCarousel :items="carouselItems" />
-</template>
-```
-
-## Important Notes
-
-**Automatic Initialization:** This component automatically initializes Bootstrap's Carousel functionality when it is mounted, provided that Bootstrap's JavaScript is available in your project.
-
-**Instance Exposure:** You can access the underlying Bootstrap instance via template ref using the `bsInstance` property.
-
-## Bootstrap CSS Classes
-
-- `.carousel`
-- `.carousel-inner`
-- `.carousel-item`
-- `.carousel-control-prev`
-- `.carousel-control-next`
-- `.carousel-indicators`
-- `.carousel-caption`
-- `.carousel-dark`
-- `.carousel-fade`

package/docs/components/interactive/collapse.md

@@ -1,105 +0,0 @@
-# VibeCollapse
-
-Toggle visibility of content with smooth transitions.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `modelValue` | `Boolean` | `false` | Control visibility (v-model) |
-| `tag` | `String` | `'div'` | HTML tag to render |
-| `horizontal` | `Boolean` | `false` | Horizontal collapse |
-| `isNav` | `Boolean` | `false` | Adds `navbar-collapse` class for use inside `VibeNavbar` |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `Boolean` | Emitted when visibility changes |
-| `show` | - | Emitted when collapse starts showing |
-| `shown` | - | Emitted when collapse is fully shown |
-| `hide` | - | Emitted when collapse starts hiding |
-| `hidden` | - | Emitted when collapse is fully hidden |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Collapsible content |
-
-## Usage
-
-### Reactive Usage (v-model)
-
-```vue
-<template>
-  <div>
-    <VibeButton variant="primary" @click="show = !show">
-      Toggle Collapse
-    </VibeButton>
-
-    <VibeCollapse v-model="show">
-      <div class="card card-body mt-2">
-        This content is controlled via Vue state with smooth animations.
-      </div>
-    </VibeCollapse>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-const show = ref(false)
-</script>
-```
-
-### Inside a Navbar
-
-When used inside a `VibeNavbar`, add `is-nav` to get the `navbar-collapse` class. `VibeNavbarToggle` will automatically synchronize with this component.
-
-```vue
-<template>
-  <VibeNavbar variant="dark" expand="lg">
-    <VibeNavbarBrand href="#">Brand</VibeNavbarBrand>
-    <VibeNavbarToggle target="navContent" />
-    <VibeCollapse id="navContent" is-nav>
-      <VibeNavbarNav :items="navItems" />
-    </VibeCollapse>
-  </VibeNavbar>
-</template>
-```
-
-### Horizontal Collapse
-
-```vue
-<template>
-  <div>
-    <VibeButton variant="primary" @click="show = !show">
-      Toggle Width
-    </VibeButton>
-
-    <div style="min-height: 120px">
-      <VibeCollapse v-model="show" horizontal>
-        <div class="card card-body" style="width: 300px">
-          This is horizontal collapse content!
-        </div>
-      </VibeCollapse>
-    </div>
-  </div>
-</template>
-```
-
-## Important Notes
-
-**Automatic Initialization:** This component automatically initializes Bootstrap's Collapse functionality when it is mounted, ensuring that smooth sliding transitions are used.
-
-**State Synchronization:** Refactored to ensure that clicking a toggle (like `VibeNavbarToggle`) updates both Vue's internal state and Bootstrap's JavaScript instance simultaneously.
-
-**Instance Exposure:** You can access the underlying Bootstrap instance via template ref using the `bsInstance` property.
-
-## Bootstrap CSS Classes
-
-- `.collapse`
-- `.navbar-collapse` (when `is-nav` is set)
-- `.collapse-horizontal`
-- `.show`

package/docs/components/interactive/dropdown.md

@@ -1,93 +0,0 @@
-# VibeDropdown
-
-Data-driven toggleable contextual overlay for displaying lists of links.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `text` | `String` | `'Dropdown'` | Button text |
-| `variant` | `Variant` | `'primary'` | Button color variant |
-| `size` | `Size` | `undefined` | Button size (`'sm'` or `'lg'`) |
-| `split` | `Boolean` | `false` | Split button style |
-| `direction` | `Direction` | `'down'` | Direction: `'up'`, `'down'`, `'start'`, `'end'` |
-| `menuEnd` | `Boolean` | `false` | Align menu to the right |
-| `items` | `DropdownItem[]` | Required | Array of dropdown items |
-| `autoClose` | `Boolean\|String` | `true` | Close behavior: `true`, `false`, `'inside'`, `'outside'` |
-
-### DropdownItem Interface
-
-```typescript
-interface DropdownItem {
-  text?: string
-  href?: string
-  to?: string | object
-  active?: boolean
-  disabled?: boolean
-  divider?: boolean
-  header?: boolean
-}
-```
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `item-click` | `{ item, index, event }` | Emitted when an item is clicked |
-| `show` | - | Emitted when dropdown starts showing |
-| `shown` | - | Emitted when dropdown is fully shown |
-| `hide` | - | Emitted when dropdown starts hiding |
-| `hidden` | - | Emitted when dropdown is fully hidden |
-
-## Slots
-
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `button` | - | Custom button content |
-| `item` | `{ item, index }` | Custom item rendering |
-| `header` | `{ item, index }` | Custom header rendering |
-
-## Usage
-
-### Programmatic Control
-
-```vue
-<template>
-  <div>
-    <VibeButton @click="$refs.myDropdown.toggle()">External Toggle</VibeButton>
-    
-    <VibeDropdown
-      ref="myDropdown"
-      text="Dropdown Menu"
-      :items="dropdownItems"
-    />
-  </div>
-</template>
-```
-
-### Basic Dropdown
-
-```vue
-<template>
-  <VibeDropdown
-    text="Dropdown Menu"
-    :items="dropdownItems"
-  />
-</template>
-```
-
-## Important Notes
-
-**Automatic Initialization:** This component automatically initializes Bootstrap's Dropdown functionality when it is mounted, provided that Bootstrap's JavaScript is available in your project.
-
-**Programmatic Methods:** You can call `show()`, `hide()`, and `toggle()` on the component instance via template refs.
-
-**Instance Exposure:** You can access the underlying Bootstrap instance via template ref using the `bsInstance` property.
-
-## Bootstrap CSS Classes
-
-- `.dropdown`, `.dropup`, `.dropend`, `.dropstart`
-- `.dropdown-toggle`
-- `.dropdown-menu`
-- `.dropdown-item`

package/docs/components/interactive/modal.md

@@ -1,148 +0,0 @@
-# VibeModal
-
-Modal dialogs for lightboxes, user notifications, or custom content.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `String` | `Auto-generated` | Unique identifier for the modal |
-| `modelValue` | `Boolean` | `false` | Control visibility (v-model) |
-| `title` | `String` | `''` | Modal title |
-| `size` | `Size\|'xl'` | `undefined` | Modal size: `'sm'`, `'lg'`, `'xl'` |
-| `centered` | `Boolean` | `false` | Vertically center modal |
-| `scrollable` | `Boolean` | `false` | Scrollable modal body |
-| `fullscreen` | `Boolean\|String` | `false` | Fullscreen: `true` or breakpoint |
-| `staticBackdrop` | `Boolean` | `false` | Don't close on backdrop click |
-| `hideHeader` | `Boolean` | `false` | Hide header section |
-| `hideFooter` | `Boolean` | `false` | Hide footer section |
-| `teleport` | `Boolean\|String` | `'body'` | Destination for Vue Teleport |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `Boolean` | Emitted when modal visibility changes |
-| `show` | - | Emitted when modal starts showing |
-| `shown` | - | Emitted when modal is fully shown |
-| `hide` | - | Emitted when modal starts hiding |
-| `hidden` | - | Emitted when modal is fully hidden |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Modal body content |
-| `header` | Custom header content |
-| `footer` | Custom footer content |
-
-## Usage
-
-### Reactive Usage (v-model)
-
-```vue
-<template>
-  <div>
-    <VibeButton variant="primary" @click="showModal = true">
-      Open Modal
-    </VibeButton>
-
-    <VibeModal v-model="showModal" title="Reactive Modal">
-      <p>This modal is controlled via Vue state.</p>
-    </VibeModal>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-const showModal = ref(false)
-</script>
-```
-
-### Basic Modal (Data Attributes)
-
-```vue
-<template>
-  <div>
-    <!-- You can still use standard Bootstrap data attributes -->
-    <VibeButton variant="primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-      Launch Modal
-    </VibeButton>
-
-    <VibeModal id="exampleModal" title="Modal Title">
-      <p>Modal body text goes here.</p>
-    </VibeModal>
-  </div>
-</template>
-```
-
-### Sized Modals
-
-```vue
-<template>
-  <div>
-    <VibeModal title="Small Modal" size="sm">
-      Small modal content
-    </VibeModal>
-
-    <VibeModal title="Large Modal" size="lg">
-      Large modal content
-    </VibeModal>
-  </div>
-</template>
-```
-
-### Centered Modal
-
-```vue
-<template>
-  <VibeModal title="Centered Modal" centered>
-    This modal is vertically centered.
-  </VibeModal>
-</template>
-```
-
-### Custom Footer
-
-```vue
-<template>
-  <VibeModal title="Custom Footer">
-    <p>Modal with custom footer buttons.</p>
-
-    <template #footer>
-      <VibeButton variant="secondary" @click="showModal = false">Close</VibeButton>
-      <VibeButton variant="primary">Save changes</VibeButton>
-    </template>
-  </VibeModal>
-</template>
-```
-
-## Important Notes
-
-**Automatic Initialization:** This component automatically initializes Bootstrap's Modal functionality when it is mounted, provided that Bootstrap's JavaScript is available in your project.
-
-**Teleportation:** By default, this component teleports its DOM elements to the `<body>` to avoid stacking context issues. You can customize this with the `teleport` prop.
-
-**Instance Exposure:** You can access the underlying Bootstrap instance via template ref using the `bsInstance` property.
-
-## Mobile Optimization
-
-**Safe Areas:** In fullscreen mode, the modal header and footer automatically respect device safe areas (notches) in hybrid apps.
-
-**Hardware Back Button:** On Android devices in hybrid environments, the hardware back button will automatically close the modal if it is open.
-
-**Dynamic Height:** Fullscreen modals use `dvh` (dynamic viewport height) units to ensure they occupy the full screen height even when mobile browser bars are visible.
-
-## Bootstrap CSS Classes
-
-- `.modal`
-- `.modal-dialog`
-- `.modal-content`
-- `.modal-header`
-- `.modal-title`
-- `.modal-body`
-- `.modal-footer`
-- `.modal-{size}`
-- `.modal-dialog-centered`
-- `.modal-dialog-scrollable`
-- `.modal-fullscreen`

package/docs/components/interactive/offcanvas.md

@@ -1,89 +0,0 @@
-# VibeOffcanvas
-
-Hidden sidebar for navigation or additional content.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `modelValue` | `Boolean` | `false` | Control visibility (v-model) |
-| `title` | `String` | `''` | Offcanvas title |
-| `placement` | `OffcanvasPlacement` | `'start'` | Placement: `'start'`, `'end'`, `'top'`, `'bottom'` |
-| `backdrop` | `Boolean\|String` | `true` | Backdrop: `true`, `false`, or `'static'` |
-| `scroll` | `Boolean` | `false` | Allow body scrolling |
-| `teleport` | `Boolean\|String` | `'body'` | Destination for Vue Teleport |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `Boolean` | Emitted when visibility changes |
-| `show` | - | Emitted when offcanvas starts showing |
-| `shown` | - | Emitted when offcanvas is fully shown |
-| `hide` | - | Emitted when offcanvas starts hiding |
-| `hidden` | - | Emitted when offcanvas is fully hidden |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Offcanvas body content |
-| `header` | Custom header content |
-
-## Usage
-
-### Reactive Usage (v-model)
-
-```vue
-<template>
-  <div>
-    <VibeButton variant="primary" @click="showOffcanvas = true">
-      Open Offcanvas
-    </VibeButton>
-
-    <VibeOffcanvas v-model="showOffcanvas" title="Reactive Offcanvas">
-      This offcanvas is controlled via Vue state.
-    </VibeOffcanvas>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-const showOffcanvas = ref(false)
-</script>
-```
-
-### Placement Options
-
-```vue
-<template>
-  <VibeOffcanvas title="Right Side" placement="end">
-    Content on the right
-  </VibeOffcanvas>
-</template>
-```
-
-## Important Notes
-
-**Automatic Initialization:** This component automatically initializes Bootstrap's Offcanvas functionality when it is mounted, provided that Bootstrap's JavaScript is available in your project.
-
-**Teleportation:** By default, this component teleports its DOM elements to the `<body>` to avoid stacking context issues. You can customize this with the `teleport` prop.
-
-**Instance Exposure:** You can access the underlying Bootstrap instance via template ref using the `bsInstance` property.
-
-## Mobile Optimization
-
-**Safe Areas:** When used in hybrid apps with `viewport-fit=cover`, the offcanvas header automatically adds padding to account for device notches.
-
-**Hardware Back Button:** On Android devices in hybrid environments, the hardware back button will automatically close the offcanvas if it is open.
-
-**Dynamic Height:** The offcanvas uses `dvh` (dynamic viewport height) units to ensure it occupies the full screen height even when mobile browser bars are visible.
-
-## Bootstrap CSS Classes
-
-- `.offcanvas`
-- `.offcanvas-{placement}`
-- `.offcanvas-header`
-- `.offcanvas-title`
-- `.offcanvas-body`