vxe-pc-ui 4.15.13 → 4.15.14

package/es/icon-picker/src/icon-picker.js

@@ -1,10 +1,31 @@
-import { h, Teleport, ref, inject, watch, computed, provide, onUnmounted, reactive, nextTick, onMounted } from 'vue';
+import { h, Teleport, ref, inject, watch, computed, provide, onBeforeUnmount, reactive, nextTick, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, getIcon, getI18n, globalEvents, createEvent, renderer, useSize, GLOBAL_EVENT_KEYS, renderEmptyElement } from '../../ui';
-import { getEventTargetNode, updatePanelPlacement } from '../../ui/src/dom';
+import { getEventTargetNode, toCssUnit, updatePanelPlacement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
+import VxeInputComponent from '../../input/src/input';
+function createReactData() {
+    return {
+        initialized: false,
+        selectIcon: '',
+        panelIndex: 0,
+        panelStyle: {},
+        panelPlacement: null,
+        visiblePanel: false,
+        isAniVisible: false,
+        isActivated: false,
+        searchValue: '',
+        iconGroups: []
+    };
+}
+function createInternalData() {
+    return {
+        fullList: []
+        // hpTimeout: undefined
+    };
+}
 export default defineVxeComponent({
     name: 'VxeIconPicker',
     props: {
@@ -33,6 +54,11 @@ export default defineVxeComponent({
             type: Boolean,
             default: null
         },
+        filterable: {
+            type: Boolean,
+            default: () => getConfig().iconPicker.filterable
+        },
+        filterConfig: Object,
         icons: Array,
         placement: String,
         popupConfig: Object,
@@ -56,22 +82,12 @@ export default defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive({
-            initialized: false,
-            selectIcon: `${props.modelValue || ''}`,
-            panelIndex: 0,
-            panelStyle: {},
-            panelPlacement: null,
-            visiblePanel: false,
-            isAniVisible: false,
-            isActivated: false
-        });
-        const internalData = {
-        // hpTimeout: undefined
-        };
+        const reactData = reactive(createReactData());
+        const internalData = createInternalData();
         const refElem = ref();
         const refInput = ref();
         const refOptionPanel = ref();
+        const refInpSearch = ref();
         const refMaps = {
             refElem
         };
@@ -131,6 +147,20 @@ export default defineVxeComponent({
             }
             return getI18n('vxe.base.pleaseSelect');
         });
+        const computePanelStyle = computed(() => {
+            const popupOpts = computePopupOpts.value;
+            const { chunkSize, height, maxHeight } = popupOpts;
+            const stys = {
+                '--vxe-ui-icon-picker-item-width': `${100 / (chunkSize || 4)}%`
+            };
+            if (height) {
+                stys['--vxe-ui-icon-picker-panel-height'] = toCssUnit(height);
+            }
+            else if (maxHeight) {
+                stys['--vxe-ui-icon-picker-panel-max-height'] = toCssUnit(maxHeight);
+            }
+            return stys;
+        });
         const computeIconList = computed(() => {
             let { icons } = props;
             if (!icons || !icons.length) {
@@ -150,13 +180,12 @@ export default defineVxeComponent({
                 };
             });
         });
+        const computeFilterOpts = computed(() => {
+            return Object.assign({}, getConfig().iconPicker.filterConfig, props.filterConfig);
+        });
         const computePopupOpts = computed(() => {
             return Object.assign({}, getConfig().iconPicker.popupConfig, props.popupConfig);
         });
-        const computeIconGroupList = computed(() => {
-            const iconList = computeIconList.value;
-            return XEUtils.chunk(iconList, 4);
-        });
         const computeSelectIconItem = computed(() => {
             const { selectIcon } = reactData;
             const iconList = computeIconList.value;
@@ -174,6 +203,7 @@ export default defineVxeComponent({
             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,
@@ -183,6 +213,12 @@ export default defineVxeComponent({
                 const panelStyle = Object.assign(ppObj.style, {
                     zIndex: panelIndex
                 });
+                if (width) {
+                    Object.assign(panelStyle, {
+                        width: toCssUnit(width),
+                        minWidth: undefined
+                    });
+                }
                 reactData.panelStyle = panelStyle;
                 reactData.panelPlacement = ppObj.placement;
             };
@@ -216,6 +252,26 @@ export default defineVxeComponent({
                 reactData.isAniVisible = false;
             }, 350);
         };
+        const handleData = () => {
+            const { modelValue } = props;
+            const { searchValue } = reactData;
+            const filterOpts = computeFilterOpts.value;
+            const { filterMethod } = filterOpts;
+            const popupOpts = computePopupOpts.value;
+            const { chunkSize } = popupOpts;
+            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.iconGroups = XEUtils.chunk(visibleList, chunkSize || 4);
+        };
         const changeEvent = (evnt, selectValue) => {
             reactData.selectIcon = selectValue;
             if (selectValue !== props.modelValue) {
@@ -400,45 +456,58 @@ export default defineVxeComponent({
             changeEvent(evnt, value);
             hideOptionPanel();
         };
+        const modelSearchEvent = (value) => {
+            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 } = reactData;
-            const iconGroupList = computeIconGroupList.value;
-            const isDisabled = computeIsDisabled.value;
+            const { selectIcon, iconGroups } = reactData;
             return h('div', {
                 class: 'vxe-ico-picker--list-wrapper'
-            }, iconGroupList.map(list => {
+            }, iconGroups.map(list => {
                 return h('div', {
                     class: 'vxe-ico-picker--list'
                 }, list.map(item => {
                     const { iconRender } = item;
                     const compConf = iconRender ? renderer.get(iconRender.name) : null;
-                    const oIconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
+                    const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
                     return h('div', {
                         class: ['vxe-ico-picker--item', {
                                 'is--selected': selectIcon === item.icon
-                            }],
-                        onClick(evnt) {
-                            if (!isDisabled) {
-                                handleClickIconEvent(evnt, item);
-                            }
-                        }
+                            }]
                     }, [
                         h('div', {
-                            class: 'vxe-ico-picker--item-icon'
-                        }, oIconMethod && iconRender
-                            ? getSlotVNs(oIconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item }))
-                            : [
-                                h('i', {
-                                    class: item.icon || ''
-                                })
-                            ]),
-                        showIconTitle
-                            ? h('div', {
-                                class: 'vxe-ico-picker--item-title'
-                            }, `${item.title || ''}`)
-                            : renderEmptyElement($xeIconPicker)
+                            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)
+                        ])
                     ]);
                 }));
             }));
@@ -467,13 +536,14 @@ export default defineVxeComponent({
             ]);
         };
         const renderVN = () => {
-            const { className, clearable } = props;
+            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;
             const inpPlaceholder = computeInpPlaceholder.value;
+            const panelStyle = computePanelStyle.value;
             const popupOpts = computePopupOpts.value;
             const ppClassName = popupOpts.className || props.popupClassName;
             if (formReadonly) {
@@ -548,8 +618,30 @@ export default defineVxeComponent({
                     }, [
                         initialized && (visiblePanel || isAniVisible)
                             ? h('div', {
-                                class: 'vxe-ico-picker--panel-wrapper'
+                                class: 'vxe-ico-picker--panel-wrapper',
+                                style: panelStyle
                             }, [
+                                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)
@@ -557,20 +649,27 @@ export default defineVxeComponent({
                 ])
             ]);
         };
+        reactData.selectIcon = `${props.modelValue || ''}`;
+        handleData();
         watch(() => props.modelValue, (val) => {
             reactData.selectIcon = `${val || ''}`;
         });
+        watch(computeIconList, () => {
+            handleData();
+        });
         onMounted(() => {
             globalEvents.on($xeIconPicker, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeIconPicker, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeIconPicker, 'keydown', handleGlobalKeydownEvent);
             globalEvents.on($xeIconPicker, 'blur', handleGlobalBlurEvent);
         });
-        onUnmounted(() => {
+        onBeforeUnmount(() => {
             globalEvents.off($xeIconPicker, 'mousewheel');
             globalEvents.off($xeIconPicker, 'mousedown');
             globalEvents.off($xeIconPicker, 'keydown');
             globalEvents.off($xeIconPicker, 'blur');
+            XEUtils.assign(reactData, createReactData());
+            XEUtils.assign(internalData, createInternalData());
         });
         provide('$xeIconPicker', $xeIconPicker);
         $xeIconPicker.renderVN = renderVN;

package/es/icon-picker/style.css

@@ -7,6 +7,11 @@
   border-radius: var(--vxe-ui-base-border-radius);
   background-color: var(--vxe-ui-layout-background-color);
 }
+.vxe-ico-picker.is--disabled {
+  background-color: var(--vxe-ui-input-disabled-background-color);
+  color: var(--vxe-ui-font-disabled-color);
+  cursor: no-drop;
+}
 .vxe-ico-picker.show--clear:hover .vxe-ico-picker--clear-icon {
   display: block;
 }
@@ -64,6 +69,15 @@
   transition: transform 0.2s ease-in-out;
 }
 
+.vxe-ico-picker--panel-search {
+  display: block;
+  flex-shrink: 0;
+  padding: var(--vxe-ui-layout-padding-default);
+}
+.vxe-ico-picker--panel-search .vxe-ico-picker-search--input {
+  width: 100%;
+}
+
 .vxe-ico-picker--readonly {
   color: var(--vxe-ui-font-color);
   display: inline-flex;
@@ -83,10 +97,17 @@
   color: var(--vxe-ui-font-primary-color);
 }
 
+.vxe-ico-picker--all-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
 .vxe-ico-picker--list-wrapper {
   overflow-x: hidden;
   overflow-y: auto;
-  max-height: 22.3em;
+  height: var(--vxe-ui-icon-picker-panel-height);
+  max-height: var(--vxe-ui-icon-picker-panel-max-height, var(--vxe-ui-icon-picker-panel-height, 22.3em));
   padding: var(--vxe-ui-layout-padding-qtr);
 }
 
@@ -98,17 +119,20 @@
 .vxe-ico-picker--item {
   display: flex;
   flex-direction: column;
-  width: 4.8em;
+  min-width: 4.8em;
+  width: var(--vxe-ui-icon-picker-item-width, 4.8em);
+  padding: var(--vxe-ui-layout-padding-half);
+}
+.vxe-ico-picker--item .vxe-ico-picker--item-inner {
   padding: 0.2em;
   border: 1px solid var(--vxe-ui-input-border-color);
   border-radius: var(--vxe-ui-base-border-radius);
-  margin: var(--vxe-ui-layout-padding-half);
   cursor: pointer;
 }
-.vxe-ico-picker--item:hover {
+.vxe-ico-picker--item .vxe-ico-picker--item-inner:hover {
   background-color: var(--vxe-ui-base-hover-background-color);
 }
-.vxe-ico-picker--item.is--selected {
+.vxe-ico-picker--item.is--selected .vxe-ico-picker--item-inner {
   color: var(--vxe-ui-font-primary-color);
   border-color: var(--vxe-ui-font-primary-color);
 }

package/es/icon-picker/style.min.css

@@ -1 +1 @@
-.vxe-ico-picker{position:relative;display:inline-block;color:var(--vxe-ui-font-color);width:100px;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color)}.vxe-ico-picker.show--clear:hover .vxe-ico-picker--clear-icon{display:block}.vxe-ico-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--inner{display:flex;flex-direction:row;width:100%;padding:0 .5em}.vxe-ico-picker--input{position:absolute;z-index:-1;width:1px;height:1px;outline:0;border:0}.vxe-ico-picker--icon{flex-grow:1;display:inline-flex;flex-direction:row;align-items:center;justify-content:left;padding:0 .5em}.vxe-ico-picker--icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--placeholder{flex-grow:1;color:var(--vxe-ui-input-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-ico-picker--suffix{display:flex;flex-direction:row;flex-shrink:0;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--suffix .vxe-ico-picker--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-ico-picker--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-ico-picker--clear-icon{display:none;padding-right:.5em;height:100%;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-ico-picker--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--list-wrapper{overflow-x:hidden;overflow-y:auto;max-height:22.3em;padding:var(--vxe-ui-layout-padding-qtr)}.vxe-ico-picker--list{display:flex;flex-direction:row}.vxe-ico-picker--item{display:flex;flex-direction:column;width:4.8em;padding:.2em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);margin:var(--vxe-ui-layout-padding-half);cursor:pointer}.vxe-ico-picker--item:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-ico-picker--item.is--selected{color:var(--vxe-ui-font-primary-color);border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--item-icon{flex-grow:1;display:flex;flex-direction:row;align-items:center;justify-content:center;height:1.5em;font-size:1.4em}.vxe-ico-picker--item-icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--item-title{padding:0 .2em;line-height:1.3em;flex-shrink:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9em}.vxe-ico-picker--item-icon,.vxe-ico-picker--item-title{width:100%}.vxe-ico-picker--panel-wrapper{position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-ico-picker--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-ico-picker--panel:not(.is--transfer){min-width:100%}.vxe-ico-picker--panel.is--transfer{position:fixed}.vxe-ico-picker--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-ico-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-ico-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-ico-picker{height:var(--vxe-ui-input-height-default);line-height:var(--vxe-ui-input-height-default)}.vxe-ico-picker.size--medium{height:var(--vxe-ui-input-height-medium);line-height:var(--vxe-ui-input-height-medium)}.vxe-ico-picker.size--small{height:var(--vxe-ui-input-height-small);line-height:var(--vxe-ui-input-height-small)}.vxe-ico-picker.size--mini{height:var(--vxe-ui-input-height-mini);line-height:var(--vxe-ui-input-height-mini)}.vxe-ico-picker,.vxe-ico-picker--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-ico-picker--panel.size--medium,.vxe-ico-picker.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-ico-picker--panel.size--small,.vxe-ico-picker.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-ico-picker--panel.size--mini,.vxe-ico-picker.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-ico-picker{position:relative;display:inline-block;color:var(--vxe-ui-font-color);width:100px;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color)}.vxe-ico-picker.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color);color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-ico-picker.show--clear:hover .vxe-ico-picker--clear-icon{display:block}.vxe-ico-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--inner{display:flex;flex-direction:row;width:100%;padding:0 .5em}.vxe-ico-picker--input{position:absolute;z-index:-1;width:1px;height:1px;outline:0;border:0}.vxe-ico-picker--icon{flex-grow:1;display:inline-flex;flex-direction:row;align-items:center;justify-content:left;padding:0 .5em}.vxe-ico-picker--icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--placeholder{flex-grow:1;color:var(--vxe-ui-input-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-ico-picker--suffix{display:flex;flex-direction:row;flex-shrink:0;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--suffix .vxe-ico-picker--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-ico-picker--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-ico-picker--panel-search .vxe-ico-picker-search--input{width:100%}.vxe-ico-picker--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-ico-picker--clear-icon{display:none;padding-right:.5em;height:100%;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-ico-picker--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--all-list{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-ico-picker--list-wrapper{overflow-x:hidden;overflow-y:auto;height:var(--vxe-ui-icon-picker-panel-height);max-height:var(--vxe-ui-icon-picker-panel-max-height,var(--vxe-ui-icon-picker-panel-height,22.3em));padding:var(--vxe-ui-layout-padding-qtr)}.vxe-ico-picker--list{display:flex;flex-direction:row}.vxe-ico-picker--item{display:flex;flex-direction:column;min-width:4.8em;width:var(--vxe-ui-icon-picker-item-width,4.8em);padding:var(--vxe-ui-layout-padding-half)}.vxe-ico-picker--item .vxe-ico-picker--item-inner{padding:.2em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer}.vxe-ico-picker--item .vxe-ico-picker--item-inner:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-ico-picker--item.is--selected .vxe-ico-picker--item-inner{color:var(--vxe-ui-font-primary-color);border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--item-icon{flex-grow:1;display:flex;flex-direction:row;align-items:center;justify-content:center;height:1.5em;font-size:1.4em}.vxe-ico-picker--item-icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--item-title{padding:0 .2em;line-height:1.3em;flex-shrink:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9em}.vxe-ico-picker--item-icon,.vxe-ico-picker--item-title{width:100%}.vxe-ico-picker--panel-wrapper{position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-ico-picker--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-ico-picker--panel:not(.is--transfer){min-width:100%}.vxe-ico-picker--panel.is--transfer{position:fixed}.vxe-ico-picker--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-ico-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-ico-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-ico-picker{height:var(--vxe-ui-input-height-default);line-height:var(--vxe-ui-input-height-default)}.vxe-ico-picker.size--medium{height:var(--vxe-ui-input-height-medium);line-height:var(--vxe-ui-input-height-medium)}.vxe-ico-picker.size--small{height:var(--vxe-ui-input-height-small);line-height:var(--vxe-ui-input-height-small)}.vxe-ico-picker.size--mini{height:var(--vxe-ui-input-height-mini);line-height:var(--vxe-ui-input-height-mini)}.vxe-ico-picker,.vxe-ico-picker--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-ico-picker--panel.size--medium,.vxe-ico-picker.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-ico-picker--panel.size--small,.vxe-ico-picker.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-ico-picker--panel.size--mini,.vxe-ico-picker.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/es/language/ar-EG.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'تجميد الحق',
             cancelFixed: 'إلغاء التجميد'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} سنوات'
         },

package/es/language/de-DE.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Rechts einfrieren',
             cancelFixed: 'Säulen entfernen'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} Jahre'
         },

package/es/language/en-US.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Freeze right',
             cancelFixed: 'Unfreeze'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} years'
         },

package/es/language/es-ES.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Congelarse a la derecha',
             cancelFixed: 'Columnas desenfrenado'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} años'
         },

package/es/language/fr-FR.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Geler à droite',
             cancelFixed: 'Dégeler'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} ans'
         },

package/es/language/hu-HU.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Jobbra fagy',
             cancelFixed: 'Kiolvaszt'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} Évek'
         },

package/es/language/hy-AM.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: '冻结在右侧',
             cancelFixed: '取消冻结列'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} 年'
         },

package/es/language/id-ID.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Bekukan benar',
             cancelFixed: 'Unfreeze'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} tahun'
         },

package/es/language/it-IT.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Freeze Right',
             cancelFixed: 'Scongelare'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} anni'
         },

package/es/language/ja-JP.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: '右にフリーズします',
             cancelFixed: '凍結柱'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0}年'
         },

package/es/language/ko-KR.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: '오른쪽에서 얼립니다',
             cancelFixed: '열매 열이 없습니다'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} 년'
         },

package/es/language/ms-MY.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Membekukan di sebelah kanan',
             cancelFixed: 'Lajur yang tidak jelas'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} tahun'
         },

package/es/language/nb-NO.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Frys til høyre',
             cancelFixed: 'Frigjøre'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} år'
         },

package/es/language/pt-BR.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Congele à direita',
             cancelFixed: 'Descongelar'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} anos'
         },

package/es/language/ru-RU.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Заморозить справа',
             cancelFixed: 'Размороженные столбцы'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} Годы'
         },

package/es/language/th-TH.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'แช่แข็งขวา',
             cancelFixed: 'สูดดม'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} ปี'
         },

package/es/language/ug-CN.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'ئوڭ ياندا توڭلىتىش',
             cancelFixed: 'قۇر توڭلىتىشنى ئەمەلدىن قالدۇرۇش'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} يىل'
         },

package/es/language/uk-UA.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Заморожуйте право',
             cancelFixed: 'Розморожувати'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} років'
         },

package/es/language/uz-UZ.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: "O'ng tomonda muzlatib qo'ying",
             cancelFixed: "Urug'lar ustunini"
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} yillar'
         },

package/es/language/vi-VN.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: 'Đóng băng bên phải',
             cancelFixed: 'Mở ra cột'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} năm'
         },

package/es/language/zh-CHT.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: '凍結在右側',
             cancelFixed: '取消凍結列'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} 年'
         },

package/es/language/zh-CN.js

@@ -287,6 +287,9 @@ export default {
             fixedRight: '冻结在右侧',
             cancelFixed: '取消冻结列'
         },
+        iconPicker: {
+            search: '搜索'
+        },
         datePicker: {
             yearTitle: '{0} 年'
         },