vxe-pc-ui 3.15.13 → 3.15.14

package/lib/vxe-radio-button/style/style.css

@@ -1,6 +1,3 @@
-.vxe-radio--button .vxe-radio--label {
-  background-color: var(--vxe-ui-layout-background-color);
-}
 .vxe-radio--button:first-child .vxe-radio--label {
   border-left: 1px solid var(--vxe-ui-input-border-color);
   border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);
@@ -8,10 +5,6 @@
 .vxe-radio--button:last-child .vxe-radio--label {
   border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0;
 }
-.vxe-radio--button > input:checked + .vxe-radio--label {
-  color: #fff;
-  background-color: var(--vxe-ui-font-primary-color);
-}
 .vxe-radio--button .vxe-radio--label {
   padding: 0 1em;
   line-height: calc(var(--vxe-ui-button-height-default) - 2px);
@@ -20,14 +13,167 @@
   border-color: var(--vxe-ui-input-border-color);
   border-width: 1px 1px 1px 0;
   max-width: 50em;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.vxe-radio--button > input:focus + .vxe-radio--label {
+
+.vxe-radio--button > input:checked + .vxe-radio--label {
+  color: #fff;
+  border-color: var(--vxe-ui-font-primary-color);
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):hover {
+  background-color: var(--vxe-ui-font-primary-lighten-color);
+  border-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):active {
+  background-color: var(--vxe-ui-font-primary-darken-color);
+  border-color: var(--vxe-ui-font-primary-darken-color);
+}
+.vxe-radio--button > input:checked + .vxe-radio--label.is--disabled {
+  border-color: var(--vxe-ui-font-primary-disabled-color);
+  background-color: var(--vxe-ui-font-primary-disabled-color);
+}
+
+.vxe-radio-group.theme--primary .vxe-radio--button > input:checked + .vxe-radio--label {
+  color: #fff;
   border-color: var(--vxe-ui-font-primary-color);
-  box-shadow: 0 0 0.2em 0 var(--vxe-ui-font-primary-color);
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-radio-group.theme--primary .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-font-primary-lighten-color);
+  border-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-radio-group.theme--primary .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-font-primary-darken-color);
+  border-color: var(--vxe-ui-font-primary-darken-color);
+}
+.vxe-radio-group.theme--primary .vxe-radio--button > input:checked + .vxe-radio--label.is--disabled {
+  border-color: var(--vxe-ui-font-primary-disabled-color);
+  background-color: var(--vxe-ui-font-primary-disabled-color);
+}
+.vxe-radio-group.theme--success .vxe-radio--button > input:checked + .vxe-radio--label {
+  color: #fff;
+  border-color: var(--vxe-ui-status-success-color);
+  background-color: var(--vxe-ui-status-success-color);
+}
+.vxe-radio-group.theme--success .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-status-success-lighten-color);
+  border-color: var(--vxe-ui-status-success-lighten-color);
+}
+.vxe-radio-group.theme--success .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-status-success-darken-color);
+  border-color: var(--vxe-ui-status-success-darken-color);
+}
+.vxe-radio-group.theme--success .vxe-radio--button > input:checked + .vxe-radio--label.is--disabled {
+  border-color: var(--vxe-ui-status-success-disabled-color);
+  background-color: var(--vxe-ui-status-success-disabled-color);
+}
+.vxe-radio-group.theme--info .vxe-radio--button > input:checked + .vxe-radio--label {
+  color: #fff;
+  border-color: var(--vxe-ui-status-info-color);
+  background-color: var(--vxe-ui-status-info-color);
+}
+.vxe-radio-group.theme--info .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-status-info-lighten-color);
+  border-color: var(--vxe-ui-status-info-lighten-color);
+}
+.vxe-radio-group.theme--info .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-status-info-darken-color);
+  border-color: var(--vxe-ui-status-info-darken-color);
+}
+.vxe-radio-group.theme--info .vxe-radio--button > input:checked + .vxe-radio--label.is--disabled {
+  border-color: var(--vxe-ui-status-info-disabled-color);
+  background-color: var(--vxe-ui-status-info-disabled-color);
+}
+.vxe-radio-group.theme--warning .vxe-radio--button > input:checked + .vxe-radio--label {
+  color: #fff;
+  border-color: var(--vxe-ui-status-warning-color);
+  background-color: var(--vxe-ui-status-warning-color);
+}
+.vxe-radio-group.theme--warning .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-status-warning-lighten-color);
+  border-color: var(--vxe-ui-status-warning-lighten-color);
+}
+.vxe-radio-group.theme--warning .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-status-warning-darken-color);
+  border-color: var(--vxe-ui-status-warning-darken-color);
+}
+.vxe-radio-group.theme--warning .vxe-radio--button > input:checked + .vxe-radio--label.is--disabled {
+  border-color: var(--vxe-ui-status-warning-disabled-color);
+  background-color: var(--vxe-ui-status-warning-disabled-color);
+}
+.vxe-radio-group.theme--danger .vxe-radio--button > input:checked + .vxe-radio--label {
+  color: #fff;
+  border-color: var(--vxe-ui-status-danger-color);
+  background-color: var(--vxe-ui-status-danger-color);
+}
+.vxe-radio-group.theme--danger .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-status-danger-lighten-color);
+  border-color: var(--vxe-ui-status-danger-lighten-color);
+}
+.vxe-radio-group.theme--danger .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-status-danger-darken-color);
+  border-color: var(--vxe-ui-status-danger-darken-color);
+}
+.vxe-radio-group.theme--danger .vxe-radio--button > input:checked + .vxe-radio--label.is--disabled {
+  border-color: var(--vxe-ui-status-danger-disabled-color);
+  background-color: var(--vxe-ui-status-danger-disabled-color);
+}
+.vxe-radio-group.theme--error .vxe-radio--button > input:checked + .vxe-radio--label {
+  color: #fff;
+  border-color: var(--vxe-ui-status-error-color);
+  background-color: var(--vxe-ui-status-error-color);
+}
+.vxe-radio-group.theme--error .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):hover {
+  color: #fff;
+  background-color: var(--vxe-ui-status-error-lighten-color);
+  border-color: var(--vxe-ui-status-error-lighten-color);
+}
+.vxe-radio-group.theme--error .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):active {
+  color: #fff;
+  background-color: var(--vxe-ui-status-error-darken-color);
+  border-color: var(--vxe-ui-status-error-darken-color);
+}
+.vxe-radio-group.theme--error .vxe-radio--button > input:checked + .vxe-radio--label.is--disabled {
+  border-color: var(--vxe-ui-status-error-disabled-color);
+  background-color: var(--vxe-ui-status-error-disabled-color);
+}
+.vxe-radio-group.theme--perfect .vxe-radio--button > input:checked + .vxe-radio--label {
+  color: var(--vxe-ui-font-color);
+  border-color: var(--vxe-ui-table-header-background-color);
+  background-color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-radio-group.theme--perfect .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):hover {
+  color: var(--vxe-ui-font-color);
+  background-color: var(--vxe-ui-table-header-background-color);
+  border-color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-radio-group.theme--perfect .vxe-radio--button > input:checked + .vxe-radio--label:not(.is--disabled):active {
+  color: var(--vxe-ui-font-color);
+  background-color: var(--vxe-ui-table-header-background-color);
+  border-color: var(--vxe-ui-table-header-background-color);
+}
+.vxe-radio-group.theme--perfect .vxe-radio--button > input:checked + .vxe-radio--label.is--disabled {
+  border-color: var(--vxe-ui-table-header-background-color);
+  background-color: var(--vxe-ui-table-header-background-color);
 }
+
 .vxe-radio--button.size--medium .vxe-radio--label {
   line-height: calc(var(--vxe-ui-button-height-medium) - 2px);
 }

package/lib/vxe-radio-button/style/style.min.css

@@ -1 +1 @@
-.vxe-radio--button .vxe-radio--label{background-color:var(--vxe-ui-layout-background-color)}.vxe-radio--button:first-child .vxe-radio--label{border-left:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-radio--button:last-child .vxe-radio--label{border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-radio--button>input:checked+.vxe-radio--label{color:#fff;background-color:var(--vxe-ui-font-primary-color)}.vxe-radio--button .vxe-radio--label{padding:0 1em;line-height:calc(var(--vxe-ui-button-height-default) - 2px);display:inline-block;border-style:solid;border-color:var(--vxe-ui-input-border-color);border-width:1px 1px 1px 0;max-width:50em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-radio--button>input:focus+.vxe-radio--label{border-color:var(--vxe-ui-font-primary-color);box-shadow:0 0 .2em 0 var(--vxe-ui-font-primary-color)}.vxe-radio--button.size--medium .vxe-radio--label{line-height:calc(var(--vxe-ui-button-height-medium) - 2px)}.vxe-radio--button.size--small .vxe-radio--label{line-height:calc(var(--vxe-ui-button-height-small) - 2px)}.vxe-radio--button.size--mini .vxe-radio--label{line-height:calc(var(--vxe-ui-button-height-mini) - 2px)}
+.vxe-radio--button:first-child .vxe-radio--label{border-left:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-radio--button:last-child .vxe-radio--label{border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-radio--button .vxe-radio--label{padding:0 1em;line-height:calc(var(--vxe-ui-button-height-default) - 2px);display:inline-block;border-style:solid;border-color:var(--vxe-ui-input-border-color);border-width:1px 1px 1px 0;max-width:50em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-radio--button>input:checked+.vxe-radio--label{color:#fff;border-color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-color)}.vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):hover{background-color:var(--vxe-ui-font-primary-lighten-color);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):active{background-color:var(--vxe-ui-font-primary-darken-color);border-color:var(--vxe-ui-font-primary-darken-color)}.vxe-radio--button>input:checked+.vxe-radio--label.is--disabled{border-color:var(--vxe-ui-font-primary-disabled-color);background-color:var(--vxe-ui-font-primary-disabled-color)}.vxe-radio-group.theme--primary .vxe-radio--button>input:checked+.vxe-radio--label{color:#fff;border-color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-color)}.vxe-radio-group.theme--primary .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-font-primary-lighten-color);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-radio-group.theme--primary .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-font-primary-darken-color);border-color:var(--vxe-ui-font-primary-darken-color)}.vxe-radio-group.theme--primary .vxe-radio--button>input:checked+.vxe-radio--label.is--disabled{border-color:var(--vxe-ui-font-primary-disabled-color);background-color:var(--vxe-ui-font-primary-disabled-color)}.vxe-radio-group.theme--success .vxe-radio--button>input:checked+.vxe-radio--label{color:#fff;border-color:var(--vxe-ui-status-success-color);background-color:var(--vxe-ui-status-success-color)}.vxe-radio-group.theme--success .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-status-success-lighten-color);border-color:var(--vxe-ui-status-success-lighten-color)}.vxe-radio-group.theme--success .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-status-success-darken-color);border-color:var(--vxe-ui-status-success-darken-color)}.vxe-radio-group.theme--success .vxe-radio--button>input:checked+.vxe-radio--label.is--disabled{border-color:var(--vxe-ui-status-success-disabled-color);background-color:var(--vxe-ui-status-success-disabled-color)}.vxe-radio-group.theme--info .vxe-radio--button>input:checked+.vxe-radio--label{color:#fff;border-color:var(--vxe-ui-status-info-color);background-color:var(--vxe-ui-status-info-color)}.vxe-radio-group.theme--info .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-status-info-lighten-color);border-color:var(--vxe-ui-status-info-lighten-color)}.vxe-radio-group.theme--info .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-status-info-darken-color);border-color:var(--vxe-ui-status-info-darken-color)}.vxe-radio-group.theme--info .vxe-radio--button>input:checked+.vxe-radio--label.is--disabled{border-color:var(--vxe-ui-status-info-disabled-color);background-color:var(--vxe-ui-status-info-disabled-color)}.vxe-radio-group.theme--warning .vxe-radio--button>input:checked+.vxe-radio--label{color:#fff;border-color:var(--vxe-ui-status-warning-color);background-color:var(--vxe-ui-status-warning-color)}.vxe-radio-group.theme--warning .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-status-warning-lighten-color);border-color:var(--vxe-ui-status-warning-lighten-color)}.vxe-radio-group.theme--warning .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-status-warning-darken-color);border-color:var(--vxe-ui-status-warning-darken-color)}.vxe-radio-group.theme--warning .vxe-radio--button>input:checked+.vxe-radio--label.is--disabled{border-color:var(--vxe-ui-status-warning-disabled-color);background-color:var(--vxe-ui-status-warning-disabled-color)}.vxe-radio-group.theme--danger .vxe-radio--button>input:checked+.vxe-radio--label{color:#fff;border-color:var(--vxe-ui-status-danger-color);background-color:var(--vxe-ui-status-danger-color)}.vxe-radio-group.theme--danger .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-status-danger-lighten-color);border-color:var(--vxe-ui-status-danger-lighten-color)}.vxe-radio-group.theme--danger .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-status-danger-darken-color);border-color:var(--vxe-ui-status-danger-darken-color)}.vxe-radio-group.theme--danger .vxe-radio--button>input:checked+.vxe-radio--label.is--disabled{border-color:var(--vxe-ui-status-danger-disabled-color);background-color:var(--vxe-ui-status-danger-disabled-color)}.vxe-radio-group.theme--error .vxe-radio--button>input:checked+.vxe-radio--label{color:#fff;border-color:var(--vxe-ui-status-error-color);background-color:var(--vxe-ui-status-error-color)}.vxe-radio-group.theme--error .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):hover{color:#fff;background-color:var(--vxe-ui-status-error-lighten-color);border-color:var(--vxe-ui-status-error-lighten-color)}.vxe-radio-group.theme--error .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):active{color:#fff;background-color:var(--vxe-ui-status-error-darken-color);border-color:var(--vxe-ui-status-error-darken-color)}.vxe-radio-group.theme--error .vxe-radio--button>input:checked+.vxe-radio--label.is--disabled{border-color:var(--vxe-ui-status-error-disabled-color);background-color:var(--vxe-ui-status-error-disabled-color)}.vxe-radio-group.theme--perfect .vxe-radio--button>input:checked+.vxe-radio--label{color:var(--vxe-ui-font-color);border-color:var(--vxe-ui-table-header-background-color);background-color:var(--vxe-ui-table-header-background-color)}.vxe-radio-group.theme--perfect .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):hover{color:var(--vxe-ui-font-color);background-color:var(--vxe-ui-table-header-background-color);border-color:var(--vxe-ui-table-header-background-color)}.vxe-radio-group.theme--perfect .vxe-radio--button>input:checked+.vxe-radio--label:not(.is--disabled):active{color:var(--vxe-ui-font-color);background-color:var(--vxe-ui-table-header-background-color);border-color:var(--vxe-ui-table-header-background-color)}.vxe-radio-group.theme--perfect .vxe-radio--button>input:checked+.vxe-radio--label.is--disabled{border-color:var(--vxe-ui-table-header-background-color);background-color:var(--vxe-ui-table-header-background-color)}.vxe-radio--button.size--medium .vxe-radio--label{line-height:calc(var(--vxe-ui-button-height-medium) - 2px)}.vxe-radio--button.size--small .vxe-radio--label{line-height:calc(var(--vxe-ui-button-height-small) - 2px)}.vxe-radio--button.size--mini .vxe-radio--label{line-height:calc(var(--vxe-ui-button-height-mini) - 2px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "3.15.13",
+  "version": "3.15.14",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/checkbox/src/button.ts

@@ -195,7 +195,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
           }
         }),
         h('span', {
-          class: 'vxe-checkbox--label'
+          class: ['vxe-checkbox--label', {
+            'is--disabled': isDisabled
+          }]
         }, defaultSlot ? defaultSlot({}) : getFuncText(props.content))
       ])
     }

package/packages/checkbox/src/group.ts

@@ -33,6 +33,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: Boolean as PropType<VxeCheckboxGroupPropTypes.Disabled>,
       default: null
     },
+    status: {
+      type: String as PropType<VxeCheckboxGroupPropTypes.Status>,
+      default: () => getConfig().checkboxGroup.status
+    },
     max: {
       type: [String, Number] as PropType<VxeCheckboxGroupPropTypes.Max>,
       default: null
@@ -234,7 +238,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeCheckboxGroup
       const slots = $xeCheckboxGroup.$scopedSlots
 
-      const { options } = props
+      const { status, options } = props
       const defaultSlot = slots.default
       const valueField = $xeCheckboxGroup.computeValueField as 'value'
       const labelField = $xeCheckboxGroup.computeLabelField as 'label'
@@ -243,6 +247,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const isDisabled = $xeCheckboxGroup.computeIsDisabled
       return h('div', {
         class: ['vxe-checkbox-group', {
+          [`theme--${status}`]: status,
           'is--readonly': isReadonly,
           'is--disabled': isDisabled
         }]

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

@@ -2,13 +2,36 @@ import { PropType, CreateElement, VNode } from 'vue'
 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'
 
-import type { VxeIconPickerPropTypes, IconPickerInternalData, ValueOf, IconPickerReactData, VxeInputConstructor, VxeComponentSizeType, VxeIconPickerEmits, VxeIconPickerDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types'
+import type { VxeIconPickerPropTypes, IconPickerInternalData, ValueOf, IconPickerReactData, VxeInputConstructor, VxeComponentSizeType, VxeIconPickerEmits, VxeIconPickerDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeComponentStyleType } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
+function createReactData (): IconPickerReactData {
+  return {
+    initialized: false,
+    selectIcon: '',
+    panelIndex: 0,
+    panelStyle: {},
+    panelPlacement: null,
+    visiblePanel: false,
+    isAniVisible: false,
+    isActivated: false,
+    searchValue: '',
+    iconGroups: []
+  }
+}
+
+function createInternalData (): IconPickerInternalData {
+  return {
+    fullList: []
+    // hpTimeout: undefined
+  }
+}
+
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeIconPicker',
   mixins: [
@@ -44,6 +67,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
       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>,
@@ -77,23 +105,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
     }
   },
   data () {
-    const reactData: IconPickerReactData = {
-      initialized: false,
-      selectIcon: '',
-      panelIndex: 0,
-      panelStyle: {},
-      panelPlacement: null,
-      visiblePanel: false,
-      isAniVisible: false,
-      isActivated: false
-    }
-    const internalData: IconPickerInternalData = {
-      hpTimeout: undefined
-    }
+    const reactData = createReactData()
     return {
+      ...({} as {
+        internalData: IconPickerInternalData,
+      }),
       xID: XEUtils.uniqueId(),
-      reactData,
-      internalData
+      reactData
     }
   },
   computed: {
@@ -171,6 +189,21 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       return getI18n('vxe.base.pleaseSelect')
     },
+    computePanelStyle () {
+      const $xeIconPicker = this
+
+      const popupOpts = $xeIconPicker.computePopupOpts
+      const { chunkSize, height, maxHeight } = popupOpts
+      const stys: VxeComponentStyleType = {
+        '--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
@@ -193,6 +226,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }
       })
     },
+    computeFilterOpts () {
+      const $xeIconPicker = this
+      const props = $xeIconPicker
+
+      return Object.assign({}, getConfig().iconPicker.filterConfig, props.filterConfig)
+    },
     computePopupOpts () {
       const $xeIconPicker = this
       const props = $xeIconPicker
@@ -312,6 +351,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const panelElem = $xeIconPicker.$refs.refOptionPanel as HTMLDivElement
       const btnTransfer = $xeIconPicker.computeBtnTransfer
       const popupOpts = $xeIconPicker.computePopupOpts
+      const { width } = popupOpts
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
           placement: popupOpts.placement || placement,
@@ -321,6 +361,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
           zIndex: panelIndex
         })
+        if (width) {
+          Object.assign(panelStyle, {
+            width: toCssUnit(width),
+            minWidth: undefined
+          })
+        }
         reactData.panelStyle = panelStyle
         reactData.panelPlacement = ppObj.placement
       }
@@ -369,6 +415,30 @@ export default /* define-vxe-component start */ defineVxeComponent({
         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: Event, selectValue: any) {
       const $xeIconPicker = this
       const props = $xeIconPicker
@@ -537,6 +607,28 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeIconPicker.changeEvent(evnt, value)
       $xeIconPicker.hideOptionPanel()
     },
+    modelSearchEvent (value: string) {
+      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 (this: any) {
+      const $xeIconPicker = this
+
+      $xeIconPicker.handleSearchEvent()
+    }, 350, { trailing: true }),
 
     //
     // Render
@@ -547,45 +639,48 @@ export default /* define-vxe-component start */ defineVxeComponent({
       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: MouseEvent) {
-                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: MouseEvent) {
+                  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)
+            ])
           ])
         }))
       }))
@@ -621,13 +716,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
       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
 
@@ -707,8 +803,34 @@ export default /* define-vxe-component start */ 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',
+                    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)
@@ -722,6 +844,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const reactData = $xeIconPicker.reactData
 
       reactData.selectIcon = `${val || ''}`
+    },
+    computeIconList () {
+      const $xeIconPicker = this
+
+      $xeIconPicker.handleData()
     }
   },
   created () {
@@ -729,7 +856,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
     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)
@@ -737,6 +868,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
   },
   beforeDestroy () {
     const $xeIconPicker = this
+    const reactData = $xeIconPicker.reactData
+    const internalData = $xeIconPicker.internalData
 
     const panelElem = $xeIconPicker.$refs.refOptionPanel as HTMLElement | undefined
     if (panelElem && panelElem.parentNode) {
@@ -746,6 +879,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
     globalEvents.off($xeIconPicker, 'mousedown')
     globalEvents.off($xeIconPicker, 'keydown')
     globalEvents.off($xeIconPicker, 'blur')
+    XEUtils.assign(reactData, createReactData())
+    XEUtils.assign(internalData, createInternalData())
   },
   render (this: any, h) {
     return this.renderVN(h)

package/packages/language/ar-EG.ts

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

package/packages/language/de-DE.ts

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

package/packages/language/en-US.ts

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

package/packages/language/es-ES.ts

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

package/packages/language/fr-FR.ts

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