@opensig/opendesign/lib/step/OStep.vue.js

"use strict";
const vue = require("vue");
const useResizeObserver = require("../hooks/use-resize-observer.js");
const resizeObserver = require("../resize-observer/resize-observer.js");
const helper = require("../_utils/helper.js");
const provide = require("./provide.js");
const types = require("./types.js");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OStep",
  props: types.stepProps,
  setup(__props) {
    const props = __props;
    const ro = useResizeObserver.useResizeObserver();
    const stepItemHeadRefs = vue.ref([]);
    const stepItemBoundingArr = vue.reactive([]);
    const stepItemDividerRects = vue.computed(() => {
      return stepItemBoundingArr == null ? void 0 : stepItemBoundingArr.map(({ left, top, width, height }, i) => {
        const prev = stepItemBoundingArr[i - 1];
        if (!prev) {
          return;
        }
        if (props.direction === "h") {
          return {
            "--o-step-item-left": `calc(${prev.right - left}px + var(--step-item-line-gap))`,
            "--o-step-item-right": "calc(var(--step-item-line-gap) + 100%)",
            "--o-step-item-top": `calc(${height}px / 2)`,
            "--o-step-item-bottom": ""
          };
        }
        return {
          "--o-step-item-left": `calc(${width}px / 2)`,
          "--o-step-item-top": `calc(${prev.bottom - top}px + var(--step-item-line-gap)`,
          "--o-step-item-bottom": "calc(var(--step-item-line-gap) + 100%)",
          "--o-step-item-right": ""
        };
      });
    });
    vue.provide(provide.stepInjectKey, { props, stepItemHeadRefs, stepItemDividerRects });
    const collectRects = (target, rects, idx) => {
      target[idx] = rects;
    };
    const handleResize = (en) => {
      const rect = en.target.getBoundingClientRect();
      const idx = stepItemHeadRefs.value.findIndex((item) => item === en.target);
      if (idx !== -1) {
        collectRects(stepItemBoundingArr, rect, idx);
      }
    };
    const observeAllItems = () => {
      stepItemHeadRefs.value.forEach((element) => {
        ro.observe(element, handleResize);
      });
    };
    const unobserveAllItems = () => {
      stepItemHeadRefs.value.forEach((element) => {
        ro.unobserve(element, handleResize);
      });
    };
    const update = () => {
      stepItemHeadRefs.value.forEach((item, idx) => {
        collectRects(stepItemBoundingArr, item.getBoundingClientRect(), idx);
      });
    };
    const onStepResize = helper.debounce(update, 0, false);
    vue.onMounted(async () => {
      await vue.nextTick();
      observeAllItems();
    });
    vue.onUnmounted(() => {
      unobserveAllItems();
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(resizeObserver), { onResize: vue.unref(onStepResize) }, {
        default: vue.withCtx(() => [
          vue.createElementVNode(
            "div",
            vue.mergeProps({ class: "o-step" }, _ctx.$attrs, {
              class: [`o-step-${props.direction}`]
            }),
            [
              vue.renderSlot(_ctx.$slots, "default")
            ],
            16
            /* FULL_PROPS */
          )
        ]),
        _: 3
        /* FORWARDED */
      }, 8, ["onResize"]);
    };
  }
});
module.exports = _sfc_main;