Skeleton.mjs 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
  2. import { defineComponent } from "vue";
  3. import { addUnit, truthProp, numericProp, getSizeStyle, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
  4. const [name, bem] = createNamespace("skeleton");
  5. const DEFAULT_ROW_WIDTH = "100%";
  6. const DEFAULT_LAST_ROW_WIDTH = "60%";
  7. const skeletonProps = {
  8. row: makeNumericProp(0),
  9. title: Boolean,
  10. round: Boolean,
  11. avatar: Boolean,
  12. loading: truthProp,
  13. animate: truthProp,
  14. avatarSize: numericProp,
  15. titleWidth: numericProp,
  16. avatarShape: makeStringProp("round"),
  17. rowWidth: {
  18. type: [Number, String, Array],
  19. default: DEFAULT_ROW_WIDTH
  20. }
  21. };
  22. var stdin_default = defineComponent({
  23. name,
  24. inheritAttrs: false,
  25. props: skeletonProps,
  26. setup(props, {
  27. slots,
  28. attrs
  29. }) {
  30. const renderAvatar = () => {
  31. if (props.avatar) {
  32. return _createVNode("div", {
  33. "class": bem("avatar", props.avatarShape),
  34. "style": getSizeStyle(props.avatarSize)
  35. }, null);
  36. }
  37. };
  38. const renderTitle = () => {
  39. if (props.title) {
  40. return _createVNode("h3", {
  41. "class": bem("title"),
  42. "style": {
  43. width: addUnit(props.titleWidth)
  44. }
  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("div", {
  61. "class": bem("row"),
  62. "style": {
  63. width: addUnit(getRowWidth(i))
  64. }
  65. }, null));
  66. return () => {
  67. var _a;
  68. if (!props.loading) {
  69. return (_a = slots.default) == null ? void 0 : _a.call(slots);
  70. }
  71. return _createVNode("div", _mergeProps({
  72. "class": bem({
  73. animate: props.animate,
  74. round: props.round
  75. })
  76. }, attrs), [renderAvatar(), _createVNode("div", {
  77. "class": bem("content")
  78. }, [renderTitle(), renderRows()])]);
  79. };
  80. }
  81. });
  82. export {
  83. stdin_default as default
  84. };