@opentiny/vue-renderless 3.8.3 → 3.9.0

package/common/validate/util.js

@@ -2,6 +2,7 @@ import {
   __spreadValues
 } from "../../chunk-PKUHTIDK.js";
 import { hasOwn, isNull } from "../type";
+import { log } from "../xss";
 const formatRegExp = /%[sdj%]/g;
 let warning = () => void 0;
 function convertFieldsError(errors) {
@@ -138,7 +139,7 @@ function asyncMap(objArray, option, func, callback) {
       const flattenArr = flattenObjArr(objArray);
       asyncSerialArray(flattenArr, func, next);
     });
-    pending2.catch((error) => error);
+    pending2.catch((error) => error.errors && error.fields || log.logger.error(error));
     return pending2;
   }
   let firstFields = option.firstFields || [];
@@ -168,7 +169,7 @@ function asyncMap(objArray, option, func, callback) {
       }
     });
   });
-  pending.catch((e) => e);
+  pending.catch((error) => error.errors && error.fields || log.logger.error(error));
   return pending;
 }
 function complementError(rule) {

package/drawer/index.js

@@ -1,5 +1,6 @@
 import "../chunk-PKUHTIDK.js";
 import debounce from "../common/deps/debounce";
+import { addClass, removeClass } from "../common/deps/dom";
 const close = ({ emit, state }) => () => {
   state.toggle = false;
   emit("close", state);
@@ -70,14 +71,28 @@ const removeDragEvent = ({ api, vm }) => () => {
   el.removeEventListener("touchmove", api.mousemove);
   el.removeEventListener("touchend", api.mouseup);
 };
+const showScrollbar = (lockScrollClass) => () => {
+  addClass(document.body, lockScrollClass);
+};
+const hideScrollbar = (lockScrollClass) => () => {
+  removeClass(document.body, lockScrollClass);
+};
+const watchVisibleNotImmediate = ({ api, props }) => (visible) => {
+  if (props.lockScroll) {
+    visible ? api.showScrollbar() : api.hideScrollbar();
+  }
+};
 export {
   addDragEvent,
   close,
   confirm,
+  hideScrollbar,
   mousedown,
   mousemove,
   mouseup,
   removeDragEvent,
+  showScrollbar,
   watchToggle,
-  watchVisible
+  watchVisible,
+  watchVisibleNotImmediate
 };

package/drawer/vue.js

@@ -8,10 +8,14 @@ import {
   mouseup,
   mousemove,
   addDragEvent,
-  removeDragEvent
+  removeDragEvent,
+  showScrollbar,
+  hideScrollbar,
+  watchVisibleNotImmediate
 } from "./index";
 const api = ["state", "close", "confirm"];
-const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { emit, vm }) => {
+const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { emit, vm, mode, constants }) => {
+  const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode);
   const api2 = {};
   const state = reactive({
     toggle: false,
@@ -29,13 +33,20 @@ const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, comput
     addDragEvent: addDragEvent({ api: api2, vm }),
     removeDragEvent: removeDragEvent({ api: api2, vm }),
     watchVisible: watchVisible({ state }),
-    watchToggle: watchToggle({ emit })
+    watchToggle: watchToggle({ emit }),
+    showScrollbar: showScrollbar(lockScrollClass),
+    hideScrollbar: hideScrollbar(lockScrollClass),
+    watchVisibleNotImmediate: watchVisibleNotImmediate({ api: api2, props })
   });
   onMounted(() => {
     props.dragable && api2.addDragEvent();
+    if (props.lockScroll && props.visible) {
+      api2.showScrollbar();
+    }
   });
   onBeforeUnmount(() => {
     props.dragable && api2.removeDragEvent();
+    props.lockScroll && api2.hideScrollbar();
   });
   watch(() => props.visible, api2.watchVisible, { immediate: true });
   watch(() => state.toggle, api2.watchToggle);

package/dropdown-item/mf.js

@@ -3,7 +3,7 @@ import { omitText } from "../common/string";
 const api = ["dataStore", "handleClick", "dataStore", "mouseEnter", "mouseLeave"];
 const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
   const api2 = {};
-  const dropdownMenuVm = inject("dropdownMenuVm");
+  const dropdownMenuVm = inject("dropdownMenu");
   const multiStage = inject("multiStage");
   let dataStore = reactive({
     checkedStatus: dropdownMenuVm.checkedStatus,

package/dropdown-menu/index.js

@@ -88,6 +88,9 @@ const useVuePopper = ({ api, props, hooks, instance, state }) => {
     dropdown.popperElm = popper.popperElm.value = vm.$el;
     popper.referenceElm.value = dropdown.$el;
     dropdown.initDomOperation();
+    if (dropdown.inheritWidth) {
+      dropdown.popperElm.style.minWidth = dropdown.$el.clientWidth + "px";
+    }
   });
   onBeforeUnmount(() => {
     popper.destroyPopper("remove");

package/dropdown-menu/vue.js

@@ -1,6 +1,24 @@
 import "../chunk-PKUHTIDK.js";
-import { toggleItem, updateOffset, clickOutside, getScroller, useVuePopper, mounted, handleMenuItemClick, handleMouseenter, handleMouseleave } from "./index";
-const api = ["state", "toggleItem", "updateOffset", "clickOutside", "doDestroy", "handleMouseenter", "handleMouseleave"];
+import {
+  toggleItem,
+  updateOffset,
+  clickOutside,
+  getScroller,
+  useVuePopper,
+  mounted,
+  handleMenuItemClick,
+  handleMouseenter,
+  handleMouseleave
+} from "./index";
+const api = [
+  "state",
+  "toggleItem",
+  "updateOffset",
+  "clickOutside",
+  "doDestroy",
+  "handleMouseenter",
+  "handleMouseleave"
+];
 const renderless = (props, hooks, instance) => {
   const api2 = {};
   const { reactive, provide, onMounted } = hooks;

package/file-upload/index.js

@@ -535,7 +535,6 @@ const handleRemove = ({ api, emit, props, state, constants }) => (file, raw) =>
     file = api.getFile(raw);
   }
   let doRemove = () => {
-    file.status = constants.FILE_STATUS.FAIL;
     api.abort(file);
     let fileList = state.uploadFiles;
     fileList.splice(fileList.indexOf(file), 1);

package/grid/utils/column.js

@@ -40,6 +40,7 @@ function setBasicProperty(column, context) {
   column.treeNode = context.treeNode;
   column.renderer = context.renderer;
   column.editor = context.editor;
+  column.operationConfig = context.operationConfig;
 }
 function ColumnConfig(context, { renderHeader, renderCell, renderData } = {}, config = {}) {
   setBasicProperty(this, context);

package/grid/utils/dom.js

@@ -5,8 +5,6 @@ import { arrayIndexOf } from "../static";
 const ATTR_NAME = "data-rowid";
 const CELL_CLS = ".tiny-grid-cell";
 const ROW_CLS = ".tiny-grid-body__row";
-const htmlEl = document.querySelector("html");
-const bodyEl = document.body;
 const isPx = (val) => val && /^\d+(px)?$/.test(val);
 const isScale = (val) => val && /^\d+%$/.test(val);
 const updateCellTitle = (event) => {
@@ -126,6 +124,8 @@ const getEventTargetNode = (event, container, queryCls) => {
 };
 function getNodeOffset(el, container, rest) {
   if (el) {
+    const htmlEl = document.querySelector("html");
+    const bodyEl = document.body;
     const parentEl = el.parentNode;
     rest.top += el.offsetTop;
     rest.left += el.offsetLeft;

package/image/vue.js

@@ -15,7 +15,18 @@ import {
   mounted,
   deleteHander
 } from "./index";
-const api = ["state", "src", "zIndex", "previewSrcList", "loadImage", "clickHandler", "closeViewer", "handleLoad", "handleError", "deleteHander"];
+const api = [
+  "state",
+  "src",
+  "zIndex",
+  "previewSrcList",
+  "loadImage",
+  "clickHandler",
+  "closeViewer",
+  "handleLoad",
+  "handleError",
+  "deleteHander"
+];
 const initState = ({ reactive, computed, api: api2, props, images }) => {
   const state = reactive({
     mfPreviewVisible: props.previewVisible,

package/input/index.js

@@ -46,7 +46,7 @@ const calculateNodeStyling = () => (targetElement) => {
   const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";");
   return { contextStyle, paddingSize, borderSize, boxSizing };
 };
-const calcTextareaHeight = ({ api, hiddenTextarea, props }) => (targetElement, minRows = 1, maxRows = null) => {
+const calcTextareaHeight = ({ api, hiddenTextarea, props, state }) => (targetElement, minRows = 1, maxRows = null) => {
   if (!hiddenTextarea) {
     hiddenTextarea = document.createElement("textarea");
     document.body.appendChild(hiddenTextarea);
@@ -74,8 +74,12 @@ const calcTextareaHeight = ({ api, hiddenTextarea, props }) => (targetElement, m
     if (props.height) {
       minHeight = props.height;
     }
-    height = Math.max(minHeight, height);
-    textareaStyle.minHeight = `${minHeight}px`;
+    if (!state.isDisplayOnly) {
+      height = Math.max(minHeight, height);
+      textareaStyle.minHeight = `${minHeight}px`;
+    } else {
+      textareaStyle.minHeight = `0px`;
+    }
   }
   if (maxRows !== null) {
     let maxHeight = singleRowHeight * maxRows;
@@ -250,6 +254,12 @@ const getDisplayedValue = ({ state, props }) => () => {
     return props.displayOnlyContent || state.nativeInputValue || "-";
   }
 };
+const handleDrop = (emit) => (event) => {
+  emit("drop", event);
+};
+const handleDragStart = (emit) => (event) => {
+  emit("dragstart", event);
+};
 export {
   blur,
   calcIconOffset,
@@ -266,6 +276,8 @@ export {
   handleCompositionEnd,
   handleCompositionStart,
   handleCompositionUpdate,
+  handleDragStart,
+  handleDrop,
   handleEnterDisplayOnlyContent,
   handleFocus,
   handleInput,

package/input/vue.js

@@ -30,7 +30,9 @@ import {
   handleEnterDisplayOnlyContent,
   hiddenPassword,
   dispatchDisplayedValue,
-  getDisplayedValue
+  getDisplayedValue,
+  handleDrop,
+  handleDragStart
 } from "./index";
 import useStorageBox from "../tall-storage/vue-storage-box";
 const api = [
@@ -63,7 +65,9 @@ const api = [
   "isMemoryStorage",
   "hasSelection",
   "handleEnterDisplayOnlyContent",
-  "hiddenPassword"
+  "hiddenPassword",
+  "handleDrop",
+  "handleDragStart"
 ];
 const initState = ({ reactive, computed, mode, props, parent, constants }) => {
   const state = reactive({
@@ -77,21 +81,29 @@ const initState = ({ reactive, computed, mode, props, parent, constants }) => {
     checkedLable: "",
     sheetvalue: props.modelValue,
     inputSize: computed(() => props.size || state.formItemSize),
-    showClear: computed(() => props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (state.focused || state.hovering)),
+    showClear: computed(
+      () => props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (state.focused || state.hovering)
+    ),
     upperLimit: computed(() => parent.$attrs.maxlength),
     textLength: computed(() => textLength(props.modelValue)),
     inputExceed: computed(() => state.isWordLimitVisible && state.textLength > state.upperLimit),
     formItemSize: computed(() => (parent.formItem || {}).formItemSize),
     validateIcon: computed(() => constants.VALIDATE_ICON[state.validateState]),
     showWordLimit: computed(() => props.showWordLimit && parent.$attrs.maxlength),
-    inputDisabled: computed(() => props.disabled || (parent.tinyForm || {}).disabled),
+    inputDisabled: computed(
+      () => props.disabled || (parent.auiForm || {}).disabled || state.isDisplayOnly || (parent.tinyForm || {}).displayOnly
+    ),
     validateState: computed(() => parent.formItem ? parent.formItem.validateState : ""),
     textareaStyle: computed(() => __spreadProps(__spreadValues({}, state.textareaCalcStyle), {
       resize: props.resize
     })),
     needStatusIcon: computed(() => parent.tinyForm ? parent.tinyForm.statusIcon : false),
-    showPwdVisible: computed(() => props.showPassword && !state.inputDisabled && !props.readonly && (!!state.nativeInputValue || state.focused)),
-    nativeInputValue: computed(() => props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue)),
+    showPwdVisible: computed(
+      () => props.showPassword && !state.inputDisabled && !props.readonly && (!!state.nativeInputValue || state.focused)
+    ),
+    nativeInputValue: computed(
+      () => props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue)
+    ),
     isWordLimitVisible: computed(
       () => (props.showWordLimit && parent.$attrs.maxlength || props.counter) && (parent.type === "text" || parent.type === "textarea") && !state.inputDisabled && !props.readonly && !props.showPassword
     ),
@@ -119,7 +131,9 @@ const initApi = ({ api: api2, state, dispatch, broadcast, emit, refs, props, CLA
     handleCompositionStart: handleCompositionStart(state),
     handleCompositionUpdate: handleCompositionUpdate(state),
     dispatchDisplayedValue: dispatchDisplayedValue({ state, props, dispatch, api: api2 }),
-    getDisplayedValue: getDisplayedValue({ state, props })
+    getDisplayedValue: getDisplayedValue({ state, props }),
+    handleDrop: handleDrop(emit),
+    handleDragStart: handleDragStart(emit)
   });
 };
 const mergeApi = ({ storages, api: api2, componentName, props, emit, eventName, nextTick, parent, state, refs }) => {
@@ -148,7 +162,8 @@ const mergeApi = ({ storages, api: api2, componentName, props, emit, eventName,
     calcTextareaHeight: calcTextareaHeight({
       api: api2,
       hiddenTextarea: null,
-      props
+      props,
+      state
     }),
     setNativeInputValue: setNativeInputValue({ api: api2, state }),
     handleCompositionEnd: handleCompositionEnd({ api: api2, state }),
@@ -193,6 +208,17 @@ const initWatch = ({ watch, state, api: api2, props, nextTick, emit, componentNa
       });
     }
   );
+  watch(
+    () => state.isDisplayOnly,
+    () => {
+      nextTick(() => {
+        api2.setNativeInputValue();
+        api2.resizeTextarea();
+        api2.updateIconOffset();
+        api2.dispatchDisplayedValue();
+      });
+    }
+  );
   watch(
     () => state.sheetvalue,
     (value) => api2.watchFormSelect(value),

package/ip-address/index.js

@@ -115,7 +115,7 @@ const keyup = ({ api, props }) => ({ item, index, event }) => {
       item.value = item.value.replace(/\D/g, "");
       return false;
     }
-    if ([KEY_CODE.Space, KEY_CODE.NumpadDecimal, KEY_CODE.NumpadComma].includes(keyCode) && value) {
+    if ([KEY_CODE.Tab, KEY_CODE.Space, KEY_CODE.NumpadDecimal, KEY_CODE.NumpadComma].includes(keyCode) && value) {
       api.select({ index: nextIndex });
       return false;
     }
@@ -126,14 +126,14 @@ const keyup = ({ api, props }) => ({ item, index, event }) => {
     }
   }
 };
-const checkError1 = ({ Space, NumpadDecimal, NumpadComma, keyCode, value }) => [Space, NumpadDecimal, NumpadComma].includes(keyCode) && value;
+const checkError1 = ({ Tab, Space, NumpadDecimal, NumpadComma, keyCode, value }) => [Tab, Space, NumpadDecimal, NumpadComma].includes(keyCode) && value;
 const checkError2 = (newValue) => newValue && (isNaN(newValue) || newValue > IPTHRESHOLD.Max);
 const checkError3 = ({ isfilterKeyCodes, isSelected, value }) => !isfilterKeyCodes && !isSelected && value === "0";
 const checkError4 = ({ isfilterKeyCodes, isSelected, value, key }) => !isfilterKeyCodes && !isSelected && value + key > IPTHRESHOLD.Max;
 const checkError5 = ({ key, isfilterKeyCodes, value, ctrlKey, keyCode, KeyV }) => isNaN(key) && !isfilterKeyCodes && !(!value && ctrlKey && keyCode === KeyV);
 const isError = ({ key, value, isSelected, isfilterKeyCodes, ctrlKey, keyCode, newValue }) => {
-  const { Space, NumpadDecimal, NumpadComma, KeyV } = KEY_CODE;
-  return checkError1({ Space, NumpadDecimal, NumpadComma, keyCode, value }) || checkError2(newValue) || checkError3({ isfilterKeyCodes, isSelected, value }) || checkError4({ isfilterKeyCodes, isSelected, value, key }) || checkError5({ key, isfilterKeyCodes, value, ctrlKey, keyCode, KeyV });
+  const { Tab, Space, NumpadDecimal, NumpadComma, KeyV } = KEY_CODE;
+  return checkError1({ Tab, Space, NumpadDecimal, NumpadComma, keyCode, value }) || checkError2(newValue) || checkError3({ isfilterKeyCodes, isSelected, value }) || checkError4({ isfilterKeyCodes, isSelected, value, key }) || checkError5({ key, isfilterKeyCodes, value, ctrlKey, keyCode, KeyV });
 };
 const keydown = ({ api, props, state }) => ({ item, index, event }) => {
   const { target, key, keyCode, ctrlKey } = event;

package/month-table/index.js

@@ -58,8 +58,11 @@ const getRows = ({ props, state, vm }) => () => {
   return tableRows;
 };
 const markRange = ({ props, state }) => (minDate, maxDate) => {
-  minDate = Math.min(getMonthTimestamp(minDate), getMonthTimestamp(maxDate));
-  maxDate = Math.max(getMonthTimestamp(minDate), getMonthTimestamp(maxDate));
+  minDate = getMonthTimestamp(minDate);
+  maxDate = getMonthTimestamp(maxDate);
+  if (minDate > maxDate) {
+    [minDate, maxDate] = [maxDate, minDate];
+  }
   const rows = state.rows;
   for (let i = 0, len = rows.length; i < len; i++) {
     const row = rows[i];

package/numeric/index.js

@@ -58,7 +58,7 @@ const increase = ({ api, props, state }) => () => {
   if (state.inputDisabled || state.maxDisabled) {
     return;
   }
-  const value = props.modelValue || 0;
+  const value = (props.mouseWheel ? state.displayValue : props.modelValue) || 0;
   let newVal = api.internalIncrease({ val: value, step: props.step });
   if (!props.circulate || !isFinite(props.max) || !isFinite(props.min)) {
     api.setCurrentValue(newVal);
@@ -73,7 +73,7 @@ const decrease = ({ api, props, state }) => () => {
   if (state.inputDisabled || state.minDisabled) {
     return;
   }
-  const value = props.modelValue || 0;
+  const value = (props.mouseWheel ? state.displayValue : props.modelValue) || 0;
   let newVal = api.internalDecrease({ val: value, step: props.step });
   if (!props.circulate || !isFinite(props.max) || !isFinite(props.min)) {
     api.setCurrentValue(newVal);
@@ -92,7 +92,10 @@ const handleBlur = ({ constants, dispatch, emit, props, state, api }) => (event)
     dispatch(constants.COMPONENT_NAME, constants.EVENT_NAME.blur, [state.displayValue]);
   }
 };
-const handleFocus = ({ emit, state, props, api }) => (event) => {
+const handleFocus = ({ emit, state, props, api, refs }) => (event) => {
+  if (props.disabled) {
+    refs.input.blur();
+  }
   state.inputStatus = true;
   const currentValue = api.getDecimal(state.currentValue);
   if (!currentValue.isNaN() && !isNull(state.currentValue)) {

package/numeric/vue.js

@@ -60,7 +60,7 @@ const initApi = ({ api: api2, props, state, parent, refs, emit, dispatch, consta
     mounted: mounted({ constants, parent, props, refs, state }),
     unmounted: unmounted({ parent, state }),
     getDecimal: getDecimal(props),
-    handleFocus: handleFocus({ emit, state, props, api: api2 }),
+    handleFocus: handleFocus({ emit, state, props, api: api2, refs }),
     decrease: decrease({ api: api2, props, state }),
     increase: increase({ api: api2, props, state }),
     handleInput: handleInput({ state, api: api2, emit, props }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.8.3",
+  "version": "3.9.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [
@@ -16,6 +16,13 @@
   ],
   "author": "OpenTiny Team",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:opentiny/tiny-vue.git"
+  },
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-vue/issues"
+  },
   "sideEffects": false,
   "scripts": {
     "build": "tsup",

package/pager/vue.js

@@ -1,9 +1,9 @@
 import "../chunk-PKUHTIDK.js";
 const api = [];
-function renderless() {
+const renderless = () => {
   const api2 = {};
   return api2;
-}
+};
 export {
   api,
   renderless

package/popconfirm/index.js

@@ -17,6 +17,7 @@ const show = ({ state, emit, props }) => (trigger) => {
 const confirm = ({ state, emit }) => () => {
   state.showPopover = false;
   emit("confirm", state);
+  emit("hide", state);
 };
 export {
   confirm,

package/popconfirm/vue.js

@@ -1,12 +1,14 @@
 import "../chunk-PKUHTIDK.js";
 import { show, hide, confirm } from "./index";
 const api = ["state", "show", "hide", "confirm"];
-const renderless = (props, { computed, reactive }, { emit, constants }) => {
+const renderless = (props, { computed, reactive }, { emit, constants, designConfig }) => {
+  var _a;
   const api2 = {};
+  const designIcon = (_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a[props.type];
   const state = reactive({
     isLock: false,
     showPopover: false,
-    getIcon: computed(() => typeof props.type === "object" ? props.type : constants.ICON_MAP[props.type])
+    getIcon: computed(() => typeof props.type === "object" ? props.type : designIcon || constants.ICON_MAP[props.type])
   });
   Object.assign(api2, {
     state,

package/popover/index.js

@@ -26,11 +26,13 @@ const processTrigger = ({ api, state, props, nextTick }) => {
     }
   }
 };
-const mounted = ({ api, state, constants, props, nextTick }) => () => {
+const mounted = ({ api, state, constants, props, nextTick, mode }) => () => {
   state.mounted = true;
   const { referenceElm, popperElm, tooltipId } = state;
   if (referenceElm) {
-    addClass(referenceElm, `${constants.IDPREFIX}__reference`);
+    if (mode !== "mobile-first") {
+      addClass(referenceElm, `${constants.IDPREFIX}__reference`);
+    }
     referenceElm.setAttribute("aria-describedby", tooltipId);
     referenceElm.setAttribute("tabindex", props.tabindex);
     popperElm.setAttribute("tabindex", 0);
@@ -133,17 +135,22 @@ const cleanup = ({ props, state }) => () => {
   }
 };
 const destroyed = ({ state, api }) => () => {
-  const reference = state.referenceElm;
-  off(reference, "click", api.doToggle);
-  off(reference, "mouseup", api.doClose);
-  off(reference, "mousedown", api.doShow);
-  off(reference, "focusin", api.doShow);
-  off(reference, "focusout", api.doClose);
-  off(reference, "mousedown", api.doShow);
-  off(reference, "mouseup", api.doClose);
-  off(reference, "mouseleave", api.handleMouseLeave);
-  off(reference, "mouseenter", api.handleMouseEnter);
+  const { referenceElm, popperElm } = state;
+  off(referenceElm, "click", api.doToggle);
+  off(referenceElm, "mouseup", api.doClose);
+  off(referenceElm, "mousedown", api.doShow);
+  off(referenceElm, "focusin", api.doShow);
+  off(referenceElm, "focusout", api.doClose);
+  off(referenceElm, "mouseleave", api.handleMouseLeave);
+  off(referenceElm, "mouseenter", api.handleMouseEnter);
   off(document, "click", api.handleDocumentClick);
+  off(popperElm, "focusin", api.handleFocus);
+  off(popperElm, "focusout", api.handleBlur);
+  off(popperElm, "mouseenter", api.handleMouseEnter);
+  off(popperElm, "mouseleave", api.handleMouseLeave);
+  off(referenceElm, "click", api.handleClick);
+  off(referenceElm, "focusout", api.handleBlur);
+  off(referenceElm, "keydown", api.handleKeydown);
 };
 const computedTooltipId = (constants) => () => `${constants.IDPREFIX}-${guid("", 4)}`;
 const wrapMounted = ({ api, props, refs, state }) => () => {

package/popover/vue.js

@@ -21,7 +21,16 @@ import {
   observeCallback
 } from "./index";
 import userPopper from "../common/deps/vue-popper";
-const api = ["state", "handleAfterEnter", "handleAfterLeave", "handleItemClick"];
+const api = [
+  "state",
+  "handleAfterEnter",
+  "handleAfterLeave",
+  "doToggle",
+  "doShow",
+  "doClose",
+  "doDestroy",
+  "handleItemClick"
+];
 const initState = ({ reactive, computed, api: api2, popperElm, showPopper, referenceElm }) => {
   const state = reactive({
     popperElm,
@@ -29,14 +38,15 @@ const initState = ({ reactive, computed, api: api2, popperElm, showPopper, refer
     timer: null,
     mounted: false,
     referenceElm,
+    xPlacement: "bottom",
     tooltipId: computed(() => api2.computedTooltipId())
   });
   return state;
 };
-const initApi = ({ api: api2, props, state, refs, emit, doDestroy, constants, nextTick, vm }) => {
+const initApi = ({ api: api2, props, state, refs, emit, doDestroy, constants, nextTick, vm, mode }) => {
   Object.assign(api2, {
     state,
-    mounted: mounted({ api: api2, state, constants, props, nextTick }),
+    mounted: mounted({ api: api2, state, constants, props, nextTick, mode }),
     cleanup: cleanup({ state, props }),
     destroyed: destroyed({ state, api: api2 }),
     doDestroy,
@@ -81,13 +91,13 @@ const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
     }
   );
 };
-const renderless = (props, { reactive, computed, watch, toRefs, onBeforeUnmount, onMounted, onUnmounted, onActivated, onDeactivated }, { $prefix, emit, vm, refs, slots, nextTick }) => {
+const renderless = (props, { reactive, computed, watch, toRefs, onBeforeUnmount, onMounted, onUnmounted, onActivated, onDeactivated }, { $prefix, emit, vm, refs, slots, nextTick, mode }) => {
   const api2 = {};
   const constants = { IDPREFIX: `${$prefix.toLowerCase()}-popover` };
   const options = { emit, onBeforeUnmount, nextTick, reactive, props, watch, onDeactivated, refs, slots, toRefs };
   const { showPopper, popperElm, referenceElm, doDestroy } = userPopper(options);
   const state = initState({ reactive, computed, api: api2, popperElm, showPopper, referenceElm });
-  initApi({ api: api2, constants, props, state, refs, emit, doDestroy, nextTick, vm });
+  initApi({ api: api2, constants, props, state, refs, emit, doDestroy, nextTick, vm, mode });
   onDeactivated(() => {
     api2.destroyed();
     api2.cleanup();