Progress.mjs 1.9 KB

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