@opentiny/vue-renderless 3.6.8 → 3.8.2

package/flowchart/vue.js

@@ -0,0 +1,81 @@
+import "../chunk-PKUHTIDK.js";
+import {
+  compute,
+  computeMf,
+  isMf,
+  drawArrow,
+  buildAfterNode,
+  buildAfterLink,
+  drawAfterLink,
+  refresh,
+  getAllItem,
+  initDropdowns,
+  getVars,
+  isLinkHover,
+  omitText,
+  buildHoverState,
+  addListeners,
+  removeListeners,
+  setListeners,
+  hitTest,
+  clearHoverAfterLink,
+  clickNode,
+  clearDropdown,
+  antialiasing
+} from "./index";
+const api = ["state", "clearHoverAfterLink", "clickNode", "getVars", "omitText", "refresh", "clearDropdown"];
+const renderless = (props, { reactive, markRaw, onMounted, onBeforeUnmount }, { vm, nextTick, emit, mode }) => {
+  const state = reactive({
+    afterData: null,
+    refreshKey: 0,
+    wrapperStyle: "",
+    dropdowns: {}
+  });
+  const api2 = {
+    state,
+    omitText,
+    getVars: getVars(),
+    initDropdowns: initDropdowns(),
+    buildAfterNode: buildAfterNode(props),
+    buildAfterLink: buildAfterLink(),
+    isLinkHover: isLinkHover(state),
+    clearDropdown: clearDropdown(state),
+    getAllItem: getAllItem(props),
+    buildHoverState: buildHoverState(props),
+    removeListeners: removeListeners({ state, vm }),
+    isMf: isMf(mode),
+    drawArrow: drawArrow({ state, vm, props }),
+    antialiasing: antialiasing(vm)
+  };
+  Object.assign(api2, {
+    compute: compute({ api: api2, markRaw, props, state }),
+    computeMf: computeMf({ api: api2, markRaw, props, state }),
+    drawAfterLink: drawAfterLink({ api: api2, props, state, vm }),
+    refresh: refresh({ api: api2, nextTick, state }),
+    addListeners: addListeners({ api: api2, state, vm }),
+    setListeners: setListeners({ api: api2, emit, props, state, vm }),
+    hitTest: hitTest({ api: api2, state, vm }),
+    clearHoverAfterLink: clearHoverAfterLink({ api: api2, state, vm }),
+    clickNode: clickNode({ api: api2, emit })
+  });
+  if (api2.isMf()) {
+    api2.computeMf();
+  } else {
+    api2.compute();
+  }
+  onMounted(() => {
+    nextTick(() => {
+      api2.antialiasing();
+      api2.drawAfterLink();
+      api2.addListeners();
+    });
+  });
+  onBeforeUnmount(() => {
+    api2.removeListeners();
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/form/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { merge } from "@opentiny/vue-renderless/common/object";
+import { merge } from "../common/object";
 const watchRules = ({ api, props, state }) => (newRules = {}, oldRules = {}) => {
   const newValidFields = Object.keys(newRules);
   const oldValidFields = Object.keys(oldRules);
@@ -131,6 +131,18 @@ const bindDialogEvent = ({ api, dialog, state }) => {
     });
   }
 };
+const showTooltip = ({ vm, state }) => (dom, val) => {
+  const tooltip = vm.$refs.tooltip;
+  tooltip.state.referenceElm = dom;
+  tooltip.state.popperElm && (tooltip.state.popperElm.style.display = "none");
+  tooltip.doDestroy();
+  state.tooltipVisible = true;
+  state.displayedValue = val;
+  setTimeout(tooltip.updatePopper, 20);
+};
+const hideTooltip = ({ state }) => () => {
+  state.tooltipVisible = false;
+};
 export {
   bindDialogEvent,
   clearValidate,
@@ -138,8 +150,10 @@ export {
   created,
   deregisterLabelWidth,
   getLabelWidthIndex,
+  hideTooltip,
   registerLabelWidth,
   resetFields,
+  showTooltip,
   updateTip,
   validate,
   validateField,

package/form/vue.js

@@ -11,7 +11,9 @@ import {
   registerLabelWidth,
   deregisterLabelWidth,
   updateTip,
-  bindDialogEvent
+  bindDialogEvent,
+  showTooltip,
+  hideTooltip
 } from "./index";
 const api = [
   "state",
@@ -22,9 +24,11 @@ const api = [
   "getLabelWidthIndex",
   "registerLabelWidth",
   "deregisterLabelWidth",
-  "updateTip"
+  "updateTip",
+  "showTooltip",
+  "hideTooltip"
 ];
-const renderless = (props, { computed, inject, provide, reactive, watch }, { parent }) => {
+const renderless = (props, { computed, inject, provide, reactive, watch }, { vm, parent }) => {
   const api2 = {};
   const dialog = inject("dialog", null);
   const state = reactive({
@@ -58,7 +62,9 @@ const renderless = (props, { computed, inject, provide, reactive, watch }, { par
     getLabelWidthIndex: getLabelWidthIndex(state),
     registerLabelWidth: registerLabelWidth({ api: api2, state }),
     deregisterLabelWidth: deregisterLabelWidth({ api: api2, state }),
-    watchRules: watchRules({ api: api2, props, state })
+    watchRules: watchRules({ api: api2, props, state }),
+    showTooltip: showTooltip({ vm, state }),
+    hideTooltip: hideTooltip({ state })
   });
   api2.created();
   provide("form", parent);

package/form-item/index.js

@@ -1,9 +1,10 @@
 import "../chunk-PKUHTIDK.js";
-import { POSITION, VALIDATE_STATE } from "@opentiny/vue-renderless/common";
-import { merge } from "@opentiny/vue-renderless/common/object";
-import Validator from "@opentiny/vue-renderless/common/validate";
-import { isNull } from "@opentiny/vue-renderless/common/type";
-import debounce from "@opentiny/vue-renderless/common/deps/debounce";
+import { POSITION, VALIDATE_STATE } from "../common";
+import { omitText } from "../common/string";
+import { merge } from "../common/object";
+import Validator from "../common/validate";
+import { isNull } from "../common/type";
+import debounce from "../common/deps/debounce";
 const watchError = (state) => (value) => {
   if (!isNull(value) && state.getValidateType === "tip") {
     state.canShowTip = true;
@@ -64,7 +65,7 @@ const computedContentStyle = ({ props, state }) => () => {
 };
 const computedForm = ({ constants, instance, state }) => () => {
   const { FORM_NAME, FORM_ITEM_NAME } = constants;
-  let parent = instance.$parent;
+  let parent = instance.$parent.$parent;
   let parentName = parent.$options.componentName;
   while (parentName !== FORM_NAME) {
     if (parentName === FORM_ITEM_NAME) {
@@ -291,8 +292,44 @@ const wrapValidate = ({ validateFunc, props }) => {
     return validateFunc;
   }
 };
+const handleMouseenter = ({ state }) => (e) => {
+  if (!state.isDisplayOnly || !state.typeName || !state.form)
+    return;
+  const dom = e.target;
+  const text = dom.textContent;
+  const font = window.getComputedStyle(dom).font;
+  const rect = dom.getBoundingClientRect();
+  let res = {};
+  let overHeight = false;
+  if (["text", "password", "number"].includes(state.typeName)) {
+    res = omitText(text, font, rect.width);
+  }
+  if (state.typeName === "textarea" && dom && dom.scrollHeight > dom.offsetHeight) {
+    overHeight = true;
+  }
+  if (res.o || overHeight) {
+    state.form.showTooltip(dom, state.displayedValue);
+  }
+};
+const handleMouseleave = (state) => () => {
+  state.form && state.form.hideTooltip();
+};
+const getDisplayedValue = ({ state }) => (param) => {
+  if (!state.formInstance.displayOnly)
+    return;
+  const valueSplit = state.formInstance.valueSplit || "; ";
+  state.typeName = param.type;
+  state.isBasicComp = true;
+  state.displayedValue = state.displayedValue + (state.displayedValue && param.val ? valueSplit : "") + param.val;
+};
+const clearDisplayedValue = ({ state }) => () => {
+  state.typeName = "";
+  state.isBasicComp = false;
+  state.displayedValue = "";
+};
 export {
   addValidateEvents,
+  clearDisplayedValue,
   clearValidate,
   computedContentStyle,
   computedFieldValue,
@@ -301,10 +338,13 @@ export {
   computedIsRequired,
   computedLabelStyle,
   computedValueStyle,
+  getDisplayedValue,
   getFilteredRule,
   getPropByPath,
   getRules,
   getValueByPath,
+  handleMouseenter,
+  handleMouseleave,
   mounted,
   onFieldBlur,
   onFieldChange,

package/form-item/vue.js

@@ -22,7 +22,11 @@ import {
   computedFieldValue,
   computedGetValidateType,
   updateTip,
-  wrapValidate
+  wrapValidate,
+  getDisplayedValue,
+  clearDisplayedValue,
+  handleMouseenter,
+  handleMouseleave
 } from "./index";
 const api = [
   "state",
@@ -36,7 +40,10 @@ const api = [
   "updateComputedLabelWidth",
   "addValidateEvents",
   "removeValidateEvents",
-  "updateTip"
+  "updateTip",
+  "getDisplayedValue",
+  "handleMouseenter",
+  "handleMouseleave"
 ];
 const initState = ({ reactive, computed, api: api2, mode, inject, props }) => {
   const state = reactive({
@@ -52,7 +59,12 @@ const initState = ({ reactive, computed, api: api2, mode, inject, props }) => {
     canShowTip: false,
     // 兼容 2.0 validation 的 required
     validationRequired: false,
+    validateType: "text",
     tooltip: null,
+    displayedValue: "",
+    isBasicComp: false,
+    showTooltip: false,
+    typeName: "",
     formInstance: inject("form", null),
     labelFor: computed(() => props.for || props.prop),
     labelStyle: computed(() => api2.computedLabelStyle()),
@@ -61,8 +73,16 @@ const initState = ({ reactive, computed, api: api2, mode, inject, props }) => {
     form: computed(() => api2.computedForm()),
     fieldValue: computed(() => api2.computedFieldValue()),
     isRequired: computed(() => api2.computedIsRequired()),
+    formInline: computed(() => state.formInstance.inline),
     formSize: computed(() => state.formInstance.size),
     formItemSize: computed(() => props.size || state.formSize),
+    isDisplayOnly: computed(() => state.formInstance.displayOnly),
+    labelPosition: computed(() => state.formInstance.labelPosition),
+    hideRequiredAsterisk: computed(() => state.formInstance.hideRequiredAsterisk),
+    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())
   });
@@ -94,7 +114,11 @@ const initApi = ({ api: api2, state, dispatch, broadcast, refs, props, constants
     onFieldBlur: onFieldBlur(api2),
     onFieldChange: onFieldChange({ api: api2, state }),
     addValidateEvents: addValidateEvents({ api: api2, instance, props, state }),
-    validate: wrapValidate({ validateFunc: validate({ api: api2, props, state, t }), props })
+    validate: wrapValidate({ validateFunc: validate({ api: api2, props, state, t }), props }),
+    getDisplayedValue: getDisplayedValue({ state }),
+    clearDisplayedValue: clearDisplayedValue({ state }),
+    handleMouseenter: handleMouseenter({ state }),
+    handleMouseleave: handleMouseleave(state)
   });
 };
 const initWatch = ({ watch, api: api2, props }) => {

package/fullscreen/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
+import { on, off } from "../common/deps/dom";
 const toggle = ({ state, api }) => (value) => {
   if (value === void 0) {
     if (state.isFullscreen) {

package/fullscreen/vue.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import sf from "@opentiny/vue-renderless/common/deps/fullscreen/screenfull";
+import sf from "../common/deps/fullscreen/screenfull";
 import { exit, enter, toggle, request, getState, shadeClick, keypressCallback, fullScreenCallback, onChangeFullscreen, computeWrapperStyle } from "./index";
 const api = ["state", "exit", "enter", "toggle", "request", "getState", "shadeClick", "keypressCallback", "fullScreenCallback", "onChangeFullscreen"];
 const renderless = (props, { reactive, computed, watch }, { vm, emit }) => {

package/grid/plugins/export.js

@@ -1,8 +1,8 @@
 import {
   __spreadValues
 } from "../../chunk-PKUHTIDK.js";
-import { xss } from "@opentiny/vue-renderless/common/xss.js";
-import browser from "@opentiny/vue-renderless/common/browser";
+import { xss } from "../../common/xss.js";
+import browser from "../../common/browser";
 import { toTreeArray } from "../static";
 import { getCellValue, getFuncText } from "../utils";
 import { exportExcel } from "./exportExcel";

package/grid/plugins/exportExcel.js

@@ -1,6 +1,6 @@
 import "../../chunk-PKUHTIDK.js";
-import { extend } from "@opentiny/vue-renderless/common/object";
-import browser from "@opentiny/vue-renderless/common/browser";
+import { extend } from "../../common/object";
+import browser from "../../common/browser";
 const isIE = browser.name === "ie";
 const rgbRegExp = /^rgba?\((\d+),\s(\d+),\s(\d+)([\s\S]*)\)$/;
 const hexRegExp = /^#([a-zA-Z0-9]{3}|[a-zA-Z0-9]{6})$/;

package/grid/plugins/resize.js

@@ -1,5 +1,5 @@
 import "../../chunk-PKUHTIDK.js";
-import browser from "@opentiny/vue-renderless/common/browser";
+import browser from "../../common/browser";
 import { remove } from "../static";
 let resizeTimeout;
 let defaultInterval = 250;

package/grid/static/base/helperEqualCompare.js

@@ -1,5 +1,5 @@
 import "../../../chunk-PKUHTIDK.js";
-import { isDate, isRegExp } from "@opentiny/vue-renderless/common/type";
+import { isDate, isRegExp } from "../../../common/type";
 import isNumber from "./isNumber";
 import isString from "./isString";
 import isBoolean from "./isBoolean";

package/grid/static/base/isPlainObject.js

@@ -1,5 +1,5 @@
 import "../../../chunk-PKUHTIDK.js";
-import { isPlainObject } from "@opentiny/vue-renderless/common/type";
+import { isPlainObject } from "../../../common/type";
 var isPlainObject_default = isPlainObject;
 export {
   isPlainObject_default as default

package/grid/utils/common.js

@@ -1,7 +1,7 @@
 import "../../chunk-PKUHTIDK.js";
-import { extend } from "@opentiny/vue-renderless/common/object";
-import { isNull } from "@opentiny/vue-renderless/common/type";
-import { find } from "@opentiny/vue-renderless/common/array";
+import { extend } from "../../common/object";
+import { isNull } from "../../common/type";
+import { find } from "../../common/array";
 import { get, isFunction, set, findTree } from "../static";
 const gridSize = ["medium", "small", "mini"];
 const getSize = ({ size, $parent }) => size || ($parent && gridSize.includes($parent.size) ? $parent.size : null);

package/grid/utils/dom.js

@@ -1,6 +1,6 @@
 import "../../chunk-PKUHTIDK.js";
 import { getRowid } from "./common";
-import { hasClass } from "@opentiny/vue-renderless/common/deps/dom";
+import { hasClass } from "../../common/deps/dom";
 import { arrayIndexOf } from "../static";
 const ATTR_NAME = "data-rowid";
 const CELL_CLS = ".tiny-grid-cell";
@@ -66,12 +66,12 @@ function setBodyLeft(body, td, $table, column, move) {
     const { left, right } = td.getBoundingClientRect();
     let offset = 0;
     if (isLeftArrow && fixedDom) {
-      const div = fixedDom.querySelector("td.fixed__hidden");
+      const div = fixedDom.querySelector("td.fixed__column");
       const division = div ? div.getBoundingClientRect().left : fixedDom.getBoundingClientRect().right;
       division > left && (offset = left - division);
     }
     if (isRightArrow && fixedDom) {
-      const div = fixedDom.querySelector("td:not(.fixed__hidden)") || fixedDom;
+      const div = fixedDom.querySelector("td:not(.fixed__column)") || fixedDom;
       const division = div.getBoundingClientRect().left;
       division < right && (offset = right - division);
     }

package/grid/utils/event.js

@@ -1,7 +1,7 @@
 import "../../chunk-PKUHTIDK.js";
-import browser from "@opentiny/vue-renderless/common/browser";
+import browser from "../../common/browser";
 import { remove } from "../static";
-import { on } from "@opentiny/vue-renderless/common/deps/dom";
+import { on } from "../../common/deps/dom";
 const wheelName = browser.isDoc && /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll" : "mousewheel";
 const eventStore = [];
 const GlobalEvent = {

package/guide/index.js

@@ -0,0 +1,168 @@
+import "../chunk-PKUHTIDK.js";
+import { xss } from "../common/xss";
+const createShepherd = ({ state, props, Shepherd, offset }) => () => {
+  const tour = newTour(state, Shepherd, offset);
+  state.tour = tour;
+  const result = {};
+  const deepCopy = getItemCopy(props, tour, result);
+  if (state.domData && state.domData !== 0) {
+    state.domData.forEach((item, i) => {
+      let steps = itemStep(item, state, deepCopy, i, Shepherd);
+      const step = tour.addStep(steps);
+      if (steps.hightBox && steps.hightBox.length != 0) {
+        step.on("show", () => {
+          steps.hightBox.forEach((item2) => {
+            document.querySelector(item2).classList.add("tiny-guide__z-top");
+          });
+        });
+        step.on("hide", () => {
+          steps.hightBox.forEach((item2) => {
+            document.querySelector(item2).classList.remove("tiny-guide__z-top");
+          });
+        });
+        step.on("complete", () => {
+          steps.hightBox.forEach((item2) => {
+            document.querySelector(item2).classList.remove("tiny-guide__z-top");
+          });
+        });
+        step.on("cancel", () => {
+          steps.hightBox.forEach((item2) => {
+            document.querySelector(item2).classList.remove("tiny-guide__z-top");
+          });
+        });
+        step.on("destroy", () => {
+          steps.hightBox.forEach((item2) => {
+            document.querySelector(item2).classList.remove("tiny-guide__z-top");
+          });
+        });
+      } else {
+        callBack(step, item);
+      }
+    });
+  }
+  state.tour.start();
+  if (props.width || props.height) {
+    document.querySelector(".tiny-guide.shepherd-element").style.width = `${props.width}px`;
+    document.querySelector(".tiny-guide.shepherd-element").style.height = `${props.height}px`;
+  }
+};
+const mounted = ({ state, api }) => () => {
+  if (state.showStep) {
+    api.createShepherd();
+  }
+};
+const getItemCopy = (props, tour, result) => {
+  const { domData } = props;
+  result = domData.map((item) => {
+    const itemCopy = JSON.parse(JSON.stringify(item));
+    itemCopy.button = item.button.map((e) => {
+      const eCopy = JSON.parse(JSON.stringify(e));
+      eCopy.action = tour[e.action];
+      return eCopy;
+    });
+    return itemCopy;
+  });
+  return result;
+};
+const newTour = (state, Shepherd, offset) => {
+  const tour = new Shepherd.Tour({
+    useModalOverlay: true,
+    defaultStepOptions: {
+      modalOverlayOpeningPadding: state.modalOverlayOpeningPadding,
+      modalOverlayOpeningRadius: state.modalOverlayOpeningRadius,
+      arrow: state.arrow,
+      highlightClass: state.lightClass,
+      classes: "tiny-guide",
+      floatingUIOptions: {
+        middleware: [
+          offset({
+            mainAxis: state.mainAxis,
+            crossAxis: state.crossAxis,
+            alignmentAxis: state.alignmentAxis
+          })
+        ]
+      }
+    }
+  });
+  return tour;
+};
+const itemStep = (item, state, deepCopy, index, Shepherd) => {
+  let steps = {
+    text: xss.filterUrl(item.text),
+    title: xss.filterUrl(item.title),
+    classes: item.classes,
+    attachTo: {
+      element: item.domElement,
+      on: item.popPosition || state.popPosition
+    },
+    hightBox: item.hightBox || null,
+    buttons: deepCopy[index].button,
+    cancelIcon: {
+      enabled: true
+    },
+    id: item.id,
+    scrollTo: true,
+    scrollToHandler(el) {
+      if (el.getBoundingClientRect().top > document.documentElement.clientHeight) {
+        if (document.documentElement.scrollTop > 0) {
+          window.scrollTo(0, document.documentElement.scrollTop + el.getBoundingClientRect().top / 2);
+        } else {
+          window.scrollTo(0, el.getBoundingClientRect().top - document.documentElement.clientHeight / 2);
+        }
+      }
+    },
+    when: {
+      show() {
+        const currentStep = Shepherd.activeTour && Shepherd.activeTour.getCurrentStep();
+        const currentStepElement = currentStep && currentStep.getElement();
+        const footer = currentStepElement && currentStepElement.querySelector(".shepherd-footer");
+        const progress = document.createElement("span");
+        progress.classList.add("progress-style");
+        progress.innerText = `${Shepherd.activeTour && Shepherd.activeTour.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour && Shepherd.activeTour.steps.length}`;
+        footer && footer.insertBefore(progress, currentStepElement.querySelector(".shepherd-button"));
+      }
+    }
+  };
+  return steps;
+};
+const callBack = (step, item) => {
+  step.on("before-show", () => {
+    if (typeof item.beforeShow === "function") {
+      item.beforeShow();
+    }
+  });
+  step.on("show", () => {
+    if (typeof item.show === "function") {
+      item.show();
+    }
+  });
+  step.on("before-hide", () => {
+    if (typeof item.beforeHide === "function") {
+      item.beforeHide();
+    }
+  });
+  step.on("hide", () => {
+    if (typeof item.hide === "function") {
+      item.hide();
+    }
+  });
+  step.on("complete", () => {
+    if (typeof item.complete === "function") {
+      item.complete();
+    }
+  });
+  step.on("cancel", () => {
+    if (typeof item.cancel === "function") {
+      item.cancel();
+    }
+  });
+  step.on("destroy", () => {
+    if (typeof item.destroy === "function") {
+      item.destroy();
+    }
+  });
+};
+export {
+  createShepherd,
+  mounted
+};

package/guide/vue.js

@@ -0,0 +1,36 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-PKUHTIDK.js";
+import { createShepherd, mounted } from "./index";
+const api = ["state"];
+const renderless = (props, { reactive, onMounted, watch }, utils, { Shepherd, offset }) => {
+  const state = reactive({
+    tour: null,
+    tour1: null,
+    showStep: false,
+    domData: props.domData || null,
+    mainAxis: props.mainAxis,
+    crossAxis: props.crossAxis,
+    alignmentAxis: props.alignmentAxis,
+    popPosition: props.popPosition,
+    modalOverlayOpeningPadding: props.modalOverlayOpeningPadding,
+    modalOverlayOpeningRadius: props.modalOverlayOpeningRadius,
+    arrow: props.arrow,
+    lightClass: props.lightClass
+  });
+  let baseApi = {
+    state,
+    createShepherd: createShepherd({ state, props, Shepherd, offset })
+  };
+  const api2 = __spreadProps(__spreadValues({}, baseApi), {
+    mounted: mounted({ state, api: baseApi })
+  });
+  watch(() => props.showStep, api2.createShepherd);
+  onMounted(api2.mounted);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/hrapprover/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { extend } from "@opentiny/vue-renderless/common/object";
+import { extend } from "../common/object";
 const getHrList = ({ api, props, state }) => (deptCode) => {
   state.loading = true;
   const params = {

package/image/index.js

@@ -1,8 +1,8 @@
 import "../chunk-PKUHTIDK.js";
-import { on, off, getScrollContainer, isInContainer } from "@opentiny/vue-renderless/common/deps/dom";
-import { typeOf } from "@opentiny/vue-renderless/common/type";
-import "@opentiny/vue-renderless/common/deps/requestAnimationFrame";
-import { rafThrottle } from "@opentiny/vue-renderless/image-viewer";
+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, api }) => () => {
@@ -34,6 +34,9 @@ const handleLoad = ({ state, emit }) => (event, img) => {
   state.loading = false;
   emit("load", event);
 };
+const deleteHander = (emit) => (event) => {
+  emit("delete", event);
+};
 const handleError = ({ state, emit }) => (event) => {
   state.loading = false;
   state.error = true;
@@ -109,6 +112,7 @@ export {
   computedGetAlignCenter,
   computedGetImageStyle,
   computedGetPreview,
+  deleteHander,
   getImageStyle,
   handleError,
   handleLazyLoad,