Skip to content

Commit c3fda09

Browse files
mrholekmrholek
committed
new components
1 parent 676ae5a commit c3fda09

File tree

10 files changed

+588
-909
lines changed

10 files changed

+588
-909
lines changed

‎Vue_Full_Project/src/components/Callout.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div :class="classList">
3+
<slot></slot>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
props: {
10+
variant: {
11+
type: String
12+
}
13+
},
14+
computed: {
15+
classList () {
16+
return [
17+
'callout',
18+
this.calloutVariant
19+
]
20+
},
21+
calloutVariant () {
22+
return this.variant ? `callout-${this.variant}` : ''
23+
}
24+
}
25+
}
26+
</script>

‎Vue_Full_Project/src/components/Header.vue

Lines changed: 38 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,50 @@
11
<template>
2-
<navbar>
2+
<header class="app-header navbar">
33
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</button>
4-
<a class="navbar-brand" href="#"></a>
5-
<ul class="nav navbar-nav d-md-down-none">
6-
<li class="nav-item">
7-
<a class="nav-link navbar-toggler sidebar-toggler" href="#" @click="sidebarMinimize">&#9776;</a>
8-
</li>
9-
<li class="nav-item px-3">
10-
<a class="nav-link" href="#">Dashboard</a>
11-
</li>
12-
<li class="nav-item px-3">
13-
<a class="nav-link" href="#">Users</a>
14-
</li>
15-
<li class="nav-item px-3">
16-
<a class="nav-link" href="#">Settings</a>
17-
</li>
18-
</ul>
19-
<ul class="nav navbar-nav ml-auto">
20-
<li class="nav-item d-md-down-none">
21-
<a class="nav-link" href="#"><i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span></a>
22-
</li>
23-
<li class="nav-item d-md-down-none">
24-
<a class="nav-link" href="#"><i class="icon-list"></i></a>
25-
</li>
26-
<li class="nav-item d-md-down-none">
27-
<a class="nav-link" href="#"><i class="icon-location-pin"></i></a>
28-
</li>
29-
<dropdown size="nav" class="nav-item">
30-
<span slot="button">
4+
<b-link class="navbar-brand" to="#"></b-link>
5+
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarMinimize">&#9776;</button>
6+
<b-nav is-nav-bar class="d-md-down-none">
7+
<b-nav-item class="px-3">Dashboard</b-nav-item>
8+
<b-nav-item class="px-3">Users</b-nav-item>
9+
<b-nav-item class="px-3">Settings</b-nav-item>
10+
</b-nav>
11+
<b-nav is-nav-bar class="ml-auto">
12+
<b-nav-item class="d-md-down-none">
13+
<i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span>
14+
</b-nav-item>
15+
<b-nav-item class="d-md-down-none">
16+
<i class="icon-list"></i>
17+
</b-nav-item>
18+
<b-nav-item class="d-md-down-none">
19+
<i class="icon-location-pin"></i>
20+
</b-nav-item>
21+
<b-nav-item-dropdown right>
22+
<template slot="button-content">
3123
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="[email protected]">
3224
<span class="d-md-down-none">admin</span>
33-
</span>
34-
<div slot="dropdown-menu"class="dropdown-menu dropdown-menu-right">
35-
36-
<div class="dropdown-header text-center"><strong>Account</strong></div>
37-
38-
<a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span class="badge badge-info">42</span></a>
39-
<a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></a>
40-
<a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></a>
41-
<a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></a>
42-
43-
<div class="dropdown-header text-center"><strong>Settings</strong></div>
44-
45-
<a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a>
46-
<a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Settings</a>
47-
<a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="badge badge-default">42</span></a>
48-
<a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></a>
49-
<div class="divider"></div>
50-
<a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock Account</a>
51-
<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
52-
</div>
53-
</dropdown>
54-
<li class="nav-item d-md-down-none">
55-
<a class="nav-link navbar-toggler aside-menu-toggler" href="#" @click="asideToggle">&#9776;</a>
56-
</li>
57-
</ul>
58-
</navbar>
25+
</template>
26+
<b-dropdown-header class="text-center"><strong>Account</strong></b-dropdown-header>
27+
<b-dropdown-item><i class="fa fa-bell-o"></i> Updates<span class="badge badge-info">42</span></b-dropdown-item>
28+
<b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></b-dropdown-item>
29+
<b-dropdown-item><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></b-dropdown-item>
30+
<b-dropdown-item><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></b-dropdown-item>
31+
<b-dropdown-header class="text-center"><strong>Settings</strong></b-dropdown-header>
32+
<b-dropdown-item><i class="fa fa-user"></i> Profile</b-dropdown-item>
33+
<b-dropdown-item><i class="fa fa-wrench"></i> Settings</b-dropdown-item>
34+
<b-dropdown-item><i class="fa fa-usd"></i> Payments<span class="badge badge-default">42</span></b-dropdown-item>
35+
<b-dropdown-item><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></b-dropdown-item>
36+
<b-dropdown-divider></b-dropdown-divider>
37+
<b-dropdown-item><i class="fa fa-shield"></i> Lock Account</b-dropdown-item>
38+
<b-dropdown-item><i class="fa fa-lock"></i> Logout</b-dropdown-item>
39+
</b-nav-item-dropdown>
40+
</b-nav>
41+
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">&#9776;</button>
42+
</header>
5943
</template>
6044
<script>
61-
62-
import navbar from './Navbar'
63-
import { dropdown } from 'vue-strap'
64-
6545
export default {
6646
name: 'header',
67-
components: {
68-
navbar,
69-
dropdown
70-
},
7147
methods: {
72-
click () {
73-
// do nothing
74-
},
7548
sidebarToggle (e) {
7649
e.preventDefault()
7750
document.body.classList.toggle('sidebar-hidden')

‎Vue_Full_Project/src/components/Switch.vue

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<template>
2+
<label :class="classList">
3+
<input type="checkbox"
4+
class="switch-input"
5+
:value="value"
6+
:checked="isChecked"
7+
@change="handleChange">
8+
<template v-if="isOn">
9+
<span class="switch-label" :data-on="on" :data-off="off"></span>
10+
</template>
11+
<template v-else>
12+
<span class="switch-label"></span>
13+
</template>
14+
<span class="switch-handle"></span>
15+
</label>
16+
</template>
17+
18+
<script>
19+
export default {
20+
model: {
21+
prop: 'checked',
22+
event: 'change'
23+
},
24+
props: {
25+
value: {
26+
default: true
27+
},
28+
uncheckedValue: {
29+
default: false
30+
},
31+
checked: {
32+
default: false
33+
},
34+
type: {
35+
type: String,
36+
default: 'default'
37+
},
38+
variant: {
39+
type: String,
40+
default: ''
41+
},
42+
pill: {
43+
type: Boolean,
44+
default: false
45+
},
46+
on: {
47+
type: String,
48+
default: null
49+
},
50+
off: {
51+
type: String,
52+
default: null
53+
},
54+
size: {
55+
type: String,
56+
default: null
57+
}
58+
},
59+
computed: {
60+
classList () {
61+
return [
62+
'switch',
63+
this.switchType,
64+
this.switchVariant,
65+
this.switchPill,
66+
this.switchSize
67+
]
68+
},
69+
switchType () {
70+
return this.type ? `switch-${this.type}` : `switch-default`
71+
},
72+
switchVariant () {
73+
return this.variant ? `switch-${this.variant}` : `switch-secondary`
74+
},
75+
switchPill () {
76+
return !this.pill ? null : `switch-pill`
77+
},
78+
switchSize () {
79+
return this.size ? `switch-${this.size}` : ''
80+
},
81+
isChecked () {
82+
return this.checked === this.value
83+
},
84+
isOn () {
85+
return !this.on ? null : true
86+
}
87+
},
88+
methods: {
89+
handleChange ({ target: { checked } }) {
90+
this.$emit('change', checked ? this.value : this.uncheckedValue)
91+
}
92+
}
93+
}
94+
</script>

‎Vue_Full_Project/src/components/index.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Aside from './Aside.vue'
2+
import Breadcrumb from './Breadcrumb.vue'
3+
import Callout from './Callout.vue'
4+
import Footer from './Footer.vue'
5+
import Header from './Header.vue'
6+
import Sidebar from './Sidebar.vue'
7+
import Switch from './Switch.vue'
8+
9+
export {
10+
Aside,
11+
Breadcrumb,
12+
Callout,
13+
Footer,
14+
Header,
15+
Sidebar,
16+
Switch
17+
}

0 commit comments

Comments
 (0)