Skeleton.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import _typeof from "@babel/runtime/helpers/esm/typeof";
  4. import { createVNode as _createVNode } from "vue";
  5. import { defineComponent } from 'vue';
  6. import classNames from '../_util/classNames';
  7. import { initDefaultProps } from '../_util/props-util';
  8. import Title from './Title';
  9. import Paragraph from './Paragraph';
  10. import useConfigInject from '../_util/hooks/useConfigInject';
  11. import Element from './Element';
  12. export var skeletonProps = function skeletonProps() {
  13. return {
  14. active: {
  15. type: Boolean,
  16. default: undefined
  17. },
  18. loading: {
  19. type: Boolean,
  20. default: undefined
  21. },
  22. prefixCls: String,
  23. avatar: {
  24. type: [Boolean, Object],
  25. default: undefined
  26. },
  27. title: {
  28. type: [Boolean, Object],
  29. default: undefined
  30. },
  31. paragraph: {
  32. type: [Boolean, Object],
  33. default: undefined
  34. },
  35. round: {
  36. type: Boolean,
  37. default: undefined
  38. }
  39. };
  40. };
  41. function getComponentProps(prop) {
  42. if (prop && _typeof(prop) === 'object') {
  43. return prop;
  44. }
  45. return {};
  46. }
  47. function getAvatarBasicProps(hasTitle, hasParagraph) {
  48. if (hasTitle && !hasParagraph) {
  49. // Square avatar
  50. return {
  51. size: 'large',
  52. shape: 'square'
  53. };
  54. }
  55. return {
  56. size: 'large',
  57. shape: 'circle'
  58. };
  59. }
  60. function getTitleBasicProps(hasAvatar, hasParagraph) {
  61. if (!hasAvatar && hasParagraph) {
  62. return {
  63. width: '38%'
  64. };
  65. }
  66. if (hasAvatar && hasParagraph) {
  67. return {
  68. width: '50%'
  69. };
  70. }
  71. return {};
  72. }
  73. function getParagraphBasicProps(hasAvatar, hasTitle) {
  74. var basicProps = {};
  75. // Width
  76. if (!hasAvatar || !hasTitle) {
  77. basicProps.width = '61%';
  78. }
  79. // Rows
  80. if (!hasAvatar && hasTitle) {
  81. basicProps.rows = 3;
  82. } else {
  83. basicProps.rows = 2;
  84. }
  85. return basicProps;
  86. }
  87. var Skeleton = defineComponent({
  88. compatConfig: {
  89. MODE: 3
  90. },
  91. name: 'ASkeleton',
  92. props: initDefaultProps(skeletonProps(), {
  93. avatar: false,
  94. title: true,
  95. paragraph: true
  96. }),
  97. setup: function setup(props, _ref) {
  98. var slots = _ref.slots;
  99. var _useConfigInject = useConfigInject('skeleton', props),
  100. prefixCls = _useConfigInject.prefixCls,
  101. direction = _useConfigInject.direction;
  102. return function () {
  103. var _slots$default;
  104. var loading = props.loading,
  105. avatar = props.avatar,
  106. title = props.title,
  107. paragraph = props.paragraph,
  108. active = props.active,
  109. round = props.round;
  110. var pre = prefixCls.value;
  111. if (loading || props.loading === undefined) {
  112. var _classNames;
  113. var hasAvatar = !!avatar || avatar === '';
  114. var hasTitle = !!title || title === '';
  115. var hasParagraph = !!paragraph || paragraph === '';
  116. // Avatar
  117. var avatarNode;
  118. if (hasAvatar) {
  119. var avatarProps = _objectSpread(_objectSpread({
  120. prefixCls: "".concat(pre, "-avatar")
  121. }, getAvatarBasicProps(hasTitle, hasParagraph)), getComponentProps(avatar));
  122. avatarNode = _createVNode("div", {
  123. "class": "".concat(pre, "-header")
  124. }, [_createVNode(Element, avatarProps, null)]);
  125. }
  126. var contentNode;
  127. if (hasTitle || hasParagraph) {
  128. // Title
  129. var $title;
  130. if (hasTitle) {
  131. var titleProps = _objectSpread(_objectSpread({
  132. prefixCls: "".concat(pre, "-title")
  133. }, getTitleBasicProps(hasAvatar, hasParagraph)), getComponentProps(title));
  134. $title = _createVNode(Title, titleProps, null);
  135. }
  136. // Paragraph
  137. var paragraphNode;
  138. if (hasParagraph) {
  139. var paragraphProps = _objectSpread(_objectSpread({
  140. prefixCls: "".concat(pre, "-paragraph")
  141. }, getParagraphBasicProps(hasAvatar, hasTitle)), getComponentProps(paragraph));
  142. paragraphNode = _createVNode(Paragraph, paragraphProps, null);
  143. }
  144. contentNode = _createVNode("div", {
  145. "class": "".concat(pre, "-content")
  146. }, [$title, paragraphNode]);
  147. }
  148. var cls = classNames(pre, (_classNames = {}, _defineProperty(_classNames, "".concat(pre, "-with-avatar"), hasAvatar), _defineProperty(_classNames, "".concat(pre, "-active"), active), _defineProperty(_classNames, "".concat(pre, "-rtl"), direction.value === 'rtl'), _defineProperty(_classNames, "".concat(pre, "-round"), round), _classNames));
  149. return _createVNode("div", {
  150. "class": cls
  151. }, [avatarNode, contentNode]);
  152. }
  153. return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
  154. };
  155. }
  156. });
  157. export default Skeleton;