maz-ui 4.0.0-alpha.5 → 4.0.0-beta.1

package/dist/components/MazCircularProgressBar.js

@@ -0,0 +1,131 @@
+import { defineComponent, defineAsyncComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, createElementVNode, createBlock, unref, renderSlot, createSlots, withCtx, createTextVNode, toDisplayString, normalizeClass } from "vue";
+import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazCircularProgressBar.BYf6ZShT.css';const _hoisted_1 = { class: "outer" }, _hoisted_2 = { class: "inner" }, _hoisted_3 = { key: 0 }, _hoisted_4 = ["id"], _hoisted_5 = ["stop-color"], _hoisted_6 = ["stop-color"], _hoisted_7 = ["stroke-width", "stroke-dashoffset", "stroke", "stroke-linecap"], _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazCircularProgressBar",
+  props: {
+    percentage: {},
+    size: { default: "10em" },
+    duration: { default: 1e3 },
+    delay: { default: 100 },
+    color: {},
+    autoColor: { type: Boolean, default: !1 },
+    prefix: {},
+    suffix: {},
+    strokeLinecap: { default: "round" },
+    strokeWidth: { default: 6 },
+    stroke: {},
+    successPercentage: { default: 100 },
+    warningPercentage: { default: 75 },
+    dangerPercentage: { default: 50 },
+    once: { type: Boolean, default: !0 }
+  },
+  setup(__props) {
+    const MazAnimatedCounter = defineAsyncComponent(() => import("./MazAnimatedCounter.js")), slots = useSlots(), hasPrefix = computed(() => !!__props.prefix || !!slots.prefix), hasSuffix = computed(() => !!__props.suffix || !!slots.suffix), id = useInstanceUniqId({
+      componentName: "MazCircularProgressBar"
+    }), adjustedPercentage = computed(() => __props.percentage > 100 ? 100 : __props.percentage <= 0 ? 0.5 : __props.percentage), currentColor = computed(
+      () => __props.autoColor ? getStatusColor(adjustedPercentage.value) : __props.color
+    );
+    function getStatusColor(percent) {
+      return percent < __props.dangerPercentage || percent > 100 ? "destructive" : percent < __props.warningPercentage ? "warning" : percent >= __props.successPercentage ? "success" : "primary";
+    }
+    const animationDuration = computed(() => `${__props.duration}ms`), dashoffset = computed(() => Math.round(290 - 290 * (adjustedPercentage.value / 100))), isVisible = ref(!1), circleRef = ref(null), hasBeenAnimated = ref(!1);
+    let observer = null;
+    return onMounted(() => {
+      observer = new IntersectionObserver(([entry]) => {
+        (!isVisible.value || !__props.once) && (isVisible.value = entry.isIntersecting), __props.once && circleRef.value && (observer?.unobserve(circleRef.value), circleRef.value?.addEventListener("animationend", () => {
+          hasBeenAnimated.value = !0;
+        }));
+      }), circleRef.value && observer.observe(circleRef.value);
+    }), onBeforeUnmount(() => observer?.disconnect()), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: "m-circular-progress-bar m-reset-css",
+      style: normalizeStyle([
+        {
+          "--animation-duration": animationDuration.value,
+          "--dashoffset": dashoffset.value,
+          "--delay": `${_ctx.delay}ms`
+        },
+        {
+          fontSize: _ctx.size
+        }
+      ])
+    }, [
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          unref(slots).default ? (openBlock(), createElementBlock("span", _hoisted_3, [
+            renderSlot(_ctx.$slots, "default", {}, void 0, !0)
+          ])) : (openBlock(), createBlock(unref(MazAnimatedCounter), {
+            key: 1,
+            count: _ctx.percentage,
+            duration: _ctx.duration,
+            delay: _ctx.delay,
+            once: _ctx.once
+          }, createSlots({ _: 2 }, [
+            hasPrefix.value ? {
+              name: "prefix",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "prefix", {}, () => [
+                  createTextVNode(toDisplayString(_ctx.prefix), 1)
+                ], !0)
+              ]),
+              key: "0"
+            } : void 0,
+            hasSuffix.value ? {
+              name: "suffix",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "suffix", {}, () => [
+                  createTextVNode(toDisplayString(_ctx.suffix), 1)
+                ], !0)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["count", "duration", "delay", "once"]))
+        ])
+      ]),
+      (openBlock(), createElementBlock("svg", {
+        ref_key: "circleRef",
+        ref: circleRef,
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "1em",
+        width: "1em",
+        class: normalizeClass({
+          animate: isVisible.value
+        }),
+        viewBox: "0 0 100 100"
+      }, [
+        createElementVNode("defs", null, [
+          createElementVNode("linearGradient", {
+            id: `${unref(id)}-gradient`,
+            x1: "0",
+            x2: "0",
+            y1: "1",
+            y2: "0"
+          }, [
+            createElementVNode("stop", {
+              offset: "0%",
+              "stop-color": currentColor.value ? `hsl(var(--maz-${currentColor.value}-400))` : "hsl(var(--maz-primary))"
+            }, null, 8, _hoisted_5),
+            createElementVNode("stop", {
+              offset: "100%",
+              "stop-color": currentColor.value ? `hsl(var(--maz-${currentColor.value}-700))` : "hsl(var(--maz-secondary))"
+            }, null, 8, _hoisted_6)
+          ], 8, _hoisted_4)
+        ]),
+        createElementVNode("circle", {
+          cx: "50",
+          cy: "50",
+          r: "46",
+          "stroke-width": _ctx.strokeWidth,
+          "stroke-dasharray": "290",
+          "stroke-dashoffset": hasBeenAnimated.value ? dashoffset.value : 290,
+          stroke: _ctx.stroke ? _ctx.stroke : `url(#${unref(id)}-gradient)`,
+          fill: "none",
+          "stroke-linecap": _ctx.strokeLinecap
+        }, null, 8, _hoisted_7)
+      ], 2))
+    ], 4));
+  }
+}), MazCircularProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-45f7a51d"]]);
+export {
+  MazCircularProgressBar as default
+};

package/dist/components/MazDatePicker.js

@@ -0,0 +1,5 @@
+import { M } from "../chunks/MazDatePicker.CT5yJhSN.js";
+import "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+export {
+  M as default
+};

package/dist/components/MazDialog.js

@@ -0,0 +1,122 @@
+import { defineComponent, createPropsRestProxy, defineAsyncComponent, useAttrs, ref, computed, useSlots, watch, nextTick, createBlock, openBlock, mergeProps, withCtx, createElementVNode, renderSlot, createElementBlock, createCommentVNode, normalizeClass, createTextVNode, toDisplayString, unref } from "vue";
+import { MazXMark } from "@maz-ui/icons";
+import MazBackdrop from "./MazBackdrop.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazDialog.DEmRfAv7.css';const _hoisted_1 = {
+  key: 0,
+  id: "dialogTitle",
+  class: "m-dialog-title"
+}, _hoisted_2 = {
+  key: 0,
+  class: "m-dialog-footer"
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  name: "MazDialog",
+  inheritAttrs: !1,
+  __name: "MazDialog",
+  props: {
+    modelValue: { type: Boolean },
+    title: {},
+    hideCloseButton: { type: Boolean },
+    maxWidth: { default: "100%" },
+    minWidth: { default: "32rem" },
+    scrollable: { type: Boolean },
+    persistent: { type: Boolean },
+    teleportSelector: {},
+    beforeClose: { type: Function },
+    closeOnEscape: { type: Boolean, default: !0 },
+    transitionName: {},
+    backdropClass: {},
+    backdropContentClass: {},
+    contentPadding: { type: Boolean },
+    justify: {},
+    align: {},
+    variant: {}
+  },
+  emits: ["open", "close", "update:model-value"],
+  setup(__props, { expose: __expose }) {
+    const backdropProps = createPropsRestProxy(__props, ["modelValue", "maxWidth", "minWidth", "scrollable", "closeOnEscape"]), MazBtn = defineAsyncComponent(() => import("./MazBtn.js")), attrs = useAttrs(), backdrop = ref();
+    __expose({
+      /**
+       * Close the dialog
+       * @description This is used to close the dialog
+       */
+      close: () => backdrop.value?.close?.()
+    });
+    const wrapperAttrs = computed(() => ({
+      class: attrs.class,
+      style: attrs.style
+    })), dialogContent = ref(), slots = useSlots(), hasFooter = computed(() => !!slots.footer);
+    return __props.scrollable && watch(() => __props.modelValue, async (newVal) => {
+      await nextTick(), newVal && dialogContent.value && setTimeout(() => {
+        dialogContent.value?.scrollTo({ top: 0, behavior: "instant" });
+      }, 0);
+    }), (_ctx, _cache) => (openBlock(), createBlock(MazBackdrop, mergeProps(backdropProps, {
+      ref_key: "backdrop",
+      ref: backdrop,
+      "model-value": _ctx.modelValue,
+      "transition-name": "modal-anim",
+      "aria-labelledby": "dialogTitle",
+      "aria-describedby": "dialogDesc",
+      "close-on-escape": _ctx.closeOnEscape,
+      "content-padding": "",
+      persistent: _ctx.persistent,
+      justify: "center",
+      variant: "dialog",
+      onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close", $event)),
+      onOpen: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("open", $event)),
+      "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:model-value", $event))
+    }), {
+      default: withCtx(({ close, onBackdropClicked }) => [
+        createElementVNode("div", mergeProps({
+          class: ["m-dialog", { "--scrollable": _ctx.scrollable }],
+          role: "dialog",
+          "aria-modal": "true",
+          style: [{ "--max-width": _ctx.maxWidth, "--min-width": _ctx.minWidth }]
+        }, wrapperAttrs.value), [
+          renderSlot(_ctx.$slots, "header", {
+            close,
+            onBackdropClicked
+          }, () => [
+            createElementVNode("div", {
+              class: normalizeClass(["m-dialog-header", { "--has-title": _ctx.$slots.title || _ctx.title }])
+            }, [
+              _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("h2", _hoisted_1, [
+                renderSlot(_ctx.$slots, "title", {}, () => [
+                  createTextVNode(toDisplayString(_ctx.title), 1)
+                ], !0)
+              ])) : createCommentVNode("", !0),
+              !_ctx.hideCloseButton && !_ctx.persistent ? (openBlock(), createBlock(unref(MazBtn), {
+                key: 1,
+                color: "transparent",
+                size: "sm",
+                icon: unref(MazXMark),
+                onClick: close
+              }, null, 8, ["icon", "onClick"])) : createCommentVNode("", !0)
+            ], 2)
+          ], !0),
+          createElementVNode("div", {
+            id: "dialogDesc",
+            ref_key: "dialogContent",
+            ref: dialogContent,
+            class: normalizeClass(["m-dialog-content", { "--bottom-padding": !hasFooter.value }])
+          }, [
+            renderSlot(_ctx.$slots, "default", {
+              close,
+              onBackdropClicked
+            }, void 0, !0)
+          ], 2),
+          hasFooter.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            renderSlot(_ctx.$slots, "footer", {
+              close,
+              onBackdropClicked
+            }, void 0, !0)
+          ])) : createCommentVNode("", !0)
+        ], 16)
+      ]),
+      _: 3
+    }, 16, ["model-value", "close-on-escape", "persistent"]));
+  }
+}), MazDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3c825a5c"]]);
+export {
+  MazDialog as default
+};

package/dist/components/MazDialogPromise.js

@@ -0,0 +1,6 @@
+import { _ as _sfc_main } from "../chunks/MazDialogPromise.vue_vue_type_script_setup_true_lang.BQvDEofz.js";
+import { u } from "../chunks/MazDialogPromise.vue_vue_type_script_setup_true_lang.BQvDEofz.js";
+export {
+  _sfc_main as default,
+  u as useMazDialogPromise
+};

package/dist/components/MazDrawer.js

@@ -0,0 +1,70 @@
+import { defineComponent, defineAsyncComponent, computed, useSlots, createBlock, openBlock, withCtx, createElementVNode, normalizeStyle, normalizeClass, createElementBlock, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createVNode, unref } from "vue";
+import { MazXMark } from "@maz-ui/icons";
+import MazBackdrop from "./MazBackdrop.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazDrawer.Dodd-EmX.css';const _hoisted_1 = { class: "m-drawer-header__title" }, _hoisted_2 = {
+  key: 0,
+  class: "m-drawer-header__close"
+}, _hoisted_3 = { class: "m-drawer-body" }, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazDrawer",
+  props: {
+    title: { default: void 0 },
+    variant: { default: "right" },
+    size: { default: "30rem" },
+    backdropClass: { default: void 0 },
+    hideCloseButton: { type: Boolean }
+  },
+  emits: ["before-close", "open", "close", "update:model-value"],
+  setup(__props) {
+    const props = __props, MazBtn = defineAsyncComponent(() => import("./MazBtn.js")), justify = computed(() => props.variant === "left" ? "start" : props.variant === "right" ? "end" : "none"), align = computed(() => props.variant === "top" ? "start" : props.variant === "bottom" ? "end" : "none"), slots = useSlots(), hasTitle = computed(() => !!(props.title || slots.title));
+    return (_ctx, _cache) => (openBlock(), createBlock(MazBackdrop, {
+      "backdrop-class": ["m-drawer", _ctx.backdropClass],
+      justify: justify.value,
+      align: align.value,
+      variant: "drawer",
+      "transition-name": `drawer-anim-${_ctx.variant}`,
+      onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close")),
+      onOpen: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("open")),
+      onBeforeClose: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("before-close")),
+      "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.$emit("update:model-value", $event))
+    }, {
+      default: withCtx(({ close }) => [
+        createElementVNode("div", {
+          class: normalizeClass(["m-drawer-content-wrap", [`--${_ctx.variant}`]]),
+          style: normalizeStyle({
+            "--maz-drawer-size": _ctx.size
+          })
+        }, [
+          createElementVNode("header", {
+            class: normalizeClass(["m-drawer-header", [hasTitle.value ? "--justify-between" : "--justify-end"]])
+          }, [
+            createElementVNode("h4", _hoisted_1, [
+              renderSlot(_ctx.$slots, "title", { close }, () => [
+                createTextVNode(toDisplayString(_ctx.title), 1)
+              ], !0)
+            ]),
+            _ctx.hideCloseButton ? createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_2, [
+              createVNode(unref(MazBtn), {
+                size: "sm",
+                color: "transparent",
+                onClick: close
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(MazXMark), { class: "icon maz-text-lg" })
+                ]),
+                _: 2
+              }, 1032, ["onClick"])
+            ]))
+          ], 2),
+          createElementVNode("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "default", { close }, void 0, !0)
+          ])
+        ], 6)
+      ]),
+      _: 3
+    }, 8, ["backdrop-class", "justify", "align", "transition-name"]));
+  }
+}), MazDrawer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8eec10d0"]]);
+export {
+  MazDrawer as default
+};

package/dist/components/MazDropdown.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/MazDropdown.vue_vue_type_style_index_0_lang.abk1IbMX.js";
+export {
+  _sfc_main as default
+};