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

fix: template fixes, updates and refactors

Browse Source
This commit is contained in:
woothu
2019-10-25 18:32:56 +02:00
parent 4f43f966a9
commit e670826803
19 changed files with 106 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/TheFooter.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template>
<CFooter>
<div>
<a href="https://coreui.io">CoreUI</a>
<a href="https://coreui.io" target="_blank">CoreUI</a>
<span class="ml-1">&copy; 2019 creativeLabs.</span>
</div>
<div class="ml-auto">
<span class="mr-1">Powered by</span>
<a href="https://coreui.io">CoreUI for Vue</a>
<a href="https://coreui.io/vue" target="_blank">CoreUI for Vue</a>
</div>
</CFooter>
</template>
src/containers/TheHeader.vue
+7 -6
View File
@@ -2,20 +2,21 @@
<CHeader fixed with-subheader light>
<CToggler
in-header
class="c-header-toggler ml-3 d-lg-none"
class="ml-3 d-lg-none"
v-c-emit-root-event:toggle-sidebar-mobile
/>
<CToggler
in-header
class="c-header-toggler ml-3 d-md-down-none"
class="ml-3 d-md-down-none"
v-c-emit-root-event:toggle-sidebar
/>
<img
class="c-header-brand mx-auto d-lg-none"
<CHeaderBrand
class="mx-auto d-lg-none"
src="img/brand/coreui-base.svg"
width="97"
height="46"
alt="CoreUI Logo"
:wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}"
/>
<CHeaderNav class="d-md-down-none mr-auto">
<CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
@@ -34,9 +35,9 @@
</CHeaderNavItem>
<TheHeaderDropdownAccnt/>
</CHeaderNav>
<div class="c-subheader px-3">
<CSubheader class="px-3">
<CBreadcrumbRouter class="border-0"/>
</div>
</CSubheader>
</CHeader>
</template>
src/containers/TheHeaderDropdownAccnt.vue
+3 -5
View File
@@ -5,17 +5,16 @@
class="c-header-nav-items"
placement="bottom-end"
add-menu-classes="pt-0"
:show.sync="show"
>
<template #toggler>
<CLink class="c-header-nav-link" @click="show = !show">
<CHeaderNavItem only-link>
<div class="c-avatar">
<img
src="img/avatars/6.jpg"
class="c-avatar-img "
/>
</div>
</CLink>
</CHeaderNavItem>
</template>
<CDropdownHeader tag="div" class="text-center" color="light">
<strong>Account</strong>
@@ -72,8 +71,7 @@ export default {
name: 'TheHeaderDropdownAccnt',
data () {
return {
itemsCount: 42,
show: false
itemsCount: 42
}
}
}
src/containers/TheSidebar.vue
+2 -2
View File
@@ -5,8 +5,8 @@
:show.sync="show"
>
<CSidebarBrand
fullSrc="img/brand/coreui-base-white.svg"
minimizedSrc="img/brand/coreui-signet-white.svg"
:imgFull="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-base-white.svg'}"
:imgMinimized="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-signet-white.svg'}"
:wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
/>
<!-- <CSidebarHeader/> -->
src/views/base/Breadcrumbs.vue
+1 -1
View File
@@ -32,7 +32,7 @@ export default {
return {
items: [
{
text: '<b>Admin</b>',
text: 'Admin',
href: '#'
},
{
src/views/base/Collapses.vue
+10 -5
View File
@@ -17,16 +17,20 @@
</div>
</CCardHeader>
<CCardBody>
<CButton id="collapse1" color="primary">
<CButton @click="collapse = !collapse" color="primary">
Toggle Collapse
</CButton>
<CCollapse toggler="collapse1" class="mt-2">
<CCollapse :show="collapse" class="mt-2">
<CCard body-wrapper>
<p class="card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm" color="secondary">
<CButton
@click="innerCollapse = !innerCollapse"
size="sm"
color="secondary"
>
Toggle Inner Collapse
</CButton>
<CCollapse toggler="collapse2" class="mt-2">
<CCollapse :show="innerCollapse" class="mt-2">
<CCard body-wrapper>Hello!</CCard>
</CCollapse>
</CCard>
@@ -42,7 +46,8 @@ export default {
name: 'Collapses',
data () {
return {
showCollapse: true,
collapse: false,
innerCollapse: false,
text: `
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
src/views/base/Forms.vue
+1 -2
View File
@@ -149,11 +149,10 @@
horizontal
disabled
/>
<CInput
<CTextarea
label="Textarea"
placeholder="Content..."
horizontal
textarea="true"
rows="9"
/>
<CSelect
src/views/base/Jumbotrons.vue
+7 -4
View File
@@ -18,7 +18,9 @@
</div>
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
<CJumbotron>
<h1 class="display-3">Bootstrap 4</h1>
<p class="lead">Bootstrap 4 Components for Vue.js 2</p>
<p>For more information visit website</p>
<CButton color="primary" href="#">More Info</CButton>
</CJumbotron>
@@ -33,7 +35,8 @@
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="lead">
<h1 class="display-3">Bootstrap 4</h1>
<p class="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
@@ -61,9 +64,9 @@
color="info"
text-color="white"
border-color="dark"
header="Bootstrap 4"
>
<p slot="lead" class="lead">
<h1 class="display-3">Bootstrap 4</h1>
<p class="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
src/views/base/Navbars.vue
+1 -1
View File
@@ -91,7 +91,7 @@
<CNavbarBrand>CoreuiVue</CNavbarBrand>
<CCollapse :show="navbarText" navbar>
<CNavbarNav>
<span class="navbar-text">Navbar text</span>
<CNavbarText>Navbar text</CNavbarText>
</CNavbarNav>
</CCollapse>
</CNavbar>
src/views/notifications/Alerts.vue
+9 -8
View File
@@ -100,7 +100,7 @@
<CAlert
color="secondary"
closeButton
:show.sync="dismissibleAlerts[0]"
:show.sync="alert1"
>
Dismissible Alert!
</CAlert>
@@ -109,15 +109,14 @@
color="secondary"
closeButton
fade
:show.sync="dismissibleAlerts[1]"
:show.sync="alert2"
>
Dismissible Alert with fade effect!
</CAlert>
<CAlert
color="secondary"
:show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}"
:show.sync="alert3"
class="alert-dismissible"
>
Dismissible Alert with custom button!
@@ -125,9 +124,9 @@
class="position-absolute"
color="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);"
@click="dismiss"
@click="alert3 = false"
>
<i>Close</i>
Close
</CButton>
</CAlert>
<CButton
@@ -186,7 +185,9 @@ export default {
return {
dismissSecs: 10,
dismissCountDown: 10,
dismissibleAlerts: [true, true, true],
alert1: true,
alert2: true,
alert3: true
}
},
methods: {
@@ -197,7 +198,7 @@ export default {
this.dismissCountDown = this.dismissSecs
},
showDismissibleAlerts () {
this.dismissibleAlerts = this.dismissibleAlerts.map(el => el = true)
['alert1', 'alert2', 'alert3'].forEach(alert => this[alert] = true)
}
}
}
tests/unit/containers/__snapshots__/TheFooter.spec.js.snap
+3 -1
View File
@@ -7,6 +7,7 @@ exports[`TheFooter.vue renders correctly 1`] = `
<div>
<a
href="https://coreui.io"
target="_blank"
>
CoreUI
</a>
@@ -28,7 +29,8 @@ exports[`TheFooter.vue renders correctly 1`] = `
</span>
<a
href="https://coreui.io"
href="https://coreui.io/vue"
target="_blank"
>
CoreUI for Vue
</a>
tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
+8 -7
View File
@@ -9,23 +9,24 @@ exports[`TheHeader.vue renders correctly 1`] = `
withsubheader="true"
>
<ctoggler-stub
class="c-header-toggler ml-3 d-lg-none"
class="ml-3 d-lg-none"
inheader="true"
tag="button"
/>
<ctoggler-stub
class="c-header-toggler ml-3 d-md-down-none"
class="ml-3 d-md-down-none"
inheader="true"
tag="button"
/>
<img
<cheaderbrand
alt="CoreUI Logo"
class="c-header-brand mx-auto d-lg-none"
class="mx-auto d-lg-none"
height="46"
src="img/brand/coreui-base.svg"
width="97"
wrappedinlink="[object Object]"
/>
<cheadernav-stub
@@ -119,12 +120,12 @@ exports[`TheHeader.vue renders correctly 1`] = `
<theheaderdropdownaccnt-stub />
</cheadernav-stub>
<div
class="c-subheader px-3"
<csubheader
class="px-3"
>
<cbreadcrumbrouter-stub
class="border-0"
/>
</div>
</csubheader>
</cheader-stub>
`;
tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
+2 -2
View File
@@ -10,8 +10,8 @@ exports[`TheSidebar.vue renders correctly 1`] = `
show="responsive"
>
<csidebarbrand-stub
fullsrc="img/brand/coreui-base-white.svg"
minimizedsrc="img/brand/coreui-signet-white.svg"
imgfull="[object Object]"
imgminimized="[object Object]"
wrappedinlink="[object Object]"
/>
tests/unit/views/base/Collapses.spec.js
-16
View File
@@ -9,26 +9,10 @@ describe('Collapses.vue', () => {
it('has a name', () => {
expect(Collapses.name).toBe('Collapses')
})
it('has a created hook', () => {
expect(typeof Collapses.data).toMatch('function')
})
it('sets the correct default data', () => {
expect(typeof Collapses.data).toMatch('function')
const defaultData = Collapses.data()
expect(defaultData.showCollapse).toBe(true)
})
it('is Vue instance', () => {
const wrapper = shallowMount(Collapses)
expect(wrapper.isVueInstance()).toBe(true)
})
// it('is Collapses', () => {
// const wrapper = shallowMount(Collapses)
// expect(wrapper.is(Collapses)).toBe(true)
// })
// it('should render correct content', () => {
// const wrapper = mount(Collapses)
// expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Collapse')
// })
test('renders correctly', () => {
const wrapper = mount(Collapses)
expect(wrapper.element).toMatchSnapshot()
tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
+1 -1
View File
@@ -54,7 +54,7 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
href="#"
target="_self"
>
&lt;b&gt;Admin&lt;/b&gt;
Admin
</a>
</li>
<li
tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
-4
View File
@@ -45,7 +45,6 @@ exports[`Collapses.vue renders correctly 1`] = `
>
<button
class="btn btn-primary"
id="collapse1"
type="button"
>
@@ -56,7 +55,6 @@ exports[`Collapses.vue renders correctly 1`] = `
<div
class="mt-2"
style="display: none;"
toggler="collapse1"
>
<div
class="card"
@@ -73,7 +71,6 @@ exports[`Collapses.vue renders correctly 1`] = `
<button
class="btn btn-secondary btn-sm"
id="collapse2"
type="button"
>
@@ -84,7 +81,6 @@ exports[`Collapses.vue renders correctly 1`] = `
<div
class="mt-2"
style="display: none;"
toggler="collapse2"
>
<div
class="card"
tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
+24 -5
View File
@@ -38,10 +38,20 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
<ccardbody-stub>
<cjumbotron-stub
header="Bootstrap 4"
lead="Bootstrap 4 Components for Vue.js 2"
tag="div"
>
<h1
class="display-3"
>
Bootstrap 4
</h1>
<p
class="lead"
>
Bootstrap 4 Components for Vue.js 2
</p>
<p>
For more information visit website
</p>
@@ -87,9 +97,14 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
lead=""
tag="div"
>
<h1
class="display-3"
>
Bootstrap 4
</h1>
<p
class="lead"
slot="lead"
>
This is a simple hero unit, a simple jumbotron-style component for
@@ -164,13 +179,17 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
<cjumbotron-stub
bordercolor="dark"
color="info"
header="Bootstrap 4"
tag="div"
textcolor="white"
>
<h1
class="display-3"
>
Bootstrap 4
</h1>
<p
class="lead"
slot="lead"
>
This is a simple hero unit, a simple jumbotron-style component for
tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
+3 -3
View File
@@ -286,11 +286,11 @@ exports[`Navbars.vue renders correctly 1`] = `
<cnavbarnav-stub
tag="ul"
>
<span
class="navbar-text"
<cnavbartext-stub
tag="div"
>
Navbar text
</span>
</cnavbartext-stub>
</cnavbarnav-stub>
</ccollapse-stub>
</cnavbar-stub>
tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
+19 -1
View File
@@ -356,7 +356,25 @@ exports[`Alerts.vue renders correctly 1`] = `
class="alert-dismissible"
color="secondary"
show="true"
/>
>
Dismissible Alert with custom button!
<cbutton-stub
activeclass="active"
class="position-absolute"
color="secondary"
event="click"
exactactiveclass="active"
routertag="a"
target="_self"
type="button"
>
Close
</cbutton-stub>
</calert-stub>
<cbutton-stub
activeclass="active"