Skeleton.mjs 2.5 KB

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