@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/lib/skeleton.js

@@ -1,632 +1,15 @@
-import { openBlock, createElementBlock, normalizeClass, normalizeStyle, createCommentVNode, resolveComponent, Fragment, renderList, createBlock, createVNode, createElementVNode, mergeProps } from "vue";
-import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-const SKELETON_RIPPLE_DURATION = 3e6;
-const SKELETON_SHAPES = {
-  circle: "d-bar-circle",
-  square: "d-bar2"
-};
-const SKELETON_TEXT_TYPES = [
-  "body",
-  "heading"
-];
-const SKELETON_SHAPE_SIZES = {
-  sm: "24px",
-  md: "32px",
-  lg: "48px"
-};
-const SKELETON_HEADING_HEIGHTS = {
-  sm: "d-h16",
-  md: "d-h24",
-  lg: "d-h32"
-};
-const SkeletonAnimation = {
-  computed: {
-    skeletonOffset() {
-      const skeletonText = this.$refs.skeleton;
-      if (!skeletonText) {
-        return this.offset;
-      }
-      const { top, height } = skeletonText.getBoundingClientRect();
-      return top + height / 2;
-    },
-    skeletonStyle() {
-      const style = {};
-      if (this.skeletonOffset === -1 || !this.animate && this.animationDuration === -1) {
-        return style;
-      }
-      const animationDelay = this.skeletonOffset * SKELETON_RIPPLE_DURATION / 1e3;
-      const animationDuration = this.animationDuration === -1 ? 1e3 : this.animationDuration;
-      style.animationDelay = `${animationDelay}ms`;
-      style.animationDuration = `${animationDuration}ms`;
-      return style;
-    }
-  }
-};
-const _sfc_main$4 = {
-  name: "DtSkeletonShape",
-  mixins: [SkeletonAnimation],
-  props: {
-    /**
-     * Defines the shape of the skeleton, accepts circle or square.
-     * @values circle, square
-     */
-    shape: {
-      type: String,
-      default: "circle",
-      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
-    },
-    /**
-     * 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: 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
-    },
-    /**
-     * Additional class name for the content.
-     */
-    contentClass: {
-      type: [String, Object, Array],
-      default: ""
-    }
-  },
-  data() {
-    return {
-      SKELETON_SHAPES
-    };
-  },
-  computed: {
-    shapeStyles() {
-      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;
-      return {
-        ...this.skeletonStyle,
-        "min-width": size,
-        "max-width": size,
-        "min-height": size,
-        "max-height": size
-      };
-    }
-  }
-};
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "skeleton",
-    "data-qa": "skeleton-shape",
-    class: normalizeClass([
-      "skeleton-placeholder",
-      $data.SKELETON_SHAPES[$props.shape],
-      {
-        "skeleton-placeholder--animate": $props.animate
-      },
-      $props.contentClass
-    ]),
-    style: normalizeStyle($options.shapeStyles)
-  }, null, 6);
-}
-const DtSkeletonShape = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
-const _sfc_main$3 = {
-  name: "DtSkeletonText",
-  mixins: [SkeletonAnimation],
-  props: {
-    /**
-     * Skeleton type
-     * @values body, heading
-     */
-    type: {
-      type: String,
-      default: "body",
-      validator: (type) => SKELETON_TEXT_TYPES.includes(type)
-    },
-    /**
-     * Heading height
-     * @values sm, md, lg
-     */
-    headingHeight: {
-      type: String,
-      default: "md",
-      validator: (headingHeight) => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight)
-    },
-    /**
-     * 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: false
-    },
-    /**
-     * 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
-    };
-  }
-};
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return $props.type === "body" ? (openBlock(), createElementBlock("div", {
-    key: 0,
-    ref: "skeleton",
-    "data-qa": "skeleton-text-body",
-    class: normalizeClass([
-      "d-skeleton-text",
-      "skeleton-placeholder",
-      {
-        "skeleton-placeholder--animate": $props.animate
-      },
-      $props.contentClass
-    ]),
-    style: normalizeStyle({
-      width: $props.width,
-      ..._ctx.skeletonStyle
-    })
-  }, null, 6)) : $props.type === "heading" ? (openBlock(), createElementBlock("div", {
-    key: 1,
-    ref: "skeleton",
-    "data-qa": "skeleton-text-heading",
-    class: normalizeClass([
-      $data.SKELETON_HEADING_HEIGHTS[$props.headingHeight],
-      "d-skeleton-text--heading",
-      "skeleton-placeholder",
-      {
-        "skeleton-placeholder--animate": $props.animate
-      },
-      $props.contentClass
-    ]),
-    style: normalizeStyle({
-      width: $props.width,
-      ..._ctx.skeletonStyle
-    })
-  }, null, 6)) : createCommentVNode("", true);
-}
-const DtSkeletonText = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
-const validator = (number) => number !== "" && !Number.isNaN(Number(number));
-const _sfc_main$2 = {
-  name: "DtSkeletonParagraph",
-  components: {
-    DtSkeletonText
-  },
-  props: {
-    /**
-     * Quantity of rows to display
-     */
-    rows: {
-      type: [Number, String],
-      default: 3,
-      validator
-    },
-    /**
-     * This property has higher priority than "option.animate"
-     * @values true, false
-     */
-    animate: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Controls the min width of paragraphs
-     */
-    minWidth: {
-      type: [Number, String],
-      default: 30,
-      validator
-    },
-    /**
-     * Controls the max width of paragraphs
-     */
-    maxWidth: {
-      type: [Number, String],
-      default: 100,
-      validator
-    },
-    /**
-     * Controls the width of paragraphs
-     */
-    width: {
-      type: [String, Array],
-      default: null
-    },
-    /**
-     * If true, row widths will be random
-     * @values true, false
-     */
-    randomWidth: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 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
-    },
-    /**
-     * Duration time of the animation (ms), set -1 for an infinite animation.
-     */
-    animationDuration: {
-      type: Number,
-      default: -1
-    },
-    /**
-     * Additional class name for the content.
-     */
-    contentClass: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Additional class name for the row.
-     */
-    rowClass: {
-      type: String,
-      default: ""
-    }
-  },
-  computed: {
-    integerRows() {
-      return Number(this.rows);
-    }
-  },
-  methods: {
-    randomWidthPercentage() {
-      const min = Math.min(this.minWidth, this.maxWidth);
-      const max = Math.max(this.minWidth, this.maxWidth);
-      return `${Math.round(Math.random() * (max - min)) + min}%`;
-    },
-    getSizeParagraphRow(row) {
-      const paragraphWidth = this.width;
-      const isArrayWidth = Array.isArray(paragraphWidth);
-      const currentWidth = paragraphWidth == null ? void 0 : paragraphWidth[row - 1];
-      const isLastRow = row === this.rows;
-      if (this.randomWidth) {
-        return this.randomWidthPercentage();
-      }
-      if (paragraphWidth && !isArrayWidth) {
-        return paragraphWidth;
-      }
-      if (paragraphWidth && isArrayWidth && currentWidth) {
-        return currentWidth;
-      }
-      return isLastRow ? "38%" : "100%";
-    }
-  }
-};
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_skeleton_text = resolveComponent("dt-skeleton-text");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass([
-      "d-skeleton-paragraph",
-      $props.contentClass
-    ]),
-    contentClass: "",
-    "data-qa": "skeleton-paragraph"
-  }, [
-    (openBlock(true), createElementBlock(Fragment, null, renderList($options.integerRows, (row) => {
-      return openBlock(), createBlock(_component_dt_skeleton_text, {
-        key: row,
-        "data-qa": "skeleton-paragraph-row",
-        "content-class": $props.rowClass,
-        animate: $props.animate,
-        offset: $props.offset,
-        "animation-duration": $props.animationDuration,
-        width: $options.getSizeParagraphRow(row)
-      }, null, 8, ["content-class", "animate", "offset", "animation-duration", "width"]);
-    }), 128))
-  ], 2);
-}
-const DtSkeletonParagraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
-const _sfc_main$1 = {
-  name: "DtSkeletonListItem",
-  components: {
-    DtSkeletonShape,
-    DtSkeletonParagraph
-  },
-  props: {
-    /**
-     * Defines the shape of the skeleton, accepts circle or square.
-     * @values circle, square
-     */
-    shape: {
-      type: String,
-      default: "circle",
-      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
-    },
-    /**
-     * Size of the shape
-     * @values xs, sm, md, lg, xl
-     */
-    shapeSize: {
-      type: String,
-      default: "md"
-    },
-    /**
-     * Object containing quantity of paragraphs to display
-     * and a randomWidth boolean.
-     */
-    paragraphs: {
-      type: Object,
-      default: () => ({ rows: 3, randomWidth: true })
-    },
-    /**
-     * 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: 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
-    },
-    /**
-     * Additional class name for the shape.
-     */
-    shapeClass: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Additional class name for the content.
-     */
-    contentClass: {
-      type: String,
-      default: ""
-    }
-  }
-};
-const _hoisted_1$1 = { class: "d-skeleton-list-item__paragraph-container" };
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_skeleton_shape = resolveComponent("dt-skeleton-shape");
-  const _component_dt_skeleton_paragraph = resolveComponent("dt-skeleton-paragraph");
-  return openBlock(), createElementBlock("div", {
-    "data-qa": "skeleton-list-item",
-    class: normalizeClass([
-      "d-skeleton-list-item",
-      {
-        "d-skeleton-list-item--single": $props.paragraphs.rows === 1
-      },
-      $props.contentClass
-    ])
-  }, [
-    createVNode(_component_dt_skeleton_shape, {
-      class: "d-skeleton-list-item__shape",
-      size: $props.shapeSize,
-      shape: $props.shape,
-      "animation-duration": $props.animationDuration,
-      animate: $props.animate,
-      offset: $props.offset,
-      "content-class": $props.shapeClass
-    }, null, 8, ["size", "shape", "animation-duration", "animate", "offset", "content-class"]),
-    createElementVNode("div", _hoisted_1$1, [
-      createVNode(_component_dt_skeleton_paragraph, mergeProps($props.paragraphs, {
-        "animation-duration": $props.animationDuration,
-        animate: $props.animate,
-        offset: $props.offset
-      }), null, 16, ["animation-duration", "animate", "offset"])
-    ])
-  ], 2);
-}
-const DtSkeletonListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const _sfc_main = {
-  name: "DtSkeleton",
-  components: {
-    DtSkeletonText,
-    DtSkeletonShape,
-    DtSkeletonListItem,
-    DtSkeletonParagraph
-  },
-  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 = resolveComponent("dt-skeleton-list-item");
-  const _component_dt_skeleton_shape = resolveComponent("dt-skeleton-shape");
-  const _component_dt_skeleton_paragraph = resolveComponent("dt-skeleton-paragraph");
-  const _component_dt_skeleton_text = resolveComponent("dt-skeleton-text");
-  return openBlock(), createElementBlock("div", {
-    "aria-busy": "true",
-    role: "status",
-    "aria-label": $props.ariaLabel
-  }, [
-    $props.listItemOption ? (openBlock(), createBlock(_component_dt_skeleton_list_item, 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 ? (openBlock(), createBlock(_component_dt_skeleton_shape, 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 ? (openBlock(), createBlock(_component_dt_skeleton_paragraph, mergeProps({ key: 2 }, $props.paragraphOption === true ? {} : $props.paragraphOption, {
-      "animation-duration": $props.animationDuration,
-      animate: $props.animate,
-      offset: $props.offset
-    }), null, 16, ["animation-duration", "animate", "offset"])) : (openBlock(), createBlock(_component_dt_skeleton_text, 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__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+import { default as default2 } from "../components/skeleton/skeleton.vue.js";
+import { default as default3 } from "../components/skeleton/skeleton-list-item.vue.js";
+import { default as default4 } from "../components/skeleton/skeleton-text.vue.js";
+import { default as default5 } from "../components/skeleton/skeleton-shape.vue.js";
+import { default as default6 } from "../components/skeleton/skeleton-paragraph.vue.js";
+import { SKELETON_HEADING_HEIGHTS, SKELETON_RIPPLE_DURATION, SKELETON_SHAPES, SKELETON_SHAPE_SIZES, SKELETON_TEXT_TYPES } from "../components/skeleton/skeleton_constants.js";
 export {
-  DtSkeleton,
-  DtSkeletonListItem,
-  DtSkeletonParagraph,
-  DtSkeletonShape,
-  DtSkeletonText,
+  default2 as DtSkeleton,
+  default3 as DtSkeletonListItem,
+  default6 as DtSkeletonParagraph,
+  default5 as DtSkeletonShape,
+  default4 as DtSkeletonText,
   SKELETON_HEADING_HEIGHTS,
   SKELETON_RIPPLE_DURATION,
   SKELETON_SHAPES,