@opensig/opendesign/es/step/OStep.vue.mjs

import { defineComponent, ref, reactive, computed, provide, onMounted, nextTick, onUnmounted, createBlock, openBlock, unref, withCtx, createElementVNode, mergeProps, renderSlot } from "vue";
import { useResizeObserver } from "../hooks/use-resize-observer.mjs";
import OResizeObserver from "../resize-observer/resize-observer.mjs";
import { debounce } from "../_utils/helper.mjs";
import { stepInjectKey } from "./provide.mjs";
import { stepProps } from "./types.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OStep",
  props: stepProps,
  setup(__props) {
    const props = __props;
    const ro = useResizeObserver();
    const stepItemHeadRefs = ref([]);
    const stepItemBoundingArr = reactive([]);
    const stepItemDividerRects = 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": ""
        };
      });
    });
    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 = debounce(update, 0, false);
    onMounted(async () => {
      await nextTick();
      observeAllItems();
    });
    onUnmounted(() => {
      unobserveAllItems();
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(OResizeObserver), { onResize: unref(onStepResize) }, {
        default: withCtx(() => [
          createElementVNode(
            "div",
            mergeProps({ class: "o-step" }, _ctx.$attrs, {
              class: [`o-step-${props.direction}`]
            }),
            [
              renderSlot(_ctx.$slots, "default")
            ],
            16
            /* FULL_PROPS */
          )
        ]),
        _: 3
        /* FORWARDED */
      }, 8, ["onResize"]);
    };
  }
});
export {
  _sfc_main as default
};