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

package/popup/index.js

@@ -52,10 +52,10 @@ const close = ({ api, constants, emit, props, state }) => () => {
   emit("update:modelValue", false);
   emit("close");
 };
-const onTouchMove = ({ refs, state }) => (event) => {
+const onTouchMove = ({ vm, state }) => (event) => {
   touchMove(event);
   const direction = state.deltaY > 0 ? "10" : "01";
-  const el = getScroller()(event.target, refs.$el);
+  const el = getScroller()(event.target, vm.$refs.$el);
   const { scrollHeight, offsetHeight, scrollTop } = el;
   let status = "11";
   if (scrollTop === 0) {
@@ -78,7 +78,7 @@ const renderOverlay = ({ api, nextTick, props, state }) => () => {
     }
   });
 };
-const updateZIndex = ({ refs, state }) => (value = 0) => refs.popup.style.zIndex = ++state.context.zIndex + value;
+const updateZIndex = ({ vm, state }) => (value = 0) => vm.$refs.popup.style.zIndex = ++state.context.zIndex + value;
 const clickOverlay = ({ api, props, emit }) => () => {
   if (props.closeOnClickOverlay) {
     api.close();

package/popup/vue.js

@@ -38,25 +38,25 @@ const initState = ({ reactive, computed, props, api: api2 }) => {
   });
   return state;
 };
-const initApi = ({ api: api2, props, state, refs, emit, nextTick, constants }) => {
+const initApi = ({ api: api2, props, state, vm, emit, nextTick, constants }) => {
   Object.assign(api2, {
     state,
     opened: opened(emit),
     closed: closed(emit),
     getStyle: getStyle(props),
     watchValue: watchValue(api2),
-    updateZIndex: updateZIndex({ refs, state }),
+    updateZIndex: updateZIndex({ vm, state }),
     clickOverlay: clickOverlay({ api: api2, emit, props }),
     renderOverlay: renderOverlay({ api: api2, nextTick, props, state }),
-    onTouchMove: onTouchMove({ refs, state }),
+    onTouchMove: onTouchMove({ vm, state }),
     open: open({ api: api2, constants, emit, props, state }),
     close: close({ api: api2, constants, emit, props, state })
   });
 };
-const renderless = (props, { computed, onMounted, reactive, watch, nextTick }, { constants, refs, emit }) => {
+const renderless = (props, { computed, onMounted, reactive, watch, nextTick }, { constants, vm, emit }) => {
   const api2 = {};
   const state = initState({ reactive, computed, props, api: api2 });
-  initApi({ api: api2, props, state, refs, emit, nextTick, constants });
+  initApi({ api: api2, props, state, vm, emit, nextTick, constants });
   watch(() => props.modelValue, api2.watchValue, { immediate: true });
   onMounted(() => {
     props.modelValue && api2.open();

package/pull-refresh/index.js

@@ -2,6 +2,7 @@ import {
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
 import { on, off } from "../common/deps/dom";
+const PULL_UP_TIME_OUT = 300;
 const initPullRefresh = ({ t, props, state }) => () => {
   var _a, _b, _c;
   const defaultOption = {
@@ -9,15 +10,10 @@ const initPullRefresh = ({ t, props, state }) => () => {
     pullingDownText: t("ui.pullRefresh.pullingDown"),
     pullUpDisabled: false,
     pullDownDisabled: false,
-    headHeight: 50,
-    footHeight: 50
+    headHeight: 48
   };
   state.pullUp = __spreadValues(__spreadValues({}, defaultOption), props.pullUp);
   state.pullDown = __spreadValues(__spreadValues({}, defaultOption), props.pullDown);
-  state.refreshStyle = {
-    paddingTop: state.pullDown.headHeight + "px",
-    paddingBottom: state.pullUp.footHeight + "px"
-  };
   state.loosingText = (_a = props.loosingText) != null ? _a : t("ui.pullRefresh.loosing");
   state.successText = (_b = props.successText) != null ? _b : t("ui.pullRefresh.success");
   state.failedText = (_c = props.failedText) != null ? _c : t("ui.pullRefresh.failed");
@@ -25,82 +21,73 @@ const initPullRefresh = ({ t, props, state }) => () => {
 const onTouchstart = (state) => (event) => {
   state.draggposition = event.touches[0].clientY;
 };
-const onTouchmove = ({ props, state }) => (event) => {
-  if (event.touches[0].clientY < state.draggposition) {
-    if (!state.pullUp.pullUpDisabled) {
-      if (props.hasMore) {
-        state.translate3d = (event.touches[0].clientY - state.draggposition) / 2;
-        state.pullUpReplaces = Math.abs(state.translate3d) > state.pullUp.footHeight ? state.loosingText : state.pullUp.pullingUpText;
-        state.pullDownReplaces = "";
-      }
-    }
-  } else {
-    if (!state.pullDown.pullDownDisabled) {
-      state.translate3d = (event.touches[0].clientY - state.draggposition) / 2;
-      state.pullDownReplaces = Math.abs(state.translate3d) > state.pullDown.headHeight ? state.loosingText : state.pullDown.pullingDownText;
-      state.pullUpReplaces = "";
-    }
+const onTouchmove = ({ state, refs }) => (event) => {
+  if (event.touches[0].clientY > state.draggposition) {
+    pullDownTouchMove(state, refs, event);
+  }
+};
+const pullDownTouchMove = (state, refs, event) => {
+  if (state.disabledPullDown || state.pullDownLoading) {
+    return;
+  }
+  if (refs.content.scrollTop <= 0) {
+    event.preventDefault();
+    state.translate3d = (event.touches[0].clientY - state.draggposition) / 2;
+    state.pullDownReplaces = Math.abs(state.translate3d) > state.pullDown.headHeight ? state.loosingText : state.pullDown.pullingDownText;
   }
   state.animationDuration = 0;
-  state.pullUpLoading = false;
-  state.pullDownLoading = false;
 };
-const onTouchend = ({ api, props, state }) => () => {
+const onTouchend = ({ api, props, state, emit, refs }) => (event) => {
   state.animationDuration = props.animationDuration;
-  if (Math.abs(state.translate3d) >= state.pullDown.headHeight || Math.abs(state.translate3d) >= state.pullUp.footHeight) {
-    if (state.translate3d >= 0) {
-      state.translate3d = state.pullDown.headHeight;
-      const { handler } = state.pullDown;
-      const pullDownPromise = handler && handler();
-      state.pullDownLoading = true;
-      if (pullDownPromise == null ? void 0 : pullDownPromise.then) {
-        pullDownPromise.then(
-          () => {
-            api.handlerModelValue("down", "success");
-          },
-          (e) => {
-            api.handlerModelValue("down", "failed");
-          }
-        );
-        return;
-      }
-      console.error(new Error("handler down is not promise"));
-    } else {
-      state.translate3d = -state.pullUp.footHeight;
-      const { handler } = state.pullUp;
-      const pullUpPromise = handler && handler();
-      state.pullUpLoading = true;
-      if (pullUpPromise == null ? void 0 : pullUpPromise.then) {
-        pullUpPromise.then(
-          () => {
-            api.handlerModelValue("up", "success");
-          },
-          (e) => {
-            api.handlerModelValue("up", "failed");
-          }
-        );
-        return;
-      }
-      console.error(new Error("handler up is not promise"));
-    }
-    api.clearPullRefresh();
+  if (event.changedTouches[0].clientY < state.draggposition) {
+    pullUpTouchEnd(state, emit, refs);
   } else {
-    state.pullUpLoading = false;
+    pullDownTouchEnd(api, state, emit);
+  }
+};
+const pullDownTouchEnd = (api, state, emit) => {
+  if (Math.abs(state.translate3d) < state.pullDown.headHeight) {
     state.pullDownLoading = false;
     api.clearPullRefresh();
+    return;
   }
+  state.translate3d = state.pullDown.headHeight;
+  state.pullDownLoading = true;
+  emit("update:modelValue", true);
+  emit("pullDown");
+};
+const pullUpTouchEnd = (state, emit, refs) => {
+  clearTimeout(state.timer);
+  state.timer = setTimeout(() => {
+    const footNode = refs.foot;
+    if (!state.hasMore || !footNode) {
+      return;
+    }
+    const contentNode = refs.content;
+    const bottomDis = footNode.offsetTop + footNode.clientHeight - contentNode.scrollTop - contentNode.clientHeight;
+    if (bottomDis <= state.pullUpDistance) {
+      state.pullUpLoading = true;
+      emit("update:modelValue", true);
+      emit("pullUp");
+    }
+  }, PULL_UP_TIME_OUT);
+};
+const onScroll = ({ state, emit, refs }) => () => {
+  pullUpTouchEnd(state, emit, refs);
 };
 const mountedHandler = ({ api, refs }) => () => {
   const track = refs.track;
   on(track, "touchstart", api.onTouchstart);
   on(track, "touchmove", api.onTouchmove);
   on(track, "touchend", api.onTouchend);
+  on(track, "scroll", api.onScroll);
 };
 const beforeUnmountHandler = ({ api, refs }) => () => {
   const track = refs.track;
   off(track, "touchstart", api.onTouchstart);
   off(track, "touchmove", api.onTouchmove);
   off(track, "touchend", api.onTouchend);
+  off(track, "scroll", api.onScroll);
 };
 const handlerModelValue = ({ api, state }) => (value, result) => {
   state.pullUpLoading = false;
@@ -108,7 +95,7 @@ const handlerModelValue = ({ api, state }) => (value, result) => {
   if (value === "down") {
     state.pullDownReplaces = state[`${result}Text`];
   } else {
-    state.pullUpReplaces = state[`${result}Text`];
+    state.pullUpStateText = state[`${result}Text`];
   }
   setTimeout(() => {
     api.clearPullRefresh();
@@ -116,8 +103,9 @@ const handlerModelValue = ({ api, state }) => (value, result) => {
 };
 const clearPullRefresh = (state) => () => {
   state.translate3d = 0;
-  state.pullUpReplaces = "";
   state.pullDownReplaces = "";
+  state.pullDownLoading = false;
+  state.pullUpLoading = false;
 };
 export {
   beforeUnmountHandler,
@@ -125,7 +113,11 @@ export {
   handlerModelValue,
   initPullRefresh,
   mountedHandler,
+  onScroll,
   onTouchend,
   onTouchmove,
-  onTouchstart
+  onTouchstart,
+  pullDownTouchEnd,
+  pullDownTouchMove,
+  pullUpTouchEnd
 };

package/pull-refresh/vue.js

@@ -6,14 +6,14 @@ import {
   onTouchstart,
   onTouchmove,
   onTouchend,
+  onScroll,
   initPullRefresh,
   clearPullRefresh
 } from "./index";
 const api = ["state"];
-const renderless = (props, { watch, onMounted, reactive, onBeforeUnmount }, { t, refs }) => {
+const renderless = (props, { watch, onMounted, reactive, onBeforeUnmount }, { t, refs, emit, nextTick }) => {
   const api2 = {};
   const state = reactive({
-    pullUpReplaces: "",
     pullDownReplaces: "",
     refreshStyle: {},
     translate3d: 0,
@@ -23,17 +23,25 @@ const renderless = (props, { watch, onMounted, reactive, onBeforeUnmount }, { t,
     loosingText: "",
     successText: "",
     failedText: "",
-    noMoreText: "",
+    noMoreText: t("ui.pullRefresh.noMore"),
+    pullUpLoadingText: props.pullUpLoadingText,
+    pullDownLoadingText: props.pullDownLoadingText,
     pullUp: null,
     pullDown: null,
+    hasMore: true,
     successDuration: props.successDuration,
-    animationDuration: props.animationDuration
+    animationDuration: props.animationDuration,
+    disabledPullDown: props.disabledPullDown,
+    disabledPullUp: props.disabledPullUp,
+    pullUpDistance: typeof props.pullUpDistance === "string" ? Number(props.pullUpDistance) : props.pullUpDistance,
+    timer: null
   });
   Object.assign(api2, {
     state,
     onTouchstart: onTouchstart(state),
-    onTouchmove: onTouchmove({ props, state }),
-    onTouchend: onTouchend({ api: api2, props, state }),
+    onTouchmove: onTouchmove({ state, refs }),
+    onTouchend: onTouchend({ api: api2, props, state, emit, refs }),
+    onScroll: onScroll({ state, emit, refs }),
     mountedHandler: mountedHandler({ api: api2, refs }),
     beforeUnmountHandler: beforeUnmountHandler({ api: api2, refs }),
     handlerModelValue: handlerModelValue({ api: api2, state }),
@@ -44,7 +52,15 @@ const renderless = (props, { watch, onMounted, reactive, onBeforeUnmount }, { t,
     () => props.hasMore,
     (value) => {
       if (!value) {
-        state.noMoreText = t("ui.pullRefresh.noMore");
+        state.hasMore = false;
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (!value) {
         api2.clearPullRefresh();
       }
     }

package/radio/index.js

@@ -61,24 +61,7 @@ const toggleEvent = ({ props, vm, type }) => {
     });
   }
 };
-const dispatchDisplayedValue = ({ state, dispatch, api }) => () => {
-  if (state.isDisplayOnly) {
-    dispatch("FormItem", "displayed-value-changed", {
-      type: "radio",
-      val: api.getDisplayedValue()
-    });
-  }
-};
-const getDisplayedValue = ({ vm, state, props }) => () => {
-  if (state.model === props.label) {
-    return vm.$refs.label && vm.$refs.label.innerText || props.text || props.label;
-  } else {
-    return "";
-  }
-};
 export {
-  dispatchDisplayedValue,
-  getDisplayedValue,
   getModel,
   handleChange,
   isDisabled,

package/radio/vue.js

@@ -8,17 +8,15 @@ import {
   tabIndex,
   getModel,
   setModel,
-  toggleEvent,
-  dispatchDisplayedValue,
-  getDisplayedValue
+  toggleEvent
 } from "./index";
 const api = ["state", "handleChange"];
-const renderless = (props, { onMounted, onBeforeUnmount, computed, reactive, inject, watch }, { vm, parent, emit, constants, nextTick, dispatch }) => {
+const renderless = (props, { onMounted, onBeforeUnmount, computed, reactive, inject }, { vm, parent, emit, constants, nextTick, dispatch }) => {
   parent.tinyForm = parent.tinyForm || inject("form", null);
   const api2 = {};
   const state = reactive({
     vertical: inject("radioVertical", false),
-    size: props.size || inject("size", null),
+    size: computed(() => props.size || inject("size", null) || (parent.tinyForm || {}).size),
     focus: false,
     radioGroup: null,
     isGroup: computed(() => api2.isGroup()),
@@ -41,13 +39,9 @@ const renderless = (props, { onMounted, onBeforeUnmount, computed, reactive, inj
     isDisabled: isDisabled({ props, state }),
     isDisplayOnly: isDisplayOnly({ props }),
     setModel: setModel({ constants, dispatch, emit, props, vm, state }),
-    handleChange: handleChange({ constants, dispatch, emit, state, nextTick }),
-    dispatchDisplayedValue: dispatchDisplayedValue({ state, api: api2, dispatch }),
-    getDisplayedValue: getDisplayedValue({ vm, state, props })
+    handleChange: handleChange({ constants, dispatch, emit, state, nextTick })
   });
-  watch(() => state.isDisplayOnly, api2.dispatchDisplayedValue);
   onMounted(() => {
-    api2.dispatchDisplayedValue();
     dispatch("Tooltip", "tooltip-update");
     toggleEvent({ props, vm, type: "add" });
   });

package/rate/index.js

@@ -136,7 +136,7 @@ const computedText = ({ props, state }) => {
     currentValue = props.texts.length;
   }
   if (props.showScore) {
-    result = props.scoreTemplate.replace(/\{\s*value\s*\}/, currentValue);
+    result = props.scoreTemplate.replace(/\{\s*value\s*\}/, String(currentValue));
     return result;
   }
   if (props.showText && currentValue > 0) {

package/rate/vue.js

@@ -30,7 +30,6 @@ const api = [
   "resetCurrentValue"
 ];
 const useChangeValue = ({
-  computed,
   constants,
   emit,
   props,
@@ -85,7 +84,6 @@ const useChangeValue = ({
 const renderless = (props, { computed, reactive, toRefs, watch, onMounted, onUnmounted, inject }, { constants, emit, parent }) => {
   const api2 = {};
   const changeValue = useChangeValue({
-    computed,
     constants,
     emit,
     props,

package/record/index.js

@@ -148,7 +148,9 @@ const toogleRecord = ({ state, api, emit, constants, props }) => ($event) => {
 };
 const handleConfirm = ({ state, emit, props, constants, api }) => ($event) => {
   if (props.isHwh5) {
-    api.triggerClick($event, constants.HWH5_STATUS.CANCEL, () => emit("update:modelValue", false));
+    api.triggerClick($event, constants.HWH5_STATUS.END, () => {
+      emit("update:modelValue", false);
+    });
   } else {
     state.isClickConfirm = true;
     emit("update:modelValue", false);
@@ -195,6 +197,7 @@ const calcVoice = (analyser) => {
     if (highValue <= val) {
       return voiceNum = idx + 1 + (val === 0 ? lowValue / 1e3 : highValue / val);
     }
+    return false;
   });
   !ismatch && (voiceNum = 6);
   return voiceNum;

package/{rich-text-edtior → rich-text-editor}/index.js

@@ -58,7 +58,7 @@ const tableMouseMove = (state, vm) => (e) => {
   state.flagX = Math.ceil((e.x - x) / 30);
   state.flagY = Math.ceil((e.y - y) / 30);
 };
-const tableChoose = (state, vm) => (e) => {
+const tableChoose = (state) => () => {
   if (state.flagX && state.flagY) {
     state.editor.chain().focus().insertTable({ rows: state.flagY, cols: state.flagX, withHeaderRow: true }).run();
   }
@@ -70,7 +70,7 @@ const toggleTablePanel = (state) => () => {
 const closeTablePanel = (state) => () => {
   state.isShowTable && (state.isShowTable = false);
 };
-const shouldShow = ({ editor, view, state, oldState, from, to }) => {
+const shouldShow = ({ editor }) => {
   return editor.isActive("table");
 };
 const eventMap = /* @__PURE__ */ new Map();

package/{rich-text-edtior → rich-text-editor}/vue.js

@@ -27,7 +27,7 @@ const api = [
   "eventClick",
   "Active"
 ];
-const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref, markRaw }, { vm, emit, parent }, {
+const renderless = (props, { computed, onBeforeUnmount, reactive }, { vm, emit }, {
   Editor,
   StarterKit,
   Table,
@@ -235,10 +235,7 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref
       emit("create", { editor });
     },
     onUpdate({ editor }) {
-      const json = editor.getJSON();
       const html = editor.getHTML();
-      const text = editor.getText();
-      const lineText = editor.getText({ blockSeparator: "--" });
       emit("update", { editor });
       emit("update:modelValue", html);
     },
@@ -260,7 +257,7 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref
   }, props.options);
   let options = Object.assign(defaultOptions, props.options);
   const state = reactive({
-    editor: markRaw(new Editor(options)),
+    editor: new Editor(options),
     toolbar: computed(() => props.customToolBar.length ? props.customToolBar : defaultToolBar),
     // table 变量
     isShowTable: false,

package/scrollbar/index.js

@@ -37,10 +37,10 @@ const clickThumbHandler = ({ api, state }) => (event) => {
   api.startDrag(event);
   state[state.bar.axis] = event.currentTarget[state.bar.offset] - (event[state.bar.client] - event.currentTarget.getBoundingClientRect()[state.bar.direction]);
 };
-const clickTrackHandler = ({ refs, state }) => (event) => {
+const clickTrackHandler = ({ vm, state }) => (event) => {
   const offset = Math.abs(event.target.getBoundingClientRect()[state.bar.direction] - event[state.bar.client]);
-  const thumbHalf = refs.thumb[state.bar.offset] / 2;
-  const thumbPositionPercentage = (offset - thumbHalf) * 100 / refs.bar[state.bar.offset];
+  const thumbHalf = vm.$refs.thumb[state.bar.offset] / 2;
+  const thumbPositionPercentage = (offset - thumbHalf) * 100 / vm.$refs.bar[state.bar.offset];
   state.wrap[state.bar.scroll] = thumbPositionPercentage * state.wrap[state.bar.scrollSize] / 100;
 };
 const startDrag = ({ api, on, state }) => (event) => {
@@ -50,7 +50,7 @@ const startDrag = ({ api, on, state }) => (event) => {
   on(document, "mouseup", api.mouseUpDocumentHandler);
   document.onselectstart = () => false;
 };
-const mouseMoveDocumentHandler = ({ refs, state }) => (event) => {
+const mouseMoveDocumentHandler = ({ vm, state }) => (event) => {
   if (state.cursorDown === false) {
     return;
   }
@@ -58,9 +58,9 @@ const mouseMoveDocumentHandler = ({ refs, state }) => (event) => {
   if (!prevPage) {
     return;
   }
-  const offset = (refs.bar.getBoundingClientRect()[state.bar.direction] - event[state.bar.client]) * -1;
-  const thumbClickPosition = refs.thumb[state.bar.offset] - prevPage;
-  const thumbPositionPercentage = (offset - thumbClickPosition) * 100 / refs.bar[state.bar.offset];
+  const offset = (vm.$refs.bar.getBoundingClientRect()[state.bar.direction] - event[state.bar.client]) * -1;
+  const thumbClickPosition = vm.$refs.thumb[state.bar.offset] - prevPage;
+  const thumbPositionPercentage = (offset - thumbClickPosition) * 100 / vm.$refs.bar[state.bar.offset];
   state.wrap[state.bar.scroll] = thumbPositionPercentage * state.wrap[state.bar.scrollSize] / 100;
 };
 const mouseUpDocumentHandler = ({ api, off, state }) => () => {
@@ -69,15 +69,15 @@ const mouseUpDocumentHandler = ({ api, off, state }) => () => {
   off(document, "mousemove", api.mouseMoveDocumentHandler);
   document.onselectstart = null;
 };
-const handleScroll = ({ refs, state, emit }) => (event) => {
-  const wrap = refs.wrap;
+const handleScroll = ({ vm, state, emit }) => (event) => {
+  const wrap = vm.$refs.wrap;
   state.moveY = wrap.scrollTop * 100 / wrap.clientHeight;
   state.moveX = wrap.scrollLeft * 100 / wrap.clientWidth;
   emit("scroll", event);
 };
-const update = ({ refs, state }) => () => {
+const update = ({ vm, state }) => () => {
   let heightPercentage, widthPercentage;
-  const wrap = refs.wrap;
+  const wrap = vm.$refs.wrap;
   if (!wrap) {
     return;
   }

package/scrollbar/vue-bar.js

@@ -18,7 +18,7 @@ const api = [
   "mouseUpDocumentHandler",
   "mouseMoveDocumentHandler"
 ];
-const renderless = (props, { computed, onUnmounted, reactive }, { refs, parent }) => {
+const renderless = (props, { computed, onUnmounted, reactive }, { vm, parent }) => {
   const state = reactive({
     bar: computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]),
     wrap: computed(() => parent.$refs.wrap)
@@ -26,8 +26,8 @@ const renderless = (props, { computed, onUnmounted, reactive }, { refs, parent }
   const api2 = {
     state,
     renderThumbStyle,
-    clickTrackHandler: clickTrackHandler({ refs, state }),
-    mouseMoveDocumentHandler: mouseMoveDocumentHandler({ refs, state })
+    clickTrackHandler: clickTrackHandler({ vm, state }),
+    mouseMoveDocumentHandler: mouseMoveDocumentHandler({ vm, state })
   };
   onUnmounted(() => off(document, "mouseup", api2.mouseUpDocumentHandler));
   return Object.assign(api2, {

package/scrollbar/vue.js

@@ -2,7 +2,7 @@ import "../chunk-G2ADBYYC.js";
 import { handleScroll, update } from "./index";
 import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
 const api = ["state", "update", "handleScroll"];
-const renderless = (props, { onBeforeUnmount, onMounted, reactive }, { refs, nextTick, emit }) => {
+const renderless = (props, { onBeforeUnmount, onMounted, reactive }, { vm, nextTick, emit }) => {
   const state = reactive({
     sizeWidth: "0",
     sizeHeight: "0",
@@ -11,21 +11,21 @@ const renderless = (props, { onBeforeUnmount, onMounted, reactive }, { refs, nex
   });
   const api2 = {
     state,
-    update: update({ refs, state }),
-    handleScroll: handleScroll({ refs, state, emit })
+    update: update({ vm, state }),
+    handleScroll: handleScroll({ vm, state, emit })
   };
   onMounted(() => {
     if (props.native) {
       return;
     }
     nextTick(api2.update);
-    !props.noresize && addResizeListener(refs.resize, api2.update);
+    !props.noresize && addResizeListener(vm.$refs.resize, api2.update);
   });
   onBeforeUnmount(() => {
     if (props.native) {
       return;
     }
-    !props.noresize && removeResizeListener(refs.resize, api2.update);
+    !props.noresize && removeResizeListener(vm.$refs.resize, api2.update);
   });
   return api2;
 };

package/search/index.js

@@ -76,8 +76,8 @@ const clear = ({ api, emit, refs, state }) => (event) => {
   state.currentValue = "";
   refs.input.focus();
   state.focus = true;
-  emit("change", [], "");
   api.emitInput("", state.searchValue);
+  emit("change", [], "");
   emit("clear");
 };
 export {

package/search/vue.js

@@ -66,7 +66,9 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, toR
     collapse: props.mini,
     currentValue: props.modelValue
   }, formatSearchTypes2.state), {
-    showClear: computed(() => props.clearable && (state.focus || state.hovering) && state.currentValue)
+    showClear: computed(() => props.clearable && (state.focus || state.hovering) && state.currentValue),
+    formItemSize: computed(() => (parent.formItem || {}).formItemSize),
+    searchSize: computed(() => props.size || state.formItemSize)
   }));
   const api2 = __spreadValues({
     state,