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

package/picker/vue.js

@@ -24,6 +24,7 @@ import {
   parseString,
   formatToString,
   handleMouseEnter,
+  handleInput,
   handleChange,
   handleStartInput,
   handleEndInput,
@@ -53,8 +54,10 @@ import {
   emitDbTime,
   handleEnterDisplayOnlyContent,
   handleEnterPickerlabel,
-  setInputPaddingLeft
+  setInputPaddingLeft,
+  formatInputValue
 } from "./index";
+import { dateMobileToggle, timeMobileToggle, dateToTimeArray, timeArrayToDate, timeMobileConfirm } from "./mb";
 import { DATEPICKER } from "../common";
 const api = [
   "state",
@@ -66,9 +69,9 @@ const api = [
   "handleStartChange",
   "handleStartInput",
   "handleKeydown",
-  "handleMouseEnter",
   "handleClickIcon",
   "handleMouseEnter",
+  "handleInput",
   "handleChange",
   "handleClose",
   "handlePick",
@@ -76,9 +79,13 @@ const api = [
   "handleSelectChange",
   "popperElm",
   "handleEnterDisplayOnlyContent",
-  "handleEnterPickerlabel"
+  "handleEnterPickerlabel",
+  "timeMobileToggle",
+  "timeMobileConfirm",
+  "emitInput",
+  "dateMobileToggle"
 ];
-const initState = ({ api: api2, reactive, vm, computed, props, utils, parent }) => {
+const initState = ({ api: api2, reactive, vm, computed, props, utils, parent, breakpoint }) => {
   const state = reactive({
     historyValue: [],
     historyInput: [],
@@ -103,6 +110,7 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent })
     haveTrigger: computed(() => api2.computedHaveTrigger()),
     displayValue: computed(() => api2.displayValue()),
     parsedValue: computed(() => api2.parsedValue()),
+    oldValue: props.modelValue,
     pickerSize: computed(() => props.size),
     pickerDisabled: computed(() => props.disabled || state.formDisabled || state.isDisplayOnly),
     firstInputId: computed(() => api2.firstInputId()),
@@ -113,11 +121,38 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent })
     format: computed(() => api2.computedFormat()),
     labelTooltip: "",
     displayOnlyTooltip: "",
-    isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly)
+    isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
+    isMobileScreen: computed(() => breakpoint.current.value === "default"),
+    dateMobileOption: {
+      visible: false,
+      type: props.type,
+      value: props.modelValue
+    },
+    timeMobileOption: {
+      visible: false,
+      type: props.type,
+      value: [0, 0, 0]
+    },
+    isDateMobileComponent: computed(
+      () => [
+        DATEPICKER.DateRange,
+        DATEPICKER.DateTimeRange,
+        DATEPICKER.DateTime,
+        DATEPICKER.DatePicker,
+        DATEPICKER.Date,
+        DATEPICKER.Dates
+      ].includes(props.type)
+    ),
+    isTimeMobileComponent: computed(
+      () => [DATEPICKER.Time, DATEPICKER.TimeRange, DATEPICKER.TimeSelect, DATEPICKER.TimePicker].includes(props.type)
+    ),
+    showSeconds: computed(
+      () => (state.format || props.pickerOptions && props.pickerOptions.format || "ss").includes("ss")
+    )
   });
   return state;
 };
-const initApi = ({ api: api2, props, hooks, state, vnode, others, utils }) => {
+const initApi = ({ api: api2, props, hooks, state, vnode, others, utils, parent }) => {
   const { t, emit, dispatch, nextTick, vm } = vnode;
   const { TimePanel, TimeRangePanel } = others;
   const { destroyPopper, popperElm, updatePopper, doDestroy } = initPopper({ props, hooks, vnode });
@@ -127,16 +162,17 @@ const initApi = ({ api: api2, props, hooks, state, vnode, others, utils }) => {
     destroyPopper,
     emitDbTime: emitDbTime({ emit, state, t }),
     hidePicker: hidePicker({ state, doDestroy }),
-    handleSelectChange: ({ tz, date }) => emit("select-change", { tz, date }),
+    handleSelectChange: ({ tz, date }) => !state.ranged && emit("select-change", { tz, date }),
     getPanel: getPanel(others),
-    handleFocus: handleFocus({ emit, vm, state }),
+    handleFocus: handleFocus({ emit, vm, state, api: api2 }),
     getTimezone: getTimezone({ props, utils }),
     emitChange: emitChange({ api: api2, dispatch, emit, props, state }),
     parsedValue: parsedValue({ api: api2, props, state, t }),
     parseAsFormatAndType: parseAsFormatAndType({ api: api2 }),
-    typeValueResolveMap: typeValueResolveMap({ api: api2, t }),
+    typeValueResolveMap: typeValueResolveMap({ api: api2, props, t }),
     updateOptions: updateOptions({ api: api2, props, state }),
     focus: focus({ api: api2, props, vm }),
+    handleInput: handleInput({ api: api2, state, props }),
     handleChange: handleChange({ api: api2, state }),
     isValidValue: isValidValue({ api: api2, state }),
     emitInput: emitInput({ api: api2, emit, props, state }),
@@ -160,18 +196,25 @@ const initApi = ({ api: api2, props, hooks, state, vnode, others, utils }) => {
     computedTriggerClass: computedTriggerClass({ props, state }),
     computedHaveTrigger: computedHaveTrigger({ props }),
     setInputPaddingLeft: setInputPaddingLeft({ props, state, vm, nextTick }),
+    formatInputValue: formatInputValue({ props, state, api: api2 })
+  });
+  initApi2({ api: api2, props, state, t, parent });
+  initMobileApi({ api: api2, props, state, t, parent });
+};
+const initApi2 = ({ api: api2, props, state, t, parent }) => {
+  Object.assign(api2, {
     t,
     state,
     blur: blur(state),
     getMode: getMode({ state }),
-    getType: getType({ props }),
-    dateParser: dateParser({ t }),
+    getType: getType({ props, parent }),
+    dateParser: dateParser({ t, props }),
     rangeParser: rangeParser(api2),
     rangeFormatter: rangeFormatter(api2),
     dateFormatter: dateFormatter({ t }),
     getValueEmpty: getValueEmpty(props),
-    handleEndInput: handleEndInput(state),
-    handleStartInput: handleStartInput(state),
+    handleEndInput: handleEndInput({ state, props, api: api2 }),
+    handleStartInput: handleStartInput({ state, props, api: api2 }),
     firstInputId: firstInputId({ props, state }),
     secondInputId: secondInputId({ props, state }),
     handleMouseEnter: handleMouseEnter({ props, state }),
@@ -182,6 +225,15 @@ const initApi = ({ api: api2, props, hooks, state, vnode, others, utils }) => {
     handleEnterDisplayOnlyContent: handleEnterDisplayOnlyContent({ state, t })
   });
 };
+const initMobileApi = ({ api: api2, props, state }) => {
+  Object.assign(api2, {
+    dateMobileToggle: dateMobileToggle({ state, props, api: api2 }),
+    timeMobileToggle: timeMobileToggle({ state, props, api: api2 }),
+    timeMobileConfirm: timeMobileConfirm({ state, props, api: api2 }),
+    dateToTimeArray,
+    timeArrayToDate: timeArrayToDate({ state, props, api: api2 })
+  });
+};
 const initWatch = ({ api: api2, state, props, watch, markRaw }) => {
   watch(
     () => state.type,
@@ -206,17 +258,18 @@ const initWatch = ({ api: api2, state, props, watch, markRaw }) => {
 const renderless = (props, hooks, vnode, others) => {
   const api2 = {};
   const { reactive, computed, watch, onBeforeUnmount, inject, markRaw, onMounted } = hooks;
-  const { vm, service, parent } = vnode;
+  const { vm, service, parent, useBreakpoint } = vnode;
   const { utils = {} } = service || {};
-  const state = initState({ api: api2, reactive, vm, computed, props, utils, parent });
+  const breakpoint = useBreakpoint();
+  const state = initState({ api: api2, reactive, vm, computed, props, utils, parent, inject, breakpoint });
   parent.tinyForm = parent.tinyForm || inject("form", null);
-  initApi({ api: api2, props, hooks, state, vnode, others, utils });
+  initApi({ api: api2, props, hooks, state, vnode, others, utils, parent });
   initWatch({ api: api2, state, props, watch, markRaw });
   api2.initGlobalTimezone();
   onMounted(() => {
     api2.setInputPaddingLeft();
   });
-  vm.$on("handle-clear", (event) => {
+  parent.$on("handle-clear", (event) => {
     state.showClose = true;
     api2.handleClickIcon(event);
   });

package/picker-column/index.js

@@ -183,7 +183,7 @@ const deepClone = (obj) => {
   if (Array.isArray(obj)) {
     return obj.map((item) => deepClone(item));
   }
-  if (typeof obj === "object") {
+  if (typeof obj === "object" && obj !== null) {
     return deepAssign({}, obj);
   }
   return obj;

package/pop-upload/index.js

@@ -43,7 +43,6 @@ const watchDisabled = (state) => (value) => state.disabled = value;
 const watchAccept = (state) => (value) => state.accept = value;
 const closeErrorTips = (state) => () => state.errorTips = [];
 const closeSuccessTips = (state) => () => state.successTips = [];
-const watchFilters = (state) => (value) => state.filters = value;
 const watchLimit = (state) => (value) => {
   state.limit = value;
   if (value != void 0 && value > 0) {
@@ -157,7 +156,6 @@ export {
   watchAccept,
   watchAction,
   watchDisabled,
-  watchFilters,
   watchHeaders,
   watchLimit,
   watchMaxUploadFileSize,

package/pop-upload/vue.js

@@ -24,7 +24,6 @@ import {
   closeErrorTips,
   watchUploaFileType,
   watchMaxUploadFileSize,
-  watchFilters,
   watchAccept,
   computedUploadButtonText,
   computedUploadsButtonText,
@@ -41,6 +40,7 @@ import {
   fileUploadChange,
   deleteFile
 } from "./index";
+import { formatFileSize } from "../common/string";
 const api = [
   "state",
   "closeSuccessTips",
@@ -56,6 +56,7 @@ const api = [
   "showDialog",
   "closeDialog",
   "fileUploadChange",
+  "formatFileSize",
   "deleteFile"
 ];
 const initState = ({ reactive, props, computed, api: api2 }) => reactive({
@@ -66,7 +67,6 @@ const initState = ({ reactive, props, computed, api: api2 }) => reactive({
   isShowDialog: false,
   accept: props.accept,
   action: props.action,
-  filters: props.filters,
   headers: props.headers,
   disabled: props.disabled,
   multiple: props.multiple,
@@ -95,6 +95,7 @@ const initState = ({ reactive, props, computed, api: api2 }) => reactive({
 const initApi = ({ api: api2, state, refs, emit, props, constants, t }) => {
   Object.assign(api2, {
     state,
+    formatFileSize,
     abort: abort(refs),
     showDialog: showDialog(state),
     watchLimit: watchLimit(state),
@@ -103,7 +104,6 @@ const initApi = ({ api: api2, state, refs, emit, props, constants, t }) => {
     watchAccept: watchAccept(state),
     progressEvent: progressEvent(emit),
     watchHeaders: watchHeaders(state),
-    watchFilters: watchFilters(state),
     watchMultiple: watchMultiple(state),
     watchDisabled: watchDisabled(state),
     closeErrorTips: closeErrorTips(state),
@@ -146,7 +146,6 @@ const initWatch = ({ watch, props, api: api2 }) => {
   watch(() => props.multiple, api2.watchMultiple, { immediate: true });
   watch(() => props.action, api2.watchAction, { immediate: true });
   watch(() => props.headers, api2.watchHeaders, { immediate: true });
-  watch(() => props.filters, api2.watchFilters, { immediate: true });
   watch(() => props.limit, api2.watchLimit, { immediate: true });
 };
 const renderless = (props, { computed, reactive, watch }, { t, constants, emit, refs }) => {

package/popconfirm/index.js

@@ -5,26 +5,23 @@ const hide = ({ state, emit }) => () => {
     state.isLock = false;
   }, 300);
   state.showPopover = false;
-  emit("hide", state.showPopover);
 };
 const show = ({ state, props, emit }) => (trigger) => {
   if ((trigger ? props.trigger !== trigger : !props.reference) || state.isLock || state.showPopover) {
     return;
   }
   state.showPopover = true;
-  emit("show", state.showPopover);
 };
-const confirm = ({ state, emit }) => () => {
+const confirm = ({ state, api }) => () => {
   state.showPopover = false;
-  emit("confirm", state.showPopover);
-  emit("hide", state.showPopover);
+  api.handleEmit("confirm");
 };
 const handleEmit = ({ state, emit, vm }) => (type) => {
   let { events = {} } = vm;
   if (events[type]) {
     events[type].call(vm, { $modal: vm, type });
   } else {
-    emit(type, state.showPopover);
+    emit(type, state);
   }
 };
 export {

package/popconfirm/vue.js

@@ -16,7 +16,7 @@ const renderless = (props, { computed, reactive }, { emit, constants, designConf
     state,
     show: show({ state, emit, props }),
     hide: hide({ state, emit }),
-    confirm: confirm({ state, emit }),
+    confirm: confirm({ state, api: api2 }),
     handleEmit: handleEmit({ state, emit, vm })
   });
   return api2;

package/popeditor/index.js

@@ -52,7 +52,7 @@ const getDisplay = ({ constants, props, state }) => () => {
   } else if (props.multi) {
     const displayTxt = [];
     state.selectedValues.forEach((val) => {
-      const item = find(state.selectedDatas, (data) => val == data[props.valueField]);
+      const item = find(state.selectedDatas, (data) => String(val) === String(data[props.valueField]));
       if (item) {
         displayTxt.push(item[props.textField]);
       } else {
@@ -93,6 +93,7 @@ const handleClear = ({ constants, emit, props, state }) => () => {
   state.treeSelectList = [];
   state.selectedDatas = [];
   state.selectedValues = [];
+  state.cacheStore.treeSelectList = [];
   if (!isEqual(state.commitValue, props.modelValue)) {
     emit("update:modelValue", state.commitValue);
     emit(
@@ -122,6 +123,9 @@ const handleConfirm = ({ api, constants, emit, props, state }) => (skipBeforeClo
   }
   if (props.popseletor === constants.TYPE_TREE) {
     const commitValue = state.treeSelectList.map((item) => item.id).join(props.valueSplit);
+    state.cacheStore = {
+      treeSelectList: state.treeSelectList.slice(0)
+    };
     if (!isEqual(commitValue, props.modelValue)) {
       emit("update:modelValue", commitValue);
       emit("change", commitValue, state.treeSelectList);
@@ -143,8 +147,8 @@ const handleOpen = ({ api, constants, props, state }) => (event) => {
     api.openDialog({ api, props, state });
   }
 };
-const handleSearch = ({ api, refs, constants }) => () => {
-  const sourcetable = refs[constants.GRID_REF.source];
+const handleSearch = ({ api, vm, constants }) => () => {
+  const sourcetable = vm.$refs[constants.GRID_REF.source];
   sourcetable && sourcetable.clearRadioRow();
   api.query();
 };
@@ -187,7 +191,7 @@ const renderTextHandler = ({ state, props, datas, dataset, value }) => {
     arrValues = value && ~["string", "number"].indexOf(typeof value) ? value.toString().split(props.valueSplit) : [];
   }
   arrValues.forEach((val) => {
-    const item = find(dataset, (data) => val == data[props.valueField]) || find(datas, (data) => val == data[props.valueField]);
+    const item = find(dataset, (data) => String(val) === String(data[props.valueField])) || find(datas, (data) => String(val) === String(data[props.valueField]));
     item && rows.push(item);
   });
   if (props.multi) {
@@ -212,7 +216,7 @@ const getTreeSelectList = ({ value, state, props }) => {
     eachTree(
       state.treeOp.data,
       (node) => {
-        if (values.some((val) => val == node[id])) {
+        if (values.includes(String(node[id]))) {
           selectdTreeNodeList.push({ id: node[id], value: node[label] });
         }
       },
@@ -235,7 +239,7 @@ const initDisplay = ({ api, constants, props, state, nextTick }) => (value) => {
       });
     });
   } else {
-    const item = find(dataset, (data) => value == data[props.valueField]);
+    const item = find(dataset, (data) => String(value) === String(data[props.valueField]));
     state.selectedDatas = item || value;
     if (props.popseletor === constants.TYPE_GRID) {
       state.commitValue = state.selectedDatas ? state.selectedDatas[props.valueField] : "";
@@ -337,17 +341,17 @@ const selectedGridSelectChange = ({ constants, props, vm, state }) => ({ checked
     const len = state.selectedValues.length;
     event && (event.target.checked = !checked);
     for (let i = 0; i < len; i++) {
-      if (state.selectedValues[i] == row[props.valueField]) {
+      if (String(state.selectedValues[i]) === String(row[props.valueField])) {
         state.selectedValues.splice(i, 1);
         state.selectedDatas.splice(i, 1);
         const sourcetable = refs[constants.GRID_REF.source];
         const historytable = refs[constants.GRID_REF.history];
         sourcetable && sourcetable.setSelection(
-          sourcetable.data.filter((lrow) => lrow[props.valueField] == row[props.valueField]),
+          sourcetable.data.filter((lrow) => String(lrow[props.valueField]) === String(row[props.valueField])),
           false
         );
         historytable && historytable.setSelection(
-          historytable.data.filter((lrow) => lrow[props.valueField] == row[props.valueField]),
+          historytable.data.filter((lrow) => String(lrow[props.valueField]) === String(row[props.valueField])),
           false
         );
         break;
@@ -359,7 +363,7 @@ const selectedGridSelectChange = ({ constants, props, vm, state }) => ({ checked
 const sourceGridSelectAll = ({ props, state, api }) => ({ selection, checked }) => {
   if (checked) {
     selection.forEach((item) => {
-      if (!find(state.selectedValues, (val) => val == item[props.valueField])) {
+      if (!find(state.selectedValues, (val) => String(val) === String(item[props.valueField]))) {
         state.selectedValues.push(item[props.valueField]);
         state.selectedDatas.push(item);
       }
@@ -368,7 +372,7 @@ const sourceGridSelectAll = ({ props, state, api }) => ({ selection, checked })
     const len = state.sourceGridDataset.length;
     for (let i = 0; i < len; i++) {
       const sourceGridItem = state.sourceGridDataset[i][props.valueField];
-      const selectedItem = find(state.selectedValues, (val) => val == sourceGridItem);
+      const selectedItem = find(state.selectedValues, (val) => String(val) === String(sourceGridItem));
       const index = state.selectedValues.indexOf(selectedItem);
       if (index !== -1) {
         state.selectedValues.splice(index, 1);
@@ -392,7 +396,7 @@ const sourceGridSelectChange = ({ props, state, api }) => ({ checked, row, confi
     state.selectedDatas.push(row);
   } else {
     state.selectedValues.forEach((item, index) => {
-      if (row[props.valueField] == item) {
+      if (String(row[props.valueField]) === String(item)) {
         state.selectedValues.splice(index, 1);
         state.selectedDatas.splice(index, 1);
       }
@@ -431,7 +435,7 @@ const computedTreeOp = ({ api, constants }) => (props, state) => {
   treeOp.checkStrictly = treeOp.checkStrictly !== false;
   treeOp.expandOnClickNode = false;
   treeOp.nodeKey = treeOp.nodeKey || constants.ID;
-  treeOp.defaultCheckedKeys = state.treeSelectList.map((item) => item.id);
+  treeOp.defaultCheckedKeys = state.cacheStore.treeSelectList && state.cacheStore.treeSelectList.map((item) => item.id);
   treeOp.props = __spreadValues({
     label: props.textField || constants.LABEL,
     id: props.valueField || constants.ID,
@@ -447,15 +451,35 @@ const treeCheckChange = ({ constants, state, props }) => (data, checked) => {
     state.treeSelectList = treeSelectList;
   } else {
     if (checked) {
-      state.treeSelectList.push({
-        id: data[state.treeOp.props.id],
-        value: data[state.treeOp.props.label]
-      });
+      addTreeSelectNode(data, state);
     } else {
-      state.treeSelectList = state.treeSelectList.filter((item) => item.id !== data[state.treeOp.props.id]);
+      state.removedNodeId = [];
+      getRemovedNodeId(data, state);
+      state.treeSelectList = state.treeSelectList.filter((item) => !state.removedNodeId.includes(item.id));
     }
   }
 };
+const addTreeSelectNode = (node, state) => {
+  if (!state.treeSelectList.some((item) => item.id === node[state.treeOp.props.id])) {
+    state.treeSelectList.push({
+      id: node[state.treeOp.props.id],
+      value: node[state.treeOp.props.label]
+    });
+  }
+  if (!node.expanded && Array.isArray(node.children)) {
+    node.children.forEach((child) => {
+      addTreeSelectNode(child, state);
+    });
+  }
+};
+const getRemovedNodeId = (node, state) => {
+  state.removedNodeId.push(node[state.treeOp.props.id]);
+  if (!node.expanded && Array.isArray(node.children)) {
+    node.children.forEach((child) => {
+      getRemovedNodeId(child, state);
+    });
+  }
+};
 const handleNumberPageChange = ({ api, emit, state }) => (size) => {
   state.pagerConfig.currentPage = 1;
   state.pagerConfig.pageSize = size;
@@ -500,9 +524,9 @@ const getSuggestParam = ({ state, props, api }) => (input) => {
   }
   return input;
 };
-const updateSuggestWidth = ({ refs }) => () => {
-  let $input = refs.reference.getInput();
-  refs.popper.style.width = $input.clientWidth + "px";
+const updateSuggestWidth = ({ vm }) => () => {
+  const $input = vm.$refs.reference.getInput();
+  vm.$refs.popper.style.width = $input.clientWidth + "px";
 };
 const doSuggesst = ({ state, props, popper, api, nextTick }) => (event) => {
   if (!props.suggest) {
@@ -546,8 +570,9 @@ const doSuggesst = ({ state, props, popper, api, nextTick }) => (event) => {
     }
   }
 };
-const closeSuggestPanel = ({ state, api, refs }) => (event = false) => {
-  const { reference, popper } = refs;
+const closeSuggestPanel = ({ state, api, vm }) => (event = false) => {
+  const reference = vm.$refs.reference;
+  const popper = vm.$refs.popper;
   let keep = !event;
   if (event.target) {
     keep = reference.$el.contains(event.target) || popper.contains(event.target);
@@ -565,6 +590,11 @@ const suggestRadioChange = ({ state, api }) => ({ row }) => {
   state.showSuggestPanel = false;
   api.handleConfirm();
 };
+const radioChangeFn = ({ props, api }) => () => {
+  if (props.radioChangeClose) {
+    api.handleConfirm();
+  }
+};
 const handlePager = ({ api, props, state }) => () => {
   if (!props.showPager) {
     state.sourceGridDataset = state.fullGridData;
@@ -599,7 +629,7 @@ const mounted = ({ api, props }) => () => {
 const doDestroy = ({ popper }) => () => {
   popper.doDestroy();
 };
-const selectedBoxInit = (refs) => () => refs.selectedBox && refs.selectedBox.init();
+const selectedBoxInit = (vm) => () => vm.$refs.selectedBox && vm.$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 } }) => {
@@ -643,6 +673,7 @@ export {
   mounted,
   openDialog,
   query,
+  radioChangeFn,
   selectedBoxClear,
   selectedBoxDelete,
   selectedBoxDrag,

package/popeditor/vue.js

@@ -45,7 +45,8 @@ import {
   selectedBoxInit,
   selectedBoxClear,
   selectedBoxDelete,
-  selectedBoxDrag
+  selectedBoxDrag,
+  radioChangeFn
 } from "./index";
 const api = [
   "state",
@@ -74,7 +75,8 @@ const api = [
   "doDestroy",
   "selectedBoxClear",
   "selectedBoxDelete",
-  "selectedBoxDrag"
+  "selectedBoxDrag",
+  "radioChangeFn"
 ];
 const initState = ({ reactive, computed, props, api: api2, constants, t, parent, vm }) => {
   const state = reactive({
@@ -89,6 +91,7 @@ const initState = ({ reactive, computed, props, api: api2, constants, t, parent,
     commitValue: Array.isArray(props.modelValue) ? props.modelValue.slice(0) : props.modelValue,
     currentPage: 1,
     baseColumns: computed(() => getColumns({ constants, props })),
+    removedNodeId: [],
     selectedDatas: [],
     selectedValues: [],
     sourceGridDataset: [],
@@ -118,7 +121,7 @@ const initState = ({ reactive, computed, props, api: api2, constants, t, parent,
   });
   return state;
 };
-const initApi = ({ api: api2, props, state, parent, refs, emit, popper, constants, vm, nextTick }) => {
+const initApi = ({ api: api2, props, state, parent, vm, emit, popper, constants, nextTick }) => {
   Object.assign(api2, {
     state,
     popper,
@@ -139,7 +142,7 @@ const initApi = ({ api: api2, props, state, parent, refs, emit, popper, constant
     handleReset: handleReset({ api: api2, state, props }),
     openDialog: openDialog({ api: api2, emit, props, state }),
     initDisplay: initDisplay({ api: api2, constants, props, state, nextTick }),
-    handleSearch: handleSearch({ api: api2, props, state, refs, constants }),
+    handleSearch: handleSearch({ api: api2, props, state, vm, constants }),
     computedTreeOp: computedTreeOp({ api: api2, constants }),
     handleSizeChange: handleSizeChange({ api: api2, emit, state }),
     handleOpen: handleOpen({ api: api2, constants, props, state }),
@@ -148,10 +151,10 @@ const initApi = ({ api: api2, props, state, parent, refs, emit, popper, constant
     handleNumberPageChange: handleNumberPageChange({ api: api2, emit, state }),
     doSearch: doSearch({ api: api2, state, props }),
     doClear: doClear({ api: api2, state, props }),
-    updateSuggestWidth: updateSuggestWidth({ refs }),
+    updateSuggestWidth: updateSuggestWidth({ vm }),
     doSuggesstNow: doSuggesst({ api: api2, state, props, popper, nextTick }),
     doSuggesst: debounce(1e3, doSuggesst({ api: api2, state, props, popper, nextTick })),
-    closeSuggestPanel: closeSuggestPanel({ api: api2, state, refs }),
+    closeSuggestPanel: closeSuggestPanel({ api: api2, state, vm }),
     sourceGridSelectChange: sourceGridSelectChange({ props, state, api: api2 }),
     sourceGridSelectAll: sourceGridSelectAll({ props, state, api: api2 }),
     getSuggestParam: getSuggestParam({ props, state, api: api2 }),
@@ -160,10 +163,11 @@ const initApi = ({ api: api2, props, state, parent, refs, emit, popper, constant
     initSearchOption: initSearchOption({ api: api2, state }),
     mounted: mounted({ api: api2, props }),
     doDestroy: doDestroy({ popper }),
-    selectedBoxInit: selectedBoxInit(refs),
+    selectedBoxInit: selectedBoxInit(vm),
     selectedBoxClear: selectedBoxClear(api2),
     selectedBoxDelete: selectedBoxDelete(api2),
-    selectedBoxDrag: selectedBoxDrag({ props, state })
+    selectedBoxDrag: selectedBoxDrag({ props, state }),
+    radioChangeFn: radioChangeFn({ props, api: api2 })
   });
   state.search = api2.createSearchForm(false);
 };
@@ -187,12 +191,12 @@ const initWatch = ({ watch, props, api: api2, state, popper }) => {
   );
   watch(() => props.conditions, api2.initSearchOption, { deep: true, immediate: true });
 };
-const renderless = (props, { computed, onMounted, reactive, watch, inject, toRefs, onBeforeUnmount, onDeactivated }, { t, refs, parent, emit, constants, vm, nextTick, slots }) => {
+const renderless = (props, { computed, onMounted, reactive, watch, inject, toRefs, onBeforeUnmount, onDeactivated }, { t, parent, emit, constants, vm, nextTick, slots }) => {
   const api2 = {};
   const state = initState({ reactive, computed, props, api: api2, constants, t, parent, vm });
   const popper = userPopper({
     emit,
-    refs,
+    vm,
     watch,
     onBeforeUnmount,
     props,
@@ -203,7 +207,7 @@ const renderless = (props, { computed, onMounted, reactive, watch, inject, toRef
     onDeactivated
   });
   parent.tinyForm = parent.tinyForm || inject("form", null);
-  initApi({ api: api2, props, state, parent, refs, emit, popper, constants, vm, nextTick });
+  initApi({ api: api2, props, state, parent, vm, emit, popper, constants, nextTick });
   initWatch({ watch, props, api: api2, state, popper });
   onMounted(api2.mounted);
   onBeforeUnmount(api2.closeSuggestPanel);

package/popover/index.js

@@ -118,10 +118,10 @@ const handleMouseLeave = ({ props, state }) => () => {
     state.showPopper = false;
   }
 };
-const handleDocumentClick = ({ refs, state }) => (event) => {
+const handleDocumentClick = ({ vm, state }) => (event) => {
   const reference = state.referenceElm;
   const popperElm = state.popperElm;
-  const $el = refs.root;
+  const $el = vm.$refs.root;
   let target = event.target;
   if ((target == null ? void 0 : target.shadowRoot) && popperElm) {
     target = state.webCompEventTarget;
@@ -165,8 +165,8 @@ const destroyed = ({ state, api }) => () => {
   off(referenceElm, "keydown", api.handleKeydown);
 };
 const computedTooltipId = (constants) => () => `${constants.IDPREFIX}-${guid("", 4)}`;
-const wrapMounted = ({ api, props, refs, state }) => () => {
-  const { reference, popper, wrapper } = refs;
+const wrapMounted = ({ api, props, vm, state }) => () => {
+  const { reference, popper, wrapper } = vm.$refs;
   const referenceElm = state.referenceElm = props.reference || reference;
   state.popperElm = state.popperElm || popper;
   if (!referenceElm && wrapper.children) {

package/popover/vue.js

@@ -52,7 +52,7 @@ const initState = ({
   });
   return state;
 };
-const initApi = ({ api: api2, props, state, refs, emit, doDestroy, constants, nextTick, vm, mode }) => {
+const initApi = ({ api: api2, props, state, emit, doDestroy, constants, nextTick, vm, mode }) => {
   Object.assign(api2, {
     state,
     mounted: mounted({ api: api2, state, constants, props, nextTick, mode }),
@@ -71,8 +71,8 @@ const initApi = ({ api: api2, props, state, refs, emit, doDestroy, constants, ne
     handleMouseLeave: handleMouseLeave({ props, state }),
     handleAfterLeave: handleAfterLeave(emit),
     handleMouseEnter: handleMouseEnter({ props, state }),
-    handleDocumentClick: handleDocumentClick({ refs, state }),
-    wrapMounted: wrapMounted({ api: api2, props, refs, state }),
+    handleDocumentClick: handleDocumentClick({ vm, state }),
+    wrapMounted: wrapMounted({ api: api2, props, vm, state }),
     handleItemClick: handleItemClick({ emit, state }),
     observeCallback: observeCallback({ vm, state })
   });
@@ -130,13 +130,13 @@ const renderless = (props, {
   onUnmounted,
   onActivated,
   onDeactivated
-}, { $prefix, emit, vm, refs, slots, nextTick, mode }) => {
+}, { $prefix, emit, vm, slots, nextTick, mode }) => {
   const api2 = {};
   const constants = { IDPREFIX: `${$prefix.toLowerCase()}-popover` };
-  const options = { emit, onBeforeUnmount, nextTick, reactive, props, watch, onDeactivated, refs, slots, toRefs };
+  const options = { emit, onBeforeUnmount, nextTick, reactive, props, watch, onDeactivated, vm, slots, toRefs };
   const { showPopper, popperElm, referenceElm, doDestroy, updatePopper } = userPopper(options);
   const state = initState({ reactive, computed, api: api2, popperElm, showPopper, referenceElm });
-  initApi({ api: api2, constants, props, state, refs, emit, doDestroy, nextTick, vm, mode });
+  initApi({ api: api2, constants, props, state, emit, doDestroy, nextTick, vm, mode });
   onDeactivated(() => {
     api2.destroyed();
     api2.cleanup();