{"version":3,"file":"Progress.vue.mjs","sources":["../../../../../../packages/components/progress/src/Progress.vue"],"sourcesContent":["<template>\n\t<span ref=\"elRef\" :flex=\"flex ? flex : null\" class=\"to-progress\" :class=\"setClass\" :style=\"setStyle\">\n\t\t<template v-if=\"type === 'circle'\">\n\t\t\t<svg class=\"svg\" viewBox=\"0 0 100 100\">\n\t\t\t\t<circle cx=\"50\" cy=\"50\" :r=\"radius\" fill=\"none\" :stroke-width=\"thick\" class=\"to-progress-bg\" />\n\t\t\t\t<circle cx=\"50\" cy=\"50\" :r=\"radius\" fill=\"none\" :stroke-width=\"barThick\" transform=\"rotate(-90, 50, 50)\" :stroke-dashoffset=\"strokeDashoffset\" :stroke-dasharray=\"strokeDasharray\" class=\"to-progress-bar\" />\n\t\t\t</svg>\n\t\t\t<div class=\"to-progress-text\">\n\t\t\t\t<slot :title=\"titleValue\" :content=\"content\">\n\t\t\t\t\t<div class=\"to-progress-text-title\">{{ titleValue }}</div>\n\t\t\t\t\t<div v-if=\"content\" class=\"to-progress-text-content\">{{ content }}</div>\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</template>\n\t\t<template v-else>\n\t\t\t<span class=\"to-progress-bg\">\n\t\t\t\t<span :style=\"setBarStyle\" class=\"to-progress-bar\">\n\t\t\t\t\t<span v-if=\"textPosition === 'inner'\" class=\"to-progress-text\">{{ textValue }}</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t\t<span v-if=\"textPosition === 'outer' && type !== 'loading'\" class=\"to-progress-text\" :style=\"setTextStyle\">\n\t\t\t\t{{ textValue }}\n\t\t\t</span>\n\t\t</template>\n\t</span>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'\n\nexport default defineComponent({\n\tname: 'ToProgress',\n\tprops: {\n\t\tflex: Boolean,\n\t\t// 类型：normal 或 loading\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'normal',\n\t\t\tvalidator: (val: string) => ['normal', 'loading', 'circle'].includes(val)\n\t\t},\n\t\t// 进度条百分比，0~100的数字\n\t\tvalue: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 0,\n\t\t\trequired: true\n\t\t},\n\t\t// 模式\n\t\tmode: {\n\t\t\ttype: String,\n\t\t\tdefault: 'default'\n\t\t},\n\t\t// 文字\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: ''\n\t\t},\n\t\t// 标题\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined\n\t\t},\n\t\t// 内容\n\t\tcontent: {\n\t\t\ttype: String,\n\t\t\tdefault: ''\n\t\t},\n\t\t// 进度位置：outer(在外)、inner(在内)、none(不显示进度)\n\t\ttextPosition: {\n\t\t\ttype: String,\n\t\t\tdefault: 'inner',\n\t\t\tvalidator: (val: string) => ['outer', 'inner', 'none'].includes(val)\n\t\t},\n\t\t// 显示值的宽度设置\n\t\ttextWidth: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 'auto'\n\t\t},\n\t\t// 颜色\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary'\n\t\t},\n\t\t// 宽度\n\t\twidth: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: ''\n\t\t},\n\t\t// 进度条大小\n\t\tbarSize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 1\n\t\t}\n\t},\n\tsetup(props) {\n\t\t// 响应式状态\n\t\tconst elRef = ref<HTMLElement | null>(null)\n\t\tconst radius = ref<number>(0)\n\t\tconst thick = ref<number>(0)\n\t\tconst barRadius = ref<number>(0)\n\t\tconst barThick = ref<number>(0)\n\t\tconst em = ref(0)\n\t\tconst offsetWidth = ref(0)\n\t\tconst iPercentage = ref('')\n\n\t\tconst getColor = (color: string) => {\n\t\t\tlet c = color\n\t\t\t// 随机色彩逻辑，实际项目中可能需要根据实际环境调整\n\t\t\tlet colors = ['primary', 'success', 'warning', 'danger', 'info', 'secondary', 'fg']\n\t\t\tlet number = Math.round(Math.random() * 6)\n\t\t\tif (color === 'radam') {\n\t\t\t\tc = colors[number]\n\t\t\t}\n\n\t\t\tswitch (c) {\n\t\t\t\tcase 'fg':\n\t\t\t\t\treturn '#000'\n\t\t\t\tcase 'info':\n\t\t\t\t\treturn '#999'\n\t\t\t\tcase 'warning':\n\t\t\t\t\treturn '#f3b100'\n\t\t\t\tcase 'success':\n\t\t\t\t\treturn '#8fc320'\n\t\t\t\tcase 'danger':\n\t\t\t\t\treturn '#e40077'\n\t\t\t\tcase 'secondary':\n\t\t\t\t\treturn '#4d5b65'\n\t\t\t\tcase 'primary':\n\t\t\t\t\treturn '#0085d0'\n\t\t\t\tdefault:\n\t\t\t\t\treturn color\n\t\t\t}\n\t\t}\n\n\t\tconst circumference = computed(() => 2 * Math.PI * radius.value)\n\t\tconst strokeDasharray = computed(() => circumference.value)\n\t\tconst strokeDashoffset = computed(() => circumference.value * (1 - Number(props.value) / 100))\n\n\t\tconst textValue = computed(() => {\n\t\t\tif (props.text) {\n\t\t\t\treturn props.text\n\t\t\t} else {\n\t\t\t\treturn iPercentage.value\n\t\t\t}\n\t\t})\n\n\t\tconst titleValue = computed(() => {\n\t\t\tif (props.title !== undefined) {\n\t\t\t\treturn props.title\n\t\t\t} else {\n\t\t\t\t// 如果是100%，可以显示完成标识\n\t\t\t\tconst percentValue = Number(iPercentage.value.replace('%', ''))\n\t\t\t\tif (percentValue >= 100 && props.type === 'circle') {\n\t\t\t\t\treturn '100%'\n\t\t\t\t}\n\t\t\t\treturn iPercentage.value\n\t\t\t}\n\t\t})\n\n\t\tconst setClass = computed(() => {\n\t\t\tconst arr: string[] = []\n\t\t\tarr.push(`color-${props.color}`)\n\t\t\tif (props.textPosition) {\n\t\t\t\tarr.push(`text-position-${props.textPosition}`)\n\t\t\t}\n\t\t\tif (props.type) {\n\t\t\t\tarr.push(`type-${props.type}`)\n\t\t\t}\n\t\t\tif (props.mode) {\n\t\t\t\tarr.push(`mode-${props.mode}`)\n\t\t\t}\n\t\t\treturn arr\n\t\t})\n\n\t\tconst setStyle = computed(() => {\n\t\t\tconst obj: Record<string, string> = {}\n\t\t\tif (props.width) {\n\t\t\t\tif (props.type === 'circle') {\n\t\t\t\t\tif (!isNaN(Number(props.width))) {\n\t\t\t\t\t\t// 保持1:1的宽高比\n\t\t\t\t\t\tconst size = Number(props.width) + 'em'\n\t\t\t\t\t\tobj.width = size\n\t\t\t\t\t\tobj.height = size\n\t\t\t\t\t} else if (props.width === 'full') {\n\t\t\t\t\t\tobj.width = '100%'\n\t\t\t\t\t\t// 强制保持1:1的宽高比\n\t\t\t\t\t\tobj.aspectRatio = '1/1'\n\t\t\t\t\t} else {\n\t\t\t\t\t\tobj.width = props.width as string\n\t\t\t\t\t\tobj.height = props.width as string\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (!isNaN(Number(props.width))) {\n\t\t\t\t\t\tobj.width = props.width + 'em'\n\t\t\t\t\t} else if (props.width === 'full') {\n\t\t\t\t\t\tobj.width = '100%'\n\t\t\t\t\t} else {\n\t\t\t\t\t\tobj.width = props.width as string\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn obj\n\t\t})\n\n\t\tconst setBarStyle = computed(() => {\n\t\t\treturn 'width:' + iPercentage.value\n\t\t})\n\n\t\tconst setTextStyle = computed(() => {\n\t\t\tif (props.textWidth === 'auto') {\n\t\t\t\treturn ''\n\t\t\t} else {\n\t\t\t\treturn 'width:' + props.textWidth + 'em'\n\t\t\t}\n\t\t})\n\n\t\t// 方法\n\t\tconst setPercentage = () => {\n\t\t\tlet p = 0\n\t\t\tif ((props.value + '').indexOf('%') > -1) {\n\t\t\t\tp = Number((props.value as string).replace('%', ''))\n\t\t\t} else {\n\t\t\t\tp = Number(props.value)\n\t\t\t}\n\t\t\tif (p < 0) {\n\t\t\t\tp = 0\n\t\t\t}\n\t\t\tiPercentage.value = p + '%'\n\t\t}\n\n\t\tconst init = () => {\n\t\t\tlet timer: number | null = null\n\t\t\ttimer = window.setTimeout(() => {\n\t\t\t\tem.value = 12 // 基础单位，可能需要根据实际项目调整\n\t\t\t\tconst el = document.querySelector('.to-progress') as HTMLElement\n\t\t\t\tif (el) {\n\t\t\t\t\tif (props.type === 'circle') {\n\t\t\t\t\t\t// 获取基础值\n\t\t\t\t\t\tconst circleBgTick = parseFloat(getComputedStyle(elRef.value).getPropertyValue('--thick'))\n\t\t\t\t\t\tconst circleBarTick = parseFloat(getComputedStyle(elRef.value).getPropertyValue('--bar-thick'))\n\t\t\t\t\t\tconst width = parseFloat(getComputedStyle(elRef.value).getPropertyValue('--width'))\n\n\t\t\t\t\t\t// 计算半径\n\t\t\t\t\t\tthick.value = (circleBgTick / width) * 100\n\t\t\t\t\t\tbarThick.value = (circleBarTick / width) * 100\n\t\t\t\t\t\tradius.value = 50 - Math.max(thick.value, barThick.value) / 2\n\n\t\t\t\t\t\t// 环形进度条使用固定尺寸\n\t\t\t\t\t\toffsetWidth.value = 120 // 默认大小为120px\n\n\t\t\t\t\t\t// 如果指定了width属性，则覆盖默认值\n\t\t\t\t\t\tif (typeof props.width === 'number') {\n\t\t\t\t\t\t\toffsetWidth.value = props.width * 16 // 转换em为px\n\t\t\t\t\t\t} else if (props.width === 'full' && el.parentElement) {\n\t\t\t\t\t\t\toffsetWidth.value = el.parentElement.offsetWidth\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\toffsetWidth.value = el.offsetWidth\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (timer) {\n\t\t\t\t\tclearTimeout(timer)\n\t\t\t\t\ttimer = null\n\t\t\t\t}\n\t\t\t}, 200)\n\t\t}\n\n\t\t// 生命周期钩子\n\t\tonMounted(() => {\n\t\t\twindow.addEventListener('resize', init)\n\t\t\tnextTick(() => {\n\t\t\t\tinit()\n\t\t\t})\n\t\t})\n\n\t\tonBeforeUnmount(() => {\n\t\t\twindow.removeEventListener('resize', init)\n\t\t})\n\n\t\t// 监听属性变化\n\t\twatch(\n\t\t\t() => props.value,\n\t\t\t() => {\n\t\t\t\tsetPercentage()\n\t\t\t}\n\t\t)\n\n\t\t// 初始化\n\t\tsetPercentage()\n\n\t\treturn {\n\t\t\tthick,\n\t\t\telRef,\n\t\t\tem,\n\t\t\tbarThick,\n\t\t\tbarRadius,\n\t\t\toffsetWidth,\n\t\t\tiPercentage,\n\t\t\tgetColor,\n\t\t\tradius,\n\t\t\tstrokeDasharray,\n\t\t\tstrokeDashoffset,\n\t\t\ttextValue,\n\t\t\ttitleValue,\n\t\t\tsetClass,\n\t\t\tsetStyle,\n\t\t\tsetBarStyle,\n\t\t\tsetTextStyle\n\t\t}\n\t}\n})\n</script>\n"],"names":["flex","setStyle","type","_openBlock","_createElementBlock","_Fragment","_createElementVNode","radius","strokeDashoffset","titleValue","_renderSlot","content","_toDisplayString","setBarStyle","_normalizeStyle","textPosition"],"mappings":"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"}