@opentiny/vue-renderless 3.12.0 → 3.13.0-alpha.0

package/calendar-view/index.js

@@ -1,15 +1,9 @@
 import {
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
-import { cloneDeep } from "@opentiny/vue-renderless/chart-core/deps/utils";
-import { getDirection } from "@opentiny/vue-renderless/common/deps/touch";
-import {
-  getDays,
-  lastMonth,
-  nextMonth,
-  getCalendar,
-  transformArray
-} from "@opentiny/vue-renderless/common/calendar/calendar";
+import { cloneDeep } from "../chart-core/deps/utils";
+import { getDirection } from "../common/deps/touch";
+import { getDays, lastMonth, nextMonth, getCalendar, transformArray } from "../common/calendar/calendar";
 const getTime = (date) => new Date(date).getTime();
 const newSchedule = ({ emit }) => (date) => emit("new-schedule", date);
 const isShowNewSchedule = ({ props }) => (date) => props.showNewSchedule instanceof Function ? props.showNewSchedule(date) : false;
@@ -66,7 +60,7 @@ const isSelectedDate = ({ state }) => (day) => {
 const getDayBgColor = ({ props }) => (day) => {
   const date = day.year + "-" + day.month + "-" + day.value;
   const isFunction = props.setDayBgColor instanceof Function;
-  const bgColor = isFunction ? props.setDayBgColor(date) : "";
+  const bgColor = isFunction ? props.setDayBgColor(date) : "white";
   return bgColor;
 };
 const parseDate = (time) => {
@@ -201,7 +195,9 @@ const selectDay = ({ state, emit }) => (day, i) => {
     } else {
       state.selectedDates.push(date);
     }
+    emit("update:modelValue", state.selectedDates);
     emit("selected-date-change", state.selectedDates);
+    emit("date-click", date);
   } else {
     if (day.isNext) {
       const { year, month } = nextMonth(state.activeYear, state.activeMonth);
@@ -215,6 +211,8 @@ const selectDay = ({ state, emit }) => (day, i) => {
     }
     state.selectedDate = day.value.toString().length > 2 ? day.value : `${state.activeYear}-${state.activeMonth}-${day.value}`;
     state.showSelectedDateEvents = true;
+    emit("update:modelValue", state.selectedDate);
+    emit("date-click", state.selectedDate);
   }
 };
 const getEventByMonth = ({ state }) => (year, month) => {
@@ -230,7 +228,7 @@ const getEventByMonth = ({ state }) => (year, month) => {
       day: state.weekDays[new Date(date).getDay()],
       events: []
     };
-    state.events.filter((item) => {
+    state.events.forEach((item) => {
       if (eventInThisTime(item, startTime, endTime)) {
         obj.events.push(item);
         state.monthEventsLength += 1;
@@ -276,7 +274,7 @@ const getEventByDate = ({ state }) => (date, events) => {
   const endTime = getTime(date + " " + state.dayEndTime);
   state.curWeekEvents[date] = [];
   events ? events = [] : state.curWeekEvents[date] = [];
-  state.events.filter((item) => {
+  state.events.forEach((item) => {
     if (eventInThisTime(item, startTime, endTime)) {
       events ? events.push(item) : state.curWeekEvents[date].push(item);
     }

package/calendar-view/vue.js

@@ -40,7 +40,7 @@ import {
   touchmove,
   touchend
 } from "./index";
-import throttle from "@opentiny/vue-renderless/common/deps/throttle";
+import throttle from "../common/deps/throttle";
 const api = [
   "state",
   "renderProxy",
@@ -135,6 +135,19 @@ const initState = ({ reactive, props, computed, api: api2, images, modesIcon })
   return state;
 };
 const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (value) {
+        if (props.multiSelect && Array.isArray(value)) {
+          state.selectedDates = value;
+        } else {
+          state.selectedDate = value;
+        }
+      }
+    },
+    { immediate: true, deep: true }
+  );
   watch(
     () => props.mode,
     () => {
@@ -151,9 +164,6 @@ const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
   watch(
     () => state.selectedDate,
     () => {
-      if (state.mode === "month") {
-        api2.getEventByDate(state.selectedDate, state.selectedDateEvents);
-      }
       emit("selected-date-change", state.selectedDate);
     },
     { deep: true }
@@ -184,6 +194,9 @@ const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
       });
     }
   );
+  addWatch({ watch, props, state, emit, api: api2 });
+};
+const addWatch = ({ watch, props, state, emit, api: api2 }) => {
   watch(
     () => props.month,
     (val, oldVal) => {

package/cascader/index.js

@@ -50,12 +50,25 @@ const watchValue = ({ api, state }) => (value) => {
     setTimeout(api.computePresentContent);
   }
 };
-const watchCheckedValue = ({ api, emit, state }) => (value) => {
+const watchCheckedValue = ({
+  nextTick,
+  constants,
+  dispatch,
+  api,
+  emit,
+  state
+}) => (value) => {
+  state.presentText = state.presentTags.length ? "" : null;
   const { checkStrictly, multiple } = state.config;
   api.computePresentContent();
   if (!multiple && !checkStrictly && state.dropDownVisible) {
     api.toggleDropDownVisible(false);
   }
+  nextTick(() => {
+    dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [
+      state.multiple ? state.presentText : state.inputValue
+    ]);
+  });
   emit("update:modelValue", value);
   emit("change", value);
   setTimeout(api.updateStyle);
@@ -85,10 +98,16 @@ const isEmpty = (val) => {
   }
   return false;
 };
-const selfMounted = ({ api, parent, props, refs, state }) => () => {
-  const { input } = refs;
+const selfMounted = ({
+  api,
+  parent,
+  props,
+  vm,
+  state
+}) => () => {
+  const { input } = vm.$refs;
   const inputSizeMap = { medium: 36, small: 32, mini: 28 };
-  input && (input.$parent.popperElm = refs.popper);
+  input && (input.$parent.popperElm = vm.$refs.popper);
   if (input && input.$el) {
     state.inputInitialHeight = input.$el.offsetHeight || inputSizeMap[state.realSize] || 30;
   }
@@ -111,11 +130,16 @@ const selfMounted = ({ api, parent, props, refs, state }) => () => {
   });
   addResizeListener(parent.$el, api.updateStyle);
 };
-const toggleDropDownVisible = ({ emit, nextTick, refs, state, updatePopper }) => (visible) => {
+const toggleDropDownVisible = ({
+  emit,
+  vm,
+  state,
+  updatePopper
+}) => (visible) => {
   if (state.isDisabled) {
     return;
   }
-  const { input } = refs;
+  const { input } = vm.$refs;
   visible = !isNull(visible) ? visible : !state.dropDownVisible;
   if (visible !== state.dropDownVisible) {
     state.dropDownVisible = visible;
@@ -152,21 +176,18 @@ const handleKeyDown = ({ api }) => (event) => {
 const handleFocus = (emit) => (e) => {
   emit("focus", e);
 };
-const handleBlur = ({ constants, dispatch, emit, state, api, props }) => (e) => {
+const handleBlur = ({ emit, api, props }) => (e) => {
   if (props.filterable) {
     api.computePresentContent();
   }
-  dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [
-    state.multiple ? state.presentText : state.inputValue
-  ]);
   emit("blur", e);
 };
-const handleInput = ({ api, state, refs }) => (val, event) => {
+const handleInput = ({ api, state, vm }) => (val, event) => {
   event = event || window.event;
   if (!event) {
     return;
   }
-  const reference = refs.reference;
+  const reference = vm.$refs.reference;
   const key = "init-flag";
   const value = "true";
   const isIE = browser.name === "ie";
@@ -185,7 +206,7 @@ const handleInput = ({ api, state, refs }) => (val, event) => {
     state.filtering = false;
   }
 };
-const handleClear = (state) => () => {
+const handleClear = (state) => (_event) => {
   state.presentText = "";
   state.panel.clearCheckedNodes();
 };
@@ -194,13 +215,13 @@ const handleExpandChange = ({ constants, dispatch, emit, nextTick, state, update
     dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [
       state.multiple ? state.presentText : state.inputValue
     ]);
-    updatePopper(state.panel.$parent);
+    updatePopper(state.panel.$parent.$el);
   });
   emit("expand-change", value);
   emit("active-item-change", value);
 };
-const focusFirstNode = ({ refs, state }) => () => {
-  const { popper, suggestionPanel } = refs;
+const focusFirstNode = ({ vm, state }) => () => {
+  const { popper, suggestionPanel } = vm.$refs;
   let firstNode = null;
   if (state.filtering && suggestionPanel) {
     firstNode = suggestionPanel.$el.querySelector(CASCADER.SugItem);
@@ -246,13 +267,19 @@ const computePresentTags = ({ api, props, state }) => () => {
   }
   state.checkedNodes = checkedNodes;
   state.presentTags = tags;
+  state.inputValue = null;
+  state.presentText = null;
   if (props.hoverExpand) {
     api.calcCollapseTags();
   }
 };
-const calcCollapseTags = ({ state, refs, nextTick }) => () => {
+const calcCollapseTags = ({
+  state,
+  vm,
+  nextTick
+}) => () => {
   nextTick(() => {
-    const content = refs["tags-content"];
+    const content = vm.$refs["tags-content"];
     if (state.inputHover || state.dropDownVisible) {
       return state.isHidden = true;
     }
@@ -268,7 +295,7 @@ const calcCollapseTags = ({ state, refs, nextTick }) => () => {
       const collapseTagWidth = tagsLength && parseFloat(collapseTagContentWidth) + parseFloat(marginRight) + parseFloat(marginLeft);
       const tags = Array.from(content.querySelectorAll(".tiny-tag"));
       let { total, dom, idx } = { total: collapseTagWidth, dom: null, idx: 0 };
-      tags.some((tag, index) => {
+      tags.forEach((tag, index) => {
         if (tag !== tagsLength) {
           const { width: tagContentWidth, marginRight: marginRight2, marginLeft: marginLeft2 } = tag && window.getComputedStyle(tag);
           total += parseFloat(tagContentWidth) + parseFloat(marginRight2) + parseFloat(marginLeft2);
@@ -292,17 +319,17 @@ const calcCollapseTags = ({ state, refs, nextTick }) => () => {
     }
   });
 };
-const watchInputHover = ({ refs }) => (newVal) => {
+const watchInputHover = ({ vm }) => (newVal) => {
   const [inputHover, dropDownVisible] = newVal;
   if (!inputHover && !dropDownVisible) {
-    const content = refs["tags-content"];
+    const content = vm.$refs["tags-content"];
     content && content.scrollTo({ top: 0, left: 0 });
   }
 };
-const handleMouseenter = ({ refs, state }) => ($event) => {
+const handleMouseenter = ({ vm, state }) => ($event) => {
   const dom = $event.target;
   const textNode = dom && dom.querySelector("span");
-  const { tooltip } = refs;
+  const { tooltip } = vm.$refs;
   if (textNode && tooltip && textNode.scrollWidth > textNode.offsetWidth) {
     const text = textNode.textContent;
     tooltip.state.referenceElm = dom;
@@ -314,7 +341,12 @@ const handleMouseenter = ({ refs, state }) => ($event) => {
   }
 };
 const handleMouseleave = ({ state }) => () => state.tooltipVisible = false;
-const getSuggestions = ({ nextTick, props, state, updatePopper }) => () => {
+const getSuggestions = ({
+  nextTick,
+  props,
+  state,
+  updatePopper
+}) => () => {
   let filterMethod = null;
   if (!(props.filterMethod && typeof props.filterMethod === "function")) {
     filterMethod = (node, keyword) => ~node.text.indexOf(keyword);
@@ -325,8 +357,9 @@ const getSuggestions = ({ nextTick, props, state, updatePopper }) => () => {
     if (node.isDisabled) {
       return false;
     }
+    ;
     node.text = node.getText(props.showAllLevels, props.separator) || "";
-    return filterMethod(node, state.inputValue);
+    return filterMethod == null ? void 0 : filterMethod(node, state.inputValue);
   });
   if (state.multiple) {
     state.presentTags.forEach((tag) => {
@@ -390,16 +423,17 @@ const deleteTag = ({ emit, state }) => (index) => {
   state.checkedValue = state.checkedValue.filter((n, i) => i !== index);
   emit("remove-tag", val);
 };
-const updateStyle = ({ parent, refs, state, updatePopper, nextTick, props }) => () => {
+const updateStyle = ({ parent, vm, state, updatePopper, nextTick, props }) => () => {
   const $el = parent.$el;
-  const { suggestionPanel } = refs;
+  const { suggestionPanel } = vm.$refs;
   const inputInner = $el.querySelector(CASCADER.InputClass);
   if (!inputInner) {
     return;
   }
   const tags = $el.querySelector(CASCADER.TagClass);
   let suggestionPanelEl = null;
-  if (suggestionPanel && (suggestionPanelEl = suggestionPanel.$el)) {
+  if (suggestionPanel) {
+    suggestionPanelEl = suggestionPanel.$el;
     const suggestionList = suggestionPanelEl.querySelector(CASCADER.ListClass);
     suggestionList.style.minWidth = inputInner.offsetWidth + "px";
   }
@@ -415,21 +449,28 @@ const updateStyle = ({ parent, refs, state, updatePopper, nextTick, props }) =>
     updatePopper();
   } else {
     nextTick(() => {
-      if (state.displayOnly) {
+      if (state.multiple && state.isDisplayOnly) {
         inputInner.style.height = "auto";
       }
     });
   }
 };
 const getCheckedNodes = (state) => (leafOnly) => state.panel.getCheckedNodes(leafOnly, state.checkedValue);
-const setInputHeightToTag = ({ nextTick, parent, state }) => () => {
+const setInputHeightToTag = ({
+  nextTick,
+  parent,
+  state
+}) => () => {
   nextTick(() => {
+    var _a;
     const parentEl = parent.$el;
-    const height = parentEl.querySelector(CASCADER.TagClass).offsetHeight + 6 + "px";
+    const height = ((_a = parentEl == null ? void 0 : parentEl.querySelector(CASCADER.TagClass)) == null ? void 0 : _a.offsetHeight) + 6 + "px";
     if (!state.isDisplayOnly) {
-      parentEl.querySelector(CASCADER.InputClass).style.height = height;
+      const inputDom = parentEl == null ? void 0 : parentEl.querySelector(CASCADER.InputClass);
+      inputDom && (inputDom.style.height = height);
     } else {
-      parentEl.querySelector(CASCADER.InputClass).style.height = "auto";
+      const inputDom = parentEl == null ? void 0 : parentEl.querySelector(CASCADER.InputClass);
+      inputDom && (inputDom.style.height = "auto");
     }
   });
 };
@@ -449,7 +490,12 @@ const handleBeforeUpdate = ({ props, api, state }) => () => {
     api.computePresentContent();
   }
 };
-const showPlaceholder = ({ props, state, t, constants }) => () => {
+const showPlaceholder = ({
+  props,
+  state,
+  t,
+  constants
+}) => () => {
   let placeholder = null;
   placeholder = state.multiple && state.presentTags.length || state.present ? "" : props.placeholder || t(constants.placeholder);
   return placeholder;

package/cascader/vue.js

@@ -58,7 +58,17 @@ const api = [
   "handleMouseenter",
   "handleMouseleave"
 ];
-const initState = ({ reactive, props, computed, parent, api: api2, t, constants, refs, inject }) => {
+const initState = ({
+  reactive,
+  props,
+  computed,
+  parent,
+  api: api2,
+  t,
+  constants,
+  vm,
+  inject
+}) => {
   const state = reactive({
     showAutoWidth: inject("showAutoWidth", null),
     /** popper 元素是否显示。 它是通过v-show 绑定到页面上，造成隐藏时，popperJs并没有destory,有一定的性能影响 */
@@ -85,7 +95,7 @@ const initState = ({ reactive, props, computed, parent, api: api2, t, constants,
     leafOnly: computed(() => !state.config.checkStrictly),
     readonly: computed(() => !props.filterable || state.multiple),
     clearBtnVisible: computed(() => api2.computClearVisible()),
-    panel: computed(() => refs.panel),
+    panel: computed(() => vm.$refs.panel),
     placeholder: computed(() => props.placeholder || t(constants.placeholder)),
     inputValues: computed(() => state.multiple ? state.presentText : state.inputValue),
     collapseTagsLength: 0,
@@ -95,7 +105,19 @@ const initState = ({ reactive, props, computed, parent, api: api2, t, constants,
   });
   return state;
 };
-const initApi = ({ api: api2, state, constants, dispatch, emit, refs, props, updatePopper, nextTick, parent, t }) => {
+const initApi = ({
+  api: api2,
+  state,
+  constants,
+  dispatch,
+  emit,
+  vm,
+  props,
+  updatePopper,
+  nextTick,
+  parent,
+  t
+}) => {
   Object.assign(api2, {
     state,
     handleFocus: handleFocus(emit),
@@ -103,10 +125,10 @@ const initApi = ({ api: api2, state, constants, dispatch, emit, refs, props, upd
     getCheckedNodes: getCheckedNodes(state),
     deleteTag: deleteTag({ emit, state }),
     handleDropdownLeave: handleDropdownLeave(state),
-    focusFirstNode: focusFirstNode({ refs, state }),
+    focusFirstNode: focusFirstNode({ vm, state }),
     computClearVisible: computClearVisible({ props, state }),
     showPlaceholder: showPlaceholder({ props, state, t, constants }),
-    updateStyle: updateStyle({ parent, refs, state, updatePopper, nextTick, props }),
+    updateStyle: updateStyle({ parent, vm, state, updatePopper, nextTick, props }),
     getSuggestions: getSuggestions({ nextTick, props, state, updatePopper }),
     handleExpandChange: handleExpandChange({ constants, emit, dispatch, nextTick, state, updatePopper }),
     getConfig: getConfig({ parent, props }),
@@ -115,23 +137,30 @@ const initApi = ({ api: api2, state, constants, dispatch, emit, refs, props, upd
     handleDelete: handleDelete({ api: api2, state }),
     computePresentText: computePresentText({ props, state }),
     handleSuggestionKeyDown: handleSuggestionKeyDown({ api: api2 }),
-    handleInput: handleInput({ api: api2, state, refs }),
+    handleInput: handleInput({ api: api2, state, vm }),
     handleKeyDown: handleKeyDown({ api: api2 }),
     watchValue: watchValue({ api: api2, state }),
     computePresentTags: computePresentTags({ api: api2, props, state }),
     computePresentContent: computePresentContent({ api: api2, state }),
-    watchCheckedValue: watchCheckedValue({ api: api2, emit, state }),
-    toggleDropDownVisible: toggleDropDownVisible({ emit, nextTick, refs, state, updatePopper }),
-    selfMounted: selfMounted({ api: api2, parent, props, refs, state }),
+    watchCheckedValue: watchCheckedValue({ constants, dispatch, api: api2, nextTick, emit, state }),
+    toggleDropDownVisible: toggleDropDownVisible({ emit, vm, state, updatePopper }),
+    selfMounted: selfMounted({ api: api2, parent, props, vm, state }),
     handleBeforeUpdate: handleBeforeUpdate({ props, api: api2, state }),
-    handleBlur: handleBlur({ constants, dispatch, emit, state, api: api2, props }),
-    calcCollapseTags: calcCollapseTags({ refs, state, nextTick }),
-    watchInputHover: watchInputHover({ refs }),
-    handleMouseenter: handleMouseenter({ refs, state }),
+    handleBlur: handleBlur({ emit, api: api2, props }),
+    calcCollapseTags: calcCollapseTags({ vm, state, nextTick }),
+    watchInputHover: watchInputHover({ vm }),
+    handleMouseenter: handleMouseenter({ vm, state }),
     handleMouseleave: handleMouseleave({ state })
   });
 };
-const initWatch = ({ watch, state, api: api2, props, nextTick, updatePopper }) => {
+const initWatch = ({
+  watch,
+  state,
+  api: api2,
+  props,
+  nextTick,
+  updatePopper
+}) => {
   watch(() => state.disabled, api2.computePresentContent);
   watch(() => props.modelValue, api2.watchValue);
   watch(() => state.checkedValue, api2.watchCheckedValue);
@@ -165,7 +194,7 @@ const initWatch = ({ watch, state, api: api2, props, nextTick, updatePopper }) =
   );
   watch([() => state.inputHover, () => state.dropDownVisible], api2.watchInputHover);
 };
-const renderless = (props, { computed, onMounted, onBeforeUnmount, onDeactivated, onUpdated, onBeforeUpdate, reactive, toRefs, watch, inject }, { t, refs, emit, nextTick, constants, parent, slots, dispatch }) => {
+const renderless = (props, { computed, onMounted, onBeforeUnmount, onDeactivated, onUpdated, onBeforeUpdate, reactive, toRefs, watch, inject }, { t, emit, nextTick, constants, parent, slots, dispatch, vm }) => {
   parent.tinyForm = parent.tinyForm || inject("form", null);
   const { updatePopper } = userPopper({
     reactive,
@@ -174,26 +203,27 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, onDeactivated
     props: __spreadProps(__spreadValues({}, props), {
       placement: DATEPICKER.PlacementMap.left,
       popperOptions: { boundariesPadding: 0, gpuAcceleration: false },
-      visibleArrow: true,
+      visibleArrow: false,
       offset: 0,
       boundariesPadding: 5,
       arrowOffset: 35
     }),
     toRefs,
-    refs,
+    vm,
     slots,
     nextTick,
     onBeforeUnmount,
     onDeactivated
   });
   const api2 = {};
-  const state = initState({ reactive, props, computed, parent, api: api2, t, constants, refs, inject });
-  initApi({ api: api2, state, constants, dispatch, emit, refs, props, updatePopper, nextTick, parent, t });
+  const state = initState({ reactive, props, computed, parent, api: api2, t, constants, vm, inject });
+  initApi({ api: api2, state, constants, dispatch, emit, vm, props, updatePopper, nextTick, parent, t });
   initWatch({ watch, state, api: api2, props, nextTick, updatePopper });
   onBeforeUpdate(api2.handleBeforeUpdate);
   onUpdated(api2.updateStyle);
   onMounted(api2.selfMounted);
   parent.$on("handle-clear", (event) => {
+    ;
     api2.handleClear(event);
   });
   onBeforeUnmount(() => removeResizeListener(parent.$el, api2.updateStyle));

package/cascader-menu/index.js

@@ -3,11 +3,11 @@ const handleExpand = (state) => (e) => state.activeNode = e.target;
 const handleMouseMove = ({
   api,
   parent,
-  refs,
+  vm,
   state,
   svg
 }) => (e) => {
-  const { hoverZone } = refs;
+  const hoverZone = vm.$refs.hoverZone;
   if (!state.activeNode || !hoverZone) {
     return;
   }
@@ -15,9 +15,9 @@ const handleMouseMove = ({
     if (state.hoverTimer) {
       clearTimeout(state.hoverTimer);
     }
-    const { left } = refs.cascaderMenu.$parent.$el.getBoundingClientRect();
+    const { left } = vm.$refs.cascaderMenu.$parent.$el.getBoundingClientRect();
     const startX = e.clientX - left;
-    const { offsetWidth, offsetHeight } = refs.cascaderMenu.$parent.$el;
+    const { offsetWidth, offsetHeight } = vm.$refs.cascaderMenu.$parent.$el;
     const top = state.activeNode.offsetTop;
     const bottom = top + state.activeNode.offsetHeight;
     hoverZone.innerHTML = `
@@ -25,11 +25,11 @@ const handleMouseMove = ({
       ${svg}${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" />
     `;
   } else if (!state.hoverTimer) {
-    state.hoverTimer = setTimeout(api.clearHoverZone, parent.state.config.hoverThreshold);
+    state.hoverTimer = setTimeout(api.clearHoverZone, parent.$parent.state.config.hoverThreshold);
   }
 };
-const clearHoverZone = (refs) => () => {
-  const { hoverZone } = refs;
+const clearHoverZone = ({ vm }) => () => {
+  const { hoverZone } = vm.$refs.hoverZone;
   if (!hoverZone) {
     return;
   }

package/cascader-menu/vue.js

@@ -4,7 +4,6 @@ import { CASCADER } from "../common";
 import { random } from "../common/string";
 const api = ["state", "handleMouseMove", "handleExpand"];
 const renderless = (props, { computed, reactive }, { vm, parent }) => {
-  const refs = vm.$refs;
   const api2 = {};
   const state = reactive({
     activeNode: null,
@@ -15,9 +14,9 @@ const renderless = (props, { computed, reactive }, { vm, parent }) => {
   });
   Object.assign(api2, {
     state,
-    clearHoverZone: clearHoverZone(refs),
+    clearHoverZone: clearHoverZone({ vm }),
     handleExpand: handleExpand(state),
-    handleMouseMove: handleMouseMove({ api: api2, parent, refs, state, svg: CASCADER.SvgStr })
+    handleMouseMove: handleMouseMove({ api: api2, parent, vm, state, svg: CASCADER.SvgStr })
   });
   return api2;
 };