@opentiny/vue-renderless 3.13.2 → 3.14.1

package/ip-address/index.js

@@ -16,12 +16,13 @@ const ipValidator = ({ props, api }) => (value) => {
   return result;
 };
 const getCursorPosition = (el) => {
+  var _a, _b;
   let cursorPos = 0;
   let selectRange = null;
-  if (document.selection) {
-    selectRange = document.selection.createRange();
-    selectRange.moveStart("character", -el.value.length);
-    cursorPos = selectRange.text.length;
+  if (document == null ? void 0 : document.selection) {
+    selectRange = (_a = document == null ? void 0 : document.selection) == null ? void 0 : _a.createRange();
+    selectRange == null ? void 0 : selectRange.moveStart("character", -el.value.length);
+    cursorPos = (_b = selectRange == null ? void 0 : selectRange.text) == null ? void 0 : _b.length;
   }
   if (el.selectionStart || el.selectionStart === "0") {
     cursorPos = el.selectionStart;
@@ -51,8 +52,9 @@ const getValue = ({ api, props, state }) => () => {
   return result;
 };
 const setValue = ({ api, props, state }) => (value) => {
+  var _a;
   if (value) {
-    if (api.ipValidator(value)) {
+    if ((_a = api == null ? void 0 : api.ipValidator) == null ? void 0 : _a.call(api, value)) {
       if (api.isIP6(props.type)) {
         state.address = value.split(":").map((item) => ({ value: item }));
         if (state.address.length < 8) {
@@ -76,7 +78,14 @@ const setValue = ({ api, props, state }) => (value) => {
     state.address = api.isIP6(props.type) ? new Array(8).fill("").map(createValue) : new Array(4).fill("").map(createValue);
   }
 };
-const activeEvent = ({ emit, parent, state, index, event, type }) => {
+const activeEvent = ({
+  emit,
+  parent,
+  state,
+  index,
+  event,
+  type
+}) => {
   const target = event && event.target ? event.target : parent.$el.querySelectorAll("input")[index || 0];
   type === "focus" && (state.active = true);
   if (!event) {
@@ -92,37 +101,55 @@ const activeEvent = ({ emit, parent, state, index, event, type }) => {
     !state.isSelected && emit(type, target.value, index);
   }
 };
-const focus = ({ emit, parent, state }) => ({ index, event }) => {
+const focus = ({
+  emit,
+  parent,
+  state
+}) => ({ index, event }) => {
   activeEvent({ emit, parent, state, index, event, type: "focus" });
 };
-const select = ({ emit, parent, state }) => ({ index, event }) => {
+const select = ({
+  emit,
+  parent,
+  state
+}) => ({ index, event }) => {
   activeEvent({ emit, parent, state, index, event, type: "select" });
 };
 const inputEvent = ({ api, componentName, emit, eventName, props }) => ({ item, index }) => {
+  var _a, _b, _c, _d, _e;
   const val = item.value.trim();
   let value = "";
   if (api.isIP4(props.type)) {
-    if (!index && api.ipValidator(val)) {
-      api.setValue(val);
+    if (!index && ((_a = api == null ? void 0 : api.ipValidator) == null ? void 0 : _a.call(api, val))) {
+      (_b = api == null ? void 0 : api.setValue) == null ? void 0 : _b.call(api, val);
     } else if (isNaN(val) || val < IPTHRESHOLD.Min || val > IPTHRESHOLD.Max) {
       item.value = "";
     }
   } else {
-    if (!index && api.ipValidator(val)) {
-      api.setValue(val);
+    if (!index && ((_c = api == null ? void 0 : api.ipValidator) == null ? void 0 : _c.call(api, val))) {
+      (_d = api == null ? void 0 : api.setValue) == null ? void 0 : _d.call(api, val);
     } else if (val.length > 4) {
       item.value = item.value.slice(0, 4);
     }
   }
-  value = api.getValue();
+  value = (_e = api == null ? void 0 : api.getValue) == null ? void 0 : _e.call(api);
   emit("update:modelValue", value, index);
+  emit("input", value, index);
   api.dispatch(componentName, eventName, [value]);
 };
 const change = ({ api, emit }) => () => {
-  const value = api.getValue();
+  var _a;
+  const value = (_a = api == null ? void 0 : api.getValue) == null ? void 0 : _a.call(api);
   emit("change", value);
 };
-const blur = ({ api, componentName, emit, eventName, props, state }) => ({ item, index }) => {
+const blur = ({
+  api,
+  componentName,
+  emit,
+  eventName,
+  props,
+  state
+}) => ({ item, index }) => {
   state.active = false;
   state.isDel = false;
   if (api.isIP4(props.type)) {
@@ -162,20 +189,35 @@ const keyup = ({ api, props }) => ({ item, index, event }) => {
     }
   }
 };
-const checkError1 = ({ Tab, Space, NumpadDecimal, NumpadComma, keyCode, value }) => [Tab, 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 isError = ({
+  key,
+  value,
+  isSelected,
+  isfilterKeyCodes,
+  ctrlKey,
+  keyCode,
+  newValue
+}) => {
   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;
   const value = item.value;
-  const selectionStart = target.selectionStart;
-  const selectionEnd = target.selectionEnd;
+  const selectionStart = target == null ? void 0 : target.selectionStart;
+  const selectionEnd = target == null ? void 0 : target.selectionEnd;
   const isSelected = selectionStart !== selectionEnd;
   const cursorPosition = api.getCursorPosition(target);
   const isfilterKeyCodes = state.filterKeyCodes.includes(keyCode);

package/ip-address/vue.js

@@ -20,7 +20,13 @@ import {
 } from "./index";
 import { KEY_CODE } from "../common";
 const api = ["state", "focus", "inputEvent", "blur", "keyup", "keydown", "change", "select"];
-const initState = ({ reactive, computed, handleValue, parent, props }) => {
+const initState = ({
+  reactive,
+  computed,
+  handleValue,
+  parent,
+  props
+}) => {
   const state = reactive(__spreadProps(__spreadValues({}, handleValue.state), {
     active: false,
     isSelected: false,
@@ -40,7 +46,18 @@ const initState = ({ reactive, computed, handleValue, parent, props }) => {
   }));
   return state;
 };
-const initApi = ({ state, api: api2, dispatch, handleValue, emit, broadcast, parent, componentName, props, eventName }) => {
+const initApi = ({
+  state,
+  api: api2,
+  dispatch,
+  handleValue,
+  emit,
+  broadcast,
+  parent,
+  componentName,
+  props,
+  eventName
+}) => {
   Object.assign(api2, __spreadProps(__spreadValues({}, handleValue.api), {
     state,
     dispatch,
@@ -77,8 +94,9 @@ const useHandleValue = ({ componentName, dispatch, eventName, props, reactive, t
   watch(
     () => props.modelValue,
     (value) => {
+      var _a;
       if (!state.isDel) {
-        api2.setValue(value);
+        (_a = api2 == null ? void 0 : api2.setValue) == null ? void 0 : _a.call(api2, value);
         dispatch(componentName, eventName, [value]);
       }
     },
@@ -89,7 +107,7 @@ const useHandleValue = ({ componentName, dispatch, eventName, props, reactive, t
     api: api2
   };
 };
-const renderless = (props, { reactive, toRefs, watch, inject, computed }, { $prefix, emit, parent, broadcast, dispatch }) => {
+const renderless = (props, { reactive, toRefs, watch, inject, computed }, { emit, parent, broadcast, dispatch }) => {
   const api2 = {};
   const componentName = "FormItem";
   const eventName = {

package/link/vue.js

@@ -1,11 +1,13 @@
 import "../chunk-G2ADBYYC.js";
+import { xss } from "../common/xss";
 import { handleClick } from "./index";
 const api = ["state", "handleClick"];
 const renderless = (props, { inject, reactive, computed }, { emit, parent }) => {
   parent.tinyForm = parent.tinyForm || inject("form", null);
   const state = reactive({
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
-    disabled: computed(() => props.disabled || state.formDisabled)
+    disabled: computed(() => props.disabled || state.formDisabled),
+    href: computed(() => xss.filterUrl(props.href))
   });
   return {
     state,

package/loading/index.js

@@ -12,9 +12,9 @@ const close = ({ state, constants, vm }) => () => {
     vm,
     () => {
       const target = state.fullscreen || state.body ? document.body : state.target;
-      removeClass(target, constants.PARENT_RELATIVE_CLS);
-      removeClass(target, constants.PARENT_HIDDEN_CLS);
       if (vm.$el && vm.$el.parentNode) {
+        removeClass(target, constants.PARENT_RELATIVE_CLS);
+        removeClass(target, constants.PARENT_HIDDEN_CLS);
         vm.$el.parentNode.removeChild(vm.$el);
       }
       state.closed = true;

package/loading/vue.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
 import { handleAfterLeave, setText, close } from "./index";
 const api = ["state", "handleAfterLeave", "setText", "close"];
-const renderless = (props, { reactive }, { constants, vm, emit }) => {
+const renderless = (props, { reactive, computed }, { constants, vm, emit, designConfig }) => {
   const state = reactive({
     text: null,
     spinner: null,
@@ -10,7 +10,13 @@ const renderless = (props, { reactive }, { constants, vm, emit }) => {
     background: null,
     fullscreen: true,
     closed: false,
-    size: "small"
+    size: "",
+    iconSize: "",
+    loadingImg: computed(() => {
+      var _a;
+      return props.loadingImg || ((_a = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _a.loadingImg);
+    }),
+    iconStyle: computed(() => state.iconSize ? { width: state.iconSize + "px", height: state.iconSize + "px" } : {})
   });
   const api2 = {
     state,

package/logout/index.js

@@ -2,7 +2,7 @@ import "../chunk-G2ADBYYC.js";
 import { xss } from "../common";
 const logout = ({ service, state, props }) => () => {
   let { isMock, isLocal, redirectUrl = "", getLogoutUrl, showLogin } = service;
-  if (typeof props.beforeLogout === "function") {
+  if (typeof props.beforeLogout === "function" && !state.logout) {
     if (props.beforeLogout(redirectUrl) === false) {
       return;
     }

package/menu/index.js

@@ -1,8 +1,20 @@
 import "../chunk-G2ADBYYC.js";
-import { cloneDeep } from "../chart-core/deps/utils";
+import { xss } from "../common/xss";
+import { deepClone } from "../picker-column";
 const filterInput = ({ state }) => (val) => {
   state.filterValue = val;
 };
+const computeData = ({ props, vm }) => () => filterNodeUrl(props.data || [], vm);
+const filterNodeUrl = (data, vm) => {
+  data.forEach((node) => {
+    node.url = xss.filterUrl(node.url);
+    vm.$set(node, "isCurrent", false);
+    if (node.children) {
+      filterNodeUrl(node.children, vm);
+    }
+  });
+  return data;
+};
 const setIsCurrent = ({ props, vm, state }) => (data, node) => {
   if (props.onlyCheckChildren && node.children)
     return;
@@ -30,7 +42,7 @@ const getIsCurrent = (vm, node, nodeId) => {
 };
 const filterNodes = ({ state, api, nextTick }) => (label) => {
   if (label !== "") {
-    state.filterData = filterTree(cloneDeep(state.data), label);
+    state.filterData = filterTree(deepClone(state.data), label);
   } else {
     state.filterData = [];
     if (state.activedKeys) {
@@ -117,6 +129,7 @@ const findPaths = (nodes, nodeId) => {
   }
 };
 export {
+  computeData,
   filterInput,
   filterNodes,
   getActivedKeysPath,

package/menu/vue.js

@@ -6,25 +6,25 @@ import {
   getActivedKeysPath,
   setNodeHidden,
   setAllNodeVisible,
-  filterInput
+  filterInput,
+  computeData
 } from "./index";
 import debounce from "../common/deps/debounce";
 const api = ["state", "setIsCurrent", "filterNodes", "filterInput"];
-const renderless = (props, { reactive, watch, onMounted, computed }, { vm, emit, nextTick }) => {
-  const api2 = {};
+const initState = ({ reactive, computed, props, api: api2 }) => {
   const state = reactive({
     isEmpty: computed(() => props.data.length !== 0 && state.filterValue && state.filterData.length === 0),
     activedNodeId: null,
-    filterCheckedId: null,
-    activedKeys: props.activedKeys,
-    expandedKeysPath: [],
-    activedKeysPath: [],
-    filterText: "",
     filterValue: "",
     currentPaths: [],
     filterData: [],
-    data: props.data
+    data: computed(() => api2.computeData())
   });
+  return state;
+};
+const renderless = (props, { reactive, watch, onMounted, computed }, { vm, emit, nextTick }) => {
+  const api2 = {};
+  const state = initState({ reactive, computed, props, api: api2 });
   Object.assign(api2, {
     state,
     setIsCurrent: setIsCurrent({ props, vm, state, emit, nextTick }),
@@ -33,7 +33,8 @@ const renderless = (props, { reactive, watch, onMounted, computed }, { vm, emit,
     getActivedKeysPath: getActivedKeysPath({ state }),
     getExpandedKeysPath: getExpandedKeysPath({ state }),
     setAllNodeVisible: setAllNodeVisible({ vm, state }),
-    filterInput: filterInput({ state })
+    filterInput: filterInput({ state }),
+    computeData: computeData({ props, vm })
   });
   watch(
     () => props.expandAll,
@@ -59,18 +60,22 @@ const renderless = (props, { reactive, watch, onMounted, computed }, { vm, emit,
   );
   watch(
     () => props.activedKeys,
-    () => {
-      state.activedKeys = props.activedKeys;
-      api2.getActivedKeysPath(props.activedKeys);
+    (val) => {
+      if (val || val === 0) {
+        state.activedKeys = props.activedKeys;
+        api2.getActivedKeysPath(props.activedKeys);
+        api2.setIsCurrent(props.data, { id: props.activedKeys });
+      }
     },
     { immediate: true }
   );
   watch(
     () => props.data,
-    () => {
-      state.data = props.data;
-    },
-    { deep: true, immediate: true }
+    (val) => {
+      nextTick(() => {
+        api2.setIsCurrent(val, { id: props.activedKeys });
+      });
+    }
   );
   onMounted(() => {
     vm.$on("node-clicked", (param) => {

package/mind-map/index.js

@@ -0,0 +1,47 @@
+import "../chunk-G2ADBYYC.js";
+const importData = (instance, data) => {
+  instance.init(data);
+};
+const initEvent = (render, emit) => {
+  const onOperation = (info) => {
+    emit("operation", { render, info });
+  };
+  const onSelectNode = (nodeObj, e) => {
+    emit("selectNode", { render, nodeObj, e });
+  };
+  const selectNewNode = (nodeObj) => {
+    emit("selectNewNode", { render, nodeObj });
+  };
+  const onSelectNodes = (nodeObj) => {
+    emit("selectNodes", { render, nodeObj });
+  };
+  const unselectNode = () => {
+    emit("unselectNode", { render });
+  };
+  const unselectNodes = () => {
+    emit("unselectNodes", { render });
+  };
+  const expandNode = (nodeObj) => {
+    emit("expandNode", { render, nodeObj });
+  };
+  render.bus.addListener("operation", onOperation);
+  render.bus.addListener("selectNode", onSelectNode);
+  render.bus.addListener("selectNewNode", selectNewNode);
+  render.bus.addListener("selectNodes", onSelectNodes);
+  render.bus.addListener("unselectNode", unselectNode);
+  render.bus.addListener("unselectNodes", unselectNodes);
+  render.bus.addListener("expandNode", expandNode);
+  return () => {
+    render.bus.removeListener("operation", onOperation);
+    render.bus.removeListener("selectNode", onSelectNode);
+    render.bus.removeListener("selectNewNode", selectNewNode);
+    render.bus.removeListener("selectNodes", onSelectNodes);
+    render.bus.removeListener("unselectNode", unselectNode);
+    render.bus.removeListener("unselectNodes", unselectNodes);
+    render.bus.removeListener("expandNode", expandNode);
+  };
+};
+export {
+  importData,
+  initEvent
+};

package/mind-map/vue.js

@@ -0,0 +1,53 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import { importData, initEvent } from ".";
+const api = [];
+const renderless = (props, { getCurrentInstance, onMounted, onUnmounted, watch }, { emit }, {
+  MindElixir
+}) => {
+  const api2 = {};
+  let destoryListener = null;
+  onMounted(() => {
+    var _a;
+    const instance = getCurrentInstance();
+    if (!instance) {
+      throw new Error(
+        "Can not find instance. Please open Issue: https://github.com/opentiny/tiny-vue/issues/new/choose"
+      );
+    }
+    const mindmap = instance.refs.mindmap;
+    const render = new MindElixir(__spreadProps(__spreadValues({
+      contextMenu: false,
+      toolBar: false,
+      nodeMenu: false
+    }, (_a = props.options) != null ? _a : {}), {
+      el: mindmap
+    }));
+    destoryListener = initEvent(render, emit);
+    emit("create", render);
+    watch(
+      () => props.modelValue,
+      () => {
+        if (props.modelValue) {
+          emit("beforeImport", { render, data: props.modelValue });
+          importData(render, props.modelValue);
+          emit("afterImport", { render, data: props.modelValue });
+        } else {
+          const root = MindElixir.new("root");
+          render.init(root);
+        }
+      },
+      { deep: true, immediate: true }
+    );
+  });
+  onUnmounted(() => {
+    destoryListener == null ? void 0 : destoryListener();
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/modal/index.js

@@ -5,6 +5,7 @@ import PopupManager from "../common/deps/popup-manager";
 import { getDomNode } from "../common/deps/dom";
 import { getViewportWindow } from "../common/global";
 const DragClass = "is__drag";
+let timer;
 const emitZoom = ({ params, parent, emit, event }) => {
   let { $listeners, events = {} } = parent;
   if ($listeners.zoom) {
@@ -30,6 +31,11 @@ const computedBoxStyle = ({ props, isMobileFirstMode }) => () => {
   return { width, height };
 };
 const watchValue = (api) => (visible) => visible ? api.open() : api.close("hide");
+const watchVisible = ({ api, props }) => (visible) => {
+  if (props.lockScroll) {
+    visible ? api.showScrollbar() : api.hideScrollbar();
+  }
+};
 const created = ({ api, props, state }) => () => {
   if (props.modelValue) {
     api.open();
@@ -40,9 +46,19 @@ const mounted = ({
   api,
   parent,
   props,
-  isMobileFirstMode
+  isMobileFirstMode,
+  state
 }) => () => {
-  if (isMobileFirstMode) {
+  if (!isMobileFirstMode) {
+    let modalBoxElem = api.getBox();
+    Object.assign(modalBoxElem.style, {
+      width: props.width ? isNaN(props.width) ? props.width : `${props.width}px` : null,
+      height: props.height ? isNaN(props.height) ? props.height : `${props.height}px` : null
+    });
+    if (props.lockScroll && state.visible) {
+      api.showScrollbar();
+    }
+  } else {
     on(window, "resize", api.resetDragStyle);
   }
   if (props.escClosable) {
@@ -56,6 +72,7 @@ const beforeUnmouted = ({ api, parent, isMobileFirstMode }) => () => {
   off(document, "keydown", api.handleGlobalKeydownEvent);
   off(window, "hashchange", api.handleHashChange);
   api.removeMsgQueue();
+  api.hideScrollbar();
   if (parent.$el.parentNode) {
     parent.$el.parentNode.removeChild(parent.$el);
   }
@@ -65,6 +82,18 @@ const selfClickEvent = ({ api, parent, props }) => (event) => {
     api.close("mask");
   }
 };
+const mouseEnterEvent = () => () => {
+  clearTimeout(timer);
+};
+const mouseLeaveEvent = ({ api, props }) => () => {
+  api.addMsgQueue();
+  timer = window.setTimeout(
+    () => {
+      api.close("close");
+    },
+    parseFloat(props.duration)
+  );
+};
 const updateZindex = ({ state, props }) => () => {
   state.modalZindex = props.zIndex || PopupManager.nextZIndex();
 };
@@ -128,7 +157,7 @@ const open = ({
     }, 10);
     if (state.isMsg) {
       api.addMsgQueue();
-      setTimeout(
+      timer = window.setTimeout(
         () => {
           api.close(params.type);
         },
@@ -628,6 +657,12 @@ const resetDragStyle = (api) => () => {
   modalBoxElement.style.left = "";
   modalBoxElement.style.top = "";
 };
+const showScrollbar = (lockScrollClass) => () => {
+  addClass(document.body, lockScrollClass);
+};
+const hideScrollbar = (lockScrollClass) => () => {
+  removeClass(document.body, lockScrollClass);
+};
 export {
   MsgQueue,
   addMsgQueue,
@@ -644,8 +679,11 @@ export {
   handleEvent,
   handleGlobalKeydownEvent,
   handleHashChange,
+  hideScrollbar,
   maximize,
   mounted,
+  mouseEnterEvent,
+  mouseLeaveEvent,
   mousedownEvent,
   open,
   removeMsgQueue,
@@ -653,9 +691,11 @@ export {
   resetFormTip,
   revert,
   selfClickEvent,
+  showScrollbar,
   toggleZoomEvent,
   updateFormTip,
   updateStyle,
   updateZindex,
-  watchValue
+  watchValue,
+  watchVisible
 };

package/modal/vue.js

@@ -18,6 +18,8 @@ import {
   mounted,
   beforeUnmouted,
   selfClickEvent,
+  mouseEnterEvent,
+  mouseLeaveEvent,
   updateZindex,
   closeEvent,
   confirmEvent,
@@ -25,7 +27,10 @@ import {
   open,
   resetDragStyle,
   computedBoxStyle,
-  handleHashChange
+  handleHashChange,
+  showScrollbar,
+  hideScrollbar,
+  watchVisible
 } from "./index";
 const api = [
   "state",
@@ -38,6 +43,8 @@ const api = [
   "close",
   "updateStyle",
   "selfClickEvent",
+  "mouseEnterEvent",
+  "mouseLeaveEvent",
   "updateZindex",
   "closeEvent",
   "confirmEvent",
@@ -46,8 +53,9 @@ const api = [
   "beforeUnmouted",
   "resetDragStyle"
 ];
-const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { vm, emit, emitter, nextTick, broadcast, vm: parent }, { isMobileFirstMode }) => {
+const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { vm, emit, emitter, nextTick, broadcast, vm: parent, constants, mode }, { isMobileFirstMode }) => {
   const api2 = {};
+  const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode);
   const state = reactive({
     emitter: emitter(),
     visible: false,
@@ -70,9 +78,11 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
     getBox: getBox({ vm }),
     watchValue: watchValue(api2),
     created: created({ api: api2, props, state }),
-    mounted: mounted({ api: api2, parent, props, isMobileFirstMode }),
+    mounted: mounted({ api: api2, parent, props, isMobileFirstMode, state }),
     beforeUnmouted: beforeUnmouted({ api: api2, parent, isMobileFirstMode }),
     selfClickEvent: selfClickEvent({ api: api2, parent, props }),
+    mouseEnterEvent: mouseEnterEvent(),
+    mouseLeaveEvent: mouseLeaveEvent({ api: api2, props }),
     updateZindex: updateZindex({ state, props }),
     handleEvent: handleEvent({ api: api2, emit, parent, props, isMobileFirstMode }),
     closeEvent: closeEvent(api2),
@@ -90,9 +100,13 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
     mousedownEvent: mousedownEvent({ api: api2, nextTick, props, state, emit, isMobileFirstMode }),
     dragEvent: dragEvent({ api: api2, emit, parent, props, state }),
     resetDragStyle: resetDragStyle(api2),
-    computedBoxStyle: computedBoxStyle({ props, isMobileFirstMode })
+    computedBoxStyle: computedBoxStyle({ props, isMobileFirstMode }),
+    watchVisible: watchVisible({ api: api2, props }),
+    hideScrollbar: hideScrollbar(lockScrollClass),
+    showScrollbar: showScrollbar(lockScrollClass)
   });
   watch(() => props.modelValue, api2.watchValue);
+  watch(() => state.visible, api2.watchVisible);
   api2.created();
   onMounted(api2.mounted);
   onBeforeUnmount(api2.beforeUnmouted);