Skip to content

Commit 26d30c2

Browse files
woothuwoothu
committed
refactor: small fixes and refactors, update coreui styles
1 parent 14ba922 commit 26d30c2

File tree

11 files changed

+144
-139
lines changed

11 files changed

+144
-139
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"test:e2e": "vue-cli-service test:e2e"
1515
},
1616
"dependencies": {
17-
"@coreui/coreui": "3.0.0-alpha.13",
17+
"@coreui/coreui": "3.0.0-alpha.14",
1818
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
1919
"@coreui/coreui-vue-chartjs": "../coreui-vue-chartjs",
2020
"@coreui/icons": "github:coreui/coreui-icons#v1-alpha",

‎src/containers/TheHeader.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<CHeader fixed with-subheader light>
33
<CSidebarToggler
44
class="c-header-toggler ml-3"
5-
v-c-emit-root-event:c-sidebar-toggle
5+
v-c-emit-root-event:toggle-sidebar
66
/>
77
<img
88
class="c-header-brand mx-auto d-lg-none"
@@ -11,12 +11,12 @@
1111
height="46"
1212
alt="CoreUI Logo"
1313
/>
14-
<ul class="c-header-nav d-md-down-none mr-auto">
14+
<CHeaderNav class="d-md-down-none mr-auto">
1515
<CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
1616
<CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem>
1717
<CHeaderNavItem class="px-3">Settings</CHeaderNavItem>
18-
</ul>
19-
<ul class="c-header-nav mr-4">
18+
</CHeaderNav>
19+
<CHeaderNav class="mr-4">
2020
<CHeaderNavItem class="d-md-down-none mx-2">
2121
<i class="cui-bell"></i>
2222
</CHeaderNavItem>
@@ -27,7 +27,7 @@
2727
<i class="cui-envelope-open"></i>
2828
</CHeaderNavItem>
2929
<TheHeaderDropdownAccnt/>
30-
</ul>
30+
</CHeaderNav>
3131
<div class="c-subheader px-3">
3232
<CBreadcrumbRouter class="border-0"/>
3333
</div>

‎src/containers/TheSidebar.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<CRenderFunction :contentToRender="nav"/>
1414
<!-- <CSidebarFooter/> -->
1515
<CSidebarMinimizer
16-
class="d-md-down-none"
16+
class="d-md-down-none c-sidebar-minimized-unfoldable"
1717
@click.native="minimize = !minimize"
1818
/>
1919
</CSidebar>
@@ -26,8 +26,12 @@ export default {
2626
data () {
2727
return {
2828
minimize: false,
29-
nav
29+
nav,
30+
show: null
3031
}
32+
},
33+
mounted () {
34+
this.$root.$on('toggle-sidebar', () => this.show = !this.show)
3135
}
3236
}
3337
</script>

‎src/views/base/Cards.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,9 @@
6666
Card with label
6767
<CBadge pill variant="danger" class="float-right">42</CBadge>
6868
</CCardHeader>
69-
<CCardBody :body-html="loremIpsum"/>
69+
<CCardBody>
70+
{{loremIpsum}}
71+
</CCardBody>
7072
</CCard>
7173
</CCol>
7274
</CRow>

‎src/views/base/Forms.vue

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -210,14 +210,14 @@
210210
</CCol>
211211
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
212212
<CFormRadio
213-
v-for="option in options"
213+
v-for="(option, optionIndex) in options"
214214
:key="option"
215215
:label="option"
216216
type="radio"
217217
:value="option"
218218
:custom="key > 1"
219219
:name="`Option 1${key}`"
220-
checked="Option 1"
220+
:checked="optionIndex === key"
221221
:inline="key % 2 === 1"
222222
/>
223223
</CCol>
@@ -561,7 +561,7 @@
561561
<CFormInput placeholder="Username">
562562
<template #prepend>
563563
<CDropdown
564-
button-html="Action"
564+
togglerText="Action"
565565
variant="primary"
566566
>
567567
<CDropdownItem>Action</CDropdownItem>
@@ -578,7 +578,7 @@
578578
>
579579
<template #append>
580580
<CDropdown
581-
button-html="Action"
581+
togglerText="Action"
582582
variant="primary"
583583
right
584584
>
@@ -593,7 +593,7 @@
593593

594594
<template #prepend>
595595
<CDropdown
596-
button-html="Split"
596+
togglerText="Split"
597597
variant="primary"
598598
split
599599
>
@@ -606,7 +606,7 @@
606606

607607
<template #append>
608608
<CDropdown
609-
button-html="Action"
609+
togglerText="Action"
610610
variant="primary"
611611
right
612612
>
@@ -861,7 +861,11 @@ export default {
861861
options: ['Option 1', 'Option 2', 'Option 3'],
862862
selectOptions: [
863863
'Option 1', 'Option 2', 'Option 3',
864-
{ value: ['some value', 'another value'], label: 'Option 4' }],
864+
{
865+
value: ['some value', 'another value'],
866+
label: 'Selected option'
867+
}
868+
],
865869
selectedOption: ['some value', 'another value'],
866870
867871
formCollapsed: true,

‎src/views/base/Navbars.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
toggleable="md"
2121
variant="info"
2222
>
23-
<CNavbarToggle @click="show=!show"/>
23+
<CNavbarToggler @click="show=!show"/>
2424
<CNavbarBrand href="#">NavBar</CNavbarBrand>
2525
<CCollapse :show="show" navbar>
2626
<CNavbarNav>
@@ -42,7 +42,7 @@
4242
</CForm>
4343

4444
<CDropdown
45-
button-html="Lang"
45+
toggler-text="Lang"
4646
nav
4747
placement="bottom-end"
4848
>
@@ -54,7 +54,7 @@
5454

5555
<CDropdown
5656
nav
57-
buttonHtml="<em>User</em>"
57+
toggler-text="User"
5858
placement="bottom-end"
5959
>
6060
<CDropdownItem>Profile</CDropdownItem>
@@ -111,7 +111,7 @@
111111
<CNavItem href="#">Link</CNavItem>
112112
<!-- Navbar dropdowns -->
113113
<CDropdown
114-
button-html="Lang"
114+
toggler-text="Lang"
115115
right
116116
nav
117117
>
@@ -121,7 +121,7 @@
121121
<CDropdownItem>FA</CDropdownItem>
122122
</CDropdown>
123123
<CDropdown
124-
button-html="User"
124+
toggler-text="User"
125125
right
126126
nav
127127
>

‎src/views/base/ProgressBars.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</div>
1717
</CCardHeader>
1818
<CCardBody>
19-
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
19+
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
2020
<CProgress class="mt-1" :max="max" show-value>
2121
<CProgressBar :value="counter*(6/10)" variant="success"/>
2222
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
@@ -41,11 +41,11 @@
4141
<h6>Value label</h6>
4242
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
4343
<h6>Progress label</h6>
44-
<CProgress :value="value" :max="max2" show-progress class="mb-3"/>
44+
<CProgress :value="value" :max="max2" show-percentage class="mb-3"/>
4545
<h6>Value label with precision</h6>
4646
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
4747
<h6>Progress label with precision</h6>
48-
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/>
48+
<CProgress :value="value" :max="max2" :precision="2" show-percentage class="mb-3"/>
4949
</CCardBody>
5050
</CCard>
5151
<CCard>
@@ -71,10 +71,10 @@
7171
</CCardHeader>
7272
<CCardBody>
7373
<h6>Default height</h6>
74-
<CProgress :value="value3" show-progress class="mb-3"/>
74+
<CProgress :value="value3" show-percentage class="mb-3"/>
7575
<h6>Custom heights</h6>
76-
<CProgress height="2rem" :value="value3" show-progress class="mb-2"/>
77-
<CProgress height="20px" :value="value3" show-progress class="mb-2"/>
76+
<CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
77+
<CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
7878
<CProgress height="2px" :value="value3"/>
7979
</CCardBody>
8080
</CCard>
@@ -184,7 +184,7 @@
184184
<CProgressBar variant="success" :value="values[1]"/>
185185
<CProgressBar variant="info" :value="values[2]"/>
186186
</CProgress>
187-
<CProgress show-progress :max="max3" class="mb-3">
187+
<CProgress show-percentage :max="max3" class="mb-3">
188188
<CProgressBar variant="primary" :value="values[0]"/>
189189
<CProgressBar variant="success" :value="values[1]"/>
190190
<CProgressBar variant="info" :value="values[2]"/>
@@ -195,9 +195,9 @@
195195
<CProgressBar variant="info" :value="values[2]"/>
196196
</CProgress>
197197
<CProgress :max="max3" class="mb-3">
198-
<CProgressBar variant="primary" :value="values[0]" show-progress/>
199-
<CProgressBar variant="success" :value="values[1]" animated show-progress/>
200-
<CProgressBar variant="info" :value="values[2]" striped show-progress/>
198+
<CProgressBar variant="primary" :value="values[0]" show-percentage/>
199+
<CProgressBar variant="success" :value="values[1]" animated show-percentage/>
200+
<CProgressBar variant="info" :value="values[2]" striped show-percentage/>
201201
</CProgress>
202202
</CCardBody>
203203
</CCard>

‎src/views/base/Table.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
:fixed="fixed"
99
:items="items"
1010
:fields="fields"
11-
:per-page="small ? 10 : 5"
11+
:items-per-page="small ? 10 : 5"
1212
:dark="dark"
1313
pagination
1414
>

‎src/views/buttons/ButtonGroups.vue

Lines changed: 64 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -125,78 +125,72 @@
125125
</div> -->
126126
</CCardHeader>
127127
<CCardBody>
128-
<div>
129-
<CButtonToolbar aria-label="Toolbar with button groups">
130-
<CButtonGroup class="mx-1">
131-
<CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
132-
<CButton variant="secondary">&lsaquo;</CButton>
133-
</CButtonGroup>
134-
<CButtonGroup class="mx-1">
135-
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
136-
<CButton variant="secondary">Undo</CButton>
137-
<CButton variant="secondary">Redo</CButton>
138-
</CButtonGroup>
139-
<CButtonGroup class="mx-1">
140-
<CButton variant="secondary">&rsaquo;</CButton>
141-
<CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
142-
</CButtonGroup>
143-
</CButtonToolbar>
144-
</div>
128+
<CButtonToolbar aria-label="Toolbar with button groups" >
129+
<CButtonGroup class="mx-1">
130+
<CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
131+
<CButton variant="secondary">&lsaquo;</CButton>
132+
</CButtonGroup>
133+
<CButtonGroup class="mx-1">
134+
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
135+
<CButton variant="secondary">Undo</CButton>
136+
<CButton variant="secondary">Redo</CButton>
137+
</CButtonGroup>
138+
<CButtonGroup class="mx-1">
139+
<CButton variant="secondary">&rsaquo;</CButton>
140+
<CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
141+
</CButtonGroup>
142+
</CButtonToolbar>
145143
<hr class="d-sm-down-none"/>
146-
<div>
147-
<CButtonToolbar
148-
aria-label="Toolbar with button groups and input groups"
149-
class="d-sm-down-none"
150-
>
151-
<CButtonGroup size="sm" class="mx-1">
152-
<CButton variant="secondary">New</CButton>
153-
<CButton variant="secondary">Edit</CButton>
154-
</CButtonGroup>
155-
<CFormInput
156-
class="mb-0 w-25 mx-1"
157-
size="sm"
158-
prepend-html="$"
159-
append-html=".00"
160-
value="100"
161-
/>
162-
<CFormSelect
163-
class="mb-0 w-25 mx-1"
164-
size="sm"
165-
prepend-html="Size"
166-
value="Medium"
167-
:options="['Large','Medium','Small']"
168-
custom
169-
/>
170-
<CButtonGroup size="sm" class="mx-1">
171-
<CButton variant="secondary">Save</CButton>
172-
<CButton variant="secondary">Cancel</CButton>
173-
</CButtonGroup>
174-
</CButtonToolbar>
175-
</div>
144+
<CButtonToolbar
145+
aria-label="Toolbar with button groups and input groups"
146+
class="d-sm-down-none"
147+
>
148+
<CButtonGroup size="sm" class="mx-1">
149+
<CButton variant="secondary">New</CButton>
150+
<CButton variant="secondary">Edit</CButton>
151+
</CButtonGroup>
152+
<CFormInput
153+
class="mb-0 w-25 mx-1"
154+
size="sm"
155+
prepend-html="$"
156+
append-html=".00"
157+
value="100"
158+
/>
159+
<CFormSelect
160+
class="mb-0 w-25 mx-1"
161+
size="sm"
162+
prepend-html="Size"
163+
value="Medium"
164+
:options="['Large','Medium','Small']"
165+
custom
166+
/>
167+
<CButtonGroup size="sm" class="mx-1">
168+
<CButton variant="secondary">Save</CButton>
169+
<CButton variant="secondary">Cancel</CButton>
170+
</CButtonGroup>
171+
</CButtonToolbar>
176172
<hr/>
177-
<div>
178-
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
179-
<CButtonGroup class="mx-1 d-sm-down-none">
180-
<CButton variant="secondary">New</CButton>
181-
<CButton variant="secondary">Edit</CButton>
182-
<CButton variant="secondary">Undo</CButton>
183-
</CButtonGroup>
184-
<CDropdown
185-
variant="secondary"
186-
class="mx-1"
187-
placement="bottom-end"
188-
button-content="Menu"
189-
>
190-
<CDropdownItem>Item 1</CDropdownItem>
191-
<CDropdownItem>Item 2</CDropdownItem>
192-
<CDropdownItem>Item 3</CDropdownItem>
193-
</CDropdown>
194-
<CButtonGroup class="mx-1">
195-
<CButton variant="secondary">Save</CButton>
196-
<CButton variant="secondary">Cancel</CButton>
197-
</CButtonGroup>
198-
</CButtonToolbar>
199-
</div>
173+
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
174+
<CButtonGroup class="mx-1 d-sm-down-none">
175+
<CButton variant="secondary">New</CButton>
176+
<CButton variant="secondary">Edit</CButton>
177+
<CButton variant="secondary">Undo</CButton>
178+
</CButtonGroup>
179+
<CDropdown
180+
variant="secondary"
181+
class="mx-1"
182+
placement="bottom-end"
183+
button-content="Menu"
184+
>
185+
<CDropdownItem>Item 1</CDropdownItem>
186+
<CDropdownItem>Item 2</CDropdownItem>
187+
<CDropdownItem>Item 3</CDropdownItem>
188+
</CDropdown>
189+
<CButtonGroup class="mx-1">
190+
<CButton variant="secondary">Save</CButton>
191+
<CButton variant="secondary">Cancel</CButton>
192+
</CButtonGroup>
193+
</CButtonToolbar>
200194
</CCardBody>
201195
</CCard>
202196
</CCol>

0 commit comments

Comments
 (0)