Statistic.js 3.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import { createVNode as _createVNode } from "vue";
  4. import { defineComponent } from 'vue';
  5. import PropTypes from '../_util/vue-types';
  6. import initDefaultProps from '../_util/props-util/initDefaultProps';
  7. import StatisticNumber from './Number';
  8. import Skeleton from '../skeleton/Skeleton';
  9. import useConfigInject from '../_util/hooks/useConfigInject';
  10. export var statisticProps = function statisticProps() {
  11. return {
  12. prefixCls: String,
  13. decimalSeparator: String,
  14. groupSeparator: String,
  15. format: String,
  16. value: {
  17. type: [String, Number, Object]
  18. },
  19. valueStyle: {
  20. type: Object,
  21. default: undefined
  22. },
  23. valueRender: PropTypes.any,
  24. formatter: PropTypes.any,
  25. precision: Number,
  26. prefix: PropTypes.any,
  27. suffix: PropTypes.any,
  28. title: PropTypes.any,
  29. loading: {
  30. type: Boolean,
  31. default: undefined
  32. }
  33. };
  34. };
  35. export default defineComponent({
  36. compatConfig: {
  37. MODE: 3
  38. },
  39. name: 'AStatistic',
  40. props: initDefaultProps(statisticProps(), {
  41. decimalSeparator: '.',
  42. groupSeparator: ',',
  43. loading: false
  44. }),
  45. slots: ['title', 'prefix', 'suffix', 'formatter'],
  46. setup: function setup(props, _ref) {
  47. var slots = _ref.slots;
  48. var _useConfigInject = useConfigInject('statistic', props),
  49. prefixCls = _useConfigInject.prefixCls,
  50. direction = _useConfigInject.direction;
  51. return function () {
  52. var _props$title, _slots$title, _props$prefix, _slots$prefix, _props$suffix, _slots$suffix, _props$formatter;
  53. var _props$value = props.value,
  54. value = _props$value === void 0 ? 0 : _props$value,
  55. valueStyle = props.valueStyle,
  56. valueRender = props.valueRender;
  57. var pre = prefixCls.value;
  58. var title = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : (_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots);
  59. var prefix = (_props$prefix = props.prefix) !== null && _props$prefix !== void 0 ? _props$prefix : (_slots$prefix = slots.prefix) === null || _slots$prefix === void 0 ? void 0 : _slots$prefix.call(slots);
  60. var suffix = (_props$suffix = props.suffix) !== null && _props$suffix !== void 0 ? _props$suffix : (_slots$suffix = slots.suffix) === null || _slots$suffix === void 0 ? void 0 : _slots$suffix.call(slots);
  61. var formatter = (_props$formatter = props.formatter) !== null && _props$formatter !== void 0 ? _props$formatter : slots.formatter;
  62. // data-for-update just for update component
  63. // https://github.com/vueComponent/ant-design-vue/pull/3170
  64. var valueNode = _createVNode(StatisticNumber, _objectSpread({
  65. "data-for-update": Date.now()
  66. }, _objectSpread(_objectSpread({}, props), {}, {
  67. prefixCls: pre,
  68. value: value,
  69. formatter: formatter
  70. })), null);
  71. if (valueRender) {
  72. valueNode = valueRender(valueNode);
  73. }
  74. return _createVNode("div", {
  75. "class": [pre, _defineProperty({}, "".concat(pre, "-rtl"), direction.value === 'rtl')]
  76. }, [title && _createVNode("div", {
  77. "class": "".concat(pre, "-title")
  78. }, [title]), _createVNode(Skeleton, {
  79. "paragraph": false,
  80. "loading": props.loading
  81. }, {
  82. default: function _default() {
  83. return [_createVNode("div", {
  84. "style": valueStyle,
  85. "class": "".concat(pre, "-content")
  86. }, [prefix && _createVNode("span", {
  87. "class": "".concat(pre, "-content-prefix")
  88. }, [prefix]), valueNode, suffix && _createVNode("span", {
  89. "class": "".concat(pre, "-content-suffix")
  90. }, [suffix])])];
  91. }
  92. })]);
  93. };
  94. }
  95. });