@baseline-banner/vue/dist/index.js

Vue component for checking web feature baseline compatibility

import { defineComponent as h, ref as d, computed as p, watchEffect as y, createElementBlock as a, openBlock as t, createCommentVNode as c, toDisplayString as i, createElementVNode as v, normalizeClass as b, unref as f } from "vue";
import { getBaselineStatus as k, fetchBaselineData as g, formatDate as m } from "@baseline-banner/core";
const B = { class: "baseline-checker" }, S = {
  key: 0,
  class: "loading-message"
}, C = {
  key: 1,
  class: "error-message"
}, N = {
  key: 2,
  class: "feature-info"
}, w = { class: "feature-header" }, E = { class: "feature-name" }, x = {
  key: 0,
  class: "feature-description"
}, A = {
  key: 1,
  class: "availability-info"
}, D = {
  key: 0,
  class: "availability-date"
}, F = {
  key: 1,
  class: "availability-date"
}, V = /* @__PURE__ */ h({
  __name: "BaselineChecker",
  props: {
    featureName: {}
  },
  setup(l) {
    const u = l, e = d(null), o = d(!1), n = d(null), s = p(() => k(e.value));
    return y(async () => {
      o.value = !0, n.value = null;
      try {
        e.value = await g(u.featureName);
      } catch (r) {
        n.value = r instanceof Error ? r : new Error("Failed to fetch baseline data"), e.value = null;
      } finally {
        o.value = !1;
      }
    }), (r, L) => {
      var _;
      return t(), a("div", B, [
        o.value ? (t(), a("div", S, " Loading feature data... ")) : n.value || !e.value ? (t(), a("div", C, i(((_ = n.value) == null ? void 0 : _.message) || `Feature "${r.featureName}" not found`), 1)) : e.value ? (t(), a("div", N, [
          v("div", w, [
            v("h3", E, i(e.value.name), 1),
            v("div", {
              class: b(["baseline-badge", s.value.className])
            }, i(s.value.message), 3)
          ]),
          e.value.description ? (t(), a("p", x, i(e.value.description), 1)) : c("", !0),
          s.value.dates ? (t(), a("div", A, [
            s.value.dates.availableSince ? (t(), a("div", D, " Available since: " + i(f(m)(s.value.dates.availableSince)), 1)) : c("", !0),
            s.value.dates.widelyAvailableSince ? (t(), a("div", F, " Widely available since: " + i(f(m)(s.value.dates.widelyAvailableSince)), 1)) : c("", !0)
          ])) : c("", !0)
        ])) : c("", !0)
      ]);
    };
  }
}), z = (l, u) => {
  const e = l.__vccOpts || l;
  for (const [o, n] of u)
    e[o] = n;
  return e;
}, I = /* @__PURE__ */ z(V, [["__scopeId", "data-v-1c5d87da"]]), $ = {
  install(l) {
    l.component("BaselineChecker", I);
  }
};
export {
  I as BaselineChecker,
  $ as default
};