maz-ui 4.0.0-alpha.2 → 4.0.0-alpha.3

package/dist/components/MazCheckbox.mjs

@@ -0,0 +1,135 @@
+import { defineComponent as N, computed as r, ref as E, openBlock as v, createElementBlock as k, unref as c, normalizeClass as u, normalizeStyle as t, createElementVNode as d, mergeProps as A, createVNode as M, renderSlot as _, createTextVNode as D, toDisplayString as y, createCommentVNode as R } from "vue";
+import { useInstanceUniqId as $ } from "../composables/useInstanceUniqId.mjs";
+import q from "../chunks/check.B-gxQRxL.mjs";
+import { _ as F } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazCheckbox.BQVJ7EUB.css';const H = ["for", "aria-checked"], K = ["id", "checked", "disabled", "name"], P = { class: "m-checkbox__text" }, T = /* @__PURE__ */ N({
+  inheritAttrs: !1,
+  __name: "MazCheckbox",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    id: { default: void 0 },
+    color: { default: "primary" },
+    value: { type: [String, Number, Boolean], default: void 0 },
+    name: { default: "m-checkbox" },
+    size: { default: "md" },
+    label: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    error: { type: Boolean },
+    success: { type: Boolean },
+    warning: { type: Boolean },
+    hint: {}
+  },
+  emits: ["update:model-value", "change", "blur", "focus"],
+  setup(z, { emit: g }) {
+    const o = z, l = g, i = $({
+      componentName: "MazCheckbox",
+      providedId: o.id
+    }), m = r(
+      () => typeof o.value != "boolean" && Array.isArray(o.modelValue) ? o.modelValue.includes(o.value) : typeof o.modelValue == "boolean" ? o.modelValue : !1
+    ), f = r(() => {
+      switch (o.size) {
+        case "xl":
+          return "2rem";
+        case "lg":
+          return "1.75rem";
+        case "sm":
+          return "1.25rem";
+        case "xs":
+          return "1rem";
+        case "mini":
+          return "0.75rem";
+        default:
+          return "1.5rem";
+      }
+    }), V = r(() => {
+      switch (o.size) {
+        case "xl":
+          return "maz-text-2xl";
+        case "lg":
+          return "maz-text-xl";
+        case "sm":
+          return "maz-text-base";
+        case "xs":
+          return "maz-text-sm";
+        case "mini":
+          return "maz-text-xs";
+        default:
+          return "maz-text-lg";
+      }
+    }), x = r(() => o.color === "theme" ? "var(--maz-color-bg)" : `var(--maz-color-${o.color}-contrast)`), w = r(() => o.color === "theme" ? "var(--maz-color-bg-theme)" : `var(--maz-color-${o.color})`), h = r(() => o.error ? "var(--maz-color-danger)" : o.warning ? "var(--maz-color-warning)" : o.success ? "var(--maz-color-success)" : ["black", "transparent", "theme"].includes(o.color) ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-alpha)`);
+    function C(e) {
+      ["Space"].includes(e.code) && (e.preventDefault(), p(o.value ?? !o.modelValue));
+    }
+    function S(e) {
+      return typeof e == "boolean" && (typeof o.modelValue == "boolean" || o.modelValue === void 0 || o.modelValue === null) ? !o.modelValue : Array.isArray(o.modelValue) && typeof e != "boolean" ? o.modelValue.includes(e) ? o.modelValue.filter((a) => a !== e) : [...o.modelValue, e] : [e];
+    }
+    function p(e) {
+      const a = S(e);
+      l("update:model-value", a), l("change", a);
+    }
+    const n = E();
+    function B(e) {
+      var a;
+      (a = n.value) == null || a.dispatchEvent(new Event("blur")), l("blur", e);
+    }
+    function I(e) {
+      var a;
+      (a = n.value) == null || a.dispatchEvent(new Event("focus")), l("focus", e);
+    }
+    return (e, a) => (v(), k("label", {
+      for: c(i),
+      class: u(["m-checkbox m-reset-css", [{ "--disabled": e.disabled, "--error": e.error, "--warning": e.warning, "--success": e.success }, o.class]]),
+      tabindex: "0",
+      style: t([e.style, { "--checkbox-selected-color": w.value, "--checkbox-box-shadow-color": h.value }]),
+      role: "checkbox",
+      "aria-checked": m.value,
+      onKeydown: C,
+      onBlur: B,
+      onFocus: I
+    }, [
+      d("input", A({
+        id: c(i),
+        ref_key: "inputRef",
+        ref: n,
+        checked: m.value
+      }, e.$attrs, {
+        tabindex: "-1",
+        disabled: e.disabled,
+        name: e.name,
+        type: "checkbox",
+        onChange: a[0] || (a[0] = (s) => {
+          var b;
+          return p(e.value ?? ((b = s == null ? void 0 : s.target) == null ? void 0 : b.checked));
+        })
+      }), null, 16, K),
+      d("span", {
+        style: t({ width: f.value, height: f.value })
+      }, [
+        M(c(q), {
+          class: u(["check-icon", V.value]),
+          style: t({ color: x.value })
+        }, null, 8, ["class", "style"])
+      ], 4),
+      d("div", P, [
+        _(e.$slots, "default", { value: e.value }, () => [
+          D(y(e.label), 1)
+        ], !0),
+        e.hint ? (v(), k("span", {
+          key: 0,
+          class: u(["m-checkbox__hint", {
+            "--error": e.error,
+            "--success": e.success,
+            "--warning": e.warning
+          }]),
+          style: t({ boxShadow: `0 0 0 0.125rem ${h.value}` })
+        }, y(e.hint), 7)) : R("", !0)
+      ])
+    ], 46, H));
+  }
+}), L = /* @__PURE__ */ F(T, [["__scopeId", "data-v-7574d36c"]]);
+export {
+  L as default
+};
+//# sourceMappingURL=MazCheckbox.mjs.map

package/dist/components/MazCheckbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazCheckbox.mjs","sources":["../../src/components/MazCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends boolean | (string | number)[]\">\nimport type { Color, Size } from '@components/types'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport CheckIcon from '@icons/check.svg'\nimport { computed, type HTMLAttributes, ref } from 'vue'\n\nexport type CheckboxValue = string | number | boolean\n\nexport interface MazCheckboxProps<T = boolean | (string | number)[]> {\n  /** Style attribut of the component root element */\n  style?: HTMLAttributes['style']\n  /** Class attribut of the component root element */\n  class?: HTMLAttributes['class']\n  /** The model value of the checkbox */\n  modelValue?: T\n  /** The id of the checkbox */\n  id?: string\n  /** The color of the checkbox */\n  color?: Color\n  /** The value of the checkbox when selected */\n  value?: CheckboxValue\n  /** The name of the checkbox */\n  name?: string\n  /** The size of the checkbox */\n  size?: Size\n  /** Text label */\n  label?: string\n  /** If the checkbox is disabled */\n  disabled?: boolean\n  /** Whether there is an error with the input. */\n  error?: boolean\n  /** Whether the input is successful. */\n  success?: boolean\n  /** Whether there is a warning with the input. */\n  warning?: boolean\n  /** The hint text to display below the input. */\n  hint?: string\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<MazCheckboxProps<T>>(),\n  {\n    style: undefined,\n    class: undefined,\n    modelValue: undefined,\n    label: undefined,\n    id: undefined,\n    color: 'primary',\n    value: undefined,\n    name: 'm-checkbox',\n    size: 'md',\n    disabled: false,\n  },\n)\n\nconst emits = defineEmits<{\n  /**\n   * Emitted when the model value change\n   * @property value The new value\n   */\n  'update:model-value': [value: T]\n  /**\n   * Emitted when the model value change\n   * @property value The new value\n   */\n  'change': [value: T]\n  /**\n   * Emitted when the checkbox lost focus\n   * @property {FocusEvent} value - The focus event\n   */\n  'blur': [value: FocusEvent]\n  /**\n   * Emitted when the checkbox is focused\n   * @property {FocusEvent} value - The focus event\n   */\n  'focus': [value: FocusEvent]\n}>()\n\nconst instanceId = useInstanceUniqId({\n  componentName: 'MazCheckbox',\n  providedId: props.id,\n})\n\nconst isChecked = computed(() =>\n  typeof props.value !== 'boolean' && Array.isArray(props.modelValue)\n    ? props.modelValue.includes(props.value as never)\n    : typeof props.modelValue === 'boolean'\n      ? props.modelValue\n      : false,\n)\n\nconst checkboxSize = computed(() => {\n  switch (props.size) {\n    case 'xl': {\n      return '2rem'\n    }\n    case 'lg': {\n      return '1.75rem'\n    }\n    case 'sm': {\n      return '1.25rem'\n    }\n    case 'xs': {\n      return '1rem'\n    }\n    case 'mini': {\n      return '0.75rem'\n    }\n\n    default: {\n      return '1.5rem'\n    }\n  }\n})\n\nconst checkIconSize = computed(() => {\n  switch (props.size) {\n    case 'xl': {\n      return 'maz-text-2xl'\n    }\n    case 'lg': {\n      return 'maz-text-xl'\n    }\n    case 'sm': {\n      return 'maz-text-base'\n    }\n    case 'xs': {\n      return 'maz-text-sm'\n    }\n    case 'mini': {\n      return 'maz-text-xs'\n    }\n    default: {\n      return 'maz-text-lg'\n    }\n  }\n})\n\nconst checkIconColor = computed(() => {\n  if (props.color === 'theme') {\n    return 'var(--maz-color-bg)'\n  }\n\n  return `var(--maz-color-${props.color}-contrast)`\n})\nconst checkboxSelectedColor = computed(() => {\n  if (props.color === 'theme') {\n    return 'var(--maz-color-bg-theme)'\n  }\n\n  return `var(--maz-color-${props.color})`\n})\nconst checkboxBoxShadow = computed(() => {\n  if (props.error) {\n    return `var(--maz-color-danger)`\n  }\n  else if (props.warning) {\n    return `var(--maz-color-warning)`\n  }\n  else if (props.success) {\n    return `var(--maz-color-success)`\n  }\n\n  return ['black', 'transparent', 'theme'].includes(props.color)\n    ? `var(--maz-color-muted)`\n    : `var(--maz-color-${props.color}-alpha)`\n})\n\nfunction keyboardHandler(event: KeyboardEvent) {\n  if (['Space'].includes(event.code)) {\n    event.preventDefault()\n    emitValue(props.value ?? !props.modelValue)\n  }\n}\n\nfunction getNewValue(value: boolean | string | number) {\n  if (\n    typeof value === 'boolean'\n    && (typeof props.modelValue === 'boolean'\n      || props.modelValue === undefined\n      || props.modelValue === null)\n  ) {\n    return !props.modelValue\n  }\n  else if (Array.isArray(props.modelValue) && typeof value !== 'boolean') {\n    return props.modelValue.includes(value)\n      ? props.modelValue.filter(v => v !== value)\n      : [...props.modelValue, value]\n  }\n  else {\n    return [value]\n  }\n}\n\nfunction emitValue(value: boolean | string | number) {\n  const newValue = getNewValue(value)\n\n  emits('update:model-value', newValue as T)\n  emits('change', newValue as T)\n}\n\nconst inputRef = ref<HTMLInputElement>()\n\nfunction onBlur(event: FocusEvent) {\n  inputRef.value?.dispatchEvent(new Event('blur'))\n  emits('blur', event)\n}\nfunction onFocus(event: FocusEvent) {\n  inputRef.value?.dispatchEvent(new Event('focus'))\n  emits('focus', event)\n}\n</script>\n\n<template>\n  <label\n    :for=\"instanceId\"\n    class=\"m-checkbox m-reset-css\"\n    :class=\"[{ '--disabled': disabled, '--error': error, '--warning': warning, '--success': success }, props.class]\"\n    tabindex=\"0\"\n    :style=\"[style, { '--checkbox-selected-color': checkboxSelectedColor, '--checkbox-box-shadow-color': checkboxBoxShadow }]\"\n    role=\"checkbox\"\n    :aria-checked=\"isChecked\"\n    @keydown=\"keyboardHandler\"\n    @blur=\"onBlur\"\n    @focus=\"onFocus\"\n  >\n    <input\n      :id=\"instanceId\"\n      ref=\"inputRef\"\n      :checked=\"isChecked\"\n      v-bind=\"$attrs\"\n      tabindex=\"-1\"\n      :disabled\n      :name\n      type=\"checkbox\"\n      @change=\"emitValue(value ?? ($event?.target as HTMLInputElement)?.checked)\"\n    >\n    <span :style=\"{ width: checkboxSize, height: checkboxSize }\">\n      <CheckIcon class=\"check-icon\" :class=\"checkIconSize\" :style=\"{ color: checkIconColor }\" />\n    </span>\n    <div class=\"m-checkbox__text\">\n      <slot :value>\n        {{ label }}\n      </slot>\n\n      <span\n        v-if=\"hint\"\n        class=\"m-checkbox__hint\" :class=\"{\n          '--error': error,\n          '--success': success,\n          '--warning': warning,\n        }\"\n        :style=\"{ boxShadow: `0 0 0 0.125rem ${checkboxBoxShadow}` }\"\n      >{{ hint }}</span>\n    </div>\n  </label>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-checkbox {\n  @apply maz-relative maz-inline-flex maz-items-center maz-gap-2 maz-align-top maz-outline-none;\n\n  .check-icon {\n    @apply maz-scale-0 maz-transition-transform maz-duration-300 maz-ease-in-out;\n\n    :deep(path) {\n      stroke-width: 2.5;\n    }\n  }\n\n  > span {\n    @apply maz-relative maz-flex maz-rounded-md maz-border maz-border-border maz-transition-all maz-duration-300 maz-ease-in-out maz-flex-center dark:maz-border-color-lighter;\n  }\n\n  input {\n    @apply maz-hidden;\n\n    &:not(:checked) ~ span {\n      @apply maz-bg-color dark:maz-bg-color-light;\n    }\n\n    &:checked ~ span {\n      border-color: var(--checkbox-selected-color);\n      background-color: var(--checkbox-selected-color);\n\n      .check-icon {\n        @apply maz-scale-100;\n      }\n    }\n\n    &:disabled ~ span {\n      @apply maz-bg-color-light dark:maz-bg-color-lighter;\n    }\n  }\n\n  &.--disabled {\n    @apply maz-cursor-not-allowed maz-text-muted;\n\n    input:checked ~ span {\n      @apply maz-border-border dark:maz-border-color-lighter;\n\n      .check-icon {\n        @apply maz-text-muted;\n      }\n    }\n  }\n\n  &:not(.--disabled) {\n    @apply maz-cursor-pointer;\n\n    &:hover > span,\n    &:focus > span {\n      @apply maz-transition-all maz-duration-300 maz-ease-in-out;\n\n      box-shadow: 0 0 0 0.125rem var(--checkbox-box-shadow-color);\n    }\n  }\n\n  &__text {\n    @apply maz-flex maz-flex-col maz-gap-0;\n  }\n\n  &__hint {\n    @apply maz-text-sm maz-text-muted;\n\n    &.--error {\n      @apply maz-text-danger-600;\n    }\n\n    &.--success {\n      @apply maz-text-success-600;\n    }\n\n    &.--warning {\n      @apply maz-text-warning-600;\n    }\n  }\n\n  &.--error,\n  &.--warning,\n  &.--success {\n    > span {\n      @apply maz-transition-all maz-duration-300 maz-ease-in-out;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","instanceId","useInstanceUniqId","isChecked","computed","checkboxSize","checkIconSize","checkIconColor","checkboxSelectedColor","checkboxBoxShadow","keyboardHandler","event","emitValue","getNewValue","value","v","newValue","inputRef","ref","onBlur","_a","onFocus"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,UAAMA,IAAQC,GAgBRC,IAAQC,GAuBRC,IAAaC,EAAkB;AAAA,MACnC,eAAe;AAAA,MACf,YAAYL,EAAM;AAAA,IAAA,CACnB,GAEKM,IAAYC;AAAA,MAAS,MACzB,OAAOP,EAAM,SAAU,aAAa,MAAM,QAAQA,EAAM,UAAU,IAC9DA,EAAM,WAAW,SAASA,EAAM,KAAc,IAC9C,OAAOA,EAAM,cAAe,YAC1BA,EAAM,aACN;AAAA,IACR,GAEMQ,IAAeD,EAAS,MAAM;AAClC,cAAQP,EAAM,MAAM;AAAA,QAClB,KAAK;AACI,iBAAA;AAAA,QAET,KAAK;AACI,iBAAA;AAAA,QAET,KAAK;AACI,iBAAA;AAAA,QAET,KAAK;AACI,iBAAA;AAAA,QAET,KAAK;AACI,iBAAA;AAAA,QAGT;AACS,iBAAA;AAAA,MACT;AAAA,IACF,CACD,GAEKS,IAAgBF,EAAS,MAAM;AACnC,cAAQP,EAAM,MAAM;AAAA,QAClB,KAAK;AACI,iBAAA;AAAA,QAET,KAAK;AACI,iBAAA;AAAA,QAET,KAAK;AACI,iBAAA;AAAA,QAET,KAAK;AACI,iBAAA;AAAA,QAET,KAAK;AACI,iBAAA;AAAA,QAET;AACS,iBAAA;AAAA,MACT;AAAA,IACF,CACD,GAEKU,IAAiBH,EAAS,MAC1BP,EAAM,UAAU,UACX,wBAGF,mBAAmBA,EAAM,KAAK,YACtC,GACKW,IAAwBJ,EAAS,MACjCP,EAAM,UAAU,UACX,8BAGF,mBAAmBA,EAAM,KAAK,GACtC,GACKY,IAAoBL,EAAS,MAC7BP,EAAM,QACD,4BAEAA,EAAM,UACN,6BAEAA,EAAM,UACN,6BAGF,CAAC,SAAS,eAAe,OAAO,EAAE,SAASA,EAAM,KAAK,IACzD,2BACA,mBAAmBA,EAAM,KAAK,SACnC;AAED,aAASa,EAAgBC,GAAsB;AAC7C,MAAI,CAAC,OAAO,EAAE,SAASA,EAAM,IAAI,MAC/BA,EAAM,eAAe,GACrBC,EAAUf,EAAM,SAAS,CAACA,EAAM,UAAU;AAAA,IAC5C;AAGF,aAASgB,EAAYC,GAAkC;AACrD,aACE,OAAOA,KAAU,cACb,OAAOjB,EAAM,cAAe,aAC3BA,EAAM,eAAe,UACrBA,EAAM,eAAe,QAEnB,CAACA,EAAM,aAEP,MAAM,QAAQA,EAAM,UAAU,KAAK,OAAOiB,KAAU,YACpDjB,EAAM,WAAW,SAASiB,CAAK,IAClCjB,EAAM,WAAW,OAAO,CAAKkB,MAAAA,MAAMD,CAAK,IACxC,CAAC,GAAGjB,EAAM,YAAYiB,CAAK,IAGxB,CAACA,CAAK;AAAA,IACf;AAGF,aAASF,EAAUE,GAAkC;AAC7C,YAAAE,IAAWH,EAAYC,CAAK;AAElC,MAAAf,EAAM,sBAAsBiB,CAAa,GACzCjB,EAAM,UAAUiB,CAAa;AAAA,IAAA;AAG/B,UAAMC,IAAWC,EAAsB;AAEvC,aAASC,EAAOR,GAAmB;;AACjC,OAAAS,IAAAH,EAAS,UAAT,QAAAG,EAAgB,cAAc,IAAI,MAAM,MAAM,IAC9CrB,EAAM,QAAQY,CAAK;AAAA,IAAA;AAErB,aAASU,EAAQV,GAAmB;;AAClC,OAAAS,IAAAH,EAAS,UAAT,QAAAG,EAAgB,cAAc,IAAI,MAAM,OAAO,IAC/CrB,EAAM,SAASY,CAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazChecklist.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazChecklist.5ArDAEhG.css');const e=require("vue"),q=require("./MazCardSpotlight.cjs"),g=require("./MazCheckbox.cjs"),u=require("../helpers/normalizeString.cjs"),N=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),S={class:"m-checklist m-reset-css"},B={key:0,for:"query",class:"search-label"},C={key:0,class:"title"},z={key:0,class:"no-results"},E={class:"no-results-content"},_={class:"no-results-text"},M=["for"],I={class:"item-label"},O=e.defineComponent({__name:"MazChecklist",props:{modelValue:{default:void 0},query:{default:void 0},items:{default:void 0},title:{default:void 0},elevation:{type:Boolean,default:!1},search:{default:()=>({enabled:!1})},searchOptions:{},searchFunction:{},color:{default:"primary"}},emits:["update:query","update:model-value"],setup(h,{emit:f}){const t=h,d=f,v=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazInput.cjs"))),y=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/magnifying-glass.CSf_M2wG.cjs"))),k=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/no-symbol.D1DeANDx.cjs"))),n=e.ref(t.query);e.watch(()=>t.query,o=>{n.value=o});const i=e.computed(()=>{var l;if(!n.value||!t.search.enabled)return t.items;const o=u.normalizeString(n.value,t.searchOptions);return t.searchFunction?t.searchFunction(o,t.items??[]):(l=t.items)==null?void 0:l.filter(({label:s,value:a})=>u.normalizeString(s,t.searchOptions).includes(o)||u.normalizeString(a,t.searchOptions).includes(o))});function V(o){n.value=o,d("update:query",o)}return(o,l)=>{var s,a,m,p;return e.openBlock(),e.createElementBlock("div",S,[(s=o.search)!=null&&s.enabled?(e.openBlock(),e.createElementBlock("label",B,[o.$slots.title||o.title?(e.openBlock(),e.createElementBlock("span",C,[e.renderSlot(o.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(o.title),1)],!0)])):e.createCommentVNode("",!0),e.createVNode(e.unref(v),e.mergeProps({id:"query","model-value":n.value},o.search,{color:o.color,"left-icon":o.search.leftIcon??e.unref(y),debounce:o.search.debounce??300,label:(a=o.search)==null?void 0:a.label,name:((m=o.search)==null?void 0:m.name)??"search",placeholder:(p=o.search)==null?void 0:p.placeholder,"onUpdate:modelValue":l[0]||(l[0]=c=>V(c))}),null,16,["model-value","color","left-icon","debounce","label","name","placeholder"])])):e.createCommentVNode("",!0),e.createVNode(q.default,{color:o.color,"no-elevation":!o.elevation,padding:!1,"content-class":"card-content"},{default:e.withCtx(()=>{var c;return[((c=i.value)==null?void 0:c.length)===0?(e.openBlock(),e.createElementBlock("div",z,[e.renderSlot(o.$slots,"no-results",{},()=>[e.createElementVNode("div",E,[e.createVNode(e.unref(k),{class:"no-results-icon"}),e.createElementVNode("span",_,[e.renderSlot(o.$slots,"no-results-text",{},()=>[l[2]||(l[2]=e.createTextVNode(" No results found "))],!0)])])],!0)])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,r=>(e.openBlock(),e.createElementBlock("label",{key:r.value,for:r.value,class:"m-checklist-item m-reset-css"},[e.createVNode(g.default,{id:r.value,"model-value":t.modelValue,value:r.value,color:o.color,"onUpdate:modelValue":l[1]||(l[1]=b=>d("update:model-value",b))},null,8,["id","model-value","value","color"]),e.renderSlot(o.$slots,"item",{selectedValues:o.modelValue,item:r},()=>[e.createElementVNode("span",I,e.toDisplayString(r.label),1)],!0)],8,M))),128))]}),_:3},8,["color","no-elevation"])])}}}),P=N._export_sfc(O,[["__scopeId","data-v-7d05b15d"]]);exports.default=P;
+//# sourceMappingURL=MazChecklist.cjs.map

package/dist/components/MazChecklist.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazChecklist.cjs","sources":["../../src/components/MazChecklist.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string, O extends ItemOption\">\nimport type { MazInputProps } from '@components/MazInput.vue'\nimport type { Color } from '@components/types'\nimport MazCardSpotlight from '@components/MazCardSpotlight.vue'\nimport MazCheckbox from '@components/MazCheckbox.vue'\nimport { normalizeString, type NormalizeStringOptions } from '@helpers/normalizeString'\nimport { computed, defineAsyncComponent, ref, watch } from 'vue'\n\nexport type ItemOption = {\n  label: string\n  value: string\n} & Record<string, any>\n\nexport interface MazChecklistProps<T, O> {\n  /**\n   * The model value of the checklist (selected items)\n   */\n  modelValue?: T[]\n  /**\n   * The query to filter the items (model)\n   */\n  query?: string\n  /**\n   * The list of items to display\n   */\n  items?: O[]\n  /**\n   * The title of the checklist\n   */\n  title?: string\n  /**\n   * Add elevation to the card\n   * @default false\n   */\n  elevation?: boolean\n  /**\n   * The search input options\n   * @default { enabled: false, debounce: 300, autoFocus: false }\n   */\n  search?: {\n    enabled?: boolean\n  } & MazInputProps<string>\n  /**\n   * The options to normalize the search query (used by the default search function)\n   */\n  searchOptions?: NormalizeStringOptions\n  /**\n   * Replace the default search function to provide a custom search function\n   * @default undefined\n   */\n  searchFunction?: (query: string, items: O[]) => O[] | undefined\n  /**\n   * The color of the checklist (card, checkbox and search input)\n   * @default primary\n   */\n  color?: Color\n}\n\nconst props = withDefaults(\n  defineProps<MazChecklistProps<T, O>>(),\n  {\n    modelValue: undefined,\n    query: undefined,\n    elevation: false,\n    items: undefined,\n    title: undefined,\n    search: () => ({\n      enabled: false,\n    }),\n    color: 'primary',\n  },\n)\n\nconst emits = defineEmits<{\n  /**\n   * Emitted when the query change\n   * @property value The new query\n   */\n  'update:query': [value?: string]\n  /**\n   * Emitted when the model value change\n   * @property value The new value\n   */\n  'update:model-value': [value?: T[]]\n}>()\n\nconst MazInput = defineAsyncComponent(() => import('@components/MazInput.vue'))\nconst SearchIcon = defineAsyncComponent(() => import('@icons/magnifying-glass.svg'))\nconst NoResultsIcon = defineAsyncComponent(() => import('@icons/no-symbol.svg'))\n\nconst internalQuery = ref<string | undefined>(props.query)\n\nwatch(\n  () => props.query,\n  (value) => {\n    internalQuery.value = value\n  },\n)\n\nconst filteredItems = computed(() => {\n  if (!internalQuery.value || !props.search.enabled) {\n    return props.items\n  }\n\n  const normalizedQuery = normalizeString(internalQuery.value, props.searchOptions)\n  return props.searchFunction\n    ? props.searchFunction(normalizedQuery, props.items ?? [])\n    : props.items?.filter(({ label, value }) =>\n      normalizeString(label, props.searchOptions).includes(normalizedQuery) || normalizeString(value, props.searchOptions).includes(normalizedQuery),\n    )\n})\n\nfunction updateQuery(value?: string) {\n  internalQuery.value = value\n  emits('update:query', value)\n}\n</script>\n\n<template>\n  <div class=\"m-checklist m-reset-css\">\n    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n    <label v-if=\"search?.enabled\" for=\"query\" class=\"search-label\">\n      <span v-if=\"$slots.title || title\" class=\"title\">\n        <!-- @slot use this slot to customize the title -->\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </span>\n      <MazInput\n        id=\"query\"\n        :model-value=\"internalQuery\"\n        v-bind=\"search\"\n        :color\n        :left-icon=\"search.leftIcon ?? SearchIcon\"\n        :debounce=\"search.debounce ?? 300\"\n        :label=\"search?.label\"\n        :name=\"search?.name ?? 'search'\"\n        :placeholder=\"search?.placeholder\"\n        @update:model-value=\"(event) => updateQuery(event as string)\"\n      />\n    </label>\n\n    <MazCardSpotlight\n      :color\n      :no-elevation=\"!elevation\"\n      :padding=\"false\"\n      content-class=\"card-content\"\n    >\n      <div v-if=\"filteredItems?.length === 0\" class=\"no-results\">\n        <!-- @slot use this slot to customize the no results area -->\n        <slot name=\"no-results\">\n          <div class=\"no-results-content\">\n            <NoResultsIcon class=\"no-results-icon\" />\n\n            <span class=\"no-results-text\">\n              <!-- @slot use this slot to customize the no results message -->\n              <slot name=\"no-results-text\"> No results found </slot>\n            </span>\n          </div>\n        </slot>\n      </div>\n      <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n      <label\n        v-for=\"item of filteredItems\"\n        :key=\"item.value\"\n        :for=\"item.value\"\n        class=\"m-checklist-item m-reset-css\"\n      >\n        <MazCheckbox\n          :id=\"item.value\"\n          :model-value=\"props.modelValue\"\n          :value=\"item.value\"\n          :color\n          @update:model-value=\"(event) => emits('update:model-value', event)\"\n        />\n        <!-- @slot use this slot to customize the item\n              @binding { selectedValues: T[], item: O }\n         -->\n        <slot\n          :selected-values=\"modelValue\"\n          :item=\"item\"\n          name=\"item\"\n        >\n          <span class=\"item-label\">\n            {{ item.label }}\n          </span>\n        </slot>\n      </label>\n    </MazCardSpotlight>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-checklist {\n  @apply maz-flex maz-flex-col maz-gap-4;\n\n  .search-label {\n    @apply maz-flex maz-items-center maz-justify-between maz-gap-4;\n  }\n\n  .title {\n    @apply maz-flex-none maz-truncate;\n  }\n\n  :deep(.card-content) {\n    @apply maz-flex maz-flex-col maz-gap-2 maz-overflow-y-auto maz-bg-color maz-px-3 maz-py-2;\n  }\n\n  .no-results {\n    @apply maz-flex maz-h-full maz-flex-center;\n  }\n\n  .no-results-content {\n    @apply maz-flex maz-h-full maz-flex-col maz-gap-3 maz-flex-center;\n  }\n\n  .no-results-icon {\n    @apply maz-text-3xl maz-text-muted;\n  }\n\n  .no-results-text {\n    @apply maz-text-muted;\n  }\n\n  .m-checklist-item {\n    @apply maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-4 maz-rounded maz-px-3 maz-py-2 maz-text-left hover:maz-bg-color-light;\n  }\n\n  .item-label {\n    @apply maz-cap-f;\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazInput","defineAsyncComponent","SearchIcon","NoResultsIcon","internalQuery","ref","watch","value","filteredItems","computed","normalizedQuery","normalizeString","_a","label","updateQuery"],"mappings":"u2BA0DA,MAAMA,EAAQC,EAeRC,EAAQC,EAaRC,EAAWC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,gBAA0B,CAAA,CAAC,EACxEC,EAAaD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,yCAA6B,CAAA,CAAC,EAC7EE,EAAgBF,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kCAAsB,CAAA,CAAC,EAEzEG,EAAgBC,EAAAA,IAAwBT,EAAM,KAAK,EAEzDU,EAAA,MACE,IAAMV,EAAM,MACXW,GAAU,CACTH,EAAc,MAAQG,CAAA,CAE1B,EAEM,MAAAC,EAAgBC,EAAAA,SAAS,IAAM,OACnC,GAAI,CAACL,EAAc,OAAS,CAACR,EAAM,OAAO,QACxC,OAAOA,EAAM,MAGf,MAAMc,EAAkBC,EAAAA,gBAAgBP,EAAc,MAAOR,EAAM,aAAa,EACzE,OAAAA,EAAM,eACTA,EAAM,eAAec,EAAiBd,EAAM,OAAS,CAAE,CAAA,GACvDgB,EAAAhB,EAAM,QAAN,YAAAgB,EAAa,OAAO,CAAC,CAAE,MAAAC,EAAO,MAAAN,CAC9B,IAAAI,EAAA,gBAAgBE,EAAOjB,EAAM,aAAa,EAAE,SAASc,CAAe,GAAKC,EAAAA,gBAAgBJ,EAAOX,EAAM,aAAa,EAAE,SAASc,CAAe,EAC/I,CACH,EAED,SAASI,EAAYP,EAAgB,CACnCH,EAAc,MAAQG,EACtBT,EAAM,eAAgBS,CAAK,CAAA"}

package/dist/components/MazChecklist.mjs

@@ -0,0 +1,125 @@
+import { defineComponent as F, defineAsyncComponent as m, ref as O, watch as B, computed as Q, openBlock as s, createElementBlock as a, renderSlot as i, createTextVNode as C, toDisplayString as g, createCommentVNode as p, createVNode as c, unref as f, mergeProps as _, withCtx as w, createElementVNode as h, Fragment as E, renderList as U } from "vue";
+import A from "./MazCardSpotlight.mjs";
+import D from "./MazCheckbox.mjs";
+import { normalizeString as v } from "../helpers/normalizeString.mjs";
+import { _ as L } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazChecklist.5ArDAEhG.css';const P = { class: "m-checklist m-reset-css" }, R = {
+  key: 0,
+  for: "query",
+  class: "search-label"
+}, T = {
+  key: 0,
+  class: "title"
+}, j = {
+  key: 0,
+  class: "no-results"
+}, G = { class: "no-results-content" }, H = { class: "no-results-text" }, J = ["for"], K = { class: "item-label" }, W = /* @__PURE__ */ F({
+  __name: "MazChecklist",
+  props: {
+    modelValue: { default: void 0 },
+    query: { default: void 0 },
+    items: { default: void 0 },
+    title: { default: void 0 },
+    elevation: { type: Boolean, default: !1 },
+    search: { default: () => ({
+      enabled: !1
+    }) },
+    searchOptions: {},
+    searchFunction: {},
+    color: { default: "primary" }
+  },
+  emits: ["update:query", "update:model-value"],
+  setup(q, { emit: z }) {
+    const o = q, y = z, I = m(() => import("./MazInput.mjs")), N = m(() => import("../chunks/magnifying-glass.6EkSEo-G.mjs")), M = m(() => import("../chunks/no-symbol.DqVEpOgn.mjs")), r = O(o.query);
+    B(
+      () => o.query,
+      (e) => {
+        r.value = e;
+      }
+    );
+    const b = Q(() => {
+      var l;
+      if (!r.value || !o.search.enabled)
+        return o.items;
+      const e = v(r.value, o.searchOptions);
+      return o.searchFunction ? o.searchFunction(e, o.items ?? []) : (l = o.items) == null ? void 0 : l.filter(
+        ({ label: n, value: u }) => v(n, o.searchOptions).includes(e) || v(u, o.searchOptions).includes(e)
+      );
+    });
+    function S(e) {
+      r.value = e, y("update:query", e);
+    }
+    return (e, l) => {
+      var n, u, k, V;
+      return s(), a("div", P, [
+        (n = e.search) != null && n.enabled ? (s(), a("label", R, [
+          e.$slots.title || e.title ? (s(), a("span", T, [
+            i(e.$slots, "title", {}, () => [
+              C(g(e.title), 1)
+            ], !0)
+          ])) : p("", !0),
+          c(f(I), _({
+            id: "query",
+            "model-value": r.value
+          }, e.search, {
+            color: e.color,
+            "left-icon": e.search.leftIcon ?? f(N),
+            debounce: e.search.debounce ?? 300,
+            label: (u = e.search) == null ? void 0 : u.label,
+            name: ((k = e.search) == null ? void 0 : k.name) ?? "search",
+            placeholder: (V = e.search) == null ? void 0 : V.placeholder,
+            "onUpdate:modelValue": l[0] || (l[0] = (d) => S(d))
+          }), null, 16, ["model-value", "color", "left-icon", "debounce", "label", "name", "placeholder"])
+        ])) : p("", !0),
+        c(A, {
+          color: e.color,
+          "no-elevation": !e.elevation,
+          padding: !1,
+          "content-class": "card-content"
+        }, {
+          default: w(() => {
+            var d;
+            return [
+              ((d = b.value) == null ? void 0 : d.length) === 0 ? (s(), a("div", j, [
+                i(e.$slots, "no-results", {}, () => [
+                  h("div", G, [
+                    c(f(M), { class: "no-results-icon" }),
+                    h("span", H, [
+                      i(e.$slots, "no-results-text", {}, () => [
+                        l[2] || (l[2] = C(" No results found "))
+                      ], !0)
+                    ])
+                  ])
+                ], !0)
+              ])) : p("", !0),
+              (s(!0), a(E, null, U(b.value, (t) => (s(), a("label", {
+                key: t.value,
+                for: t.value,
+                class: "m-checklist-item m-reset-css"
+              }, [
+                c(D, {
+                  id: t.value,
+                  "model-value": o.modelValue,
+                  value: t.value,
+                  color: e.color,
+                  "onUpdate:modelValue": l[1] || (l[1] = ($) => y("update:model-value", $))
+                }, null, 8, ["id", "model-value", "value", "color"]),
+                i(e.$slots, "item", {
+                  selectedValues: e.modelValue,
+                  item: t
+                }, () => [
+                  h("span", K, g(t.label), 1)
+                ], !0)
+              ], 8, J))), 128))
+            ];
+          }),
+          _: 3
+        }, 8, ["color", "no-elevation"])
+      ]);
+    };
+  }
+}), oe = /* @__PURE__ */ L(W, [["__scopeId", "data-v-7d05b15d"]]);
+export {
+  oe as default
+};
+//# sourceMappingURL=MazChecklist.mjs.map

package/dist/components/MazChecklist.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazChecklist.mjs","sources":["../../src/components/MazChecklist.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string, O extends ItemOption\">\nimport type { MazInputProps } from '@components/MazInput.vue'\nimport type { Color } from '@components/types'\nimport MazCardSpotlight from '@components/MazCardSpotlight.vue'\nimport MazCheckbox from '@components/MazCheckbox.vue'\nimport { normalizeString, type NormalizeStringOptions } from '@helpers/normalizeString'\nimport { computed, defineAsyncComponent, ref, watch } from 'vue'\n\nexport type ItemOption = {\n  label: string\n  value: string\n} & Record<string, any>\n\nexport interface MazChecklistProps<T, O> {\n  /**\n   * The model value of the checklist (selected items)\n   */\n  modelValue?: T[]\n  /**\n   * The query to filter the items (model)\n   */\n  query?: string\n  /**\n   * The list of items to display\n   */\n  items?: O[]\n  /**\n   * The title of the checklist\n   */\n  title?: string\n  /**\n   * Add elevation to the card\n   * @default false\n   */\n  elevation?: boolean\n  /**\n   * The search input options\n   * @default { enabled: false, debounce: 300, autoFocus: false }\n   */\n  search?: {\n    enabled?: boolean\n  } & MazInputProps<string>\n  /**\n   * The options to normalize the search query (used by the default search function)\n   */\n  searchOptions?: NormalizeStringOptions\n  /**\n   * Replace the default search function to provide a custom search function\n   * @default undefined\n   */\n  searchFunction?: (query: string, items: O[]) => O[] | undefined\n  /**\n   * The color of the checklist (card, checkbox and search input)\n   * @default primary\n   */\n  color?: Color\n}\n\nconst props = withDefaults(\n  defineProps<MazChecklistProps<T, O>>(),\n  {\n    modelValue: undefined,\n    query: undefined,\n    elevation: false,\n    items: undefined,\n    title: undefined,\n    search: () => ({\n      enabled: false,\n    }),\n    color: 'primary',\n  },\n)\n\nconst emits = defineEmits<{\n  /**\n   * Emitted when the query change\n   * @property value The new query\n   */\n  'update:query': [value?: string]\n  /**\n   * Emitted when the model value change\n   * @property value The new value\n   */\n  'update:model-value': [value?: T[]]\n}>()\n\nconst MazInput = defineAsyncComponent(() => import('@components/MazInput.vue'))\nconst SearchIcon = defineAsyncComponent(() => import('@icons/magnifying-glass.svg'))\nconst NoResultsIcon = defineAsyncComponent(() => import('@icons/no-symbol.svg'))\n\nconst internalQuery = ref<string | undefined>(props.query)\n\nwatch(\n  () => props.query,\n  (value) => {\n    internalQuery.value = value\n  },\n)\n\nconst filteredItems = computed(() => {\n  if (!internalQuery.value || !props.search.enabled) {\n    return props.items\n  }\n\n  const normalizedQuery = normalizeString(internalQuery.value, props.searchOptions)\n  return props.searchFunction\n    ? props.searchFunction(normalizedQuery, props.items ?? [])\n    : props.items?.filter(({ label, value }) =>\n      normalizeString(label, props.searchOptions).includes(normalizedQuery) || normalizeString(value, props.searchOptions).includes(normalizedQuery),\n    )\n})\n\nfunction updateQuery(value?: string) {\n  internalQuery.value = value\n  emits('update:query', value)\n}\n</script>\n\n<template>\n  <div class=\"m-checklist m-reset-css\">\n    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n    <label v-if=\"search?.enabled\" for=\"query\" class=\"search-label\">\n      <span v-if=\"$slots.title || title\" class=\"title\">\n        <!-- @slot use this slot to customize the title -->\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </span>\n      <MazInput\n        id=\"query\"\n        :model-value=\"internalQuery\"\n        v-bind=\"search\"\n        :color\n        :left-icon=\"search.leftIcon ?? SearchIcon\"\n        :debounce=\"search.debounce ?? 300\"\n        :label=\"search?.label\"\n        :name=\"search?.name ?? 'search'\"\n        :placeholder=\"search?.placeholder\"\n        @update:model-value=\"(event) => updateQuery(event as string)\"\n      />\n    </label>\n\n    <MazCardSpotlight\n      :color\n      :no-elevation=\"!elevation\"\n      :padding=\"false\"\n      content-class=\"card-content\"\n    >\n      <div v-if=\"filteredItems?.length === 0\" class=\"no-results\">\n        <!-- @slot use this slot to customize the no results area -->\n        <slot name=\"no-results\">\n          <div class=\"no-results-content\">\n            <NoResultsIcon class=\"no-results-icon\" />\n\n            <span class=\"no-results-text\">\n              <!-- @slot use this slot to customize the no results message -->\n              <slot name=\"no-results-text\"> No results found </slot>\n            </span>\n          </div>\n        </slot>\n      </div>\n      <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n      <label\n        v-for=\"item of filteredItems\"\n        :key=\"item.value\"\n        :for=\"item.value\"\n        class=\"m-checklist-item m-reset-css\"\n      >\n        <MazCheckbox\n          :id=\"item.value\"\n          :model-value=\"props.modelValue\"\n          :value=\"item.value\"\n          :color\n          @update:model-value=\"(event) => emits('update:model-value', event)\"\n        />\n        <!-- @slot use this slot to customize the item\n              @binding { selectedValues: T[], item: O }\n         -->\n        <slot\n          :selected-values=\"modelValue\"\n          :item=\"item\"\n          name=\"item\"\n        >\n          <span class=\"item-label\">\n            {{ item.label }}\n          </span>\n        </slot>\n      </label>\n    </MazCardSpotlight>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-checklist {\n  @apply maz-flex maz-flex-col maz-gap-4;\n\n  .search-label {\n    @apply maz-flex maz-items-center maz-justify-between maz-gap-4;\n  }\n\n  .title {\n    @apply maz-flex-none maz-truncate;\n  }\n\n  :deep(.card-content) {\n    @apply maz-flex maz-flex-col maz-gap-2 maz-overflow-y-auto maz-bg-color maz-px-3 maz-py-2;\n  }\n\n  .no-results {\n    @apply maz-flex maz-h-full maz-flex-center;\n  }\n\n  .no-results-content {\n    @apply maz-flex maz-h-full maz-flex-col maz-gap-3 maz-flex-center;\n  }\n\n  .no-results-icon {\n    @apply maz-text-3xl maz-text-muted;\n  }\n\n  .no-results-text {\n    @apply maz-text-muted;\n  }\n\n  .m-checklist-item {\n    @apply maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-4 maz-rounded maz-px-3 maz-py-2 maz-text-left hover:maz-bg-color-light;\n  }\n\n  .item-label {\n    @apply maz-cap-f;\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazInput","defineAsyncComponent","SearchIcon","NoResultsIcon","internalQuery","ref","watch","value","filteredItems","computed","normalizedQuery","normalizeString","_a","label","updateQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,UAAMA,IAAQC,GAeRC,IAAQC,GAaRC,IAAWC,EAAqB,MAAM,OAAO,gBAA0B,CAAC,GACxEC,IAAaD,EAAqB,MAAM,OAAO,yCAA6B,CAAC,GAC7EE,IAAgBF,EAAqB,MAAM,OAAO,kCAAsB,CAAC,GAEzEG,IAAgBC,EAAwBT,EAAM,KAAK;AAEzD,IAAAU;AAAA,MACE,MAAMV,EAAM;AAAA,MACZ,CAACW,MAAU;AACT,QAAAH,EAAc,QAAQG;AAAA,MAAA;AAAA,IAE1B;AAEM,UAAAC,IAAgBC,EAAS,MAAM;;AACnC,UAAI,CAACL,EAAc,SAAS,CAACR,EAAM,OAAO;AACxC,eAAOA,EAAM;AAGf,YAAMc,IAAkBC,EAAgBP,EAAc,OAAOR,EAAM,aAAa;AACzE,aAAAA,EAAM,iBACTA,EAAM,eAAec,GAAiBd,EAAM,SAAS,CAAE,CAAA,KACvDgB,IAAAhB,EAAM,UAAN,gBAAAgB,EAAa;AAAA,QAAO,CAAC,EAAE,OAAAC,GAAO,OAAAN,EAC9B,MAAAI,EAAgBE,GAAOjB,EAAM,aAAa,EAAE,SAASc,CAAe,KAAKC,EAAgBJ,GAAOX,EAAM,aAAa,EAAE,SAASc,CAAe;AAAA;AAAA,IAC/I,CACH;AAED,aAASI,EAAYP,GAAgB;AACnC,MAAAH,EAAc,QAAQG,GACtBT,EAAM,gBAAgBS,CAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazCircularProgressBar.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazCircularProgressBar.DywLXEfR.css');const e=require("vue"),y=require("../composables/useInstanceUniqId.cjs"),B=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),_={class:"outer"},w={class:"inner"},z={key:0},C=["id"],P=["stop-color"],S=["stop-color"],x=["stroke-width","stroke-dashoffset","stroke","stroke-linecap"],E=e.defineComponent({__name:"MazCircularProgressBar",props:{percentage:{default:0},size:{default:"10em"},duration:{default:1e3},delay:{},color:{default:void 0},autoColor:{type:Boolean},prefix:{default:void 0},suffix:{default:void 0},strokeLinecap:{default:"round"},strokeWidth:{default:6},stroke:{default:void 0},successPercentage:{default:100},warningPercentage:{default:75},dangerPercentage:{default:50},once:{type:Boolean,default:!0}},setup(p){const o=p,m=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazAnimatedCounter.cjs"))),s=e.useSlots(),v=e.computed(()=>!!o.prefix||!!s.prefix),g=e.computed(()=>!!o.suffix||!!s.suffix),u=y.useInstanceUniqId({componentName:"MazCircularProgressBar"}),c=e.computed(()=>o.percentage>100?100:o.percentage<=0?.5:o.percentage),a=e.computed(()=>o.autoColor?k(c.value):o.color);function k(t){return t<o.dangerPercentage||t>100?"danger":t<o.warningPercentage?"warning":t>=o.successPercentage?"success":"primary"}const h=e.computed(()=>`${o.duration}ms`),d=e.computed(()=>Math.round(290-290*(c.value/100))),l=e.ref(!1),n=e.ref(null),f=e.ref(!1);let r=null;return e.onMounted(()=>{r=new IntersectionObserver(([t])=>{var i;(!l.value||!o.once)&&(l.value=t.isIntersecting),o.once&&n.value&&(r==null||r.unobserve(n.value),(i=n.value)==null||i.addEventListener("animationend",()=>{f.value=!0}))}),n.value&&r.observe(n.value)}),e.onBeforeUnmount(()=>r==null?void 0:r.disconnect()),(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"m-circular-progress-bar m-reset-css",style:e.normalizeStyle([{"--animation-duration":h.value,"--dashoffset":d.value,"--delay":`${t.delay}ms`},{fontSize:t.size}])},[e.createElementVNode("div",_,[e.createElementVNode("div",w,[e.unref(s).default?(e.openBlock(),e.createElementBlock("span",z,[e.renderSlot(t.$slots,"default",{},void 0,!0)])):(e.openBlock(),e.createBlock(e.unref(m),{key:1,count:t.percentage,duration:t.duration,delay:t.delay,once:t.once},e.createSlots({_:2},[v.value?{name:"prefix",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"prefix",{},()=>[e.createTextVNode(e.toDisplayString(t.prefix),1)],!0)]),key:"0"}:void 0,g.value?{name:"suffix",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"suffix",{},()=>[e.createTextVNode(e.toDisplayString(t.suffix),1)],!0)]),key:"1"}:void 0]),1032,["count","duration","delay","once"]))])]),(e.openBlock(),e.createElementBlock("svg",{ref_key:"circleRef",ref:n,xmlns:"http://www.w3.org/2000/svg",height:"1em",width:"1em",class:e.normalizeClass({animate:l.value}),viewBox:"0 0 100 100"},[e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{id:`${e.unref(u)}-gradient`,x1:"0",x2:"0",y1:"1",y2:"0"},[e.createElementVNode("stop",{offset:"0%","stop-color":a.value?`var(--maz-color-${a.value}-400)`:"var(--maz-color-primary)"},null,8,P),e.createElementVNode("stop",{offset:"100%","stop-color":a.value?`var(--maz-color-${a.value}-700)`:"var(--maz-color-secondary)"},null,8,S)],8,C)]),e.createElementVNode("circle",{cx:"50",cy:"50",r:"46","stroke-width":t.strokeWidth,"stroke-dasharray":"290","stroke-dashoffset":f.value?d.value:290,stroke:t.stroke?t.stroke:`url(#${e.unref(u)}-gradient)`,fill:"none","stroke-linecap":t.strokeLinecap},null,8,x)],2))],4))}}),V=B._export_sfc(E,[["__scopeId","data-v-d08529b7"]]);exports.default=V;
+//# sourceMappingURL=MazCircularProgressBar.cjs.map

package/dist/components/MazCircularProgressBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazCircularProgressBar.cjs","sources":["../../src/components/MazCircularProgressBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, type SVGAttributes, useSlots } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The percentage value of the progress bar\n     */\n    percentage: number\n    /**\n     * The size of the progress bar\n     * @default '10em' (equal 80px for a font-size of 16px)\n     */\n    size?: string\n    /**\n     * Duration of the animation in milliseconds\n     * @default 1000\n     */\n    duration?: number\n    /**\n     * Delay before the animation starts in milliseconds\n     * @default 100\n     */\n    delay?: number\n    /**\n     * The color of the progress bar\n     */\n    color?: Color\n    /**\n     * Auto color based on the count (danger, warning, success)\n     * @default false\n     */\n    autoColor?: boolean\n    /**\n     * Suffix to display next to the number\n     */\n    prefix?: string\n    /**\n     * Suffix to display next to the number\n     */\n    suffix?: string\n    /**\n     * The stroke-linecap style\n     * @default 'round'\n     * @values 'butt', 'round', 'square', 'inherit'\n     */\n    strokeLinecap?: SVGAttributes['stroke-linecap']\n    /**\n     * The stroke width\n     * @default 6\n     */\n    strokeWidth?: SVGAttributes['width']\n    /**\n     * The stroke color\n     * Use this prop to override the gradient color\n     * You can use a color name or a color code\n     */\n    stroke?: SVGAttributes['stroke']\n    /**\n     * The percentage value of the success level\n     * @description The progress circle will be filled with the success color when the percentage is greater than or equal to this value\n     * @default 100\n     */\n    successPercentage?: number\n    /**\n     * The percentage value of the warning level\n     * @description The progress circle will be filled with the warning color when the percentage is greater than or equal to this value\n     * @default 50\n     */\n    warningPercentage?: number\n    /**\n     * The percentage value of the danger level\n     * @description The progress circle will be filled with the danger color when the percentage is greater than or equal to this value\n     * @default 25\n     */\n    dangerPercentage?: number\n    /**\n     * Play the animation only once\n     * @default true\n     */\n    once?: boolean\n  }>(),\n  {\n    percentage: 0,\n    size: '10em',\n    duration: 1000,\n    color: undefined,\n    prefix: undefined,\n    suffix: undefined,\n    strokeLinecap: 'round',\n    strokeWidth: 6,\n    stroke: undefined,\n    successPercentage: 100,\n    warningPercentage: 75,\n    dangerPercentage: 50,\n    once: true,\n  },\n)\n\nconst MazAnimatedCounter = defineAsyncComponent(() => import('@components/MazAnimatedCounter.vue'))\n\nconst slots = useSlots()\n\nconst hasPrefix = computed(() => !!props.prefix || !!slots.prefix)\nconst hasSuffix = computed(() => !!props.suffix || !!slots.suffix)\n\nconst id = useInstanceUniqId({\n  componentName: 'MazCircularProgressBar',\n})\nconst adjustedPercentage = computed<number>(() => {\n  if (props.percentage > 100)\n    return 100\n  if (props.percentage <= 0)\n    return 0.5\n  return props.percentage\n})\n\nconst currentColor = computed<Color | undefined>(() =>\n  props.autoColor ? getStatusColor(adjustedPercentage.value) : props.color,\n)\nfunction getStatusColor(percent: number): Color {\n  if (percent < props.dangerPercentage || percent > 100)\n    return 'danger'\n  if (percent < props.warningPercentage)\n    return 'warning'\n  if (percent >= props.successPercentage)\n    return 'success'\n\n  return 'primary'\n}\n\nconst animationDuration = computed<string>(() => `${props.duration}ms`)\nconst dashoffset = computed<number>(() => {\n  return Math.round(290 - 290 * (adjustedPercentage.value / 100))\n})\n\nconst isVisible = ref(false)\nconst circleRef = ref<HTMLElement | null>(null)\nconst hasBeenAnimated = ref(false)\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  observer = new IntersectionObserver(([entry]) => {\n    if (!isVisible.value || !props.once) {\n      isVisible.value = entry.isIntersecting\n    }\n\n    if (props.once && circleRef.value) {\n      observer?.unobserve(circleRef.value)\n\n      circleRef.value?.addEventListener('animationend', () => {\n        hasBeenAnimated.value = true\n      })\n    }\n  })\n\n  if (circleRef.value) {\n    observer.observe(circleRef.value)\n  }\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div\n    class=\"m-circular-progress-bar m-reset-css\"\n    :style=\"[\n      {\n        '--animation-duration': animationDuration,\n        '--dashoffset': dashoffset,\n        '--delay': `${delay}ms`,\n      },\n      {\n        fontSize: size,\n      },\n    ]\"\n  >\n    <div class=\"outer\">\n      <div class=\"inner\">\n        <span v-if=\"slots.default\">\n          <!-- @slot Default slot - Replace the percaentage value -->\n          <slot />\n        </span>\n        <MazAnimatedCounter\n          v-else\n          :count=\"percentage\"\n          :duration\n          :delay\n          :once\n        >\n          <template v-if=\"hasPrefix\" #prefix>\n            <!-- @slot Prefix slot - Add a prefix next to the number (e.g: \"$\") -->\n            <slot name=\"prefix\">\n              {{ prefix }}\n            </slot>\n          </template>\n          <template v-if=\"hasSuffix\" #suffix>\n            <!-- @slot Suffix slot - Add a suffix next to the number (e.g: \"%\") -->\n            <slot name=\"suffix\">\n              {{ suffix }}\n            </slot>\n          </template>\n        </MazAnimatedCounter>\n      </div>\n    </div>\n    <svg\n      ref=\"circleRef\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"1em\"\n      width=\"1em\"\n      :class=\"{\n        animate: isVisible,\n      }\"\n      viewBox=\"0 0 100 100\"\n    >\n      <defs>\n        <linearGradient :id=\"`${id}-gradient`\" x1=\"0\" x2=\"0\" y1=\"1\" y2=\"0\">\n          <stop\n            offset=\"0%\"\n            :stop-color=\"\n              currentColor ? `var(--maz-color-${currentColor}-400)` : `var(--maz-color-primary)`\n            \"\n          />\n          <stop\n            offset=\"100%\"\n            :stop-color=\"\n              currentColor ? `var(--maz-color-${currentColor}-700)` : `var(--maz-color-secondary)`\n            \"\n          />\n        </linearGradient>\n      </defs>\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"46\"\n        :stroke-width=\"strokeWidth\"\n        stroke-dasharray=\"290\"\n        :stroke-dashoffset=\"hasBeenAnimated ? dashoffset : 290\"\n        :stroke=\"stroke ? stroke : `url(#${id}-gradient)`\"\n        fill=\"none\"\n        :stroke-linecap=\"strokeLinecap\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-circular-progress-bar {\n  @apply maz-relative maz-inline-flex maz-h-[1em] maz-w-[1em] maz-flex-center;\n\n  .outer {\n    @apply maz-flex maz-h-full maz-w-full maz-rounded-full maz-flex-center;\n  }\n\n  .inner {\n    @apply maz-flex maz-h-[0.85em] maz-w-[0.85em] maz-rounded-full maz-flex-center;\n\n    :deep(> *) {\n      @apply maz-text-[0.25em];\n    }\n  }\n\n  svg {\n    @apply maz-absolute -maz-rotate-90;\n\n    circle {\n      will-change: stroke-dashoffset;\n      animation: animate linear forwards var(--animation-duration);\n      animation-delay: var(--delay);\n    }\n\n    /* &.animate circle {\n      animation: animate linear forwards var(--animation-duration);\n      animation-delay: var(--delay);\n      animation-play-state: running;\n    } */\n  }\n\n  @keyframes animate {\n    to {\n      stroke-dashoffset: var(--dashoffset);\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazAnimatedCounter","defineAsyncComponent","slots","useSlots","hasPrefix","computed","hasSuffix","id","useInstanceUniqId","adjustedPercentage","currentColor","getStatusColor","percent","animationDuration","dashoffset","isVisible","ref","circleRef","hasBeenAnimated","observer","onMounted","entry","_a","onBeforeUnmount"],"mappings":"40BAKA,MAAMA,EAAQC,EAgGRC,EAAqBC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,0BAAoC,CAAA,CAAC,EAE5FC,EAAQC,EAAAA,SAAS,EAEjBC,EAAYC,EAAS,SAAA,IAAM,CAAC,CAACP,EAAM,QAAU,CAAC,CAACI,EAAM,MAAM,EAC3DI,EAAYD,EAAS,SAAA,IAAM,CAAC,CAACP,EAAM,QAAU,CAAC,CAACI,EAAM,MAAM,EAE3DK,EAAKC,EAAAA,kBAAkB,CAC3B,cAAe,wBAAA,CAChB,EACKC,EAAqBJ,EAAAA,SAAiB,IACtCP,EAAM,WAAa,IACd,IACLA,EAAM,YAAc,EACf,GACFA,EAAM,UACd,EAEKY,EAAeL,EAAA,SAA4B,IAC/CP,EAAM,UAAYa,EAAeF,EAAmB,KAAK,EAAIX,EAAM,KACrE,EACA,SAASa,EAAeC,EAAwB,CAC1C,OAAAA,EAAUd,EAAM,kBAAoBc,EAAU,IACzC,SACLA,EAAUd,EAAM,kBACX,UACLc,GAAWd,EAAM,kBACZ,UAEF,SAAA,CAGT,MAAMe,EAAoBR,EAAAA,SAAiB,IAAM,GAAGP,EAAM,QAAQ,IAAI,EAChEgB,EAAaT,EAAAA,SAAiB,IAC3B,KAAK,MAAM,IAAM,KAAOI,EAAmB,MAAQ,IAAI,CAC/D,EAEKM,EAAYC,MAAI,EAAK,EACrBC,EAAYD,MAAwB,IAAI,EACxCE,EAAkBF,MAAI,EAAK,EAEjC,IAAIG,EAAwC,KAE5CC,OAAAA,EAAAA,UAAU,IAAM,CACdD,EAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,IAAM,QAC3C,CAACN,EAAU,OAAS,CAACjB,EAAM,QAC7BiB,EAAU,MAAQM,EAAM,gBAGtBvB,EAAM,MAAQmB,EAAU,QAChBE,GAAA,MAAAA,EAAA,UAAUF,EAAU,QAEpBK,EAAAL,EAAA,QAAA,MAAAK,EAAO,iBAAiB,eAAgB,IAAM,CACtDJ,EAAgB,MAAQ,EAAA,GAE5B,CACD,EAEGD,EAAU,OACHE,EAAA,QAAQF,EAAU,KAAK,CAClC,CACD,EAEeM,kBAAA,IAAMJ,GAAA,YAAAA,EAAU,YAAY"}

package/dist/components/MazCircularProgressBar.mjs

@@ -0,0 +1,133 @@
+import { defineComponent as S, defineAsyncComponent as M, useSlots as I, computed as n, ref as f, onMounted as b, onBeforeUnmount as A, openBlock as i, createElementBlock as p, normalizeStyle as E, createElementVNode as r, unref as l, renderSlot as m, createBlock as L, createSlots as N, withCtx as y, createTextVNode as w, toDisplayString as z, normalizeClass as V } from "vue";
+import { useInstanceUniqId as D } from "../composables/useInstanceUniqId.mjs";
+import { _ as R } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazCircularProgressBar.DywLXEfR.css';const U = { class: "outer" }, W = { class: "inner" }, j = { key: 0 }, q = ["id"], G = ["stop-color"], O = ["stop-color"], T = ["stroke-width", "stroke-dashoffset", "stroke", "stroke-linecap"], F = /* @__PURE__ */ S({
+  __name: "MazCircularProgressBar",
+  props: {
+    percentage: { default: 0 },
+    size: { default: "10em" },
+    duration: { default: 1e3 },
+    delay: {},
+    color: { default: void 0 },
+    autoColor: { type: Boolean },
+    prefix: { default: void 0 },
+    suffix: { default: void 0 },
+    strokeLinecap: { default: "round" },
+    strokeWidth: { default: 6 },
+    stroke: { default: void 0 },
+    successPercentage: { default: 100 },
+    warningPercentage: { default: 75 },
+    dangerPercentage: { default: 50 },
+    once: { type: Boolean, default: !0 }
+  },
+  setup(C) {
+    const o = C, _ = M(() => import("./MazAnimatedCounter.mjs")), u = I(), B = n(() => !!o.prefix || !!u.prefix), P = n(() => !!o.suffix || !!u.suffix), v = D({
+      componentName: "MazCircularProgressBar"
+    }), g = n(() => o.percentage > 100 ? 100 : o.percentage <= 0 ? 0.5 : o.percentage), s = n(
+      () => o.autoColor ? x(g.value) : o.color
+    );
+    function x(e) {
+      return e < o.dangerPercentage || e > 100 ? "danger" : e < o.warningPercentage ? "warning" : e >= o.successPercentage ? "success" : "primary";
+    }
+    const $ = n(() => `${o.duration}ms`), h = n(() => Math.round(290 - 290 * (g.value / 100))), c = f(!1), a = f(null), k = f(!1);
+    let t = null;
+    return b(() => {
+      t = new IntersectionObserver(([e]) => {
+        var d;
+        (!c.value || !o.once) && (c.value = e.isIntersecting), o.once && a.value && (t == null || t.unobserve(a.value), (d = a.value) == null || d.addEventListener("animationend", () => {
+          k.value = !0;
+        }));
+      }), a.value && t.observe(a.value);
+    }), A(() => t == null ? void 0 : t.disconnect()), (e, d) => (i(), p("div", {
+      class: "m-circular-progress-bar m-reset-css",
+      style: E([
+        {
+          "--animation-duration": $.value,
+          "--dashoffset": h.value,
+          "--delay": `${e.delay}ms`
+        },
+        {
+          fontSize: e.size
+        }
+      ])
+    }, [
+      r("div", U, [
+        r("div", W, [
+          l(u).default ? (i(), p("span", j, [
+            m(e.$slots, "default", {}, void 0, !0)
+          ])) : (i(), L(l(_), {
+            key: 1,
+            count: e.percentage,
+            duration: e.duration,
+            delay: e.delay,
+            once: e.once
+          }, N({ _: 2 }, [
+            B.value ? {
+              name: "prefix",
+              fn: y(() => [
+                m(e.$slots, "prefix", {}, () => [
+                  w(z(e.prefix), 1)
+                ], !0)
+              ]),
+              key: "0"
+            } : void 0,
+            P.value ? {
+              name: "suffix",
+              fn: y(() => [
+                m(e.$slots, "suffix", {}, () => [
+                  w(z(e.suffix), 1)
+                ], !0)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["count", "duration", "delay", "once"]))
+        ])
+      ]),
+      (i(), p("svg", {
+        ref_key: "circleRef",
+        ref: a,
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "1em",
+        width: "1em",
+        class: V({
+          animate: c.value
+        }),
+        viewBox: "0 0 100 100"
+      }, [
+        r("defs", null, [
+          r("linearGradient", {
+            id: `${l(v)}-gradient`,
+            x1: "0",
+            x2: "0",
+            y1: "1",
+            y2: "0"
+          }, [
+            r("stop", {
+              offset: "0%",
+              "stop-color": s.value ? `var(--maz-color-${s.value}-400)` : "var(--maz-color-primary)"
+            }, null, 8, G),
+            r("stop", {
+              offset: "100%",
+              "stop-color": s.value ? `var(--maz-color-${s.value}-700)` : "var(--maz-color-secondary)"
+            }, null, 8, O)
+          ], 8, q)
+        ]),
+        r("circle", {
+          cx: "50",
+          cy: "50",
+          r: "46",
+          "stroke-width": e.strokeWidth,
+          "stroke-dasharray": "290",
+          "stroke-dashoffset": k.value ? h.value : 290,
+          stroke: e.stroke ? e.stroke : `url(#${l(v)}-gradient)`,
+          fill: "none",
+          "stroke-linecap": e.strokeLinecap
+        }, null, 8, T)
+      ], 2))
+    ], 4));
+  }
+}), Q = /* @__PURE__ */ R(F, [["__scopeId", "data-v-d08529b7"]]);
+export {
+  Q as default
+};
+//# sourceMappingURL=MazCircularProgressBar.mjs.map

package/dist/components/MazCircularProgressBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazCircularProgressBar.mjs","sources":["../../src/components/MazCircularProgressBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, type SVGAttributes, useSlots } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The percentage value of the progress bar\n     */\n    percentage: number\n    /**\n     * The size of the progress bar\n     * @default '10em' (equal 80px for a font-size of 16px)\n     */\n    size?: string\n    /**\n     * Duration of the animation in milliseconds\n     * @default 1000\n     */\n    duration?: number\n    /**\n     * Delay before the animation starts in milliseconds\n     * @default 100\n     */\n    delay?: number\n    /**\n     * The color of the progress bar\n     */\n    color?: Color\n    /**\n     * Auto color based on the count (danger, warning, success)\n     * @default false\n     */\n    autoColor?: boolean\n    /**\n     * Suffix to display next to the number\n     */\n    prefix?: string\n    /**\n     * Suffix to display next to the number\n     */\n    suffix?: string\n    /**\n     * The stroke-linecap style\n     * @default 'round'\n     * @values 'butt', 'round', 'square', 'inherit'\n     */\n    strokeLinecap?: SVGAttributes['stroke-linecap']\n    /**\n     * The stroke width\n     * @default 6\n     */\n    strokeWidth?: SVGAttributes['width']\n    /**\n     * The stroke color\n     * Use this prop to override the gradient color\n     * You can use a color name or a color code\n     */\n    stroke?: SVGAttributes['stroke']\n    /**\n     * The percentage value of the success level\n     * @description The progress circle will be filled with the success color when the percentage is greater than or equal to this value\n     * @default 100\n     */\n    successPercentage?: number\n    /**\n     * The percentage value of the warning level\n     * @description The progress circle will be filled with the warning color when the percentage is greater than or equal to this value\n     * @default 50\n     */\n    warningPercentage?: number\n    /**\n     * The percentage value of the danger level\n     * @description The progress circle will be filled with the danger color when the percentage is greater than or equal to this value\n     * @default 25\n     */\n    dangerPercentage?: number\n    /**\n     * Play the animation only once\n     * @default true\n     */\n    once?: boolean\n  }>(),\n  {\n    percentage: 0,\n    size: '10em',\n    duration: 1000,\n    color: undefined,\n    prefix: undefined,\n    suffix: undefined,\n    strokeLinecap: 'round',\n    strokeWidth: 6,\n    stroke: undefined,\n    successPercentage: 100,\n    warningPercentage: 75,\n    dangerPercentage: 50,\n    once: true,\n  },\n)\n\nconst MazAnimatedCounter = defineAsyncComponent(() => import('@components/MazAnimatedCounter.vue'))\n\nconst slots = useSlots()\n\nconst hasPrefix = computed(() => !!props.prefix || !!slots.prefix)\nconst hasSuffix = computed(() => !!props.suffix || !!slots.suffix)\n\nconst id = useInstanceUniqId({\n  componentName: 'MazCircularProgressBar',\n})\nconst adjustedPercentage = computed<number>(() => {\n  if (props.percentage > 100)\n    return 100\n  if (props.percentage <= 0)\n    return 0.5\n  return props.percentage\n})\n\nconst currentColor = computed<Color | undefined>(() =>\n  props.autoColor ? getStatusColor(adjustedPercentage.value) : props.color,\n)\nfunction getStatusColor(percent: number): Color {\n  if (percent < props.dangerPercentage || percent > 100)\n    return 'danger'\n  if (percent < props.warningPercentage)\n    return 'warning'\n  if (percent >= props.successPercentage)\n    return 'success'\n\n  return 'primary'\n}\n\nconst animationDuration = computed<string>(() => `${props.duration}ms`)\nconst dashoffset = computed<number>(() => {\n  return Math.round(290 - 290 * (adjustedPercentage.value / 100))\n})\n\nconst isVisible = ref(false)\nconst circleRef = ref<HTMLElement | null>(null)\nconst hasBeenAnimated = ref(false)\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  observer = new IntersectionObserver(([entry]) => {\n    if (!isVisible.value || !props.once) {\n      isVisible.value = entry.isIntersecting\n    }\n\n    if (props.once && circleRef.value) {\n      observer?.unobserve(circleRef.value)\n\n      circleRef.value?.addEventListener('animationend', () => {\n        hasBeenAnimated.value = true\n      })\n    }\n  })\n\n  if (circleRef.value) {\n    observer.observe(circleRef.value)\n  }\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div\n    class=\"m-circular-progress-bar m-reset-css\"\n    :style=\"[\n      {\n        '--animation-duration': animationDuration,\n        '--dashoffset': dashoffset,\n        '--delay': `${delay}ms`,\n      },\n      {\n        fontSize: size,\n      },\n    ]\"\n  >\n    <div class=\"outer\">\n      <div class=\"inner\">\n        <span v-if=\"slots.default\">\n          <!-- @slot Default slot - Replace the percaentage value -->\n          <slot />\n        </span>\n        <MazAnimatedCounter\n          v-else\n          :count=\"percentage\"\n          :duration\n          :delay\n          :once\n        >\n          <template v-if=\"hasPrefix\" #prefix>\n            <!-- @slot Prefix slot - Add a prefix next to the number (e.g: \"$\") -->\n            <slot name=\"prefix\">\n              {{ prefix }}\n            </slot>\n          </template>\n          <template v-if=\"hasSuffix\" #suffix>\n            <!-- @slot Suffix slot - Add a suffix next to the number (e.g: \"%\") -->\n            <slot name=\"suffix\">\n              {{ suffix }}\n            </slot>\n          </template>\n        </MazAnimatedCounter>\n      </div>\n    </div>\n    <svg\n      ref=\"circleRef\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"1em\"\n      width=\"1em\"\n      :class=\"{\n        animate: isVisible,\n      }\"\n      viewBox=\"0 0 100 100\"\n    >\n      <defs>\n        <linearGradient :id=\"`${id}-gradient`\" x1=\"0\" x2=\"0\" y1=\"1\" y2=\"0\">\n          <stop\n            offset=\"0%\"\n            :stop-color=\"\n              currentColor ? `var(--maz-color-${currentColor}-400)` : `var(--maz-color-primary)`\n            \"\n          />\n          <stop\n            offset=\"100%\"\n            :stop-color=\"\n              currentColor ? `var(--maz-color-${currentColor}-700)` : `var(--maz-color-secondary)`\n            \"\n          />\n        </linearGradient>\n      </defs>\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"46\"\n        :stroke-width=\"strokeWidth\"\n        stroke-dasharray=\"290\"\n        :stroke-dashoffset=\"hasBeenAnimated ? dashoffset : 290\"\n        :stroke=\"stroke ? stroke : `url(#${id}-gradient)`\"\n        fill=\"none\"\n        :stroke-linecap=\"strokeLinecap\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-circular-progress-bar {\n  @apply maz-relative maz-inline-flex maz-h-[1em] maz-w-[1em] maz-flex-center;\n\n  .outer {\n    @apply maz-flex maz-h-full maz-w-full maz-rounded-full maz-flex-center;\n  }\n\n  .inner {\n    @apply maz-flex maz-h-[0.85em] maz-w-[0.85em] maz-rounded-full maz-flex-center;\n\n    :deep(> *) {\n      @apply maz-text-[0.25em];\n    }\n  }\n\n  svg {\n    @apply maz-absolute -maz-rotate-90;\n\n    circle {\n      will-change: stroke-dashoffset;\n      animation: animate linear forwards var(--animation-duration);\n      animation-delay: var(--delay);\n    }\n\n    /* &.animate circle {\n      animation: animate linear forwards var(--animation-duration);\n      animation-delay: var(--delay);\n      animation-play-state: running;\n    } */\n  }\n\n  @keyframes animate {\n    to {\n      stroke-dashoffset: var(--dashoffset);\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazAnimatedCounter","defineAsyncComponent","slots","useSlots","hasPrefix","computed","hasSuffix","id","useInstanceUniqId","adjustedPercentage","currentColor","getStatusColor","percent","animationDuration","dashoffset","isVisible","ref","circleRef","hasBeenAnimated","observer","onMounted","entry","_a","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAgGRC,IAAqBC,EAAqB,MAAM,OAAO,0BAAoC,CAAC,GAE5FC,IAAQC,EAAS,GAEjBC,IAAYC,EAAS,MAAM,CAAC,CAACP,EAAM,UAAU,CAAC,CAACI,EAAM,MAAM,GAC3DI,IAAYD,EAAS,MAAM,CAAC,CAACP,EAAM,UAAU,CAAC,CAACI,EAAM,MAAM,GAE3DK,IAAKC,EAAkB;AAAA,MAC3B,eAAe;AAAA,IAAA,CAChB,GACKC,IAAqBJ,EAAiB,MACtCP,EAAM,aAAa,MACd,MACLA,EAAM,cAAc,IACf,MACFA,EAAM,UACd,GAEKY,IAAeL;AAAA,MAA4B,MAC/CP,EAAM,YAAYa,EAAeF,EAAmB,KAAK,IAAIX,EAAM;AAAA,IACrE;AACA,aAASa,EAAeC,GAAwB;AAC1C,aAAAA,IAAUd,EAAM,oBAAoBc,IAAU,MACzC,WACLA,IAAUd,EAAM,oBACX,YACLc,KAAWd,EAAM,oBACZ,YAEF;AAAA,IAAA;AAGT,UAAMe,IAAoBR,EAAiB,MAAM,GAAGP,EAAM,QAAQ,IAAI,GAChEgB,IAAaT,EAAiB,MAC3B,KAAK,MAAM,MAAM,OAAOI,EAAmB,QAAQ,IAAI,CAC/D,GAEKM,IAAYC,EAAI,EAAK,GACrBC,IAAYD,EAAwB,IAAI,GACxCE,IAAkBF,EAAI,EAAK;AAEjC,QAAIG,IAAwC;AAE5C,WAAAC,EAAU,MAAM;AACd,MAAAD,IAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,MAAM;;AAC/C,SAAI,CAACN,EAAU,SAAS,CAACjB,EAAM,UAC7BiB,EAAU,QAAQM,EAAM,iBAGtBvB,EAAM,QAAQmB,EAAU,UAChBE,KAAA,QAAAA,EAAA,UAAUF,EAAU,SAEpBK,IAAAL,EAAA,UAAA,QAAAK,EAAO,iBAAiB,gBAAgB,MAAM;AACtD,UAAAJ,EAAgB,QAAQ;AAAA,QAAA;AAAA,MAE5B,CACD,GAEGD,EAAU,SACHE,EAAA,QAAQF,EAAU,KAAK;AAAA,IAClC,CACD,GAEeM,EAAA,MAAMJ,KAAA,gBAAAA,EAAU,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazDialog.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazDialog.BLzdH8aa.css');const e=require("vue"),b=require("./MazBackdrop.cjs"),C=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),k={key:0,id:"dialogTitle",class:"m-dialog-title"},h={key:0,class:"m-dialog-footer"},B=e.defineComponent({name:"MazDialog",inheritAttrs:!1,__name:"MazDialog",props:{modelValue:{type:Boolean},title:{default:void 0},noClose:{type:Boolean,default:!1},maxWidth:{default:"100%"},minWidth:{default:"32rem"},scrollable:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},teleportSelector:{},beforeClose:{},noCloseOnEscKey:{type:Boolean},transitionName:{},backdropClass:{},backdropContentClass:{},contentPadding:{type:Boolean},justify:{},align:{},variant:{}},emits:["open","close","update:model-value"],setup(u,{expose:m}){const a=u,c=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazBtn.cjs"))),p=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/x-mark.Dz-FO7Es.cjs"))),s=e.useAttrs(),i=e.ref();m({close:()=>{var o,t;return(t=(o=i.value)==null?void 0:o.close)==null?void 0:t.call(o)}});const f=e.computed(()=>{const o=["modelValue","title","noClose","maxWidth","minWidth","scrollable"];return Object.fromEntries(Object.entries(a).filter(([t])=>!o.includes(t)))}),v=e.computed(()=>({...s,class:void 0,style:void 0})),g=e.computed(()=>({class:s.class,style:s.style})),n=e.ref(),y=e.useSlots(),d=e.computed(()=>!!y.footer);return a.scrollable&&e.watch(()=>a.modelValue,async o=>{await e.nextTick(),o&&n.value&&setTimeout(()=>{var t;(t=n.value)==null||t.scrollTo({top:0,behavior:"instant"})},0)}),(o,t)=>(e.openBlock(),e.createBlock(b.default,e.mergeProps({...v.value,...f.value},{ref_key:"backdrop",ref:i,"model-value":o.modelValue,"transition-name":"modal-anim","aria-labelledby":"dialogTitle","aria-describedby":"dialogDesc","content-padding":"",justify:"center",variant:"dialog",onClose:t[0]||(t[0]=l=>o.$emit("close",l)),onOpen:t[1]||(t[1]=l=>o.$emit("open",l)),"onUpdate:modelValue":t[2]||(t[2]=l=>o.$emit("update:model-value",l))}),{default:e.withCtx(({close:l,onBackdropClicked:r})=>[e.createElementVNode("div",e.mergeProps({class:["m-dialog",{"--scrollable":o.scrollable}],role:"dialog","aria-modal":"true",style:[{"--max-width":o.maxWidth,"--min-width":o.minWidth}]},g.value),[e.renderSlot(o.$slots,"header",{close:l,onBackdropClicked:r},()=>[e.createElementVNode("div",{class:e.normalizeClass(["m-dialog-header",{"--has-title":o.$slots.title||o.title}])},[o.$slots.title||o.title?(e.openBlock(),e.createElementBlock("h2",k,[e.renderSlot(o.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(o.title),1)],!0)])):e.createCommentVNode("",!0),!o.noClose&&!o.persistent?(e.openBlock(),e.createBlock(e.unref(c),{key:1,color:"transparent",size:"sm",icon:e.unref(p),onClick:l},null,8,["icon","onClick"])):e.createCommentVNode("",!0)],2)],!0),e.createElementVNode("div",{id:"dialogDesc",ref_key:"dialogContent",ref:n,class:e.normalizeClass(["m-dialog-content",{"--bottom-padding":!d.value}])},[e.renderSlot(o.$slots,"default",{close:l,onBackdropClicked:r},void 0,!0)],2),d.value?(e.openBlock(),e.createElementBlock("div",h,[e.renderSlot(o.$slots,"footer",{close:l,onBackdropClicked:r},void 0,!0)])):e.createCommentVNode("",!0)],16)]),_:3},16,["model-value"]))}}),V=C._export_sfc(B,[["__scopeId","data-v-b59c94a7"]]);exports.default=V;
+//# sourceMappingURL=MazDialog.cjs.map

package/dist/components/MazDialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazDialog.cjs","sources":["../../src/components/MazDialog.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type {\n  ComponentPublicInstance,\n  HTMLAttributes,\n  StyleValue,\n} from 'vue'\nimport MazBackdrop, { type MazBackdropProps } from '@components/MazBackdrop.vue'\n\nimport {\n  computed,\n  defineAsyncComponent,\n  nextTick,\n  ref,\n  useAttrs,\n  useSlots,\n  watch,\n} from 'vue'\n\ndefineOptions({\n  name: 'MazDialog',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<InternalProps & MazBackdropProps>(), {\n  /** Title of the modal in header */\n  title: undefined,\n  /** Remove the close button in header */\n  noClose: false,\n  /** Modal's max-width */\n  maxWidth: '100%',\n  /** Modal's min-width */\n  minWidth: '32rem',\n  /**  Modal's content becomes scrollable - warning: a overflow is applied */\n  scrollable: false,\n  /** Persistent dialog (not closable by clicking outside and remove close button) */\n  persistent: false,\n})\n\ndefineEmits<{\n  /** emitted when modal is open */\n  'open': [value: void]\n  /** emitted when modal is close */\n  'close': [value: void]\n  /** emitted when modal is open or close */\n  'update:model-value': [value: boolean]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\n\nexport interface InternalProps {\n  /** @model Modal's model value */\n  modelValue?: boolean\n  /** Title of the modal in header */\n  title?: string\n  /** Remove the close button in header */\n  noClose?: boolean\n  /** Modal's max-width */\n  maxWidth?: string\n  /** Modal's min-width */\n  minWidth?: string\n  /**  Modal's content becomes scrollable - warning: a overflow is applied */\n  scrollable?: boolean\n  /** Persistent dialog (not closable by clicking outside and remove close button) */\n  persistent?: boolean\n}\n\nexport type MazDialogProps = InternalProps & MazBackdropProps\n\nconst XIcon = defineAsyncComponent(() => import('@icons/x-mark.svg'))\n\nconst attrs = useAttrs()\n\nconst backdrop = ref<ComponentPublicInstance<typeof MazBackdrop>>()\n\ndefineExpose({\n  close: () => backdrop.value?.close?.(),\n})\n\nconst backdropProps = computed(() => {\n  const dialogPropKeys: (keyof MazDialogProps)[] = [\n    'modelValue',\n    'title',\n    'noClose',\n    'maxWidth',\n    'minWidth',\n    'scrollable',\n  ]\n\n  return Object.fromEntries(\n    Object.entries(props).filter(([key]) => !dialogPropKeys.includes(key as keyof MazDialogProps)),\n  ) as MazBackdropProps\n})\n\nconst backdropAttrs = computed(() => ({\n  ...attrs,\n  class: undefined,\n  style: undefined,\n}))\nconst wrapperAttrs = computed<{\n  class?: HTMLAttributes['class']\n}>(() => ({\n  class: attrs.class,\n  style: attrs.style as StyleValue,\n}))\n\nconst dialogContent = ref<HTMLElement>()\n\nconst slots = useSlots()\nconst hasFooter = computed(() => !!slots.footer)\n\nif (props.scrollable) {\n  watch(() => props.modelValue, async (newVal) => {\n    await nextTick()\n    if (newVal && dialogContent.value) {\n      setTimeout(() => {\n        dialogContent.value?.scrollTo({ top: 0, behavior: 'instant' })\n      }, 0)\n    }\n  })\n}\n</script>\n\n<template>\n  <MazBackdrop\n    v-bind=\"{ ...backdropAttrs, ...backdropProps }\"\n    ref=\"backdrop\"\n    v-slot=\"{ close, onBackdropClicked }\"\n    :model-value=\"modelValue\"\n    transition-name=\"modal-anim\"\n    aria-labelledby=\"dialogTitle\"\n    aria-describedby=\"dialogDesc\"\n    content-padding\n    justify=\"center\"\n    variant=\"dialog\"\n    @close=\"$emit('close', $event)\"\n    @open=\"$emit('open', $event)\"\n    @update:model-value=\"$emit('update:model-value', $event)\"\n  >\n    <div\n      class=\"m-dialog\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :style=\"[{ '--max-width': maxWidth, '--min-width': minWidth }]\"\n      :class=\"{ '--scrollable': scrollable }\"\n      v-bind=\"wrapperAttrs\"\n    >\n      <!--\n        @slot Header slot\n          @binding {Function} close close function\n          @binding {Function} onBackdropClicked onBackdropClicked function (respects persistent option)\n      -->\n      <slot name=\"header\" :close :on-backdrop-clicked>\n        <div class=\"m-dialog-header\" :class=\"{ '--has-title': $slots.title || title }\">\n          <h2\n            v-if=\"$slots.title || title\"\n            id=\"dialogTitle\"\n            class=\"m-dialog-title\"\n          >\n            <!--\n                @slot Title slot in the header\n              -->\n            <slot name=\"title\">\n              {{ title }}\n            </slot>\n          </h2>\n\n          <MazBtn\n            v-if=\"!noClose && !persistent\"\n            color=\"transparent\"\n            size=\"sm\"\n            :icon=\"XIcon\"\n            @click=\"close\"\n          />\n        </div>\n      </slot>\n      <div id=\"dialogDesc\" ref=\"dialogContent\" class=\"m-dialog-content\" :class=\"{ '--bottom-padding': !hasFooter }\">\n        <!--\n            @slot Default content\n              @binding {Function} close close function\n              @binding {Function} onBackdropClicked onBackdropClicked function (respects persistent option)\n          -->\n        <slot :close :on-backdrop-clicked />\n      </div>\n      <div v-if=\"hasFooter\" class=\"m-dialog-footer\">\n        <!--\n            @slot Footer slot\n              @binding {Function} close close function\n              @binding {Function} onBackdropClicked onBackdropClicked function (respects persistent option)\n          -->\n        <slot name=\"footer\" :close :on-backdrop-clicked />\n      </div>\n    </div>\n  </MazBackdrop>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-dialog {\n  @apply maz-flex maz-origin-center maz-flex-col maz-min-w-full maz-rounded maz-bg-color maz-text-normal dark:maz-border dark:maz-border-color-light tab-s:maz-my-8 maz-max-w-full maz-touch-none;\n\n  @screen tab-s {\n    max-width: var(--max-width);\n    min-width: var(--min-width);\n  }\n\n  &-header {\n    @apply maz-flex maz-items-baseline maz-justify-end maz-pl-6 maz-pr-2 maz-pt-2 maz-pb-4;\n\n    &.--has-title {\n      @apply maz-justify-between;\n    }\n  }\n\n  &-title {\n    @apply maz-my-0 maz-text-xl maz-font-semibold;\n  }\n\n  &-footer {\n    @apply maz-flex maz-items-center maz-justify-end maz-px-6 maz-py-4;\n  }\n\n  &-content {\n    @apply maz-flex-1 maz-px-6;\n\n    &-icon {\n      flex: 0 0 auto;\n    }\n\n    &.--bottom-padding {\n      @apply maz-pb-4;\n    }\n  }\n\n  &.--scrollable {\n    @apply maz-max-h-[95vh] maz-my-0;\n\n    .m-dialog-content {\n      @apply maz-overflow-auto maz-border-t maz-border-color-light maz-py-4;\n\n      &:not(.--bottom-padding) {\n        @apply maz-border-b;\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazBtn","defineAsyncComponent","XIcon","attrs","useAttrs","backdrop","ref","__expose","_b","_a","backdropProps","computed","dialogPropKeys","key","backdropAttrs","wrapperAttrs","dialogContent","slots","useSlots","hasFooter","watch","newVal","nextTick"],"mappings":"i1BAuBA,MAAMA,EAAQC,EAwBRC,EAASC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,cAAwB,CAAA,CAAC,EAqBpEC,EAAQD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,+BAAmB,CAAA,CAAC,EAE9DE,EAAQC,EAAAA,SAAS,EAEjBC,EAAWC,EAAAA,IAAiD,EAErDC,EAAA,CACX,MAAO,IAAA,SAAM,OAAAC,GAAAC,EAAAJ,EAAS,QAAT,YAAAI,EAAgB,QAAhB,YAAAD,EAAA,KAAAC,GAAwB,CACtC,EAEK,MAAAC,EAAgBC,EAAAA,SAAS,IAAM,CACnC,MAAMC,EAA2C,CAC/C,aACA,QACA,UACA,WACA,WACA,YACF,EAEA,OAAO,OAAO,YACZ,OAAO,QAAQd,CAAK,EAAE,OAAO,CAAC,CAACe,CAAG,IAAM,CAACD,EAAe,SAASC,CAA2B,CAAC,CAC/F,CAAA,CACD,EAEKC,EAAgBH,EAAAA,SAAS,KAAO,CACpC,GAAGR,EACH,MAAO,OACP,MAAO,MAAA,EACP,EACIY,EAAeJ,EAAAA,SAElB,KAAO,CACR,MAAOR,EAAM,MACb,MAAOA,EAAM,KAAA,EACb,EAEIa,EAAgBV,EAAAA,IAAiB,EAEjCW,EAAQC,EAAAA,SAAS,EACjBC,EAAYR,EAAS,SAAA,IAAM,CAAC,CAACM,EAAM,MAAM,EAE/C,OAAInB,EAAM,YACRsB,EAAAA,MAAM,IAAMtB,EAAM,WAAY,MAAOuB,GAAW,CAC9C,MAAMC,WAAS,EACXD,GAAUL,EAAc,OAC1B,WAAW,IAAM,QACfP,EAAAO,EAAc,QAAd,MAAAP,EAAqB,SAAS,CAAE,IAAK,EAAG,SAAU,aACjD,CAAC,CACN,CACD"}