12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- import { createVNode as _createVNode } from "vue";
- import { computed, defineComponent } from "vue";
- import { addUnit, truthProp, numericProp, createNamespace } from "../utils/index.mjs";
- const [name, bem] = createNamespace("progress");
- const progressProps = {
- color: String,
- inactive: Boolean,
- pivotText: String,
- textColor: String,
- showPivot: truthProp,
- pivotColor: String,
- trackColor: String,
- strokeWidth: numericProp,
- percentage: {
- type: numericProp,
- default: 0,
- validator: (value) => value >= 0 && value <= 100
- }
- };
- var stdin_default = defineComponent({
- name,
- props: progressProps,
- setup(props) {
- const background = computed(() => props.inactive ? void 0 : props.color);
- const renderPivot = () => {
- const {
- textColor,
- pivotText,
- pivotColor,
- percentage
- } = props;
- const text = pivotText != null ? pivotText : `${percentage}%`;
- if (props.showPivot && text) {
- const style = {
- color: textColor,
- left: `${+percentage}%`,
- transform: `translate(-${+percentage}%,-50%)`,
- background: pivotColor || background.value
- };
- return _createVNode("span", {
- "style": style,
- "class": bem("pivot", {
- inactive: props.inactive
- })
- }, [text]);
- }
- };
- return () => {
- const {
- trackColor,
- percentage,
- strokeWidth
- } = props;
- const rootStyle = {
- background: trackColor,
- height: addUnit(strokeWidth)
- };
- const portionStyle = {
- width: `${percentage}%`,
- background: background.value
- };
- return _createVNode("div", {
- "class": bem(),
- "style": rootStyle
- }, [_createVNode("span", {
- "class": bem("portion", {
- inactive: props.inactive
- }),
- "style": portionStyle
- }, null), renderPivot()]);
- };
- }
- });
- export {
- stdin_default as default
- };
|