vxe-pc-ui 3.15.12 → 3.15.14

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

@@ -1,9 +1,30 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, getIcon, getI18n, globalEvents, renderer, createEvent, globalMixins, 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 {
     name: 'VxeIconPicker',
     mixins: [
@@ -39,6 +60,11 @@ export default {
             type: Boolean,
             default: null
         },
+        filterable: {
+            type: Boolean,
+            default: () => getConfig().iconPicker.filterable
+        },
+        filterConfig: Object,
         icons: Array,
         placement: String,
         popupConfig: Object,
@@ -72,24 +98,8 @@ export default {
         };
     },
     data() {
-        const reactData = {
-            initialized: false,
-            selectIcon: '',
-            panelIndex: 0,
-            panelStyle: {},
-            panelPlacement: null,
-            visiblePanel: false,
-            isAniVisible: false,
-            isActivated: false
-        };
-        const internalData = {
-            hpTimeout: undefined
-        };
-        return {
-            xID: XEUtils.uniqueId(),
-            reactData,
-            internalData
-        };
+        const reactData = createReactData();
+        return Object.assign(Object.assign({}, {}), { xID: XEUtils.uniqueId(), reactData });
     },
     computed: Object.assign(Object.assign({}, {}), { computeFormReadonly() {
             const $xeIconPicker = this;
@@ -153,6 +163,21 @@ export default {
             }
             return getI18n('vxe.base.pleaseSelect');
         },
+        computePanelStyle() {
+            const $xeIconPicker = this;
+            const popupOpts = $xeIconPicker.computePopupOpts;
+            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;
+        },
         computeIconList() {
             const $xeIconPicker = this;
             const props = $xeIconPicker;
@@ -174,6 +199,11 @@ export default {
                 };
             });
         },
+        computeFilterOpts() {
+            const $xeIconPicker = this;
+            const props = $xeIconPicker;
+            return Object.assign({}, getConfig().iconPicker.filterConfig, props.filterConfig);
+        },
         computePopupOpts() {
             const $xeIconPicker = this;
             const props = $xeIconPicker;
@@ -274,6 +304,7 @@ export default {
             const panelElem = $xeIconPicker.$refs.refOptionPanel;
             const btnTransfer = $xeIconPicker.computeBtnTransfer;
             const popupOpts = $xeIconPicker.computePopupOpts;
+            const { width } = popupOpts;
             const handleStyle = () => {
                 const ppObj = updatePanelPlacement(targetElem, panelElem, {
                     placement: popupOpts.placement || placement,
@@ -283,6 +314,12 @@ export default {
                 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;
             };
@@ -329,6 +366,29 @@ export default {
                 reactData.isAniVisible = false;
             }, 350);
         },
+        handleData() {
+            const $xeIconPicker = this;
+            const props = $xeIconPicker;
+            const reactData = $xeIconPicker.reactData;
+            const { value: modelValue } = props;
+            const { searchValue } = reactData;
+            const filterOpts = $xeIconPicker.computeFilterOpts;
+            const { filterMethod } = filterOpts;
+            const popupOpts = $xeIconPicker.computePopupOpts;
+            const { chunkSize } = popupOpts;
+            const iconList = $xeIconPicker.computeIconList;
+            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);
+        },
         changeEvent(evnt, selectValue) {
             const $xeIconPicker = this;
             const props = $xeIconPicker;
@@ -491,6 +551,24 @@ export default {
             $xeIconPicker.changeEvent(evnt, value);
             $xeIconPicker.hideOptionPanel();
         },
+        modelSearchEvent(value) {
+            const $xeIconPicker = this;
+            const reactData = $xeIconPicker.reactData;
+            reactData.searchValue = value;
+        },
+        focusSearchEvent() {
+            const $xeIconPicker = this;
+            const reactData = $xeIconPicker.reactData;
+            reactData.isActivated = true;
+        },
+        handleSearchEvent() {
+            const $xeIconPicker = this;
+            $xeIconPicker.handleData();
+        },
+        triggerSearchEvent: XEUtils.debounce(function () {
+            const $xeIconPicker = this;
+            $xeIconPicker.handleSearchEvent();
+        }, 350, { trailing: true }),
         //
         // Render
         //
@@ -499,44 +577,47 @@ export default {
             const props = $xeIconPicker;
             const reactData = $xeIconPicker.reactData;
             const { showIconTitle } = props;
-            const { selectIcon } = reactData;
-            const iconGroupList = $xeIconPicker.computeIconGroupList;
-            const isDisabled = $xeIconPicker.computeIsDisabled;
+            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
-                            }],
-                        on: {
-                            click(evnt) {
-                                if (!isDisabled) {
-                                    $xeIconPicker.handleClickIconEvent(evnt, item);
-                                }
-                            }
-                        }
+                            }]
                     }, [
                         h('div', {
-                            class: 'vxe-ico-picker--item-icon'
-                        }, oIconMethod && iconRender
-                            ? getSlotVNs(oIconMethod.call($xeIconPicker, h, 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',
+                            on: {
+                                click(evnt) {
+                                    const isDisabled = $xeIconPicker.computeIsDisabled;
+                                    if (!isDisabled) {
+                                        $xeIconPicker.handleClickIconEvent(evnt, item);
+                                    }
+                                }
+                            }
+                        }, [
+                            h('div', {
+                                class: 'vxe-ico-picker--item-icon'
+                            }, iconMethod && iconRender
+                                ? getSlotVNs(iconMethod(h, iconRender, { $iconPicker: $xeIconPicker, option: item }))
+                                : [
+                                    h('i', {
+                                        class: item.icon || ''
+                                    })
+                                ]),
+                            showIconTitle
+                                ? h('div', {
+                                    class: 'vxe-ico-picker--item-title'
+                                }, `${item.title || ''}`)
+                                : renderEmptyElement($xeIconPicker)
+                        ])
                     ]);
                 }));
             }));
@@ -570,13 +651,14 @@ export default {
             const $xeIconPicker = this;
             const props = $xeIconPicker;
             const reactData = $xeIconPicker.reactData;
-            const { className, clearable } = props;
+            const { className, clearable, filterable } = props;
             const { initialized, isActivated, isAniVisible, visiblePanel, selectIcon } = reactData;
             const vSize = $xeIconPicker.computeSize;
             const isDisabled = $xeIconPicker.computeIsDisabled;
             const btnTransfer = $xeIconPicker.computeBtnTransfer;
             const formReadonly = $xeIconPicker.computeFormReadonly;
             const inpPlaceholder = $xeIconPicker.computeInpPlaceholder;
+            const panelStyle = $xeIconPicker.computePanelStyle;
             const popupOpts = $xeIconPicker.computePopupOpts;
             const ppClassName = popupOpts.className || props.popupClassName;
             if (formReadonly) {
@@ -655,8 +737,34 @@ export default {
                 }, [
                     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',
+                                        props: {
+                                            value: reactData.searchValue,
+                                            type: 'text',
+                                            clearable: true,
+                                            disabled: false,
+                                            readonly: false,
+                                            placeholder: getI18n('vxe.iconPicker.search'),
+                                            prefixIcon: getIcon().INPUT_SEARCH
+                                        },
+                                        on: {
+                                            'model-value': $xeIconPicker.modelSearchEvent,
+                                            focus: $xeIconPicker.focusSearchEvent,
+                                            change: $xeIconPicker.triggerSearchEvent,
+                                            search: $xeIconPicker.triggerSearchEvent
+                                        }
+                                    })
+                                ])
+                                : renderEmptyElement($xeIconPicker),
                             $xeIconPicker.renderIconWrapper(h)
                         ])
                         : renderEmptyElement($xeIconPicker)
@@ -669,13 +777,19 @@ export default {
             const $xeIconPicker = this;
             const reactData = $xeIconPicker.reactData;
             reactData.selectIcon = `${val || ''}`;
+        },
+        computeIconList() {
+            const $xeIconPicker = this;
+            $xeIconPicker.handleData();
         }
     },
     created() {
         const $xeIconPicker = this;
         const props = $xeIconPicker;
         const reactData = $xeIconPicker.reactData;
+        $xeIconPicker.internalData = createInternalData();
         reactData.selectIcon = `${props.value || ''}`;
+        $xeIconPicker.handleData();
         globalEvents.on($xeIconPicker, 'mousewheel', $xeIconPicker.handleGlobalMousewheelEvent);
         globalEvents.on($xeIconPicker, 'mousedown', $xeIconPicker.handleGlobalMousedownEvent);
         globalEvents.on($xeIconPicker, 'keydown', $xeIconPicker.handleGlobalKeydownEvent);
@@ -683,6 +797,8 @@ export default {
     },
     beforeDestroy() {
         const $xeIconPicker = this;
+        const reactData = $xeIconPicker.reactData;
+        const internalData = $xeIconPicker.internalData;
         const panelElem = $xeIconPicker.$refs.refOptionPanel;
         if (panelElem && panelElem.parentNode) {
             panelElem.parentNode.removeChild(panelElem);
@@ -691,6 +807,8 @@ export default {
         globalEvents.off($xeIconPicker, 'mousedown');
         globalEvents.off($xeIconPicker, 'keydown');
         globalEvents.off($xeIconPicker, 'blur');
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
     },
     render(h) {
         return this.renderVN(h);

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} 年'
         },