easy-skeleton-loader-vue/dist/index.js

A simple, customizable skeleton loader for your vue app

import { defineComponent as c, openBlock as o, createElementBlock as d, Fragment as w, renderList as S, normalizeClass as m, computed as l, unref as f, createVNode as r, createBlock as b, createElementVNode as N } from "vue";
var C = { class: "sk-loader skeleton" };
const s = /* @__PURE__ */ c({
  __name: "SkeletonItem",
  props: {
    count: { default: 1 },
    width: { default: "100%" },
    height: { default: "16px" },
    radius: { default: 12 },
    delay: {},
    animation: {}
  },
  setup: function(n) {
    var t, a, e = n, i = function() {
      return e.width ? typeof e.width == "number" ? "".concat(e.width, "px") : e.width : "100%";
    }, u = function() {
      return e.height ? typeof e.height == "number" ? "".concat(e.height, "px") : e.height : "100%";
    }, p = {
      borderRadius: "".concat(e.radius, "px"),
      width: i(),
      height: u(),
      animationDelay: "".concat(e.delay, "s")
    }, y = (t = {}, t[(a = e.animation) !== null && a !== void 0 ? a : "fade-in"] = !0, t);
    return function(g, $) {
      return o(), d("div", C, [
        (o(!0), d(w, null, S(g.count, function(k) {
          return o(), d("div", {
            key: k,
            class: m(["element", y]),
            style: p
          });
        }), 128))
      ]);
    };
  }
});
var _ = function(n) {
  var t = l(function() {
    return n() ? "sk-loader--dark" : "";
  });
  return { themeName: t };
};
const x = /* @__PURE__ */ c({
  __name: "SkeletonCard",
  props: {
    animation: {},
    dark: { type: Boolean }
  },
  setup: function(n) {
    var t = n, a = _(function() {
      return t.dark;
    }).themeName;
    return function(e, i) {
      return o(), d("div", {
        class: m(["sk-loader card", f(a)])
      }, [
        r(s, {
          animation: e.animation,
          width: 100,
          height: 100,
          radius: 50,
          count: 1
        }, null, 8, ["animation"]),
        r(s, {
          animation: e.animation,
          width: "70%",
          height: 10,
          radius: 6
        }, null, 8, ["animation"]),
        r(s, {
          animation: e.animation,
          width: "100%",
          height: 10,
          radius: 6
        }, null, 8, ["animation"]),
        r(s, {
          animation: e.animation,
          width: 80,
          height: 40,
          radius: 6,
          count: 2
        }, null, 8, ["animation"])
      ], 2);
    };
  }
});
const v = (n, t) => {
  const a = n.__vccOpts || n;
  for (const [e, i] of t)
    a[e] = i;
  return a;
}, E = /* @__PURE__ */ v(x, [["__scopeId", "data-v-16ff31bf"]]), h = /* @__PURE__ */ c({
  __name: "SkeletonShape",
  props: {
    type: {},
    count: {},
    width: {},
    height: {},
    radius: {},
    delay: {},
    animation: {}
  },
  setup: function(n) {
    var t = n, a = l(function() {
      return t.width ? t.width : t.type === "avatar" ? 100 : t.type === "button" ? 80 : "100%";
    }), e = l(function() {
      return t.height ? t.height : t.type === "avatar" ? 100 : t.type === "button" || t.type === "input" ? 40 : 10;
    }), i = l(function() {
      return t.radius ? t.radius : t.type === "avatar" ? 50 : 6;
    });
    return function(u, p) {
      return o(), b(s, {
        animation: u.animation,
        width: a.value,
        height: e.value,
        radius: i.value,
        count: u.count,
        delay: u.delay
      }, null, 8, ["animation", "width", "height", "radius", "count", "delay"]);
    };
  }
});
var B = { class: "text" };
const I = /* @__PURE__ */ c({
  __name: "SkeletonUser",
  props: {
    animation: {},
    dark: { type: Boolean }
  },
  setup: function(n) {
    var t = n, a = _(function() {
      return t.dark;
    }).themeName;
    return function(e, i) {
      return o(), d("div", {
        class: m(["sk-loader user", f(a)])
      }, [
        r(h, {
          class: "avatar",
          type: "avatar",
          animation: e.animation
        }, null, 8, ["animation"]),
        N("div", B, [
          r(h, {
            type: "text",
            animation: e.animation,
            width: "20%"
          }, null, 8, ["animation"]),
          r(h, {
            type: "text",
            animation: e.animation,
            width: "60%"
          }, null, 8, ["animation"])
        ])
      ], 2);
    };
  }
});
const H = /* @__PURE__ */ v(I, [["__scopeId", "data-v-1ae1a6b7"]]);
export {
  E as SkeletonCard,
  s as SkeletonItem,
  h as SkeletonShape,
  H as SkeletonUser
};