@opentiny/vue-renderless 3.20.3 → 3.21.0

package/badge/vue.js

@@ -1,6 +1,6 @@
 import "../chunk-G2ADBYYC.js";
 import { computedContent, computedValueRef, computedTransform } from "./index";
-import { xss } from "../common/xss";
+import { xss } from "@opentiny/utils";
 const api = ["state"];
 const renderless = (props, { computed, reactive }, { designConfig }) => {
   const state = reactive({

package/base-select/index.js

@@ -19,6 +19,7 @@ import { isNull } from "../common/type";
 import { fastdom } from "../common/deps/fastdom";
 import { deepClone } from "../picker-column";
 import { escapeRegexpString } from "../option";
+import { isBrowser } from "../common/browser";
 const handleComposition = ({ api, nextTick, state }) => (event) => {
   const text = event.target.value;
   if (event.type === "compositionend") {
@@ -1291,6 +1292,8 @@ const watchInitValue = ({ props, emit }) => (value) => {
   }
 };
 const watchShowClose = ({ nextTick, state, parent }) => () => {
+  if (!isBrowser)
+    return;
   nextTick(() => {
     const parentEl = parent.$el;
     const inputEl = parentEl.querySelector('input[data-tag="tiny-input-inner"]');

package/bulletin-board/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { xss } from "../common/xss";
+import { xss } from "@opentiny/utils";
 const getRoute = (route) => `/${route || ""}`.replace(/^\/+/, "/");
 const computedDataList = ({ props, state }) => () => {
   const list = props.data[Number(state.actName) - 1] || [];

package/button/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { xss } from "../common/xss";
+import { xss } from "@opentiny/utils";
 const handleClick = ({ emit, props, state, designConfig }) => (event) => {
   var _a, _b;
   const urlHref = xss.filterUrl(props.href);

package/cascader/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import browser from "../common/browser";
+import browser, { isBrowser } from "../common/browser";
 import { isNull } from "../common/type";
 import debounce from "../common/deps/debounce";
 import { isEqual } from "../common/object";
@@ -237,15 +237,17 @@ const focusFirstNode = ({ vm, state }) => () => {
   }
 };
 const computePresentText = ({ props, state }) => () => {
-  if (!isEmpty(state.checkedValue)) {
-    const node = state.panel.getNodeByValue(state.checkedValue);
-    if (node && (state.config.checkStrictly || node.isLeaf)) {
-      state.presentText = node.getText(props.showAllLevels, props.separator);
-      return;
+  if (isBrowser) {
+    if (!isEmpty(state.checkedValue)) {
+      const node = state.panel.getNodeByValue(state.checkedValue);
+      if (node && (state.config.checkStrictly || node.isLeaf)) {
+        state.presentText = node.getText(props.showAllLevels, props.separator);
+        return;
+      }
     }
+    state.inputValue = null;
+    state.presentText = null;
   }
-  state.inputValue = null;
-  state.presentText = null;
 };
 const computePresentTags = ({ api, props, state }) => () => {
   const checkedNodes = api.getCheckedNodes(state.leafOnly);

package/cascader-panel/vue.js

@@ -27,7 +27,7 @@ import {
 } from "./index";
 import { merge } from "../common/object";
 import { isEmpty } from "../cascader";
-import Store from "./store.js";
+import Store from "./store";
 const api = [
   "state",
   "handleKeyDown",

package/cascader-select/column-index.js

@@ -1,4 +1,5 @@
 import "../chunk-G2ADBYYC.js";
+import { isBrowser } from "../common/browser";
 const DEFAULT_DURATION = 200;
 const INERTIA_TIME = 300;
 const INERTIA_DISTANCE = 15;
@@ -23,6 +24,8 @@ const setRollerStyle = ({ state }) => (index) => {
   return `transform: rotate3d(1, 0, 0, ${-state.rotation * index}deg) translate3d(0px, 0px, 104px)`;
 };
 const onTouchStart = ({ state, props, touch, vm }) => (event) => {
+  if (!isBrowser)
+    return;
   touch.start(event);
   if (state.moving) {
     const dom = vm.$refs.roller;

package/chart-core/deps/utils.js

@@ -7,7 +7,7 @@ import { isObject, typeOf as getType, isNull } from "../../common/type";
 import _debounce from "../../common/deps/debounce";
 import _numerify from "./numerify";
 import { escapeHtml } from "../../common/string";
-import { xss } from "../../common/xss";
+import { xss } from "@opentiny/utils";
 import { setObj, getObj, isEqual } from "../../common/object";
 import { typeOf, isObject as isObject2 } from "../../common/type";
 const debounce = (callback, delay) => _debounce(delay, false, callback);

package/chart-core/index.js

@@ -12,7 +12,7 @@ import {
   DEFAULT_CONFIG
 } from "./deps/constants";
 import { getType, debounce, isObject, cloneDeep, isEqual, htmlHandler, get } from "./deps/utils";
-import { xss } from "../common/xss";
+import { xss } from "@opentiny/utils";
 import setAnimation from "./modules/animation";
 import setExtend from "./modules/extend";
 import setMark from "./modules/mark";

package/common/browser.js

@@ -23,6 +23,7 @@ const isEdge = (browser) => {
   }
 };
 const isBrowser = typeof window !== "undefined" && typeof document !== "undefined" && window.document === document;
+const globalEnvironment = isBrowser ? window : global;
 var browser_default = (() => {
   const browser = {
     name: void 0,
@@ -75,5 +76,6 @@ var browser_default = (() => {
 })();
 export {
   browser_default as default,
+  globalEnvironment,
   isBrowser
 };

package/common/deps/eSpaceCtrl.js

@@ -1,4 +1,5 @@
 import "../../chunk-G2ADBYYC.js";
+import { isBrowser } from "../browser";
 let ws = null;
 const url = "ws://localhost";
 const ports = [27197, 27198, 27199];
@@ -268,7 +269,7 @@ out.addContactList = function(account, cb) {
     cb
   );
 };
-if (!window.WebSocket) {
+if (!isBrowser || !window.WebSocket) {
   const notFn = function() {
     return void 0;
   };
@@ -283,7 +284,7 @@ if (!window.WebSocket) {
 }
 let initialized = false;
 function init() {
-  if (!initialized) {
+  if (!initialized && isBrowser) {
     localStorage.setItem("eSpaceCtrl_initialized", 0);
     out.init({ timeout: 3e3, pollingInterval: 1e3 });
     out.ready(() => {

package/common/deps/fastdom/singleton.js

@@ -1,5 +1,13 @@
 import "../../../chunk-G2ADBYYC.js";
-const RAF = window.requestAnimationFrame;
+import { isBrowser } from "../../browser";
+const RAF = function() {
+  if (isBrowser) {
+    return window.requestAnimationFrame.bind(window);
+  }
+  return function(callback) {
+    setTimeout(() => callback(Date.now()), 1e3 / 60);
+  };
+}();
 const scheduleFlush = (fastdom) => {
   if (!fastdom.scheduled) {
     fastdom.scheduled = true;

package/common/deps/fullscreen/screenfull.js

@@ -1,5 +1,6 @@
 import "../../../chunk-G2ADBYYC.js";
 import { on, off } from "../dom";
+import { isBrowser } from "../../browser";
 const fullscreenApi = [
   "fullscreenElement",
   "fullscreenEnabled",
@@ -36,6 +37,8 @@ const fullscreenApiMap = [fullscreenApi, fullscreenApiWebkit, fullscreenApiMoz,
 const document = typeof window !== "undefined" && typeof window.document !== "undefined" ? window.document : {};
 let fullscreenEvents = null;
 const getFullScreenEvents = () => {
+  if (!isBrowser)
+    return;
   for (let i = 0, len = fullscreenApiMap.length; i < len; i++) {
     let eventName = fullscreenApiMap[i];
     if (eventName && eventName[1] in document) {
@@ -60,12 +63,14 @@ const screenfull = {
         resolve();
       };
       this.on("change", onFullscreenEntered);
-      element = element || document.documentElement;
-      if (element[fullscreenEvents && fullscreenEvents.requestFullscreen]) {
-        const promiseReturn = element[fullscreenEvents && fullscreenEvents.requestFullscreen](options);
+      element = element || (isBrowser ? document.documentElement : null);
+      if (element && fullscreenEvents && element[fullscreenEvents.requestFullscreen]) {
+        const promiseReturn = element[fullscreenEvents.requestFullscreen](options);
         if (promiseReturn instanceof Promise) {
           promiseReturn.then(onFullscreenEntered).catch(reject);
         }
+      } else {
+        reject(new Error("Fullscreen API not supported or element is null."));
       }
     });
   },
@@ -80,11 +85,13 @@ const screenfull = {
         resolve();
       };
       this.on("change", onFullscreenExit);
-      if (document[fullscreenEvents && fullscreenEvents.exitFullscreen]) {
-        const promiseReturn = document[fullscreenEvents && fullscreenEvents.exitFullscreen]();
+      if (isBrowser && fullscreenEvents && document[fullscreenEvents.exitFullscreen]) {
+        const promiseReturn = document[fullscreenEvents.exitFullscreen]();
         if (promiseReturn instanceof Promise) {
           promiseReturn.then(onFullscreenExit).catch(reject);
         }
+      } else {
+        reject(new Error("Fullscreen API not supported."));
       }
     });
   },
@@ -99,37 +106,59 @@ const screenfull = {
   },
   on(event, callback) {
     const eventName = eventNameMap[event];
-    if (eventName) {
+    if (eventName && isBrowser) {
       on(document, eventName, callback);
     }
   },
   off(event, callback) {
     const eventName = eventNameMap[event];
-    if (eventName) {
+    if (eventName && isBrowser) {
       off(document, eventName, callback);
     }
   },
-  raw: fullscreenEvents
+  raw: fullscreenEvents || {}
 };
-Object.defineProperties(screenfull, {
-  isFullscreen: {
-    get() {
-      return !!document[fullscreenEvents && fullscreenEvents.fullscreenElement];
-    }
-  },
-  element: {
-    enumerable: true,
-    get() {
-      return document[fullscreenEvents && fullscreenEvents.fullscreenElement];
+if (isBrowser) {
+  Object.defineProperties(screenfull, {
+    isFullscreen: {
+      get() {
+        return !!document[fullscreenEvents && fullscreenEvents.fullscreenElement];
+      }
+    },
+    element: {
+      enumerable: true,
+      get() {
+        return document[fullscreenEvents && fullscreenEvents.fullscreenElement];
+      }
+    },
+    isEnabled: {
+      enumerable: true,
+      get() {
+        return !!document[fullscreenEvents && fullscreenEvents.fullscreenEnabled];
+      }
     }
-  },
-  isEnabled: {
-    enumerable: true,
-    get() {
-      return !!document[fullscreenEvents && fullscreenEvents.fullscreenEnabled];
+  });
+} else {
+  Object.defineProperties(screenfull, {
+    isFullscreen: {
+      get() {
+        return false;
+      }
+    },
+    element: {
+      enumerable: true,
+      get() {
+        return null;
+      }
+    },
+    isEnabled: {
+      enumerable: true,
+      get() {
+        return false;
+      }
     }
-  }
-});
+  });
+}
 var screenfull_default = screenfull;
 export {
   screenfull_default as default

package/common/deps/popper.js

@@ -1,10 +1,11 @@
 import {
   __spreadValues
 } from "../../chunk-G2ADBYYC.js";
-import { on, off, isDisplayNone, isServer } from "./dom";
+import { on, off, isDisplayNone } from "./dom";
 import PopupManager from "./popup-manager";
 import globalConfig from "../global";
 import { typeOf } from "../type";
+import { isBrowser } from "../browser";
 const positions = ["left", "right", "top", "bottom"];
 const modifiers = ["shift", "offset", "preventOverflow", "keepTogether", "arrow", "flip", "applyStyle"];
 const DEFAULTS = {
@@ -186,16 +187,13 @@ const getOffsetRect = (el) => {
 const stopFn = (ev) => {
   ev.stopPropagation();
 };
-let resizeOb;
-if (!isServer) {
-  resizeOb = new ResizeObserver((entries) => {
-    entries.forEach((entry) => {
-      if (entry.target.popperVm && entry.contentRect.height > 50) {
-        entry.target.popperVm.update();
-      }
-    });
+const resizeOb = isBrowser && typeof ResizeObserver === "function" ? new ResizeObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.target.popperVm && entry.contentRect.height > 50) {
+      entry.target.popperVm.update();
+    }
   });
-}
+}) : null;
 class Popper {
   constructor(reference, popper, options) {
     this.modifiers = {};
@@ -208,15 +206,17 @@ class Popper {
     this._options.modifierFns = modifiers.map((modifier) => {
       return this[modifier];
     });
-    this._popper.setAttribute("x-placement", this._options.placement);
-    this.state.position = this._getPopperPositionByRefernce(this._reference);
-    setStyle(this._popper, { position: this.state.position, top: 0 });
-    if (this._popper) {
-      this._popper.popperVm = this;
-      resizeOb && resizeOb.observe(this._popper);
+    if (isBrowser) {
+      this._popper.setAttribute("x-placement", this._options.placement);
+      this.state.position = this._getPopperPositionByRefernce(this._reference);
+      setStyle(this._popper, { position: this.state.position, top: 0 });
+      if (this._popper) {
+        this._popper.popperVm = this;
+        resizeOb && resizeOb.observe(this._popper);
+      }
+      this.update();
+      this._setupEventListeners();
     }
-    this.update();
-    this._setupEventListeners();
   }
   destroy() {
     this._popper.removeAttribute("x-placement");

package/common/deps/touch-emulator.js

@@ -1,15 +1,18 @@
 import "../../chunk-G2ADBYYC.js";
+import { isBrowser } from "../browser";
 let emulated = false;
 let initiated = false;
 let eventTarget = null;
 let mouseTarget = null;
-const matches = Element.prototype.matches;
+const matches = isBrowser ? Element.prototype.matches : null;
 const closest = (el, s) => {
-  do {
-    if (matches.call(el, s))
-      return el;
-    el = el.parentElement || el.parentNode;
-  } while (el !== null && el.nodeType === 1);
+  if (isBrowser) {
+    do {
+      if (matches.call(el, s))
+        return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+  }
   return null;
 };
 class Touch {
@@ -86,10 +89,12 @@ const touchEmulator = () => {
   window.addEventListener("mouseup", onMouse("touchend"), true);
 };
 const emulate = () => {
-  const supportTouch = "ontouchstart" in window;
-  if (!emulated && !supportTouch) {
-    emulated = true;
-    touchEmulator();
+  if (isBrowser) {
+    const supportTouch = "ontouchstart" in window;
+    if (!emulated && !supportTouch) {
+      emulated = true;
+      touchEmulator();
+    }
   }
 };
 var touch_emulator_default = emulate;

package/common/deps/upload-ajax.js

@@ -1,6 +1,6 @@
 import "../../chunk-G2ADBYYC.js";
 import { hasOwn } from "../type";
-import { xss } from "../xss";
+import { xss } from "@opentiny/utils";
 const getBody = (xhr) => {
   const text = xhr.responseText || xhr.response;
   if (!text) {

package/common/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { log as uLog, xss } from "./xss";
+import { log as uLog, xss } from "@opentiny/utils";
 const KEY_CODE = {
   Backspace: 8,
   Tab: 9,
@@ -237,7 +237,7 @@ const CASCADER = {
   PropsHover: "hoverThreshold",
   MenuConnector: "cascader-menu-"
 };
-const version = "3.20.3";
+const version = "3.21.0";
 const log = (data, type = "log") => {
   uLog.logger[type](data);
 };

package/common/runtime.js

@@ -22,7 +22,7 @@ import vuePopup from "./deps/vue-popup";
 import validate from "./validate";
 import memorize from "./deps/memorize";
 import * as common from ".";
-const version = "3.20.3";
+const version = "3.21.0";
 const Renderless = {
   browser,
   array,

package/common/string.js

@@ -2,6 +2,7 @@ import "../chunk-G2ADBYYC.js";
 import { isPlainObject, isNumber, isNumeric, isNull } from "./type";
 import { getObj, toJsonStr } from "./object";
 import { toFixed, Decimal } from "./decimal";
+import { globalEnvironment, isBrowser } from "./browser";
 const formatTypes = {
   text: "text",
   url: "url",
@@ -117,7 +118,7 @@ const fillChar = (string, length, append, chr = "0") => {
 };
 const random = () => {
   let MAX_UINT32_PLUS_ONE = 4294967296;
-  return window.crypto.getRandomValues(new window.Uint32Array(1))[0] / MAX_UINT32_PLUS_ONE;
+  return globalEnvironment.crypto.getRandomValues(new globalEnvironment.Uint32Array(1))[0] / MAX_UINT32_PLUS_ONE;
 };
 const guid = (prefix = "", length = 8) => prefix + random().toString().substr(2, length);
 const escapeHtml = (string, isReplaceSpace) => {
@@ -362,11 +363,13 @@ const formatFileSize = (size, baseUnit = "") => {
 };
 const isKorean = (text) => /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(text);
 const omitText = (text, font, w) => {
+  let t;
+  if (!isBrowser)
+    return { t: text, o: false };
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   ctx.font = font;
   let metric = ctx.measureText(text);
-  let t;
   if (metric.width < w) {
     return { t: text, o: false };
   } else {

package/common/validate/util.js

@@ -2,7 +2,7 @@ import {
   __spreadValues
 } from "../../chunk-G2ADBYYC.js";
 import { hasOwn, isNull } from "../type";
-import { log } from "../xss";
+import { log } from "@opentiny/utils";
 const formatRegExp = /%[sdj%]/g;
 const warning = () => void 0;
 function convertFieldsError(errors) {

package/dialog-box/index.js

@@ -33,6 +33,9 @@ const computedStyle = ({ props, state, designConfig }) => () => {
       style = { left: "0px", top: "0px" };
     }
   }
+  if (props.customStyle) {
+    style = Object.assign(style, props.customStyle);
+  }
   return style;
 };
 const watchVisible = ({
@@ -71,9 +74,9 @@ const watchVisible = ({
     if (props.destroyOnClose) {
       nextTick(() => state.key++);
     }
-    if (props.rightSlide) {
-      const dialogBoxDom = el.querySelector(constants.DIALOG_BOX_CLASS) || el;
-      dialogBoxDom.style.left = "";
+    if (props.rightSlide && state.current !== "default") {
+      const selector = `[data-tag=${constants.DIALOG_BOX_DATA_TAG}]`;
+      props.rightSlide && (el.querySelector(selector).style.left = "");
     }
   }
 };

package/divider/index.js

@@ -0,0 +1,47 @@
+import "../chunk-G2ADBYYC.js";
+const computedRootStyle = ({ state, props }) => () => {
+  return {
+    height: props.height || state.height,
+    margin: props.margin || state.margin,
+    fontSize: props.fontSize
+  };
+};
+const computedLineStyle = ({ props }) => () => {
+  const lineStyle = {
+    borderTopStyle: props.borderStyle
+  };
+  if (props.color) {
+    Object.assign(lineStyle, { borderTopColor: props.color });
+  }
+  return lineStyle;
+};
+const computedTextStyle = ({ props }) => () => {
+  const textStyle = {
+    left: "unset",
+    right: "unset"
+  };
+  const defaultOffset = "5%";
+  if (props.contentPosition === "left") {
+    textStyle.left = props.offset || defaultOffset;
+  } else if (props.contentPosition === "right") {
+    textStyle.right = props.offset || defaultOffset;
+  }
+  return textStyle;
+};
+const setDividerHeight = ({ state, props, vm, nextTick }) => () => {
+  const verticalHeight = "12px";
+  if (props.direction === "vertical") {
+    state.height = props.height || verticalHeight;
+  } else {
+    nextTick(() => {
+      const offsetHeight = vm.$refs.text && vm.$refs.text.offsetHeight;
+      state.height = props.height || offsetHeight ? offsetHeight + "px" : "auto";
+    });
+  }
+};
+export {
+  computedLineStyle,
+  computedRootStyle,
+  computedTextStyle,
+  setDividerHeight
+};

package/divider/vue.js

@@ -1,7 +1,28 @@
 import "../chunk-G2ADBYYC.js";
-const api = [];
-const renderless = () => {
-  return api;
+import { computedLineStyle, computedTextStyle, computedRootStyle, setDividerHeight } from "./index";
+const api = ["state"];
+const renderless = (props, { reactive, onMounted, computed }, { vm, nextTick }) => {
+  const defaultMargin = "16px 0";
+  const verticalMargin = "0 8px";
+  const api2 = {};
+  const state = reactive({
+    height: "auto",
+    margin: props.direction === "vertical" ? verticalMargin : defaultMargin,
+    lineStyle: computed(() => api2.computedLineStyle()),
+    textStyle: computed(() => api2.computedTextStyle()),
+    rootStyle: computed(() => api2.computedRootStyle())
+  });
+  Object.assign(api2, {
+    state,
+    computedLineStyle: computedLineStyle({ props }),
+    computedTextStyle: computedTextStyle({ props }),
+    computedRootStyle: computedRootStyle({ props, state }),
+    setDividerHeight: setDividerHeight({ props, state, vm, nextTick })
+  });
+  onMounted(() => {
+    api2.setDividerHeight();
+  });
+  return api2;
 };
 export {
   api,

package/dropdown/index.js

@@ -124,9 +124,9 @@ const initEvent = ({ api, props, state, vm, mode }) => () => {
   on(state.triggerElm, "keydown", api.handleTriggerKeyDown);
   (_a = state.dropdownElm) == null ? void 0 : _a.addEventListener("keydown", api.handleItemKeyDown, true);
   if (!props.splitButton || !props.singleButton) {
-    on(state.triggerElm, "focus", toggleFocus({ state, value: true }));
-    on(state.triggerElm, "blur", toggleFocus({ state, value: false }));
-    on(state.triggerElm, "click", toggleFocus({ state, value: false }));
+    on(state.triggerElm, "focus", api.toggleFocusOnTrue);
+    on(state.triggerElm, "blur", api.toggleFocusOnFalse);
+    on(state.triggerElm, "click", api.toggleFocusOnFalse);
   }
   if (state.trigger === "hover") {
     on(state.triggerElm, "mouseenter", api.show);
@@ -181,9 +181,9 @@ const mounted = ({ api, vm, state, broadcast }) => () => {
 const beforeDistory = ({ vm, api, state }) => () => {
   if (state.triggerElm) {
     off(state.triggerElm, "keydown", api.handleTriggerKeyDown);
-    off(state.triggerElm, "focus", toggleFocus({ state, value: true }));
-    off(state.triggerElm, "blur", toggleFocus({ state, value: false }));
-    off(state.triggerElm, "click", toggleFocus({ state, value: false }));
+    off(state.triggerElm, "focus", api.toggleFocusOnTrue);
+    off(state.triggerElm, "blur", api.toggleFocusOnFalse);
+    off(state.triggerElm, "click", api.toggleFocusOnFalse);
     off(state.triggerElm, "mouseenter", api.show);
     off(state.triggerElm, "mouseleave", api.hide);
     off(state.triggerElm, "click", api.handleClick);
@@ -221,6 +221,7 @@ export {
   removeTabindex,
   resetTabindex,
   show,
+  toggleFocus,
   triggerElmFocus,
   watchFocusing,
   watchVisible

package/dropdown/vue.js

@@ -18,10 +18,11 @@ import {
   initDomOperation,
   mounted,
   beforeDistory,
-  clickOutside
+  clickOutside,
+  toggleFocus
 } from "./index";
 const api = ["state", "handleMainButtonClick", "hide", "show", "initDomOperation", "handleClick", "clickOutside"];
-const renderless = (props, { reactive, watch, provide, onMounted, computed }, { emit, parent, broadcast, vm, nextTick, mode, designConfig }) => {
+const renderless = (props, { reactive, watch, provide, onMounted, computed, onBeforeUnmount }, { emit, parent, broadcast, vm, nextTick, mode, designConfig }) => {
   const api2 = {};
   const state = reactive({
     visible: false,
@@ -60,11 +61,14 @@ const renderless = (props, { reactive, watch, provide, onMounted, computed }, {
     triggerElmFocus: triggerElmFocus(state),
     initDomOperation: initDomOperation({ api: api2, state, vm }),
     beforeDistory: beforeDistory({ vm, api: api2, state }),
-    clickOutside: clickOutside({ props, api: api2 })
+    clickOutside: clickOutside({ props, api: api2 }),
+    toggleFocusOnTrue: toggleFocus({ state, value: true }),
+    toggleFocusOnFalse: toggleFocus({ state, value: false })
   });
   watch(() => state.visible, api2.watchVisible);
   watch(() => state.focusing, api2.watchFocusing);
   onMounted(api2.mounted);
+  onBeforeUnmount(api2.beforeDistory);
   return api2;
 };
 export {