tdesign-mobile-vue
Version:
tdesign-mobile-vue
1 lines • 14.6 kB
Source Map (JSON)
{"version":3,"file":"progress.mjs","sources":["../../src/progress/progress.tsx"],"sourcesContent":["import { defineComponent, computed, CSSProperties, VNode } from 'vue';\nimport { CheckCircleFilledIcon, ErrorCircleFilledIcon, CheckIcon, CloseIcon, ErrorIcon } from 'tdesign-icons-vue-next';\nimport { isString, isObject } from 'lodash-es';\nimport { usePrefixClass } from '../hooks/useClass';\nimport { useTNodeJSX } from '../hooks/tnode';\nimport { getBackgroundColor } from './utils';\nimport props from './props';\nimport { PRO_THEME, STATUS_ICON, PLUMP_SEPARATE } from '../_common/js/progress/const';\nimport { getDiameter, getCircleStokeWidth } from '../_common/js/progress/utils';\nimport config from '../config';\n\nconst { prefix } = config;\n\nexport default defineComponent({\n name: `${prefix}-progress`,\n props,\n setup(props) {\n const renderTNodeJSX = useTNodeJSX();\n const progressClass = usePrefixClass('progress');\n\n const computedStatus = 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 getIconMap = () => {\n const CIRCLE_ICONS = {\n success: CheckIcon,\n warning: ErrorIcon,\n error: CloseIcon,\n };\n const NORMAL_ICONS = {\n success: CheckCircleFilledIcon,\n warning: ErrorCircleFilledIcon,\n error: ErrorCircleFilledIcon,\n };\n return props.theme === PRO_THEME.CIRCLE ? CIRCLE_ICONS : NORMAL_ICONS;\n };\n\n // theme=circle 获取直径\n const diameter = computed(() => {\n return getDiameter(props.size);\n });\n\n const rPoints = computed(() => {\n return diameter.value / 2;\n });\n\n const circleStrokeWidth = computed(() => {\n return getCircleStokeWidth(props.strokeWidth, props.size);\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 return {\n width: `${diameter.value}px`,\n height: `${diameter.value}px`,\n };\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 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 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={[`${progressClass.value}__icon`]}></component>;\n }\n }\n return labelContent;\n };\n return () => {\n const labelContent = props.label && (\n <div class={`${progressClass.value}__info`}>{renderTNodeJSX('label', getLabelContent())}</div>\n );\n\n const separateClasses =\n props.percentage > PLUMP_SEPARATE ? `${progressClass.value}--over-ten` : `${progressClass.value}--under-ten`;\n return (\n <div class={progressClass.value}>\n {props.theme === PRO_THEME.LINE && (\n <div class={`${progressClass.value}--thin ${progressClass.value}--status-${computedStatus.value}`}>\n <div class={`${progressClass.value}__bar`} style={trackBgStyle.value}>\n <div class={`${progressClass.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 `${progressClass.value}__bar ${progressClass.value}--plump ${separateClasses}`,\n { [`${progressClass.value}--status-${computedStatus.value}`]: computedStatus.value },\n ]}\n style={trackBgStyle.value}\n >\n <div class={`${progressClass.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={`${progressClass.value}--circle ${progressClass.value}--status-${computedStatus.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={[`${progressClass.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={[`${progressClass.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":["prefix","config","defineComponent","name","props","setup","renderTNodeJSX","useTNodeJSX","progressClass","usePrefixClass","computedStatus","computed","percentage","status","trackBgStyle","style","strokeWidth","height","isString","concat","borderRadius","trackColor","backgroundColor","barStyle","width","background","color","getBackgroundColor","getIconMap","CIRCLE_ICONS","success","CheckIcon","warning","ErrorIcon","error","CloseIcon","NORMAL_ICONS","CheckCircleFilledIcon","ErrorCircleFilledIcon","theme","PRO_THEME","CIRCLE","diameter","getDiameter","size","rPoints","value","circleStrokeWidth","getCircleStokeWidth","radius","circleStyle","strokeDashArr","perimeter","Math","PI","percent","circlePathStyle","strokeColor","isObject","stroke","circleOuterStyle","getLabelContent","labelContent","STATUS_ICON","includes","PLUMP","components","component","_createVNode","label","separateClasses","PLUMP_SEPARATE","LINE","_defineProperty"],"mappings":"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"}