Skeleton.mjs 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. import { mergeProps as _mergeProps, Fragment as _Fragment, createVNode as _createVNode } from "vue";
  2. import { defineComponent } from "vue";
  3. import { addUnit, truthProp, numericProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
  4. import SkeletonTitle from "./SkeletonTitle.mjs";
  5. import SkeletonAvatar from "./SkeletonAvatar.mjs";
  6. import SkeletonParagraph, { DEFAULT_ROW_WIDTH } from "./SkeletonParagraph.mjs";
  7. const [name, bem] = createNamespace("skeleton");
  8. const DEFAULT_LAST_ROW_WIDTH = "60%";
  9. const skeletonProps = {
  10. row: makeNumericProp(0),
  11. round: Boolean,
  12. title: Boolean,
  13. titleWidth: numericProp,
  14. avatar: Boolean,
  15. avatarSize: numericProp,
  16. avatarShape: makeStringProp("round"),
  17. loading: truthProp,
  18. animate: truthProp,
  19. rowWidth: {
  20. type: [Number, String, Array],
  21. default: DEFAULT_ROW_WIDTH
  22. }
  23. };
  24. var stdin_default = defineComponent({
  25. name,
  26. inheritAttrs: false,
  27. props: skeletonProps,
  28. setup(props, {
  29. slots,
  30. attrs
  31. }) {
  32. const renderAvatar = () => {
  33. if (props.avatar) {
  34. return _createVNode(SkeletonAvatar, {
  35. "avatarShape": props.avatarShape,
  36. "avatarSize": props.avatarSize
  37. }, null);
  38. }
  39. };
  40. const renderTitle = () => {
  41. if (props.title) {
  42. return _createVNode(SkeletonTitle, {
  43. "round": props.round,
  44. "titleWidth": props.titleWidth
  45. }, null);
  46. }
  47. };
  48. const getRowWidth = (index) => {
  49. const {
  50. rowWidth
  51. } = props;
  52. if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
  53. return DEFAULT_LAST_ROW_WIDTH;
  54. }
  55. if (Array.isArray(rowWidth)) {
  56. return rowWidth[index];
  57. }
  58. return rowWidth;
  59. };
  60. const renderRows = () => Array(+props.row).fill("").map((_, i) => _createVNode(SkeletonParagraph, {
  61. "key": i,
  62. "round": props.round,
  63. "rowWidth": addUnit(getRowWidth(i))
  64. }, null));
  65. const renderContents = () => {
  66. if (slots.template) {
  67. return slots.template();
  68. }
  69. return _createVNode(_Fragment, null, [renderAvatar(), _createVNode("div", {
  70. "class": bem("content")
  71. }, [renderTitle(), renderRows()])]);
  72. };
  73. return () => {
  74. var _a;
  75. if (!props.loading) {
  76. return (_a = slots.default) == null ? void 0 : _a.call(slots);
  77. }
  78. return _createVNode("div", _mergeProps({
  79. "class": bem({
  80. animate: props.animate,
  81. round: props.round
  82. })
  83. }, attrs), [renderContents()]);
  84. };
  85. }
  86. });
  87. export {
  88. stdin_default as default,
  89. skeletonProps
  90. };