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

Dialpad's Dialtone design system monorepo

import { SKELETON_TEXT_TYPES as s, SKELETON_HEADING_HEIGHTS as n } from "./skeleton-constants.js";
import r from "../../common/mixins/skeleton.js";
import { createElementBlock as a, createCommentVNode as m, openBlock as l, normalizeStyle as o, normalizeClass as d } from "vue";
import { _ as c } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const f = {
  compatConfig: { MODE: 3 },
  name: "DtSkeletonText",
  mixins: [r],
  props: {
    /**
     * Skeleton type
     * @values body, heading
     */
    type: {
      type: String,
      default: "body",
      validator: (t) => s.includes(t)
    },
    /**
     * Heading height
     * @values sm, md, lg
     */
    headingHeight: {
      type: String,
      default: "md",
      validator: (t) => Object.keys(n).includes(t)
    },
    /**
     * Width of the skeleton
     */
    width: {
      type: String,
      default: "100%"
    },
    /**
     * 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: !1
    },
    /**
     * 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,
      default: ""
    }
  },
  data() {
    return {
      SKELETON_HEADING_HEIGHTS: n
    };
  }
};
function y(t, k, e, u, i, h) {
  return e.type === "body" ? (l(), a("div", {
    key: 0,
    ref: "skeleton",
    "data-qa": "skeleton-text-body",
    class: d([
      "d-skeleton-text",
      "d-skeleton-placeholder",
      {
        "d-skeleton-placeholder--animate": e.animate
      },
      e.contentClass
    ]),
    style: o({
      width: e.width,
      ...t.skeletonStyle
    })
  }, null, 6)) : e.type === "heading" ? (l(), a("div", {
    key: 1,
    ref: "skeleton",
    "data-qa": "skeleton-text-heading",
    class: d([
      i.SKELETON_HEADING_HEIGHTS[e.headingHeight],
      "d-skeleton-text--heading",
      "d-skeleton-placeholder",
      {
        "d-skeleton-placeholder--animate": e.animate
      },
      e.contentClass
    ]),
    style: o({
      width: e.width,
      ...t.skeletonStyle
    })
  }, null, 6)) : m("", !0);
}
const p = /* @__PURE__ */ c(f, [["render", y]]);
export {
  p as default
};
//# sourceMappingURL=skeleton-text.js.map