@dialpad/dialtone/dist/vue3/components/skeleton/skeleton.vue.cjs

Dialpad's Dialtone design system monorepo

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const skeletonShape = require("./skeleton-shape.vue.cjs");
const skeletonListItem = require("./skeleton-list-item.vue.cjs");
const skeletonParagraph = require("./skeleton-paragraph.vue.cjs");
const skeletonText = require("./skeleton-text.vue.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtSkeleton",
  components: {
    DtSkeletonText: skeletonText.default,
    DtSkeletonShape: skeletonShape.default,
    DtSkeletonListItem: skeletonListItem.default,
    DtSkeletonParagraph: skeletonParagraph.default
  },
  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: true
    },
    /**
     * 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: true,
      handler: "validator"
    }
  },
  methods: {
    validator() {
      const filtered = Object.entries(this.validationOptions).filter(([_, option]) => option);
      if (filtered.length >= 2) {
        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(" | ")} options at the same time`;
        console.error(errorMessage);
      }
    }
  }
};
const _hoisted_1 = ["aria-label"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_dt_skeleton_list_item = vue.resolveComponent("dt-skeleton-list-item");
  const _component_dt_skeleton_shape = vue.resolveComponent("dt-skeleton-shape");
  const _component_dt_skeleton_paragraph = vue.resolveComponent("dt-skeleton-paragraph");
  const _component_dt_skeleton_text = vue.resolveComponent("dt-skeleton-text");
  return vue.openBlock(), vue.createElementBlock("div", {
    "aria-busy": "true",
    role: "status",
    "aria-label": $props.ariaLabel
  }, [
    $props.listItemOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_list_item, vue.mergeProps({ key: 0 }, $props.listItemOption === true ? {} : $props.listItemOption, {
      "animation-duration": $props.animationDuration,
      animate: $props.animate,
      offset: $props.offset
    }), null, 16, ["animation-duration", "animate", "offset"])) : $props.shapeOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_shape, vue.mergeProps({ key: 1 }, $props.shapeOption === true ? {} : $props.shapeOption, {
      "animation-duration": $props.animationDuration,
      animate: $props.animate,
      offset: $props.offset
    }), null, 16, ["animation-duration", "animate", "offset"])) : $props.paragraphOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_paragraph, vue.mergeProps({ key: 2 }, $props.paragraphOption === true ? {} : $props.paragraphOption, {
      "animation-duration": $props.animationDuration,
      animate: $props.animate,
      offset: $props.offset
    }), null, 16, ["animation-duration", "animate", "offset"])) : (vue.openBlock(), vue.createBlock(_component_dt_skeleton_text, vue.mergeProps({ key: 3 }, $props.textOption || {}, {
      "animation-duration": $props.animationDuration,
      animate: $props.animate,
      offset: $props.offset
    }), null, 16, ["animation-duration", "animate", "offset"]))
  ], 8, _hoisted_1);
}
const DtSkeleton = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtSkeleton;
//# sourceMappingURL=skeleton.vue.cjs.map