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

refactor: change in alerts view due to CAlert component refactor.

Browse Source
This commit is contained in:
woothu
2019-03-11 12:10:17 +01:00
parent d38cde8b1e
commit 8df58efdb8
1 changed files with 71 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/notifications/Alerts.vue
+68 -35
View File
@@ -90,39 +90,60 @@
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>dismissible</small> <i class="fa fa-align-justify"></i> Alerts
<small>dismissible</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<div> <CAlert
<CAlert :show="true" dismissible disabled>
Dismissible Alert!
</CAlert>
<!-- :dismissible="{attrs: {disabled:'disabled', 'aria-label':'close it'}, class:'hehe' } -->
<CAlert :show="true"
dismissible>
Dismissible Alert!
<CButtonClose slot-scope="{ dismiss }"
@click="dismiss"
aria-label="close it"
style="color:red">
ok
</CButtonClose>
</CAlert>
<CAlert show dismissible>
Dismissible Alert!
</CAlert>
<CAlert variant="danger"
dismissible dismissible
fade :show.sync="dismissibleAlerts[0]"
:show="showDismissibleAlert"
@dismissed="showDismissibleAlert=false"
> >
Dismissible Alert! Dismissible Alert!
</CAlert> </CAlert>
<CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}}) <CAlert
dismissible
fade
:show.sync="dismissibleAlerts[1]"
>
Dismissible Alert with fade effect!
</CAlert>
<CAlert
:show.sync="dismissibleAlerts[2]"
dismissible
iconHtml="<i>Close</i>"
>
Dismissible Alert with custom icon!
</CAlert>
<CAlert
:show.sync="dismissibleAlerts[3]"
class="alert-dismissible"
v-slot="{dismiss}"
>
Dismissible Alert with custom button!
<CButton
class="position-absolute bg-primary"
style="right:10px;top: 50%;transform: translateY(-50%);"
text="<i>Close</i>"
@click="dismiss"
/>
</CAlert>
<CAlert
:show.sync="dismissibleAlerts[4]"
dismissible="disabled"
>
Disabled dismissible Alert!
</CAlert>
<CButton
@click="showDismissibleAlerts"
variant="info"
class="m-1"
>
Show dismissible alerts
</CButton> </CButton>
</div>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
@@ -131,19 +152,20 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<div> <div>
<CAlert :show="dismissCountDown" <CAlert
:show.sync="dismissCountDown"
dismissible dismissible
variant="warning" variant="warning"
@dismissed="dismissCountdown=0" fade
@dismiss-count-down="countDownChanged"> >
Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds... Alert will dismiss after
<strong>{{dismissCountDown}}</strong> seconds...
</CAlert> </CAlert>
<CAlert :show="dismissCountDown" <CAlert :show.sync="dismissCountDown"
dismissible dismissible
variant="info" variant="info"
@dismissed="dismissCountdown=0" >
@dismiss-count-down="countDownChanged">
Alert will dismiss after {{dismissCountDown}} seconds... Alert will dismiss after {{dismissCountDown}} seconds...
<CProgress variant="info" <CProgress variant="info"
:max="dismissSecs" :max="dismissSecs"
@@ -169,8 +191,11 @@ export default {
data () { data () {
return { return {
dismissSecs: 10, dismissSecs: 10,
dismissCountDown: 0, dismissCountDown: 10,
showDismissibleAlert: false dismissibleAlerts: [true, true, true, true, true],
// dismissibleAlert: true,
// dismissibleAlert2: true,
// dismissibleAlert3: true
} }
}, },
methods: { methods: {
@@ -179,6 +204,14 @@ export default {
}, },
showAlert () { showAlert () {
this.dismissCountDown = this.dismissSecs this.dismissCountDown = this.dismissSecs
},
showDismissibleAlerts () {
// this.dismissibleAlert = true
// this.dismissibleAlert2 = true
// this.dismissibleAlert3 = true
this.dismissibleAlerts = this.dismissibleAlerts.map(
alert => alert = true
)
} }
} }
} }