refactor(log): new theme

src/log/src/Log.vue

@@ -1,57 +1,55 @@
 <template>
   <div
     class="n-log"
-    :class="{
-      [`n-${mergedTheme}-theme`]: mergedTheme
-    }"
     :style="{
       lineHeight: lineHeight,
-      height: styleHeight
+      height: styleHeight,
+      ...cssVars
     }"
     @wheel.passive="handleWheel"
   >
-    <n-scrollbar
-      ref="scrollbarRef"
-      class="n-code"
-      :theme="mergedTheme"
-      @scroll="handleScroll"
-    >
-      <n-log-line
-        v-for="(line, index) in mergedLines"
-        :key="index"
-        :line="line"
-      />
+    <n-scrollbar ref="scrollbarRef" :theme="'light'" @scroll="handleScroll">
+      <n-code>
+        <n-log-line
+          v-for="(line, index) in mergedLines"
+          :key="index"
+          :line="line"
+        />
+      </n-code>
     </n-scrollbar>
     <transition name="n-fade-in-scale-up-transition">
-      <n-log-loader v-if="loading" :theme="mergedTheme" />
+      <n-log-loader v-if="loading" :theme="'light'" />
     </transition>
   </div>
 </template>
 
 <script>
-import { ref } from 'vue'
-import { configurable, themeable, withCssr } from '../../_mixins'
+import { defineComponent, ref, computed } from 'vue'
+import { throttle } from 'lodash-es'
+import { useTheme } from '../../_mixins'
+import { warn } from '../../_utils'
 import { NScrollbar } from '../../scrollbar'
+import { NCode } from '../../code'
+import { logLight } from '../styles'
 import NLogLoader from './LogLoader.vue'
 import NLogLine from './LogLine.vue'
-import { throttle } from 'lodash-es'
-import { warn } from '../../_utils'
-import styles from './styles'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'Log',
   components: {
     NScrollbar,
+    NCode,
     NLogLoader,
     NLogLine
   },
-  mixins: [configurable, themeable, withCssr(styles)],
   provide () {
     return {
       NLog: this
     }
   },
   props: {
+    ...useTheme.props,
     loading: {
       type: Boolean,
       default: false
@@ -109,9 +107,30 @@ export default {
       default: undefined
     }
   },
-  setup () {
+  setup (props) {
+    const themeRef = useTheme('Log', 'Log', style, logLight, props)
     return {
-      scrollbarRef: ref(null)
+      scrollbarRef: ref(null),
+      cssVars: computed(() => {
+        const {
+          self: {
+            loaderFontSize,
+            loaderTextColor,
+            loaderColor,
+            loaderBorder,
+            loadingColor
+          },
+          common: { cubicBezierEaseInOut }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--loader-font-size': loaderFontSize,
+          '--loader-border': loaderBorder,
+          '--loader-color': loaderColor,
+          '--loader-text-color': loaderTextColor,
+          '--loading-color': loadingColor
+        }
+      })
     }
   },
   data () {
@@ -135,13 +154,16 @@ export default {
     }
   },
   created () {
+    // TODO: refactor
     this.handleWheel = throttle(this.handleWheel, 300)
   },
   methods: {
     getHljs () {
       return this.hljs || this.$naive.hljs
     },
-    handleScroll (e, container, content) {
+    handleScroll (e) {
+      const container = e.target
+      const content = e.target.firstElementChild
       if (this.slient) {
         this.$nextTick(() => {
           this.slient = false
@@ -229,5 +251,5 @@ export default {
       })
     }
   }
-}
+})
 </script>

src/log/src/LogLine.vue

@@ -3,7 +3,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   inject: {
     NLog: {
       default: null
@@ -60,5 +62,5 @@ export default {
       }
     }
   }
-}
+})
 </script>

src/log/src/LogLoader.vue

@@ -9,19 +9,24 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import { NBaseLoading } from '../../_base'
-import { locale } from '../../_mixins'
+import { useLocale } from '../../_mixins'
 
-export default {
+export default defineComponent({
   components: {
     NBaseLoading
   },
-  mixins: [locale('Log')],
   props: {
     theme: {
       type: String,
       default: undefined
     }
+  },
+  setup () {
+    return {
+      ...useLocale('Log')
+    }
   }
-}
+})
 </script>

src/log/src/styles/index.cssr.js

@@ -0,0 +1,65 @@
+import { cB, cE } from '../../../_utils/cssr'
+import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
+
+// vars:
+// --bezier
+// --loading-color
+// --loader-border
+// --loader-color
+// --loader-text-color
+// --loader-font-size
+// --loading-color
+export default cB('log', `
+  position: relative;
+  box-sizing: border-box;
+  transition:
+    border-color .3s var(--bezier),
+    color .3s var(--bezier);
+`, [
+  cE('lines', `
+    margin: 0;
+    white-space: pre-wrap;
+  `),
+  cE('line', `
+    margin: 0;
+  `),
+  cB('log-loader', `
+    transition:
+      color .3s var(--bezier),
+      background-color .3s var(--bezier),
+      border-color .3s var(--bezier);
+    box-sizing: border-box;
+    position: absolute;
+    right: 16px;
+    top: 8px;
+    height: 34px;
+    border-radius: 17px;
+    line-height: 34px;
+    white-space: nowrap;
+    overflow: hidden;
+    border: var(--loader-border);
+    color: var(--loader-text-color);
+    background-color: var(--loader-color);
+    font-size: var(--loader-font-size);
+  `, [
+    fadeInScaleUpTransition(),
+    cE('content', `
+      display: inline-block;
+      vertical-align: bottom;
+      line-height: 34px;
+      padding-left: 40px;
+      padding-right: 20px;
+      white-space: nowrap;
+    `),
+    cB('base-loading', `
+      color: var(--loading-color);
+      position: absolute;
+      left: 12px;
+      top: calc(50% - 10px);
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+    `)
+  ])
+])

src/log/src/styles/index.js

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

src/log/src/styles/themed-base.cssr.js

@@ -1,87 +0,0 @@
-import { cTB, c, cB, cE } from '../../../_utils/cssr'
-import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
-
-export default c([
-  ({ props }) => {
-    const {
-      $local: {
-        textColor,
-        loaderTextColor,
-        loaderColor,
-        loaderBorderColor,
-        fontSize
-      },
-      $global: {
-        cubicBezierEaseInOut,
-        fontFamilyMono
-      }
-    } = props
-    return cTB('log', {
-      raw: `
-        position: relative;
-        font-size: ${fontSize};
-        box-sizing: border-box;
-        color: ${textColor};
-        transition:
-          border-color .3s ${cubicBezierEaseInOut},
-          color .3s ${cubicBezierEaseInOut};
-      `
-    }, [
-      cE('lines', {
-        raw: `
-          margin: 0;
-          white-space: pre-wrap;
-        `
-      }),
-      cE('line', {
-        raw: `
-          font-family: ${fontFamilyMono};
-          margin: 0;
-        `
-      }),
-      cB('log-loader', {
-        raw: `
-          transition:
-            color .3s ${cubicBezierEaseInOut},
-            background-color .3s ${cubicBezierEaseInOut},
-            border-color .3s ${cubicBezierEaseInOut};
-          box-sizing: border-box;
-          position: absolute;
-          right: 16px;
-          top: 8px;
-          height: 34px;
-          border-radius: 17px;
-          line-height: 34px;
-          white-space: nowrap;
-          overflow: hidden;
-          border: 1px solid ${loaderBorderColor};
-          color: ${loaderTextColor};
-          background-color: ${loaderColor};
-        `
-      }, [
-        fadeInScaleUpTransition(),
-        cE('content', {
-          raw: `
-            display: inline-block;
-            vertical-align: bottom;
-            line-height: 34px;
-            padding-left: 40px;
-            padding-right: 20px;
-            white-space: nowrap;
-          `
-        }),
-        cB('base-loading', {
-          raw: `
-            position: absolute;
-            left: 12px;
-            top: calc(50% - 10px);
-            font-size: 20px;
-            width: 20px;
-            height: 20px;
-            display: inline-block;
-          `
-        })
-      ])
-    ])
-  }
-])

src/log/styles/dark.js

@@ -1,20 +1,29 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
 import { baseLoadingDark } from '../../_base/loading/styles'
 import { scrollbarDark } from '../../scrollbar/styles'
+import { commonDark } from '../../_styles/new-common'
+import { codeDark } from '../../code/styles'
 
-export default create({
+export default {
   name: 'Log',
-  theme: 'dark',
-  peer: [baseDark, baseLoadingDark, scrollbarDark],
-  getLocalVars (vars) {
-    const { textColor2Overlay, inputColorOverlay, fontSize } = vars
+  common: commonDark,
+  peers: {
+    BaseLoading: baseLoadingDark,
+    Scrollbar: scrollbarDark,
+    Code: codeDark
+  },
+  self (vars) {
+    const {
+      textColor2Overlay,
+      inputColorOverlay,
+      fontSize,
+      primaryColor
+    } = vars
     return {
-      textColor: textColor2Overlay,
+      loaderFontSize: fontSize,
       loaderTextColor: textColor2Overlay,
       loaderColor: inputColorOverlay,
-      loaderBorderColor: 'transparent',
-      fontSize
+      loaderBorder: '1px solid transparent',
+      loadingColor: primaryColor
     }
   }
-})
+}

src/log/styles/light.js

@@ -1,20 +1,24 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
 import { baseLoadingLight } from '../../_base/loading/styles'
 import { scrollbarLight } from '../../scrollbar/styles'
+import { commonLight } from '../../_styles/new-common'
+import { codeLight } from '../../code/styles'
 
-export default create({
+export default {
   name: 'Log',
-  theme: 'light',
-  peer: [baseLight, baseLoadingLight, scrollbarLight],
-  getLocalVars (vars) {
-    const { textColor2, modalColor, borderColor, fontSize } = vars
+  common: commonLight,
+  peers: {
+    BaseLoading: baseLoadingLight,
+    Scrollbar: scrollbarLight,
+    Code: codeLight
+  },
+  self (vars) {
+    const { textColor2, modalColor, borderColor, fontSize, primaryColor } = vars
     return {
-      textColor: textColor2,
+      loaderFontSize: fontSize,
       loaderTextColor: textColor2,
       loaderColor: modalColor,
-      loaderBorderColor: borderColor,
-      fontSize
+      loaderBorder: `1px solid ${borderColor}`,
+      loadingColor: primaryColor
     }
   }
-})
+}

src/styles.js

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

src/styles.new.js

@@ -33,6 +33,7 @@ import { inputNumberDark } from './input-number/styles'
 import { layoutDark } from './layout/styles'
 import { listDark } from './list/styles'
 import { loadingBarDark } from './loading-bar/styles'
+import { logDark } from './log/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -69,5 +70,6 @@ export const darkTheme = {
   InputNumber: inputNumberDark,
   Layout: layoutDark,
   List: listDark,
-  LoadingBar: loadingBarDark
+  LoadingBar: loadingBarDark,
+  Log: logDark
 }