sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

refactor: add missing variant props

Browse Source
This commit is contained in:
woothu
2019-07-24 17:10:56 +02:00
parent 8879eccbc8
commit 25a46142cd
10 changed files with 92 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Collapses.vue
+1 -1
View File
@@ -20,7 +20,7 @@
<CCollapse toggler="collapse1" class="c-mt-2"> <CCollapse toggler="collapse1" class="c-mt-2">
<CCard body-wrapper> <CCard body-wrapper>
<p class="c-card-text">Collapse contents Here</p> <p class="c-card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm"> <CButton id="collapse2" size="sm" variant="secondary">
Toggle Inner Collapse Toggle Inner Collapse
</CButton> </CButton>
<CCollapse toggler="collapse2" class="c-mt-2"> <CCollapse toggler="collapse2" class="c-mt-2">
src/views/base/Navbars.vue
+7 -8
View File
@@ -44,7 +44,6 @@
<CNavbar <CNavbar
toggleable="md" toggleable="md"
variant="info" variant="info"
sticky
> >
<CNavbarToggle @click="show=!show"/> <CNavbarToggle @click="show=!show"/>
<CNavbarBrand href="#">NavBar</CNavbarBrand> <CNavbarBrand href="#">NavBar</CNavbarBrand>
@@ -100,8 +99,8 @@
<!-- Image and text --> <!-- Image and text -->
<CNavbar variant="faded" light> <CNavbar variant="faded" light>
<CNavbarBrand href="#"> <CNavbarBrand href="#">
<img src="https://placekitten.com/g/30/30" class="c-d-inline-block c-align-top" alt="BV"> <img src="https://placekitten.com/g/30/30" class="c-d-inline-block c-align-top" alt="CoreuiVue">
BootstrapVue CoreuiVue
</CNavbarBrand> </CNavbarBrand>
</CNavbar> </CNavbar>
</CCardBody> </CCardBody>
@@ -114,7 +113,7 @@
<CCardBody> <CCardBody>
<CNavbar toggleable="sm" light variant="light"> <CNavbar toggleable="sm" light variant="light">
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle> <CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
<CNavbarBrand>BootstrapVue</CNavbarBrand> <CNavbarBrand>CoreuiVue</CNavbarBrand>
<CCollapse :show="navbarText" navbar> <CCollapse :show="navbarText" navbar>
<CNavbarNav> <CNavbarNav>
<span class="c-navbar-text">Navbar text</span> <span class="c-navbar-text">Navbar text</span>
@@ -129,9 +128,9 @@
<small>dropdown</small> <small>dropdown</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNavbar> <CNavbar toggleable="sm" variant="primary">
<!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle> <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
<CCollapse :show="navbarDropdown" navbar> --> <CCollapse :show="navbarDropdown" navbar>
<CNavbarNav> <CNavbarNav>
<CNavItem href="#">Home</CNavItem> <CNavItem href="#">Home</CNavItem>
<CNavItem href="#">Link</CNavItem> <CNavItem href="#">Link</CNavItem>
@@ -155,7 +154,7 @@
<CDropdownItem>Settings</CDropdownItem> <CDropdownItem>Settings</CDropdownItem>
</CDropdown> </CDropdown>
</CNavbarNav> </CNavbarNav>
<!-- </CCollapse> --> </CCollapse>
</CNavbar> </CNavbar>
</CCardBody> </CCardBody>
</CCard> </CCard>
src/views/base/Table.vue
+1 -1
View File
@@ -10,7 +10,7 @@
:fields="fields" :fields="fields"
:per-page="small ? 10 : 5" :per-page="small ? 10 : 5"
:dark="dark" :dark="dark"
no-sorting pagination
> >
<template #status="{item}"> <template #status="{item}">
<td> <td>
src/views/base/Tooltips.vue
+14 -5
View File
@@ -16,23 +16,32 @@
<CRow> <CRow>
<CCol col="4"> <CCol col="4">
<div class="c-text-center c-my-3"> <div class="c-text-center c-my-3">
<CButton v-c-tooltip.hover.click="'I am a tooltip!'"> <CButton
variant="secondary"
v-c-tooltip.hover.click="'I am a tooltip!'"
>
Hover Me Hover Me
</CButton> </CButton>
</div> </div>
</CCol> </CCol>
<CCol col="4"> <CCol col="4">
<div class="c-text-center c-my-3"> <div class="c-text-center c-my-3">
<CButton v-c-tooltip="{content: 'I start open!', active:true }"> <CButton
v-c-tooltip="{content: 'I start open!', active:true }"
variant="secondary"
>
Hover me Hover me
</CButton> </CButton>
</div> </div>
</CCol> </CCol>
<CCol col="4"> <CCol col="4">
<div class="c-text-center c-my-3"> <div class="c-text-center c-my-3">
<CButton v-c-tooltip.click=" <CButton
'I am showing on click and hiding on click outside tooltip!' variant="secondary"
"> v-c-tooltip.click="
'I am showing on click and hiding on click outside tooltip!'
"
>
Click me Click me
</CButton> </CButton>
</div> </div>
src/views/buttons/ButtonGroups.vue
+37 -36
View File
@@ -16,11 +16,11 @@
<CCardBody> <CCardBody>
<div> <div>
<CButtonGroup> <CButtonGroup>
<CButton>One</CButton> <CButton variant="secondary">One</CButton>
<CButton>Two</CButton> <CButton variant="secondary">Two</CButton>
<CButton>Three</CButton> <CButton variant="secondary">Three</CButton>
<CButton>Four</CButton> <CButton variant="secondary">Four</CButton>
<CButton class="c-d-sm-down-none">Five</CButton> <CButton variant="secondary" class="c-d-sm-down-none">Five</CButton>
</CButtonGroup> </CButtonGroup>
<br><br> <br><br>
<CButtonGroup> <CButtonGroup>
@@ -44,21 +44,21 @@
<CCardBody> <CCardBody>
<div> <div>
<CButtonGroup> <CButtonGroup>
<CButton>Left</CButton> <CButton variant="secondary">Left</CButton>
<CButton>Middle</CButton> <CButton variant="secondary">Middle</CButton>
<CButton>Right</CButton> <CButton variant="secondary">Right</CButton>
</CButtonGroup> </CButtonGroup>
<br><br> <br><br>
<CButtonGroup size="sm"> <CButtonGroup size="sm">
<CButton>Left</CButton> <CButton variant="secondary">Left</CButton>
<CButton>Middle</CButton> <CButton variant="secondary">Middle</CButton>
<CButton>Right</CButton> <CButton variant="secondary">Right</CButton>
</CButtonGroup> </CButtonGroup>
<br><br> <br><br>
<CButtonGroup size="lg"> <CButtonGroup size="lg">
<CButton>Left</CButton> <CButton variant="secondary">Left</CButton>
<CButton>Middle</CButton> <CButton variant="secondary">Middle</CButton>
<CButton>Right</CButton> <CButton variant="secondary">Right</CButton>
</CButtonGroup> </CButtonGroup>
</div> </div>
</CCardBody> </CCardBody>
@@ -72,15 +72,15 @@
<CCardBody> <CCardBody>
<div> <div>
<CButtonGroup> <CButtonGroup>
<CButton class="c-d-sm-down-none">Button 1</CButton> <CButton variant="secondary" class="c-d-sm-down-none">Button 1</CButton>
<CButton class="c-d-sm-down-none">Button 2</CButton> <CButton variant="secondary" class="c-d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" variant="success"> <CDropdown right text="Menu" variant="success">
<CDropdownItem>Item 1</CDropdownItem> <CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem> <CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider> <CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem> <CDropdownItem>Item 3</CDropdownItem>
</CDropdown> </CDropdown>
<CButton class="c-d-sm-down-none">Button 3</CButton> <CButton variant="secondary" class="c-d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info"> <CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 1</CDropdownItem> <CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem> <CDropdownItem>Item 2</CDropdownItem>
@@ -101,9 +101,9 @@
<CCardBody> <CCardBody>
<div> <div>
<CButtonGroup vertical> <CButtonGroup vertical>
<CButton>Top</CButton> <CButton variant="secondary">Top</CButton>
<CButton>Middle</CButton> <CButton variant="secondary">Middle</CButton>
<CButton>Bottom</CButton> <CButton variant="secondary">Bottom</CButton>
</CButtonGroup> </CButtonGroup>
</div> </div>
</CCardBody> </CCardBody>
@@ -125,17 +125,17 @@
<div> <div>
<CButtonToolbar aria-label="Toolbar with button groups"> <CButtonToolbar aria-label="Toolbar with button groups">
<CButtonGroup class="c-mx-1"> <CButtonGroup class="c-mx-1">
<CButton class="c-d-sm-down-none">&laquo;</CButton> <CButton variant="secondary" class="c-d-sm-down-none">&laquo;</CButton>
<CButton>&lsaquo;</CButton> <CButton variant="secondary">&lsaquo;</CButton>
</CButtonGroup> </CButtonGroup>
<CButtonGroup class="c-mx-1"> <CButtonGroup class="c-mx-1">
<CButton class="c-d-sm-down-none">Edit</CButton> <CButton variant="secondary" class="c-d-sm-down-none">Edit</CButton>
<CButton>Undo</CButton> <CButton variant="secondary">Undo</CButton>
<CButton>Redo</CButton> <CButton variant="secondary">Redo</CButton>
</CButtonGroup> </CButtonGroup>
<CButtonGroup class="c-mx-1"> <CButtonGroup class="c-mx-1">
<CButton>&rsaquo;</CButton> <CButton variant="secondary">&rsaquo;</CButton>
<CButton class="c-d-sm-down-none">&raquo;</CButton> <CButton variant="secondary" class="c-d-sm-down-none">&raquo;</CButton>
</CButtonGroup> </CButtonGroup>
</CButtonToolbar> </CButtonToolbar>
</div> </div>
@@ -146,8 +146,8 @@
class="c-d-sm-down-none" class="c-d-sm-down-none"
> >
<CButtonGroup size="sm" class="c-mx-1"> <CButtonGroup size="sm" class="c-mx-1">
<CButton>New</CButton> <CButton variant="secondary">New</CButton>
<CButton>Edit</CButton> <CButton variant="secondary">Edit</CButton>
</CButtonGroup> </CButtonGroup>
<CFormInput <CFormInput
class="c-mb-0 c-w-25 c-mx-1" class="c-mb-0 c-w-25 c-mx-1"
@@ -165,8 +165,8 @@
custom custom
/> />
<CButtonGroup size="sm" class="c-mx-1"> <CButtonGroup size="sm" class="c-mx-1">
<CButton>Save</CButton> <CButton variant="secondary">Save</CButton>
<CButton>Cancel</CButton> <CButton variant="secondary">Cancel</CButton>
</CButtonGroup> </CButtonGroup>
</CButtonToolbar> </CButtonToolbar>
</div> </div>
@@ -174,11 +174,12 @@
<div> <div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu"> <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="c-mx-1 c-d-sm-down-none"> <CButtonGroup class="c-mx-1 c-d-sm-down-none">
<CButton>New</CButton> <CButton variant="secondary">New</CButton>
<CButton>Edit</CButton> <CButton variant="secondary">Edit</CButton>
<CButton>Undo</CButton> <CButton variant="secondary">Undo</CButton>
</CButtonGroup> </CButtonGroup>
<CDropdown <CDropdown
variant="secondary"
class="c-mx-1" class="c-mx-1"
placement="bottom-end" placement="bottom-end"
button-content="Menu" button-content="Menu"
@@ -188,8 +189,8 @@
<CDropdownItem>Item 3</CDropdownItem> <CDropdownItem>Item 3</CDropdownItem>
</CDropdown> </CDropdown>
<CButtonGroup class="c-mx-1"> <CButtonGroup class="c-mx-1">
<CButton>Save</CButton> <CButton variant="secondary">Save</CButton>
<CButton>Cancel</CButton> <CButton variant="secondary">Cancel</CButton>
</CButtonGroup> </CButtonGroup>
</CButtonToolbar> </CButtonToolbar>
</div> </div>
src/views/buttons/Dropdowns.vue
+21 -3
View File
@@ -15,7 +15,11 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<div> <div>
<CDropdown button-html="Dropdown Button" class="c-m-2"> <CDropdown
button-html="Dropdown Button"
class="c-m-2"
variant="secondary"
>
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem> <CDropdownItem>Third Action</CDropdownItem>
@@ -33,7 +37,11 @@
</CDropdown> </CDropdown>
</div> --> </div> -->
<div> <div>
<CDropdown button-html="Dropdown with divider" class="c-m-2"> <CDropdown
button-html="Dropdown with divider"
class="c-m-2"
variant="secondary"
>
<CDropdownItem>First item</CDropdownItem> <CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem> <CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider> <CDropdownDivider></CDropdownDivider>
@@ -41,7 +49,11 @@
</CDropdown> </CDropdown>
</div> </div>
<div> <div>
<CDropdown button-html="Dropdown with header" class="c-m-2"> <CDropdown
button-html="Dropdown with header"
class="c-m-2"
variant="secondary"
>
<CDropdownHeader>Dropdown header</CDropdownHeader> <CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem> <CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Item</CDropdownItem> <CDropdownItem>Second Item</CDropdownItem>
@@ -93,6 +105,7 @@
</div> </div>
<div> <div>
<CDropdown <CDropdown
variant="secondary"
:offset="25" :offset="25"
button-html="Offset Dropdown" button-html="Offset Dropdown"
class="c-m-2" class="c-m-2"
@@ -104,6 +117,7 @@
</div> </div>
<div> <div>
<CDropdown <CDropdown
variant="secondary"
split split
button-html="Split Dropdown" button-html="Split Dropdown"
class="c-m-2" class="c-m-2"
@@ -151,6 +165,7 @@
<CCardBody> <CCardBody>
<div> <div>
<CDropdown <CDropdown
variant="secondary"
size="lg" size="lg"
button-html="Large" button-html="Large"
class="c-m-2" class="c-m-2"
@@ -160,6 +175,7 @@
<CDropdownItem>Something else here</CDropdownItem> <CDropdownItem>Something else here</CDropdownItem>
</CDropdown> </CDropdown>
<CDropdown <CDropdown
variant="secondary"
size="lg" size="lg"
split split
button-html="Large Split" button-html="Large Split"
@@ -171,6 +187,7 @@
</CDropdown> </CDropdown>
<br> <br>
<CDropdown <CDropdown
variant="secondary"
size="sm" size="sm"
button-html="Small" button-html="Small"
class="c-m-2" class="c-m-2"
@@ -180,6 +197,7 @@
<CDropdownItem>Something else here...</CDropdownItem> <CDropdownItem>Something else here...</CDropdownItem>
</CDropdown> </CDropdown>
<CDropdown <CDropdown
variant="secondary"
size="sm" size="sm"
split button-html="Small Split" split button-html="Small Split"
class="c-m-2" class="c-m-2"
src/views/notifications/Alerts.vue
+4 -1
View File
@@ -95,6 +95,7 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CAlert <CAlert
variant="secondary"
dismissible dismissible
:show.sync="dismissibleAlerts[0]" :show.sync="dismissibleAlerts[0]"
> >
@@ -102,6 +103,7 @@
</CAlert> </CAlert>
<CAlert <CAlert
variant="secondary"
dismissible dismissible
fade fade
:show.sync="dismissibleAlerts[1]" :show.sync="dismissibleAlerts[1]"
@@ -110,6 +112,7 @@
</CAlert> </CAlert>
<CAlert <CAlert
variant="secondary"
:show.sync="dismissibleAlerts[2]" :show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}" v-slot="{dismiss}"
class="c-alert-dismissible" class="c-alert-dismissible"
@@ -117,7 +120,7 @@
Dismissible Alert with custom button! Dismissible Alert with custom button!
<CButton <CButton
class="c-position-absolute" class="c-position-absolute"
variant="primary" variant="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);" style="right:10px;top: 50%;transform: translateY(-50%);"
textHtml="<i>Close</i>" textHtml="<i>Close</i>"
@click="dismiss" @click="dismiss"
src/views/notifications/Badges.vue
+5 -5
View File
@@ -14,11 +14,11 @@
</div> --> </div> -->
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h2>Example heading <CBadge>New</CBadge></h2> <h2>Example heading <CBadge variant="primary">New</CBadge></h2>
<h3>Example heading <CBadge>New</CBadge></h3> <h3>Example heading <CBadge variant="primary">New</CBadge></h3>
<h4>Example heading <CBadge>New</CBadge></h4> <h4>Example heading <CBadge variant="primary">New</CBadge></h4>
<h5>Example heading <CBadge>New</CBadge></h5> <h5>Example heading <CBadge variant="primary">New</CBadge></h5>
<h6>Example heading <CBadge>New</CBadge></h6> <h6>Example heading <CBadge variant="primary">New</CBadge></h6>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton variant="primary"> <CButton variant="primary">
src/views/widgets/Widgets.vue
+1
View File
@@ -443,6 +443,7 @@
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetHeaderDetails <CWidgetHeaderDetails
variant="primary"
right-header="SALE" right-header="SALE"
right-footer="Today 6:43 AM" right-footer="Today 6:43 AM"
left-header="$1.890,65" left-header="$1.890,65"
src/views/widgets/WidgetsDropdown.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown header="9.823" text="Members online"> <CWidgetDropdown variant="primary" header="9.823" text="Members online">
<template #default> <template #default>
<CDropdown <CDropdown
class="c-float-right" class="c-float-right"