@agrotools1/at-components1 1.1.0 → 1.1.2-beta.0

package/dist/Stepper/Stepper.vue2.js

@@ -0,0 +1,109 @@
+import { AtCircleQuestionSolidIcon as n, AtWarningSolidIcon as p, AtCheckCircleSolidIcon as d } from "@agrotools1/at-icons";
+import { defineComponent as m, ref as i, reactive as I, watch as b, onMounted as E, watchEffect as w, computed as x } from "vue";
+import { AtTipograph as h } from "../Tipograph/index.js";
+const q = m({
+  name: "Stepper",
+  components: {
+    AtTitle: h.Title,
+    AtParagraph: h.Paragraph,
+    AtCheckCircleSolidIcon: d,
+    AtCircleQuestionSolidIcon: n,
+    AtWarningSolidIcon: p
+  },
+  props: {
+    steps: {
+      type: Array,
+      default: () => [
+        {
+          title: "Step 1",
+          stepIcon: n,
+          stepInactiveIcon: n,
+          isSuccess: !1,
+          isError: !1
+        },
+        {
+          title: "Step 2",
+          stepIcon: n,
+          stepInactiveIcon: n,
+          isSuccess: !1,
+          isError: !1
+        },
+        {
+          title: "Step 3",
+          stepIcon: n,
+          stepInactiveIcon: n,
+          isSuccess: !1,
+          isError: !1
+        }
+      ],
+      required: !0
+    },
+    step: {
+      type: Number,
+      default: 0,
+      required: !0,
+      validator: (t) => typeof t == "number"
+    },
+    direction: {
+      type: String,
+      default: "vertical",
+      required: !1
+    },
+    numberedStep: {
+      type: Boolean,
+      required: !1,
+      default: !1,
+      validator: (t) => typeof t == "boolean"
+    }
+  },
+  setup(t) {
+    const l = i(t.steps), f = i(null), a = I([]), r = i(0), c = i("");
+    b(
+      () => t.step,
+      () => {
+        t.step <= l.value.length && t.step >= 0 && o();
+      }
+    ), E(() => {
+      const e = f.value, s = a[a.length - 1];
+      if (t.direction === "vertical")
+        r.value = (e == null ? void 0 : e.offsetHeight) - (s == null ? void 0 : s.offsetHeight) + 34;
+      else {
+        const u = a[0];
+        r.value = (u == null ? void 0 : u.offsetWidth) * (l.value.length - 1);
+      }
+      t.step >= 0 && o();
+    });
+    const o = () => {
+      let e = t.step;
+      for (; e !== 0; )
+        e--, e <= l.value.length - 1 && l.value[e].isError === !1 && (l.value[e].isSuccess = !0);
+    };
+    w(() => {
+      if (t.direction === "vertical") {
+        const e = `height:${t.steps.length > 1 ? r.value - 34 : 0}px; left: 15px; right: auto;`;
+        c.value = e;
+      } else {
+        const e = 18 * l.value.length, s = `width:${t.steps.length > 1 ? r.value + e : 0}px; left: 42px;`;
+        c.value = s;
+      }
+      t.steps && (l.value = t.steps ?? []);
+    });
+    const v = (e, s) => t.step !== s && e.isSuccess === !1 && e.isError === !1 && t.numberedStep === !1, S = (e, s) => t.step === s && e.isSuccess === !1 && e.isError === !1 && t.numberedStep === !1, g = (e) => t.numberedStep && e.isSuccess === !1 && e.isError === !1;
+    return {
+      stepper: x(() => l.value),
+      incrementStep: o,
+      handleDirection: c,
+      barSize: r,
+      stepperElementCollection: f,
+      stepperItemElementCollection: a,
+      showStepInactiveItem: v,
+      showStepIcon: S,
+      showCurrentNumber: g,
+      AtCheckCircleSolidIcon: d,
+      AtWarningSolidIcon: p
+    };
+  }
+});
+export {
+  q as default
+};