Skip to content

Commit 069484b

Browse files
pi0pi0
committed
[WIP] 0.5.0
1 parent 1ca2f54 commit 069484b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+5527
-664
lines changed

‎.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
node_modules/
22
npm-debug*
3-
dist
3+
dist
4+
*.iml
5+
.idea
6+
.nuxt

‎.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
docs
2+
examples

‎components/alert.vue

Lines changed: 79 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,89 @@
11
<template>
2-
<div :class="classObject" role="alert" v-show="localShow">
3-
<button type="button"
4-
class="close"
5-
data-dismiss="alert"
6-
aria-label="Close"
7-
v-if="dismissible"
8-
@click.stop.prevent="dismiss"
9-
>
10-
<span aria-hidden="true">&times;</span>
11-
</button>
12-
<slot></slot>
13-
</div>
2+
<div :class="classObject" role="alert" v-if="localShow">
3+
<button type="button"
4+
class="close"
5+
data-dismiss="alert"
6+
aria-label="Close"
7+
v-if="dismissible"
8+
@click.stop.prevent="dismiss"
9+
>
10+
<span aria-hidden="true">&times;</span>
11+
</button>
12+
<slot></slot>
13+
</div>
1414
</template>
1515

1616
<script>
17-
export default {
18-
replace: true,
19-
props: {
20-
show: {
21-
type: Boolean,
22-
default: false,
23-
required: true
24-
},
25-
state: {
26-
type: String,
27-
default: 'success'
28-
},
29-
dismissible: {
30-
type: Boolean,
31-
default: false
32-
},
33-
dismissAfterSeconds: {
34-
type: Number,
35-
default: 0
36-
},
37-
},
38-
computed: {
39-
classObject() {
40-
return ['alert', this.alertState, this.dismissible ? 'alert-dismissible' : '', 'fade', 'in',]
41-
},
42-
alertState() {
43-
return !this.state || this.state === `default` ? `alert-success` : `alert-${this.state}`
44-
},
45-
show: {
46-
get: function() {
47-
return this.localShow;
17+
export default {
18+
props: {
19+
show: {
20+
type: Boolean,
21+
default: false
22+
},
23+
state: {
24+
type: String,
25+
default: 'info'
26+
},
27+
dismissible: {
28+
type: Boolean,
29+
default: false
30+
},
31+
dismissAfterSeconds: {
32+
type: Number,
33+
default: null,
34+
},
4835
},
49-
set: function(value) {
50-
this.localShow = value;
36+
computed: {
37+
classObject() {
38+
return ['alert', this.alertState, this.dismissible ? 'alert-dismissible' : '', 'fade', 'in',]
39+
},
40+
alertState() {
41+
return !this.state || this.state === `default` ? `alert-success` : `alert-${this.state}`
42+
},
43+
show: {
44+
get: function () {
45+
return this.localShow;
46+
},
47+
set: function (value) {
48+
this.localShow = value;
49+
},
50+
},
5151
},
52-
},
53-
},
54-
data() {
55-
return {
56-
localShow: this.show
57-
}
58-
},
59-
watch: {
60-
show: function(newValue, oldValue) {
61-
if (newValue == true && oldValue == false && this.dismissAfterSeconds != null) {
62-
let dismissCountDown = this.dismissAfterSeconds;
63-
this.$emit('dismiss-count-down', dismissCountDown);
64-
let intId = setInterval(() => {
65-
if (dismissCountDown < 2 || !this.show) {
66-
if (this.show) this.dismiss();
67-
clearInterval(intId);
68-
} else {
69-
dismissCountDown--;
70-
this.$emit('dismiss-count-down', dismissCountDown);
52+
data() {
53+
return {
54+
localShow: this.show
55+
}
56+
},
57+
mounted(){
58+
if (this.dismissAfterSeconds) {
59+
this.dismissCounter();
60+
}
61+
},
62+
watch: {
63+
show: function (newValue, oldValue) {
64+
if (this.dismissAfterSeconds && newValue == true && oldValue == false) {
65+
this.dismissCounter();
66+
}
67+
}
68+
},
69+
methods: {
70+
dismiss() {
71+
this.localShow = false;
72+
this.$root.$emit('dismissed')
73+
},
74+
dismissCounter(){
75+
let dismissCountDown = this.dismissAfterSeconds;
76+
this.$emit('dismiss-count-down', dismissCountDown);
77+
let intId = setInterval(() => {
78+
if (dismissCountDown < 2 || !this.show) {
79+
if (this.show) this.dismiss();
80+
clearInterval(intId);
81+
} else {
82+
dismissCountDown--;
83+
this.$emit('dismiss-count-down', dismissCountDown);
84+
}
85+
}, 1000);
7186
}
72-
}, 1000)
7387
}
74-
}
75-
},
76-
methods: {
77-
dismiss: function dismiss() {
78-
// hide an alert
79-
this.localShow = false
80-
// Emit an event from the current vm that propagates all the way up to its $root
81-
this.$root.$emit('dismissed::alert')
82-
},
8388
}
84-
}
8589
</script>

‎components/breadcrumb.vue

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
<template>
2-
<ol class="breadcrumb">
3-
<li class="breadcrumb-item" v-for="item in list" :class="{active:item.active}">
4-
<a href="#"
5-
@click.stop.prevent="onclick(item)"
6-
v-if="!item.active"
7-
>{{item.text}}</a>
8-
<span v-if="item.active">{{item.text}}</span>
9-
</li>
10-
</ol>
2+
<ol class="breadcrumb">
3+
<li v-for="item in items" :class="['breadcrumb-item', item.active ? 'active' : null]">
4+
<a href="#"
5+
@click.stop.prevent="onclick(item)"
6+
v-if="!item.active"
7+
>{{item.text}}</a>
8+
<span v-if="item.active">{{item.text}}</span>
9+
</li>
10+
</ol>
1111
</template>
1212

1313
<script>
1414
15-
export default {
16-
replace: true,
17-
computed: {},
18-
props: {
19-
list: {
20-
type: Array,
21-
default: [],
22-
required: true
23-
},
24-
},
25-
methods: {
26-
onclick: function (item) {
27-
this.$emit('click',item);
28-
},
29-
},
30-
}
15+
16+
export default {
17+
computed: {},
18+
props: {
19+
items: {
20+
type: Array,
21+
default: () => [],
22+
required: true
23+
},
24+
},
25+
methods: {
26+
onclick: function (item) {
27+
this.$emit('click', item);
28+
},
29+
},
30+
}
3131
</script>

‎components/button-group.vue

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,34 @@
11
<template>
2-
<div role="group" aria-label="" :class="['btn-group',vertical?'btn-group-vertical':'']">
3-
<slot></slot>
4-
</div>
2+
<div :class="classObject" role="group">
3+
<slot></slot>
4+
</div>
55
</template>
66

77
<script>
8-
export default {
9-
replace: true,
10-
computed: {},
11-
props: {
12-
vertical: {
13-
type: Boolean,
14-
default: false
15-
},
16-
},
17-
}
8+
export default {
9+
replace: true,
10+
computed: {
11+
classObject(){
12+
return [
13+
'btn-' + (this.toolbar ? 'toolbar' : 'group')
14+
, this.vertical ? 'btn-group-vertical' : '',
15+
this.size ? ('btn-group-' + this.size) : '',
16+
];
17+
}
18+
},
19+
props: {
20+
vertical: {
21+
type: Boolean,
22+
default: false
23+
},
24+
toolbar: {
25+
type: Boolean,
26+
default: false
27+
},
28+
size: {
29+
type: String,
30+
default: null
31+
},
32+
},
33+
}
1834
</script>

0 commit comments

Comments
 (0)