@discord-user-card/vue/lib/index.js

Display Discord users' profile cards just like in Discord.

import { defineComponent as x, toRefs as L, ref as i, withAsyncContext as B, watch as _, onBeforeUnmount as M, openBlock as U, createElementBlock as k, normalizeClass as h, normalizeStyle as m, createBlock as D, Suspense as S, withCtx as g, createVNode as H, unref as c } from "vue";
import T, { defaultUserCardProperties as o } from "discord-user-card";
import { ActivityType as F, DiscordUserCardBadges as G, DiscordUserCardBotBadges as I, PresenceUpdateStatus as J, defaultUserCardProperties as K, flagsToBadges as O } from "discord-user-card";
const A = ["aria-label", "innerHTML"], w = /* @__PURE__ */ x({
  __name: "DiscordUserCard",
  props: {
    user: { default: () => o.user },
    activities: { default: () => o.activities },
    style: { default: "original" },
    type: { default: "card" }
  },
  async setup(d) {
    let v, r;
    const u = d, { user: a, activities: s, style: e, type: l } = L(u), t = i(document.createElement("div"));
    let n = T(t.value, {
      style: e.value,
      type: l.value
    });
    [v, r] = B(() => n.render({
      user: a.value,
      activities: s.value
    })), await v, r();
    const p = i(t.value.innerHTML), y = i(t.value.style.cssText), f = i(t.value.className), b = i(t.value.getAttribute("aria-label"));
    function C() {
      p.value = t.value.innerHTML, y.value = t.value.style.cssText, f.value = t.value.className, b.value = t.value.getAttribute("aria-label");
    }
    return _(
      [a, s],
      async () => {
        await n.render({
          user: a.value,
          activities: s.value
        }), C();
      },
      { deep: !0 }
    ), _(
      [e, l],
      async () => {
        n.destroy(), n = T(t.value, {
          style: e.value,
          type: l.value
        }), await n.render({
          user: a.value,
          activities: s.value
        }), C();
      },
      { deep: !0 }
    ), M(() => {
      n.destroy();
    }), (P, R) => (U(), k("div", {
      class: h(f.value),
      style: m(y.value),
      "aria-label": b.value || void 0,
      innerHTML: p.value
    }, null, 14, A));
  }
}), N = ["aria-label", "innerHTML"], E = /* @__PURE__ */ x({
  __name: "DiscordUserCardSkeleton",
  props: {
    user: { default: () => o.user },
    activities: { default: () => o.activities },
    style: { default: "original" },
    type: { default: "card" }
  },
  setup(d) {
    const v = d, { user: r, activities: u, style: a, type: s } = L(v), e = i(document.createElement("div"));
    let l = T(e.value, {
      style: a.value,
      type: s.value
    });
    l.renderSkeleton({
      user: r.value,
      activities: u.value
    });
    const t = i(e.value.innerHTML), n = i(e.value.style.cssText), p = i(e.value.className), y = i(e.value.getAttribute("aria-label"));
    function f() {
      t.value = e.value.innerHTML, n.value = e.value.style.cssText, p.value = e.value.className, y.value = e.value.getAttribute("aria-label");
    }
    return _(
      [r, u],
      () => {
        l.renderSkeleton({
          user: r.value,
          activities: u.value
        }), f();
      },
      { deep: !0 }
    ), _(
      [a, s],
      () => {
        l.destroy(), l = T(e.value, {
          style: a.value,
          type: s.value
        }), l.renderSkeleton({
          user: r.value,
          activities: u.value
        }), f();
      },
      { deep: !0 }
    ), M(() => {
      l.destroy();
    }), (b, C) => (U(), k("div", {
      class: h(p.value),
      style: m(n.value),
      "aria-label": y.value || void 0,
      innerHTML: t.value
    }, null, 14, N));
  }
}), V = /* @__PURE__ */ x({
  __name: "Export",
  props: {
    user: { default: () => o.user },
    activities: { default: () => o.activities },
    style: { default: "original" },
    type: { default: "card" }
  },
  setup(d) {
    const v = d, { user: r, activities: u, style: a, type: s } = L(v);
    return (e, l) => (U(), D(S, null, {
      default: g(() => [
        H(w, {
          activities: c(u),
          style: m(c(a)),
          type: c(s),
          user: c(r)
        }, null, 8, ["activities", "style", "type", "user"])
      ]),
      fallback: g(() => [
        H(E, {
          activities: c(u),
          style: m(c(a)),
          type: c(s),
          user: c(r)
        }, null, 8, ["activities", "style", "type", "user"])
      ]),
      _: 1
    }));
  }
});
export {
  F as ActivityType,
  V as DiscordUserCard,
  w as DiscordUserCardAsync,
  G as DiscordUserCardBadges,
  I as DiscordUserCardBotBadges,
  E as DiscordUserCardSkeleton,
  J as PresenceUpdateStatus,
  K as defaultUserCardProperties,
  O as flagsToBadges
};
//# sourceMappingURL=index.js.map