{"version":3,"file":"circle.vue2.mjs","sources":["../../../../../../packages/components/progress/src/circle.vue"],"sourcesContent":["<script lang=\"ts\">\n  import type { PropType } from 'vue'\n  import { computed, defineComponent } from 'vue'\n  import { getNamespace } from '../../../utils/global-config'\n  import { isFunction, isString, isUndefined } from '../../../utils/is'\n  import type { ProgressSize } from './type'\n\n  const SIZE_MAP = {\n    small: 60,\n    normal: 80,\n    large: 100\n  }\n\n  const DEFAULT_STROKE_MAP = {\n    small: 2,\n    normal: 3,\n    large: 4\n  }\n\n  export default defineComponent({\n    name: 'ProgressCircle',\n    props: {\n      percent: {\n        type: Number,\n        default: 0\n      },\n      type: {\n        type: String,\n        default: ''\n      },\n      size: {\n        type: String as PropType<ProgressSize>,\n        default: 'normal'\n      },\n      strokeWidth: {\n        type: Number,\n        default: 4\n      },\n      width: {\n        type: [Number, String],\n        default: undefined\n      },\n      color: {\n        type: [String, Function],\n        default: undefined\n      },\n      // eslint-disable-next-line vue/require-default-prop\n      trackColor: String,\n      status: {\n        type: String,\n        default: undefined\n      },\n      showText: {\n        type: Boolean,\n        default: true\n      },\n      // eslint-disable-next-line vue/require-default-prop\n      formatText: Function\n    },\n    setup(props) {\n      const ns = getNamespace('progress-circle')\n\n      const cls = computed(() => [ns])\n\n      const mergedWidth = computed(() => {\n        if (isUndefined(props.width)) return SIZE_MAP[props.size]\n        return Number(props.width)\n      })\n\n      const mergedStrokeWidth = computed(() => props.strokeWidth ?? DEFAULT_STROKE_MAP[props.size])\n\n      const mergedPathStrokeWidth = computed(() => Math.max(2, mergedStrokeWidth.value - 2))\n\n      const radius = computed(() => (mergedWidth.value - mergedStrokeWidth.value) / 2)\n\n      const perimeter = computed(() => Math.PI * 2 * radius.value)\n\n      const center = computed(() => mergedWidth.value / 2)\n\n      const text = computed(() => {\n        if (isFunction(props.formatText)) {\n          return props.formatText(props.percent)\n        }\n        return props.percent + '%'\n      })\n\n      const getStrokeDashoffset = (percent: number, perimeter: number) => {\n        const offset = ((100 - percent) * perimeter) / 100\n        return offset\n      }\n\n      const getStroke = (color: any, status: any) => {\n        if (isString(color)) {\n          return props.color\n        }\n\n        if (isFunction(color)) {\n          return color(props.percent) as string\n        }\n\n        if (status) {\n          return `var(--bn-${status})`\n        }\n\n        return ''\n      }\n\n      const barStyle = computed(() => {\n        const style = {\n          stroke: getStroke(props.color, props.status),\n          strokeDasharray: perimeter.value,\n          strokeDashoffset: getStrokeDashoffset(props.percent, perimeter.value)\n        }\n        return style as any\n      })\n\n      return {\n        ns,\n        cls,\n        radius,\n        text,\n        center,\n        mergedWidth,\n        mergedStrokeWidth,\n        mergedPathStrokeWidth,\n        barStyle\n      }\n    }\n  })\n</script>\n\n<template>\n  <div\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    :aria-valuenow=\"percent\"\n    :class=\"cls\"\n    :style=\"{ width: `${mergedWidth}px`, height: `${mergedWidth}px` }\"\n  >\n    <svg :viewBox=\"`0 0 ${mergedWidth} ${mergedWidth}`\" :class=\"[`${ns}__svg`]\">\n      <circle\n        :class=\"`${ns}__track`\"\n        fill=\"none\"\n        :cx=\"center\"\n        :cy=\"center\"\n        :r=\"radius\"\n        :stroke-width=\"mergedPathStrokeWidth\"\n        :style=\"{\n          stroke: trackColor\n        }\"\n      />\n      <circle\n        :class=\"`${ns}__bar`\"\n        fill=\"none\"\n        :cx=\"center\"\n        :cy=\"center\"\n        :r=\"radius\"\n        :stroke-width=\"mergedStrokeWidth\"\n        :style=\"barStyle\"\n      />\n    </svg>\n    <div v-if=\"showText\" :class=\"[`${ns}__text`]\">\n      <slot name=\"text\" :percent=\"percent\">\n        {{ text }}\n      </slot>\n    </div>\n  </div>\n</template>\n"],"names":["perimeter"],"mappings":"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"}