@opentiny/vue-renderless 3.13.2 → 3.14.1

package/image-viewer/index.js

@@ -27,14 +27,11 @@ const hide = ({ props, api, state }) => () => {
 };
 const deviceSupportInstall = ({ state, api, mode }) => () => {
   on(window, "resize", api.initPage);
-  state.urlList = state.urlList.map((subItem) => {
-    return xss.filterUrl(subItem);
-  });
   state.urlList = state.urlList.map((subItem) => {
     let subItemObj = {};
     let lastSlashIndex = "";
     if (typeof subItem === "string") {
-      subItem = xss.filterUrl(subItem);
+      subItem = api.filterImageUrl(subItem);
       if (state.isThumbnail || state.isMenuView) {
         lastSlashIndex = subItem.lastIndexOf("/");
         state.fileName = subItem.substring(lastSlashIndex + 1);
@@ -47,12 +44,15 @@ const deviceSupportInstall = ({ state, api, mode }) => () => {
         return { url: subItem, name: state.fileName };
       }
     } else if (typeof subItem === "object" && subItem !== null) {
+      subItem.url = api.filterImageUrl(subItem.url);
       if (!subItem.name) {
         lastSlashIndex = subItem.url.lastIndexOf("/");
         state.fileName = subItem.url.substring(lastSlashIndex + 1);
         subItem.name = state.fileName;
       }
       return subItem;
+    } else {
+      return null;
     }
   });
   state._keyDownHandler = rafThrottle((event) => {
@@ -173,23 +173,17 @@ const prev = ({ state, api, vm }) => () => {
   } else if (state.isMenuView) {
     prevElement = vm.$refs[`isMenuView_${state.index}`][0] || vm.$refs[`isMenuView_${state.index}`];
   }
-  switch (state.index) {
-    case 1:
-      state.isThumbnail && vm.$refs.isThumbnailContent && (vm.$refs.isThumbnailContent.scrollTop = 0);
-      state.isMenuView && vm.$refs.isMenuViewContent && (vm.$refs.isMenuViewContent.scrollTop = 0);
-      state.scrollTop = 0;
-      break;
-    case state.urlList.length - 1:
-      api.getLastPrev(prevElement);
-      break;
-    case state.urlList.length - 2:
-      break;
-    case state.urlList.length - 3:
-      state.scrollTop = prevElement.offsetHeight;
-      break;
-    default:
-      api.getDefaultPrev(prevElement);
-      break;
+  if (state.index === 1) {
+    state.isThumbnail && vm.$refs.isThumbnailContent && (vm.$refs.isThumbnailContent.scrollTop = 0);
+    state.isMenuView && vm.$refs.isMenuViewContent && (vm.$refs.isMenuViewContent.scrollTop = 0);
+    state.scrollTop = 0;
+  } else if (state.index === state.urlList.length - 1) {
+    api.getLastPrev(prevElement);
+  } else if (state.index === state.urlList.length - 2) {
+  } else if (state.index === state.urlList.length - 3) {
+    state.scrollTop = prevElement.offsetHeight;
+  } else {
+    api.getDefaultPrev(prevElement);
   }
 };
 const getLastPrev = ({ state, vm }) => (prevElement) => {
@@ -219,30 +213,37 @@ const next = ({ state, api, vm }) => () => {
   } else if (state.isMenuView) {
     element = vm.$refs[`isMenuView_${state.index}`][0] || vm.$refs[`isMenuView_${state.index}`];
   }
-  const rect = element && element.getBoundingClientRect();
-  const top = rect.height;
-  switch (state.index) {
-    case 0:
-      state.isThumbnail && vm.$refs.isThumbnailContent && (vm.$refs.isThumbnailContent.scrollTop = 0);
-      state.isMenuView && vm.$refs.isMenuViewContent && (vm.$refs.isMenuViewContent.scrollTop = 0);
-      state.scrollTop = 0;
-      break;
-    case 1:
-      break;
-    case 2:
-      break;
-    case 3:
-      state.scrollTop = top;
-      break;
-    default:
-      if (state.isThumbnail) {
-        vm.$refs.isThumbnailContent && (vm.$refs.isThumbnailContent.scrollTop = state.scrollTop);
-        state.scrollTop = state.scrollTop + element.offsetHeight + state.thumbnailTop;
-      } else if (state.isMenuView) {
-        vm.$refs.isMenuViewContent && (vm.$refs.isMenuViewContent.scrollTop = state.scrollTop);
-        state.scrollTop = state.scrollTop + element.offsetHeight + state.menuTop;
-      }
-      break;
+  state.centerIndex = api.getCenterPosition(element) - 1;
+  let slientIndex = -1;
+  if (state.centerIndex > state.index) {
+    slientIndex = state.index;
+  }
+  if (state.index === 0) {
+    state.isThumbnail && vm.$refs.isThumbnailContent && (vm.$refs.isThumbnailContent.scrollTop = 0);
+    state.isMenuView && vm.$refs.isMenuViewContent && (vm.$refs.isMenuViewContent.scrollTop = 0);
+    state.scrollTop = 0;
+  } else if (state.index === slientIndex) {
+  } else {
+    if (state.isThumbnail) {
+      vm.$refs.isThumbnailContent && (vm.$refs.isThumbnailContent.scrollTop = state.scrollTop);
+      state.scrollTop = state.scrollTop + element.offsetHeight + state.thumbnailTop;
+    } else if (state.isMenuView) {
+      vm.$refs.isMenuViewContent && (vm.$refs.isMenuViewContent.scrollTop = state.scrollTop);
+      state.scrollTop = state.scrollTop + element.offsetHeight + state.menuTop;
+    }
+  }
+};
+const getCenterPosition = ({ state, vm }) => (element) => {
+  let contentHeight = 0;
+  let eleHeight = 0;
+  if (state.isThumbnail && vm.$refs.isThumbnailContent) {
+    contentHeight = vm.$refs.isThumbnailContent.getBoundingClientRect().height;
+    eleHeight = element.getBoundingClientRect().height + parseFloat(getComputedStyle(element).marginBottom) - 0;
+    return Math.ceil(contentHeight / eleHeight) / 2;
+  } else if (vm.$refs.isMenuViewContent && vm.$refs.isMenuViewContent) {
+    contentHeight = vm.$refs.isMenuViewContent.getBoundingClientRect().height;
+    eleHeight = element.getBoundingClientRect().height + parseFloat(getComputedStyle(element).marginTop) - 0;
+    return Math.ceil(contentHeight / eleHeight) / 2;
   }
 };
 const handleActions = (state, props, emit) => (action, options = {}) => {
@@ -295,11 +296,11 @@ const handleActions = (state, props, emit) => (action, options = {}) => {
 const computedIsSingle = (props) => () => props.urlList.length <= 1;
 const computedIsFirst = (state) => () => state.index === 0;
 const computedIsLast = ({ state, props }) => () => state.index === props.urlList.length - 1;
-const computedCurrentImg = (state) => () => {
+const computedCurrentImg = ({ state, api }) => () => {
   if (typeof state.urlList[0] === "string") {
-    return state.urlList[state.index];
+    return api.filterImageUrl(state.urlList[state.index]);
   } else if (typeof state.urlList[0] === "object" && state.urlList[0] !== null) {
-    return state.urlList[state.index].url;
+    return api.filterImageUrl(state.urlList[state.index].url);
   }
 };
 const computedImgStyle = ({ state, constants }) => () => {
@@ -353,7 +354,7 @@ const getImageWidth = ({ state, parent, props, vm, mode }) => () => {
   }
   state.imageItemWidth = imageW;
   state.imageAllWidth = state.urlList.length * imageW;
-  if (mode !== "mobile-first") {
+  if (mode === "mobile") {
     if (props.startPosition > 0) {
       state.index = props.startPosition;
       state.imageTransition = 0;
@@ -412,7 +413,7 @@ const swipeRight = ({ state, emit }) => () => {
   } else {
     state.arrowStyle = null;
   }
-  if (state.imageTransform == 0 && state.index == 0) {
+  if (state.imageTransform === 0 && state.index === 0) {
     return;
   }
   state.index = (state.index - 1 + len) % len;
@@ -447,9 +448,13 @@ const langClick = (state) => () => {
     window.navigator.msSaveOrOpenBlob(blob, "img.png");
   } else {
     const a = document.createElement("a");
-    a.href = state.currentImg;
+    a.style = "dispaly:none";
+    a.href = state.currentImg + "?response-content-type=application/octet-stream";
     a.setAttribute("download", "img");
+    a.setAttribute("target", "downloadFile");
+    document.body.appendChild(a);
     a.click();
+    document.body.removeChild(a);
   }
 };
 const touchstart = ({ state, mode, api }) => (e) => {
@@ -629,6 +634,10 @@ const selectOption = ({ state, api }) => (item, index) => {
       break;
   }
 };
+const filterImageUrl = () => (imageUrl) => {
+  const isBase64 = /^data:image\/(png|jpg|jpeg|gif);base64,([a-zA-Z0-9+/]+={0,2})/;
+  return isBase64.test(imageUrl) ? imageUrl : xss.filterUrl(imageUrl);
+};
 export {
   activeItems,
   beforeDestroy,
@@ -640,6 +649,8 @@ export {
   computedIsSingle,
   deviceSupportInstall,
   deviceSupportUninstall,
+  filterImageUrl,
+  getCenterPosition,
   getDefaultPrev,
   getImageWidth,
   getLastPrev,

package/image-viewer/vue.js

@@ -34,7 +34,9 @@ import {
   selectOption,
   langClick,
   getLastPrev,
-  getDefaultPrev
+  getDefaultPrev,
+  getCenterPosition,
+  filterImageUrl
 } from "./index";
 const api = [
   "state",
@@ -72,7 +74,7 @@ const initState = ({ reactive, computed, api: api2, mode, props, constants, inje
     mfPreviewVisible: inject("mfPreviewVisible", null),
     scale: 1,
     time: null,
-    index: mode == "pc" || mode == "mobile-first" ? 0 : props.startPosition,
+    index: mode === "pc" || mode === "mobile-first" ? 0 : props.startPosition,
     imageName: "",
     isShow: false,
     infinite: true,
@@ -111,7 +113,8 @@ const initState = ({ reactive, computed, api: api2, mode, props, constants, inje
     fileName: "",
     scrollTop: 0,
     thumbnailTop: constants.THUMBNAILTOP,
-    menuTop: constants.MENUTOP
+    menuTop: constants.MENUTOP,
+    centerIndex: -1
   });
   return state;
 };
@@ -135,7 +138,7 @@ const initApi = ({ api: api2, state, props, parent, nextTick, emit, t, constants
     computedIsLast: computedIsLast({ state, props }),
     watchVisible: watchVisible(state),
     deviceSupportUninstall: deviceSupportUninstall({ state, mode }),
-    computedCurrentImg: computedCurrentImg(state),
+    computedCurrentImg: computedCurrentImg({ state, api: api2 }),
     computedImgStyle: computedImgStyle({ state, constants }),
     computeZIndex: computeZIndex({ constants, props }),
     hide: hide({ props, api: api2, state }),
@@ -152,7 +155,9 @@ const initApi = ({ api: api2, state, props, parent, nextTick, emit, t, constants
     selectOption: selectOption({ state, api: api2 }),
     langClick: langClick(state),
     getLastPrev: getLastPrev({ state, vm }),
-    getDefaultPrev: getDefaultPrev({ state, vm })
+    getDefaultPrev: getDefaultPrev({ state, vm }),
+    getCenterPosition: getCenterPosition({ state, vm }),
+    filterImageUrl: filterImageUrl()
   });
 };
 const initWatch = ({ watch, state, api: api2, props, nextTick, vm }) => {
@@ -198,6 +203,13 @@ const initWatch = ({ watch, state, api: api2, props, nextTick, vm }) => {
       api2.getImageWidth();
     })
   );
+  watch(
+    () => props.urlList,
+    () => {
+      state.urlList = props.urlList;
+    },
+    { deep: true }
+  );
 };
 const renderless = (props, { computed, onMounted, onBeforeUnmount, onUpdated, reactive, watch, inject, provide }, { t, parent, nextTick, emit, constants, vm, mode }) => {
   const api2 = {};

package/input/index.js

@@ -1,4 +1,5 @@
 import "../chunk-G2ADBYYC.js";
+import { omitText } from "../common/string";
 const HIDDEN_STYLE = `
 height:0 !important;visibility:hidden !important;overflow:hidden !important;
 position:absolute !important;z-index:-1000 !important;top:0 !important;right:0 !important
@@ -56,6 +57,12 @@ const calcTextareaHeight = ({
   props,
   state
 }) => (targetElement, minRows = 1, maxRows = null) => {
+  if (!targetElement) {
+    return {
+      minHeight: "",
+      height: ""
+    };
+  }
   if (!hiddenTextarea) {
     hiddenTextarea = document.createElement("textarea");
     document.body.appendChild(hiddenTextarea);
@@ -76,7 +83,7 @@ const calcTextareaHeight = ({
       minHeight = minHeight + paddingSize + borderSize;
     }
     if (props.size) {
-      minHeight = props.size == "mini" ? minHeight * 0.67 : props.size == "small" ? minHeight : minHeight * 1.17;
+      minHeight = props.size === "mini" ? minHeight * 0.67 : props.size === "small" ? minHeight : minHeight * 1.17;
     }
     if (props.height) {
       minHeight = props.height;
@@ -110,7 +117,8 @@ const handleBlur = ({
   eventName,
   emit,
   props,
-  state
+  state,
+  vm
 }) => (event) => {
   state.focused = false;
   emit("blur", event);
@@ -118,6 +126,9 @@ const handleBlur = ({
   if (props.validateEvent) {
     api.dispatch(componentName, eventName, [props.modelValue]);
   }
+  if (props.hoverExpand) {
+    vm.$refs.textarea.scrollTop = 0;
+  }
 };
 const handleFocus = ({ api, emit, state }) => (event) => {
   state.focused = true;
@@ -137,7 +148,7 @@ const handleInput = ({ api, emit, nextTick, state }) => (event) => {
   nextTick(api.setNativeInputValue);
 };
 const handleChange = (emit) => (event) => emit("change", event.target.value);
-const resizeTextarea = ({ api, parent, refs, state }) => () => {
+const resizeTextarea = ({ api, parent, vm, state, props }) => () => {
   if (isServer) {
     return;
   }
@@ -145,15 +156,22 @@ const resizeTextarea = ({ api, parent, refs, state }) => () => {
   if (type !== "textarea") {
     return;
   }
+  if (props.hoverExpand && !state.enteredTextarea) {
+    state.textareaCalcStyle = {
+      minHeight: state.textareaHeight,
+      height: state.textareaHeight
+    };
+    return;
+  }
   if (!autosize) {
     state.textareaCalcStyle = {
-      minHeight: api.calcTextareaHeight(refs.textarea).minHeight
+      minHeight: api.calcTextareaHeight(vm.$refs.textarea).minHeight
     };
     return;
   }
   const minRows = autosize.minRows;
   const maxRows = autosize.maxRows;
-  state.textareaCalcStyle = api.calcTextareaHeight(refs.textarea, minRows, maxRows);
+  state.textareaCalcStyle = api.calcTextareaHeight(vm.$refs.textarea, minRows, maxRows);
 };
 const setNativeInputValue = ({ api, state }) => () => {
   const input = api.getInput();
@@ -222,7 +240,7 @@ const handlePasswordVisible = ({ api, nextTick, state }) => () => {
   state.passwordVisible = !state.passwordVisible;
   nextTick(api.focus);
 };
-const getSuffixVisible = ({ parent, props, state }) => () => parent.$slots.suffix || props.suffixIcon || state.showClear || props.showPassword || state.isWordLimitVisible || state.validateState && state.needStatusIcon;
+const getSuffixVisible = ({ parent, props, state }) => () => parent.$slots.suffix || props.suffixIcon || state.showClear || props.showPassword || state.isWordLimitVisible || state.validateState && state.needStatusIcon || props.mask && state.inputDisabled;
 const textLength = (value) => {
   if (typeof value === "number") {
     return String(value).length;
@@ -243,8 +261,25 @@ const hasSelection = (api) => () => {
 };
 const handleEnterDisplayOnlyContent = ({ state, props }) => ($event, type) => {
   const target = $event.target;
-  if (target && (target.scrollWidth > target.offsetWidth || type === "textarea" && target.scrollHeight > target.offsetHeight)) {
+  state.displayOnlyTooltip = "";
+  if (!target) {
+    return;
+  }
+  const isOverText = target.scrollWidth > target.offsetWidth || type === "textarea" && target.scrollHeight > target.offsetHeight;
+  if (isOverText) {
     state.displayOnlyTooltip = props.displayOnlyContent || state.nativeInputValue;
+  } else {
+    let isOverTextWhenMask = false;
+    if (props.mask && state.maskValueVisible) {
+      const text = target.textContent;
+      const font = window.getComputedStyle(target).font;
+      const rect = target.getBoundingClientRect();
+      const iconWidth = 16 + 15;
+      isOverTextWhenMask = omitText(text, font, rect.width - iconWidth).o;
+    }
+    if (isOverTextWhenMask) {
+      state.displayOnlyTooltip = props.displayOnlyContent || state.nativeInputValue;
+    }
   }
 };
 const hiddenPassword = ({ state, props }) => () => {
@@ -255,30 +290,53 @@ const hiddenPassword = ({ state, props }) => () => {
   }
   return str;
 };
-const dispatchDisplayedValue = ({ state, props, dispatch, api }) => () => {
-  if (state.isDisplayOnly) {
-    dispatch("FormItem", "displayed-value-changed", {
-      type: props.type || "text",
-      val: api.getDisplayedValue()
-    });
+const getDisplayedMaskValue = ({ state }) => () => {
+  if (state.maskValueVisible) {
+    return state.nativeInputValue;
+  } else {
+    return state.nativeInputValue && state.maskSymbol;
   }
 };
-const getDisplayedValue = ({ state, props }) => () => {
-  if (props.type === "password") {
-    return state.hiddenPassword || "-";
-  } else {
-    return props.displayOnlyContent || state.nativeInputValue || "-";
+const setInputDomValue = ({ state, props, nextTick, vm }) => (type) => {
+  nextTick(() => {
+    const input = vm.$refs.input;
+    if (props.mask && state.nativeInputValue && input) {
+      input.value = state.maskValueVisible || !state.inputDisabled ? state.nativeInputValue : state.maskSymbol;
+    }
+    if (type === "mask" && !props.mask && input) {
+      input.value = state.nativeInputValue;
+    }
+  });
+};
+const handleEnterTextarea = ({ api, state, props, nextTick }) => () => {
+  if (props.hoverExpand && !state.isDisplayOnly) {
+    state.enteredTextarea = true;
+    nextTick(api.resizeTextarea);
   }
 };
+const handleLeaveTextarea = ({ api, state, props, nextTick, vm }) => () => {
+  if (props.hoverExpand && !state.isDisplayOnly) {
+    state.enteredTextarea = false;
+    nextTick(() => {
+      api.resizeTextarea();
+      vm.$refs.textarea.scrollTop = 0;
+    });
+  }
+};
+const getDisplayOnlyText = ({ parent, state, props }) => () => {
+  const text = props.displayOnlyContent || state.nativeInputValue;
+  const showEmptyValue = typeof props.showEmptyValue === "boolean" ? props.showEmptyValue : (parent.tinyForm || {}).showEmptyValue;
+  return showEmptyValue ? text : text || "-";
+};
 export {
   blur,
   calcIconOffset,
   calcTextareaHeight,
   calculateNodeStyling,
   clear,
-  dispatchDisplayedValue,
   focus,
-  getDisplayedValue,
+  getDisplayOnlyText,
+  getDisplayedMaskValue,
   getInput,
   getSuffixVisible,
   handleBlur,
@@ -287,14 +345,17 @@ export {
   handleCompositionStart,
   handleCompositionUpdate,
   handleEnterDisplayOnlyContent,
+  handleEnterTextarea,
   handleFocus,
   handleInput,
+  handleLeaveTextarea,
   handlePasswordVisible,
   hasSelection,
   hiddenPassword,
   inputStyle,
   resizeTextarea,
   select,
+  setInputDomValue,
   setNativeInputValue,
   showBox,
   textLength,

package/input/vue.js

@@ -29,9 +29,12 @@ import {
   hasSelection,
   handleEnterDisplayOnlyContent,
   hiddenPassword,
-  dispatchDisplayedValue,
-  getDisplayedValue,
-  inputStyle
+  setInputDomValue,
+  getDisplayedMaskValue,
+  inputStyle,
+  handleEnterTextarea,
+  handleLeaveTextarea,
+  getDisplayOnlyText
 } from "./index";
 import useStorageBox from "../tall-storage/vue-storage-box";
 const api = [
@@ -65,7 +68,9 @@ const api = [
   "hasSelection",
   "handleEnterDisplayOnlyContent",
   "hiddenPassword",
-  "inputStyle"
+  "inputStyle",
+  "handleEnterTextarea",
+  "handleLeaveTextarea"
 ];
 const initState = ({
   reactive,
@@ -74,22 +79,28 @@ const initState = ({
   props,
   parent,
   constants,
-  api: api2
+  api: api2,
+  vm
 }) => {
   const state = reactive({
     mode,
+    maskSymbol: constants.MASKSYMBOL,
     focused: false,
     hovering: false,
     isComposing: false,
     passwordVisible: false,
+    maskValueVisible: false,
     boxVisibility: false,
     textareaCalcStyle: {},
     checkedLabel: "",
+    enteredTextarea: false,
     sheetvalue: props.modelValue,
     inputSize: computed(() => props.size || state.formItemSize),
+    inputSizeMf: computed(() => props.size || (parent.tinyForm || {}).size),
     showClear: computed(
       () => props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (state.focused || state.hovering)
     ),
+    textareaHeight: vm.theme === "saas" ? "28px" : "30px",
     upperLimit: computed(() => parent.$attrs.maxlength),
     textLength: computed(() => textLength(props.modelValue)),
     inputExceed: computed(() => state.isWordLimitVisible && state.textLength > state.upperLimit),
@@ -119,7 +130,9 @@ const initState = ({
       () => (props.displayOnly || (parent.tinyForm || {}).displayOnly) && ["text", "textarea", "password", "number"].includes(props.type)
     ),
     displayOnlyTooltip: "",
-    hiddenPassword: computed(() => api2.hiddenPassword())
+    hiddenPassword: computed(() => api2.hiddenPassword()),
+    displayedMaskValue: computed(() => api2.getDisplayedMaskValue()),
+    displayOnlyText: computed(() => api2.getDisplayOnlyText())
   });
   return state;
 };
@@ -132,7 +145,8 @@ const initApi = ({
   vm,
   props,
   CLASS_PREFIX,
-  parent
+  parent,
+  nextTick
 }) => {
   Object.assign(api2, {
     state,
@@ -148,8 +162,10 @@ const initApi = ({
     calculateNodeStyling: calculateNodeStyling(),
     handleCompositionStart: handleCompositionStart(state),
     handleCompositionUpdate: handleCompositionUpdate(state),
-    dispatchDisplayedValue: dispatchDisplayedValue({ state, props, dispatch, api: api2 }),
-    getDisplayedValue: getDisplayedValue({ state, props }),
+    setInputDomValue: setInputDomValue({ state, props, nextTick, vm }),
+    getDisplayOnlyText: getDisplayOnlyText({ parent, props, state }),
+    handleEnterTextarea: handleEnterTextarea({ api: api2, state, props, nextTick }),
+    handleLeaveTextarea: handleLeaveTextarea({ api: api2, state, props, nextTick, vm }),
     inputStyle: inputStyle({ props })
   });
 };
@@ -163,7 +179,7 @@ const mergeApi = ({
   nextTick,
   parent,
   state,
-  refs
+  vm
 }) => {
   const { storageData, isMemoryStorage, addMemory, searchMemory, selectedMemory } = storages;
   return Object.assign(api2, {
@@ -181,11 +197,12 @@ const mergeApi = ({
       emit,
       eventName: eventName.blur,
       props,
-      state
+      state,
+      vm
     }),
     handleFocus: handleFocus({ api: api2, emit, state }),
     handleInput: handleInput({ api: api2, emit, nextTick, state }),
-    resizeTextarea: resizeTextarea({ api: api2, parent, refs, state }),
+    resizeTextarea: resizeTextarea({ api: api2, parent, vm, state, props }),
     updateIconOffset: updateIconOffset(api2),
     calcTextareaHeight: calcTextareaHeight({
       api: api2,
@@ -198,7 +215,8 @@ const mergeApi = ({
     handlePasswordVisible: handlePasswordVisible({ api: api2, nextTick, state }),
     hasSelection: hasSelection(api2),
     handleEnterDisplayOnlyContent: handleEnterDisplayOnlyContent({ state, props }),
-    hiddenPassword: hiddenPassword({ state, props })
+    hiddenPassword: hiddenPassword({ state, props }),
+    getDisplayedMaskValue: getDisplayedMaskValue({ state })
   });
 };
 const initWatch = ({
@@ -222,6 +240,15 @@ const initWatch = ({
       if (props.validateEvent) {
         api2.dispatch(componentName, eventName.change, [value]);
       }
+      api2.setInputDomValue();
+    }
+  );
+  watch(() => state.maskValueVisible, api2.setInputDomValue);
+  watch(() => state.inputDisabled, api2.setInputDomValue);
+  watch(
+    () => props.mask,
+    () => {
+      api2.setInputDomValue("mask");
     }
   );
   watch(
@@ -252,7 +279,6 @@ const initWatch = ({
         api2.setNativeInputValue();
         api2.resizeTextarea();
         api2.updateIconOffset();
-        api2.dispatchDisplayedValue();
       });
     }
   );
@@ -270,17 +296,17 @@ const renderless = (props, { computed, onMounted, onUpdated, reactive, toRefs, w
     Input: constants.inputMode(mode),
     InputGroup: constants.inputGroupMode(mode)
   };
-  const state = initState({ reactive, computed, mode, props, parent, constants, api: api2 });
-  initApi({ api: api2, state, dispatch, broadcast, emit, refs, props, CLASS_PREFIX, parent, vm });
+  const state = initState({ reactive, computed, mode, props, parent, constants, api: api2, vm });
+  initApi({ api: api2, state, dispatch, broadcast, emit, refs, props, CLASS_PREFIX, parent, vm, nextTick });
   const storages = useStorageBox({ api: api2, props, reactive, toRefs });
   parent.tinyForm = parent.tinyForm || inject("form", null);
-  mergeApi({ api: api2, storages, componentName, emit, eventName, props, state, nextTick, parent, refs });
+  mergeApi({ api: api2, storages, componentName, emit, eventName, props, state, nextTick, parent, vm });
   initWatch({ watch, state, api: api2, props, nextTick, emit, componentName, eventName });
   onMounted(() => {
     api2.setNativeInputValue();
     api2.resizeTextarea();
     api2.updateIconOffset();
-    api2.dispatchDisplayedValue();
+    api2.setInputDomValue();
     dispatch("Select", "input-mounted", vm.$el);
     dispatch("Tooltip", "tooltip-update", vm.$el);
   });