UNPKG

tdesign-mobile-vue

Version:
211 lines (207 loc) 8.41 kB
/** * tdesign v1.7.0 * (c) 2024 TDesign Group * @license MIT */ import { _ as _defineProperty } from '../_chunks/dep-219bb5a7.mjs'; import { defineComponent, computed, createVNode } from 'vue'; import { CheckIcon, ErrorIcon, CloseIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-vue-next'; import { i as isObject_1 } from '../_chunks/dep-e6c129ab.mjs'; import { i as isString_1 } from '../_chunks/dep-6303c50c.mjs'; import { usePrefixClass } from '../hooks/useClass.mjs'; import { useTNodeJSX } from '../hooks/tnode.mjs'; import { getBackgroundColor } from './utils.mjs'; import props from './props.mjs'; import { PRO_THEME, CIRCLE_SIZE_PX, STATUS_ICON, PLUMP_SEPARATE } from './constants.mjs'; import config from '../config.mjs'; import '../_chunks/dep-620d73f7.mjs'; import '../_chunks/dep-8bf3054e.mjs'; import '../_chunks/dep-3d249f65.mjs'; import '../_chunks/dep-019e292f.mjs'; import '../_chunks/dep-32364550.mjs'; import '../_chunks/dep-9b2de386.mjs'; import '../_chunks/dep-b9b8ead5.mjs'; import '../_chunks/dep-91d696ea.mjs'; import '../_chunks/dep-6c53a3e4.mjs'; import '../_chunks/dep-d2161895.mjs'; import '../_chunks/dep-89951f45.mjs'; import '../_chunks/dep-08bc7a4c.mjs'; import '../_chunks/dep-6bc862af.mjs'; import '../_chunks/dep-4931819d.mjs'; import '../_chunks/dep-10f4d030.mjs'; import '../_chunks/dep-8ee6f5cd.mjs'; import '../_chunks/dep-e57d46f3.mjs'; import '../_chunks/dep-4f44985d.mjs'; import '../_chunks/dep-b84be35c.mjs'; import '../_chunks/dep-933f3a85.mjs'; import '../_chunks/dep-2bce42ea.mjs'; import '../_chunks/dep-ac139980.mjs'; import '../_chunks/dep-154c1925.mjs'; import '../_chunks/dep-ba131d9c.mjs'; import '../_chunks/dep-007f294e.mjs'; import '../_common/js/global-config/mobile/default-config.mjs'; import '../_common/js/global-config/mobile/locale/zh_CN.mjs'; import '../_chunks/dep-161f0c44.mjs'; import '../_chunks/dep-5fd0eaa4.mjs'; import '../_chunks/dep-3c59bf72.mjs'; import '../config-provider/type.mjs'; import '../_chunks/dep-60cadef8.mjs'; import '../_chunks/dep-8140c29b.mjs'; import '../_chunks/dep-0d52e58f.mjs'; import '../_chunks/dep-a836a38c.mjs'; import '../_chunks/dep-0ea7bbde.mjs'; import '../_chunks/dep-b437ef0b.mjs'; import '../_chunks/dep-6917b9bc.mjs'; import '../hooks/render-tnode.mjs'; import '../_chunks/dep-40507aac.mjs'; import '../_chunks/dep-8ece47c6.mjs'; var prefix = config.prefix; var _Progress = defineComponent({ name: "".concat(prefix, "-progress"), props: props, setup: function setup(props2) { var renderTNodeJSX = useTNodeJSX(); var progressClass = usePrefixClass("progress"); var computedStatus = computed(function () { if (props2.percentage >= 100) { return "success"; } return props2.status || "default"; }); var trackBgStyle = computed(function () { var style = {}; if (props2.strokeWidth) { var height = isString_1(props2.strokeWidth) ? props2.strokeWidth : "".concat(props2.strokeWidth, "px"); style.height = height; style.borderRadius = height; } if (props2.trackColor) { style.backgroundColor = props2.trackColor; } return style; }); var barStyle = computed(function () { return { width: "".concat(props2.percentage, "%"), background: props2.color && getBackgroundColor(props2.color) }; }); var getIconMap = function getIconMap() { var CIRCLE_ICONS = { success: CheckIcon, warning: ErrorIcon, error: CloseIcon }; var NORMAL_ICONS = { success: CheckCircleFilledIcon, warning: ErrorCircleFilledIcon, error: ErrorCircleFilledIcon }; return props2.theme === PRO_THEME.CIRCLE ? CIRCLE_ICONS : NORMAL_ICONS; }; var diameter = computed(function () { return CIRCLE_SIZE_PX; }); var rPoints = computed(function () { return diameter.value / 2; }); var circleStrokeWidth = computed(function () { return props2.strokeWidth ? Number(props2.strokeWidth) : 6; }); var radius = computed(function () { return rPoints.value - circleStrokeWidth.value / 2; }); var circleStyle = computed(function () { if (props2.theme !== PRO_THEME.CIRCLE) { return {}; } return { width: "".concat(diameter.value, "px"), height: "".concat(diameter.value, "px") }; }); var strokeDashArr = computed(function () { var radius2 = (diameter.value - circleStrokeWidth.value) / 2; var perimeter = Math.PI * 2 * radius2; var percent = props2.percentage / 100; return "".concat(perimeter * percent, " ").concat(perimeter * (1 - percent)); }); var circlePathStyle = computed(function () { var strokeColor = isObject_1(props2.color) ? "" : props2.color; return { stroke: strokeColor }; }); var circleOuterStyle = computed(function () { var strokeColor = isObject_1(props2.trackColor) ? "" : props2.trackColor; return { stroke: strokeColor }; }); var getLabelContent = function getLabelContent() { var labelContent = "".concat(props2.percentage, "%"); var status = props2.status || ""; if (STATUS_ICON.includes(status) && props2.theme !== PRO_THEME.PLUMP) { var components = getIconMap(); var component = components[status]; if (component) { labelContent = createVNode(component, { "class": ["".concat(progressClass.value, "__icon")] }, null); } } return labelContent; }; return function () { var labelContent = props2.label && createVNode("div", { "class": "".concat(progressClass.value, "__info") }, [renderTNodeJSX("label", getLabelContent())]); var separateClasses = props2.percentage > PLUMP_SEPARATE ? "".concat(progressClass.value, "--over-ten") : "".concat(progressClass.value, "--under-ten"); return createVNode("div", { "class": progressClass.value }, [props2.theme === PRO_THEME.LINE && createVNode("div", { "class": "".concat(progressClass.value, "--thin ").concat(progressClass.value, "--status-").concat(computedStatus.value) }, [createVNode("div", { "class": "".concat(progressClass.value, "__bar"), "style": trackBgStyle.value }, [createVNode("div", { "class": "".concat(progressClass.value, "__inner"), "style": barStyle.value }, null)]), labelContent]), props2.theme === PRO_THEME.PLUMP && createVNode("div", { "class": ["".concat(progressClass.value, "__bar ").concat(progressClass.value, "--plump ").concat(separateClasses), _defineProperty({}, "".concat(progressClass.value, "--status-").concat(computedStatus.value), computedStatus.value)], "style": trackBgStyle.value }, [createVNode("div", { "class": "".concat(progressClass.value, "__inner"), "style": barStyle.value }, [props2.percentage > PLUMP_SEPARATE && labelContent]), props2.percentage <= PLUMP_SEPARATE && labelContent]), props2.theme === PRO_THEME.CIRCLE && createVNode("div", { "class": "".concat(progressClass.value, "--circle ").concat(progressClass.value, "--status-").concat(computedStatus.value), "style": circleStyle.value }, [labelContent, createVNode("svg", { "width": diameter.value, "height": diameter.value, "viewBox": "0 0 ".concat(diameter.value, " ").concat(diameter.value) }, [createVNode("circle", { "cx": rPoints.value, "cy": rPoints.value, "r": radius.value, "stroke-width": circleStrokeWidth.value, "fill": "none", "class": ["".concat(progressClass.value, "__circle-outer")], "style": circleOuterStyle.value }, null), props2.percentage > 0 && createVNode("circle", { "cx": rPoints.value, "cy": rPoints.value, "r": radius.value, "stroke-width": circleStrokeWidth.value, "fill": "none", "stroke-linecap": "round", "class": ["".concat(progressClass.value, "__circle-inner")], "transform": "matrix(0,-1,1,0,0,".concat(diameter.value, ")"), "stroke-dasharray": strokeDashArr.value, "style": circlePathStyle.value }, null)])])]); }; } }); export { _Progress as default }; //# sourceMappingURL=progress.mjs.map