@oruga-ui/oruga-next/dist/cjs/skeleton.cjs

UI components for Vue.js and CSS framework agnostic

"use strict";
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const config = require("./config-eYBvpFOZ.cjs");
const helpers = require("./helpers.cjs");
const defineClasses = require("./defineClasses-Cqhbv-UT.cjs");
const _sfc_main = /* @__PURE__ */ vue.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: () => config.getDefault("skeleton.animated", true) },
    width: { default: void 0 },
    height: { default: void 0 },
    circle: { type: Boolean, default: false },
    rounded: { type: Boolean, default: () => config.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 = vue.computed(() => ({
      height: helpers.toCssDimension(props.height),
      width: helpers.toCssDimension(props.width),
      borderRadius: props.circle ? "50%" : void 0
    }));
    const rootClasses = defineClasses.defineClasses(
      ["rootClass", "o-skeleton"],
      [
        "positionClass",
        "o-skeleton--",
        vue.computed(() => props.position),
        vue.computed(() => !!props.position)
      ]
    );
    const itemClasses = defineClasses.defineClasses(
      ["itemClass", "o-skeleton__item"],
      [
        "roundedClass",
        "o-skeleton__item--rounded",
        null,
        vue.computed(() => props.rounded)
      ],
      [
        "animatedClass",
        "o-skeleton__item--animated",
        null,
        vue.computed(() => props.animated)
      ],
      [
        "sizeClass",
        "o-skeleton__item--",
        vue.computed(() => props.size),
        vue.computed(() => !!props.size)
      ]
    );
    return (_ctx, _cache) => {
      return _ctx.active ? (vue.openBlock(), vue.createElementBlock("div", {
        key: 0,
        "data-oruga": "skeleton",
        class: vue.normalizeClass(vue.unref(rootClasses))
      }, [
        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.count, (i) => {
          return vue.openBlock(), vue.createElementBlock("div", {
            key: i,
            class: vue.normalizeClass(vue.unref(itemClasses)),
            style: vue.normalizeStyle(itemStyle.value)
          }, null, 6);
        }), 128))
      ], 2)) : vue.createCommentVNode("", true);
    };
  }
});
const index = {
  install(app) {
    config.registerComponent(app, _sfc_main);
  }
};
exports.OSkeleton = _sfc_main;
exports.default = index;
//# sourceMappingURL=skeleton.cjs.map