UNPKG

tdesign-mobile-vue

Version:
1 lines 14.6 kB
{"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 isObject from 'lodash/isObject';\nimport isString from 'lodash/isString';\nimport { usePrefixClass } from '../hooks/useClass';\nimport { useTNodeJSX } from '../hooks/tnode';\nimport { getBackgroundColor } from './utils';\nimport props from './props';\nimport { PRO_THEME, CIRCLE_SIZE_PX, STATUS_ICON, PLUMP_SEPARATE } from './constants';\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 CIRCLE_SIZE_PX;\n });\n\n const rPoints = computed(() => {\n return diameter.value / 2;\n });\n\n const circleStrokeWidth = computed(() => {\n return props.strokeWidth ? Number(props.strokeWidth) : 6;\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","CIRCLE_SIZE_PX","rPoints","value","circleStrokeWidth","Number","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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"}