@vuesax-alpha/nightly/lib/hooks/use-floating/vue/use-floating.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var core = require('@vueuse/core');
var index = require('../dom/index.js');
var getDpr = require('./utils/get-dpr.js');
var roundByDpr = require('./utils/round-by-dpr.js');
var unwrapElement = require('./utils/unwrap-element.js');

function useFloating(reference, floating, options = {}) {
  const whileElementsMountedOption = options.whileElementsMounted;
  const openOption = vue.computed(() => {
    var _a;
    return (_a = vue.unref(options.open)) != null ? _a : true;
  });
  const fitOption = vue.computed(() => {
    var _a;
    return (_a = vue.unref(options.fit)) != null ? _a : false;
  });
  const middlewareOption = vue.computed(() => vue.unref(options.middleware));
  const placementOption = vue.computed(() => {
    var _a;
    return (_a = vue.unref(options.placement)) != null ? _a : "bottom";
  });
  const strategyOption = vue.computed(() => {
    var _a;
    return (_a = vue.unref(options.strategy)) != null ? _a : "absolute";
  });
  const transformOption = vue.computed(() => {
    var _a;
    return (_a = vue.unref(options.transform)) != null ? _a : true;
  });
  const referenceElement = vue.computed(() => unwrapElement.unwrapElement(reference.value));
  const floatingElement = vue.computed(() => unwrapElement.unwrapElement(floating.value));
  const x = vue.ref(0);
  const y = vue.ref(0);
  const strategy = vue.ref(strategyOption.value);
  const placement = vue.ref(placementOption.value);
  const middlewareData = vue.shallowRef({});
  const isPositioned = vue.ref(false);
  const floatingStyles = vue.computed(() => {
    const initialStyles = {
      position: strategy.value,
      left: "0",
      top: "0"
    };
    if (!floatingElement.value) {
      return initialStyles;
    }
    const xVal = roundByDpr.roundByDPR(floatingElement.value, x.value);
    const yVal = roundByDpr.roundByDPR(floatingElement.value, y.value);
    if (transformOption.value) {
      return {
        ...initialStyles,
        transform: `translate(${xVal}px, ${yVal}px)`,
        ...getDpr.getDPR(floatingElement.value) >= 1.5 && {
          willChange: "transform"
        }
      };
    }
    return {
      position: strategy.value,
      left: `${xVal}px`,
      top: `${yVal}px`
    };
  });
  let whileElementsMountedCleanup;
  function update() {
    if (referenceElement.value == null || floatingElement.value == null) {
      return;
    }
    if (fitOption.value) {
      floatingElement.value.style.width = `${referenceElement.value.getBoundingClientRect().width}px`;
    }
    index.computePosition(referenceElement.value, floatingElement.value, {
      middleware: middlewareOption.value,
      placement: placementOption.value,
      strategy: strategyOption.value
    }).then((position) => {
      x.value = position.x;
      y.value = position.y;
      strategy.value = position.strategy;
      placement.value = position.placement;
      middlewareData.value = position.middlewareData;
      isPositioned.value = true;
    });
  }
  function cleanup() {
    if (typeof whileElementsMountedCleanup === "function") {
      whileElementsMountedCleanup();
      whileElementsMountedCleanup = void 0;
    }
  }
  function attach() {
    cleanup();
    if (whileElementsMountedOption === void 0) {
      update();
      return;
    }
    if (referenceElement.value != null && floatingElement.value != null) {
      whileElementsMountedCleanup = whileElementsMountedOption(
        referenceElement.value,
        floatingElement.value,
        update
      );
      return;
    }
  }
  function reset() {
    if (!openOption.value) {
      isPositioned.value = false;
    }
  }
  vue.onMounted(() => {
    core.useEventListener("resize", attach, true);
    core.useEventListener("scroll", attach, true);
    vue.watch([middlewareOption, placementOption, strategyOption], update, {
      flush: "sync"
    });
    vue.watch([referenceElement, floatingElement], attach, { flush: "sync" });
    vue.watch(openOption, reset, { flush: "sync" });
  });
  if (vue.getCurrentScope()) {
    vue.onScopeDispose(cleanup);
  }
  return {
    x: vue.shallowReadonly(x),
    y: vue.shallowReadonly(y),
    strategy: vue.shallowReadonly(strategy),
    placement: vue.shallowReadonly(placement),
    middlewareData: vue.shallowReadonly(middlewareData),
    isPositioned: vue.shallowReadonly(isPositioned),
    floatingStyles,
    update
  };
}

exports.useFloating = useFloating;
//# sourceMappingURL=use-floating.js.map