@opentiny/vue-renderless 3.12.1 → 3.13.0-alpha.1

package/signature/index.js

@@ -0,0 +1,241 @@
+import "../chunk-G2ADBYYC.js";
+import { preventDefault } from "../common/deps/dom";
+const getOffsetPosition = ({ touch, state }) => {
+  let offsetY = 0;
+  let offsetX = 0;
+  if (state.current === "default" && state.isFullscreen) {
+    offsetY = state.canvasRect.width - touch.clientX + (state.canvasRect.left || 0);
+    offsetX = touch.clientY - (state.canvasRect.top || 0);
+  } else {
+    offsetX = touch.clientX - (state.canvasRect.left || 0);
+    offsetY = touch.clientY - (state.canvasRect.top || 0);
+  }
+  return { offsetX, offsetY };
+};
+const redraw = ({ state, props, nextTick }) => ({ oldWidth, oldHeight }) => {
+  if (Date.now() - state.lastRedrawDate < 100) {
+    return;
+  }
+  state.lastRedrawDate = Date.now();
+  nextTick(() => {
+    const context = state.ctx;
+    context.lineWidth = props.lineWidth;
+    context.strokeStyle = props.penColor;
+    context.beginPath();
+    state.ctx.lineJoin = "round";
+    state.paths.forEach((point) => {
+      point.offsetX *= state.width / oldWidth;
+      point.offsetY *= state.height / oldHeight;
+      if (point.isStart) {
+        context.moveTo(point.offsetX, point.offsetY);
+      } else {
+        context.lineTo(point.offsetX, point.offsetY);
+        context.stroke();
+      }
+    });
+  });
+};
+const touchStart = ({ emit, props, state, vm, api, useRect }) => () => {
+  if (!state.ctx) {
+    return false;
+  }
+  if (!state.isBeginWrite) {
+    api.rewrite(true);
+  }
+  state.canvasRect = useRect(vm.$refs.canvasRef);
+  state.ctx.lineWidth = props.lineWidth;
+  state.ctx.strokeStyle = props.penColor;
+  const touch = event.touches[0];
+  if (!touch.offsetX) {
+    const pos = getOffsetPosition({ touch, state });
+    touch.offsetX = pos.offsetX;
+    touch.offsetY = pos.offsetY;
+  }
+  state.isDrawing = true;
+  const point = {
+    isStart: true,
+    offsetX: touch.offsetX,
+    offsetY: touch.offsetY
+  };
+  state.paths.push(point);
+  state.ctx.beginPath();
+  state.ctx.lineJoin = "round";
+  state.ctx.moveTo(touch.offsetX, touch.offsetY);
+  emit("start");
+};
+const touchMove = ({ emit, state }) => (e) => {
+  if (!state.ctx) {
+    return false;
+  }
+  preventDefault(e);
+  const touch = event.touches[0];
+  if (state.isDrawing) {
+    if (!touch.offsetX) {
+      const pos = getOffsetPosition({ touch, state });
+      touch.offsetX = pos.offsetX;
+      touch.offsetY = pos.offsetY;
+    }
+    state.ctx.lineTo(touch.offsetX, touch.offsetY);
+    state.ctx.stroke();
+    const point = {
+      isStart: false,
+      offsetX: touch.offsetX,
+      offsetY: touch.offsetY
+    };
+    state.paths.push(point);
+  }
+  emit("signing", event);
+};
+const touchEnd = ({ emit, state }) => (event2) => {
+  state.isDrawing = false;
+  preventDefault(event2);
+  emit("end");
+};
+const isCanvasEmpty = (canvas, props) => {
+  const empty = document.createElement("canvas");
+  const ctx = empty.getContext("2d");
+  empty.width = canvas.width;
+  empty.height = canvas.height;
+  ctx.font = "16px PingFangSC";
+  ctx.textAlign = "center";
+  ctx.fillStyle = "#AEAEAE";
+  ctx.fillText(props.placeholder, empty.width / 2, empty.height / 2);
+  return canvas.toDataURL() === empty.toDataURL();
+};
+const setCanvasBgColor = ({ props, state }) => () => {
+  if (state.ctx && props.backgroundColor) {
+    state.ctx.fillStyle = props.backgroundColor;
+    state.ctx.fillRect(0, 0, state.width, state.height);
+  }
+};
+const setPlaceholder = ({ props, state }) => () => {
+  if (state.ctx) {
+    state.ctx.font = "16px PingFangSC";
+    state.ctx.textAlign = "center";
+    state.ctx.fillStyle = "#AEAEAE";
+    state.ctx.fillText(props.placeholder, state.width / 2, state.height / 2);
+  }
+};
+const getSignatureImage = ({ props, vm, Modal, t }) => () => {
+  const canvas = vm.$refs.canvasRef;
+  if (!canvas) {
+    return;
+  }
+  const isEmpty = isCanvasEmpty(canvas, props);
+  let image = "";
+  if (isEmpty) {
+    Modal.message(t("ui.signature.tips"));
+  } else {
+    const types = {
+      jpg: () => canvas.toDataURL("image/jpeg", 0.8),
+      jpeg: () => canvas.toDataURL("image/jpeg", 0.8)
+    };
+    let type = types[props.type];
+    if (type) {
+      image = type();
+    } else {
+      image = canvas.toDataURL(`image/${props.type}`);
+    }
+  }
+  return { image, canvas };
+};
+const submit = ({ emit, api }) => () => {
+  const { image, canvas } = api.getSignatureImage();
+  emit("submit", { image, canvas });
+};
+const rewrite = ({ api, emit, state }) => (isBeginWrite) => {
+  if (state.ctx) {
+    state.value = false;
+    state.ctx.clearRect(0, 0, state.width, state.height);
+    state.ctx.closePath();
+    api.setCanvasBgColor();
+    state.isBeginWrite = true;
+    if (isBeginWrite === true)
+      return;
+    api.setPlaceholder();
+    state.isBeginWrite = false;
+    state.paths.length = 0;
+    emit("rewrite");
+  }
+};
+const cancel = ({ api, emit }) => () => {
+  api.toggleFullscreen();
+  emit("cancel");
+};
+const tranformImage = ({ api, vm, props, nextTick }) => ({ oldWidth, oldHeight }) => {
+  const canvas = vm.$refs.canvasRef;
+  if (isCanvasEmpty(canvas, props)) {
+    nextTick(() => {
+      api.setPlaceholder();
+    });
+  } else {
+    nextTick(() => {
+      api.redraw({ oldWidth, oldHeight });
+    });
+  }
+};
+const toggleFullscreen = ({ nextTick, api, state }) => () => {
+  const clientWidth = document.documentElement.clientWidth;
+  const clientHeight = document.documentElement.clientHeight;
+  const oldWidth = state.width;
+  const oldHeight = state.height;
+  state.isFullscreen = !state.isFullscreen;
+  nextTick(() => {
+    if (state.current.value === "default" && state.isFullscreen) {
+      state.width = clientHeight;
+      state.height = clientWidth;
+    } else {
+      api.initCanvas();
+    }
+    api.tranformImage({ oldWidth, oldHeight });
+  });
+};
+const initCanvas = ({ props, state, vm }) => () => {
+  const canvas = vm.$refs.canvasRef;
+  const wrap = vm.$refs.wrapRef;
+  const width = wrap.offsetWidth || 0;
+  const height = wrap.offsetHeight || 0;
+  state.ctx = canvas.getContext("2d");
+  state.width = width;
+  state.height = props.height || height;
+};
+const mounted = ({ vm, state, api, nextTick, markRaw }) => () => {
+  const wrap = vm.$refs.wrapRef;
+  const resizeObserver = new ResizeObserver((ResizeObserverEntryArr) => {
+    const [{ contentRect }] = ResizeObserverEntryArr;
+    if (contentRect.width && contentRect.height) {
+      api.initCanvas();
+      if (state.paths.length) {
+        api.redraw({ oldWidth: contentRect.width, oldHeight: contentRect.height });
+      } else {
+        nextTick(() => {
+          api.setCanvasBgColor();
+          api.setPlaceholder();
+        });
+      }
+    }
+  });
+  state.resizeObserver = markRaw(resizeObserver);
+  state.resizeObserver.observe(wrap);
+};
+const beforeUnmount = ({ vm, state }) => () => {
+  const wrap = vm.$refs.wrapRef;
+  state.resizeObserver.unobserve(wrap);
+};
+export {
+  beforeUnmount,
+  cancel,
+  getSignatureImage,
+  initCanvas,
+  mounted,
+  redraw,
+  rewrite,
+  setCanvasBgColor,
+  setPlaceholder,
+  submit,
+  toggleFullscreen,
+  touchEnd,
+  touchMove,
+  touchStart,
+  tranformImage
+};

package/signature/vue.js

@@ -0,0 +1,88 @@
+import "../chunk-G2ADBYYC.js";
+import emulate from "../common/deps/touch-emulator";
+import { useRect as _useRect } from "../common/deps/useRect";
+import {
+  touchStart,
+  touchMove,
+  touchEnd,
+  setCanvasBgColor,
+  submit,
+  cancel,
+  rewrite,
+  mounted,
+  beforeUnmount,
+  setPlaceholder,
+  toggleFullscreen,
+  initCanvas,
+  tranformImage,
+  redraw,
+  getSignatureImage
+} from "./index";
+emulate();
+const api = [
+  "state",
+  "touchStart",
+  "touchMove",
+  "touchEnd",
+  "rewrite",
+  "submit",
+  "toggleFullscreen",
+  "initCanvas",
+  "cancel",
+  "tranformImage",
+  "redraw",
+  "getSignatureImage"
+];
+const renderless = (props, { unref, reactive, onMounted, onBeforeUnmount, watch, markRaw }, { emit, vm, nextTick, t, useBreakpoint }, { Modal }) => {
+  const { current } = useBreakpoint();
+  const state = reactive({
+    width: 0,
+    height: 0,
+    ctx: null,
+    isBeginWrite: false,
+    isFullscreen: false,
+    current,
+    canvasRect: null,
+    isDrawing: false,
+    paths: markRaw([]),
+    resizeObserver: null,
+    value: props.value,
+    lastRedrawDate: 0
+  });
+  watch(
+    () => props.value,
+    (newValue) => {
+      if (newValue) {
+        state.value = newValue;
+      }
+    }
+  );
+  const useRect = _useRect(unref);
+  const api2 = {
+    state,
+    touchMove: touchMove({ emit, state }),
+    touchEnd: touchEnd({ emit, state }),
+    setCanvasBgColor: setCanvasBgColor({ props, state }),
+    setPlaceholder: setPlaceholder({ props, state }),
+    getSignatureImage: getSignatureImage({ props, vm, Modal, t })
+  };
+  Object.assign(api2, {
+    touchStart: touchStart({ emit, props, state, vm, api: api2, useRect }),
+    rewrite: rewrite({ api: api2, emit, state }),
+    mounted: mounted({ state, api: api2, vm, nextTick, markRaw }),
+    onBeforeUnmount: beforeUnmount({ state, vm }),
+    initCanvas: initCanvas({ props, state, vm }),
+    toggleFullscreen: toggleFullscreen({ api: api2, nextTick, state }),
+    cancel: cancel({ api: api2, emit }),
+    redraw: redraw({ props, state, nextTick }),
+    tranformImage: tranformImage({ api: api2, vm, props, nextTick }),
+    submit: submit({ emit, api: api2 })
+  });
+  onMounted(() => api2.mounted());
+  onBeforeUnmount(() => api2.onBeforeUnmount());
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/skeleton/index.js

@@ -0,0 +1,14 @@
+import "../chunk-G2ADBYYC.js";
+import { isNumber, isNull } from "../common/type";
+const toPxStyle = (value) => {
+  if (isNull(value)) {
+    return void 0;
+  }
+  if (isNumber(value)) {
+    return `${value}px`;
+  }
+  return String(value);
+};
+export {
+  toPxStyle
+};

package/skeleton/vue.js

@@ -0,0 +1,15 @@
+import "../chunk-G2ADBYYC.js";
+import { toPxStyle } from "./index";
+const api = ["toPxStyle"];
+const renderless = (props, { toRefs, provide }) => {
+  const { active } = toRefs(props);
+  provide("active", active);
+  const api2 = {
+    toPxStyle
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/skeleton-item/vue.js

@@ -0,0 +1,15 @@
+import "../chunk-G2ADBYYC.js";
+const api = ["state"];
+const renderless = (props, { reactive, inject }) => {
+  const state = reactive({
+    isActive: inject("active", false)
+  });
+  const api2 = {
+    state
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/slider/index.js

@@ -17,6 +17,7 @@ const bindKeyDown = ({ api, props, state }) => (event) => {
   if (state.disabled || state.activeIndex < 0) {
     return;
   }
+  event.preventDefault();
   let currentValue = 0;
   switch (event.keyCode) {
     case KEY_CODE.Home:
@@ -114,7 +115,9 @@ const bindMouseUp = ({ api, emit, state }) => () => {
   if (state.disabled || !state.isDrag) {
     return;
   }
-  state.showTip = false;
+  if (state.mouseOuterBtn) {
+    state.showTip = false;
+  }
   state.isDrag = false;
   off(window, "mouseup", api.bindMouseUp);
   off(window, "mousemove", api.bindMouseMove);
@@ -123,6 +126,7 @@ const bindMouseUp = ({ api, emit, state }) => () => {
   emit("stop", api.getActiveButtonValue());
 };
 const displayTip = ({ api, nextTick, state }) => (event) => {
+  state.mouseOuterBtn = false;
   if (!state.showTip) {
     state.showTip = true;
     api.changeActiveValue(api.getActiveButtonIndex(event) === 0);
@@ -131,7 +135,10 @@ const displayTip = ({ api, nextTick, state }) => (event) => {
     });
   }
 };
-const hideTip = (state) => () => !state.isDrag && (state.showTip = false);
+const hideTip = (state) => () => {
+  state.mouseOuterBtn = true;
+  !state.isDrag && (state.showTip = false);
+};
 const setTipStyle = ({
   constants,
   mode,
@@ -278,17 +285,14 @@ const initSlider = ({ api, props, state }) => (value) => {
       state.rightBtnValue = Math.min(Number(item), props.max);
       state.rightBtnShow = true;
     }
-    if (state.isInit) {
-      api.changeActiveValue(index === 0);
-    }
+    api.changeActiveValue(index === 0);
     api.setButtonStyle();
   });
-  state.isInit = false;
   api.setBarStyle();
 };
 const calculateValue = ({ props, state, vm }) => (event) => {
   let currentValue = 0;
-  if (state.sliderSize == 0) {
+  if (state.sliderSize === 0) {
     const handleEl = vm.$refs.slider;
     state.sliderSize = handleEl["client" + (props.vertical ? "Height" : "Width")];
     state.sliderOffset = handleEl.getBoundingClientRect();
@@ -362,6 +366,9 @@ const watchActiveValue = ({ api, emit, props, state }) => (newValue, oldValue) =
   } else {
     state.activeValue = nNewValue || 0;
   }
+  if (!state.isSlotTyping) {
+    state.slotValue = state.activeValue;
+  }
 };
 const watchModelValue = ({ api, state }) => (value) => {
   if (!state.innerTrigger) {
@@ -417,6 +424,16 @@ const inputValueChange = ({ props, state, api }) => ($event, pos) => {
   }
   api.initSlider([Math.min(...state.inputValue), Math.max(...state.inputValue)]);
 };
+const handleSlotInputFocus = (state) => () => {
+  state.isSlotTyping = true;
+};
+const handleSlotInputBlur = (state) => () => {
+  state.isSlotTyping = false;
+  state.slotValue = state.activeValue;
+};
+const handleSlotInput = (state) => (event) => {
+  state.activeValue = Number(event.target.value);
+};
 export {
   autoSlider,
   bindEvent,
@@ -436,6 +453,9 @@ export {
   getActiveButtonValue,
   getLabels,
   getPoints,
+  handleSlotInput,
+  handleSlotInputBlur,
+  handleSlotInputFocus,
   hideTip,
   initSlider,
   inputValueChange,

package/slider/vue.js

@@ -27,7 +27,10 @@ import {
   watchModelValue,
   getPoints,
   getLabels,
-  inputValueChange
+  inputValueChange,
+  handleSlotInputFocus,
+  handleSlotInputBlur,
+  handleSlotInput
 } from "./index";
 const api = [
   "state",
@@ -54,7 +57,10 @@ const api = [
   "customBeforeAppearHook",
   "customAppearHook",
   "customAfterAppearHook",
-  "inputValueChange"
+  "inputValueChange",
+  "handleSlotInputFocus",
+  "handleSlotInputBlur",
+  "handleSlotInput"
 ];
 const initState = ({ reactive, computed, props, api: api2, parent, inject }) => {
   const state = reactive({
@@ -64,7 +70,6 @@ const initState = ({ reactive, computed, props, api: api2, parent, inject }) =>
     moveStyle: [],
     points: [],
     labels: [],
-    isInit: true,
     inputValue: [0, 0],
     isDrag: false,
     sliderSize: 0,
@@ -85,7 +90,10 @@ const initState = ({ reactive, computed, props, api: api2, parent, inject }) =>
     rangeDiff: computed(() => props.max - props.min),
     tipValue: computed(() => api2.formatTipValue(state.activeValue)),
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
-    disabled: computed(() => props.disabled || state.formDisabled)
+    disabled: computed(() => props.disabled || state.formDisabled),
+    slotValue: "",
+    isSlotTyping: false,
+    mouseOuterBtn: false
   });
   return state;
 };
@@ -122,9 +130,21 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     watchActiveValue: watchActiveValue({ api: api2, emit, props, state }),
     getPoints: getPoints({ props, state }),
     getLabels: getLabels({ props, state }),
-    inputValueChange: inputValueChange({ props, api: api2, state })
+    inputValueChange: inputValueChange({ props, api: api2, state }),
+    handleSlotInputFocus: handleSlotInputFocus(state),
+    handleSlotInputBlur: handleSlotInputBlur(state),
+    handleSlotInput: handleSlotInput(state)
   });
-  watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (props.max < props.min) {
+        throw new Error("Slider min should not be greater than max.");
+      }
+      api2.watchModelValue(value);
+    },
+    { immediate: true }
+  );
   watch(() => state.activeValue, api2.watchActiveValue, { immediate: true });
   watch(
     () => props.min,
@@ -142,7 +162,6 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
       api2.setActiveButtonValue(value);
     }
   );
-  watch(() => state.activeValue, api2.watchActiveValue, { immediate: true });
   watch(
     () => state.leftBtnValue,
     (newVal) => {

package/split/index.js

@@ -44,7 +44,7 @@ const handleUp = ({ api, emit, off, state }) => () => {
   emit("moveend");
 };
 const handleMousedown = ({ api, emit, on, props, state, vm }) => (event) => {
-  if (state.dragable) {
+  if (!props.disabled) {
     state.initOffset = state.isHorizontal ? event.pageX : event.pageY;
     if (state.offset === 0) {
       state.oldOffset = 0;

package/split/vue.js

@@ -32,12 +32,10 @@ const renderless = (props, hooks, { vm, nextTick, emit, constants }) => {
     computedleftTopMin: computed(() => api2.getComputedThresholdValue("leftTopMin")),
     computedrightBottomMin: computed(() => api2.getComputedThresholdValue("rightBottomMin")),
     wrapperClasses: computed(() => [`${state.prefix}-wrapper`, state.isMoving ? "no-select" : ""]),
-    paneClasses: computed(() => [`${state.prefix}-pane`, { [`${state.prefix}-pane-moving`]: state.isMoving }]),
-    dragable: !props.disabled,
-    triggerSimple: props.triggerSimple,
-    collapseLeftTop: props.collapseLeftTop,
-    collapseRightBottom: props.collapseRightBottom,
-    isThreeAreas: props.threeAreas
+    paneClasses: computed(() => [
+      `${state.prefix}-pane ${props.scrollable ? "tiny-split-scroll" : ""}`,
+      { [`${state.prefix}-pane-moving`]: state.isMoving }
+    ])
   }, getUseOffset.state));
   Object.assign(api2, __spreadProps(__spreadValues({
     state,

package/standard-list-item/index.js

@@ -1,4 +1,7 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
 const handleEnterDesc = ({ state, props }) => ($event) => {
   const target = $event.target;
   if (target && target.scrollHeight > target.offsetHeight) {
@@ -17,7 +20,18 @@ const handleTitleClick = ({ props }) => () => {
     return;
   props.titleOption.click();
 };
+const computedOptions = ({ props }) => () => {
+  return props.options.filter((item) => {
+    const hidden = typeof item.hidden === "function" ? item.hidden(props.data) : item.hidden;
+    return !hidden;
+  }).map((op) => {
+    return __spreadProps(__spreadValues({}, op), {
+      disabled: typeof op.disabled === "function" ? op.disabled(props.data) : op.disabled
+    });
+  });
+};
 export {
+  computedOptions,
   handelIconClick,
   handleEnterDesc,
   handleTitleClick

package/standard-list-item/vue.js

@@ -1,19 +1,20 @@
 import "../chunk-G2ADBYYC.js";
-import { handleEnterDesc, handelIconClick, handleTitleClick } from "./index";
-const api = ["state", "handelIconClick", "handleEnterDesc", "handleTitleClick"];
+import { handleEnterDesc, handelIconClick, handleTitleClick, computedOptions } from "./index";
+const api = ["state", "handelIconClick", "handleEnterDesc", "handleTitleClick", "computedOptions"];
 const renderless = (props, { computed, reactive }, { emit }) => {
+  const api2 = {};
   const state = reactive({
     descTooltip: "",
     sliceNum: 2,
     iconNum: 3,
-    effectOptions: computed(() => props.options.filter((item) => !item.hidden))
+    effectOptions: computed(() => api2.computedOptions())
   });
-  const api2 = {};
   Object.assign(api2, {
     state,
     handleTitleClick: handleTitleClick({ props }),
     handelIconClick: handelIconClick({ emit }),
-    handleEnterDesc: handleEnterDesc({ state, props })
+    handleEnterDesc: handleEnterDesc({ state, props }),
+    computedOptions: computedOptions({ props })
   });
   return api2;
 };

package/steps/index.js

@@ -1,4 +1,5 @@
 import "../chunk-G2ADBYYC.js";
+import { omitText } from "../common/string";
 const updateStartIndex = ({ state, props }) => () => {
   const { visibleNum, active } = props;
   const maxStartIndex = Math.min(props.data.length - visibleNum, active - Math.floor(visibleNum / 2));
@@ -23,9 +24,29 @@ const computedRightNodePos = ({ state, props }) => () => {
     right: -(index + 1) * 4 + "px"
   }));
 };
+const handleMouseenter = ({ state, vm }) => (e, placement) => {
+  const ele = e.target;
+  const text = ele.textContent;
+  const font = window.getComputedStyle(ele).font;
+  const rect = ele.getBoundingClientRect();
+  const res = omitText(text, font, rect.width);
+  const popover = vm.$refs.popover;
+  if (res.o) {
+    popover.state.referenceElm = ele;
+    popover.state.popperElm && (popover.state.popperElm.style.display = "none");
+    popover.doDestroy();
+    state.popoverContent = text;
+    state.popoverVisible = true;
+    state.popoverPlacement = placement;
+    setTimeout(popover.updatePopper, 20);
+  }
+};
+const handleMouseleave = (state) => () => {
+  state.popoverVisible = false;
+};
 const computedSpace = ({ props }) => {
-  const { space } = props;
-  if (/^\d+$/.test(space)) {
+  const { space = "" } = props;
+  if (/^\d+$/.test(String(space))) {
     return `${space}px`;
   }
   return space;
@@ -33,6 +54,8 @@ const computedSpace = ({ props }) => {
 export {
   computedRightNodePos,
   computedSpace,
+  handleMouseenter,
+  handleMouseleave,
   isVisibleHandler,
   updateStartIndex
 };

package/steps/slide-bar.js

@@ -45,7 +45,14 @@ const rightSlideHandler = ({ state, api: api2 }) => () => {
 const updatePosition = ({ state, vm, props, api: api2 }) => debounce(10, (isInit) => {
   state.positionList = props.data.map((item, index) => {
     const blockRef = vm.$refs["block" + index];
-    const position = blockRef && blockRef[0].getBoundingClientRect() || {};
+    let position = {};
+    if (blockRef) {
+      if (Array.isArray(blockRef)) {
+        position = blockRef[0] && blockRef[0].getBoundingClientRect();
+      } else {
+        position = blockRef.getBoundingClientRect();
+      }
+    }
     return Object.assign(position, { index });
   });
   state.slideMainPostion = vm.$refs.slideMain.getBoundingClientRect();