@dialpad/dialtone-vue/dist/lib/skeleton/skeleton-shape.js

Vue component library for Dialpad's design system Dialtone

import s from "../../common/mixins/skeleton.js";
import { SKELETON_SHAPE_SIZES as r, SKELETON_SHAPES as a } from "./skeleton-constants.js";
import { n as i } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const o = {
  name: "DtSkeletonShape",
  mixins: [s],
  props: {
    /**
     * Defines the shape of the skeleton, accepts circle or square.
     * @values circle, square
     */
    shape: {
      type: String,
      default: "circle",
      validator: (e) => Object.keys(a).includes(e)
    },
    /**
     * Size of the shape
     * @values xs, sm, md, lg, xl
     */
    size: {
      type: String,
      default: "md"
    },
    /**
     * Duration time of the animation (ms), set -1 for an infinite animation.
     */
    animationDuration: {
      type: Number,
      default: -1
    },
    /**
     * This property has higher priority than "option.animate"
     * @values true, false
     */
    animate: {
      type: Boolean,
      default: !0
    },
    /**
     * RippleDuration controls how long the delay is for the animation of a
     * placeholder 1000 pixels from the top of the page. Each placeholder
     * from the top down will have a delay duration from 0 to this offset.
     * The delay of each placeholder animation is based on how far down the page
     * the placeholder is rendered. This is a linear relationship. The unit
     * is milliseconds.
     */
    offset: {
      type: Number,
      default: 1
    },
    /**
     * Additional class name for the content.
     */
    contentClass: {
      type: [String, Object, Array],
      default: ""
    }
  },
  data() {
    return {
      SKELETON_SHAPES: a
    };
  },
  computed: {
    shapeStyles() {
      const e = r[this.size] || this.size;
      return {
        ...this.skeletonStyle,
        "min-width": e,
        "max-width": e,
        "min-height": e,
        "max-height": e
      };
    }
  }
};
var l = function() {
  var t = this, n = t._self._c;
  return n("div", { ref: "skeleton", class: [
    "d-skeleton-placeholder",
    t.SKELETON_SHAPES[t.shape],
    {
      "d-skeleton-placeholder--animate": t.animate
    },
    t.contentClass
  ], style: t.shapeStyles, attrs: { "data-qa": "skeleton-shape" } });
}, m = [], p = /* @__PURE__ */ i(
  o,
  l,
  m
);
const h = p.exports;
export {
  h as default
};
//# sourceMappingURL=skeleton-shape.js.map