@contena/meteor-component-library 5.5.0

package/dist/esm/MtSnackbar.d.ts

@@ -0,0 +1,6 @@
+export interface HeightT {
+    height: number;
+    snackbarId: string;
+}
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/esm/MtSnackbar.js

@@ -0,0 +1,13 @@
+import '../mt-snackbar.css';
+import { m } from "../mt-snackbar-c97f5abb.mjs";
+import "../_plugin-vue_export-helper-cc2b3d55.mjs";
+import "vue";
+import "./MtSnackbarNotification.js";
+import "../mt-icon.vue_vue_type_style_index_0_lang-c90dc25b.mjs";
+import "./MtText.js";
+import "./MtLink.js";
+import "./MtLoader.js";
+import "../id-1e5b8276.mjs";
+export {
+  m as default
+};

package/dist/esm/MtSnackbarNotification.d.ts

@@ -0,0 +1,42 @@
+import { PropType } from 'vue';
+import { Snackbar } from '../composables/use-snackbar';
+import { HeightT } from '../mt-snackbar';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    snackbar: {
+        type: PropType<Snackbar>;
+        required: true;
+    };
+    isHovered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    heights: {
+        type: PropType<HeightT[]>;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "remove-snackbar": (snackbar: Snackbar) => any;
+    "update:height": (height: HeightT) => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    snackbar: {
+        type: PropType<Snackbar>;
+        required: true;
+    };
+    isHovered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    heights: {
+        type: PropType<HeightT[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    "onRemove-snackbar"?: ((snackbar: Snackbar) => any) | undefined;
+    "onUpdate:height"?: ((height: HeightT) => any) | undefined;
+}>, {
+    isHovered: boolean;
+    heights: HeightT[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    snackbarEl: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/esm/MtSnackbarNotification.js

@@ -0,0 +1,323 @@
+import '../mt-snackbar-notification.css';
+import { defineComponent, ref, computed, toRefs, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, unref, createBlock, createCommentVNode, createVNode, withCtx, createTextVNode, toDisplayString } from "vue";
+import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-c90dc25b.mjs";
+import MtText from "./MtText.js";
+import MtLink from "./MtLink.js";
+import MtLoader from "./MtLoader.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
+const _hoisted_1 = ["role", "aria-live", "data-mounted", "data-removed"];
+const _hoisted_2 = { class: "mt-snackbar-notification__content" };
+const _hoisted_3 = { class: "mt-snackbar-notification__text-content" };
+const _hoisted_4 = {
+  key: 0,
+  class: "mt-snackbar-notification__symbol-container"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "mt-snackbar-notification__progress"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "mt-snackbar-notification",
+  props: {
+    snackbar: {
+      type: Object,
+      required: true
+    },
+    isHovered: {
+      type: Boolean,
+      default: false
+    },
+    heights: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["remove-snackbar", "update:height"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const mounted = ref(false);
+    const removed = ref(false);
+    const offsetBeforeRemove = ref(0);
+    const classes = computed(() => {
+      return {
+        "mt-snackbar-notification--success": snackbar.value.variant === "success" || isUploadComplete.value,
+        "mt-snackbar-notification--error": snackbar.value.variant === "error" || isUploadError.value,
+        "mt-snackbar-notification--progress": snackbar.value.variant === "progress"
+      };
+    });
+    const heightIndex = computed(() => {
+      const index = props.heights.findIndex((height) => height.snackbarId === props.snackbar.id);
+      return index >= 0 ? index : 0;
+    });
+    const toastsHeightBefore = computed(() => {
+      return props.heights.reduce((prev, curr, reducerIndex) => {
+        if (reducerIndex >= heightIndex.value) {
+          return prev;
+        }
+        return prev + curr.height;
+      }, 0);
+    });
+    const offset = computed(() => heightIndex.value * 16 + toastsHeightBefore.value || 0);
+    const progressPercentage = computed(() => {
+      return `(${snackbar.value.progressPercentage || 0}%)`;
+    });
+    const isUploadComplete = computed(() => {
+      return snackbar.value.variant === "progress" && snackbar.value.uploadState === "success";
+    });
+    const isUploadError = computed(() => {
+      return snackbar.value.variant === "progress" && snackbar.value.uploadState === "error";
+    });
+    const isUploading = computed(() => {
+      return snackbar.value.variant === "progress" && !snackbar.value.uploadState;
+    });
+    const displayMessage = computed(() => {
+      if (isUploadComplete.value) {
+        return snackbar.value.successMessage || "Upload completed";
+      }
+      if (isUploadError.value) {
+        return snackbar.value.errorMessage || "Upload failed";
+      }
+      return snackbar.value.message;
+    });
+    const icon = computed(() => {
+      switch (snackbar.value.variant) {
+        case "error":
+          return "solid-exclamation-circle";
+        case "success":
+          return "solid-check-circle";
+        case "progress":
+          if (isUploadComplete.value) {
+            return "solid-check-circle";
+          }
+          if (isUploadError.value) {
+            return "solid-exclamation-circle";
+          }
+          return void 0;
+        default:
+          return void 0;
+      }
+    });
+    const role = computed(() => {
+      switch (snackbar.value.variant) {
+        case "error":
+          return "alert";
+        case "success":
+          return "log";
+        default:
+          return "log";
+      }
+    });
+    const ariaLive = computed(() => {
+      switch (snackbar.value.variant) {
+        case "error":
+        case "warning":
+          return "assertive";
+        case "success":
+        case "progress":
+        default:
+          return "polite";
+      }
+    });
+    const { snackbar, isHovered } = toRefs(props);
+    const snackbarEl = ref(null);
+    const timeoutId = ref(void 0);
+    const successTimeoutId = ref(void 0);
+    const remainingTimeOut = ref(snackbar.value.duration || 5e3);
+    const pausedAt = ref(null);
+    const isPaused = ref(false);
+    const successPausedAt = ref(null);
+    const isSuccessPaused = ref(false);
+    watch(mounted, () => {
+      if (!mounted.value || !snackbarEl.value)
+        return;
+      const snackbarNode = snackbarEl.value;
+      const originalHeight = snackbarNode.style.height;
+      snackbarNode.style.height = "auto";
+      const newHeight = snackbarNode.getBoundingClientRect().height;
+      snackbarNode.style.height = originalHeight;
+      emit("update:height", {
+        snackbarId: props.snackbar.id,
+        height: newHeight
+      });
+    });
+    watch(isHovered, (newIsHovered) => {
+      if (newIsHovered) {
+        pauseTimer();
+        pauseSuccessTimer();
+      } else {
+        resumeTimer();
+        resumeSuccessTimer();
+      }
+    });
+    watch(
+      () => snackbar.value.duration,
+      (newDuration) => {
+        if (snackbar.value.variant === "progress") {
+          return;
+        }
+        if (newDuration === 0) {
+          if (timeoutId.value) {
+            window.clearTimeout(timeoutId.value);
+            timeoutId.value = void 0;
+            remainingTimeOut.value = newDuration || 5e3;
+          }
+          return;
+        }
+        if (!isPaused.value) {
+          timeoutId.value = window.setTimeout(() => {
+            onRemoveSnackbar();
+          }, remainingTimeOut.value);
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => snackbar.value.uploadState,
+      (newUploadState) => {
+        if (snackbar.value.variant === "progress" && (newUploadState === "success" || newUploadState === "error")) {
+          if (!isSuccessPaused.value) {
+            successTimeoutId.value = window.setTimeout(() => {
+              onRemoveSnackbar();
+            }, 2e3);
+          }
+        }
+      }
+    );
+    function pauseTimer() {
+      if (timeoutId.value && !isPaused.value) {
+        window.clearTimeout(timeoutId.value);
+        timeoutId.value = void 0;
+        pausedAt.value = Date.now();
+        isPaused.value = true;
+      }
+    }
+    function resumeTimer() {
+      if (isPaused.value && pausedAt.value) {
+        const elapsed = Date.now() - pausedAt.value;
+        const newRemainingTime = Math.max(0, remainingTimeOut.value - elapsed);
+        remainingTimeOut.value = newRemainingTime;
+        if (newRemainingTime > 0) {
+          timeoutId.value = window.setTimeout(() => {
+            onRemoveSnackbar();
+          }, newRemainingTime);
+        } else {
+          onRemoveSnackbar();
+        }
+        pausedAt.value = null;
+        isPaused.value = false;
+      }
+    }
+    function pauseSuccessTimer() {
+      if (successTimeoutId.value && !isSuccessPaused.value) {
+        window.clearTimeout(successTimeoutId.value);
+        successTimeoutId.value = void 0;
+        successPausedAt.value = Date.now();
+        isSuccessPaused.value = true;
+      }
+    }
+    function resumeSuccessTimer() {
+      if (isSuccessPaused.value && successPausedAt.value) {
+        const elapsed = Date.now() - successPausedAt.value;
+        const newRemainingTime = Math.max(0, 2e3 - elapsed);
+        if (newRemainingTime > 0) {
+          successTimeoutId.value = window.setTimeout(() => {
+            onRemoveSnackbar();
+          }, newRemainingTime);
+        } else {
+          onRemoveSnackbar();
+        }
+        successPausedAt.value = null;
+        isSuccessPaused.value = false;
+      }
+    }
+    function onRemoveSnackbar() {
+      removed.value = true;
+      offsetBeforeRemove.value = offset.value;
+      setTimeout(() => {
+        emit("remove-snackbar", props.snackbar);
+      }, 500);
+    }
+    onMounted(() => {
+      mounted.value = true;
+      if (snackbarEl.value) {
+        snackbarEl.value.focus();
+      }
+    });
+    onBeforeUnmount(() => {
+      if (timeoutId.value) {
+        window.clearTimeout(timeoutId.value);
+      }
+      if (successTimeoutId.value) {
+        window.clearTimeout(successTimeoutId.value);
+      }
+      isPaused.value = false;
+      isSuccessPaused.value = false;
+      pausedAt.value = null;
+      successPausedAt.value = null;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "snackbarEl",
+        ref: snackbarEl,
+        class: normalizeClass(["mt-snackbar-notification", classes.value]),
+        role: role.value,
+        "aria-live": ariaLive.value,
+        tabindex: "0",
+        "data-mounted": mounted.value,
+        "data-removed": removed.value,
+        style: normalizeStyle({
+          "--offset": `${removed.value ? offsetBeforeRemove.value : offset.value}px`
+        })
+      }, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            icon.value || unref(snackbar).variant === "progress" ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              isUploading.value ? (openBlock(), createBlock(MtLoader, {
+                key: 0,
+                class: "mt-snackbar-notification__loader",
+                size: "16px"
+              })) : icon.value ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 1,
+                class: "mt-snackbar-notification__icon",
+                name: icon.value,
+                size: "16px"
+              }, null, 8, ["name"])) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true),
+            createVNode(MtText, {
+              class: "mt-snackbar-notification__message",
+              color: "color-text-primary-default",
+              weight: "medium",
+              size: "xs"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(displayMessage.value), 1)
+              ]),
+              _: 1
+            }),
+            isUploading.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              createElementVNode("span", null, toDisplayString(progressPercentage.value), 1)
+            ])) : createCommentVNode("", true)
+          ]),
+          unref(snackbar).link ? (openBlock(), createBlock(MtLink, {
+            key: 0,
+            class: "mt-snackbar-notification__link",
+            as: "a",
+            variant: "primary",
+            to: unref(snackbar).link.url
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(snackbar).link.text), 1)
+            ]),
+            _: 1
+          }, 8, ["to"])) : createCommentVNode("", true)
+        ])
+      ], 14, _hoisted_1);
+    };
+  }
+});
+const mtSnackbarNotification_vue_vue_type_style_index_0_scoped_2a0f5cd8_lang = "";
+const MtSnackbarNotification = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2a0f5cd8"]]);
+export {
+  MtSnackbarNotification as default
+};

package/dist/esm/MtStatusDot.d.ts

@@ -0,0 +1,32 @@
+type __VLS_Props = {
+    /**
+     * The semantic color of the status dot.
+     *
+     * @values neutral, info, attention, critical, positive
+     */
+    variant?: "neutral" | "info" | "attention" | "critical" | "positive";
+    /**
+     * The diameter of the dot.
+     *
+     * @values s, m, l
+     */
+    size?: "s" | "m" | "l";
+    /**
+     * Adds a pulsating ring around the dot to signal an ongoing, live activity
+     * (e.g. something is currently active or processing). The animation is
+     * disabled for users who prefer reduced motion.
+     */
+    pulse?: boolean;
+    /**
+     * An accessible label describing the status. When omitted the dot is treated
+     * as decorative and hidden from assistive technology.
+     */
+    label?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "s" | "m" | "l";
+    label: string;
+    variant: "neutral" | "info" | "attention" | "critical" | "positive";
+    pulse: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/esm/MtStatusDot.js

@@ -0,0 +1,33 @@
+import '../mt-status-dot.css';
+import { defineComponent, openBlock, createElementBlock, mergeProps } from "vue";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
+const _hoisted_1 = ["role", "aria-label", "aria-hidden"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "mt-status-dot",
+  props: {
+    variant: { default: "neutral" },
+    size: { default: "m" },
+    pulse: { type: Boolean, default: false },
+    label: { default: void 0 }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", mergeProps({
+        class: ["mt-status-dot", [
+          `mt-status-dot--variant-${_ctx.variant}`,
+          `mt-status-dot--size-${_ctx.size}`,
+          { "mt-status-dot--pulse": _ctx.pulse }
+        ]]
+      }, _ctx.$attrs, {
+        role: _ctx.label ? "img" : void 0,
+        "aria-label": _ctx.label || void 0,
+        "aria-hidden": _ctx.label ? void 0 : true
+      }), null, 16, _hoisted_1);
+    };
+  }
+});
+const mtStatusDot_vue_vue_type_style_index_0_scoped_43b8a8ef_lang = "";
+const MtStatusDot = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43b8a8ef"]]);
+export {
+  MtStatusDot as default
+};

package/dist/esm/MtSwitch.d.ts

@@ -0,0 +1,29 @@
+type __VLS_Props = {
+    modelValue?: boolean;
+    label?: string;
+    isInherited?: boolean;
+    isInheritanceField?: boolean;
+    inheritedValue?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    bordered?: boolean;
+    helpText?: string;
+    error?: {
+        detail: string;
+    };
+    removeTopMargin?: boolean;
+    name?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "inheritance-remove": () => any;
+    "inheritance-restore": () => any;
+    "update:modelValue": (value: boolean) => any;
+    change: (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onInheritance-remove"?: (() => any) | undefined;
+    "onInheritance-restore"?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onChange?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/esm/MtSwitch.js

@@ -0,0 +1,20 @@
+import '../mt-switch.css';
+import { _ as _sfc_main } from "../mt-switch.vue_vue_type_style_index_0_lang-4d293db9.mjs";
+import "vue";
+import "./MtFieldError.js";
+import "../mt-icon.vue_vue_type_style_index_0_lang-c90dc25b.mjs";
+import "./MtText.js";
+import "../_plugin-vue_export-helper-cc2b3d55.mjs";
+import "vue-i18n";
+import "./MtFieldLabel.js";
+import "./MtInheritanceSwitch.js";
+import "./MtTooltip.js";
+import "../floating-ui.vue-61aa2b7b.mjs";
+import "../floating-ui.dom-3a2ca2f5.mjs";
+import "../useIsInsideTooltip-0c3bd290.mjs";
+import "../index-431c2592.mjs";
+import "./MtHelpText.js";
+import "../useFutureFlags-af867fe7.mjs";
+export {
+  _sfc_main as default
+};