@indielayer/ui/lib/components/alert/Alert.vue2.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as v, computed as g, openBlock as t, createElementBlock as a, normalizeStyle as k, unref as l, normalizeClass as b, renderSlot as n, createBlock as w, createCommentVNode as i, createElementVNode as s, Fragment as B, createVNode as $ } from "vue";
import { useColors as I } from "../../composables/useColors.js";
import { useTheme as C } from "../../composables/useTheme.js";
import { infoIcon as N, successIcon as S, errorIcon as V, warningIcon as z, closeIcon as A } from "../../common/icons.js";
import c from "../icon/Icon.vue.js";
const E = ["aria-label"], L = ["info", "success", "error", "warning"], T = {
  ...I.props(),
  type: String,
  glow: Boolean,
  light: Boolean,
  outlined: Boolean,
  removable: Boolean,
  closeLabel: String
}, h = {
  name: "XAlert",
  validators: {
    type: L
  }
}, D = /* @__PURE__ */ v({
  ...h,
  props: T,
  emits: ["remove"],
  setup(m) {
    const o = m, p = g(() => o.type === "info" ? N : o.type === "success" ? S : o.type === "error" ? V : o.type === "warning" ? z : ""), { styles: u, classes: f, className: d } = C("Alert", {}, o);
    return (e, r) => (t(), a("div", {
      style: k(l(u)),
      class: b([
        l(d),
        e.$style.alert,
        e.glow ? e.$style["alert--glow"] : "",
        l(f).wrapper
      ])
    }, [
      n(e.$slots, "icon", {}, () => [
        e.type ? (t(), w(c, {
          key: 0,
          icon: p.value,
          class: "text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
        }, null, 8, ["icon"])) : i("", !0)
      ]),
      s("div", null, [
        n(e.$slots, "default")
      ]),
      e.removable ? (t(), a(B, { key: 0 }, [
        r[1] || (r[1] = s("div", { class: "flex-grow" }, null, -1)),
        s("button", {
          type: "button",
          class: "shrink-0",
          "aria-label": e.closeLabel,
          onClick: r[0] || (r[0] = (y) => e.$emit("remove", y))
        }, [
          n(e.$slots, "removeIcon", {}, () => [
            $(c, { icon: l(A) }, null, 8, ["icon"])
          ])
        ], 8, E)
      ], 64)) : i("", !0)
    ], 6));
  }
});
export {
  D as default
};