@opentiny/vue-renderless 3.17.6 → 3.18.0

package/picker/index.js

@@ -47,7 +47,7 @@ const watchMobileVisible = ({ api, props, state, nextTick }) => ([dateMobileVisi
   }
 };
 const watchPickerVisible = ({ api, vm, dispatch, emit, props, state, nextTick }) => (value) => {
-  if (props.readonly || state.pickerDisabled || state.isMobileScreen)
+  if (props.readonly || state.pickerDisabled || state.isMobileMode)
     return;
   if (value) {
     api.showPicker();
@@ -167,7 +167,7 @@ const getTimezone = ({ props, utils }) => () => {
   const setting = utils.getDateFormat && utils.getDateFormat();
   const { DbTimezone, Timezone, TimezoneOffset } = setting || {};
   const cur = getLocalTimezone();
-  const isTzNumber = (z) => typeof z === "number" && z >= -12 && z <= 12;
+  const isTzNumber = (z) => typeof z === "number" && z >= -12 && z <= 14;
   if (!~type.indexOf("datetime")) {
     return { from: cur, to: cur };
   }
@@ -429,15 +429,35 @@ const getSelectionStart = ({ value, format, regx, event }) => {
   }
   return { selectionStart, I };
 };
+const getEffectiveDateString = (formatStr) => {
+  const serializationList = [{ "MM": "01" }, { "M": "1" }, { "dd": "01" }, { "d": "1" }];
+  let result = formatStr;
+  serializationList.forEach((item) => {
+    const itemKey = Object.keys(item)[0];
+    if (result.includes(itemKey)) {
+      result = result.replace(itemKey, item[itemKey]);
+    }
+  });
+  return result;
+};
 const getNum = (value, format, regx) => {
   let len = value.length;
+  let formatStr = "";
   if (format && regx) {
     const formatMatchArr = format.match(regx);
-    len = Math.max(len, formatMatchArr.join("").length);
+    formatStr = formatMatchArr.join("");
+    len = Math.max(len, formatStr.length);
   }
-  let num = { str: "", arr: [] };
+  const num = { str: "", arr: [] };
   for (let i = 0; i < len; i++) {
-    let char = value.charAt(i) ? value.charAt(i) : "00";
+    let fillStr = "0";
+    if (formatStr && len > value.length) {
+      const validStr = getEffectiveDateString(formatStr);
+      if (/[0-9]/.test(validStr[i])) {
+        fillStr = validStr[i];
+      }
+    }
+    const char = value.charAt(i) ? value.charAt(i) : fillStr;
     if (/[0-9]/.test(char)) {
       num.str += char;
     } else {
@@ -683,9 +703,9 @@ const handleClose = ({ api, props, state }) => () => {
 const handleFocus = ({ emit, vm, state, api }) => () => {
   const type = state.type;
   if (DATEPICKER.TriggerTypes.includes(type)) {
-    if (state.isMobileScreen && state.isDateMobileComponent) {
+    if (state.isMobileMode && state.isDateMobileComponent) {
       api.dateMobileToggle(true);
-    } else if (state.isMobileScreen && state.isTimeMobileComponent) {
+    } else if (state.isMobileMode && state.isTimeMobileComponent) {
       api.timeMobileToggle(true);
     } else {
       state.pickerVisible = true;

package/picker/vue.js

@@ -123,7 +123,7 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent, br
     labelTooltip: "",
     displayOnlyTooltip: "",
     isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
-    isMobileScreen: computed(() => breakpoint.current.value === "default"),
+    isMobileMode: computed(() => vm.$mode.includes("mobile")),
     dateMobileOption: {
       visible: false,
       type: props.type,
@@ -254,6 +254,7 @@ const initWatch = ({ api: api2, state, props, watch, markRaw }) => {
     (value) => state.picker && (state.picker.state.value = value),
     { immediate: true }
   );
+  watch(() => props.type, api2.mountPicker);
   watch(() => props.isRange, api2.watchIsRange);
   watch(() => props.modelValue, api2.watchModelValue);
   watch(() => props.pickerOptions, api2.updateOptions, { deep: true });

package/pop-upload/index.js

@@ -6,6 +6,14 @@ const computedconfirm = ({ constants, props, t }) => () => props.submitButtonTex
 const computedFileName = ({ constants, t }) => () => t(constants.FILE_NAME);
 const computedUploadError = ({ constants, t }) => () => t(constants.UPLOAD_ERROR);
 const computedFileStatus = ({ constants, t }) => () => t(constants.FILE_STATUS);
+const computedFileWords = ({ t }) => () => ({
+  operation: t("ui.popupload.operation"),
+  waitUpload: t("ui.popupload.waitUpload"),
+  success: t("ui.popupload.success"),
+  uploadError: t("ui.popupload.uploadError"),
+  confirmDeleteTips: t("ui.popupload.confirmDeleteTips"),
+  delete: t("ui.popupload.delete")
+});
 const computedFileSize = ({ constants, t }) => () => t(constants.FILE_SIZE);
 const computedErrorSizeTips = ({ constants, t }) => () => t(constants.ERROR_SIZE_TIPS);
 const computedErrorNumTips = ({ constants, t }) => () => t(constants.ERROR_NUM_TIPS);
@@ -45,7 +53,7 @@ const closeErrorTips = (state) => () => state.errorTips = [];
 const closeSuccessTips = (state) => () => state.successTips = [];
 const watchLimit = (state) => (value) => {
   state.limit = value;
-  if (value != void 0 && value > 0) {
+  if (value !== void 0 && value > 0) {
     state.tipsTitle[0] = {
       count: value
     };
@@ -65,7 +73,7 @@ const watchUploaFileType = (state) => (value) => {
 };
 const watchMaxUploadFileSize = ({ constants, state }) => (value) => {
   state.maxUploadFileSize = value;
-  if (value != void 0 && value != 0) {
+  if (value !== void 0 && value !== 0) {
     state.tipsTitle[2] = {
       size: Math.floor(value / 1024) + constants.KB
     };
@@ -106,7 +114,7 @@ const beforeAvatarUpload = ({ props, state }) => (file) => {
   let filepath = file.name;
   let isnext = false;
   let isSize = false;
-  if (state.uploadFileType && state.uploadFileType.length != 0) {
+  if (state.uploadFileType && state.uploadFileType.length !== 0) {
     let arr = filepath.split(".");
     let fileend = "." + arr[arr.length - 1];
     isnext = !~state.uploadFileType.indexOf(fileend);
@@ -114,7 +122,7 @@ const beforeAvatarUpload = ({ props, state }) => (file) => {
       state.errorTips.push({ type: file.name });
     }
   }
-  if (state.maxUploadFileSize && state.maxUploadFileSize != 0) {
+  if (state.maxUploadFileSize && state.maxUploadFileSize !== 0) {
     if (file.size > state.maxUploadFileSize) {
       state.errorTips.push({ size: file.name });
       isSize = true;
@@ -135,6 +143,7 @@ export {
   computedFileName,
   computedFileSize,
   computedFileStatus,
+  computedFileWords,
   computedLimitCountTips,
   computedLimitSizeTips,
   computedLimitTypeTips,

package/pop-upload/vue.js

@@ -16,6 +16,7 @@ import {
   computedErrorTypeTips,
   computedFileName,
   computedFileStatus,
+  computedFileWords,
   computedFileSize,
   computedLimitSizeTips,
   computedLimitTypeTips,
@@ -77,6 +78,8 @@ const initState = ({ reactive, props, computed, api: api2 }) => reactive({
   fileSize: computed(() => api2.computedFileSize()),
   fileName: computed(() => api2.computedFileName()),
   fileStatus: computed(() => api2.computedFileStatus()),
+  // tiny新增
+  fileWords: computed(() => api2.computedFileWords()),
   cancelButtonText: computed(() => api2.computedCancel()),
   submitButtonText: computed(() => api2.computedconfirm()),
   errorNumTips: computed(() => api2.computedErrorNumTips()),
@@ -120,6 +123,7 @@ const initApi = ({ api: api2, state, refs, emit, props, constants, t }) => {
     computedFileSize: computedFileSize({ constants, t }),
     computedCancel: computedCancel({ constants, props, t }),
     computedFileStatus: computedFileStatus({ constants, t }),
+    computedFileWords: computedFileWords({ t }),
     computedconfirm: computedconfirm({ constants, props, t }),
     computedUploadError: computedUploadError({ constants, t }),
     computedErrorNumTips: computedErrorNumTips({ constants, t }),

package/popeditor/index.js

@@ -27,7 +27,8 @@ const createSearchForm = (props) => (isRest) => props.conditions.reduce((acc, it
   return acc;
 }, {});
 const getColumns = ({ constants, props }) => {
-  const { columns } = props.gridOp;
+  const { columns: preColumns } = props.gridOp;
+  const columns = preColumns.slice(0);
   const selectionCol = find(
     columns,
     (col) => col.type === constants.COLUMNS_TYPE.selection || col.type === constants.COLUMNS_TYPE.radio

package/rich-text-editor/vue.js

@@ -27,7 +27,7 @@ const api = [
   "eventClick",
   "Active"
 ];
-const renderless = (props, { computed, onBeforeUnmount, reactive }, { vm, emit }, {
+const renderless = (props, { computed, onBeforeUnmount, reactive, watch }, { vm, emit }, {
   Editor,
   StarterKit,
   Table,
@@ -117,7 +117,7 @@ const renderless = (props, { computed, onBeforeUnmount, reactive }, { vm, emit }
     addAttributes() {
       return {
         level: {
-          default: 1
+          default: 1.5
         }
       };
     },
@@ -143,7 +143,7 @@ const renderless = (props, { computed, onBeforeUnmount, reactive }, { vm, emit }
     addAttributes() {
       return {
         size: {
-          default: 16
+          default: 14
         }
       };
     },
@@ -282,6 +282,12 @@ const renderless = (props, { computed, onBeforeUnmount, reactive }, { vm, emit }
   onBeforeUnmount(() => {
     state.editor.destroy();
   });
+  watch(
+    () => props.modelValue,
+    (value) => {
+      state.editor.commands.setContent(value);
+    }
+  );
   return api2;
 };
 export {

package/select/index.js

@@ -640,9 +640,6 @@ const toggleMenu = ({ vm, state, props, api }) => (e) => {
   const enterCode = 13;
   const nodeName = event.target && event.target.nodeName;
   const toggleVisible = props.ignoreEnter ? event.keyCode !== enterCode && nodeName === "INPUT" : true;
-  if (!props.displayOnly) {
-    event.stopPropagation();
-  }
   if (!state.selectDisabled) {
     toggleVisible && !state.softFocus && (state.visible = !state.visible);
     state.softFocus = false;
@@ -1588,7 +1585,7 @@ const computedDisabledTooltipContent = ({ props, state }) => () => {
     return state.selected.state ? state.selected.state.currentLabel : state.selected.currentLabel;
   }
 };
-const computedSelectDisabled = ({ props, parent }) => () => props.disabled || (parent.form || {}).disabled || props.displayOnly || (parent.form || {}).displayOnly;
+const computedSelectDisabled = ({ state }) => () => state.isDisabled || state.isDisplayOnly;
 const computedIsExpand = ({ props, state }) => () => {
   const hoverExpanded = (state.selectHover || state.visible) && props.hoverExpand && !props.disabled;
   const clickExpanded = props.clickExpand && state.exceedMaxVisibleRow && state.showCollapseTag;
@@ -1641,6 +1638,8 @@ const watchShowClose = ({ nextTick, state, parent }) => () => {
     }
   });
 };
+const computedShowTagText = ({ state }) => () => state.isDisplayOnly;
+const isTagClosable = () => (item) => !item.required;
 const computedGetIcon = ({ designConfig, props }) => () => {
   return props.dropdownIcon ? { icon: props.dropdownIcon } : {
     icon: (designConfig == null ? void 0 : designConfig.icons.dropdownIcon) || "icon-delta-down",
@@ -1701,6 +1700,7 @@ export {
   computedShowClose,
   computedShowCopy,
   computedShowNewOption,
+  computedShowTagText,
   computedTagsStyle,
   debouncRquest,
   defaultOnQueryChange,
@@ -1739,6 +1739,7 @@ export {
   handleResize,
   initQuery,
   initValue,
+  isTagClosable,
   loadTreeData,
   managePlaceholder,
   mounted,

package/select/vue.js

@@ -109,7 +109,9 @@ import {
   clearNoMatchValue,
   handleDebouncedQueryChange,
   onClickCollapseTag,
-  computedIsExpand
+  computedIsExpand,
+  computedShowTagText,
+  isTagClosable
 } from "./index";
 import debounce from "../common/deps/debounce";
 import { isNumber } from "../common/type";
@@ -172,7 +174,9 @@ const api = [
   "loadTreeData",
   "updateModelValue",
   "clearSearchText",
-  "onClickCollapseTag"
+  "onClickCollapseTag",
+  "computedShowTagText",
+  "isTagClosable"
 ];
 const initState = ({ reactive, computed, props, api: api2, emitter, parent, constants, useBreakpoint, vm, designConfig }) => {
   const stateAdd = initStateAdd({ computed, props, api: api2, parent });
@@ -283,6 +287,8 @@ const initStateAdd = ({ computed, props, api: api2, parent }) => {
     formItemSize: computed(() => (parent.formItem || { state: {} }).state.formItemSize),
     selectDisabled: computed(() => api2.computedSelectDisabled()),
     isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
+    isDisabled: computed(() => props.disabled || (parent.form || {}).disabled),
+    isShowTagText: computed(() => api2.computedShowTagText()),
     gridCheckedData: computed(() => api2.getcheckedData()),
     isExpandAll: computed(() => api2.computedIsExpandAll()),
     searchSingleCopy: computed(() => props.allowCopy && !props.multiple && (props.filterable || props.searchable)),
@@ -376,7 +382,7 @@ const initApi = ({
     computedShowCopy: computedShowCopy({ props, state }),
     computedOptionsAllDisabled: computedOptionsAllDisabled(state),
     computedDisabledTooltipContent: computedDisabledTooltipContent({ props, state }),
-    computedSelectDisabled: computedSelectDisabled({ props, parent }),
+    computedSelectDisabled: computedSelectDisabled({ state }),
     computedIsExpand: computedIsExpand({ props, state }),
     computedIsExpandAll: computedIsExpandAll(props),
     watchInitValue: watchInitValue({ props, emit }),
@@ -385,7 +391,9 @@ const initApi = ({
     computedGetIcon: computedGetIcon({ designConfig, props }),
     computedGetTagType: computedGetTagType({ designConfig, props }),
     clearSearchText: clearSearchText({ state, api: api2 }),
-    clearNoMatchValue: clearNoMatchValue({ props, emit })
+    clearNoMatchValue: clearNoMatchValue({ props, emit }),
+    computedShowTagText: computedShowTagText({ state }),
+    isTagClosable: isTagClosable()
   });
   addApi({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, isMobileFirstMode, designConfig });
 };

package/slider-button/index.js

@@ -22,13 +22,17 @@ const getGroup = ({ constants, parent: $parent }) => () => {
   return parent;
 };
 const mounted = ({ vm, props, dispatch, constants }) => () => {
-  dispatch(constants.SLIDER_BUTTON_GROUP, "labelValue", [props.label || props.text]);
   dispatch(constants.SLIDER_BUTTON_GROUP, "eachBlock", [
     vm.$refs.sliderButton.offsetLeft,
     vm.$refs.sliderButton.offsetWidth,
-    vm.$refs.sliderButton.offsetHeight
+    vm.$refs.sliderButton.offsetHeight,
+    props.label || props.text,
+    vm.$refs.sliderButton
   ]);
 };
+const unMounted = ({ props, dispatch, constants }) => () => {
+  dispatch(constants.SLIDER_BUTTON_GROUP, "delBlock", [props.label || props.text]);
+};
 const customEvents = ({ props, vm, type }) => {
   const sliderInput = vm.$refs.sliderInput;
   for (let ev in props.events) {
@@ -41,5 +45,6 @@ export {
   getValue,
   handleChange,
   mounted,
-  setValue
+  setValue,
+  unMounted
 };

package/slider-button/vue.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
-import { handleChange, getValue, setValue, getGroup, mounted, customEvents } from "./index";
+import { handleChange, getValue, setValue, getGroup, mounted, unMounted, customEvents } from "./index";
 const api = ["state", "handleChange"];
-const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmount }, { emit, parent, dispatch, constants, nextTick, vm }) => {
+const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmount, watch }, { emit, parent, dispatch, constants, nextTick, vm }) => {
   const state = reactive({
     disabled: inject("disabled", null) || props.disabled,
     type: inject("sliderType", null),
@@ -9,6 +9,7 @@ const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmo
       get: () => api2.getValue(),
       set: (val) => api2.setValue(val)
     }),
+    label: computed(() => props.label || props.text),
     sliderButtonGroup: computed(() => api2.getGroup()),
     size: inject("sliderSize", null),
     tabIndex: computed(() => state.sliderButtonGroup && state.value !== (props.label || props.text) ? -1 : 0)
@@ -17,6 +18,7 @@ const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmo
   Object.assign(api2, {
     state,
     mounted: mounted({ vm, props, dispatch, constants, state, nextTick }),
+    unMounted: unMounted({ props, dispatch, constants }),
     getValue: getValue(state),
     setValue: setValue({ emit, state }),
     getGroup: getGroup({ constants, parent }),
@@ -27,8 +29,10 @@ const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmo
     customEvents({ props, vm, type: "add" });
   });
   onBeforeUnmount(() => {
+    api2.unMounted();
     customEvents({ props, vm, type: "remove" });
   });
+  watch(() => state.label, api2.mounted);
   return api2;
 };
 export {

package/slider-button-group/index.js

@@ -1,15 +1,52 @@
 import "../chunk-G2ADBYYC.js";
-const getChangePosition = (state) => (value) => {
-  state.eachBlockIndex.find((e, index) => {
-    if (e.index === value) {
-      state.currentIndex = index;
+const getChangePosition = ({ state }) => (value) => {
+  const sliderItem = state.sliderInfo.find((item) => item.value === value);
+  if (sliderItem) {
+    const { buttonVm, width, left, height } = sliderItem;
+    if (!width || !height) {
+      sliderItem.left = buttonVm.offsetLeft;
+      sliderItem.width = buttonVm.offsetWidth;
+      sliderItem.height = buttonVm.offsetHeight;
     }
+    state.sliderSpace = sliderItem.left;
+    state.sliderWidth = sliderItem.width;
+    state.sliderHeight = sliderItem.height;
+  }
+};
+const watchSliderButtonChange = ({ vm, state, api, props }) => (value) => {
+  var _a;
+  const observer = new MutationObserver(() => {
+    state.sliderInfo.forEach((sliderItem) => {
+      const { buttonVm } = sliderItem;
+      sliderItem.left = buttonVm.offsetLeft;
+      sliderItem.width = buttonVm.offsetWidth;
+      sliderItem.height = buttonVm.offsetHeight;
+    });
+    api.getChangePosition(props.modelValue);
+  });
+  state.mutationObserver = observer;
+  const buttonBox = (_a = vm.$refs) == null ? void 0 : _a.sliderButtonBox;
+  if (buttonBox) {
+    observer.observe(vm.$refs.sliderButtonBox, { childList: true, subtree: true, characterData: true });
+  }
+};
+const watchVisible = ({ vm, api, props, state }) => () => {
+  var _a;
+  const group = (_a = vm.$refs) == null ? void 0 : _a.sliderButtonGroup;
+  if (!group) {
+    return;
+  }
+  const observer = new IntersectionObserver(() => {
+    if (!(group == null ? void 0 : group.offsetParent)) {
+      return;
+    }
+    api.getChangePosition(props.modelValue);
   });
-  state.sliderSpace = state.eachBlock[state.currentIndex];
-  state.sliderWidth = state.sliderWidthData[state.currentIndex];
-  state.sliderHeight = state.sliderHeightData[state.currentIndex];
-  state.sliderCount += 1;
+  state.intersectionObserver = observer;
+  observer.observe(group);
 };
 export {
-  getChangePosition
+  getChangePosition,
+  watchSliderButtonChange,
+  watchVisible
 };

package/slider-button-group/vue.js

@@ -1,46 +1,67 @@
-import "../chunk-G2ADBYYC.js";
-import { getChangePosition } from "./index";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import { getChangePosition, watchVisible, watchSliderButtonChange } from "./index";
 const api = ["state"];
-const renderless = (props, { reactive, provide, onMounted }, { parent }) => {
+const renderless = (props, { reactive, provide, onMounted, onBeforeUnmount, watch }, { parent, vm }) => {
   const state = reactive({
     tag: "div",
     isActive: false,
-    eachBlock: [],
     sliderWidth: 0,
     sliderHeight: 0,
     sliderSpace: props.size === "large" ? 4 : 2,
-    sliderWidthData: [],
-    sliderHeightData: [],
-    eachBlockIndex: [],
-    eachBlockData: {},
+    sliderInfo: [],
     currentIndex: 0,
-    sliderCount: 0
+    mutationObserver: null,
+    intersectionObserver: null
   });
   parent.$on("handleChange", (value) => {
     api2.getChangePosition(value);
     parent.$emit("change", value);
   });
-  parent.$on("labelValue", (value) => {
-    state.eachBlockIndex.push({ index: value });
+  parent.$on("eachBlock", (left, width, height, value, buttonVm) => {
+    const sliderItem = state.sliderInfo.find((item) => item.buttonVm === buttonVm);
     if (props.modelValue === value) {
       state.isActive = true;
     }
+    if (sliderItem) {
+      state.sliderInfo[state.sliderInfo.indexOf(sliderItem)] = __spreadProps(__spreadValues({}, sliderItem), { left, width, value, height });
+    } else {
+      state.sliderInfo.push({ buttonVm, left, width, value, height });
+    }
   });
-  parent.$on("eachBlock", (left, width, height) => {
-    state.eachBlock.push(left);
-    state.sliderWidthData.push(width);
-    state.sliderHeightData.push(height);
-    state.sliderWidth = state.sliderWidthData[0];
-    state.sliderHeight = state.sliderHeightData[0];
+  parent.$on("delBlock", (value) => {
+    let sliderItem = state.sliderInfo.find((item) => item.value === value);
+    if (sliderItem) {
+      state.sliderInfo.splice(state.sliderInfo.indexOf(sliderItem), 1);
+    }
   });
   const api2 = {};
-  Object.assign(api2, { state, getChangePosition: getChangePosition(state) });
+  Object.assign(api2, {
+    state,
+    getChangePosition: getChangePosition({ state }),
+    watchVisible: watchVisible({ vm, api: api2, props, state }),
+    watchSliderButtonChange: watchSliderButtonChange({ vm, state, api: api2, props })
+  });
   provide("sliderType", props.type);
   provide("sliderSize", props.size);
   provide("disabled", props.disabled);
   onMounted(() => {
     api2.getChangePosition(props.modelValue);
+    api2.watchVisible();
+    api2.watchSliderButtonChange();
   });
+  onBeforeUnmount(() => {
+    mutationObserver == null ? void 0 : mutationObserver.disconnect();
+    intersectionObserver == null ? void 0 : intersectionObserver.disconnect();
+  });
+  watch(
+    () => props.modelValue,
+    (value) => {
+      api2.getChangePosition(value);
+    }
+  );
   return api2;
 };
 export {

package/tab-item-mf/vue.js

@@ -1,6 +1,10 @@
 import "../chunk-G2ADBYYC.js";
-const renderless = (props, { inject, onBeforeUnmount, reactive, toRef, markRaw }, { slots, vm }) => {
+import { useRelation as createUseRelation } from "../common/deps/useRelation";
+const renderless = (props, hooks, { slots, vm }) => {
+  const { inject, onBeforeUnmount, reactive, toRef, markRaw } = hooks;
   const tabs = inject("tabs", null);
+  const tabsId = inject("tabsId", null);
+  const useRelation = createUseRelation(hooks);
   const { lazy } = props;
   const item = reactive({
     title: toRef(props, "title"),
@@ -15,6 +19,7 @@ const renderless = (props, { inject, onBeforeUnmount, reactive, toRef, markRaw }
   item.selected = (tabs.activeName || tabs.modelValue) === item.name;
   tabs.addItem(item);
   onBeforeUnmount(() => tabs.removeItem(item.name, true));
+  useRelation({ relationKey: `tabs-${tabsId}` });
   return {};
 };
 export {

package/tabs-mf/index.js

@@ -49,6 +49,31 @@ const addItem = (state) => (item) => {
 const addNav = (state) => (nav) => {
   state.navs = [...state.navs, nav];
 };
+const sortItem = (state) => (names) => {
+  const items = [...state.items];
+  const navs = [...state.navs];
+  items.sort((a, b) => names.indexOf(a.name) - names.indexOf(b.name));
+  navs.sort((a, b) => names.indexOf(a.name) - names.indexOf(b.name));
+  state.items = items;
+  state.navs = navs;
+};
+const onRelationChange = ({ api, instance, nextTick, state }) => () => {
+  const itemOrder = instance.childTabs.map((tab) => tab.name);
+  const itemOrderKey = itemOrder.join(",");
+  const { tabbar } = instance.$refs;
+  if (itemOrderKey !== state.itemOrderKey) {
+    state.itemOrderKey = itemOrderKey;
+    api.sortItem(itemOrder);
+    const selectedItem = state.items.find((item) => item.selected);
+    if (selectedItem) {
+      selectedItem.selected = false;
+      nextTick(() => {
+        selectedItem.selected = true;
+      });
+    }
+    tabbar.wheelListener();
+  }
+};
 const scrollTo = ({ vm, state }) => (name) => {
   const { navs } = state;
   const { $refs } = vm;
@@ -57,12 +82,10 @@ const scrollTo = ({ vm, state }) => (name) => {
   fastdom.measure(() => {
     const { clientWidth, scrollWidth } = scroll;
     if (name && scrollWidth > clientWidth) {
-      const total = navs.length;
       const index = navs.findIndex((nav) => nav.name === name);
-      const max = scrollWidth - clientWidth;
       if (~index) {
         fastdom.mutate(() => {
-          scroll.scrollLeft = max / (total - 1) * index;
+          scroll.scrollLeft = vm.$el.querySelector('[data-tag="tiny-tab-nav"]').childNodes[index].offsetLeft - 5;
           tabbar.wheelListener();
         });
       }
@@ -206,6 +229,33 @@ const handleNavItemClose = ({ tabs, props }) => (e) => {
   e.stopPropagation();
   tabs.removeItem(props.navItem.name);
 };
+const onTouchstart = (state) => (e) => {
+  const clientX = e.touches[0].clientX;
+  state.last = clientX;
+};
+const onTouchmove = ({ props, state, vm }) => (e) => {
+  const { last } = state;
+  const { stopThreshold } = props;
+  const { touchContainer } = vm.$refs;
+  const clientX = e.touches[0].clientX;
+  const change = clientX - last;
+  state.last = clientX;
+  if (touchContainer) {
+    if (touchContainer.scrollWidth > touchContainer.clientWidth) {
+      touchContainer.scrollLeft -= change;
+    }
+    const shouldNext = change < 0 && touchContainer.clientWidth + touchContainer.scrollLeft >= touchContainer.scrollWidth - stopThreshold;
+    const shouldPrevious = change > 0 && touchContainer.scrollLeft <= stopThreshold;
+    if (!shouldNext && !shouldPrevious) {
+      e.stopPropagation();
+    }
+  }
+};
+const clearScroll = (vm) => () => {
+  if (vm.$refs.touchContainer) {
+    vm.$refs.touchContainer.scrollLeft = 0;
+  }
+};
 export {
   addItem,
   addNav,
@@ -213,6 +263,7 @@ export {
   canLeave,
   changeCurrentName,
   clearOtherTabSwipeScroll,
+  clearScroll,
   clickMore,
   computedSwipeable,
   emitAdd,
@@ -223,9 +274,13 @@ export {
   handleNavItemClose,
   key,
   observeTabSwipeSize,
+  onRelationChange,
+  onTouchmove,
+  onTouchstart,
   removeItem,
   scrollTo,
   setActive,
+  sortItem,
   unobserveTabSwipeSize,
   wheelListener
 };

package/tabs-mf/vue-bar.js

@@ -33,12 +33,6 @@ const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject
       state.moreOptions = state.moreList.map((name) => tabs.state.items.find((item) => item.name === name));
     }
   );
-  watch(
-    () => tabs.state.navs,
-    () => {
-      api2.wheelListener();
-    }
-  );
   onMounted(() => {
     addWheelListener(vm.$refs.scroll, api2.wheelListener);
     addResizeListener(vm.$el, api2.wheelListener);