refactor: refactoring template

src/views/notifications/Alerts.vue

@@ -15,14 +15,15 @@
               </div>
             </div>
             <div>
-              <b-alert show variant="primary">Primary Alert</b-alert>
-              <b-alert show variant="secondary">Secondary Alert</b-alert>
-              <b-alert show variant="success">Success Alert</b-alert>
-              <b-alert show variant="danger">Danger Alert</b-alert>
-              <b-alert show variant="warning">Warning Alert</b-alert>
-              <b-alert show variant="info">Info Alert</b-alert>
-              <b-alert show variant="light">Light Alert</b-alert>
-              <b-alert show variant="dark">Dark Alert</b-alert>
+              <p></p>
+              <CAlert show variant="primary">Primary Alert</CAlert>
+              <CAlert show variant="secondary">Secondary Alert</CAlert>
+              <CAlert show variant="success">Success Alert</CAlert>
+              <CAlert show variant="danger">Danger Alert</CAlert>
+              <CAlert show variant="warning">Warning Alert</CAlert>
+              <CAlert show variant="info">Info Alert</CAlert>
+              <CAlert show variant="light">Light Alert</CAlert>
+              <CAlert show variant="dark">Dark Alert</CAlert>
             </div>
           </b-card>
         </b-col>
@@ -35,32 +36,32 @@
               <small> use <code>.alert-link</code> to provide links</small>
             </div>
             <div>
-              <b-alert show variant="primary">
+              <CAlert show variant="primary">
                 Primary Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="secondary">
+              </CAlert>
+              <CAlert show variant="secondary">
                 Secondary Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="success">
+              </CAlert>
+              <CAlert show variant="success">
                 Success Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="danger">
+              </CAlert>
+              <CAlert show variant="danger">
                 Danger Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="warning">
+              </CAlert>
+              <CAlert show variant="warning">
                 Warning Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="info">
+              </CAlert>
+              <CAlert show variant="info">
                 Info Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="light">
+              </CAlert>
+              <CAlert show variant="light">
                 Light Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
-              <b-alert show variant="dark">
+              </CAlert>
+              <CAlert show variant="dark">
                 Dark Alert with
                 <b-link href="#" class="alert-link">an example link</b-link>
                 .
-              </b-alert>
+              </CAlert>
             </div>
           </b-card>
         </b-col>
@@ -71,7 +72,7 @@
             <div slot="header">
               <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
             </div>
-            <b-alert show variant="success">
+            <CAlert show variant="success">
               <h4 class="alert-heading">Well done!</h4>
               <p>
                 Aww yeah, you successfully read this important alert message.
@@ -82,7 +83,7 @@
               <p class="mb-0">
                 Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
               </p>
-            </b-alert>
+            </CAlert>
           </b-card>
         </b-col>
         <b-col cols="12" md="6">
@@ -93,15 +94,30 @@
               <i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
             </div>
             <div>
-              <b-alert show dismissible>
+              <CAlert :show="true" dismissible disabled>
                 Dismissible Alert!
-              </b-alert>
-            <b-alert variant="danger"
+              </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
+                     fade
                      :show="showDismissibleAlert"
                      @dismissed="showDismissibleAlert=false">
               Dismissible Alert!
-            </b-alert>
+            </CAlert>
             <b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
               Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
             </b-btn>
@@ -114,14 +130,15 @@
               <i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
             </div>
             <div>
-              <b-alert :show="dismissCountDown"
+              <CAlert :show="dismissCountDown"
                        dismissible
                        variant="warning"
                        @dismissed="dismissCountdown=0"
                        @dismiss-count-down="countDownChanged">
                 Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
-              </b-alert>
-              <b-alert :show="dismissCountDown"
+              </CAlert>
+
+              <CAlert :show="dismissCountDown"
                        dismissible
                        variant="info"
                        @dismissed="dismissCountdown=0"
@@ -132,7 +149,7 @@
                             :value="dismissCountDown"
                             height="4px">
                 </b-progress>
-              </b-alert>
+              </CAlert>
               <b-btn @click="showAlert" variant="info" class="m-1">
                 Show alert with timer
               </b-btn>
@@ -145,8 +162,14 @@
 </template>
 
 <script>
+// import CAlert from './CAlert'
+// import CButtonClose from './CButtonClose'
 export default {
   name: 'alerts',
+  // components: {
+  //   CAlert,
+  //   CButtonClose
+  // },
   data () {
     return {
       dismissSecs: 10,

src/views/notifications/CAlert.js

@@ -0,0 +1,120 @@
+import CButtonClose from './CButtonClose'
+
+export default {
+  name: 'CAlert',
+  components: {CButtonClose},
+  render (h) {
+    if (!this.localShow) {
+      // If not showing, render placeholder
+      return h(false)
+    }
+    let dismissBtn = h(false)
+    if (this.dismissible) {
+      dismissBtn = this.$scopedSlots.default ?
+                   this.$scopedSlots.default({dismiss: this.dismiss}) :
+                    h(
+                      'CButtonClose',
+                      { on: { click: this.dismiss }},
+                      [ this.$slots.dismiss ]
+                    )
+    }
+    const alert = h(
+      'div',
+      {class: this.classObject, attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}},
+      [dismissBtn, this.$slots.default]
+    )
+    return !this.fade ? alert : h(
+      'transition',
+      { props: { name: 'fade', appear: true } },
+      [ alert ]
+    )
+  },
+  model: {
+    prop: 'show',
+    event: 'input'
+  },
+  data () {
+    return {
+      countDownTimerId: null,
+      dismissed: false
+    }
+  },
+  computed: {
+    classObject () {
+      return ['alert', `alert-${this.variant}`, this.dismissible ? 'alert-dismissible' : '']
+    },
+    localShow () {
+      return !this.dismissed && (this.countDownTimerId || this.show)
+    }
+  },
+  props: {
+    variant: {
+      type: String,
+      default: 'info'
+    },
+    dismissible: {
+      type: [Boolean, Object],
+      default: false
+    },
+    show: {
+      type: [Boolean, Number],
+      default: false
+    },
+    fade: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    show () {
+      this.showChanged()
+    }
+  },
+  mounted () {
+    this.showChanged()
+  },
+  destroyed /* istanbul ignore next */ () {
+    this.clearCounter()
+  },
+  methods: {
+    dismiss () {
+      this.clearCounter()
+      this.dismissed = true
+      this.$emit('dismissed')
+      this.$emit('input', false)
+      if (typeof this.show === 'number') {
+        this.$emit('dismiss-count-down', 0)
+        this.$emit('input', 0)
+      } else {
+        this.$emit('input', false)
+      }
+    },
+    clearCounter () {
+      if (this.countDownTimerId) {
+        clearInterval(this.countDownTimerId)
+        this.countDownTimerId = null
+      }
+    },
+    showChanged () {
+      // Reset counter status
+      this.clearCounter()
+      // Reset dismiss status
+      this.dismissed = false
+      // No timer for boolean values
+      if (this.show === true || this.show === false || this.show === null || this.show === 0) {
+        return
+      }
+      // Start counter (ensure we have an integer value)
+      let dismissCountDown = parseInt(this.show, 10) || 1
+      this.countDownTimerId = setInterval(() => {
+        if (dismissCountDown < 1) {
+          this.dismiss()
+          return
+        }
+        dismissCountDown--
+        this.$emit('dismiss-count-down', dismissCountDown)
+        this.$emit('input', dismissCountDown)
+      }, 1000)
+    }
+  }
+}

src/views/notifications/CButtonClose.js

@@ -0,0 +1,17 @@
+import { mergeData } from 'vue-functional-data-merge'
+export default {
+  name: 'CButtonClose',
+  functional: true,
+  render (h, { data, props, slots }) {
+    const componentData = {
+      staticClass: 'close',
+      attrs: {
+        type: props.type || 'button',
+        'aria-label': props.ariaLabel || 'Close'
+      }
+    }
+    if (!slots().default)
+      componentData.domProps = { innerHTML: '×' }
+    return h('button', mergeData(data, componentData), slots().default)
+  }
+}