@opentiny/vue-renderless 3.14.0 → 3.15.0

package/picker/index.js

@@ -8,10 +8,18 @@ import userPopper from "../common/deps/vue-popper";
 import { DATEPICKER } from "../common";
 import { formatDate, parseDate, isDateObject, getWeekNumber, prevDate, nextDate } from "../common/deps/date-util";
 import { extend } from "../common/object";
-import { isFunction } from "../common/type";
 import globalTimezone from "./timezone";
 const iso8601Reg = /^\d{4}-\d{2}-\d{2}(.)\d{2}:\d{2}:\d{2}(.+)$/;
-const getPanel = ({ DatePanel, DateRangePanel, MonthRangePanel, YearRangePanel, TimePanel, TimeRangePanel, TimeSelect }) => (type) => {
+const getPanel = ({
+  DatePanel,
+  DateRangePanel,
+  MonthRangePanel,
+  YearRangePanel,
+  TimePanel,
+  TimeRangePanel,
+  QuarterPanel,
+  TimeSelect
+}) => (type) => {
   if (type === DATEPICKER.DateRange || type === DATEPICKER.DateTimeRange) {
     return DateRangePanel;
   } else if (type === DATEPICKER.MonthRange) {
@@ -24,10 +32,21 @@ const getPanel = ({ DatePanel, DateRangePanel, MonthRangePanel, YearRangePanel,
     return TimePanel;
   } else if (type === DATEPICKER.TimeSelect) {
     return TimeSelect;
+  } else if (type === DATEPICKER.Quarter) {
+    return QuarterPanel;
   }
   return DatePanel;
 };
-const watchPickerVisible = ({ api, vm, dispatch, emit, props, state }) => (value) => {
+const watchMobileVisible = ({ api, props, state, nextTick }) => ([dateMobileVisible, timeMobileVisible]) => {
+  if (dateMobileVisible || timeMobileVisible) {
+    state.valueOnOpen = Array.isArray(props.modelValue) ? [...props.modelValue] : props.modelValue;
+  } else {
+    nextTick(() => {
+      api.emitChange(props.modelValue);
+    });
+  }
+};
+const watchPickerVisible = ({ api, vm, dispatch, emit, props, state, nextTick }) => (value) => {
   if (props.readonly || state.pickerDisabled || state.isMobileScreen)
     return;
   if (value) {
@@ -35,7 +54,9 @@ const watchPickerVisible = ({ api, vm, dispatch, emit, props, state }) => (value
     state.valueOnOpen = Array.isArray(props.modelValue) ? [...props.modelValue] : props.modelValue;
   } else {
     api.hidePicker();
-    api.emitChange(props.modelValue);
+    nextTick(() => {
+      api.emitChange(props.modelValue);
+    });
     state.userInput = null;
     if (props.validateEvent) {
       dispatch("FormItem", "form.blur");
@@ -85,13 +106,7 @@ const displayValue = ({ api, props, state }) => () => {
   const formatObj = {
     rangeSeparator: props.rangeSeparator
   };
-  const formattedValue = api.formatAsFormatAndType(
-    state.parsedValue,
-    state.format,
-    state.type,
-    props.rangeSeparator,
-    formatObj
-  );
+  const formattedValue = api.formatAsFormatAndType(state.parsedValue, state.format, state.type, formatObj);
   if (Array.isArray(state.userInput)) {
     return [
       state.userInput[0] || formattedValue && formattedValue[0] || "",
@@ -128,9 +143,13 @@ const parsedValue = ({ api, props, state, t }) => () => {
     let date = props.modelValue;
     if (isServiceTimezone) {
       if (Array.isArray(date)) {
-        date = [].concat(date).map((item) => isDate(item) ? formatDate(item, state.valueFormat, t) : item);
+        date = [].concat(date).map((item) => {
+          return isDate(item) ? formatDate(item, state.valueFormat, t) : item;
+        });
       } else {
-        date = formatDate(date, state.valueFormat, t);
+        if (state.valueFormat !== DATEPICKER.TimesTamp) {
+          date = formatDate(date, state.valueFormat, t);
+        }
       }
     }
     const result = api.parseAsFormatAndType(date, state.valueFormat, state.type, props.rangeSeparator);
@@ -311,7 +330,11 @@ const typeValueResolveMap = ({ api, props, t }) => () => ({
   years: getDatesOfTypeValueResolveMap(api),
   yearrange: getDatesOfTypeValueResolveMap(api),
   number: getNumberOfTypeValueResolveMap(),
-  dates: getDatesOfTypeValueResolveMap(api)
+  dates: getDatesOfTypeValueResolveMap(api),
+  quarter: {
+    formatter: (value) => `${value.getFullYear()}-Q${DATEPICKER.MonthQuarterMap[value.getMonth()]}`,
+    parser: api.dateParser
+  }
 });
 const firstInputId = ({ props, state }) => () => {
   const obj = {};
@@ -371,6 +394,161 @@ const handleMouseEnter = ({ props, state }) => () => {
     state.showClose = true;
   }
 };
+const handleInput = ({ state, props, api }) => (val, event) => {
+  event = val.target ? val : event;
+  if (props.autoFormat) {
+    const value = api.formatInputValue({ event, prevValue: state.displayValue });
+    state.userInput = value;
+  } else {
+    const val2 = event.target.value;
+    state.userInput = val2;
+  }
+};
+const formatInputValue = ({ props, state }) => ({ event, prevValue = "" }) => {
+  const val = event.target.value;
+  const inputData = event.data;
+  const format = state.type === "time-select" ? "HH:mm" : props.format || DATEPICKER.DateFormats[state.type];
+  if (inputData && inputData.charCodeAt() >= 48 && inputData.charCodeAt() <= 57) {
+    return formatText({ event, format, text: prevValue, needSelectionStart: true });
+  } else {
+    return val;
+  }
+};
+const getSelectionStart = ({ value, format, regx, event }) => {
+  const formatMatchArr = format.match(regx);
+  let selectionStart = getSelectionStartIndex(event);
+  let I = 0;
+  if (value !== "") {
+    const match = value.match(/[0-9]/g);
+    I = match === null ? 0 : match.length;
+    for (let i = 0; i < formatMatchArr.length; i++) {
+      I -= Math.max(formatMatchArr[i].length, 2);
+    }
+    I = I >= 0 ? 1 : 0;
+    I === 1 && selectionStart >= value.length && (selectionStart = value.length - 1);
+  }
+  return { selectionStart, I };
+};
+const getNum = (value, format, regx) => {
+  let len = value.length;
+  if (format && regx) {
+    const formatMatchArr = format.match(regx);
+    len = Math.max(len, formatMatchArr.join("").length);
+  }
+  let num = { str: "", arr: [] };
+  for (let i = 0; i < len; i++) {
+    let char = value.charAt(i) ? value.charAt(i) : "00";
+    if (/[0-9]/.test(char)) {
+      num.str += char;
+    } else {
+      num.arr[i] = 1;
+    }
+  }
+  return num;
+};
+const getSelectionStartIndex = (event) => {
+  const inputElem = event.target;
+  return inputElem.selectionStart - (event.data ? event.data.length : 0);
+};
+const moveStart = (inputElem, moveStartIndex) => {
+  if (inputElem.setSelectionRange) {
+    inputElem.focus();
+    setTimeout(() => {
+      inputElem.setSelectionRange(moveStartIndex, moveStartIndex);
+    }, 0);
+  }
+};
+const formatText = ({ event, text, format, needSelectionStart = false }) => {
+  if (!format)
+    return text;
+  let cursorOffset = 0;
+  let value = "";
+  let regx = /yyyy|yyy|yy|y|MM|M|dd|d|HH|hh|H|h|mm|m|ss|s|WW|W|w/g;
+  let startIndex = 0;
+  let { numStr, selectionStart } = getNumAndSelectionStart({
+    value: text,
+    format,
+    regx,
+    event,
+    needSelectionStart
+  });
+  let matchResult = regx.exec(format);
+  while (numStr.str !== "" && matchResult !== null) {
+    let subStr;
+    let newNum;
+    let subLen;
+    const endIndex = matchResult.index;
+    if (startIndex >= 0) {
+      value += format.substring(startIndex, endIndex);
+    }
+    selectionStart >= startIndex + cursorOffset && selectionStart <= endIndex + cursorOffset && (selectionStart = selectionStart + endIndex - startIndex);
+    startIndex = regx.lastIndex;
+    subLen = startIndex - endIndex;
+    subStr = numStr.str.substring(0, subLen);
+    const firstMatchChar = matchResult[0].charAt(0);
+    const firstChar = parseInt(subStr.charAt(0), 10);
+    if (numStr.str.length > 1) {
+      const secondChar = numStr.str.charAt(1);
+      newNum = 10 * firstChar + parseInt(secondChar, 10);
+    } else {
+      newNum = firstChar;
+    }
+    if (numStr.arr[endIndex + 1] || firstMatchChar === "M" && newNum > 12 || firstMatchChar === "d" && newNum > 31 || ["H", "h"].includes(firstMatchChar) && newNum > 23 || "ms".includes(firstMatchChar) && newNum > 59) {
+      subStr = matchResult[0].length === 2 ? "0" + firstChar : firstChar;
+      selectionStart++;
+    } else {
+      if (subLen === 1) {
+        subStr = String(newNum);
+        subLen++;
+        cursorOffset++;
+      }
+    }
+    value += subStr;
+    numStr.str = numStr.str.substring(subLen);
+    matchResult = regx.exec(format);
+  }
+  const { value: val, selectionStart: cursorPos } = checkFormat({
+    value,
+    format,
+    startIndex,
+    selectionStart,
+    regx,
+    needSelectionStart
+  });
+  value = val;
+  selectionStart = cursorPos;
+  needSelectionStart && moveStart(event.target, selectionStart);
+  return value;
+};
+const getNumAndSelectionStart = ({ value, format, regx, event, needSelectionStart }) => {
+  if (needSelectionStart) {
+    let { selectionStart, I } = getSelectionStart({ value, format, regx, event });
+    let valueStr;
+    if (event.data) {
+      valueStr = value.substring(0, selectionStart) + event.data + value.substring(selectionStart + I);
+      selectionStart++;
+    } else {
+      valueStr = value;
+    }
+    const numStr = getNum(valueStr);
+    return { numStr, selectionStart };
+  } else {
+    const numStr = getNum(value, format, regx);
+    return { numStr };
+  }
+};
+const checkFormat = ({ value, format, startIndex, selectionStart, regx, needSelectionStart }) => {
+  if (!needSelectionStart && regx.lastIndex === 0 || needSelectionStart && regx.lastIndex === 0 && selectionStart >= startIndex) {
+    const subFormat = `(?<=${format.substring(0, startIndex)})(\\s*\\S*\\s*)+`;
+    const pattern = new RegExp(subFormat, "g");
+    const res = format.match(pattern);
+    if (res) {
+      value += res[0];
+      selectionStart = value.length;
+    }
+  }
+  return { value, selectionStart };
+};
 const handleChange = ({ api, state }) => () => {
   if (state.userInput) {
     const value = api.parseString(state.displayValue);
@@ -556,13 +734,11 @@ const handleKeydown = ({ api, state }) => (event) => {
     state.picker.handleKeydown(event);
   }
 };
-const hidePicker = ({ state, doDestroy }) => () => {
+const hidePicker = ({ destroyPopper, state }) => () => {
   if (state.picker) {
     state.picker.resetView && state.picker.resetView();
     state.pickerVisible = state.picker.visible = state.picker.state.visible = false;
-    if (isFunction(doDestroy)) {
-      doDestroy();
-    }
+    destroyPopper();
   }
 };
 const showPicker = ({ api, nextTick, updatePopper, state }) => () => {
@@ -594,23 +770,22 @@ const handleSelectRange = (state) => (start, end, pos) => {
     return;
   }
   const adjust = (value, start2, end2) => {
-    if (!value) {
-      return { start: start2, end: end2 };
-    }
-    const valueReg = /(\d+):(\d+):(\d+)(\s+.+)?/;
-    if (valueReg.test(value)) {
-      const matched = valueReg.exec(value);
-      const hourLength = matched[1].length;
-      const minuteLength = matched[2].length;
-      const secondLength = matched[3].length;
-      if (start2 === 0) {
-        end2 = hourLength;
-      } else if (start2 === 3) {
-        start2 = hourLength + 1;
-        end2 = hourLength + minuteLength + 1;
-      } else {
-        start2 = hourLength + minuteLength + 2;
-        end2 = hourLength + minuteLength + secondLength + 2;
+    if (value) {
+      const valueReg = /(\d+):(\d+):(\d+)(\s+.+)?/;
+      if (valueReg.test(value)) {
+        const matched = valueReg.exec(value);
+        const hourLength = matched[1].length;
+        const minuteLength = matched[2].length;
+        const secondLength = matched[3].length;
+        if (start2 === 0) {
+          end2 = hourLength;
+        } else if (start2 === 3) {
+          start2 = hourLength + 1;
+          end2 = hourLength + minuteLength + 1;
+        } else {
+          start2 = hourLength + minuteLength + 2;
+          end2 = hourLength + minuteLength + secondLength + 2;
+        }
       }
     }
     return { start: start2, end: end2 };
@@ -771,8 +946,12 @@ const computedFormat = ({ props, utils }) => () => {
   }
   return format;
 };
-const computedTriggerClass = ({ props, state }) => () => props.suffixIcon || props.prefixIcon || (state.type.includes(DATEPICKER.Time) ? DATEPICKER.IconTime : DATEPICKER.IconDate);
-const computedHaveTrigger = ({ props }) => () => typeof props.showTrigger !== "undefined" ? props.showTrigger : DATEPICKER.TriggerTypes.includes(props.type);
+const computedTriggerClass = ({ props, state }) => () => {
+  return props.suffixIcon || props.prefixIcon || (state.type.includes(DATEPICKER.Time) ? DATEPICKER.IconTime : DATEPICKER.IconDate);
+};
+const computedHaveTrigger = ({ props }) => () => {
+  return typeof props.showTrigger !== "undefined" ? props.showTrigger : DATEPICKER.TriggerTypes.includes(props.type);
+};
 const initPopper = ({ props, hooks, vnode }) => {
   const { reactive, watch, toRefs, onBeforeUnmount, onDeactivated } = hooks;
   const { emit, vm, slots, nextTick } = vnode;
@@ -782,7 +961,7 @@ const initPopper = ({ props, hooks, vnode }) => {
     watch,
     emit,
     props: __spreadProps(__spreadValues({}, props), {
-      popperOptions: { boundariesPadding: 0, gpuAcceleration: false },
+      popperOptions: Object.assign({ boundariesPadding: 0, gpuAcceleration: false }, props.popperOptions),
       visibleArrow: true,
       offset: 0,
       boundariesPadding: 5,
@@ -846,161 +1025,6 @@ const setInputPaddingLeft = ({ props, state, vm, nextTick }) => () => {
     });
   }
 };
-const getSelectionStart = ({ value, format, regx, event }) => {
-  const formatMatchArr = format.match(regx);
-  let selectionStart = getSelectionStartIndex(event);
-  let I = 0;
-  if (value !== "") {
-    const match = value.match(/[0-9]/g);
-    I = match === null ? 0 : match.length;
-    for (let i = 0; i < formatMatchArr.length; i++) {
-      I -= Math.max(formatMatchArr[i].length, 2);
-    }
-    I = I >= 0 ? 1 : 0;
-    I === 1 && selectionStart >= value.length && (selectionStart = value.length - 1);
-  }
-  return { selectionStart, I };
-};
-const getNum = (value, format, regx) => {
-  let len = value.length;
-  if (format && regx) {
-    const formatMatchArr = format.match(regx);
-    len = Math.max(len, formatMatchArr.join("").length);
-  }
-  let num = { str: "", arr: [] };
-  for (let i = 0; i < len; i++) {
-    let char = value.charAt(i) ? value.charAt(i) : "00";
-    if (/[0-9]/.test(char)) {
-      num.str += char;
-    } else {
-      num.arr[i] = 1;
-    }
-  }
-  return num;
-};
-const getSelectionStartIndex = (event) => {
-  const inputElem = event.target;
-  return inputElem.selectionStart - (event.data ? event.data.length : 0);
-};
-const getNumAndSelectionStart = ({ value, format, regx, event, needSelectionStart }) => {
-  if (needSelectionStart) {
-    let { selectionStart, I } = getSelectionStart({ value, format, regx, event });
-    let valueStr;
-    if (event.data) {
-      valueStr = value.substring(0, selectionStart) + event.data + value.substring(selectionStart + I);
-      selectionStart++;
-    } else {
-      valueStr = value;
-    }
-    const numStr = getNum(valueStr);
-    return { numStr, selectionStart };
-  } else {
-    const numStr = getNum(value, format, regx);
-    return { numStr };
-  }
-};
-const checkFormat = ({ value, format, startIndex, selectionStart, regx, needSelectionStart }) => {
-  if (!needSelectionStart && regx.lastIndex === 0 || needSelectionStart && regx.lastIndex === 0 && selectionStart >= startIndex) {
-    const subFormat = `(?<=${format.substring(0, startIndex)})(\\s*\\S*\\s*)+`;
-    const pattern = new RegExp(subFormat, "g");
-    const res = format.match(pattern);
-    if (res) {
-      value += res[0];
-      selectionStart = value.length;
-    }
-  }
-  return { value, selectionStart };
-};
-const moveStart = (inputElem, moveStartIndex) => {
-  if (inputElem.setSelectionRange) {
-    inputElem.focus();
-    setTimeout(() => {
-      inputElem.setSelectionRange(moveStartIndex, moveStartIndex);
-    }, 0);
-  }
-};
-const handleInput = ({ state, props, api }) => (val, event) => {
-  event = val.target ? val : event;
-  if (props.autoFormat) {
-    const value = api.formatInputValue({ event, prevValue: state.displayValue });
-    state.userInput = value;
-  } else {
-    const val2 = event.target.value;
-    state.userInput = val2;
-  }
-};
-const formatInputValue = ({ props, state }) => ({ event, prevValue = "" }) => {
-  const val = event.target.value;
-  const inputData = event.data;
-  const format = state.type === "time-select" ? "HH:mm" : props.format || DATEPICKER.DateFormats[state.type];
-  if (inputData && inputData.charCodeAt() >= 48 && inputData.charCodeAt() <= 57) {
-    return formatText({ event, format, text: prevValue, needSelectionStart: true });
-  } else {
-    return val;
-  }
-};
-const formatText = ({ event, text, format, needSelectionStart = false }) => {
-  if (!format)
-    return text;
-  let cursorOffset = 0;
-  let value = "";
-  let regx = /yyyy|yyy|yy|y|MM|M|dd|d|HH|hh|H|h|mm|m|ss|s|WW|W|w/g;
-  let startIndex = 0;
-  let { numStr, selectionStart } = getNumAndSelectionStart({
-    value: text,
-    format,
-    regx,
-    event,
-    needSelectionStart
-  });
-  let matchResult = regx.exec(format);
-  while (numStr.str !== "" && matchResult !== null) {
-    let subStr;
-    let newNum;
-    let subLen;
-    const endIndex = matchResult.index;
-    if (startIndex >= 0) {
-      value += format.substring(startIndex, endIndex);
-    }
-    selectionStart >= startIndex + cursorOffset && selectionStart <= endIndex + cursorOffset && (selectionStart = selectionStart + endIndex - startIndex);
-    startIndex = regx.lastIndex;
-    subLen = startIndex - endIndex;
-    subStr = numStr.str.substring(0, subLen);
-    const firstMatchChar = matchResult[0].charAt(0);
-    const firstChar = parseInt(subStr.charAt(0), 10);
-    if (numStr.str.length > 1) {
-      const secondChar = numStr.str.charAt(1);
-      newNum = 10 * firstChar + parseInt(secondChar, 10);
-    } else {
-      newNum = firstChar;
-    }
-    if (numStr.arr[endIndex + 1] || firstMatchChar === "M" && newNum > 12 || firstMatchChar === "d" && newNum > 31 || ["H", "h"].includes(firstMatchChar) && newNum > 23 || "ms".includes(firstMatchChar) && newNum > 59) {
-      subStr = matchResult[0].length === 2 ? "0" + firstChar : firstChar;
-      selectionStart++;
-    } else {
-      if (subLen === 1) {
-        subStr = String(newNum);
-        subLen++;
-        cursorOffset++;
-      }
-    }
-    value += subStr;
-    numStr.str = numStr.str.substring(subLen);
-    matchResult = regx.exec(format);
-  }
-  const { value: val, selectionStart: cursorPos } = checkFormat({
-    value,
-    format,
-    startIndex,
-    selectionStart,
-    regx,
-    needSelectionStart
-  });
-  value = val;
-  selectionStart = cursorPos;
-  needSelectionStart && moveStart(event.target, selectionStart);
-  return value;
-};
 export {
   blur,
   computedFormat,
@@ -1059,6 +1083,7 @@ export {
   updateOptions,
   valueEquals,
   watchIsRange,
+  watchMobileVisible,
   watchModelValue,
   watchPickerVisible
 };

package/picker/vue.js

@@ -5,6 +5,7 @@ import {
   watchIsRange,
   parseAsFormatAndType,
   watchPickerVisible,
+  watchMobileVisible,
   getValueEmpty,
   getMode,
   displayValue,
@@ -155,13 +156,13 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent, br
 const initApi = ({ api: api2, props, hooks, state, vnode, others, utils, parent }) => {
   const { t, emit, dispatch, nextTick, vm } = vnode;
   const { TimePanel, TimeRangePanel } = others;
-  const { destroyPopper, popperElm, updatePopper, doDestroy } = initPopper({ props, hooks, vnode });
+  const { destroyPopper, popperElm, updatePopper } = initPopper({ props, hooks, vnode });
   state.popperElm = popperElm;
   state.picker = null;
   Object.assign(api2, {
     destroyPopper,
     emitDbTime: emitDbTime({ emit, state, t }),
-    hidePicker: hidePicker({ state, doDestroy }),
+    hidePicker: hidePicker({ destroyPopper, state }),
     handleSelectChange: ({ tz, date }) => !state.ranged && emit("select-change", { tz, date }),
     getPanel: getPanel(others),
     handleFocus: handleFocus({ emit, vm, state, api: api2 }),
@@ -187,7 +188,8 @@ const initApi = ({ api: api2, props, hooks, state, vnode, others, utils, parent
     handleClose: handleClose({ api: api2, props, state }),
     displayValue: displayValue({ api: api2, props, state }),
     handlePick: handlePick({ api: api2, state }),
-    watchPickerVisible: watchPickerVisible({ api: api2, vm, dispatch, emit, props, state }),
+    watchPickerVisible: watchPickerVisible({ api: api2, vm, dispatch, emit, props, state, nextTick }),
+    watchMobileVisible: watchMobileVisible({ api: api2, props, state, nextTick }),
     formatToString: formatToString({ api: api2, state }),
     watchIsRange: watchIsRange({ api: api2, state, TimePanel, TimeRangePanel }),
     mountPicker: mountPicker({ api: api2, vm, props, state, updatePopper }),
@@ -196,7 +198,7 @@ const initApi = ({ api: api2, props, hooks, state, vnode, others, utils, parent
     computedTriggerClass: computedTriggerClass({ props, state }),
     computedHaveTrigger: computedHaveTrigger({ props }),
     setInputPaddingLeft: setInputPaddingLeft({ props, state, vm, nextTick }),
-    formatInputValue: formatInputValue({ props, state, api: api2 })
+    formatInputValue: formatInputValue({ props, state })
   });
   initApi2({ api: api2, props, state, t, parent });
   initMobileApi({ api: api2, props, state, t, parent });
@@ -240,6 +242,7 @@ const initWatch = ({ api: api2, state, props, watch, markRaw }) => {
     (type) => state.panel = markRaw(api2.getPanel(type)),
     { immediate: true }
   );
+  watch(() => [state.dateMobileOption.visible, state.timeMobileOption.visible], api2.watchMobileVisible);
   watch(() => state.pickerVisible, api2.watchPickerVisible);
   watch(
     () => props.defaultValue,

package/popconfirm/index.js

@@ -24,8 +24,14 @@ const handleEmit = ({ state, emit, vm }) => (type) => {
     emit(type, state);
   }
 };
+const handleDocumentClick = ({ vm, api }) => (event) => {
+  if (vm.$refs.popover.handleDocumentClick(event)) {
+    api.hide();
+  }
+};
 export {
   confirm,
+  handleDocumentClick,
   handleEmit,
   hide,
   show

package/popconfirm/vue.js

@@ -1,7 +1,8 @@
 import "../chunk-G2ADBYYC.js";
-import { show, hide, confirm, handleEmit } from "./index";
+import { on, off } from "../common/deps/dom";
+import { show, hide, confirm, handleEmit, handleDocumentClick } from "./index";
 const api = ["state", "show", "hide", "confirm", "handleEmit"];
-const renderless = (props, { computed, reactive }, { emit, constants, designConfig, vm }) => {
+const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount }, { emit, constants, designConfig, vm }) => {
   var _a;
   const api2 = {};
   const designIcon = (_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a[props.type];
@@ -17,7 +18,14 @@ const renderless = (props, { computed, reactive }, { emit, constants, designConf
     show: show({ state, emit, props }),
     hide: hide({ state, emit }),
     confirm: confirm({ state, api: api2 }),
-    handleEmit: handleEmit({ state, emit, vm })
+    handleEmit: handleEmit({ state, emit, vm }),
+    handleDocumentClick: handleDocumentClick({ api: api2, vm })
+  });
+  onMounted(() => {
+    props.closeOnClickOutside && on(document, "click", api2.handleDocumentClick);
+  });
+  onBeforeUnmount(() => {
+    props.closeOnClickOutside && off(document, "click", api2.handleDocumentClick);
   });
   return api2;
 };

package/popeditor/index.js

@@ -570,7 +570,7 @@ const doSuggesst = ({ state, props, popper, api, nextTick }) => (event) => {
         const row = find(state.selectedDatas, (node) => text === node[props.textField]);
         api.sourceGridSelectChange({ checked: false, row, confirm: false });
       });
-      if (addtions.length) {
+      if (!state.suggestList.length || addtions.length) {
         doQuery(query2);
       }
     } else {
@@ -582,7 +582,7 @@ const closeSuggestPanel = ({ state, api, vm }) => (event = false) => {
   const reference = vm.$refs.reference;
   const popper = vm.$refs.popper;
   let keep = !event;
-  if (event.target) {
+  if (event.target && reference) {
     keep = reference.$el.contains(event.target) || popper.contains(event.target);
   }
   if (!keep) {

package/popover/index.js

@@ -127,7 +127,10 @@ const handleDocumentClick = ({ vm, state }) => (event) => {
     target = state.webCompEventTarget;
   }
   if (!$el || !reference || $el.contains(target) || reference.contains(target) || !popperElm || popperElm.contains(target)) {
-    return;
+    return false;
+  } else {
+    state.showPopper = false;
+    return true;
   }
   state.showPopper = false;
 };

package/popover/vue.js

@@ -29,7 +29,8 @@ const api = [
   "doShow",
   "doClose",
   "doDestroy",
-  "handleItemClick"
+  "handleItemClick",
+  "handleDocumentClick"
 ];
 const initState = ({
   reactive,