Progress.mjs 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import { computed, defineComponent, createVNode as _createVNode } from "vue";
  2. import { addUnit, truthProp, numericProp, createNamespace } from "../utils/index.mjs";
  3. const [name, bem] = createNamespace("progress");
  4. const progressProps = {
  5. color: String,
  6. inactive: Boolean,
  7. pivotText: String,
  8. textColor: String,
  9. showPivot: truthProp,
  10. pivotColor: String,
  11. trackColor: String,
  12. strokeWidth: numericProp,
  13. percentage: {
  14. type: numericProp,
  15. default: 0,
  16. validator: (value) => +value >= 0 && +value <= 100
  17. }
  18. };
  19. var stdin_default = defineComponent({
  20. name,
  21. props: progressProps,
  22. setup(props) {
  23. const background = computed(() => props.inactive ? void 0 : props.color);
  24. const renderPivot = () => {
  25. const {
  26. textColor,
  27. pivotText,
  28. pivotColor,
  29. percentage
  30. } = props;
  31. const text = pivotText != null ? pivotText : `${percentage}%`;
  32. if (props.showPivot && text) {
  33. const style = {
  34. color: textColor,
  35. left: `${+percentage}%`,
  36. transform: `translate(-${+percentage}%,-50%)`,
  37. background: pivotColor || background.value
  38. };
  39. return _createVNode("span", {
  40. "style": style,
  41. "class": bem("pivot", {
  42. inactive: props.inactive
  43. })
  44. }, [text]);
  45. }
  46. };
  47. return () => {
  48. const {
  49. trackColor,
  50. percentage,
  51. strokeWidth
  52. } = props;
  53. const rootStyle = {
  54. background: trackColor,
  55. height: addUnit(strokeWidth)
  56. };
  57. const portionStyle = {
  58. width: `${percentage}%`,
  59. background: background.value
  60. };
  61. return _createVNode("div", {
  62. "class": bem(),
  63. "style": rootStyle
  64. }, [_createVNode("span", {
  65. "class": bem("portion", {
  66. inactive: props.inactive
  67. }),
  68. "style": portionStyle
  69. }, null), renderPivot()]);
  70. };
  71. }
  72. });
  73. export {
  74. stdin_default as default,
  75. progressProps
  76. };