feat(typography): clsPrefix

src/drawer/demos/enUS/index.demo-entry.md

@@ -32,6 +32,7 @@ target
 | Name | Parameters | Default | Description |
 | --- | --- | --- | --- |
 | body-style | `string \| Object` | `undefined` |  |
+| body-content-style | `string \| Object` | `undefined` | Style of body's scrollable content node. |
 | footer-style | `string \| Object` | `undefined` |  |
 | header-style | `string \| Object` | `undefined` |  |
 | native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on body part. |

src/drawer/demos/zhCN/index.demo-entry.md

@@ -37,6 +37,7 @@ dark-4-debug
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | body-style | `string \| Object` | `undefined` | 主体的样式 |
+| body-content-style | `string \| Object` | `undefined` | 主体可滚动内容节点的样式 |
 | footer-style | `string \| Object` | `undefined` |  |
 | header-style | `string \| Object` | `undefined` |  |
 | native-scrollbar | `boolean` | `true` | 主体部分是否使用原生滚动条 |

src/typography/index.ts

@@ -1,9 +1,21 @@
 export { NH1, NH2, NH3, NH4, NH5, NH6 } from './src/headers'
+export type { HeaderProps as H1Props } from './src/create-header'
+export type { HeaderProps as H2Props } from './src/create-header'
+export type { HeaderProps as H3Props } from './src/create-header'
+export type { HeaderProps as H4Props } from './src/create-header'
+export type { HeaderProps as H5Props } from './src/create-header'
+export type { HeaderProps as H6Props } from './src/create-header'
 export { default as NA } from './src/a'
+export type { AProps } from './src/a'
 export { default as NP } from './src/p'
+export type { PProps } from './src/p'
 export { default as NBlockquote } from './src/blockquote'
+export type { BlockquoteProps } from './src/blockquote'
 export { default as NHr } from './src/hr'
 export { default as NUl } from './src/ul'
+export type { UlProps } from './src/ul'
 export { default as NOl } from './src/ol'
+export type { OlProps } from './src/ol'
 export { default as NLi } from './src/li'
 export { default as NText } from './src/text'
+export type { TextProps } from './src/text'

src/typography/src/a.tsx

@@ -1,23 +1,37 @@
-import { h, defineComponent, computed, renderSlot, CSSProperties } from 'vue'
-import { RouterLink } from 'vue-router'
-import { useTheme } from '../../_mixins'
+import { h, defineComponent, computed, CSSProperties, PropType } from 'vue'
+import { RouteLocationRaw, RouterLink } from 'vue-router'
+import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { typographyLight } from '../styles'
 import type { TypographyTheme } from '../styles'
 import style from './styles/a.cssr'
+import type { ExtractPublicPropTypes } from '../../_utils'
+
+const aProps = {
+  ...(useTheme.props as ThemeProps<TypographyTheme>),
+  to: {
+    type: [String, Object] as PropType<RouteLocationRaw>,
+    default: null
+  }
+} as const
+
+export type AProps = ExtractPublicPropTypes<typeof aProps>
 
 export default defineComponent({
   name: 'A',
-  props: {
-    ...(useTheme.props as ThemeProps<TypographyTheme>),
-    to: {
-      type: [String, Object],
-      default: null
-    }
-  },
+  props: aProps,
   setup (props) {
-    const themeRef = useTheme('Typography', 'A', style, typographyLight, props)
+    const { mergedClsPrefix } = useConfig(props)
+    const themeRef = useTheme(
+      'Typography',
+      'A',
+      style,
+      typographyLight,
+      props,
+      mergedClsPrefix
+    )
     return {
+      mergedClsPrefix,
       cssVars: computed(() => {
         const {
           common: { cubicBezierEaseInOut },
@@ -32,20 +46,21 @@ export default defineComponent({
   },
   render () {
     if (this.to) {
-      return h(
-        RouterLink as any,
-        {
-          class: 'n-a',
-          to: this.to,
-          style: this.cssVars
-        },
-        {
-          default: () => renderSlot(this.$slots, 'default')
-        }
+      return (
+        <RouterLink
+          class={`${this.mergedClsPrefix}-a`}
+          to={this.to}
+          style={this.cssVars as CSSProperties}
+        >
+          {this.$slots}
+        </RouterLink>
       )
     }
     return (
-      <a class="n-a" style={this.cssVars as CSSProperties}>
+      <a
+        class={`${this.mergedClsPrefix}-a`}
+        style={this.cssVars as CSSProperties}
+      >
         {this.$slots}
       </a>
     )

src/typography/src/blockquote.tsx

@@ -1,28 +1,36 @@
 import { h, defineComponent, computed, CSSProperties } from 'vue'
-import { useTheme } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import style from './styles/blockquote.cssr'
 import { typographyLight } from '../styles'
 import type { TypographyTheme } from '../styles'
+import type { ExtractPublicPropTypes } from '../../_utils'
+
+const blockquoteProps = {
+  ...(useTheme.props as ThemeProps<TypographyTheme>),
+  alignText: {
+    type: Boolean,
+    default: false
+  }
+} as const
+
+export type BlockquoteProps = ExtractPublicPropTypes<typeof blockquoteProps>
 
 export default defineComponent({
   name: 'Blockquote',
-  props: {
-    ...(useTheme.props as ThemeProps<TypographyTheme>),
-    alignText: {
-      type: Boolean,
-      default: false
-    }
-  },
+  props: blockquoteProps,
   setup (props) {
+    const { mergedClsPrefix } = useConfig(props)
     const themeRef = useTheme(
       'Typography',
       'Blockquote',
       style,
       typographyLight,
-      props
+      props,
+      mergedClsPrefix
     )
     return {
+      mergedClsPrefix,
       cssVars: computed(() => {
         const {
           common: { cubicBezierEaseInOut },
@@ -44,13 +52,12 @@ export default defineComponent({
     }
   },
   render () {
+    const { mergedClsPrefix } = this
     return (
       <blockquote
         class={[
-          'n-blockquote',
-          {
-            'n-blockquote--align-text': this.alignText
-          }
+          `${mergedClsPrefix}-blockquote`,
+          this.alignText && `${mergedClsPrefix}-blockquote--align-text`
         ]}
         style={this.cssVars as CSSProperties}
       >

src/typography/src/create-header.ts

@@ -1,41 +1,45 @@
 import { h, defineComponent, computed, PropType } from 'vue'
-import { useTheme } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import { getSlot, createKey } from '../../_utils'
+import { createKey, ExtractPublicPropTypes } from '../../_utils'
 import { typographyLight } from '../styles'
 import type { TypographyTheme } from '../styles'
 import style from './styles/header.cssr'
 
+const headerProps = {
+  ...(useTheme.props as ThemeProps<TypographyTheme>),
+  type: {
+    type: String as PropType<
+    'info' | 'success' | 'warning' | 'error' | 'default'
+    >,
+    default: 'default'
+  },
+  prefix: String,
+  alignText: {
+    type: Boolean,
+    default: false
+  }
+} as const
+
+export type HeaderProps = ExtractPublicPropTypes<typeof headerProps>
+
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export default (level: '1' | '2' | '3' | '4' | '5' | '6') =>
   defineComponent({
     name: `H${level}`,
-    props: {
-      ...(useTheme.props as ThemeProps<TypographyTheme>),
-      type: {
-        type: String as PropType<
-        'info' | 'success' | 'warning' | 'error' | 'default'
-        >,
-        default: 'default'
-      },
-      prefix: {
-        type: String,
-        default: undefined
-      },
-      alignText: {
-        type: Boolean,
-        default: false
-      }
-    },
+    props: headerProps,
     setup (props) {
+      const { mergedClsPrefix } = useConfig(props)
       const themeRef = useTheme(
         'Typography',
         'H',
         style,
         typographyLight,
-        props
+        props,
+        mergedClsPrefix
       )
       return {
+        mergedClsPrefix,
         cssVars: computed(() => {
           const { type } = props
           const {
@@ -64,21 +68,21 @@ export default (level: '1' | '2' | '3' | '4' | '5' | '6') =>
       }
     },
     render () {
-      const { prefix, alignText, cssVars } = this
+      const { prefix, alignText, mergedClsPrefix, cssVars, $slots } = this
       return h(
         `h${level}`,
         {
           class: [
-            'n-h',
-            `n-h${level}`,
+            `${mergedClsPrefix}-h`,
+            `${mergedClsPrefix}-h${level}`,
             {
-              'n-h--prefix-bar': prefix,
-              'n-h--align-text': alignText
+              [`${mergedClsPrefix}-h--prefix-bar`]: prefix,
+              [`${mergedClsPrefix}-h--align-text`]: alignText
             }
           ],
           style: cssVars
         },
-        getSlot(this)
+        $slots
       )
     }
   })

src/typography/src/hr.tsx

@@ -1,5 +1,5 @@
 import { h, defineComponent, computed, CSSProperties } from 'vue'
-import { useTheme } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { typographyLight } from '../styles'
 import type { TypographyTheme } from '../styles'
@@ -11,8 +11,17 @@ export default defineComponent({
     ...(useTheme.props as ThemeProps<TypographyTheme>)
   },
   setup (props) {
-    const themeRef = useTheme('Typography', 'Hr', style, typographyLight, props)
+    const { mergedClsPrefix } = useConfig(props)
+    const themeRef = useTheme(
+      'Typography',
+      'Hr',
+      style,
+      typographyLight,
+      props,
+      mergedClsPrefix
+    )
     return {
+      mergedClsPrefix,
       cssVars: computed(() => {
         return {
           '--color': themeRef.value.self.hrColor
@@ -21,6 +30,11 @@ export default defineComponent({
     }
   },
   render () {
-    return <hr class="n-hr" style={this.cssVars as CSSProperties} />
+    return (
+      <hr
+        class={`${this.mergedClsPrefix}-hr`}
+        style={this.cssVars as CSSProperties}
+      />
+    )
   }
 })

src/typography/src/li.tsx

@@ -2,24 +2,7 @@ import { defineComponent, h } from 'vue'
 
 export default defineComponent({
   name: 'Li',
-  props: {
-    alignText: {
-      type: Boolean,
-      default: false
-    }
-  },
   render () {
-    return (
-      <li
-        class={[
-          'n-li',
-          {
-            'n-li--align-text': this.alignText
-          }
-        ]}
-      >
-        {this.$slots}
-      </li>
-    )
+    return <li>{this.$slots}</li>
   }
 })

src/typography/src/ol.tsx

@@ -1,28 +1,36 @@
 import { h, defineComponent, computed, CSSProperties } from 'vue'
-import { useTheme } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { typographyLight } from '../styles'
 import type { TypographyTheme } from '../styles'
+import type { ExtractPublicPropTypes } from '../../_utils'
 import style from './styles/list.cssr'
 
+const olProps = {
+  ...(useTheme.props as ThemeProps<TypographyTheme>),
+  alignText: {
+    type: Boolean,
+    default: false
+  }
+}
+
+export type OlProps = ExtractPublicPropTypes<typeof olProps>
+
 export default defineComponent({
   name: 'Ol',
-  props: {
-    ...(useTheme.props as ThemeProps<TypographyTheme>),
-    alignText: {
-      type: Boolean,
-      default: false
-    }
-  },
+  props: olProps,
   setup (props) {
+    const { mergedClsPrefix } = useConfig(props)
     const themeRef = useTheme(
       'Typography',
       'Ol&Ul',
       style,
       typographyLight,
-      props
+      props,
+      mergedClsPrefix
     )
     return {
+      mergedClsPrefix,
       cssVars: computed(() => {
         const {
           common: { cubicBezierEaseInOut },
@@ -48,13 +56,12 @@ export default defineComponent({
     }
   },
   render () {
+    const { mergedClsPrefix } = this
     return (
       <ol
         class={[
-          'n-ol',
-          {
-            'n-ol--align-text': this.alignText
-          }
+          `${mergedClsPrefix}-ol`,
+          this.alignText && `${mergedClsPrefix}-ol--align-text`
         ]}
         style={this.cssVars as CSSProperties}
       >

src/typography/src/p.tsx

@@ -1,22 +1,33 @@
 import { h, defineComponent, computed, PropType, CSSProperties } from 'vue'
-import { useTheme } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { typographyLight } from '../styles'
 import type { TypographyTheme } from '../styles'
 import style from './styles/p.cssr'
+import type { ExtractPublicPropTypes } from '../../_utils'
+
+const pProps = {
+  ...(useTheme.props as ThemeProps<TypographyTheme>),
+  depth: String as PropType<1 | 2 | 3 | '1' | '2' | '3' | undefined>
+}
+
+export type PProps = ExtractPublicPropTypes<typeof pProps>
 
 export default defineComponent({
   name: 'P',
-  props: {
-    ...(useTheme.props as ThemeProps<TypographyTheme>),
-    depth: {
-      type: String as PropType<1 | 2 | 3 | '1' | '2' | '3' | undefined>,
-      default: undefined
-    }
-  },
+  props: pProps,
   setup (props) {
-    const themeRef = useTheme('Typography', 'P', style, typographyLight, props)
+    const { mergedClsPrefix } = useConfig(props)
+    const themeRef = useTheme(
+      'Typography',
+      'P',
+      style,
+      typographyLight,
+      props,
+      mergedClsPrefix
+    )
     return {
+      mergedClsPrefix,
       cssVars: computed(() => {
         const { depth } = props
         const typeSafeDepth = depth || '1'
@@ -42,7 +53,10 @@ export default defineComponent({
   },
   render () {
     return (
-      <p class="n-p" style={this.cssVars as CSSProperties}>
+      <p
+        class={`${this.mergedClsPrefix}-p`}
+        style={this.cssVars as CSSProperties}
+      >
         {this.$slots}
       </p>
     )

src/typography/src/styles/list.cssr.ts

@@ -1,5 +1,13 @@
 import { c, cB, cM } from '../../../_utils/cssr'
 
+const liStyle = c('li', {
+  transition: 'color .3s var(--bezier)',
+  lineHeight: 'var(--line-height)',
+  margin: 'var(--li-margin)',
+  marginBottom: 0,
+  color: 'var(--text-color)'
+})
+
 // vars:
 // --bezier
 // --font-size
@@ -15,7 +23,8 @@ export default c([
   }, [
     cM('align-text', {
       paddingLeft: 0
-    })
+    }),
+    liStyle
   ]),
   cB('ul', {
     fontSize: 'var(--font-size)',
@@ -23,13 +32,7 @@ export default c([
   }, [
     cM('align-text', {
       paddingLeft: 0
-    })
-  ]),
-  cB('li', {
-    transition: 'color .3s var(--bezier)',
-    lineHeight: 'var(--line-height)',
-    margin: 'var(--li-margin)',
-    marginBottom: 0,
-    color: 'var(--text-color)'
-  })
+    }),
+    liStyle
+  ])
 ])

src/typography/src/text.tsx

@@ -7,72 +7,78 @@ import {
   CSSProperties
 } from 'vue'
 import { useCompitable } from 'vooks'
-import { useTheme } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { warn, createKey } from '../../_utils'
+import type { ExtractPublicPropTypes } from '../../_utils'
 import { typographyLight } from '../styles'
 import type { TypographyTheme } from '../styles'
 import style from './styles/text.cssr'
 
+const textProps = {
+  ...(useTheme.props as ThemeProps<TypographyTheme>),
+  code: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: 'default'
+  },
+  delete: {
+    type: Boolean,
+    default: false
+  },
+  strong: {
+    type: Boolean,
+    default: false
+  },
+  italic: {
+    type: Boolean,
+    default: false
+  },
+  underline: {
+    type: Boolean,
+    default: false
+  },
+  depth: {
+    type: [String, Number] as PropType<1 | 2 | 3 | '1' | '2' | '3' | undefined>,
+    default: undefined
+  },
+  tag: {
+    type: String,
+    default: undefined
+  },
+  // deprecated
+  as: {
+    type: String,
+    validator: () => {
+      if (__DEV__) {
+        warn('text', '`as` is deprecated, please use `tag` instead.')
+      }
+      return true
+    },
+    default: undefined
+  }
+} as const
+
+export type TextProps = ExtractPublicPropTypes<typeof textProps>
+
 export default defineComponent({
   name: 'Text',
-  props: {
-    ...(useTheme.props as ThemeProps<TypographyTheme>),
-    code: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      default: 'default'
-    },
-    delete: {
-      type: Boolean,
-      default: false
-    },
-    strong: {
-      type: Boolean,
-      default: false
-    },
-    italic: {
-      type: Boolean,
-      default: false
-    },
-    underline: {
-      type: Boolean,
-      default: false
-    },
-    depth: {
-      type: [String, Number] as PropType<
-      1 | 2 | 3 | '1' | '2' | '3' | undefined
-      >,
-      default: undefined
-    },
-    tag: {
-      type: String,
-      default: undefined
-    },
-    // deprecated
-    as: {
-      type: String,
-      validator: () => {
-        if (__DEV__) {
-          warn('text', '`as` is deprecated, please use `tag` instead.')
-        }
-        return true
-      },
-      default: undefined
-    }
-  },
+  props: textProps,
   setup (props) {
+    const { mergedClsPrefix } = useConfig(props)
     const themeRef = useTheme(
       'Typography',
       'Text',
       style,
       typographyLight,
-      props
+      props,
+      mergedClsPrefix
     )
     return {
+      mergedClsPrefix,
       compitableTag: useCompitable(props, ['as', 'tag']),
       cssVars: computed(() => {
         const { depth, type } = props
@@ -105,14 +111,15 @@ export default defineComponent({
     }
   },
   render () {
+    const { mergedClsPrefix } = this
     const textClass = [
-      'n-text',
+      `${mergedClsPrefix}-text`,
       {
-        'n-text--code': this.code,
-        'n-text--delete': this.delete,
-        'n-text--strong': this.strong,
-        'n-text--italic': this.italic,
-        'n-text--underline': this.underline
+        [`${mergedClsPrefix}-text--code`]: this.code,
+        [`${mergedClsPrefix}-text--delete`]: this.delete,
+        [`${mergedClsPrefix}-text--strong`]: this.strong,
+        [`${mergedClsPrefix}-text--italic`]: this.italic,
+        [`${mergedClsPrefix}-text--underline`]: this.underline
       }
     ]
     const defaultSlot = renderSlot(this.$slots, 'default')

src/typography/src/ul.tsx

@@ -1,28 +1,36 @@
 import { h, defineComponent, computed, CSSProperties } from 'vue'
-import { useTheme } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { typographyLight } from '../styles'
 import type { TypographyTheme } from '../styles'
 import style from './styles/list.cssr'
+import type { ExtractPublicPropTypes } from '../../_utils'
+
+const ulProps = {
+  ...(useTheme.props as ThemeProps<TypographyTheme>),
+  alignText: {
+    type: Boolean,
+    default: false
+  }
+} as const
+
+export type UlProps = ExtractPublicPropTypes<typeof ulProps>
 
 export default defineComponent({
   name: 'Ul',
-  props: {
-    ...(useTheme.props as ThemeProps<TypographyTheme>),
-    alignText: {
-      type: Boolean,
-      default: false
-    }
-  },
+  props: ulProps,
   setup (props) {
+    const { mergedClsPrefix } = useConfig(props)
     const themeRef = useTheme(
       'Typography',
       'Ol&Ul',
       style,
       typographyLight,
-      props
+      props,
+      mergedClsPrefix
     )
     return {
+      mergedClsPrefix,
       cssVars: computed(() => {
         const {
           common: { cubicBezierEaseInOut },
@@ -48,13 +56,12 @@ export default defineComponent({
     }
   },
   render () {
+    const { mergedClsPrefix } = this
     return (
       <ul
         class={[
-          'n-ul',
-          {
-            'n-ul--align-text': this.alignText
-          }
+          `${mergedClsPrefix}-ul`,
+          this.alignText && `${mergedClsPrefix}-ul--align-text`
         ]}
         style={this.cssVars as CSSProperties}
       >