@opentiny/vue-renderless 3.11.0-alpha.0 → 3.11.0

package/anchor/index.js

@@ -30,10 +30,13 @@ const updateSkidPosition = ({ vm, state, emit }) => {
   const { currentLink } = state;
   const activeEl = vm.$refs[currentLink];
   const { skidRef, maskRef, anchorRef } = vm.$refs;
-  if (!activeEl || !anchorRef) {
+  if (!activeEl) {
     return;
   }
   emit("onChange", currentLink);
+  if (!anchorRef || !skidRef || !maskRef) {
+    return;
+  }
   const { offsetHeight, offsetWidth } = activeEl;
   const { top: linkTitleClientTop, left: linkTitleClientLeft } = activeEl.getBoundingClientRect();
   const { top: anchorClientTop, left: anchorClientLeft } = anchorRef.getBoundingClientRect();

package/common/deps/fastdom/singleton.js

@@ -64,7 +64,7 @@ class FastDom {
   }
   extend(props) {
     if (!props || typeof props !== "object")
-      throw new Error("[AUI][FastDom] expected object");
+      throw new Error("[TINY][FastDom] expected object");
     const child = Object.create(this);
     mixin(child, props);
     child.fastdom = this;

package/common/deps/popper.js

@@ -85,14 +85,17 @@ const getScrollParent = (el) => {
 };
 const getOffsetRectRelativeToCustomParent = (el, parent, fixed) => {
   let { top, left, width, height } = getBoundingClientRect(el);
-  let parentRect = getBoundingClientRect(parent);
   if (fixed) {
-    let { scrollTop, scrollLeft } = getScrollParent(parent);
-    parentRect.top += scrollTop;
-    parentRect.bottom += scrollTop;
-    parentRect.left += scrollLeft;
-    parentRect.right += scrollLeft;
+    return {
+      top,
+      left,
+      bottom: top + height,
+      right: left + width,
+      width,
+      height
+    };
   }
+  let parentRect = getBoundingClientRect(parent);
   let rect = {
     top: top - parentRect.top,
     left: left - parentRect.left,
@@ -137,6 +140,9 @@ const getAllScrollParents = (el, parents = []) => {
   const parent = el.parentNode;
   if (parent) {
     isScrollElement(parent) && parents.push(parent);
+    if (getStyleComputedProperty(parent, "position") === "fixed") {
+      return parents;
+    }
     return getAllScrollParents(parent, parents);
   }
   return parents;
@@ -483,10 +489,11 @@ class Popper {
       let isFixed2 = data.offsets.popper.position === "fixed";
       let scrollTop = isFixed2 ? 0 : getScrollTopValue(scrollParent);
       let scrollLeft = isFixed2 ? 0 : getScrollLeftValue(scrollParent);
+      const viewportWindow = PopupManager.viewportWindow || window;
       boundaries = {
         top: 0 - (offsetParentRect.top - scrollTop),
-        right: window.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft),
-        bottom: window.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop),
+        right: viewportWindow.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft),
+        bottom: viewportWindow.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop),
         left: 0 - (offsetParentRect.left - scrollLeft)
       };
     } else {

package/common/deps/popup-manager.js

@@ -30,6 +30,7 @@ const PopupManager = {
   // 当前是否有Modal
   popLockClass: "popup-parent--hidden",
   oldBodyBorder: "",
+  viewportWindow: null,
   fixBodyBorder() {
     const barWidth = window.innerWidth - document.documentElement.clientWidth;
     if (barWidth) {

package/common/event.js

@@ -13,6 +13,13 @@ const emitEvent = (emit, name, ...args) => {
   }
   return !cancel;
 };
+const getActualTarget = (e) => {
+  if (!e || !e.target) {
+    return null;
+  }
+  return e.target.shadowRoot && e.composed ? e.composedPath()[0] || e.target : e.target;
+};
 export {
-  emitEvent
+  emitEvent,
+  getActualTarget
 };

package/common/index.js

@@ -224,7 +224,7 @@ const CASCADER = {
   PropsHover: "hoverThreshold",
   MenuConnector: "cascader-menu-"
 };
-const version = "3.11.0-alpha.0";
+const version = "3.11.0";
 const log = (data, type = "log") => {
   uLog.logger[type](data);
 };

package/common/runtime.js

@@ -22,7 +22,7 @@ import vuePopup from "./deps/vue-popup";
 import validate from "./validate";
 import memorize from "./deps/memorize";
 import * as common from ".";
-const version = "3.11.0-alpha.0";
+const version = "3.11.0";
 const Renderless = {
   browser,
   array,

package/dialog-box/index.js

@@ -193,8 +193,8 @@ const handleDrag = ({ parent, props, state, emit }) => (event) => {
     }
     let offsetWidth = modalBoxElem.offsetWidth;
     let offsetHeight = modalBoxElem.offsetHeight;
-    let maxX = visibleWidth - offsetWidth;
-    let maxY = visibleHeight - offsetHeight;
+    let maxX = Math.max(visibleWidth - offsetWidth, 0);
+    let maxY = Math.max(visibleHeight - offsetHeight, 0);
     let left = event2.clientX - disX;
     let top = event2.clientY - disY;
     left = left < 0 ? 0 : left > maxX ? maxX : left;

package/form/index.js

@@ -24,6 +24,25 @@ const computedHideRequiredAsterisk = ({ props, designConfig }) => () => {
   var _a, _b;
   return (_b = (_a = props.hideRequiredAsterisk) != null ? _a : designConfig == null ? void 0 : designConfig.hideRequiredAsterisk) != null ? _b : false;
 };
+const computedValidateIcon = ({ props, designConfig }) => () => {
+  var _a, _b, _c;
+  return (_c = (_b = props.validateIcon) != null ? _b : (_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a.validateIcon) != null ? _c : null;
+};
+const computedIsErrorInline = ({ props, designConfig }) => () => {
+  if (props.messageType) {
+    return props.messageType === "inline";
+  }
+  if (typeof props.inlineMessage === "boolean") {
+    return props.inlineMessage;
+  }
+  return (designConfig == null ? void 0 : designConfig.messageType) === "inline" || false;
+};
+const computedIsErrorBlock = ({ props, designConfig }) => () => {
+  if (props.messageType) {
+    return props.messageType === "block";
+  }
+  return (designConfig == null ? void 0 : designConfig.messageType) === "block" || false;
+};
 const created = ({ parent, state }) => () => {
   parent.$on("form:addField", (field) => {
     if (field) {
@@ -166,6 +185,9 @@ export {
   clearValidate,
   computedAutoLabelWidth,
   computedHideRequiredAsterisk,
+  computedIsErrorBlock,
+  computedIsErrorInline,
+  computedValidateIcon,
   created,
   deregisterLabelWidth,
   getLabelWidthIndex,

package/form/vue.js

@@ -3,6 +3,9 @@ import {
   watchRules,
   computedAutoLabelWidth,
   computedHideRequiredAsterisk,
+  computedValidateIcon,
+  computedIsErrorInline,
+  computedIsErrorBlock,
   created,
   resetFields,
   clearValidate,
@@ -41,6 +44,9 @@ const renderless = (props, { computed, inject, provide, reactive, watch, onBefor
     potentialLabelWidthArr: [],
     autoLabelWidth: computed(() => api2.computedAutoLabelWidth()),
     hideRequiredAsterisk: computed(() => api2.computedHideRequiredAsterisk()),
+    validateIcon: computed(() => api2.computedValidateIcon()),
+    isErrorInline: computed(() => api2.computedIsErrorInline()),
+    isErrorBlock: computed(() => api2.computedIsErrorBlock()),
     isDisplayOnly: computed(() => props.displayOnly),
     hasRequired: computed(() => {
       if (props.rules) {
@@ -61,6 +67,9 @@ const renderless = (props, { computed, inject, provide, reactive, watch, onBefor
     updateTip: updateTip({ props, state }),
     computedAutoLabelWidth: computedAutoLabelWidth({ state }),
     computedHideRequiredAsterisk: computedHideRequiredAsterisk({ props, designConfig }),
+    computedValidateIcon: computedValidateIcon({ props, designConfig }),
+    computedIsErrorInline: computedIsErrorInline({ props, designConfig }),
+    computedIsErrorBlock: computedIsErrorBlock({ props, designConfig }),
     created: created({ parent, state }),
     resetFields: resetFields({ props, state }),
     clearValidate: clearValidate(state),

package/form-item/index.js

@@ -16,6 +16,27 @@ const watchValidateStatus = (state) => (value) => {
   state.validateState = value;
 };
 const computedGetValidateType = ({ props, state }) => () => props.validateType || (state.formInstance ? state.formInstance.validateType : "");
+const computedValidateIcon = ({ props, state }) => () => {
+  var _a, _b, _c, _d;
+  return (_d = (_c = props.validateIcon) != null ? _c : (_b = (_a = state == null ? void 0 : state.formInstance) == null ? void 0 : _a.state) == null ? void 0 : _b.validateIcon) != null ? _d : null;
+};
+const computedIsErrorInline = ({ props, state }) => () => {
+  var _a, _b, _c;
+  if (props.messageType) {
+    return props.messageType === "inline";
+  }
+  if (typeof props.inlineMessage === "boolean") {
+    return props.inlineMessage;
+  }
+  return (_c = (_b = (_a = state == null ? void 0 : state.formInstance) == null ? void 0 : _a.state) == null ? void 0 : _b.isErrorInline) != null ? _c : false;
+};
+const computedIsErrorBlock = ({ props, state }) => () => {
+  var _a, _b, _c;
+  if (props.messageType) {
+    return props.messageType === "block";
+  }
+  return (_c = (_b = (_a = state == null ? void 0 : state.formInstance) == null ? void 0 : _a.state) == null ? void 0 : _b.isErrorBlock) != null ? _c : false;
+};
 const computedLabelStyle = ({ props, state }) => () => {
   const result = { width: "" };
   if (state.form.labelPosition === POSITION.Top) {
@@ -343,8 +364,11 @@ export {
   computedFieldValue,
   computedForm,
   computedGetValidateType,
+  computedIsErrorBlock,
+  computedIsErrorInline,
   computedIsRequired,
   computedLabelStyle,
+  computedValidateIcon,
   computedValueStyle,
   getDisplayedValue,
   getFilteredRule,

package/form-item/vue.js

@@ -21,6 +21,9 @@ import {
   computedIsRequired,
   computedFieldValue,
   computedGetValidateType,
+  computedValidateIcon,
+  computedIsErrorInline,
+  computedIsErrorBlock,
   updateTip,
   wrapValidate,
   getDisplayedValue,
@@ -85,12 +88,15 @@ const initState = ({
     isDisplayOnly: computed(() => state.formInstance.displayOnly),
     labelPosition: computed(() => state.formInstance.labelPosition),
     hideRequiredAsterisk: computed(() => state.formInstance.state.hideRequiredAsterisk),
+    // isErrorInline: computed(() => state.formInstance.state.isErrorInline),
     labelSuffix: computed(() => state.formInstance.labelSuffix),
     labelWidth: computed(() => state.formInstance.labelWidth),
     showMessage: computed(() => state.formInstance.showMessage),
-    inlineMessage: computed(() => state.formInstance.inlineMessage),
     sizeClass: computed(() => state.formItemSize),
-    getValidateType: computed(() => api2.computedGetValidateType())
+    getValidateType: computed(() => api2.computedGetValidateType()),
+    validateIcon: computed(() => api2.computedValidateIcon()),
+    isErrorInline: computed(() => api2.computedIsErrorInline()),
+    isErrorBlock: computed(() => api2.computedIsErrorBlock())
   });
   return state;
 };
@@ -108,6 +114,9 @@ const initApi = ({ api: api2, state, dispatch, broadcast, refs, props, constants
     computedForm: computedForm({ constants, instance, state }),
     computedFieldValue: computedFieldValue({ props, state }),
     computedGetValidateType: computedGetValidateType({ props, state }),
+    computedValidateIcon: computedValidateIcon({ props, state }),
+    computedIsErrorInline: computedIsErrorInline({ props, state }),
+    computedIsErrorBlock: computedIsErrorBlock({ props, state }),
     clearValidate: clearValidate(state),
     getRules: getRules({ props, state }),
     updateComputedLabelWidth: updateComputedLabelWidth(state),

package/grid/utils/dom.js

@@ -1,6 +1,7 @@
 import "../../chunk-G2ADBYYC.js";
 import { getRowid } from "./common";
 import { hasClass } from "../../common/deps/dom";
+import { getActualTarget } from "../../common/event";
 import { arrayIndexOf } from "../static";
 const ATTR_NAME = "data-rowid";
 const CELL_CLS = ".tiny-grid-cell";
@@ -107,7 +108,7 @@ const getDomNode = () => {
 };
 const getEventTargetNode = (event, container, queryCls) => {
   let targetEl;
-  let target = event.target;
+  let target = getActualTarget(event);
   while (target && target.nodeType && target !== document) {
     if (queryCls && hasClass(target, queryCls)) {
       targetEl = target;

package/image/index.js

@@ -3,8 +3,16 @@ import { on, off, getScrollContainer, isInContainer } from "../common/deps/dom";
 import { typeOf } from "../common/type";
 import "../common/deps/requestAnimationFrame";
 import { rafThrottle } from "../image-viewer";
+const isSupportObjectFit = () => document.documentElement.style.objectFit !== void 0;
 const isHtmlElement = (node) => node && node.nodeType === Node.ELEMENT_NODE;
-const computedGetImageStyle = ({ props }) => () => props.fit ? { "object-fit": props.fit } : {};
+const computedGetImageStyle = ({ props, api }) => () => {
+  const { fit } = props;
+  if (fit) {
+    return isSupportObjectFit() ? { "object-fit": fit } : api.getImageStyle(fit);
+  }
+  return {};
+};
+const computedGetAlignCenter = ({ props, constants }) => () => !isSupportObjectFit() && props.fit !== constants.FILL;
 const computedGetPreview = (props) => () => Array.isArray(props.previewSrcList) && props.previewSrcList.length > 0;
 const loadImage = ({ state, api, attrs, props }) => () => {
   state.loading = true;
@@ -18,7 +26,7 @@ const loadImage = ({ state, api, attrs, props }) => () => {
       img.setAttribute(key, value);
     }
   });
-  img.src = props.src;
+  img.src = props.src || "";
 };
 const handleLoad = ({ state, emit }) => (event, img) => {
   state.imageWidth = img.width;
@@ -66,7 +74,32 @@ const removeLazyLoadListener = (state) => () => {
   state._scrollContainer = null;
   state._lazyLoadHandler = null;
 };
-const clickHandler = (state) => () => state.showViewer = true;
+const getImageStyle = ({ state, vm, constants }) => (fit) => {
+  const { imageWidth, imageHeight } = state;
+  const { clientWidth: containerWidth, clientHeight: containerHeight } = vm.$el;
+  if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) {
+    return {};
+  }
+  const vertical = imageWidth / imageHeight < 1;
+  if (fit === constants.SCALE_DOWN) {
+    const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
+    fit = isSmaller ? constants.NONE : constants.CONTAIN;
+  }
+  if (fit === constants.NONE) {
+    return { width: "auto", height: "auto" };
+  }
+  if (fit === constants.CONTAIN) {
+    return vertical ? { width: "auto" } : { height: "auto" };
+  }
+  if (fit === constants.COVER) {
+    return vertical ? { height: "auto" } : { width: "auto" };
+  }
+  return {};
+};
+const clickHandler = (state) => () => {
+  state.showViewer = true;
+  state.mfPreviewVisible = true;
+};
 const closeViewer = (state) => () => state.showViewer = false;
 const mounted = ({ props, api }) => () => {
   if (props.lazy) {
@@ -79,9 +112,11 @@ export {
   addLazyLoadListener,
   clickHandler,
   closeViewer,
+  computedGetAlignCenter,
   computedGetImageStyle,
   computedGetPreview,
   deleteHander,
+  getImageStyle,
   handleError,
   handleLazyLoad,
   handleLoad,

package/image/vue.js

@@ -1,6 +1,7 @@
 import "../chunk-G2ADBYYC.js";
 import {
   computedGetImageStyle,
+  computedGetAlignCenter,
   computedGetPreview,
   loadImage,
   handleLoad,
@@ -8,6 +9,7 @@ import {
   handleLazyLoad,
   addLazyLoadListener,
   removeLazyLoadListener,
+  getImageStyle,
   clickHandler,
   closeViewer,
   mounted,
@@ -43,7 +45,8 @@ const initState = ({
     show: !props.lazy,
     showViewer: false,
     getPreview: computed(() => api2.computedGetPreview()),
-    getImageStyle: computed(() => api2.computedGetImageStyle())
+    getImageStyle: computed(() => api2.computedGetImageStyle()),
+    getAlignCenter: computed(() => api2.computedGetAlignCenter())
   });
   return state;
 };
@@ -65,10 +68,12 @@ const initApi = ({
     handleError: handleError({ state, emit }),
     computedGetPreview: computedGetPreview(props),
     removeLazyLoadListener: removeLazyLoadListener(state),
+    getImageStyle: getImageStyle({ state, vm, constants }),
+    computedGetAlignCenter: computedGetAlignCenter({ props, constants }),
     mounted: mounted({ api: api2, props }),
     handleLazyLoad: handleLazyLoad({ api: api2, state, vm, nextTick }),
     loadImage: loadImage({ api: api2, state, props, attrs }),
-    computedGetImageStyle: computedGetImageStyle({ props }),
+    computedGetImageStyle: computedGetImageStyle({ api: api2, props }),
     addLazyLoadListener: addLazyLoadListener({ api: api2, props, state, vm }),
     deleteHander: deleteHander(emit)
   });