fix(log): line-break & export LogInst type, closes #2298

CHANGELOG.en-US.md

@@ -29,6 +29,8 @@
 ### Fixes
 
 - Fix `n-form`'s rules and `n-form-item`'s rule about `validator` and `asyncValidator`'s `rule` type is not `FormItemRule`, closes [#2299](https://github.com/TuSimple/naive-ui/issues/2299).
+- Fix `n-log` doesn't break line when line is too long, closes [#2298](https://github.com/TuSimple/naive-ui/issues/2298).
+- Fix `n-log` doesn't export `LogInst` type.
 
 ## 2.24.7 (2022-01-28)
 

CHANGELOG.zh-CN.md

@@ -29,6 +29,8 @@
 ### Fixes
 
 - 修复 `n-form` 的 rules 和 `n-form-item` 的 rule 中的 `validator` 与 `asyncValidator` 函数的 `rule` 类型不为 `FormItemRule` 类型， 关闭 [#2299](https://github.com/TuSimple/naive-ui/issues/2299)
+- 修复 `n-log` 在内容过长时不折行，关闭 [#2298](https://github.com/TuSimple/naive-ui/issues/2298)
+- 修复 `n-log` 未导出 `LogInst` 类型
 
 ## 2.24.7 (2022-01-28)
 

package.json

@@ -29,7 +29,7 @@
     "release-changelog": "node scripts/release-changelog",
     "build:site:ts": "./scripts/pre-build-site/pre-build-site.sh && cross-env TUSIMPLE=true NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && ./scripts/post-build-site/post-build-site.sh",
     "prepare": "husky install",
-    "transpile-docs": "node scripts/md-to-vue popover",
+    "transpile-docs": "node scripts/md-to-vue log",
     "typecheck": "vue-tsc --noEmit src/**/*.vue"
   },
   "author": "07akioni",

src/log/demos/enUS/auto-bottom.demo.md → src/log/demos/enUS/auto-bottom.demo.vue

@@ -1,19 +1,24 @@
+<markdown>
 # Scroll to latest
 
 Scroll to the latest when log is gradually increasing.
+</markdown>
 
-```html
-<n-space vertical>
-  <n-button @click="handleClick">Add Data</n-button>
-  <n-log ref="logInst" :log="log" language="naive-log" trim />
-</n-space>
-```
+<template>
+  <n-space vertical>
+    <n-button @click="handleClick">
+      Add Data
+    </n-button>
+    <n-log ref="logInst" :log="log" language="naive-log" trim />
+  </n-space>
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref, watchEffect, onMounted, nextTick } from 'vue'
+import { LogInst } from 'naive-ui'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 40; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -23,13 +28,13 @@ function log () {
 export default defineComponent({
   setup () {
     const logRef = ref(log())
-    const logInstRef = ref(null)
+    const logInstRef = ref<LogInst | null>(null)
     const startRef = ref(false)
-    const timerRef = ref(null)
+    const timerRef = ref<number | null>(null)
     const handleClick = () => {
       startRef.value = !startRef.value
       if (startRef.value) {
-        timerRef.value = setInterval(() => {
+        timerRef.value = window.setInterval(() => {
           logRef.value = logRef.value + log()
         }, 1000)
       } else if (timerRef.value) {
@@ -41,7 +46,7 @@ export default defineComponent({
       watchEffect(() => {
         if (logRef.value) {
           nextTick(() => {
-            logInstRef.value.scrollTo({ position: 'bottom', slient: true })
+            logInstRef.value?.scrollTo({ position: 'bottom', slient: true })
           })
         }
       })
@@ -54,4 +59,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>

src/log/demos/enUS/event.demo.md → src/log/demos/enUS/event.demo.vue

@@ -1,24 +1,26 @@
+<markdown>
 # Event
 
 Log has `require-more`, `reach-top` and `reach-bottom` event. Note that even if logs are scrolled to top or bottom, when you wheel to the same direction, `require-more` will still be triggered while `reach-xxx` will not. If you don't want to trigger handler when logs are at top or bottom. Use `reach-top` or `reach-bottom` instead.
+</markdown>
 
-```html
-<n-log
-  :log="log"
-  @require-more="handleRequireMore"
-  @reach-top="handleReachTop"
-  @reach-bottom="handleReachBottom"
-  :loading="loading"
-  trim
-/>
-```
+<template>
+  <n-log
+    :log="log"
+    :loading="loading"
+    trim
+    @require-more="handleRequireMore"
+    @reach-top="handleReachTop"
+    @reach-bottom="handleReachBottom"
+  />
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { useMessage } from 'naive-ui'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 10; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -33,9 +35,6 @@ export default defineComponent({
     return {
       loading: false,
       log: log(),
-      clear () {
-        logRef.value = ''
-      },
       handleRequireMore (from) {
         message.info('Require More from ' + from)
         if (loadingRef.value) return
@@ -58,4 +57,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>

src/log/demos/enUS/highlight.demo.md → src/log/demos/enUS/highlight.demo.vue

@@ -1,23 +1,25 @@
+<markdown>
 # Highlight
 
 Before you use highlight, see Note section of the page to make sure you won't miss messages that are important to make it work.
+</markdown>
 
-```html
-<n-log
-  :log="log"
-  @require-top="handlerequireTop"
-  @require-bottom="handlerequireBottom"
-  :loading="loading"
-  language="naive-log"
-  trim
-/>
-```
+<template>
+  <n-log
+    :log="log"
+    :loading="loading"
+    language="naive-log"
+    trim
+    @require-top="handlerequireTop"
+    @require-bottom="handlerequireBottom"
+  />
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 40; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -32,9 +34,6 @@ export default defineComponent({
     return {
       loading: loadingRef,
       log: logRef,
-      clear () {
-        logRef.value = ''
-      },
       handlerequireTop () {
         if (loadingRef.value) return
         loadingRef.value = true
@@ -54,4 +53,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>

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

@@ -5,7 +5,7 @@
 If you have some logs to show, use log.
 
 <n-alert title="Note" type="warning" style="margin-bottom: 16px;">
-  Due to package size, Naive UI doesn't include highlight.js. If you want highlight logs, make sure you have set highlightjs before using it.
+  Due to package size.vue, Naive UI doesn't include highlight.vue.js. If you want highlight logs, make sure you have set highlightjs before using it.
 </n-alert>
 
 In highlight demo, we defined a language called `naive-log` which will highlight all the numbers of line. The following code shows how we defined it. If you want to know more about highlight.js, see <n-a href="https://highlightjs.org/" target="_blank">highlight.js</n-a> and <n-a href="https://highlightjs.readthedocs.io/en/latest/index.html" target="_blank">highlight.js developer documentation</n-a>
@@ -44,11 +44,11 @@ In highlight demo, we defined a language called `naive-log` which will highlight
 
 ```demo
 size
-event
-scroll
-highlight
-loading
-auto-bottom
+event.vue
+scroll.vue
+highlight.vue
+loading.vue
+auto-bottom.vue
 ```
 
 ## API

src/log/demos/enUS/loading.demo.md → src/log/demos/enUS/loading.demo.vue

@@ -1,14 +1,16 @@
+<markdown>
 # Loading
+</markdown>
 
-```html
-<n-switch v-model:value="loading" /> <n-log :loading="loading" :log="log" />
-```
+<template>
+  <n-switch v-model:value="loading" /> <n-log :loading="loading" :log="log" />
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 40; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -23,4 +25,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>