mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-01 13:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(code): clsPrefix

Browse Source
This commit is contained in:
07akioni 2021-04-15 20:22:07 +08:00
parent 97952d4407
commit 0dd4ce8c9c
3 changed files with 100 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/code/src/Code.tsx
View File

@ -9,32 +9,38 @@ import {
PropType,
CSSProperties
} from 'vue'
import { useTheme, useHljs, Hljs } from '../../_mixins'
import { useTheme, useHljs, Hljs, useConfig } from '../../_mixins'
import type { ThemeProps } from '../../_mixins'
import { codeLight } from '../styles'
import type { CodeTheme } from '../styles'
import style from './styles/index.cssr'
import type { ExtractPublicPropTypes } from '../../_utils'
const codeProps = {
...(useTheme.props as ThemeProps<CodeTheme>),
language: String,
code: {
type: String,
default: ''
},
trim: {
type: Boolean,
default: true
},
hljs: Object as PropType<Hljs>,
uri: {
type: Boolean,
default: false
}
}
export type CardProps = ExtractPublicPropTypes<typeof codeProps>
export default defineComponent({
name: 'Code',
props: {
...(useTheme.props as ThemeProps<CodeTheme>),
language: String,
code: {
type: String,
default: ''
},
trim: {
type: Boolean,
default: true
},
hljs: Object as PropType<Hljs>,
uri: {
type: Boolean,
default: false
}
},
props: codeProps,
setup (props, { slots }) {
const { mergedClsPrefix } = useConfig()
const codeRef = ref<HTMLElement | null>(null)
const hljsRef = useHljs(props)
const createCodeHtml = (
@ -74,8 +80,16 @@ export default defineComponent({
watch(toRef(props, 'language'), setCode)
watch(toRef(props, 'code'), setCode)
watch(hljsRef, setCode)
const themeRef = useTheme('Code', 'Code', style, codeLight, props)
const themeRef = useTheme(
'Code',
'Code',
style,
codeLight,
props,
mergedClsPrefix
)
return {
cPrefix: mergedClsPrefix,
codeRef,
cssVars: computed(() => {
const {
@ -117,8 +131,9 @@ export default defineComponent({
},
render () {
const { default: defaultSlot } = this.$slots
const { cPrefix } = this
return (
<code class="n-code" style={this.cssVars as CSSProperties}>
<code class={`${cPrefix}-code`} style={this.cssVars as CSSProperties}>
{defaultSlot ? defaultSlot() : <pre ref="codeRef"></pre>}
</code>
)

127
src/code/src/styles/index.cssr.ts
View File

@ -1,6 +1,4 @@
import { c, cB, withPrefix } from '../../../_utils/cssr'
const codeClass = withPrefix('code')
import { c, cB } from '../../../_utils/cssr'
// vars:
// --font-size
@ -34,73 +32,78 @@ export default c([
background-color .3s var(--bezier)
`
})
]), `
${codeClass} .hljs-comment,
${codeClass} .hljs-quote {
color: var(--mono-3);
font-style: italic;
}
]), ({ props }) => {
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
const codeClass = `${props.bPrefix}code`
return `
${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-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-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-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-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-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-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-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-emphasis {
font-style: italic;
}
${codeClass} .hljs-strong {
font-weight: var(--font-weight-strong);
}
${codeClass} .hljs-strong {
font-weight: var(--font-weight-strong);
}
${codeClass} .hljs-link {
text-decoration: underline;
}`
${codeClass} .hljs-link {
text-decoration: underline;
}
`
}
])

2
src/menu/src/Submenu.ts
View File

@ -43,8 +43,6 @@ export const submenuInjectionKey: InjectionKey<SubmenuInjection> = Symbol(
'submenu'
)
console.log(submenuProps, useMenuChildProps)
export default defineComponent({
name: 'Submenu',
props: submenuProps,