{"version":3,"file":"progress.vue.mjs","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          ]\"\n          :style=\"barStyle\"\n        >\n          <div\n            v-if=\"(showText || $slots.default) && textInside\"\n            :class=\"ns.be('bar', 'innerText')\"\n          >\n            <slot v-bind=\"slotData\">\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=\"width ? `height: ${width}px; width: ${width}px` : undefined\"\n    >\n      <svg viewBox=\"0 0 100 100\">\n        <path\n          :class=\"ns.be('circle', 'track')\"\n          :d=\"trackPath\"\n          stroke=\"#e5e9f2\"\n          :stroke-width=\"strokeWidth\"\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          :stroke-linecap=\"strokeLinecap\"\n          :stroke-width=\"percentage ? strokeWidth : 0\"\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: `${textSize}px` }\"\n    >\n      <slot v-bind=\"slotData\">\n        <span v-if=\"!status\">{{ content }}</span>\n        <el-icon v-else><component :is=\"statusIcon\" /></el-icon>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { ElIcon } from '@element-ultra/components/icon'\nimport {\n  WarningFilled,\n  CircleCheck,\n  CircleClose,\n  Check,\n  Close\n} from 'icon-ultra'\nimport { useNamespace } from '@element-ultra/hooks'\nimport { progressProps } from './progress'\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElProgress',\n  components: {\n    ElIcon,\n    CircleCheck,\n    CircleClose,\n    Check,\n    Close,\n    WarningFilled\n  },\n  props: progressProps,\n\n  setup(props) {\n    const ns = useNamespace('progress')\n\n    const barStyle = computed(() => ({\n      width: `${props.percentage}%`,\n      animationDuration: `${props.duration}s`,\n      backgroundColor: getCurrentColor(props.percentage)\n    }))\n\n    const radius = computed(() => {\n      if (props.type === 'circle' || props.type === 'dashboard') {\n        return parseInt(`${50 - props.strokeWidth / 2}`, 10)\n      } else {\n        return 0\n      }\n    })\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\n    const perimeter = computed(() => 2 * Math.PI * radius.value)\n\n    const rate = computed(() => (props.type === 'dashboard' ? 0.75 : 1))\n\n    const strokeDashoffset = computed(() => {\n      const offset = (-1 * perimeter.value * (1 - rate.value)) / 2\n      return `${offset}px`\n    })\n\n    const trailPathStyle = computed(\n      (): CSSProperties => ({\n        strokeDasharray: `${perimeter.value * rate.value}px, ${\n          perimeter.value\n        }px`,\n        strokeDashoffset: strokeDashoffset.value\n      })\n    )\n\n    const circlePathStyle = computed(\n      (): CSSProperties => ({\n        strokeDasharray: `${\n          perimeter.value * rate.value * (props.percentage / 100)\n        }px, ${perimeter.value}px`,\n        strokeDashoffset: strokeDashoffset.value,\n        transition: props.indeterminate\n          ? 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'\n          : undefined\n      })\n    )\n\n    const stroke = computed(() => {\n      let ret: string\n      if (props.color) {\n        ret = getCurrentColor(props.percentage)\n      } else {\n        switch (props.status) {\n          case 'success':\n            ret = '#13ce66'\n            break\n          case 'exception':\n            ret = '#ff4949'\n            break\n          case 'warning':\n            ret = '#e6a23c'\n            break\n          default:\n            ret = '#20a0ff'\n        }\n      }\n      return ret\n    })\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\n    const content = computed(() => props.format(props.percentage))\n\n    const getCurrentColor = (percentage: number) => {\n      const { color } = props\n      if (typeof color === 'function') {\n        return color(percentage)\n      } else if (typeof color === 'string') {\n        return color\n      } else {\n        const span = 100 / color.length\n        const seriesColors = color.map((seriesColor, index) => {\n          if (typeof seriesColor === 'string') {\n            return {\n              color: seriesColor,\n              percentage: (index + 1) * span\n            }\n          }\n          return seriesColor\n        })\n        const colors = seriesColors.sort((a, b) => a.percentage - b.percentage)\n\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\n    const slotData = computed(() => {\n      return {\n        percentage: props.percentage\n      }\n    })\n\n    return {\n      ns,\n      barStyle,\n      radius,\n      trackPath,\n      perimeter,\n      rate,\n      strokeDashoffset,\n      trailPathStyle,\n      circlePathStyle,\n      stroke,\n      statusIcon,\n      content,\n      slotData\n    }\n  }\n})\n</script>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_toDisplayString","_createBlock","_withCtx"],"mappings":"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"}