You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1 lines
19 KiB

{"ast":null,"code":"import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, renderSlot, toDisplayString, createCommentVNode, createBlock, withCtx, resolveDynamicComponent } from 'vue';\nimport { ElIcon } from '../../icon/index.mjs';\nimport { WarningFilled, CircleCheck, CircleClose, Check, Close } from '@element-plus/icons-vue';\nimport { progressProps } from './progress.mjs';\nimport _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';\nimport { useNamespace } from '../../../hooks/use-namespace/index.mjs';\nimport { isFunction, isString } from '@vue/shared';\nconst __default__ = defineComponent({\n name: \"ElProgress\"\n});\nconst _sfc_main = /* @__PURE__ */defineComponent({\n ...__default__,\n props: progressProps,\n setup(__props) {\n const props = __props;\n const STATUS_COLOR_MAP = {\n success: \"#13ce66\",\n exception: \"#ff4949\",\n warning: \"#e6a23c\",\n default: \"#20a0ff\"\n };\n const ns = useNamespace(\"progress\");\n const barStyle = computed(() => {\n const barStyle2 = {\n width: `${props.percentage}%`,\n animationDuration: `${props.duration}s`\n };\n const color = getCurrentColor(props.percentage);\n if (color.includes(\"gradient\")) {\n barStyle2.background = color;\n } else {\n barStyle2.backgroundColor = color;\n }\n return barStyle2;\n });\n const relativeStrokeWidth = computed(() => (props.strokeWidth / props.width * 100).toFixed(1));\n const radius = computed(() => {\n if ([\"circle\", \"dashboard\"].includes(props.type)) {\n return Number.parseInt(`${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`, 10);\n }\n return 0;\n });\n const trackPath = computed(() => {\n const r = radius.value;\n const isDashboard = props.type === \"dashboard\";\n return `\n M 50 50\n m 0 ${isDashboard ? \"\" : \"-\"}${r}\n a ${r} ${r} 0 1 1 0 ${isDashboard ? \"-\" : \"\"}${r * 2}\n a ${r} ${r} 0 1 1 0 ${isDashboard ? \"\" : \"-\"}${r * 2}\n `;\n });\n const perimeter = computed(() => 2 * Math.PI * radius.value);\n const rate = computed(() => props.type === \"dashboard\" ? 0.75 : 1);\n const strokeDashoffset = computed(() => {\n const offset = -1 * perimeter.value * (1 - rate.value) / 2;\n return `${offset}px`;\n });\n const trailPathStyle = computed(() => ({\n strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,\n strokeDashoffset: strokeDashoffset.value\n }));\n const circlePathStyle = computed(() => ({\n strokeDasharray: `${perimeter.value * rate.value * (props.percentage / 100)}px, ${perimeter.value}px`,\n strokeDashoffset: strokeDashoffset.value,\n transition: \"stroke-dasharray 0.6s ease 0s, stroke 0.6s ease, opacity ease 0.6s\"\n }));\n const stroke = computed(() => {\n let ret;\n if (props.color) {\n ret = getCurrentColor(props.percentage);\n } else {\n ret = STATUS_COLOR_MAP[props.status] || STATUS_COLOR_MAP.default;\n }\n return ret;\n });\n const statusIcon = computed(() => {\n if (props.status === \"warning\") {\n return WarningFilled;\n }\n if (props.type === \"line\") {\n return props.status === \"success\" ? CircleCheck : CircleClose;\n } else {\n return props.status === \"success\" ? Check : Close;\n }\n });\n const progressTextSize = computed(() => {\n return props.type === \"line\" ? 12 + props.strokeWidth * 0.4 : props.width * 0.111111 + 2;\n });\n const content = computed(() => props.format(props.percentage));\n function getColors(color) {\n const span = 100 / color.length;\n const seriesColors = color.map((seriesColor, index) => {\n if (isString(seriesColor)) {\n return {\n color: seriesColor,\n percentage: (index + 1) * span\n };\n }\n return seriesColor;\n });\n return seriesColors.sort((a, b) => a.percentage - b.percentage);\n }\n const getCurrentColor = percentage => {\n var _a;\n const {\n color\n } = props;\n if (isFunction(color)) {\n return color(percentage);\n } else if (isString(color)) {\n return color;\n } else {\n const colors = getColors(color);\n for (const color2 of colors) {\n if (color2.percentage > percentage) return color2.color;\n }\n return (_a = colors[colors.length - 1]) == null ? void 0 : _a.color;\n }\n };\n return (_ctx, _cache) => {\n return openBlock(), createElementBlock(\"div\", {\n class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.type), unref(ns).is(_ctx.status), {\n [unref(ns).m(\"without-text\")]: !_ctx.showText,\n [unref(ns).m(\"text-inside\")]: _ctx.textInside\n }]),\n role: \"progressbar\",\n \"aria-valuenow\": _ctx.percentage,\n \"aria-valuemin\": \"0\",\n \"aria-valuemax\": \"100\"\n }, [_ctx.type === \"line\" ? (openBlock(), createElementBlock(\"div\", {\n key: 0,\n class: normalizeClass(unref(ns).b(\"bar\"))\n }, [createElementVNode(\"div\", {\n class: normalizeClass(unref(ns).be(\"bar\", \"outer\")),\n style: normalizeStyle({\n height: `${_ctx.strokeWidth}px`\n })\n }, [createElementVNode(\"div\", {\n class: normalizeClass([unref(ns).be(\"bar\", \"inner\"), {\n [unref(ns).bem(\"bar\", \"inner\", \"indeterminate\")]: _ctx.indeterminate\n }, {\n [unref(ns).bem(\"bar\", \"inner\", \"striped\")]: _ctx.striped\n }, {\n [unref(ns).bem(\"bar\", \"inner\", \"striped-flow\")]: _ctx.stripedFlow\n }]),\n style: normalizeStyle(unref(barStyle))\n }, [(_ctx.showText || _ctx.$slots.default) && _ctx.textInside ? (openBlock(), createElementBlock(\"div\", {\n key: 0,\n class: normalizeClass(unref(ns).be(\"bar\", \"innerText\"))\n }, [renderSlot(_ctx.$slots, \"default\", {\n percentage: _ctx.percentage\n }, () => [createElementVNode(\"span\", null, toDisplayString(unref(content)), 1)])], 2)) : createCommentVNode(\"v-if\", true)], 6)], 6)], 2)) : (openBlock(), createElementBlock(\"div\", {\n key: 1,\n class: normalizeClass(unref(ns).b(\"circle\")),\n style: normalizeStyle({\n height: `${_ctx.width}px`,\n width: `${_ctx.width}px`\n })\n }, [(openBlock(), createElementBlock(\"svg\", {\n viewBox: \"0 0 100 100\"\n }, [createElementVNode(\"path\", {\n class: normalizeClass(unref(ns).be(\"circle\", \"track\")),\n d: unref(trackPath),\n stroke: `var(${unref(ns).cssVarName(\"fill-color-light\")}, #e5e9f2)`,\n \"stroke-linecap\": _ctx.strokeLinecap,\n \"stroke-width\": unref(relativeStrokeWidth),\n fill: \"none\",\n style: normalizeStyle(unref(trailPathStyle))\n }, null, 14, [\"d\", \"stroke\", \"stroke-linecap\", \"stroke-width\"]), createElementVNode(\"path\", {\n class: normalizeClass(unref(ns).be(\"circle\", \"path\")),\n d: unref(trackPath),\n stroke: unref(stroke),\n fill: \"none\",\n opacity: _ctx.percentage ? 1 : 0,\n \"stroke-linecap\": _ctx.strokeLinecap,\n \"stroke-width\": unref(relativeStrokeWidth),\n style: normalizeStyle(unref(circlePathStyle))\n }, null, 14, [\"d\", \"stroke\", \"opacity\", \"stroke-linecap\", \"stroke-width\"])]))], 6)), (_ctx.showText || _ctx.$slots.default) && !_ctx.textInside ? (openBlock(), createElementBlock(\"div\", {\n key: 2,\n class: normalizeClass(unref(ns).e(\"text\")),\n style: normalizeStyle({\n fontSize: `${unref(progressTextSize)}px`\n })\n }, [renderSlot(_ctx.$slots, \"default\", {\n percentage: _ctx.percentage\n }, () => [!_ctx.status ? (openBlock(), createElementBlock(\"span\", {\n key: 0\n }, toDisplayString(unref(content)), 1)) : (openBlock(), createBlock(unref(ElIcon), {\n key: 1\n }, {\n default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(statusIcon))))]),\n _: 1\n }))])], 6)) : createCommentVNode(\"v-if\", true)], 10, [\"aria-valuenow\"]);\n };\n }\n});\nvar Progress = /* @__PURE__ */_export_sfc(_sfc_main, [[\"__file\", \"progress.vue\"]]);\nexport { Progress as default };","map":{"version":3,"names":["name","STATUS_COLOR_MAP","success","exception","warning","default","ns","useNamespace","barStyle","computed","barStyle2","width","props","percentage","animationDuration","duration","color","getCurrentColor","includes","background","backgroundColor","relativeStrokeWidth","strokeWidth","toFixed","radius","type","Number","parseInt","parseFloat","value","trackPath","r","isDashboard","perimeter","Math","PI","rate","strokeDashoffset","offset","trailPathStyle","strokeDasharray","circlePathStyle","transition","stroke","ret","status","statusIcon","WarningFilled","CircleCheck","CircleClose","Check","Close","progressTextSize","content","format","getColors","span","length","seriesColors","map","seriesColor","index","isString","sort","a","b","_a","isFunction","colors","color2","_ctx","_cache","openBlock","createElementBlock","class","normalizeClass"],"sources":["../../../../../../packages/components/progress/src/progress.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n ns.b(),\n ns.m(type),\n ns.is(status),\n {\n [ns.m('without-text')]: !showText,\n [ns.m('text-inside')]: textInside,\n },\n ]\"\n role=\"progressbar\"\n :aria-valuenow=\"percentage\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <div v-if=\"type === 'line'\" :class=\"ns.b('bar')\">\n <div\n :class=\"ns.be('bar', 'outer')\"\n :style=\"{ height: `${strokeWidth}px` }\"\n >\n <div\n :class=\"[\n ns.be('bar', 'inner'),\n { [ns.bem('bar', 'inner', 'indeterminate')]: indeterminate },\n { [ns.bem('bar', 'inner', 'striped')]: striped },\n { [ns.bem('bar', 'inner', 'striped-flow')]: stripedFlow },\n ]\"\n :style=\"barStyle\"\n >\n <div\n v-if=\"(showText || $slots.default) && textInside\"\n :class=\"ns.be('bar', 'innerText')\"\n >\n <slot :percentage=\"percentage\">\n <span>{{ content }}</span>\n </slot>\n </div>\n </div>\n </div>\n </div>\n <div\n v-else\n :class=\"ns.b('circle')\"\n :style=\"{ height: `${width}px`, width: `${width}px` }\"\n >\n <svg viewBox=\"0 0 100 100\">\n <path\n :class=\"ns.be('circle', 'track')\"\n :d=\"trackPath\"\n :stroke=\"`var(${ns.cssVarName('fill-color-light')}, #e5e9f2)`\"\n :stroke-linecap=\"strokeLinecap\"\n :stroke-width=\"relativeStrokeWidth\"\n fill=\"none\"\n :style=\"trailPathStyle\"\n />\n <path\n :class=\"ns.be('circle', 'path')\"\n :d=\"trackPath\"\n :stroke=\"stroke\"\n fill=\"none\"\n :opacity=\"percentage ? 1 : 0\"\n :stroke-linecap=\"strokeLinecap\"\n :stroke-width=\"relativeStrokeWidth\"\n :style=\"circlePathStyle\"\n />\n </svg>\n </div>\n <div\n v-if=\"(showText || $slots.default) && !textInside\"\n :class=\"ns.e('text')\"\n :style=\"{ fontSize: `${progressTextSize}px` }\"\n >\n <slot :percentage=\"percentage\">\n <span v-if=\"!status\">{{ content }}</span>\n <el-icon v-else>\n <component :is=\"statusIcon\" />\n </el-icon>\n </slot>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n Check,\n CircleCheck,\n CircleClose,\n Close,\n WarningFilled,\n} from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isFunction, isString } from '@element-plus/utils'\nimport { progressProps } from './progress'\nimport type { CSSProperties } from 'vue'\nimport type { ProgressColor } from './progress'\n\ndefineOptions({\n name: 'ElProgress',\n})\n\nconst STATUS_COLOR_MAP: Record<string, string> = {\n success: '#13ce66',\n exception: '#ff4949',\n warning: '#e6a23c',\n default: '#20a0ff',\n}\n\nconst props = defineProps(progressProps)\n\nconst ns = useNamespace('progress')\n\nconst barStyle = computed<CSSProperties>(() => {\n const barStyle: CSSProperties = {\n width: `${props.percentage}%`,\n animationDuration: `${props.duration}s`,\n }\n const color = getCurrentColor(props.percentage)\n if (color.includes('gradient')) {\n barStyle.background = color\n } else {\n barStyle.backgroundColor = color\n }\n return barStyle\n})\n\nconst relativeStrokeWidth = computed(() =>\n ((props.strokeWidth / props.width) * 100).toFixed(1)\n)\n\nconst radius = computed(() => {\n if (['circle', 'dashboard'].includes(props.type)) {\n return Number.parseInt(\n `${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`,\n 10\n )\n }\n return 0\n})\n\nconst trackPath = computed(() => {\n const r = radius.value\n const isDashboard = props.type === 'dashboard'\n return `\n M 50 50\n m 0 ${isDashboard ? '' : '-'}${r}\n a ${r} ${r} 0 1 1 0 ${isDashboard ? '-' : ''}${r * 2}\n a ${r} ${r} 0 1 1 0 ${isDashboard ? '' : '-'}${r * 2}\n `\n})\n\nconst perimeter = computed(() => 2 * Math.PI * radius.value)\n\nconst rate = computed(() => (props.type === 'dashboard' ? 0.75 : 1))\n\nconst strokeDashoffset = computed(() => {\n const offset = (-1 * perimeter.value * (1 - rate.value)) / 2\n return `${offset}px`\n})\n\nconst trailPathStyle = computed<CSSProperties>(() => ({\n strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,\n strokeDashoffset: strokeDashoffset.value,\n}))\n\nconst circlePathStyle = computed<CSSProperties>(() => ({\n strokeDasharray: `${\n perimeter.value * rate.value * (props.percentage / 100)\n }px, ${perimeter.value}px`,\n strokeDashoffset: strokeDashoffset.value,\n transition:\n 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease, opacity ease 0.6s',\n}))\n\nconst stroke = computed(() => {\n let ret: string\n if (props.color) {\n ret = getCurrentColor(props.percentage)\n } else {\n ret = STATUS_COLOR_MAP[props.status] || STATUS_COLOR_MAP.default\n }\n return ret\n})\n\nconst statusIcon = computed(() => {\n if (props.status === 'warning') {\n return WarningFilled\n }\n if (props.type === 'line') {\n return props.status === 'success' ? CircleCheck : CircleClose\n } else {\n return props.status === 'success' ? Check : Close\n }\n})\n\nconst progressTextSize = computed(() => {\n return props.type === 'line'\n ? 12 + props.strokeWidth * 0.4\n : props.width * 0.111111 + 2\n})\n\nconst content = computed(() => props.format(props.percentage))\n\nfunction getColors(color: ProgressColor[]) {\n const span = 100 / color.length\n const seriesColors = color.map((seriesColor, index) => {\n if (isString(seriesColor)) {\n return {\n color: seriesColor,\n percentage: (index + 1) * span,\n }\n }\n return seriesColor\n })\n return seriesColors.sort((a, b) => a.percentage - b.percentage)\n}\n\nconst getCurrentColor = (percentage: number) => {\n const { color } = props\n if (isFunction(color)) {\n return color(percentage)\n } else if (isString(color)) {\n return color\n } else {\n const colors = getColors(color)\n for (const color of colors) {\n if (color.percentage > percentage) return color.color\n }\n return colors[colors.length - 1]?.color\n }\n}\n</script>\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}