vue3-spinkit/build/vue3-spinner.js

A collection of loading indicators animated with CSS for VueJS 3

import { defineComponent as m, reactive as p, computed as i, createElementBlock as t, createCommentVNode as g, openBlock as r, normalizeStyle as f, normalizeClass as k, Fragment as N, renderList as b } from "vue";
const h = {
  circle: { className: "sk-circle", node: 12 },
  "cube-grid": { className: "sk-cube-grid", node: 9 },
  wave: { className: "sk-wave", node: 5 },
  "folding-cube": { className: "sk-folding-cube", node: 4 },
  "three-bounce": { className: "sk-three-bounce", node: 3 },
  "double-bounce": { className: "sk-double-bounce", node: 2 },
  "wandering-cubes": { className: "sk-wandering-cubes", node: 2 },
  "chasing-dots": { className: "sk-chasing-dots", node: 2 },
  "rotating-plane": { className: "sk-rotating-plane", node: 1 },
  pulse: { className: "sk-pulse", node: 1 },
  wordpress: { className: "sk-wordpress", node: 1 },
  "fading-circle": { className: "sk-fading-circle", node: 12 }
}, y = {
  "square-spin": { node: 1 },
  "ball-grid-beat": { node: 9 },
  "ball-grid-pulse": { node: 9 },
  "line-spin-fade-loader": { node: 8 },
  "ball-spin-fade-loader": { node: 8 },
  "ball-pulse-rise": { node: 5 },
  "line-scale": { node: 5 },
  "line-scale-pulse-out": { node: 5 },
  "line-scale-pulse-out-rapid": { node: 5 },
  pacman: { node: 5 },
  "line-scale-party": { node: 4 },
  "ball-triangle-path": { node: 3 },
  "ball-scale-multiple": { node: 3 },
  "ball-scale-ripple-multiple": { node: 3 },
  "ball-pulse-sync": { node: 3 },
  "ball-pulse": { node: 3 },
  "ball-beat": { node: 3 },
  "ball-zig-zag": { node: 2 },
  "ball-zig-zag-deflect": { node: 2 },
  "ball-clip-rotate-pulse": { node: 2 },
  "ball-clip-rotate-multiple": { node: 2 },
  "ball-clip-rotate": { node: 1 },
  "ball-scale-ripple": { node: 1 },
  "triangle-skew-spin": { node: 1 }
}, S = {
  "circle-solid-spin": { className: "sk-circle-solid-spin", node: 1 },
  "dual-ring": { className: "sk-dual-ring", node: 0 },
  facebook: { className: "sk-facebook", node: 3 },
  heart: { className: "sk-heart", node: 1 },
  ring: { className: "sk-ring", node: 4 },
  roller: { className: "sk-roller", node: 8 },
  ellipsis: { className: "sk-ellipsis", node: 4 },
  grid: { className: "sk-grid", node: 9 },
  hourglass: { className: "sk-hourglass", node: 0 },
  ripple: { className: "sk-ripple", node: 2 }
}, I = {
  loadbar: { className: "sk-loadbar", node: 0 },
  hydrogen: { className: "sk-hydrogen", node: 0 },
  clock: { className: "sk-clock", node: 0 },
  "circle-fade": { className: "sk-circle-fade", node: 0 },
  moon: { className: "sk-moon", node: 1 }
}, w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  AWESOMESpinTypeNERS: I,
  LOADERS_CSS: y,
  LOADING_IO: S,
  SPINKIT_: h
}, Symbol.toStringTag, { value: "Module" })), v = m({
  name: "imp-spinner",
  props: {
    name: {
      type: String,
      default: "",
      require: !0
    },
    color: {
      type: String,
      default: ""
    },
    noFadeIn: {
      type: Boolean,
      default: !1
    },
    fadeIn: {
      type: String,
      default: "full"
    },
    className: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: ""
    },
    height: {
      type: String,
      default: ""
    }
  },
  setup(e) {
    const a = p(
      Object.values(w).reduce((n, s) => Object.assign(n, s), {})
    ), l = i(() => {
      const n = a[e.name], s = n && n.node ? n.node : 0, c = n && n.className ? n.className : e.name;
      return { node: s, className: c };
    }), d = i(() => {
      const n = e.color !== "" ? "color: " + e.color + ";" : "", s = e.width !== "" ? "width: " + e.width + "px;" : "", c = e.height !== "" ? "height: " + e.height + "px;" : "";
      return "text-align: center;" + n + s + c;
    });
    return { loading: l, style: d };
  }
}), O = (e, a) => {
  const l = e.__vccOpts || e;
  for (const [d, n] of a)
    l[d] = n;
  return l;
};
function _(e, a, l, d, n, s) {
  return e.loading.className !== "" ? (r(), t("div", {
    key: 0,
    class: k([
      {
        "sk-fade-in": e.fadeIn === "full" && !e.noFadeIn,
        "sk-fade-in-half-second": e.fadeIn === "half" && !e.noFadeIn,
        "sk-fade-in-quarter-second": e.fadeIn === "quarter" && !e.noFadeIn,
        [e.className]: !!e.className
      },
      "sk-spinner",
      e.loading.className
    ]),
    style: f(e.style)
  }, [
    (r(!0), t(N, null, b(e.loading.node, (c, u) => (r(), t("div", { key: u }))), 128))
  ], 6)) : g("", !0);
}
const o = /* @__PURE__ */ O(v, [["render", _], ["__scopeId", "data-v-f0430583"]]);
o.install = function(e) {
  e.component(o.name, o);
};
const z = [o], E = function(e) {
  z.forEach((a) => {
    e.component(a.name, a);
  });
}, C = {
  // 导出的对象必须具有 install，才能被 app.use() 方法安装
  install: E,
  Spinner: o
};
export {
  C as default
};