@opentiny/vue-renderless 3.11.7 → 3.12.0

package/color-select-panel/alpha-select/vue.js

@@ -1,11 +1,9 @@
 import "../../chunk-G2ADBYYC.js";
-import Color from "../utils/color";
 import { draggable } from "../utils/use-drag";
 import { onDrag, updateThumb } from ".";
 const api = ["state", "color", "slider", "alphaWrapper", "alphaThumb"];
 const renderless = (props, context, { emit }) => {
-  const hex = props.color;
-  const color = new Color(hex, props.alpha);
+  const color = props.color;
   const [rr, gg, bb] = color.getRGB();
   const r = context.ref(rr);
   const g = context.ref(gg);
@@ -16,14 +14,14 @@ const renderless = (props, context, { emit }) => {
   const alpha = context.ref(color.get("a"));
   context.watch(
     () => props.color,
-    (hex2) => {
-      color.reset(hex2);
+    () => {
       const [rr2, gg2, bb2] = color.getRGB();
       r.value = rr2;
       g.value = gg2;
       b.value = bb2;
       alpha.value = color.get("a");
-    }
+    },
+    { deep: true }
   );
   context.watch(alpha, (newAlpha) => {
     updateThumb(newAlpha, alphaThumb.value, alphaWrapper.value);
@@ -33,8 +31,7 @@ const renderless = (props, context, { emit }) => {
     return `linear-gradient(to right, rgba(${r.value}, ${g.value}, ${b.value}, 0) 0%, rgba(${r.value}, ${g.value}, ${b.value}, 1) 100%)`;
   });
   const state = context.reactive({
-    background,
-    hex
+    background
   });
   const api2 = {
     state,

package/color-select-panel/hue-select/index.js

@@ -35,11 +35,13 @@ const updateCursor = (wrapper, cursor, emit) => {
     const { x, y } = updatePosition(event, rect, cursor);
     color.set({
       s: calcSaturation(x, rect.width) * 100,
-      v: calcBrightness(y, rect.height)
+      v: calcBrightness(y, rect.height),
+      h: color.get("h")
     });
     emit("sv-update", {
       s: color.get("s"),
-      v: color.get("v")
+      v: color.get("v"),
+      h: color.get("h")
     });
   };
 };

package/color-select-panel/hue-select/vue.js

@@ -1,29 +1,30 @@
 import "../../chunk-G2ADBYYC.js";
 import { draggable } from "../utils/use-drag";
-import Color from "../utils/color";
 import { getThumbTop, resetCursor, updateThumb, updateCursor } from "./index";
 const api = ["state", "cursor", "wrapper", "bar", "thumb"];
-const renderless = (props, context, { emit }) => {
+const renderless = (props, context, { emit, expose }) => {
   const cursor = context.ref();
   const wrapper = context.ref();
   const thumb = context.ref();
   const bar = context.ref();
-  const color = new Color(props.color);
+  const color = props.color;
   const h = context.ref(color.get("h"));
-  const background = context.computed(() => {
-    return `hsl(${h.value}deg, 100%, 50%)`;
-  });
+  const background = `hsl(${h.value}deg, 100%, 50%)`;
   const state = context.reactive({
     background
   });
   const api2 = { state, cursor, wrapper, bar, thumb };
   context.watch(
-    () => props.color,
-    (newColor) => {
-      color.reset(newColor);
+    () => props,
+    () => {
+      h.value = color.get("h");
       resetCursor(color.get("s"), color.get("v"), wrapper, cursor, thumb, color, h);
-    }
+    },
+    { deep: true }
   );
+  context.watch(h, (newHue) => {
+    state.background = `hsl(${newHue}deg, 100%, 50%)`;
+  });
   context.onMounted(() => {
     const update = {
       thumb: updateThumb(bar, thumb, h, emit),

package/color-select-panel/index.js

@@ -1,8 +1,12 @@
-import "../chunk-G2ADBYYC.js";
-const onConfirm = (hex, triggerBg, res, emit, stack, enableHistory) => {
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import Color from "./utils/color";
+const onConfirm = (hex, pre, res, emit, stack, enableHistory, color) => {
   return () => {
+    pre.value = hex.value;
     hex.value = res.value;
-    triggerBg.value = res.value;
     if (enableHistory) {
       const itemIdx = Math.max(
         stack.value.indexOf(res.value),
@@ -14,32 +18,36 @@ const onConfirm = (hex, triggerBg, res, emit, stack, enableHistory) => {
       }
       stack.value.unshift(res.value);
     }
+    color.value.setPrevH(color.value.get("h"));
     emit("confirm", res.value);
   };
 };
-const onCancel = (res, triggerBg, emit, isShow, hex, color) => {
+const onCancel = (res, pre, emit, isShow, hex, color) => {
   return () => {
     if (isShow.value) {
-      res.value = triggerBg.value;
-      hex.value = triggerBg.value;
-      color.reset(hex.value);
-      emit("cancel");
+      res.value = pre.value;
+      hex.value = pre.value;
+      const tmpColor = new Color(pre.value);
+      color.value.set(__spreadProps(__spreadValues({}, tmpColor.getHSV()), {
+        h: color.value.get("preH")
+      }));
+      emit("cancel", color);
     }
   };
 };
 const onColorUpdate = (color, res) => {
-  res.value = color.getHex();
+  res.value = color.value.getHex();
 };
 const onHSVUpdate = (color, res, hex, emit) => {
   return {
     onHueUpdate: (hue) => {
-      color.set({ h: hue });
+      color.value.set({ h: hue });
       onColorUpdate(color, res);
-      hex.value = color.getHex();
+      hex.value = color.value.getHex();
       emit("hue-update", hue);
     },
     onSVUpdate: ({ s, v }) => {
-      color.set({ s, v });
+      hex.value = color.value.getHex();
       onColorUpdate(color, res);
       emit("sv-update", { s, v });
     }
@@ -48,23 +56,27 @@ const onHSVUpdate = (color, res, hex, emit) => {
 const onAlphaUpdate = (color, res) => {
   return {
     update: (alpha) => {
-      color.set({ a: alpha });
+      color.value.set({ a: alpha });
       onColorUpdate(color, res);
     }
   };
 };
-const handleHistoryClick = (hex, res, color) => {
+const handleHistoryClick = (hex, res, color, emit) => {
   return (history) => {
     hex.value = history;
     res.value = history;
-    color.reset(history);
+    const tmpColor = new Color(history);
+    color.value.set(__spreadValues({}, tmpColor.getHSV()));
+    emit("color-update", color);
   };
 };
-const handlePredefineClick = (hex, res, color) => {
+const handlePredefineClick = (hex, res, color, emit) => {
   return (selectedColor) => {
     hex.value = selectedColor;
     res.value = selectedColor;
-    color.reset(selectedColor);
+    const tmpColor = new Color(selectedColor);
+    color.value.set(__spreadValues({}, tmpColor.getHSV()));
+    emit("color-update", color);
   };
 };
 export {

package/color-select-panel/utils/color.js

@@ -33,6 +33,7 @@ class Color {
     this.s = 0;
     this.v = 0;
     this.a = 100;
+    this.preH = 0;
     this.enableAlpha = false;
     this.reset(value);
     this.enableAlpha = alpha;
@@ -48,6 +49,7 @@ class Color {
     this.hex = normalizeHexColor(hex);
     const { r, g, b, a } = hexToRgb(this.hex);
     const { h, s, v } = rgb([r, g, b, a]).hsv().object();
+    this.preH = h;
     this.h = h;
     this.s = s;
     this.v = v;
@@ -59,6 +61,9 @@ class Color {
     this.v = v != null ? v : this.v;
     this.a = a != null ? a : this.a;
   }
+  setPrevH(val) {
+    this.preH = val;
+  }
   /**
    *
    * @returns [R,G,B]

package/color-select-panel/vue.js

@@ -19,6 +19,7 @@ const renderless = (props, context, { emit }) => {
   const { modelValue, visible, history, predefine } = context.toRefs(props);
   const hex = context.ref((_a = modelValue == null ? void 0 : modelValue.value) != null ? _a : "transparent");
   const res = context.ref((_b = modelValue == null ? void 0 : modelValue.value) != null ? _b : "transparent");
+  const pre = context.ref(res.value);
   const triggerBg = context.ref((_c = modelValue == null ? void 0 : modelValue.value) != null ? _c : "transparent");
   const isShow = context.ref((_d = visible == null ? void 0 : visible.value) != null ? _d : false);
   const cursor = context.ref();
@@ -29,7 +30,7 @@ const renderless = (props, context, { emit }) => {
   const changeVisible = (state2) => {
     isShow.value = state2;
   };
-  const color = new Color(hex.value, props.alpha);
+  const color = context.ref(new Color(hex.value, props.alpha));
   const state = context.reactive({
     isShow,
     hex,
@@ -56,11 +57,19 @@ const renderless = (props, context, { emit }) => {
     },
     { deep: true }
   );
+  context.watch(
+    state,
+    () => {
+      state.color = state.color;
+    },
+    { deep: true }
+  );
   context.watch(modelValue, (newValue) => {
+    pre.value = res.value;
     hex.value = newValue;
     res.value = newValue;
-    triggerBg.value = newValue;
-    color.reset(hex.value);
+    color.value.reset(newValue);
+    state.color.reset(newValue);
   });
   context.watch(visible, (visible2) => {
     isShow.value = visible2;
@@ -72,11 +81,11 @@ const renderless = (props, context, { emit }) => {
     changeVisible,
     onHueUpdate,
     onSVUpdate,
-    onConfirm: onConfirm(hex, triggerBg, res, emit, stack, enableHistory),
-    onCancel: onCancel(res, triggerBg, emit, isShow, hex, color),
+    onConfirm: onConfirm(hex, pre, res, emit, stack, enableHistory, color),
+    onCancel: onCancel(res, pre, emit, isShow, hex, color),
     onAlphaUpdate: update,
-    onHistoryClick: handleHistoryClick(hex, res, color),
-    onPredefineColorClick: handlePredefineClick(hex, res, color),
+    onHistoryClick: handleHistoryClick(hex, res, color, emit),
+    onPredefineColorClick: handlePredefineClick(hex, res, color, emit),
     cursor
   };
   return api2;

package/column-list-item/index.js

@@ -1,9 +1,9 @@
 import "../chunk-G2ADBYYC.js";
 import { isNull } from "../common/type";
-const handelIconClick = ({ emit }) => (item, index) => {
+const handelIconClick = ({ emit }) => (item, index, event) => {
   if (item.disabled)
     return;
-  emit("icon-click", item, index);
+  emit("icon-click", item, index, event);
 };
 const handleChange = ({ constants, dispatch, emit, state, nextTick }) => () => {
   nextTick(() => {
@@ -24,23 +24,37 @@ const getIsGroup = ({ constants, parent: $parent, state }) => () => {
   return false;
 };
 const getSize = ({ props, state }) => () => state.isGroup ? state.columnGroup.size || props.size : props.size;
-const isDisabled = ({ props, state }) => () => props.checkboxDisabled || state.columnGroup.disabled;
+const isDisabled = ({ props, state }) => () => props.disabled || state.columnGroup.disabled;
 const getModel = ({ props, state }) => () => {
   const model = state.isGroup ? state.store : props.modelValue !== void 0 ? props.modelValue : state.selfModel;
-  return isNull(model) ? [] : model;
+  if (state.showCheckbox) {
+    return isNull(model) ? [] : model;
+  } else {
+    return state.store;
+  }
 };
 const setModel = ({ constants, dispatch, emit, state }) => (val) => {
   if (state.isGroup) {
     dispatch(constants.COLUMN_GROUP, "update:modelValue", [val]);
   } else {
     emit("update:modelValue", val);
-    state.selfModel = val;
+    state.showCheckbox && (state.selfModel = val);
   }
 };
 const computedStore = ({ state, props }) => () => state.isGroup ? state.columnGroup.modelValue : props.modelValue;
+const getItemChecked = ({ props, state }) => () => {
+  if (!state.showCheckbox || !state.showRadio)
+    return;
+  if (state.showCheckbox) {
+    return state.isGroup || Array.isArray(state.model) ? ~state.model.indexOf(props.label) : state.model;
+  } else {
+    return state.model === props.label;
+  }
+};
 export {
   computedStore,
   getIsGroup,
+  getItemChecked,
   getModel,
   getSize,
   handelIconClick,

package/column-list-item/vue.js

@@ -1,28 +1,30 @@
 import "../chunk-G2ADBYYC.js";
 import {
+  getModel,
+  setModel,
   handelIconClick,
+  computedStore,
+  getItemChecked,
   handleChange,
   getIsGroup,
   getSize,
-  isDisabled,
-  getModel,
-  setModel,
-  computedStore
+  isDisabled
 } from "./index";
-const api = ["state", "handelIconClick"];
-const renderless = (props, { reactive, watch, computed }, { vm, parent, emit, constants, nextTick, dispatch }) => {
+const api = ["state", "handelIconClick", "handleChange"];
+const renderless = (props, { reactive, computed }, { vm, parent, emit, nextTick, dispatch, constants }) => {
   const api2 = {};
   const state = reactive({
     columnGroup: {},
-    itemChecked: props.modelValue,
+    size: computed(() => api2.getSize()),
+    disabled: computed(() => api2.isDisabled()),
+    itemChecked: computed(() => api2.getItemChecked()),
     sliceNum: computed(() => props.size === "small" ? 1 : 2),
     iconNum: computed(() => props.size === "small" ? 2 : 3),
     effectOptions: computed(() => props.options.filter((item) => !item.hidden)),
     showCheckbox: computed(() => props.showCheckbox || state.columnGroup.showCheckbox),
+    showRadio: computed(() => props.showRadio || state.columnGroup.showRadio),
     store: computed(() => api2.computedStore()),
-    getIsGroup: computed(() => api2.getIsGroup()),
-    size: computed(() => api2.getSize()),
-    disabled: computed(() => api2.isDisabled()),
+    isGroup: computed(() => api2.getIsGroup()),
     model: computed({
       get: () => api2.getModel(),
       set: (val) => api2.setModel(val)
@@ -30,16 +32,16 @@ const renderless = (props, { reactive, watch, computed }, { vm, parent, emit, co
   });
   Object.assign(api2, {
     state,
-    getSize: getSize({ props, state }),
-    getModel: getModel({ props, state }),
     getIsGroup: getIsGroup({ constants, parent, state }),
     isDisabled: isDisabled({ props, state }),
     setModel: setModel({ constants, dispatch, emit, props, vm, state }),
+    getSize: getSize({ props, state }),
+    getModel: getModel({ props, state }),
     handleChange: handleChange({ constants, dispatch, emit, state, nextTick }),
     computedStore: computedStore({ state, props }),
-    handelIconClick: handelIconClick({ emit })
+    handelIconClick: handelIconClick({ emit }),
+    getItemChecked: getItemChecked({ state, props })
   });
-  watch(() => state.model, api2.handleChange, { deep: true });
   return api2;
 };
 export {

package/common/bigInt.js

@@ -125,7 +125,7 @@ class BigIntDecimal {
       const trimRet = trimNumber(mergedValue);
       this.negative = trimRet.negative;
       const numbers = trimRet.trimStr.split(".");
-      this.integer = numbers[0].indexOf("e") === -1 ? BigInt(numbers[0]) : numbers[0];
+      this.integer = !numbers[0].includes("e") ? BigInt(numbers[0]) : numbers[0];
       const decimalStr = numbers[1] || "0";
       this.decimal = convertBigInt(decimalStr);
       this.decimalLen = decimalStr.length;

package/common/deps/dom.js

@@ -5,15 +5,15 @@ const isServer = typeof window === "undefined";
 const SPECIAL_CHARS_REGEXP = /([:\-_]+(.))/g;
 const MOZ_HACK_REGEXP = /^moz([A-Z])/;
 const camelCase = (name) => name.replace(SPECIAL_CHARS_REGEXP, (_, separator, letter, offset) => offset ? letter.toUpperCase() : letter).replace(MOZ_HACK_REGEXP, "Moz$1");
-const on = (el, event, handler) => {
+const on = (el, event, handler, options = false) => {
   if (el && event && handler) {
-    el.addEventListener(event, handler, false);
+    el.addEventListener(event, handler, options);
   }
 };
-const off = (el, event, handler) => {
+const off = (el, event, handler, options = false) => {
   window.document;
   if (el && event) {
-    el.removeEventListener(event, handler, false);
+    el.removeEventListener(event, handler, options);
   }
 };
 const once = (el, event, fn) => {
@@ -145,18 +145,50 @@ const getDomNode = () => {
     visibleWidth: documentElement.clientWidth || bodyElem.clientWidth
   };
 };
+const getScrollTop = (el) => {
+  const top = "scrollTop" in el ? el.scrollTop : el.pageYOffset;
+  return Math.max(top, 0);
+};
+const stopPropagation = (event) => event.stopPropagation();
+const preventDefault = (event, isStopPropagation) => {
+  if (typeof event.cancelable !== "boolean" || event.cancelable) {
+    event.preventDefault();
+  }
+  if (isStopPropagation) {
+    stopPropagation(event);
+  }
+};
+const overflowScrollReg = /scroll|auto|overlay/i;
+const defaultRoot = isServer ? void 0 : window;
+const isElement = (node) => node.tagName !== "HTML" && node.tagName !== "BODY" && node.nodeType === 1;
+const getScrollParent = (el, root = defaultRoot) => {
+  let node = el;
+  while (node && node !== root && isElement(node)) {
+    const { overflowY } = window.getComputedStyle(node);
+    if (overflowScrollReg.test(overflowY)) {
+      return node;
+    }
+    node = node.parentNode;
+  }
+  return root;
+};
 export {
   addClass,
   getDomNode,
   getScrollContainer,
+  getScrollParent,
+  getScrollTop,
   getStyle,
   hasClass,
   isInContainer,
   isScroll,
+  isServer,
   isVNode,
   off,
   on,
   once,
+  preventDefault,
   removeClass,
-  setStyle
+  setStyle,
+  stopPropagation
 };

package/common/deps/repeat-click.js

@@ -1,13 +1,14 @@
 import "../../chunk-G2ADBYYC.js";
 import { on, once } from "./dom";
 var repeat_click_default = (el, binding) => {
+  const LONG_PRESS_INTERVAL = 200;
   let interval = null;
   let startTime;
   const handler = () => {
     typeof binding.value === "function" && binding.value.apply();
   };
   const clear = () => {
-    if (Date.now() - startTime < 100) {
+    if (Date.now() - startTime < LONG_PRESS_INTERVAL) {
       handler();
     }
     clearInterval(interval);
@@ -20,7 +21,7 @@ var repeat_click_default = (el, binding) => {
     startTime = Date.now();
     once(document, "mouseup", clear);
     clearInterval(interval);
-    interval = setInterval(handler, 100);
+    interval = setInterval(handler, LONG_PRESS_INTERVAL);
   });
 };
 export {

package/common/deps/touch-emulator.js

@@ -0,0 +1,95 @@
+import "../../chunk-G2ADBYYC.js";
+let emulated = false;
+let initiated = false;
+let eventTarget = null;
+let mouseTarget = null;
+const matches = Element.prototype.matches || Element.prototype.webkitMatchesSelector;
+const closest = (el, s) => {
+  do {
+    if (matches.call(el, s))
+      return el;
+    el = el.parentElement || el.parentNode;
+  } while (el !== null && el.nodeType === 1);
+  return null;
+};
+class Touch {
+  constructor(target, identifier, pos, deltaX, deltaY) {
+    this.target = target;
+    this.identifier = identifier;
+    deltaX = deltaX || 0;
+    deltaY = deltaY || 0;
+    this.pageX = pos.pageX + deltaX;
+    this.pageY = pos.pageY + deltaY;
+    this.screenX = pos.screenX + deltaX;
+    this.screenY = pos.screenY + deltaY;
+    this.clientX = pos.clientX + deltaX;
+    this.clientY = pos.clientY + deltaY;
+  }
+}
+const TouchList = () => {
+  const touchList = [];
+  touchList.item = (index) => touchList[index] || null;
+  touchList.identifiedTouch = (id) => touchList[id + 1] || null;
+  return touchList;
+};
+const createTouchList = (mouseEv) => {
+  const touchList = TouchList();
+  touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
+  return touchList;
+};
+const getActiveTouches = (mouseEv) => {
+  if (mouseEv.type === "mouseup") {
+    return TouchList();
+  }
+  return createTouchList(mouseEv);
+};
+const triggerTouch = (eventName, mouseEv) => {
+  const touchEvent = document.createEvent("Event");
+  touchEvent.initEvent(eventName, true, true);
+  touchEvent.altKey = mouseEv.altKey;
+  touchEvent.metaKey = mouseEv.metaKey;
+  touchEvent.ctrlKey = mouseEv.ctrlKey;
+  touchEvent.shiftKey = mouseEv.shiftKey;
+  touchEvent.changedTouches = createTouchList(mouseEv);
+  touchEvent.targetTouches = getActiveTouches(mouseEv);
+  touchEvent.touches = getActiveTouches(mouseEv);
+  touchEvent.isTinySimulate = true;
+  eventTarget.dispatchEvent(touchEvent);
+};
+const onMouse = (touchType) => (ev) => {
+  if (ev.type === "mousedown") {
+    initiated = true;
+  }
+  if (ev.type === "mouseup") {
+    initiated = false;
+  }
+  if (ev.type === "mousemove" && !initiated) {
+    return;
+  }
+  if (ev.type === "mousedown" || !mouseTarget) {
+    mouseTarget = ev.target;
+  }
+  if ((eventTarget = closest(mouseTarget, "[data-tiny-touch-simulate-container]")) && eventTarget.dispatchEvent) {
+    triggerTouch(touchType, ev);
+  }
+  if (ev.type === "mouseup") {
+    eventTarget = null;
+    mouseTarget = null;
+  }
+};
+const touchEmulator = () => {
+  window.addEventListener("mousedown", onMouse("touchstart"), true);
+  window.addEventListener("mousemove", onMouse("touchmove"), true);
+  window.addEventListener("mouseup", onMouse("touchend"), true);
+};
+const emulate = () => {
+  const supportTouch = "ontouchstart" in window;
+  if (!emulated && !supportTouch) {
+    emulated = true;
+    touchEmulator();
+  }
+};
+var touch_emulator_default = emulate;
+export {
+  touch_emulator_default as default
+};

package/common/deps/touch.js

@@ -1,19 +1,13 @@
 import "../../chunk-G2ADBYYC.js";
 const MIN_DISTANCE = 10;
-function getDirection(w, h) {
-  if (h > w && h > MIN_DISTANCE) {
-    return "vertical";
-  } else if (w > h && w > MIN_DISTANCE) {
+const getDirection = (x, y) => {
+  if (x > y && x > MIN_DISTANCE) {
     return "horizontal";
   }
+  if (y > x && y > MIN_DISTANCE) {
+    return "vertical";
+  }
   return "";
-}
-const resetTouchStatus = (state) => {
-  state.direction = "";
-  state.deltaX = 0;
-  state.deltaY = 0;
-  state.offsetX = 0;
-  state.offsetY = 0;
 };
 const touchStart = (state) => (event) => {
   resetTouchStatus(state);
@@ -28,6 +22,13 @@ const touchMove = (state) => (event) => {
   state.offsetY = Math.abs(state.deltaY);
   state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
 };
+const resetTouchStatus = (state) => {
+  state.direction = "";
+  state.deltaX = 0;
+  state.deltaY = 0;
+  state.offsetX = 0;
+  state.offsetY = 0;
+};
 export {
   getDirection,
   resetTouchStatus,

package/common/deps/useEventListener.js

@@ -0,0 +1,47 @@
+import "../../chunk-G2ADBYYC.js";
+import { on, off, isServer } from "./dom";
+const onMountedOrActivated = ({ onMounted, onActivated, nextTick }) => (hook) => {
+  let mounted;
+  onMounted(() => (hook(), nextTick(() => mounted = true)));
+  onActivated(() => mounted && hook());
+};
+const useEventListener = ({ unref, isRef, watch, nextTick, onMounted, onUnmounted, onActivated, onDeactivated }) => (type, listener, options = {}) => {
+  if (isServer)
+    return;
+  const { target = window, passive = false, capture = false } = options;
+  let cleaned = false;
+  let attached;
+  const add = (target2) => {
+    if (cleaned)
+      return;
+    const element = unref(target2);
+    if (element && !attached) {
+      on(element, type, listener, { capture, passive });
+      attached = true;
+    }
+  };
+  const remove = (target2) => {
+    if (cleaned)
+      return;
+    const element = unref(target2);
+    if (element && attached) {
+      off(element, type, listener, { capture, passive });
+      attached = false;
+    }
+  };
+  onUnmounted(() => remove(target));
+  onDeactivated(() => remove(target));
+  onMountedOrActivated({ onMounted, onActivated, nextTick })(() => add(target));
+  let stopWatch;
+  if (isRef(target)) {
+    stopWatch = watch(target, (val, oldVal) => (remove(oldVal), add(val)));
+  }
+  return () => {
+    stopWatch && stopWatch();
+    remove(target);
+    cleaned = true;
+  };
+};
+export {
+  useEventListener
+};