index.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
  6. var _utils = require("../utils");
  7. var _functional = require("../utils/functional");
  8. // Utils
  9. var _createNamespace = (0, _utils.createNamespace)('skeleton'),
  10. createComponent = _createNamespace[0],
  11. bem = _createNamespace[1];
  12. var DEFAULT_ROW_WIDTH = '100%';
  13. var DEFAULT_LAST_ROW_WIDTH = '60%';
  14. function Skeleton(h, props, slots, ctx) {
  15. if (!props.loading) {
  16. return slots.default && slots.default();
  17. }
  18. function Title() {
  19. if (props.title) {
  20. return h("h3", {
  21. "class": bem('title'),
  22. "style": {
  23. width: (0, _utils.addUnit)(props.titleWidth)
  24. }
  25. });
  26. }
  27. }
  28. function Rows() {
  29. var Rows = [];
  30. var rowWidth = props.rowWidth;
  31. function getRowWidth(index) {
  32. if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
  33. return DEFAULT_LAST_ROW_WIDTH;
  34. }
  35. if (Array.isArray(rowWidth)) {
  36. return rowWidth[index];
  37. }
  38. return rowWidth;
  39. }
  40. for (var i = 0; i < props.row; i++) {
  41. Rows.push(h("div", {
  42. "class": bem('row'),
  43. "style": {
  44. width: (0, _utils.addUnit)(getRowWidth(i))
  45. }
  46. }));
  47. }
  48. return Rows;
  49. }
  50. function Avatar() {
  51. if (props.avatar) {
  52. var size = (0, _utils.addUnit)(props.avatarSize);
  53. return h("div", {
  54. "class": bem('avatar', props.avatarShape),
  55. "style": {
  56. width: size,
  57. height: size
  58. }
  59. });
  60. }
  61. }
  62. return h("div", (0, _babelHelperVueJsxMergeProps.default)([{
  63. "class": bem({
  64. animate: props.animate,
  65. round: props.round
  66. })
  67. }, (0, _functional.inherit)(ctx)]), [Avatar(), h("div", {
  68. "class": bem('content')
  69. }, [Title(), Rows()])]);
  70. }
  71. Skeleton.props = {
  72. title: Boolean,
  73. round: Boolean,
  74. avatar: Boolean,
  75. titleWidth: [Number, String],
  76. avatarSize: [Number, String],
  77. row: {
  78. type: [Number, String],
  79. default: 0
  80. },
  81. loading: {
  82. type: Boolean,
  83. default: true
  84. },
  85. animate: {
  86. type: Boolean,
  87. default: true
  88. },
  89. avatarShape: {
  90. type: String,
  91. default: 'round'
  92. },
  93. rowWidth: {
  94. type: [Number, String, Array],
  95. default: DEFAULT_ROW_WIDTH
  96. }
  97. };
  98. var _default = createComponent(Skeleton);
  99. exports.default = _default;