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

package/dist/components/MazTableCell.mjs

@@ -0,0 +1,19 @@
+import { defineComponent as o, openBlock as r, createElementBlock as a, normalizeClass as s, unref as l, renderSlot as c } from "vue";
+import { m } from "../chunks/MazTable.vue_vue_type_style_index_0_scoped_4101f1d3_lang.Dwkx-V96.mjs";
+import { injectStrict as n } from "../helpers/injectStrict.mjs";
+import { _ as p } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazTableCell.BDmda4j7.css';const _ = /* @__PURE__ */ o({
+  __name: "MazTableCell",
+  setup(f) {
+    const { size: e } = n(m);
+    return (t, i) => (r(), a("td", {
+      class: s(["m-table-cell m-reset-css", [`--${l(e)}`]])
+    }, [
+      c(t.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), C = /* @__PURE__ */ p(_, [["__scopeId", "data-v-214bcf1d"]]);
+export {
+  C as default
+};
+//# sourceMappingURL=MazTableCell.mjs.map

package/dist/components/MazTableCell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTableCell.mjs","sources":["../../src/components/MazTableCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazTableProvide } from '@components/MazTable.vue'\nimport { mazTableKey } from '@components/MazTable.vue'\nimport { injectStrict } from '@helpers/injectStrict'\n\nconst { size } = injectStrict<MazTableProvide>(mazTableKey)\n</script>\n\n<template>\n  <td class=\"m-table-cell  m-reset-css\" :class=\"[`--${size}`]\">\n    <slot />\n  </td>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-table-cell {\n  &.--truncate {\n    @apply maz-truncate;\n  }\n\n  &.--xl {\n    @apply maz-px-5 maz-py-5 maz-text-xl;\n  }\n\n  &.--lg {\n    @apply maz-px-4 maz-py-4 maz-text-lg;\n  }\n\n  &.--md {\n    @apply maz-px-3 maz-py-3 maz-text-base;\n  }\n\n  &.--sm {\n    @apply maz-px-2 maz-py-2 maz-text-sm;\n  }\n\n  &.--xs {\n    @apply maz-px-1 maz-py-1 maz-text-xs;\n  }\n\n  &.--mini {\n    @apply maz-px-0.5 maz-py-0.5 maz-text-xs;\n  }\n}\n</style>\n"],"names":["size","injectStrict","mazTableKey"],"mappings":";;;;;;;AAKA,UAAM,EAAE,MAAAA,EAAA,IAASC,EAA8BC,CAAW;;;;;;;;"}

package/dist/components/MazTableRow.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazTableRow.Copw9RJN.css');const e=require("vue"),a=require("../chunks/MazTable.vue_vue_type_style_index_0_scoped_4101f1d3_lang.Ctmf2NVE.cjs"),l=require("../helpers/injectStrict.cjs"),s=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),u=e.defineComponent({__name:"MazTableRow",props:{noHoverable:{type:Boolean}},setup(_){const{hoverable:o,backgroundEven:t,backgroundOdd:n}=l.injectStrict(a.mazTableKey);return(r,d)=>(e.openBlock(),e.createElementBlock("tr",{class:e.normalizeClass(["m-table-row m-reset-css",{"--hoverable":e.unref(o)&&!r.noHoverable,"--background-odd":e.unref(n),"--background-even":e.unref(t)}])},[e.renderSlot(r.$slots,"default",{},void 0,!0)],2))}}),c=s._export_sfc(u,[["__scopeId","data-v-73733853"]]);exports.default=c;
+//# sourceMappingURL=MazTableRow.cjs.map

package/dist/components/MazTableRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTableRow.cjs","sources":["../../src/components/MazTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazTableProvide } from '@components/MazTable.vue'\nimport { mazTableKey } from '@components/MazTable.vue'\nimport { injectStrict } from '@helpers/injectStrict'\n\nexport interface MazTableRowProps {\n  /** Override hoverable of table props */\n  noHoverable?: boolean\n}\n\ndefineProps<MazTableRowProps>()\nconst { hoverable, backgroundEven, backgroundOdd } = injectStrict<MazTableProvide>(mazTableKey)\n</script>\n\n<template>\n  <tr\n    class=\"m-table-row m-reset-css\"\n    :class=\"{\n      '--hoverable': hoverable && !noHoverable,\n      '--background-odd': backgroundOdd,\n      '--background-even': backgroundEven,\n    }\"\n  >\n    <slot />\n  </tr>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-table-row {\n  &.--background-odd {\n    @apply odd:maz-bg-color-lighter dark:odd:maz-bg-color-light;\n  }\n\n  &.--background-even {\n    @apply even:maz-bg-color-lighter dark:even:maz-bg-color-light;\n  }\n\n  &.--hoverable {\n    &:hover {\n      @apply maz-cursor-pointer maz-bg-color-dark;\n    }\n  }\n}\n</style>\n"],"names":["hoverable","backgroundEven","backgroundOdd","injectStrict","mazTableKey"],"mappings":"6ZAWA,KAAM,CAAE,UAAAA,EAAW,eAAAC,EAAgB,cAAAC,CAAc,EAAIC,EAAAA,aAA8BC,EAAAA,WAAW"}

package/dist/components/MazTableRow.mjs

@@ -0,0 +1,26 @@
+import { defineComponent as n, openBlock as s, createElementBlock as l, normalizeClass as c, unref as e, renderSlot as m } from "vue";
+import { m as d } from "../chunks/MazTable.vue_vue_type_style_index_0_scoped_4101f1d3_lang.Dwkx-V96.mjs";
+import { injectStrict as p } from "../helpers/injectStrict.mjs";
+import { _ as b } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazTableRow.Copw9RJN.css';const u = /* @__PURE__ */ n({
+  __name: "MazTableRow",
+  props: {
+    noHoverable: { type: Boolean }
+  },
+  setup(_) {
+    const { hoverable: r, backgroundEven: a, backgroundOdd: t } = p(d);
+    return (o, f) => (s(), l("tr", {
+      class: c(["m-table-row m-reset-css", {
+        "--hoverable": e(r) && !o.noHoverable,
+        "--background-odd": e(t),
+        "--background-even": e(a)
+      }])
+    }, [
+      m(o.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), z = /* @__PURE__ */ b(u, [["__scopeId", "data-v-73733853"]]);
+export {
+  z as default
+};
+//# sourceMappingURL=MazTableRow.mjs.map

package/dist/components/MazTableRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTableRow.mjs","sources":["../../src/components/MazTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazTableProvide } from '@components/MazTable.vue'\nimport { mazTableKey } from '@components/MazTable.vue'\nimport { injectStrict } from '@helpers/injectStrict'\n\nexport interface MazTableRowProps {\n  /** Override hoverable of table props */\n  noHoverable?: boolean\n}\n\ndefineProps<MazTableRowProps>()\nconst { hoverable, backgroundEven, backgroundOdd } = injectStrict<MazTableProvide>(mazTableKey)\n</script>\n\n<template>\n  <tr\n    class=\"m-table-row m-reset-css\"\n    :class=\"{\n      '--hoverable': hoverable && !noHoverable,\n      '--background-odd': backgroundOdd,\n      '--background-even': backgroundEven,\n    }\"\n  >\n    <slot />\n  </tr>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-table-row {\n  &.--background-odd {\n    @apply odd:maz-bg-color-lighter dark:odd:maz-bg-color-light;\n  }\n\n  &.--background-even {\n    @apply even:maz-bg-color-lighter dark:even:maz-bg-color-light;\n  }\n\n  &.--hoverable {\n    &:hover {\n      @apply maz-cursor-pointer maz-bg-color-dark;\n    }\n  }\n}\n</style>\n"],"names":["hoverable","backgroundEven","backgroundOdd","injectStrict","mazTableKey"],"mappings":";;;;;;;;;;AAWA,UAAM,EAAE,WAAAA,GAAW,gBAAAC,GAAgB,eAAAC,EAAc,IAAIC,EAA8BC,CAAW;;;;;;;;;;;;"}

package/dist/components/MazTableTitle.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazTableTitle.Cspgmj1g.css');const e=require("vue"),s=require("../chunks/MazTable.vue_vue_type_style_index_0_scoped_4101f1d3_lang.Ctmf2NVE.cjs"),l=require("../helpers/injectStrict.cjs"),n=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),o=e.defineComponent({__name:"MazTableTitle",setup(_){const{size:t}=l.injectStrict(s.mazTableKey);return(r,a)=>(e.openBlock(),e.createElementBlock("th",{class:e.normalizeClass(["m-table-title m-reset-css",[`--${e.unref(t)}`]])},[e.renderSlot(r.$slots,"default",{},void 0,!0)],2))}}),c=n._export_sfc(o,[["__scopeId","data-v-b8c8f7ee"]]);exports.default=c;
+//# sourceMappingURL=MazTableTitle.cjs.map

package/dist/components/MazTableTitle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTableTitle.cjs","sources":["../../src/components/MazTableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazTableProvide } from '@components/MazTable.vue'\nimport { mazTableKey } from '@components/MazTable.vue'\nimport { injectStrict } from '@helpers/injectStrict'\n\nconst { size } = injectStrict<MazTableProvide>(mazTableKey)\n</script>\n\n<template>\n  <th class=\"m-table-title m-reset-css\" :class=\"[`--${size}`]\">\n    <slot />\n  </th>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-table-title {\n  &.--truncate {\n    @apply maz-truncate;\n  }\n\n  &.--xl {\n    @apply maz-px-5 maz-py-5 maz-text-xl;\n  }\n\n  &.--lg {\n    @apply maz-px-4 maz-py-4 maz-text-lg;\n  }\n\n  &.--md {\n    @apply maz-px-3 maz-py-3 maz-text-base;\n  }\n\n  &.--sm {\n    @apply maz-px-2 maz-py-2 maz-text-sm;\n  }\n\n  &.--xs {\n    @apply maz-px-1 maz-py-1 maz-text-xs;\n  }\n\n  &.--mini {\n    @apply maz-px-0.5 maz-py-0.5 maz-text-xs;\n  }\n}\n</style>\n"],"names":["size","injectStrict","mazTableKey"],"mappings":"4XAKA,KAAM,CAAE,KAAAA,CAAA,EAASC,EAAA,aAA8BC,aAAW"}

package/dist/components/MazTableTitle.mjs

@@ -0,0 +1,19 @@
+import { defineComponent as o, openBlock as r, createElementBlock as a, normalizeClass as s, unref as l, renderSlot as m } from "vue";
+import { m as c } from "../chunks/MazTable.vue_vue_type_style_index_0_scoped_4101f1d3_lang.Dwkx-V96.mjs";
+import { injectStrict as n } from "../helpers/injectStrict.mjs";
+import { _ as i } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazTableTitle.Cspgmj1g.css';const p = /* @__PURE__ */ o({
+  __name: "MazTableTitle",
+  setup(_) {
+    const { size: e } = n(c);
+    return (t, f) => (r(), a("th", {
+      class: s(["m-table-title m-reset-css", [`--${l(e)}`]])
+    }, [
+      m(t.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), T = /* @__PURE__ */ i(p, [["__scopeId", "data-v-b8c8f7ee"]]);
+export {
+  T as default
+};
+//# sourceMappingURL=MazTableTitle.mjs.map

package/dist/components/MazTableTitle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTableTitle.mjs","sources":["../../src/components/MazTableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazTableProvide } from '@components/MazTable.vue'\nimport { mazTableKey } from '@components/MazTable.vue'\nimport { injectStrict } from '@helpers/injectStrict'\n\nconst { size } = injectStrict<MazTableProvide>(mazTableKey)\n</script>\n\n<template>\n  <th class=\"m-table-title m-reset-css\" :class=\"[`--${size}`]\">\n    <slot />\n  </th>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-table-title {\n  &.--truncate {\n    @apply maz-truncate;\n  }\n\n  &.--xl {\n    @apply maz-px-5 maz-py-5 maz-text-xl;\n  }\n\n  &.--lg {\n    @apply maz-px-4 maz-py-4 maz-text-lg;\n  }\n\n  &.--md {\n    @apply maz-px-3 maz-py-3 maz-text-base;\n  }\n\n  &.--sm {\n    @apply maz-px-2 maz-py-2 maz-text-sm;\n  }\n\n  &.--xs {\n    @apply maz-px-1 maz-py-1 maz-text-xs;\n  }\n\n  &.--mini {\n    @apply maz-px-0.5 maz-py-0.5 maz-text-xs;\n  }\n}\n</style>\n"],"names":["size","injectStrict","mazTableKey"],"mappings":";;;;;;;AAKA,UAAM,EAAE,MAAAA,EAAA,IAASC,EAA8BC,CAAW;;;;;;;;"}

package/dist/components/MazTabs.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../chunks/MazTabs.vue_vue_type_script_setup_true_lang.CsIEB0sX.cjs");exports.default=e._sfc_main;
+//# sourceMappingURL=MazTabs.cjs.map

package/dist/components/MazTabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTabs.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/MazTabs.mjs

@@ -0,0 +1,5 @@
+import { _ as f } from "../chunks/MazTabs.vue_vue_type_script_setup_true_lang.DnbfPaVg.mjs";
+export {
+  f as default
+};
+//# sourceMappingURL=MazTabs.mjs.map

package/dist/components/MazTabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTabs.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/MazTabsBar.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazTabsBar.-q3BbMXe.css');const e=require("vue"),C=require("../helpers/injectStrict.cjs"),L=require("../helpers/sleep.cjs"),P=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),T=["disabled","onClick"],M=e.defineComponent({__name:"MazTabsBar",props:{items:{},persistent:{type:Boolean},queryParam:{default:"tab"},block:{type:Boolean},noElevation:{type:Boolean},autoScroll:{type:Boolean,default:!0}},setup(m){const n=m,v=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazBadge.cjs"))),{currentTab:r,updateCurrentTab:i}=C.injectStrict("maz-tabs");function y(t){i(t+1),n.persistent&&B(t+1)}const d=e.ref(),f=e.ref([]);function b(t){return r.value===t+1}function h({mazBtn:t,index:a}){f.value[a]=t&&"$el"in t?t.$el:t}const s=e.computed(()=>n.items.map(t=>({label:typeof t=="string"?t:t.label,disabled:typeof t=="string"?!1:t.disabled??!1,badge:typeof t=="string"?void 0:t.badge}))),p=e.ref(),u=e.ref(!1);async function g(){if(!n.autoScroll)return;await L.sleep(150);const t=d.value,a=f.value[r.value-1];if(!t||!a)return;const o=50;if(a.offsetLeft-o<t.scrollLeft||a.offsetLeft+a.offsetWidth>t.scrollLeft+t.clientWidth){const k=window.getComputedStyle(t,"padding-left").paddingLeft,w=Number(k.slice(0,-2));t.scrollTo({left:a.offsetLeft-w-o,behavior:u.value?"smooth":"instant"})}if(typeof r.value!="number")return;const l=(a==null?void 0:a.offsetWidth)??0,c=(a==null?void 0:a.offsetHeight)??0,z=(a==null?void 0:a.offsetLeft)??0;p.value={transform:`translateX(${z}px)`,width:`${l}px`,height:`${c}px`},u.value=!0}function _(t,a){return a?{}:r.value===t+1?"color: var(--maz-color-text)":"color: var(--maz-color-muted)"}e.onBeforeMount(()=>{(r.value<1||r.value>s.value.length)&&console.error(`[maz-ui](MazTabsBar) The model-value should be between 1 and ${s.value.length}`)}),e.onMounted(()=>{(n.persistent||r.value)&&g()}),e.watch(()=>[r.value,s.value],()=>{g()});function S(){const t=new URL(window.location.href);return Number(t.searchParams.get(n.queryParam))}function B(t){const a=new URL(window.location.href);a.searchParams.set(n.queryParam,String(t)),window.history.replaceState({},document.title,a.toString())}return e.onMounted(()=>{n.persistent&&i(S()||r.value||1)}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"tabsBarRef",ref:d,class:e.normalizeClass(["m-tabs-bar m-reset-css",{"--block":t.block,"--elevation":!t.noElevation}])},[e.createElementVNode("div",{class:e.normalizeClass(["m-tabs-bar__indicator",{"--animated":u.value}]),style:e.normalizeStyle([p.value])},null,6),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,(o,l)=>(e.openBlock(),e.createElementBlock("button",{key:l,ref_for:!0,ref:c=>h({mazBtn:c,index:l}),class:e.normalizeClass([{"--active":b(l),"--disabled":o.disabled},"m-tabs-bar__item"]),disabled:o.disabled,style:e.normalizeStyle(_(l,o.disabled)),onClick:c=>o.disabled?void 0:y(l)},[e.renderSlot(t.$slots,"item",{item:o,active:b(l),index:l},()=>[e.createTextVNode(e.toDisplayString(o.label)+" ",1),o.badge?(e.openBlock(),e.createBlock(e.unref(v),{key:0,color:o.badge.color,pastel:o.badge.pastel,outline:o.badge.outline,"rounded-size":o.badge.roundedSize,size:o.badge.size??"0.7rem",class:"m-tabs-bar__item__badge"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"badge-content",{content:o.badge.content},()=>[e.createTextVNode(e.toDisplayString(o.badge.content),1)],!0)]),_:2},1032,["color","pastel","outline","rounded-size","size"])):e.createCommentVNode("",!0)],!0)],14,T))),128))],2))}}),$=P._export_sfc(M,[["__scopeId","data-v-186ca2f2"]]);exports.default=$;
+//# sourceMappingURL=MazTabsBar.cjs.map

package/dist/components/MazTabsBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTabsBar.cjs","sources":["../../src/components/MazTabsBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazBadgeColor, MazBadgeRoundedSize } from '@components/MazBadge.vue'\nimport type { MazTabsProvide } from '@components/MazTabs.vue'\nimport { injectStrict } from '@helpers/injectStrict'\nimport { sleep } from '@helpers/sleep'\n\nimport {\n  type ComponentPublicInstance,\n  computed,\n  defineAsyncComponent,\n  onBeforeMount,\n  onMounted,\n  ref,\n  type StyleValue,\n  watch,\n} from 'vue'\n\nconst props = withDefaults(defineProps<MazTabsBarProps>(), {\n  queryParam: 'tab',\n  autoScroll: true,\n})\n\nexport interface MazTabsBarProps {\n  /** The items to display in the tabs bar */\n  items: MazTabsBarItem[]\n  /** Will add a query param to the url to keep the selected tab on page refresh */\n  persistent?: boolean\n  /**\n   * The name of the query param to add to the url\n   * @default tab\n   */\n  queryParam?: string\n  /** Will make the tabs bar full width */\n  block?: boolean\n  /** Will remove the elevation */\n  noElevation?: boolean\n  /**\n   * Will add a scroll on the tabs bar to show selected element\n   * @default true\n   */\n  autoScroll?: boolean\n}\n\nexport type MazTabsBarItem =\n  | {\n    label: string\n    disabled?: boolean\n    badge?: {\n      content: string | number | boolean\n      color?: MazBadgeColor\n      pastel?: boolean\n      outline?: boolean\n      size?: string\n      roundedSize?: MazBadgeRoundedSize\n    }\n  }\n  | string\n\nconst MazBadge = defineAsyncComponent(() => import('@components/MazBadge.vue'))\n\nconst { currentTab, updateCurrentTab } = injectStrict<MazTabsProvide>('maz-tabs')\n\nfunction selectTab(tabIndex: number) {\n  updateCurrentTab(tabIndex + 1)\n  if (props.persistent) {\n    addOrUpdateQueryParamTab(tabIndex + 1)\n  }\n}\n\nconst tabsBarRef = ref<HTMLDivElement>()\nconst itemRefs = ref<HTMLButtonElement[]>([])\n\nfunction isActiveTab(index: number) {\n  return currentTab.value === index + 1\n}\n\nfunction addElementToItemRefs({\n  mazBtn,\n  index,\n}: {\n  mazBtn?: ComponentPublicInstance<any>\n  index: number\n}) {\n  itemRefs.value[index] = mazBtn && '$el' in mazBtn ? mazBtn.$el : mazBtn\n}\n\nconst normalizedItems = computed(() =>\n  props.items.map(item => ({\n    label: typeof item === 'string' ? item : item.label,\n    disabled: typeof item === 'string' ? false : item.disabled ?? false,\n    badge: typeof item === 'string' ? undefined : item.badge,\n  })),\n)\n\nconst tabsIndicatorState = ref<StyleValue>()\nconst tabsBarHasScrollAnimation = ref(false)\n\nasync function setIndicatorAndScroll() {\n  if (!props.autoScroll) {\n    return\n  }\n\n  await sleep(150)\n\n  const tabsBar = tabsBarRef.value\n  const activeTab = itemRefs.value[currentTab.value - 1]\n\n  if (!tabsBar || !activeTab) {\n    return\n  }\n\n  const scrollOffset = 50\n\n  if (\n    activeTab.offsetLeft - scrollOffset < tabsBar.scrollLeft\n    || activeTab.offsetLeft + activeTab.offsetWidth > tabsBar.scrollLeft + tabsBar.clientWidth\n  ) {\n    const tabBarPaddingLeft = window.getComputedStyle(tabsBar, 'padding-left').paddingLeft\n    const tabsBarPaddingOffset = Number(tabBarPaddingLeft.slice(0, -2))\n\n    tabsBar.scrollTo({\n      left: activeTab.offsetLeft - tabsBarPaddingOffset - scrollOffset,\n      behavior: tabsBarHasScrollAnimation.value ? 'smooth' : 'instant',\n    })\n  }\n\n  if (typeof currentTab.value !== 'number') {\n    return\n  }\n\n  const indicatorWidth = activeTab?.offsetWidth ?? 0\n  const indicatorHeight = activeTab?.offsetHeight ?? 0\n  const translateXValue = activeTab?.offsetLeft ?? 0\n\n  tabsIndicatorState.value = {\n    transform: `translateX(${translateXValue}px)`,\n    width: `${indicatorWidth}px`,\n    height: `${indicatorHeight}px`,\n  }\n\n  tabsBarHasScrollAnimation.value = true\n}\n\nfunction getTabStyle(index: number, disabled: boolean): StyleValue {\n  if (disabled) {\n    return {}\n  }\n  return currentTab.value === index + 1\n    ? `color: var(--maz-color-text)`\n    : 'color: var(--maz-color-muted)'\n}\n\nonBeforeMount(() => {\n  if (currentTab.value < 1 || currentTab.value > normalizedItems.value.length) {\n    console.error(\n      `[maz-ui](MazTabsBar) The model-value should be between 1 and ${normalizedItems.value.length}`,\n    )\n  }\n})\n\nonMounted(() => {\n  if (props.persistent || currentTab.value) {\n    setIndicatorAndScroll()\n  }\n})\n\nwatch(\n  () => [currentTab.value, normalizedItems.value],\n  () => {\n    setIndicatorAndScroll()\n  },\n)\n\nfunction getQueryParamTab() {\n  const urlActuelle = new URL(window.location.href)\n  return Number(urlActuelle.searchParams.get(props.queryParam))\n}\n\nfunction addOrUpdateQueryParamTab(tab: number) {\n  const urlActuelle = new URL(window.location.href)\n  urlActuelle.searchParams.set(props.queryParam, String(tab))\n  window.history.replaceState({}, document.title, urlActuelle.toString())\n}\n\nonMounted(() => {\n  if (props.persistent) {\n    updateCurrentTab(getQueryParamTab() || currentTab.value || 1)\n  }\n})\n</script>\n\n<template>\n  <div\n    ref=\"tabsBarRef\"\n    class=\"m-tabs-bar m-reset-css\"\n    :class=\"{\n      '--block': block,\n      '--elevation': !noElevation,\n    }\"\n  >\n    <div\n      class=\"m-tabs-bar__indicator\"\n      :class=\"{ '--animated': tabsBarHasScrollAnimation }\"\n      :style=\"[tabsIndicatorState]\"\n    />\n    <template v-for=\"(item, index) in normalizedItems\" :key=\"index\">\n      <button\n        :ref=\"(mazBtn) => addElementToItemRefs({ mazBtn, index })\"\n        :class=\"{ '--active': isActiveTab(index), '--disabled': item.disabled }\"\n        class=\"m-tabs-bar__item\"\n        :disabled=\"item.disabled\"\n        :style=\"getTabStyle(index, item.disabled)\"\n        @click=\"item.disabled ? undefined : selectTab(index)\"\n      >\n        <!--\n          @slot item - Content of item to display in the tabs bar\n            @binding {MazTabsBarItem[]} item - all data of the item\n            @binding {boolean} active - `true` if the tab is active\n            @binding {number} index - index of the item\n        -->\n        <slot name=\"item\" :item=\"item\" :active=\"isActiveTab(index)\" :index=\"index\">\n          {{ item.label }}\n\n          <MazBadge\n            v-if=\"item.badge\"\n            :color=\"item.badge.color\"\n            :pastel=\"item.badge.pastel\"\n            :outline=\"item.badge.outline\"\n            :rounded-size=\"item.badge.roundedSize\"\n            :size=\"item.badge.size ?? '0.7rem'\"\n            class=\"m-tabs-bar__item__badge\"\n          >\n            <!--\n              @slot badge-content - Content in the badge\n                @binding {string | number | boolean} content - content of the badge provided in item\n            -->\n            <slot name=\"badge-content\" :content=\"item.badge.content\">\n              {{ item.badge.content }}\n            </slot>\n          </MazBadge>\n        </slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-tabs-bar {\n  @apply maz-relative maz-inline-flex maz-max-w-full maz-gap-1 maz-overflow-x-auto maz-rounded maz-p-2 maz-align-top maz-bg-color dark:maz-border dark:maz-border-color-light;\n\n  &.--elevation {\n    @apply maz-elevation dark:maz-shadow-none;\n  }\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  &__item {\n    @apply maz-relative maz-flex maz-flex-none\n        maz-items-center maz-gap-2 maz-rounded maz-px-3\n        maz-py-2 maz-text-center maz-font-medium maz-no-underline maz-transition maz-duration-200 maz-ease-in-out;\n\n    &:not(.--disabled) {\n      @apply maz-cursor-pointer hover:!maz-text-normal;\n    }\n\n    &.--disabled {\n      @apply maz-cursor-not-allowed maz-bg-color-lighter maz-text-gray-400 dark:maz-text-gray-500;\n    }\n  }\n\n  &__indicator {\n    @apply maz-absolute maz-left-0 maz-rounded maz-bg-color-light maz-text-center;\n\n    &.--animated {\n      @apply maz-transition-all maz-duration-300 maz-ease-in-out;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazBadge","defineAsyncComponent","currentTab","updateCurrentTab","injectStrict","selectTab","tabIndex","addOrUpdateQueryParamTab","tabsBarRef","ref","itemRefs","isActiveTab","index","addElementToItemRefs","mazBtn","normalizedItems","computed","item","tabsIndicatorState","tabsBarHasScrollAnimation","setIndicatorAndScroll","sleep","tabsBar","activeTab","scrollOffset","tabBarPaddingLeft","tabsBarPaddingOffset","indicatorWidth","indicatorHeight","translateXValue","getTabStyle","disabled","onBeforeMount","onMounted","watch","getQueryParamTab","urlActuelle","tab"],"mappings":"kfAiBA,MAAMA,EAAQC,EAyCRC,EAAWC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,gBAA0B,CAAA,CAAC,EAExE,CAAE,WAAAC,EAAY,iBAAAC,GAAqBC,EAAAA,aAA6B,UAAU,EAEhF,SAASC,EAAUC,EAAkB,CACnCH,EAAiBG,EAAW,CAAC,EACzBR,EAAM,YACRS,EAAyBD,EAAW,CAAC,CACvC,CAGF,MAAME,EAAaC,EAAAA,IAAoB,EACjCC,EAAWD,EAAyB,IAAA,EAAE,EAE5C,SAASE,EAAYC,EAAe,CAC3B,OAAAV,EAAW,QAAUU,EAAQ,CAAA,CAGtC,SAASC,EAAqB,CAC5B,OAAAC,EACA,MAAAF,CAAA,EAIC,CACDF,EAAS,MAAME,CAAK,EAAIE,GAAU,QAASA,EAASA,EAAO,IAAMA,CAAA,CAGnE,MAAMC,EAAkBC,EAAA,SAAS,IAC/BlB,EAAM,MAAM,IAAamB,IAAA,CACvB,MAAO,OAAOA,GAAS,SAAWA,EAAOA,EAAK,MAC9C,SAAU,OAAOA,GAAS,SAAW,GAAQA,EAAK,UAAY,GAC9D,MAAO,OAAOA,GAAS,SAAW,OAAYA,EAAK,KAAA,EACnD,CACJ,EAEMC,EAAqBT,EAAAA,IAAgB,EACrCU,EAA4BV,MAAI,EAAK,EAE3C,eAAeW,GAAwB,CACjC,GAAA,CAACtB,EAAM,WACT,OAGF,MAAMuB,EAAAA,MAAM,GAAG,EAEf,MAAMC,EAAUd,EAAW,MACrBe,EAAYb,EAAS,MAAMR,EAAW,MAAQ,CAAC,EAEjD,GAAA,CAACoB,GAAW,CAACC,EACf,OAGF,MAAMC,EAAe,GAErB,GACED,EAAU,WAAaC,EAAeF,EAAQ,YAC3CC,EAAU,WAAaA,EAAU,YAAcD,EAAQ,WAAaA,EAAQ,YAC/E,CACA,MAAMG,EAAoB,OAAO,iBAAiBH,EAAS,cAAc,EAAE,YACrEI,EAAuB,OAAOD,EAAkB,MAAM,EAAG,EAAE,CAAC,EAElEH,EAAQ,SAAS,CACf,KAAMC,EAAU,WAAaG,EAAuBF,EACpD,SAAUL,EAA0B,MAAQ,SAAW,SAAA,CACxD,CAAA,CAGC,GAAA,OAAOjB,EAAW,OAAU,SAC9B,OAGI,MAAAyB,GAAiBJ,GAAA,YAAAA,EAAW,cAAe,EAC3CK,GAAkBL,GAAA,YAAAA,EAAW,eAAgB,EAC7CM,GAAkBN,GAAA,YAAAA,EAAW,aAAc,EAEjDL,EAAmB,MAAQ,CACzB,UAAW,cAAcW,CAAe,MACxC,MAAO,GAAGF,CAAc,KACxB,OAAQ,GAAGC,CAAe,IAC5B,EAEAT,EAA0B,MAAQ,EAAA,CAG3B,SAAAW,EAAYlB,EAAemB,EAA+B,CACjE,OAAIA,EACK,CAAC,EAEH7B,EAAW,QAAUU,EAAQ,EAChC,+BACA,+BAAA,CAGNoB,EAAAA,cAAc,IAAM,EACd9B,EAAW,MAAQ,GAAKA,EAAW,MAAQa,EAAgB,MAAM,SAC3D,QAAA,MACN,gEAAgEA,EAAgB,MAAM,MAAM,EAC9F,CACF,CACD,EAEDkB,EAAAA,UAAU,IAAM,EACVnC,EAAM,YAAcI,EAAW,QACXkB,EAAA,CACxB,CACD,EAEDc,EAAA,MACE,IAAM,CAAChC,EAAW,MAAOa,EAAgB,KAAK,EAC9C,IAAM,CACkBK,EAAA,CAAA,CAE1B,EAEA,SAASe,GAAmB,CAC1B,MAAMC,EAAc,IAAI,IAAI,OAAO,SAAS,IAAI,EAChD,OAAO,OAAOA,EAAY,aAAa,IAAItC,EAAM,UAAU,CAAC,CAAA,CAG9D,SAASS,EAAyB8B,EAAa,CAC7C,MAAMD,EAAc,IAAI,IAAI,OAAO,SAAS,IAAI,EAChDA,EAAY,aAAa,IAAItC,EAAM,WAAY,OAAOuC,CAAG,CAAC,EACnD,OAAA,QAAQ,aAAa,CAAC,EAAG,SAAS,MAAOD,EAAY,UAAU,CAAA,CAGxEH,OAAAA,EAAAA,UAAU,IAAM,CACVnC,EAAM,YACRK,EAAiBgC,EAAiB,GAAKjC,EAAW,OAAS,CAAC,CAC9D,CACD"}

package/dist/components/MazTabsBar.mjs

@@ -0,0 +1,139 @@
+import { defineComponent as E, defineAsyncComponent as N, ref as c, computed as I, onBeforeMount as V, onMounted as h, watch as W, openBlock as i, createElementBlock as u, normalizeClass as f, createElementVNode as q, normalizeStyle as _, Fragment as H, renderList as O, renderSlot as w, createTextVNode as B, toDisplayString as S, createBlock as U, unref as Q, withCtx as X, createCommentVNode as j } from "vue";
+import { injectStrict as D } from "../helpers/injectStrict.mjs";
+import { sleep as F } from "../helpers/sleep.mjs";
+import { _ as G } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazTabsBar.-q3BbMXe.css';const J = ["disabled", "onClick"], K = /* @__PURE__ */ E({
+  __name: "MazTabsBar",
+  props: {
+    items: {},
+    persistent: { type: Boolean },
+    queryParam: { default: "tab" },
+    block: { type: Boolean },
+    noElevation: { type: Boolean },
+    autoScroll: { type: Boolean, default: !0 }
+  },
+  setup(z) {
+    const l = z, k = N(() => import("./MazBadge.mjs")), { currentTab: o, updateCurrentTab: b } = D("maz-tabs");
+    function L(e) {
+      b(e + 1), l.persistent && $(e + 1);
+    }
+    const p = c(), m = c([]);
+    function g(e) {
+      return o.value === e + 1;
+    }
+    function C({
+      mazBtn: e,
+      index: t
+    }) {
+      m.value[t] = e && "$el" in e ? e.$el : e;
+    }
+    const n = I(
+      () => l.items.map((e) => ({
+        label: typeof e == "string" ? e : e.label,
+        disabled: typeof e == "string" ? !1 : e.disabled ?? !1,
+        badge: typeof e == "string" ? void 0 : e.badge
+      }))
+    ), v = c(), d = c(!1);
+    async function y() {
+      if (!l.autoScroll)
+        return;
+      await F(150);
+      const e = p.value, t = m.value[o.value - 1];
+      if (!e || !t)
+        return;
+      const a = 50;
+      if (t.offsetLeft - a < e.scrollLeft || t.offsetLeft + t.offsetWidth > e.scrollLeft + e.clientWidth) {
+        const M = window.getComputedStyle(e, "padding-left").paddingLeft, R = Number(M.slice(0, -2));
+        e.scrollTo({
+          left: t.offsetLeft - R - a,
+          behavior: d.value ? "smooth" : "instant"
+        });
+      }
+      if (typeof o.value != "number")
+        return;
+      const r = (t == null ? void 0 : t.offsetWidth) ?? 0, s = (t == null ? void 0 : t.offsetHeight) ?? 0, A = (t == null ? void 0 : t.offsetLeft) ?? 0;
+      v.value = {
+        transform: `translateX(${A}px)`,
+        width: `${r}px`,
+        height: `${s}px`
+      }, d.value = !0;
+    }
+    function P(e, t) {
+      return t ? {} : o.value === e + 1 ? "color: var(--maz-color-text)" : "color: var(--maz-color-muted)";
+    }
+    V(() => {
+      (o.value < 1 || o.value > n.value.length) && console.error(
+        `[maz-ui](MazTabsBar) The model-value should be between 1 and ${n.value.length}`
+      );
+    }), h(() => {
+      (l.persistent || o.value) && y();
+    }), W(
+      () => [o.value, n.value],
+      () => {
+        y();
+      }
+    );
+    function T() {
+      const e = new URL(window.location.href);
+      return Number(e.searchParams.get(l.queryParam));
+    }
+    function $(e) {
+      const t = new URL(window.location.href);
+      t.searchParams.set(l.queryParam, String(e)), window.history.replaceState({}, document.title, t.toString());
+    }
+    return h(() => {
+      l.persistent && b(T() || o.value || 1);
+    }), (e, t) => (i(), u("div", {
+      ref_key: "tabsBarRef",
+      ref: p,
+      class: f(["m-tabs-bar m-reset-css", {
+        "--block": e.block,
+        "--elevation": !e.noElevation
+      }])
+    }, [
+      q("div", {
+        class: f(["m-tabs-bar__indicator", { "--animated": d.value }]),
+        style: _([v.value])
+      }, null, 6),
+      (i(!0), u(H, null, O(n.value, (a, r) => (i(), u("button", {
+        key: r,
+        ref_for: !0,
+        ref: (s) => C({ mazBtn: s, index: r }),
+        class: f([{ "--active": g(r), "--disabled": a.disabled }, "m-tabs-bar__item"]),
+        disabled: a.disabled,
+        style: _(P(r, a.disabled)),
+        onClick: (s) => a.disabled ? void 0 : L(r)
+      }, [
+        w(e.$slots, "item", {
+          item: a,
+          active: g(r),
+          index: r
+        }, () => [
+          B(S(a.label) + " ", 1),
+          a.badge ? (i(), U(Q(k), {
+            key: 0,
+            color: a.badge.color,
+            pastel: a.badge.pastel,
+            outline: a.badge.outline,
+            "rounded-size": a.badge.roundedSize,
+            size: a.badge.size ?? "0.7rem",
+            class: "m-tabs-bar__item__badge"
+          }, {
+            default: X(() => [
+              w(e.$slots, "badge-content", {
+                content: a.badge.content
+              }, () => [
+                B(S(a.badge.content), 1)
+              ], !0)
+            ]),
+            _: 2
+          }, 1032, ["color", "pastel", "outline", "rounded-size", "size"])) : j("", !0)
+        ], !0)
+      ], 14, J))), 128))
+    ], 2));
+  }
+}), te = /* @__PURE__ */ G(K, [["__scopeId", "data-v-186ca2f2"]]);
+export {
+  te as default
+};
+//# sourceMappingURL=MazTabsBar.mjs.map

package/dist/components/MazTabsBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTabsBar.mjs","sources":["../../src/components/MazTabsBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazBadgeColor, MazBadgeRoundedSize } from '@components/MazBadge.vue'\nimport type { MazTabsProvide } from '@components/MazTabs.vue'\nimport { injectStrict } from '@helpers/injectStrict'\nimport { sleep } from '@helpers/sleep'\n\nimport {\n  type ComponentPublicInstance,\n  computed,\n  defineAsyncComponent,\n  onBeforeMount,\n  onMounted,\n  ref,\n  type StyleValue,\n  watch,\n} from 'vue'\n\nconst props = withDefaults(defineProps<MazTabsBarProps>(), {\n  queryParam: 'tab',\n  autoScroll: true,\n})\n\nexport interface MazTabsBarProps {\n  /** The items to display in the tabs bar */\n  items: MazTabsBarItem[]\n  /** Will add a query param to the url to keep the selected tab on page refresh */\n  persistent?: boolean\n  /**\n   * The name of the query param to add to the url\n   * @default tab\n   */\n  queryParam?: string\n  /** Will make the tabs bar full width */\n  block?: boolean\n  /** Will remove the elevation */\n  noElevation?: boolean\n  /**\n   * Will add a scroll on the tabs bar to show selected element\n   * @default true\n   */\n  autoScroll?: boolean\n}\n\nexport type MazTabsBarItem =\n  | {\n    label: string\n    disabled?: boolean\n    badge?: {\n      content: string | number | boolean\n      color?: MazBadgeColor\n      pastel?: boolean\n      outline?: boolean\n      size?: string\n      roundedSize?: MazBadgeRoundedSize\n    }\n  }\n  | string\n\nconst MazBadge = defineAsyncComponent(() => import('@components/MazBadge.vue'))\n\nconst { currentTab, updateCurrentTab } = injectStrict<MazTabsProvide>('maz-tabs')\n\nfunction selectTab(tabIndex: number) {\n  updateCurrentTab(tabIndex + 1)\n  if (props.persistent) {\n    addOrUpdateQueryParamTab(tabIndex + 1)\n  }\n}\n\nconst tabsBarRef = ref<HTMLDivElement>()\nconst itemRefs = ref<HTMLButtonElement[]>([])\n\nfunction isActiveTab(index: number) {\n  return currentTab.value === index + 1\n}\n\nfunction addElementToItemRefs({\n  mazBtn,\n  index,\n}: {\n  mazBtn?: ComponentPublicInstance<any>\n  index: number\n}) {\n  itemRefs.value[index] = mazBtn && '$el' in mazBtn ? mazBtn.$el : mazBtn\n}\n\nconst normalizedItems = computed(() =>\n  props.items.map(item => ({\n    label: typeof item === 'string' ? item : item.label,\n    disabled: typeof item === 'string' ? false : item.disabled ?? false,\n    badge: typeof item === 'string' ? undefined : item.badge,\n  })),\n)\n\nconst tabsIndicatorState = ref<StyleValue>()\nconst tabsBarHasScrollAnimation = ref(false)\n\nasync function setIndicatorAndScroll() {\n  if (!props.autoScroll) {\n    return\n  }\n\n  await sleep(150)\n\n  const tabsBar = tabsBarRef.value\n  const activeTab = itemRefs.value[currentTab.value - 1]\n\n  if (!tabsBar || !activeTab) {\n    return\n  }\n\n  const scrollOffset = 50\n\n  if (\n    activeTab.offsetLeft - scrollOffset < tabsBar.scrollLeft\n    || activeTab.offsetLeft + activeTab.offsetWidth > tabsBar.scrollLeft + tabsBar.clientWidth\n  ) {\n    const tabBarPaddingLeft = window.getComputedStyle(tabsBar, 'padding-left').paddingLeft\n    const tabsBarPaddingOffset = Number(tabBarPaddingLeft.slice(0, -2))\n\n    tabsBar.scrollTo({\n      left: activeTab.offsetLeft - tabsBarPaddingOffset - scrollOffset,\n      behavior: tabsBarHasScrollAnimation.value ? 'smooth' : 'instant',\n    })\n  }\n\n  if (typeof currentTab.value !== 'number') {\n    return\n  }\n\n  const indicatorWidth = activeTab?.offsetWidth ?? 0\n  const indicatorHeight = activeTab?.offsetHeight ?? 0\n  const translateXValue = activeTab?.offsetLeft ?? 0\n\n  tabsIndicatorState.value = {\n    transform: `translateX(${translateXValue}px)`,\n    width: `${indicatorWidth}px`,\n    height: `${indicatorHeight}px`,\n  }\n\n  tabsBarHasScrollAnimation.value = true\n}\n\nfunction getTabStyle(index: number, disabled: boolean): StyleValue {\n  if (disabled) {\n    return {}\n  }\n  return currentTab.value === index + 1\n    ? `color: var(--maz-color-text)`\n    : 'color: var(--maz-color-muted)'\n}\n\nonBeforeMount(() => {\n  if (currentTab.value < 1 || currentTab.value > normalizedItems.value.length) {\n    console.error(\n      `[maz-ui](MazTabsBar) The model-value should be between 1 and ${normalizedItems.value.length}`,\n    )\n  }\n})\n\nonMounted(() => {\n  if (props.persistent || currentTab.value) {\n    setIndicatorAndScroll()\n  }\n})\n\nwatch(\n  () => [currentTab.value, normalizedItems.value],\n  () => {\n    setIndicatorAndScroll()\n  },\n)\n\nfunction getQueryParamTab() {\n  const urlActuelle = new URL(window.location.href)\n  return Number(urlActuelle.searchParams.get(props.queryParam))\n}\n\nfunction addOrUpdateQueryParamTab(tab: number) {\n  const urlActuelle = new URL(window.location.href)\n  urlActuelle.searchParams.set(props.queryParam, String(tab))\n  window.history.replaceState({}, document.title, urlActuelle.toString())\n}\n\nonMounted(() => {\n  if (props.persistent) {\n    updateCurrentTab(getQueryParamTab() || currentTab.value || 1)\n  }\n})\n</script>\n\n<template>\n  <div\n    ref=\"tabsBarRef\"\n    class=\"m-tabs-bar m-reset-css\"\n    :class=\"{\n      '--block': block,\n      '--elevation': !noElevation,\n    }\"\n  >\n    <div\n      class=\"m-tabs-bar__indicator\"\n      :class=\"{ '--animated': tabsBarHasScrollAnimation }\"\n      :style=\"[tabsIndicatorState]\"\n    />\n    <template v-for=\"(item, index) in normalizedItems\" :key=\"index\">\n      <button\n        :ref=\"(mazBtn) => addElementToItemRefs({ mazBtn, index })\"\n        :class=\"{ '--active': isActiveTab(index), '--disabled': item.disabled }\"\n        class=\"m-tabs-bar__item\"\n        :disabled=\"item.disabled\"\n        :style=\"getTabStyle(index, item.disabled)\"\n        @click=\"item.disabled ? undefined : selectTab(index)\"\n      >\n        <!--\n          @slot item - Content of item to display in the tabs bar\n            @binding {MazTabsBarItem[]} item - all data of the item\n            @binding {boolean} active - `true` if the tab is active\n            @binding {number} index - index of the item\n        -->\n        <slot name=\"item\" :item=\"item\" :active=\"isActiveTab(index)\" :index=\"index\">\n          {{ item.label }}\n\n          <MazBadge\n            v-if=\"item.badge\"\n            :color=\"item.badge.color\"\n            :pastel=\"item.badge.pastel\"\n            :outline=\"item.badge.outline\"\n            :rounded-size=\"item.badge.roundedSize\"\n            :size=\"item.badge.size ?? '0.7rem'\"\n            class=\"m-tabs-bar__item__badge\"\n          >\n            <!--\n              @slot badge-content - Content in the badge\n                @binding {string | number | boolean} content - content of the badge provided in item\n            -->\n            <slot name=\"badge-content\" :content=\"item.badge.content\">\n              {{ item.badge.content }}\n            </slot>\n          </MazBadge>\n        </slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-tabs-bar {\n  @apply maz-relative maz-inline-flex maz-max-w-full maz-gap-1 maz-overflow-x-auto maz-rounded maz-p-2 maz-align-top maz-bg-color dark:maz-border dark:maz-border-color-light;\n\n  &.--elevation {\n    @apply maz-elevation dark:maz-shadow-none;\n  }\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  &__item {\n    @apply maz-relative maz-flex maz-flex-none\n        maz-items-center maz-gap-2 maz-rounded maz-px-3\n        maz-py-2 maz-text-center maz-font-medium maz-no-underline maz-transition maz-duration-200 maz-ease-in-out;\n\n    &:not(.--disabled) {\n      @apply maz-cursor-pointer hover:!maz-text-normal;\n    }\n\n    &.--disabled {\n      @apply maz-cursor-not-allowed maz-bg-color-lighter maz-text-gray-400 dark:maz-text-gray-500;\n    }\n  }\n\n  &__indicator {\n    @apply maz-absolute maz-left-0 maz-rounded maz-bg-color-light maz-text-center;\n\n    &.--animated {\n      @apply maz-transition-all maz-duration-300 maz-ease-in-out;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazBadge","defineAsyncComponent","currentTab","updateCurrentTab","injectStrict","selectTab","tabIndex","addOrUpdateQueryParamTab","tabsBarRef","ref","itemRefs","isActiveTab","index","addElementToItemRefs","mazBtn","normalizedItems","computed","item","tabsIndicatorState","tabsBarHasScrollAnimation","setIndicatorAndScroll","sleep","tabsBar","activeTab","scrollOffset","tabBarPaddingLeft","tabsBarPaddingOffset","indicatorWidth","indicatorHeight","translateXValue","getTabStyle","disabled","onBeforeMount","onMounted","watch","getQueryParamTab","urlActuelle","tab"],"mappings":"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"}

package/dist/components/MazTabsContent.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../chunks/MazTabsContent.vue_vue_type_script_setup_true_lang.DariT_zv.cjs");exports.default=e._sfc_main;
+//# sourceMappingURL=MazTabsContent.cjs.map

package/dist/components/MazTabsContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTabsContent.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/MazTabsContent.mjs

@@ -0,0 +1,5 @@
+import { _ as f } from "../chunks/MazTabsContent.vue_vue_type_script_setup_true_lang.BGqO0ynq.mjs";
+export {
+  f as default
+};
+//# sourceMappingURL=MazTabsContent.mjs.map

package/dist/components/MazTabsContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTabsContent.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/MazTabsContentItem.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazTabsContentItem.C0ygFU51.css');const e=require("vue"),b=require("../helpers/injectStrict.cjs"),l=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),p=e.defineComponent({__name:"MazTabsContentItem",props:{tab:{type:Number,required:!0}},setup(o){const s=o,n=e.ref("maz-tab-transition"),i=e.ref(),{currentTab:a}=b.injectStrict("maz-tabs");e.watch(()=>a.value,(t,r)=>{if(typeof t=="number"&&typeof r=="number"){const m=r<t;n.value=m?"maz-tab-transition":"maz-tab-reverse-transition"}},{immediate:!0});const u=e.computed(()=>s.tab-1),c=e.computed(()=>a.value-1===u.value);return(t,r)=>(e.openBlock(),e.createBlock(e.Transition,{name:n.value},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"MazTabsContentItem",ref:i,class:"m-tabs-content-item m-reset-css"},[e.renderSlot(t.$slots,"default",{},void 0,!0)],512),[[e.vShow,c.value]])]),_:3},8,["name"]))}}),d=l._export_sfc(p,[["__scopeId","data-v-59df8523"]]);exports.default=d;
+//# sourceMappingURL=MazTabsContentItem.cjs.map

package/dist/components/MazTabsContentItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTabsContentItem.cjs","sources":["../../src/components/MazTabsContentItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazTabsProvide } from '@components/MazTabs.vue'\nimport { injectStrict } from '@helpers/injectStrict'\nimport { computed, ref, watch } from 'vue'\n\nconst props = defineProps({\n  tab: { type: Number, required: true },\n})\nconst transitionName = ref<string>('maz-tab-transition')\nconst MazTabsContentItem = ref()\n\nconst { currentTab } = injectStrict<MazTabsProvide>('maz-tabs')\n\nwatch(\n  () => currentTab.value,\n  (value, oldValue) => {\n    if (typeof value === 'number' && typeof oldValue === 'number') {\n      const newTabIsBigger = oldValue < value\n      transitionName.value = newTabIsBigger ? 'maz-tab-transition' : 'maz-tab-reverse-transition'\n    }\n  },\n  { immediate: true },\n)\n\nconst itemTabNumber = computed(() => {\n  return props.tab - 1\n})\n\nconst isCurrentTab = computed(() => {\n  return currentTab.value - 1 === itemTabNumber.value\n})\n</script>\n\n<template>\n  <Transition :name=\"transitionName\">\n    <div v-show=\"isCurrentTab\" ref=\"MazTabsContentItem\" class=\"m-tabs-content-item m-reset-css\">\n      <slot />\n    </div>\n  </Transition>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-tabs-content-item {\n  @apply maz-relative maz-top-0 maz-w-full;\n\n  flex: 1 0 auto;\n  transition: all 500ms cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n</style>\n"],"names":["props","__props","transitionName","ref","MazTabsContentItem","currentTab","injectStrict","watch","value","oldValue","newTabIsBigger","itemTabNumber","computed","isCurrentTab"],"mappings":"0UAKA,MAAMA,EAAQC,EAGRC,EAAiBC,MAAY,oBAAoB,EACjDC,EAAqBD,EAAAA,IAAI,EAEzB,CAAE,WAAAE,CAAA,EAAeC,EAAA,aAA6B,UAAU,EAE9DC,EAAA,MACE,IAAMF,EAAW,MACjB,CAACG,EAAOC,IAAa,CACnB,GAAI,OAAOD,GAAU,UAAY,OAAOC,GAAa,SAAU,CAC7D,MAAMC,EAAiBD,EAAWD,EACnBN,EAAA,MAAQQ,EAAiB,qBAAuB,4BAAA,CAEnE,EACA,CAAE,UAAW,EAAK,CACpB,EAEM,MAAAC,EAAgBC,EAAAA,SAAS,IACtBZ,EAAM,IAAM,CACpB,EAEKa,EAAeD,EAAAA,SAAS,IACrBP,EAAW,MAAQ,IAAMM,EAAc,KAC/C"}

package/dist/components/MazTabsContentItem.mjs

@@ -0,0 +1,41 @@
+import { defineComponent as p, ref as r, watch as f, computed as o, openBlock as d, createBlock as l, Transition as _, withCtx as v, withDirectives as T, createElementVNode as z, renderSlot as C, vShow as I } from "vue";
+import { injectStrict as h } from "../helpers/injectStrict.mjs";
+import { _ as w } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazTabsContentItem.C0ygFU51.css';const y = /* @__PURE__ */ p({
+  __name: "MazTabsContentItem",
+  props: {
+    tab: { type: Number, required: !0 }
+  },
+  setup(s) {
+    const m = s, a = r("maz-tab-transition"), i = r(), { currentTab: n } = h("maz-tabs");
+    f(
+      () => n.value,
+      (t, e) => {
+        if (typeof t == "number" && typeof e == "number") {
+          const b = e < t;
+          a.value = b ? "maz-tab-transition" : "maz-tab-reverse-transition";
+        }
+      },
+      { immediate: !0 }
+    );
+    const c = o(() => m.tab - 1), u = o(() => n.value - 1 === c.value);
+    return (t, e) => (d(), l(_, { name: a.value }, {
+      default: v(() => [
+        T(z("div", {
+          ref_key: "MazTabsContentItem",
+          ref: i,
+          class: "m-tabs-content-item m-reset-css"
+        }, [
+          C(t.$slots, "default", {}, void 0, !0)
+        ], 512), [
+          [I, u.value]
+        ])
+      ]),
+      _: 3
+    }, 8, ["name"]));
+  }
+}), x = /* @__PURE__ */ w(y, [["__scopeId", "data-v-59df8523"]]);
+export {
+  x as default
+};
+//# sourceMappingURL=MazTabsContentItem.mjs.map

package/dist/components/MazTabsContentItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTabsContentItem.mjs","sources":["../../src/components/MazTabsContentItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazTabsProvide } from '@components/MazTabs.vue'\nimport { injectStrict } from '@helpers/injectStrict'\nimport { computed, ref, watch } from 'vue'\n\nconst props = defineProps({\n  tab: { type: Number, required: true },\n})\nconst transitionName = ref<string>('maz-tab-transition')\nconst MazTabsContentItem = ref()\n\nconst { currentTab } = injectStrict<MazTabsProvide>('maz-tabs')\n\nwatch(\n  () => currentTab.value,\n  (value, oldValue) => {\n    if (typeof value === 'number' && typeof oldValue === 'number') {\n      const newTabIsBigger = oldValue < value\n      transitionName.value = newTabIsBigger ? 'maz-tab-transition' : 'maz-tab-reverse-transition'\n    }\n  },\n  { immediate: true },\n)\n\nconst itemTabNumber = computed(() => {\n  return props.tab - 1\n})\n\nconst isCurrentTab = computed(() => {\n  return currentTab.value - 1 === itemTabNumber.value\n})\n</script>\n\n<template>\n  <Transition :name=\"transitionName\">\n    <div v-show=\"isCurrentTab\" ref=\"MazTabsContentItem\" class=\"m-tabs-content-item m-reset-css\">\n      <slot />\n    </div>\n  </Transition>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-tabs-content-item {\n  @apply maz-relative maz-top-0 maz-w-full;\n\n  flex: 1 0 auto;\n  transition: all 500ms cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n</style>\n"],"names":["props","__props","transitionName","ref","MazTabsContentItem","currentTab","injectStrict","watch","value","oldValue","newTabIsBigger","itemTabNumber","computed","isCurrentTab"],"mappings":";;;;;;;;;AAKA,UAAMA,IAAQC,GAGRC,IAAiBC,EAAY,oBAAoB,GACjDC,IAAqBD,EAAI,GAEzB,EAAE,YAAAE,EAAA,IAAeC,EAA6B,UAAU;AAE9D,IAAAC;AAAA,MACE,MAAMF,EAAW;AAAA,MACjB,CAACG,GAAOC,MAAa;AACnB,YAAI,OAAOD,KAAU,YAAY,OAAOC,KAAa,UAAU;AAC7D,gBAAMC,IAAiBD,IAAWD;AACnB,UAAAN,EAAA,QAAQQ,IAAiB,uBAAuB;AAAA,QAAA;AAAA,MAEnE;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IACpB;AAEM,UAAAC,IAAgBC,EAAS,MACtBZ,EAAM,MAAM,CACpB,GAEKa,IAAeD,EAAS,MACrBP,EAAW,QAAQ,MAAMM,EAAc,KAC/C;;;;;;;;;;;;;;;;;"}

package/dist/components/MazTextarea.cjs

@@ -0,0 +1,2 @@
+"use strict";require('../assets/MazTextarea.QTMu0OQv.css');var E=Object.defineProperty;var S=(a,r,o)=>r in a?E(a,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[r]=o;var b=(a,r,o)=>S(a,typeof r!="symbol"?r+"":r,o);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),V=require("../helpers/debounce.cjs"),q=require("../composables/useInstanceUniqId.cjs"),T=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs");class M{constructor(r){b(this,"element");this.element=r,this.onFocus=this.onFocus.bind(this),this.autogrow=this.autogrow.bind(this),this.onResize=V.debounce(this.onResize.bind(this),200),this.connect()}connect(){this.element.addEventListener("focus",this.onFocus),this.element.style.resize="none",this.element.style.boxSizing="border-box"}disconnect(){window.removeEventListener("resize",this.onResize),this.element.removeEventListener("input",this.autogrow)}onFocus(){this.autogrow(),this.element.addEventListener("input",this.autogrow),window.addEventListener("resize",this.onResize),this.element.removeEventListener("focus",this.onFocus)}onResize(){this.autogrow()}autogrow(){this.element.style.height="auto",this.element.style.overflow="hidden",this.element.style.height=`${this.element.scrollHeight}px`}}const I=["for"],L=["for"],C={key:1},F={key:2},N=["id","placeholder","name","disabled","required"],_={key:1,class:"m-textarea__append"},$=e.defineComponent({inheritAttrs:!1,__name:"MazTextarea",props:{style:{default:void 0},class:{default:void 0},modelValue:{default:void 0},id:{default:void 0},name:{default:"MazTextarea"},label:{default:void 0},placeholder:{default:void 0},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},error:{type:Boolean,default:!1},success:{type:Boolean,default:!1},warning:{type:Boolean,default:!1},hint:{default:void 0},color:{default:"primary"},roundedSize:{},padding:{type:Boolean,default:!0},transparent:{type:Boolean,default:!1},border:{type:Boolean,default:!0},appendJustify:{default:"end"}},emits:["update:model-value","input","focus","blur","change"],setup(a,{emit:r}){const o=a,n=r;let s;const d=q.useInstanceUniqId({componentName:"MazTextarea",providedId:o.id}),i=e.ref(),l=e.ref(!1),v=e.computed(()=>o.modelValue!==void 0&&o.modelValue!=="");e.onMounted(()=>{i.value&&(s=new M(i.value))}),e.onBeforeUnmount(()=>{s==null||s.disconnect()});const c=e.computed({get:()=>o.modelValue,set:t=>{n("update:model-value",t),n("input",t)}});function y(t){n("focus",t),l.value=!0}function g(t){n("blur",t),l.value=!1}function z(t){n("change",t)}const m=e.useSlots(),u=e.computed(()=>o.label||o.hint||!!m.label),w=e.computed(()=>u.value&&(l.value||v.value||!!o.placeholder)),p=e.computed(()=>!!m.append),f=e.computed(()=>{if(o.error)return"maz-border-danger";if(o.success)return"maz-border-success";if(o.warning)return"maz-border-warning";if(l.value){if(o.color==="black")return"maz-border-black";if(o.color==="danger")return"maz-border-danger";if(o.color==="info")return"maz-border-info";if(o.color==="primary")return"maz-border-primary";if(o.color==="secondary")return"maz-border-secondary";if(o.color==="success")return"maz-border-success";if(o.color==="warning")return"maz-border-warning";if(o.color==="white")return"maz-border-white"}return"--default-border"}),B=e.computed(()=>f.value!=="--default-border");return(t,h)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["m-textarea m-reset-css",[{"--is-disabled":t.disabled,"--has-label":u.value,"--background-transparent":t.transparent,"--padding":t.padding,"--border":t.border,"--has-border-style":B.value},f.value,t.roundedSize?`--rounded-${t.roundedSize}`:"--rounded",o.class]]),for:e.unref(d),style:e.normalizeStyle([t.style,`--append-justify: ${t.appendJustify}`])},[u.value?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(d),class:e.normalizeClass(["m-textarea__label",[{"maz-text-danger-600":t.error,"maz-text-success-600":t.success,"maz-text-warning-600":t.warning,"--has-state":t.error||t.warning||t.success,"--should-up":w.value}]])},[t.hint?(e.openBlock(),e.createElementBlock("span",C,e.toDisplayString(t.hint),1)):e.renderSlot(t.$slots,"label",{key:0},()=>[e.createTextVNode(e.toDisplayString(t.label),1)],!0),t.required?(e.openBlock(),e.createElementBlock("sup",F,"*")):e.createCommentVNode("",!0)],10,L)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("textarea",e.mergeProps({id:e.unref(d),ref_key:"TextareaElement",ref:i},t.$attrs,{"onUpdate:modelValue":h[0]||(h[0]=k=>c.value=k),placeholder:t.placeholder,name:t.name,disabled:t.disabled,required:t.required,class:{"--has-append":p.value}},e.toHandlers({blur:g,focus:y,change:z},!0)),null,16,N),[[e.vModelText,c.value]]),p.value?(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(t.$slots,"append",{},void 0,!0)])):e.createCommentVNode("",!0)],14,I))}}),R=T._export_sfc($,[["__scopeId","data-v-179fee42"]]);exports.default=R;
+//# sourceMappingURL=MazTextarea.cjs.map

package/dist/components/MazTextarea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTextarea.cjs","sources":["../../src/components/MazTextarea/textarea-autogrow.ts","../../src/components/MazTextarea.vue"],"sourcesContent":["import { debounce } from '@helpers/debounce'\n\nexport class TextareaAutogrow {\n  private element: HTMLTextAreaElement\n\n  constructor(element: HTMLTextAreaElement) {\n    this.element = element\n    this.onFocus = this.onFocus.bind(this)\n    this.autogrow = this.autogrow.bind(this)\n    this.onResize = debounce(this.onResize.bind(this), 200)\n    this.connect()\n  }\n\n  private connect() {\n    this.element.addEventListener('focus', this.onFocus)\n    this.element.style.resize = 'none'\n    this.element.style.boxSizing = 'border-box'\n  }\n\n  public disconnect() {\n    window.removeEventListener('resize', this.onResize)\n    this.element.removeEventListener('input', this.autogrow)\n  }\n\n  private onFocus() {\n    this.autogrow()\n    this.element.addEventListener('input', this.autogrow)\n    window.addEventListener('resize', this.onResize)\n    this.element.removeEventListener('focus', this.onFocus)\n  }\n\n  private onResize() {\n    this.autogrow()\n  }\n\n  private autogrow() {\n    this.element.style.height = 'auto'\n    this.element.style.overflow = 'hidden'\n    this.element.style.height = `${this.element.scrollHeight}px`\n  }\n}\n","<script lang=\"ts\">\n/* eslint-disable import/first */\nimport type { Color } from '@components/types'\n\nexport interface MazTextareaProps<T extends string | undefined | null> {\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  /** @model The value of the textarea */\n  modelValue?: T\n  /** The id of the textarea */\n  id?: string\n  /** The name of the textarea */\n  name?: string\n  /** The label of the textarea */\n  label?: string\n  /** The placeholder of the textarea */\n  placeholder?: string\n  /** If the textarea is required */\n  required?: boolean\n  /** If the textarea is disabled */\n  disabled?: boolean\n  /** If the textarea is readonly */\n  readonly?: boolean\n  /** If the textarea has an error */\n  error?: boolean\n  /** If the textarea has a success */\n  success?: boolean\n  /** If the textarea has a warning */\n  warning?: boolean\n  /** The hint of the textarea */\n  hint?: string\n  /** The color of the textarea */\n  color?: Color\n  /**\n   * Size radius of the component's border\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /**\n   * If the textarea has a padding\n   * @default true\n   */\n  padding?: boolean\n  /**\n   * If the textarea has a transparent background\n   * @default false\n   */\n  transparent?: boolean\n  /**\n   * If the textarea has no border\n   * @default false\n   */\n  border?: boolean\n  /**\n   * The alignment of the append slot\n   * @values `'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'`\n   * @default 'end'\n   */\n  appendJustify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'\n}\n</script>\n\n<script lang=\"ts\" setup generic=\"T extends string | undefined | null\">\nimport { TextareaAutogrow } from '@components/MazTextarea/textarea-autogrow'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport { computed, type HTMLAttributes, onBeforeUnmount, onMounted, ref, useSlots } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazTextareaProps<T>>(), {\n  style: undefined,\n  class: undefined,\n  modelValue: undefined,\n  id: undefined,\n  name: 'MazTextarea',\n  label: undefined,\n  placeholder: undefined,\n  required: false,\n  disabled: false,\n  readonly: false,\n  error: false,\n  success: false,\n  warning: false,\n  hint: undefined,\n  color: 'primary',\n  padding: true,\n  transparent: false,\n  border: true,\n  appendJustify: 'end',\n})\n\nconst emits = defineEmits<{\n  /**\n   * Emitted when the value of the textarea change\n   * @property {string | undefined} value - The value of the textarea\n   */\n  (event: 'update:model-value', value?: T): void\n  /**\n   * Emitted when the value of the textarea change\n   * @property {string | undefined} value - The value of the textarea\n   */\n  (event: 'input', value?: T): void\n  /**\n   * Emitted when the textarea is focused\n   * @property {Event} value - The event\n   */\n  (event: 'focus', value: FocusEvent): void\n  /**\n   * Emitted when the textarea is blurred\n   * @property {Event} value - The event\n   */\n  (event: 'blur', value: FocusEvent): void\n  /**\n   * Emitted when the textarea value change\n   * @property {Event} value - The event\n   */\n  (event: 'change', value: Event): void\n}>()\n\nlet textareaAutogrow: TextareaAutogrow | undefined\n\nconst instanceId = useInstanceUniqId({\n  componentName: 'MazTextarea',\n  providedId: props.id,\n})\n\nconst TextareaElement = ref<HTMLTextAreaElement>()\nconst isFocused = ref(false)\nconst hasValue = computed(() => props.modelValue !== undefined && props.modelValue !== '')\n\nonMounted(() => {\n  if (TextareaElement.value) {\n    textareaAutogrow = new TextareaAutogrow(TextareaElement.value)\n  }\n})\n\nonBeforeUnmount(() => {\n  textareaAutogrow?.disconnect()\n})\n\nconst inputValue = computed({\n  get: () => props.modelValue,\n  set: (value) => {\n    emits('update:model-value', value)\n    emits('input', value)\n  },\n})\n\nfunction focus(event: FocusEvent) {\n  emits('focus', event)\n  isFocused.value = true\n}\n\nfunction blur(event: FocusEvent) {\n  emits('blur', event)\n  isFocused.value = false\n}\n\nfunction change(event: Event) {\n  emits('change', event)\n}\n\nconst slots = useSlots()\n\nconst hasLabelOrHint = computed(() => props.label || props.hint || !!slots.label)\n\nconst shouldUp = computed(\n  () => hasLabelOrHint.value && (isFocused.value || hasValue.value || !!props.placeholder),\n)\n\nconst hasAppend = computed(() => !!slots.append)\n\n// eslint-disable-next-line sonarjs/cognitive-complexity\nconst borderStyle = computed(() => {\n  if (props.error)\n    return 'maz-border-danger'\n  if (props.success)\n    return 'maz-border-success'\n  if (props.warning)\n    return 'maz-border-warning'\n  if (isFocused.value) {\n    if (props.color === 'black')\n      return 'maz-border-black'\n    if (props.color === 'danger')\n      return 'maz-border-danger'\n    if (props.color === 'info')\n      return 'maz-border-info'\n    if (props.color === 'primary')\n      return 'maz-border-primary'\n    if (props.color === 'secondary')\n      return 'maz-border-secondary'\n    if (props.color === 'success')\n      return 'maz-border-success'\n    if (props.color === 'warning')\n      return 'maz-border-warning'\n    if (props.color === 'white')\n      return 'maz-border-white'\n  }\n  return '--default-border'\n})\n\nconst hasBorderStyle = computed(() => borderStyle.value !== '--default-border')\n</script>\n\n<template>\n  <label\n    class=\"m-textarea m-reset-css\"\n    :for=\"instanceId\"\n    :class=\"[\n      {\n        '--is-disabled': disabled,\n        '--has-label': hasLabelOrHint,\n        '--background-transparent': transparent,\n        '--padding': padding,\n        '--border': border,\n        '--has-border-style': hasBorderStyle,\n      },\n      borderStyle,\n      roundedSize ? `--rounded-${roundedSize}` : '--rounded',\n      props.class,\n    ]\"\n    :style=\"[style, `--append-justify: ${appendJustify}`]\"\n  >\n    <!-- eslint-disable vuejs-accessibility/label-has-for -->\n    <label\n      v-if=\"hasLabelOrHint\"\n      :for=\"instanceId\"\n      class=\"m-textarea__label\"\n      :class=\"[\n        {\n          'maz-text-danger-600': error,\n          'maz-text-success-600': success,\n          'maz-text-warning-600': warning,\n          '--has-state': error || warning || success,\n          '--should-up': shouldUp,\n        },\n      ]\"\n    >\n      <!-- @slot Label - Replace the label -->\n      <slot v-if=\"!hint\" name=\"label\">\n        {{ label }}\n      </slot>\n      <span v-else>\n        {{ hint }}\n      </span>\n      <sup v-if=\"required\">*</sup>\n    </label>\n    <!-- eslint-enable vuejs-accessibility/label-has-for -->\n\n    <textarea\n      :id=\"instanceId\"\n      ref=\"TextareaElement\"\n      v-bind=\"$attrs\"\n      v-model=\"inputValue\"\n      :placeholder\n      :name\n      :disabled\n      :required\n      :class=\"{ '--has-append': hasAppend }\"\n      v-on=\"{\n        blur,\n        focus,\n        change,\n      }\"\n    />\n    <div v-if=\"hasAppend\" class=\"m-textarea__append\">\n      <!-- @slot Append - Replace the append -->\n      <slot name=\"append\" />\n    </div>\n  </label>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-textarea {\n  @apply maz-min-h-[6.25rem] maz-relative maz-flex maz-flex-col maz-align-top maz-text-normal;\n\n  &:not(.--background-transparent, .--is-disabled) {\n    @apply maz-bg-color dark:maz-bg-color-light;\n  }\n\n  &.--border:not(.--is-disabled) {\n    @apply maz-border maz-border-solid;\n\n    &:not(.--has-border-style) {\n      @apply maz-border-border dark:maz-border-color-lighter;\n    }\n  }\n\n  &.--padding {\n    @apply maz-px-4 maz-py-3;\n  }\n\n  &.--rounded-sm {\n    @apply maz-rounded-sm;\n  }\n\n  &.--rounded-md {\n    @apply maz-rounded-md;\n  }\n\n  &.--rounded-lg {\n    @apply maz-rounded-lg;\n  }\n\n  &.--rounded-xl {\n    @apply maz-rounded-xl;\n  }\n\n  &.--rounded-full {\n    @apply maz-rounded-full;\n  }\n\n  &.--rounded {\n    @apply maz-rounded;\n  }\n\n  &.--has-label {\n    @apply maz-pt-6;\n  }\n\n  &__append {\n    @apply maz-inline-flex;\n\n    justify-content: var(--append-justify);\n  }\n\n  textarea {\n    @apply maz-w-full maz-resize-y maz-outline-none maz-bg-transparent;\n\n    &.--has-append {\n      @apply maz-pb-4;\n    }\n  }\n\n  &.--is-disabled {\n    @apply maz-cursor-not-allowed maz-border-border maz-bg-color-lighter maz-text-muted dark:maz-border-color-lighter;\n\n    & * {\n      @apply maz-cursor-not-allowed maz-text-muted;\n    }\n\n    & > label {\n      @apply maz-text-gray-300 dark:maz-text-gray-600;\n    }\n  }\n\n  &__label {\n    @apply maz-pointer-events-none maz-absolute maz-block maz-w-max maz-origin-top-left maz-truncate;\n    @apply maz-left-4 maz-top-3 maz-leading-6;\n    @apply maz-flex maz-flex-center;\n\n    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n\n    &.--should-up {\n      transform: scale(0.8) translateY(-0.65rem);\n    }\n\n    &:not(.--has-state) {\n      @apply maz-text-muted;\n    }\n  }\n}\n</style>\n"],"names":["TextareaAutogrow","element","__publicField","debounce","props","__props","emits","__emit","textareaAutogrow","instanceId","useInstanceUniqId","TextareaElement","ref","isFocused","hasValue","computed","onMounted","onBeforeUnmount","inputValue","value","focus","event","blur","change","slots","useSlots","hasLabelOrHint","shouldUp","hasAppend","borderStyle","hasBorderStyle"],"mappings":"4bAEO,MAAMA,CAAiB,CAG5B,YAAYC,EAA8B,CAFlCC,EAAA,gBAGN,KAAK,QAAUD,EACf,KAAK,QAAU,KAAK,QAAQ,KAAK,IAAI,EACrC,KAAK,SAAW,KAAK,SAAS,KAAK,IAAI,EACvC,KAAK,SAAWE,EAAAA,SAAS,KAAK,SAAS,KAAK,IAAI,EAAG,GAAG,EACtD,KAAK,QAAQ,CAAA,CAGP,SAAU,CAChB,KAAK,QAAQ,iBAAiB,QAAS,KAAK,OAAO,EAC9C,KAAA,QAAQ,MAAM,OAAS,OACvB,KAAA,QAAQ,MAAM,UAAY,YAAA,CAG1B,YAAa,CACX,OAAA,oBAAoB,SAAU,KAAK,QAAQ,EAClD,KAAK,QAAQ,oBAAoB,QAAS,KAAK,QAAQ,CAAA,CAGjD,SAAU,CAChB,KAAK,SAAS,EACd,KAAK,QAAQ,iBAAiB,QAAS,KAAK,QAAQ,EAC7C,OAAA,iBAAiB,SAAU,KAAK,QAAQ,EAC/C,KAAK,QAAQ,oBAAoB,QAAS,KAAK,OAAO,CAAA,CAGhD,UAAW,CACjB,KAAK,SAAS,CAAA,CAGR,UAAW,CACZ,KAAA,QAAQ,MAAM,OAAS,OACvB,KAAA,QAAQ,MAAM,SAAW,SAC9B,KAAK,QAAQ,MAAM,OAAS,GAAG,KAAK,QAAQ,YAAY,IAAA,CAE5D,21BCiCA,MAAMC,EAAQC,EAsBRC,EAAQC,EA4BV,IAAAC,EAEJ,MAAMC,EAAaC,EAAAA,kBAAkB,CACnC,cAAe,cACf,WAAYN,EAAM,EAAA,CACnB,EAEKO,EAAkBC,EAAAA,IAAyB,EAC3CC,EAAYD,MAAI,EAAK,EACrBE,EAAWC,WAAS,IAAMX,EAAM,aAAe,QAAaA,EAAM,aAAe,EAAE,EAEzFY,EAAAA,UAAU,IAAM,CACVL,EAAgB,QACCH,EAAA,IAAIR,EAAiBW,EAAgB,KAAK,EAC/D,CACD,EAEDM,EAAAA,gBAAgB,IAAM,CACpBT,GAAA,MAAAA,EAAkB,YAAW,CAC9B,EAED,MAAMU,EAAaH,EAAAA,SAAS,CAC1B,IAAK,IAAMX,EAAM,WACjB,IAAMe,GAAU,CACdb,EAAM,qBAAsBa,CAAK,EACjCb,EAAM,QAASa,CAAK,CAAA,CACtB,CACD,EAED,SAASC,EAAMC,EAAmB,CAChCf,EAAM,QAASe,CAAK,EACpBR,EAAU,MAAQ,EAAA,CAGpB,SAASS,EAAKD,EAAmB,CAC/Bf,EAAM,OAAQe,CAAK,EACnBR,EAAU,MAAQ,EAAA,CAGpB,SAASU,EAAOF,EAAc,CAC5Bf,EAAM,SAAUe,CAAK,CAAA,CAGvB,MAAMG,EAAQC,EAAAA,SAAS,EAEjBC,EAAiBX,WAAS,IAAMX,EAAM,OAASA,EAAM,MAAQ,CAAC,CAACoB,EAAM,KAAK,EAE1EG,EAAWZ,EAAA,SACf,IAAMW,EAAe,QAAUb,EAAU,OAASC,EAAS,OAAS,CAAC,CAACV,EAAM,YAC9E,EAEMwB,EAAYb,EAAS,SAAA,IAAM,CAAC,CAACS,EAAM,MAAM,EAGzCK,EAAcd,EAAAA,SAAS,IAAM,CACjC,GAAIX,EAAM,MACD,MAAA,oBACT,GAAIA,EAAM,QACD,MAAA,qBACT,GAAIA,EAAM,QACD,MAAA,qBACT,GAAIS,EAAU,MAAO,CACnB,GAAIT,EAAM,QAAU,QACX,MAAA,mBACT,GAAIA,EAAM,QAAU,SACX,MAAA,oBACT,GAAIA,EAAM,QAAU,OACX,MAAA,kBACT,GAAIA,EAAM,QAAU,UACX,MAAA,qBACT,GAAIA,EAAM,QAAU,YACX,MAAA,uBACT,GAAIA,EAAM,QAAU,UACX,MAAA,qBACT,GAAIA,EAAM,QAAU,UACX,MAAA,qBACT,GAAIA,EAAM,QAAU,QACX,MAAA,kBAAA,CAEJ,MAAA,kBAAA,CACR,EAEK0B,EAAiBf,EAAA,SAAS,IAAMc,EAAY,QAAU,kBAAkB"}