Line.js 5.6 KB

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