index.js 2.2 KB

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