mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
refactor(code): ts
This commit is contained in:
parent
2eda4312ae
commit
1a2df922ff
@ -1,2 +0,0 @@
|
||||
/* istanbul ignore file */
|
||||
export { default as NCode } from './src/Code.js'
|
2
src/code/index.ts
Normal file
2
src/code/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
/* istanbul ignore file */
|
||||
export { default as NCode } from './src/Code'
|
@ -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(() => {
|
@ -18,15 +18,21 @@ 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: `
|
||||
@ -34,7 +40,8 @@ export default c([
|
||||
background-color .3s var(--bezier)
|
||||
`
|
||||
})
|
||||
]),
|
||||
]
|
||||
),
|
||||
`${codeClass} .hljs-comment,
|
||||
${codeClass} .hljs-quote {
|
||||
color: var(--mono-3);
|
@ -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,
|
@ -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
3
src/code/styles/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export { default as codeDark } from './dark'
|
||||
export { default as codeLight } from './light'
|
||||
export type { CodeThemeVars } from './light'
|
@ -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>
|
@ -21,11 +21,6 @@ import {
|
||||
export default defineComponent({
|
||||
name: 'ConfigProvider',
|
||||
alias: ['App'],
|
||||
provide () {
|
||||
return {
|
||||
NConfigProvider: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
abstract: {
|
||||
type: Boolean,
|
||||
|
@ -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)
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user