{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-skeleton/index.vue"],"sourcesContent":["<template>\r\n  <!-- 骨架屏 -->\r\n  <template v-if=\"throttledLoading\">\r\n    <div :class=\"wrapperClasses\" v-bind=\"$attrs\">\r\n      <!-- 渲染的item数量-->\r\n      <template v-for=\"item in total\" :key=\"item\">\r\n        <slot v-if=\"loading\" :key=\"item\" name=\"template\">\r\n          <!-- 渲染的段落 -->\r\n          <skeleton-item\r\n            v-for=\"(_, index) in isNumber(paragraph)\r\n              ? paragraph\r\n              : paragraph.rows\"\r\n            :class=\"paragraphClasses(index)\"\r\n            :style=\"paragraphStyles(index)\"\r\n            :key=\"index\"\r\n            type=\"p\"\r\n          ></skeleton-item>\r\n        </slot>\r\n      </template>\r\n    </div>\r\n  </template>\r\n  <!-- 内容 -->\r\n  <template v-else>\r\n    <slot v-bind=\"$attrs\"></slot>\r\n  </template>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, toRef, computed } from 'vue';\r\nimport { isNumber } from '@vueuse/core';\r\nimport { isArray, isString } from '@vue/shared';\r\n\r\nimport { useThrottleRender } from '../../hooks';\r\n\r\nimport SkeletonItem from '../ivue-skeleton-item/index.vue';\r\n\r\nconst prefixCls = 'ivue-skeleton';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  props: {\r\n    /**\r\n     * 是否显示加载结束后的 DOM 结构\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    loading: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    /**\r\n     * 渲染延迟（以毫秒为单位）\r\n     *\r\n     * @type {Number}\r\n     */\r\n    throttle: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    /**\r\n     * 渲染多少个 template, 建议使用尽可能小的数字\r\n     *\r\n     * @type {Number}\r\n     */\r\n    total: {\r\n      type: Number,\r\n      default: 1,\r\n    },\r\n    /**\r\n     * 骨架屏段落数量\r\n     *\r\n     * @type {Number | Object}\r\n     */\r\n    paragraph: {\r\n      type: [Number, Object],\r\n      default: 4,\r\n    },\r\n    /**\r\n     * 是否使用动画\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    animated: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  setup(props) {\r\n    // 节流渲染\r\n    const throttledLoading = useThrottleRender(\r\n      toRef(props, 'loading'),\r\n      props.throttle\r\n    );\r\n\r\n    // computed\r\n\r\n    // 外层样式\r\n    const wrapperClasses = computed(() => {\r\n      return [\r\n        prefixCls,\r\n        {\r\n          'is-animated': props.animated,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // methods\r\n\r\n    // 段落class\r\n    const paragraphClasses = (index: number) => {\r\n      const _paragraph = isNumber(props.paragraph)\r\n        ? props.paragraph\r\n        : props.paragraph.rows;\r\n\r\n      const obj = {\r\n        [`${prefixCls}--paragraph`]: true,\r\n        // 第一个\r\n        ['is-first']: index === 0,\r\n        // 最后一个\r\n        ['is-last']: index === _paragraph - 1 && _paragraph > 1,\r\n      };\r\n\r\n      return obj;\r\n    };\r\n\r\n    // 段落style\r\n    const paragraphStyles = (index: number) => {\r\n      const obj: {\r\n        width?: number | string;\r\n      } = {};\r\n\r\n      // 不是NUMBER\r\n      if (\r\n        !isNumber(props.paragraph) &&\r\n        props.paragraph.width &&\r\n        isArray(props.paragraph.width)\r\n      ) {\r\n        let width = props.paragraph.width[index];\r\n\r\n        if (props.paragraph.width.length < props.paragraph.rows) {\r\n          width = props.paragraph.width[0];\r\n        }\r\n\r\n        // number\r\n        if (isNumber(width)) {\r\n          obj.width = `${width}px`;\r\n        }\r\n        // string\r\n        else if (isString(width)) {\r\n          obj.width = width;\r\n        }\r\n      }\r\n\r\n      return obj;\r\n    };\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // data\r\n      throttledLoading,\r\n\r\n      // computed\r\n      wrapperClasses,\r\n\r\n      // methods\r\n      isNumber,\r\n      paragraphClasses,\r\n      paragraphStyles,\r\n    };\r\n  },\r\n  components: {\r\n    SkeletonItem,\r\n  },\r\n});\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock","_Fragment","_createCommentVNode","_mergeProps","_renderList","_createBlock","_normalizeClass","_normalizeStyle"],"mappings":";;;;;;SAEkBA,SAAgB,EAAA,EAAAC,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAA;AAAA,IAC9BC,mBAAA,sBAAA,CAAA;AAAA,IAAA,KAAA,gBAAA,IAAAH,SAAA,EAA2B,EAAAC,kBAAA,CAAA,OAAAG,UAAA,CAAA;AAAA,MAAU,GAAA,EAAA,CAAA;AAAA,MACnC,OAAA,IAAA,CAAA,cAAA;AAAA,KAAA,EAAA,IAAA,CAAA,MAAA,CAAA,EAAA;AAAA;iBAEc,IAAO,CAAA,EAAAH,kBAAA,CAAAC,QAAA,EAAA,MAAAG,UAAA,CAAA,IAAA,CAAA,KAAA,EAAA,CAAA,IAAA,KAAA;eAAnBL,WAWO,EAAAC,kBAAA,CAAAC,UAXoB,EAAI,GAAA,EAWxB,MAAA,EAAA;AAAA,UAAA,IAAA,CAVL,kCACA,YAQiB,EAAA,GAAA,EAAA,IAAA,EAAA,EAAA,MAAA;AAAA,YAP2CC,mBAAS,kCAAA,CAAA;AAAA,aAAkBH,UAAU,IAAI,CAAA,EAA1FC,mBAAOC,2FAGV,IAAE,EAAA,CAAA,GAAA,KAAA,KAAA;AACF,cAAA,OAAAF,SAAA,EAAA,EAAAM,WAAA,CAAE,wBAAqB,EAAA;AAAA,gBAC5B,KAAK,EAAAC,cAAA,CAAK,IAAA,CAAA,gBAAA,CAAA,KAAA,CAAA,CAAA;AAAA,gBACX,KAAK,EAAAC,cAAA,CAAG,IAAA,CAAA,eAAA,CAAA,KAAA,CAAA,CAAA;AAAA,gBAAA,GAAA,EAAA,KAAA;AAAA;;;;;OAOlB,GAAA,GAAA,CAAA;AAAA,KAAA,EADA,iBAEE,EAAA,EAA6BP,mBAAAC,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,MAAAC,mBAAA,gBAAA,CAAA;AAAA;;;;;;;;"}