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

package/image/vue.js

@@ -13,7 +13,8 @@ import {
   clickHandler,
   closeViewer,
   mounted,
-  deleteHander
+  deleteHander,
+  filterImageUrl
 } from "./index";
 const api = [
   "state",
@@ -46,7 +47,8 @@ const initState = ({
     showViewer: false,
     getPreview: computed(() => api2.computedGetPreview()),
     getImageStyle: computed(() => api2.computedGetImageStyle()),
-    getAlignCenter: computed(() => api2.computedGetAlignCenter())
+    getAlignCenter: computed(() => api2.computedGetAlignCenter()),
+    src: computed(() => api2.filterImageUrl())
   });
   return state;
 };
@@ -75,7 +77,8 @@ const initApi = ({
     loadImage: loadImage({ api: api2, state, props, attrs }),
     computedGetImageStyle: computedGetImageStyle({ api: api2, props }),
     addLazyLoadListener: addLazyLoadListener({ api: api2, props, state, vm }),
-    deleteHander: deleteHander(emit)
+    deleteHander: deleteHander(emit),
+    filterImageUrl: filterImageUrl(props)
   });
 };
 const initWatch = ({ watch, state, api: api2, props }) => {

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
@@ -37,6 +38,11 @@ const showBox = (state) => () => {
   }
   state.boxVisibility = true;
 };
+const inputStyle = ({ props }) => () => {
+  return {
+    textAlign: props.textAlign
+  };
+};
 const calculateNodeStyling = () => (targetElement) => {
   const style = window.getComputedStyle(targetElement);
   const boxSizing = style.getPropertyValue(STYLE.BoxSizing);
@@ -51,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);
@@ -71,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;
@@ -95,7 +107,7 @@ const calcTextareaHeight = ({
   hiddenTextarea = null;
   return textareaStyle;
 };
-const getInput = (refs) => () => refs.input || refs.textarea;
+const getInput = (vm) => () => vm.$refs.input || vm.$refs.textarea;
 const blur = (api) => () => api.getInput().blur();
 const focus = (api) => () => api.getInput().focus();
 const select = (api) => () => api.getInput().select();
@@ -105,7 +117,8 @@ const handleBlur = ({
   eventName,
   emit,
   props,
-  state
+  state,
+  vm
 }) => (event) => {
   state.focused = false;
   emit("blur", event);
@@ -113,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;
@@ -132,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;
   }
@@ -140,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();
@@ -217,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;
@@ -229,7 +252,7 @@ const watchFormSelect = ({ emit, props, state }) => (value) => {
     emit("update:modelValue", value);
     emit("change", value);
     const filterData = props.selectMenu.length && props.selectMenu.filter((item) => item.id === value).shift();
-    state.checkedLable = filterData ? filterData.label : "";
+    state.checkedLabel = filterData ? filterData.label : "";
   }
 };
 const hasSelection = (api) => () => {
@@ -238,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 }) => () => {
@@ -250,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,
@@ -282,13 +345,17 @@ export {
   handleCompositionStart,
   handleCompositionUpdate,
   handleEnterDisplayOnlyContent,
+  handleEnterTextarea,
   handleFocus,
   handleInput,
+  handleLeaveTextarea,
   handlePasswordVisible,
   hasSelection,
   hiddenPassword,
+  inputStyle,
   resizeTextarea,
   select,
+  setInputDomValue,
   setNativeInputValue,
   showBox,
   textLength,