From 379303a7ea541d1073caed88b3e9960df24abf7b Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 21 Jul 2024 00:38:15 +0800
Subject: [PATCH] fix: lint

---
 src/highlight/demos/enUS/basic.demo.vue       | 11 ++--
 .../demos/enUS/case-sensitive.demo.vue        | 35 +++++------
 src/highlight/demos/enUS/component.demo.vue   | 35 +++++------
 src/highlight/demos/enUS/style.demo.vue       | 61 ++++++++++---------
 src/highlight/demos/zhCN/basic.demo.vue       | 11 ++--
 .../demos/zhCN/case-sensitive.demo.vue        | 35 +++++------
 src/highlight/demos/zhCN/component.demo.vue   | 36 +++++------
 src/highlight/demos/zhCN/style.demo.vue       | 61 ++++++++++---------
 src/highlight/src/Highlight.tsx               | 14 ++---
 9 files changed, 153 insertions(+), 146 deletions(-)

diff --git a/src/highlight/demos/enUS/basic.demo.vue b/src/highlight/demos/enUS/basic.demo.vue
index b41295ab7..e178ae343 100644
--- a/src/highlight/demos/enUS/basic.demo.vue
+++ b/src/highlight/demos/enUS/basic.demo.vue
@@ -2,14 +2,11 @@
 # Basic
 </markdown>
 
-<template>
-  <n-highlight :text="text" :words="words" />
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
+
 export default defineComponent({
-  setup () {
+  setup() {
     return {
       text: 'Naive UI is a Vue3 component library, it is relatively complete, tunable themes, written in TypeScript, fast.',
       words: ['Naive UI', 'Vue3', 'TypeScript', 'fast']
@@ -17,3 +14,7 @@ export default defineComponent({
   }
 })
 </script>
+
+<template>
+  <n-highlight :text="text" :words="words" />
+</template>
diff --git a/src/highlight/demos/enUS/case-sensitive.demo.vue b/src/highlight/demos/enUS/case-sensitive.demo.vue
index 2aa422fb0..e707d701f 100644
--- a/src/highlight/demos/enUS/case-sensitive.demo.vue
+++ b/src/highlight/demos/enUS/case-sensitive.demo.vue
@@ -4,26 +4,11 @@
 By default, highlighting is case-sensitive, which you can turn on using the `case-sensitive` property.
 </markdown>
 
-<template>
-  <n-highlight
-    :text="text"
-    :words="words"
-    :case-sensitive="true"
-    :highlight-style="{
-      display: 'inline-block',
-      margin: '4px',
-      padding: '4px',
-      'border-radius': '6px',
-      background: '#18a058',
-      color: 'white'
-    }"
-  />
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
+
 export default defineComponent({
-  setup () {
+  setup() {
     return {
       text: 'Naive UI is written in full TypeScript and works seamlessly with your TypeScript projects',
       words: ['Naive UI', 'typeScript']
@@ -31,3 +16,19 @@ export default defineComponent({
   }
 })
 </script>
+
+<template>
+  <n-highlight
+    :text="text"
+    :words="words"
+    :case-sensitive="true"
+    :highlight-style="{
+      'display': 'inline-block',
+      'margin': '4px',
+      'padding': '4px',
+      'border-radius': '6px',
+      'background': '#18a058',
+      'color': 'white',
+    }"
+  />
+</template>
diff --git a/src/highlight/demos/enUS/component.demo.vue b/src/highlight/demos/enUS/component.demo.vue
index 38e311465..68abf3ccd 100644
--- a/src/highlight/demos/enUS/component.demo.vue
+++ b/src/highlight/demos/enUS/component.demo.vue
@@ -4,26 +4,11 @@
 The `component` property allows you to specify tag for highlighted text.
 </markdown>
 
-<template>
-  <n-highlight
-    :text="text"
-    component="H4"
-    :words="words"
-    :highlight-style="{
-      display: 'inline-block',
-      margin: '4px',
-      padding: '4px',
-      'border-radius': '6px',
-      background: '#18a058',
-      color: 'white'
-    }"
-  />
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
+
 export default defineComponent({
-  setup () {
+  setup() {
     return {
       text: 'Naive UI is a Vue3 component library, it is relatively complete, tunable themes, written in TypeScript, fast.',
       words: ['Naive UI', 'Vue3', 'TypeScript', 'fast']
@@ -31,3 +16,19 @@ export default defineComponent({
   }
 })
 </script>
+
+<template>
+  <n-highlight
+    :text="text"
+    component="H4"
+    :words="words"
+    :highlight-style="{
+      'display': 'inline-block',
+      'margin': '4px',
+      'padding': '4px',
+      'border-radius': '6px',
+      'background': '#18a058',
+      'color': 'white',
+    }"
+  />
+</template>
diff --git a/src/highlight/demos/enUS/style.demo.vue b/src/highlight/demos/enUS/style.demo.vue
index c9d93c04b..29a551e8e 100644
--- a/src/highlight/demos/enUS/style.demo.vue
+++ b/src/highlight/demos/enUS/style.demo.vue
@@ -4,39 +4,11 @@
 Change the style to make the highlight more striking.
 </markdown>
 
-<template>
-  <n-flex vertical>
-    <n-highlight
-      :text="text"
-      :words="words"
-      :highlight-style="{
-        display: 'inline-block',
-        margin: '4px',
-        padding: '4px',
-        'border-radius': '6px',
-        background: '#18a058',
-        color: 'white'
-      }"
-    />
-    <n-highlight
-      :text="text"
-      :words="words"
-      :highlight-style="{
-        display: 'inline-block',
-        margin: '4px',
-        padding: '4px 12px',
-        'border-radius': '30px',
-        background: '#409EFF',
-        color: 'white'
-      }"
-    />
-  </n-flex>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
+
 export default defineComponent({
-  setup () {
+  setup() {
     return {
       text: 'Naive UI is written in full TypeScript and works seamlessly with your TypeScript projects',
       words: ['Naive UI', 'typeScript']
@@ -44,3 +16,32 @@ export default defineComponent({
   }
 })
 </script>
+
+<template>
+  <n-flex vertical>
+    <n-highlight
+      :text="text"
+      :words="words"
+      :highlight-style="{
+        'display': 'inline-block',
+        'margin': '4px',
+        'padding': '4px',
+        'border-radius': '6px',
+        'background': '#18a058',
+        'color': 'white',
+      }"
+    />
+    <n-highlight
+      :text="text"
+      :words="words"
+      :highlight-style="{
+        'display': 'inline-block',
+        'margin': '4px',
+        'padding': '4px 12px',
+        'border-radius': '30px',
+        'background': '#409EFF',
+        'color': 'white',
+      }"
+    />
+  </n-flex>
+</template>
diff --git a/src/highlight/demos/zhCN/basic.demo.vue b/src/highlight/demos/zhCN/basic.demo.vue
index 66a620961..90bdbaf74 100644
--- a/src/highlight/demos/zhCN/basic.demo.vue
+++ b/src/highlight/demos/zhCN/basic.demo.vue
@@ -2,14 +2,11 @@
   # 基础
 </markdown>
 
-<template>
-  <n-highlight :text="text" :words="words" />
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
+
 export default defineComponent({
-  setup () {
+  setup() {
     return {
       text: 'Naive UI 是一个 Vue3 的组件库，它比较完整，主题可调，用 TypeScript 写的，快。',
       words: ['Naive UI', 'Vue3', 'TypeScript', '快']
@@ -17,3 +14,7 @@ export default defineComponent({
   }
 })
 </script>
+
+<template>
+  <n-highlight :text="text" :words="words" />
+</template>
diff --git a/src/highlight/demos/zhCN/case-sensitive.demo.vue b/src/highlight/demos/zhCN/case-sensitive.demo.vue
index 5de9af386..6a80a9e38 100644
--- a/src/highlight/demos/zhCN/case-sensitive.demo.vue
+++ b/src/highlight/demos/zhCN/case-sensitive.demo.vue
@@ -4,26 +4,11 @@
 默认情况下，高亮是不区分大小写，你可以通过 `case-sensitive` 属性来开启区分大小写模式。
 </markdown>
 
-<template>
-  <n-highlight
-    :text="text"
-    :words="words"
-    :case-sensitive="true"
-    :highlight-style="{
-      display: 'inline-block',
-      margin: '4px',
-      padding: '4px',
-      'border-radius': '6px',
-      background: '#18a058',
-      color: 'white'
-    }"
-  />
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
+
 export default defineComponent({
-  setup () {
+  setup() {
     return {
       text: 'Naive UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接',
       words: ['Naive UI', 'typeScript']
@@ -31,3 +16,19 @@ export default defineComponent({
   }
 })
 </script>
+
+<template>
+  <n-highlight
+    :text="text"
+    :words="words"
+    :case-sensitive="true"
+    :highlight-style="{
+      'display': 'inline-block',
+      'margin': '4px',
+      'padding': '4px',
+      'border-radius': '6px',
+      'background': '#18a058',
+      'color': 'white',
+    }"
+  />
+</template>
diff --git a/src/highlight/demos/zhCN/component.demo.vue b/src/highlight/demos/zhCN/component.demo.vue
index 2bf3744c6..a817f62e7 100644
--- a/src/highlight/demos/zhCN/component.demo.vue
+++ b/src/highlight/demos/zhCN/component.demo.vue
@@ -2,29 +2,13 @@
 # 高亮标签
 
 通过 `component` 属性可以指定高亮文本的标签。
-
 </markdown>
 
-<template>
-  <n-highlight
-    :text="text"
-    component="H4"
-    :words="words"
-    :highlight-style="{
-      display: 'inline-block',
-      margin: '4px',
-      padding: '4px',
-      'border-radius': '6px',
-      background: '#18a058',
-      color: 'white'
-    }"
-  />
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
+
 export default defineComponent({
-  setup () {
+  setup() {
     return {
       text: 'Naive UI 是一个 Vue3 的组件库，它比较完整，主题可调，用 TypeScript 写的，快。',
       words: ['Naive UI', 'Vue3', 'TypeScript', '快']
@@ -32,3 +16,19 @@ export default defineComponent({
   }
 })
 </script>
+
+<template>
+  <n-highlight
+    :text="text"
+    component="H4"
+    :words="words"
+    :highlight-style="{
+      'display': 'inline-block',
+      'margin': '4px',
+      'padding': '4px',
+      'border-radius': '6px',
+      'background': '#18a058',
+      'color': 'white',
+    }"
+  />
+</template>
diff --git a/src/highlight/demos/zhCN/style.demo.vue b/src/highlight/demos/zhCN/style.demo.vue
index d1461e1a1..0b9e5ae48 100644
--- a/src/highlight/demos/zhCN/style.demo.vue
+++ b/src/highlight/demos/zhCN/style.demo.vue
@@ -4,39 +4,11 @@
   换个样式，让高亮更加醒目。
 </markdown>
 
-<template>
-  <n-flex vertical>
-    <n-highlight
-      :text="text"
-      :words="words"
-      :highlight-style="{
-        display: 'inline-block',
-        margin: '4px',
-        padding: '4px',
-        'border-radius': '6px',
-        background: '#18a058',
-        color: 'white'
-      }"
-    />
-    <n-highlight
-      :text="text"
-      :words="words"
-      :highlight-style="{
-        display: 'inline-block',
-        margin: '4px',
-        padding: '4px 12px',
-        'border-radius': '30px',
-        background: '#409EFF',
-        color: 'white'
-      }"
-    />
-  </n-flex>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
+
 export default defineComponent({
-  setup () {
+  setup() {
     return {
       text: 'Naive UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接',
       words: ['Naive UI', 'TypeScript']
@@ -44,3 +16,32 @@ export default defineComponent({
   }
 })
 </script>
+
+<template>
+  <n-flex vertical>
+    <n-highlight
+      :text="text"
+      :words="words"
+      :highlight-style="{
+        'display': 'inline-block',
+        'margin': '4px',
+        'padding': '4px',
+        'border-radius': '6px',
+        'background': '#18a058',
+        'color': 'white',
+      }"
+    />
+    <n-highlight
+      :text="text"
+      :words="words"
+      :highlight-style="{
+        'display': 'inline-block',
+        'margin': '4px',
+        'padding': '4px 12px',
+        'border-radius': '30px',
+        'background': '#409EFF',
+        'color': 'white',
+      }"
+    />
+  </n-flex>
+</template>
diff --git a/src/highlight/src/Highlight.tsx b/src/highlight/src/Highlight.tsx
index eeb1a8cc9..86987dd9d 100644
--- a/src/highlight/src/Highlight.tsx
+++ b/src/highlight/src/Highlight.tsx
@@ -1,9 +1,9 @@
 import {
-  h,
-  defineComponent,
-  type PropType,
   type CSSProperties,
-  computed
+  type PropType,
+  computed,
+  defineComponent,
+  h
 } from 'vue'
 import type { ExtractPublicPropTypes } from '../../_utils'
 
@@ -34,7 +34,7 @@ export type HighlightProps = ExtractPublicPropTypes<typeof highlightProps>
 export default defineComponent({
   name: 'Highlight',
   props: highlightProps,
-  setup (props) {
+  setup(props) {
     const escapeRegExp = (text: string): string =>
       text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 
@@ -56,7 +56,7 @@ export default defineComponent({
       let modifiedText = text
 
       const pattern = words
-        .map((word) => (autoEscape ? escapeRegExp(word) : word))
+        .map(word => (autoEscape ? escapeRegExp(word) : word))
         .join('|')
       const regex = new RegExp(`(${pattern})`, caseSensitive ? 'g' : 'gi')
 
@@ -79,7 +79,7 @@ export default defineComponent({
 
     return { highlightedText }
   },
-  render () {
+  render() {
     return h('span', {
       innerHTML: this.highlightedText
     })