@indielayer/ui/lib/components/stepper/Stepper.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as x, ref as c, openBlock as l, createElementBlock as d, createElementVNode as r, normalizeClass as s, unref as o, normalizeStyle as B, createVNode as u, withCtx as m, Fragment as R, renderList as V, createBlock as N, resolveDynamicComponent as z, toDisplayString as f, createCommentVNode as E, renderSlot as P } from "vue";
import { useCommon as v } from "../../composables/useCommon.js";
import { useColors as $ } from "../../composables/useColors.js";
import { useTheme as D } from "../../composables/useTheme.js";
import X from "../scroll/Scroll.vue.js";
import A from "../icon/Icon.vue.js";
import { stepperIncompleteIcon as F, errorIcon as L, successIcon as T, stepperPristineIcon as W } from "../../common/icons.js";
const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" }, G = { class: "grid text-left" }, H = { class: "text-sm truncate" }, J = {
  key: 0,
  class: "text-xs text-secondary-500"
}, K = {
  ...v.validators(),
  variant: ["line"]
}, M = {
  ...v.props(),
  ...$.props("primary"),
  modelValue: [String, Number],
  steps: {
    type: Array,
    default: () => []
  },
  variant: {
    type: String,
    default: "line"
  },
  grow: Boolean,
  fullWidth: {
    type: Boolean,
    default: !0
  },
  interactive: {
    type: Boolean,
    default: !0
  },
  iconPristine: String,
  iconComplete: String,
  iconIncomplete: String,
  iconCurrent: String,
  iconError: String
}, O = {
  name: "XStepper",
  validators: K
}, se = /* @__PURE__ */ x({
  ...O,
  props: M,
  emits: ["update:modelValue"],
  setup(y, { emit: _ }) {
    const n = y, b = _, g = c(null), S = c(null), h = c(null);
    function k(e, a) {
      e.disabled || !n.interactive || b("update:modelValue", a);
    }
    function C(e, a) {
      return e.status === "incomplete" ? n.iconIncomplete || F : e.status === "error" ? n.iconError || L : e.status === "complete" ? n.iconComplete || T : n.iconPristine || W;
    }
    const { styles: w, classes: i, className: I } = D("Stepper", {}, n);
    return (e, a) => (l(), d("div", null, [
      r("div", {
        ref_key: "wrapperRef",
        ref: S,
        class: s(["relative", [
          o(I),
          o(i).wrapper
        ]]),
        style: B(o(w))
      }, [
        u(X, {
          ref_key: "scrollRef",
          ref: g,
          scrollbar: !1,
          horizontal: "",
          mousewheel: "",
          class: s(o(i).scroller)
        }, {
          default: m(() => [
            r("div", {
              ref_key: "stepperRef",
              ref: h,
              class: s(["relative", o(i).list])
            }, [
              (l(!0), d(R, null, V(e.steps, (t, p) => (l(), N(z(e.interactive ? "button" : "div"), {
                key: p,
                type: e.interactive ? "button" : void 0,
                class: s([o(i).step, {
                  "cursor-pointer": e.interactive && !t.disabled,
                  "text-secondary-400 dark:text-secondary-600": t.disabled,
                  "flex-1": e.grow
                }]),
                disabled: t.disabled || !e.interactive,
                onClick: (Q) => k(t, p)
              }, {
                default: m(() => [
                  r("div", j, [
                    r("div", {
                      class: s(["h-0.5 w-full mb-2", [t.status === "complete" || t.status === "incomplete" ? "bg-primary-500" : "bg-secondary-200 dark:bg-secondary-700"]])
                    }, null, 2),
                    r("div", q, [
                      u(A, {
                        icon: C(t),
                        size: "sm",
                        class: s([o(i).icon, {
                          "text-primary-500": t.status === "complete" || t.status === "incomplete",
                          "text-error-500": t.status === "error"
                        }])
                      }, null, 8, ["icon", "class"]),
                      r("div", G, [
                        r("div", H, f(t.label), 1),
                        t.description ? (l(), d("div", J, f(t.description), 1)) : E("", !0)
                      ])
                    ])
                  ])
                ]),
                _: 2
              }, 1032, ["type", "class", "disabled", "onClick"]))), 128))
            ], 2)
          ]),
          _: 1
        }, 8, ["class"])
      ], 6),
      r("div", {
        class: s(o(i).content)
      }, [
        P(e.$slots, "default")
      ], 2)
    ]));
  }
});
export {
  se as default
};