fix(loading-bar): status conflict

README.md

@@ -85,7 +85,12 @@ Vue.use(naiveUi)
 |FormItem|🤔|❌||
 |Form|🤔|❌||
 |Table|🤔|❌|Function is not fulfilled|
+|Slider|🤔|||
 |LoadingBar|😍|||
+|AutoComplete|🚧|||
+|Tree|🚧|||
+|TreeSelect|🚧|||
+|Upload|🚧|||
 |Time|🚧|||
 |Anchor|🚧|||
 |Statistic|🚧|||
@@ -95,17 +100,12 @@ Vue.use(naiveUi)
 |Grid|🚧|||
 |Layout|🚧|||
 |Affix|🚧|||
-|AutoComplete|🚧|||
-|Tree|🚧|||
-|TreeSelect|🚧|||
-|Upload|🚧|||
-|Slider|🚧|||
 |Rating|🚧|||
 |Avator|🚧|||
 |Result|🚧|||
-|Menu|✋|||
-|Typography|✋|||
-|Mentions|✋|||
+|Menu|✋||Not Planne|
+|Typography|✋||Not Planne|
+|Mentions|✋||Not Planne|
 |Calendar|✋||Not Planned|
 |Carousel|✋||Not Planned|
 

demo/init.js

@@ -165,4 +165,13 @@ const router = new VueRouter({
   routes
 })
 
+router.beforeEach(function (to, from, next) {
+  Vue.prototype.$NLoadingBar.start()
+  next()
+})
+
+router.afterEach(function () {
+  Vue.prototype.$NLoadingBar.finish()
+})
+
 export { Vue, router }

packages/common/Button/src/main.vue

@@ -12,7 +12,6 @@
   >
     <transition
       name="n-fade-in-width-expand"
-      appear
     >
       <div
         v-if="(hasIcon || loading) && !iconOnRight"
@@ -52,7 +51,7 @@
     </div>
     <transition
       name="n-fade-in-width-expand"
-      appear
+      :appear="loading"
     >
       <div
         v-if="(loading || hasIcon) && iconOnRight"

packages/common/LoadingBar/src/LoadingBar.vue

@@ -4,9 +4,10 @@
     appear
     @after-enter="handleAfterEnter"
     @after-leave="handleAfterLeave"
+    @leave-cancelled="handleLeaveCancelled"
   >
     <div
-      v-show="!enter || (status !== 'finishing' && status !== 'error')"
+      v-show="!enter || status === 'starting'"
       class="n-loading-bar-container"
     >
       <div
@@ -39,50 +40,75 @@ export default {
     handleAfterEnter () {
       this.enter = true
     },
-    start () {
-      if (this.status !== 'starting') {
-        this.progress = 0
+    handleLeaveCancelled () {
+      this.enter = false
+    },
+    start (fromProgress = 0, toProgress = 80) {
+      if (this.status === null) {
         this.status = 'starting'
-        this.$refs.loadingBar.style.transition = 'max-width .15s linear, background-color .15s linear'
-        window.setTimeout(() => {
+        return this.$nextTick().then(() => {
+          this.$refs.loadingBar.getBoundingClientRect()
+          this.progress = toProgress
+          return this.$nextTick()
+        })
+      } else {
+        this.progress = fromProgress
+        return this.$nextTick().then(() => {
+          this.$refs.loadingBar.style.transition = 'none'
+          this.$refs.loadingBar.getBoundingClientRect()
           this.$refs.loadingBar.style.transition = null
-          this.$refs.loadingBar.getBoundingClientRect()
-          this.progress = 80
-        }, 150)
-      } else if (this.status === null) {
-        this.progress = 0
-        this.$nextTick().then(() => {
-          this.$refs.loadingBar.getBoundingClientRect()
-          this.progress = 80
+          this.status = 'starting'
+          this.progress = toProgress
+          return this.$nextTick()
         })
       }
     },
     finish (callback) {
       this.finishCallback = callback
       if (this.status === 'finishing') {
-        // do nothing
+        this.start(100, 100).then(() => {
+          this.finish(callback)
+        })
       } else if (this.status === null) {
-        this.status = 'finishing'
         this.progress = 100
+        this.$nextTick().then(() => {
+          this.$refs.loadingBar.style.transition = 'none'
+          this.$refs.loadingBar.getBoundingClientRect()
+          this.$refs.loadingBar.style.transition = null
+          this.status = 'finishing'
+        })
       } else {
-        this.progress = 100
-        this.status = 'finishing'
+        this.$nextTick(() => {
+          this.progress = 100
+          this.status = 'finishing'
+        })
       }
     },
-    handleAfterLeave () {
-      this.finishCallback()
-    },
     error (callback) {
       this.finishCallback = callback
       if (this.status === 'error') {
-        // do nothing
+        this.start(100, 100).then(() => {
+          this.error(callback)
+        })
       } else if (this.status === null) {
         this.progress = 100
-        this.status = 'error'
+        this.$nextTick().then(() => {
+          this.$refs.loadingBar.style.transition = 'none'
+          this.$refs.loadingBar.getBoundingClientRect()
+          this.$refs.loadingBar.style.transition = null
+          this.status = 'error'
+        })
       } else {
-        this.progress = 100
-        this.status = 'error'
+        this.$nextTick(() => {
+          this.progress = 100
+          this.status = 'error'
+        })
       }
+    },
+    handleAfterLeave () {
+      this.enter = false
+      this.status = null
+      this.finishCallback()
     }
   }
 }

packages/mixins/texttransparentable.js

@@ -16,15 +16,15 @@ export default {
       }
     }
     const id = 'x' + Math.random().toString(16).slice(9)
-    this.$el.setAttribute('n-id', id)
+    this.$el.setAttribute('n-background-id', id)
     this.cssNode = document.createElement('style')
-    this.cssNode.innerHTML = `[n-id=${id}] .simulate-transparent-text {
+    this.cssNode.innerHTML = `[n-background-id=${id}] .simulate-transparent-text {
   color: ${this.ascendantBackgroundColor}!important;
 }
-[n-id=${id}] .simulate-transparent-background {
+[n-background-id=${id}] .simulate-transparent-background {
   background-color: ${this.ascendantBackgroundColor}!important;
 }
-[n-id=${id}] .simulate-transparent-stroke circle {
+[n-background-id=${id}] .simulate-transparent-stroke circle {
   stroke: ${this.ascendantBackgroundColor}!important;
 }
 `

styles/Button.scss

@@ -21,7 +21,7 @@
       margin-left: 4px;
     }
   }
-  @include b(content) {
+  @include e(content) {
     white-space: nowrap;
   }
   @include m(disabled) {

styles/LoadingBar.scss

@@ -2,7 +2,7 @@
 @import './theme/default.scss';
 
 @include b(loading-bar-container) {
-  @include fade-in-transition(fade-in, .3s, .6s);
+  @include fade-in-transition(fade-in, .3s, .8s);
   z-index: 5000;
   position: fixed;
   top: 0;