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

package/dist/components/MazPopover.js

@@ -0,0 +1,357 @@
+import { defineComponent, mergeModels, useAttrs, useTemplateRef, useModel, ref, computed, nextTick, watch, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createBlock, mergeProps, renderSlot, Teleport, createVNode, Transition, withCtx, withDirectives, createCommentVNode } from "vue";
+import { i as isClient } from "../chunks/isClient.WI4oSt66.js";
+import { t as throttle } from "../chunks/throttle.DN8ARw0a.js";
+import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
+import { vClickOutside as directive } from "../directives/vClickOutside.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazPopover.Bth9NWia.css';const _hoisted_1 = ["id", "aria-expanded", "aria-haspopup", "aria-describedby", "aria-labelledby"], _hoisted_2 = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby", "aria-modal", "tabindex", "aria-live"], _sfc_main = /* @__PURE__ */ defineComponent({
+  name: "MazPopover",
+  inheritAttrs: !1,
+  __name: "MazPopover",
+  props: /* @__PURE__ */ mergeModels({
+    modelValue: { type: Boolean },
+    position: { default: "auto" },
+    preferPosition: {},
+    fallbackPosition: {},
+    trigger: { default: "click" },
+    role: { default: "dialog" },
+    ariaLabel: {},
+    announceChanges: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    offset: { default: 8 },
+    delay: { default: 0 },
+    hoverDelay: { default: 200 },
+    transition: { default: "maz-popover" },
+    teleportTo: { default: "body" },
+    overlayClass: {},
+    panelClass: {},
+    panelStyle: {},
+    closeOnClickOutside: { type: Boolean, default: !0 },
+    closeOnEscape: { type: Boolean, default: !0 },
+    persistent: { type: Boolean, default: !1 },
+    id: {},
+    ariaLabelledby: {},
+    ariaDescribedby: {},
+    color: { default: "background" },
+    trapFocus: { type: Boolean, default: !0 },
+    keepOpenOnHover: { type: Boolean, default: !1 },
+    block: { type: Boolean, default: !1 },
+    positionDelay: { default: 50 }
+  }, {
+    modelValue: { type: Boolean, required: !1, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:model-value", "open", "close", "toggle"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emits = __emit, triggerId = useInstanceUniqId({
+      componentName: "MazPopover",
+      providedId: __props.id
+    }), attrs = useAttrs(), triggerElement = useTemplateRef("trigger"), panelElement = useTemplateRef("panel"), isOpen = useModel(__props, "modelValue"), computedPosition = ref(__props.position);
+    let openTimeout = null, closeTimeout = null, initialFocusElement = null, ignoreNextClickOutside = !1;
+    const panelId = computed(() => `${triggerId.value}-panel`), panelStyles = ref(), rootStyles = computed(() => attrs.style), triggerEvents = computed(() => {
+      if (__props.disabled || __props.trigger === "manual")
+        return {};
+      const events = {};
+      return __props.trigger === "hover" && (events.onMouseenter = () => {
+        clearCloseTimeout(), open();
+      }, events.onMouseleave = close), __props.trigger === "click" && (events.onClick = toggle), events;
+    }), panelEvents = computed(() => __props.trigger !== "hover" ? {} : {
+      onMouseenter: () => {
+        __props.keepOpenOnHover && clearCloseTimeout();
+      },
+      onMouseleave: () => {
+        __props.keepOpenOnHover && close();
+      }
+    }), panelClasses = computed(() => [
+      __props.overlayClass,
+      __props.panelClass,
+      `--position-${computedPosition.value}`,
+      `--${__props.color}`
+    ]);
+    let resizeObserver = null, mutationObserver = null, isUpdatingPosition = !1;
+    function updatePosition() {
+      if (!triggerElement.value || !panelElement.value || isUpdatingPosition)
+        return;
+      isUpdatingPosition = !0;
+      const viewport = { width: window.innerWidth, height: window.innerHeight }, scrollTop = window.scrollY || document.documentElement.scrollTop, scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+      let newPosition;
+      const triggerRect = triggerElement.value.getBoundingClientRect();
+      __props.position === "auto" ? newPosition = getBestPosition(triggerRect, viewport) : newPosition = __props.position;
+      const panelRect = panelElement.value.getBoundingClientRect(), coordinates = calculatePosition(newPosition, triggerRect, panelRect, scrollTop, scrollLeft);
+      panelStyles.value = {
+        position: "absolute",
+        top: `${coordinates.top}px`,
+        left: `${coordinates.left}px`,
+        visibility: "visible"
+      }, computedPosition.value = newPosition, isUpdatingPosition = !1;
+    }
+    const trottledUpdatePosition = throttle(() => {
+      isOpen.value && !isUpdatingPosition && nextTick(updatePosition);
+    }, 16);
+    function setupObservers() {
+      panelElement.value && (window.ResizeObserver && (resizeObserver = new ResizeObserver(() => {
+        isUpdatingPosition || trottledUpdatePosition();
+      }), resizeObserver.observe(panelElement.value)), mutationObserver = new MutationObserver((mutations) => {
+        if (isUpdatingPosition)
+          return;
+        mutations.filter((mutation) => mutation.target === panelElement.value && mutation.type === "attributes" && mutation.attributeName === "style" ? !1 : mutation.type === "childList" || mutation.type === "attributes" && mutation.attributeName === "class" && mutation.target !== panelElement.value).length > 0 && trottledUpdatePosition();
+      }), mutationObserver.observe(panelElement.value, {
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["class"]
+      }));
+    }
+    function cleanupObservers() {
+      resizeObserver && (resizeObserver.disconnect(), resizeObserver = null), mutationObserver && (mutationObserver.disconnect(), mutationObserver = null);
+    }
+    function open() {
+      __props.disabled || (clearCloseTimeout(), ignoreNextClickOutside = !0, __props.delay > 0 ? openTimeout = setTimeout(() => {
+        setOpen(!0);
+      }, __props.delay) : setOpen(!0));
+    }
+    function close() {
+      clearOpenTimeout(), __props.delay > 0 && __props.trigger === "hover" ? closeTimeout = setTimeout(() => {
+        setOpen(!1);
+      }, __props.delay) : __props.trigger === "hover" && __props.keepOpenOnHover ? closeTimeout = setTimeout(() => {
+        setOpen(!1);
+      }, __props.hoverDelay) : setOpen(!1);
+    }
+    function toggle() {
+      isOpen.value ? close() : open();
+    }
+    function setOpen(value) {
+      isOpen.value = value, emits("toggle", value), value ? (emits("open"), setupFocusTrap(), nextTick(() => {
+        setTimeout(() => {
+          updatePosition(), setupObservers();
+        }, __props.positionDelay);
+      })) : (emits("close"), panelStyles.value = void 0, ignoreNextClickOutside = !1, cleanupObservers(), __props.trapFocus && restoreFocus());
+    }
+    function clearOpenTimeout() {
+      openTimeout && (clearTimeout(openTimeout), openTimeout = null);
+    }
+    function clearCloseTimeout() {
+      closeTimeout && (clearTimeout(closeTimeout), closeTimeout = null);
+    }
+    function getIsVisible(coords, panelRect, viewport, scrollTop, scrollLeft) {
+      return coords.left >= scrollLeft && coords.left + panelRect.width <= scrollLeft + viewport.width && coords.top >= scrollTop && coords.top + panelRect.height <= scrollTop + viewport.height;
+    }
+    function isPositionVisible(position, triggerRect, panelRect, viewport, scrollTop, scrollLeft) {
+      const coords = calculatePosition(position, triggerRect, panelRect, scrollTop, scrollLeft);
+      return getIsVisible(coords, panelRect, viewport, scrollTop, scrollLeft);
+    }
+    function getValidPositions(positions, triggerRect, panelRect, viewport, scrollTop, scrollLeft) {
+      const spaces = {
+        bottom: viewport.height + scrollTop - triggerRect.bottom,
+        top: triggerRect.top - scrollTop,
+        right: viewport.width + scrollLeft - triggerRect.right,
+        left: triggerRect.left - scrollLeft
+      };
+      return positions.reduce((acc, pos) => {
+        if (isPositionVisible(pos, triggerRect, panelRect, viewport, scrollTop, scrollLeft)) {
+          let positionBonus = 0;
+          pos === "bottom" ? positionBonus = 1e3 : pos === "top" ? positionBonus = 800 : pos === "right" ? positionBonus = 600 : pos === "left" && (positionBonus = 400);
+          const score = spaces[pos] + positionBonus;
+          acc.push({ position: pos, score });
+        }
+        return acc;
+      }, []);
+    }
+    function getBestPosition(triggerRect, viewport) {
+      if (!panelElement.value)
+        return "bottom";
+      const panelRect = panelElement.value.getBoundingClientRect(), scrollTop = window.scrollY || document.documentElement.scrollTop, scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+      if (__props.preferPosition && isPositionVisible(__props.preferPosition, triggerRect, panelRect, viewport, scrollTop, scrollLeft))
+        return __props.preferPosition;
+      if (__props.preferPosition && __props.fallbackPosition)
+        return __props.fallbackPosition;
+      const positions = ["bottom", "top", "right", "left"], validPositions = getValidPositions(positions, triggerRect, panelRect, viewport, scrollTop, scrollLeft);
+      if (validPositions.length === 0) {
+        const spaces = {
+          top: triggerRect.top,
+          bottom: viewport.height - triggerRect.bottom,
+          left: triggerRect.left,
+          right: viewport.width - triggerRect.right
+        };
+        return positions.sort((a, b) => spaces[b] - spaces[a])[0];
+      }
+      return validPositions.sort((a, b) => b.score - a.score)[0].position;
+    }
+    function calculatePosition(position, triggerRect, panelRect, scrollTop, scrollLeft) {
+      let top = 0, left = 0;
+      switch (position) {
+        case "top":
+        case "top-start":
+        case "top-end":
+          top = triggerRect.top + scrollTop - panelRect.height - __props.offset, position === "top-start" ? left = triggerRect.left + scrollLeft : position === "top-end" ? left = triggerRect.right + scrollLeft - panelRect.width : left = triggerRect.left + scrollLeft + (triggerRect.width - panelRect.width) / 2;
+          break;
+        case "bottom":
+        case "bottom-start":
+        case "bottom-end":
+          top = triggerRect.bottom + scrollTop + __props.offset, position === "bottom-start" ? left = triggerRect.left + scrollLeft : position === "bottom-end" ? left = triggerRect.right + scrollLeft - panelRect.width : left = triggerRect.left + scrollLeft + (triggerRect.width - panelRect.width) / 2;
+          break;
+        case "left":
+        case "left-start":
+        case "left-end":
+          left = triggerRect.left + scrollLeft - panelRect.width - __props.offset, position === "left-start" ? top = triggerRect.top + scrollTop : position === "left-end" ? top = triggerRect.bottom + scrollTop - panelRect.height : top = triggerRect.top + scrollTop + (triggerRect.height - panelRect.height) / 2;
+          break;
+        case "right":
+        case "right-start":
+        case "right-end":
+          left = triggerRect.right + scrollLeft + __props.offset, position === "right-start" ? top = triggerRect.top + scrollTop : position === "right-end" ? top = triggerRect.bottom + scrollTop - panelRect.height : top = triggerRect.top + scrollTop + (triggerRect.height - panelRect.height) / 2;
+          break;
+      }
+      return { top, left };
+    }
+    function setupFocusTrap() {
+      __props.role === "tooltip" || __props.role === "menu" || __props.trigger === "hover" || !__props.trapFocus || (initialFocusElement = document.activeElement, nextTick(() => {
+        const focusableElements = panelElement.value?.querySelectorAll(
+          'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])'
+        );
+        focusableElements && focusableElements.length > 0 ? focusableElements[0].focus({ preventScroll: !0 }) : panelElement.value?.focus({ preventScroll: !0 });
+      }));
+    }
+    function restoreFocus() {
+      __props.role === "tooltip" || __props.role === "menu" || __props.trigger === "hover" || !__props.trapFocus || nextTick(() => {
+        initialFocusElement?.focus({ preventScroll: !0 });
+      });
+    }
+    function onKeydown(event) {
+      isOpen.value && (event.key === "Escape" && __props.closeOnEscape && !__props.persistent && (event.preventDefault(), close()), (__props.role === "dialog" || __props.role === "menu") && event.key === "Tab" && handleTrapFocus(event));
+    }
+    function handleTrapFocus(event) {
+      if (!panelElement.value)
+        return;
+      const focusableElements = panelElement.value.querySelectorAll(
+        'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusableElements.length === 0)
+        return;
+      const firstElement = focusableElements[0], lastElement = focusableElements[focusableElements.length - 1];
+      event.shiftKey ? document.activeElement === firstElement && (event.preventDefault(), lastElement.focus()) : document.activeElement === lastElement && (event.preventDefault(), firstElement.focus());
+    }
+    function onClickOutside(event) {
+      if (__props.trigger !== "manual") {
+        if (ignoreNextClickOutside) {
+          ignoreNextClickOutside = !1;
+          return;
+        }
+        if (__props.closeOnClickOutside && !__props.persistent) {
+          if (triggerElement.value && triggerElement.value.contains(event.target))
+            return;
+          close();
+        }
+      }
+    }
+    function onScroll() {
+      isOpen.value && updatePosition();
+    }
+    return watch(isOpen, (value, oldValue) => {
+      !isClient() || value === oldValue || (value ? open() : oldValue && !value && close());
+    }, { immediate: !0 }), watch(() => __props.position, () => {
+      isOpen.value && nextTick(updatePosition);
+    }), onMounted(() => {
+      document.addEventListener("keydown", onKeydown), window.addEventListener("scroll", onScroll, !0), window.addEventListener("resize", onScroll);
+    }), onUnmounted(() => {
+      document.removeEventListener("keydown", onKeydown), window.removeEventListener("scroll", onScroll, !0), window.removeEventListener("resize", onScroll), clearOpenTimeout(), clearCloseTimeout(), cleanupObservers();
+    }), __expose({
+      /**
+       * Open the popover
+       * @description Programmatically open the popover
+       * @usage `mazPopoverInstance.value?.open()`
+       */
+      open,
+      /**
+       * Close the popover
+       * @description Programmatically close the popover
+       * @usage `mazPopoverInstance.value?.close()`
+       */
+      close,
+      /**
+       * Toggle the popover
+       * @description Programmatically toggle the popover open/close state
+       * @usage `mazPopoverInstance.value?.toggle()`
+       */
+      toggle,
+      /**
+       * Check if the popover is open
+       * @type {Ref<boolean>}
+       * @description Reactive reference to the popover open state
+       * @usage `const isPopoverOpen = mazPopoverInstance.value?.isOpen`
+       */
+      isOpen: computed(() => isOpen.value),
+      /**
+       * Update the popover position
+       * @description Manually recalculate and update the popover position
+       * @usage `mazPopoverInstance.value?.updatePosition()`
+       */
+      updatePosition
+    }), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass(["m-popover m-reset-css", [
+        unref(attrs).class,
+        {
+          "--open": isOpen.value,
+          "--disabled": _ctx.disabled,
+          "--block": _ctx.block
+        }
+      ]]),
+      style: normalizeStyle(rootStyles.value)
+    }, [
+      createElementVNode("div", mergeProps({
+        id: unref(triggerId),
+        ref: "trigger",
+        class: "m-popover-trigger",
+        "aria-expanded": _ctx.role === "dialog" || _ctx.role === "menu" ? isOpen.value : void 0,
+        "aria-haspopup": _ctx.role === "dialog" ? "dialog" : void 0,
+        "aria-describedby": _ctx.role === "tooltip" && isOpen.value ? panelId.value : _ctx.ariaDescribedby,
+        "aria-labelledby": _ctx.ariaLabelledby
+      }, triggerEvents.value), [
+        renderSlot(_ctx.$slots, "trigger", {
+          open,
+          close,
+          toggle,
+          isOpen: isOpen.value
+        }, void 0, !0)
+      ], 16, _hoisted_1),
+      (openBlock(), createBlock(Teleport, {
+        to: _ctx.teleportTo,
+        disabled: !isOpen.value
+      }, [
+        createVNode(Transition, {
+          name: _ctx.transition,
+          appear: ""
+        }, {
+          default: withCtx(() => [
+            isOpen.value ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
+              key: 0,
+              id: panelId.value,
+              ref: "panel",
+              role: _ctx.role,
+              "aria-label": _ctx.ariaLabel,
+              "aria-labelledby": _ctx.role === "dialog" ? _ctx.ariaLabelledby || unref(triggerId) : void 0,
+              "aria-describedby": _ctx.role === "dialog" ? _ctx.ariaDescribedby : void 0,
+              "aria-modal": _ctx.role === "dialog" ? "true" : void 0,
+              tabindex: _ctx.role === "dialog" ? "-1" : void 0,
+              class: ["m-popover-panel", panelClasses.value],
+              "aria-live": _ctx.announceChanges ? "polite" : void 0,
+              style: [panelStyles.value, _ctx.panelStyle]
+            }, panelEvents.value), [
+              renderSlot(_ctx.$slots, "default", {
+                open,
+                close,
+                toggle,
+                isOpen: isOpen.value
+              }, void 0, !0)
+            ], 16, _hoisted_2)), [
+              [unref(directive), onClickOutside]
+            ]) : createCommentVNode("", !0)
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ], 8, ["to", "disabled"]))
+    ], 6));
+  }
+}), MazPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b1c9acfd"]]);
+export {
+  MazPopover as default
+};

package/dist/components/MazPullToRefresh.js

@@ -0,0 +1,145 @@
+import { defineComponent, defineAsyncComponent, computed, ref, watch, onUnmounted, createElementBlock, openBlock, normalizeClass, createCommentVNode, renderSlot, normalizeStyle, createElementVNode, createVNode, unref } from "vue";
+import { i as isClient } from "../chunks/isClient.WI4oSt66.js";
+import { i as isStandaloneMode } from "../chunks/isStandaloneMode.BpUpOTbA.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazPullToRefresh.DABqbGtK.css';const _hoisted_1 = {
+  key: 0,
+  class: "header-text"
+}, _hoisted_2 = {
+  key: 1,
+  class: "header-text"
+}, _hoisted_3 = {
+  key: 2,
+  class: "header-text"
+}, _hoisted_4 = { class: "maz-flex maz-flex-col maz-flex-center" }, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazPullToRefresh",
+  props: {
+    distance: { default: 100 },
+    offset: { default: 0 },
+    onClick: { type: Function, default: void 0 },
+    containerSelector: { default: void 0 },
+    headerClass: { default: void 0 },
+    spinnerColor: { default: "contrast" },
+    disabled: { type: Boolean, default: !1 },
+    standaloneMode: { type: Boolean, default: !1 }
+  },
+  emits: ["loaded", "start", "error", "finish", "response"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, emits = __emit, MazSpinner = defineAsyncComponent(() => import("./MazSpinner.js")), isDisabled = computed(
+      () => props.disabled || props.onClick === void 0 || props.standaloneMode && isClient() && !isStandaloneMode()
+    ), margin = ref({
+      top: 0,
+      bottom: 0
+    }), pull = ref({
+      from: -1,
+      to: -1,
+      distance: 0,
+      available: !1,
+      state: "end"
+    }), internalLoading = ref(!1), container = computed(() => {
+      if (typeof document > "u" || isDisabled.value)
+        return;
+      const element = props.containerSelector ? document.querySelector(props.containerSelector) : document.body;
+      if (!element)
+        throw new Error("MazPullToRefresh - container not found");
+      return element;
+    }), pullHeight = computed(() => pull.value.state !== "move" && pull.value.state !== "end" || isDisabled.value ? 0 : pull.value.distance > props.distance ? props.distance : pull.value.distance);
+    function updateView(container2) {
+      const { top, height } = container2.getBoundingClientRect();
+      margin.value = {
+        top,
+        bottom: window.innerHeight - (height + top + props.offset)
+      };
+    }
+    function setLoading(type) {
+      internalLoading.value = type;
+    }
+    function handleTouchStart(event) {
+      if (internalLoading.value || margin.value.top < 0 && margin.value.bottom < 0 || isDisabled.value)
+        return;
+      const item = event.touches.item(0);
+      item && (pull.value.state = "start", pull.value.from = item.pageY);
+    }
+    function handleTouchMove(event) {
+      if (internalLoading.value || pull.value.from < 0 || window.scrollY > 0 || isDisabled.value)
+        return;
+      const item = event.touches.item(0);
+      if (!item)
+        return;
+      pull.value.to = item.pageY;
+      const distance = pull.value.to - pull.value.from;
+      pull.value.distance = distance > 0 ? distance : 0, pull.value.available = pull.value.distance >= props.distance, pull.value.state = "move";
+    }
+    function handleTouchEnd() {
+      internalLoading.value || isDisabled.value || (pullHeight.value === props.distance && pull.value.state === "move" && window.scrollY <= 0 ? runAction() : resetPull());
+    }
+    function resetPull() {
+      pull.value = {
+        from: -1,
+        to: -1,
+        distance: 0,
+        available: !1,
+        state: "end"
+      };
+    }
+    async function runAction() {
+      try {
+        setLoading(!0), emits("start");
+        const response = await props.onClick?.();
+        emits("loaded"), emits("response", response);
+      } catch (error) {
+        throw emits("error", error), error;
+      } finally {
+        resetPull(), setLoading(!1), emits("finish");
+      }
+    }
+    watch(
+      () => isDisabled.value,
+      (disabled) => {
+        disabled === !0 ? removeEvents() : initComponentAndEvents();
+      },
+      { immediate: !0 }
+    );
+    function initComponentAndEvents() {
+      !container.value || isDisabled.value || document === void 0 || (container.value.addEventListener("touchstart", handleTouchStart), container.value.addEventListener("touchmove", handleTouchMove), container.value.addEventListener("touchend", handleTouchEnd), updateView(container.value));
+    }
+    function removeEvents() {
+      !container.value || document === void 0 || (container.value.removeEventListener("touchstart", handleTouchStart), container.value.removeEventListener("touchmove", handleTouchMove), container.value.removeEventListener("touchend", handleTouchEnd));
+    }
+    return onUnmounted(() => {
+      removeEvents();
+    }), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass(["m-pull-to-refresh m-reset-css", { "--available": pull.value.available || pullHeight.value > 10 }])
+    }, [
+      isDisabled.value ? createCommentVNode("", !0) : (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["loading-header", _ctx.headerClass]),
+        style: normalizeStyle({ height: `${pullHeight.value}px` })
+      }, [
+        pull.value.available ? pull.value.available && !internalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "pull-ready", {}, () => [
+            _cache[1] || (_cache[1] = createElementVNode("span", null, " Release to refresh ", -1))
+          ], !0)
+        ])) : createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_1, [
+          renderSlot(_ctx.$slots, "pull-before", {}, () => [
+            _cache[0] || (_cache[0] = createElementVNode("span", null, "Pull to refresh", -1))
+          ], !0)
+        ])),
+        internalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "pull-loading", {}, () => [
+            createElementVNode("div", _hoisted_4, [
+              createVNode(unref(MazSpinner), {
+                color: _ctx.spinnerColor,
+                size: "2.5em"
+              }, null, 8, ["color"])
+            ])
+          ], !0)
+        ])) : createCommentVNode("", !0)
+      ], 6)),
+      renderSlot(_ctx.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), MazPullToRefresh = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9970b6df"]]);
+export {
+  MazPullToRefresh as default
+};

package/dist/components/MazRadio.js

@@ -0,0 +1,111 @@
+import { defineComponent, computed, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, mergeProps, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from "vue";
+import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazRadio.DKMFWwy_.css';const _hoisted_1 = ["for", "aria-checked"], _hoisted_2 = ["id", "value", "disabled", "name", "checked"], _hoisted_3 = { class: "m-radio__text" }, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazRadio",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    id: { default: void 0 },
+    modelValue: { default: void 0 },
+    value: {},
+    name: {},
+    label: { default: void 0 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 },
+    error: { type: Boolean },
+    success: { type: Boolean },
+    warning: { type: Boolean },
+    hint: {}
+  },
+  emits: ["update:model-value", "change", "blur", "focus"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, emits = __emit, instanceId = useInstanceUniqId({
+      componentName: "MazRadio",
+      providedId: props.id
+    }), isSelected = computed(() => props.modelValue === props.value), radioSize = computed(() => {
+      switch (props.size) {
+        case "xl":
+          return "2.25rem";
+        case "lg":
+          return "2rem";
+        case "sm":
+          return "1.425rem";
+        case "xs":
+          return "1.325rem";
+        case "mini":
+          return "1.2rem";
+        default:
+          return "1.625rem";
+      }
+    }), radioSelectedColor = computed(() => `hsl(var(--maz-${props.color}))`), radioBoxShadow = computed(() => {
+      if (props.error)
+        return "hsl(var(--maz-destructive))";
+      if (props.warning)
+        return "hsl(var(--maz-warning))";
+      if (props.success)
+        return "hsl(var(--maz-success))";
+    });
+    function keyboardHandler(event) {
+      ["Space"].includes(event.code) && (event.preventDefault(), emitValue());
+    }
+    function emitValue() {
+      emits("update:model-value", props.value), emits("change", props.value);
+    }
+    const inputRef = ref();
+    function onBlur(event) {
+      inputRef.value?.dispatchEvent(new Event("blur")), emits("blur", event);
+    }
+    function onFocus(event) {
+      inputRef.value?.dispatchEvent(new Event("focus")), emits("focus", event);
+    }
+    return (_ctx, _cache) => (openBlock(), createElementBlock("label", {
+      for: unref(instanceId),
+      class: normalizeClass(["m-radio m-reset-css", [{ "--disabled": _ctx.disabled, "--selected": isSelected.value, "--error": _ctx.error, "--warning": _ctx.warning, "--success": _ctx.success }, props.class]]),
+      tabindex: "0",
+      role: "radio",
+      style: normalizeStyle([_ctx.style, { "--radio-size": radioSize.value, "--radio-selected-color": radioSelectedColor.value, "--radio-box-shadow": radioBoxShadow.value }]),
+      "aria-checked": isSelected.value,
+      onBlur,
+      onFocus,
+      onKeydown: keyboardHandler
+    }, [
+      createElementVNode("input", mergeProps({
+        id: unref(instanceId),
+        ref_key: "inputRef",
+        ref: inputRef,
+        value: _ctx.value
+      }, _ctx.$attrs, {
+        tabindex: "-1",
+        disabled: _ctx.disabled,
+        name: _ctx.name,
+        type: "radio",
+        checked: isSelected.value,
+        onChange: _cache[0] || (_cache[0] = ($event) => emitValue())
+      }), null, 16, _hoisted_2),
+      _cache[1] || (_cache[1] = createElementVNode("span", null, [
+        createElementVNode("span", { class: "round" })
+      ], -1)),
+      createElementVNode("div", _hoisted_3, [
+        renderSlot(_ctx.$slots, "default", {
+          isSelected: isSelected.value,
+          value: _ctx.value
+        }, () => [
+          createTextVNode(toDisplayString(_ctx.label), 1)
+        ], !0),
+        _ctx.hint ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: normalizeClass(["m-radio__hint", {
+            "--error": _ctx.error,
+            "--success": _ctx.success,
+            "--warning": _ctx.warning
+          }])
+        }, toDisplayString(_ctx.hint), 3)) : createCommentVNode("", !0)
+      ])
+    ], 46, _hoisted_1));
+  }
+}), MazRadio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3752b2a5"]]);
+export {
+  MazRadio as default
+};