feat(search): Add mini search box expansion and retraction hook callback API

examples/sites/demos/apis/search.js

@@ -218,6 +218,34 @@ export default {
           mode: ['pc'],
           pcDemo: 'events'
         },
+        {
+          name: 'collapse',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'mini模式的搜索框收回时触发的回调函数',
+            'en-US': 'The callback function triggered when the search box in mini mode is retracted'
+          },
+          meta: {
+            stable: '3.26.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'events'
+        },
+        {
+          name: 'expand',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'mini模式的搜索框展开时触发的回调函数',
+            'en-US': 'The callback function triggered when the search box in mini mode expands'
+          },
+          meta: {
+            stable: '3.26.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'events'
+        },
         {
           name: 'input',
           typeAnchorName: 'ITypeValue',

examples/sites/demos/pc/app/search/events.spec.ts

@@ -9,7 +9,7 @@ test('事件是否正常触发', async ({ page }) => {
   const button = page.locator('.tiny-search__input-btn > a').first()
 
   await button.click()
-  await expect(modal).toHaveCount(1)
+  await expect(modal).toHaveCount(2)
   await input.first().fill('111')
   await button.click()
   await modal.getByText('111').isVisible()

examples/sites/demos/pc/app/search/events.vue

@@ -15,6 +15,9 @@
     <p>类型选中事件</p>
     <br />
     <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
+    <p>mini模式展开和收起事件</p>
+    <br />
+    <tiny-search mini @collapse="handleCollapse" @expand="handleExpand"></tiny-search>
   </div>
 </template>
 
@@ -58,6 +61,12 @@ export default {
     },
     select(value) {
       TinyModal.message({ message: `${value.text}`, status: 'info' })
+    },
+    handleCollapse() {
+      TinyModal.message({ message: '收回', status: 'info' })
+    },
+    handleExpand() {
+      TinyModal.message({ message: '展开', status: 'info' })
     }
   }
 }

examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.ts

@@ -21,7 +21,7 @@ test('disabled', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('search#slot-prefix-suffix')
 
-  await page.locator('.tiny-button').last().click()
+  await page.getByRole('button', { name: '点击切换为“禁用状态”' }).click()
 
   const searchLocators = await page.locator('.tiny-search').all()
   for (const search of searchLocators) {

examples/sites/demos/pc/app/search/webdoc/search.js

@@ -112,10 +112,18 @@ export default {
         'en-US': 'Search event'
       },
       desc: {
-        'zh-CN':
-          '<div class="tip custom-block">通过 <code>is-enter-search</code> 设置回车触发搜索事件， <code>search</code> 监听搜索事件；<br />\n              通过 <code>change</code> 监听输入框失焦时搜索值改变事件，<code>input</code> 监听搜索值实时改变事件；<br />\n              通过 <code>select</code> 监听搜索类型选中事件。</div>',
-        'en-US':
-          '<div class="tip custom-block">Set a carriage return to trigger a search event by <code>is enter search</code> , and listen for search events by <code>search</code> <br />\n              By <code>change</code> listening for search value change events when the input box is out of focus, and <code>input</code> listening for real-time search value change events<br />\n              Listen for search type selection events through <code>select</code> .</div>'
+        'zh-CN': `
+        <div class="tip custom-block">通过 <code>is-enter-search</code> 设置回车触发搜索事件， <code>search</code> 监听搜索事件；<br />\n              
+        通过 <code>change</code> 监听输入框失焦时搜索值改变事件，<code>input</code> 监听搜索值实时改变事件；<br />\n              
+        通过 <code>select</code> 监听搜索类型选中事件；<br />\n                
+        通过 <code>expand</code> 监听 mini 搜索框展开事件；<br />\n                
+        通过 <code>collapse</code> 监听 mini 搜索框收起事件。</div>`,
+        'en-US': `<div class="tip custom-block">
+        Set carriage return to trigger search event through<code>is-enter-search</code>, and<code>search</code>to listen for search events; <br />\n              
+        Monitor the search value change event when the input box loses focus through<code>change</code>, and monitor the real-time search value change event through<code>input</code>; <br />\n              
+        Monitor the search type selection event through<code>select</code>; <br />\n                
+        Monitor mini search box expansion events through<code>expand</code>; <br />\n                
+        Monitor the mini search box collapse event through<code>collapse</code>.</div>`
       },
       codeFiles: ['events.vue']
     }

packages/renderless/src/search/index.ts

@@ -59,6 +59,7 @@ export const searchClick =
     event.preventDefault()
     if (props.mini && state.collapse) {
       state.collapse = false
+      emit('expand')
     } else {
       emit('search', state.searchValue, state.currentValue)
     }
@@ -74,15 +75,18 @@ export const searchEnterKey =
   }
 
 export const clickOutside =
-  ({ parent, props, state }: Pick<ISearchRenderlessParams, 'parent' | 'props' | 'state'>) =>
+  ({ parent, props, state, emit }: Pick<ISearchRenderlessParams, 'parent' | 'props' | 'state' | 'emit'>) =>
   (event: Event) => {
     // 优先使用 event.composedPath() 来判断事件源是否在组件内部，以兼容 Shadow DOM。
     // 在 Shadow DOM 中，事件冒泡穿过 Shadow Root 后，event.target 会被重定向为 host 元素，
     // 导致传统的 contains 判断失效。composedPath 则能提供真实的事件路径。
     const path = event?.composedPath && event.composedPath()
     if (path ? !path.includes(parent.$el) : !parent.$el.contains(event.target)) {
       state.show = false
-      props.mini && !state.currentValue && (state.collapse = true)
+      if (props.mini && !state.currentValue && !state.collapse) {
+        state.collapse = true
+        emit('collapse')
+      }
     }
   }
 

packages/renderless/src/search/vue.ts

@@ -103,7 +103,7 @@ export const renderless = (
     handleChange: handleChange({ emit, state }),
     showSelector: showSelector({ vm, state }),
     searchClick: searchClick({ emit, props, state }),
-    clickOutside: clickOutside({ parent, props, state }),
+    clickOutside: clickOutside({ parent, props, state, emit }),
     emitInput: emitInput({ emit }),
     ...formatSearchTypes.api
   } as ISearchApi

packages/vue/src/search/src/pc.vue

@@ -116,7 +116,7 @@ export default defineComponent({
     'size',
     'disabled'
   ],
-  emits: ['change', 'search', 'update:modelValue', 'clear', 'select', 'input'],
+  emits: ['change', 'search', 'update:modelValue', 'clear', 'select', 'input', 'expand', 'collapse'],
   components: {
     IconChevronDown: iconChevronDown(),
     IconSearch: iconSearch(),