vue-skeleton-content-loader/dist/vue-skeleton-content-loader.es.js

Make beautiful, animated loading skeletons that automatically adapt to your Vue apps

import { defineComponent as p, computed as l, createElementBlock as u, openBlock as i, Fragment as m, renderList as d, normalizeStyle as g, normalizeClass as f, renderSlot as v, createCommentVNode as _ } from "vue";
const b = ["aria-label", "aria-valuetext"], k = /* @__PURE__ */ p({
  __name: "VueSkeletonContentLoader",
  props: {
    appearance: { default: "line" },
    size: { default: null },
    animation: { type: [String, Boolean], default: "progress" },
    theme: { default: null },
    loadingText: { default: "Loading..." },
    count: { default: 1 },
    ariaLabel: { default: "loading" }
  },
  setup(r) {
    const e = r, n = l(() => Array.from({ length: Number(e.count) }, (t, s) => s + 1)), a = l(() => {
      if (e.appearance !== "square" || typeof e.size != "number" && typeof e.size != "string")
        return null;
      const t = Number(e.size.toString().trim().replace(/\D/g, ""));
      return Number.isInteger(t) ? `${t}px` : null;
    }), o = l(() => ({
      ...a.value && { width: a.value, height: a.value },
      ...e.theme
    }));
    return (t, s) => (i(!0), u(m, null, d(n.value, (c) => (i(), u("div", {
      key: c,
      "aria-label": e.ariaLabel,
      "aria-busy": "true",
      "aria-valuemin": "0",
      "aria-valuemax": "100",
      "aria-valuetext": e.loadingText,
      role: "progressbar",
      tabindex: "-1",
      class: f([
        "skeleton-loader",
        {
          "custom-content": e.appearance === "custom-content",
          circle: e.appearance === "circle",
          square: e.appearance === "square",
          progress: e.animation === "progress",
          "progress-dark": e.animation === "progress-dark",
          pulse: e.animation === "pulse",
          "pulse-dark": e.animation === "pulse-dark"
        }
      ]),
      style: g(o.value)
    }, [
      e.appearance === "custom-content" ? v(t.$slots, "default", { key: 0 }, void 0, !0) : _("", !0)
    ], 14, b))), 128));
  }
}), y = (r, e) => {
  const n = r.__vccOpts || r;
  for (const [a, o] of e)
    n[a] = o;
  return n;
}, h = /* @__PURE__ */ y(k, [["__scopeId", "data-v-868ce80e"]]);
export {
  h as VueSkeletonContentLoader
};