Line.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. var _excluded = ["from", "to", "direction"];
  4. import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
  5. import { presetPrimaryColors } from '@ant-design/colors';
  6. import { computed, defineComponent } from 'vue';
  7. import { progressProps } from './props';
  8. import { getSuccessPercent, validProgress } from './utils';
  9. export var lineProps = function lineProps() {
  10. return _objectSpread(_objectSpread({}, progressProps()), {}, {
  11. prefixCls: String,
  12. direction: {
  13. type: String
  14. }
  15. });
  16. };
  17. /**
  18. * {
  19. * '0%': '#afc163',
  20. * '75%': '#009900',
  21. * '50%': 'green', ====> '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
  22. * '25%': '#66FF00',
  23. * '100%': '#ffffff'
  24. * }
  25. */
  26. export var sortGradient = function sortGradient(gradients) {
  27. var tempArr = [];
  28. Object.keys(gradients).forEach(function (key) {
  29. var formattedKey = parseFloat(key.replace(/%/g, ''));
  30. if (!isNaN(formattedKey)) {
  31. tempArr.push({
  32. key: formattedKey,
  33. value: gradients[key]
  34. });
  35. }
  36. });
  37. tempArr = tempArr.sort(function (a, b) {
  38. return a.key - b.key;
  39. });
  40. return tempArr.map(function (_ref) {
  41. var key = _ref.key,
  42. value = _ref.value;
  43. return "".concat(value, " ").concat(key, "%");
  44. }).join(', ');
  45. };
  46. /**
  47. * Then this man came to realize the truth: Besides six pence, there is the moon. Besides bread and
  48. * butter, there is the bug. And... Besides women, there is the code.
  49. *
  50. * @example
  51. * {
  52. * "0%": "#afc163",
  53. * "25%": "#66FF00",
  54. * "50%": "#00CC00", // ====> linear-gradient(to right, #afc163 0%, #66FF00 25%,
  55. * "75%": "#009900", // #00CC00 50%, #009900 75%, #ffffff 100%)
  56. * "100%": "#ffffff"
  57. * }
  58. */
  59. export var handleGradient = function handleGradient(strokeColor, directionConfig) {
  60. var _strokeColor$from = strokeColor.from,
  61. from = _strokeColor$from === void 0 ? presetPrimaryColors.blue : _strokeColor$from,
  62. _strokeColor$to = strokeColor.to,
  63. to = _strokeColor$to === void 0 ? presetPrimaryColors.blue : _strokeColor$to,
  64. _strokeColor$directio = strokeColor.direction,
  65. direction = _strokeColor$directio === void 0 ? directionConfig === 'rtl' ? 'to left' : 'to right' : _strokeColor$directio,
  66. rest = _objectWithoutProperties(strokeColor, _excluded);
  67. if (Object.keys(rest).length !== 0) {
  68. var sortedGradients = sortGradient(rest);
  69. return {
  70. backgroundImage: "linear-gradient(".concat(direction, ", ").concat(sortedGradients, ")")
  71. };
  72. }
  73. return {
  74. backgroundImage: "linear-gradient(".concat(direction, ", ").concat(from, ", ").concat(to, ")")
  75. };
  76. };
  77. export default defineComponent({
  78. compatConfig: {
  79. MODE: 3
  80. },
  81. name: 'Line',
  82. props: lineProps(),
  83. setup: function setup(props, _ref2) {
  84. var slots = _ref2.slots;
  85. var backgroundProps = computed(function () {
  86. var strokeColor = props.strokeColor,
  87. direction = props.direction;
  88. return strokeColor && typeof strokeColor !== 'string' ? handleGradient(strokeColor, direction) : {
  89. background: strokeColor
  90. };
  91. });
  92. var trailStyle = computed(function () {
  93. return props.trailColor ? {
  94. backgroundColor: props.trailColor
  95. } : undefined;
  96. });
  97. var percentStyle = computed(function () {
  98. var percent = props.percent,
  99. strokeWidth = props.strokeWidth,
  100. strokeLinecap = props.strokeLinecap,
  101. size = props.size;
  102. return _objectSpread({
  103. width: "".concat(validProgress(percent), "%"),
  104. height: "".concat(strokeWidth || (size === 'small' ? 6 : 8), "px"),
  105. borderRadius: strokeLinecap === 'square' ? 0 : ''
  106. }, backgroundProps.value);
  107. });
  108. var successPercent = computed(function () {
  109. return getSuccessPercent(props);
  110. });
  111. var successPercentStyle = computed(function () {
  112. var strokeWidth = props.strokeWidth,
  113. size = props.size,
  114. strokeLinecap = props.strokeLinecap,
  115. success = props.success;
  116. return {
  117. width: "".concat(validProgress(successPercent.value), "%"),
  118. height: "".concat(strokeWidth || (size === 'small' ? 6 : 8), "px"),
  119. borderRadius: strokeLinecap === 'square' ? 0 : '',
  120. backgroundColor: success === null || success === void 0 ? void 0 : success.strokeColor
  121. };
  122. });
  123. return function () {
  124. var _slots$default;
  125. return _createVNode(_Fragment, null, [_createVNode("div", {
  126. "class": "".concat(props.prefixCls, "-outer")
  127. }, [_createVNode("div", {
  128. "class": "".concat(props.prefixCls, "-inner"),
  129. "style": trailStyle.value
  130. }, [_createVNode("div", {
  131. "class": "".concat(props.prefixCls, "-bg"),
  132. "style": percentStyle.value
  133. }, null), successPercent.value !== undefined ? _createVNode("div", {
  134. "class": "".concat(props.prefixCls, "-success-bg"),
  135. "style": successPercentStyle.value
  136. }, null) : null])]), (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
  137. };
  138. }
  139. });