refactor(loading-bar): new theme

src/loading-bar/src/LoadingBar.vue

@@ -14,26 +14,45 @@
     <div
       v-show="loading || (!loading && entering)"
       class="n-loading-bar-container"
-      :class="{
-        [`n-${mergedTheme}-theme`]: mergedTheme
-      }"
     >
-      <div ref="loadingBar" class="n-loading-bar" />
+      <div ref="loadingBar" class="n-loading-bar" :style="cssVars" />
     </div>
   </transition>
 </template>
 
 <script>
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles'
+import { computed, defineComponent } from 'vue'
+import { useTheme } from '../../_mixins'
+import { loadingBarLight } from '../styles'
+import style from './styles/index.cssr.js'
 
 function createClassName (status) {
   return `n-loading-bar n-loading-bar--${status}`
 }
 
-export default {
+export default defineComponent({
   name: 'LoadingBar',
-  mixins: [configurable, themeable, withCssr(styles)],
+  setup (props) {
+    const themeRef = useTheme(
+      'LoadingBar',
+      'LoadingBar',
+      style,
+      loadingBarLight,
+      props
+    )
+    return {
+      cssVars: computed(() => {
+        const {
+          self: { height, colorError, colorLoading }
+        } = themeRef.value
+        return {
+          '--height': height,
+          '--color-loading': colorLoading,
+          '--color-error': colorError
+        }
+      })
+    }
+  },
   data () {
     return {
       entering: false,
@@ -112,5 +131,5 @@ export default {
       this.init()
     }
   }
-}
+})
 </script>

src/loading-bar/src/LoadingBarProvider.js

@@ -1,19 +1,17 @@
-import { Fragment, h, ref, Teleport } from 'vue'
+import {
+  Fragment,
+  h,
+  ref,
+  Teleport,
+  defineComponent,
+  provide,
+  nextTick
+} from 'vue'
 import { useIsMounted } from 'vooks'
 import NLoadingBar from './LoadingBar.vue'
 
-export default {
+export default defineComponent({
   name: 'LoadingBarProvider',
-  provide () {
-    return {
-      loadingBar: {
-        start: this.start,
-        finish: this.finish,
-        error: this.error,
-        update: this.update
-      }
-    }
-  },
   props: {
     to: {
       type: [String, Object],
@@ -21,48 +19,50 @@ export default {
     }
   },
   setup () {
-    return {
-      isMounted: useIsMounted(),
-      loadingBarRef: ref(null)
+    const isMountedRef = useIsMounted()
+    const loadingBarRef = ref(null)
+    const methods = {
+      start () {
+        if (isMountedRef.value) {
+          loadingBarRef.value.start()
+        } else {
+          nextTick(() => {
+            loadingBarRef.value.start()
+          })
+        }
+      },
+      error () {
+        if (isMountedRef.value) {
+          loadingBarRef.value.error()
+        } else {
+          nextTick(() => {
+            loadingBarRef.value.error()
+          })
+        }
+      },
+      finish () {
+        if (isMountedRef.value) {
+          loadingBarRef.value.finish()
+        } else {
+          nextTick(() => {
+            loadingBarRef.value.finish()
+          })
+        }
+      },
+      update (options) {
+        const { percent } = options
+        if (isMountedRef.value) {
+          loadingBarRef.value.update(percent)
+        } else {
+          nextTick(() => {
+            loadingBarRef.value.update(percent)
+          })
+        }
+      }
     }
-  },
-  methods: {
-    start () {
-      if (this.isMounted) {
-        this.loadingBarRef.start()
-      } else {
-        this.$nextTick(() => {
-          this.loadingBarRef.start()
-        })
-      }
-    },
-    error () {
-      if (this.isMounted) {
-        this.loadingBarRef.error()
-      } else {
-        this.$nextTick(() => {
-          this.loadingBarRef.error()
-        })
-      }
-    },
-    finish () {
-      if (this.isMounted) {
-        this.loadingBarRef.finish()
-      } else {
-        this.$nextTick(() => {
-          this.loadingBarRef.finish()
-        })
-      }
-    },
-    update (options) {
-      const { percent } = options
-      if (this.isMounted) {
-        this.loadingBarRef.update(percent)
-      } else {
-        this.$nextTick(() => {
-          this.loadingBarRef.update(percent)
-        })
-      }
+    provide('loadingBar', methods)
+    return {
+      loadingBarRef
     }
   },
   render () {
@@ -81,4 +81,4 @@ export default {
       this.$slots.default()
     ])
   }
-}
+})

src/loading-bar/src/styles/index.cssr.js

@@ -0,0 +1,43 @@
+import { cB, cM } from '../../../_utils/cssr'
+import fadeInTransition from '../../../_styles/transitions/fade-in'
+
+// vars:
+// --height
+// --color-loading
+// --color-error
+export default cB('loading-bar-container', `
+  z-index: 5999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+`, [
+  fadeInTransition({
+    enterDuration: '0.3s',
+    leaveDuration: '0.8s'
+  }),
+  cB('loading-bar', `
+    width: 100%;
+    transition:
+      max-width 4s linear,
+      background-color .2s linear;
+    height: var(--height);
+  `, [
+    cM('starting', `
+      background-color: var(--color-loading);
+    `),
+    cM('finishing', `
+      background-color: var(--color-loading);
+      transition:
+        max-width .2s linear,
+        background-color .2s linear;
+    `),
+    cM('error', `
+      background-color: var(--color-error);
+      transition:
+        max-width .2s linear,
+        background-color .2s linear;
+    `)
+  ])
+])

src/loading-bar/src/styles/index.js

@@ -1,9 +0,0 @@
-import baseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: baseStyle
-  }
-]

src/loading-bar/src/styles/themed-base.cssr.js

@@ -1,59 +0,0 @@
-import { cTB, c, cB, cM } from '../../../_utils/cssr'
-import fadeInTransition from '../../../_styles/transitions/fade-in'
-
-export default c([
-  ({ props }) => {
-    const {
-      height,
-      colorError,
-      colorLoading
-    } = props.$local
-    return cTB('loading-bar-container', {
-      raw: `
-        z-index: 5999;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 2px;
-      `
-    }, [
-      fadeInTransition({
-        enterDuration: '0.3s',
-        leaveDuration: '0.8s'
-      }),
-      cB('loading-bar', {
-        raw: `
-          width: 100%;
-          transition:
-            max-width 4s linear,
-            background-color .2s linear;
-          height: ${height};
-        `
-      }, [
-        cM('starting', {
-          raw: `
-            background-color: ${colorLoading};
-          `
-        }),
-        cM('finishing', {
-          raw: `
-            background-color: ${colorLoading};
-            transition:
-              max-width .2s linear,
-              background-color .2s linear;
-          `
-        }),
-        cM('error', {
-          raw: `
-            background-color: ${colorError};
-            transition:
-              max-width .2s linear,
-              background-color .2s linear;
-          `
-        })
-      ])
-    ])
-  }
-
-])

src/loading-bar/styles/dark.js

@@ -1,11 +1,9 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'LoadingBar',
-  theme: 'dark',
-  peer: [baseDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  self (vars) {
     const { successColor } = vars
     return {
       colorError: 'red',
@@ -13,4 +11,4 @@ export default create({
       height: '2px'
     }
   }
-})
+}

src/loading-bar/styles/light.js

@@ -1,11 +1,9 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'LoadingBar',
-  theme: 'light',
-  peer: [baseLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  self (vars) {
     const { successColor, errorColor } = vars
     return {
       colorError: errorColor,
@@ -13,4 +11,4 @@ export default create({
       height: '2px'
     }
   }
-})
+}

src/styles.js

@@ -50,7 +50,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { inputNumberDark, inputNumberLight } from './input-number/styles'
 // export { layoutDark, layoutLight } from './layout/styles'
 // export { listDark, listLight } from './list/styles'
-export { loadingBarDark, loadingBarLight } from './loading-bar/styles'
+// export { loadingBarDark, loadingBarLight } from './loading-bar/styles'
 export { logDark, logLight } from './log/styles'
 export { menuDark, menuLight } from './menu/styles'
 export { messageDark, messageLight } from './message/styles'

src/styles.new.js

@@ -32,6 +32,7 @@ import { inputDark } from './input/styles'
 import { inputNumberDark } from './input-number/styles'
 import { layoutDark } from './layout/styles'
 import { listDark } from './list/styles'
+import { loadingBarDark } from './loading-bar/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -67,5 +68,6 @@ export const darkTheme = {
   Input: inputDark,
   InputNumber: inputNumberDark,
   Layout: layoutDark,
-  List: listDark
+  List: listDark,
+  LoadingBar: loadingBarDark
 }

vue3.md

@@ -377,6 +377,7 @@
   - [ ] gradient-text transition 又没了
   - [x] md-loader code
   - [ ] input + form-item style
+  - [ ] loadingbar theme
 
 ## Info