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

Dialpad's Dialtone design system monorepo

import s from "../../common/mixins/skeleton.js";
import { SKELETON_SHAPE_SIZES as i, SKELETON_SHAPES as a } from "./skeleton-constants.js";
import { createElementBlock as l, openBlock as r, normalizeStyle as m, normalizeClass as c } from "vue";
import { _ as p } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const d = {
  compatConfig: { MODE: 3 },
  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 = i[this.size] || this.size;
      return {
        ...this.skeletonStyle,
        "min-width": e,
        "max-width": e,
        "min-height": e,
        "max-height": e
      };
    }
  }
};
function S(e, f, t, h, n, o) {
  return r(), l("div", {
    ref: "skeleton",
    "data-qa": "skeleton-shape",
    class: c([
      "d-skeleton-placeholder",
      n.SKELETON_SHAPES[t.shape],
      {
        "d-skeleton-placeholder--animate": t.animate
      },
      t.contentClass
    ]),
    style: m(o.shapeStyles)
  }, null, 6);
}
const k = /* @__PURE__ */ p(d, [["render", S]]);
export {
  k as default
};
//# sourceMappingURL=skeleton-shape.js.map