maz-ui 3.6.4 → 3.6.6

package/components/MazStepper.mjs

@@ -1,6 +1,6 @@
-(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode(".m-transition-expand[data-v-b5d3ee9f],.m-transition-expand *[data-v-b5d3ee9f]{will-change:height;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.m-stepper__header[data-v-b8833346]{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.m-stepper__header[data-v-b8833346]>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.m-stepper__header[data-v-b8833346]{border-radius:var(--maz-border-radius);padding:.5rem 1rem;outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:.2s;transition-duration:.2s}.m-stepper__header__content[data-v-b8833346]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.m-stepper__header[data-v-b8833346]:not(:disabled):hover{background-color:var(--maz-color-bg-lighter)}.m-stepper__header[data-v-b8833346]:not(:disabled):focus{background-color:var(--maz-color-bg-lighter)}.m-stepper__header[data-v-b8833346]:disabled{cursor:not-allowed}.m-stepper__header.--is-current-step[data-v-b8833346]{cursor:default}.m-stepper__title[data-v-b8833346]{color:var(--maz-color-text)}.m-stepper__subtitle[data-v-b8833346]{font-size:.75rem;line-height:1rem;color:var(--maz-color-muted)}.m-stepper__count[data-v-b8833346]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;height:2rem;width:2rem;-webkit-box-flex:0;-ms-flex:none;flex:none;overflow:hidden;border-radius:9999px;font-size:1.125rem;line-height:1.75rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--0469ada6);color:var(--4ea3b985)}.m-stepper__count__circle[data-v-b8833346]{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:-webkit-box;display:-ms-flexbox;display:flex;--tw-scale-x: 0;--tw-scale-y: 0;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;background-color:var(--maz-color-success);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.m-stepper__count svg[data-v-b8833346]{color:var(--4ea3b985)}.m-stepper__count.--validated .m-stepper__count__circle[data-v-b8833346]{--tw-scale-x: 1;--tw-scale-y: 1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.m-stepper__count.--validated svg[data-v-b8833346]{color:var(--maz-color-success-contrast)}.m-stepper__content[data-v-b8833346]{margin-left:2rem;border-left-width:2px;border-color:transparent;padding-top:.5rem;padding-bottom:.5rem;padding-left:2rem}.m-stepper__content__wrapper[data-v-b8833346]{padding-top:.5rem;padding-bottom:.5rem}.m-stepper__content[data-v-b8833346]:not(.--no-border){border-color:var(--maz-color-bg-lighter)}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { defineComponent, openBlock, createBlock, TransitionGroup, withCtx, renderSlot, nextTick, useCssVars, unref, computed, useSlots, ref, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, createVNode, pushScopeId, popScopeId } from "vue";
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode(".m-transition-expand[data-v-b5d3ee9f],.m-transition-expand *[data-v-b5d3ee9f]{will-change:height;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.m-stepper__header[data-v-b905aaa6]{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.m-stepper__header[data-v-b905aaa6]>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.m-stepper__header[data-v-b905aaa6]{border-radius:var(--maz-border-radius);padding:.5rem 1rem;outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:.2s;transition-duration:.2s}.m-stepper__header__content[data-v-b905aaa6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.m-stepper__header[data-v-b905aaa6]:not(:disabled):hover{background-color:var(--maz-color-bg-lighter)}.m-stepper__header[data-v-b905aaa6]:not(:disabled):focus{background-color:var(--maz-color-bg-lighter)}.m-stepper__header[data-v-b905aaa6]:disabled{cursor:not-allowed}.m-stepper__header.--is-current-step[data-v-b905aaa6]{cursor:default}.m-stepper__header__wrapper[data-v-b905aaa6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.m-stepper__header__wrapper[data-v-b905aaa6]>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.m-stepper__header.--success .m-stepper__count__circle[data-v-b905aaa6]{--tw-scale-x: 1;--tw-scale-y: 1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background-color:var(--maz-color-success)}.m-stepper__header.--success .m-stepper__right[data-v-b905aaa6]{color:var(--maz-color-success)}.m-stepper__header.--success svg[data-v-b905aaa6]{color:var(--maz-color-success-contrast)}.m-stepper__header.--warning .m-stepper__count__circle[data-v-b905aaa6]{--tw-scale-x: 1;--tw-scale-y: 1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background-color:var(--maz-color-warning)}.m-stepper__header.--warning .m-stepper__right[data-v-b905aaa6]{color:var(--maz-color-warning)}.m-stepper__header.--warning svg[data-v-b905aaa6]{color:var(--maz-color-warning-contrast)}.m-stepper__header.--error .m-stepper__count__circle[data-v-b905aaa6]{--tw-scale-x: 1;--tw-scale-y: 1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background-color:var(--maz-color-danger)}.m-stepper__header.--error .m-stepper__right[data-v-b905aaa6]{color:var(--maz-color-danger)}.m-stepper__header.--error svg[data-v-b905aaa6]{color:var(--maz-color-danger-contrast)}.m-stepper__title[data-v-b905aaa6]{color:var(--maz-color-text)}.m-stepper__subtitle[data-v-b905aaa6]{margin-top:.25rem;font-size:.75rem;line-height:1rem;color:var(--maz-color-muted)}.m-stepper__right[data-v-b905aaa6]{text-align:right;font-size:.875rem;line-height:1.25rem;color:var(--maz-color-primary)}.m-stepper__count[data-v-b905aaa6]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;height:2rem;width:2rem;-webkit-box-flex:0;-ms-flex:none;flex:none;overflow:hidden;border-radius:9999px;font-size:1.125rem;line-height:1.75rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--4e57adab);color:var(--a3bdd2fa)}.m-stepper__count__circle[data-v-b905aaa6]{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:-webkit-box;display:-ms-flexbox;display:flex;--tw-scale-x: 0;--tw-scale-y: 0;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.m-stepper__count svg[data-v-b905aaa6]{color:var(--maz-color-success-contrast)}.m-stepper__content[data-v-b905aaa6]{margin-left:2rem;border-left-width:2px;border-color:transparent;padding-top:.5rem;padding-bottom:.5rem;padding-left:2rem}.m-stepper__content__wrapper[data-v-b905aaa6]{padding-top:.5rem;padding-bottom:.5rem}.m-stepper__content[data-v-b905aaa6]:not(.--no-border){border-color:var(--maz-color-bg-lighter)}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import { defineComponent, openBlock, createBlock, TransitionGroup, withCtx, renderSlot, nextTick, inject, ref, computed, onMounted, watchEffect, createElementBlock, mergeProps, createCommentVNode, useCssVars, unref, useSlots, Fragment, renderList, normalizeClass, createElementVNode, createTextVNode, toDisplayString, createVNode, withDirectives, vShow } from "vue";
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "MazTransitionExpand",
   setup(__props) {
     const enter = (element) => {
@@ -56,36 +56,174 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const MazTransitionExpand = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-b5d3ee9f"]]);
-const _withScopeId = (n) => (pushScopeId("data-v-b8833346"), n = n(), popScopeId(), n);
+const MazTransitionExpand = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b5d3ee9f"]]);
+function injectStrict(key, fallback) {
+  const resolved = inject(key, fallback);
+  if (!resolved) {
+    throw new Error(`[maz-ui](injectStrict) Could not resolve ${key}`);
+  }
+  return resolved;
+}
+const _hoisted_1$1 = ["innerHTML"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "MazIcon",
+  props: {
+    src: { type: String, default: void 0 },
+    path: { type: String, default: void 0 },
+    name: { type: String, default: void 0 },
+    size: { type: String, default: "1.5rem" },
+    title: { type: String, default: void 0 },
+    transformSource: {
+      type: Function,
+      default: (svg) => svg
+    }
+  },
+  emits: ["loaded", "unloaded", "error"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const cache = {};
+    const svgElSource = ref();
+    const svgElem = ref();
+    const getMazIconPath = () => {
+      try {
+        return injectStrict("mazIconPath");
+      } catch {
+        return void 0;
+      }
+    };
+    const iconPath = computed(() => props.path ?? getMazIconPath());
+    const fullSrc = computed(() => {
+      if (props.src) {
+        return props.src;
+      } else if (iconPath.value) {
+        return `${iconPath.value}/${props.name}.svg`;
+      } else {
+        return `/${props.name}.svg`;
+      }
+    });
+    onMounted(() => {
+      if (!props.name && !props.src) {
+        console.error('[maz-ui](MazIcon) you should provide "name" or "src" as prop');
+      }
+    });
+    const setTitle = (svg, title) => {
+      const titleTags = svg.querySelectorAll("title");
+      if (titleTags.length > 0) {
+        titleTags[0].textContent = title;
+      } else {
+        const titleEl = document.createElementNS("http://www.w3.org/2000/svg", "title");
+        titleEl.textContent = title;
+        svg.append(titleEl);
+      }
+    };
+    const filterAttrs = (attrs) => {
+      return Object.keys(attrs).reduce((result, key) => {
+        if (attrs[key] !== false && attrs[key] !== null && attrs[key] !== void 0) {
+          result[key] = attrs[key];
+        }
+        return result;
+      }, {});
+    };
+    const getSvgAttrs = (svgEl) => {
+      const svgAttrs = {};
+      const attrs = svgEl.attributes;
+      if (!attrs) {
+        return svgAttrs;
+      }
+      for (let i = attrs.length - 1; i >= 0; i--) {
+        svgAttrs[attrs[i].name] = attrs[i].value;
+      }
+      return svgAttrs;
+    };
+    const getSvgContent = (svgEl) => {
+      let svgElNode = svgEl.cloneNode(true);
+      svgElNode = props.transformSource(svgEl);
+      if (props.title) {
+        setTitle(svgElNode, props.title);
+      }
+      return svgEl.innerHTML;
+    };
+    const getSource = async (src) => {
+      if (!cache[src]) {
+        cache[src] = download(src);
+      }
+      try {
+        svgElSource.value = await cache[src];
+        await nextTick();
+        emits("loaded", svgElem.value);
+      } catch (error) {
+        if (svgElSource.value) {
+          svgElSource.value = void 0;
+          emits("unloaded");
+        }
+        delete cache[src];
+        emits("error", error);
+      }
+    };
+    const download = (url) => {
+      return new Promise((resolve, reject) => {
+        const request = new XMLHttpRequest();
+        request.open("GET", url, true);
+        request.addEventListener("load", () => {
+          if (request.status >= 200 && request.status < 400) {
+            try {
+              const parser = new DOMParser();
+              const result = parser.parseFromString(request.responseText, "text/xml");
+              let svgEl = result.querySelectorAll("svg")[0];
+              if (svgEl) {
+                svgEl = props.transformSource(svgEl);
+                resolve(svgEl);
+              } else {
+                reject(new Error('Loaded file is not valid SVG"'));
+              }
+            } catch (error) {
+              reject(error);
+            }
+          } else {
+            reject(new Error("Error loading SVG"));
+          }
+        });
+        request.addEventListener("error", () => reject());
+        request.send();
+      });
+    };
+    watchEffect(() => getSource(fullSrc.value));
+    return (_ctx, _cache) => {
+      return svgElSource.value ? (openBlock(), createElementBlock("svg", mergeProps({
+        key: 0,
+        ref_key: "svgElem",
+        ref: svgElem,
+        width: "1em",
+        height: "1em"
+      }, {
+        ...getSvgAttrs(svgElSource.value),
+        ...filterAttrs(_ctx.$attrs)
+      }, {
+        style: `font-size: ${__props.size}`,
+        innerHTML: getSvgContent(svgElSource.value)
+      }), null, 16, _hoisted_1$1)) : createCommentVNode("", true);
+    };
+  }
+});
+const CheckCircleIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGFyaWEtaGlkZGVuPSJ0cnVlIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTkgMTJsMiAyIDQtNG02IDJhOSA5IDAgMTEtMTggMCA5IDkgMCAwMTE4IDB6Ii8+Cjwvc3ZnPgo=";
+const ExclamationCircleIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGFyaWEtaGlkZGVuPSJ0cnVlIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTEyIDh2NG0wIDRoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4K";
+const ExclamationIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGFyaWEtaGlkZGVuPSJ0cnVlIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTEyIDl2Mm0wIDRoLjAxbS02LjkzOCA0aDEzLjg1NmMxLjU0IDAgMi41MDItMS42NjcgMS43MzItM0wxMy43MzIgNGMtLjc3LTEuMzMzLTIuNjk0LTEuMzMzLTMuNDY0IDBMMy4zNCAxNmMtLjc3IDEuMzMzLjE5MiAzIDEuNzMyIDN6Ii8+Cjwvc3ZnPgo=";
 const _hoisted_1 = { class: "m-stepper" };
 const _hoisted_2 = ["disabled", "onClick"];
-const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "m-stepper__count__circle" }, [
-  /* @__PURE__ */ createElementVNode("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    width: "1.2rem",
-    height: "1.2rem",
-    stroke: "currentColor",
-    "aria-hidden": "true"
-  }, [
-    /* @__PURE__ */ createElementVNode("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      "stroke-width": "2",
-      d: "M5 13l4 4L19 7"
-    })
-  ])
-], -1));
-const _hoisted_4 = { class: "m-stepper__header__content" };
-const _hoisted_5 = { class: "m-stepper__title" };
-const _hoisted_6 = {
+const _hoisted_3 = { class: "m-stepper__header__wrapper" };
+const _hoisted_4 = { class: "m-stepper__count --primary" };
+const _hoisted_5 = { class: "m-stepper__count__circle" };
+const _hoisted_6 = { class: "m-stepper__header__content" };
+const _hoisted_7 = { class: "m-stepper__title" };
+const _hoisted_8 = {
   key: 0,
   class: "m-stepper__subtitle"
 };
-const _hoisted_7 = { key: 0 };
-const _hoisted_8 = { class: "m-stepper__content__wrapper" };
+const _hoisted_9 = {
+  key: 0,
+  class: "m-stepper__right"
+};
+const _hoisted_10 = { class: "m-stepper__content__wrapper" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazStepper",
   props: {
@@ -93,7 +231,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     steps: { type: Array, default: void 0 },
     disabledNextSteps: { type: Boolean, default: false },
     disabledPreviousSteps: { type: Boolean, default: false },
-    autoValidatedSteps: { type: Boolean, default: false },
+    autoValidateSteps: { type: Boolean, default: false },
+    allStepsOpened: { type: Boolean, default: false },
+    allStepsValidated: { type: Boolean, default: false },
     color: {
       type: String,
       default: "primary",
@@ -110,19 +250,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "black"
         ].includes(value);
       }
-    }
+    },
+    canCloseSteps: { type: Boolean, default: false }
   },
   emits: ["update:model-value"],
   setup(__props, { emit: emits }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "0469ada6": unref(roundStepBgColor),
-      "4ea3b985": unref(roundStepTextColor)
+      "4e57adab": unref(roundStepBgColor),
+      "a3bdd2fa": unref(roundStepTextColor)
     }));
     const roundStepBgColor = computed(() => `var(--maz-color-${props.color})`);
-    const roundStepTextColor = computed(
-      () => `var(--maz-color-${props.color}-contrast)`
-    );
+    const roundStepTextColor = computed(() => `var(--maz-color-${props.color}-contrast)`);
     const slots = useSlots();
     const stepCount = computed(
       () => Object.keys(slots).filter((slot) => slot.startsWith("content-")).length
@@ -135,8 +274,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emits("update:model-value", value);
       }
     });
+    const getStepStateData = (step) => {
+      if (isStepSuccess(step)) {
+        return { icon: CheckCircleIcon, class: "--success" };
+      } else if (isStepWarning(step)) {
+        return { icon: ExclamationIcon, class: "--warning" };
+      } else if (isStepError(step)) {
+        return { icon: ExclamationCircleIcon, class: "--error" };
+      }
+      return { class: "--normal" };
+    };
+    const getPropertyInStep = (property, step) => {
+      var _a, _b;
+      return (_b = (_a = props.steps) == null ? void 0 : _a[step - 1]) == null ? void 0 : _b[property];
+    };
     const selectStep = (step) => {
-      if (step < 1) {
+      if (currentStep.value === step && props.canCloseSteps) {
+        currentStep.value = 0;
+      } else if (step < 1) {
         currentStep.value = 1;
       } else if (step > stepCount.value) {
         currentStep.value = stepCount.value;
@@ -144,25 +299,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         currentStep.value = step;
       }
     };
-    const hasTitleForStep = (step) => {
-      return Object.keys(slots).filter((slot) => slot.startsWith("title-")).includes(`title-${step}`);
-    };
-    const hasSubtitleForStep = (step) => {
-      return Object.keys(slots).filter((slot) => slot.startsWith("subtitle-")).includes(`subtitle-${step}`);
+    const hasDataForStep = (property, step) => {
+      var _a, _b;
+      const data = property === "titleInfo" ? "title-info" : property;
+      const hasSlot = Object.keys(slots).filter((slot) => slot.startsWith(`${data}-`)).includes(`${data}-${step}`);
+      const hasData = !!((_b = (_a = props.steps) == null ? void 0 : _a[step - 1]) == null ? void 0 : _b[property]);
+      return hasSlot || hasData;
     };
-    const isStepValidated = (step) => {
+    const isStepSuccess = (step) => {
       var _a, _b;
-      const isValidated = !!((_b = (_a = props.steps) == null ? void 0 : _a[step - 1]) == null ? void 0 : _b.validated);
-      const isAutoValidated = props.autoValidatedSteps && step < currentStep.value;
-      return isValidated || isAutoValidated;
+      const isValidated = (_b = (_a = props.steps) == null ? void 0 : _a[step - 1]) == null ? void 0 : _b.success;
+      const hasErrorOrWarningState = isStepError(step) || isStepWarning(step);
+      const isAutoValidated = props.autoValidateSteps && step < currentStep.value && !hasErrorOrWarningState;
+      return isValidated ?? (isAutoValidated || props.allStepsValidated);
     };
     const isStepDisabled = (step) => {
       var _a, _b;
-      const isDisabled = !!((_b = (_a = props.steps) == null ? void 0 : _a[step - 1]) == null ? void 0 : _b.disabled);
-      const isCurrentStep = currentStep.value === step;
+      const isDisabled = (_b = (_a = props.steps) == null ? void 0 : _a[step - 1]) == null ? void 0 : _b.disabled;
+      const isCurrentStepDisabled = currentStep.value === step && !props.canCloseSteps;
       const isAutoDisabledNext = props.disabledNextSteps && step > currentStep.value;
       const isAutoDisabledPrevious = props.disabledPreviousSteps && step < currentStep.value;
-      return isDisabled || isCurrentStep || isAutoDisabledNext || isAutoDisabledPrevious;
+      return isDisabled ?? (isCurrentStepDisabled || isAutoDisabledNext || isAutoDisabledPrevious || props.allStepsOpened);
+    };
+    const isStepError = (step) => {
+      var _a, _b;
+      return (_b = (_a = props.steps) == null ? void 0 : _a[step - 1]) == null ? void 0 : _b.error;
+    };
+    const isStepWarning = (step) => {
+      var _a, _b;
+      return (_b = (_a = props.steps) == null ? void 0 : _a[step - 1]) == null ? void 0 : _b.warning;
     };
     const isLastStep = (step) => {
       return step === stepCount.value;
@@ -171,29 +336,48 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(stepCount), (step) => {
           return openBlock(), createElementBlock(Fragment, { key: step }, [
-            hasTitleForStep(step) ? (openBlock(), createElementBlock("button", {
+            hasDataForStep("title", step) ? (openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
               disabled: isStepDisabled(step),
-              class: normalizeClass(["m-stepper__header", { "--is-current-step": step === unref(currentStep) }]),
+              class: normalizeClass(["m-stepper__header", [
+                {
+                  "--is-current-step": step === unref(currentStep) || __props.allStepsOpened
+                },
+                `${getStepStateData(step).class}`
+              ]]),
               onClick: ($event) => selectStep(step)
             }, [
-              createElementVNode("span", {
-                class: normalizeClass(["m-stepper__count --primary", {
-                  "--validated": isStepValidated(step)
-                }])
-              }, [
-                _hoisted_3,
-                createTextVNode(" " + toDisplayString(step), 1)
-              ], 2),
-              createElementVNode("div", _hoisted_4, [
-                createElementVNode("span", _hoisted_5, [
-                  renderSlot(_ctx.$slots, `title-${step}`, {}, void 0, true)
+              createElementVNode("div", _hoisted_3, [
+                createElementVNode("span", _hoisted_4, [
+                  createElementVNode("div", _hoisted_5, [
+                    getStepStateData(step).icon ? (openBlock(), createBlock(_sfc_main$1, {
+                      key: 0,
+                      class: "icon",
+                      size: "1.5rem",
+                      src: getStepStateData(step).icon
+                    }, null, 8, ["src"])) : createCommentVNode("", true)
+                  ]),
+                  createTextVNode(" " + toDisplayString(step), 1)
                 ]),
-                hasSubtitleForStep(step) ? (openBlock(), createElementBlock("span", _hoisted_6, [
-                  renderSlot(_ctx.$slots, `subtitle-${step}`, {}, void 0, true)
-                ])) : createCommentVNode("", true)
-              ])
+                createElementVNode("div", _hoisted_6, [
+                  createElementVNode("span", _hoisted_7, [
+                    renderSlot(_ctx.$slots, `title-${step}`, {}, () => [
+                      createTextVNode(toDisplayString(getPropertyInStep("title", step)), 1)
+                    ], true)
+                  ]),
+                  hasDataForStep("subtitle", step) ? (openBlock(), createElementBlock("span", _hoisted_8, [
+                    renderSlot(_ctx.$slots, `subtitle-${step}`, {}, () => [
+                      createTextVNode(toDisplayString(getPropertyInStep("subtitle", step)), 1)
+                    ], true)
+                  ])) : createCommentVNode("", true)
+                ])
+              ]),
+              hasDataForStep("titleInfo", step) ? (openBlock(), createElementBlock("span", _hoisted_9, [
+                renderSlot(_ctx.$slots, `title-info-${step}`, {}, () => [
+                  createTextVNode(toDisplayString(getPropertyInStep("titleInfo", step)), 1)
+                ], true)
+              ])) : createCommentVNode("", true)
             ], 10, _hoisted_2)) : createCommentVNode("", true),
             createElementVNode("div", {
               class: normalizeClass(["m-stepper__content", {
@@ -202,14 +386,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, [
               createVNode(MazTransitionExpand, null, {
                 default: withCtx(() => [
-                  unref(currentStep) === step ? (openBlock(), createElementBlock("div", _hoisted_7, [
-                    createElementVNode("div", _hoisted_8, [
+                  withDirectives(createElementVNode("div", null, [
+                    createElementVNode("div", _hoisted_10, [
                       renderSlot(_ctx.$slots, `content-${step}`, {
+                        validated: isStepSuccess(step),
+                        error: isStepError(step),
+                        warning: isStepWarning(step),
                         nextStep: () => selectStep(step + 1),
                         previousStep: () => selectStep(step - 1)
                       }, void 0, true)
                     ])
-                  ])) : createCommentVNode("", true)
+                  ], 512), [
+                    [vShow, __props.allStepsOpened || unref(currentStep) === step]
+                  ])
                 ]),
                 _: 2
               }, 1024)
@@ -220,8 +409,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MazStepper_vue_vue_type_style_index_0_scoped_b8833346_lang = "";
-const MazStepper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b8833346"]]);
+const MazStepper_vue_vue_type_style_index_0_scoped_b905aaa6_lang = "";
+const MazStepper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b905aaa6"]]);
 export {
   MazStepper as default
 };

package/components/MazStepper.umd.js

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode(".m-transition-expand[data-v-b5d3ee9f],.m-transition-expand *[data-v-b5d3ee9f]{will-change:height;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.m-stepper__header[data-v-b8833346]{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.m-stepper__header[data-v-b8833346]>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.m-stepper__header[data-v-b8833346]{border-radius:var(--maz-border-radius);padding:.5rem 1rem;outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:.2s;transition-duration:.2s}.m-stepper__header__content[data-v-b8833346]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.m-stepper__header[data-v-b8833346]:not(:disabled):hover{background-color:var(--maz-color-bg-lighter)}.m-stepper__header[data-v-b8833346]:not(:disabled):focus{background-color:var(--maz-color-bg-lighter)}.m-stepper__header[data-v-b8833346]:disabled{cursor:not-allowed}.m-stepper__header.--is-current-step[data-v-b8833346]{cursor:default}.m-stepper__title[data-v-b8833346]{color:var(--maz-color-text)}.m-stepper__subtitle[data-v-b8833346]{font-size:.75rem;line-height:1rem;color:var(--maz-color-muted)}.m-stepper__count[data-v-b8833346]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;height:2rem;width:2rem;-webkit-box-flex:0;-ms-flex:none;flex:none;overflow:hidden;border-radius:9999px;font-size:1.125rem;line-height:1.75rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--0469ada6);color:var(--4ea3b985)}.m-stepper__count__circle[data-v-b8833346]{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:-webkit-box;display:-ms-flexbox;display:flex;--tw-scale-x: 0;--tw-scale-y: 0;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;background-color:var(--maz-color-success);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.m-stepper__count svg[data-v-b8833346]{color:var(--4ea3b985)}.m-stepper__count.--validated .m-stepper__count__circle[data-v-b8833346]{--tw-scale-x: 1;--tw-scale-y: 1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.m-stepper__count.--validated svg[data-v-b8833346]{color:var(--maz-color-success-contrast)}.m-stepper__content[data-v-b8833346]{margin-left:2rem;border-left-width:2px;border-color:transparent;padding-top:.5rem;padding-bottom:.5rem;padding-left:2rem}.m-stepper__content__wrapper[data-v-b8833346]{padding-top:.5rem;padding-bottom:.5rem}.m-stepper__content[data-v-b8833346]:not(.--no-border){border-color:var(--maz-color-bg-lighter)}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).MazStepper=t(e.Vue)}(this,(function(e){"use strict";const t=(e,t)=>{const o=e.__vccOpts||e;for(const[l,s]of t)o[l]=s;return o},o=t(e.defineComponent({__name:"MazTransitionExpand",setup:t=>(t,o)=>(e.openBlock(),e.createBlock(e.TransitionGroup,{class:"m-transition-expand",name:"maz-expand",tag:"div",onEnter:o[0]||(o[0]=t=>(t=>{const o=getComputedStyle(t).width;t.style.width=o,t.style.position="absolute",t.style.visibility="hidden",t.style.height="auto",t.style.top="bottom";const l=getComputedStyle(t).height;t.style.width="",t.style.position="",t.style.visibility="",t.style.height="0px",getComputedStyle(t).height,e.nextTick((()=>{t.style.height=l}))})(t)),onAfterEnter:o[1]||(o[1]=e=>{e.style.height="auto"}),onLeave:o[2]||(o[2]=t=>(t=>{const o=getComputedStyle(t).height;t.style.height=o,getComputedStyle(t).height,e.nextTick((()=>{t.style.height="0px"}))})(t))},{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},void 0,!0)])),_:3}))}),[["__scopeId","data-v-b5d3ee9f"]]),l={class:"m-stepper"},s=["disabled","onClick"],a=(t=>(e.pushScopeId("data-v-b8833346"),t=t(),e.popScopeId(),t))((()=>e.createElementVNode("div",{class:"m-stepper__count__circle"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",width:"1.2rem",height:"1.2rem",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 13l4 4L19 7"})])],-1))),n={class:"m-stepper__header__content"},r={class:"m-stepper__title"},i={key:0,class:"m-stepper__subtitle"},d={key:0},c={class:"m-stepper__content__wrapper"};return t(e.defineComponent({__name:"MazStepper",props:{modelValue:{type:Number,default:void 0},steps:{type:Array,default:void 0},disabledNextSteps:{type:Boolean,default:!1},disabledPreviousSteps:{type:Boolean,default:!1},autoValidatedSteps:{type:Boolean,default:!1},color:{type:String,default:"primary",validator:e=>["primary","secondary","warning","danger","info","success","white","gray","black"].includes(e)}},emits:["update:model-value"],setup(t,{emit:p}){const u=t;e.useCssVars((t=>({"0469ada6":e.unref(m),"4ea3b985":e.unref(v)})));const m=e.computed((()=>`var(--maz-color-${u.color})`)),v=e.computed((()=>`var(--maz-color-${u.color}-contrast)`)),y=e.useSlots(),h=e.computed((()=>Object.keys(y).filter((e=>e.startsWith("content-"))).length)),f=e.ref(1),_=e.computed({get:()=>u.modelValue??f.value,set:e=>{f.value=e,p("update:model-value",e)}}),g=e=>{e<1?_.value=1:e>h.value?_.value=h.value:_.value=e},b=e=>Object.keys(y).filter((e=>e.startsWith("title-"))).includes(`title-${e}`),k=e=>Object.keys(y).filter((e=>e.startsWith("subtitle-"))).includes(`subtitle-${e}`),S=e=>{var t,o;const l=!!(null==(o=null==(t=u.steps)?void 0:t[e-1])?void 0:o.validated),s=u.autoValidatedSteps&&e<_.value;return l||s},C=e=>{var t,o;const l=!!(null==(o=null==(t=u.steps)?void 0:t[e-1])?void 0:o.disabled),s=_.value===e,a=u.disabledNextSteps&&e>_.value,n=u.disabledPreviousSteps&&e<_.value;return l||s||a||n},V=e=>e===h.value;return(t,p)=>(e.openBlock(),e.createElementBlock("div",l,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(h),(l=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l},[b(l)?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",disabled:C(l),class:e.normalizeClass(["m-stepper__header",{"--is-current-step":l===e.unref(_)}]),onClick:e=>g(l)},[e.createElementVNode("span",{class:e.normalizeClass(["m-stepper__count --primary",{"--validated":S(l)}])},[a,e.createTextVNode(" "+e.toDisplayString(l),1)],2),e.createElementVNode("div",n,[e.createElementVNode("span",r,[e.renderSlot(t.$slots,`title-${l}`,{},void 0,!0)]),k(l)?(e.openBlock(),e.createElementBlock("span",i,[e.renderSlot(t.$slots,`subtitle-${l}`,{},void 0,!0)])):e.createCommentVNode("",!0)])],10,s)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["m-stepper__content",{"--no-border":V(l)}])},[e.createVNode(o,null,{default:e.withCtx((()=>[e.unref(_)===l?(e.openBlock(),e.createElementBlock("div",d,[e.createElementVNode("div",c,[e.renderSlot(t.$slots,`content-${l}`,{nextStep:()=>g(l+1),previousStep:()=>g(l-1)},void 0,!0)])])):e.createCommentVNode("",!0)])),_:2},1024)],2)],64)))),128))]))}}),[["__scopeId","data-v-b8833346"]])}));
+(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode(".m-transition-expand[data-v-b5d3ee9f],.m-transition-expand *[data-v-b5d3ee9f]{will-change:height;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.m-stepper__header[data-v-b905aaa6]{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.m-stepper__header[data-v-b905aaa6]>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.m-stepper__header[data-v-b905aaa6]{border-radius:var(--maz-border-radius);padding:.5rem 1rem;outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:.2s;transition-duration:.2s}.m-stepper__header__content[data-v-b905aaa6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.m-stepper__header[data-v-b905aaa6]:not(:disabled):hover{background-color:var(--maz-color-bg-lighter)}.m-stepper__header[data-v-b905aaa6]:not(:disabled):focus{background-color:var(--maz-color-bg-lighter)}.m-stepper__header[data-v-b905aaa6]:disabled{cursor:not-allowed}.m-stepper__header.--is-current-step[data-v-b905aaa6]{cursor:default}.m-stepper__header__wrapper[data-v-b905aaa6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.m-stepper__header__wrapper[data-v-b905aaa6]>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.m-stepper__header.--success .m-stepper__count__circle[data-v-b905aaa6]{--tw-scale-x: 1;--tw-scale-y: 1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background-color:var(--maz-color-success)}.m-stepper__header.--success .m-stepper__right[data-v-b905aaa6]{color:var(--maz-color-success)}.m-stepper__header.--success svg[data-v-b905aaa6]{color:var(--maz-color-success-contrast)}.m-stepper__header.--warning .m-stepper__count__circle[data-v-b905aaa6]{--tw-scale-x: 1;--tw-scale-y: 1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background-color:var(--maz-color-warning)}.m-stepper__header.--warning .m-stepper__right[data-v-b905aaa6]{color:var(--maz-color-warning)}.m-stepper__header.--warning svg[data-v-b905aaa6]{color:var(--maz-color-warning-contrast)}.m-stepper__header.--error .m-stepper__count__circle[data-v-b905aaa6]{--tw-scale-x: 1;--tw-scale-y: 1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background-color:var(--maz-color-danger)}.m-stepper__header.--error .m-stepper__right[data-v-b905aaa6]{color:var(--maz-color-danger)}.m-stepper__header.--error svg[data-v-b905aaa6]{color:var(--maz-color-danger-contrast)}.m-stepper__title[data-v-b905aaa6]{color:var(--maz-color-text)}.m-stepper__subtitle[data-v-b905aaa6]{margin-top:.25rem;font-size:.75rem;line-height:1rem;color:var(--maz-color-muted)}.m-stepper__right[data-v-b905aaa6]{text-align:right;font-size:.875rem;line-height:1.25rem;color:var(--maz-color-primary)}.m-stepper__count[data-v-b905aaa6]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;height:2rem;width:2rem;-webkit-box-flex:0;-ms-flex:none;flex:none;overflow:hidden;border-radius:9999px;font-size:1.125rem;line-height:1.75rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--4e57adab);color:var(--a3bdd2fa)}.m-stepper__count__circle[data-v-b905aaa6]{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:-webkit-box;display:-ms-flexbox;display:flex;--tw-scale-x: 0;--tw-scale-y: 0;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.m-stepper__count svg[data-v-b905aaa6]{color:var(--maz-color-success-contrast)}.m-stepper__content[data-v-b905aaa6]{margin-left:2rem;border-left-width:2px;border-color:transparent;padding-top:.5rem;padding-bottom:.5rem;padding-left:2rem}.m-stepper__content__wrapper[data-v-b905aaa6]{padding-top:.5rem;padding-bottom:.5rem}.m-stepper__content[data-v-b905aaa6]:not(.--no-border){border-color:var(--maz-color-bg-lighter)}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).MazStepper=t(e.Vue)}(this,(function(e){"use strict";const t=(e,t)=>{const l=e.__vccOpts||e;for(const[a,o]of t)l[a]=o;return l},l=t(e.defineComponent({__name:"MazTransitionExpand",setup:t=>(t,l)=>(e.openBlock(),e.createBlock(e.TransitionGroup,{class:"m-transition-expand",name:"maz-expand",tag:"div",onEnter:l[0]||(l[0]=t=>(t=>{const l=getComputedStyle(t).width;t.style.width=l,t.style.position="absolute",t.style.visibility="hidden",t.style.height="auto",t.style.top="bottom";const a=getComputedStyle(t).height;t.style.width="",t.style.position="",t.style.visibility="",t.style.height="0px",getComputedStyle(t).height,e.nextTick((()=>{t.style.height=a}))})(t)),onAfterEnter:l[1]||(l[1]=e=>{e.style.height="auto"}),onLeave:l[2]||(l[2]=t=>(t=>{const l=getComputedStyle(t).height;t.style.height=l,getComputedStyle(t).height,e.nextTick((()=>{t.style.height="0px"}))})(t))},{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},void 0,!0)])),_:3}))}),[["__scopeId","data-v-b5d3ee9f"]]);const a=["innerHTML"],o=e.defineComponent({__name:"MazIcon",props:{src:{type:String,default:void 0},path:{type:String,default:void 0},name:{type:String,default:void 0},size:{type:String,default:"1.5rem"},title:{type:String,default:void 0},transformSource:{type:Function,default:e=>e}},emits:["loaded","unloaded","error"],setup(t,{emit:l}){const o=t,n={},r=e.ref(),s=e.ref(),i=()=>{try{return function(t,l){const a=e.inject(t,l);if(!a)throw new Error(`[maz-ui](injectStrict) Could not resolve ${t}`);return a}("mazIconPath")}catch{return}},c=e.computed((()=>o.path??i())),d=e.computed((()=>o.src?o.src:c.value?`${c.value}/${o.name}.svg`:`/${o.name}.svg`));e.onMounted((()=>{o.name||o.src||console.error('[maz-ui](MazIcon) you should provide "name" or "src" as prop')}));const u=e=>{const t={},l=e.attributes;if(!l)return t;for(let a=l.length-1;a>=0;a--)t[l[a].name]=l[a].value;return t},p=e=>{let t=e.cloneNode(!0);return t=o.transformSource(e),o.title&&((e,t)=>{const l=e.querySelectorAll("title");if(l.length>0)l[0].textContent=t;else{const l=document.createElementNS("http://www.w3.org/2000/svg","title");l.textContent=t,e.append(l)}})(t,o.title),e.innerHTML},m=e=>new Promise(((t,l)=>{const a=new XMLHttpRequest;a.open("GET",e,!0),a.addEventListener("load",(()=>{if(a.status>=200&&a.status<400)try{const e=new DOMParser;let n=e.parseFromString(a.responseText,"text/xml").querySelectorAll("svg")[0];n?(n=o.transformSource(n),t(n)):l(new Error('Loaded file is not valid SVG"'))}catch(e){l(e)}else l(new Error("Error loading SVG"))})),a.addEventListener("error",(()=>l())),a.send()}));return e.watchEffect((()=>(async t=>{n[t]||(n[t]=m(t));try{r.value=await n[t],await e.nextTick(),l("loaded",s.value)}catch(a){r.value&&(r.value=void 0,l("unloaded")),delete n[t],l("error",a)}})(d.value))),(l,o)=>{return r.value?(e.openBlock(),e.createElementBlock("svg",e.mergeProps({key:0,ref_key:"svgElem",ref:s,width:"1em",height:"1em"},{...u(r.value),...(n=l.$attrs,Object.keys(n).reduce(((e,t)=>(!1!==n[t]&&null!==n[t]&&void 0!==n[t]&&(e[t]=n[t]),e)),{}))},{style:`font-size: ${t.size}`,innerHTML:p(r.value)}),null,16,a)):e.createCommentVNode("",!0);var n}}}),n={class:"m-stepper"},r=["disabled","onClick"],s={class:"m-stepper__header__wrapper"},i={class:"m-stepper__count --primary"},c={class:"m-stepper__count__circle"},d={class:"m-stepper__header__content"},u={class:"m-stepper__title"},p={key:0,class:"m-stepper__subtitle"},m={key:0,class:"m-stepper__right"},v={class:"m-stepper__content__wrapper"};return t(e.defineComponent({__name:"MazStepper",props:{modelValue:{type:Number,default:void 0},steps:{type:Array,default:void 0},disabledNextSteps:{type:Boolean,default:!1},disabledPreviousSteps:{type:Boolean,default:!1},autoValidateSteps:{type:Boolean,default:!1},allStepsOpened:{type:Boolean,default:!1},allStepsValidated:{type:Boolean,default:!1},color:{type:String,default:"primary",validator:e=>["primary","secondary","warning","danger","info","success","white","gray","black"].includes(e)},canCloseSteps:{type:Boolean,default:!1}},emits:["update:model-value"],setup(t,{emit:a}){const y=t;e.useCssVars((t=>({"4e57adab":e.unref(g),a3bdd2fa:e.unref(f)})));const g=e.computed((()=>`var(--maz-color-${y.color})`)),f=e.computed((()=>`var(--maz-color-${y.color}-contrast)`)),I=e.useSlots(),S=e.computed((()=>Object.keys(I).filter((e=>e.startsWith("content-"))).length)),b=e.ref(1),h=e.computed({get:()=>y.modelValue??b.value,set:e=>{b.value=e,a("update:model-value",e)}}),M=e=>w(e)?{icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGFyaWEtaGlkZGVuPSJ0cnVlIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTkgMTJsMiAyIDQtNG02IDJhOSA5IDAgMTEtMTggMCA5IDkgMCAwMTE4IDB6Ii8+Cjwvc3ZnPgo=",class:"--success"}:z(e)?{icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGFyaWEtaGlkZGVuPSJ0cnVlIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTEyIDl2Mm0wIDRoLjAxbS02LjkzOCA0aDEzLjg1NmMxLjU0IDAgMi41MDItMS42NjcgMS43MzItM0wxMy43MzIgNGMtLjc3LTEuMzMzLTIuNjk0LTEuMzMzLTMuNDY0IDBMMy4zNCAxNmMtLjc3IDEuMzMzLjE5MiAzIDEuNzMyIDN6Ii8+Cjwvc3ZnPgo=",class:"--warning"}:k(e)?{icon:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGFyaWEtaGlkZGVuPSJ0cnVlIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTEyIDh2NG0wIDRoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4K",class:"--error"}:{class:"--normal"},C=(e,t)=>{var l,a;return null==(a=null==(l=y.steps)?void 0:l[t-1])?void 0:a[e]},N=e=>{h.value===e&&y.canCloseSteps?h.value=0:e<1?h.value=1:e>S.value?h.value=S.value:h.value=e},E=(e,t)=>{var l,a;const o="titleInfo"===e?"title-info":e,n=Object.keys(I).filter((e=>e.startsWith(`${o}-`))).includes(`${o}-${t}`),r=!!(null==(a=null==(l=y.steps)?void 0:l[t-1])?void 0:a[e]);return n||r},w=e=>{var t,l;const a=null==(l=null==(t=y.steps)?void 0:t[e-1])?void 0:l.success,o=k(e)||z(e),n=y.autoValidateSteps&&e<h.value&&!o;return a??(n||y.allStepsValidated)},_=e=>{var t,l;const a=null==(l=null==(t=y.steps)?void 0:t[e-1])?void 0:l.disabled,o=h.value===e&&!y.canCloseSteps,n=y.disabledNextSteps&&e>h.value,r=y.disabledPreviousSteps&&e<h.value;return a??(o||n||r||y.allStepsOpened)},k=e=>{var t,l;return null==(l=null==(t=y.steps)?void 0:t[e-1])?void 0:l.error},z=e=>{var t,l;return null==(l=null==(t=y.steps)?void 0:t[e-1])?void 0:l.warning},D=e=>e===S.value;return(a,y)=>(e.openBlock(),e.createElementBlock("div",n,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(S),(n=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:n},[E("title",n)?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",disabled:_(n),class:e.normalizeClass(["m-stepper__header",[{"--is-current-step":n===e.unref(h)||t.allStepsOpened},`${M(n).class}`]]),onClick:e=>N(n)},[e.createElementVNode("div",s,[e.createElementVNode("span",i,[e.createElementVNode("div",c,[M(n).icon?(e.openBlock(),e.createBlock(o,{key:0,class:"icon",size:"1.5rem",src:M(n).icon},null,8,["src"])):e.createCommentVNode("",!0)]),e.createTextVNode(" "+e.toDisplayString(n),1)]),e.createElementVNode("div",d,[e.createElementVNode("span",u,[e.renderSlot(a.$slots,`title-${n}`,{},(()=>[e.createTextVNode(e.toDisplayString(C("title",n)),1)]),!0)]),E("subtitle",n)?(e.openBlock(),e.createElementBlock("span",p,[e.renderSlot(a.$slots,`subtitle-${n}`,{},(()=>[e.createTextVNode(e.toDisplayString(C("subtitle",n)),1)]),!0)])):e.createCommentVNode("",!0)])]),E("titleInfo",n)?(e.openBlock(),e.createElementBlock("span",m,[e.renderSlot(a.$slots,`title-info-${n}`,{},(()=>[e.createTextVNode(e.toDisplayString(C("titleInfo",n)),1)]),!0)])):e.createCommentVNode("",!0)],10,r)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["m-stepper__content",{"--no-border":D(n)}])},[e.createVNode(l,null,{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("div",null,[e.createElementVNode("div",v,[e.renderSlot(a.$slots,`content-${n}`,{validated:w(n),error:k(n),warning:z(n),nextStep:()=>N(n+1),previousStep:()=>N(n-1)},void 0,!0)])],512),[[e.vShow,t.allStepsOpened||e.unref(h)===n]])])),_:2},1024)],2)],64)))),128))]))}}),[["__scopeId","data-v-b905aaa6"]])}));

package/components/MazSwitch.mjs

@@ -14,15 +14,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:model-value"],
   setup(__props, { emit: emits }) {
     const props = __props;
-    const uniqueId = computed(
-      () => {
-        var _a;
-        return props.id ?? `mazSwitch-${(_a = getCurrentInstance()) == null ? void 0 : _a.uid}`;
-      }
-    );
-    const bgColorClassVar = computed(
-      () => `var(--maz-color-${props.color}-alpha)`
-    );
+    const uniqueId = computed(() => {
+      var _a;
+      return props.id ?? `mazSwitch-${(_a = getCurrentInstance()) == null ? void 0 : _a.uid}`;
+    });
+    const bgColorClassVar = computed(() => `var(--maz-color-${props.color}-alpha)`);
     const bgColorStyle = computed(() => ({
       backgroundColor: props.modelValue ? `var(--maz-color-${props.color})` : "var(--maz-color-white)"
     }));