mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-23 13:31:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(code): new theme

Browse Source
This commit is contained in:
07akioni 2021-01-02 16:33:23 +08:00
parent 6666a5b17b
commit f658334a89
11 changed files with 257 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
build/loaders/md-renderer.js
View File

@ -40,14 +40,14 @@ function createRenderer (wrapCodeWithCard = true) {
`MdRendererError: ${language} is not valid for code - ${code}`
)
}
const highlighted = hljs.highlight(language, code).value
const highlighted = hljs
.highlight(language, code)
.value.replace(/\n/g, '<br />')
return `${
wrapCodeWithCard ? '<n-card size="small" class="md-card">' : ''
}<n-config-consumer>
<template #="{ theme }">
<pre class="n-code" :class="'n-' + theme + '-theme'"><code v-pre>${highlighted}</code><n-code style="display: none;" /></pre>
</template>
</n-config-consumer>${wrapCodeWithCard ? '</n-card>' : ''}`
}<n-code><code v-pre>${highlighted}</code></n-code>${
wrapCodeWithCard ? '</n-card>' : ''
}`
},
heading: (text, level) => {
const id = text.replace(/ /g, '-')
@ -61,7 +61,9 @@ function createRenderer (wrapCodeWithCard = true) {
return `<n-p>${text}</n-p>`
},
link (href, title, text) {
if (/^(http:|https:)/.test(href)) { return `<n-a href="${href}" target="_blank">${text}</n-a>` }
if (/^(http:|https:)/.test(href)) {
return `<n-a href="${href}" target="_blank">${text}</n-a>`
}
return `<n-a to="${href}" >${text}</n-a>`
},
list (body, ordered, start) {

5
src/_utils/cssr/index.js
View File

@ -64,6 +64,10 @@ function cRB (selector, ...rest) {
return c(`${prefix}${selector}`, ...rest)
}
function withPrefix (selector) {
return `${prefix}${selector}`
}
export {
c,
cTB,
@ -74,6 +78,7 @@ export {
cNotM,
insideFormItem,
insideModal,
withPrefix,
prefix,
namespace,
createKey,

137
src/code/src/Code.js
View File

@ -1,11 +1,21 @@
import { h, nextTick } from 'vue'
import { configurable, themeable, withCssr } from '../../_mixins'
import styles from './styles/index.js'
import {
defineComponent,
h,
nextTick,
toRef,
watch,
getCurrentInstance,
onMounted,
ref,
computed
} from 'vue'
import { useTheme, useConfig } from '../../_mixins'
import { warn } from '../../_utils'
import { codeLight } from '../styles'
import style from './styles/index.cssr.js'
export default {
export default defineComponent({
name: 'Code',
mixins: [configurable, themeable, withCssr(styles)],
props: {
language: {
type: String,
@ -24,67 +34,100 @@ export default {
default: undefined
}
},
watch: {
language () {
nextTick(this.setCode)
},
code () {
nextTick(this.setCode)
}
},
created () {
if (__DEV__ && !this.hljs && !this.$naive.hljs) {
setup (props, { slots }) {
const vm = getCurrentInstance().proxy
const codeRef = ref(null)
const { NConfigProvider } = useConfig(props)
if (__DEV__ && !props.hljs && !NConfigProvider.hljs && !vm.$naive.hljs) {
warn('code', 'hljs is not set.')
}
},
mounted () {
this.setCode()
},
methods: {
getHljs () {
return this.hljs || this.$naive.hljs
},
generateCodeHTML (language, code, trim) {
const languageValid = !!(language && this.getHljs().getLanguage(language))
const getHljs = () => {
return props.hljs || NConfigProvider.hljs || vm.$naive.hljs
}
const generateCodeHTML = (language, code, trim) => {
const hljs = getHljs()
const languageValid = !!(language && hljs.getLanguage(language))
if (trim) code = code.trim()
return {
valid: languageValid,
content: this.getHljs().highlight(language, code).value
content: hljs.highlight(language, code).value
}
},
setCode () {
const { code, language } = this
}
const setCode = () => {
if (slots.default) return
const { code, language } = props
if (language) {
const { valid, content } = this.generateCodeHTML(
language,
code,
this.trim
)
const { valid, content } = generateCodeHTML(language, code, props.trim)
if (valid) {
this.$refs.code.innerHTML = content
codeRef.value.innerHTML = content
return
}
}
this.$refs.code.textContent = code
codeRef.value.textContent = code
}
onMounted(setCode)
watch(toRef(props, 'language'), () => {
nextTick(setCode)
})
watch(toRef(props, 'code'), () => {
nextTick(setCode)
})
const themeRef = useTheme('Code', 'Code', style, codeLight, props)
return {
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
return {
'--font-size': fontSize,
'--font-family': fontFamilyMono,
'--font-weight-strong': fontWeightStrong,
'--bezier': cubicBezierEaseInOut,
'--text-color': textColor,
'--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
}
})
}
},
render () {
const { mergedTheme } = this
const { default: defaultSlot } = this.$slots
return h(
'pre',
{
class: [
'n-code',
{
[`n-${mergedTheme}-theme`]: mergedTheme
}
]
class: 'n-code',
style: this.cssVars
},
[
h('code', {
ref: 'code'
})
defaultSlot
? defaultSlot()
: h('code', {
ref: 'codeRef'
})
]
)
}
}
})

106
src/code/src/styles/index.cssr.js Normal file
View File

@ -0,0 +1,106 @@
import { c, cB, withPrefix } from '../../../_utils/cssr'
const codeClass = withPrefix('code')
// vars:
// --font-size
// --font-family
// --font-weight-strong
// --bezier
// --text-color
// --mono-3
// --hue-1
// --hue-2
// --hue-3
// --hue-4
// --hue-5
// --hue-5-2
// --hue-6
// --hue-6-2
export default c([
cB('code', `
margin: 0;
font-size: var(--font-size);
font-family: var(--font-family);
`,
[
c('code', {
fontFamily: 'var(--font-family)'
}),
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);
font-style: italic;
}
${codeClass} .hljs-doctag,
${codeClass} .hljs-keyword,
${codeClass} .hljs-formula {
color: var(--hue-3);
}
${codeClass} .hljs-section,
${codeClass} .hljs-name,
${codeClass} .hljs-selector-tag,
${codeClass} .hljs-deletion,
${codeClass} .hljs-subst {
color: var(--hue-5);
}
${codeClass} .hljs-literal {
color: var(--hue-1);
}
${codeClass} .hljs-string,
${codeClass} .hljs-regexp,
${codeClass} .hljs-addition,
${codeClass} .hljs-attribute,
${codeClass} .hljs-meta-string {
color: var(--hue-4);
}
${codeClass} .hljs-built_in,
${codeClass} .hljs-class .hljs-title {
color: var(--hue-6-2);
}
${codeClass} .hljs-attr,
${codeClass} .hljs-variable,
${codeClass} .hljs-template-variable,
${codeClass} .hljs-type,
${codeClass} .hljs-selector-class,
${codeClass} .hljs-selector-attr,
${codeClass} .hljs-selector-pseudo,
${codeClass} .hljs-number {
color: var(--hue-6);
}
${codeClass} .hljs-symbol,
${codeClass} .hljs-bullet,
${codeClass} .hljs-link,
${codeClass} .hljs-meta,
${codeClass} .hljs-selector-id,
${codeClass} .hljs-title {
color: var(--hue-2);
}
${codeClass} .hljs-emphasis {
font-style: italic;
}
${codeClass} .hljs-strong {
font-weight: var(--font-weight-strong);
}
${codeClass} .hljs-link {
text-decoration: underline;
}`
])

9
src/code/src/styles/index.js
View File

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

42
src/code/src/styles/themed-base.cssr.js
View File

@ -1,42 +0,0 @@
import { c, cTB } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
$global: {
fontFamilyMono,
cubicBezierEaseInOut
},
$local: {
textColor,
highlightStyle,
fontSize
}
} = props
return [
cTB(
'code',
{
raw: `
margin: 0;
font-size: ${fontSize};
font-family: ${fontFamilyMono};
`
},
[
c('code', {
fontFamily: fontFamilyMono
}),
c('[class^=hljs]', {
color: textColor,
transition: `
color .3s ${cubicBezierEaseInOut},
background-color .3s ${cubicBezierEaseInOut}
`
}),
highlightStyle
]
)
]
}
])

105
src/code/styles/dark.js
View File

@ -1,94 +1,23 @@
import create from '../../_styles/utils/create-component-base'
import { c } from '../../_utils/cssr'
import { baseDark } from '../../_styles/base'
import { commonDark } from '../../_styles/new-common'
export default create({
theme: 'dark',
name: 'Code',
peer: [baseDark],
getLocalVars (vars) {
const { textColor2, fontSize } = vars
export default {
common: commonDark,
self (vars) {
const { textColor2, fontSize, fontWeightStrong } = vars
return {
textColor: textColor2,
fontSize,
highlightStyle: [
c(
`
.hljs-pattern-match,
.hljs-keyword, .hljs-operator
`,
{
color: '#F92672'
}
),
c('.hljs-pattern-match .hljs-constructor', {
color: '#61aeee'
}),
c('.hljs-function', {
color: '#61aeee'
}),
c('.hljs-function .hljs-params', {
color: '#A6E22E'
}),
c('.hljs-function .hljs-params .hljs-typing', {
color: '#FD971F'
}),
c('.hljs-module-access .hljs-module', {
color: '#7e57c2'
}),
c('.hljs-constructor', {
color: '#e2b93d'
}),
c('.hljs-constructor .hljs-string', {
color: '#9CCC65'
}),
c('.hljs-comment, .hljs-quote', {
color: '#b18eb1',
fontStyle: 'italic'
}),
c('.hljs-doctag, .hljs-formula', {
color: '#c678dd'
}),
c(
'.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst',
{
color: '#e06c75'
}
),
c('.hljs-literal', {
color: '#56b6c2'
}),
c(
'.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string',
{
color: '#98c379'
}
),
c('.hljs-built_in, .hljs-class .hljs-title', {
color: '#e6c07b'
}),
c(
'.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number',
{
color: '#d19a66'
}
),
c(
'.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title',
{
color: '#61aeee'
}
),
c('.hljs-emphasis', {
fontStyle: 'italic'
}),
c('.hljs-strong', {
fontWeight: vars.fontWeightStrong
}),
c('.hljs-link', {
textDecoration: 'underline'
})
]
fontWeightStrong,
// extracted from hljs atom-one-dark.scss
'mono-3': '#5c6370',
'hue-1': '#56b6c2',
'hue-2': '#61aeee',
'hue-3': '#c678dd',
'hue-4': '#98c379',
'hue-5': '#e06c75',
'hue-5-2': '#be5046',
'hue-6': '#d19a66',
'hue-6-2': '#e6c07b'
}
}
})
}

133
src/code/styles/light.js
View File

@ -1,122 +1,23 @@
import create from '../../_styles/utils/create-component-base'
import { c } from '../../_utils/cssr'
import { baseLight } from '../../_styles/base'
import { commonLight } from '../../_styles/new-common'
export default create({
theme: 'light',
name: 'Code',
peer: [baseLight],
getLocalVars (vars) {
const { textColor2, fontSize } = vars
export default {
common: commonLight,
self (vars) {
const { textColor2, fontSize, fontWeightStrong } = vars
return {
textColor: textColor2,
fontSize,
highlightStyle: [
c(
`
.hljs-comment,
.hljs-quote
`,
{
raw: `
color: #a0a1a7;
font-style: italic;
`
}
),
c(
`
.hljs-doctag,
.hljs-keyword,
.hljs-formula
`,
{
color: '#a626a4'
}
),
c(
`
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst
`,
{
color: '#e45649'
}
),
c('.hljs-literal', {
color: '#0184bb'
}),
c(
`
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string
`,
{
color: '#50a14f'
}
),
c(
`
.hljs-built_in,
.hljs-class .hljs-title
`,
{
color: '#c18401'
}
),
c(
`
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number
`,
{
color: '#986801'
}
),
c(
`
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title
`,
{
color: '#4078f2'
}
),
c('.hljs-emphasis', {
fontStyle: 'italic'
}),
c('.hljs-strong', {
fontWeight: vars.fontWeightStrong
}),
c('.hljs-link', {
textDecoration: 'underline'
}),
c(
`
.hljs-function .hljs-params,
.hljs-function .hljs-params .hljs-typing
`,
{
color: '#383a42'
}
)
]
fontWeightStrong,
// extracted from hljs atom-one-light.scss
'mono-3': '#a0a1a7',
'hue-1': '#0184bb',
'hue-2': '#4078f2',
'hue-3': '#a626a4',
'hue-4': '#50a14f',
'hue-5': '#e45649',
'hue-5-2': '#c91243',
'hue-6': '#986801',
'hue-6-2': '#c18401'
}
}
})
}

19
src/config-provider/src/ConfigProvider.js
View File

@ -31,6 +31,10 @@ export default {
type: String,
default: 'div'
},
hljs: {
type: Object,
default: undefined
},
theme: {
type: String,
default: undefined
@ -84,10 +88,6 @@ export default {
? NConfigProvider?.mergedBordered
: bordered
}),
mergedTheme: useMemo(() => {
const { theme } = props
return theme === undefined ? NConfigProvider?.mergedTheme : theme
}),
mergedNamespace: useMemo(() => {
const { namespace } = props
return namespace === undefined
@ -112,6 +112,10 @@ export default {
: unstableThemeOverrides
}),
// deprecated
mergedTheme: useMemo(() => {
const { theme } = props
return theme === undefined ? NConfigProvider?.mergedTheme : theme
}),
mergedLanguage: useMemo(() => {
const { language, lang } = props
return language === undefined
@ -135,12 +139,7 @@ export default {
? h(
this.as || this.tag,
{
class: [
'n-config-provider',
{
[`n-${this.theme}-theme`]: this.theme
}
]
class: ['n-config-provider']
},
getSlot(this)
)

4
src/styles.js
View File

@ -28,8 +28,8 @@ export { baseDark, baseLight } from './_styles/base'
// export { buttonDark, buttonLight } from './button/styles'
// export { cardDark, cardLight } from './card/styles'
// export { cascaderDark, cascaderLight } from './cascader/styles'
export { checkboxDark, checkboxLight } from './checkbox/styles'
export { codeDark, codeLight } from './code/styles'
// export { checkboxDark, checkboxLight } from './checkbox/styles'
// export { codeDark, codeLight } from './code/styles'
export { collapseDark, collapseLight } from './collapse/styles'
export { dataTableDark, dataTableLight } from './data-table/styles'
export { datePickerDark, datePickerLight } from './date-picker/styles'

2
src/styles.new.js
View File

@ -12,6 +12,7 @@ import { cardDark } from './card/styles'
import { dividerDark } from './divider/styles'
import { cascaderDark } from './cascader/styles'
import { checkboxDark } from './checkbox/styles'
import { codeDark } from './code/styles'
export const darkTheme = {
common: commonDark,
@ -27,5 +28,6 @@ export const darkTheme = {
Card: cardDark,
Cascader: cascaderDark,
Checkbox: checkboxDark,
Code: codeDark,
Divider: dividerDark
}