Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(pro:search): search btn triggers search change now (#1321)
- Loading branch information
Showing
16 changed files
with
536 additions
and
380 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE | ||
| */ | ||
|
|
||
| export interface SearchTriggerContext { | ||
| triggerSearch: () => Promise<void> | ||
| onSearchTrigger: (cb: Handler, enforce?: HandlerEnforce) => void | ||
| } | ||
|
|
||
| type HandlerEnforce = 'pre' | 'post' | ||
| type Handler = () => void | Promise<void> | ||
|
|
||
| export function useSearchTrigger(): SearchTriggerContext { | ||
| const preHandlers: Handler[] = [] | ||
| const handlers: Handler[] = [] | ||
| const postHandlers: Handler[] = [] | ||
|
|
||
| const onSearchTrigger = (cb: Handler, enforce?: HandlerEnforce) => { | ||
| if (enforce === 'pre') { | ||
| preHandlers.unshift(cb) | ||
| } else if (enforce === 'post') { | ||
| postHandlers.push(cb) | ||
| } else { | ||
| handlers.push(cb) | ||
| } | ||
| } | ||
|
|
||
| const _invokeHandlers = async (handlers: Handler[]) => { | ||
| for (const handler of handlers) { | ||
| await handler() | ||
| } | ||
| } | ||
| const triggerSearch = async () => { | ||
| await _invokeHandlers(preHandlers) | ||
| await _invokeHandlers(handlers) | ||
| await _invokeHandlers(postHandlers) | ||
| } | ||
|
|
||
| return { | ||
| triggerSearch, | ||
| onSearchTrigger, | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE | ||
| */ | ||
|
|
||
| import { computed, defineComponent, inject, normalizeClass } from 'vue' | ||
|
|
||
| import { IxTooltip } from '@idux/components/tooltip' | ||
|
|
||
| import { proSearchContext } from '../token' | ||
| import { searchItemTagProps } from '../types' | ||
| import { renderIcon } from '../utils/RenderIcon' | ||
| export default defineComponent({ | ||
| props: searchItemTagProps, | ||
| setup(props) { | ||
| const context = inject(proSearchContext)! | ||
| const { props: proSearchProps, mergedPrefixCls, changeActive, setActiveSegment, removeSearchState } = context | ||
|
|
||
| const prefixCls = computed(() => `${mergedPrefixCls.value}-search-item-tag`) | ||
| const classes = computed(() => { | ||
| return normalizeClass({ | ||
| [prefixCls.value]: true, | ||
| [`${prefixCls.value}-invalid`]: !!props?.error, | ||
| }) | ||
| }) | ||
|
|
||
| const setSegmentActive = (name: string) => { | ||
| setActiveSegment({ | ||
| itemKey: props.itemKey!, | ||
| name, | ||
| overlayOpened: true, | ||
| }) | ||
| } | ||
| const handleCloseIconClick = (evt: Event) => { | ||
| evt.stopPropagation() | ||
| removeSearchState(props.itemKey!) | ||
| } | ||
|
|
||
| const handleTagSegmentMouseDown = (name: string) => { | ||
| if (proSearchProps.disabled) { | ||
| return | ||
| } | ||
|
|
||
| setSegmentActive(name) | ||
|
|
||
| if (name === 'name') { | ||
| changeActive(1) | ||
| } | ||
| } | ||
|
|
||
| const renderTag = () => { | ||
| const content = props.segments!.map(data => data.input).join(' ') | ||
|
|
||
| return [ | ||
| <span class={`${prefixCls.value}-segments`} title={content}> | ||
| {props.segments!.map(segmeng => ( | ||
| <span class={`${prefixCls.value}-segment`} onMousedown={() => handleTagSegmentMouseDown(segmeng.name)}> | ||
| {segmeng.input} | ||
| </span> | ||
| ))} | ||
| </span>, | ||
| <span class={`${prefixCls.value}-content`} title={content}> | ||
| {content} | ||
| </span>, | ||
| ] | ||
| } | ||
|
|
||
| return () => ( | ||
| <IxTooltip | ||
| class={`${prefixCls.value}-invalid-tooltip`} | ||
| title={props.error?.message} | ||
| placement="topStart" | ||
| offset={[0, 15]} | ||
| > | ||
| <span class={classes.value} onMousedown={evt => evt.preventDefault()}> | ||
| {renderTag()} | ||
| {!proSearchProps.disabled && ( | ||
| <span class={`${prefixCls.value}-close-icon`} onClick={handleCloseIconClick}> | ||
| {renderIcon('close')} | ||
| </span> | ||
| )} | ||
| </span> | ||
| </IxTooltip> | ||
| ) | ||
| }, | ||
| }) |
Oops, something went wrong.