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

Dialpad's Dialtone design system monorepo

import u from "./skeleton-shape.js";
import p from "./skeleton-list-item.js";
import d from "./skeleton-paragraph.js";
import c from "./skeleton-text.js";
import { resolveComponent as n, createElementBlock as h, openBlock as e, createBlock as o, mergeProps as i } from "vue";
import { _ as O } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import "./skeleton-constants.js";
const _ = {
  compatConfig: { MODE: 3 },
  name: "DtSkeleton",
  components: {
    DtSkeletonText: c,
    DtSkeletonShape: u,
    DtSkeletonListItem: p,
    DtSkeletonParagraph: d
  },
  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 l = Object.entries(this.validationOptions).filter(([, a]) => a);
      if (l.length >= 2) {
        const a = `Use only one of ${l.map(([t]) => t).join(" | ")} options at the same time`;
        console.error(a);
      }
    }
  }
}, k = ["aria-label"];
function g(l, a, t, y, b, D) {
  const m = n("dt-skeleton-list-item"), r = n("dt-skeleton-shape"), s = n("dt-skeleton-paragraph"), f = n("dt-skeleton-text");
  return e(), h("div", {
    "aria-busy": "true",
    role: "status",
    "aria-label": t.ariaLabel
  }, [
    t.listItemOption ? (e(), o(m, i({ key: 0 }, t.listItemOption === !0 ? {} : t.listItemOption, {
      "animation-duration": t.animationDuration,
      animate: t.animate,
      offset: t.offset
    }), null, 16, ["animation-duration", "animate", "offset"])) : t.shapeOption ? (e(), o(r, i({ key: 1 }, t.shapeOption === !0 ? {} : t.shapeOption, {
      "animation-duration": t.animationDuration,
      animate: t.animate,
      offset: t.offset
    }), null, 16, ["animation-duration", "animate", "offset"])) : t.paragraphOption ? (e(), o(s, i({ key: 2 }, t.paragraphOption === !0 ? {} : t.paragraphOption, {
      "animation-duration": t.animationDuration,
      animate: t.animate,
      offset: t.offset
    }), null, 16, ["animation-duration", "animate", "offset"])) : (e(), o(f, i({ key: 3 }, t.textOption || {}, {
      "animation-duration": t.animationDuration,
      animate: t.animate,
      offset: t.offset
    }), null, 16, ["animation-duration", "animate", "offset"]))
  ], 8, k);
}
const C = /* @__PURE__ */ O(_, [["render", g]]);
export {
  C as default
};
//# sourceMappingURL=skeleton.js.map