@velkymx/vibeui 0.8.2 → 0.9.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 (88) hide show
  1. package/README.md +171 -9
  2. package/dist/components/VibeAlert.vue.d.ts +12 -2
  3. package/dist/components/VibeAutocomplete.vue.d.ts +46 -0
  4. package/dist/components/VibeButton.vue.d.ts +4 -4
  5. package/dist/components/VibeDataTable.vue.d.ts +6 -6
  6. package/dist/components/VibeDatePicker.vue.d.ts +122 -0
  7. package/dist/components/VibeDraggable.vue.d.ts +81 -0
  8. package/dist/components/VibeDroppable.vue.d.ts +74 -0
  9. package/dist/components/VibeFileInput.vue.d.ts +133 -0
  10. package/dist/components/VibeFormCheckbox.vue.d.ts +1 -1
  11. package/dist/components/VibeFormDatepicker.vue.d.ts +1 -1
  12. package/dist/components/VibeFormGroup.vue.d.ts +1 -1
  13. package/dist/components/VibeFormInput.vue.d.ts +1 -1
  14. package/dist/components/VibeFormRadio.vue.d.ts +1 -1
  15. package/dist/components/VibeFormSelect.vue.d.ts +1 -1
  16. package/dist/components/VibeFormSpinbutton.vue.d.ts +1 -1
  17. package/dist/components/VibeFormSwitch.vue.d.ts +1 -1
  18. package/dist/components/VibeFormTextarea.vue.d.ts +1 -1
  19. package/dist/components/VibeFormWysiwyg.vue.d.ts +2 -2
  20. package/dist/components/VibeResizable.vue.d.ts +144 -0
  21. package/dist/components/VibeSkeleton.vue.d.ts +53 -0
  22. package/dist/components/VibeSlider.vue.d.ts +78 -0
  23. package/dist/components/VibeSortable.vue.d.ts +40 -0
  24. package/dist/components/VibeStepper.vue.d.ts +132 -0
  25. package/dist/components/VibeTab.vue.d.ts +45 -0
  26. package/dist/components/VibeTabs.vue.d.ts +82 -0
  27. package/dist/components/VibeToast.vue.d.ts +11 -0
  28. package/dist/components/VibeToastHost.vue.d.ts +15 -0
  29. package/dist/components/dndStore.d.ts +6 -0
  30. package/dist/components/index.d.ts +14 -1
  31. package/dist/composables/useForm.d.ts +22 -0
  32. package/dist/composables/usePosition.d.ts +20 -0
  33. package/dist/composables/useToast.d.ts +52 -0
  34. package/dist/directives/vTooltip.d.ts +25 -0
  35. package/dist/index.d.ts +6 -0
  36. package/dist/types.d.ts +11 -4
  37. package/dist/vibeui.css +1 -1
  38. package/dist/vibeui.es.js +4256 -1827
  39. package/dist/vibeui.umd.js +1 -1
  40. package/package.json +4 -5
  41. package/CLAUDE.md +0 -48
  42. package/docs/README.md +0 -153
  43. package/docs/components/advanced/popover.md +0 -150
  44. package/docs/components/advanced/scrollspy.md +0 -64
  45. package/docs/components/advanced/tooltip.md +0 -111
  46. package/docs/components/card/card.md +0 -215
  47. package/docs/components/core/alert.md +0 -72
  48. package/docs/components/core/badge.md +0 -81
  49. package/docs/components/core/button-group.md +0 -105
  50. package/docs/components/core/button.md +0 -127
  51. package/docs/components/core/close-button.md +0 -82
  52. package/docs/components/core/link.md +0 -36
  53. package/docs/components/core/placeholder.md +0 -135
  54. package/docs/components/core/spinner.md +0 -109
  55. package/docs/components/data/datatable.md +0 -416
  56. package/docs/components/interactive/accordion.md +0 -92
  57. package/docs/components/interactive/carousel.md +0 -97
  58. package/docs/components/interactive/collapse.md +0 -105
  59. package/docs/components/interactive/dropdown.md +0 -93
  60. package/docs/components/interactive/modal.md +0 -148
  61. package/docs/components/interactive/offcanvas.md +0 -89
  62. package/docs/components/interactive/toast.md +0 -114
  63. package/docs/components/layout/col.md +0 -123
  64. package/docs/components/layout/container.md +0 -59
  65. package/docs/components/layout/row.md +0 -113
  66. package/docs/components/list/list-group.md +0 -221
  67. package/docs/components/navigation/breadcrumb.md +0 -116
  68. package/docs/components/navigation/nav.md +0 -88
  69. package/docs/components/navigation/navbar.md +0 -106
  70. package/docs/components/navigation/pagination.md +0 -146
  71. package/docs/components/progress/progress.md +0 -182
  72. package/docs/composables/back-button.md +0 -28
  73. package/docs/composables/breakpoints.md +0 -54
  74. package/docs/composables/color-mode.md +0 -141
  75. package/docs/forms/README.md +0 -88
  76. package/docs/forms/form-checkbox.md +0 -50
  77. package/docs/forms/form-datepicker.md +0 -50
  78. package/docs/forms/form-group.md +0 -80
  79. package/docs/forms/form-input.md +0 -55
  80. package/docs/forms/form-radio.md +0 -58
  81. package/docs/forms/form-select.md +0 -54
  82. package/docs/forms/form-spinbutton.md +0 -55
  83. package/docs/forms/form-switch.md +0 -47
  84. package/docs/forms/form-textarea.md +0 -51
  85. package/docs/forms/form-wysiwyg.md +0 -64
  86. package/docs/forms/input-group.md +0 -51
  87. package/docs/forms/validation.md +0 -599
  88. package/llms.txt +0 -422
package/docs/components/interactive/toast.md DELETED
@@ -1,114 +0,0 @@
1
- # VibeToast
2
-
3
- Push notifications for lightweight alerts.
4
-
5
- ## Props
6
-
7
- | Prop | Type | Default | Description |
8
- |------|------|---------|-------------|
9
- | `id` | `String` | `Auto-generated` | Unique identifier |
10
- | `modelValue` | `Boolean` | `false` | Control visibility (v-model) |
11
- | `title` | `String` | `''` | Toast title |
12
- | `variant` | `Variant` | `undefined` | Color variant |
13
- | `autohide` | `Boolean` | `true` | Auto hide after delay |
14
- | `delay` | `Number` | `5000` | Delay in milliseconds |
15
- | `teleport` | `Boolean\|String` | `'body'` | Destination for Vue Teleport |
16
- | `placement` | `ToastPlacement` | `'top-end'` | Position of the toast |
17
-
18
- ## Events
19
-
20
- | Event | Payload | Description |
21
- |-------|---------|-------------|
22
- | `update:modelValue` | `Boolean` | Emitted when visibility changes |
23
- | `show` | - | Emitted when toast starts showing |
24
- | `shown` | - | Emitted when toast is fully shown |
25
- | `hide` | - | Emitted when toast starts hiding |
26
- | `hidden` | - | Emitted when toast is fully hidden |
27
-
28
- ## Slots
29
-
30
- | Slot | Description |
31
- |------|-------------|
32
- | `default` | Toast body content |
33
- | `header` | Custom header content |
34
-
35
- ## Usage
36
-
37
- ### Reactive Usage (v-model)
38
-
39
- ```vue
40
- <template>
41
- <div>
42
- <VibeButton @click="showToast = true">Show Toast</VibeButton>
43
-
44
- <VibeToast v-model="showToast" title="Notification" variant="primary">
45
- This toast is controlled via Vue state.
46
- </VibeToast>
47
- </div>
48
- </template>
49
-
50
- <script setup>
51
- import { ref } from 'vue'
52
- const showToast = ref(false)
53
- </script>
54
- ```
55
-
56
- ### Placed Toasts
57
-
58
- ```vue
59
- <template>
60
- <div>
61
- <VibeToast title="Success" variant="success" placement="bottom-end">
62
- Operation completed successfully!
63
- </VibeToast>
64
-
65
- <VibeToast title="Center" variant="info" placement="middle-center">
66
- I am in the middle of the screen
67
- </VibeToast>
68
- </div>
69
- </template>
70
- ```
71
-
72
- ### Colored Toasts
73
-
74
- ```vue
75
- <template>
76
- <div>
77
- <VibeToast title="Success" variant="success">
78
- Operation completed successfully!
79
- </VibeToast>
80
-
81
- <VibeToast title="Warning" variant="warning">
82
- Please review your changes
83
- </VibeToast>
84
- </div>
85
- </template>
86
- ```
87
-
88
- ### Custom Delay
89
-
90
- ```vue
91
- <template>
92
- <VibeToast title="Quick Toast" :delay="2000">
93
- This will auto-hide after 2 seconds
94
- </VibeToast>
95
- </template>
96
- ```
97
-
98
- ## Important Notes
99
-
100
- **Automatic Initialization:** This component automatically initializes Bootstrap's Toast functionality when it is mounted, provided that Bootstrap's JavaScript is available in your project.
101
-
102
- **Automatic Container:** Unlike raw Bootstrap, VibeToast automatically manages its own `toast-container` and positioning based on the `placement` prop.
103
-
104
- **Teleportation:** By default, this component teleports to the `<body>` to ensure it is always visible on top of other elements.
105
-
106
- **Instance Exposure:** You can access the underlying Bootstrap instance via template ref using the `bsInstance` property.
107
-
108
- ## Bootstrap CSS Classes
109
-
110
- - `.toast`
111
- - `.toast-header`
112
- - `.toast-body`
113
- - `.text-bg-{variant}`
114
- - `.toast-container`
package/docs/components/layout/col.md DELETED
@@ -1,123 +0,0 @@
1
- # VibeCol
2
-
3
- Column component for Bootstrap's grid system. Supports responsive sizing, offsets, ordering, and alignment.
4
-
5
- ## Props
6
-
7
- | Prop | Type | Default | Description |
8
- |------|------|---------|-------------|
9
- | `tag` | `Tag` | `'div'` | HTML element to render |
10
- | `cols` | `ColSize \| Boolean` | `undefined` | Base column width (`1`-`12`, `'auto'`, or `true` for equal-width) |
11
- | `sm` | `ColSize \| Boolean` | `undefined` | Column width at `sm` breakpoint |
12
- | `md` | `ColSize \| Boolean` | `undefined` | Column width at `md` breakpoint |
13
- | `lg` | `ColSize \| Boolean` | `undefined` | Column width at `lg` breakpoint |
14
- | `xl` | `ColSize \| Boolean` | `undefined` | Column width at `xl` breakpoint |
15
- | `xxl` | `ColSize \| Boolean` | `undefined` | Column width at `xxl` breakpoint |
16
- | `offset` | `Number` | `undefined` | Base offset (`0`-`11`) |
17
- | `offsetSm` | `Number` | `undefined` | Offset at `sm` breakpoint |
18
- | `offsetMd` | `Number` | `undefined` | Offset at `md` breakpoint |
19
- | `offsetLg` | `Number` | `undefined` | Offset at `lg` breakpoint |
20
- | `offsetXl` | `Number` | `undefined` | Offset at `xl` breakpoint |
21
- | `offsetXxl` | `Number` | `undefined` | Offset at `xxl` breakpoint |
22
- | `order` | `OrderValue` | `undefined` | Base visual order |
23
- | `orderSm` | `OrderValue` | `undefined` | Order at `sm` breakpoint |
24
- | `orderMd` | `OrderValue` | `undefined` | Order at `md` breakpoint |
25
- | `orderLg` | `OrderValue` | `undefined` | Order at `lg` breakpoint |
26
- | `orderXl` | `OrderValue` | `undefined` | Order at `xl` breakpoint |
27
- | `orderXxl` | `OrderValue` | `undefined` | Order at `xxl` breakpoint |
28
- | `alignSelf` | `AlignItems` | `undefined` | Individual column vertical alignment |
29
-
30
- ### Type Reference
31
-
32
- - **ColSize:** `1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto'`
33
- - **OrderValue:** `0 | 1 | 2 | 3 | 4 | 5 | 'first' | 'last'`
34
- - **AlignItems:** `'start' | 'center' | 'end' | 'baseline' | 'stretch'`
35
-
36
- ## Events
37
-
38
- | Event | Payload | Description |
39
- |-------|---------|-------------|
40
- | `component-error` | `Object` | Emitted when an error occurs |
41
-
42
- ## Slots
43
-
44
- | Slot | Description |
45
- |------|-------------|
46
- | `default` | Column content |
47
-
48
- ## Usage
49
-
50
- ### Equal-width Columns
51
-
52
- ```vue
53
- <template>
54
- <VibeRow>
55
- <!-- No sizing props = equal-width (col class) -->
56
- <VibeCol>1 of 3</VibeCol>
57
- <VibeCol>2 of 3</VibeCol>
58
- <VibeCol>3 of 3</VibeCol>
59
- </VibeRow>
60
- </template>
61
- ```
62
-
63
- ### Specific Widths
64
-
65
- ```vue
66
- <template>
67
- <VibeRow>
68
- <VibeCol :cols="8">Main content</VibeCol>
69
- <VibeCol :cols="4">Sidebar</VibeCol>
70
- </VibeRow>
71
- </template>
72
- ```
73
-
74
- ### Responsive Columns
75
-
76
- ```vue
77
- <template>
78
- <VibeRow>
79
- <!-- Full width on mobile, half on medium, third on large -->
80
- <VibeCol :cols="12" :md="6" :lg="4">Responsive</VibeCol>
81
- <VibeCol :cols="12" :md="6" :lg="4">Responsive</VibeCol>
82
- <VibeCol :cols="12" :md="12" :lg="4">Responsive</VibeCol>
83
- </VibeRow>
84
- </template>
85
- ```
86
-
87
- ### Auto-width Column
88
-
89
- ```vue
90
- <template>
91
- <VibeRow>
92
- <VibeCol :cols="2">Fixed</VibeCol>
93
- <VibeCol cols="auto">Sized to content</VibeCol>
94
- <VibeCol :cols="2">Fixed</VibeCol>
95
- </VibeRow>
96
- </template>
97
- ```
98
-
99
- ### Offsets and Ordering
100
-
101
- ```vue
102
- <template>
103
- <VibeRow>
104
- <VibeCol :cols="4" :offset="4">Centered column</VibeCol>
105
- </VibeRow>
106
-
107
- <VibeRow>
108
- <VibeCol :cols="6" order="last">Appears second</VibeCol>
109
- <VibeCol :cols="6" order="first">Appears first</VibeCol>
110
- </VibeRow>
111
- </template>
112
- ```
113
-
114
- ### Vertical Alignment
115
-
116
- ```vue
117
- <template>
118
- <VibeRow align-items="start" style="height: 200px;">
119
- <VibeCol>Top-aligned</VibeCol>
120
- <VibeCol align-self="end">Bottom-aligned</VibeCol>
121
- </VibeRow>
122
- </template>
123
- ```
package/docs/components/layout/container.md DELETED
@@ -1,59 +0,0 @@
1
- # VibeContainer
2
-
3
- Responsive container component wrapping Bootstrap's `.container`, `.container-fluid`, and `.container-{breakpoint}` classes.
4
-
5
- ## Props
6
-
7
- | Prop | Type | Default | Description |
8
- |------|------|---------|-------------|
9
- | `fluid` | `Boolean \| ContainerType` | `false` | `false` = `.container`, `true` = `.container-fluid`, or a breakpoint (`'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`) for `.container-{breakpoint}` |
10
- | `tag` | `Tag` | `'div'` | HTML element to render |
11
-
12
- ### ContainerType
13
-
14
- `'sm' | 'md' | 'lg' | 'xl' | 'xxl'`
15
-
16
- ## Events
17
-
18
- | Event | Payload | Description |
19
- |-------|---------|-------------|
20
- | `component-error` | `Object` | Emitted when an error occurs |
21
-
22
- ## Slots
23
-
24
- | Slot | Description |
25
- |------|-------------|
26
- | `default` | Container content |
27
-
28
- ## Usage
29
-
30
- ### Fixed-width Container
31
-
32
- ```vue
33
- <template>
34
- <VibeContainer>
35
- <p>Responsive fixed-width container</p>
36
- </VibeContainer>
37
- </template>
38
- ```
39
-
40
- ### Fluid Container
41
-
42
- ```vue
43
- <template>
44
- <VibeContainer fluid>
45
- <p>Full-width container spanning the entire viewport</p>
46
- </VibeContainer>
47
- </template>
48
- ```
49
-
50
- ### Responsive Breakpoint Container
51
-
52
- ```vue
53
- <template>
54
- <!-- 100% wide until the md breakpoint, then fixed-width -->
55
- <VibeContainer fluid="md">
56
- <p>Fluid until medium breakpoint</p>
57
- </VibeContainer>
58
- </template>
59
- ```
package/docs/components/layout/row.md DELETED
@@ -1,113 +0,0 @@
1
- # VibeRow
2
-
3
- Row component for Bootstrap's grid system. Provides gutters, row columns, and alignment props.
4
-
5
- ## Props
6
-
7
- | Prop | Type | Default | Description |
8
- |------|------|---------|-------------|
9
- | `tag` | `Tag` | `'div'` | HTML element to render |
10
- | `gutters` | `GutterSize` | `undefined` | Base gutter size (both axes) |
11
- | `guttersX` | `GutterSize` | `undefined` | Horizontal gutter size |
12
- | `guttersY` | `GutterSize` | `undefined` | Vertical gutter size |
13
- | `guttersSm` | `GutterSize` | `undefined` | Gutter size at `sm` breakpoint |
14
- | `guttersMd` | `GutterSize` | `undefined` | Gutter size at `md` breakpoint |
15
- | `guttersLg` | `GutterSize` | `undefined` | Gutter size at `lg` breakpoint |
16
- | `guttersXl` | `GutterSize` | `undefined` | Gutter size at `xl` breakpoint |
17
- | `guttersXxl` | `GutterSize` | `undefined` | Gutter size at `xxl` breakpoint |
18
- | `guttersXSm` | `GutterSize` | `undefined` | Horizontal gutter at `sm` breakpoint |
19
- | `guttersXMd` | `GutterSize` | `undefined` | Horizontal gutter at `md` breakpoint |
20
- | `guttersXLg` | `GutterSize` | `undefined` | Horizontal gutter at `lg` breakpoint |
21
- | `guttersXXl` | `GutterSize` | `undefined` | Horizontal gutter at `xl` breakpoint |
22
- | `guttersXXxl` | `GutterSize` | `undefined` | Horizontal gutter at `xxl` breakpoint |
23
- | `guttersYSm` | `GutterSize` | `undefined` | Vertical gutter at `sm` breakpoint |
24
- | `guttersYMd` | `GutterSize` | `undefined` | Vertical gutter at `md` breakpoint |
25
- | `guttersYLg` | `GutterSize` | `undefined` | Vertical gutter at `lg` breakpoint |
26
- | `guttersYXl` | `GutterSize` | `undefined` | Vertical gutter at `xl` breakpoint |
27
- | `guttersYXxl` | `GutterSize` | `undefined` | Vertical gutter at `xxl` breakpoint |
28
- | `rowCols` | `RowColsSize` | `undefined` | Number of columns per row |
29
- | `rowColsSm` | `RowColsSize` | `undefined` | Columns per row at `sm` breakpoint |
30
- | `rowColsMd` | `RowColsSize` | `undefined` | Columns per row at `md` breakpoint |
31
- | `rowColsLg` | `RowColsSize` | `undefined` | Columns per row at `lg` breakpoint |
32
- | `rowColsXl` | `RowColsSize` | `undefined` | Columns per row at `xl` breakpoint |
33
- | `rowColsXxl` | `RowColsSize` | `undefined` | Columns per row at `xxl` breakpoint |
34
- | `alignItems` | `AlignItems` | `undefined` | Vertical alignment of columns |
35
- | `justifyContent` | `JustifyContent` | `undefined` | Horizontal distribution of columns |
36
-
37
- ### Type Reference
38
-
39
- - **GutterSize:** `0 | 1 | 2 | 3 | 4 | 5`
40
- - **RowColsSize:** `1 | 2 | 3 | 4 | 5 | 6`
41
- - **AlignItems:** `'start' | 'center' | 'end' | 'baseline' | 'stretch'`
42
- - **JustifyContent:** `'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'`
43
-
44
- ## Events
45
-
46
- | Event | Payload | Description |
47
- |-------|---------|-------------|
48
- | `component-error` | `Object` | Emitted when an error occurs |
49
-
50
- ## Slots
51
-
52
- | Slot | Description |
53
- |------|-------------|
54
- | `default` | Row content (typically `VibeCol` components) |
55
-
56
- ## Usage
57
-
58
- ### Basic Grid
59
-
60
- ```vue
61
- <template>
62
- <VibeContainer>
63
- <VibeRow>
64
- <VibeCol>Column 1</VibeCol>
65
- <VibeCol>Column 2</VibeCol>
66
- <VibeCol>Column 3</VibeCol>
67
- </VibeRow>
68
- </VibeContainer>
69
- </template>
70
- ```
71
-
72
- ### With Gutters
73
-
74
- ```vue
75
- <template>
76
- <VibeContainer>
77
- <VibeRow :gutters="3" :guttersY="4">
78
- <VibeCol :cols="6">Col 1</VibeCol>
79
- <VibeCol :cols="6">Col 2</VibeCol>
80
- <VibeCol :cols="6">Col 3</VibeCol>
81
- <VibeCol :cols="6">Col 4</VibeCol>
82
- </VibeRow>
83
- </VibeContainer>
84
- </template>
85
- ```
86
-
87
- ### Row Columns
88
-
89
- ```vue
90
- <template>
91
- <VibeContainer>
92
- <!-- Automatically size each child to 1/3 width -->
93
- <VibeRow :row-cols="3">
94
- <VibeCol>Item 1</VibeCol>
95
- <VibeCol>Item 2</VibeCol>
96
- <VibeCol>Item 3</VibeCol>
97
- </VibeRow>
98
- </VibeContainer>
99
- </template>
100
- ```
101
-
102
- ### Alignment
103
-
104
- ```vue
105
- <template>
106
- <VibeContainer>
107
- <VibeRow align-items="center" justify-content="between">
108
- <VibeCol :cols="4">Left</VibeCol>
109
- <VibeCol :cols="4">Right</VibeCol>
110
- </VibeRow>
111
- </VibeContainer>
112
- </template>
113
- ```
package/docs/components/list/list-group.md DELETED
@@ -1,221 +0,0 @@
1
- # VibeListGroup
2
-
3
- Data-driven component for displaying flexible lists of content.
4
-
5
- ## Props
6
-
7
- | Prop | Type | Default | Description |
8
- |------|------|---------|-------------|
9
- | `flush` | `Boolean` | `false` | Remove borders and rounded corners |
10
- | `horizontal` | `Boolean\|String` | `false` | Horizontal layout: `true` or breakpoint (`'sm'`, `'md'`, `'lg'`, `'xl'`) |
11
- | `numbered` | `Boolean` | `false` | Numbered list items |
12
- | `tag` | `String` | `'ul'` | HTML tag: `'ul'`, `'ol'`, or `'div'` |
13
- | `items` | `ListGroupItem[]` | Required | Array of list group items |
14
-
15
- ### ListGroupItem Interface
16
-
17
- ```typescript
18
- interface ListGroupItem {
19
- text: string
20
- href?: string
21
- to?: string | object
22
- active?: boolean
23
- disabled?: boolean
24
- variant?: Variant
25
- }
26
- ```
27
-
28
- ## Events
29
-
30
- | Event | Payload | Description |
31
- |-------|---------|-------------|
32
- | `item-click` | `{ item, index, event }` | Emitted when an item is clicked (unless disabled) |
33
-
34
- ## Slots
35
-
36
- | Slot | Scope | Description |
37
- |------|-------|-------------|
38
- | `item` | `{ item, index }` | Custom item rendering |
39
-
40
- ## Usage
41
-
42
- ### Basic List
43
-
44
- ```vue
45
- <template>
46
- <VibeListGroup :items="listItems" />
47
- </template>
48
-
49
- <script setup>
50
- const listItems = [
51
- { text: 'An item' },
52
- { text: 'A second item' },
53
- { text: 'A third item' }
54
- ]
55
- </script>
56
- ```
57
-
58
- ### Active and Disabled Items
59
-
60
- ```vue
61
- <template>
62
- <VibeListGroup :items="listItems" />
63
- </template>
64
-
65
- <script setup>
66
- const listItems = [
67
- { text: 'An item' },
68
- { text: 'A second item', active: true },
69
- { text: 'A third item' },
70
- { text: 'A disabled item', disabled: true }
71
- ]
72
- </script>
73
- ```
74
-
75
- ### With Links
76
-
77
- ```vue
78
- <template>
79
- <VibeListGroup :items="listItems" />
80
- </template>
81
-
82
- <script setup>
83
- const listItems = [
84
- { text: 'Link 1', href: '#', active: true },
85
- { text: 'Link 2', href: '#' },
86
- { text: 'Link 3', href: '#' }
87
- ]
88
- </script>
89
- ```
90
-
91
- ### With Router Links
92
-
93
- ```vue
94
- <template>
95
- <VibeListGroup :items="listItems" />
96
- </template>
97
-
98
- <script setup>
99
- const listItems = [
100
- { text: 'Home', to: { name: 'home' } },
101
- { text: 'About', to: { name: 'about' } },
102
- { text: 'Contact', to: { name: 'contact' } }
103
- ]
104
- </script>
105
- ```
106
-
107
- ### Colored Items
108
-
109
- ```vue
110
- <template>
111
- <VibeListGroup :items="listItems" />
112
- </template>
113
-
114
- <script setup>
115
- const listItems = [
116
- { text: 'Primary item', variant: 'primary' },
117
- { text: 'Success item', variant: 'success' },
118
- { text: 'Danger item', variant: 'danger' },
119
- { text: 'Warning item', variant: 'warning' },
120
- { text: 'Info item', variant: 'info' }
121
- ]
122
- </script>
123
- ```
124
-
125
- ### Flush List
126
-
127
- Remove borders and rounded corners:
128
-
129
- ```vue
130
- <template>
131
- <VibeListGroup flush :items="listItems" />
132
- </template>
133
- ```
134
-
135
- ### Horizontal List
136
-
137
- ```vue
138
- <template>
139
- <!-- Always horizontal -->
140
- <VibeListGroup horizontal :items="listItems" />
141
-
142
- <!-- Horizontal on md and up -->
143
- <VibeListGroup horizontal="md" :items="listItems" />
144
- </template>
145
- ```
146
-
147
- ### Numbered List
148
-
149
- ```vue
150
- <template>
151
- <VibeListGroup numbered tag="ol" :items="listItems" />
152
- </template>
153
-
154
- <script setup>
155
- const listItems = [
156
- { text: 'First item' },
157
- { text: 'Second item' },
158
- { text: 'Third item' }
159
- ]
160
- </script>
161
- ```
162
-
163
- ### Custom Item Rendering
164
-
165
- Use the `item` scoped slot for complex content:
166
-
167
- ```vue
168
- <template>
169
- <VibeListGroup :items="listItems">
170
- <template #item="{ item }">
171
- <div class="d-flex justify-content-between align-items-center">
172
- <div>
173
- <h5 class="mb-1">{{ item.text }}</h5>
174
- <p class="mb-1">{{ item.description }}</p>
175
- </div>
176
- <VibeBadge variant="primary">{{ item.count }}</VibeBadge>
177
- </div>
178
- </template>
179
- </VibeListGroup>
180
- </template>
181
-
182
- <script setup>
183
- const listItems = [
184
- { text: 'Inbox', description: 'Unread messages', count: 14 },
185
- { text: 'Starred', description: 'Important items', count: 3 },
186
- { text: 'Sent', description: 'Outgoing mail', count: 25 }
187
- ]
188
- </script>
189
- ```
190
-
191
- ### With Event Handling
192
-
193
- ```vue
194
- <template>
195
- <VibeListGroup :items="listItems" @item-click="handleClick" />
196
- </template>
197
-
198
- <script setup>
199
- const listItems = [
200
- { text: 'Item 1' },
201
- { text: 'Item 2' },
202
- { text: 'Item 3' }
203
- ]
204
-
205
- const handleClick = ({ item, index }) => {
206
- console.log(`Clicked: ${item.text} at index ${index}`)
207
- }
208
- </script>
209
- ```
210
-
211
- ## Bootstrap CSS Classes
212
-
213
- - `.list-group`
214
- - `.list-group-flush`
215
- - `.list-group-horizontal`, `.list-group-horizontal-{breakpoint}`
216
- - `.list-group-numbered`
217
- - `.list-group-item`
218
- - `.list-group-item-{variant}`
219
- - `.list-group-item-action`
220
- - `.active`
221
- - `.disabled`