{"version":3,"file":"circle.vue.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":["_openBlock","_createElementBlock","percent","_normalizeClass","ns","_createElementVNode","center","radius","trackColor","showText"],"mappings":";;;;;;;;AAqII,SAAA,YAAc,IAAG,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;AACjB,EAAA,OAAAA,SAAA,EAAmB,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,IAClB,eAAeC,EAAAA,GAAAA;AAAAA,IACf,eAAK,EAAA,KAAA;AAAA,IACL,iBAAK,IAAA,CAAA,OAAA;AAAA,IAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,GAAA,CAAA;AAAA,yBAEN,CAAA,EAqBM,KAAA,EAAA,CAAA,EAAA,IAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA;AAAA,GAAA,EAAA;AAAA,KArBoDH,SAAA,EAAA,EAAAC,kBAAA,CAAMG,KAAE,EAAA;AAAA,MAAA,OAAA,EAAA,CAAA,IAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAAA,MAChE,OAUED,cAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,CAAA;AAAA,KAAA,EAAA;AAAA,MARWE,mBAAA,QAAA,EAAA;AAAA,QACV,KAAIC,EAAAA,cAAAA,CAAM,CAAA,EAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA;AAAA,QACV,IAAIA,EAAAA,MAAAA;AAAAA,QACJ,IAAGC,IAAAA,CAAAA,MAAAA;AAAAA,QACH,IAAA,IAAA,CAAA,MAAA;AAAA,QACA,GAAK,IAAA,CAAA,MAAA;AAAA,QAAsBC,gBAAAA,IAAAA,CAAAA,qBAAAA;AAAAA,QAAAA,OAAAA,cAAAA,CAAAA;AAAAA;SAI9B,CAAA;AAAA,OAAA,EACG,IAAK,EAAA,EAAA,EAAO,UAAA,CAAA;AAAA,MACFH,mBAAA,QAAA,EAAA;AAAA,QACV,KAAIC,EAAAA,cAAAA,CAAM,CAAA,EAAA,IAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA;AAAA,QACV,IAAIA,EAAAA,MAAAA;AAAAA,QACJ,IAAGC,IAAAA,CAAAA,MAAAA;AAAAA,QACH,IAAA,IAAA,CAAA,MAAA;AAAA,QACA,GAAK,IAAA,CAAA,MAAA;AAAA,QAAA,gBAAA,IAAA,CAAA,iBAAA;AAAA;OAGCE,EAAQ,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAAA,KAAnB,EAAA,IAAA,UAAA,CAAA;AAAA,IAA2B,IAAA,CAAA,QAAA,IAAAT,SAAA,EAAA,EAAAC,kBAAA;AAAA,MAAMG,KAAAA;AAAAA,MAAE;AAAA,QAAA,GAAA,EAAA,CAAA;AAAA,QACjC,OAAAD,cAEO,CAAA,CAFmB,CAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAAA,OAAA;AAAA;;;;;;;;;;;;;;;;;;"}