Skip to content

Commit e3b54ae

Browse files
mrholekmrholek
committed
docs: update documentation
1 parent f49445d commit e3b54ae

File tree

7 files changed

+46
-341
lines changed

7 files changed

+46
-341
lines changed

‎docs/.vuepress/clientAppEnhance.ts

Lines changed: 3 additions & 298 deletions
Original file line numberDiff line numberDiff line change
@@ -1,304 +1,9 @@
11
import type { ClientAppEnhance } from '@vuepress/client'
2-
3-
import {
4-
CAccordion,
5-
CAccordionBody,
6-
CAccordionButton,
7-
CAccordionCollapse,
8-
CAccordionHeader,
9-
CAccordionItem,
10-
} from '../../src/components/accordion'
11-
12-
import { CAlert, CAlertHeading, CAlertLink } from '../../src/components/alert'
13-
import { CAvatar } from '../../src/components/avatar'
14-
import { CBackdrop } from '../../src/components/backdrop'
15-
import { CBadge } from '../../src/components/badge'
16-
import { CBreadcrumb, CBreadcrumbItem } from '../../src/components/breadcrumb'
17-
import { CButton } from '../../src/components/button'
18-
import { CButtonToolbar, CButtonGroup } from '../../src/components/button-group'
19-
import { CCallout } from '../../src/components/callout'
20-
import {
21-
CCard,
22-
CCardBody,
23-
CCardFooter,
24-
CCardGroup,
25-
CCardHeader,
26-
CCardImage,
27-
CCardImageOverlay,
28-
CCardLink,
29-
CCardSubtitle,
30-
CCardText,
31-
CCardTitle,
32-
} from '../../src/components/card'
33-
34-
import { CCarousel, CCarouselCaption, CCarouselItem } from '../../src/components/carousel'
35-
36-
import { CCloseButton } from '../../src/components/close-button'
37-
38-
import { CCollapse } from '../../src/components/collapse'
39-
40-
import {
41-
CDropdown,
42-
CDropdownItem,
43-
CDropdownHeader,
44-
CDropdownDivider,
45-
CDropdownMenu,
46-
CDropdownToggle,
47-
} from '../../src/components/dropdown'
48-
49-
import { CFooter } from '../../src/components/footer'
50-
51-
import {
52-
CForm,
53-
CFormCheck,
54-
CFormControl,
55-
CFormFloating,
56-
CFormInput,
57-
CFormLabel,
58-
CFormRange,
59-
CFormSelect,
60-
CFormSwitch,
61-
CFormText,
62-
CFormTextarea,
63-
CInputGroup,
64-
CInputGroupText,
65-
} from '../../src/components/form'
66-
67-
import { CCol, CContainer, CRow } from '../../src/components/grid'
68-
69-
import {
70-
CHeader,
71-
CHeaderBrand,
72-
CHeaderDivider,
73-
CHeaderNav,
74-
CHeaderText,
75-
CHeaderToggler,
76-
} from '../../src/components/header'
77-
78-
import { CImage } from '../../src/components/image'
79-
80-
import { CLink } from '../../src/components/link'
81-
82-
import { CListGroup, CListGroupItem } from '../../src/components/list-group'
83-
84-
import { CLoadingButton } from '../../src/components/loading-button'
85-
86-
import {
87-
CModal,
88-
CModalBody,
89-
CModalFooter,
90-
CModalHeader,
91-
CModalTitle,
92-
} from '../../src/components/modal'
93-
94-
import {
95-
CMultiSelect,
96-
CMultiSelectGroup,
97-
CMultiSelectGroupLabel,
98-
CMultiSelectGroupOption,
99-
} from '../../src/components/multi-select'
100-
101-
import {
102-
CNav,
103-
CNavGroup,
104-
CNavGroupItems,
105-
CNavItem,
106-
CNavLink,
107-
CNavTitle,
108-
} from '../../src/components/nav'
109-
110-
import {
111-
CNavbar,
112-
CNavbarBrand,
113-
CNavbarNav,
114-
CNavbarText,
115-
CNavbarToggler,
116-
} from '../../src/components/navbar'
117-
118-
import {
119-
COffcanvas,
120-
COffcanvasBody,
121-
COffcanvasHeader,
122-
COffcanvasTitle,
123-
} from '../../src/components/offcanvas'
124-
125-
import { CPagination, CPaginationItem } from '../../src/components/pagination'
126-
127-
import { CProgress, CProgressBar } from '../../src/components/progress'
128-
129-
import {
130-
CCreateNavItem,
131-
CSidebar,
132-
CSidebarBrand,
133-
CSidebarFooter,
134-
CSidebarHeader,
135-
CSidebarNav,
136-
CSidebarToggler,
137-
} from '../../src/components/sidebar'
138-
139-
import { CSpinner } from '../../src/components/spinner'
140-
141-
import {
142-
CTable,
143-
CTableBody,
144-
CTableCaption,
145-
CTableDataCell,
146-
CTableFoot,
147-
CTableHead,
148-
CTableHeaderCell,
149-
CTableRow,
150-
} from '../../src/components/table'
151-
152-
import { CTabContent, CTabPane } from '../../src/components/tabs'
153-
154-
import { CToast, CToastBody, CToastClose, CToaster, CToastHeader } from '../../src/components/toast'
155-
156-
import { CTooltip, CPopover, CClickaway } from '../../src/directives'
157-
2+
import CoreuiVue from '../../src/'
1583
import '@coreui/coreui/scss/coreui.scss'
1594

160-
//import CIcon from '@coreui/icons-vue/src/CIconRaw.vue'
161-
//import CIcon from '../../node_modules/@coreui/icons-vue/src/CIconRaw.vue'
162-
//import { CIcon, CIconTestIcon } from '../../src/components/icon'
163-
//import { cilPencil, cilSettings, cilAsterisk, cilUser } from '@coreui/icons'
164-
//import { freeSet } from '@coreui/icons'
165-
1665
const clientAppEnhance: ClientAppEnhance = ({ app }) => {
167-
/* eslint-disable vue/match-component-file-name */
168-
//app.component('CIcon', CIcon)
169-
//app.component('CIconTestIcon', CIconTestIcon)
170-
171-
app.component('CAccordion', CAccordion)
172-
app.component('CAccordionBody', CAccordionBody)
173-
app.component('CAccordionButton', CAccordionButton)
174-
app.component('CAccordionCollapse', CAccordionCollapse)
175-
app.component('CAccordionHeader', CAccordionHeader)
176-
app.component('CAccordionItem', CAccordionItem)
177-
app.component('CAlert', CAlert)
178-
app.component('CAlertHeading', CAlertHeading)
179-
app.component('CAlertLink', CAlertLink)
180-
app.component('CAvatar', CAvatar)
181-
182-
app.component('CBackdrop', CBackdrop)
183-
184-
app.component('CBadge', CBadge)
185-
app.component('CBreadcrumb', CBreadcrumb)
186-
app.component('CBreadcrumbItem', CBreadcrumbItem)
187-
app.component('CButton', CButton)
188-
app.component('CButtonToolbar', CButtonToolbar)
189-
app.component('CButtonGroup', CButtonGroup)
190-
app.component('CCallout', CCallout)
191-
app.component('CCard', CCard)
192-
app.component('CCardBody', CCardBody)
193-
app.component('CCardFooter', CCardFooter)
194-
app.component('CCardGroup', CCardGroup)
195-
app.component('CCardHeader', CCardHeader)
196-
app.component('CCardImage', CCardImage)
197-
app.component('CCardImageOverlay', CCardImageOverlay)
198-
app.component('CCardLink', CCardLink)
199-
app.component('CCardSubtitle', CCardSubtitle)
200-
app.component('CCardText', CCardText)
201-
app.component('CCardTitle', CCardTitle)
202-
app.component('CCarousel', CCarousel)
203-
app.component('CCarouselCaption', CCarouselCaption)
204-
app.component('CCarouselItem', CCarouselItem)
205-
app.component('CCloseButton', CCloseButton)
206-
app.component('CCollapse', CCollapse)
207-
app.component('CDropdown', CDropdown)
208-
app.component('CDropdownItem', CDropdownItem)
209-
app.component('CDropdownHeader', CDropdownHeader)
210-
app.component('CDropdownDivider', CDropdownDivider)
211-
app.component('CDropdownMenu', CDropdownMenu)
212-
app.component('CDropdownToggle', CDropdownToggle)
213-
app.component('CFooter', CFooter)
214-
app.component('CForm', CForm)
215-
app.component('CFormCheck', CFormCheck)
216-
app.component('CFormFloating', CFormFloating)
217-
app.component('CFormInput', CFormInput)
218-
app.component('CFormControl', CFormControl)
219-
app.component('CFormLabel', CFormLabel)
220-
app.component('CFormRange', CFormRange)
221-
app.component('CFormSelect', CFormSelect)
222-
app.component('CFormSwitch', CFormSwitch)
223-
app.component('CFormText', CFormText)
224-
app.component('CFormTextarea', CFormTextarea)
225-
app.component('CInputGroup', CInputGroup)
226-
app.component('CInputGroupText', CInputGroupText)
227-
app.component('CCol', CCol)
228-
app.component('CContainer', CContainer)
229-
app.component('CRow', CRow)
230-
app.component('CHeader', CHeader)
231-
app.component('CHeaderBrand', CHeaderBrand)
232-
app.component('CHeaderDivider', CHeaderDivider)
233-
app.component('CHeaderNav', CHeaderNav)
234-
app.component('CHeaderText', CHeaderText)
235-
app.component('CHeaderToggler', CHeaderToggler)
236-
app.component('CImage', CImage)
237-
app.component('CLink', CLink)
238-
app.component('CListGroup', CListGroup)
239-
app.component('CListGroupItem', CListGroupItem)
240-
241-
app.component('CLoadingButton', CLoadingButton)
242-
243-
app.component('CModal', CModal)
244-
app.component('CModalBody', CModalBody)
245-
app.component('CModalFooter', CModalFooter)
246-
app.component('CModalHeader', CModalHeader)
247-
app.component('CModalTitle', CModalTitle)
248-
app.component('CMultiSelect', CMultiSelect)
249-
app.component('CMultiSelectGroup', CMultiSelectGroup)
250-
app.component('CMultiSelectGroupLabel', CMultiSelectGroupLabel)
251-
app.component('CMultiSelectGroupOption', CMultiSelectGroupOption)
252-
app.component('CNav', CNav)
253-
app.component('CNavGroup', CNavGroup)
254-
app.component('CNavGroupItems', CNavGroupItems)
255-
app.component('CNavItem', CNavItem)
256-
app.component('CNavLink', CNavLink)
257-
app.component('CNavTitle', CNavTitle)
258-
app.component('CNavbar', CNavbar)
259-
app.component('CNavbarBrand', CNavbarBrand)
260-
app.component('CNavbarNav', CNavbarNav)
261-
app.component('CNavbarText', CNavbarText)
262-
app.component('CNavbarToggler', CNavbarToggler)
263-
264-
app.component('COffcanvas', COffcanvas)
265-
app.component('COffcanvasBody', COffcanvasBody)
266-
app.component('COffcanvasHeader', COffcanvasHeader)
267-
app.component('COffcanvasTitle', COffcanvasTitle)
268-
269-
app.component('CPagination', CPagination)
270-
app.component('CPaginationItem', CPaginationItem)
271-
app.component('CProgress', CProgress)
272-
app.component('CProgressBar', CProgressBar)
273-
app.component('CCreateNavItem', CCreateNavItem)
274-
app.component('CSidebar', CSidebar)
275-
app.component('CSidebarBrand', CSidebarBrand)
276-
app.component('CSidebarFooter', CSidebarFooter)
277-
app.component('CSidebarHeader', CSidebarHeader)
278-
app.component('CSidebarNav', CSidebarNav)
279-
app.component('CSidebarToggler', CSidebarToggler)
280-
app.component('CSpinner', CSpinner)
281-
282-
app.component('CTable', CTable)
283-
app.component('CTableBody', CTableBody)
284-
app.component('CTableCaption', CTableCaption)
285-
app.component('CTableDataCell', CTableDataCell)
286-
app.component('CTableFoot', CTableFoot)
287-
app.component('CTableHead', CTableHead)
288-
app.component('CTableHeaderCell', CTableHeaderCell)
289-
app.component('CTableRow', CTableRow)
290-
291-
app.component('CTabContent', CTabContent)
292-
app.component('CTabPane', CTabPane)
293-
app.component('CToast', CToast)
294-
app.component('CToastBody', CToastBody)
295-
app.component('CToastClose', CToastClose)
296-
app.component('CToaster', CToaster)
297-
app.component('CToastHeader', CToastHeader)
298-
299-
app.directive('CTooltip', CTooltip)
300-
app.directive('CPopover', CPopover)
301-
app.directive('CClickaway', CClickaway)
6+
app.use(CoreuiVue)
3027
}
3038

304-
export default clientAppEnhance
9+
export default clientAppEnhance

‎docs/4.0/components/button-group.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -86,46 +86,46 @@ Combine button-like checkbox and radio toggle buttons into a seamless looking bu
8686

8787
::: demo
8888
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
89-
<CFormCheck button buttonVariant="outline" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
90-
<CFormCheck button buttonVariant="outline" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
91-
<CFormCheck button buttonVariant="outline" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
89+
<CFormCheck :button="{variant: 'outline'}" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
90+
<CFormCheck :button="{variant: 'outline'}" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
91+
<CFormCheck :button="{variant: 'outline'}" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
9292
</CButtonGroup>
9393
:::
9494
```vue
9595
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
96-
<CFormCheck button buttonVariant="outline" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
97-
<CFormCheck button buttonVariant="outline" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
98-
<CFormCheck button buttonVariant="outline" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
96+
<CFormCheck :button="{variant: 'outline'}" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
97+
<CFormCheck :button="{variant: 'outline'}" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
98+
<CFormCheck :button="{variant: 'outline'}" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
9999
</CButtonGroup>
100100
```
101101

102102
::: demo
103103
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
104-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
105-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
106-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
104+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
105+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
106+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
107107
</CButtonGroup>
108108
:::
109109
```vue
110110
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
111-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
112-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
113-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
111+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
112+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
113+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
114114
</CButtonGroup>
115115
```
116116

117117
::: demo
118118
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
119-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
120-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
121-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
119+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
120+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
121+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
122122
</CButtonGroup>
123123
:::
124124
```vue
125125
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
126-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
127-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
128-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
126+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
127+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
128+
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
129129
</CButtonGroup>
130130
```
131131

@@ -433,16 +433,16 @@ Create a set of buttons that appear vertically stacked rather than horizontally.
433433

434434
::: demo
435435
<CButtonGroup vertical role="group" aria-label="Vertical button group">
436-
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
437-
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
438-
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
436+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
437+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
438+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
439439
</CButtonGroup>
440440
:::
441441
```vue
442442
<CButtonGroup vertical role="group" aria-label="Vertical button group">
443-
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
444-
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
445-
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
443+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
444+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
445+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
446446
</CButtonGroup>
447447
```
448448

0 commit comments

Comments
 (0)