@opentiny/vue-renderless 3.9.3 → 3.10.0

package/popeditor/index.js

@@ -30,7 +30,10 @@ const createSearchForm = (props) => (isRest) => props.conditions.reduce((acc, it
 }, {});
 const getColumns = ({ constants, props }) => {
   const { columns } = props.gridOp;
-  const selectionCol = find(columns, (col) => col.type === constants.COLUMNS_TYPE.selection || col.type === constants.COLUMNS_TYPE.radio);
+  const selectionCol = find(
+    columns,
+    (col) => col.type === constants.COLUMNS_TYPE.selection || col.type === constants.COLUMNS_TYPE.radio
+  );
   if (selectionCol) {
     selectionCol.type = props.multi ? constants.COLUMNS_TYPE.selection : constants.COLUMNS_TYPE.radio;
   } else {
@@ -92,7 +95,11 @@ const handleClear = ({ constants, emit, props, state }) => () => {
   state.selectedValues = [];
   if (!isEqual(state.commitValue, props.modelValue)) {
     emit("update:modelValue", state.commitValue);
-    emit("change", state.commitValue, props.popseletor === constants.TYPE_GRID ? state.treeSelectList : state.selectedDatas);
+    emit(
+      "change",
+      state.commitValue,
+      props.popseletor === constants.TYPE_GRID ? state.treeSelectList : state.selectedDatas
+    );
   }
 };
 const handleConfirm = ({ api, constants, emit, props, state }) => (skipBeforeClose) => {
@@ -248,13 +255,16 @@ const openDialog = ({ api, props, state, emit }) => () => {
   state.closeSuggestPanelInvoker = "openDialog";
   api.closeSuggestPanel(true);
   state.open = true;
+  state.showContent = true;
   emit("popup");
   props.autoLookup && props.alwaysLoad && api.query();
 };
 const localFilter = ({ props, state }) => {
   const keys = Object.keys(state.search);
   const dataset = props.gridOp && props.gridOp.data || [];
-  return dataset.filter((item) => keys.every((key) => item[key] && item[key].toString().toLowerCase().includes(state.search[key].toLowerCase())));
+  return dataset.filter(
+    (item) => keys.every((key) => item[key] && item[key].toString().toLowerCase().includes(state.search[key].toLowerCase()))
+  );
 };
 const query = ({ props, state, parent, constants }) => (page) => {
   const { remoteSearch, dataset } = props;
@@ -263,6 +273,13 @@ const query = ({ props, state, parent, constants }) => (page) => {
     state.loading = true;
     if (remoteSearch || dataset) {
       const { currentPage, pageSize } = state.pagerConfig;
+      let final = true;
+      const onFinally = () => {
+        if (final) {
+          final = false;
+          state.loading = false;
+        }
+      };
       if (remoteSearch) {
         props.remoteSearch({
           page: { currentPage, pageSize },
@@ -272,11 +289,12 @@ const query = ({ props, state, parent, constants }) => (page) => {
           state.pagerConfig.total = data.total;
           state.loading = false;
           resolve();
-        }).finally(() => {
-          state.loading = false;
-        });
+        }).then(onFinally).catch(onFinally);
       } else {
-        getDataset({ dataset, service: parent.$service, tree: props.treeOp }, { pageVO: { curPage: currentPage, pageSize } }).then((data) => {
+        getDataset(
+          { dataset, service: parent.$service, tree: props.treeOp },
+          { pageVO: { curPage: currentPage, pageSize } }
+        ).then((data) => {
           const { result, pageVO = {} } = data;
           if (props.popseletor === constants.TYPE_TREE) {
             props.treeOp.data = result || data;
@@ -286,9 +304,7 @@ const query = ({ props, state, parent, constants }) => (page) => {
           }
           state.loading = false;
           resolve();
-        }).finally(() => {
-          state.loading = false;
-        });
+        }).then(onFinally).catch(onFinally);
       }
     } else {
       state.fullGridData = localFilter({ state, props });
@@ -316,7 +332,7 @@ const selectedGridSelectChange = ({ constants, props, vm, state }) => ({ checked
   const refs = vm.$refs;
   if (!checked) {
     const len = state.selectedValues.length;
-    event.target.checked = !checked;
+    event && (event.target.checked = !checked);
     for (let i = 0; i < len; i++) {
       if (state.selectedValues[i] == row[props.valueField]) {
         state.selectedValues.splice(i, 1);
@@ -365,6 +381,7 @@ const sourceGridSelectAll = ({ props, state, api }) => ({ selection, checked })
     api.handleConfirm();
   }
   copySelectDatas(state);
+  api.selectedBoxInit();
 };
 const sourceGridSelectChange = ({ props, state, api }) => ({ checked, row, confirm }) => {
   if (checked) {
@@ -382,6 +399,7 @@ const sourceGridSelectChange = ({ props, state, api }) => ({ checked, row, confi
     api.handleConfirm();
   }
   copySelectDatas(state);
+  api.selectedBoxInit();
 };
 const filterNode = () => (value, data) => {
   if (!value) {
@@ -483,7 +501,7 @@ const updateSuggestWidth = ({ refs }) => () => {
   let $input = refs.reference.getInput();
   refs.popper.style.width = $input.clientWidth + "px";
 };
-const doSuggesst = ({ state, props, popper, api }) => (event) => {
+const doSuggesst = ({ state, props, popper, api, nextTick }) => (event) => {
   if (!props.suggest) {
     return;
   }
@@ -498,13 +516,16 @@ const doSuggesst = ({ state, props, popper, api }) => (event) => {
       state.suggestList = [].concat(state.selectedDatas);
     }
     state.showSuggestPanel = true;
+    setTimeout(popper.updatePopper);
   }
   if (props.remoteSearch) {
     const doQuery = (query3) => {
       state.showSuggestPanel = true;
       props.remoteSearch({ query: query3 }).then((data) => {
         state.suggestList = data.data;
-        popper.updatePopper();
+        nextTick(() => {
+          popper.updatePopper();
+        });
       });
     };
     if (!props.bypass && props.multi) {
@@ -572,6 +593,22 @@ const mounted = ({ api, props }) => () => {
     api.initDisplay(props.modelValue);
   }
 };
+const doDestroy = ({ popper }) => () => {
+  popper.doDestroy();
+};
+const selectedBoxInit = (refs) => () => refs.selectedBox && refs.selectedBox.init();
+const selectedBoxClear = (api) => () => api.selectedGridSelectAll({ checked: false });
+const selectedBoxDelete = (api) => ({ option: row }) => api.selectedGridSelectChange({ checked: false, row });
+const selectedBoxDrag = ({ props, state }) => ({ state: { select } }) => {
+  const { valueField } = props;
+  const { selectedDatas } = state;
+  if (select && select.length) {
+    const datas = select.map((opt) => String(opt[valueField])).map((strVal) => selectedDatas.find((opt) => strVal === String(opt[valueField])));
+    const values = datas.map((opt) => opt[valueField]);
+    state.selectedDatas = datas;
+    state.selectedValues = values;
+  }
+};
 export {
   closeSuggestPanel,
   computedGetTitle,
@@ -579,6 +616,7 @@ export {
   computedTreeOp,
   createSearchForm,
   doClear,
+  doDestroy,
   doSearch,
   doSuggesst,
   filterNode,
@@ -602,6 +640,10 @@ export {
   mounted,
   openDialog,
   query,
+  selectedBoxClear,
+  selectedBoxDelete,
+  selectedBoxDrag,
+  selectedBoxInit,
   selectedGridSelectAll,
   selectedGridSelectChange,
   sourceGridSelectAll,

package/popeditor/vue.js

@@ -40,7 +40,12 @@ import {
   updateSuggestWidth,
   handlePager,
   initSearchOption,
-  mounted
+  mounted,
+  doDestroy,
+  selectedBoxInit,
+  selectedBoxClear,
+  selectedBoxDelete,
+  selectedBoxDrag
 } from "./index";
 const api = [
   "state",
@@ -65,10 +70,15 @@ const api = [
   "closeSuggestPanel",
   "popper",
   "doSuggesstNow",
-  "suggestRadioChange"
+  "suggestRadioChange",
+  "doDestroy",
+  "selectedBoxClear",
+  "selectedBoxDelete",
+  "selectedBoxDrag"
 ];
-const initState = ({ reactive, computed, props, api: api2, constants, t, parent }) => {
+const initState = ({ reactive, computed, props, api: api2, constants, t, parent, vm }) => {
   const state = reactive({
+    showContent: false,
     open: false,
     display: "",
     getTitle: computed(() => api2.computedGetTitle({ constants, props, t })),
@@ -86,6 +96,7 @@ const initState = ({ reactive, computed, props, api: api2, constants, t, parent
     historyGridDataset: [],
     filterText: "",
     treeOp: computed(() => api2.computedTreeOp(props, state)),
+    theme: vm.theme,
     pagerConfig: reactive(__spreadValues({
       currentPage: 1,
       pageSize: 10,
@@ -138,8 +149,8 @@ const initApi = ({ api: api2, props, state, parent, refs, emit, popper, constant
     doSearch: doSearch({ api: api2, state, props }),
     doClear: doClear({ api: api2, state, props }),
     updateSuggestWidth: updateSuggestWidth({ refs }),
-    doSuggesstNow: doSuggesst({ api: api2, state, props, popper }),
-    doSuggesst: debounce(1e3, doSuggesst({ api: api2, state, props, popper })),
+    doSuggesstNow: doSuggesst({ api: api2, state, props, popper, nextTick }),
+    doSuggesst: debounce(1e3, doSuggesst({ api: api2, state, props, popper, nextTick })),
     closeSuggestPanel: closeSuggestPanel({ api: api2, state, refs }),
     sourceGridSelectChange: sourceGridSelectChange({ props, state, api: api2 }),
     sourceGridSelectAll: sourceGridSelectAll({ props, state, api: api2 }),
@@ -147,7 +158,12 @@ const initApi = ({ api: api2, props, state, parent, refs, emit, popper, constant
     suggestRadioChange: suggestRadioChange({ api: api2, state }),
     handlePager: handlePager({ api: api2, props, state }),
     initSearchOption: initSearchOption({ api: api2, state }),
-    mounted: mounted({ api: api2, props })
+    mounted: mounted({ api: api2, props }),
+    doDestroy: doDestroy({ popper }),
+    selectedBoxInit: selectedBoxInit(refs),
+    selectedBoxClear: selectedBoxClear(api2),
+    selectedBoxDelete: selectedBoxDelete(api2),
+    selectedBoxDrag: selectedBoxDrag({ props, state })
   });
   state.search = api2.createSearchForm(false);
 };
@@ -173,7 +189,7 @@ const initWatch = ({ watch, props, api: api2, state, popper }) => {
 };
 const renderless = (props, { computed, onMounted, reactive, watch, inject, toRefs, onBeforeUnmount, onDeactivated }, { t, refs, parent, emit, constants, vm, nextTick, slots }) => {
   const api2 = {};
-  const state = initState({ reactive, computed, props, api: api2, constants, t, parent });
+  const state = initState({ reactive, computed, props, api: api2, constants, t, parent, vm });
   const popper = userPopper({
     emit,
     refs,

package/popover/vue.js

@@ -76,8 +76,7 @@ const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
         return;
       }
       val ? emit("show") : emit("hide");
-    },
-    { immediate: true }
+    }
   );
   watch(
     () => props.reference,

package/popup/vue.js

@@ -1,11 +1,24 @@
 import {
   __spreadValues
 } from "../chunk-PKUHTIDK.js";
-import { getStyle, watchValue, open, opened, closed, onTouchMove, close, renderOverlay, clickOverlay, updateZIndex } from "./index";
+import {
+  getStyle,
+  watchValue,
+  open,
+  opened,
+  closed,
+  onTouchMove,
+  close,
+  renderOverlay,
+  clickOverlay,
+  updateZIndex
+} from "./index";
 const api = ["state", "open", "close", "clickOverlay", "onTouchMove", "opened", "closed"];
 const initState = ({ reactive, computed, props, api: api2 }) => {
   const state = reactive({
-    transitionName: computed(() => props.transition || props.position === "center" ? "tiny-fade" : `tiny-popup-slide-${props.position}`),
+    transitionName: computed(
+      () => props.transition || props.position === "center" ? "tiny-fade" : `tiny-popup-slide-${props.position}`
+    ),
     style: computed(() => api2.getStyle()),
     inited: computed(() => state.inited || props.modelValue),
     opened: false,

package/progress/index.js

@@ -6,9 +6,9 @@ const computedBarStyle = ({ api, props }) => () => ({
 const computedRelativeStrokeWidth = ({ constants, state }) => () => {
   if (state.width === 0 || state.strokeWidth === 0)
     return constants.REL_STROKE_WIDTH;
-  return (state.strokeWidth / state.width * 100).toFixed(1);
+  return Number((state.strokeWidth / state.width * 100).toFixed(1));
 };
-const computedRadius = ({ constants, props, state }) => () => props.type === constants.PROGRESS_TYPE.CIRCLE || props.type === constants.PROGRESS_TYPE.DASHBOARD ? parseInt(50 - parseFloat(state.relativeStrokeWidth) / 2, 10) : 0;
+const computedRadius = ({ constants, props, state }) => () => props.type === constants.PROGRESS_TYPE.CIRCLE || props.type === constants.PROGRESS_TYPE.DASHBOARD ? parseInt(String(50 - parseFloat(state.relativeStrokeWidth) / 2), 10) : 0;
 const computedTrackPath = ({ constants, props, state }) => () => {
   const radiusValue = state.radius;
   const isDashboardType = props.type === constants.PROGRESS_TYPE.DASHBOARD;
@@ -42,6 +42,8 @@ const computedIconClass = ({ constants, props, mode }) => () => {
   } else if (props.status === constants.PROGRESS_STATUS.EXCEPTION) {
     const iconClasses = props.type === constants.PROGRESS_TYPE.LINE ? [constants.ICON_EXCEPTION, constants.ICON_CIRCLE_EXCEPTION] : [constants.ICON_CIRCLE_EXCEPTION, constants.ICON_EXCEPTION];
     return mode === "mobile-first" ? iconClasses[1] : iconClasses[0];
+  } else {
+    return "";
   }
 };
 const computedIconStyle = ({ constants, props, state }) => () => {
@@ -84,7 +86,7 @@ const getCurrentColor = ({ api, props }) => (percentage) => {
     return api.getLevelColor(percentage);
   }
 };
-const getLevelColor = (api) => (percentage) => {
+const getLevelColor = ({ api }) => (percentage) => {
   const colorArray = api.getColorArray().sort((a, b) => a.percentage - b.percentage);
   for (let i = 0; i < colorArray.length; i++) {
     if (colorArray[i].percentage > percentage) {
@@ -93,7 +95,7 @@ const getLevelColor = (api) => (percentage) => {
   }
   return colorArray[colorArray.length - 1].color;
 };
-const getColorArray = (props) => () => {
+const getColorArray = ({ props }) => () => {
   const color = props.color;
   const span = 100 / color.length;
   return color.map((seriesColor, index) => {
@@ -108,9 +110,9 @@ const getColorArray = (props) => () => {
 };
 const customBeforeAppearHook = ({ props, state }) => (el) => {
   if (props.type === "line") {
-    el.style.width = 0;
+    el.style.width = String(0);
   } else if (props.type === "circle") {
-    el.style.strokeDasharray = state.perimeter * state.content;
+    el.style.strokeDasharray = String(state.perimeter * state.content);
     el.style.strokeDashoffset = state.perimeter;
   }
 };
@@ -121,7 +123,7 @@ const customAfterAppearHook = ({ state, props }) => (el) => {
   if (props.type === "line") {
     el.style.width = state.barStyle.width;
   } else if (props.type === "circle") {
-    el.style.strokeDashoffset = 0;
+    el.style.strokeDashoffset = String(0);
   }
 };
 export {

package/progress/vue.js

@@ -22,7 +22,15 @@ import {
   customAppearHook,
   customAfterAppearHook
 } from "./index";
-const api = ["state", "getCurrentColor", "getLevelColor", "getColorArray", "customBeforeAppearHook", "customAppearHook", "customAfterAppearHook"];
+const api = [
+  "state",
+  "getCurrentColor",
+  "getLevelColor",
+  "getColorArray",
+  "customBeforeAppearHook",
+  "customAppearHook",
+  "customAfterAppearHook"
+];
 const renderless = (props, { computed, reactive }, { constants, mode }) => {
   const api2 = {};
   const state = reactive({
@@ -51,14 +59,14 @@ const renderless = (props, { computed, reactive }, { constants, mode }) => {
     state,
     customAppearHook,
     computedContent: computedContent({ props }),
-    getColorArray: getColorArray(props),
+    getColorArray: getColorArray({ props }),
     computedRate: computedRate({ constants, props }),
     computedPerimeter: computedPerimeter({ state }),
     computedRadius: computedRadius({ constants, props, state }),
     computedTrackPath: computedTrackPath({ constants, props, state }),
     computedIconClass: computedIconClass({ constants, props, mode }),
     computedIconStyle: computedIconStyle({ constants, props, state }),
-    computedCircleStyle: computedCircleStyle({ props, state }),
+    computedCircleStyle: computedCircleStyle({ state }),
     computedCirclePathStyle: computedCirclePathStyle({ props, state }),
     computedStrokeDashoffset: computedStrokeDashoffset({ state }),
     computedTrailPathStyle: computedTrailPathStyle({ state }),
@@ -66,7 +74,7 @@ const renderless = (props, { computed, reactive }, { constants, mode }) => {
     computedProgressTextSize: computedProgressTextSize({ state, constants, props, mode }),
     customAfterAppearHook: customAfterAppearHook({ state, props }),
     customBeforeAppearHook: customBeforeAppearHook({ props, state }),
-    getLevelColor: getLevelColor(api2),
+    getLevelColor: getLevelColor({ api: api2 }),
     computedBarStyle: computedBarStyle({ api: api2, props }),
     getCurrentColor: getCurrentColor({ api: api2, props }),
     computedStroke: computedStroke({ api: api2, constants, props })

package/pull-refresh/vue.js

@@ -1,5 +1,14 @@
 import "../chunk-PKUHTIDK.js";
-import { mountedHandler, beforeUnmountHandler, handlerModelValue, onTouchstart, onTouchmove, onTouchend, initPullRefresh, clearPullRefresh } from "./index";
+import {
+  mountedHandler,
+  beforeUnmountHandler,
+  handlerModelValue,
+  onTouchstart,
+  onTouchmove,
+  onTouchend,
+  initPullRefresh,
+  clearPullRefresh
+} from "./index";
 const api = ["state"];
 const renderless = (props, { watch, onMounted, reactive, onBeforeUnmount }, { t, refs }) => {
   const api2 = {};

package/query-builder/index.js

@@ -0,0 +1,9 @@
+import "../chunk-PKUHTIDK.js";
+const filter = () => (value, data) => {
+  if (!value)
+    return true;
+  return data.label.includes(value);
+};
+export {
+  filter
+};

package/query-builder/vue.js

@@ -0,0 +1,18 @@
+import "../chunk-PKUHTIDK.js";
+import { filter } from "./index";
+const api = ["state", "filter"];
+const renderless = (props, { reactive }, { emit, vm }) => {
+  const api2 = {};
+  const state = reactive({
+    fields: null
+  });
+  Object.assign(api2, {
+    state,
+    filter: filter({ emit, vm })
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/radio/vue.js

@@ -17,12 +17,14 @@ const renderless = (props, { onMounted, onBeforeUnmount, computed, reactive, inj
   parent.tinyForm = parent.tinyForm || inject("form", null);
   const api2 = {};
   const state = reactive({
+    vertical: inject("radioVertical", false),
+    size: props.size || inject("size", null),
     focus: false,
     radioGroup: "",
     isGroup: computed(() => api2.isGroup()),
     radioSize: computed(() => api2.radioSize()),
     isDisabled: computed(() => api2.isDisabled()),
-    isDisplayOnly: computed(() => api2.isDisplayOnly() || (parent.auiForm || {}).displayOnly),
+    isDisplayOnly: computed(() => api2.isDisplayOnly() || (parent.tinyForm || {}).displayOnly),
     tabIndex: computed(() => api2.tabIndex()),
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
     model: computed({

package/radio-button/vue.js

@@ -10,7 +10,7 @@ import {
   handleFocus,
   handleBlur
 } from "./index";
-const api = ["state", "handleChange"];
+const api = ["state", "handleChange", "keydownHandle", "handleFocus", "handleBlur"];
 const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount, inject }, { emit, parent, dispatch, constants, nextTick, refs }) => {
   const api2 = {
     getGroup: getGroup({ constants, parent }),

package/rate/index.js

@@ -74,8 +74,14 @@ const setCurrentValue = ({ constants: { RATENODECLS, DECIMALCLS, ICON_PREFIXCLS
       target = target[key];
     }
     if (target.nodeName === "path") {
-      className = target[key][key].className;
-      target = target[key][key];
+      for (let i = 0; i < 10; i++) {
+        target = target[key];
+        if (target.nodeName === "svg") {
+          className = target[key].className;
+          target = target[key];
+          break;
+        }
+      }
     }
     if (className.includes(RATENODECLS)) {
       target = target.querySelector(ICON_PREFIXCLS);

package/rate/vue.js

@@ -19,8 +19,30 @@ import {
   computedActiveClass
 } from "./index";
 import { on, off } from "../common/deps/dom";
-const api = ["state", "showDecimalIcon", "getIconStyle", "getTextStyle", "selectValue", "handelKey", "setCurrentValue", "resetCurrentValue"];
-const useChangeValue = ({ constants, emit, props, reactive, toRefs, watch, onMounted, onUnmounted, parent }) => {
+const api = [
+  "state",
+  "showDecimalIcon",
+  "getIconStyle",
+  "getTextStyle",
+  "selectValue",
+  "handelKey",
+  "setCurrentValue",
+  "resetCurrentValue"
+];
+const useChangeValue = ({
+  computed,
+  constants,
+  emit,
+  props,
+  reactive,
+  toRefs,
+  watch,
+  onMounted,
+  onUnmounted,
+  parent,
+  inject
+}) => {
+  parent.tinyForm = parent.tinyForm || inject("form", null);
   const state = reactive({
     hoverIndex: -1,
     currentValue: props.modelValue
@@ -60,7 +82,7 @@ const useChangeValue = ({ constants, emit, props, reactive, toRefs, watch, onMou
     state: toRefs(state)
   };
 };
-const renderless = (props, { computed, reactive, toRefs, watch, onMounted, onUnmounted }, { constants, emit, parent }) => {
+const renderless = (props, { computed, reactive, toRefs, watch, onMounted, onUnmounted, inject }, { constants, emit, parent }) => {
   const api2 = {};
   const changeValue = useChangeValue({
     computed,
@@ -72,7 +94,8 @@ const renderless = (props, { computed, reactive, toRefs, watch, onMounted, onUnm
     watch,
     onMounted,
     onUnmounted,
-    parent
+    parent,
+    inject
   });
   const state = reactive(__spreadValues({
     pointerAtLeftHalf: true,

package/recycle-scroller/index.js

@@ -6,7 +6,6 @@ if (typeof window !== "undefined") {
   supportsPassive = false;
   try {
     const opts = Object.defineProperty({}, "passive", {
-      // eslint-disable-next-line getter-return
       get() {
         supportsPassive = true;
       }

package/scrollbar/vue-bar.js

@@ -1,7 +1,23 @@
 import "../chunk-PKUHTIDK.js";
-import { BAR_MAP, renderThumbStyle, clickThumbHandler, clickTrackHandler, startDrag, mouseMoveDocumentHandler, mouseUpDocumentHandler } from "./index";
+import {
+  BAR_MAP,
+  renderThumbStyle,
+  clickThumbHandler,
+  clickTrackHandler,
+  startDrag,
+  mouseMoveDocumentHandler,
+  mouseUpDocumentHandler
+} from "./index";
 import { on, off } from "../common/deps/dom";
-const api = ["state", "startDrag", "renderThumbStyle", "clickTrackHandler", "clickThumbHandler", "mouseUpDocumentHandler", "mouseMoveDocumentHandler"];
+const api = [
+  "state",
+  "startDrag",
+  "renderThumbStyle",
+  "clickTrackHandler",
+  "clickThumbHandler",
+  "mouseUpDocumentHandler",
+  "mouseMoveDocumentHandler"
+];
 const renderless = (props, { computed, onUnmounted, reactive }, { refs, parent }) => {
   const state = reactive({
     bar: computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]),

package/search/index.js

@@ -2,13 +2,17 @@ import "../chunk-PKUHTIDK.js";
 import { on, off } from "../common/deps/dom";
 import PopupManager from "../common/deps/popup-manager";
 import { isObject, typeOf } from "../common/type";
+const emitInput = (emit) => (...args) => {
+  emit("update:modelValue", ...args);
+  emit("input", ...args);
+};
 const handleChange = ({ emit, state }) => (event) => {
   const value = event.target.value;
   emit("change", state.searchValue, value);
 };
-const handleInput = ({ emit, state }) => (event) => {
+const handleInput = ({ api, state }) => (event) => {
   const value = event.target.value;
-  emit("update:modelValue", value, state.searchValue);
+  api.emitInput(value, state.searchValue);
 };
 const showSelector = ({ refs, state }) => () => {
   refs.selector.style.zIndex = PopupManager.nextZIndex();
@@ -19,7 +23,8 @@ const changeKey = ({ emit, state }) => (key) => {
   state.show = false;
   emit("select", key);
 };
-const searchClick = ({ emit, props, state }) => () => {
+const searchClick = ({ emit, props, state }) => (e) => {
+  e.preventDefault();
   if (props.mini && state.collapse) {
     state.collapse = false;
   } else {
@@ -63,12 +68,13 @@ const mounted = (api) => () => {
 const beforeDestroy = (api) => () => {
   off(document.body, "click", api.clickOutside);
 };
-const clear = ({ emit, refs, state }) => () => {
+const clear = ({ api, emit, refs, state }) => (e) => {
+  e.preventDefault();
   state.currentValue = "";
   refs.input.focus();
   state.focus = true;
   emit("change", [], "");
-  emit("update:modelValue", "", state.searchValue);
+  api.emitInput("", state.searchValue);
   emit("clear");
 };
 export {
@@ -76,6 +82,7 @@ export {
   changeKey,
   clear,
   clickOutside,
+  emitInput,
   formatSearchTypes,
   handleChange,
   handleInput,

package/search/vue.js

@@ -14,7 +14,8 @@ import {
   mounted,
   formatSearchTypes,
   setDefaultType,
-  searchEnterKey
+  searchEnterKey,
+  emitInput
 } from "./index";
 const api = [
   "state",
@@ -69,15 +70,16 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, toR
   }));
   const api2 = __spreadValues({
     state,
-    clear: clear({ emit, refs, state }),
     changeKey: changeKey({ state, emit }),
-    handleChange: handleChange({ emit, state, props }),
-    handleInput: handleInput({ emit, state, props }),
+    handleChange: handleChange({ emit, state }),
     showSelector: showSelector({ refs, state }),
     searchClick: searchClick({ emit, props, state }),
-    clickOutside: clickOutside({ parent, props, state })
+    clickOutside: clickOutside({ parent, props, state }),
+    emitInput: emitInput(emit)
   }, formatSearchTypes2.api);
   Object.assign(api2, {
+    clear: clear({ api: api2, emit, refs, state }),
+    handleInput: handleInput({ api: api2, state }),
     searchEnterKey: searchEnterKey({ api: api2, props, refs, nextTick })
   });
   onMounted(mounted(api2));