chore: add alert plugin for docs; 🌟

docs/.vuepress/plugins/alert/Alert.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="alert" :style="`top: ${top}px`">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Alert',
+    props: ['alert'],
+    data() {
+      return {
+        top: 0
+      }
+    },
+    beforeMount() {
+      this.top = this.alert.top
+    },
+    mounted() {
+     window.addEventListener('alert_remove', (e) => {
+       this.top -= e.detail.height
+     })
+    },
+    watch: {
+      'page.alert.top': function (value) {
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .alert{
+    position: fixed;
+    padding: 6px 8px;
+    background-color: #fff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    margin: 0 auto;
+    z-index: 999;
+    top: 100px;
+    width: fit-content;
+    left: 0;
+    right: 0;
+    transition: top 0.3s;
+  }
+</style>

docs/.vuepress/plugins/alert/alertMixin.js

@@ -0,0 +1,38 @@
+import Alert from './Alert'
+
+const AlertMixin = {
+  install(Vue) {
+    Vue.mixin({
+      methods: {
+        $alert(message, duration = 2000) {
+          let Constructor= Vue.extend(Alert)
+          let alert = new Constructor()
+          alert.$slots.default = message
+          alert.$props.alert = this.$page.alert
+          alert.$mount()
+          document.body.appendChild(alert.$el)
+
+          const appendHeight = alert.$el.offsetHeight + 16
+          this.$page.alert.top += appendHeight
+
+          setTimeout(() => {
+            this.$page.alert.top -= appendHeight
+            this.triggerRemoveAlert(appendHeight)
+            setTimeout(() => {
+              alert.$destroy()
+              alert.$el.remove()
+            }, 100)
+          }, duration)
+        },
+        triggerRemoveAlert(height) {
+          const event = new CustomEvent('alert_remove', {
+            detail: {height}
+          })
+          window.dispatchEvent(event)
+        }
+      }
+    })
+  }
+}
+
+export default AlertMixin

docs/.vuepress/plugins/alert/clientRootMixin.js

@@ -0,0 +1,5 @@
+export default {
+  updated() {
+    this.$page.alert.top = 100
+  }
+}

docs/.vuepress/plugins/alert/enhanceApp.js

@@ -0,0 +1,5 @@
+import AlertMixin from './alertMixin'
+
+export default ({Vue}) => {
+  Vue.use(AlertMixin)
+}

docs/.vuepress/plugins/alert/index.js

@@ -0,0 +1,13 @@
+const path = require('path')
+
+module.exports = (options, ctx) => {
+  return {
+    clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js'),
+    extendPageData($page) {
+      $page.alert = {
+        top: 100
+      }
+    },
+    enhanceAppFiles: path.resolve(__dirname, 'enhanceApp.js')
+  }
+}