@opentiny/vue-renderless 3.13.1 → 3.14.0

package/form-item/index.js

@@ -42,7 +42,7 @@ const computedLabelStyle = ({ props, state }) => () => {
   if (state.form.labelPosition === POSITION.Top) {
     return result;
   }
-  const labelWidth = props.labelWidth || state.form.labelWidth;
+  const labelWidth = props.labelWidth || state.form.state.labelWidth;
   if (labelWidth) {
     result.width = labelWidth;
   }
@@ -54,7 +54,7 @@ const computedValueStyle = ({ props, state }) => () => {
     result.width = "100%";
     return result;
   }
-  const labelWidth = props.labelWidth || state.form.labelWidth;
+  const labelWidth = props.labelWidth || state.form.state.labelWidth;
   if (labelWidth) {
     if (labelWidth === "auto") {
       result.width = labelWidth;
@@ -73,11 +73,11 @@ const computedContentStyle = ({ props, state }) => () => {
   if (!label && !props.labelWidth && state.isNested) {
     return result;
   }
-  const labelWidth = props.labelWidth || state.form.labelWidth;
+  const labelWidth = props.labelWidth || state.form.state.labelWidth;
   if (labelWidth === "auto") {
     if (props.labelWidth === "auto") {
       result.marginLeft = state.computedLabelWidth;
-    } else if (state.form.labelWidth === "auto") {
+    } else if (state.form.state.labelWidth === "auto") {
       result.marginLeft = state.formInstance.state.autoLabelWidth;
     }
   } else {
@@ -235,7 +235,7 @@ const resetField = ({ api, nextTick, props, state }) => () => {
 const getRules = ({ props, state }) => () => {
   let formRules = state.form.rules || {};
   const selfRules = props.rules;
-  const requiredRule = props.required !== void 0 ? { required: !!props.required } : [];
+  const requiredRule = props.required !== void 0 ? { required: Boolean(props.required) } : [];
   const prop = getPropByPath(formRules, props.prop || "");
   formRules = formRules ? prop.o[props.prop || ""] || prop.v : [];
   return [].concat(selfRules || formRules || []).concat(requiredRule);

package/form-item/vue.js

@@ -97,7 +97,9 @@ const initState = ({
     getValidateType: computed(() => api2.computedGetValidateType()),
     validateIcon: computed(() => api2.computedValidateIcon()),
     isErrorInline: computed(() => api2.computedIsErrorInline()),
-    isErrorBlock: computed(() => api2.computedIsErrorBlock())
+    isErrorBlock: computed(() => api2.computedIsErrorBlock()),
+    disabled: computed(() => state.formInstance.disabled),
+    tooltipType: computed(() => state.formInstance.state.tooltipType)
   });
   return state;
 };

package/fullscreen/index.js

@@ -15,7 +15,7 @@ const request = ({ props, state, vm, sf, api }) => () => {
   const change = () => {
     if (state.isPageOnly) {
       state.isFullscreen = true;
-      api.onChangeFullscreen();
+      api.onChangeFullScreen();
       off(document, "keyup", api.keypressCallback);
       on(document, "keyup", api.keypressCallback);
     } else {
@@ -42,7 +42,7 @@ const exit = ({ state, api, sf, props }) => () => {
     }
     if (state.isPageOnly) {
       state.isFullscreen = false;
-      api.onChangeFullscreen();
+      api.onChangeFullScreen();
       off(document, "keyup", api.keypressCallback);
     } else {
       sf.exit();
@@ -62,14 +62,14 @@ const fullScreenCallback = ({ state, sf, api }) => () => {
     sf.off("change", api.fullScreenCallback);
   }
   state.isFullscreen = sf.isFullscreen;
-  api.onChangeFullscreen();
+  api.onChangeFullScreen();
 };
 const keypressCallback = (api) => (e) => {
   if (e.key === "Escape") {
     api.exit();
   }
 };
-const onChangeFullscreen = ({ props, state, vm, emit }) => () => {
+const onChangeFullScreen = ({ props, state, vm, emit }) => () => {
   if (!state.isFullscreen) {
     if (props.teleport && state.__parentNode) {
       state.__parentNode.insertBefore(vm.$el, state.__token);
@@ -106,7 +106,7 @@ export {
   fullScreenCallback,
   getState,
   keypressCallback,
-  onChangeFullscreen,
+  onChangeFullScreen,
   request,
   shadeClick,
   toggle

package/fullscreen/vue.js

@@ -9,7 +9,7 @@ import {
   shadeClick,
   keypressCallback,
   fullScreenCallback,
-  onChangeFullscreen,
+  onChangeFullScreen,
   computeWrapperStyle
 } from "./index";
 const api = [
@@ -22,7 +22,7 @@ const api = [
   "shadeClick",
   "keypressCallback",
   "fullScreenCallback",
-  "onChangeFullscreen"
+  "onChangeFullScreen"
 ];
 const renderless = (props, { reactive, computed, watch }, { vm, emit }) => {
   const api2 = {};
@@ -45,7 +45,7 @@ const renderless = (props, { reactive, computed, watch }, { vm, emit }) => {
     request: request({ props, state, vm, sf, api: api2 }),
     fullScreenCallback: fullScreenCallback({ state, sf, api: api2 }),
     computeWrapperStyle: computeWrapperStyle({ props, state }),
-    onChangeFullscreen: onChangeFullscreen({ props, state, vm, emit })
+    onChangeFullScreen: onChangeFullScreen({ props, state, vm, emit })
   });
   watch(
     () => props.fullscreen,

package/grid/plugins/export.js

@@ -37,11 +37,14 @@ const getCsvContent = ($table, opts, oColumns, oData) => {
   const tableEl = $table.$el;
   const tab = opts.useTabs === false ? "" : "	";
   const { columns, datas } = getCsvData(opts, oData, oColumns, tableEl);
-  let content = datas.length ? "\uFEFF" : "";
+  let content = "\uFEFF";
   const transfrom = (str) => {
     if (typeof str === "string" && str.replace(/ /g, "").match(/[\s,"]/)) {
       str = '"' + str.replace(/"/g, '""') + '"';
     }
+    if (typeof str === "string" && str.match(/^([@=]|([-\\+].*[^0-9\\.])).*$/)) {
+      str = " " + str;
+    }
     return str + tab;
   };
   if (opts.isHeader) {
@@ -71,7 +74,7 @@ const getCsvContent = ($table, opts, oColumns, oData) => {
 };
 const getCsvUrl = (opts, content) => {
   if (window.Blob && window.URL && window.URL.createObjectURL && browser.name !== "safari") {
-    return URL.createObjectURL(new Blob([content], { type: "text/csv" }));
+    return URL.createObjectURL(new Blob([content], { type: "text/csv;charset=utf-8" }));
   }
   return `data:attachment/csv;charset=utf-8,${encodeURIComponent(content)}`;
 };

package/grid/utils/column.js

@@ -41,6 +41,7 @@ function setBasicProperty(column, context) {
   column.renderer = context.renderer;
   column.editor = context.editor;
   column.operationConfig = context.operationConfig;
+  column.equals = context.equals;
 }
 function ColumnConfig(context, { renderHeader, renderCell, renderData } = {}, config = {}) {
   setBasicProperty(this, context);

package/grid/utils/dom.js

@@ -96,11 +96,16 @@ const colToVisible = ($table, column, move) => {
     }
   });
 };
+const hasDataTag = (el, value) => {
+  if (!el || !value)
+    return false;
+  return (" " + el.getAttribute("data-tag") + " ").includes(" " + value + " ");
+};
 const getEventTargetNode = (event, container, queryCls) => {
   let targetEl;
   let target = getActualTarget(event);
   while (target && target.nodeType && target !== document) {
-    if (queryCls && hasClass(target, queryCls)) {
+    if (queryCls && (hasClass(target, queryCls) || hasDataTag(target, queryCls))) {
       targetEl = target;
     } else if (target === container) {
       return {
@@ -188,6 +193,7 @@ export {
   getEventTargetNode,
   getOffsetPos,
   getRowNodes,
+  hasDataTag,
   isPx,
   isScale,
   rowToVisible,

package/image/index.js

@@ -1,8 +1,8 @@
 import "../chunk-G2ADBYYC.js";
 import { on, off, getScrollContainer, isInContainer } from "../common/deps/dom";
 import { typeOf } from "../common/type";
-import "../common/deps/requestAnimationFrame";
 import { rafThrottle } from "../image-viewer";
+import { xss } from "../common/xss";
 const isSupportObjectFit = () => document.documentElement.style.objectFit !== void 0;
 const isHtmlElement = (node) => node && node.nodeType === Node.ELEMENT_NODE;
 const computedGetImageStyle = ({ props, api }) => () => {
@@ -108,6 +108,10 @@ const mounted = ({ props, api }) => () => {
     api.loadImage();
   }
 };
+const filterImageUrl = (props) => () => {
+  const isBase64 = /^data:image\/(png|jpg|jpeg|gif);base64,([a-zA-Z0-9+/]+={0,2})/;
+  return isBase64.test(props.src) ? props.src : xss.filterUrl(props.src);
+};
 export {
   addLazyLoadListener,
   clickHandler,
@@ -116,6 +120,7 @@ export {
   computedGetImageStyle,
   computedGetPreview,
   deleteHander,
+  filterImageUrl,
   getImageStyle,
   handleError,
   handleLazyLoad,

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 = {};