feat(code): disable inlneTheme (#2479)

Signed-off-by: Sepush <sepush@outlook.com>
tusen-ai · Feb 21, 2022 · febba6e · febba6e
1 parent 1e22480
commit febba6e
Showing 1 changed file with 56 additions and 45 deletions.
diff --git a/src/code/src/Code.tsx b/src/code/src/Code.tsx
@@ -6,10 +6,15 @@ import {
   onMounted,
   ref,
   computed,
-  PropType,
-  CSSProperties
+  PropType
 } from 'vue'
-import { useTheme, useHljs, Hljs, useConfig } from '../../_mixins'
+import {
+  useTheme,
+  useHljs,
+  Hljs,
+  useConfig,
+  useThemeClass
+} from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { codeLight } from '../styles'
 import type { CodeTheme } from '../styles'
@@ -43,7 +48,7 @@ export default defineComponent({
   props: codeProps,
   setup (props, { slots }) {
     const { internalNoHighlight } = props
-    const { mergedClsPrefixRef } = useConfig()
+    const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig()
     const codeRef = ref<HTMLElement | null>(null)
     const hljsRef = internalNoHighlight ? { value: undefined } : useHljs(props)
     const createCodeHtml = (
@@ -103,59 +108,65 @@ export default defineComponent({
       props,
       mergedClsPrefixRef
     )
+    const cssVarsRef = computed(() => {
+      const {
+        common: { cubicBezierEaseInOut, fontFamilyMono },
+        self: {
+          textColor,
+          fontSize,
+          fontWeightStrong,
+          // extracted from hljs atom-one-light.scss
+          'mono-3': $1,
+          'hue-1': $2,
+          'hue-2': $3,
+          'hue-3': $4,
+          'hue-4': $5,
+          'hue-5': $6,
+          'hue-5-2': $7,
+          'hue-6': $8,
+          'hue-6-2': $9
+        }
+      } = themeRef.value
+      const { internalFontSize } = props
+      return {
+        '--n-font-size': internalFontSize ? `${internalFontSize}px` : fontSize,
+        '--n-font-family': fontFamilyMono,
+        '--n-font-weight-strong': fontWeightStrong,
+        '--n-bezier': cubicBezierEaseInOut,
+        '--n-text-color': textColor,
+        '--n-mono-3': $1,
+        '--n-hue-1': $2,
+        '--n-hue-2': $3,
+        '--n-hue-3': $4,
+        '--n-hue-4': $5,
+        '--n-hue-5': $6,
+        '--n-hue-5-2': $7,
+        '--n-hue-6': $8,
+        '--n-hue-6-2': $9
+      }
+    })
+    const themeClassHandle = inlineThemeDisabled
+      ? useThemeClass('code', undefined, cssVarsRef, props)
+      : undefined
     return {
       mergedClsPrefix: mergedClsPrefixRef,
       codeRef,
-      cssVars: computed(() => {
-        const {
-          common: { cubicBezierEaseInOut, fontFamilyMono },
-          self: {
-            textColor,
-            fontSize,
-            fontWeightStrong,
-            // extracted from hljs atom-one-light.scss
-            'mono-3': $1,
-            'hue-1': $2,
-            'hue-2': $3,
-            'hue-3': $4,
-            'hue-4': $5,
-            'hue-5': $6,
-            'hue-5-2': $7,
-            'hue-6': $8,
-            'hue-6-2': $9
-          }
-        } = themeRef.value
-        const { internalFontSize } = props
-        return {
-          '--n-font-size': internalFontSize
-            ? `${internalFontSize}px`
-            : fontSize,
-          '--n-font-family': fontFamilyMono,
-          '--n-font-weight-strong': fontWeightStrong,
-          '--n-bezier': cubicBezierEaseInOut,
-          '--n-text-color': textColor,
-          '--n-mono-3': $1,
-          '--n-hue-1': $2,
-          '--n-hue-2': $3,
-          '--n-hue-3': $4,
-          '--n-hue-4': $5,
-          '--n-hue-5': $6,
-          '--n-hue-5-2': $7,
-          '--n-hue-6': $8,
-          '--n-hue-6-2': $9
-        }
-      })
+      cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+      themeClass: themeClassHandle?.themeClass,
+      onRender: themeClassHandle?.onRender
     }
   },
   render () {
-    const { mergedClsPrefix, wordWrap } = this
+    const { mergedClsPrefix, wordWrap, onRender } = this
+    onRender?.()
     return (
       <code
         class={[
           `${mergedClsPrefix}-code`,
+          this.themeClass,
           wordWrap && `${mergedClsPrefix}-code--word-wrap`
         ]}
-        style={this.cssVars as CSSProperties}
+        style={this.cssVars as any}
         ref="codeRef"
       >
         {this.$slots}