hongluan-ui/es/components/progress/src/progress.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"progress.mjs","sources":["../../../../../../packages/components/progress/src/progress.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"progressRef\"\n    :class=\"[\n      namespace,\n      !showText ? 'no-label' : '',\n      round ? 'round' : '',\n      align ? align : '',\n      showAs\n    ]\"\n  >\n    <slot v-if=\"showAs === 'line'\" v-bind=\"slotData\">\n      <div class=\"progress-content\">\n        <span class=\"progress-label\">{{ text }}</span>\n        <span class=\"progress-percentage\">{{ content }}</span>\n      </div>\n    </slot>\n    <template v-if=\"showAs === 'stack'\">\n      <div class=\"progress-wrap\">\n        <div\n          v-for=\"(item, index) in stack\"\n          :key=\"index\"\n          :class=\"['progress-bar', item.type ? item.type : '', item.striped ? 'striped' : '', item.active ? 'is-active' : '', item.indicating ? 'indicating' : '']\"\n          :style=\"{ width: item.percentage + '%' }\"\n          role=\"progressbar\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          :aria-valuenow=\"item.percentage\"\n        >\n          <slot v-bind=\"item\">\n            <span class=\"progress-label\">\n              {{ item.format ? item.format(item.percentage) : `${item.percentage}%` }}\n            </span>\n          </slot>\n        </div>\n      </div>\n    </template>\n    <div\n      v-else-if=\"showAs === 'circle' || showAs === 'dashboard'\"\n      class=\"progress-circle\"\n      :style=\"[\n        trackColor ? `--progress-track-bg-color: ${trackColor}` : '',\n      ]\"\n    >\n      <svg viewBox=\"0 0 100 100\">\n        <path :class=\"['progress-circle-track', type ? type : '']\" :d=\"trackPath\" fill=\"none\" :stroke-linecap=\"strokeLinecap\" :style=\"trailPathStyle\" />\n        <path :class=\"['progress-circle-path', type ? type : '']\" :d=\"trackPath\" fill=\"none\" :stroke-linecap=\"strokeLinecap\" :style=\"circlePathStyle\" />\n      </svg>\n      <div class=\"progress-content\">\n        <slot v-bind=\"slotData\">\n          <span class=\"progress-percentage\">{{ content }}</span>\n          <span class=\"progress-label\">{{ text }}</span>\n        </slot>\n      </div>\n    </div>\n    <div v-else class=\"progress-wrap\" :style=\"[trackColor ? `--progress-track-bg-color: ${trackColor}` : '']\">\n      <div\n        :class=\"['progress-bar', type ? type : '', striped ? 'striped' : '', active ? 'is-active' : '', indicating ? 'indicating' : '']\"\n        :style=\"[barStyle, strokeWidth ? `--progress-height: ${strokeWidth}` : '']\"\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        :aria-valuenow=\"percentage\"\n      >\n        <slot v-if=\"showAs !== 'line'\" v-bind=\"slotData\">\n          <span class=\"progress-label\">{{ text }}</span>\n          <span class=\"progress-percentage\">{{ content }}</span>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang='ts'>\nimport { computed, defineComponent, onMounted, ref } from 'vue'\nimport { useNamespace } from '@hongluan-ui/hooks'\nimport { getStyle } from '@hongluan-ui/utils'\nimport { progressProps } from './progress'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'Progress',\n  props: progressProps,\n  setup(props) {\n    const { namespace } = useNamespace('progress')\n    const progressRef = ref<HTMLElement>(null)\n    const pathWidth = ref('')\n\n    const relativeStrokeWidth = computed(() => {\n      let width: number\n      if (props.strokeWidth) {\n        width = Number.parseFloat(String(props.strokeWidth))\n      } else {\n        width = Number.parseFloat(pathWidth.value)\n      }\n      return Number.isNaN(width) ? 0 : width\n    })\n\n    const radius = computed(() => {\n      if (props.showAs === 'circle' || props.showAs === 'dashboard') {\n        return Number.parseInt(`${50 - relativeStrokeWidth.value / 2}`, 10)\n      } else {\n        return 0\n      }\n    })\n\n    const trackPath = computed(() => {\n      const r = radius.value\n      const isDashboard = props.showAs === '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.showAs === '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<CSSProperties>(() => {\n      let style = {\n        strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,\n        strokeDashoffset: strokeDashoffset.value,\n      }\n      if (props.strokeWidth) {\n        const width = Number.parseFloat(String(props.strokeWidth))\n        !Number.isNaN(width) && Object.assign(style, { strokeWidth: width })\n      }\n      return style\n    })\n\n    const circlePathStyle = computed<CSSProperties>(() => {\n      let style = {\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',\n      }\n      if (props.strokeWidth) {\n        const width = Number.parseFloat(String(props.strokeWidth))\n        !Number.isNaN(width) && Object.assign(style, { strokeWidth: props.percentage ? width : 0 })\n      }\n      if (!props.percentage) {\n        Object.assign(style, { strokeWidth: 0 })\n      }\n      if (props.color) {\n        Object.assign(style, { stroke: getCurrentColor(props.percentage) })\n      }\n      return style\n    })\n\n    const barStyle = computed<CSSProperties>(() => {\n      return {\n        width: `${props.percentage}%`,\n        '--progress-bar-bg-color': getCurrentColor(props.percentage),\n      }\n    })\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 stackBarStyle = computed(percentage => {\n      return {\n        width: `${percentage}%`,\n      }\n    })\n\n    const content = computed(() => props.format(props.percentage))\n\n    const slotData = computed(() => {\n      return {\n        text: props.text,\n        percentage: props.percentage,\n      }\n    })\n\n    onMounted(() => {\n      const path = progressRef.value.querySelector('path') as unknown as HTMLElement\n      pathWidth.value = getStyle(path, 'strokeWidth')\n    })\n\n    return {\n      namespace,\n      progressRef,\n      barStyle,\n      slotData,\n      content,\n      stackBarStyle,\n      radius,\n      trackPath,\n      perimeter,\n      rate,\n      strokeDashoffset,\n      trailPathStyle,\n      circlePathStyle,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementVNode","_normalizeClass"],"mappings":"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"}