vxe-pc-ui 4.20.25 → 4.20.27

package/packages/icon-picker/src/icon-picker.ts

@@ -1,809 +1,922 @@
-import { h, Teleport, PropType, ref, inject, watch, computed, provide, onBeforeUnmount, reactive, nextTick, onMounted } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import XEUtils from 'xe-utils'
-import { VxeUI } from '../../ui'
-import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
-import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
-import { getSlotVNs } from '../../ui/src/vn'
-import VxeInputComponent from '../../input'
-import VxeScrollbarComponent from '../../scrollbar'
-
-import type { VxeIconPickerPropTypes, VxeIconPickerConstructor, IconPickerInternalData, VxeInputConstructor, ValueOf, IconPickerReactData, VxeIconPickerEmits, IconPickerMethods, IconPickerPrivateRef, VxeIconPickerMethods, VxeIconPickerDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeComponentStyleType } from '../../../types'
-import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
-
-const { getConfig, getIcon, getI18n, baseUtils, globalEvents, createEvent, renderer, useFns, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI
-const { getDefVal } = baseUtils
-
-function createReactData (): IconPickerReactData {
-  return {
-    initialized: false,
-    selectIcon: '',
-    panelIndex: 0,
-    panelStyle: {},
-    panelPlacement: null,
-    visiblePanel: false,
-    isAniVisible: false,
-    isActivated: false,
-    searchValue: '',
-    iconList: []
-  }
-}
-
-function createInternalData (): IconPickerInternalData {
-  return {
-    fullList: []
-    // hpTimeout: undefined
-  }
-}
-
-export default defineVxeComponent({
-  name: 'VxeIconPicker',
-  props: {
-    modelValue: String as PropType<VxeIconPickerPropTypes.ModelValue>,
-    placeholder: String as PropType<VxeIconPickerPropTypes.Placeholder>,
-    clearable: Boolean as PropType<VxeIconPickerPropTypes.Clearable>,
-    size: {
-      type: String as PropType<VxeIconPickerPropTypes.Size>,
-      default: () => getConfig().iconPicker.size || getConfig().size
-    },
-    className: [String, Function] as PropType<VxeIconPickerPropTypes.ClassName>,
-    /**
-     * 已废弃，请使用 popupConfig.className
-     * @deprecated
-     */
-    popupClassName: [String, Function] as PropType<VxeIconPickerPropTypes.PopupClassName>,
-    width: [Number, String] as PropType<VxeIconPickerPropTypes.Width>,
-    showIconTitle: {
-      type: Boolean as PropType<VxeIconPickerPropTypes.ShowIconTitle>,
-      default: () => getConfig().iconPicker.showIconTitle
-    },
-    readonly: {
-      type: Boolean as PropType<VxeIconPickerPropTypes.Readonly>,
-      default: null
-    },
-    disabled: {
-      type: Boolean as PropType<VxeIconPickerPropTypes.Disabled>,
-      default: null
-    },
-    filterable: {
-      type: Boolean as PropType<VxeIconPickerPropTypes.Filterable>,
-      default: () => getConfig().iconPicker.filterable
-    },
-    filterConfig: Object as PropType<VxeIconPickerPropTypes.FilterConfig>,
-    icons: Array as PropType<VxeIconPickerPropTypes.Icons>,
-    placement: String as PropType<VxeIconPickerPropTypes.Placement>,
-    popupConfig: Object as PropType<VxeIconPickerPropTypes.PopupConfig>,
-    transfer: {
-      type: Boolean as PropType<VxeIconPickerPropTypes.Transfer>,
-      default: null
-    },
-    useScrollbar: {
-      type: Boolean as PropType<VxeIconPickerPropTypes.UseScrollbar>,
-      default: () => getDefVal(getConfig().iconPicker.useScrollbar, getConfig().useScrollbar)
-    },
-    scrollbarConfig: Object as PropType<VxeIconPickerPropTypes.ScrollbarConfig>
-  },
-  emits: [
-    'update:modelValue',
-    'change',
-    'clear',
-    'click'
-  ] as VxeIconPickerEmits,
-  setup (props, context) {
-    const { emit } = context
-
-    const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null)
-    const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
-    const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
-    const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null)
-    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
-
-    const xID = XEUtils.uniqueId()
-
-    const { computeSize } = useFns.useSize(props)
-    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
-
-    const reactData = reactive(createReactData())
-
-    const internalData = createInternalData()
-
-    const refElem = ref<HTMLDivElement>()
-    const refInput = ref<HTMLInputElement>()
-    const refOptionPanel = ref<HTMLDivElement>()
-
-    const refInpSearch = ref<VxeInputConstructor>()
-
-    const refMaps: IconPickerPrivateRef = {
-      refElem
-    }
-
-    const $xeIconPicker = {
-      xID,
-      props,
-      context,
-      reactData,
-      getRefMaps: () => refMaps
-    } as unknown as VxeIconPickerConstructor & VxeIconPickerMethods
-
-    let iconPickerMethods = {} as IconPickerMethods
-
-    const computeFormReadonly = computed(() => {
-      const { readonly } = props
-      if (readonly === null) {
-        if ($xeForm) {
-          return $xeForm.props.readonly
-        }
-        return false
-      }
-      return readonly
-    })
-
-    const computeIsDisabled = computed(() => {
-      const { disabled } = props
-      if (disabled === null) {
-        if ($xeForm) {
-          return $xeForm.props.disabled
-        }
-        return false
-      }
-      return disabled
-    })
-
-    const computeBtnTransfer = computed(() => {
-      const { transfer } = props
-      const popupOpts = computePopupOpts.value
-      if (XEUtils.isBoolean(popupOpts.transfer)) {
-        return popupOpts.transfer
-      }
-      if (transfer === null) {
-        const globalTransfer = getConfig().iconPicker.transfer
-        if (XEUtils.isBoolean(globalTransfer)) {
-          return globalTransfer
-        }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
-          return true
-        }
-      }
-      return transfer
-    })
-
-    const computeInpPlaceholder = computed(() => {
-      const { placeholder } = props
-      if (placeholder) {
-        return getFuncText(placeholder)
-      }
-      const globalPlaceholder = getConfig().select.placeholder
-      if (globalPlaceholder) {
-        return getFuncText(globalPlaceholder)
-      }
-      return getI18n('vxe.base.pleaseSelect')
-    })
-
-    const computeCurrStyle = computed(() => {
-      const { width } = props
-      const stys: VxeComponentStyleType = {}
-      if (width) {
-        stys.width = toCssUnit(width)
-      }
-      return stys
-    })
-
-    const computeWrapperStyle = computed(() => {
-      const popupOpts = computePopupOpts.value
-      const { chunkSize, height, chunkWidth, maxHeight } = popupOpts
-      const stys: VxeComponentStyleType = {
-        '--vxe-ui-icon-picker-item-width': chunkWidth ? toCssUnit(chunkWidth) : `${100 / (chunkSize || 4)}%`
-      }
-      if (height) {
-        stys['--vxe-ui-icon-picker-panel-height'] = toCssUnit(height)
-      }
-      if (maxHeight) {
-        stys['--vxe-ui-icon-picker-panel-max-height'] = toCssUnit(maxHeight)
-      }
-      return stys
-    })
-
-    const computeIconList = computed<VxeIconPickerDefines.IconItemObj[]>(() => {
-      let { icons } = props
-      if (!icons || !icons.length) {
-        icons = getConfig().iconPicker.icons || []
-      }
-      return icons.map(item => {
-        if (XEUtils.isString(item)) {
-          return {
-            title: item,
-            icon: `vxe-icon-${`${item || ''}`.replace(/^vxe-icon-/, '')}`
-          }
-        }
-        return {
-          title: `${item.title || ''}`,
-          icon: item.icon || '',
-          iconRender: item.iconRender
-        }
-      })
-    })
-
-    const computeFilterOpts = computed(() => {
-      return Object.assign({}, getConfig().iconPicker.filterConfig, props.filterConfig)
-    })
-
-    const computePopupOpts = computed(() => {
-      return Object.assign({}, getConfig().iconPicker.popupConfig, props.popupConfig)
-    })
-
-    const computeSelectIconItem = computed(() => {
-      const { selectIcon } = reactData
-      const iconList = computeIconList.value
-      return selectIcon ? iconList.find(item => item.icon === selectIcon) : null
-    })
-
-    const computeScrollbarOpts = computed(() => {
-      return Object.assign({}, getConfig().iconPicker.scrollbarConfig, props.scrollbarConfig)
-    })
-
-    const computeScrollbarProps = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value
-      const { viewClassName, viewInnerClassName } = scrollbarOpts
-      return {
-        width: scrollbarOpts.width,
-        height: scrollbarOpts.height,
-        autoHide: scrollbarOpts.autoHide,
-        visible: scrollbarOpts.visible,
-        xConfig: scrollbarOpts.xConfig,
-        yConfig: scrollbarOpts.yConfig,
-        className: scrollbarOpts.className,
-        viewAttrs: scrollbarOpts.viewAttrs,
-        viewClassName: 'vxe-ico-picker--scrollbar-list-wrapper-view' + (viewClassName ? (' ' + viewClassName) : ''),
-        viewInnerClassName: 'vxe-ico-picker--scrollbar-list-wrapper-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
-      }
-    })
-
-    const updateZindex = () => {
-      if (reactData.panelIndex < getLastZIndex()) {
-        reactData.panelIndex = nextZIndex()
-      }
-    }
-
-    const updatePlacement = () => {
-      const { placement } = props
-      const { panelIndex } = reactData
-      const targetElem = refElem.value
-      const panelElem = refOptionPanel.value
-      const btnTransfer = computeBtnTransfer.value
-      const popupOpts = computePopupOpts.value
-      const { width } = popupOpts
-      const handleStyle = () => {
-        const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement: popupOpts.placement || placement,
-          defaultPlacement: popupOpts.defaultPlacement,
-          appendTo: popupOpts.appendTo,
-          teleportTo: btnTransfer
-        })
-        const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
-          zIndex: panelIndex,
-          minWidth: undefined
-        })
-        if (width) {
-          Object.assign(panelStyle, {
-            width: toCssUnit(width)
-          })
-        }
-        reactData.panelStyle = panelStyle
-        reactData.panelPlacement = ppObj.placement
-      }
-      handleStyle()
-      return nextTick().then(handleStyle)
-    }
-
-    const showOptionPanel = () => {
-      const { hpTimeout } = internalData
-      const isDisabled = computeIsDisabled.value
-      if (!isDisabled) {
-        if (hpTimeout) {
-          clearTimeout(hpTimeout)
-          internalData.hpTimeout = undefined
-        }
-        if (!reactData.initialized) {
-          reactData.initialized = true
-        }
-        reactData.isActivated = true
-        reactData.isAniVisible = true
-        setTimeout(() => {
-          reactData.visiblePanel = true
-          handleFocusSearch()
-          updatePlacement()
-        }, 10)
-        updateZindex()
-        updatePlacement()
-      }
-    }
-
-    const hideOptionPanel = () => {
-      reactData.visiblePanel = false
-      internalData.hpTimeout = setTimeout(() => {
-        reactData.isAniVisible = false
-      }, 350)
-    }
-
-    const handleFocusSearch = () => {
-      if (props.filterable) {
-        nextTick(() => {
-          const inpSearch = refInpSearch.value
-          if (inpSearch) {
-            inpSearch.focus()
-          }
-        })
-      }
-    }
-
-    const handleData = () => {
-      const { modelValue } = props
-      const { searchValue } = reactData
-      const filterOpts = computeFilterOpts.value
-      const { filterMethod } = filterOpts
-      const iconList = computeIconList.value
-      let visibleList = iconList
-      if (searchValue) {
-        const searchTxt = `${searchValue}`.toLowerCase()
-        visibleList = iconList.filter(item => {
-          if (filterMethod) {
-            return filterMethod({ option: item, value: modelValue, searchValue: searchTxt, $iconPicker: $xeIconPicker })
-          }
-          return (item.title && `${item.title}`.toLowerCase().indexOf(searchTxt) > -1) || (item.icon && `${item.icon}`.indexOf(searchTxt) > -1)
-        })
-      }
-      reactData.iconList = visibleList
-    }
-
-    const changeEvent = (evnt: Event, selectValue: any) => {
-      reactData.selectIcon = selectValue
-      if (selectValue !== props.modelValue) {
-        emit('update:modelValue', selectValue)
-        dispatchEvent('change', { value: selectValue }, evnt)
-        // 自动更新校验状态
-        if ($xeForm && formItemInfo) {
-          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue)
-        }
-      }
-    }
-
-    const focusEvent = () => {
-      const isDisabled = computeIsDisabled.value
-      if (!isDisabled) {
-        if (!reactData.visiblePanel) {
-          showOptionPanel()
-        }
-      }
-    }
-
-    const blurEvent = () => {
-      reactData.isActivated = false
-    }
-
-    const clearValueEvent = (evnt: Event, selectValue: any) => {
-      changeEvent(evnt, selectValue)
-      dispatchEvent('clear', { value: selectValue }, evnt)
-    }
-
-    const clearEvent = (params: any, evnt: Event) => {
-      clearValueEvent(evnt, null)
-      hideOptionPanel()
-    }
-
-    const togglePanelEvent = (evnt: MouseEvent) => {
-      evnt.preventDefault()
-      if (reactData.visiblePanel) {
-        hideOptionPanel()
-      } else {
-        showOptionPanel()
-      }
-    }
-
-    const clickEvent = (evnt: MouseEvent) => {
-      togglePanelEvent(evnt)
-      dispatchEvent('click', {}, evnt)
-    }
-
-    const handleGlobalMousedownEvent = (evnt: MouseEvent) => {
-      const { visiblePanel } = reactData
-      const isDisabled = computeIsDisabled.value
-      if (!isDisabled) {
-        const el = refElem.value
-        const panelElem = refOptionPanel.value
-        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
-        if (visiblePanel && !reactData.isActivated) {
-          hideOptionPanel()
-        }
-      }
-    }
-
-    const handleGlobalKeydownEvent = (evnt: KeyboardEvent) => {
-      const { clearable } = props
-      const { visiblePanel } = reactData
-      const isDisabled = computeIsDisabled.value
-      if (!isDisabled) {
-        const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB)
-        const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER)
-        const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE)
-        const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP)
-        const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN)
-        const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE)
-        const isSpacebar = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR)
-        if (isTab) {
-          reactData.isActivated = false
-        }
-        if (visiblePanel) {
-          if (isEsc || isTab) {
-            hideOptionPanel()
-          } else if (isEnter) {
-            evnt.preventDefault()
-            evnt.stopPropagation()
-            // changeOptionEvent(evnt, currentValue, currentOption)
-          } else if (isUpArrow || isDwArrow) {
-            evnt.preventDefault()
-            // let { firstOption, offsetOption } = findOffsetOption(currentValue, isUpArrow)
-            // if (!offsetOption && !findVisibleOption(currentValue)) {
-            //   offsetOption = firstOption
-            // }
-            // setCurrentOption(offsetOption)
-            // scrollToOption(offsetOption, isDwArrow)
-          } else if (isSpacebar) {
-            evnt.preventDefault()
-          }
-        } else if ((isUpArrow || isDwArrow || isEnter || isSpacebar) && reactData.isActivated) {
-          evnt.preventDefault()
-          showOptionPanel()
-        }
-        if (reactData.isActivated) {
-          if (isDel && clearable) {
-            clearValueEvent(evnt, null)
-          }
-        }
-      }
-    }
-
-    const handleGlobalBlurEvent = () => {
-      const { visiblePanel, isActivated } = reactData
-      if (visiblePanel) {
-        hideOptionPanel()
-      }
-      if (isActivated) {
-        reactData.isActivated = false
-      }
-      if (visiblePanel || isActivated) {
-        const $input = refInput.value
-        if ($input) {
-          $input.blur()
-        }
-      }
-    }
-
-    const handleGlobalResizeEvent = () => {
-      const { visiblePanel } = reactData
-      if (visiblePanel) {
-        updatePlacement()
-      }
-    }
-
-    const handleGlobalScrollEvent = () => {
-      const { visiblePanel } = reactData
-      if (visiblePanel) {
-        updatePlacement()
-      }
-    }
-
-    const dispatchEvent = (type: ValueOf<VxeIconPickerEmits>, params: Record<string, any>, evnt: Event | null) => {
-      emit(type, createEvent(evnt, { $iconPicker: $xeIconPicker }, params))
-    }
-
-    iconPickerMethods = {
-      dispatchEvent,
-      isPanelVisible () {
-        return reactData.visiblePanel
-      },
-      togglePanel () {
-        if (reactData.visiblePanel) {
-          hideOptionPanel()
-        } else {
-          showOptionPanel()
-        }
-        return nextTick()
-      },
-      hidePanel () {
-        if (reactData.visiblePanel) {
-          hideOptionPanel()
-        }
-        return nextTick()
-      },
-      showPanel () {
-        if (!reactData.visiblePanel) {
-          showOptionPanel()
-        }
-        return nextTick()
-      },
-      focus () {
-        const $input = refInput.value
-        reactData.isActivated = true
-        if ($input) {
-          $input.blur()
-        }
-        return nextTick()
-      },
-      blur () {
-        const $input = refInput.value
-        if ($input) {
-          $input.blur()
-        }
-        reactData.isActivated = false
-        return nextTick()
-      }
-    }
-
-    const handleClickIconEvent = (evnt: MouseEvent, item: VxeIconPickerDefines.IconItemObj) => {
-      const value = item.icon
-      changeEvent(evnt, value)
-      hideOptionPanel()
-    }
-
-    const modelSearchEvent = (value: string) => {
-      reactData.searchValue = value
-    }
-
-    const focusSearchEvent = () => {
-      reactData.isActivated = true
-    }
-
-    const handleSearchEvent = () => {
-      handleData()
-    }
-
-    const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true })
-
-    Object.assign($xeIconPicker, iconPickerMethods)
-
-    const renderIconWrapper = () => {
-      const { showIconTitle } = props
-      const { selectIcon, iconList } = reactData
-      const isVScrollbar = computeIsVScrollbar.value
-      const scrollbarProps = computeScrollbarProps.value
-
-      if (!iconList.length) {
-        return h('div', {
-          class: 'vxe-ico-picker--empty-placeholder'
-        }, getI18n('vxe.iconPicker.emptyText'))
-      }
-      const iconVNs = iconList.map(item => {
-        const { iconRender } = item
-        const compConf = iconRender ? renderer.get(iconRender.name) : null
-        const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null
-        return h('div', {
-          class: ['vxe-ico-picker--item', {
-            'is--selected': selectIcon === item.icon
-          }]
-        }, [
-          h('div', {
-            class: 'vxe-ico-picker--item-inner',
-            onClick (evnt) {
-              const isDisabled = computeIsDisabled.value
-              if (!isDisabled) {
-                handleClickIconEvent(evnt, item)
-              }
-            }
-          }, [
-            h('div', {
-              class: 'vxe-ico-picker--item-icon'
-            }, iconMethod && iconRender
-              ? getSlotVNs(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item }))
-              : [
-                  h('i', {
-                    class: item.icon || ''
-                  })
-                ]),
-            showIconTitle
-              ? h('div', {
-                class: 'vxe-ico-picker--item-title'
-              }, `${item.title || ''}`)
-              : renderEmptyElement($xeIconPicker)
-          ])
-        ])
-      })
-      if (isVScrollbar) {
-        return h(VxeScrollbarComponent, {
-          class: 'vxe-ico-picker--scrollbar-list-wrapper',
-          ...scrollbarProps
-        }, {
-          default: () => iconVNs
-        })
-      }
-      return h('div', {
-        class: 'vxe-ico-picker--list-wrapper'
-      }, [
-        h('div', {
-          class: 'vxe-ico-picker--list'
-        }, iconVNs)
-      ])
-    }
-
-    const renderIconView = () => {
-      const { selectIcon } = reactData
-      const selectIconItem = computeSelectIconItem.value
-      if (selectIconItem) {
-        const { iconRender } = selectIconItem
-        const compConf = iconRender ? renderer.get(iconRender.name) : null
-        const oIconMethod = compConf ? compConf.renderIconPickerOptionIcon : null
-        if (oIconMethod && iconRender) {
-          return h('div', {
-            key: 'inc',
-            class: 'vxe-ico-picker--icon'
-          }, getSlotVNs(oIconMethod(iconRender, { $iconPicker: $xeIconPicker, option: selectIconItem })))
-        }
-      }
-      return h('div', {
-        key: 'ind',
-        class: 'vxe-ico-picker--icon'
-      }, [
-        h('i', {
-          class: selectIcon
-        })
-      ])
-    }
-
-    const renderVN = () => {
-      const { className, clearable, filterable } = props
-      const { initialized, isActivated, isAniVisible, visiblePanel, selectIcon } = reactData
-      const vSize = computeSize.value
-      const isDisabled = computeIsDisabled.value
-      const btnTransfer = computeBtnTransfer.value
-      const formReadonly = computeFormReadonly.value
-
-      if (formReadonly) {
-        return h('div', {
-          ref: refElem,
-          class: ['vxe-ico-picker--readonly', className]
-        }, [
-          h('i', {
-            class: selectIcon
-          })
-        ])
-      }
-      const currStyle = computeCurrStyle.value
-      const inpPlaceholder = computeInpPlaceholder.value
-      const wrapperStyle = computeWrapperStyle.value
-      const popupOpts = computePopupOpts.value
-      const { appendTo } = popupOpts
-      const ppClassName = popupOpts.className || props.popupClassName
-      return h('div', {
-        ref: refElem,
-        class: ['vxe-ico-picker', className ? (XEUtils.isFunction(className) ? className({ $iconPicker: $xeIconPicker }) : className) : '', {
-          [`size--${vSize}`]: vSize,
-          'show--clear': clearable && !isDisabled && !!selectIcon,
-          'is--visible': visiblePanel,
-          'is--disabled': isDisabled,
-          'is--active': isActivated
-        }],
-        style: currStyle
-      }, [
-        h('div', {
-          class: 'vxe-ico-picker--inner',
-          onClick: clickEvent
-        }, [
-          h('input', {
-            ref: refInput,
-            class: 'vxe-ico-picker--input',
-            onFocus: focusEvent,
-            onBlur: blurEvent
-          }),
-          selectIcon
-            ? renderIconView()
-            : h('div', {
-              class: 'vxe-ico-picker--placeholder'
-            }, inpPlaceholder),
-          h('div', {
-            class: 'vxe-ico-picker--suffix'
-          }, [
-            h('div', {
-              class: 'vxe-ico-picker--clear-icon',
-              onClick: clearEvent
-            }, [
-              h('i', {
-                class: getIcon().INPUT_CLEAR
-              })
-            ]),
-            h('div', {
-              class: 'vxe-ico-picker--suffix-icon'
-            }, [
-              h('i', {
-                class: visiblePanel ? getIcon().ICON_PICKER_OPEN : getIcon().ICON_PICKER_CLOSE
-              })
-            ])
-          ])
-        ]),
-        h(Teleport, {
-          to: getPopupContainer(appendTo),
-          disabled: btnTransfer ? !initialized : true
-        }, [
-          h('div', {
-            ref: refOptionPanel,
-            class: ['vxe-table--ignore-clear vxe-ico-picker--panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $iconPicker: $xeIconPicker }) : ppClassName) : '', {
-              [`size--${vSize}`]: vSize,
-              'is--transfer': btnTransfer,
-              'ani--leave': isAniVisible,
-              'ani--enter': visiblePanel
-            }],
-            placement: reactData.panelPlacement,
-            style: reactData.panelStyle
-          }, [
-            initialized && (visiblePanel || isAniVisible)
-              ? h('div', {
-                class: 'vxe-ico-picker--panel-wrapper',
-                style: wrapperStyle
-              }, [
-                filterable
-                  ? h('div', {
-                    class: 'vxe-ico-picker--panel-search'
-                  }, [
-                    h(VxeInputComponent, {
-                      ref: refInpSearch,
-                      class: 'vxe-ico-picker-search--input',
-                      modelValue: reactData.searchValue,
-                      type: 'text',
-                      clearable: true,
-                      disabled: false,
-                      readonly: false,
-                      placeholder: getI18n('vxe.iconPicker.search'),
-                      prefixIcon: getIcon().INPUT_SEARCH,
-                      'onUpdate:modelValue': modelSearchEvent,
-                      onFocus: focusSearchEvent,
-                      onChange: triggerSearchEvent,
-                      onSearch: triggerSearchEvent
-                    })
-                  ])
-                  : renderEmptyElement($xeIconPicker),
-                renderIconWrapper()
-              ])
-              : renderEmptyElement($xeIconPicker)
-          ])
-        ])
-      ])
-    }
-
-    reactData.selectIcon = `${props.modelValue || ''}`
-    handleData()
-
-    watch(() => props.modelValue, (val) => {
-      reactData.selectIcon = `${val || ''}`
-    })
-
-    watch(computeIconList, () => {
-      handleData()
-    })
-
-    onMounted(() => {
-      globalEvents.on($xeIconPicker, 'mousedown', handleGlobalMousedownEvent)
-      globalEvents.on($xeIconPicker, 'keydown', handleGlobalKeydownEvent)
-      globalEvents.on($xeIconPicker, 'blur', handleGlobalBlurEvent)
-      globalEvents.on($xeIconPicker, 'resize', handleGlobalResizeEvent)
-      globalEvents.on($xeIconPicker, 'scroll', handleGlobalScrollEvent)
-    })
-
-    onBeforeUnmount(() => {
-      globalEvents.off($xeIconPicker, 'mousewheel')
-      globalEvents.off($xeIconPicker, 'mousedown')
-      globalEvents.off($xeIconPicker, 'keydown')
-      globalEvents.off($xeIconPicker, 'blur')
-      globalEvents.off($xeIconPicker, 'resize')
-      globalEvents.off($xeIconPicker, 'scroll')
-      XEUtils.assign(reactData, createReactData())
-      XEUtils.assign(internalData, createInternalData())
-    })
-
-    provide('$xeIconPicker', $xeIconPicker)
-
-    $xeIconPicker.renderVN = renderVN
-
-    return $xeIconPicker
-  },
-  render () {
-    return this.renderVN()
-  }
-})
+import { h, Teleport, PropType, ref, inject, watch, computed, provide, onBeforeUnmount, reactive, nextTick, onMounted } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { VxeUI } from '@vxe-ui/core'
+import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
+import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
+import { getSlotVNs } from '../../ui/src/vn'
+import VxeInputComponent from '../../input'
+import VxeScrollbarComponent from '../../scrollbar'
+
+import type {
+  VxeIconPickerPropTypes,
+  VxeIconPickerConstructor,
+  IconPickerInternalData,
+  VxeInputConstructor,
+  ValueOf,
+  IconPickerReactData,
+  VxeIconPickerEmits,
+  IconPickerMethods,
+  IconPickerPrivateRef,
+  VxeIconPickerMethods,
+  VxeIconPickerDefines,
+  VxeDrawerConstructor,
+  VxeDrawerMethods,
+  VxeFormDefines,
+  VxeFormConstructor,
+  VxeFormPrivateMethods,
+  VxeModalConstructor,
+  VxeModalMethods,
+  VxeComponentStyleType
+} from '../../../types'
+import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
+
+const { getConfig, getIcon, getI18n, baseUtils, globalEvents, createEvent, renderer, useFns, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI
+const { getDefVal } = baseUtils
+
+function createReactData(): IconPickerReactData {
+  return {
+    initialized: false,
+    selectIcon: '',
+    panelIndex: 0,
+    panelStyle: {},
+    panelPlacement: null,
+    visiblePanel: false,
+    isAniVisible: false,
+    isActivated: false,
+    searchValue: '',
+    iconList: []
+  }
+}
+
+function createInternalData(): IconPickerInternalData {
+  return {
+    fullList: []
+    // hpTimeout: undefined
+  }
+}
+
+export default defineVxeComponent({
+  name: 'VxeIconPicker',
+  props: {
+    modelValue: String as PropType<VxeIconPickerPropTypes.ModelValue>,
+    placeholder: String as PropType<VxeIconPickerPropTypes.Placeholder>,
+    clearable: Boolean as PropType<VxeIconPickerPropTypes.Clearable>,
+    size: {
+      type: String as PropType<VxeIconPickerPropTypes.Size>,
+      default: () => getConfig().iconPicker.size || getConfig().size
+    },
+    className: [String, Function] as PropType<VxeIconPickerPropTypes.ClassName>,
+    /**
+     * 已废弃，请使用 popupConfig.className
+     * @deprecated
+     */
+    popupClassName: [String, Function] as PropType<VxeIconPickerPropTypes.PopupClassName>,
+    width: [Number, String] as PropType<VxeIconPickerPropTypes.Width>,
+    showIconTitle: {
+      type: Boolean as PropType<VxeIconPickerPropTypes.ShowIconTitle>,
+      default: () => getConfig().iconPicker.showIconTitle
+    },
+    readonly: {
+      type: Boolean as PropType<VxeIconPickerPropTypes.Readonly>,
+      default: null
+    },
+    disabled: {
+      type: Boolean as PropType<VxeIconPickerPropTypes.Disabled>,
+      default: null
+    },
+    filterable: {
+      type: Boolean as PropType<VxeIconPickerPropTypes.Filterable>,
+      default: () => getConfig().iconPicker.filterable
+    },
+    filterConfig: Object as PropType<VxeIconPickerPropTypes.FilterConfig>,
+    icons: Array as PropType<VxeIconPickerPropTypes.Icons>,
+    placement: String as PropType<VxeIconPickerPropTypes.Placement>,
+    popupConfig: Object as PropType<VxeIconPickerPropTypes.PopupConfig>,
+    transfer: {
+      type: Boolean as PropType<VxeIconPickerPropTypes.Transfer>,
+      default: null
+    },
+    useScrollbar: {
+      type: Boolean as PropType<VxeIconPickerPropTypes.UseScrollbar>,
+      default: () => getDefVal(getConfig().iconPicker.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object as PropType<VxeIconPickerPropTypes.ScrollbarConfig>
+  },
+  emits: ['update:modelValue', 'change', 'clear', 'click'] as VxeIconPickerEmits,
+  setup(props, context) {
+    const { emit } = context
+
+    const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null)
+    const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
+    const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
+
+    const xID = XEUtils.uniqueId()
+
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
+
+    const reactData = reactive(createReactData())
+
+    const internalData = createInternalData()
+
+    const refElem = ref<HTMLDivElement>()
+    const refInput = ref<HTMLInputElement>()
+    const refOptionPanel = ref<HTMLDivElement>()
+
+    const refInpSearch = ref<VxeInputConstructor>()
+
+    const refMaps: IconPickerPrivateRef = {
+      refElem
+    }
+
+    const $xeIconPicker = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps
+    } as unknown as VxeIconPickerConstructor & VxeIconPickerMethods
+
+    let iconPickerMethods = {} as IconPickerMethods
+
+    const computeFormReadonly = computed(() => {
+      const { readonly } = props
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.props.readonly
+        }
+        return false
+      }
+      return readonly
+    })
+
+    const computeIsDisabled = computed(() => {
+      const { disabled } = props
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled
+        }
+        return false
+      }
+      return disabled
+    })
+
+    const computeBtnTransfer = computed(() => {
+      const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
+      if (transfer === null) {
+        const globalTransfer = getConfig().iconPicker.transfer
+        if (XEUtils.isBoolean(globalTransfer)) {
+          return globalTransfer
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true
+        }
+      }
+      return transfer
+    })
+
+    const computeInpPlaceholder = computed(() => {
+      const { placeholder } = props
+      if (placeholder) {
+        return getFuncText(placeholder)
+      }
+      const globalPlaceholder = getConfig().select.placeholder
+      if (globalPlaceholder) {
+        return getFuncText(globalPlaceholder)
+      }
+      return getI18n('vxe.base.pleaseSelect')
+    })
+
+    const computeCurrStyle = computed(() => {
+      const { width } = props
+      const stys: VxeComponentStyleType = {}
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
+      return stys
+    })
+
+    const computeWrapperStyle = computed(() => {
+      const popupOpts = computePopupOpts.value
+      const { chunkSize, height, chunkWidth, maxHeight } = popupOpts
+      const stys: VxeComponentStyleType = {
+        '--vxe-ui-icon-picker-item-width': chunkWidth ? toCssUnit(chunkWidth) : `${100 / (chunkSize || 4)}%`
+      }
+      if (height) {
+        stys['--vxe-ui-icon-picker-panel-height'] = toCssUnit(height)
+      }
+      if (maxHeight) {
+        stys['--vxe-ui-icon-picker-panel-max-height'] = toCssUnit(maxHeight)
+      }
+      return stys
+    })
+
+    const computeIconList = computed<VxeIconPickerDefines.IconItemObj[]>(() => {
+      let { icons } = props
+      if (!icons || !icons.length) {
+        icons = getConfig().iconPicker.icons || []
+      }
+      return icons.map((item) => {
+        if (XEUtils.isString(item)) {
+          return {
+            title: item,
+            icon: `vxe-icon-${`${item || ''}`.replace(/^vxe-icon-/, '')}`
+          }
+        }
+        return {
+          title: `${item.title || ''}`,
+          icon: item.icon || '',
+          iconRender: item.iconRender
+        }
+      })
+    })
+
+    const computeFilterOpts = computed(() => {
+      return Object.assign({}, getConfig().iconPicker.filterConfig, props.filterConfig)
+    })
+
+    const computePopupOpts = computed(() => {
+      return Object.assign({}, getConfig().iconPicker.popupConfig, props.popupConfig)
+    })
+
+    const computeSelectIconItem = computed(() => {
+      const { selectIcon } = reactData
+      const iconList = computeIconList.value
+      return selectIcon ? iconList.find((item) => item.icon === selectIcon) : null
+    })
+
+    const computeScrollbarOpts = computed(() => {
+      return Object.assign({}, getConfig().iconPicker.scrollbarConfig, props.scrollbarConfig)
+    })
+
+    const computeScrollbarProps = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const { viewClassName, viewInnerClassName } = scrollbarOpts
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: scrollbarOpts.className,
+        viewAttrs: scrollbarOpts.viewAttrs,
+        viewClassName: 'vxe-ico-picker--scrollbar-list-wrapper-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-ico-picker--scrollbar-list-wrapper-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
+      }
+    })
+
+    const updateZindex = () => {
+      if (reactData.panelIndex < getLastZIndex()) {
+        reactData.panelIndex = nextZIndex()
+      }
+    }
+
+    const updatePlacement = () => {
+      const { placement } = props
+      const { panelIndex } = reactData
+      const targetElem = refElem.value
+      const panelElem = refOptionPanel.value
+      const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
+      const { width } = popupOpts
+      const handleStyle = () => {
+        const ppObj = updatePanelPlacement(targetElem, panelElem, {
+          placement: popupOpts.placement || placement,
+          defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
+          teleportTo: btnTransfer
+        })
+        const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
+          zIndex: panelIndex,
+          minWidth: undefined
+        })
+        if (width) {
+          Object.assign(panelStyle, {
+            width: toCssUnit(width)
+          })
+        }
+        reactData.panelStyle = panelStyle
+        reactData.panelPlacement = ppObj.placement
+      }
+      handleStyle()
+      return nextTick().then(handleStyle)
+    }
+
+    const showOptionPanel = () => {
+      const { hpTimeout } = internalData
+      const isDisabled = computeIsDisabled.value
+      if (!isDisabled) {
+        if (hpTimeout) {
+          clearTimeout(hpTimeout)
+          internalData.hpTimeout = undefined
+        }
+        if (!reactData.initialized) {
+          reactData.initialized = true
+        }
+        reactData.isActivated = true
+        reactData.isAniVisible = true
+        setTimeout(() => {
+          reactData.visiblePanel = true
+          handleFocusSearch()
+          updatePlacement()
+        }, 10)
+        updateZindex()
+        updatePlacement()
+      }
+    }
+
+    const hideOptionPanel = () => {
+      reactData.visiblePanel = false
+      internalData.hpTimeout = setTimeout(() => {
+        reactData.isAniVisible = false
+      }, 350)
+    }
+
+    const handleFocusSearch = () => {
+      if (props.filterable) {
+        nextTick(() => {
+          const inpSearch = refInpSearch.value
+          if (inpSearch) {
+            inpSearch.focus()
+          }
+        })
+      }
+    }
+
+    const handleData = () => {
+      const { modelValue } = props
+      const { searchValue } = reactData
+      const filterOpts = computeFilterOpts.value
+      const { filterMethod } = filterOpts
+      const iconList = computeIconList.value
+      let visibleList = iconList
+      if (searchValue) {
+        const searchTxt = `${searchValue}`.toLowerCase()
+        visibleList = iconList.filter((item) => {
+          if (filterMethod) {
+            return filterMethod({ option: item, value: modelValue, searchValue: searchTxt, $iconPicker: $xeIconPicker })
+          }
+          return (item.title && `${item.title}`.toLowerCase().indexOf(searchTxt) > -1) || (item.icon && `${item.icon}`.indexOf(searchTxt) > -1)
+        })
+      }
+      reactData.iconList = visibleList
+    }
+
+    const changeEvent = (evnt: Event, selectValue: any) => {
+      reactData.selectIcon = selectValue
+      if (selectValue !== props.modelValue) {
+        emit('update:modelValue', selectValue)
+        dispatchEvent('change', { value: selectValue }, evnt)
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue)
+        }
+      }
+    }
+
+    const focusEvent = () => {
+      const isDisabled = computeIsDisabled.value
+      if (!isDisabled) {
+        if (!reactData.visiblePanel) {
+          showOptionPanel()
+        }
+      }
+    }
+
+    const blurEvent = () => {
+      reactData.isActivated = false
+    }
+
+    const clearValueEvent = (evnt: Event, selectValue: any) => {
+      changeEvent(evnt, selectValue)
+      dispatchEvent('clear', { value: selectValue }, evnt)
+    }
+
+    const clearEvent = (params: any, evnt: Event) => {
+      clearValueEvent(evnt, null)
+      hideOptionPanel()
+    }
+
+    const togglePanelEvent = (evnt: MouseEvent) => {
+      evnt.preventDefault()
+      if (reactData.visiblePanel) {
+        hideOptionPanel()
+      } else {
+        showOptionPanel()
+      }
+    }
+
+    const clickEvent = (evnt: MouseEvent) => {
+      togglePanelEvent(evnt)
+      dispatchEvent('click', {}, evnt)
+    }
+
+    const handleGlobalMousedownEvent = (evnt: MouseEvent) => {
+      const { visiblePanel } = reactData
+      const isDisabled = computeIsDisabled.value
+      if (!isDisabled) {
+        const el = refElem.value
+        const panelElem = refOptionPanel.value
+        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
+        if (visiblePanel && !reactData.isActivated) {
+          hideOptionPanel()
+        }
+      }
+    }
+
+    const handleGlobalKeydownEvent = (evnt: KeyboardEvent) => {
+      const { clearable } = props
+      const { visiblePanel } = reactData
+      const isDisabled = computeIsDisabled.value
+      if (!isDisabled) {
+        const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB)
+        const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER)
+        const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE)
+        const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP)
+        const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN)
+        const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE)
+        const isSpacebar = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR)
+        if (isTab) {
+          reactData.isActivated = false
+        }
+        if (visiblePanel) {
+          if (isEsc || isTab) {
+            hideOptionPanel()
+          } else if (isEnter) {
+            evnt.preventDefault()
+            evnt.stopPropagation()
+            // changeOptionEvent(evnt, currentValue, currentOption)
+          } else if (isUpArrow || isDwArrow) {
+            evnt.preventDefault()
+            // let { firstOption, offsetOption } = findOffsetOption(currentValue, isUpArrow)
+            // if (!offsetOption && !findVisibleOption(currentValue)) {
+            //   offsetOption = firstOption
+            // }
+            // setCurrentOption(offsetOption)
+            // scrollToOption(offsetOption, isDwArrow)
+          } else if (isSpacebar) {
+            evnt.preventDefault()
+          }
+        } else if ((isUpArrow || isDwArrow || isEnter || isSpacebar) && reactData.isActivated) {
+          evnt.preventDefault()
+          showOptionPanel()
+        }
+        if (reactData.isActivated) {
+          if (isDel && clearable) {
+            clearValueEvent(evnt, null)
+          }
+        }
+      }
+    }
+
+    const handleGlobalBlurEvent = () => {
+      const { visiblePanel, isActivated } = reactData
+      if (visiblePanel) {
+        hideOptionPanel()
+      }
+      if (isActivated) {
+        reactData.isActivated = false
+      }
+      if (visiblePanel || isActivated) {
+        const $input = refInput.value
+        if ($input) {
+          $input.blur()
+        }
+      }
+    }
+
+    const handleGlobalResizeEvent = () => {
+      const { visiblePanel } = reactData
+      if (visiblePanel) {
+        updatePlacement()
+      }
+    }
+
+    const handleGlobalScrollEvent = () => {
+      const { visiblePanel } = reactData
+      if (visiblePanel) {
+        updatePlacement()
+      }
+    }
+
+    const dispatchEvent = (type: ValueOf<VxeIconPickerEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $iconPicker: $xeIconPicker }, params))
+    }
+
+    iconPickerMethods = {
+      dispatchEvent,
+      isPanelVisible() {
+        return reactData.visiblePanel
+      },
+      togglePanel() {
+        if (reactData.visiblePanel) {
+          hideOptionPanel()
+        } else {
+          showOptionPanel()
+        }
+        return nextTick()
+      },
+      hidePanel() {
+        if (reactData.visiblePanel) {
+          hideOptionPanel()
+        }
+        return nextTick()
+      },
+      showPanel() {
+        if (!reactData.visiblePanel) {
+          showOptionPanel()
+        }
+        return nextTick()
+      },
+      focus() {
+        const $input = refInput.value
+        reactData.isActivated = true
+        if ($input) {
+          $input.blur()
+        }
+        return nextTick()
+      },
+      blur() {
+        const $input = refInput.value
+        if ($input) {
+          $input.blur()
+        }
+        reactData.isActivated = false
+        return nextTick()
+      }
+    }
+
+    const handleClickIconEvent = (evnt: MouseEvent, item: VxeIconPickerDefines.IconItemObj) => {
+      const value = item.icon
+      changeEvent(evnt, value)
+      hideOptionPanel()
+    }
+
+    const modelSearchEvent = (value: string) => {
+      reactData.searchValue = value
+    }
+
+    const focusSearchEvent = () => {
+      reactData.isActivated = true
+    }
+
+    const handleSearchEvent = () => {
+      handleData()
+    }
+
+    const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true })
+
+    Object.assign($xeIconPicker, iconPickerMethods)
+
+    const renderIconWrapper = () => {
+      const { showIconTitle } = props
+      const { selectIcon, iconList } = reactData
+      const isVScrollbar = computeIsVScrollbar.value
+      const scrollbarProps = computeScrollbarProps.value
+
+      if (!iconList.length) {
+        return h(
+          'div',
+          {
+            class: 'vxe-ico-picker--empty-placeholder'
+          },
+          getI18n('vxe.iconPicker.emptyText')
+        )
+      }
+      const iconVNs = iconList.map((item) => {
+        const { iconRender } = item
+        const compConf = iconRender ? renderer.get(iconRender.name) : null
+        const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null
+        return h(
+          'div',
+          {
+            class: [
+              'vxe-ico-picker--item',
+              {
+                'is--selected': selectIcon === item.icon
+              }
+            ]
+          },
+          [
+            h(
+              'div',
+              {
+                class: 'vxe-ico-picker--item-inner',
+                onClick(evnt) {
+                  const isDisabled = computeIsDisabled.value
+                  if (!isDisabled) {
+                    handleClickIconEvent(evnt, item)
+                  }
+                }
+              },
+              [
+                h(
+                  'div',
+                  {
+                    class: 'vxe-ico-picker--item-icon'
+                  },
+                  iconMethod && iconRender
+                    ? getSlotVNs(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item }))
+                    : [
+                        h('i', {
+                          class: item.icon || ''
+                        })
+                      ]
+                ),
+                showIconTitle
+                  ? h(
+                    'div',
+                    {
+                      class: 'vxe-ico-picker--item-title'
+                    },
+                      `${item.title || ''}`
+                  )
+                  : renderEmptyElement($xeIconPicker)
+              ]
+            )
+          ]
+        )
+      })
+      if (isVScrollbar) {
+        return h(
+          VxeScrollbarComponent,
+          {
+            class: 'vxe-ico-picker--scrollbar-list-wrapper',
+            ...scrollbarProps
+          },
+          {
+            default: () => iconVNs
+          }
+        )
+      }
+      return h(
+        'div',
+        {
+          class: 'vxe-ico-picker--list-wrapper'
+        },
+        [
+          h(
+            'div',
+            {
+              class: 'vxe-ico-picker--list'
+            },
+            iconVNs
+          )
+        ]
+      )
+    }
+
+    const renderIconView = () => {
+      const { selectIcon } = reactData
+      const selectIconItem = computeSelectIconItem.value
+      if (selectIconItem) {
+        const { iconRender } = selectIconItem
+        const compConf = iconRender ? renderer.get(iconRender.name) : null
+        const oIconMethod = compConf ? compConf.renderIconPickerOptionIcon : null
+        if (oIconMethod && iconRender) {
+          return h(
+            'div',
+            {
+              key: 'inc',
+              class: 'vxe-ico-picker--icon'
+            },
+            getSlotVNs(oIconMethod(iconRender, { $iconPicker: $xeIconPicker, option: selectIconItem }))
+          )
+        }
+      }
+      return h(
+        'div',
+        {
+          key: 'ind',
+          class: 'vxe-ico-picker--icon'
+        },
+        [
+          h('i', {
+            class: selectIcon
+          })
+        ]
+      )
+    }
+
+    const renderVN = () => {
+      const { className, clearable, filterable } = props
+      const { initialized, isActivated, isAniVisible, visiblePanel, selectIcon } = reactData
+      const vSize = computeSize.value
+      const isDisabled = computeIsDisabled.value
+      const btnTransfer = computeBtnTransfer.value
+      const formReadonly = computeFormReadonly.value
+
+      if (formReadonly) {
+        return h(
+          'div',
+          {
+            ref: refElem,
+            class: ['vxe-ico-picker--readonly', className]
+          },
+          [
+            h('i', {
+              class: selectIcon
+            })
+          ]
+        )
+      }
+      const currStyle = computeCurrStyle.value
+      const inpPlaceholder = computeInpPlaceholder.value
+      const wrapperStyle = computeWrapperStyle.value
+      const popupOpts = computePopupOpts.value
+      const { appendTo } = popupOpts
+      const ppClassName = popupOpts.className || props.popupClassName
+      return h(
+        'div',
+        {
+          ref: refElem,
+          class: [
+            'vxe-ico-picker',
+            className ? (XEUtils.isFunction(className) ? className({ $iconPicker: $xeIconPicker }) : className) : '',
+            {
+              [`size--${vSize}`]: vSize,
+              'show--clear': clearable && !isDisabled && !!selectIcon,
+              'is--visible': visiblePanel,
+              'is--disabled': isDisabled,
+              'is--active': isActivated
+            }
+          ],
+          style: currStyle
+        },
+        [
+          h(
+            'div',
+            {
+              class: 'vxe-ico-picker--inner',
+              onClick: clickEvent
+            },
+            [
+              h('input', {
+                ref: refInput,
+                class: 'vxe-ico-picker--input',
+                onFocus: focusEvent,
+                onBlur: blurEvent
+              }),
+              selectIcon
+                ? renderIconView()
+                : h(
+                  'div',
+                  {
+                    class: 'vxe-ico-picker--placeholder'
+                  },
+                  inpPlaceholder
+                ),
+              h(
+                'div',
+                {
+                  class: 'vxe-ico-picker--suffix'
+                },
+                [
+                  h(
+                    'div',
+                    {
+                      class: 'vxe-ico-picker--clear-icon',
+                      onClick: clearEvent
+                    },
+                    [
+                      h('i', {
+                        class: getIcon().INPUT_CLEAR
+                      })
+                    ]
+                  ),
+                  h(
+                    'div',
+                    {
+                      class: 'vxe-ico-picker--suffix-icon'
+                    },
+                    [
+                      h('i', {
+                        class: visiblePanel ? getIcon().ICON_PICKER_OPEN : getIcon().ICON_PICKER_CLOSE
+                      })
+                    ]
+                  )
+                ]
+              )
+            ]
+          ),
+          h(
+            Teleport,
+            {
+              to: getPopupContainer(appendTo),
+              disabled: btnTransfer ? !initialized : true
+            },
+            [
+              h(
+                'div',
+                {
+                  ref: refOptionPanel,
+                  class: [
+                    'vxe-table--ignore-clear vxe-ico-picker--panel',
+                    ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $iconPicker: $xeIconPicker }) : ppClassName) : '',
+                    {
+                      [`size--${vSize}`]: vSize,
+                      'is--transfer': btnTransfer,
+                      'ani--leave': isAniVisible,
+                      'ani--enter': visiblePanel
+                    }
+                  ],
+                  placement: reactData.panelPlacement,
+                  style: reactData.panelStyle
+                },
+                [
+                  initialized && (visiblePanel || isAniVisible)
+                    ? h(
+                      'div',
+                      {
+                        class: 'vxe-ico-picker--panel-wrapper',
+                        style: wrapperStyle
+                      },
+                      [
+                        filterable
+                          ? h(
+                            'div',
+                            {
+                              class: 'vxe-ico-picker--panel-search'
+                            },
+                            [
+                              h(VxeInputComponent, {
+                                ref: refInpSearch,
+                                class: 'vxe-ico-picker-search--input',
+                                modelValue: reactData.searchValue,
+                                type: 'text',
+                                clearable: true,
+                                disabled: false,
+                                readonly: false,
+                                placeholder: getI18n('vxe.iconPicker.search'),
+                                prefixIcon: getIcon().INPUT_SEARCH,
+                                'onUpdate:modelValue': modelSearchEvent,
+                                onFocus: focusSearchEvent,
+                                onChange: triggerSearchEvent,
+                                onSearch: triggerSearchEvent
+                              })
+                            ]
+                          )
+                          : renderEmptyElement($xeIconPicker),
+                        renderIconWrapper()
+                      ]
+                    )
+                    : renderEmptyElement($xeIconPicker)
+                ]
+              )
+            ]
+          )
+        ]
+      )
+    }
+
+    reactData.selectIcon = `${props.modelValue || ''}`
+    handleData()
+
+    watch(
+      () => props.modelValue,
+      (val) => {
+        reactData.selectIcon = `${val || ''}`
+      }
+    )
+
+    watch(computeIconList, () => {
+      handleData()
+    })
+
+    onMounted(() => {
+      globalEvents.on($xeIconPicker, 'mousedown', handleGlobalMousedownEvent)
+      globalEvents.on($xeIconPicker, 'keydown', handleGlobalKeydownEvent)
+      globalEvents.on($xeIconPicker, 'blur', handleGlobalBlurEvent)
+      globalEvents.on($xeIconPicker, 'resize', handleGlobalResizeEvent)
+      globalEvents.on($xeIconPicker, 'scroll', handleGlobalScrollEvent)
+    })
+
+    onBeforeUnmount(() => {
+      globalEvents.off($xeIconPicker, 'mousewheel')
+      globalEvents.off($xeIconPicker, 'mousedown')
+      globalEvents.off($xeIconPicker, 'keydown')
+      globalEvents.off($xeIconPicker, 'blur')
+      globalEvents.off($xeIconPicker, 'resize')
+      globalEvents.off($xeIconPicker, 'scroll')
+      XEUtils.assign(reactData, createReactData())
+      XEUtils.assign(internalData, createInternalData())
+    })
+
+    provide('$xeIconPicker', $xeIconPicker)
+
+    $xeIconPicker.renderVN = renderVN
+
+    return $xeIconPicker
+  },
+  render() {
+    return this.renderVN()
+  }
+})