refactor(code): ts

This commit is contained in:
07akioni 2021-01-15 01:39:21 +08:00
parent 2eda4312ae
commit 1a2df922ff
10 changed files with 58 additions and 57 deletions

View File

@ -1,2 +0,0 @@
/* istanbul ignore file */
export { default as NCode } from './src/Code.js'

2
src/code/index.ts Normal file
View File

@ -0,0 +1,2 @@
/* istanbul ignore file */
export { default as NCode } from './src/Code'

View File

@ -1,16 +1,8 @@
import {
defineComponent,
h,
nextTick,
toRef,
watch,
onMounted,
ref,
computed
} from 'vue'
import { defineComponent, h, toRef, watch, onMounted, ref, computed } from 'vue'
import { useTheme, useHljs } from '../../_mixins'
import { codeLight } from '../styles'
import style from './styles/index.cssr.js'
import type { CodeThemeVars } from '../styles'
import style from './styles/index.cssr'
export default defineComponent({
name: 'Code',
@ -34,37 +26,43 @@ export default defineComponent({
}
},
setup (props, { slots }) {
const codeRef = ref(null)
const codeRef = ref<HTMLElement | null>(null)
const hljsRef = useHljs(props)
const generateCodeHTML = (language, code, trim) => {
const createCodeHtml = (language: string, code: string, trim: boolean) => {
const { value: hljs } = hljsRef
const languageValid = !!(language && hljs.getLanguage(language))
if (trim) code = code.trim()
return {
valid: languageValid,
content: hljs.highlight(language, code).value
if (!hljs) {
return null
}
if (!(language && hljs.getLanguage(language))) {
return null
}
return hljs.highlight(language, trim ? code.trim() : code).value
}
const setCode = () => {
if (slots.default) return
const { value: codeEl } = codeRef
if (!codeEl) return
const { code, language } = props
if (language) {
const { valid, content } = generateCodeHTML(language, code, props.trim)
if (valid) {
codeRef.value.innerHTML = content
const html = createCodeHtml(language, code, props.trim)
if (html !== null) {
codeEl.innerHTML = html
return
}
}
codeRef.value.textContent = code
codeEl.textContent = code
}
onMounted(setCode)
watch(toRef(props, 'language'), () => {
nextTick(setCode)
})
watch(toRef(props, 'code'), () => {
nextTick(setCode)
})
const themeRef = useTheme('Code', 'Code', style, codeLight, props)
watch(toRef(props, 'language'), setCode)
watch(toRef(props, 'code'), setCode)
watch(hljsRef, setCode)
const themeRef = useTheme<CodeThemeVars>(
'Code',
'Code',
style,
codeLight,
props
)
return {
codeRef,
cssVars: computed(() => {

View File

@ -18,23 +18,30 @@ const codeClass = withPrefix('code')
// --hue-6
// --hue-6-2
export default c([
cB('code', `
cB(
'code',
`
display: block;
font-size: var(--font-size);
font-family: var(--font-family);
`, [
c('pre', `
`,
[
c(
'pre',
`
margin: 0;
font-family: inherit;
`),
c('[class^=hljs]', {
color: 'var(--text-color)',
transition: `
`
),
c('[class^=hljs]', {
color: 'var(--text-color)',
transition: `
color .3s var(--bezier),
background-color .3s var(--bezier)
`
})
]),
})
]
),
`${codeClass} .hljs-comment,
${codeClass} .hljs-quote {
color: var(--mono-3);

View File

@ -1,9 +1,11 @@
import { commonDark } from '../../_styles/new-common'
import type { ThemeCommonVars } from '../../_styles/new-common'
import type { CodeThemeVars } from './light'
export default {
name: 'Code',
common: commonDark,
self (vars) {
self (vars: ThemeCommonVars): CodeThemeVars {
const { textColor2, fontSize, fontWeightStrong } = vars
return {
textColor: textColor2,

View File

@ -1,2 +0,0 @@
export { default as codeDark } from './dark.js'
export { default as codeLight } from './light.js'

3
src/code/styles/index.ts Normal file
View File

@ -0,0 +1,3 @@
export { default as codeDark } from './dark'
export { default as codeLight } from './light'
export type { CodeThemeVars } from './light'

View File

@ -1,9 +1,10 @@
import { commonLight } from '../../_styles/new-common'
import type { ThemeCommonVars } from '../../_styles/new-common'
export default {
const codeLight = {
name: 'Code',
common: commonLight,
self (vars) {
self (vars: ThemeCommonVars) {
const { textColor2, fontSize, fontWeightStrong } = vars
return {
textColor: textColor2,
@ -22,3 +23,6 @@ export default {
}
}
}
export default codeLight
export type CodeThemeVars = ReturnType<typeof codeLight.self>

View File

@ -21,11 +21,6 @@ import {
export default defineComponent({
name: 'ConfigProvider',
alias: ['App'],
provide () {
return {
NConfigProvider: this
}
},
props: {
abstract: {
type: Boolean,

View File

@ -10,12 +10,7 @@ import {
reactive
} from 'vue'
import { RawNode, TreeMate } from 'treemate'
import {
useMergedState,
// useFalseUntilTruthy,
useKeyboard,
useMemo
} from 'vooks'
import { useMergedState, useKeyboard, useMemo } from 'vooks'
import { useTheme } from '../../_mixins'
import { NPopover, popoverProps } from '../../popover'
import { keep, call, createKey } from '../../_utils'
@ -105,7 +100,6 @@ export default defineComponent({
toRef(props, 'show'),
uncontrolledShowRef
)
// const dataNeededRef = useFalseUntilTruthy(mergedShowRef)
const treemateRef = computed(() => {
return TreeMate(props.options, treemateOptions)
})