xdesign-vue-next/es/progress/progress.mjs.map

XDesign Component for vue-next

{"version":3,"file":"progress.mjs","sources":["../../src/progress/progress.tsx"],"sourcesContent":["import { defineComponent, VNode, computed, CSSProperties } from 'vue';\n\nimport { getBackgroundColor } from '../utils/helper';\nimport { PRO_THEME, CIRCLE_SIZE, CIRCLE_SIZE_PX, STATUS_ICON, CIRCLE_FONT_SIZE_RATIO } from './constants';\nimport props from './props';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport { useTNodeJSX } from '../hooks/tnode';\nimport isObject from 'lodash/isObject';\nimport isString from 'lodash/isString';\n\nexport default defineComponent({\n  name: 'XProgress',\n  props,\n  setup(props) {\n    const renderTNodeJSX = useTNodeJSX();\n    const COMPONENT_NAME = usePrefixClass('progress');\n\n    const statusStyle = computed(() => {\n      if (props.percentage >= 100) {\n        return 'success';\n      }\n      return props.status || 'default';\n    });\n\n    const trackBgStyle = computed(() => {\n      const style: CSSProperties = {};\n      if (props.strokeWidth) {\n        const height = isString(props.strokeWidth) ? props.strokeWidth : `${props.strokeWidth}px`;\n        style.height = height;\n        style.borderRadius = height;\n      }\n      if (props.trackColor) {\n        style.backgroundColor = props.trackColor;\n      }\n      return style;\n    });\n\n    const barStyle = computed(() => {\n      return {\n        width: `${props.percentage}%`,\n        background: props.color && getBackgroundColor(props.color),\n      };\n    });\n\n    const circlePathStyle = computed(() => {\n      const strokeColor = isObject(props.color) ? '' : props.color;\n      return {\n        stroke: strokeColor,\n      };\n    });\n\n    const circleOuterStyle = computed(() => {\n      const strokeColor = isObject(props.trackColor) ? '' : props.trackColor;\n      return {\n        stroke: strokeColor,\n      };\n    });\n\n    // theme=circle 获取直径\n    const diameter = computed(() => {\n      let diameter = CIRCLE_SIZE_PX.MEDIUM;\n      if (!props.size) {\n        return diameter;\n      }\n      const { SMALL, LARGE, MEDIUM } = CIRCLE_SIZE;\n      switch (props.size) {\n        case SMALL:\n          diameter = CIRCLE_SIZE_PX.SMALL;\n          break;\n        case MEDIUM:\n          diameter = CIRCLE_SIZE_PX.MEDIUM;\n          break;\n        case LARGE:\n          diameter = CIRCLE_SIZE_PX.LARGE;\n          break;\n        default:\n          diameter = Number(props.size);\n          break;\n      }\n      return diameter;\n    });\n\n    const rPoints = computed(() => {\n      return diameter.value / 2;\n    });\n\n    const radius = computed(() => {\n      return rPoints.value - circleStrokeWidth.value / 2;\n    });\n\n    const circleStyle = computed(() => {\n      if (props.theme !== PRO_THEME.CIRCLE) {\n        return {};\n      }\n\n      let fontSize = diameter.value * CIRCLE_FONT_SIZE_RATIO.MEDIUM;\n      if (diameter.value <= CIRCLE_SIZE_PX.SMALL) {\n        fontSize = diameter.value * CIRCLE_FONT_SIZE_RATIO.SMALL;\n      } else if (diameter.value >= CIRCLE_SIZE_PX.LARGE) {\n        fontSize = diameter.value * CIRCLE_FONT_SIZE_RATIO.LARGE;\n      }\n\n      return {\n        width: `${diameter.value}px`,\n        height: `${diameter.value}px`,\n        fontSize: `${fontSize}px`,\n      };\n    });\n\n    const circleStrokeWidth = computed(() => {\n      const defaultWidth = props.size === CIRCLE_SIZE.SMALL ? 4 : 6;\n      return props.strokeWidth ? Number(props.strokeWidth) : defaultWidth;\n    });\n\n    const strokeDashArr = computed(() => {\n      const radius = (diameter.value - circleStrokeWidth.value) / 2;\n      const perimeter = Math.PI * 2 * radius;\n      const percent = props.percentage / 100;\n      return `${perimeter * percent}  ${perimeter * (1 - percent)}`;\n    });\n\n    const getIconMap = () => {\n      const CIRCLE_ICONS = {\n        success: <icon-ri-check-line />,\n        warning: <icon-ri-alert-line/>,\n        error: <icon-ri-close-line />,\n      };\n      const NORMAL_ICONS = {\n        success: <icon-ri-checkbox-circle-fill />,\n        warning: <icon-ri-error-warning-fill />,\n        error: <icon-ri-close-circle-fill />,\n      };\n      return props.theme === PRO_THEME.CIRCLE ? CIRCLE_ICONS : NORMAL_ICONS;\n    };\n    const getLabelContent = () => {\n      let labelContent: string | VNode = `${props.percentage}%`;\n      const status = props.status || '';\n      if (STATUS_ICON.includes(status) && props.theme !== PRO_THEME.PLUMP) {\n        const components = getIconMap();\n        const component = components[status];\n        if (component) {\n          labelContent = <component class={[`${COMPONENT_NAME.value}__icon`]}></component>;\n        }\n      }\n      return labelContent;\n    };\n\n    return () => {\n      const labelContent = (\n        <div class={`${COMPONENT_NAME.value}__info`}>{renderTNodeJSX('label', getLabelContent())}</div>\n      );\n      // 进度大于 10 ，进度百分比显示在内部；进度百分比小于 10 进度显示在外部\n      const PLUMP_SEPARATE = 10;\n      const separateClasses =\n        props.percentage > PLUMP_SEPARATE ? `${COMPONENT_NAME.value}--over-ten` : `${COMPONENT_NAME.value}--under-ten`;\n      return (\n        <div class={COMPONENT_NAME.value}>\n          {props.theme === PRO_THEME.LINE && (\n            <div class={`${COMPONENT_NAME.value}--thin ${COMPONENT_NAME.value}--status--${statusStyle.value}`}>\n              <div class={`${COMPONENT_NAME.value}__bar`} style={trackBgStyle.value}>\n                <div class={`${COMPONENT_NAME.value}__inner`} style={barStyle.value}></div>\n              </div>\n              {labelContent}\n            </div>\n          )}\n\n          {props.theme === PRO_THEME.PLUMP && (\n            <div\n              class={[\n                `${COMPONENT_NAME.value}__bar ${COMPONENT_NAME.value}--plump ${separateClasses}`,\n                { [`${COMPONENT_NAME.value}--status--${statusStyle.value}`]: statusStyle.value },\n              ]}\n              style={trackBgStyle.value}\n            >\n              <div class={`${COMPONENT_NAME.value}__inner`} style={barStyle.value}>\n                {props.percentage > PLUMP_SEPARATE && labelContent}\n              </div>\n              {props.percentage <= PLUMP_SEPARATE && labelContent}\n            </div>\n          )}\n\n          {props.theme === PRO_THEME.CIRCLE && (\n            <div\n              class={`${COMPONENT_NAME.value}--circle ${COMPONENT_NAME.value}--status--${statusStyle.value}`}\n              style={circleStyle.value}\n            >\n              {labelContent}\n              <svg width={diameter.value} height={diameter.value} viewBox={`0 0 ${diameter.value} ${diameter.value}`}>\n                <circle\n                  cx={rPoints.value}\n                  cy={rPoints.value}\n                  r={radius.value}\n                  stroke-width={circleStrokeWidth.value}\n                  fill=\"none\"\n                  class={[`${COMPONENT_NAME.value}__circle-outer`]}\n                  style={circleOuterStyle.value}\n                />\n                {props.percentage > 0 && (\n                  <circle\n                    cx={rPoints.value}\n                    cy={rPoints.value}\n                    r={radius.value}\n                    stroke-width={circleStrokeWidth.value}\n                    fill=\"none\"\n                    stroke-linecap=\"round\"\n                    class={[`${COMPONENT_NAME.value}__circle-inner`]}\n                    transform={`matrix(0,-1,1,0,0,${diameter.value})`}\n                    stroke-dasharray={strokeDashArr.value}\n                    style={circlePathStyle.value}\n                  />\n                )}\n              </svg>\n            </div>\n          )}\n        </div>\n      );\n    };\n  },\n});\n"],"names":["name","props","isString","style","width","isObject","stroke","diameter","fontSize","height","success","_resolveComponent","warning","_createVNode"],"mappings":"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"}