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

Vue component library for Dialpad's design system Dialtone

import o from "./skeleton-shape.js";
import n from "./skeleton-list-item.js";
import i from "./skeleton-paragraph.js";
import r from "./skeleton-text.js";
import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import "./skeleton-constants.js";
const p = {
  name: "DtSkeleton",
  components: {
    DtSkeletonText: r,
    DtSkeletonShape: o,
    DtSkeletonListItem: n,
    DtSkeletonParagraph: i
  },
  props: {
    /**
     * Set this prop to have the skeleton render as multiple lines of text.
     * Set only one option prop at a time.
     */
    paragraphOption: {
      type: [Object, Boolean],
      default: null
    },
    /**
     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.
     * Set only one option prop at a time.
     */
    listItemOption: {
      type: [Object, Boolean],
      default: null
    },
    /**
     * Set this prop to have the skeleton render as a single line of text.
     * Set only one option prop at a time.
     */
    textOption: {
      type: Object,
      default: null
    },
    /**
     * Set this prop to have the skeleton render as a specific shape.
     * Set only one option prop at a time.
     */
    shapeOption: {
      type: [Object, Boolean],
      default: null
    },
    /**
     * Duration time of the animation (ms), set -1 for an infinite animation.
     */
    animationDuration: {
      type: Number,
      default: -1
    },
    /**
     * Descriptive label for the content.
     */
    ariaLabel: {
      type: String,
      default: ""
    },
    /**
     * 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
    }
  },
  computed: {
    validationOptions() {
      return {
        paragraphOption: this.paragraphOption,
        listItemOption: this.listItemOption,
        textOption: this.textOption,
        shapeOption: this.shapeOption
      };
    }
  },
  watch: {
    $props: {
      immediate: !0,
      handler: "validator"
    }
  },
  methods: {
    validator() {
      const a = Object.entries(this.validationOptions).filter(([, t]) => t);
      if (a.length >= 2) {
        const t = `Use only one of ${a.map(([e]) => e).join(" | ")} options at the same time`;
        console.error(t);
      }
    }
  }
};
var l = function() {
  var t = this, e = t._self._c;
  return e("div", { attrs: { "aria-busy": "true", role: "status", "aria-label": t.ariaLabel } }, [t.listItemOption ? e("dt-skeleton-list-item", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-list-item", t.listItemOption === !0 ? {} : t.listItemOption, !1)) : t.shapeOption ? e("dt-skeleton-shape", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-shape", t.shapeOption === !0 ? {} : t.shapeOption, !1)) : t.paragraphOption ? e("dt-skeleton-paragraph", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-paragraph", t.paragraphOption === !0 ? {} : t.paragraphOption, !1)) : e("dt-skeleton-text", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-text", t.textOption || {}, !1))], 1);
}, m = [], f = /* @__PURE__ */ s(
  p,
  l,
  m
);
const b = f.exports;
export {
  b as default
};
//# sourceMappingURL=skeleton.js.map