vuux/dist/es/Skeleton/src/index.vue.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { defineComponent as m, toRefs as k, createElementBlock as l, renderSlot as f, openBlock as t, createBlock as y, createCommentVNode as r, createElementVNode as v, unref as i, normalizeStyle as n, normalizeClass as u, Fragment as g, renderList as B } from "vue";
import p from "./avatar.vue.mjs";
const w = {
  key: 0,
  class: "app-skeleton"
}, b = /* @__PURE__ */ m({
  name: "Skeleton",
  __name: "index",
  props: {
    loading: { type: Boolean, default: !0 },
    width: { default: "100%" },
    height: { default: "12px" },
    avatar: { type: Boolean },
    avatarStyle: { default: () => ({}) },
    round: { type: Boolean, default: !0 },
    row: { default: 1 },
    title: { type: Boolean }
  },
  setup(e) {
    const d = e, { avatarStyle: o, round: c } = k(d), s = (a) => ({
      [a]: !0,
      "skeleton-round": c.value
    });
    return (a, z) => e.loading ? (t(), l("div", w, [
      e.avatar ? (t(), y(p, {
        key: 0,
        size: i(o).size,
        shape: i(o).shape,
        class: "avatar-class"
      }, null, 8, ["size", "shape"])) : r("", !0),
      v("div", {
        class: "skeleton-line",
        style: n({ width: e.width })
      }, [
        e.title ? (t(), l("div", {
          key: 0,
          class: u([s("skeleton-block-title")]),
          style: n({ height: e.height })
        }, null, 6)) : r("", !0),
        (t(!0), l(g, null, B(Number(e.row), (h) => (t(), l("div", {
          key: h,
          class: u([s("skeleton-block-line")]),
          style: n({ height: e.height })
        }, null, 6))), 128))
      ], 4)
    ])) : f(a.$slots, "default", { key: 1 });
  }
});
export {
  b as default
};