vxe-pc-ui 3.0.0 → 3.0.2

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

@@ -0,0 +1,650 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _dom = require("../../ui/src/dom");
+var _utils = require("../../ui/src/utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _default2 = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeIconPicker',
+  mixins: [_ui.globalMixins.sizeMixin],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: String,
+    placeholder: String,
+    clearable: Boolean,
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().iconPicker.size || (0, _ui.getConfig)().size;
+      }
+    },
+    className: [String, Function],
+    popupClassName: [String, Function],
+    showIconTitle: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().iconPicker.showIconTitle;
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    icons: Array,
+    placement: String,
+    transfer: {
+      type: Boolean,
+      default: null
+    }
+  },
+  inject: {
+    $xeModal: {
+      default: null
+    },
+    $xeDrawer: {
+      default: null
+    },
+    $xeTable: {
+      default: null
+    },
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeIconPicker = this;
+    return {
+      $xeIconPicker: $xeIconPicker
+    };
+  },
+  data: function data() {
+    var reactData = {
+      initialized: false,
+      selectIcon: '',
+      panelIndex: 0,
+      panelStyle: {},
+      panelPlacement: null,
+      visiblePanel: false,
+      isAniVisible: false,
+      isActivated: false
+    };
+    var internalData = {
+      hpTimeout: undefined
+    };
+    return {
+      xID: _xeUtils.default.uniqueId(),
+      reactData: reactData,
+      internalData: internalData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeFormReadonly: function computeFormReadonly() {
+      var $xeIconPicker = this;
+      var props = $xeIconPicker;
+      var $xeForm = $xeIconPicker.$xeForm;
+      var readonly = props.readonly;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    },
+    computeIsDisabled: function computeIsDisabled() {
+      var $xeIconPicker = this;
+      var props = $xeIconPicker;
+      var $xeForm = $xeIconPicker.$xeForm;
+      var disabled = props.disabled;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    },
+    computeBtnTransfer: function computeBtnTransfer() {
+      var $xeIconPicker = this;
+      var props = $xeIconPicker;
+      var $xeTable = $xeIconPicker.$xeTable;
+      var $xeModal = $xeIconPicker.$xeModal;
+      var $xeDrawer = $xeIconPicker.$xeDrawer;
+      var $xeForm = $xeIconPicker.$xeForm;
+      var transfer = props.transfer;
+      if (transfer === null) {
+        var globalTransfer = (0, _ui.getConfig)().iconPicker.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    },
+    computeInpPlaceholder: function computeInpPlaceholder() {
+      var $xeIconPicker = this;
+      var props = $xeIconPicker;
+      var placeholder = props.placeholder;
+      if (placeholder) {
+        return (0, _utils.getFuncText)(placeholder);
+      }
+      var globalPlaceholder = (0, _ui.getConfig)().select.placeholder;
+      if (globalPlaceholder) {
+        return (0, _utils.getFuncText)(globalPlaceholder);
+      }
+      return (0, _ui.getI18n)('vxe.base.pleaseSelect');
+    },
+    computeIconList: function computeIconList() {
+      var $xeIconPicker = this;
+      var props = $xeIconPicker;
+      var icons = props.icons;
+      if (!icons || !icons.length) {
+        icons = (0, _ui.getConfig)().iconPicker.icons || [];
+      }
+      return icons.map(function (name) {
+        return {
+          title: name,
+          icon: "vxe-icon-".concat(name)
+        };
+      });
+    },
+    computeIconGroupList: function computeIconGroupList() {
+      var $xeIconPicker = this;
+      var iconList = $xeIconPicker.computeIconList;
+      return _xeUtils.default.chunk(iconList, 4);
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeIconPicker = this;
+      $xeIconPicker.$emit(type, (0, _ui.createEvent)(evnt, {
+        $iconPicker: $xeIconPicker
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeDrawer = this;
+      $xeDrawer.$emit('modelValue', value);
+    },
+    isPanelVisible: function isPanelVisible() {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      return reactData.visiblePanel;
+    },
+    togglePanel: function togglePanel() {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      if (reactData.visiblePanel) {
+        $xeIconPicker.hideOptionPanel();
+      } else {
+        $xeIconPicker.showOptionPanel();
+      }
+      return $xeIconPicker.$nextTick();
+    },
+    hidePanel: function hidePanel() {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      if (reactData.visiblePanel) {
+        $xeIconPicker.hideOptionPanel();
+      }
+      return $xeIconPicker.$nextTick();
+    },
+    showPanel: function showPanel() {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      if (!reactData.visiblePanel) {
+        $xeIconPicker.showOptionPanel();
+      }
+      return $xeIconPicker.$nextTick();
+    },
+    focus: function focus() {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      var $input = $xeIconPicker.$refs.refInput;
+      reactData.isActivated = true;
+      $input.blur();
+      return $xeIconPicker.$nextTick();
+    },
+    blur: function blur() {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      var $input = $xeIconPicker.$refs.refInput;
+      $input.blur();
+      reactData.isActivated = false;
+      return $xeIconPicker.$nextTick();
+    },
+    updateZindex: function updateZindex() {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    },
+    updatePlacement: function updatePlacement() {
+      var $xeIconPicker = this;
+      var props = $xeIconPicker;
+      var reactData = $xeIconPicker.reactData;
+      return $xeIconPicker.$nextTick().then(function () {
+        var placement = props.placement;
+        var panelIndex = reactData.panelIndex;
+        var el = $xeIconPicker.$refs.refElem;
+        var panelElem = $xeIconPicker.$refs.refOptionPanel;
+        var btnTransfer = $xeIconPicker.computeBtnTransfer;
+        if (panelElem && el) {
+          var targetHeight = el.offsetHeight;
+          var targetWidth = el.offsetWidth;
+          var panelHeight = panelElem.offsetHeight;
+          var panelWidth = panelElem.offsetWidth;
+          var marginSize = 5;
+          var panelStyle = {
+            zIndex: panelIndex
+          };
+          var _getAbsolutePos = (0, _dom.getAbsolutePos)(el),
+            boundingTop = _getAbsolutePos.boundingTop,
+            boundingLeft = _getAbsolutePos.boundingLeft,
+            visibleHeight = _getAbsolutePos.visibleHeight,
+            visibleWidth = _getAbsolutePos.visibleWidth;
+          var panelPlacement = 'bottom';
+          if (btnTransfer) {
+            var left = boundingLeft;
+            var top = boundingTop + targetHeight;
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              top = boundingTop - panelHeight;
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              if (top + panelHeight + marginSize > visibleHeight) {
+                panelPlacement = 'top';
+                top = boundingTop - panelHeight;
+              }
+              // 如果上面不够放，则向下（优先）
+              if (top < marginSize) {
+                panelPlacement = 'bottom';
+                top = boundingTop + targetHeight;
+              }
+            }
+            // 如果溢出右边
+            if (left + panelWidth + marginSize > visibleWidth) {
+              left -= left + panelWidth + marginSize - visibleWidth;
+            }
+            // 如果溢出左边
+            if (left < marginSize) {
+              left = marginSize;
+            }
+            Object.assign(panelStyle, {
+              left: "".concat(left, "px"),
+              top: "".concat(top, "px"),
+              minWidth: "".concat(targetWidth, "px")
+            });
+          } else {
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              panelStyle.bottom = "".concat(targetHeight, "px");
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                // 如果上面不够放，则向下（优先）
+                if (boundingTop - targetHeight - panelHeight > marginSize) {
+                  panelPlacement = 'top';
+                  panelStyle.bottom = "".concat(targetHeight, "px");
+                }
+              }
+            }
+          }
+          reactData.panelStyle = panelStyle;
+          reactData.panelPlacement = panelPlacement;
+          return $xeIconPicker.$nextTick();
+        }
+      });
+    },
+    showOptionPanel: function showOptionPanel() {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      var internalData = $xeIconPicker.internalData;
+      var hpTimeout = internalData.hpTimeout;
+      var isDisabled = $xeIconPicker.computeIsDisabled;
+      if (!isDisabled) {
+        if (hpTimeout) {
+          clearTimeout(hpTimeout);
+          internalData.hpTimeout = undefined;
+        }
+        var btnTransfer = $xeIconPicker.computeBtnTransfer;
+        var panelElem = $xeIconPicker.$refs.refOptionPanel;
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+          if (btnTransfer) {
+            if (panelElem) {
+              document.body.appendChild(panelElem);
+            }
+          }
+        }
+        reactData.isActivated = true;
+        reactData.isAniVisible = true;
+        setTimeout(function () {
+          reactData.visiblePanel = true;
+        }, 10);
+        $xeIconPicker.updateZindex();
+        $xeIconPicker.updatePlacement();
+      }
+    },
+    hideOptionPanel: function hideOptionPanel() {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      var internalData = $xeIconPicker.internalData;
+      reactData.visiblePanel = false;
+      internalData.hpTimeout = window.setTimeout(function () {
+        reactData.isAniVisible = false;
+      }, 350);
+    },
+    changeEvent: function changeEvent(evnt, selectValue) {
+      var $xeIconPicker = this;
+      var props = $xeIconPicker;
+      var reactData = $xeIconPicker.reactData;
+      var $xeForm = $xeIconPicker.$xeForm;
+      var formItemInfo = $xeIconPicker.formItemInfo;
+      reactData.selectIcon = selectValue;
+      if (selectValue !== props.value) {
+        $xeIconPicker.emitModel(selectValue);
+        $xeIconPicker.dispatchEvent('change', {
+          value: selectValue
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
+        }
+      }
+    },
+    focusEvent: function focusEvent() {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      var isDisabled = $xeIconPicker.computeIsDisabled;
+      if (!isDisabled) {
+        if (!reactData.visiblePanel) {
+          $xeIconPicker.showOptionPanel();
+        }
+      }
+    },
+    blurEvent: function blurEvent() {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      reactData.isActivated = false;
+    },
+    clearValueEvent: function clearValueEvent(evnt, selectValue) {
+      var $xeIconPicker = this;
+      $xeIconPicker.changeEvent(evnt, selectValue);
+      $xeIconPicker.dispatchEvent('clear', {
+        value: selectValue
+      }, evnt);
+    },
+    clearEvent: function clearEvent(params, evnt) {
+      var $xeIconPicker = this;
+      $xeIconPicker.clearValueEvent(evnt, null);
+      $xeIconPicker.hideOptionPanel();
+    },
+    togglePanelEvent: function togglePanelEvent(evnt) {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      evnt.preventDefault();
+      if (reactData.visiblePanel) {
+        $xeIconPicker.hideOptionPanel();
+      } else {
+        $xeIconPicker.showOptionPanel();
+      }
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeIconPicker = this;
+      $xeIconPicker.togglePanelEvent(evnt);
+      $xeIconPicker.dispatchEvent('click', {}, evnt);
+    },
+    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeIconPicker.computeIsDisabled;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          var panelElem = $xeIconPicker.$refs.refOptionPanel;
+          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
+            $xeIconPicker.updatePlacement();
+          } else {
+            $xeIconPicker.hideOptionPanel();
+          }
+        }
+      }
+    },
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeIconPicker.computeIsDisabled;
+      if (!isDisabled) {
+        var el = $xeIconPicker.$refs.refElem;
+        var panelElem = $xeIconPicker.$refs.refOptionPanel;
+        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
+        if (visiblePanel && !reactData.isActivated) {
+          $xeIconPicker.hideOptionPanel();
+        }
+      }
+    },
+    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
+      var $xeIconPicker = this;
+      var props = $xeIconPicker;
+      var reactData = $xeIconPicker.reactData;
+      var clearable = props.clearable;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeIconPicker.computeIsDisabled;
+      if (!isDisabled) {
+        var isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
+        var isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
+        var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
+        var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+        var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        var isDel = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.DELETE);
+        var isSpacebar = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.SPACEBAR);
+        if (isTab) {
+          reactData.isActivated = false;
+        }
+        if (visiblePanel) {
+          if (isEsc || isTab) {
+            $xeIconPicker.hideOptionPanel();
+          } else if (isEnter) {
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            // changeOptionEvent(evnt, currentValue, currentOption)
+          } else if (isUpArrow || isDwArrow) {
+            evnt.preventDefault();
+            // let { firstOption, offsetOption } = findOffsetOption(currentValue, isUpArrow)
+            // if (!offsetOption && !findVisibleOption(currentValue)) {
+            //   offsetOption = firstOption
+            // }
+            // setCurrentOption(offsetOption)
+            // scrollToOption(offsetOption, isDwArrow)
+          } else if (isSpacebar) {
+            evnt.preventDefault();
+          }
+        } else if ((isUpArrow || isDwArrow || isEnter || isSpacebar) && reactData.isActivated) {
+          evnt.preventDefault();
+          $xeIconPicker.showOptionPanel();
+        }
+        if (reactData.isActivated) {
+          if (isDel && clearable) {
+            $xeIconPicker.clearValueEvent(evnt, null);
+          }
+        }
+      }
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+      var $xeIconPicker = this;
+      $xeIconPicker.hideOptionPanel();
+    },
+    handleClickIconEvent: function handleClickIconEvent(evnt, item) {
+      var $xeIconPicker = this;
+      var value = item.icon;
+      $xeIconPicker.changeEvent(evnt, value);
+      $xeIconPicker.hideOptionPanel();
+    },
+    //
+    // Render
+    //
+    renderIconWrapper: function renderIconWrapper(h) {
+      var $xeIconPicker = this;
+      var props = $xeIconPicker;
+      var showIconTitle = props.showIconTitle;
+      var iconGroupList = $xeIconPicker.computeIconGroupList;
+      var isDisabled = $xeIconPicker.computeIsDisabled;
+      return h('div', {
+        class: 'vxe-ico-picker--list-wrapper'
+      }, iconGroupList.map(function (list) {
+        return h('div', {
+          class: 'vxe-ico-picker--list'
+        }, list.map(function (item) {
+          return h('div', {
+            class: 'vxe-ico-picker--item',
+            on: {
+              click: function click(evnt) {
+                if (!isDisabled) {
+                  $xeIconPicker.handleClickIconEvent(evnt, item);
+                }
+              }
+            }
+          }, [h('div', {
+            class: 'vxe-ico-picker--item-icon'
+          }, [h('i', {
+            class: item.icon || ''
+          })]), showIconTitle ? h('div', {
+            class: 'vxe-ico-picker--item-title'
+          }, "".concat(item.title || '')) : (0, _ui.renderEmptyElement)($xeIconPicker)]);
+        }));
+      }));
+    },
+    renderVN: function renderVN(h) {
+      var $xeIconPicker = this;
+      var props = $xeIconPicker;
+      var reactData = $xeIconPicker.reactData;
+      var className = props.className,
+        popupClassName = props.popupClassName,
+        clearable = props.clearable;
+      var initialized = reactData.initialized,
+        isActivated = reactData.isActivated,
+        visiblePanel = reactData.visiblePanel,
+        selectIcon = reactData.selectIcon;
+      var vSize = $xeIconPicker.computeSize;
+      var isDisabled = $xeIconPicker.computeIsDisabled;
+      var btnTransfer = $xeIconPicker.computeBtnTransfer;
+      var formReadonly = $xeIconPicker.computeFormReadonly;
+      var inpPlaceholder = $xeIconPicker.computeInpPlaceholder;
+      if (formReadonly) {
+        return h('div', {
+          ref: 'refElem',
+          class: ['vxe-ico-picker--readonly', className]
+        }, [h('i', {
+          class: selectIcon
+        })]);
+      }
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-ico-picker', className ? _xeUtils.default.isFunction(className) ? className({
+          $iconPicker: $xeIconPicker
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'show--clear', clearable && !isDisabled && !!selectIcon), 'is--visible', visiblePanel), 'is--disabled', isDisabled), 'is--active', isActivated)]
+      }, [h('div', {
+        class: 'vxe-ico-picker--inner',
+        on: {
+          click: $xeIconPicker.clickEvent
+        }
+      }, [h('input', {
+        ref: 'refInput',
+        class: 'vxe-ico-picker--input',
+        on: {
+          focus: $xeIconPicker.focusEvent,
+          blur: $xeIconPicker.blurEvent
+        }
+      }), selectIcon ? h('div', {
+        class: 'vxe-ico-picker--icon'
+      }, [h('i', {
+        class: selectIcon
+      })]) : h('div', {
+        class: 'vxe-ico-picker--placeholder'
+      }, inpPlaceholder), h('div', {
+        class: 'vxe-ico-picker--suffix'
+      }, [h('div', {
+        class: 'vxe-ico-picker--clear-icon',
+        on: {
+          click: $xeIconPicker.clearEvent
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().INPUT_CLEAR
+      })]), h('div', {
+        class: 'vxe-ico-picker--suffix-icon'
+      }, [h('i', {
+        class: visiblePanel ? (0, _ui.getIcon)().ICON_PICKER_OPEN : (0, _ui.getIcon)().ICON_PICKER_CLOSE
+      })])])]), h('div', {
+        ref: 'refOptionPanel',
+        class: ['vxe-table--ignore-clear vxe-ico-picker--panel', popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
+          $iconPicker: $xeIconPicker
+        }) : popupClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', reactData.isAniVisible), 'ani--enter', visiblePanel)],
+        attrs: {
+          placement: reactData.panelPlacement
+        },
+        style: reactData.panelStyle
+      }, initialized ? [initialized ? h('div', {
+        class: 'vxe-ico-picker--panel-wrapper'
+      }, [$xeIconPicker.renderIconWrapper(h)]) : (0, _ui.renderEmptyElement)($xeIconPicker)] : [])]);
+    }
+  },
+  watch: {
+    value: function value(val) {
+      var $xeIconPicker = this;
+      var reactData = $xeIconPicker.reactData;
+      reactData.selectIcon = "".concat(val || '');
+    }
+  },
+  created: function created() {
+    var $xeIconPicker = this;
+    var props = $xeIconPicker;
+    var reactData = $xeIconPicker.reactData;
+    reactData.selectIcon = "".concat(props.value || '');
+    _ui.globalEvents.on($xeIconPicker, 'mousewheel', $xeIconPicker.handleGlobalMousewheelEvent);
+    _ui.globalEvents.on($xeIconPicker, 'mousedown', $xeIconPicker.handleGlobalMousedownEvent);
+    _ui.globalEvents.on($xeIconPicker, 'keydown', $xeIconPicker.handleGlobalKeydownEvent);
+    _ui.globalEvents.on($xeIconPicker, 'blur', $xeIconPicker.handleGlobalBlurEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeIconPicker = this;
+    var panelElem = $xeIconPicker.$refs.refOptionPanel;
+    if (panelElem && panelElem.parentNode) {
+      panelElem.parentNode.removeChild(panelElem);
+    }
+    _ui.globalEvents.off($xeIconPicker, 'mousewheel');
+    _ui.globalEvents.off($xeIconPicker, 'mousedown');
+    _ui.globalEvents.off($xeIconPicker, 'keydown');
+    _ui.globalEvents.off($xeIconPicker, 'blur');
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});

package/lib/icon-picker/src/icon-picker.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _defineProperty(e,t,i){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var i=e[Symbol.toPrimitive];if(void 0===i)return("string"===t?String:Number)(e);i=i.call(e,t||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeIconPicker",mixins:[_ui.globalMixins.sizeMixin],model:{prop:"value",event:"modelValue"},props:{value:String,placeholder:String,clearable:Boolean,size:{type:String,default:function(){return(0,_ui.getConfig)().iconPicker.size||(0,_ui.getConfig)().size}},className:[String,Function],popupClassName:[String,Function],showIconTitle:{type:Boolean,default:function(){return(0,_ui.getConfig)().iconPicker.showIconTitle}},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},icons:Array,placement:String,transfer:{type:Boolean,default:null}},inject:{$xeModal:{default:null},$xeDrawer:{default:null},$xeTable:{default:null},$xeForm:{default:null},formItemInfo:{from:"xeFormItemInfo",default:null}},provide:function(){return{$xeIconPicker:this}},data:function(){var e={hpTimeout:void 0};return{xID:_xeUtils.default.uniqueId(),reactData:{initialized:!1,selectIcon:"",panelIndex:0,panelStyle:{},panelPlacement:null,visiblePanel:!1,isAniVisible:!1,isActivated:!1},internalData:e}},computed:Object.assign(Object.assign({},{}),{computeFormReadonly:function(){var e=this.$xeForm,t=this.readonly;return null===t?!!e&&e.readonly:t},computeIsDisabled:function(){var e=this.$xeForm,t=this.disabled;return null===t?!!e&&e.disabled:t},computeBtnTransfer:function(){var e=this,t=e.$xeTable,i=e.$xeModal,n=e.$xeDrawer,o=e.$xeForm,e=e.transfer;if(null===e){var a=(0,_ui.getConfig)().iconPicker.transfer;if(_xeUtils.default.isBoolean(a))return a;if(t||i||n||o)return!0}return e},computeInpPlaceholder:function(){var e=this.placeholder;return(e=e||(0,_ui.getConfig)().select.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseSelect")},computeIconList:function(){var e=this.icons;return(e=e&&e.length?e:(0,_ui.getConfig)().iconPicker.icons||[]).map(function(e){return{title:e,icon:"vxe-icon-".concat(e)}})},computeIconGroupList:function(){var e=this.computeIconList;return _xeUtils.default.chunk(e,4)}}),methods:{dispatchEvent:function(e,t,i){this.$emit(e,(0,_ui.createEvent)(i,{$iconPicker:this},t))},emitModel:function(e){this.$emit("modelValue",e)},isPanelVisible:function(){return this.reactData.visiblePanel},togglePanel:function(){return this.reactData.visiblePanel?this.hideOptionPanel():this.showOptionPanel(),this.$nextTick()},hidePanel:function(){return this.reactData.visiblePanel&&this.hideOptionPanel(),this.$nextTick()},showPanel:function(){return this.reactData.visiblePanel||this.showOptionPanel(),this.$nextTick()},focus:function(){var e=this.reactData,t=this.$refs.refInput;return e.isActivated=!0,t.blur(),this.$nextTick()},blur:function(){var e=this.reactData;return this.$refs.refInput.blur(),e.isActivated=!1,this.$nextTick()},updateZindex:function(){var e=this.reactData;e.panelIndex<(0,_utils.getLastZIndex)()&&(e.panelIndex=(0,_utils.nextZIndex)())},updatePlacement:function(){var p=this,d=p,v=p.reactData;return p.$nextTick().then(function(){var e,t,i,n,o,a,l,r=d.placement,c=v.panelIndex,s=p.$refs.refElem,u=p.$refs.refOptionPanel,f=p.computeBtnTransfer;if(u&&s)return e=s.offsetHeight,t=s.offsetWidth,i=u.offsetHeight,u=u.offsetWidth,c={zIndex:c},n=(s=(0,_dom.getAbsolutePos)(s)).boundingTop,o=s.visibleHeight,a=s.visibleWidth,l="bottom",f?(f=n+e,"top"===r?(l="top",f=n-i):r||(o<f+i+5&&(l="top",f=n-i),f<5&&(l="bottom",f=n+e)),a<(s=s.boundingLeft)+u+5&&(s-=s+u+5-a),s<5&&(s=5),Object.assign(c,{left:"".concat(s,"px"),top:"".concat(f,"px"),minWidth:"".concat(t,"px")})):"top"===r?(l="top",c.bottom="".concat(e,"px")):r||o<n+e+i&&5<n-e-i&&(l="top",c.bottom="".concat(e,"px")),v.panelStyle=c,v.panelPlacement=l,p.$nextTick()})},showOptionPanel:function(){var e=this,t=e.reactData,i=e.internalData,n=i.hpTimeout;e.computeIsDisabled||(n&&(clearTimeout(n),i.hpTimeout=void 0),n=e.computeBtnTransfer,i=e.$refs.refOptionPanel,t.initialized||(t.initialized=!0,n&&i&&document.body.appendChild(i)),t.isActivated=!0,t.isAniVisible=!0,setTimeout(function(){t.visiblePanel=!0},10),e.updateZindex(),e.updatePlacement())},hideOptionPanel:function(){var e=this.reactData,t=this.internalData;e.visiblePanel=!1,t.hpTimeout=window.setTimeout(function(){e.isAniVisible=!1},350)},changeEvent:function(e,t){var i=this,n=i,o=i.reactData,a=i.$xeForm,l=i.formItemInfo;(o.selectIcon=t)!==n.value&&(i.emitModel(t),i.dispatchEvent("change",{value:t},e),a)&&l&&a.triggerItemEvent(e,l.itemConfig.field,t)},focusEvent:function(){var e=this.reactData;this.computeIsDisabled||e.visiblePanel||this.showOptionPanel()},blurEvent:function(){this.reactData.isActivated=!1},clearValueEvent:function(e,t){this.changeEvent(e,t),this.dispatchEvent("clear",{value:t},e)},clearEvent:function(e,t){this.clearValueEvent(t,null),this.hideOptionPanel()},togglePanelEvent:function(e){var t=this.reactData;e.preventDefault(),t.visiblePanel?this.hideOptionPanel():this.showOptionPanel()},clickEvent:function(e){this.togglePanelEvent(e),this.dispatchEvent("click",{},e)},handleGlobalMousewheelEvent:function(e){var t=this,i=t.reactData.visiblePanel;t.computeIsDisabled||i&&(i=t.$refs.refOptionPanel,(0,_dom.getEventTargetNode)(e,i).flag?t.updatePlacement():t.hideOptionPanel())},handleGlobalMousedownEvent:function(e){var t,i,n=this,o=n.reactData,a=o.visiblePanel;n.computeIsDisabled||(t=n.$refs.refElem,i=n.$refs.refOptionPanel,o.isActivated=(0,_dom.getEventTargetNode)(e,t).flag||(0,_dom.getEventTargetNode)(e,i).flag,a&&!o.isActivated&&n.hideOptionPanel())},handleGlobalKeydownEvent:function(e){var t,i,n,o,a,l,r,c=this,s=c.reactData,u=c.clearable,f=s.visiblePanel;c.computeIsDisabled||(t=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.TAB),i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ENTER),n=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE),o=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),a=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),l=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.DELETE),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.SPACEBAR),t&&(s.isActivated=!1),f?n||t?c.hideOptionPanel():i?(e.preventDefault(),e.stopPropagation()):(o||a||r)&&e.preventDefault():(o||a||i||r)&&s.isActivated&&(e.preventDefault(),c.showOptionPanel()),s.isActivated&&l&&u&&c.clearValueEvent(e,null))},handleGlobalBlurEvent:function(){this.hideOptionPanel()},handleClickIconEvent:function(e,t){t=t.icon;this.changeEvent(e,t),this.hideOptionPanel()},renderIconWrapper:function(i){var n=this,o=n.showIconTitle,e=n.computeIconGroupList,a=n.computeIsDisabled;return i("div",{class:"vxe-ico-picker--list-wrapper"},e.map(function(e){return i("div",{class:"vxe-ico-picker--list"},e.map(function(t){return i("div",{class:"vxe-ico-picker--item",on:{click:function(e){a||n.handleClickIconEvent(e,t)}}},[i("div",{class:"vxe-ico-picker--item-icon"},[i("i",{class:t.icon||""})]),o?i("div",{class:"vxe-ico-picker--item-title"},"".concat(t.title||"")):(0,_ui.renderEmptyElement)(n)])}))}))},renderVN:function(e){var t=this,i=t.reactData,n=t.className,o=t.popupClassName,a=t.clearable,l=i.initialized,r=i.isActivated,c=i.visiblePanel,s=i.selectIcon,u=t.computeSize,f=t.computeIsDisabled,p=t.computeBtnTransfer,d=t.computeInpPlaceholder;return t.computeFormReadonly?e("div",{ref:"refElem",class:["vxe-ico-picker--readonly",n]},[e("i",{class:s})]):e("div",{ref:"refElem",class:["vxe-ico-picker",n?_xeUtils.default.isFunction(n)?n({$iconPicker:t}):n:"",_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"size--".concat(u),u),"show--clear",a&&!f&&!!s),"is--visible",c),"is--disabled",f),"is--active",r)]},[e("div",{class:"vxe-ico-picker--inner",on:{click:t.clickEvent}},[e("input",{ref:"refInput",class:"vxe-ico-picker--input",on:{focus:t.focusEvent,blur:t.blurEvent}}),s?e("div",{class:"vxe-ico-picker--icon"},[e("i",{class:s})]):e("div",{class:"vxe-ico-picker--placeholder"},d),e("div",{class:"vxe-ico-picker--suffix"},[e("div",{class:"vxe-ico-picker--clear-icon",on:{click:t.clearEvent}},[e("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]),e("div",{class:"vxe-ico-picker--suffix-icon"},[e("i",{class:c?(0,_ui.getIcon)().ICON_PICKER_OPEN:(0,_ui.getIcon)().ICON_PICKER_CLOSE})])])]),e("div",{ref:"refOptionPanel",class:["vxe-table--ignore-clear vxe-ico-picker--panel",o?_xeUtils.default.isFunction(o)?o({$iconPicker:t}):o:"",_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"size--".concat(u),u),"is--transfer",p),"ani--leave",i.isAniVisible),"ani--enter",c)],attrs:{placement:i.panelPlacement},style:i.panelStyle},l?[l?e("div",{class:"vxe-ico-picker--panel-wrapper"},[t.renderIconWrapper(e)]):(0,_ui.renderEmptyElement)(t)]:[])])}},watch:{value:function(e){this.reactData.selectIcon="".concat(e||"")}},created:function(){var e=this;e.reactData.selectIcon="".concat(e.value||""),_ui.globalEvents.on(e,"mousewheel",e.handleGlobalMousewheelEvent),_ui.globalEvents.on(e,"mousedown",e.handleGlobalMousedownEvent),_ui.globalEvents.on(e,"keydown",e.handleGlobalKeydownEvent),_ui.globalEvents.on(e,"blur",e.handleGlobalBlurEvent)},beforeDestroy:function(){var e=this,t=e.$refs.refOptionPanel;t&&t.parentNode&&t.parentNode.removeChild(t),_ui.globalEvents.off(e,"mousewheel"),_ui.globalEvents.off(e,"mousedown"),_ui.globalEvents.off(e,"keydown"),_ui.globalEvents.off(e,"blur")},render:function(e){return this.renderVN(e)}});

package/lib/icon-picker/style/index.js

@@ -0,0 +1 @@
+require('./style.css')