Skip to content

Commit dde80b5

Browse files
woothuwoothu
committed
fix: small fixes
1 parent 584e39a commit dde80b5

File tree

17 files changed

+131
-72
lines changed

17 files changed

+131
-72
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
},
5959
"dependencies": {
6060
"@coreui/coreui": "next",
61+
"@coreui/icons": "0.3.0",
6162
"core-js": "^2.5.7",
6263
"element-resize-detector": "^1.2.0",
6364
"popper.js": "^1.14.7",

‎src/components/Alert/CAlert.vue

Lines changed: 57 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,27 @@
1+
<template>
2+
<transition :name="fade ? 'fade' : null" :appear="true">
3+
<div
4+
v-if="state"
5+
:class="alertClasses"
6+
role="alert"
7+
aria-live="polite"
8+
aria-atomic="true"
9+
>
10+
<CButtonClose
11+
v-if="dismissible && dismissible !== 'customButton' "
12+
@click="dismiss()"
13+
:iconHtml="iconHtml"
14+
:disabled="this.dismissible === 'disabled'"
15+
/>
16+
<slot :dismiss="dismiss">
17+
18+
</slot>
19+
</div>
20+
</transition>
21+
</template>
22+
123
<script>
224
import CButtonClose from '../Button/CButtonClose'
3-
425
export default {
526
name: 'CAlert',
627
components: { CButtonClose },
@@ -9,7 +30,10 @@ export default {
930
type: String,
1031
default: 'info'
1132
},
12-
dismissible: [Boolean, String],
33+
dismissible: {
34+
type: [Boolean, String],
35+
validator: val => [false, true, 'disabled', 'customButton']
36+
},
1337
show: {
1438
type: [Boolean, Number],
1539
default: true
@@ -24,13 +48,14 @@ export default {
2448
}
2549
},
2650
computed: {
27-
classObject () {
28-
return ['c-alert',
29-
{
30-
'c-alert-dismissible': this.dismissible,
31-
[`c-alert-${this.variant}`]: this.variant
32-
}
33-
]
51+
alertClasses () {
52+
return [
53+
'c-alert',
54+
{
55+
'c-alert-dismissible': this.dismissible,
56+
[`c-alert-${this.variant}`]: this.variant
57+
}
58+
]
3459
}
3560
},
3661
watch: {
@@ -42,7 +67,7 @@ export default {
4267
state: {
4368
immediate: true,
4469
handler (val, oldVal) {
45-
if(val == oldVal) return
70+
if (val == oldVal) return
4671
4772
if (!val && oldVal) {
4873
this.clearCounter()
@@ -71,39 +96,30 @@ export default {
7196
this.countdownTimeout = null
7297
}
7398
}
74-
},
75-
render (h) {
76-
if (!this.state) return h(false)
77-
78-
let dismissBtn = h(false)
79-
if (this.dismissible) {
80-
dismissBtn = h(
81-
'CButtonClose',
82-
{
83-
on: { click: this.dismiss },
84-
props: { iconHtml: this.iconHtml },
85-
attrs: { disabled: this.dismissible === 'disabled'}
86-
}
87-
)
88-
}
89-
const alert = h(
90-
'div',
91-
{
92-
class: this.classObject,
93-
attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}
94-
},
95-
[dismissBtn, this.$scopedSlots.default({dismiss: this.dismiss})]
96-
)
97-
return !this.fade ? alert : h(
98-
'transition',
99-
{ props: { name: 'fade', appear: true } },
100-
[ alert ]
101-
)
10299
}
103100
}
104101
</script>
102+
<style scoped>
103+
.fade-enter-active, .fade-leave-active {
104+
transition: opacity .3s;
105+
}
106+
.fade-enter, .fade-leave-to {
107+
opacity: 0;
108+
}
109+
/* /deep/ .c-alert-dismissible .c-close {
110+
position: absolute;
111+
top: 0;
112+
right: 0;
113+
padding: 0.75rem 1.25rem;
114+
color: inherit;
115+
} */
116+
</style>
105117

106-
107-
<style scoped lang="scss">
108-
@import "~@coreui/coreui/scss/partials/alert.scss";
118+
<style lang="scss">
119+
div:not(.coreui-custom-styles) {
120+
// .c-alert {
121+
// background-color: grey !important;
122+
// }
123+
@import "~@coreui/coreui/scss/partials/alert.scss";
124+
}
109125
</style>

‎src/components/Button/CButton.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const btnProps = {
88
pill: Boolean,
99
square: Boolean,
1010
ghost: Boolean,
11+
outline: Boolean,
1112
size: {
1213
type: String,
1314
validator: value => ['sm','lg'].includes(value)
@@ -38,7 +39,7 @@ function isToggle (props) {
3839
3940
function computeClasses (props) {
4041
return [
41-
`c-btn-${props.variant}`,
42+
`c-btn-${props.outline ? 'outline-' : ''}${props.variant}`,
4243
props.pill ? 'c-btn-pill' : props.square ? 'c-btn-square' : '',
4344
{
4445
[`c-btn-${props.size}`]: Boolean(props.size),

‎src/components/Button/CButtonClose.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,5 @@ export default {
3232

3333
<style scoped lang="scss">
3434
@import "~@coreui/coreui/scss/partials/buttons.scss";
35+
@import "~@coreui/coreui/scss/partials/close.scss";
3536
</style>

‎src/components/Callout/CCallout.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template functional>
2-
<div :class="`callout ${props.variant ? 'c-callout-' + props.variant : ''}`">
2+
<div :class="`c-callout ${props.variant ? 'c-callout-' + props.variant : ''}`">
33
<slot></slot>
44
</div>
55
</template>

‎src/components/Carousel/CCarousel.vue

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@
1515
<slot name="arrows">
1616
<a class="c-carousel-control-prev" @click="previousItem">
1717
<span class="c-carousel-control-prev-icon"></span>
18-
<span class="c-sr-only">Previous</span>
18+
<span class="sr-only">Previous</span>
1919
</a>
2020
<a class="c-carousel-control-next" @click="nextItem">
2121
<span class="c-carousel-control-next-icon"></span>
22-
<span class="c-sr-only">Next</span>
22+
<span class="sr-only">Next</span>
2323
</a>
2424
</slot>
2525
</template>
@@ -54,7 +54,7 @@ export default {
5454
}
5555
},
5656
mounted () {
57-
this.items = this.$slots.default.map(item => item.componentInstance)
57+
this.items = this.$children
5858
const activated = this.items.map((item, index) => item.active ? index :null)
5959
.filter(item => item)
6060
this.active = activated[0] || 0
@@ -90,14 +90,19 @@ export default {
9090
activate (index, order) {
9191
this.resetInterval()
9292
this.activated = index
93-
if (!order || this.animate) {
93+
if (!order || !this.animate) {
9494
this.items.forEach(item => item.$emit('setItem', this.items[index]))
9595
} else {
9696
this.slide(index, order)
9797
}
9898
},
9999
slide (i, order) {
100-
this.items.forEach(item => item.$emit('slideToItem', this.items[i], order))
100+
this.items[i].$emit('slideToItem', this.items[i], order)
101+
this.items.forEach((item, idx) => {
102+
if (i !== idx) {
103+
item.$emit('slideToItem', this.items[i], order)
104+
}
105+
})
101106
this.transitioning = true
102107
setTimeout(() => {
103108
this.transitioning = false

‎src/components/Carousel/CCarouselItem.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
class="c-d-block c-w-100 c-h-100 c-img-fluid"
88
/>
99
<slot>
10-
<div class="carousel-caption">
10+
<div class="c-carousel-caption">
1111
<h3>{{caption}}</h3>
1212
<p>{{text}}</p>
1313
</div>
@@ -45,7 +45,7 @@ export default {
4545
return [
4646
'c-carousel-item',
4747
{
48-
[`c-carousel-item-${this.order}`]: this.order,
48+
[`c-carousel-item-${this.order}`]: this.order && !this.activated,
4949
[`c-carousel-item-${this.direction}`]: this.transitioning,
5050
'active': this.activated
5151
}

‎src/components/Form/CForm.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default {
1212
},
1313
render(h, { props, data, children }) {
1414
return h(
15-
'c-form',
15+
'form',
1616
mergeData(data, {
1717
class: {
1818
'c-form-inline': props.inline,

‎src/components/ListGroup/CListGroup.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@ export default {
2121
}
2222
</script>
2323

24-
<style scoped lang="scss">
24+
<style lang="scss">
2525
@import "~@coreui/coreui/scss/partials/list-group.scss";
2626
</style>

‎src/components/Modal/CModal.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,9 @@ export default {
132132
},
133133
watch: {
134134
visible (newVal, oldVal) {
135-
if (newVal === oldVal) return
136-
this.toggle(newVal)
135+
if (newVal !== oldVal) {
136+
this.toggle(newVal)
137+
}
137138
}
138139
},
139140
methods: {
@@ -161,6 +162,7 @@ export default {
161162
<style scoped lang="scss">
162163
@import "~@coreui/coreui/scss/partials/modal.scss";
163164
@import "~@coreui/coreui/scss/partials/buttons.scss";
165+
@import "~@coreui/coreui/scss/partials/close.scss";
164166
@import "~@coreui/coreui/scss/utilities/_borders.scss";
165167
@import "~@coreui/coreui/scss/utilities/_display.scss";
166168
@import "~@coreui/coreui/scss/utilities/_overflow.scss";

‎src/components/Table/CTable.vue

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
name="sorting-icon"
5959
:state="getIconState(index)"
6060
>
61-
<i style="right:0px;" :class="iconClasses(index)"></i>
61+
<i :class="iconClasses(index)"></i>
6262
</slot>
6363
</th>
6464
</template>
@@ -170,7 +170,7 @@
170170
name="sorting-icon"
171171
:state="getIconState(index)"
172172
>
173-
<i style="right:0px;" :class="iconClasses(index)"></i>
173+
<i :class="iconClasses(index)"></i>
174174
</slot>
175175
</th>
176176
</template>
@@ -422,7 +422,9 @@ export default {
422422
},
423423
iconClasses (index) {
424424
const state = this.getIconState(index)
425-
return [ 'c-icon-transition c-float-right c-icons c-font-xl cui-arrow-top c-position-absolute',
425+
return [
426+
'c-icon-transition c-icons c-font-xl cui-arrow-top',
427+
'c-position-absolute c-arrow-position',
426428
{
427429
'c-transparent': !state,
428430
'c-rotate-icon': state === 'desc'
@@ -448,12 +450,19 @@ export default {
448450
-webkit-transition: transform 0.3s;
449451
transition: transform 0.3s;
450452
}
451-
.c-rotate-icon {
452-
transform: rotate(-180deg);
453-
}
454453
.c-is-loading {
455454
opacity: .4;
456455
}
456+
.c-arrow-position {
457+
right: 0;
458+
top: 50%;
459+
-ms-transform: translateY(-50%);
460+
transform: translateY(-50%);
461+
}
462+
.c-rotate-icon {
463+
-ms-transform: translateY(-50%) rotate(-180deg);
464+
transform: translateY(-50%) rotate(-180deg);
465+
}
457466
</style>
458467

459468
<style scoped lang="scss">
@@ -467,4 +476,8 @@ export default {
467476
@import "~@coreui/coreui/scss/utilities/_sizing.scss";
468477
@import "~@coreui/coreui/scss/utilities/_spacing.scss";
469478
@import "~@coreui/coreui/scss/utilities/_text.scss";
479+
@import "~@coreui/coreui/scss/utilities/_typography.scss";
480+
481+
//Icons
482+
@import '~@coreui/icons/css/coreui-icons.min.css';
470483
</style>

0 commit comments

Comments
 (0)