vue-amazing-ui/es/skeleton/Skeleton.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as h, computed as o, createElementBlock as a, renderSlot as k, openBlock as r, normalizeStyle as u, normalizeClass as n, createCommentVNode as l, createElementVNode as p, Fragment as b, renderList as z } from "vue";
const w = {
  key: 2,
  class: "skeleton-image"
}, q = {
  key: 3,
  class: "skeleton-header"
}, B = {
  key: 0,
  class: "skeleton-content"
}, $ = /* @__PURE__ */ h({
  __name: "Skeleton",
  props: {
    animated: { type: Boolean, default: !0 },
    button: { type: [Boolean, Object], default: !1 },
    avatar: { type: [Boolean, Object], default: !1 },
    input: { type: [Boolean, Object], default: !1 },
    image: { type: Boolean, default: !1 },
    title: { type: [Boolean, Object], default: !0 },
    paragraph: { type: [Boolean, Object], default: !0 },
    loading: { type: Boolean, default: !0 }
  },
  setup(d) {
    const t = d, y = o(() => {
      if (typeof t.button == "object")
        return t.button.size === "large" ? 40 : t.button.size === "small" ? 24 : 32;
    }), m = o(() => typeof t.avatar == "boolean" ? 8 : typeof t.avatar.size == "number" ? (t.avatar.size - 16) / 2 : {
      small: 4,
      middle: 8,
      large: 12
    }[t.avatar.size || "middle"]), v = o(() => typeof t.title == "boolean" ? "38%" : typeof t.title.width == "number" ? `${t.title.width}px` : t.title.width || "38%"), s = o(() => typeof t.paragraph == "boolean" ? t.avatar ? 2 : 3 : t.avatar ? t.paragraph.rows || 2 : t.paragraph.rows || 3), g = o(() => {
      if (typeof t.paragraph == "object") {
        if (Array.isArray(t.paragraph.width))
          return t.paragraph.width.map((e) => typeof e == "number" ? `${e}px` : e);
        if (typeof t.paragraph.width == "number")
          return Array(s.value).fill(`${t.paragraph.width}px`);
        if (typeof t.paragraph.width == "string")
          return Array(s.value).fill(t.paragraph.width);
      }
      return Array(s.value);
    });
    return (e, i) => e.loading ? (r(), a("div", {
      key: 0,
      class: n(["skeleton-wrap", { "skeleton-avatar": e.avatar, "skeleton-animated": e.animated }]),
      style: u(`--button-size: ${y.value}px; --title-top: ${m.value}px;`)
    }, [
      e.button ? (r(), a("span", {
        key: 0,
        class: n(["skeleton-button", {
          "button-round": typeof e.button != "boolean" && e.button.shape === "round",
          "button-circle": typeof e.button != "boolean" && e.button.shape === "circle",
          "button-sm": typeof e.button != "boolean" && e.button.size === "small",
          "button-lg": typeof e.button != "boolean" && e.button.size === "large",
          "button-block": typeof e.button != "boolean" && e.button.shape !== "circle" && e.button.block
        }])
      }, null, 2)) : l("", !0),
      e.input ? (r(), a("span", {
        key: 1,
        class: n(["skeleton-input", {
          "input-sm": typeof e.input != "boolean" && e.input.size === "small",
          "input-lg": typeof e.input != "boolean" && e.input.size === "large"
        }])
      }, null, 2)) : l("", !0),
      e.image ? (r(), a("div", w, [...i[0] || (i[0] = [
        p("svg", {
          class: "image-svg",
          viewBox: "0 0 1098 1024",
          xmlns: "http://www.w3.org/2000/svg"
        }, [
          p("path", {
            class: "svg-path",
            d: "M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z"
          })
        ], -1)
      ])])) : l("", !0),
      e.avatar ? (r(), a("div", q, [
        p("span", {
          class: n(["skeleton-avatar", {
            "avatar-sm": typeof e.avatar != "boolean" && e.avatar.size === "small",
            "avatar-lg": typeof e.avatar != "boolean" && e.avatar.size === "large",
            "avatar-square": typeof e.avatar != "boolean" && e.avatar.shape === "square"
          }])
        }, null, 2)
      ])) : l("", !0),
      !e.button && !e.image && !e.input ? (r(), a(b, { key: 4 }, [
        e.title || e.paragraph ? (r(), a("div", B, [
          e.title ? (r(), a("h3", {
            key: 0,
            class: "skeleton-title",
            style: u({ width: v.value })
          }, null, 4)) : l("", !0),
          e.paragraph ? (r(), a("ul", {
            key: 1,
            class: n(["skeleton-paragraph", { mt24: e.title, mt28: e.title && e.avatar }])
          }, [
            (r(!0), a(b, null, z(s.value, (f) => (r(), a("li", {
              key: f,
              style: u(`width: ${g.value[f - 1]};`)
            }, null, 4))), 128))
          ], 2)) : l("", !0)
        ])) : l("", !0)
      ], 64)) : l("", !0)
    ], 6)) : k(e.$slots, "default", { key: 1 }, void 0, !0);
  }
});
export {
  $ as default
};