Statistic.js 3.3 KB

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