@codeandfunction/callaloo 3.15.3 → 3.16.1

package/dist/chunks/CLToast.vue_vue_type_style_index_0_lang-DOI4DZGg.js

@@ -0,0 +1,178 @@
+import { defineComponent as U, useCssVars as F, ref as b, computed as P, watch as X, onMounted as Z, onUnmounted as j, onBeforeUnmount as q, createElementBlock as k, openBlock as u, normalizeStyle as G, normalizeClass as c, unref as a, createElementVNode as g, createBlock as x, createCommentVNode as $, createVNode as L, withCtx as z, createTextVNode as S, toDisplayString as _, isRef as J } from "vue";
+import { _ as M } from "./CLButton.vue_vue_type_style_index_0_lang-CrhjC50b.js";
+import { _ as K } from "./CLIcon.vue_vue_type_style_index_0_lang-CZB8svPf.js";
+import { _ as O } from "./CLProgress.vue_vue_type_style_index_0_lang-CSf7WiNb.js";
+import { _ as Q } from "./CLText.vue_vue_type_style_index_0_lang-V7LSR7DF.js";
+import { _ as W } from "./CLHeading.vue_vue_type_style_index_0_lang-DILwNSgn.js";
+import { CLMode as R, CLColorVariants as N, CLToastPosition as Y, CLIconSizes as B, CLColors as C, CLHeadingTypes as p, CLTextTypes as I, CLSizes as w, CLIconNames as ee } from "../index.js";
+import { i as A, g as te, e as oe } from "./base-theme-C9_Hz5HW.js";
+import { u as ae } from "./useEsc-C9QIDZ_8.js";
+import { u as se, g as ie, c as E, a as le } from "./useTheme-yoEfuNvB.js";
+const ne = ({ color: e, variant: t }) => {
+  const { borderRadius: y, colors: d, darkMode: n } = se(), s = n.value ? R.Dark : R.Light, r = ie({
+    color: e,
+    colors: d.value,
+    mode: s,
+    variant: t
+  }), T = n.value ? "black" : "white";
+  let m;
+  return y.value && (m = E`&:not([class*='clll-toast--rounded-']){&.clll-toast.clll-toast--rounded{border-radius:var(--clll-${y.value});}}`), le(E`background-color:${T};color:${r?.text};.clll-toast__body{.clll-toast__content{.clll-toast__icon{background-color:${r?.bg ?? "transparent"};.clll-icon{color:${r?.text};}}}}.clll-toast__timer-bar{background-color:${r?.textDisabled};}`, m);
+}, re = ["data-testid"], f = 300, o = "clll-toast", Ce = /* @__PURE__ */ U({
+  name: "CLToast",
+  __name: "CLToast",
+  props: {
+    actionLabel: {},
+    borderRadius: {},
+    color: { default: C.Secondary },
+    dismissTimer: { default: 5 },
+    icon: {},
+    iconSize: { default: B.Small },
+    message: {},
+    onAction: {},
+    onDismiss: {},
+    position: { default: Y.TopRight },
+    rounded: { type: Boolean, default: !0 },
+    testId: { default: "clll-toast" },
+    title: {},
+    variant: { default: N.Soft },
+    width: { default: "24rem" }
+  },
+  setup(e) {
+    F((i) => ({
+      v1fbbc974: i.width
+    }));
+    const t = e, y = b(), d = b(100), n = b(!1), s = b(), r = b(0), T = P(() => [
+      o,
+      t.borderRadius ? `${o}--${t.borderRadius}` : "",
+      t.dismissTimer ? `${o}--has-timer` : "",
+      t.icon ? `${o}--has-icon` : "",
+      t.message && !t.title ? `${o}--has-messageonly` : "",
+      n.value ? `${o}--mounted` : "",
+      t.onAction && t.actionLabel ? `${o}--has-action` : "",
+      t.rounded ? `${o}--rounded` : `${o}--box`,
+      t.title && !t.message ? `${o}--has-titleonly` : "",
+      t.title && t.message ? `${o}--has-titleandmessage` : "",
+      `${o}--${t.position}`
+    ]), m = () => {
+      n.value = !1, s.value && (s.value.stop(), s.value.start(f, (i) => {
+        Math.min(i, f) === f && (s.value?.stop(), t.onDismiss?.());
+      })), V();
+    }, H = () => {
+      const i = t.dismissTimer * 1e3, l = i / 100;
+      s.value?.start(i, (v) => {
+        const h = Math.min(v / 100, l);
+        d.value = 100 - h / l * 100, h === l && m();
+      });
+    }, D = () => {
+      s.value || (s.value = oe(), s.value.start(100, (i) => {
+        Math.min(i, 100) === 100 && (s.value?.stop(), n.value = !0, t?.dismissTimer && s.value?.start(f, (v) => {
+          Math.min(v, f) === f && (s.value?.stop(), H());
+        }));
+      }));
+    };
+    X(t, () => {
+      s.value && (s.value.stop(), s.value = void 0), t?.dismissTimer && D();
+    }), Z(() => {
+      A && (r.value = te() + 1, D());
+    }), j(() => {
+      A && t?.dismissTimer && s.value && (s.value.stop(), s.value = void 0), n.value = !1, t.onDismiss?.();
+    });
+    const { clearEventListeners: V } = ae({ escHandler: m });
+    return q(() => {
+      V();
+    }), (i, l) => (u(), k("output", {
+      ref_key: "elem",
+      ref: y,
+      class: c([a(T), a(ne)({ color: e.color, variant: e.variant })]),
+      "data-testid": e.testId,
+      style: G({ zIndex: a(r) })
+    }, [
+      g("div", {
+        class: c(`${o}__body`)
+      }, [
+        g("div", {
+          class: c(`${o}__content`)
+        }, [
+          e.icon ? (u(), k("div", {
+            key: 0,
+            class: c(`${o}__icon`)
+          }, [
+            L(a(K), {
+              name: e.icon,
+              size: e.iconSize
+            }, null, 8, ["name", "size"])
+          ], 2)) : $("", !0),
+          g("div", {
+            class: c(`${o}__text`)
+          }, [
+            e.title ? (u(), x(a(W), {
+              key: 0,
+              color: a(C).Neutral,
+              "test-id": `${o}__title`,
+              type: a(p).Section
+            }, {
+              default: z(() => [
+                S(_(e.title), 1)
+              ]),
+              _: 1
+            }, 8, ["color", "test-id", "type"])) : $("", !0),
+            e.message ? (u(), x(a(Q), {
+              key: 1,
+              color: a(C).Neutral,
+              "test-id": `${o}__message`,
+              type: e.title ? a(I).Medium : a(I).Body
+            }, {
+              default: z(() => [
+                S(_(e.message), 1)
+              ]),
+              _: 1
+            }, 8, ["color", "test-id", "type"])) : $("", !0)
+          ], 2),
+          e.onAction && e.actionLabel ? (u(), k("div", {
+            key: 1,
+            class: c(`${o}__action-button`)
+          }, [
+            L(a(M), {
+              color: e.color,
+              "border-radius": e.borderRadius,
+              "on-click": e.onAction,
+              "test-id": `${o}__action-button`,
+              variant: e.variant
+            }, {
+              default: z(() => [
+                S(_(e.actionLabel), 1)
+              ]),
+              _: 1
+            }, 8, ["color", "border-radius", "on-click", "test-id", "variant"])
+          ], 2)) : $("", !0)
+        ], 2),
+        g("div", {
+          class: c(`${o}__dismiss-button`)
+        }, [
+          L(a(M), {
+            "aria-label": "Dismiss toast",
+            color: a(C).Neutral,
+            "border-radius": e.borderRadius,
+            "icon-before": a(ee).Delete,
+            "icon-size": a(B).Tiny,
+            "on-click": m,
+            size: a(w).Tiny,
+            "test-id": `${o}__dismiss-button`,
+            variant: a(N).Text
+          }, null, 8, ["color", "border-radius", "icon-before", "icon-size", "size", "test-id", "variant"])
+        ], 2)
+      ], 2),
+      e.dismissTimer ? (u(), x(a(O), {
+        key: 0,
+        modelValue: a(d),
+        "onUpdate:modelValue": l[0] || (l[0] = (v) => J(d) ? d.value = v : null),
+        color: e.color,
+        rounded: !1,
+        size: a(w).Small
+      }, null, 8, ["modelValue", "color", "size"])) : $("", !0)
+    ], 14, re));
+  }
+});
+export {
+  Ce as _
+};