@oruga-ui/oruga-next/dist/esm/skeleton.mjs

UI components for Vue.js and CSS framework agnostic

/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
import { defineComponent, computed, createElementBlock, createCommentVNode, openBlock, normalizeClass, unref, Fragment, renderList, normalizeStyle } from "vue";
import { g as getDefault, b as registerComponent } from "./config-Dl7tu_Ly.mjs";
import { toCssDimension } from "./helpers.mjs";
import { d as defineClasses } from "./defineClasses-CWB9NuS-.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    isOruga: true,
    name: "OSkeleton",
    configField: "skeleton"
  },
  __name: "Skeleton",
  props: {
    override: { type: Boolean, default: void 0 },
    active: { type: Boolean, default: true },
    animated: { type: Boolean, default: () => getDefault("skeleton.animated", true) },
    width: { default: void 0 },
    height: { default: void 0 },
    circle: { type: Boolean, default: false },
    rounded: { type: Boolean, default: () => getDefault("skeleton.rounded", true) },
    count: { default: 1 },
    size: { default: void 0 },
    position: { default: "left" },
    rootClass: {},
    positionClass: {},
    itemClass: {},
    roundedClass: {},
    animatedClass: {},
    sizeClass: {}
  },
  setup(__props) {
    const props = __props;
    const itemStyle = computed(() => ({
      height: toCssDimension(props.height),
      width: toCssDimension(props.width),
      borderRadius: props.circle ? "50%" : void 0
    }));
    const rootClasses = defineClasses(
      ["rootClass", "o-skeleton"],
      [
        "positionClass",
        "o-skeleton--",
        computed(() => props.position),
        computed(() => !!props.position)
      ]
    );
    const itemClasses = defineClasses(
      ["itemClass", "o-skeleton__item"],
      [
        "roundedClass",
        "o-skeleton__item--rounded",
        null,
        computed(() => props.rounded)
      ],
      [
        "animatedClass",
        "o-skeleton__item--animated",
        null,
        computed(() => props.animated)
      ],
      [
        "sizeClass",
        "o-skeleton__item--",
        computed(() => props.size),
        computed(() => !!props.size)
      ]
    );
    return (_ctx, _cache) => {
      return _ctx.active ? (openBlock(), createElementBlock("div", {
        key: 0,
        "data-oruga": "skeleton",
        class: normalizeClass(unref(rootClasses))
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.count, (i) => {
          return openBlock(), createElementBlock("div", {
            key: i,
            class: normalizeClass(unref(itemClasses)),
            style: normalizeStyle(itemStyle.value)
          }, null, 6);
        }), 128))
      ], 2)) : createCommentVNode("", true);
    };
  }
});
const index = {
  install(app) {
    registerComponent(app, _sfc_main);
  }
};
export {
  _sfc_main as OSkeleton,
  index as default
};
//# sourceMappingURL=skeleton.mjs.map