@hoci/components 0.8.0 → 0.9.0

package/dist/index.mjs

@@ -1,2224 +0,0 @@
-import { defineHookProps, defineHookEmits, defineHookComponent, elementRef, toReactive, useElement, throttleByRaf, isWindow, valuePropType, labelPropType, classPropType, useSharedConfig, getFirstChilld } from '@hoci/shared';
-import { onMounted, nextTick, watch, getCurrentScope, onScopeDispose, getCurrentInstance, unref, readonly, toRef as toRef$1, ref, customRef, shallowRef, toValue, computed, inject, watchPostEffect, provide, defineComponent, h, renderSlot, Teleport, reactive, KeepAlive, triggerRef } from 'vue';
-import { px, capitalize, cls, each } from 'tslx';
-import { affixProps as affixProps$1, useAffix, configProviderProps, provideSharedConfig, fileUploadEmits, fileUploadProps, useFileUpload, iconProps, useIcon, itemEmits as itemEmits$1, itemProps as itemProps$1, useSelectionItem as useSelectionItem$1, popoverEmits, popoverProps, usePopover, selectionEmits as selectionEmits$1, selectionProps as selectionProps$1, useSelectionList as useSelectionList$1, switchEmits, switchProps, useSwitch } from '@hoci/core';
-
-function tryOnScopeDispose(fn) {
-  if (getCurrentScope()) {
-    onScopeDispose(fn);
-    return true;
-  }
-  return false;
-}
-
-function isDefined(v) {
-  return unref(v) != null;
-}
-
-const isClient = typeof window !== "undefined" && typeof document !== "undefined";
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-const notNullish = (val) => val != null;
-const toString = Object.prototype.toString;
-const isObject = (val) => toString.call(val) === "[object Object]";
-const noop = () => {
-};
-
-function createFilterWrapper(filter, fn) {
-  function wrapper(...args) {
-    return new Promise((resolve, reject) => {
-      Promise.resolve(filter(() => fn.apply(this, args), { fn, thisArg: this, args })).then(resolve).catch(reject);
-    });
-  }
-  return wrapper;
-}
-const bypassFilter = (invoke) => {
-  return invoke();
-};
-function pausableFilter(extendFilter = bypassFilter, options = {}) {
-  const {
-    initialState = "active"
-  } = options;
-  const isActive = toRef(initialState === "active");
-  function pause() {
-    isActive.value = false;
-  }
-  function resume() {
-    isActive.value = true;
-  }
-  const eventFilter = (...args) => {
-    if (isActive.value)
-      extendFilter(...args);
-  };
-  return { isActive: readonly(isActive), pause, resume, eventFilter };
-}
-function getLifeCycleTarget(target) {
-  return getCurrentInstance();
-}
-function toArray(value) {
-  return Array.isArray(value) ? value : [value];
-}
-
-function toRef(...args) {
-  if (args.length !== 1)
-    return toRef$1(...args);
-  const r = args[0];
-  return typeof r === "function" ? readonly(customRef(() => ({ get: r, set: noop }))) : ref(r);
-}
-
-function watchWithFilter(source, cb, options = {}) {
-  const {
-    eventFilter = bypassFilter,
-    ...watchOptions
-  } = options;
-  return watch(
-    source,
-    createFilterWrapper(
-      eventFilter,
-      cb
-    ),
-    watchOptions
-  );
-}
-
-function watchPausable(source, cb, options = {}) {
-  const {
-    eventFilter: filter,
-    initialState = "active",
-    ...watchOptions
-  } = options;
-  const { eventFilter, pause, resume, isActive } = pausableFilter(filter, { initialState });
-  const stop = watchWithFilter(
-    source,
-    cb,
-    {
-      ...watchOptions,
-      eventFilter
-    }
-  );
-  return { stop, pause, resume, isActive };
-}
-
-function syncRef(left, right, ...[options]) {
-  const {
-    flush = "sync",
-    deep = false,
-    immediate = true,
-    direction = "both",
-    transform = {}
-  } = options || {};
-  const watchers = [];
-  const transformLTR = "ltr" in transform && transform.ltr || ((v) => v);
-  const transformRTL = "rtl" in transform && transform.rtl || ((v) => v);
-  if (direction === "both" || direction === "ltr") {
-    watchers.push(watchPausable(
-      left,
-      (newValue) => {
-        watchers.forEach((w) => w.pause());
-        right.value = transformLTR(newValue);
-        watchers.forEach((w) => w.resume());
-      },
-      { flush, deep, immediate }
-    ));
-  }
-  if (direction === "both" || direction === "rtl") {
-    watchers.push(watchPausable(
-      right,
-      (newValue) => {
-        watchers.forEach((w) => w.pause());
-        left.value = transformRTL(newValue);
-        watchers.forEach((w) => w.resume());
-      },
-      { flush, deep, immediate }
-    ));
-  }
-  const stop = () => {
-    watchers.forEach((w) => w.stop());
-  };
-  return stop;
-}
-
-function tryOnMounted(fn, sync = true, target) {
-  const instance = getLifeCycleTarget();
-  if (instance)
-    onMounted(fn, target);
-  else if (sync)
-    fn();
-  else
-    nextTick(fn);
-}
-
-function watchImmediate(source, cb, options) {
-  return watch(
-    source,
-    cb,
-    {
-      ...options,
-      immediate: true
-    }
-  );
-}
-
-function watchOnce(source, cb, options) {
-  const stop = watch(source, (...args) => {
-    nextTick(() => stop());
-    return cb(...args);
-  }, options);
-  return stop;
-}
-
-const defaultWindow = isClient ? window : void 0;
-
-function unrefElement(elRef) {
-  var _a;
-  const plain = toValue(elRef);
-  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
-}
-
-function useEventListener(...args) {
-  const cleanups = [];
-  const cleanup = () => {
-    cleanups.forEach((fn) => fn());
-    cleanups.length = 0;
-  };
-  const register = (el, event, listener, options) => {
-    el.addEventListener(event, listener, options);
-    return () => el.removeEventListener(event, listener, options);
-  };
-  const firstParamTargets = computed(() => {
-    const test = toArray(toValue(args[0])).filter((e) => e != null);
-    return test.every((e) => typeof e !== "string") ? test : void 0;
-  });
-  const stopWatch = watchImmediate(
-    () => {
-      var _a, _b;
-      return [
-        (_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
-        toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
-        toArray(unref(firstParamTargets.value ? args[2] : args[1])),
-        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
-        toValue(firstParamTargets.value ? args[3] : args[2])
-      ];
-    },
-    ([raw_targets, raw_events, raw_listeners, raw_options]) => {
-      cleanup();
-      if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
-        return;
-      const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
-      cleanups.push(
-        ...raw_targets.flatMap(
-          (el) => raw_events.flatMap(
-            (event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
-          )
-        )
-      );
-    },
-    { flush: "post" }
-  );
-  const stop = () => {
-    stopWatch();
-    cleanup();
-  };
-  tryOnScopeDispose(cleanup);
-  return stop;
-}
-
-function useMounted() {
-  const isMounted = shallowRef(false);
-  const instance = getCurrentInstance();
-  if (instance) {
-    onMounted(() => {
-      isMounted.value = true;
-    }, instance);
-  }
-  return isMounted;
-}
-
-function useSupported(callback) {
-  const isMounted = useMounted();
-  return computed(() => {
-    isMounted.value;
-    return Boolean(callback());
-  });
-}
-
-function useMutationObserver(target, callback, options = {}) {
-  const { window = defaultWindow, ...mutationOptions } = options;
-  let observer;
-  const isSupported = useSupported(() => window && "MutationObserver" in window);
-  const cleanup = () => {
-    if (observer) {
-      observer.disconnect();
-      observer = void 0;
-    }
-  };
-  const targets = computed(() => {
-    const value = toValue(target);
-    const items = toArray(value).map(unrefElement).filter(notNullish);
-    return new Set(items);
-  });
-  const stopWatch = watch(
-    () => targets.value,
-    (targets2) => {
-      cleanup();
-      if (isSupported.value && targets2.size) {
-        observer = new MutationObserver(callback);
-        targets2.forEach((el) => observer.observe(el, mutationOptions));
-      }
-    },
-    { immediate: true, flush: "post" }
-  );
-  const takeRecords = () => {
-    return observer == null ? void 0 : observer.takeRecords();
-  };
-  const stop = () => {
-    stopWatch();
-    cleanup();
-  };
-  tryOnScopeDispose(stop);
-  return {
-    isSupported,
-    stop,
-    takeRecords
-  };
-}
-
-function useResizeObserver(target, callback, options = {}) {
-  const { window = defaultWindow, ...observerOptions } = options;
-  let observer;
-  const isSupported = useSupported(() => window && "ResizeObserver" in window);
-  const cleanup = () => {
-    if (observer) {
-      observer.disconnect();
-      observer = void 0;
-    }
-  };
-  const targets = computed(() => {
-    const _targets = toValue(target);
-    return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
-  });
-  const stopWatch = watch(
-    targets,
-    (els) => {
-      cleanup();
-      if (isSupported.value && window) {
-        observer = new ResizeObserver(callback);
-        for (const _el of els) {
-          if (_el)
-            observer.observe(_el, observerOptions);
-        }
-      }
-    },
-    { immediate: true, flush: "post" }
-  );
-  const stop = () => {
-    cleanup();
-    stopWatch();
-  };
-  tryOnScopeDispose(stop);
-  return {
-    isSupported,
-    stop
-  };
-}
-
-function useElementBounding(target, options = {}) {
-  const {
-    reset = true,
-    windowResize = true,
-    windowScroll = true,
-    immediate = true,
-    updateTiming = "sync"
-  } = options;
-  const height = shallowRef(0);
-  const bottom = shallowRef(0);
-  const left = shallowRef(0);
-  const right = shallowRef(0);
-  const top = shallowRef(0);
-  const width = shallowRef(0);
-  const x = shallowRef(0);
-  const y = shallowRef(0);
-  function recalculate() {
-    const el = unrefElement(target);
-    if (!el) {
-      if (reset) {
-        height.value = 0;
-        bottom.value = 0;
-        left.value = 0;
-        right.value = 0;
-        top.value = 0;
-        width.value = 0;
-        x.value = 0;
-        y.value = 0;
-      }
-      return;
-    }
-    const rect = el.getBoundingClientRect();
-    height.value = rect.height;
-    bottom.value = rect.bottom;
-    left.value = rect.left;
-    right.value = rect.right;
-    top.value = rect.top;
-    width.value = rect.width;
-    x.value = rect.x;
-    y.value = rect.y;
-  }
-  function update() {
-    if (updateTiming === "sync")
-      recalculate();
-    else if (updateTiming === "next-frame")
-      requestAnimationFrame(() => recalculate());
-  }
-  useResizeObserver(target, update);
-  watch(() => unrefElement(target), (ele) => !ele && update());
-  useMutationObserver(target, update, {
-    attributeFilter: ["style", "class"]
-  });
-  if (windowScroll)
-    useEventListener("scroll", update, { capture: true, passive: true });
-  if (windowResize)
-    useEventListener("resize", update, { passive: true });
-  tryOnMounted(() => {
-    if (immediate)
-      update();
-  });
-  return {
-    height,
-    bottom,
-    left,
-    right,
-    top,
-    width,
-    x,
-    y,
-    update
-  };
-}
-
-function useIntersectionObserver(target, callback, options = {}) {
-  const {
-    root,
-    rootMargin = "0px",
-    threshold = 0,
-    window = defaultWindow,
-    immediate = true
-  } = options;
-  const isSupported = useSupported(() => window && "IntersectionObserver" in window);
-  const targets = computed(() => {
-    const _target = toValue(target);
-    return toArray(_target).map(unrefElement).filter(notNullish);
-  });
-  let cleanup = noop;
-  const isActive = shallowRef(immediate);
-  const stopWatch = isSupported.value ? watch(
-    () => [targets.value, unrefElement(root), isActive.value],
-    ([targets2, root2]) => {
-      cleanup();
-      if (!isActive.value)
-        return;
-      if (!targets2.length)
-        return;
-      const observer = new IntersectionObserver(
-        callback,
-        {
-          root: unrefElement(root2),
-          rootMargin,
-          threshold
-        }
-      );
-      targets2.forEach((el) => el && observer.observe(el));
-      cleanup = () => {
-        observer.disconnect();
-        cleanup = noop;
-      };
-    },
-    { immediate, flush: "post" }
-  ) : noop;
-  const stop = () => {
-    cleanup();
-    stopWatch();
-    isActive.value = false;
-  };
-  tryOnScopeDispose(stop);
-  return {
-    isSupported,
-    isActive,
-    pause() {
-      cleanup();
-      isActive.value = false;
-    },
-    resume() {
-      isActive.value = true;
-    },
-    stop
-  };
-}
-
-function useElementVisibility(element, options = {}) {
-  const {
-    window = defaultWindow,
-    scrollTarget,
-    threshold = 0,
-    rootMargin,
-    once = false
-  } = options;
-  const elementIsVisible = shallowRef(false);
-  const { stop } = useIntersectionObserver(
-    element,
-    (intersectionObserverEntries) => {
-      let isIntersecting = elementIsVisible.value;
-      let latestTime = 0;
-      for (const entry of intersectionObserverEntries) {
-        if (entry.time >= latestTime) {
-          latestTime = entry.time;
-          isIntersecting = entry.isIntersecting;
-        }
-      }
-      elementIsVisible.value = isIntersecting;
-      if (once) {
-        watchOnce(elementIsVisible, () => {
-          stop();
-        });
-      }
-    },
-    {
-      root: scrollTarget,
-      window,
-      threshold,
-      rootMargin: toValue(rootMargin)
-    }
-  );
-  return elementIsVisible;
-}
-
-const affixProps = defineHookProps(
-  {
-    fixedClass: {
-      type: String,
-      default: ""
-    },
-    /**
-     * @zh 距离窗口顶部达到指定偏移量后触发
-     * @en Triggered when the specified offset is reached from the top of the window
-     */
-    offset: {
-      type: Number,
-      default: 0
-    },
-    /**
-     * @zh 固定的相对方向
-     */
-    position: {
-      type: String,
-      default: "top"
-    },
-    /**
-     * @zh 滚动容器，默认是 `window`
-     * @en Scroll container, default is `window`
-     */
-    target: {
-      type: [String, Object, Function]
-    },
-    /**
-     * @zh z-index 值
-     * @en Z index value
-     */
-    zIndex: {
-      type: Number,
-      default: 998
-    }
-  }
-);
-defineHookEmits(["scroll", "change"]);
-const AFFIX_TARGET_KEY = Symbol("AFFIX_TARGET_KEY");
-function getTargetRect(target) {
-  return isWindow(target) ? {
-    top: 0,
-    bottom: window.innerHeight
-  } : target.getBoundingClientRect();
-}
-defineHookComponent({
-  props: affixProps,
-  setup(props, { emit }) {
-    const wrapperRef = elementRef();
-    const wrapperRect = toReactive(useElementBounding(wrapperRef));
-    const parentRef = inject(AFFIX_TARGET_KEY, void 0);
-    const targetRef = useElement(props.target, parentRef);
-    const isFixed = ref(false);
-    const placeholderStyle = ref({});
-    const fixedStyle = ref({});
-    const className = computed(() => {
-      return isFixed.value ? props.fixedClass : "";
-    });
-    const wrapperVisible = useElementVisibility(wrapperRef);
-    const containerRef = computed(() => {
-      if (!wrapperVisible.value) {
-        return null;
-      }
-      return targetRef.value ?? window;
-    });
-    const updatePosition = throttleByRaf(async () => {
-      if (!wrapperRef.value || !containerRef.value) {
-        return;
-      }
-      const area = wrapperRect.width * wrapperRect.height;
-      if (area === 0) {
-        return;
-      }
-      const newPlaceholderStyles = {
-        width: px(wrapperRect.width),
-        height: px(wrapperRect.height)
-      };
-      const targetRect = getTargetRect(containerRef.value);
-      let newIsFixed = false;
-      let newFixedStyles = {};
-      const offset = props.offset;
-      if (props.position === "top") {
-        newIsFixed = wrapperRect.top - targetRect.top < offset && offset >= 0;
-        newFixedStyles = newIsFixed ? {
-          position: "fixed",
-          zIndex: props.zIndex,
-          top: px(targetRect.top + offset)
-        } : {};
-      } else {
-        newIsFixed = targetRect.bottom - wrapperRect.bottom < offset;
-        newFixedStyles = newIsFixed ? {
-          position: "fixed",
-          bottom: px(window.innerHeight - targetRect.bottom + offset)
-        } : {};
-      }
-      if (newIsFixed !== isFixed.value) {
-        isFixed.value = newIsFixed;
-        emit("change", newIsFixed);
-      }
-      placeholderStyle.value = newPlaceholderStyles;
-      fixedStyle.value = {
-        ...newFixedStyles,
-        ...newIsFixed ? newPlaceholderStyles : {}
-      };
-    });
-    useEventListener(containerRef, "scroll", () => {
-      emit("scroll");
-      updatePosition();
-    });
-    useEventListener(containerRef, "resize", updatePosition);
-    watchPostEffect(updatePosition);
-    return {
-      className,
-      wrapperRef,
-      containerRef,
-      isFixed,
-      placeholderStyle,
-      fixedStyle,
-      updatePosition
-    };
-  }
-});
-function provideAffixTarget(target) {
-  provide(AFFIX_TARGET_KEY, target);
-}
-
-const HiAffixTarget = defineComponent({
-  name: "HiAffixTarget",
-  setup(_, context) {
-    const targetRef = elementRef();
-    provideAffixTarget(targetRef);
-    return () => h("div", {
-      ref: targetRef,
-      ...context.attrs
-    }, renderSlot(context.slots, "default"));
-  }
-});
-
-const HiAffix = defineComponent({
-  name: "HiAffix",
-  props: {
-    ...affixProps$1,
-    as: {
-      type: String,
-      default: "div"
-    }
-  },
-  setup(props, context) {
-    const { className, wrapperRef, isFixed, placeholderStyle, fixedStyle } = useAffix(props, context);
-    return () => h(props.as, { ref: wrapperRef }, [
-      isFixed.value && h("div", { style: placeholderStyle.value }),
-      h("div", { class: className.value, style: fixedStyle.value }, renderSlot(context.slots, "default"))
-    ]);
-  }
-});
-
-const HiConfigProvider = defineComponent({
-  props: {
-    ...configProviderProps,
-    as: {
-      type: String
-    }
-  },
-  setup(props, context) {
-    provideSharedConfig(props);
-    return () => {
-      const content = renderSlot(context.slots, "default", void 0);
-      if (props.as) {
-        return h(props.as, content);
-      }
-      return content;
-    };
-  }
-});
-
-const HiFileUpload = defineComponent({
-  name: "HiFileUpload",
-  props: {
-    ...fileUploadProps,
-    accept: {
-      type: String,
-      default: "*/*"
-    },
-    as: {
-      type: String,
-      default: "div"
-    }
-  },
-  emits: fileUploadEmits,
-  setup(props, context) {
-    const { slots } = context;
-    const { fileInputRef, files, openFileInput } = useFileUpload(props, context);
-    return () => {
-      return h(props.as, {
-        onClick: openFileInput
-      }, [
-        h("input", {
-          ref: fileInputRef,
-          type: "file",
-          accept: props.accept,
-          multiple: props.multiple,
-          style: { display: "none" }
-        }),
-        renderSlot(slots, "default", {
-          files: files.value
-        })
-      ]);
-    };
-  }
-});
-
-const HiIcon = defineComponent({
-  props: {
-    ...iconProps,
-    as: {
-      type: String,
-      default: "div"
-    }
-  },
-  setup(props, context) {
-    const { style } = useIcon(props, context);
-    return () => {
-      return h(props.as, {
-        style: style.value
-      });
-    };
-  }
-});
-
-const HiItem = defineComponent({
-  name: "HiItem",
-  props: {
-    ...itemProps$1,
-    as: {
-      type: String,
-      default: "div"
-    }
-  },
-  emits: itemEmits$1,
-  setup(props, context) {
-    const { render, activate, className, isDisabled, activateEvent } = useSelectionItem$1(
-      props,
-      context
-    );
-    return () => h(
-      props.as,
-      {
-        class: className.value,
-        [`on${capitalize(activateEvent.value)}`]: activate,
-        disabled: isDisabled.value
-      },
-      render()
-    );
-  }
-});
-
-const HiPopover = defineComponent({
-  name: "HiPopover",
-  props: {
-    ...popoverProps,
-    as: {
-      type: String,
-      default: "div"
-    }
-  },
-  emits: popoverEmits,
-  setup(props, context) {
-    const { triggerRef, popupClass, events, popupRef, popupStyle } = usePopover(props, context);
-    return () => {
-      let content = h(
-        "div",
-        {
-          class: popupClass.value,
-          style: popupStyle.value,
-          ref: popupRef
-        },
-        renderSlot(context.slots, "popup")
-      );
-      if (props.teleport) {
-        content = h(
-          Teleport,
-          {
-            to: props.teleport === true ? "body" : props.teleport
-          },
-          content
-        );
-      }
-      return h(props.as, {
-        ref: triggerRef,
-        ...events
-      }, [
-        renderSlot(context.slots, "default"),
-        content
-      ]);
-    };
-  }
-});
-
-const HiSelection = defineComponent({
-  name: "HiSelection",
-  props: {
-    ...selectionProps$1,
-    as: {
-      type: String,
-      default: "div"
-    }
-  },
-  emits: selectionEmits$1,
-  setup(props, context) {
-    const { render } = useSelectionList$1(props, context);
-    return () => h(props.as, {}, render());
-  }
-});
-
-const HiSwitch = defineComponent({
-  name: "HiSwitch",
-  props: {
-    ...switchProps,
-    as: {
-      type: String,
-      default: "div"
-    }
-  },
-  emits: switchEmits,
-  setup(props, context) {
-    const { slots } = context;
-    const { className, toggle, modelValue, isDisabled, activateEvent } = useSwitch(props, context);
-    return () => {
-      return h(
-        props.as,
-        {
-          class: className.value,
-          [`on${capitalize(activateEvent.value)}`]: toggle
-        },
-        renderSlot(slots, "default", {
-          active: modelValue.value,
-          isDisabled: isDisabled.value
-        })
-      );
-    };
-  }
-});
-
-const selectionProps = defineHookProps({
-  modelValue: {
-    type: valuePropType,
-    default: () => null
-  },
-  /**
-   * 选中时的 class
-   */
-  activeClass: {
-    type: classPropType,
-    default: "active"
-  },
-  /**
-   *  每个选项的 class
-   */
-  itemClass: {
-    type: classPropType,
-    default: ""
-  },
-  disabledClass: {
-    type: classPropType,
-    default: "disabled"
-  },
-  unactiveClass: {
-    type: classPropType,
-    default: ""
-  },
-  label: {
-    type: labelPropType
-  },
-  /**
-   *  多选模式
-   */
-  multiple: {
-    type: [Boolean, Number, Array],
-    default: () => false
-  },
-  /**
-   * 可清除
-   */
-  clearable: {
-    type: Boolean
-  },
-  defaultValue: {
-    type: valuePropType,
-    default: () => null
-  },
-  activateEvent: {
-    type: String
-  }
-});
-const selectionEmits = defineHookEmits([
-  "update:modelValue",
-  "change",
-  "load",
-  "unload",
-  "reject"
-]);
-const HiSelectionContextSymbol = Symbol("[hi-selection]context");
-function useSelectionContext() {
-  const sharedConfig = useSharedConfig();
-  return inject(HiSelectionContextSymbol, {
-    isActive: () => false,
-    activate: () => {
-    },
-    changeActive: () => {
-    },
-    reject: () => {
-    },
-    activeClass: "active",
-    unactiveClass: "unactive",
-    disabledClass: "disabled",
-    itemClass: "",
-    activateEvent: sharedConfig.activateEvent,
-    label: null,
-    multiple: false,
-    limit: [0, Number.POSITIVE_INFINITY]
-  });
-}
-const useSelectionList = defineHookComponent({
-  props: selectionProps,
-  emits: selectionEmits,
-  setup(props, { emit, slots }) {
-    const options = reactive([]);
-    function toArray(value) {
-      if (!isDefined(value)) {
-        return [];
-      }
-      if (props.multiple && Array.isArray(value)) {
-        return value.filter((v) => v != null || v !== void 0);
-      }
-      return [value];
-    }
-    const actives = reactive([
-      ...toArray(props.modelValue ?? props.defaultValue)
-    ]);
-    const currentValue = computed({
-      get() {
-        return props.multiple ? actives : actives[0];
-      },
-      set(val) {
-        actives.splice(0, actives.length, ...toArray(val));
-      }
-    });
-    const modelValue = computed({
-      get() {
-        return props.modelValue ?? props.defaultValue;
-      },
-      set(val) {
-        emit("update:modelValue", val);
-      }
-    });
-    syncRef(currentValue, modelValue, { immediate: true, deep: true });
-    const emitChange = () => emit("change", currentValue.value);
-    function isActive(value) {
-      return actives.includes(value);
-    }
-    const multipleActive = computed(() => !!props.multiple);
-    const multipleLimit = computed(() => {
-      if (Array.isArray(props.multiple)) {
-        if (props.multiple[1] === void 0) {
-          return [props.multiple[0], Number.POSITIVE_INFINITY];
-        }
-        return props.multiple;
-      }
-      return [0, Number.POSITIVE_INFINITY];
-    });
-    function activate(value) {
-      const [min, max] = multipleLimit.value;
-      if (isActive(value)) {
-        if (multipleActive.value && actives.length > min || props.clearable) {
-          actives.splice(actives.indexOf(value), 1);
-          emitChange();
-        }
-      } else {
-        if (props.multiple) {
-          if (actives.length < max) {
-            actives.push(value);
-            emitChange();
-          }
-        } else {
-          actives.splice(0, actives.length, value);
-          emitChange();
-        }
-      }
-    }
-    function reject(value) {
-      emit("reject", value);
-    }
-    const init = (option) => {
-      function remove() {
-        const index = options.findIndex((e) => e.id === option.id);
-        if (index > -1) {
-          options.splice(index, 1);
-          emit("unload", option);
-        }
-      }
-      for (let i = 0; i < options.length; i++) {
-        if (options[i].value === option.value) {
-          options.splice(i, 1);
-          i--;
-        }
-      }
-      options.push(option);
-      emit("load", option);
-      return remove;
-    };
-    const sharedConfig = useSharedConfig();
-    provide(HiSelectionContextSymbol, toReactive({
-      activeClass: computed(() => cls(props.activeClass)),
-      unactiveClass: computed(() => cls(props.unactiveClass)),
-      disabledClass: computed(() => cls(props.disabledClass)),
-      itemClass: computed(() => cls(props.itemClass)),
-      label: computed(() => props.label),
-      multiple: multipleActive,
-      limit: multipleLimit,
-      clearable: computed(() => props.clearable),
-      defaultValue: computed(() => props.defaultValue),
-      activateEvent: computed(() => props.activateEvent ?? sharedConfig.activateEvent),
-      active: currentValue,
-      activate,
-      changeActive: activate,
-      isActive,
-      reject,
-      init
-    }));
-    const renderItem = () => {
-      const children = options.filter((e) => actives.includes(e.value)).map((e) => e.render());
-      return props.multiple ? children : getFirstChilld(children);
-    };
-    const slotData = {
-      isActive,
-      changeActive: activate,
-      renderItem
-    };
-    const render = () => {
-      return renderSlot(slots, "default", slotData);
-    };
-    return {
-      options,
-      actives,
-      isActive,
-      changeActive: activate,
-      renderItem,
-      render
-    };
-  }
-});
-
-const itemProps = defineHookProps({
-  value: {
-    type: valuePropType,
-    default() {
-      return Math.random().toString(16).slice(2);
-    }
-  },
-  label: {
-    type: [Function, String]
-  },
-  keepAlive: {
-    type: Boolean,
-    default: () => true
-  },
-  activateEvent: {
-    type: String
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  }
-});
-const itemEmits = defineHookEmits(["reject"]);
-const useSelectionItem = defineHookComponent({
-  props: itemProps,
-  emits: itemEmits,
-  setup(props, { slots, emit }) {
-    const context = useSelectionContext();
-    const activate = () => {
-      if (props.disabled) {
-        emit("reject", props.value);
-        context.reject(props.value);
-        return;
-      }
-      context.activate(props.value);
-    };
-    const label = computed(() => {
-      let label2 = props.label ?? context.label;
-      if (label2 && typeof label2 === "function") {
-        label2 = label2(props.value);
-      }
-      return Array.isArray(label2) ? label2 : [label2];
-    });
-    function render() {
-      return slots.default?.({
-        active: context.isActive(props.value),
-        activate
-      }) ?? label.value.filter(Boolean);
-    }
-    let remove = () => {
-    };
-    const init = context.init;
-    if (init) {
-      watch(
-        () => props.value,
-        (value) => {
-          remove();
-          remove = init({
-            id: Math.random().toString(16).slice(2),
-            label: typeof props.label === "string" ? props.label : void 0,
-            value,
-            render
-          });
-        },
-        { immediate: true }
-      );
-      tryOnScopeDispose(remove);
-    }
-    const isActive = computed(() => context.isActive(props.value));
-    const isDisabled = computed(() => props.disabled);
-    const className = computed(() => {
-      const array = [context.itemClass];
-      if (!isDisabled.value) {
-        array.push(context.isActive(props.value) ? context.activeClass : context.unactiveClass);
-      } else {
-        array.push(context.disabledClass);
-      }
-      return cls(array);
-    });
-    const activateEvent = computed(() => props.activateEvent ?? context.activateEvent);
-    return {
-      activate,
-      render,
-      isActive,
-      isDisabled,
-      className,
-      activateEvent,
-      label
-    };
-  }
-});
-
-const HiTabPane = defineComponent({
-  name: "HiTabPane",
-  props: {
-    ...itemProps
-  },
-  emits: itemEmits,
-  inheritAttrs: true,
-  setup(props, context) {
-    const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
-    return () => {
-      return h("div", {
-        class: className.value,
-        [`on${capitalize(activateEvent.value)}`]: activate,
-        disabled: isDisabled.value
-      }, label.value);
-    };
-  }
-});
-
-const HiTabs = defineComponent({
-  name: "HiTabs",
-  props: {
-    ...selectionProps,
-    headerClass: {
-      type: classPropType
-    },
-    as: {
-      type: String,
-      default: "div"
-    },
-    headerAs: {
-      type: String,
-      default: "div"
-    },
-    contentAs: {
-      type: String,
-      default: "div"
-    },
-    contentClass: {
-      type: classPropType
-    },
-    keepAlive: {
-      type: [Boolean, Object],
-      default: false
-    }
-  },
-  inheritAttrs: true,
-  setup(props, context) {
-    const selection = useSelectionList(props, context);
-    return () => {
-      let component = selection.renderItem();
-      if (props.keepAlive) {
-        component = h(KeepAlive, {
-          ...typeof props.keepAlive === "object" ? props.keepAlive : {}
-        }, component);
-      }
-      if (context.slots.content) {
-        component = context.slots.content({
-          component
-        });
-      } else {
-        component = h(props.contentAs, {
-          class: props.contentClass
-        }, component);
-      }
-      return h(props.as, [
-        h(props.headerAs, {
-          class: props.headerClass
-        }, renderSlot(context.slots, "default")),
-        component
-      ]);
-    };
-  }
-});
-
-function memo(getDeps, fn, opts) {
-  let deps = opts.initialDeps ?? [];
-  let result;
-  function memoizedFunction() {
-    var _a, _b, _c, _d;
-    let depTime;
-    if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
-    const newDeps = getDeps();
-    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
-    if (!depsChanged) {
-      return result;
-    }
-    deps = newDeps;
-    let resultTime;
-    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
-    result = fn(...newDeps);
-    if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
-      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
-      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
-      const resultFpsPercentage = resultEndTime / 16;
-      const pad = (str, num) => {
-        str = String(str);
-        while (str.length < num) {
-          str = " " + str;
-        }
-        return str;
-      };
-      console.info(
-        `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
-        `
-            font-size: .6rem;
-            font-weight: bold;
-            color: hsl(${Math.max(
-          0,
-          Math.min(120 - 120 * resultFpsPercentage, 120)
-        )}deg 100% 31%);`,
-        opts == null ? void 0 : opts.key
-      );
-    }
-    (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
-    return result;
-  }
-  memoizedFunction.updateDeps = (newDeps) => {
-    deps = newDeps;
-  };
-  return memoizedFunction;
-}
-function notUndefined(value, msg) {
-  if (value === void 0) {
-    throw new Error(`Unexpected undefined${""}`);
-  } else {
-    return value;
-  }
-}
-const approxEqual = (a, b) => Math.abs(a - b) <= 1;
-const debounce = (targetWindow, fn, ms) => {
-  let timeoutId;
-  return function(...args) {
-    targetWindow.clearTimeout(timeoutId);
-    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
-  };
-};
-
-const getRect = (element) => {
-  const { offsetWidth, offsetHeight } = element;
-  return { width: offsetWidth, height: offsetHeight };
-};
-const defaultKeyExtractor = (index) => index;
-const defaultRangeExtractor = (range) => {
-  const start = Math.max(range.startIndex - range.overscan, 0);
-  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
-  const arr = [];
-  for (let i = start; i <= end; i++) {
-    arr.push(i);
-  }
-  return arr;
-};
-const observeElementRect = (instance, cb) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
-  }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
-  }
-  const handler = (rect) => {
-    const { width, height } = rect;
-    cb({ width: Math.round(width), height: Math.round(height) });
-  };
-  handler(getRect(element));
-  if (!targetWindow.ResizeObserver) {
-    return () => {
-    };
-  }
-  const observer = new targetWindow.ResizeObserver((entries) => {
-    const run = () => {
-      const entry = entries[0];
-      if (entry == null ? void 0 : entry.borderBoxSize) {
-        const box = entry.borderBoxSize[0];
-        if (box) {
-          handler({ width: box.inlineSize, height: box.blockSize });
-          return;
-        }
-      }
-      handler(getRect(element));
-    };
-    instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
-  });
-  observer.observe(element, { box: "border-box" });
-  return () => {
-    observer.unobserve(element);
-  };
-};
-const addEventListenerOptions = {
-  passive: true
-};
-const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
-const observeElementOffset = (instance, cb) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
-  }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
-  }
-  let offset = 0;
-  const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(
-    targetWindow,
-    () => {
-      cb(offset, false);
-    },
-    instance.options.isScrollingResetDelay
-  );
-  const createHandler = (isScrolling) => () => {
-    const { horizontal, isRtl } = instance.options;
-    offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
-    fallback();
-    cb(offset, isScrolling);
-  };
-  const handler = createHandler(true);
-  const endHandler = createHandler(false);
-  endHandler();
-  element.addEventListener("scroll", handler, addEventListenerOptions);
-  const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
-  if (registerScrollendEvent) {
-    element.addEventListener("scrollend", endHandler, addEventListenerOptions);
-  }
-  return () => {
-    element.removeEventListener("scroll", handler);
-    if (registerScrollendEvent) {
-      element.removeEventListener("scrollend", endHandler);
-    }
-  };
-};
-const measureElement = (element, entry, instance) => {
-  if (entry == null ? void 0 : entry.borderBoxSize) {
-    const box = entry.borderBoxSize[0];
-    if (box) {
-      const size = Math.round(
-        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
-      );
-      return size;
-    }
-  }
-  return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
-};
-const elementScroll = (offset, {
-  adjustments = 0,
-  behavior
-}, instance) => {
-  var _a, _b;
-  const toOffset = offset + adjustments;
-  (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
-    [instance.options.horizontal ? "left" : "top"]: toOffset,
-    behavior
-  });
-};
-class Virtualizer {
-  constructor(opts) {
-    this.unsubs = [];
-    this.scrollElement = null;
-    this.targetWindow = null;
-    this.isScrolling = false;
-    this.scrollToIndexTimeoutId = null;
-    this.measurementsCache = [];
-    this.itemSizeCache = /* @__PURE__ */ new Map();
-    this.pendingMeasuredCacheIndexes = [];
-    this.scrollRect = null;
-    this.scrollOffset = null;
-    this.scrollDirection = null;
-    this.scrollAdjustments = 0;
-    this.elementsCache = /* @__PURE__ */ new Map();
-    this.observer = /* @__PURE__ */ (() => {
-      let _ro = null;
-      const get = () => {
-        if (_ro) {
-          return _ro;
-        }
-        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
-          return null;
-        }
-        return _ro = new this.targetWindow.ResizeObserver((entries) => {
-          entries.forEach((entry) => {
-            const run = () => {
-              this._measureElement(entry.target, entry);
-            };
-            this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
-          });
-        });
-      };
-      return {
-        disconnect: () => {
-          var _a;
-          (_a = get()) == null ? void 0 : _a.disconnect();
-          _ro = null;
-        },
-        observe: (target) => {
-          var _a;
-          return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
-        },
-        unobserve: (target) => {
-          var _a;
-          return (_a = get()) == null ? void 0 : _a.unobserve(target);
-        }
-      };
-    })();
-    this.range = null;
-    this.setOptions = (opts2) => {
-      Object.entries(opts2).forEach(([key, value]) => {
-        if (typeof value === "undefined") delete opts2[key];
-      });
-      this.options = {
-        debug: false,
-        initialOffset: 0,
-        overscan: 1,
-        paddingStart: 0,
-        paddingEnd: 0,
-        scrollPaddingStart: 0,
-        scrollPaddingEnd: 0,
-        horizontal: false,
-        getItemKey: defaultKeyExtractor,
-        rangeExtractor: defaultRangeExtractor,
-        onChange: () => {
-        },
-        measureElement,
-        initialRect: { width: 0, height: 0 },
-        scrollMargin: 0,
-        gap: 0,
-        indexAttribute: "data-index",
-        initialMeasurementsCache: [],
-        lanes: 1,
-        isScrollingResetDelay: 150,
-        enabled: true,
-        isRtl: false,
-        useScrollendEvent: false,
-        useAnimationFrameWithResizeObserver: false,
-        ...opts2
-      };
-    };
-    this.notify = (sync) => {
-      var _a, _b;
-      (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
-    };
-    this.maybeNotify = memo(
-      () => {
-        this.calculateRange();
-        return [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ];
-      },
-      (isScrolling) => {
-        this.notify(isScrolling);
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "maybeNotify",
-        debug: () => this.options.debug,
-        initialDeps: [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ]
-      }
-    );
-    this.cleanup = () => {
-      this.unsubs.filter(Boolean).forEach((d) => d());
-      this.unsubs = [];
-      this.observer.disconnect();
-      this.scrollElement = null;
-      this.targetWindow = null;
-    };
-    this._didMount = () => {
-      return () => {
-        this.cleanup();
-      };
-    };
-    this._willUpdate = () => {
-      var _a;
-      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
-      if (this.scrollElement !== scrollElement) {
-        this.cleanup();
-        if (!scrollElement) {
-          this.maybeNotify();
-          return;
-        }
-        this.scrollElement = scrollElement;
-        if (this.scrollElement && "ownerDocument" in this.scrollElement) {
-          this.targetWindow = this.scrollElement.ownerDocument.defaultView;
-        } else {
-          this.targetWindow = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
-        }
-        this.elementsCache.forEach((cached) => {
-          this.observer.observe(cached);
-        });
-        this._scrollToOffset(this.getScrollOffset(), {
-          adjustments: void 0,
-          behavior: void 0
-        });
-        this.unsubs.push(
-          this.options.observeElementRect(this, (rect) => {
-            this.scrollRect = rect;
-            this.maybeNotify();
-          })
-        );
-        this.unsubs.push(
-          this.options.observeElementOffset(this, (offset, isScrolling) => {
-            this.scrollAdjustments = 0;
-            this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
-            this.scrollOffset = offset;
-            this.isScrolling = isScrolling;
-            this.maybeNotify();
-          })
-        );
-      }
-    };
-    this.getSize = () => {
-      if (!this.options.enabled) {
-        this.scrollRect = null;
-        return 0;
-      }
-      this.scrollRect = this.scrollRect ?? this.options.initialRect;
-      return this.scrollRect[this.options.horizontal ? "width" : "height"];
-    };
-    this.getScrollOffset = () => {
-      if (!this.options.enabled) {
-        this.scrollOffset = null;
-        return 0;
-      }
-      this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
-      return this.scrollOffset;
-    };
-    this.getFurthestMeasurement = (measurements, index) => {
-      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
-      const furthestMeasurements = /* @__PURE__ */ new Map();
-      for (let m = index - 1; m >= 0; m--) {
-        const measurement = measurements[m];
-        if (furthestMeasurementsFound.has(measurement.lane)) {
-          continue;
-        }
-        const previousFurthestMeasurement = furthestMeasurements.get(
-          measurement.lane
-        );
-        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
-          furthestMeasurements.set(measurement.lane, measurement);
-        } else if (measurement.end < previousFurthestMeasurement.end) {
-          furthestMeasurementsFound.set(measurement.lane, true);
-        }
-        if (furthestMeasurementsFound.size === this.options.lanes) {
-          break;
-        }
-      }
-      return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a, b) => {
-        if (a.end === b.end) {
-          return a.index - b.index;
-        }
-        return a.end - b.end;
-      })[0] : void 0;
-    };
-    this.getMeasurementOptions = memo(
-      () => [
-        this.options.count,
-        this.options.paddingStart,
-        this.options.scrollMargin,
-        this.options.getItemKey,
-        this.options.enabled
-      ],
-      (count, paddingStart, scrollMargin, getItemKey, enabled) => {
-        this.pendingMeasuredCacheIndexes = [];
-        return {
-          count,
-          paddingStart,
-          scrollMargin,
-          getItemKey,
-          enabled
-        };
-      },
-      {
-        key: false
-      }
-    );
-    this.getMeasurements = memo(
-      () => [this.getMeasurementOptions(), this.itemSizeCache],
-      ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
-        if (!enabled) {
-          this.measurementsCache = [];
-          this.itemSizeCache.clear();
-          return [];
-        }
-        if (this.measurementsCache.length === 0) {
-          this.measurementsCache = this.options.initialMeasurementsCache;
-          this.measurementsCache.forEach((item) => {
-            this.itemSizeCache.set(item.key, item.size);
-          });
-        }
-        const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
-        this.pendingMeasuredCacheIndexes = [];
-        const measurements = this.measurementsCache.slice(0, min);
-        for (let i = min; i < count; i++) {
-          const key = getItemKey(i);
-          const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
-          const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
-          const measuredSize = itemSizeCache.get(key);
-          const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
-          const end = start + size;
-          const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
-          measurements[i] = {
-            index: i,
-            start,
-            size,
-            end,
-            key,
-            lane
-          };
-        }
-        this.measurementsCache = measurements;
-        return measurements;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getMeasurements",
-        debug: () => this.options.debug
-      }
-    );
-    this.calculateRange = memo(
-      () => [
-        this.getMeasurements(),
-        this.getSize(),
-        this.getScrollOffset(),
-        this.options.lanes
-      ],
-      (measurements, outerSize, scrollOffset, lanes) => {
-        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
-          measurements,
-          outerSize,
-          scrollOffset,
-          lanes
-        }) : null;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "calculateRange",
-        debug: () => this.options.debug
-      }
-    );
-    this.getVirtualIndexes = memo(
-      () => {
-        let startIndex = null;
-        let endIndex = null;
-        const range = this.calculateRange();
-        if (range) {
-          startIndex = range.startIndex;
-          endIndex = range.endIndex;
-        }
-        this.maybeNotify.updateDeps([this.isScrolling, startIndex, endIndex]);
-        return [
-          this.options.rangeExtractor,
-          this.options.overscan,
-          this.options.count,
-          startIndex,
-          endIndex
-        ];
-      },
-      (rangeExtractor, overscan, count, startIndex, endIndex) => {
-        return startIndex === null || endIndex === null ? [] : rangeExtractor({
-          startIndex,
-          endIndex,
-          overscan,
-          count
-        });
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getVirtualIndexes",
-        debug: () => this.options.debug
-      }
-    );
-    this.indexFromElement = (node) => {
-      const attributeName = this.options.indexAttribute;
-      const indexStr = node.getAttribute(attributeName);
-      if (!indexStr) {
-        console.warn(
-          `Missing attribute name '${attributeName}={index}' on measured element.`
-        );
-        return -1;
-      }
-      return parseInt(indexStr, 10);
-    };
-    this._measureElement = (node, entry) => {
-      const index = this.indexFromElement(node);
-      const item = this.measurementsCache[index];
-      if (!item) {
-        return;
-      }
-      const key = item.key;
-      const prevNode = this.elementsCache.get(key);
-      if (prevNode !== node) {
-        if (prevNode) {
-          this.observer.unobserve(prevNode);
-        }
-        this.observer.observe(node);
-        this.elementsCache.set(key, node);
-      }
-      if (node.isConnected) {
-        this.resizeItem(index, this.options.measureElement(node, entry, this));
-      }
-    };
-    this.resizeItem = (index, size) => {
-      const item = this.measurementsCache[index];
-      if (!item) {
-        return;
-      }
-      const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
-      const delta = size - itemSize;
-      if (delta !== 0) {
-        if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments) {
-          if (process.env.NODE_ENV !== "production" && this.options.debug) {
-            console.info("correction", delta);
-          }
-          this._scrollToOffset(this.getScrollOffset(), {
-            adjustments: this.scrollAdjustments += delta,
-            behavior: void 0
-          });
-        }
-        this.pendingMeasuredCacheIndexes.push(item.index);
-        this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
-        this.notify(false);
-      }
-    };
-    this.measureElement = (node) => {
-      if (!node) {
-        this.elementsCache.forEach((cached, key) => {
-          if (!cached.isConnected) {
-            this.observer.unobserve(cached);
-            this.elementsCache.delete(key);
-          }
-        });
-        return;
-      }
-      this._measureElement(node, void 0);
-    };
-    this.getVirtualItems = memo(
-      () => [this.getVirtualIndexes(), this.getMeasurements()],
-      (indexes, measurements) => {
-        const virtualItems = [];
-        for (let k = 0, len = indexes.length; k < len; k++) {
-          const i = indexes[k];
-          const measurement = measurements[i];
-          virtualItems.push(measurement);
-        }
-        return virtualItems;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getVirtualItems",
-        debug: () => this.options.debug
-      }
-    );
-    this.getVirtualItemForOffset = (offset) => {
-      const measurements = this.getMeasurements();
-      if (measurements.length === 0) {
-        return void 0;
-      }
-      return notUndefined(
-        measurements[findNearestBinarySearch(
-          0,
-          measurements.length - 1,
-          (index) => notUndefined(measurements[index]).start,
-          offset
-        )]
-      );
-    };
-    this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
-      const size = this.getSize();
-      const scrollOffset = this.getScrollOffset();
-      if (align === "auto") {
-        align = toOffset >= scrollOffset + size ? "end" : "start";
-      }
-      if (align === "center") {
-        toOffset += (itemSize - size) / 2;
-      } else if (align === "end") {
-        toOffset -= size;
-      }
-      const maxOffset = this.getTotalSize() - size;
-      return Math.max(Math.min(maxOffset, toOffset), 0);
-    };
-    this.getOffsetForIndex = (index, align = "auto") => {
-      index = Math.max(0, Math.min(index, this.options.count - 1));
-      const item = this.measurementsCache[index];
-      if (!item) {
-        return void 0;
-      }
-      const size = this.getSize();
-      const scrollOffset = this.getScrollOffset();
-      if (align === "auto") {
-        if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
-          align = "end";
-        } else if (item.start <= scrollOffset + this.options.scrollPaddingStart) {
-          align = "start";
-        } else {
-          return [scrollOffset, align];
-        }
-      }
-      const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
-      return [
-        this.getOffsetForAlignment(toOffset, align, item.size),
-        align
-      ];
-    };
-    this.isDynamicMode = () => this.elementsCache.size > 0;
-    this.cancelScrollToIndex = () => {
-      if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
-        this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
-        this.scrollToIndexTimeoutId = null;
-      }
-    };
-    this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
-      }
-      this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
-        adjustments: void 0,
-        behavior
-      });
-    };
-    this.scrollToIndex = (index, { align: initialAlign = "auto", behavior } = {}) => {
-      index = Math.max(0, Math.min(index, this.options.count - 1));
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
-      }
-      const offsetAndAlign = this.getOffsetForIndex(index, initialAlign);
-      if (!offsetAndAlign) return;
-      const [offset, align] = offsetAndAlign;
-      this._scrollToOffset(offset, { adjustments: void 0, behavior });
-      if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
-        this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
-          this.scrollToIndexTimeoutId = null;
-          const elementInDOM = this.elementsCache.has(
-            this.options.getItemKey(index)
-          );
-          if (elementInDOM) {
-            const [latestOffset] = notUndefined(
-              this.getOffsetForIndex(index, align)
-            );
-            const currentScrollOffset = this.getScrollOffset();
-            if (!approxEqual(latestOffset, currentScrollOffset)) {
-              this.scrollToIndex(index, { align, behavior });
-            }
-          } else {
-            this.scrollToIndex(index, { align, behavior });
-          }
-        });
-      }
-    };
-    this.scrollBy = (delta, { behavior } = {}) => {
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
-      }
-      this._scrollToOffset(this.getScrollOffset() + delta, {
-        adjustments: void 0,
-        behavior
-      });
-    };
-    this.getTotalSize = () => {
-      var _a;
-      const measurements = this.getMeasurements();
-      let end;
-      if (measurements.length === 0) {
-        end = this.options.paddingStart;
-      } else if (this.options.lanes === 1) {
-        end = ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0;
-      } else {
-        const endByLane = Array(this.options.lanes).fill(null);
-        let endIndex = measurements.length - 1;
-        while (endIndex >= 0 && endByLane.some((val) => val === null)) {
-          const item = measurements[endIndex];
-          if (endByLane[item.lane] === null) {
-            endByLane[item.lane] = item.end;
-          }
-          endIndex--;
-        }
-        end = Math.max(...endByLane.filter((val) => val !== null));
-      }
-      return Math.max(
-        end - this.options.scrollMargin + this.options.paddingEnd,
-        0
-      );
-    };
-    this._scrollToOffset = (offset, {
-      adjustments,
-      behavior
-    }) => {
-      this.options.scrollToFn(offset, { behavior, adjustments }, this);
-    };
-    this.measure = () => {
-      this.itemSizeCache = /* @__PURE__ */ new Map();
-      this.notify(false);
-    };
-    this.setOptions(opts);
-  }
-}
-const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
-  while (low <= high) {
-    const middle = (low + high) / 2 | 0;
-    const currentValue = getCurrentValue(middle);
-    if (currentValue < value) {
-      low = middle + 1;
-    } else if (currentValue > value) {
-      high = middle - 1;
-    } else {
-      return middle;
-    }
-  }
-  if (low > 0) {
-    return low - 1;
-  } else {
-    return 0;
-  }
-};
-function calculateRange({
-  measurements,
-  outerSize,
-  scrollOffset,
-  lanes
-}) {
-  const lastIndex = measurements.length - 1;
-  const getOffset = (index) => measurements[index].start;
-  if (measurements.length <= lanes) {
-    return {
-      startIndex: 0,
-      endIndex: lastIndex
-    };
-  }
-  let startIndex = findNearestBinarySearch(
-    0,
-    lastIndex,
-    getOffset,
-    scrollOffset
-  );
-  let endIndex = startIndex;
-  if (lanes === 1) {
-    while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) {
-      endIndex++;
-    }
-  } else if (lanes > 1) {
-    const endPerLane = Array(lanes).fill(0);
-    while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
-      const item = measurements[endIndex];
-      endPerLane[item.lane] = item.end;
-      endIndex++;
-    }
-    const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
-    while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
-      const item = measurements[startIndex];
-      startPerLane[item.lane] = item.start;
-      startIndex--;
-    }
-    startIndex = Math.max(0, startIndex - startIndex % lanes);
-    endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
-  }
-  return { startIndex, endIndex };
-}
-
-const virtualListProps = defineHookProps({
-  options: {
-    type: Object,
-    default: () => ({})
-  },
-  count: {
-    type: Number,
-    default: () => 0
-  },
-  estimateSize: {
-    type: [Function, Number],
-    default: () => 50
-  },
-  horizontal: {
-    type: Boolean,
-    default: () => false
-  }
-});
-const virtualListEmits = defineHookEmits({
-  scrollEnd: () => true,
-  scrollStart: () => true,
-  scroll: (_) => true
-});
-const useVirtualList = defineHookComponent({
-  props: virtualListProps,
-  emits: virtualListEmits,
-  setup(props, context) {
-    const { emit } = context;
-    const scrollElementRef = elementRef();
-    const propsEstimateSize = props.estimateSize;
-    const estimateSize = typeof propsEstimateSize === "function" ? propsEstimateSize : () => propsEstimateSize;
-    const options = computed(() => {
-      const opts = { ...props.options || {} };
-      return {
-        ...opts,
-        count: props.count,
-        estimateSize,
-        horizontal: props.horizontal,
-        getScrollElement: () => scrollElementRef.value,
-        observeElementRect,
-        observeElementOffset,
-        scrollToFn: elementScroll
-      };
-    });
-    const virtualizer = new Virtualizer(options.value);
-    const state = shallowRef(virtualizer);
-    const virtualItems = computed(() => state.value.getVirtualItems());
-    const virtualIndexes = computed(() => state.value.getVirtualIndexes());
-    const totalSize = computed(() => state.value.getTotalSize());
-    watch(
-      virtualIndexes,
-      (indexes) => {
-        if (indexes.length === 0) {
-          return;
-        }
-        if (indexes[indexes.length - 1] === props.count - 1) {
-          emit("scrollEnd");
-        } else if (indexes[0] === 0) {
-          emit("scrollStart");
-        }
-        emit("scroll", indexes);
-      },
-      { immediate: true }
-    );
-    watch(
-      options,
-      (opts) => {
-        virtualizer.setOptions({
-          ...opts,
-          onChange: (instance, sync) => {
-            opts.onChange?.(instance, sync);
-            triggerRef(state);
-          }
-        });
-        virtualizer._willUpdate();
-        triggerRef(state);
-      },
-      { immediate: true }
-    );
-    watch(
-      scrollElementRef,
-      (el) => {
-        if (el) {
-          virtualizer._willUpdate();
-          triggerRef(state);
-        }
-      },
-      { immediate: true }
-    );
-    tryOnScopeDispose(virtualizer._didMount());
-    const measureElement = (el) => {
-      virtualizer.measureElement(el);
-    };
-    const scrollToIndex = (index, options2 = {
-      behavior: "smooth"
-    }) => {
-      virtualizer.scrollToIndex(index, options2);
-    };
-    const scrollToStart = (options2 = {
-      behavior: "smooth"
-    }) => {
-      scrollToIndex(0, options2);
-    };
-    const scrollToEnd = (options2 = {
-      behavior: "smooth"
-    }) => {
-      scrollToIndex(props.count - 1, options2);
-    };
-    return {
-      virtualizer,
-      virtualItems,
-      virtualIndexes,
-      totalSize,
-      scrollElementRef,
-      measureElement,
-      scrollToIndex,
-      scrollToStart,
-      scrollToEnd
-    };
-  }
-});
-
-const HiVirtualList = defineComponent({
-  name: "HiVirtualList",
-  inheritAttrs: true,
-  props: {
-    ...virtualListProps,
-    as: {
-      type: String,
-      default: () => "div"
-    },
-    wrapperAs: {
-      type: String,
-      default: () => "div"
-    },
-    wrapperStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    wrapperClass: {
-      type: classPropType,
-      default: () => ""
-    }
-  },
-  emits: virtualListEmits,
-  setup(props, context) {
-    const { slots, expose } = context;
-    const {
-      totalSize,
-      scrollElementRef,
-      virtualItems,
-      scrollToIndex,
-      scrollToStart,
-      scrollToEnd
-    } = useVirtualList(props, context);
-    expose({
-      scrollToIndex,
-      scrollToStart,
-      scrollToEnd
-    });
-    const wrapperStyle = computed(() => {
-      return {
-        position: "relative",
-        [props.horizontal ? "width" : "height"]: `${totalSize.value}px`,
-        ...props.wrapperStyle
-      };
-    });
-    return () => h(
-      props.as,
-      {
-        ref: scrollElementRef,
-        style: {
-          [props.horizontal ? "overflowX" : "overflowY"]: "auto"
-        }
-      },
-      [
-        h(
-          props.wrapperAs,
-          {
-            style: wrapperStyle.value,
-            class: props.wrapperClass
-          },
-          each(virtualItems.value, (item) => {
-            const slotData = {
-              ...item,
-              style: {
-                position: "absolute",
-                [props.horizontal ? "left" : "top"]: `${item.start}px`,
-                [props.horizontal ? "width" : "height"]: `${item.size}px`
-              }
-            };
-            return renderSlot(slots, "item", slotData);
-          })
-        )
-      ]
-    );
-  }
-});
-
-const components = {
-  __proto__: null,
-  HiAffix: HiAffix,
-  HiAffixTarget: HiAffixTarget,
-  HiConfigProvider: HiConfigProvider,
-  HiFileUpload: HiFileUpload,
-  HiIcon: HiIcon,
-  HiItem: HiItem,
-  HiPopover: HiPopover,
-  HiSelection: HiSelection,
-  HiSwitch: HiSwitch,
-  HiTabPane: HiTabPane,
-  HiTabs: HiTabs,
-  HiVirtualList: HiVirtualList
-};
-
-function install(app) {
-  for (const key in components) {
-    app.component(key, components[key]);
-  }
-}
-
-export { HiAffix, HiAffixTarget, HiConfigProvider, HiFileUpload, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, HiVirtualList, install };