@opentiny/vue-renderless 3.22.0 → 3.24.0

package/autocomplete/index.js

@@ -61,6 +61,9 @@ const handleFocus = ({
   }
 };
 const handleBlur = ({ emit, state, dispatch, props }) => () => {
+  if (!state.activated) {
+    return;
+  }
   state.suggestionDisabled = true;
   emit("blur");
   if (state.validateEvent) {

package/base-select/index.js

@@ -222,7 +222,6 @@ const getResultOfSetSelected = ({ state, api, props }) => {
   return result;
 };
 const setSelected = ({ api, nextTick, props, vm, state }) => () => {
-  var _a, _b, _c, _d;
   if (!props.multiple) {
     const option = getOptionOfSetSelected({ api, props });
     state.selected = option;
@@ -231,7 +230,7 @@ const setSelected = ({ api, nextTick, props, vm, state }) => () => {
   } else {
     const result = getResultOfSetSelected({ state, props, api });
     state.selectCls = result.length ? result.length === state.options.length ? "checked-sur" : "halfselect" : "check";
-    if (!((_b = (_a = state.selected) == null ? void 0 : _a[0]) == null ? void 0 : _b.isTree) && !((_d = (_c = state.selected) == null ? void 0 : _c[0]) == null ? void 0 : _d.isGrid)) {
+    if (!vm.$slots.panel) {
       state.selected = result;
     }
     state.selected.length && (state.selectedLabel = "");

package/calendar-view/index.js

@@ -233,7 +233,16 @@ function splitEvent(props, event) {
   }
   return result;
 }
-const selectDay = ({ state, emit }) => (day, i) => {
+const computedSelectDay = ({ state }) => (day) => {
+  if (!day || !day.value || day.disabled)
+    return false;
+  if (state.multiSelect) {
+    return state.selectedDates.includes(day.value);
+  } else {
+    return state.selectedDate === day.value;
+  }
+};
+const selectDay = ({ props, state, emit, api }) => (day, i) => {
   if (!day || !day.value || day.disabled)
     return;
   state.activedWeekIndex = i;
@@ -247,9 +256,10 @@ const selectDay = ({ state, emit }) => (day, i) => {
     } else {
       state.selectedDates.push(date);
     }
+    const dateEvent = dealEvents(props, api, state.selectedDates);
     emit("update:modelValue", state.selectedDates);
     emit("selected-date-change", state.selectedDates);
-    emit("date-click", date);
+    emit("date-click", state.selectedDates, dateEvent);
   } else {
     if (day.isNext) {
       const { year, month } = nextMonth(state.activeYear, state.activeMonth);
@@ -263,10 +273,21 @@ const selectDay = ({ state, emit }) => (day, i) => {
     }
     state.selectedDate = day.value.toString().length > 2 ? day.value : `${state.activeYear}-${state.activeMonth}-${day.value}`;
     state.showSelectedDateEvents = true;
+    const dateEvent = dealEvents(props, api, [state.selectedDate]);
     emit("update:modelValue", state.selectedDate);
-    emit("date-click", state.selectedDate);
+    emit("date-click", state.selectedDate, dateEvent[0]);
   }
 };
+const dealEvents = (props, api, date) => {
+  return date.map((item) => {
+    let event = api.getEventByTime(item, props._constants.DAY_START_TIME, props._constants.DAY_END_TIME);
+    event.forEach((e) => {
+      delete e.dayArr;
+      delete e.dayNumber;
+    });
+    return event;
+  });
+};
 const getEventByMonth = ({ state }) => (year, month) => {
   const result = [];
   const days = getDays(Number(year), Number(month));
@@ -608,6 +629,7 @@ function resetTouchStatus(state) {
 export {
   computeCascaderOptions,
   computedCalendar,
+  computedSelectDay,
   currentDateChange,
   dateIsToday,
   genDayTimes,

package/calendar-view/vue.js

@@ -2,6 +2,7 @@ import "../chunk-G2ADBYYC.js";
 import {
   computedCalendar,
   handleEvents,
+  computedSelectDay,
   selectDay,
   getEventByTime,
   isToday,
@@ -47,6 +48,7 @@ const api = [
   "isToday",
   "dateIsToday",
   "getEventByTime",
+  "computedSelectDay",
   "selectDay",
   "toToday",
   "getPrevWeek",
@@ -254,7 +256,8 @@ const initApi = ({ vm, api: api2, state, t, props, emit, nextTick }) => {
     computeCascaderOptions: computeCascaderOptions(t),
     isToday: isToday(state),
     dateIsToday: dateIsToday(),
-    selectDay: selectDay({ state, emit }),
+    selectDay: selectDay({ props, state, emit, api: api2 }),
+    computedSelectDay: computedSelectDay({ state }),
     getEventByTime: getEventByTime({ props, state }),
     toToday: toToday({ state, api: api2, nextTick }),
     getAllWednesdaysInYear: getAllWednesdaysInYear({ state }),

package/cascader-node/vue.js

@@ -8,7 +8,7 @@ import {
   handleNodeClick
 } from "./index";
 const api = ["state", "handleMultiCheckChange", "handleCheckChange", "handleExpand", "handleNodeClick"];
-const renderless = (props, { computed, reactive, inject }, { dispatch }) => {
+const renderless = (props, { computed, reactive, inject, watch }, { dispatch }) => {
   const parent = inject("panel");
   const api2 = {};
   const state = reactive({
@@ -24,6 +24,16 @@ const renderless = (props, { computed, reactive, inject }, { dispatch }) => {
       return parent.state.renderLabelFn ? parent.state.renderLabelFn({ node: props.node, data: props.node.data }) : props.node.label;
     })
   });
+  if (parent.state.config.expandTrigger !== "click") {
+    watch(
+      () => state.checkedValue,
+      (checkedValue) => {
+        if (checkedValue.includes(props.node.value)) {
+          api2.handleExpand();
+        }
+      }
+    );
+  }
   Object.assign(api2, {
     state,
     isInPath: isInPath(props),

package/date-panel/index.js

@@ -453,7 +453,13 @@ const getRenderTz = ({ state }) => (value) => {
   if (!state.showTimezone || !value) {
     return;
   }
-  state.renderTzdata = value[state.lang];
+  const lang = state.lang.replace(/[-_]/g, "").toLowerCase();
+  Object.keys(value).forEach((key) => {
+    if (key.replace(/[-_]/g, "").toLowerCase() === lang) {
+      value[lang] = value[key];
+    }
+  });
+  state.renderTzdata = value[lang];
   if (state.renderTzdata) {
     const { isServiceTimezone, to } = state.timezone;
     const selectedTz = state.selectedTz || {};

package/date-range/index.js

@@ -396,6 +396,9 @@ const handleConfirm = ({ api, emit, state, props, t }) => (visible = false) => {
     emit("update:modelValue", [start, end]);
     emit("select-change", [start, end]);
   }
+  if (state.minDate && !state.maxDate) {
+    emit("pick", [state.minDate, state.maxDate], visible, true);
+  }
 };
 const isValidValue = ({ state }) => (value) => Array.isArray(value) && value && value[0] && value[1] && toDate1(value[0]) && toDate1(value[1]) && value[0].getTime() <= value[1].getTime() && (typeof state.disabledDate === "function" ? !state.disabledDate(value[0]) && !state.disabledDate(value[1]) : true);
 const resetView = ({ state }) => () => {

package/dialog-select/index.js

@@ -44,7 +44,8 @@ const queryGridData = ({ api, props, state }) => () => {
     }
   }
 };
-const multiGridSelectAll = ({ api, props, state }) => ({ selection, checked }) => {
+const multiGridSelectAll = ({ api, props, state }) => ({ selection, checked, $table }, event) => {
+  var _a, _b;
   if (checked) {
     arrayEach(selection, (item) => {
       const index = findIndexOf(state.selectedValues, (val) => val === item[props.valueField]);
@@ -67,9 +68,12 @@ const multiGridSelectAll = ({ api, props, state }) => ({ selection, checked }) =
     state.selectedChanged = true;
   }
   api.selectedBoxInit();
+  if ((_b = (_a = props.gridOp) == null ? void 0 : _a.events) == null ? void 0 : _b.selectAll) {
+    props.gridOp.events.selectAll({ selection, checked, $table }, event);
+  }
 };
-const multiGridSelectChange = ({ api, props, state, vm }) => ({ row, checked }) => {
-  var _a, _b, _c, _d, _e;
+const multiGridSelectChange = ({ api, props, state, vm }) => ({ row, checked, $table }, event) => {
+  var _a, _b, _c, _d, _e, _f, _g;
   const property = props.valueField;
   const grid = (_a = vm.$refs) == null ? void 0 : _a.multiGrid;
   const selectedRows = grid.getSelectRecords();
@@ -103,6 +107,9 @@ const multiGridSelectChange = ({ api, props, state, vm }) => ({ row, checked })
     }
   }
   api.selectedBoxInit();
+  if ((_g = (_f = props.gridOp) == null ? void 0 : _f.events) == null ? void 0 : _g.selectChange) {
+    props.gridOp.events.selectChange({ row, checked, $table }, event);
+  }
 };
 const selectedBoxInit = ({ props, vm, nextTick }) => () => {
   const { multi, showSelectedBox } = props;
@@ -112,7 +119,7 @@ const selectedBoxInit = ({ props, vm, nextTick }) => () => {
     });
   }
 };
-const selectedBoxClear = ({ props, state, vm }) => () => {
+const selectedBoxClear = ({ props, state, vm, emit }) => () => {
   const { multi, popseletor } = props;
   if (multi && popseletor === "grid") {
     vm.$refs.multiGrid.clearSelection();
@@ -123,6 +130,7 @@ const selectedBoxClear = ({ props, state, vm }) => () => {
   state.selectedValues = [];
   state.selectedDatas = [];
   state.selectedChanged = true;
+  emit("clear");
 };
 const setTreeSelection = ({ api, state, vm, props }) => (keys, value) => {
   const tree = vm.$refs.multiTree;
@@ -198,7 +206,7 @@ const setSelection = ({ props, api }) => (data, value) => {
   }
 };
 const getSelection = ({ state }) => () => state.selectedDatas;
-const selectedBoxDelete = ({ props, state, vm }) => ({ option: row }) => {
+const selectedBoxDelete = ({ props, state, vm, emit }) => ({ option: row }) => {
   const { multi, popseletor } = props;
   if (multi && popseletor === "grid") {
     vm.$refs.multiGrid.setSelection(
@@ -215,6 +223,7 @@ const selectedBoxDelete = ({ props, state, vm }) => ({ option: row }) => {
     state.selectedDatas = [...state.selectedDatas.slice(0, index), ...state.selectedDatas.slice(index + 1)];
     state.selectedChanged = true;
   }
+  emit("delete", row);
 };
 const selectedBoxDrag = ({ props, state }) => ({ state: { select } }) => {
   if (select && select.length) {
@@ -420,10 +429,14 @@ const multiTreeRadio = ({ api, props }) => () => {
     api.multiTreeCheck();
   }
 };
-const multiGridRadioChange = ({ props, state }) => ({ row }) => {
+const multiGridRadioChange = ({ props, state }) => ({ row, $table }, event) => {
+  var _a, _b;
   state.selectedValues = [row[props.valueField]];
   state.selectedDatas = [row];
   state.selectedChanged = true;
+  if ((_b = (_a = props.gridOp) == null ? void 0 : _a.events) == null ? void 0 : _b.radioChange) {
+    props.gridOp.events.radioChange({ row, $table }, event);
+  }
 };
 const watchMulti = ({ api, state, props }) => () => {
   state.splitValue = props.multi ? 0.7 : 1;

package/dialog-select/vue.js

@@ -92,8 +92,8 @@ const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit,
     state,
     computedGridColumns: computedGridColumns(props),
     selectedBoxInit: selectedBoxInit({ props, vm, nextTick }),
-    selectedBoxClear: selectedBoxClear({ props, state, vm }),
-    selectedBoxDelete: selectedBoxDelete({ props, state, vm }),
+    selectedBoxClear: selectedBoxClear({ props, state, vm, emit }),
+    selectedBoxDelete: selectedBoxDelete({ props, state, vm, emit }),
     selectedBoxDrag: selectedBoxDrag({ props, state }),
     doMultiTreeFilter: doMultiTreeFilter({ props, state, nextTick, vm }),
     multiTreeFilterNode: multiTreeFilterNode(props),

package/file-upload/index.js

@@ -133,6 +133,14 @@ const onBeforeIsPromise = ({
     }
   );
 };
+const isAcceptType = (acceptArray, file, constants, fileType) => {
+  return acceptArray.some((type) => {
+    if (type.toLowerCase() === constants.IMAGE_TYPE) {
+      return constants.FILE_TYPE.PICTURE.split("/").includes(fileType);
+    }
+    return new RegExp(`(${type.trim()})$`, "i").test(file.name);
+  });
+};
 const getFileType = ({ file }) => {
   const { name, url } = file;
   let fileType = "";
@@ -164,7 +172,7 @@ const beforeUpload = ({
   constants,
   t,
   state
-}) => (file, autoRemove, doUpload) => {
+}) => (file, autoRemove, doUpload, isMergeUpload = false) => {
   if (state.isEdm && file.name.length > 255) {
     remove({ api, file, autoRemove });
     return Modal.message({
@@ -176,15 +184,28 @@ const beforeUpload = ({
     let isValid = true;
     const accept = state.isEdm ? state.accept : props.accept;
     const types = constants.FILE_TYPE[state.triggerClickType.toUpperCase()];
-    const fileType = getFileType({ file });
-    if (accept) {
-      const isExist = accept.split(",").some((type) => {
-        if (type.toLowerCase() === constants.IMAGE_TYPE) {
-          return constants.FILE_TYPE.PICTURE.split("/").includes(fileType);
+    const acceptArray = accept ? accept.split(",") : [];
+    let fileType = "";
+    if (isMergeUpload) {
+      const fileRow = [];
+      fileType = file.raw.flatMap((f) => {
+        const type = getFileType({ file: f });
+        if (accept) {
+          const isExist = isAcceptType(acceptArray, f, constants, type);
+          isExist ? fileRow.push(f) : remove({ api, file: f, autoRemove });
         }
-        return new RegExp(`(${type.trim()})$`, "i").test(file.name);
+        return type;
       });
-      !isExist && (isValid = false);
+      if (!fileRow.length) {
+        isValid = false;
+      }
+      file.raw = fileRow;
+    } else {
+      fileType = getFileType({ file });
+      if (accept) {
+        const isExist = isAcceptType(acceptArray, file, constants, fileType);
+        !isExist && (isValid = false);
+      }
     }
     if (state.triggerClickType && types) {
       const isExist = types.split("/").includes(fileType);
@@ -465,7 +486,7 @@ const handleStart = ({
   if (!state.isEdm && props.autoUpload) {
     if (props.multiple && props.mergeService) {
       const handler = (file) => vm.$refs[constants.UPLOAD_INNER].$refs[constants.UPLOAD_INNER_TEMPLATE].upload(file.raw);
-      rawFiles.length && api.beforeUpload({ raw: rawFiles }, true, handler);
+      rawFiles.length && api.beforeUpload({ raw: rawFiles }, true, handler, true);
     } else {
       rawFiles.forEach((rawFile) => {
         const file = api.getFile(rawFile);

package/grid/plugins/export.js

@@ -39,6 +39,12 @@ const getCsvContent = ($table, opts, oColumns, oData) => {
   const { columns, datas } = getCsvData(opts, oData, oColumns, tableEl);
   let content = "\uFEFF";
   const transfrom = (str) => {
+    if (str === null || str === void 0) {
+      return "" + tab;
+    }
+    if (typeof str === "number" && isNaN(str)) {
+      return "-" + tab;
+    }
     if (typeof str === "string" && str.replace(/ /g, "").match(/[\s,"]/)) {
       str = '"' + str.replace(/"/g, '""') + '"';
     }

package/image-viewer/vue.js

@@ -210,7 +210,7 @@ const initWatch = ({ watch, state, api: api2, props, nextTick, vm }) => {
     () => {
       state.urlList = props.urlList;
     },
-    { deep: true }
+    { deep: true, immediate: true }
   );
 };
 const renderless = (props, { computed, onMounted, onBeforeUnmount, onUpdated, reactive, watch, inject, provide }, { t, parent, nextTick, emit, constants, vm, mode }) => {

package/month-range/index.js

@@ -135,6 +135,9 @@ const handleConfirm = ({ api, emit, state, props, t }) => (visible = false) => {
     emit("update:modelValue", [start, end]);
     emit("select-change", [start, end]);
   }
+  if (state.minDate && !state.maxDate) {
+    emit("pick", [state.minDate, state.maxDate], visible, true);
+  }
 };
 const isValidValue = (state) => (value) => Array.isArray(value) && value && value[1] && value[0] && isDate(value[1]) && isDate(value[0]) && value[0].getTime() <= value[1].getTime() && (typeof state.disabledDate === "function" ? !state.disabledDate(value[1]) && !state.disabledDate(value[0]) : true);
 const resetView = (state) => () => {

package/number-animation/index.js

@@ -0,0 +1,53 @@
+import "../chunk-G2ADBYYC.js";
+const onFinish = ({ emit, props, state }) => () => {
+  state.value = props.to;
+  state.animating = false;
+  emit("finish");
+};
+const easeOut = (t) => 1 - (1 - t) ** 5;
+const play = ({ props, state, api }) => () => {
+  animate(state, props, api);
+};
+const animate = (state, props, api) => {
+  state.animating = true;
+  state.value = props.from;
+  if (props.from !== props.to) {
+    const startTime = performance.now();
+    const tick = () => {
+      const current = performance.now();
+      const elapsedTime = Math.min(current - startTime, props.duration);
+      const currentValue = props.from + (props.to - props.from) * easeOut(elapsedTime / props.duration);
+      if (elapsedTime === props.duration) {
+        api.onFinish();
+        return;
+      }
+      state.value = currentValue;
+      requestAnimationFrame(tick);
+    };
+    tick();
+  }
+};
+const formattedValue = ({ state, props }) => () => {
+  if (typeof state.value !== "number" && typeof state.value !== "string")
+    return;
+  if (typeof props.precision !== "number")
+    return;
+  const numValue = Number(state.value);
+  if (isNaN(numValue) || !isFinite(numValue))
+    return;
+  if (numValue === 0) {
+    return numValue.toFixed(props.precision);
+  }
+  let formatValue = numValue.toFixed(props.precision);
+  if (typeof props.separator === "string" && props.separator !== "") {
+    const [integerPart, decimalPart] = formatValue.split(".");
+    formatValue = integerPart.replace(/(\d)(?=(\d{3})+$)/g, "$1" + props.separator) + (decimalPart ? "." + decimalPart : "");
+  }
+  return formatValue;
+};
+export {
+  animate,
+  formattedValue,
+  onFinish,
+  play
+};

package/number-animation/vue.js

@@ -0,0 +1,27 @@
+import "../chunk-G2ADBYYC.js";
+import { play, formattedValue, onFinish } from "./index";
+const api = ["state", "play", "formattedValue", "onFinish"];
+const renderless = (props, { onMounted, computed, reactive }, { emit }) => {
+  const api2 = {};
+  const state = reactive({
+    animating: true,
+    value: props.from,
+    showValue: computed(() => api2.formattedValue(state, props))
+  });
+  onMounted(() => {
+    if (props.active) {
+      api2.play(props, state);
+    }
+  });
+  Object.assign(api2, {
+    state,
+    play: play({ props, state, api: api2 }),
+    formattedValue: formattedValue({ state, props }),
+    onFinish: onFinish({ emit, props, state })
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.22.0",
+  "version": "3.24.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",
@@ -25,8 +25,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@opentiny/utils": "~3.22.0",
-    "@opentiny/vue-hooks": "~3.22.0",
+    "@opentiny/utils": "~3.24.0",
+    "@opentiny/vue-hooks": "~3.24.0",
     "color": "4.2.3"
   },
   "devDependencies": {

package/picker/index.js

@@ -46,8 +46,8 @@ const watchMobileVisible = ({ api, props, state, nextTick }) => ([dateMobileVisi
     });
   }
 };
-const watchPickerVisible = ({ api, vm, dispatch, emit, props, state, nextTick }) => (value) => {
-  if (props.readonly || state.pickerDisabled || state.isMobileScreen)
+const watchPickerVisible = ({ api, vm, dispatch, emit, props, state, nextTick, isPCMode }) => (value) => {
+  if (props.readonly || state.pickerDisabled || state.isMobileScreen && !isPCMode)
     return;
   if (value) {
     api.showPicker();
@@ -704,18 +704,18 @@ const handleClose = ({ api, props, state }) => () => {
     api.emitInput(oldValue, true);
   }
 };
-const handleFocus = ({ emit, vm, state, api, props }) => () => {
+const handleFocus = ({ emit, vm, state, api, props, isPCMode }) => () => {
   const type = state.type;
   if (props.readonly || state.pickerDisabled) {
     return;
   }
   if (DATEPICKER.TriggerTypes.includes(type)) {
-    if (state.isMobileScreen && state.isDateMobileComponent) {
+    if (!state.isMobileScreen || isPCMode) {
+      state.pickerVisible = true;
+    } else if (state.isDateMobileComponent) {
       api.dateMobileToggle(true);
-    } else if (state.isMobileScreen && state.isTimeMobileComponent) {
+    } else if (state.isTimeMobileComponent) {
       api.timeMobileToggle(true);
-    } else {
-      state.pickerVisible = true;
     }
   }
   emit("focus", vm.$refs.reference);
@@ -786,14 +786,19 @@ const showPicker = ({ api, nextTick, updatePopper, state }) => () => {
     state.picker.adjustSpinners && state.picker.adjustSpinners();
   });
 };
-const handlePick = ({ state, api }) => (date = "", visible = false) => {
+const handlePick = ({ state, api }) => (date = "", visible = false, chooseOne = false) => {
   if (!state.picker)
     return;
-  state.userInput = null;
-  state.pickerVisible = state.picker.state.visible = visible;
-  api.emitInput(date, visible);
-  state.date = date;
-  state.picker.resetView && state.picker.resetView();
+  if (chooseOne) {
+    const minDate = date && date[0] || "";
+    state.userInput = [api.formatToString(minDate), null];
+  } else {
+    state.userInput = null;
+    state.pickerVisible = state.picker.state.visible = visible;
+    api.emitInput(date, visible);
+    state.date = date;
+    state.picker.resetView && state.picker.resetView();
+  }
 };
 const handleSelectRange = (state) => (start, end, pos) => {
   if (state.refInput.length === 0) {

package/picker/vue.js

@@ -154,7 +154,7 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent, br
   });
   return state;
 };
-const initApi = ({ api: api2, props, hooks, state, vnode, others, utils, parent }) => {
+const initApi = ({ api: api2, props, hooks, state, vnode, others, utils, parent, isPCMode }) => {
   const { t, emit, dispatch, nextTick, vm } = vnode;
   const { TimePanel, TimeRangePanel } = others;
   const { destroyPopper, popperElm, updatePopper } = initPopper({ props, hooks, vnode });
@@ -166,7 +166,7 @@ const initApi = ({ api: api2, props, hooks, state, vnode, others, utils, parent
     hidePicker: hidePicker({ destroyPopper, state }),
     handleSelectChange: ({ tz, date }) => !state.ranged && emit("select-change", { tz, date }),
     getPanel: getPanel(others),
-    handleFocus: handleFocus({ emit, vm, state, api: api2, props }),
+    handleFocus: handleFocus({ emit, vm, state, api: api2, props, isPCMode }),
     getTimezone: getTimezone({ props, utils }),
     emitChange: emitChange({ api: api2, dispatch, emit, props, state }),
     parsedValue: parsedValue({ api: api2, props, state, t }),
@@ -189,7 +189,7 @@ const initApi = ({ api: api2, props, hooks, state, vnode, others, utils, parent
     handleClose: handleClose({ api: api2, props, state }),
     displayValue: displayValue({ api: api2, props, state }),
     handlePick: handlePick({ api: api2, state }),
-    watchPickerVisible: watchPickerVisible({ api: api2, vm, dispatch, emit, props, state, nextTick }),
+    watchPickerVisible: watchPickerVisible({ api: api2, vm, dispatch, emit, props, state, nextTick, isPCMode }),
     watchMobileVisible: watchMobileVisible({ api: api2, props, state, nextTick }),
     formatToString: formatToString({ api: api2, state }),
     watchIsRange: watchIsRange({ api: api2, state, TimePanel, TimeRangePanel }),
@@ -263,12 +263,12 @@ 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, useBreakpoint } = vnode;
+  const { vm, service, parent, useBreakpoint, isPCMode } = vnode;
   const { utils = {} } = service || {};
   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, parent });
+  initApi({ api: api2, props, hooks, state, vnode, others, utils, parent, isPCMode });
   initWatch({ api: api2, state, props, watch, markRaw });
   api2.initGlobalTimezone();
   onMounted(() => {

package/qr-code/vue.js

@@ -17,7 +17,7 @@ const renderless = (props, { reactive, watch, onMounted }, { vm, emit }, { QRCod
     api2.draw();
   });
   watch(
-    () => [props.level, props.value],
+    () => [props.level, props.value, props.color, props.style, props.size, props.icon, props.iconSize, props.bordered],
     () => {
       api2.draw();
       api2.change();

package/select/index.js

@@ -621,7 +621,8 @@ const handleOptionSelect = ({ api, nextTick, props, vm, state }) => (option, byC
     state.visible = false;
   }
   state.isSilentBlur = byClick;
-  api.setSoftFocus();
+  if (!props.automaticDropdown)
+    api.setSoftFocus();
   if (state.visible) {
     return;
   }

package/tabs-mf/index.js

@@ -204,6 +204,9 @@ const wheelListener = ({ vm, api, tabs, state }) => debounce(10, (e) => {
 });
 const getBoundRect = (vm) => () => vm.$el.getBoundingClientRect();
 const handleClickDropdownItem = (tabs) => (name) => tabs.clickMore(name);
+const scrollToLeft = (tabs) => () => {
+  tabs.scrollTo(tabs.state.navs[0].name);
+};
 const key = (opt) => opt.name + "-" + random();
 const emitAdd = (tabs) => () => {
   tabs.$emit("edit", null, "add");
@@ -279,6 +282,7 @@ export {
   onTouchstart,
   removeItem,
   scrollTo,
+  scrollToLeft,
   setActive,
   sortItem,
   unobserveTabSwipeSize,

package/tabs-mf/vue-bar.js

@@ -1,9 +1,9 @@
 import "../chunk-G2ADBYYC.js";
 import { addResizeListener, removeResizeListener } from "@opentiny/utils";
-import { wheelListener, getBoundRect, handleClickDropdownItem, key, emitAdd } from "./index";
+import { wheelListener, getBoundRect, handleClickDropdownItem, key, emitAdd, scrollToLeft } from "./index";
 import { getAddWheelListener } from "./wheel";
 const { addWheelListener, removeWheelListener } = getAddWheelListener(window, document);
-const api = ["state", "wheelListener", "handleClickDropdownItem", "key", "emitAdd"];
+const api = ["state", "wheelListener", "handleClickDropdownItem", "key", "emitAdd", "scrollToLeft"];
 const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject, computed }, { vm }) => {
   const tabs = inject("tabs", null);
   const state = reactive({
@@ -21,7 +21,8 @@ const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject
     getBoundRect: getBoundRect(vm),
     handleClickDropdownItem: handleClickDropdownItem(tabs),
     key,
-    emitAdd: emitAdd(tabs)
+    emitAdd: emitAdd(tabs),
+    scrollToLeft: scrollToLeft(tabs)
   };
   Object.assign(api2, {
     state,