import { defineComponent as I, ref as N, computed as i, watch as o, watchEffect as g, provide as y, nextTick as E, openBlock as n, createElementBlock as R, createElementVNode as T, normalizeClass as p, renderSlot as z, createBlock as d, unref as v, withCtx as f, createVNode as m, createCommentVNode as h } from "vue";
import { a as A } from "./index-CLv1CFWG.js";
import B from "./useStepper.js";
import x from "./Button.js";
import S from "./Icon.js";
import { S as L } from "./keys-C8Zfr_By.js";
var V = /* @__PURE__ */ ((r) => (r.VERTICAL = "vertical", r.HORIZONTAL = "horizontal", r))(V || {});
const P = { class: "relative" }, Y = /* @__PURE__ */ I({
  __name: "Stepper",
  props: {
    step: { default: -1 },
    substep: { default: -1 },
    linear: { type: Boolean, default: !1 },
    orientation: { default: "vertical" },
    useResponsiveNav: { type: Boolean, default: !1 },
    theme: { default: "dark" }
  },
  emits: ["update:step", "update:substep"],
  setup(r, { expose: b, emit: _ }) {
    const t = r, l = _, c = N(), e = B({
      linear: t.linear,
      activeStep: t.step,
      activeSubstep: t.substep,
      ref: c
    }), w = A("screen and (min-width: 961px)"), a = i(
      () => t.orientation === "horizontal" && (!w.value || t.useResponsiveNav)
    ), k = i(() => e.activeStepIndex.value <= 0), C = i(
      () => !e.isStepCompleted(e.activeStepIndex.value) || e.activeStepIndex.value === e.steps.value.length - 1
    );
    o(
      () => t.step,
      (s) => e.activeStepIndex.value = s
    ), o(
      () => t.substep,
      (s) => e.activeSubstepIndex.value = s
    ), o(
      () => e.activeStepIndex.value,
      (s) => {
        l("update:step", s), u();
      }
    ), o(
      () => e.activeSubstepIndex.value,
      (s) => l("update:substep", s)
    ), g(() => {
      a.value && u();
    }), y(L, {
      registerStep: e.registerStep,
      orientation: t.orientation,
      stepCount: e.stepCount,
      theme: t.theme,
      showResponsiveNav: a
    }), b({
      back: e.back,
      next: e.next,
      goTo: e.goTo,
      isStepCompleted: e.isStepCompleted,
      isStepActive: e.isStepActive
    });
    async function u() {
      if (!a.value)
        return;
      await E();
      const s = e.activeStepElement.value;
      s && s.scrollIntoView({ behavior: "instant", inline: "start", block: "nearest" });
    }
    return (s, D) => (n(), R("div", P, [
      T("ul", {
        ref_key: "stepperListRef",
        ref: c,
        class: p(["stash-stepper flex", {
          "flex-col": t.orientation === "vertical",
          "stash-stepper--vertical": t.orientation === "vertical",
          "stash-stepper--horizontal": t.orientation === "horizontal",
          "mx-9 snap-x snap-mandatory overflow-x-hidden": a.value
        }]),
        "data-test": "stash-stepper"
      }, [
        z(s.$slots, "default")
      ], 2),
      a.value ? (n(), d(x, {
        key: 0,
        class: p(["stash-stepper__arrow stash-stepper__arrow--prev", t.theme === "light" ? "text-blue-500" : "text-white"]),
        "data-test": "stash-stepper|prev-arrow",
        disabled: k.value,
        icon: "",
        onClick: v(e).back
      }, {
        default: f(() => [
          m(S, {
            name: "chevron-left",
            size: "dense"
          })
        ]),
        _: 1
      }, 8, ["class", "disabled", "onClick"])) : h("", !0),
      a.value ? (n(), d(x, {
        key: 1,
        class: p(["stash-stepper__arrow stash-stepper__arrow--next", t.theme === "light" ? "text-blue-500" : "text-white"]),
        "data-test": "stash-stepper|next-arrow",
        disabled: C.value,
        icon: "",
        onClick: v(e).next
      }, {
        default: f(() => [
          m(S, {
            name: "chevron-right",
            size: "dense"
          })
        ]),
        _: 1
      }, 8, ["class", "disabled", "onClick"])) : h("", !0)
    ]));
  }
});
export {
  V as StepperOrientationEnum,
  Y as default
};
//# sourceMappingURL=Stepper.js.map
