docs(auto-tip): [directives] updateauto-tip and highlight-query docs and demos (#2406)

* fix(auto-tip): add auto-tip demo and description

* docs(highlightQuery): update highlightQuery's docs

* fix(highlightQuery): fix e2e test

Author: shenjunjian

examples/sites/demos/pc/app/directives/auto-tip/always-show-composition-api.vue

@@ -8,21 +8,33 @@
         is_disabled: item.disabled,
         list: true
       }"
-      v-auto-tip="item.disabled ? { always: true, content: item.tip } : false"
+      v-auto-tip="item.disabled ? { always: true, content: item.disabledReason, effect: 'dark' } : false"
     >
       {{ item.text }}
     </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="jsx">
 import { AutoTip } from '@opentiny/vue-directive'
 
 const VAutoTip = AutoTip
 
 const options = [
   { text: '去游泳馆游泳', disabled: false },
-  { text: '去羽毛球馆打羽毛球', disabled: true, tip: '自定义提示内容' }
+  { text: '去羽毛球馆打羽毛球', disabled: true, disabledReason: '羽毛球拍坏了' },
+  {
+    text: '去爬山/海边沙滩',
+    disabled: true,
+    disabledReason: (
+      <span>
+        还没有选择项目，现在去{' '}
+        <a href="javascript:void(0)" style="color:#f80">
+          选择
+        </a>
+      </span>
+    )
+  }
 ]
 </script>
 
@@ -41,5 +53,6 @@ const options = [
 }
 .is_disabled {
   cursor: not-allowed;
+  text-decoration: line-through;
 }
 </style>

examples/sites/demos/pc/app/directives/auto-tip/always-show.spec.js

@@ -5,8 +5,8 @@ test('常显提示', async ({ page }) => {
   await page.goto('directives-auto-tip#auto-tip-always-show')
 
   await page.getByText('去游泳馆游泳').hover()
-  await expect(page.getByRole('tooltip', { name: '自定义提示内容' })).not.toBeVisible()
+  await expect(page.getByRole('tooltip', { name: '羽毛球拍坏了' })).not.toBeVisible()
 
   await page.getByText('去羽毛球馆打羽毛球').hover()
-  await expect(page.getByRole('tooltip', { name: '自定义提示内容' })).toBeVisible()
+  await expect(page.getByRole('tooltip', { name: '羽毛球拍坏了' })).toBeVisible()
 })

examples/sites/demos/pc/app/directives/auto-tip/always-show.vue

@@ -8,14 +8,14 @@
         is_disabled: item.disabled,
         list: true
       }"
-      v-auto-tip="item.disabled ? { always: true, content: item.tip } : false"
+      v-auto-tip="item.disabled ? { always: true, content: item.disabledReason, effect: 'dark' } : false"
     >
       {{ item.text }}
     </div>
   </div>
 </template>
 
-<script>
+<script lang="jsx">
 import { AutoTip } from '@opentiny/vue-directive'
 
 export default {
@@ -24,7 +24,19 @@ export default {
     return {
       options: [
         { text: '去游泳馆游泳', disabled: false },
-        { text: '去羽毛球馆打羽毛球', disabled: true, tip: '自定义提示内容' }
+        { text: '去羽毛球馆打羽毛球', disabled: true, disabledReason: '羽毛球拍坏了' },
+        {
+          text: '去爬山/海边沙滩',
+          disabled: true,
+          disabledReason: (
+            <span>
+              还没有选择项目，现在去
+              <a href="javascript:void(0)" style="color:#f80">
+                选择
+              </a>
+            </span>
+          )
+        }
       ]
     }
   }
@@ -46,5 +58,6 @@ export default {
 }
 .is_disabled {
   cursor: not-allowed;
+  text-decoration: line-through;
 }
 </style>

examples/sites/demos/pc/app/directives/highlight-query/avoid-composition-api.vue

@@ -2,29 +2,29 @@
   <div>
     <div>
       关键字：<tiny-input v-model="query" placeholder="输入关键字，观察下面的高亮"></tiny-input> &nbsp;
-      <tiny-button @click="changeList">修改内容</tiny-button>
+      <tiny-button @click="changeList">修改诗的内容</tiny-button>
     </div>
 
-    <div>避免场景1： 直接包含文字节点</div>
+    <div class="title">避免场景1： 直接包含文字节点，无法动态更新</div>
     <div v-highlight-query="query">
       {{ list.join(',') }}
     </div>
     <br />
-    <div>避免场景2：文字节点与其它组件混合</div>
+    <div class="title">避免场景2：文字节点与其它组件混合，无法动态更新</div>
     <div v-highlight-query="query">
       {{ list.join(',') }}
-      <tiny-input></tiny-input>
+      <tiny-button>混入的按钮</tiny-button>
     </div>
     <br />
-    <div>正确的场景1</div>
+    <div class="title">正确的场景1</div>
     <div v-highlight-query="query">
       <span> {{ list.join(',') }}</span>
     </div>
     <br />
-    <div>正确的场景2</div>
+    <div class="title">正确的场景2</div>
     <div v-highlight-query="query">
       <span> {{ list.join(',') }}</span>
-      <tiny-input></tiny-input>
+      <tiny-button>混入的按钮</tiny-button>
     </div>
   </div>
 </template>
@@ -51,4 +51,13 @@ const changeList = () => (list.value = ['江上一笼统', '井上黑窟窿', '
 div {
   line-height: 2;
 }
+
+.title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.tiny-button {
+  margin-left: 20px;
+}
 </style>

examples/sites/demos/pc/app/directives/highlight-query/avoid.spec.js

@@ -4,9 +4,8 @@ test('避免用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('directives-highlight-query#avoid')
 
-  const input = page.locator('.pc-demo-container .tiny-input-inner').first()
   const hlNode = page.locator('.pc-demo-container .tiny-hl-query-node')
-  const button = page.locator('.pc-demo-container .tiny-button')
+  const button = page.locator('.pc-demo-container .tiny-button').first()
 
   await expect(hlNode).toHaveCount(12)
 

examples/sites/demos/pc/app/directives/highlight-query/avoid.vue

@@ -2,29 +2,29 @@
   <div>
     <div>
       关键字：<tiny-input v-model="query" placeholder="输入关键字，观察下面的高亮"></tiny-input> &nbsp;
-      <tiny-button @click="changeList">修改内容</tiny-button>
+      <tiny-button @click="changeList">修改诗的内容</tiny-button>
     </div>
 
-    <div>避免场景1： 直接包含文字节点</div>
+    <div class="title">避免场景1： 直接包含文字节点，无法动态更新</div>
     <div v-highlight-query="query">
       {{ list.join(',') }}
     </div>
     <br />
-    <div>避免场景2：文字节点与其它组件混合</div>
+    <div class="title">避免场景2：文字节点与其它组件混合，无法动态更新</div>
     <div v-highlight-query="query">
       {{ list.join(',') }}
-      <tiny-input></tiny-input>
+      <tiny-button>混入的按钮</tiny-button>
     </div>
     <br />
-    <div>正确的场景1</div>
+    <div class="title">正确的场景1</div>
     <div v-highlight-query="query">
       <span> {{ list.join(',') }}</span>
     </div>
     <br />
-    <div>正确的场景2</div>
+    <div class="title">正确的场景2</div>
     <div v-highlight-query="query">
       <span> {{ list.join(',') }}</span>
-      <tiny-input></tiny-input>
+      <tiny-button>混入的按钮</tiny-button>
     </div>
   </div>
 </template>
@@ -62,4 +62,13 @@ export default {
 div {
   line-height: 2;
 }
+
+.title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.tiny-button {
+  margin-left: 20px;
+}
 </style>

examples/sites/demos/pc/app/directives/webdoc/directives-auto-tip.js

@@ -12,10 +12,18 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN':
-          '通过配置 <code>v-auto-tip</code> 自定义指令可以在鼠标移入时自动添加tip提示，注意：需要用户自己写超出省略隐藏相关样式。',
-        'en-US':
-          'You can configure the <code>v-auto-tip</code> custom command to automatically add a tip when you move the cursor. Note: You need to write the style beyond or omit to hide the style.'
+        'zh-CN': `
+          通过 <code>v-auto-tip</code> 自定义指令,可以在鼠标移入<code>Dom</code>元素时探测文本是否超长，当超长时自动添加<code>tooltip</code>提示。
+          <div class="tip custom-block">
+            需要用户给<code>Dom</code>元素添加超出省略的样式，详见示例！
+          </div>
+          `,
+        'en-US': `
+            With the <code>v-auto-tip</code> custom command, you can detect if the text is too long when the mouse moves over the <code>Dom</code> element, and automatically add a <code>tooltip</code> prompt when it is too long.
+            <div class="tip custom-block">
+            Requires the user to add more than omitted styles to the <code>Dom</code> element, see the example!
+            </div>
+          `
       },
       codeFiles: ['auto-tip/basic-usage.vue']
     },
@@ -27,14 +35,26 @@ export default {
       },
       desc: {
         'zh-CN': `
-        通过配置 <code>v-auto-tip</code> 自定义指令的值可以分为以下两种情况： 
-        <p>如果配置为 <code>{ always: true, content: '自定义内容', effect: 'dark' }</code> ，<code>always: true</code> 可以正常触发提示无论是否超出隐藏省略；<code>content</code> 可以定义提示内容；<code>effect</code> 可以配置主题，可选值有： <code>light</code> 和 <code>dark</code> ，默认是亮色主题。</p>
-        <p>如果配置为 <code>false</code> 则不处理任何 <code>tip</code> 相关逻辑。</p>
+        指令 <code>v-auto-tip</code> 可以接收一个指令参数，用法如下： <br>
+        1、如果参数为对象，其类型声明为<code>{always:boolean; content:string | VNode | Vnode[]; effect: string; placement: string }</code>   <br>
+        <ul>
+          <li><code>always</code>属性，指定显示方式。 值为<code>true</code>时，表示无论内容是否超长，都自动显示<code>tooltip</code>。 默认值为<code>false</code>, 表示自动探测超长。  </li>  
+          <li><code>content</code>属性，指定提示的内容,支持传入<code>string</code>，<code>VNode</code> 或<code>VNode数组</code>。不传入值时，使用当前<code>Dom</code>元素的内容。  </li>  
+          <li><code>effect</code> 属性，指定提示的效果，支持 <code>light</code> 和 <code>dark</code> ，默认是<code>light</code>亮色主题  </li>  
+          <li><code>placement</code> 属性，指定提示的位置，默认值为<code>top</code> 。参见<code>tooltip</code> 组件的<code>placement</code> 属性。   </li>  
+        </ul>
+        2、如果参数为 <code>false</code>，表示禁止自动提示。 <br>
         `,
         'en-US': `
-        You can configure <code>v-auto-tip</code> to customize the command value to:
-        <p>If this parameter is set to {always: true, content:'customized content'}</code> ,<code>always: true</code>, the prompt is displayed long regardless of whether the value exceeds the threshold or not. <code>content</code> can define the prompt content. </p>
-        <p>If this parameter is set to <code>false</code>, no <code>tip</code> logic is processed. </p>
+          The <code>v-auto-tip</code> command can receive an instruction parameter as follows: <br>
+          1. If the parameter is an object, its type is declared as <code>{always:boolean; content:string | VNode | Vnode[];  effect: string;  placement: string }</code>   <br>
+          <ul>
+          <li><code>always</code> property specifies the display mode. If the value is <code>true</code>, the <code>tooltip</code> is automatically displayed regardless of whether the content is too long. The default value is <code>false</code>, indicating that the automatic detection length is too long. </li>
+          <li><code>content</code> property specifies the content of the prompt, which can be passed to <code>string</code>, <code>VNode</code>, or the <code>VNode array </code>. When no value is passed, the contents of the current <code>Dom</code> element are used. </li>
+          <li><code>effect</code> property, specify the effect of the prompt, support <code>light</code> and <code>dark</code>, default is <code>light</code> bright color theme </li>
+          <li><code>placement</code> property specifies the placement of the tip. The default value is <code>top</code>. See the <code>placement</code> property of the <code>tooltip</code> component. </li>
+          </ul>
+          2. If the parameter is <code>false</code>, the automatic prompt is disabled. <br>
         `
       },
       codeFiles: ['auto-tip/always-show.vue']

examples/sites/demos/pc/app/directives/webdoc/directives-highlight-query.js

@@ -12,9 +12,9 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN': '通过自动高亮搜索字指令，可以自动高亮某个节点下，所有匹配的字符。',
+        'zh-CN': '通过自动高亮搜索字指令，可以自动搜索某个<code>Dom</code>元素内所有匹配的字符，将其高亮。',
         'en-US':
-          'You can use the automatic highlight search word command to automatically highlight all matched characters under a node.'
+          'With the Auto Highlight search word command, you can automatically search for all matching characters in a <code>Dom</code> element and highlight them.'
       },
       codeFiles: ['highlight-query/basic-usage.vue']
     },
@@ -26,7 +26,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '纯文字节点在<code>Vue</code> 编译时有特殊处理。自动高亮搜索字的指令是直接处理<code>Dom</code>节点的内容，所以要避免纯文本节点。以下2个场景会造成<code>Vue</code> 更新机制失败。',
+          '纯文字节点在<code>Vue</code> 编译时有特殊处理。自动高亮搜索字的指令是直接操作<code>Dom</code>节点的内容，所以要避免纯文本节点。以下2个场景会造成<code>Vue</code> 更新机制失败。',
         'en-US':
           'Plain text nodes are specially processed during <code>Vue</code> compilation. The instruction for automatically highlighting search words is to directly process the contents of the <code>Dom</code> node, so avoid plain text nodes. The <code>Vue</code> update mechanism fails in the following scenarios:'
       },