refactor(code): word-wrap prop

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

@@ -44,11 +44,11 @@ softwrap.vue
 
 ### Code Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| code | `string` | `''` | Incoming code string. |
-| hljs | `Object` | `undefined` | If you want to set hljs locally, pass it using this prop. |
-| language | `string` | `undefined` | Code language in highlightjs. |
-| trim | `boolean` | `true` | Whether to display trimmed code. |
-| inline | `boolean` | `false` | Whether the code is displayed as inline. |
-| word-wrap | `boolean` | `false` | Whether to display word-wrapped code. |
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| code | `string` | `''` | Incoming code string. |  |
+| hljs | `Object` | `undefined` | If you want to set hljs locally, pass it using this prop. |  |
+| language | `string` | `undefined` | Code language in highlightjs. |  |
+| trim | `boolean` | `true` | Whether to display trimmed code. |  |
+| inline | `boolean` | `false` | Whether the code is displayed as inline. |  |
+| word-wrap | `boolean` | `false` | Whether to display word-wrapped code. | NEXT_VERSION |

src/code/demos/enUS/softwrap.demo.vue

@@ -1,12 +1,11 @@
 <markdown>
-# soft wrap
+# Soft wrap
+
+Code can wrap content if it overflows.
 </markdown>
 
 <template>
-  auto wrap when code is too long
-  <div>
-    <n-code :code="code" language="js" />
-  </div>
+  <n-code :code="code" language="js" />
 </template>
 
 <script lang="ts">

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

@@ -45,11 +45,11 @@ loop-debug.vue
 
 ### Code Props
 
-| 名称 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| code | `string` | `''` | 传入的 code 字符串 |
-| hljs | `Object` | `undefined` | 如果你想局部设定 hljs，可以通过这个属性传给组件 |
-| language | `string` | `undefined` | 代码在 highlightjs 中的语言 |
-| trim | `boolean` | `true` | 是否显示 trim 后的代码 |
-| inline | `boolean` | `false` | 使用行内样式 |
-| word-wrap | `boolean` | `false` | 代码过长时是否自动换行 |
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| code | `string` | `''` | 传入的 code 字符串 |  |
+| hljs | `Object` | `undefined` | 如果你想局部设定 hljs，可以通过这个属性传给组件 |  |
+| language | `string` | `undefined` | 代码在 highlightjs 中的语言 |  |
+| trim | `boolean` | `true` | 是否显示 trim 后的代码 |  |
+| inline | `boolean` | `false` | 使用行内样式 |  |
+| word-wrap | `boolean` | `false` | 代码过长时是否自动换行 | NEXT_VERSION |

src/code/demos/zhCN/softwrap.demo.vue

@@ -1,12 +1,11 @@
 <markdown>
 # 软换行
+
+code 可以在溢出时自动换行。
 </markdown>
 
 <template>
-  <div>
-    code 可以在溢出时自动换行。
-    <n-code :code="code" language="js" word-wrap />
-  </div>
+  <n-code :code="code" language="js" word-wrap />
 </template>
 
 <script lang="ts">

src/code/src/Code.tsx

@@ -125,9 +125,8 @@ export default defineComponent({
             'hue-6-2': $9
           }
         } = themeRef.value
-        const { internalFontSize, wordWrap } = props
+        const { internalFontSize } = props
         return {
-          '--n-word-wrap': wordWrap ? 'pre-wrap' : 'pre',
           '--n-font-size': internalFontSize
             ? `${internalFontSize}px`
             : fontSize,
@@ -149,10 +148,13 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedClsPrefix } = this
+    const { mergedClsPrefix, wordWrap } = this
     return (
       <code
-        class={`${mergedClsPrefix}-code`}
+        class={[
+          `${mergedClsPrefix}-code`,
+          wordWrap && `${mergedClsPrefix}-code--word-wrap`
+        ]}
         style={this.cssVars as CSSProperties}
         ref="codeRef"
       >

src/code/src/styles/index.cssr.ts

@@ -1,7 +1,6 @@
-import { c, cB } from '../../../_utils/cssr'
+import { c, cB, cM } from '../../../_utils/cssr'
 
 // vars:
-// --n-word-wrap
 // --n-font-size
 // --n-font-family
 // --n-font-weight-strong
@@ -21,10 +20,12 @@ export default c([
     font-size: var(--n-font-size);
     font-family: var(--n-font-family);
   `, [
+    cM('word-wrap', [
+      c('pre', 'white-space: pre-wrap;')
+    ]),
     c('pre', `
       margin: 0;
       font-family: inherit;
-      white-space: var(--n-word-wrap);
     `),
     c('[class^=hljs]', `
       color: var(--n-text-color);

src/code/tests/Code.spec.ts

@@ -51,17 +51,6 @@ describe('n-code', () => {
       '    console.log( a )  '
     )
   })
-  it('should work with `wordWrap` prop', async () => {
-    const wrapper = mount(NCode, {
-      props: {
-        code: 'console.log(a)',
-        wordWrap: false
-      }
-    })
-    expect(wrapper.attributes('style')).toContain('--n-word-wrap: pre;')
-    await wrapper.setProps({ wordWrap: true })
-    expect(wrapper.attributes('style')).toContain('--n-word-wrap: pre-wrap;')
-  })
   it('should work with `default` slot', () => {
     const wrapper = mount(NCode, {
       slots: {