buefy/dist/esm/skeleton.js

Lightweight UI components for Vue.js (v3) based on Bulma

import { h } from 'vue';
import { a as registerComponent } from './plugins-1tLsuIZF.js';

const SKELETON_POSITIONS = ["", "is-centered", "is-right"];
const BSkeleton = (props) => {
  if (!props.active) return;
  const items = [];
  const width = props.width;
  const height = props.height;
  for (let i = 0; i < props.count; i++) {
    items.push(h("div", {
      class: [
        "b-skeleton-item",
        { "is-rounded": props.rounded }
      ],
      key: i,
      style: {
        height: height === void 0 ? null : isNaN(+height) ? height : height + "px",
        width: width === void 0 ? null : isNaN(+width) ? width : width + "px",
        borderRadius: props.circle ? "50%" : null
      }
    }));
  }
  return h(
    "div",
    {
      class: [
        "b-skeleton",
        props.size,
        props.position,
        { "is-animated": props.animated }
      ]
    },
    items
  );
};
BSkeleton.props = {
  active: {
    type: Boolean,
    default: true
  },
  animated: {
    type: Boolean,
    default: true
  },
  width: [Number, String],
  height: [Number, String],
  circle: Boolean,
  rounded: {
    type: Boolean,
    default: true
  },
  count: {
    type: Number,
    default: 1
  },
  position: {
    type: String,
    default: "",
    validator(value) {
      return SKELETON_POSITIONS.indexOf(value) > -1;
    }
  },
  size: String
};

const Plugin = {
  install(Vue) {
    registerComponent(Vue, BSkeleton, "BSkeleton");
  }
};

export { BSkeleton, Plugin as default };